205CDE Developing the Modern Web. Assignment 2 Server Side Scripting. Scenario D: Bookshop

Transcription

1 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

2 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

3 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. Figure 3: Authors 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.

4 Figure 4: Books 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. Figure 5: Genres Table 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.

5 Figure 6: Reserve Books 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. stores user s . 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 7: Users Table

6 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 confirmation. However, only registered users can reserve books. Figure 8: Product Page (Available to reserve) Product page changes if user reserves a book: reserve button disappears and available to reserve line changes to NO.

7 Figure 9: Product Page (Not 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. Figure 10: Browse Page 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.

8 Figure 11: Catalogue 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. Figure 12: New Books Page 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.

9 Figure 13: Sell Books Page, Not logged in. 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. Figure 14: Add New Author Page. 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.

10 Contact us form displays the address and to contact me. There is also an form to send me a message directly from the webpage. A person, who sends a message, has to enter his name, and message in the boxes provided. The entered is also validated using the PHP function. Figure 15: Contact Us Page. 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 16: Search Page.

11 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. Figure 17: Login Page. 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. Figure 18: Login Page (Logged in). 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.

12 Figure 19: Register Page. 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 20: My Account Page (1).

13 Figure 21: My Account Page (2). 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. Figure 22: Edit Account Page. 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

14 link is pressed confirmation question appears to make sure if user really want to delete his account. Figure 23: Delete Account Page.