1633-Website Design- Assignment 2, Summaries of Systems Design

Download 1633-Website Design- Assignment 2 and more Summaries Systems Design in PDF only on Docsity!

Higher Nationals in Computing

Unit 10: Website Design and Development

ASSIGNMENT 2

Learner’s name: Nguyễn Bảo Khang

ID:GCS

Class: GCS1005C

Subject code: 1633

Assessor name: PHAN MINH TAM

Assignment due: Assignment submitted:

❒ Summative Feedback: ❒ Resubmission Feedback:

Grade: Assessor Signature: Date:

Signature & Date:

Assignment Brief 2 (RQF)

Higher National Certificate/Diploma in Computing

Student Name/ID Number: Unit Number and Title: Unit 10: Website Design & Development Academic Year: 2021 – 2022 Unit Assessor: Phan Minh Tam Assignment Title: Website Design and Implementation Issue Date: 21 March 2022 Submission Date: Internal Verifier Name: Date:

Submission Format:

Format:

1. A report document including below sections o Section 1: A review of appreciate web design principles, standards and guidelines. o Section 2: Design document for online shopping website. o Section 3: Implementation of website design. o Section 4: Test plan and test evaluation.
2. A compressed file that encapsulates all source code and particular necessary resources including files of images, style sheets, java script and other files to support to install multipage website such as sql script and installation guide.

Submission

 Students are compulsory to submit the assignment in due date and in a way requested by the Tutor.  The form of submission will be a soft copy posted on http://cms.greenwich.edu.vn/.  Remember to convert the word file into PDF file before the submission on CMS.

Note:

 The individual Assignment must be your own work, and not copied by or from another student.  If you use ideas, quotes or data (such as diagrams) from books, journals or other sources, you must reference your sources, using the Harvard style.  Make sure that you understand and follow the guidelines to avoid plagiarism. Failure to comply this

Learning Outcomes and Assessment Criteria (Assignment 2):

Learning Outcome Pass Merit Distinction

LO 3 P5 Create a design

document for a

branded, multipage

website supported

with medium fidelity

wireframes and a full

set of client and user

requirements.

P6 Use your design document with appropriate principles, standards and guidelines to produce a branded, multipage website supported with realistic content.

M4 Compare and contrast the multipage website created to the design document.

D2 Critically evaluate the design and development process against your design document and analyse any technical challenges.

LO4 P7 Create a suitable Test Plan identifying key performance area and use it to review the functionality and performance of your website. User Experience (UX) and User Interface (UI).

M5 Evaluate the Quality Assurance (QA) process and review how it was implemented during your design and development stages.

D3 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.

Table Of Contents

Figure 28 : Front-End Admin Product........................................................................................................................ 25

Figure 29 : Front-End Add Product............................................................................................................................ 26

Figure 30 : Front-End Edit Product............................................................................................................................ 26

Figure 31 Connect Database.................................................................................................................................... 26

Figure 32 : Back-End Admin Dashboard.................................................................................................................... 27

Figure 33 : Back-End Login ....................................................................................................................................... 28

Figure 34 : Back-End Logout...................................................................................................................................... 29

Figure 35 : Back-End Admin Product......................................................................................................................... 29

Figure 36 : Back-End Add Product............................................................................................................................. 30

ASSIGNMENT 2 ANSWERS

P5. Create a Design Document For a Branded, Multipage Website Supported With Medium Fidelity Wireframes And a Full Set Of Client And User Requirements

1. Client and user requirement analysis

MSW-Marches Special Woods is the online shop in from of e-commerce with the main purpose are Buying

Exchanging - Provide decorations, decorative tools and decorative services. All these products are listed on the primary page of website, it's is easily for customer to observe and searching for what customer want in this commerce.

Two small businesses have decided to start a new venture. Their joint venture is forming a company to

manufacture and sell wooden phone cases directly to customers. This will be a strictly online venture.

Unlike the previous companies, which were both privately owned by families and operated in a

traditional manner, the new company is also privately owned. Their goal is to provide cool designs

with customizable features for any current smartphone, including those from Apple, Samsung, Sony,

LG, HTC, Motorola, and Nexus. Their distinguishing feature will be full customization with next-day

delivery.

This shopping website was designed and developed to display different types of decorative services

available in this industry. By clicking on this product, you can see detailed information about the

product and service name, total number and price of each product, and a detail note about it. The

website will be built for a common platform using website development technologies such as HTML5,

CSS, JavaScript, and PHP. The website will work properly on all major web browsers, including Google

Chrome, Firefox, and Microsoft Edge. And it works on almost all screen sizes, including laptops,

televisions, and tablets.

My website would has 5 pages including:

 A Home Page: A page containing all functions including product information, shop information,...

 A Login Page: A page that verify users identity before entering

 A Admin Page: A page help boss or shop owner manage products’ information

 A Product Page: A page show all products for users and customers

 A About Page: A page including information about shop help users have more information about this

shop.

2. User case diagram

Figure 1 :User Case Diagram

3. Design database diagram

Username Varchar(20) Not null

Username of

Customers

Admins

AdminID Varchar(10) Primary Key ID of admin

AdminPassword Varchar(20) Not null Password of

admin

Fullname Varchar(30) Not null Fullname of admin

Email Varchar(20) Not null Email of admin

Customers

Username Varchar(20) Primary Key

Username of

Customers

Password Varchar(20) Not null

Password of

Customers

Fullname Varchar(40) Not null

Fullname of

Customers

Address Varchar(30) Not null

Address of

Customers

Email Varchar(30) Not null

Email of

Customers

Phone Varchar(10) Not null Phone of

Customers

4. Design Website Wireframes

4.1. Login Page

Figure 3 Login Page Wireframes

4.2. Home page

Figure 4 : Home Page Wireframe

4.3. Admin Dashboard

Figure 7 : Add Product Wireframe

4.6. Contact

Figure 8 Contact Wireframe

5. Site Map

Figure 9 : Site Map

P6. Use Your Design Document With Appropriate Principles, Stnadards And

Guidelines To Produce a Branded, Multipage Webiste Supported With

Realistic Content.

1. Front-end and Back-end technologies applied in the website

1.1. Front end Technologies

1.1.1. HTML

HTML stands for Hypertext Markup Language which is used for creating web pages and application

that are displayed on the World Wide Web and each page contain series of links or connections which

is known as hyperlinks. In addition, web pages are composed of HTML that is used to display text,

image, videos and other resources through a web browser and collection of webpages are merge and

build as a single which is known as website so if there is no HTML then we cannot make webpage

which means that we cannot build any website if there is no HTML

1.1.2. CSS

It stands for Cascading Style Sheet that are used to format the layouts of webpages as well as it

describes how html elements are to be displayed on screen or in browser. Similarly, it is used to define

the style of the webpages including the design, layout and variation in display for different devices and

screen sizes as well as save the time. Moreover, CSS file is normally attached to an html file through by

the links of an HTML file. For example, if a user wants to change the size of all h2 heading then a single

code can change the size of all h2 heading but if there is no CSS file then user have to write the code in

each h2 heading in html file. CSS decreases the loading page time.

Figure 12 : APACHE Web Server

2. Functional screen shot of multipage website

Figure 13 : Login Page

Figure 14 : Admin Dashboard

Figure 15 : Admin Product