Difference between revisions of "DesignPatternStep5"
From mi-linux
Jump to navigationJump to search (New page: Main Page >> Advanced Web Technologies >> Workbook >> Week 04 >> Step 1 - Create and populate database) |
|||
| (6 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| − | [[Main Page]] >> [[6CC001|Advanced Web Technologies]] >> [[6CC001 - Workbook|Workbook]] >> [[6CC001 Workshop - week 04|Week 04]] >> Step | + | [[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><!-- views/view_BlogIndex.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();?></pre> | ||
| + | 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: | ||
| + | <pre>// 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>"); | ||
| + | } | ||
| + | }</pre> | ||
| + | All you need now is to include your view from your command. | ||
| + | |||
| + | '''Update''' the doExecute() function as follow: | ||
| + | <pre>// 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/view_BlogIndex.php"); | ||
| + | }</pre> | ||
| + | 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|Image:blog.gif]] | ||
| + | |||
| + | >> Onto [[DesignPatternStep6|Step 6]] | ||
Latest revision as of 14:48, 22 September 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/view_BlogIndex.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.
Update the doExecute() function as follow:
// 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/view_BlogIndex.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!!!
>> Onto Step 6
