Web Pages for Simple Web Development Project with PHP and MySQL
Conventional Web Development with PHP and MySQL – Part 5
Forward: In this part of the series, we look at the main HTML pages for the simple web development project, described in the previous parts of the series.
By: Chrysanthus Date Published: 2 Aug 2012
Introduction
A typical web page for web development has HTML elements (with text) and one or a few empty portions where data from the database would be displayed. It is good to design the web page in such a way that if there is no data from the database, the empty portions in the HTML page would collapse; in this way, the presentation of the page would still be acceptable.
For the project in this series, I will talk about the index (home) page, the books page, the pens page and the login/registration page.
In the project, the home (index) page has summarized text of what the site is doing. In practice it should also have some of the products being sold; however, for our simple pedagogic project, that will be omitted. The books page will have 4 books displayed. The images, titles and short summaries for the 4 books will be hard coded. This will make the page more search engine friendly. When the user clicks the More hyperlink, the new books data will come from the database. The pens page is similar, but it is for pens. The login/registration page has two HTML Forms: one at the top and one below. The one at the top is for logging in by already registered members. The one at the bottom is for new members to register. Let us allow things that simple for this pedagogic project. Of course every site including web development sites have a contact page. The contact page for a web development site is a normal contact page that will send emails to important workers of the site. I assume you already know how to do that; so I will not address that in this series.
The home page typically has the name, index.htm. So it can also be called the index page. This is the code of the home page:
<!DOCTYPE HTML>
<html>
<head>
<title>University Bookshop</title>
<style type="text/css">
img {width:200px;height:200px}
</style>
</head>
<body>
<header>
<h1>University Bookshop</h1>
<a href='index.htm'>Home</a> <a href='books.htm'>Books</a> <a href='pens.htm'>Pens</a> <a href='login-registration.htm' id="login">Login</a> <a href='login-registration.htm#register'>Register</a>
</header>
<article>
A summary of all what the site is doing goes here . . .
</article>
</body>
</html>
The Books Page
This is the books page:
<!DOCTYPE HTML>
<html>
<head>
<title>Books in University Bookshop</title>
<style type="text/css">
img {width:200px;height:200px}
</style>
</head>
<body>
<header>
<h1>University Bookshop</h1>
<a href='index.htm'>Home</a> <a href='books.htm'>Books</a> <a href='pens.htm'>Pens</a> <a href='login-registration.htm' id="login">Login</a> <a href='login-registration.htm#register'>Register</a>
</header>
<article>
<table>
<tbody>
<tr><td><img src='itemsDir/BookA.jpg'><br>Book A Title Price: $9.99<br>This book written by ... published by ... year... explains ...</td><td><img src='itemsDir/BookB.jpg'><br>Book B Title Price: $9.99<br>This book written by ... published by ... year... explains ...</td></tr>
<tr><td><img src='itemsDir/BookC.jpg'><br>Book C Title Price: $9.99<br>This book written by ... published by ... year... explains ...</td><td><img src='itemsDir/BookD.jpg'><br>Book D Title Price: $9.99<br>This book written by ... published by ... year... explains ...</td></tr>
</tbody>
</table>
</article>
</body>
</html>
To test this page you have to create a directory called, itemsDir, in your home directory of your personal web server. Look for any jpg image of 400px X 400px, give it the name BookA.jpg and place it in the itemsDir directory. Do the same thing for images, BookB.jpg, BookC.jpg and BookD.jpg for the code.
The pens page is created in a similar way to the books page. This is it:
<!DOCTYPE HTML>
<html>
<head>
<title>Pens in University Bookshop</title>
<style type="text/css">
img {width:200px;height:200px}
</style>
</head>
<body>
<header>
<h1>Pens in University Bookshop</h1>
<a href='index.htm'>Home</a> <a href='books.htm'>Books</a> <a href='pens.htm'>Pens</a> <a href='login-registration.htm' id="login">Login</a> <a href='login-registration.htm#register'>Register</a>
</header>
<article>
<table>
<tbody>
<tr><td><img src='itemsDir/BluePen.jpg'><br>Blue Pen Name Price: $1.50<br>Short pen summary...</td><td><img src='itemsDir/RedPen.jpg'><br>Red Pen Name Price: $1.50<br>Short pen summary...</td></tr>
<tr><td><img src='itemsDir/BlackPen.jpg'><br>Black Pen Name Price: $1.50<br>Short pen summary...</td><td><img src='itemsDir/GreenPen.jpg'><br>Green Pen Name Price: $1.50<br>Short pen summary...</td></tr>
</tbody>
</table>
</article>
</body>
</html>
The pen images are kept in the same directory as the book images.
This page has two forms: one at the top and one below. The one at the top is for login and it has just a user name field and a password field. The one below is for registration of a new student. It has the user name field for the student to type in the user name of his choice. It has the password field for the user to type the password of his choice. It also has fields for the user’s email address, his geographical address, his city, state and country. For simplicity, there will be no validation of the fields. For simplicity again, the fields will not be displayed in regular fashion. However, in practice, you should have validation for the fields, and good presentation. The code for the page is:
<!DOCTYPE HTML>
<html>
<head>
<title>Login-Registration for University Bookshop</title>
<style type="text/css">
img {width:200px;height:200px}
</style>
</head>
<body>
<header>
<h1>Login or Register at University Bookshop Site</h1>
<a href='index.htm'>Home</a> <a href='books.htm'>Books</a> <a href='pens.htm'>Pens</a> <a href='login-registration.htm' id="login">Login</a> <a href='login-registration.htm#register'>Register</a>
</header>
<article>
<h3>Login</h3>
<form method='POST' action='login.php'>
User: <input type='text' name='username'><br>
Password: <input type='password' name='password'><br>
<button type='submit'>Send</button>
</form>
<form method='POST' action='register.php'>
<h3>Register</h3>
First Name: <input type='text' name='firstname'><br>
Middle Name: <input type='text' name='middlename'><br>
Last Name: <input type='text' name='lastname'><br>
Email: <input type='email' name='email'><br>
Address: <input type='text' name='address'><br>
City: <input type='text' name='city'><br>
State: <input type='text' name='state'><br>
Country: <input type='text' name='country'><br>
User: <input type='text' name='username'><br>
Password: <input type='password' name='password'><br>
Re-Type Password: <input type='password' name='password'><br>
<button type='submit'>Send</button>
</form>
</article>
</body>
</html>
When the Login Submit button is clicked, it calls the login.php script in the home directory at the server. When the Register Submit button is clicked, it calls a different PHP script, register.php, still in the home directory of the server. In fact, in this project, all the PHP scripts are in the home directory.
That is it for this part of the series. We stop here and continue in the next part.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT