Leaderboard

This week's blog post is written by Jonathan Lahijani where he writes about the works he's done with CMS Critic: Read the blog post at: http://processwire.com/blog/posts/cms-critic-powered-by-processwire-again-case-study/

It's not even running all supplied queries if it doesn't need to. So it's should actually be quite performant in that regard.

Introducing the new "User Bar" If enabled (currently off by default), this bar is displayed for users that don't have Debug bar permissions (typically all non-superusers) Currently it has three features: Admin, Edit Page. Page Versions The first two are simply links from the front-end to the root of the admin panel, and a link to edit the current page in the admin panel. These are quite similar to horst's ALIF module, but I was thinking if you are using Tracy anyway, then why not have it provide these buttons for other users who have editing permissions. Now for the first of the unique features: Page Versions. This is a simplified version of the Template Path panel that is available from the Debug Bar. It is also similar to the User Dev Template option, but this one allows the user to try multiple options that you provide. Remember you can always have the alternate template files load different js/css etc files as well, so you can provide a very different version of a page for your users to test. To make it more friendly for your clients/editors, the labels in the list are formatted to look like page names, rather than filenames. The user simply selects an option and the page instantly refreshes showing the page using the alternate version. Even if you have the Page Versions option selected in the config settings, it won't appear on the User Bar unless you have alternately named template files matching this pattern: "home-tracy-alternate-one.php" etc. The key things are the name of the template, plus "-tracy-", plus whatever you want to appear in the list of options, like "alternate-one", plus .php Users must also have the "tracy-page-versions" permission assigned to their role. My next goal for the User Bar is the Feedback / Tickets / Review functionality that was discussed earlier. I know this is starting to take this module beyond just a debugging tool, but I think it's nice to have all this stuff accessible from the same place, so that when you as the developer look for a user submitted support ticket, it will be part of the Tracy Debug Bar. Of course I am also planning a central admin interface for managing all tickets in one place, but I still think it makes sense to be able to submit them from the page in question and also view them from the page as well. It certainly needs some styling improvements etc, but is functional already. I will probably make it possible to define custom styling/positioning in the config settings. Please test carefully before enabling this new User Bar on a live site! Maybe it's time this module gets renamed as the "Tracy Developer Toolbox"

Repeaters have had a major overhaul since that comment by @tpr https://processwire.com/blog/posts/processwire-3.0.4-repeaters-revisited-preview-of-profields-matrix/#major-upgrades-to-repeater-fields https://processwire.com/blog/posts/more-repeaters-repeater-matrix-and-new-field-rendering/#repeater-upgrades-continued-in-pw-3.0.5 and there is also the new Repeater Matrix fieldtype: https://processwire.com/blog/posts/processwire-3.0.4-repeaters-revisited-preview-of-profields-matrix/#new-profields-repeater-matrix-field

This is by design. See this GitHub issue for more details. It's not the most consistent solution, but admittedly I've found it quite useful too.

Each item in the paginator array is a separate selector for a $pages->find() operation - the results are concatenated together for pagination. So just include or exclude templates for any selector in the array like you would normally for $pages->find($selector). So for your example: $result = $paginator(array( "headline~=$q, template!=profile", "introtext~=$q, template!=profile", "body|whatever~=$q, template!=profile" ), $input->pageNum, 25);

@Juergen: At the cost of a couple of extra DB queries, you can use my new favourite tool Paginator: (thanks @LostKobrakai) include 'src/Paginator.php'; include 'src/PagesPaginator.php'; $paginator = new PagesPaginator(); $result = $paginator(array( "headline~=$q", "introtext~=$q", "body|whatever~=$q" ), $input->pageNum, 25);

Simple Contact Form Using Google Recaptcha & Valitron validation library I just finished creating a simple Contact-Form for a client's website so i thought it would be really helpfull to share it with the community. The contact form uses: Google recaptcha for validating the user is not a robot (https://github.com/google/recaptcha) Valitron validation library for validating the form fields (https://github.com/vlucas/valitron) Twitter Bootstrap 3.0.0 for form HTML The contact-form is located inside a contact-page, so the bare minimum you need in order to setup your own is: contact.php (template file used by your contact-page) _contact-controller.php (file used as a controller for your contact-form functionality like send email, validate fields etc) 2 extra lines inside your composer.json file So, let's start: First you need to update your composer.json file adding 2 lines inside the require object: "vlucas/valitron": "^1.2", "google/recaptcha": "~1.1" Here is a sample composer.json file: { "name": "processwire/processwire", "type": "library", "description": "ProcessWire CMS/CMF", "keywords": [ "cms","cmf", "content management system" ], "homepage": "https://processwire.com", "authors": [ { "name": "Ryan Cramer", "email": "ryan@processwire.com", "homepage": "https://processwire.com", "role": "Developer" } ], "require": { "php": ">=5.3.8", "ext-gd": "*", "vlucas/valitron": "^1.2", "google/recaptcha": "~1.1" }, "autoload": { "files": [ "wire/core/ProcessWire.php" ] }, "minimum-stability": "dev" } open console and navigate to processwire root folder (where composer.json file is) on this step i assume you have already setup composer for your project, otherwise google it run the following command: composer update this will create a vendor folder (if it does not already exist) and download valitron and google recaptcha libraries. Then open your contact-page template file(usually named contact.php inside your templates directory) and add the following: * Note: The form below uses bootstrap 3.0.0 css, so if you are using something else you need to make the appropriate changes. <?php namespace ProcessWire; include('_contact-controller.php') ?> <div class="container"> <div class="row"> <div class=" col-md-4"> <h2>Contact Form</h2> <?php if($session->flashMessage):?> <div class="alert <?=!$session->sent && (!$v->validate() || !$resp->isSuccess()) ? 'alert-danger' : 'alert-success'?>" role="alert"> <?php echo $session->flashMessage;?> </div> <?php endif;?> <form id="contact-form" method="post"> <div class="form-group <?=$v->errors('name') ? 'has-error' : ''?>"> <label for="name">Name</label> <input class="form-control" name="name" id="name" type="text" value="<?=$sanitizer->text($input->post->name)?>"> </div> <div class="form-group <?=$v->errors('email') ? 'has-error' : ''?>"> <label for="email">Email</label> <input class="form-control" name="email" id="email" type="text" value="<?=$sanitizer->text($input->post->email)?>"> </div> <div class="form-group <?=$v->errors('message') ? 'has-error' : ''?>"> <label for="message">Message</label> <textarea class="form-control" name="message" id="message"><?=$sanitizer->text($input->post->message)?></textarea> </div> <div class="form-group"> <!-- Google Recaptcha code START --> <div class="g-recaptcha" data-sitekey="<?=$googleSiteKey?>"></div> <script type="text/javascript" src="https://www.google.com/recaptcha/api.js"> </script> <!-- Google Recaptcha code END --> </div> <button type="submit" class="btn btn-primary">SEND</button> </form> </div> </div> </div> <?php //here we remove the flash-message because it is already shown above the form. $session->remove('flashMessage'); //reset 'sent' variable for future submit $session->sent = false; ?> Next create a file inside you templates directory with name: _contact-controller.php: and set the required variables($googleSiteKey, $contactFormRecipient, $contactPageID) <?php namespace ProcessWire; /** * here we include Valitron & Google recaptcha libraries * make sure the path is correct in your template */ include(dirname(__FILE__) . "/../../vendor/vlucas/valitron/src/Valitron/Validator.php"); include(dirname(__FILE__) . '/../../vendor/google/recaptcha/src/ReCaptcha/ReCaptcha.php'); /** * here we add the form field values to Valitron */ $v = new \Valitron\Validator(array( 'name' => $sanitizer->text($input->post->name), 'email' => $sanitizer->email($input->post->email), 'message' => $sanitizer->text($input->post->message), ) ); /** * validation rules set for each form field * For more details on Valitron/Validator usage visit: * https://github.com/vlucas/valitron */ $v->rule('required', ['name', 'email', 'message']); $v->rule('lengthMin', 'name', 5); $v->rule('email', 'email'); /** * set Google recaptcha site-key & secret-key * create a new key from: https://www.google.com/recaptcha/admin */ $googleSiteKey = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'; $googleSecretKey = 'YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY'; /** * set the email of the contact form recipient(usually the website owner) */ $contactFormRecipient = 'your@company.com'; /** * set the id of contact-page in order to redirect there when the form is sent */ $contactPageID = '1045'; //here we check whether the 'name' field exists inside post variables (which means the form is posted) if ($input->post->name) { //if fields validation passes if ($v->validate()) { $reCaptcha = new \ReCaptcha\ReCaptcha($googleSecretKey); $resp = $reCaptcha->verify($input->post->{'g-recaptcha-response'}, $_SERVER["REMOTE_ADDR"]); //if google-recaptcha validation passes if ($resp->isSuccess()) { //This is the HTML message $message = ' <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Contact Form | ' . $input->post->name . '</title> </head> <body> <p>' . $input->post->message . '</p> </body> </html>'; //here we send the form to $contactFormRecipient wireMail($contactFormRecipient, $input->post->email, "Contact Form | " . $input->post->name, $message); //here we set a flash-message to notify the user that the form was successfully sent $session->flashMessage = 'Thank you for your message! We will get in touch with you shortly.'; //save in session that the form is sent $session->sent = true; //finally redirect user to contact-page $session->redirect($pages->get($contactPageID)->url); } else { //self explain $session->flashMessage = 'Error while validating you are not a robot!'; } } } ?> Thats all! You now have a simple contact-form working with captcha and field validation! I would be more than happy to help anyone having problems on the setup.

https://github.com/ryancramerdesign/ProcessWire/search?utf8=✓&q="function+message" That should give you an idea of what the message() method does in various contexts. Basically it is for sending a message (green for success). You can also use: error() for red. https://github.com/ryancramerdesign/ProcessWire/search?utf8=✓&q="function+error" The default method for each of these is the one in the Wire.php file Most(all?) of the versions are in classes that extend Wire, so they are extending that base method.

I have added some simple styling options for the User Bar. Definitely nothing fancy yet, so let me know if there are any particular settings you'd like to be able to tweak. It can definitely look a lot more stylish now, eg.

Great post @giannisok Thanks for the detailed instruction and code.

@ryan and @Jonathan Lahijani First of all, thanks for the blog post, I really enjoyed it and learnt a few more things to guide my future ProcessWire based development efforts. Second, a couple of suggestions: An extra "these" should probably be removed: "...making these these dependencies work nicely..." And more importantly: the WORDPRESS VS. PROCESSWIRE chart could be updated with links to the modules in question as well. During our forum support sessions, it will be a very useful chart to point to when dealing with beginners coming with some WordPress background. By including the missing links to the modules the chart can be made more useful in this regard.

Hey @Manu, welcome to the forums. Have you already read / tried this troubleshooting guide? http://processwire.com/docs/tutorials/troubleshooting-guide/ What have you done to solve your first issue?

A tipp for your setup. If you choose a parent page that is not under the /admin/ page you could use this snippet at the start of every block_template to hide pages from frontend access via url: <?php // the pageurl is hit this template file directly. if ($page->url == $_SERVER["REQUEST_URI"]) { throw new Wire404Exception(); // show 404 page } But put everthing under admin is better solution...i don't read the docs to deep at start, too I use this module as kind of WYSIWYG blockbuilder on most installations and the largest amounth of blocks is ~ 300 for now....pages are scaling very well in PW. Some drive sites with several thausand pages under one parent... regards mr-fan

You can use a hook to append a formatted created date to the end of the page list label. In /site/ready.php... $this->addHookAfter('ProcessPageListRender::getPageLabel', function($event) { $page = $event->arguments('page'); $created = date('d/m/y', $page->created); $event->return .= " $created"; });

As far as I know a fulltext search with ~= or *= will return results by relevance/score that's built in mysql. But %= is wildcard like search not fulltext. I'm not sure that's by relevance in order of search fields. For far more powerful search that's also fast on very large scale can do fuzzy searches etc, one would have to consider using a tool like apache lucene or elastic search or alike.

Another approach, what works automatically everytime, and without additional support, (updating version numbers) can be: $timestamp = filemtime($config->paths->templates . 'scripts/myJsFile.js'); $myJsFile = $config->urls->templates . "scripts/myJsFile.js?ts={$timestamp}"; $config->scripts->add($myJsFile); I'm to lazy to add version numbers to all and everything. Also, last modified filetime is foolproof, not updated version number is not.

@giannisok i've went ahead and split your post into a new topic over here: https://processwire.com/talk/topic/14206-contact-form-tutorial/ Because your form is not really a module/plugin i thought it best to move it to the tutorials section. Let me know if this is okay.

While by at this, the Lightwire skin will also an option for this submodule. I will apply some default CKE configuration for plugins but if the user uses a custom config.js then these defaults will be overwritten. This submodule is going to be a great timesaver for me, at least

I don't get any commissions from ServInt. But they do provide a dedicated server for the ProcessWire project, which we don't have to pay for. I think this is really awesome of them to support the ProcessWire project in this way. If you get an account with Servint it's good to mention ProcessWire, just as a way to say thanks, if you want to. But just wanted to mention that nobody is getting any commissions or payments. We all are getting a great server, because Servint likes ProcessWire and supports open source.

Sounds great, I look forward to seeing it. As promised, here's a full example of a simple contact form. This is bare bones, but safe. I've left out spam prevention measures, which I'll be happy to follow-up with if you'd like. Below is an entire template file. I figured it was simpler to show this way rather than splitting into multiple files. Though when forms get really large, I tend to split them in multiple files (and include them). But for smaller forms, I do it like the example below. /site/templates/contact.php <?php $sent = false; $error = ''; $emailTo = 'nikola@company.com'; // or pull from PW page field // sanitize form values or create empty $form = array( 'fullname' => $sanitizer->text($input->post->fullname), 'email' => $sanitizer->email($input->post->email), 'comments' => $sanitizer->textarea($input->post->comments), ); // check if the form was submitted if($input->post->submit) { // determine if any fields were ommitted or didn't validate foreach($form as $key => $value) { if(empty($value)) $error = "<p class='error'>Please check that you have completed all fields.</p>"; } // if no errors, email the form results if(!$error) { $msg = "Full name: $form[fullname]\n" . "Email: $form[email]\n" . "Comments: $form[comments]"; mail($emailTo, "Contact Form", $message, "From: $form[email]"); // populate body with success message, or pull it from another PW field $page->body = "<h2>Thank you, your message has been sent.</h2>"; $sent = true; } } if(!$sent) { // sanitize values for placement in markup foreach($form as $key => $value) { $form[$key] = htmlentities($value, ENT_QUOTES, "UTF-8"); } // append form to body copy $page->body .= <<< _OUT $error <form action="./" method="post"> <p> <label for="fullname">Your Name</label><br /> <input type="text" id="fullname" name="fullname" value="$form[fullname]" /> </p> <p> <label for="email">Your Email</label><br /> <input type="email" name="email" id="email" value="$form[email]" /> </p> <p> <label for="comments">Comments</label><br /> <textarea id="comments" name="comments">$form[comments]</textarea> </p> <p><input type="submit" name="submit" value="Submit" /></p> </form> _OUT; } // include site's main template which outputs everything include("./main.php");