Download ASM 2 Web Design 1633 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 Le Nguyen Quang Nam Student ID GCD Class GCD0905 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 Le Nguyen Quang Nam Grading grid P5 P6 P7 M4 M5 D2 D
❒ Summative Feedback: ❒ Resubmission Feedback: Grade: Assessor Signature: Date: Signature & Date:
TABLE OF CONTENTS
- Website Design & Development -
- Le Nguyen Quang Nam - GCD
- I. DESIGN PLAN (P5).
- Users’ requirements.
- Review accessibility standards and guidelines.
- 2.1 Design Principle.
- 2.2 Guidelines.
- 2.3 Success Criteria.
- Use cases diagram.
- Wireframes.
- 4.1 Definition.
- 4.2 My e-commerce website wireframes.
- Sitemap.
- II. IMPLEMENTATION (P6).
- Source code sample of the Website.
- 1.1 Landing Page.
- 1.1.1 Header (Navigation bar).
- 1.1.2 Body.
- 1.1.3 Footer.
- 1.2 Sales Page.
- 1.3 Shopping Cart Page.
- 1.4 Register and Login Page.
- 1.4.1 Register section.
- 1.4.2 Login Section.
- 1.5 Profile Page.
- Screenshots of Final website.
- 2.1 Screenshots of Landing Page.
- 2.1.1 Header(Navigation bar).
- 2.1.2 Body.
- 2.1.3 Footer.
- 2.2 Screenshots of Sales Page.
- 2.3 Shopping Cart Page.
- 2.4 Register and Login Page.
- 2.5 Profile Page.
- Comparison the website to the original designs and drawing conclusions.
- III. TESTING PLAN.
- REFERENCE LIST
- Figure 1 User’s requirements. TABLE OF FIGURES
- Figure 2 WCAG.
- Figure 3 Use cases diagram.
- Figure 4 Landing Page wireframe.
- Figure 5 Sales Page wireframe.
- Figure 6 Shopping Cart Page wireframe.
- Figure 7 Login and Register Page wireframe.
- Figure 8 Profile Page wireframe.
- Figure 9 My website sitemap.
- Figure 10 Visual Studio Code.
- Figure 11 Source code of Header session (HTML/PHP).
- Figure 12 CSS for Navigation bar.
- Figure 13 Source code of body of Plant Boutique.
- Figure 14 Source code of body of Plant Boutique (2).
- Figure 15 CSS for body.
- Figure 16 Source of Footer of Plant Boutique (HTML).
- Figure 17 CSS code of Footer.
- Figure 18 Query to create new Database “productdb”.
- Figure 19 Query to create new table “producttb” in Database.
- Figure 20 Query to get products from the database.
- Figure 21 Query to display products get data from the database.
- Figure 22 Source code of Shopping Cart Page.
- Figure 23 .HTML code for Register section.
- Figure 24 PHP code for Register section.
- Figure 25 HTML code for Login section.
- Figure 26 PHP code for Login section.
- Figure 27 Source code for Profile Page.
- Figure 28 Part of Landing Page.
- Figure 29 Navigation bar of Plant Boutique.
- Figure 30 Body of Plant Boutique (1).
- Figure 31 Body of Plant Boutique (2).
- Figure 32 Body of Plant Boutique (3).
- Figure 33 Footer of Plant Boutique.
- Figure 34 Sales Page (1).
- Figure 35 Sales Page (2).
- Figure 36 Shopping Cart Page.
- Figure 37 Register and Login Page.
- Figure 38 Profile Page.
I. DESIGN PLAN (P5).
1. Users’ requirements.
Nowadays, with the development of the Internet, people's tendency to buy online is increasing. That has led to an explosion of e- commerce websites. From a consumer's point of view, although there are many sales websites, there are quite a few sites that sell ornamental plants. Realizing that, I plan to design an e-commerce website about selling bonsai. In detail, I will design an e-commerce website called Plant Boutique that allows users to buy ornamental plants online. User can add products to cart as well as remove products from it. In addition, users can register an account and log in to the website. Once logged in, users can view their account information and log out of the site. In summary, user’s requirements include: Add products to cart and remove products. Purchase plants. Register and login. View account information. Logout.
Design principles: The four overarching principles of accessible website development. Guidelines: short statements providing guidance on what should be considered by designers and developers to make a website accessible. Success Criteria: Specific technical requirements to ensure that a website is compliant with the standard. Figure 2. WCAG.
2.1 Design Principle.
To ensure that your organisation meets the WCAG standard, it must follow the four POUR design principles:
Perceivable: Information and user interface components must be presentable to users in ways they can perceive. Operable: User interface components and navigation must be operable. Understandable: Information and the operation of user interface must be understandable. Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies
2.2 Guidelines.
- Perceivable Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, Braille, speech, symbols or simpler language. Provide alternatives for time-based media. Create content that can be presented in different ways (for example, simpler layout) without losing information or structure. Make it easier for users to see and hear content including separating foreground from background.
- Operable Make all functionality available from a keyboard. Provide users enough time to read and use content. Do not design content in a way that is known to cause seizures. Provide ways to help users navigate, find content, and determine where they are.
- Understandable Make text content readable and understandable. Make Web pages appear and operate in predictable ways.
Figure 3. Use cases diagram.
4. Wireframes.
4.1 Definition.
Wireframes are a simplified visual guide that represents the skeletal framework of a website. Prior to the design, wireframes are usually presented in black and white, and do not define any visual style, typography or imagery. Wireframes for a website are often compared to blueprints for a house. Blueprints define the number of bedrooms, bathrooms and other rooms of your house, but do not determine the color of the walls or the furniture inside your new home. Similarly, in wireframes, we define the pages and the functionality forms, video, image galleries, navigation, etc) required to achieve the goals of your website.
4.2 My e-commerce website wireframes.
Here are my website wireframes: Landing Page:
Figure 5. Sales Page wireframe. Shopping Cart Page:
Figure 6. Shopping Cart Page wireframe. Login and Register Page:
Figure 8. Profile Page wireframe.
5. Sitemap.
Here is my e-commerce website sitemap:
Figure 9. My website sitemap.
II. IMPLEMENTATION (P6).
In this project, I use Visual Studio Code as the IDE to develop and design my website. Plant Boutique will have 4 pages including: Landing page.
