Download Multipage Website Design and Development - Prof. Pham and more Cheat Sheet Information Technology in PDF only on Docsity!
BTEC FPT INTERNATIONAL COLLEGE
INFORMATION TECHNOLOGY
ASSIGNMENT 2
UNIT: WEB DESIGN AND DEVELOPMENT
STUDENT : PHAN LAM QUOC VIET
CLASS : IT
STUDENT ID : BDAF
SUPERVISOR : NGUYEN HOANG ANH VU
Da Nang, December 2021
ASSIGNMENT 2 FRONT SHEET Qualification BTEC Level 4 HND Diploma in Computing Unit number and title Unit: Web design and development Submission date 10 /12/ Date received (1st submission)
Re-submission date Date received (2nd submission) Student name Phan Lam Quoc Viet Student ID BDAF Class IT16102 Assessor name Nguyen Hoang Anh Vu 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: Quoc Viet Grading grid: P5 P6 P7 M4 M5 D2 D
TABLE OF CONTENT
INSTRUCTOR/ SUPERVISOR/ ASSESSOR ………………………………………………………………………………………….i REVIEWERS ……………………………………………………………………………………………………………………….…………..iv TABLE OF CONTENT ………………………………………………………………………………………………………………………ix LIST OF TABLES AND FIGURES ……………………………………………………………………………………………………….xi LIST OF ACRONYM ………………………………………………………………………………………………………………………..xii INTRODUCTION …………………………………………………………………………………………………………………………….. 1 CHAPTER 1:WEB DESIGN AND DEVELOPMENT……………………………………………………………………………….. 2
- Utilise website technologies, tools and techniques with good design principles to create a multipage website (LO3)...................................................................................................................... 2 1.1 Create a design document for a branded, multipage website supported with medium fidelity wireframes and a full set of client and user requirements. (P5)................................. 2 1.2 Use your design document with appropriate principles, standards and guidelines to produce a branded, multipage website supported with realistic content. (P6)............................. 23 1.3 Compare and contrast the multipage website created to the design document. (M4) .................................................................................................................................................. 37 1.4 Critically evaluate the design and development process against your design document and analyse any technical challenges. (D2) ...................................................................... 48 CHAPTER 2: WEB EVALUATION………………………………………………………………………………………..…………… 53
- Create and use a Test Plan to review the performance and design of a multipage website (LO4)……………………………………………………………………………………………………………………………………………. 53 2.1 Create suitable Test Plan identifying key performance areas and use it to review the functionality and performance of your website. User Experience (UX) and User Interface (UI). (P7) ................................................................................................................................................... 53 2.2 Evaluate the Quality Assurance (QA) process and review how it was implemented during your design and development stages. (M5)...................................................... 57 2.3 Critically evaluate the results of your Test Plan and include a review of the overall success of your multipage website; use this evaluation to explain any areas of success and provide justified recommendations for areas that require improvement. (D3).............................................. 67 CRITICAL EVAULATION ………………………………………………………………………………………………………………... 69 CONCLUSION ……..……………………………………………………………………………………………………………………….. 70 REFERENCES ……………………………………………………………………………………………………………………………….. 71
LIST OF TABLES AND FIGURES
- Table 1.1-1: Client and user requirements ………………………………………………………………………………………
- Table 1.3-1: Compare Sign-up Page ………………………………………………………………………………………………
- Table 1.3- 2 : Compare Log-in Page …………………………………………………………………………………………………
- Table 1.3- 3 : Compare Home Page …………………………………………………………………………………………………
- Table 1.3- 4 : Compare Shop Page …………………………………………………………………………………………………
- Table 1.3- 5 : Compare About-us Page ……………………………………………………………………………………………
- Table 1.3- 6 : Compare Contact Page ………………………………………………………………………………………………
- Table 1.3- 7 : Compare Products Page ……………………………………………………………………………………………
- Table 1.3- 8 : Compare Cart Page ……………………………………………………………………………………………………
- Table 1.3- 9 : Compare Check-out Page …………………………………………………………………………………………
- Table 1.3- 10 : Compare Orders Page ………………………………………………………………………………………………
- Table 1.3- 11 : Compare Admin Page ……………………………………………………………………………………………
- Table 1.3- 12 : Compare Statistics Page …………………………………………………………………………………………
- Table 1.3- 13 : Compare Users Page ………………………………………………………………………………………………
- Figure 1.1-1: Client and user requirements …………………………… ……………………………………………………….
- Figure 1.1- 2 : Use case diagram ……………………………………………………………………………………………………….
- Figure 1.1- 3 : Site map diagram ……………………………………………………………………………………………………….
- Figure 1.1- 4 : Database ……………………………… ………………………………………………………………………………….
- Figure 1.1- 5 : User table …………………………………………………………… …………………………………………………….
- Figure 1.1- 6 : Admin table …………………………………………………………………………………… ………………………….
- Figure 1.1- 7 : Category table ……………………………………………………………………………………………………… ….
- Figure 1.1- 8 : Customer table ……………………… ………………………………………………………………………………….
- Figure 1.1- 9 : Items table ………………………………………………………………………………………………………………….
- Figure 1.1- 10 : Entity Relationship Diagram ……………………………… …………………………………………………….
- Figure 1.1- 10 : Wireframe Sign-up Page ……………………………………… ……………………………………………….
- Figure 1. 1 - 11 : Wireframe Sign-in/Log-in page ………………………………………………………………………………
- Figure 1.1- 12 : Wireframe Home page …………………………………………………………………………………………
- Figure 1.1- 13 : Wireframe Home page ……………………………………………………………………………………………
- Figure 1.1- 14 : Wireframe Shop page ……………………………………………………………………………………………
- Figure 1.1- 15 : Wireframe About-us page …………………… ……………………………………………………………….
- Figure 1.1- 16 : Wireframe Contact page ………………………… …………………………………………………………….
- Figure 1. 1 - 17 : Wireframe Products page ……………………………………………………………………………………….
- Figure 1.1- 18 : Wireframe Cart page ………………………………………… ………………………………………………….
- Figure 1.1- 19 : Wireframe Check-out page ………………………………… ………………………………………………….
- Figure 1. 1 - 20: Wireframe Orders page ………………………………………………………………………………………….
- Figure 1.1- 21 : Wireframe Admin page ………………………………………………… ……………………………………….
- Figure 1.1- 22 : Wireframe Statistics page ……………………………………………… …………………………………….
- Figure 1.1- 23 : User page ……………………………………………………………………………………………………………….
- Figure 1. 2 - 1 : Sign-up page …………………………………………………………………………………………………………….
- Figure 1. 2 - 2 : Log-in page ……………………………………………………… …………………………………………………….
- Figure 1. 2 - 3 : Home page ……………………………………………………………………………………………………………….
- Figure 1. 2 - 4 : Home page ………………………………………………………………………………………………………………
- Figure 1 .2- 5 : Shop page …………………………………………………………………………………………………………………
- Figure 1. 2 - 6 : About-us page ………………………………………………………………………………………………………….
- Figure 1. 2 - 7 : Contact page …………………………………………………………………………… …………………………….
- Figure 1. 2 - 8 : Products page ………………………………………………………………………………………………… ……….
- Figure 1. 2 - 9: Cart page …………………………………………………………………………………………………………………
- Figure 1. 2 - 10 : Checkout page ………………………………………………………………………………………………………
- Figure 1. 2 - 11 : Orders page ……………………………………………………………………………………………………………
- Figure 1. 2 - 12 : Admin page ……………………………………………………………………………………………………………
- Figure 1. 2 - 13 : Statistics page ………………………………………………………………………………………………………
- Figure 1.1- 14 : Usesr page ……………………………………………………………………………………………………………
- Figure 1. 3 - 1: Compare Sign-up Page ……………………………………………………………………………………………
- Figure 1. 3 - 2 : Compare Log-in Page ………………………………………………………………………………………………
- Figure 1. 3 - 3 : Compare Home page ………………………………………………………………………………………………
- Figure 1. 3 - 4 : Compare Shop page …………………………………………………………………………………………………
- Figure 1. 3 - 5 : Compare About-us page ……………………………………………………………………………………………
- Figure 1. 3 - 6 : Compare Contact page ……………………………………………………………………………………………
- Figure 1. 3 - 7 : Compare Products page ……………………………………………………………………………………………
- Figure 1. 3 - 8 : Compare Cart page …………………………………………………………………………………………………
- Figure 1. 3 - 9 : Compare Check-out page …………………………………………………………………………………………
- Figure 1. 3 - 10 : Compare Orders page ……………………………………………… …………………………………………….
- Figure 1. 3 - 11 : Compare Admin page ……………………………………………………… …………………………………….
- Figure 1. 3 - 12 : Compare Statistics page ………………………………………………………………………………………….
- Figure 1. 3 - 13 : Compare Users page ……………………………………………………………………… …………………….
- Figure 1 4 - 1: The engineering design process ………………………………………………………………………………
- Figure 1 4 - 2 : Analyse any technical challenges ………………………………………………………………………………
- Figure 2.1-1: Functional and non-functional requirements ……………………………………………………………
- Figure 2. 2 - 1: The Quality Assurance (QA) process …………………………………………………………………………
- Figure 2. 2 - 2 : ISO 9000 & 9001 ………………………………………………………………………………………………………
- Figure 2. 2 - 3 : Login ………………………………………………………………………………………………………………………
- Figure 2. 2 - 4: Signup ………………………………………………………………………………………………………………………
- Figure 2. 2 - 5 : Shop …………………………………………………………………………………………………………………………
- Figure 2. 2 - 6 : Product ……………………………………………………………………………………………………………………
- Figure 2. 2 - 6 : Product ……………………………………………………………………………………………………………………
- Figure 2. 2 - 7 : Orders ………………………………………………………………………………………………………………………
- Figure 2. 2 - 8 : Users ………………………………………………………………………………………………………………………
- Figure 2. 2 - 9 : XAMPP ……………………………………………………………………………………………………………………
- Figure 2. 2 - 10 : Source code ……………………………………………………………………………………………………………
- Figure 2. 3 - 1: Request for improvement …………………………………………………………………………………………
LIST OF THE ACRONYM
ERD Entity Relationship Diagram QA Quality assurance UI User Interface UX User Experience VIP Very Important Person
CHAPTER 1: WEB DESIGN AND DEVELOPMENT
1. Utilise website technologies, tools and techniques with good design principles to
create a multipage website (LO3)
1.1 Create a design document for a branded, multipage website supported
with medium fidelity wireframes and a full set of client and user requirements. (P5)
❖ A full set of client and user requirements:
- A list of required functions, capabilities, or features for our website and the plans to create it is known as a website requirement. Several sorts of requirements can be established during the process, all of which combine to concentrate and prioritize the project plan. Figure 1.1-1: Client and user requirements - When we know how people use the internet and our specific product, you can:
- From the start, incorporate accessibility into the relevant project phases.
- Build accessibility solutions more quickly.
- avoid spending time guessing by making educated judgments amongst many possibilities.
- Limit the number of times you have to go back and address issues.
- Avoid having to make concessions later because you put off addressing accessibility for too long.
- Have a better understanding of accessibility norms, regulations, and other needs
- Developers, project managers, and other stakeholders will profit from all of this. No. Client and user requirement Result Confirmation Criteria Priority 1 A user asked that products be shown on the home page. Users may quickly view items without having to navigate to another website. Once the seller has uploaded all of their items, they will be shown on the home page. Highest priority need. 2 In each product, the requested user has information about specific items. Users may learn more about a product before purchasing it. Users may learn more about a product before purchasing it. Highest priority need. 3 To login and register, the user must go to the login and registration page. Keep track of user information and keep it safe. Customers can become members of the shop by registering. Essential prerequisites for the website system's performance or operation. 4 When an issue arises, the user requests that the administrator or support service be contacted. Developers and users should be able to communicate with one another. All users agree to receive help by email or phone calls from the provider. Highest priority need. 5 The user wants a shopping cart page so that they may change the quantity of things in their basket and view the total amount. Users may see the overall cost and amount of things they need to purchase. Before you can proceed to the checkout procedure, you must first add the item to your shopping basket. Highest priority need. 6 In the product category page, the customer requested a rating below the product. Users may inspect the quality of a product before purchasing it. All goods must have feedback from previous purchasers. The need is of medium priority.
- Analysts collaborated with domain specialists to create this report. Figure 1.1- 2 : Use case diagram ❖ Site Map:
- A sitemap is a blueprint for your website that assists search engines in finding, crawling, and indexing all of your material. Sitemaps also inform search engines about the most essential pages on your website.
- Sitemaps are divided into some categories:
- The most frequent form of sitemap is the normal XML sitemap. It generally takes the form of an XML Sitemap, which contains connections to various pages on your website.
- Video Sitemap: Used to assist Google in understanding the video content on your page.
- Sitemap for Google News: Assists Google in finding material on sites that have been authorized for Google News.
- Image Sitemap: Assists Google in locating all of the photos on your site.
Figure 1.1- 3 : Site map diagram ❖ Database:
- Database diagrams depict the database's structure and relationships between database items graphically. A diagram can be created for a data source, a schema, or a table. Consider utilizing primary and foreign keys to construct relationships between database items.
- We have created 5 main tables of the system including: users, admin, category, customer, order items. Figure 1.1- 4 : Database - And the following is the input data value of each table:
+ Category table: Figure 1.1- 7 : Category table + Customer table: Figure 1.1- 8 : Customer table + Items table:
Figure 1.1- 9 : Items table
- Entity-relationship model Diagram: Figure 1.1- 10 : Entity Relationship Diagram ❖ Wireframe:
- Wireframing is a technique for designing a website's structure. A wireframe is a diagram that shows how information and functionality on a website should be laid up, taking into consideration user demands and journeys.
- Early in the development process, wireframes are used to build the fundamental framework of a page before visual design and content are added. A wireframe is a web page layout that shows what interface components will be present on important pages. It's an important step in the interface design process.
- A wireframe's purpose is to create a visual representation of a page early in a project so that stakeholders and project team members may approve it before the creative process begins. - Our website is carefully wireframed with a clear and detailed plan that includes the following pages: Sign-up page:
Sign-in/Log-in page: Figure 1. 1 - 11 : Wireframe Sign-in/Log-in page Home page:
Figure 1.1- 12 : Wireframe Home page
