devscripts dot net tutorial

building a dynamic webpage using php, mysql and smarty

Development Scripts  Tutorials  Affiliates/Links  Contact Us  About us  Advanced Search

stage five - creating a template to represent our data

This is basically a HTML page with the addition of some {sections} which are the Smarty sections.

<!-- This is the DOC type declaration and links in the CSS stylesheet etc -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
    <meta name="author" content="Steve Rendell" />
    <meta name="generator" content="EditPlus" />
    <link rel="stylesheet" type="text/css" href="style.css" title="Default CSS Sheet" />

    <title>News Page</title>
  </head>

  <body id="top">

    <!-- OK display the page header to keep it nice-->
    <div id="header">
      <span>Steve's News Page</span>
    </div>

    <!-- This is where the news article will be going -->
    <div id="bodyText">

        <!-- Have a title -->
        <h1 id="welcome">Read All About It</h1>

        <!-- OK this is a section which will loop round for every item in $news (passed in through from PHP) -->
{section name=news loop=$news}
   <!-- For every item, display the Title -->
  <h2 id="{$news[news].id}">{$news[news].title}</h2>
  <!-- Write out the Author information and the date -->
  <h3>{$news[news].author}, {$news[news].date}</h3>
  <!-- Now show the news article -->
  {$news[news].article}
{/section}
    </div>

    <!-- Show copyright information etc -->
    <div id="footer">All Contents Copy Written :)</div>

  <!-- Close the html tags -->
  </body>
</html>
Smarty facilitates a convenient way to loop over arrays of data with the section function. information about the {section} tag
next page