205cde developing the modern web assignment 2 server side ... · assignment 2 – server side...

205CDE Developing the Modern Web Assignment 2

Arunas Bedzinskas, ID 3790007,2nd

year BsC Computing Student Website URL: http://creative.coventry.ac.uk/~bedzinsa/

205CDE Developing the Modern Web

Assignment 2 – Server Side Scripting

Scenario D: Bookshop

Introduction

This assignment was written using PHP programming language for interactions with

the website and the database. To work with database, mySQL interface was used.

Together this assignment had several tasks to achieve such as producing 3NF

database schema, upload data web forms.

Website Design

Even though for this assignment improving design is not key thing, this is from

where I started. I changed colors of my website for just being more pleasant for the

eye. All colors of the website were changed and adjusted. Also header picture was

changed as well, as some friends suggested that the text should have fewer effects.

Picture of homepage is below.

Figure 1: Homepage




Validation

As my webpage had problems with HTML validation in assignment 1, all pages are

successfully validated in assignment two. CSS file is validated as well. This

increases client acceptability of the website.

Changes To Website Interface

Various changes were made during the development process of the website. Firstly,

search form was changed from a search bar in every page to separate link to

search page in navigation menu. This was done for making a search with separate

choices whether to search for authors, title, ISBN or other. Furthermore, a link for

log in was moved to navigation menu as well, because I decided to display greeting

message for logged in user and navigation to user account in the top right corner of

the banner.

Database – mySQL Tables

Part of this assignment is to be able to insert data from forms in the website into

mySQL database and retrieve information from it. For that I had to create all the

tables needed for the data of the Second Hand Bookshop. I used five tables:

Authors – for storing authors of the books.

Books – for storing all the information related to new added books.

Genres – for storing genres of the books.

ReserveBooks – for storing a value whether book is available to reserve or

not.

Users – for storing all the information about the users that created an

account in the website.

Figure 2: Tables of Second Hand

Bookshop Database




Authors table have only two values to store: author id and author name. Author id

stores a value of the author name; it is also a primary key, which is linked to

foreign key in books table, so author name value can be retrieved while using the

books table.

Books table stores many values for identifying and viewing the book in the

webpage. Columns stores values as described below:

BookID – stores an unique book id, which is auto incremented value.

AuthorID – stores authorID which is a foreign key to authors table to retrieve

an author name.

Title – stores a title of the book.

Year – stores a year that book was published.

GenreID – stores unique genreID which is a foreign key to genres table to

retrieve a genre for the book.

Price – stores a price of the book.

ISBN10 – stores a unique ISBN 10 code of the book.

ISBN13 – stores a unique ISBN 13 code of the book.

Otherinfo – stores other information about the book that was entered in the

text field in the website.

Path – stores a url to access the image of the book in the server that user

uploaded while inserting new book.

UserID - stores unique userID which is a foreign key to users table to

retrieve a username for the book.

ReserveID – stores unique reserveID which is a foreign key to reserveBooks

table to retrieve a reservation status of the book.

ReservedUser – stores a username of the user, that reserved this book, uses

null value if the book is not reserved.

Date – timestamp value that stores date and time when the book was

uploaded to database.

Figure 3: Authors Table




Genres table is very similar to authors table as it has only two columns as well –

genre ID and genre name. Genre ID is linked to foreign key in the books table to be

able to retrieve genre name for the book display and upload.

Reserve Books table have two columns as well: unique ID and status. Status

column stores a character value of YES or NO which are used to show whether book

is available to reserve or no. Reserve ID column is also linked to reserve ID column

in the books table as a foreign key.

Figure 4: Books Table

Figure 5: Genres Table




Last table that I use is users which store all users that register in the Second Hand

Bookshop. Column uses are described as follows:

UserID – stores an unique user ID that is an auto incremented value.

FirstName – stores user’s first name.

LastName – stores user’s last name.

Username – stores user’s username.

Password – stores user’s password which is encrypted value. Encryption

further explained in the PHP code section.

Email – stores user’s email.

Addone – stores user’s address line one.

Addtwo – stores user’s address line two (optional).

City – stores user’s living city.

Country – stores user’s living country.

Postcode – stores user’s post code.

Date - timestamp value that stores date and time when the user created

account.

Figure 6: Reserve Books Table

Figure 7: Users Table




Website interaction with database – PHP

Firstly, I had to recreate all the current HTML pages to PHP as php file extension

also approves html code, so I was able to write both php and html codes in same

file. Homepage of the website just shows all the books ordered by alphabet. There

was a plan to make it so it would view books in the most viewed order, but I lacked

time of implementing this. Every book is shown in a field set with information about

book, price; author and title in the legend as a link, which directs user to product

page, which shows the book user selected. It displays all the information available

about the book. Users can also bookmark this page as the page retrieves

information using GET variable. Moreover, users can reserve the books for buy. If

the book is reserved successfully, user will receive an email confirmation. However,

only registered users can reserve books.

Product page changes if user reserves a book: reserve button disappears and

available to reserve line changes to NO.

Figure 8: Product Page

(Available to reserve)




Browse page is used to browse the entire book database. Users are able to find

them by author, year of publish and genre, ascending or descending order.

When they press a link they are redirected to a catalogue page which displays all

the books of the type selected (for example if user browses by author, catalogue

will display all the books that the author selected wrote). Page is also available to

bookmark as it uses GET variable as well.

Figure 9: Product Page

(Not available to reserve)

Figure 10: Browse Page




After that, when user chooses particular book, they are redirected to the same

products page that was mentioned above to display the book.

New Books page is not much different than home page, because it displays the

books in field sets as well. The only difference is that it displays books starting with

the newest one.

Sell Books page shows the form that is needed to fill in order to insert new book to

the system. User must be logged in to upload a book. A message appears if you try

to upload without logging in with a link to login page.

Figure 11: Catalogue Page

Figure 12: New Books Page




There is multiple drop down menus in this form. They are used to display authors

and genres available for books. However, if the user cannot find the desired author

or genre they can add a new one using a link near the boxes. They redirect to a

new simple page that adds a new desired author or genre in the system.

Users also can upload an image using the choose file button near the image text.

Image is resized and uploaded to the server. However, only jpg extension files are

allowed. After a successful book insert into database, a message will appear that

the book was added successfully.

Figure 13: Sell Books Page,

Not logged in.

Figure 14: Add New Author

Page.




Contact us form displays the address and email to contact me. There is also an

email form to send me a message directly from the webpage. A person, who sends

a message, has to enter his name, email and message in the boxes provided. The

email entered is also validated using the PHP function.

Search page has a search form. Searches are done using full text index, so

searches are not available through foreign keys. So, a drop down menu is provided

to choose, which table to search – author, title, genre, ISBN.

Figure 15: Contact Us

Page.

Figure 16: Search Page.




Login page is used as a login form to log in to user account and to reach a register

page through a link inside it. To log in, username and password are required to

enter. After registration, a password in the database is stored after encrypting it

using md5 function. To check if the password is correct, form password is encrypted

and compared to encryption stored in the database. This increases security of user

information.

After logging in, page is refreshed automatically. In the top right corner of the

banner, user greeting information should appear with a link to user account and a

log out button.

Register user page is just a form to complete to register a new user. It is similar to

sell books page. Even though it has some differences. Some fields in the form are

required and if they are not filled up, message appears that they must be filled up.

Furthermore, users cannot choose a username if one already exist.

Figure 17: Login Page.

Figure 18: Login Page

(Logged in).




My account page displays all the user information. If user wants to change it, there

is a link to edit account page where user can change his details. Furthermore, my

account page displays all the books that user uploaded and all the books that user

reserved.

Figure 19: Register Page.

Figure 20: My Account Page (1).




In the edit account page, the form appears with already filled up information. That

is the information that already exists about user. If user wants to change it – he

should delete the old one, enter new and press Update.

My account page also has a link to delete an account so if user wants to leave the

community, all the information about him will be permanently deleted. After the

Figure 21: My Account Page (2).

Figure 22: Edit Account Page.




link is pressed confirmation question appears to make sure if user really want to

delete his account.

Figure 23: Delete Account Page.

205cde developing the modern web assignment 2 server side ... · assignment 2 – server side...

Documents