Ultimate Guestbook Tutorial: How to build a Guestbook with a honeypot, error checking, IP banning, pagination, e-mail notification and smilies with PHP and mySQL
So in this section we will make a skin file that will allow us to style the layout of the guestbook, whilst also including a css file and the required HTML header/footer statements.
1. In the templates folder make a file called skin.php and add in this code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
-
<head>
-
<title>Guestbook Tutorial</title>
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-
<link type="text/css" rel="stylesheet" href="templates/css/style.css" />
-
</head>
-
<body>
-
<table width="300" cellpadding="0" cellspacing="0" border="0" align="center">
-
<tr>
-
<td valign="top"><?php include('form.php');?></td>
-
</tr>
-
</table>
This code simply tells the browser how to read the page, adds a css stylesheet to the page and then using '' brings in the form.php page as if it were part of the skin.php page. Simple
Save that file!
2. Now lets add a controller file, which is a file that the visitor will arrive at first, and will never see the form.php or the skin.php but instead will see the final product of all combined. If you don't get what i mean, you will later on in the tutorial! Outside of the templates directory make a file called 'index.php' and add this code:
-
<?php
-
include('templates/skin.php');
-
?>
You should now understand what's going on there. Indeed we included the skin.php file to the main page. You will see the benefit of doing this later on.
3. Next up lets quickly get the stylesheet going. Make a new folder in the templates folder and call it 'css'. Then make a file inside of this folder and call it 'style.css'. Congrats. Now lets throw some style into this file. Open it up and save this code into it:
-
/** GuestBook Tutorial CSS **/
-
-
html,body {
-
background: #222222;
-
color: #FFFFFF;
-
font-family: "HelveticaNeue-UltraLight", Helvetica, Arial, Verdana, Courier;
-
}
-
-
.guestbookform {
-
padding: 10px;
-
border: #999999 solid 1px;
-
background: #333333;
-
}
-
-
input, textarea {
-
border: #999999 solid 1px;
-
width: 100%;
-
resize: none;
-
background: #FFFFFF;
-
color: #222222;
-
}
-
-
form, input {
-
padding: 0px;
-
margin: 0px;
-
}
Excellent. So now if you look at your page it should look something like:

Time to give this guestbook some function.
