ProcessWire Weekly #122

On the processwire.com blog this week: CMS Critic case study by Jonathan Lahijani

This week in the processwire.com blog we've got a guest post from Jonathan Lahijani, an independent ProcessWire developer based in Los Angeles. In his post Jonathan walks us through a project he recently took over: migrating the CMS Critic site from WordPress to ProcessWire – again.

There and back again: the story of CMS Critic in a nutshell

We've covered CMS Critic and specifically their CMS Critic Awards event a few times in our weekly posts already, so most of you probably have a decent idea about who they are and what they do. Their site – originally built with WordPress by the founder, Mike Johnston – has gone through a couple of pretty big changes in just three years:

• Back in 2013, with the help of Ryan, CMS Critic migrated their site from WordPress to ProcessWire. This also meant migrating all their existing content to the new platform, which was a pretty interesting project in itself.
• In an attempt to improve various areas of their site, CMS Critic moved back to WordPress in April 2016. Without going too much into detail, this iteration had some pretty gaping holes in it, at least partly caused by plugin overuse.
• After some discussion at our support forum, Jonathan stepped in and offered to rebuild the CMS Critic experience. This new site was launched in August 2016, and Jonathan walks us through his experience with the project at his guest blog post.

Big goals – and how they were reached

In his blog post Jonathan explains in detail the goals they set for the project in the first place, and how they eventually reached those goals. The project was a pretty daunting one partly because it involved Jonathan stepping in to the original codebase authored by Ryan and both updating and expanding it significantly.

Some key concepts involved in this project were a migration from ProcessWire 2.6 to 3.0, going from Foundation to UIkit on the frontend, modifying taxonomies, adding a whole new widget system and user registration, and so on. All in all, the project was pretty ambitious, and it's great to read how exactly Jonathan pulled it off.

For more details check out Jonathan's guest post at the processwire.com blog. Thanks to Jonathan for sharing his story with us – and of course to Mike Johnston of CMS Critic for providing us with a continuous stream of relevant and valuable CMS news!

Weekly forum highlights, tutorials, and other online resources

Here we've got a new collection of support forum highlights and other useful and/or interesting resources. As always please let us know if there's anything important we've missed so that we can include it in one of our future issues.

• First of all, we've got a bunch of recent showcase threads: Trekkerweb Supply & Demand, Memelpower, Niinu Agility Sport, and Mikael Siirilä Photography. The showcase forum is the place to be if you're interested in seeing what other developers are using ProcessWire for!
• While browsing GitHub we stumbled upon a few projects that, for whatever reason, haven't made their way to the forum or to our modules directory. If you're feeling slightly adventurous, feel free to check out these three: Fieldtype Lister Action Buttons, Process Send Newsletter, and Process Image Checker.
• Another project that has recently been added to GitHub is PayPal integration for the commercial FormBuilder module. If you're a FormBuilder user and thus have access to it's support boards, you might've heard of this one already, but either way: this is a pretty nice example of extending one module with another.
• Finally, here's a recent tutorial for those looking for a custom contact form solution: a simple contact form using Google Recaptcha and Valitron validation library. Definitely worth checking out!

If you're interested in ProcessWire news, discussions, and updates, there's always something going on at the support forum. Since we're only able to include a tiny selection of all that in our weekly updates, head down to the forum for more.

ProcessWire recipe of the week: CSRF protection for your own forms

Recipe of the week is a section where we feature a weekly recipe borrowed from the ProcessWire Recipes site. The recipe we've got this week introduces an easy way to make use of ProcessWire's built-in CSRF protection in your own forms.

The problem

You don't want to create forms using ProcessWire's form components, instead opting to create your own forms by hand, yet you still want to benefit of the built-in CSRF (Cross-Site Request Forgery) protection.

The solution

First you need to create a token and a token name, you do that as following:

$tokenName = $session->CSRF->getTokenName();
$tokenValue = $session->CSRF->getTokenValue();

Now what you want to do is create a hidden input field like this:

$html .= '<input type="hidden" id="_post_token" name="' . $tokenName . '"
value="' . $tokenValue . '" />';

Now this will generate something that will look like this:

<input type="hidden" id="_post_token" name="TOKEN1470842875"
value="fe8ce9c1b9e6b9e361830df3525c49317a35332fbf626aa8793777a3b705824a" />

You are done on the form side. You can now go to the part where you are receiving the post (i.e. the response from the form). Then use:

$session->CSRF->validate();

This will return true (1) on a valid request and an exception on a bad request. You can test this out to open up your Firebug/Chrome debug console and change the value of the textbox to something else.

Basicly what this does is set a session variable with a name (getTokenName) and gives it a hashed value. If a request has a token in it it has to have the same value or it is not send from the correct form.

If you've got a recipe of your own that you'd like to share with others, feel free to submit it at ProcessWire Recipes. Big thanks to Harmster for providing the original version of the recipe featured here!

Site of the week: AIM Creative Studios

Our latest site of the week belongs to AIM Creative Studios, a digital animation studio based in Porto, Portugal. Designed by The Royal Studio and built by ED Design, this is by far one of the most visually pleasing sites we've come across in a while, and we're more than happy to feature it here.

Diogo from ED Design has posted a brief summary at our support forum, explaining some of the methods and technologies they made use of in order to get this site up and running: CSS animations, transitions, and transforms, HTML5 Audio API, and so on. The end result is a great looking – yet still quite usable, mind you – site with a lot of curious little details to focus on.

There's not much else we can say about this one – this is one of those sites you should see for yourself to truly appreciate. The backend remains mostly a mystery to us, since ProcessWire itself, by design, won't reveal anything unnecessary to visitors; all we can say is that this site is running on ProcessWire 3.0.

Big thanks to the folks at ED Design and The Royal Studio for this awesome site, and of course congratulations to AIM Creative Studios!

Stay tuned for our next issue

That's it for the 122nd issue of ProcessWire Weekly. We'll be back with more news, updates, and content Saturday, 17th of September. As always, ProcessWire newsletter subscribers will get our updates a few days later.

Thanks for staying with us, once again. Hope you've had a great and productive week, and don't forget to check out the ProcessWire forums for more interesting topics. Until next week, happy hacking with ProcessWire!