There are certain times in life when you need a web page to do something more than just sit there being a web page. You need it to earn its keep. One way to do that is to put it to work for you, so you won't have to hand code every update or page mod. The easiest way to learn how to do something like this is by actually doing it, so in the rest of this article, I'm going to show you one way of implementing a system that will build new web pages for you at the touch of a button.
In this scenario, we'll assume your client is a restaurant that wants to offer vouchers for different special occasions throughout the year. But of course they don't want to pay you to update it for them, so you'd better make sure to bill them sufficiently for this automation system that will do the updates for them
1. First we need to create a basic web page template.
This is just a standard web page skeleton. You can give it a name like “pageBuilder.php” or something. You don't have to use PHP for this. You could use another programming language, but for this example we'll keep things simple and do it all in PHP.
2. Add Bootstrap
This will help to make the form look better without any extra work. Of course you'll need to have Bootstrap for this to work.
3. Set up a container
To help keep everything neat and tidy, we should define a container that we'll store the page contents in.
4. Create a web form
Define a web form, and we'll also add a fancy title to the form, which is optional but a good idea.
5. Add the form fields
This is really simple. We just need to collect a few basic details that the robot will use to create a new web page. The data we need to know includes:
- The background image for the page
- Name of the event being celebrated
- Opening statement
- Some trite quote or additional statement
- Attribution for trite quote
- Font style to use for each of the four framing text elements (individually).
- Date range that the vouchers will be valid for
- Offer 1 and Offer 2 that will be advertised on the vouchers.
- Additional voucher messages (terms and conditions, for example)
- Data for the voucher QR codes that will be generated
Here's how that looks:
And after all this effort, we will end up with a page that looks something like this:
The good news is that half the job is now complete, and it was the most difficult and time-consuming half. The rest is far easier.
6. Create the form processor file
After creating a form, you need some software that will process the submitted data and do something with it. In this case, we'll be using the submitted data to generate a new HTML page.
Now, keep in mind this is not the same thing as a normal PHP response where the data is used in real time and reflected to the user dynamically. Instead, we are creating a static page that will permanently exist until we overwrite it.
The file needs to be named the same as the action attribute value in the form declaration, so in our example that would be voucherGen.php, and because we did not specify a path, it would need to be stored in the same location as pageBuilder.php for it to work.
7. Initialize variables
The data submitted from pageBuilder.php was returned as an associative array called $_POST, and all the data values in the array can be accessed via their HTML form control name attributes. Therefore initializing our variables is actually quite easy. It's also optional, but it just makes the code look a bit more tidy and easier to read. You could certainly work directly with the $_POST values if you prefer.
8. Use conditionals to change the fonts to their correct values
Doing this early will save time and trouble later. We just check which values were selected and then replace them with the actual font names.
9. Commence building the generator string
Really all we need to do here is create one really long string that will contain everything required to create the new page. We will use string concatenation to keep it readable and make it easy to see where the data values have been inserted. This starts with the basic HTML page set up:
You can probably see where we're going with this. Note the semi-colon at the end. That's important. Also any semi-colons that occur within the text (as part of a CSS declaration or a client-side script) must be contained inside quote marks.
10. Start adding the page body to the generator string
There are more efficient ways to build this string, but I like to make code tidy, so that it's easy to read. You can use short hand methods to do this, and you also don't have to do it as a separate process to step 9. I feel it's easier to understand when the different sections of the page are split this way.
11. Write the generator string to a HTML
In this case we are hard-coding the file name, but you could (and probably should) make this a field in your pageBuilder form.
12. Add a test link
When you click the BUILD IT button, because it doesn't redirect to a web page like a normal PHP program would, you need to add a link or something to go and see what the result was.
13. Create the custom CSS file
You can store additional styling instructions in this file, but for now the only important one is the styling instruction for the main div.
14. Create and upload wrap.png
For this to work properly, you need to create a single translucent pixel image and name it wrap.png then upload it to the path you specified in the custom.css file.
15. Upload some suitable background images and test your pageBuilder
You'll be thrilled to know we're almost done, and really it's now just a matter of testing and fixing up any errors that occur. Choose some nice simple images that are not too busy and that are suitable to relate to special events or occasions (in our example, I've gone with Mother's Day and Father's Day). Upload the images to the path where you store your images for your website. Then fill in the form, click the button, and see what happens. Here's an example of the form with all the data fields filled in.
Which should result in creating something quite similar to this:
We already guessed you wouldn't want to type all that from scratch, so you can download the source code for pageBuilder.php and voucherGen.php in this zip file.
You can apply this technique of creating HTML files as strings and then writing them out to files in all kinds of situations. Just be careful never to put something like this in a recursive loop or you'll fill up your hard drive and crash the server.