PHP, CSS navigation bar coding

[MatthewBOnline]

Hi,

I am starting to design the navigation bar down the left side of the page for a new web site. I am using CSS to style it. Can someone confirm if this is the best way when using PHP?

To create the navigation bar I am using PHP and then I am using CSS to style it. So I am using the list of product names and links to the page in a list, which is then styled using CSS.

Without PHP the code for one product in the list looks like:

<li><a title="Product Number 1" href="www.sitename.co.uk/products.php?name=product-number-1">Product Number 1</a></li>

I plan to use the PHP to 'echo' the product name for the "title" and the end of the code above. For the "href" I will manually write "wwww.sitename.co.uk/products.php?name=" and then for the "name" I will use PHP to enter the selection choice.

Is this the common way to design a navigation bar with MySQL, PHP and CSS? I was thinking I could call up a list using PHP from the MySQL Database but this 'list' would not have any coding and there is no way of adding code to a list produced when using PHP!!

Matt.

[martbean]

Hi Matt,

Yes, that would be a reasonable way to do it, but I don't quite get what you mean by "there is no way of adding code to a list produced when using PHP".

I would normally either have an array of nav items, or get them from a MySQL database, then iterate through the list and output an <li> for each, eg:

$navitems = array('filename1.php' => 'Page Name 1', 'filename2.php' => 'Page Name 2');

echo "<ul>\n";

foreach ($navitems AS $k => $v) { 
 echo '<li><a href="' . $k . '" title="' . $v . '">' . $v . "</a></li>\n";
}

echo "</ul>\n"; 

That's a simplified example but you get the idea. As to whether it's the common way to do it, I don't know but it's the way I do it

[cranial-bore]

I'm not quite sure what you meant by "I was thinking I could call up a list using PHP from the MySQL Database but this 'list' would not have any coding and there is no way of adding code to a list produced when using PHP!!"

If you store the whole list HTML as a single string in the DB then your options would be limited.
Better would be to store each item in a row, and each to have title, name, anchor columns so PHP can output those.

A DB might be unnecessary though, martbeans array example would probably do.

I'd avoid coding www.sitename.co.uk/products.php?name into your template. If you want to run the site at a different URL (i.e. your local machine) that is going to be cumbersome to change.

[MatthewBOnline]

martbean, I do not understand your coding. It might be the "=>" that is confusing me. I have never seen this used. I'm guessing the k and the v in the $k and the $v have something to do with the first line of code? To me "=>" mean equal or greater than but it does not make sense here.

Matt.

[martbean]

OK, well it'd be worth reading up on arrays:
PHP: array - Manual

The array contains key/value pairs (which I later reference as $k and $v) in the format: key => value.

The values can be referenced by $arrayname['keyname'] or in my earlier example by a foreach loop which iterates through each pair in the array and outputs the keys and values within the <li>.

To be honest I'd recommend investing in a good (beginners) guide to PHP. I've found the Visual Quickpro Guides to be really good, as well as the Sitepoint books of course.

[MatthewBOnline]

OK - I'll read up on that.

Do you have any experience with 'product title variations' when using a database?

Say you take the iphone 4

The title of the web page might be: Apple iPhone 4 Mobile Phone Device
The Product title in the description might be: Apple iPhone 4
The links might be: iphone-4.php
The Homepage might refer to the product as: Apple's Iphone 4 Smartphone In Stock.
etc., etc..

If I cater for these variations in the database would I be wasting fields with similar information?? I want to use a template to display web pages so I cannot type it in manually?

Any experience with this problem? I do not want a basic web site where every mention of the product is identical!

Matt.

[martbean]

Yes, I would have a separate field for each title, eg. meta_title, product_title, filename, etc. Don't worry about repeating similar information; they're all slightly different so there's not much you can do about it.

[MatthewBOnline]

Hi again,

I have found some useful code in example 2 at:

PHP Learn It! PHP Replace String

It shows how to replace a space with a hyphen.
So 'Product Number 1' becomes 'Product-Number-1' - useful for writing links from plain text!!

Would you recommend typing 'Product-Number-1' into the database rather that using the code I have found. Typing it into the database would be quicker than using this code to change every time there is a link but may be you recommend code in favour of database size!????!

Matt.

[martbean]

That's one way of doing it, but the problem is if you change the product name at a later date the filename will also change, braking the old link.

You also need to consider special characters (&, /, etc.) that may be in the product name, and there may be situations where a product name is very long and you'd prefer to have a shorter URL. I would say it's more useful to enter a separate filename.

Database size isn't likely to be an issue until you get to hundreds of thousands of entries.

[MatthewBOnline]

Can someone please explain the top line of code above (also below):

$navitems = array('filename1.php' => 'Page Name 1', 'filename2.php' => 'Page Name 2');

1. Why does the array have 2 file names in it? I thought a navigation bar would only request data from a MySQL Database, not rely on files.
2. Is this a simple example with 2 items in the navigation bar. If there were 200 products in the web site would this array include 400 entries (filename and page name for each)?

I'm confused,

Matt.

[cranial-bore]

It's an associative array, which means instead of numeric indexes (0, 1, 2, 3) it uses the file names (filename1.php, filename2.php) as keys. There are still only 200 values.

The same can be written as

$navitems['filename1.php'] = 'Page Name 1';
$navitems['filename2.php'] = 'Page Name 2'; 

[martbean]

1. It's an example of a navigation bar with two links (with a filename and a description for each). There are many ways of building a nav bar and one of them is to get the data from a MySQL database, another is to use an array. The filenames in this example are links that would be output to the page in an <a href>

2. If there were 200 products in an associative array like this there would be 200 pairs of data but I'm not really sure what you're getting at. In your example you wouldn't want to have 200 items in a nav bar as that would be a nightmare to navigate.

[MatthewBOnline]

Well... my idea is to have approximately 10 links within the left navigation bar. When a link is clicked, the navigation bar then includes a sub menu of about 15 products; so then the user has 10 main links and 15 in the sub menu. If the user selects a different link then a different sub menu appears below the link clicked with about 15 products within it, etc..

I thought the best way to do this would be with a separate PHP page for the HEADER, FOOTER, CONTENT and LEFT NAVIGATION BAR. Depending on what link is clicked in the left navigation bar, the appropriate PHP file is loaded for the LEFT NAVIGATION BAR. So there will be about 100 or more different PHP files for the navigation.

If you can think of a better way, I am all ears...

Matt.

[StarLion]

You need 1 PHP page for the left navigation bar. Period.

This goes back to your database design.
Every Product belongs to a Category. (Foreign Key: Product.CategoryID -> Category.CategoryID)
You can then have the single PHP page pull the list of categories, plus products within that category (if one is selected), and generate the navigation.

[MatthewBOnline]

I will read-up on the "Foreign Key" because at the moment I do not quite understand.

Further to my previous comment, can 1 PHP file be used if the left navigation bar changes slightly... I intend to have an ACCESSORIES link in the left navigation. If you click it it lists the different manufacturers. If you click a manufacturers link it then lists the Different products from that manufacturer. If you click the product you want the accessory for it then displays the list of all accessories for that product. So this is a sub menu that changes depending what you click on (making it simple to find the right accessory for the product you have). Can this also be achieved using a single PHP file?

And lastly, can the submenu selected always appear at the top of the navigation bar? For example, if I click "ACCESSORIES" which is the bottom link in the left navigation it does not require the user to scroll down to view the sub menu. Instead ACCESSORIES (once clicked) would appear as the top link in the left navigation bar with its' sub menu below. Can this be achieved with 1 PHP file for the left navigation bar?

Thanks,

Matt

[StarLion]

Okay so i think what you need to do here is sit down and spell out your logic. I normally do it in graphical form, but since this is a forum, i'll stick to the "Choose Your Own Adventure" style. Start at #1.

#1: When the user first shows up at my page, I want to display ________.
#2: If the user clicks a _________, go to 2a. Otherwise, go to 3.
2a: Display __________. <Add 'if the user clicks _____ if necessary. You get the idea>
#3: If the user clicks a _________, go to 3a. Otherwise, go to 4.

Figure out the different states the navigation can be in. ("Display just categories". "Display products in a category, and the category list below it", "Display manufacturers, and the category list below it", etc,etc)

Then you form the code out of that.

[MatthewBOnline]

In terms of 'if the user clicks' are you referring to JavaScript? PHP cannot do 'if clicked, do this' can it?

Matt.

[StarLion]

Well, yes, it can, but by "if clicked" I mean... "If a user clicks on ___________ link, the page that is displayed should show ____________"

[MatthewBOnline]

Are you referring to the 'get' function whereby the link would determine how the left navigation is displayed. So www.site.com/products?product=iphone

This would then display the submenu for iphone, given that the get function interprets the iphone as the link clicked.

If this is what you mean I can see 2 problems:

1. How do I code this so that if you select iphone 4 from the iphone submenu the iphone 4 page is loaded AND the navigation bar has the iphone submenu open still.

2. How do I ensure the link clicked and its' submenu appear at the top of the left navigation bar?

Apart from those problems, I think it might work.

Matt.

[StarLion]

You can have as many variables on the command line as you like.

products.php?category=phones&subcategory=cellphones&product=iphone

However, this isnt how I'd do it, personally.

an Iphone in a database belongs to a category. This information goes both ways.

if the user is looking at an iphone, I know that they are inside the phones category, so i can display that.
If the user is clicking on the phones category in the menu, i know that iphone is a product inside the category, so i can display that in the list.

[MatthewBOnline]

I like the idea that 'you know' they are inside the phones category but I am not sure how you know. Obviously I could add a field to the database called category and it could say "phones" as the entry. If this is what you mean do I have to add this to the URL as well (using the get function). You suggest 'you know' it is in phones category without it being in the URL, which sounds fair. But how do you code it in PHP? How does the web site know the category without using the URL?

Matt

[StarLion]

In your products table, have a field 'categoryid', that links to the category table.

If i'm sitting at products.php?productid=1 , and product #1 has a categoryid of 5, and category #5 is phones, then i know that when i'm looking at product #1, it's part of the phones category.

[MatthewBOnline]

OK I understand apart from where you say category table - this implies I am using 2 tables. Why do i need a category table... or do you mean category array in the PHP code??

Matt.

[StarLion]

I mean a category table. Because a category is something you want to store information about. The category name, mostly, but if, lets say, later on, you wanted to put a sale on certain categories of your store. You could have a field in your category table for 'discount'.

A database is not a single table, unless you're modelling something very, very basic.
The idea is to remove redundancy and overhead. For example. Let's take some products, and their categories, and...lets say their price... and the current discount i'm giving out.

Product, Category, Price, Discount
iPhone,Phones,300,0
Motorola i231,Phones,300,0
Tshirt,Apparel,12,5
Sweatshirt,Apparel,22,5
etc etc etc.

(I'm having a 5$ sale on apparel.)

Now, I COULD store all that in a single table. But it's highly wasteful to save the word "Apparel" in the database over and over and over... and that's assuming of course that you never ever maek a typo, because then you'd break your pretty groupings.

Instead, how about I do this...

Product,Category,Price
iPhone,1,300
Motorola i231,1,300
Tshirt,2,12
Sweatshirt,2,22

Categoryid,Categoryname,discount
1,Phones,0
2,Apparel,5

[StarLion]

And furthermore, what if you wanted to have seperate categories for Motorola Apparel, and Apple Apparel, but want to call them both "Apparel" in your navigation? Well a single table, you cant do that, because you couldnt tell the products apart. If they had different CategoryID's, though, you could tell them apart instantly, even if they had the same name.