Now, we’ll make another example using templates. A little bit more work in HTML and we can get a better visual output.
Open the last project - Gui : The Zoop View (powered by Smarty). Using your favorite HTML editor browse to app_path/templates/default folder and open helloword.tpl file. Our intention is to create three separate sessions: top, middle and bottom. You can do this using tables, it’s the easier way, but div tags is recommended, actually. Div tags allow detailed formatting with CSS, and deliver HTML code with better semantic.
Use two smarty tags: {$lbl1} and {$lbl2}. $lbl1 at top and $lbl2 at bottom section:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="pt-br" http-equiv="Content-Language" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Ola_Mundo_com_Template</title> </head> <body> <div align="center" style="background-color: #FFE2C6; font-family: Tahoma; font-weight: bold"> <br/>{$lbl1}<br /> </div> <div style="background-color: #FFF4EA"> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> </div> <div align="center" style="background-color: #FFE2C6"> {$lbl2} </div> </body> </html>
Our next step is to edit zone_default.php file. In that file we can find the functions – one to each page in our project. Find pageDefault function and change it. Use the code below:
pageDefault($inPath) { global $gui; $gui->assign("lbl1", "Hello World"); $gui->assign("lbl2", "Vespersoft Desenvolvimentos - www.vespersoft.com.br"); $gui->display("helloworld.tpl"); }
To remember: the assign commands above will put the second argument at first argument variables. The $gui->display command will show the template. Just run your project to see the changes.