Difference between revisions of "DesignPatternStep5"

From mi-linux
Jump to navigationJump to search
Line 1: Line 1:
 
[[Main Page]] >> [[6CC001|Advanced Web Technologies]] >> [[6CC001 - Workbook|Workbook]] >> [[6CC001 Workshop - week 04|Week 04]] >> Step 5 - Creating our first view
 
[[Main Page]] >> [[6CC001|Advanced Web Technologies]] >> [[6CC001 - Workbook|Workbook]] >> [[6CC001 Workshop - week 04|Week 04]] >> Step 5 - Creating our first view
 +
 +
== 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.
 +
<pre>&lt;!-- views/index.php --&gt;
 +
 +
&lt;?require_once("ViewHelper.php");?&gt;
 +
 +
&lt;?ViewHelper::DisplayHeader("Blog index");?&gt;
 +
 +
&lt;h1&gt;Blog index&lt;/h1&gt;
 +
 +
&lt;p&gt;You can &lt;a href="index.php?cmd=BlogAddForm"&gt;add messages&lt;/a&gt;&nbsp;!&lt;/p&gt;
 +
 +
&lt;form action="index.php" method="post"&gt;
 +
Search: &lt;input name="search"&gt;
 +
&lt;input type="submit" value="Search!"&gt;
 +
&lt;/form&gt;
 +
 +
&lt;?
 +
foreach($data as $message)
 +
echo("&lt;div class=\"message\"&gt;
 +
&lt;h2&gt;{$message['title']}&lt;/h2&gt;
 +
&lt;p&gt;{$message['message']}&lt;/p&gt;
 +
&lt;a href=\"index.php?cmd=BlogDelete&amp;id={$message['id']}\"&gt;Delete this message&lt;/a&gt;
 +
&lt;/div&gt;");
 +
?&gt;
 +
 +
&lt;?ViewHelper::DisplayFooter();?&gt;</pre>
 +
The code itself it pretty simple. It loops through the data array using a foreach statement.
 +
 +
Note that instead of duplication the &lt;HEAD&gt; 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:
 +
<pre>// views/ViewHelper.php
 +
 +
//############################################################################
 +
// ViewHelper
 +
//############################################################################
 +
class ViewHelper
 +
{
 +
//############################################################################
 +
// Displays HTML Header
 +
//############################################################################
 +
static function DisplayHeader($pageTitle = "")
 +
{
 +
echo("&lt;!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"&gt;");
 +
echo("&lt;html&gt;");
 +
echo(" &lt;head&gt;");
 +
echo(" &lt;title&gt;{$pageTitle}&lt;/title&gt;");
 +
echo(" &lt;link type=\"text/css\" href=\"views/style.css\" rel=\"stylesheet\"&gt;");
 +
echo(" &lt;/head&gt;");
 +
echo(" &lt;body&gt;");
 +
}
 +
 +
//############################################################################
 +
// Displays HTML Footer
 +
//############################################################################
 +
static function DisplayFooter()
 +
{
 +
echo(" &lt;/body&gt;");
 +
echo("&lt;/html&gt;");
 +
}
 +
}</pre>
 +
All you need now is to include your view from your command:
 +
<pre>// Command_BlogIndex.php
 +
 +
//############################################################################
 +
// doExecute
 +
//############################################################################
 +
function doExecute(Request $request)
 +
{
 +
// Create manager object
 +
$manager = new ManagerMessage();
 +
 +
// Get data from database object
 +
$data = $manager-&gt;getAllMessages();
 +
 +
// Include view
 +
include("views/index.php");
 +
}</pre>
 +
Note: I'll let you create your own style sheet, mine is boring anyway&nbsp;:)
 +
 +
=== Checkpoint ===
 +
 +
The home page of your blog should now be working!!!
 +
 +
[[Image:Blog.gif|Image:blog.gif]]

Revision as of 15:45, 12 July 2011

Main Page >> Advanced Web Technologies >> Workbook >> Week 04 >> Step 5 - Creating our first view

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!!!

Image:blog.gif