Unit Number and Title10: Website Design & Development

Academic Year: 2020 -2021

Unit Tutor: Nguyen Ngoc Tan

Assignment Title: Assignment 2

Issue Date: 31/5/2021

Submission Date: 14/6/2021

STUDENT NAME: NGO THI NGAN HA

STUDENT ID: BKC19100

MOBILE NUMBER: 0349685127

1
Summative Feedback:

Internal verification:

2
INTRODUCE

The owner, follow my presentation and report technical information completely willing to work
with me to develop the website. The client wanted a design that captured their current and new
stock. Customers who want information on their website about events like auctions and themed
days at their warehouse in Suffolk see different types of antiques, focus on different periods,
different types each other, for example, "furniture" or "paintings". Feature pages of special items
for online sales and purchases were also discussed. with a medium fidelity wireframe (which
gives details about the layout and how things should work/work) and a full set of customer and
user requirements. Once the design document was complete with the right principles, standards,
and guidelines, I moved on to the actual production of a branded, multi-page website backed
with actual content for BKC. I did, why, and what testing took place. Provide written and/or
visual evidence of the following:

● Critical review of the website design and development process versus the resources. Data
design analyzes many technical challenges. The review should compare the multi-page site you
created with the original design document.

● An appropriate test plan identifies key areas of activity. Use this information to review the
functionality and performance of the BKCs website.

● Provide an assessment of the Quality Assurance (QA) process and see how it was performed
during the design and development phase. Outcomes planning includes assessing the overall
success of a multisite site. This assessment can be used to identify areas of success, but also
provides sound recommendations for areas for future improvement, if the business is wisest to
expand or reach the brand. more e-commerce

3
Contents

TASK 3 - Utilize website technologies, tools and techniques with good design principles to
create a multipage website................................................................................................................................

TASK 4 - Create and use a Test Plan to review the performance and design of a multipage website
..........................................................................................................................................................................

References.........................................................................................................................................................

Task 3 - Utilize website technologies, tools and techniques with good design principles to
create a multipage website (LO3)
3.1 Design a suitable web application solution for the given scenario. Provide evidences of the
design, multipage website supported with fidelity wireframes and a full set of client and
user requirements. Use your design document with appropriate principles, standards and
guidelines to produce a branded, multipage website supported with realistic content.
Note - Synthesize client and the server-side functionalities in the proposed design.

For what reason would it be advisable for me to utilize wireframes?

4
There is a fundamental arrangement on our site. The principle objective is to tell the customer
the best way to develop the structure before the site. Clients by and large maintain their own
organizations. Proceed quickly on what they have to spotless and clean them.

What occurs in the event that I don't utilize wireframes?

By making a basic site structure, any natural situating can be immediately changed to address
your customer's issues. A snappy clarification of what should be on the different pages of your
site, regardless of whether it's a speedy layer on scratch paper.

Components of a wireframe
What to incorporate into a wireframe
Consider the fundamental highlights when arranging every site page: header, footer, side sites
and substance. From that point onward, consider extra components: Navigation Bars, Widgets
and Buttons.
When we have a thought regarding the components, we would now be able to begin our
wireframe plan.

All highlights of Wireframe are for the most part shown and take the accompanying focuses:
Content

What will be shown on this page?

Structure

How might I add highlights to this page?

Pecking order

How to position these labels, naming and size?

Usefulness

How do these components cooperate?

5
Conduct

How is this element connecting with the client?

Wireframe instruments

There are many strategies to make a wireframe running from basic representations to a high
constancy nearly completed wireframe. The apparatuses you choose to utilize rely upon
individual inclination and undertaking prerequisites. A few people are searching for a less
complex quick paced framework, while others are bound to trust mockups, in the event that they
take a little longer time on the task scope. Each apparatus has its favorable circumstances and
cares, and there is no "best" instrument for the wireframe. Any offices we use and any work for
our benefit.
HTML/CSS

On the off chance that the HTML and CSS are in our expertise list, we can make a code and contact our
photos. It's a less expensive device for wireframe on our site and offers notwithstanding frames.Creating
HTML wireframes may add time to your procedure from the time we start wireframe to the moment
that we have customer endorsement. Be that as it may, it might well decrease extra correspondence
and work after our wireframes are endorsed, since the outline has just been finished.
3.2 Implement the designed system using PHP, JS and MySQL. Screenshots of important code lines with
proper comments and user interfaces filled with sample data must be attached to the
documentation. Apply a database design for the proposed system and provide the well normalized
database design of the proposed system.

Website design for Admin

 All Users (system-common interfaces)

 Home page
 Login page (Using Email, Password)
 Books page (To post forum)

Menus

 Home Page

6
  Bill management
 Product Management

Icons / Shortcuts

Functionalities
Login admin

Admin will log into the system by entering admin's email and password on this interface.

Logout admin

Admin will log out of the system by clicking logout on this interface.

Home page

Login Page

7
Add Books page

Bill management pages

8
Product Management

Website design for Librarian Registration

• All users (general system interface)

• Home page
• Login page (Use Email, Password)
• Registration page (Fill in personal information in the table to register for membership)
• Cart
• Product
• Pay
• Pill
9
 Icons / Shortcuts

Functionalities
User Login

All system users will login to the system by entering their username and password on this
interface giao

customer information

This is the customer's profile page. For each customer in my Online Library System, they have
their own profile

Customer registration

This web form is filled by user or customer operator khách

Home page

Login Page

10
Registration page

Cart

11
Product

Pay

12
Pill

3.3 Critically evaluate the web design and development process against your design document and
analyse any technical challenges you faced in development.

Multipage locales are something contrary to their single page partners. Multipage sites will show or
show a similar substance, yet will show it on different pages.

They must be supreme for a wide scope of substance, associations with items or administrations. A
great many pages or a huge number of items on one page will be hard to show.

Multipage sites are more typical than single-page locales, and many think a definitive web improvement
venture.

Multipage locales are better for progressively complex web extends that require more page content, or
improved usefulness. The endeavor to control progressively content on one page of the site is risky to
the general understanding of a client, and they are hard to discover and connect with what they have
visited.

13
For enormous sites, for example, an internet business site, this is the probably course you need to do. In
any case, you should contemplate the arrangement of your site, to enable clients to locate the
substance they are looking for as fast as would be prudent.

Specifically, look through must be completed with web based promoting endeavors.

When somebody utilizes a web crawler, it attempts to get the most significant outcomes. This is valid for
natural Search, which can likewise be connected to installment contentions. This implies for similar
questions in nature, we should make separate pages for each title or catchphrases. We can't do it with a
site in one page. As we can't be sure, it is a finished arrangement of each size. Thusly, numerous page
destinations have a huge bit of leeway over this pager.

At that point, on the off chance that you've reappeared this exchange (the way toward giving
promotions to clients who have recently visited our site), at that point multi-page locales will
fundamentally have a higher hand. This is hard to trigger a duplicated pixel/content, which is
progressively entangled. Our CRM is connected to our web investigation, and the future prospect is sent
to the business group when we visit a specific page.

For multi-page destinations, this usefulness is basically straight out of the case, though for one page
locales some type of custom arrangement would be required. This implies from an advertiser's point of
view, multi-page sites hold a particular bit of leeway over their single page cousins.

On the off chance that we have little items or administrations, we couldn't care less about the most
progressive advertising techniques, for example, SEO, PPC and re-deal, a possibility for a one page site.

Be that as it may, on the off chance that we have 10 items or administrations or our substance is
amazingly unpredictable and mind boggling, one can't furnish a cordial client involvement with a one
page or an adequate profundity of substance. So also, on the off chance that we are essential to
advertising, the degree of advancement of an's application on one page is constrained, and in this
manner a multipage site might be the most proper arrangement.

14
For instance, our items and administrations are recorded on our 'landing page' and there is a third
alternative when utilizing a blog or point of arrival apparatus to help our endeavors in showcasing. This
does not work for all associations. Along these lines, master counsel ought to be gotten from significant
partners.

Task 4 - Create and use a Test Plan to review the performance and design of a multipage website
(LO4)

4.1 Evaluate the Quality Assurance (QA) process and review how it was implemented during your
design and development stages.
QA process is expected to discover design issues and development errors while testing a
product’s user interface (UI) and gauging the user experience (UX).
The software testing is a critical element of software quality assurance and represents the ultimate review
of specification design and coding. Testing is an exposure of a system to trial input to see whether
software meets correct output. Testing cannot be determined whether software meets user’s needs, only
whether it appears to confirm to requirements. Testing can show that a system is free of errors, only that it
contains error. Testing finds errors, it does not correct errors. Software success is a quality product, on
time and within cost. Through testing can reveal critical mistakes. Testing should therefore,

 Validate Performance
 Detects Errors
 Identify Inconsistencies

Test Objective

There is strong evidence that effective requirement management leads to overall project cost savings. The
three primary reasons for this are,

Requirement errors typically cost well over 10 times more to repair than other errors.

Requirement errors typically comprise over 40% of all errors in a software project. Small reduction in the
number of requirement errors pays big dividend in avoided rework costs and schedule delays. System are
not designed as entire systems nor are they tested as single systems the analyst must perform both unit
and system testing. For this different level testing are use:

Unit Testing

In unit testing Module is tested separately and the programmer simultaneously along with the coding of
the module performs it. In unit testing the analyst tests the programs making up a system. For this reason,
unit testing is sometime called program testing. Unit testing gives stress on modules independently of one
another, to find errors. This helps the tester in detecting errors in coding and logic that are contained
within that module alone.
15
The errors resulting from the interaction between modules are initially avoided. Unit testing can be
performed from the bottom up, Starting with smallest and lowest-level modules and proceeding one at a
time., for each module in Bottom-up testing a short program is used to execute the module and provides
the needed data, so that the module is asked to perform the way it will when embedded within the larger
system.

System Testing

This is performed after the system is put together. The system is tested against the system requirement to
check if all the requirements are met and if the system performs of specify by the requirements. Testing is
an important function to the success of the system. System testing makes a logical assumption that if all
the parts of the system are correct, the goal will be successfully activated. Another reason for system
testing is its utility as a user-oriented vehicle before implementation.

System Testing Consists of Following Five Steps:

1. Program Testing:

A program represents the logical elements of a system. For a program to run satisfactorily, it must
compile and test data correctly and tie in properly with other programs. It is the responsibility of a
programmer to have an error free program. At the time of testing the system, there exist two types of
errors that should be checked. These errors are

a) Syntax error

b) Logic error

A syntax error is a program statement that violates one or more rules of the language in which it is
written. An improperly defined field dimension or omitted key words are common syntax errors. These
errors are shown through error messages generated by the Computer. A logic error, on the other hand,
deals with incorrect data fields out of range items, and invalid combinations.

String Testing

Programs are invariably related to one another and interact in total system. Each program is tested to see
whether it confirms to related programs in the system. Each part of the system is tested against the entire
module with both test and live data before the whole system is ready to be tested.

System Testing

System testing is designed to uncover weaknesses that were not found in earlier tests. This includes
forced system failure and validation of total system, as its user in the operational environment will
implement it.
16
 4.2 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.

Website design for Admin

Test Test Action Test Type Expected Outcome Result

Case no

Checking Email Enter Email and Normal Access granted message

and Password Password displayed
1

Wrong Email or Error Error message

Password displayed

Login pages

Test Case no Test Action Test Type Expected Outcome Result

Add New Click on the Submit Normal Add New Books to √

Database
2 button

Xóa Click on the ‘xóa’ Normal Delete the information

in the database and the
button √
page lost a product

Sửa Click on the ‘sửa’ Normal Edit information in 

database
button

add book pages

Here I am going to write the scenario based on these requirements.

 Admin should contain letter, number and period.

 Admin should not be left blank.
 Admin should not be more than 30 characters.
 Admin should not start with or contain any symbols.
 Password should be at least 6 characters.

Test Scenarios

 Write down the test scenarios based on the following test types

17
  Admin Interface
 Here are some of the questions that can help you form test cases.
 Where is the cursor focus in text area when you load the page?

Positive test cases

 Enter valid Email and password.

 Click on forgot password link and retrieve the password for the Email.
 Click on register link and fill out the form and register email and password.

Negative test cases

 Enter valid email and invalid password.

 Enter valid password but invalid email.
 Keep both fields blank and hit enter or click login button.

Website design for Librarian Registration

Login Page

Test Test Action Test Type Expected Outcome Result

Case no

Checking Enter Username and Normal Access granted 

Username and Password message displayed
1
Password
Wrong Username or Error Error message 
Password displayed

Table 1

Registration page

Add Student Records Details Forms

Test Case no Test Action Test Type Expected Outcome Result

Register Click on the Register Normal Adding a new user for

the library to the
2 button 
Database redirects to
login.

Table 2

Cart

18
 Test Case no Test Action Test Type Expected Outcome Result

Cart Click on the Thanh toán Normal Save information to

database & export
3 button 
invoice code.

Table 3

Cart

Test Case no Test Action Test Type Expected Outcome Result

Product Click on the product Normal Display product

information
4 

Table 4

Here I am going to write the scenario based on these requirements.

 Username should contain letter, number and period.

 Username should not be left blank.
 Username should not be more than 30 characters.
 Username should not start with or contain any symbols.
 Password should be at least 6 characters.

Test Scenarios

 Write down the test scenarios based on the following test types
 User Interface
 Here are some of the questions that can help you form test cases.
 Where is the cursor focus in text area when you load the page?

Positive test cases

 Enter valid username and password.

 Click on forgot password link and retrieve the password for the username.
 Click on register link and fill out the form and register username and password.

Negative test cases

 Enter valid username and invalid password.

 Enter valid password but invalid username.
 Keep both fields blank and hit enter or click login button.
4.3 Prepare a user documentation to properly guide the users of the implemented system.

19
Note: User documentation should be simple and understandable by anyone. Use screenshots and
provide stepwise guidance.

Purpose of the document

The document explained my developed Online library System application all implemented related
information.

Document history

Version Date Description

1.0 05/06/2019 Initial Création

Validation

Representative Validator Date

Contents

Purpose of the document............................................................................................................1

Document history.......................................................................................................................1
Validation...................................................................................................................................1
1. Presentation of the Solution..............................................................................................3
1.1 Brief description
1.2 Descriptives Icons
1.3 Project players
1.4 Support
1.5 Referenced Documentation
1.6 History of the Solution
2. Connecting to the Application..........................................................................................5
2.1 Address
2.2 Authentication
3. Structuring of the Application..........................................................................................6
3.1 Website design for IT Online library System

20
 3.2 Menus
3.3 Icons / Shortcuts
3.4 Functionalities
Operations

Presenting the Solution

Brief description
I have developed this system called Online Library Management System. The KLibrary
Management System is a new method that hopes to identify the most relevant defects currently
occurring in real time with the help of pattern matching techniques
Description icon
Project Player
Manager

User / Customer
Donate

I received a support request here below the following methods:

• Phone
• Email
• Dedicated application

References
Final_Report of the project

The History of the Solution

• The proposed system is a primarily web-based solution that will provide functions such as
avoidance of time duplication, duplication of programs and customer solutions, and multiple
concurrent access to data of users and administrators of the Web
• The proposed system will provide user authentication, report generation, and database
connectivity.
• We will therefore implement a system database to centralize related data.

Connecting to the Application

Address
You must connect to the application using the following address:

In my local machine I used the below URL:

21
URL : http:// webdoco2.great-site.net

Authentication

For Administrator, Please use below credentials

User Name: admin@gmail.com

Password :admin

For User or Customer, Please use below credentials

User Name: user@gmail.com

Password :user

Structuring of the Application

Website design for Admin

 All Users (system-common interfaces)

 Home page
 Login page (Using Email, Password)
 Books page (To post forum)

Menus

 Home Page
 Bill management
 Product Management

Icons / Shortcuts

Functionalities
Login admin
Admin will log into the system by entering admin's email and password on this interface.
Logout admin
Admin will log out of the system by clicking logout on this interface.
Home page

22
Login Page

Add Books page

23
Bill management pages

Product Management

24
 Website design for Librarian Registration

• All users (general system interface)

• Home page
• Login page (Use Email, Password)
• Registration page (Fill in personal information in the table to register for membership)
• Cart
• Product
• Pay
• Pill

Icons / Shortcuts

Functionalities
User Login
All system users will login to the system by entering their username and password on this
interface giao
customer information
This is the customer's profile page. For each customer in my Online Library System, they have
their own profile
Customer registration
This web form is filled by user or customer operator khách
Home page

25
Login Page

Registration page

26
Cart

Product

27
Pay

Pill

User registration
This web form is filled out by a user who wants to register an account to use the system. When the
user wants to login to the system, he will enter the necessary details of the user and click the submit
button
Work
This section will list all the normal and special operations required by the user. The normal operations
in my system are shown below.
• User handling
•Create Account
• Identify the problem
• Determine if the problem exists in the DB
• Identify the most suitable technician
• Create suggested documents

28
References

[1] McConnell, Steve (June 2004). Code Complete, Second Edition. Microsoft Press. p. 960. ISBN 0-7356-
1967-0.

[2] McConnell, Steve (July 2, 1996). Rapid Development. Microsoft Press. p. 680. ISBN 1-55615-900-5.

[3] Leffingwell, Dean; Don Widrig (May 16, 2003). Managing Software Requirements: A Use Case
Approach, Second Edition.Addison-Wesley Professional. p. 544. ISBN 0-321-12247-X. [5] MySql Bible by
Steve Suehring Publisher: John Wiley & Sons

[4] http://codeapogee.com/tools-techniques-material-design-developing-web-page/

[5] https://www.codementor.io/nicolesaidy/getting-started-with-wireframes-du107vuh7

[6] https://www.pluralsight.com/blog/film-games/whats-difference-front-end-back-end

[7] https://www.klood.com/blog/gdd/one-page-vs-multi-page-website-design-pros-cons

[8] Leffingwell, Dean; Don Widrig (May 16, 2003). Managing Software Requirements: A Use Case
Approach, Second Edition.Addison-Wesley Professional. p. 544. ISBN 0-321-12247-X. [5] MySql Bible by
Steve Suehring Publisher: John Wiley & Sons

[9] Abels,E.G.,White,M.D.,& Hahn,K.(1999).A user-based design process for Web sites. OCLC Systems
and Services,Vol.15,No.1,pp.35-44.

[10] Amaratunga,D.,Baldry,D.,Sarshar,M.& Newton,R (2002). Quantitative and Qualitative

research in the built environment:application of mixed research approach.Work

Study,Vol.51,No.1,pp.17-31

29