4.1.3 From one product to more

PHP give us a great help to create multiple pages. We will see how '03Demo' became '04Demo' (download demo 04) by just adding more pages.

Modifying the CSS

First of all we must have a menu that will link all the pages, so it is a good idea to enable from CSS the left menu. So we did something like the listing "The modified CSS for multiple products solution 04Demo"

/* PART : LEFT -> MENU_LEFT */
td.gridLeft {
 display: table-cell;                                      
 /* CAN_CHANGE : visibility. 
 visible : table-cell; invisible : none; */
 height: 100%;                                             
 /* CAN_CHANGE : ex 100% or 200pt etc... 
 This change the height of LEFT,CENTER,RIGHT */
 width: 20%;                                               
 /* CAN_CHANGE : width percentage. 
 WidthLeft+WidthCenter+WidthRight=100% */
 vertical-align: top;                                      
 /* CAN_CHANGE : vertical-align: top or middle */
}

div.left {
 position: relative;                                       
 /* DO_NOT_CHANGE */
 padding: 2px 2px 2px 2px;                                 
 /* CAN_CHANGE : 
 top right bottom left padding widths */
 border-style: solid;                                      
 /* DO_NOT_CHANGE : border type */
 border-width: 1px 1px 1px 1px;                            
 /* CAN_CHANGE : 
 top right bottom left border widths */
 border-color: #59B4FF #59B4FF #59B4FF #59B4FF;            
 /* CAN_CHANGE : 
 top right bottom left border colors */
 margin: 10px 10px 10px 10px;                              
 /* CAN_CHANGE : 
 top right bottom left margin widths */
 background-color: #BFE2FF;                                
 /* CAN_CHANGE : background color */
}

/********************************************
*********************************************/
/* PART : CENTER -> CONTENT */
td.gridCenter {
 display: table-cell;                                      
 /* CAN_CHANGE : 
 visibility. 
 visible : table-cell; invisible : none; */
 width: 80%;                                              
 /* CAN_CHANGE : 
 width percentage. 
 WidthLeft+WidthCenter+WidthRight=100% */
 vertical-align: top;                                      
 /* CAN_CHANGE : 
 vertical-align: top or middle */
}
div.center {
 position: relative;                                       
 /* DO_NOT_CHANGE */
 padding: 3px 3px 3px 3px;                                 
 /* CAN_CHANGE : 
 top right bottom left padding widths */
 border-style: solid;                                      
 /* DO_NOT_CHANGE : border type */
 border-width: 0px 0px 0px 0px;                            
 /* CAN_CHANGE : 
 top right bottom left border widths */
 border-color: #0000FF #0000CC #000099 #000066;            
 /* CAN_CHANGE : 
 top right bottom left border colors */
 margin: 0px 0px 0px 0px;                                  
 /* CAN_CHANGE : 
 top right bottom left margin widths */
 background-color: #8CCFFF;                                
 /* CAN_CHANGE : background color */
}

The modified CSS for multiple products solution 04Demo

---

As you can see the left width is 20% and the center width has changed to 80% so 20% + 80% = 100%. We also put some cool colors to the left box.
Notice that we did not add a single line from the original CSS we just modified some attributes.

Adding the menu

Since we have added in CSS the menu we have to go to 'includes\leftcolumns' and create our menu. A possible menu is the listing "Adding the menu".

<div align="center">
<font class= "normal">MENU</font>
</div>

<br>

<a href="index.php" class="normal">Index</a>
<br><br>
<a href="book1.php" class="normal">My First Book</a>
<br>
<a href="book2.php" class="normal">My Second Book</a>
<br>
<a href="cd.php" class="normal">My Cd</a>
<br><br>
<a href="author.php" class="normal">About 
the Author</a>

<br><br>

Adding the menu

---

Note that the link colors are defined at the CSS file so if you want to change colors sizes etc... just go to the CSS and modify them.

Adding more pages

How can we add more pages? This operation is hilariously easy. Just copy the 'index.php' and the copied file rename it to 'book1.php' for example. Now you will get a second page. Open this page with notepad++ and add the new fundamental attributes title,description and keywords. The new page will have the same header, footer but not the same content so we have to change the content (include) link. At the sixth attribute you should change it to something like this :

$_GET['content'] = FirstBook; 

Adding new pages. Changing the include link

---

Now go to contents folder and create a new file called 'Firstbook.inc'. There you can write your new content for your new page ('book1.php'). Please note that the include link and the inc file have the same name. The Firstbook.inc in this test looks like this :

<div align="center">

<br><br>

<font class="verybig">
My FIRST Book's Title
</font>

<br><br>

<img src="images/MyBook.png" alt="My Book Logo">

<br><br>

<font class="normal">
Description : This is a nice book bla bla bla ...
</font>

<br><br>

</div>

New content page

---

Repeat this method for each new page you want. It is really easy to do. These are the steps :

• Create (copy) a PHP page
• Change the title, description and keywords (point 1,2,3)
• Change the content link of the PHP page (point 6)
• Create (copy) the content (include) using the "Editing the inc" tags

As you can see on '03Demo' we have defined the header and footer.inc these include pages will remain the same on the '04Demo'.
In order to expand your website you have to write only the content and create a page with the title and the description. This method is pretty straightforward.