1. ADVM420- Class #6 Web Design with PHP and MySQL Building a Dynamic Website: Using a database to store webcontent © Copyright 2003 Grant Macewan College http://sequel.macewan.ca/~krauser/ Russel Krause - krauser@macewan.ca http://sequel.macewan.ca/~krauser/krauser@macewan.ca

2. The Big Picture We now have many scripts that could be put together in a website Definition: A website is a collection of webpages with a common navigation system and purpose

3. A Page is a set of Panels…

4. Deconstructing a Web Page Consider a Webpage to consist of several panels: Top banner LeftContentRight Navbar Navbar Footer Each panel can contain an dynamic component The border is often consistent

5. Another way to look at it… A Table with 5 cells Cell #1 Cell #4 Cell #3 Cell #2 Cell #5

6. Components of a Web Page A Webpage consists of: Title META tags: Keywords, Description Stylesheet Header (1) Left Nav (2), Content (3), Right Nav (4) Footer (5) Perhaps we could store this information in a database table and render it dynamically?

7. Create tblPages…

8. Populate tblPages with some test data:

9. Creating the Portal Website We will modify template.html to become a framework for our interactive data panels of our community portal website Create a new directory called “portal” Save template.html as “portal/index.php” Copy config.php to “portal/config.php” Modify config.php to have your connection info

10. Add this at the top of index.php: Connect to the Database, open recordset to select the page requested… <?PHP include_once "myConfig.php"; $pg = $_REQUEST['Page']; if (!$pg) $pg = 1; //default to homepage //open the connection $conn = OpenConnection(); //Open the Page table... $sql = "SELECT * FROM tblPages WHERE (int_Page_ID=".$pg.") ORDER BY int_Page_ID"; $rst = mysql_query($sql) or die(mysql_error()); $row = mysql_fetch_array($rst, MYSQL_ASSOC) or die ("Page not found!"); ?>

11. Add this at the bottom of index.php: Disconnect from the Database… <?PHP // Free resultset, close connection mysql_free_result($rst); mysql_close($conn); ?>

12. of index.php Show Page fields from the Database… <META name=Keywords content=" "> <META name=Description content=" "> “ type="text/css">

13. of index.php Include Page panels from Database…

14. First Panel: right.inc left.inc builds a list of top level navigation… <?PHP function RenderLeftPanel() { $sql = "SELECT * FROM tblPages WHERE (int_Parent_ID IN (0,1)) ORDER BY int_Page_ID"; $rst = mysql_query($sql); while ($row=mysql_fetch_array($rst, MYSQL_ASSOC)) { print "<a href='home.php?Page=". $row['int_Page_ID']. "' title='". $row['mem_Description']."'>". $row['txt_Label']. " \n"; } mysql_free_result($rst); } RenderLeftPanel(); ?>

15. Next Panel: right.inc Create a Context Menu: Copy and modify left.inc to show only those pages that have ?Page=XX as a parent – save as right.inc

16. Adding Content to the Site What kind of information makes up the “content” of a website? If you think about it, much of it could be handled by the following few fields… Topic title Category Date Author Description Picture Hyperlink Let’s add some content to our site that I have prepared in this format… Download tblContents.sql from the website Paste the contents of this file into the “SQL” box of phpMyAdmin and click “Go”…

17. Pasting a SQL export back into phpMyAdmin…

18. Content Presentation Panel(s) Although all Content is stored in the database in the same table, this does not necessarily mean that all has to be presented in the same fashion. Consider making several Panels: News (past 30 days) Events (Future only) Links (only title, hyperlink, picture)

19. Content Upload Panel Perhaps you want to allow your visitors to upload their own links, news & information? Create a form and a script for the Content table to accept new data. Integrate this form and form processing script into your website

20. The rest of the site… Other panels can be made similarly Examples: News in a particular category Events in the future Hyperlinks to other sites Advertising … The sky’s the limit…