Download Website Development for an Online Restaurant: A Case Study of YumYum - Prof. Pham and more Assignments Web Design and Development in PDF only on Docsity!
ASSIGNMENT 2 FRONT SHEET
Qualification BTEC Level 5 HND Diploma in Computing Unit number and title 10: Website Design & Development Submission date Date Received 1st submission Re-submission Date Date Received 2nd submission Student Name Nguyen Thi Khanh Nam Student ID GCD Class GCD0901 Assessor name Phan Thanh Tra Student declaration I certify that the assignment submission is entirely my own work and I fully understand the consequences of plagiarism. I understand that making a false declaration is a form of malpractice. Student’s signature Grading grid P5 P6 P7 M4 M5 D2 D
❒ Summative Feedback: ❒ Resubmission Feedback:
Grade: Assessor Signature: Date: Signature & Date:
- I. DESIGN DOCUMENT FOR THE E-COMMERCE WEBSITE (P5)............................................................................................
- Users’ requirements by User Story template..........................................................................................................
- Revision of accessibility standards and guidelines for websites.............................................................................
- a) Design principles..............................................................................................................................................
- b) Guidelines........................................................................................................................................................
- c) Success criteria................................................................................................................................................
- Use case diagram describing users’ behaviour on the system...............................................................................
- Wireframes for each proposed pages.....................................................................................................................
- a) Landing page....................................................................................................................................................
- b) Login page.....................................................................................................................................................
- c) Register page.................................................................................................................................................
- d) Profile page...................................................................................................................................................
- e) My cart page..................................................................................................................................................
- Site map for web development.............................................................................................................................
- II. IMPLEMENTATION OF WEB DESIGN AND DEVELOPMENT (P6)....................................................................................
- Screenshots of webpages and source code..........................................................................................................
- a) Landing page..................................................................................................................................................
- b) Register page.................................................................................................................................................
- c) Login page......................................................................................................................................................
- d) Profile page...................................................................................................................................................
- e) My cart page..................................................................................................................................................
- Features of the website.........................................................................................................................................
- a) Registering a new user..................................................................................................................................
- b) Login with email and password.....................................................................................................................
- c) CRUD actions (Create/Read/Update/Delete)................................................................................................
- III. COMPARISON OF THE MULTIPAGE WEBSITE CREATED AND THE DESIGN DOCUMENT (M4).....................................
- IV. TEST PLAN / TEST LOG TO REVIEW WEBSITE FUNCTIONALITY AND PERFORMANCE (P7)..........................................
- V. EVALUATING THE QUALITY ASSURANCE PROCESS (M5)..............................................................................................
- What is Quality Assurance (QA) process?.............................................................................................................
- a) Definition.......................................................................................................................................................
- b) Process of Quality Assurance........................................................................................................................
- How QA was implemented during my design and development stages..............................................................
- a) Website responsiveness................................................................................................................................
- b) Performance and compatibility across multiple browsers...........................................................................
- VI. REFERENCES.................................................................................................................................................................
- Figure 1 Use-case diagram for e-commerce system................................................................................................. Table of Figures
- Figure 2 Wireframe of the homepage.......................................................................................................................
- Figure 3 Wireframe of the login page.....................................................................................................................
- Figure 4 Wireframe of the register page.................................................................................................................
- Figure 5 Wireframe of the profile page...................................................................................................................
- Figure 6 Wireframe for shopping cart page............................................................................................................
- Figure 7 My website diagram..................................................................................................................................
- Figure 8 Home page of my website.........................................................................................................................
- Figure 9 Home page header code...........................................................................................................................
- Figure 10 Code for logo, caption, and menu button...............................................................................................
- Figure 11 Code of the carousel................................................................................................................................
- Figure 12 First category on the home page: Northern Cuisine...............................................................................
- Figure 13 Code to display the products...................................................................................................................
- Figure 14 Second category on the homepage: Central Cuisine..............................................................................
- Figure 15 Last category of the home page: Southern Cuisine................................................................................
- Figure 16 Footer of the home page.........................................................................................................................
- Figure 17 Code of home page footer......................................................................................................................
- Figure 18 CSS code of the home page.....................................................................................................................
- Figure 19 Register page...........................................................................................................................................
- Figure 20 HTML code of the registration form........................................................................................................
- Figure 21 PHP code of the register form.................................................................................................................
- Figure 22 CSS code of the register page..................................................................................................................
- Figure 23 Login page interface................................................................................................................................
- Figure 24 HTML code of the login form...................................................................................................................
- Figure 25 PHP code of the login form......................................................................................................................
- Figure 26 CSS code of the login page......................................................................................................................
- Figure 27 Profile page interface..............................................................................................................................
- Figure 28 PHP and HTML code of the profile page.................................................................................................
- Figure 29 PHP code to update user’s profile...........................................................................................................
- Figure 30 CSS code of the profile page....................................................................................................................
- Figure 31 Shopping cart page interface..................................................................................................................
- Figure 32 PHP code for the shopping cart functions...............................................................................................
- Figure 33 Code of the shopping cart page..............................................................................................................
- Figure 34 Registration notification (1).....................................................................................................................
- Figure 35 Registration notification (2).....................................................................................................................
- Figure 36 Registration notification (3).....................................................................................................................
- Figure 37 Registration notification (4).....................................................................................................................
- Figure 38 Login with wrong password case.............................................................................................................
- Figure 39 Login notification (1)................................................................................................................................
- Figure 40 Login notification (2)................................................................................................................................
- Figure 41 Nagivation bar after logging in................................................................................................................
- Figure 42 Users’ information stored in the database.............................................................................................
- Figure 43 How my information is displayed............................................................................................................
- Figure 44 Profile update notification.......................................................................................................................
- Figure 45 My ‘first name’ in the profile after being changed.................................................................................
- Figure 46 A product has been added to the cart....................................................................................................
- Figure 47 Cart page when there is no item.............................................................................................................
- Figure 48 Wireframe of the home page.................................................................................................................
- Figure 49 Created website homepage....................................................................................................................
- Figure 50 My website header when scaling it down to iPhone 6 screen................................................................
- Figure 51 Information used to create the account.................................................................................................
- Figure 52 Information stored in the database........................................................................................................
- Figure 53 Information to change on the profile page (address).............................................................................
- Figure 54 Information in the database after begin changed (address)..................................................................
- Figure 55 Message display when entering unidentical password and c-password................................................
- Figure 56 Message requiring to fill out blank space................................................................................................
- Figure 57 Message displayed when entering identical email.................................................................................
- Figure 58 Message displayed when logging in with incorrect email or password..................................................
- Figure 59 All products’ information displayed on website.....................................................................................
- Figure 60 Products’ information stored in the database........................................................................................
- Figure 61 Fish ball noodles product information displayed in the cart page..........................................................
- Figure 62 The symbol on the cart page after removing all products......................................................................
- Figure 63 Total price when adding some products to the cart...............................................................................
- Figure 64 Shopping cart page when signing out.....................................................................................................
- Figure 65 Message displayed when adding a product to cart without logging in..................................................
- Figure 66 Quality Assurance....................................................................................................................................
- Figure 67 My website displayed on desktop screen (1)..........................................................................................
- Figure 68 My website displayed on desktop screen (2)..........................................................................................
- Figure 69 My website displayed on mobile screen.................................................................................................
- Figure 70 Website performance in terms of animation..........................................................................................
- Figure 71 My website displayed on Microsoft Edge...............................................................................................
- Figure 72 My website displayed on Google Chrome...............................................................................................
I. DESIGN DOCUMENT FOR THE E-COMMERCE WEBSITE (P5)
1. Users’ requirements by User Story template
As a customer , I want to view all the availabe products on the website so that I can easily decide on what to buy. As a customer , I want to create an account on the website so that it can save my personal information to make purchases easier. As a customer , I want to view and edit the account information I have created on the website so that I can easily manage my account information. As a customer , I want to have an e-shopping cart so I can add or remove the items I am considering at will. As a manager , I want to view, add or remove the products on the website so that I can easily manage everything that my company sells on the website. As a manager , I want to view all the registered customers’ accounts information so that it will be more convenient and safer to deal with customers when I know who they are. As a manager , I want to view all the orders of the customers so that I can easily calculate the company’s revenue.
2. Revision of accessibility standards and guidelines for websites
The World Wide Web Consortium (W3C) established the Web Content Accessibility Guidelines (WCAG), a globally recognized standard. The WCAG standard's aim is to specify how to make Web content more accessible to persons with impairments. Accessibility encompasses a wide spectrum of disabilities, such as visual, auditory, physical, linguistic, cognitive, language, learning, and neurological impairments. These recommendations are separated into the parts listed below:
a) Design principles
־ Perceivable: Information and user interface elements must be presented to users in a way that they can understand. ־ Operable: User interface features and navigation must be usable. ־ Understandable: Information and user interface behavior must be comprehensible.
Priority 3: This checkpoint may be addressed by a web content developer. Otherwise, one or more parties will have difficulty accessing information in the paper. Satisfying this criterion will enhance Web document access.
3. Use case diagram describing users’ behaviour on the system Figure 1. Use-case diagram for e-commerce system This is the use-case diagram consisting of two users’ roles (customer including registered customer, new customer, and manager) correspoding to eight different users’ actions depending on the type of user.
4. Wireframes for each proposed pages
a) Landing page
Figure 2. Wireframe of the homepage This is the wireframe of the homepage consisting of a logo, a navigation bar, a search bar, a menu button, a carousel, categories’ names (here only one is illustrated) and products’ information.
c) Register page
Figure 4. Wireframe of the register page This is the wireframe of the register page consisting of a home button and a register form including inputting spaces for users, registration button and a login link.
d) Profile page
Figure 5. Wireframe of the profile page This is the wireframe of the profile page consisting of a home buttonm, inputting spaces for users, a place for users to upload avatars and a save button.
5. Site map for web development
Figure 7. My website diagram As can be seen, this is a simple and predictable website structure with basic content and the minimum functions of an e-commerce website to satisfy the needs of a single type of user, who is the customer.
II. IMPLEMENTATION OF WEB DESIGN AND DEVELOPMENT (P6)
1. Screenshots of webpages and source code
a) Landing page
This is the first look of my website when we visit it:
Figure 8. Home page of my website This is an online restaurant website (whose name is YumYum) which sells Vietnamese food from all three regions, including Northern, Central and Southern cuisine.
Figure 12. First category on the home page: Northern Cuisine This is how the way how the products’ information are displayed. Figure 13. Code to display the products This is the code to display the products’ information based on their category ID, which are 1, 2, or 3 correspoding to Northern Cuisine, Central Cuisine, and Southern Cuisine.
Figure 14. Second category on the homepage: Central Cuisine Figure 15. Last category of the home page: Southern Cuisine At last, this is the footer of the home page which includes all the contact information of the online restaurant:
