information technology assignment 2 unit website design development

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b> </b>

<b>BTEC FPT INTERNATIONAL COLLEGE</b>

<b>INFORMATION TECHNOLOGYASSIGNMENT 2</b>

<b>UNIT: Website Design & Development</b>

STUDENT : HO TAN RIN CLASS : BDAF20038 STUDENT ID : IT16101

<b> SUPERVISOR : NGUYEN HOANG ANH VU</b>

<b>DaNang, December 2021</b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b> ASSIGNMENT 2 FRONT SHEET</b>

<b>QualificationBTEC Level 4 HND Diploma in BusinessUnit number and titleUnit: Website Design & Development</b>

<b>Submission date 10/12/2021^{Date received (1st}</b>

<b>Re-submission date^{Date received (2nd}submission)</b>

<b>Student name HO TAN RINStudent ID BDAF200038</b>

<b>ClassIT16101Assessor name^{NGUYEN HOANG}ANH VU</b>

<b>Student declaration</b>

I certify that the assignment submission is entirely my own work and I fully understand the sequences of plagiarism. I understand that making a false declaration is a form of malpractice.

<b>con-Student’s signature: HO TAN RINGrading grid</b>

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b>Grade:Assessor Signature:Date:Internal Verifier’s Comments:</b>

<b>Signature & Date:</b>

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

ACKNOWLEDGMENTS

First of all, I would like to express a special and enormous thanks to my family for their in -valuable encouragement, enthusiasm, and support. Without all of this, I couldn't haveachieved it Second, I would like to sincerely thank teacher NGUYEN HOANG ANH VU forenthusiastically supporting me to achieve my academic results and thanking him for hissupport in the exercises as well as the knowledge that he taught and taught. solvewholeheartedly.Besides, I would also like to thank my friends at BTEC FPT InternationalCollege for allowing me to exchange knowledge and help me understand the issues in thiscourse.

Finally, I would also like to thank the authors, brothers, sisters and friends who have

<b>provided a lot of knowledge to use as references throughout this exercise.</b>

ii

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

ASSURANCE

I certify that this assignment is my work, based on my study and that I have acknowledgedall material and sources used in its preparation, whether they be books, articles, reports,lecture notes, and any other kind of document, electronic or personal communication. Ialso certify that this assignment has not previously been submitted for assessment in anyother unit, except where specific permission has been granted from all unit coordinators in-volved, or at any other time in this unit, and that I have not copied in part or whole or other -wise stealing ideas the work of other persons.

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

1.1 Create a design document for a branded, multipage website supported withmedium-fidelity wireframes and a full set of client and user requirements (P5 )…..2

1.1.1 Priorities………..3

<b> 1.1.2 Client Requirements……….3</b>

<b> 1.2 Use Case Diagram………...5</b>

1.2.1 User Use Case Diagram………..5

<b> 1.2.2 Admin Use Case Diagram………..6</b>

<b> </b> 1.2.3 Site Map……….6

<b> </b>1.2.4 Database Diagram………7

<b> 1.2.5 Wireframe………..11</b>

<b> 1.2.6 Specific explanation about wire frames……….16</b>

<b> 2.1 Use your design document with appropriate principles, standards and </b>lines to produce a branded, multipage website supported with realistic content.(P6)…………19

guide-iv

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

<b> 2.2.2 User Interface………22</b>

LO4 Create and use a Test Plan to review the performance and design of a page website………

multi-39 3.1 Create a suitable Test Plan identifying key performance areas and use it to re -view the functionality and performance of your website. User Experience (UX) and User In-terface (UI)(P7)………..39

3.1.1 User Interface and User Experience (UI & UX) text log………40

<b> 3.1.2 Back-end User Interface and User Experiences (UI & UX) text log……….43</b>

<b> 3.2 Evaluate the Quality Assurance (QA) process and review how it was </b>mented during your design and development stages(M5)………..46

<b> 3.2.1 What is Quality Assurance (QA) process………46</b>

<b> 3.2.2 Quality assurance methods………46</b>

<b> 3.3.3 Some steps to use in the website………..50 </b>

<b>REFERENCES...56</b>

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

<b>LIST OF TABLES AND FIGURES</b>

Table 1-1 Priorities……….3

Table 1-2 Client Requirements……….5

Table 1-3 User Interface and User Experience (UI & UX) text log………42

Table 1-4 Back-end User Interface and User Experiences (UI & UX) text log………….45

Figure 1-1: Client and user requirements………....2

Figure 1-2 User- Use Case Diagram………..….5

Figure 1-3 Admin Use Case Diagram………..…6

Figure 1-4 Site Map………....…7

Figure 1-17 Product Page………..….12

Figure 1-18 My Cart Page………...…13

Figure 1-19 Login Page……….14

Figure 1-20 Login Admin Page………14

Figure 1-21 Change password Admin Page………..15vi

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

Figure 1-23 Add button……….…..16

Figure1-30 Add to Quote……….….….18

Figure 1-31 Button login………..…..18

Figure 1-32 Changing admin password……….19

Figure 1-33 Save changes………..…19

Figure 1-34 Home Page……….23

Figure 1-35 Contact Page……….24

Figure 1-36 Login page………25

Figure 1-37 My account page……….26

Figure 1-38 Change information……….27

Figure1-39 Update success……….…27

Figure 1-40 My Cart Page………..……28

Figure 1-41 Billing& Shipping Page………..….29

Figure 1-42 Payment page………..…30

Figure 1-43 Wishlist page...31

Figure 1-44 Product Page………..….33

Figure 1-45 Track Order Page………..….34

Figure 1-46 Login Page………..….34

Figure 1-47 Change Password Page………..…..35

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

Figure 1-49 Create a new subcategory………..……….36

Figure 1-50 Subcategory page……….…36

Figure 1-51 Insert Product Page………..38

Figure 1-52 Manage Products Page………38

Figure1-53 Functional and non-functional requirements………..39

Figure 1-54 compatibility Testing……….….50

Figure 1-55 sign up……….51

viii

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

During the booming period of information technology, e-commerce was an extremely hotindustry and thus the use of sales websites became popular and necessary. The websitegives individuals or businesses no small benefits:

Helping customers easily update information quickly and effectively to best serve tomers in the process of learning about products, services as well as information about thebusiness before making a decision to buy products. or use a service

cus-Website is an effective advertising method with small cost and great efficiency (websitecost is much cheaper than advertising cost on newspapers, radio, tv, ... Unlimited news, al-lowing users to comfortably learn like advertising on the radio If you want to promoteyour brand, introduce products to consumers, then using the website is the best choice foryou.

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

<b>LO3 Utilise website technologies, tools, and techniques with good design principlesto create a multipage website</b>

<b>1.1Create a design document for a branded, multipage website supported withmedium-fidelity wireframes and a full set of client and user requirements (P5 ).A full set of client and user requirements:</b>

A website requirement is a list of the functions, capacities, or features that our websitemust have, as well as the plans to build it. During the process, many sorts of criteria maybe generated, all of which work together to concentrate and prioritize the project plan.

Figure 1-1: Client and user requirements.

<b>When we know how people use the internet and our specific product, we can</b>

+Incorporate accessibility into the necessary project phases from the outset.+Create accessibility solutions faster.

+Spend less time guessing and more time making smart decisions among many choices.+Reduce the number of times you have to go back and fix problems.

+Avoid having to make sacrifices later because you waited too long to handle accessibility.+Gain a greater awareness of accessibility standards, laws, and other requirements.+All of this will benefit developers, project managers, and other stakeholders.

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

Priority Level Definition

Priority1.1 On the homepage, the user

requested a product displayarea.

Users may view itemswithout having tonavigate to anotherwebsite.

When a addsnew items, theyall appear on themain page.

1

1.2 The user requests that theproduct page include a data-related item.

Customers may learn more about an item before purchasing it.

When a customervisits the product page, all of the goods are displayed.

1.3 To make a purchase, the usermust first log in orregister.

Keep user formation

in-All users must register in order to access information and become members in order to make purchases.

1.4 When users have issues, theyshould contact the adminis-trator or support services.

Make a link betweenthe developer and theuser.

All users have theability to contactthe a dministra-tor and supportservice by emailor chat at anytime.

1.5 The user requests ashopping cart page so thatthey can change thenumber of things in theircart.

Users may view thetotal price of thethings they select aswell as the number ofproducts they se-

Before you cancheck out, youmust first add theitem to your cart.

1

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

lected.1.6 On the product page, the cus-

tomer sought product views and ratings.

re-Customers may readreviews and learnabout the product'squality before pur-chasing it.

Product reviewsand ratings mustbe included. ²

1.7 A page for the user to add,delete, and alter productquantities is required.

Users can choose howmuch of their itemsthey want to includeor remove.

Admins may trol quantity, userquality, pricing,import date, andexport date,among otherthings.

1.8 Administrators can look at auser's product order afterthey've placed it.

Orders can bemanaged by ad-ministrators.

The administrator

informed of anyproducts

1.9 The user who has been tacted can make changes totheir personal information.

con-Users can makechanges to their data.

allows the ownerto update thedatabase.

Table 1-2 Client Requirements

<b>1.2Use Case Diagram.1.2.1 User Use Case Diagram</b>

-A use case diagram is a dynamic or behavior diagram in the Unified Model Language. Inuse case diagrams, actors and use cases are used to model the operation of a system.Use cases are a collection of activities, services, and processes that the system must do.-Use case diagrams are regularly developed during the early phases of development andare commonly utilized for the following purposes:

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

<b>1.2.2 Admin Use Case Diagram</b>

Figure 1-3 Admin Use Case Diagram

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

<b> 1.2.3 Site Map</b>

A sitemap is a map for your website that will assist search engines in identifying, crawling,and indexing all of your material. Sitemaps also inform search engines about the mostessential pages on your website.

-Sitemaps are classified into several types:

+The standard XML sitemap is the most frequent form of a sitemap. It is often in the formof an XML Sitemap that contains connections to various pages on your website.

+Video Sitemap: This is used to assist Google in understanding the video content on yourpage.

+The Google News sitemap: Aids Google in discovering material on sites certified forGoogle News.

+Image Sitemap: Assists Google in discovering all of the images on your website.

Figure 1-4 Site Map

<b>1.2.4 Database Diagram.</b>

In the Admin table, I create fields including ' id, username, password, creationDate,updationDate.In which id is the primary key

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

<b>Users </b>

In the Users table, I create fields including 'id', email, name, contact no, password, ship pingAddress, shipping state, shipping city, shippingPincode, billingAddress, billing state,billing city, billingPincode, regDate, updationDate. Where 'id' is the primary key

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

der, Ordertrackhistory, Product reviews, Product, User log, Users, Wishlist'.

Figure 1-14 Shopping Database

Figure 1-15 ERD

<b>1.2.5 WireframeUI WireframeHomepage</b>

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

<b>Product Page</b>

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

<b>My Cart Page</b>

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

<b>Login Admin Page</b>

Figure 1-20 Login Admin Page

<b>Change password Admin Page</b>

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

This is my website's main page. This page lists all of the products in the shop,grouped by accessible categories (Smartphones, Laptops, Smartwatches, Tablets, andhome goods) On the site, there are additional sliders and advertisements, as well as prod-uct brands. There are commands such as:

Figure 1-22 Command buttons

<b>Search: helps us find product information.Shop: Display all products on the websiteLapTop: Displays the laptop included in the website</b>

<b>Product: is considered to display the products contained in the categoriesContact: allows buyers to contact to respond to questions when using the productPay: A page that displays all payments to users when purchasing productscart: show the order value and the number of products in the cart. Will take us to</b>

the cart page.

<b>Account: helps us log into our account and change our personal information. That</b>

leads us to a new page that is the account page

Figure 1-23 Add button

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

uct is added to the cart, you can change and add the product.

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

Figure 1-28 Add to cart

Compare button is used for customers to compare this product with another product

<b> </b>

Figure 1-29 Compare

The Add to Quote button is used to add to the cart and quote the product for the customer

<b> </b>

Figure1-30 Add to Quote

<b>Home page ( Admin )</b>

The administrator can use the admin login page to manage the website's listings. Includeall information on the webpage (User, Product, ....). This site is extremely essential, and itshould be extremely secure to prevent hackers from breaking in and stealing information.There are some important buttons on this page.

Figure 1-31 Button login

The administrator will be able to access the admin's internal files after pressing this loginbutton.

Following successful login, a new interface, distinct from the user homepage, emerges.This page allows you to change your admin password, add a new category, a new subcat -egory, a new product, and so on. Some product, user, and management functions

</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">

Save changes is used to save and change information when you change your mation

Figure 1-33 Save changes

<b>2.1 Use your design document with appropriate principles, standards and lines to produce a branded, multipage website supported with realistic content.(P6)2.2.1 Tools and techniques for website development.</b>

guide-The 7 Most Important Frontend Web Development Tools+Sublime Text.

+Chrome Developer Tools.+jQuery.

</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30">

+Twitter Bootstrap.+Angular.js.+Sass.

<b>Sublime Text</b>

Let's start with the basics: a high-quality code editor with a user interface that is signed, extremely efficient, and lightning-fast. There are a handful that are good at this, butSublime Text is the best (and most popular).

<b>well-de-Chrome Developer Tools.</b>

Wouldn't it be amazing if you could change your HTML and CSS in real time, or trou bleshoot your JavaScript while viewing a comprehensive website performance analysis.You can accomplish precisely that with Google's Chrome Developer Tools. They comepre-installed in Chrome and Safari and give developers access to their web application'sinternals. A palette of network tools can also help you optimize your loading flows, while atimeline can show you exactly what the browser is doing at any given time.

Developers have long considered JavaScript to be an essential frontend language, despiteits flaws: it's littered with browser quirks, and its rather convoluted and unapproachablesyntax meant that functionality was sometimes sacrificed.

That is, until 2006 when jQuery–a quick, lightweight, cross-platform JavaScript frameworktargeted at easing the frontend process–arrived. By abstracting a lot of the functionalitythat was previously left to developers to figure out on their own, jQuery allowed them morepower to design animations, integrate plug-ins, and even browse documents.

</div><span class="text_page_counter">Trang 31</span><div class="page_container" data-page="31">

<b>Twitter Bootstrap</b>

Do you get tired of typing in the same container style? What about the recurrently ing button? When you start building frontend apps on a regular basis, you'll notice severaltrends.

appear-UI frameworks attempt to solve these problems by abstracting common characteristics intoreusable modules, allowing developers to rapidly and simply create new app components.The most popular of these frameworks is Bootstrap, a comprehensive UI kit created by theTwitter team. Bootstrap includes tools for normalizing stylesheets, creating modal objects,integrating JavaScript plugins, and a boatload of other features that can help you cut downon the amount of code (and time) you need to finish your project.

Your closest friend will be time-saving web development tools, and one of the first thingsyou'll learn about code is that it must be DRY ("Don't Repeat Yourself"). You'll undoubtedlynotice the second thing: CSS isn't always DRY.

The CSS preprocessor is a tool that aids in the development of reliable, future-proof codewhile also reducing the amount of CSS you must write (keeping it DRY).

Perhaps the most well-known of these is Sass, an eight-year-old open-source project thathelped to define the current CSS preprocessor genre. Although first confusing, Sass'scombination of variables, nesting, and mixins produces simple CSS when compiled, mak-ing your stylesheets more legible and (most importantly) DRY.

</div><span class="text_page_counter">Trang 32</span><div class="page_container" data-page="32">

<b>Home Page</b>

</div>