PHP Tutorial: Menu Or Sidebar Script For CMS101

jlhaslip

Mar 1 2006, 03:42 AM

A Php Menu-builder Tutorial

This Sidebar Menu-builder code and the php scripts are adapted from a Tutorial on the Astahost.com Forum titled : CMS101 - Content Management System Design .
Since the original tutorial's author (vujsa) did such a marvellous job of describing the system in the original Topic posting, I will not attempt to explain it here, rather, I invite you to have a look at his Topic and learn from it.
The Basic tutorial provided coding for developing a table-based web-site template which used php includes and embedded data to create a 'menu section' in the template, which was simply building a list of anchors inside a table cell using php. This adapted version takes it a couple of steps further.

Notes

1.) To begin with, the list of menu items are inside a div tag which is more compliant to the standards. The Template used by vujsa is 'table based', but, using the 'sidebar' code in a div-structured page would bring it in-line with proper css and (x)html coding, (using div's and embedded css rather than tables). (*see note about validation below*) The focus here is on the 'menu' creation, not the template structure.

2.) Secondly, the list is built using dl, dt and dd tags instead of ul's and li's. This allows for a little more control on the styling of the Menu. Where the "ul,li" method is a two level structure, the "dl, dt, dd" method allows for three levels of styling. There are numerous tutorials on the web showing dl menus and I encourage you to read them.

3.) Thirdly, the new sidebar version adds class tags to, again, allow for some CSS hooks.

4.) Fourthly, be aware that this Model will, NOT pass the w3c validator for the simple
reason that the menu includes an "alt=" tooltip feature.(with this exception, the code did in fact validate.)
The alt= is a deprecated html tag and is not allowed in the most recent Standards, so if you are a 'purist', this code isn't for you unless you remove this portion of the function and data structure. Title tags are included. They are the preferred method to include 'tooltips', but with the large percentage of users still bound to this proprietary Microsoft feature, I have chosen to allow for it here.

5.) Fifth, the css for the table is embedded in the code, but is easily removed and could be linked to an external stylesheet. I'll leave you to do that. The css for the sample sidebar in the index2.php file is already in a file named sidebar.css.

CODE

//
<?php	// start using php parsing
//
// this is the function which uses the data defined below
//

function make_menu($name,$class, $url,$alt,$title) {

//
// check to see if the div is starting
//
if ($url == "header") {
	$link = '<div><dl><dt class="' . $class .'" >' . $name . '</dt>';
	}
//
//	or else  check to see if the div is ending
//
	else  {if ($url == "footer") {
		$link = '</dl></div>';
		}
//
//		or there must be link information
//
		else{
			$link = '<dd class="' . $class . '"> <a href="' . $url . '" title="' . $title . '" alt="' . $alt . '">' . 
$name . '</a>';
			}
		}
/
// return from the function with a string variable for echoing
//
return $link;
}
?> // end this function

<?php // place this code where you want the menu in your html page
/
//	$crlf is used to format the html output. One long line of text which is difficult to read
//
$crlf="\n\r\t";
//
//	call the function once for each entry in the list of links
//	the first call prints the opening div tag and sets a class for the div. specify $url as 'header'
//

echo make_menu("Sidebar Header Here", "sbhead1", "header","","") . $crlf;

//
//	the remaining calls create a link (anchor) tag of another class
//	using variables in this order:($name,$class, $url,$alt,$title)
//
//		$name - displayed button name
//		$class - css class for the link / header
//		$url - h t t p address for the button or defines a header and footer
//		$alt - the contents of the alt tag displayed on mouse over
//		$title - the contents for the title tag displayed on mouse over
//		
//	echo make_menu("displayed button name", "css class for the link / header", "place link here inside quotes","contents of the alt tag","the contents for the title tag") . $crlf;
// each link can have different classes if desired see the Third group of the index2.php example
//
//	Sample data as used for the index2.php file
//
echo make_menu("Google", "link", "http://www.google.com","Google Search","Google Search from here") . 
$crlf;
echo make_menu("Yahoo!", "link", "http://www.yahoo.com","Yahoo Search","Yahoo!") . $crlf;
echo make_menu("My Favourite Forum", "link", "http://www.trap17.com","Trap17 Forum","Trap17 Forum") . 
$crlf;
//
// call the ending div tag by specifying 'footer' as the variable $url
//
echo make_menu("", "", "footer","","") . $crlf;
?>

<?php 
//
// multiple sub-sidebars of different classes can be called within the same div by repeating the function calls 
using new data
//
echo make_menu("Second Sidebar", "sbhead2", "header","","") . $crlf; 
echo make_menu("Google", "link1", "http://www.google.com","Google it from here","Google it from here") . 
$crlf; 
echo make_menu("Yahoo!", "link1", "http://www.yahoo.com","Yahoo Search","Yahoo Search") . $crlf;
echo make_menu("Another Great Forum", "link1", 
"http://www.astahost.com/info.php/cms101-content-management-system-design_t7778.html","Astahost 
Forum","Astahost Forum") . $crlf; 
echo make_menu("", "", "footer","","") . $crlf;
?>

<?php 
//	
//	or alternate the classes for presentation. This example alternates the background colours for the dd's.
//	All three dl's use different classes in this example, but the css is not defined for them.
//
echo make_menu("Third Sidebar", "sbhead3", "header","","") . $crlf; 
echo make_menu("Google", "link", "http://www.google.com","Google it from here","Google it from here") . 
$crlf; 
echo make_menu("Yahoo!", "link1", "http://www.yahoo.com","Yahoo Search","Yahoo Search") . $crlf;
echo make_menu("Yet Another Forum", "link", 
"http://www.astahost.com/info.php/cms101-content-management-system-design_t7778.html","Astahost 
Forum","Astahost Forum") . $crlf; 
echo make_menu("", "", "footer","","") . $crlf; 
?>
//

The primary purpose for making this template available is to provide a learning experience, not to provide coders with the end product. Admittedly, this Template is very basic and is not meant to be 'cut and pasted' into a web site, but rather, to be used as a learning tool to provide you with the means to build your site using templating concepts which makes the maintenance of a site easier, and the presentation more consistent across pages. Some html/css knowledge would be required to make changes to the files, but very little.

Just a reminder to make any modifications on a 'copy' of the files so if you alter something critical to the function of the code, you will have an un-modified version to resume your work from.

Happy coding.

Zip File Contents

For the Basic Template use :
index.php
header.php
menu.php
main.php
footer.php

For the Sidebar Version use :
index2.php
header.php
menu2.php
main.php
footer.php
sidebar.css

Download the sample files here

A sample of the original menu code is available in the file named menu.php
To build the menu inside the table based template using php includes as per vujsa's Tutorial go here: index.php
To sample an unstyled 'sidebar menu' : menu2.php
To build the Basic Template with the a styled sidebar menu : index2.php
To alter the css for the index2.php: sidebar.css

Using these files on your Local Computer requires a version of php installed and the files resident in your "localhost" path. Instructions for the use or installation of php is beyond the scope of this article.
Google on "xammp" or "wamp" to find out more about those two packages.

Download Zip file Here

vujsa

Mar 8 2006, 05:32 AM

Very nice followup to my tutorial. Well written and easy to follow.

The PHP include function has really made the job of a webmaster much easier and this tutorial proves it. If someone had used my tutorial to build their menus on their website and then read your tutorial and wanted to convert their menu to a more up to date method, it wouldn't be very difficult. Only one file would need to be changed.

Keep up the good work.

vujsa

techocian

Mar 9 2006, 03:19 AM

I like the tutorial, its fortified some of the concepts that Vujsa has discussed with me earlier (Yes Vujsa, I haven't been asleep all this time!

). After reading Vujsa's php tutorials i started experimenting with w3school's samples codes. (The ones where they have the code on the left and the result on the right) It worked great and i find it understandable. I took a sample php file from one of my phpnuke files and started looking through it and i found i could only understand few portions of it, which included the background, some modules and such.

What i don't get from these tutorials is why your main focus is always on creating a basic menu? Is this what php is all about? Secondly, why couldn't one just use plain HTML/CSS to modify their menu bar instead of going through the trouble of setting up a php file just for the menu? Are there additions that could be added onto a menu with php? Finally, I do sortof understand the sample code you gave and i GREATLY appreciate your sample menu that you hosted yourself but I'm missing out on those important keyterms again. (again applies only to Vujsa

) What does the tag <DT> do? I'm pretty sure its a HTML tag but i'm not sure. I also want to know if the variables you assigned to it are definite, say for this excerpt:

CODE

echo [b]make_menu[/b]("Sidebar Header Here", "sbhead1", "header","","") . $crlf;

I'm focusing on the "make_menu" portion as I'm wondering if this is a real code for making a menu in php? Through my learning of HTML and CSS i've learnt that they are definite and you cannot change them. But Java can be altered into anyway you want. So is php "flexible"?

Thanks again! I'm trying to learn php and taking classes that stress on memorizing in school so i might be a little slow.

vujsa

Mar 10 2006, 05:26 AM

QUOTE(techocian @ Mar 8 2006, 10:19 PM)

What i don't get from these tutorials is why your main focus is always on creating a basic menu? Is this what php is all about?

The menu is a very simple way of explaining this principle in PHP. Since most people use some type of menu in their website, this technic can be easily applied to most websites.

QUOTE(techocian @ Mar 8 2006, 10:19 PM)

Secondly, why couldn't one just use plain HTML/CSS to modify their menu bar instead of going through the trouble of setting up a php file just for the menu? Are there additions that could be added onto a menu with php?

Imagine that your website is rather large (50 static pages) and you wanted to add a menu item to your menu bar that is on every page. You would have to edit 50 pages right? If the menu was a seperate file which you just included on every page, then only the one menu file would need to be edited right?

QUOTE(techocian @ Mar 8 2006, 10:19 PM)

I also want to know if the variables you assigned to it are definite, say for this excerpt:

CODE

echo [b]make_menu[/b]("Sidebar Header Here", "sbhead1", "header","","") . $crlf;

The make_menu() command is actually a user defined function that was written in the begining of the script. The code you pasted simply sends information to that funtion and then the function returns the end result.

As far as being flexable, PHP is just a control. When used to make web pages, it controls what HTML will be sent to the use's web browser. That is all it does really. JavaScript and CSS are parsed on the user's computer which allow them to offer dynamic features on otherwise static pages.

I hope this clears a few things up for you.

vujsa

jlhaslip

Mar 10 2006, 07:22 PM

QUOTE

What does the tag <DT> do?

w3schools has this to say about them.
The (dl, dt, dd format} is used to 'structure' the list of links in the menu, similar to <ol> or <ul> tags, but different. Rather than use a 'class' or 'id' for the links, <dt>, <dl>, <dd>'s can be targetted for css attributes. When using <li>'s within a <ul> tag, there are only two attributes which you can select to assign attributes for without using 'class' or 'id'. Using this <dt> code in the html allows for an additional selection criteria. This gives you a greater degree of control on the output for colours, sizes, spacings, etc.

Also, it can make it easier to control some page output. Use the <dt> selectors for the menu and <ul>'s inside the page when the page contains a list and it will be a little easier for determining the selection criteria for styling, sometimes. A bit of a hack, but what the heck...

sid.calcutta

May 9 2006, 08:22 PM

Thanks to you both Vujsa and Jihaslip for providing us with such an enriched tutorial. Here i'll be describing a method that you all may find interesting.
The backbone architechture of a PHP-MySQL based CMS.

To start wih for the sake of simplicity, let us assume we have a table name tbl_content which contains four fields-
1) Content_ID INT AUTO_INCREMENT NOT NULL PRIMARY KEY
2) Category Varchar(50)
3) Title Varchar(100)
3) Content Text

As the name implies, it will store the contents categorially, and each item listed in the category field will appear as a menu item in the home page.

I'll strip off all the unnecessary formatting for the sake of understanding.

Let us start with the header;

CODE

      <?php   // file : index.php -- Architechture of a PHP-MySQL based CMS
      echo "<div id = \"header\">";
      include("header.php");
      echo "</div>";

// This will show the header. Your header.php file will contain the following items

//--------------Copy the section below and save as header.php -----------------------------------------//

CODE

// -------------Copy the above section and save as header.php ------------------------------------------//

//Now comes the case of left menu items. As I have mentioned already, the value of the category field in the //content table will be shown as the menu item. So let us connect to the database to show you how it works.

CODE

        $db_host="localhost";
        $db_user="your_user_id";
        $db_pass="your_password";

// Now connecting to Database:

CODE

$link_id=mysql_connect($db_host,$db_user,$db_pass);
if(!$link_id) die("Cannot connect to the database, please try after some time");

// error handler, if an attemp to connect to the database fails

CODE

           $query="SELECT distinct Category from tbl_content";
           $result=mysql_query($link_id);
           if(!$result) die("No result found, please insert some content");

// And finally we have selected catagories from the tbl_content table;
//Now we'll show it in the form of table data

CODE

  echo "<div id=\"menu\">";
           echo "<table>";
           while($data=mysql_fetch_row($result)) {

// Now we have started to create menu items

     echo"<tr><td><a href=\"$PHP_SELF?category=$query_data[0]\">$category</a></td></tr>";
      }

         echo"</table>";
         echo"</div>";

// Now we'll be showing the content for each of the selected category.

CODE

       echo"<div id=\"content\">";

      $selected_category=$_GET["category"];
      if(empty($selected_category)) $selected_category="Home";

// Here we have tried to retrieve the value of $category field from the url
//But for any reason, if we cannot find one, the home page content will be shown
//Also we have assumed that the table tbl_content contains atleast one record...
//... which is typically some thing like
// Category = Home
// Title = Green Earth Website - All greens- Free posters -Music - Cards
// Content = Hi everybody, this is exactly where you must visit each day to show
// the latest revolutions and programs regarding Green Earth foundation......

CODE

         $query="SELECT Title,Content from tbl_content where Category LIKE '$selected_category'";
         $result=mysql_query($link_id);
         if(!$result) die("No result found, please try after some time!");
         $data=mysql_fetch_row($result);
         if(!$data)  die("Content not found, please try again");
         echo "<table>";
         echo "<th><td>$data[0]</td></th>";   // This will show the content title in the table header
         echo "<tr><td>$data[1]</td></tr>";   // And this will show the content
         echo"</table>";
         echo"</div>";

// Now comes the footer section :

CODE

       echo "<div id=\"footer\">";
       include("footer.php");
       echo"</div>";
?>

</body>
</html>

<?php //----------------------------Your index.php file ends here -------------------------------------//?>

Copy these lines as save as footer.php

CODE

           <table>
             <tr><td>Thanks for your visit! Please come back soon</td></tr>
            </table>

Copy the above lines and save as footer.php

That's it.

I have not tested the codes written above, so I'm not quite sure about the accuracy of these codes, but what I have tried here is to explain the basic logic that may be used to generate menu and show contents of a webpage in a PHP-MySQL CMS.

And one more task you must do to see it in effect, that is to define your CSS to correctly position the header, menu,content and footer section of your webpage.

Regards,
Sid

jlhaslip

May 9 2006, 10:07 PM

Hey, Sid,
Nice job there.
I am sure the members at the Forum will benefit from this addition to the CMS 101 Tutorial. If we keep this Topic alive long enough, we will have a new Forum Template for here and at the Trap17 site, lol.
I am just beginning to learn some SQL , so I am not exactly an expert, but, I think this is a great lesson.
Thanks for adding it.

*edit typos*

ADD REPLY / Got an Opinion!	a humble request :-)	RAPID SEARCH!	Free Hosting	[X]
Express your Opinions, Thoughts or Contribute your information that might help someone here. Ask your Doubts & Queries to get answers.. "Together, We enlight each other!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE

PHP Tutorial: Menu Or Sidebar Script For CMS101 - and other applications as well

PHP Tutorial: Menu Or Sidebar Script For CMS101 - and other applications as well