6CC001 Workshop - week 04
Main Page >> Advanced Web Technologies >> Workbook >> Week 04
Your job today is to implement a blog similar to this one:
The different steps are:
- Step 1 - Create and populate database
- Step 2 - Create the index.php file, front controller and registry class
- Step 3 - Handling user request and creating appropriate command
- Step 4 - Accessing the database
- Step 5 - Creating our first view
- Step 6 - Adding messages
- Step 7 - Deleting messages
Let's take it one step at a time... and remember: read and understand the code before pasting it into your text editor!
Step 5 - Creating our first view
All we need now is to pass the data above to a view. Let's create all our views in a "views" sub-folder.
<!-- views/index.php --> <?require_once("ViewHelper.php");?> <?ViewHelper::DisplayHeader("Blog index");?> <h1>Blog index</h1> <p>You can <a href="index.php?cmd=BlogAddForm">add messages</a> !</p> <form action="index.php" method="post"> Search: <input name="search"> <input type="submit" value="Search!"> </form> <? foreach($data as $message) echo("<div class=\"message\"> <h2>{$message['title']}</h2> <p>{$message['message']}</p> <a href=\"index.php?cmd=BlogDelete&id={$message['id']}\">Delete this message</a> </div>"); ?> <?ViewHelper::DisplayFooter();?>
The code itself it pretty simple. It loops through the data array using a foreach statement.
Note that instead of duplication the <HEAD> section in all our views, we have decided to move it to a helper function. All our views can then include the helper file and call the DisplayHeader and DisplayFooter function:
// views/ViewHelper.php //############################################################################ // ViewHelper //############################################################################ class ViewHelper { //############################################################################ // Displays HTML Header //############################################################################ static function DisplayHeader($pageTitle = "") { echo("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">"); echo("<html>"); echo(" <head>"); echo(" <title>{$pageTitle}</title>"); echo(" <link type=\"text/css\" href=\"views/style.css\" rel=\"stylesheet\">"); echo(" </head>"); echo(" <body>"); } //############################################################################ // Displays HTML Footer //############################################################################ static function DisplayFooter() { echo(" </body>"); echo("</html>"); } }
All you need now is to include your view from your command:
// Command_BlogIndex.php //############################################################################ // doExecute //############################################################################ function doExecute(Request $request) { // Create manager object $manager = new ManagerMessage(); // Get data from database object $data = $manager->getAllMessages(); // Include view include("views/index.php"); }
Note: I'll let you create your own style sheet, mine is boring anyway :)
Checkpoint
The home page of your blog should now be working!!!
Step 6 - Adding messages
Next, let’s add a command to add blog messages. You might have noticed above that our “add messages” link (see above) points to “index.php?cmd=BlogAddForm”
So first, you need a new command called “Command_BlogAddForm”. It doesn’t do much, it simply displays the view containing the form. Here is the code:
// Command_BlogAddForm.php //############################################################################ // SearchVenueCommand class //############################################################################ class Command_BlogAddForm extends Command { //############################################################################ // doExecute //############################################################################ function doExecute(Request $request) { // Include view include("views/add_form.php"); } }
And here is the view containing the form:
<!-- views/add_form.php --> <?require_once("view_helper.php");?> <?ViewHelper::DisplayHeader("Add message");?> <h1>Blog add form</h1> <p>Please fill in the fields</p> <form action="index.php?cmd=BlogAdd" method="post"> Title:<br><input name="title"> <br> Message:<br><textarea name="message"></textarea> <br> <input type="submit" value="Add"> </form> <?ViewHelper::DisplayFooter();?>
Again note that the "action" attribute of the <FORM> above points to "index.php?cmd=BlogAdd". So we need another action responsible for reading the user data from the form, and creating a new record in the database... here it is!
// Command_BlogAdd.php //############################################################################ // Command_BlogAdd class //############################################################################ class Command_BlogAdd extends Command { //############################################################################ // doExecute //############################################################################ function doExecute(Request $request) { // Get data from request $title = $request->getProperty('title'); $message = $request->getProperty('message'); // Create manager object $manager = new ManagerMessage(); // Add to database $manager->addMessage($title, $message); // Redirect to index header("location:index.php"); } }
Note: This action doesn't have a view. It simply redirects the user to the index of the forum.
Checkpoint
You should now be able to add new messages... try it!
Step 7 - Deleting messages
Finally, let’s create a new action in charge of message deletion.
Again if you browse the mouse over the “delete this message” links, you will see URLs such as “index.php?cmd=BlogDelete&id=19”
So we need a new Command_BlogDelete class. Here is the code:
// Command_BlogDelete.php //############################################################################ // SearchVenueCommand class //############################################################################ class Command_BlogDelete extends Command { //############################################################################ // doExecute //############################################################################ function doExecute(Request $request) { // Get data from request $id = $request->getProperty('id'); // Create manager object $manager = new ManagerMessage(); // Add to database $manager->deleteMessage($id); // Redirect to index header("location:index.php"); } }
Nothing too complicated here...
Checkpoint
You should now be able to delete messages.
Note: It is always better practice to ask users to confirm deletion first... but you can do that bit ;)