Smarty for Beginners by Hermawan Haryanto 2003-12-28
Synopsis Join Hermawan as he shows you the basic of the Smarty templating system.
http://codewalkers.com/tutorials/56/1.html
Page 1
Smarty for Beginners by Hermawan Haryanto
Preface With this tutorial I aim to explain how to use the (http://smarty.php.net/) Smarty Template Engine in the simplest terms so even beginning coders of PHP can understand how to use it as their primary template engine. By reading this tutorial I presume that all of you have the idea of what Smarty can do for you and how it is an amazing template engine which has speed, portability and stability.
Getting Started The first thing you need to do is download the distribution from the (http://smarty.php.net/download.php) download section on its official site. Save it on your computer then unzip it somewhere in your harddrive. There is a folder named "libs" on your extracted files. Upload that "libs" folder on your webhosting account and rename it as "smarty". Next, create a sub folder on your web directory; let's say your created subfolder is "smartyrules", so now you can access that folder using your browser by typing this address http://www.domain.com/smartyrules. Inside that folder you should create another two subfolders, called "html" and "compile". I'll explain to you later why this is necessary. If you use a *nix distribution then you need to CHMOD 777 to the folder "compile", but if you use Windows then you won't need to do that.
File Creation Let's go back to "smartyrules" folder. In that folder, create a new PHP file with the contents of as follows: <?php # Filename: libs.inc.php # the exact path is defined. $fixpath = dirname(__FILE__); # changes this value according to your uploaded smarty distribution. # don't forget to add trailing back slash # change 'username' to your username on web hosting account define ("SMARTY_DIR", "/home/username/smarty/"); require_once (SMARTY_DIR."Smarty.class.php"); $smarty = new Smarty; $smarty->compile_dir = "$fixpath/compile"; $smarty->template_dir = "$fixpath/html"; ?>
http://codewalkers.com/tutorials/56/1.html
Page 2
Smarty for Beginners by Hermawan Haryanto
Save the file as libs.inc.php. Create another new PHP file, the contents as follows: <?php # filename: index.php require_once ("./libs.inc.php"); $smarty->display ("index.html"); ?>
Save the file as index.php Go to "html" directory in the "smartyrules" subfolder. Create a new html file, the contents as follows: <html> <head> <title>My First Smarty Page</title> </head> <body> This is my First Smarty Page </body> </html>
Save the file as index.html All set, now you can open your browser and type your address http://www.domain.com/smartyrules. You'll see your page is generated using index.html in subfolder "html" as the template. That would your first Smarty page. What Smarty does is compile index.html and put it in the "compile" folder then display it right away from there. You can see in the "compile" folder, there are new files, they were created by Smarty.
The Basics The basic operation of a template engine is to assign variables or arrays and integrate them with your html page. Let's try something simple first. Open your index.php page and add this line before the $smarty->display function. $smarty->assign ("name", "Hermawan Haryanto");
Open your index.html page and add this line: My name is {$name}
http://codewalkers.com/tutorials/56/1.html
Page 3
Smarty for Beginners by Hermawan Haryanto
The result would be: My name is Hermawan Haryanto
Now, let's try assigning arrays to your template. Add these lines in index.php remembering all added lines would be before the $smarty->display function. $friends = array("Mike", "Simpson", "Bill", "Torvald", "Paul", "John Doe"); $smarty->assign ("friends", $friends);
Open your index.html page and add these lines: Friends List: {section name=i loop=$friends} {$friends[i]}<br> {/section}
You'll see the array is pulled and populated on the html page.
What about accessing a database? Nice question. I'll try to explain it in here. First you need to know your database configuration such as username, password and your database name. If you have them already, then you can create your table using your Database Administration tools. I prefer using phpMyAdmin, you get the latest version of it at (http://phpmyadmin.net/) http://phpmyadmin.net. Create your table using this query: CREATE TABLE `friends` ( `friends_id` int(10) unsigned NOT NULL auto_increment, `friends_name` varchar(255) default NULL, UNIQUE KEY `friends_id` (`friends_id`) ) TYPE=MyISAM; INSERT INTO `friends` VALUES (1, 'Paul'); INSERT INTO `friends` VALUES (2, 'Matt'); INSERT INTO `friends` VALUES (3, 'John'); INSERT INTO `friends` VALUES (4, 'Mike'); INSERT INTO `friends` VALUES (5, 'Rendi'); INSERT INTO `friends` VALUES (6, 'Pailul');
Open your index.php file and add these lines:
http://codewalkers.com/tutorials/56/1.html
Page 4
Smarty for Beginners by Hermawan Haryanto
$db_host = "localhost"; $db_user = "database_user"; $db_pass = "database_pass"; $db_data = "database"; $conn = mysql_connect ($db_host, $db_user, $db_pass) OR DIE ("Can't connect to database"); @mysql_select_db ($db_data, $conn); $query = "SELECT * FROM friends"; $result = mysql_query ($query, $conn); if (mysql_num_rows ($result) >= 1) { $friends = array(); while ($rows = mysql_fetch_array ($result, MYSQL_ASSOC)) array_push ($friends, $rows); $smarty->assign ("friends", $friends); } Open your index.html page and add these lines: Friends List: {section name=i loop=$friends} {$friends[i].friends_name}<br> {/section}
Now you'll see the list of friends on your page. You can do some other formatting such as nl2br, truncate, upper, or lower directly from html template page, not from your script. That is why we use Smarty, to separate between business logic and presentation logic. The script should only work to pull data from db but not to format the result. The formatting of the result is done in the html page.
Some fun stuff Open your index.html file again and let's add some fun stuff. We will use some Smarty predefined variables. Add this line: {$smarty.now|date_format:"%Y-%m-%d %H:%M:%S"}
Refresh your browser and you'll see today's date and time on the server. The formatting is done using strftime(). Add this line: {$smarty.server.PHP_SELF}
http://codewalkers.com/tutorials/56/1.html
Page 5
Smarty for Beginners by Hermawan Haryanto
Refresh your browser and you'll see the filename you are accessing now. I guess the file would be "/smartyrules/index.php". Let me know if it's something else :). You can read all of this stuff in the Smarty manual. There are plenty of Smarty predefined variables you can adapt and use on your pages. That's all for now, I'll be back with another tutorial soon. All questions and suggestions are welcome.
About the Author Hermawan Haryanto is a Senior Programmer of a Web Development Company in Las Vegas. Handling programming services world wide and writing articles and tutorials since 1996. Authoring (http://dekap.com/) dEkap.com with his wife. Visit (http://hermawan.com/) his homepage and you can contact him through hermawan at codewalkers dot com.
http://codewalkers.com/tutorials/56/1.html
Page 6