Download Assignment 2 - Website Design & Development - Pass and more Assignments Computer Science in PDF only on Docsity!
ASSIGNMENT 2 FRONT SHEET
Qualification BTEC Level 5 HND Diploma in Computing Unit number and title Unit 10: Website Design & Development Submission date 17 /05/ Date Received 1st submission Re-submission Date 20/05/ Date Received 2nd submission Student Name Huynh Minh Huy Student ID GCD Class GCD1001 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 Huy
Grading grid P5 P6 P7 M4 M5 D2 D
❒ Summative Feedback: ❒ Resubmission Feedback:
Grade: Assessor Signature: Date: Lecturer Signature:
Acknowledgement
First of all, I would like to thank the curators of the University of Greenwich, who make these courses available to students. I would like to thank all the authors and researchers who have researched about this data. In addition, I would like thank speaker Phan Thanh Tra for her very good and professional lectures and tutorials. Finally, I would like to thank the teachers and responsible staff of our university for providing a good learning environment.
Table of Contents
- CHAPTER 1: DESIGN PLAN.
- I. Users Requirements................................................................................................................................
- Introduce about the scenario.
- Users Requirements.
- II. Review Accessibility Standard and Guidelines..........................................................................
- Definition of Web Content Accessibility Standard and Guidelines.
- III. Use Case Diagram.
- IV. Wireframes.
- Definition.
- Wireframes for the website.
- V. Site Map.
- Definition.
- Site Map for the website.
- I. Screenshots of Webpages and Source Code.
- Landing Page.
- Register Page.
- Login Page.
- Home Page...........................................................................................................................................
- Profile Page.
- Cart Page.
- II. Screenshots of Final website with explanation.
- Landing Page.
- Home Page...........................................................................................................................................
- Sign-Up.
- Sign-In.
- Profile Page.
- Cart Page.
- III. Create/Read/Update/Delete Function.
- CHAPTER 3: TESTING.
- I. Test Plan.
- II. Test Schedule.
- III. Test Case.
- References
- Figure 1: WCAG. Table of Figures
- Figure 2: Use Case Diagram.
- Figure 3: Landing Page Wireframes.
- Figure 4: Sign-in Page Wireframes.
- Figure 5: Sign-up Page Wireframes.
- Figure 6: Home Page Wireframes.
- Figure 7: Profile Page Wireframes.
- Figure 8: Cart Page.
- Figure 9: Site Map.
- Figure 10: Landing Page.
- Figure 11: Landing Page header code.
- Figure 12: Carousel Code.
- Figure 13: Blog Code.
- Figure 14: Blog Page.
- Figure 15: Footer code.
- Figure 16: Footer.
- Figure 17: CSS code for Landing Page.
- Figure 18: Register Page..................................................................................................................................
- Figure 19: Register Page code.
- Figure 20: CSS code for Register Page.
- Figure 21: PHP code for register page.
- Figure 22: Login Page.
- Figure 23: Code for login page.
- Figure 24: CSS code for login page.
- Figure 25: PHP code for login page.
- Figure 26: Home Page
- Figure 27: Product in Home Page..
- Figure 28: Home Page header after login.
- Figure 29: Product.
- Figure 30: Product Code.
- Figure 31: CSS code for home page.
- Figure 32: Profile Page.
- Figure 33: Profile Page code.
- Figure 34: CSS code for Profile Page.
- Figure 35: PHP code for Profile Page.
- Figure 36: Cart Page.
- Figure 37: Cart Page Code.
- Figure 38: CSS code for Cart Page.
- Figure 39: Landing Page.
- Figure 40: Home Page.
- Figure 41: Sign-up.
- Figure 42: Sign-in.
- Figure 43: Profile Page.
- Figure 44: Cart Page.
- Figure 45: Create Account.
- Figure 46: Check database.
- Figure 47: Read profile.
- Table 1: Test Schedule. Table of Tables
- Table 2: Test Case.
As a admin , I want To have a database where I can access information about a user's account and products. To create a login and registration system so that consumers may register and login into their own accounts and begin purchasing things. A profile page where the consumer may change their name and username for logging in. Create a responsive website so that PC and mobile users have a positive experience. To see, add, or delete things from the website in order for me to simply manage everything that my firm offers on the internet. To have a product page where consumers can examine and pick the product that they want to buy and put it to their basket in order for me to simply calculate the company's revenue. II. Review Accessibility Standard and Guidelines.
- Definition of Web Content Accessibility Standard and Guidelines. The Web Information Accessibility Guidelines (WCAG) are a useful resource for corporations, organizations, and other entities who want to make their digital material accessible to all. The World Wide Web Consortium Accessibility Guidelines (WCAG) are a set of step-by-step technical principles that outline how to make your website, app, or other digital resources accessible to people with various sorts of disabilities. It is for people to perceive, grasp, navigate, and interact with the Web, as well as to contribute to it with feedback. It's also beneficial for those who aren't impaired, such as those who have "situational limits," such as not being able to hear sound or being in direct sunlight.
1. Design Principles Perceivable: The content and user interface must be easily understood. Operable: All website parts must be functional. Understandable: The user interface elements should be simple to comprehend and implement. Robust: The content of the website must be powerful enough to be comprehended by a variety of people, including the supporting technology. 2. Guideline. Perceivable: Provide text alternatives for any non-text content so that it may be transformed into forms that people need, such as large print, Braille, voice, symbols, or simpler language. Alternatives to time-based media should be made available. Create content that may be displayed in a number of ways (such as a simplified layout) without compromising information or structure. Separate foreground and background components to make it easier for users to see and hear stuff. Operable: Make all functionalities available through the keyboard. Allow adequate time for the user to read and engage with the Figure 1 : WCAG.
III. Use Case Diagram. Figure 2 : Use Case Diagram.
IV. Wireframes.
- Definition. A wireframe is a two-dimensional graphic depiction of a web page, application interface, or product layout. Consider it a low-fidelity, practical drawing. Wireframes are created by product designers and UX (user experience) specialists to convey how they want to arrange and prioritize features, as well as how they expect for consumers to interact with their product or website. Wireframes usually just show functionality and not the full style and aesthetic features of the final product. That's why most wireframes are grayscale rather than color, with placeholders for pictures and Lorem Ipsum for text.
- Wireframes for the website. a. Landing Page. Figure 3 : Landing Page Wireframes.
c. Sign-Up Page. Figure 5 : Sign-up Page Wireframes.
d. Home Page. Figure 6 : Home Page Wireframes.
V. Site Map.
- Definition. A site map is a representation of a website's content that is intended to assist both visitors and search engines in navigating the site. A site map can be a hierarchical collection of pages (with links) structured by topic, an organizational chart, or an XML document that gives search engine crawl bots instructions.
- Site Map for the website. When clients visit our home page, the new goods and sales will be shown in the carousel. The consumer then scrolls down to see all of the goods' short details. If the consumer has the option to purchase the items by adding them to their shopping cart. They can eliminate any undesirable things from their purchasing basket. If the user is satisfied with the purchase, he or she can go to the check-out information. We will ship the goods to you after the information is filled. Figure 9 : Site Map.
CHAPTER 2: IMPLEMENTATION OF WEB DESIGN AND DEVELOPMENT.
I. Screenshots of Webpages and Source Code.
- Landing Page. This is the look of my website when we visit it: This is an online mobile website (whose name is Imagine) which sells Samsung and Apple smartphone. Figure 10 : Landing Page.
