Simplify PHP Development with WASP
Pages: 1, 2, 3, 4, 5
Main Todo Page
Creating the main page is similar to creating the Entry module page. First, create the template Todo/templates/index.chunk, containing:
<html>
<body>
<h3>{Title}</h3>
<li flexy:foreach="arTasks,key,task">{task[Name]} - <i>{task[Due]}</i></li>
<p>
<a href="Entry/">Add Task</a>
</p>
</body>
</html>Notice the embedded Flexy code. Pay close attention in the <li> tag at the Flexy property called foreach. Flexy's foreach directive tells the HTML tag for the list item to draw itself in a loop for each value in an array of values passed in. Here that array has the name arTasks. The key and task parameters are the names of the derived variables you'll have access to in the loop.
This is exactly the same as the PHP code:
<body>
<?php
$arTasks = array();
foreach ($arTasks as $key => $task)
{
?>
<li><?php echo $task['Name']; ?> - <i><?php echo $task['Due']; ?></i></li>
<?php
}
?>
</body>Already you can see one of the biggest benefits of working with WASP: no need for embedded PHP code. This isolates the HTML from most of the display logic. Most HTML editors parse the flexy: tags seamlessly so that they don't interfere with layout and design.
There's also another type of Flexy tag in the HTML, <h3>{Title}</h3>.
{Title} is a dynamic tag that will be replaced by whatever you set that placeholder to be in the controller class. Here's the draw() method for Todo/TodoMainIndexPage.php:
public function draw()
{
$this->setPlaceholder('Title', 'My Task List');
$oTasks = new TaskWrapper();
$oTasks->findAll();
$arTasks = array();
while ($oTasks->next())
{
$arTasks[$oTasks->getId()] = $oTasks->toArray();
// Reformat timestamp using WASP Dates utility package
$arTasks[$oTasks->getId()]['Date'] =
Dates::mysql2datetime($oTasks->getDue());
}
$this->setPlaceholder('arTasks', $arTasks);
parent::draw();
}Right away you can see how to set the {Title} placeholder. Use the code:
$this->setPlaceholder('Title', 'My Task List);This lets you dynamically name the task list. You could name it using a field from a different database table if you wanted to. The hard-coded string is here for demonstration purposes only.
