Leaderboard

Hey everyone. I've created another screencast for a ProcessWire site I developed. Another you ask? My first one was of my own site, here. I developed this website for a Toronto-based opera singer from Norway. Nils needed a website where clients could go to learn about him, listen to his music, watch his videos, look at pictures and see where he'll be performing. The website features custom Responsive Design and a separate mobile image gallery for phones and devices. Read about the project and see some screenshots here, visit the website here, or view the . The admin theme used is a modified version of an older version of the Teflon admin theme.

So you got scared by that long complex basic form script? Creating form using ProcessWire as a framework and it's form and inputfield capabilities. Yes this would be possible and it's the way I use to make forms in front and backend whenever possible. Then we are finally here http://processwire.com/talk/topic/2089-create-simple-forms-using-api/ where I explained how to do it along with some examples. Yet another form example Since uploading files is a little special I went ahead and tried using the InputfieldFile to upload images to the temp folder and finally create a page and add those images same way as in the other examples. Then after success delete the temp files. Now this example does all the previous "pure" php example does, just using PW forms API. - required fields - CSRF preventing - inline error Form example snippet: https://gist.github.com/somatonic/5236008 There's also a CSS file example to style the form, and for example hide the "Drag files here...". This technique is the most simple to make front-end forms, and doing it this way allows you do add hooks to the form in case you need a custom validation or anything directly from within the template code. For example, the $form can be used to attach any hooks to the form: /* form hook example */ function hookEmail($event){ $file = $event->return; echo "email value: ". $file->value; } $form->get("email")->addHookAfter("processInput", null, 'hookEmail'); --- Little change to InputfieldFile.module to throw error if maxFiles is reached It works all well, but the maxFiles setting doesn't throw an error message when you choose more images than allowed. Since the InputfieldFile module is usually ajax based, it throws error via ajax and thus not in $form->getErrors() at all. It just proceeds and uploads only the max files and skips the rest. This could be changed in the module to also throw error on the field when no ajax is used. For this to maxFiles error to work I changed the /wire/modules/Inputfield/InputfieldFile.module a little: https://github.com/ryancramerdesign/ProcessWire/blob/master/wire/modules/Inputfield/InputfieldFile/InputfieldFile.module#L288 From: if($this->config->ajax) foreach($ul->getErrors() as $error) { $this->ajaxResponse(true, $error); } To: if($this->config->ajax) foreach($ul->getErrors() as $error) { $this->ajaxResponse(true, $error); } else { foreach($ul->getErrors() as $error) { $this->error($error); } } Maybe if Ryan can implement those to the Inputfieldfile to allow for front-end error to be shown, it would be great.

Thanks Ryan for the heads up, there's some nice examples for advanced coders. Strange. Now, I also would have thought that with !$u->getErrors() it wouldn't work, but it still does! I went and did many tests after you posted this and I can't see any difference and it all works as it should. The code works with both and I haven't looked into it further (core). I wish to be proven wrong but it really does (at least for me here) :/ I think you got a valid point with checking for if there's files really uploaded at all... However this wouldn't work if image upload would be not required in your form. Also the example you posted is also not showing how you could make required fields and inline error/repopulating fields, prevent CSRF and double posts. It's still a great example but as said, not a "complete" example that can be used in a public front-end form. May or may not suiteable for people not knowing what they're doing and only copy paste. What I also think could be the problem on Matthews side is that the PHP upload and post max size isn't enough to upload the file. I also tested this and it seems to fails silently with no errors and just shows the form again. Maybe there's a way to get around it, but thought it might be an issue since there's no error thrown as it's apache upload interrupting? --- It can get somehow complex to add all checks and validation to a form server side, and the following post example is also just for showing what all there's involved to make a pure php form (using some PW internals). Yet another example I've spent couple hours creating a form upload example - with files (images) upload to a page file field - adds new page on the fly and adds uploaded images - prevents CRSF attacks, this also prevents double post by refresh page after submit - has required fields with error messages inline - repopulates form field in case an error happened or a required field was not filled in - sanitizing and saving values to a page - jquery example with disabled submit button on form submit The gist repo can be seen here https://gist.github.com/somatonic/5233338 You can configure some variables and array's at the top and add remove fields as you wish to the html form markup. Like this: // --- Some default variables --- $success_message = "<p class='message'>Thanks for your message!</p>"; // --- All form fields as nested array --- // using html form field name => template field nam, from the page you're going to create $form_fields = array( 'fullname' => array('type' => 'text', 'value' => '', 'required' => true), 'email' => array('type' => 'email', 'value' => '', 'required' => true), 'message' => array('type' => 'textarea', 'value' => '', 'required' => true), 'newsletter_subscribe' => array('type' => 'checkbox', 'value' => 0, 'required' => false), 'images' => array('type' => 'file', 'required' => true) ); // --- WireUpload settings --- $upload_path = $config->paths->assets . "files/.tmp_uploads/"; // tmp upload folder $file_extensions = array('jpg', 'jpeg', 'gif', 'png'); $max_files = 3; $max_upload_size = 1*1024*1024; // make sure PHP's upload and post max size is also set to a reasonable size $overwrite = false; // --- Page creation settings --- $template = "upload-entry"; // the template used to create the page $parent = $pages->get("/uploads/"); $file_field = "images"; $page_fields = array('fullname','email','message','newsletter_subscribe'); // $page_fields = define the fields (except file) you want to save value to a page // this is for the form process to populate page fields. // Your page template must have the same field names existent // ------------------------------ FORM Processing --------------------------------------- include("./form-process.php"); To set this up. 1. Create a template upload-entry used to save the form submissions. With all the fields you'll have in the form, and name them the same as in the $form_fields 2. Create a form-upload.php template used to hold the form config and markup code: (create a template in PW with this name and the page the form should be rendered) https://gist.github.com/somatonic/5233338#file-form-upload-php 3. Create a form-process.php file in the templates folder with the processing code (This is included in the template file above after the configuration part) https://gist.github.com/somatonic/5233338#file-form-process-php There's a basic styling CSS: https://gist.github.com/somatonic/5233338#file-form-css And the jQuery snippet used to prevent double posting when double clicking the submit. https://gist.github.com/somatonic/5233338#file-form-js This is some screen showing the form:

Matthew, the primary problem I can see is this line: if(!$contact_photo->getErrors()) { The issue there is that getErrors() always returns an array, which always resolves to "true" in your if statement. In order for it to work properly, you would need to count() the return value of getErrors() rather than typecast it to a boolean like you are doing now. However, I don't think that getErrors() is a good way to check for success with WireUpload, because errors could occur while files were still uploaded. So it's better for your code to ask the question "were any files uploaded?" rather than "did any errors occur?". Then worry more about errors if no files were uploaded. There were also several other minor issues or concerns, but I think the issue mentioned above is the primary reason it wasn't working. I've attempted to re-factor your code and resolve all the issues/concerns that I would have had with it. This is written in the browser, so there may still be typos, but hopefully the intentions are clear: <?php /** * Process the contact form * * Populate's ProcessWire's $notices API var with errors and messages * * @return bool Returns true on success, false on failure. * */ function processContactForm() { $input = wire('input'); $sanitizer = wire('sanitizer'); // Set a temporary upload folder where the files are stored during form processing // RC: precede temp dir with a period to ensure it remains non-web accessible $upload_path = $config->paths->assets . "files/.temp/"; // RC: create temp path if it isn't there already if(!is_dir($upload_path)) { if(!wireMkdir($upload_path)) throw new WireException("No upload path"); } // New wire upload $contact_photo = new WireUpload('contact_photo'); // References name of HTML form field $contact_photo->setMaxFiles(5); $contact_photo->setOverwrite(false); $contact_photo->setDestinationPath($upload_path); $contact_photo->setValidExtensions(array('jpg', 'jpeg', 'png', 'gif')); // execute upload and check for errors $files = $contact_photo->execute(); // RC: use count($files) as your decision whether to proceed not not, rather than getErrors() if(!count($files)) { $contact_photo->error("No files received, so not creating page."); return false; } // Save in the ProcessWire page tree; map submission to the template fields $np = new Page(); // create new page object $np->template = "contact_submission"; $np->parent = "/customer-service/contact-us/contact-submission-listing/"; // RC: for safety, only add user uploaded files to an unpublished page, for later approval // RC: also ensure that using v2.3+, and $config->pagefileSecure=true; in your /site/config.php $np->addStatus(Page::statusUnpublished); // Send all form submissions through ProcessWire sanitization or just map a variable // RC: No need to have intermediate variables, I removed them--populating the $np page instead $np->title = $sanitizer->text($input->post->contactname); $np->name = $np->title; $np->contactname = $sanitizer->text($input->post->contactname); $np->email = $sanitizer->email($input->post->email); $np->comments = $sanitizer->textarea($input->post->comments); // RC: assuming this is a textarea fieldtype $np->save(); // Run photo upload foreach($files as $filename) { $pathname = $upload_path . $filename; $np->contact_photo->add($pathname); $np->message("Added file: $filename"); unlink($pathname); } // save page again $np->save(); return true; } // First, confirm that a submission has been made if($input->post->contactname) { if(processContactForm()) { echo "<h2>Your page was saved!</h2>"; } else { echo "<h2>Sorry things didn't work out!</h2>"; } foreach($notices as $notice) { $class = $notice instanceof NoticeError ? "error" : "message"; echo "<p class='$class'>$notice->text</p>"; } } else { // display contact form }

The Beach Boys before and after Processwire Before: After: https://www.youtube.com/watch?v=9kg-pYItaj8

site.grate it is.very good ! what kind singer.man smoken tobaccos ? ----------- editamos:

I have to admit that I like learning from videos and books. They help to get across bigger picture concepts much better than copying and pasting. They build a foundation. So when it does come time to writing code (or copying pasting it), you've got the understanding of it. The problem with copying/pasting is that it's like building without a foundation, which can be dangerous. When you've got the foundation, all the other pieces just kind of fall into place. I think this is especially true of ProcessWire. If you understand the big picture and how simple it is, the rest of it becomes simple as well. And there's no reason not to learn the foundation, because it's so darn simple. It seems like a lot of people start working with ProcessWire while thinking of it in the context of some other CMS. So there is inevitable "un-learning" that has to take place, as people are looking for complexity where there isn't. This is a recurring theme. What I think would do an even better job of establishing the foundation would be two printable PDF documents that are maximum 1-printed page each: ProcessWire in a nutshell, a cheat-sheet – Covers everything you need to know to understand a typical site profile. Pages, Fields, Templates, then $page, $pages, and PageArray. All you need to know about PHP to use ProcessWire – This one would focus on the general PHP concepts necessary to use it like a template engine with ProcessWire. Covers things like PHP tags, double-vs-single quotes, echo, if(), foreach(), and comparison vs. assignment.

Just for a bit of fun: Before ProcessWire After ProcessWire I was going to be mean and pick on other CMS', but this is fun just on it's own. Post your examples!

Introducing MetroWire, a little theme I've been working on and using in personal projects for which was once inspired by "metro" styling and to which now I can't think of a better name for. DOWNLOAD http://modules.processwire.com/modules/metro-wire/'>Modules Directory Listing SCREENS!! Login Page Tree Templates Page Customise the colors! (for those of you familiar with less. Change the "@adminAccent" colour variable in "templates-admin/styles/less/vars.less" and compile to customise the main colour to whatever you like!) Hopefully at some point I can integrate the compiling and even give users the ability to choose their colour... fun! Hope you guys enjoy this, thanks for taking a look if you do! I also did a Tweak to the AdminBar to match my theme more closely (hopefully Apeisa doesn't mind), and did some naming changes to solve a conflict I had on a project that used Bootstrap AdminBar-TWEAK.zip

Imagine a hotel website. Done? Yeah, most of them look the same ;-) In this project I took another approach. The client is - thank PW - able to (re)create the whole look of his website by changing tiles (images, sizes, texts). The size adapts to the screen size, so on nearly every device the look is different. But not the user experience. After one week online I can say: It works. Thanks to a lot(!) of image material and an engaged client it is one of the biggest sites I've ever made. There is a lot to discover (only german yet, english is due in May). So click around... Der Blaue Reiter - Design Hotel Karlsruhe

fendly.pw review some one post.here http://www.cmscritic.com/introducing-processwire-2-1-2/#comment-13813

I'd seen the original post a while ago, but at the time I was new to ProcessWire—so it didn't really sink in. I just used that method to rebuild a frontend system that allows faculty to upload and edit course syllabi. Took less than 10 minutes to get it up and running, and maybe another 20 to troubleshoot a few things unique to my needs. The API was already allowing me to run with forms, now I feel like I have a jetpack.

Ryan, thanks for the answer. I've successfully updated the site from 2.2 to 2.3. It has lot's of articles (1000k+) and other pages including various page references. I've optimized the code through functions, solved some things that troubled me before with URL segments. The system has rewrite functionality for article URL's (I'm prepending categories and subcategories to article URL's and articles reside in one parent page) and so on... All seems to work well, and faster then before

Sure? Looking at the code "Template->setFilename" seems to accept the filename with or without path: https://github.com/ryancramerdesign/ProcessWire/blob/master/wire/core/Template.php#L324

Ryan and Soma, I would like to extend a huge thanks to both of you. You guys (along with many others) consistently take the time to not only decipher and debug code, but go well beyond that by trying to figure out what the person is "actually" trying to do and provide them with a revised/better solution—I applaud you both. Soma, your examples above are amazingly thorough — I really appreciate the time you devoted to create them, and your willingness to share. Cheers.

Great - I will update the code soon, thanks Ryan and Muffin! Big thanks to Marty Walker, who paid and open sourced this module.

Will try that now... Hope it works it really starts to frustrate me >.<

Did you empty them of did you delete them and recreated the directories? Another option would be to install a new version of PW and import the database and replace the files in /templates/. Shouldn't be much work.

I think my own downfall is that I need the information to be broken down into smaller chunks. A stepping stone of small/medium tutorials to gain confidence and feel that could achieve my goal in processwire. Having all the API on display was a little intimidating at first! If it wasn't for the friendly community and Joss's beginners tutorial I think I may of headed off to another CMS (my loss i know) I am starting to see the power of processwire. I plan to go through the new PHP Code Academy Course over the next week. I will hopefully return to Processwire with a little confidence in basic coding. http://www.codecademy.com/tracks/php I would love to see the learning by doing type of tutorials found on sites like these: http://www.w3schools.com/css/ http://www.codecademy.com http://www.codepupil.com/

How long did it take to find those colors for the menu, text bar, backgrounds and fonts ? They all fit well together.

diogo's code means we could have it delete the site on triple-clicks though and destroy the world on quadruple clicks with just a few adjustments

Thanks Soma and Ryan, really helpful stuff here. I've learned a lot. Posts like these once again proves why everyone loves this community.

Here is a screencast to show this functionality for those who arre curious but can't or don't want to test: This is my first screencast ever

Here is a solution https://gist.github.com/ncr/399624 And a fiddle for testing http://jsfiddle.net/mBYPD/

There really is no maximum page capacity. If MODX Evo had a limit on quantity of pages, then I'm guessing they were keeping some reference to all pages in memory at once. We don't do anything like that with pages, so any limits have more to do with the server itself… mysql, disk space, file system. I don't see any reason why you couldn't have millions of pages in ProcessWire. Chuck Forsberg and ZMODEM, good times. The BBS I ran was Data Connection BBS between 1989-1995, and wrote software called DataView for viewing inside ZIP (and ARC, RAR, etc.) archives online. Also wrote a software called Oneliner …kind of like Twitter for BBS times. __ \ | __| | _) | | _` | _| _` | ( _ \ \ \ -_) _| _| | _ \ \ ____/\__,_|\__\__,_| \___\___/_| _|_| _\___\__|\__|_\___/_| _| RENAISSANCE WHQ, FUTURE CREW, LEGEND DESIGN, IGUANA, EMF, PRIME - Node 1: (703) 506-8598 - 16.8k HST DS v.32bis Node 2: (703) 847-0861 - 28.8k HST DS v.34 - Sysop: Ryan Cramer [Iguana/Renaissance] Located in McLean, Virginia, USA Online since 1989 No Lamers (had to say that =)

Coming to this theme a bit late (due to a natural aversion to anything remotely Win8 related), but I have to say it is my new favourite. Just a note for anyone with 'busy' templates (lots of fields), this theme seems to work better than most at displaying fields set to narrow widths.

Whyno for each? That what.it for. Already invented wheel is. $ids=array(); foreach($pageArray as $p) $ids[]=$p->id; Now bingo $ids have.what u need