Higher Nationals

Assignment Brief – BTEC (RQF)

Higher National Diploma in Computing

Student Name/ID Number Do Tran Trong Hieu

Unit Number and Title 10: Website Design & Development

Academic Year 2020 - 2021

Unit Tutor Nguyen Ngoc Tan

Assignment Title BKC Antiques and Auctions

Issue Date 20/06/2021

Submission Date 05/07/2021

IV Name & Date

Submission Format
The submission is in the form of two documents/files:
1. A technical information report for the IT administrator
2. A 15-20 slide presentation to be presented to the owners of BKC with accompanying notes.
3. A design document for the website
4. Evidence of a multipage website for BKC
5. Documentary/visual supporting evidence for the website to include a test plan and critical
evaluations of the process

Unit Learning Outcomes

LO1 Explain server technologies and management services associated with hosting and managing
websites.
LO2 Categorize website technologies, tools and software used to develop websites.
LO3 Utilize website technologies, tools, and techniques with good design principles to create a
multipage website.
LO4 Create and use a Test Plan to review the performance and design of a multipage website.

Assignment Brief and Guidance

Scenario and activity
You work for a creative web solutions and marketing company as a designer and content developer. A
client ‘BKC Antiques and Auctions’ has asked if you could provide a web-based solution to support the
digital marketing and selling of their antique and auction items.
There is some resistance by the owners who do not see the benefit of having a website or online
provision as the client is a very traditional ‘brick’ only based company.
Lack of understanding about the costs, mechanics, and benefits of ecommerce, has held them back.
However, two of their competitors have started selling antiques online and are getting much wider
interest internationally, a market that BKC need to embrace if they are going to grow their customer
base over the next two years.
You will be expected to work alongside their newly appointed IT administrator who will be taking over
after the project once a solution has been implemented.
As the IT administrator has a limited knowledge regarding websites, your first task is to provide an
understanding about server technologies, hosting, performance, user experience and requirements in
terms of hardware and software.

LO1 and LO2

Create a technical information report with sections addressing the following key areas for the IT
administrator:
● DNS – purpose and types, including explanations on how domain names are organized and
managed
● Communication protocols, the purpose and relationship between server hardware, operating
systems and web server software with regards to designing, publishing and accessing a
website
● Front-end and back-end website technologies, review the capabilities and responsibilities of
the technologies. Ensure that these are explained to in your report to the administrator in terms
of how these relate to the presentation and application layers.
● Discuss the differences between online website creation tools and custom-built sites with
regards to design flexibility, performance, functionality, User Experience (UX) and User
Interface (UI)
As you will need to also create more awareness amongst the owners, who are still skeptical. about the
costs and projected benefits, you have decided to put together a presentation.
that looks at the options available in terms of user experience, search engine types and the
tools and techniques that can be used when designing a custom-built website.
Design a presentation 15-20 slides with accompanying notes that will support the next part of the project
involving the website design for BKC Antiques. Even though a visual presentation is the best format to
aide understanding, you have also decided to include extensive accompanying notes that evaluate the
concepts introduced.
The presentation should address the impact of common web development technologies and frameworks
with regards to website design, functionality, and management. The influence of search engines on
website performance; provide evidence-based support for improving a site’s index value and rank
through search engine optimization.
You will need to ensure that the owners know what is meant by the key terms and provide examples
linked to the antiques business and/or auction arena.
You want the owners to sign off the first stage as quickly as possible so that you can progress onto the
design. Therefore, ensure that you have fully evaluated a range of tools and techniques that can be used
to design and develop a custom-built website for BKC.

LO3 and LO4

The owners, following your presentation and technical information report are fully onboard with you
developing their website. They would like a design that captures their current stock and new arrivals.
They would like information on their website about events such as auctions and themed days at their
barn warehouse in Suffolk looking at different types of antiques, focusing on different periods, different
types e.g., ‘furniture’ or ‘paintings’. Feature pages of special items for sales and online purchasing has
also been discussed.
The information provided by BKC should support you in creating a design document and from that a
branded, multipage website supported with realistic content.
The design document should showcase a multipage website, supported with medium fidelity wireframes
(giving details about the layout and how things will work/function) and a full set of client and user
requirements. Once the design document is complete with appropriate principles, standards, and
guidelines you will then move onto physically producing a branded, multipage website supported with
realistic content for BKC.
For the benefit of the owners, you will also need to include supporting documentation justifying what
you have done, why and what testing that has taken place.
Provide written and /or visual evidence of the following:
● A critical evaluation of the design and development process for the website against the design
document analyzing any technical challenges. At the very least, the evaluation
should compare the multipage website that you have created to the original design document.
● A suitable test plan that identifies key performance areas. Use this to review the
functionality and performance of BKCs website.
● Provide an evaluation of the Quality Assurance (QA) process and review how this was
implemented during the design and development stages.
For the IT administrator you have agreed to provide a critical evaluation of the test plan
results including a review of the overall success of the multipage website. This evaluation
can be used to identify areas of success, but also provide justified recommendations for
areas that require improvement in the future, if the business wishes to expand or embrace e- commerce
further.

4
Assignment Brief
Task 1 - Server technologies and management services associated with hosting and managing
websites (LO1)

 Differentiate the communication protocols, server hardware, operating systems and web server software
with regards to designing, publishing and accessing a website.
 The Internet The Internet is a global WAN – a network of networks
 It is based on a client-server network model Hundreds of thousands of web-servers throughout the world
provide resources and services to millions of clients
 Communication between computers on the Internet largely takes place using the TCP/IP protocol,
although other protocols, such as FTP, are also used
 How the web works The client-server model
 Client and server operate on machines which are able to communicate through a network
 The server waits for requests from a client
 Server receives a requests from a client
 Performs a the requested work
 Or lookup the requested data
 And send a response to the client
 Servers: file servers, web servers, name servers
 Clients: browsers, clients

 Web browsers and servers

 A browser: is a program that can retrieve files from the world wide web and render text, images, or
sounds encoded in the files.
Ex: IE, Chrome, Mozilla
 A web server: is an application which waits for client requests, fetches requested documents from disk
and transmits them the client.
 Apache
 MySQL

 The Application Layer Protocols

 Layer 7 of the OSI 7 Layer model is called the application layer.
 This layer defines Application layer protocols.

5
 The most common application layer protocols used between clients and web servers include:
 HTTP (Hyper Text Transfer Protocol)
 HTTPS (Hyper Text Transfer Protocol Secure)
 FTP (File Transfer Protocol)

 URL
 When a website or page is requested the URL (Uniform Resource Link) is typed into the browser.
 A URL tells a web browser (e.g. Firefox, Internet Explorer) where to look for a specified resource
 Clicking a hyperlink sends a HTTP request to the host web server (HTTP is the is the transfer protocol
used for the transfer of pages on the Web. It works in conjunction with TCP/IP)
 The URL will consist of Protocol Server Name The resource (file) *The Port Number

 Data transmission over the Internet – IP and DNS

Each computer on the Internet has its own unique IP address (e.g )
Users can not possibly remember long, abstract strings of numbers like IP addresses
To make it easier to remember, a Domain Name System (DNS) is used to convert IP addresses to domain
names
The DNS has a hierarchical structure with several levels
 The root domain (Internet root domain)
 Top-level domains (e.g. .edu, .com, .gov, etc.)
 Second-level domains (e.g. Amazon, Birkbeck, Google)
 Third level domains (sales, finance, Home Office)
DNS is a worldwide network of data bases and domain names for domain names and IP addresses.
This database is global. Hurray is a DNS server. The DNS server can be defined as the following:

 DNS Server
It is also a DNS server. Its main objective is to deal with the above mentioned database. These DNS
servers translate the domain name embedded in the IP address corresponding to the URL of the web
browser. Today, the largest digital database, the domain name system, has thousands of DNS servers
around the world.

6
  Identify the purpose and types of DNS
DNS - A domain name system is a stunning technology. It helps us open IP addresses without delay. We
can easily write the domain name and have DNS to find the IP address of the domain we are writing to. As
in your phone's book, as well, as you want to find Mike, and you write "Mike", you do not want to
remember his actual number, is it not excellent?

DNS is an essential part of the Internet. It manages all the queries to IP addresses. In this way, it can detect
various devices connected to the network.

 Information request
If you want to access our website and you know the domain name. If you are writing it in your browser, if
it first goes to your previous location, check for local caches, and the DNS query will not be found to find
the answer.
Recursive DNS servers
If you do not go to the previous page, your computer will answer the reversed DNS server of your Internet
service provider. You can get the result. If they do not, they will want to find information in a different
location.

 Root name servers

Your query can take a long way. The next step are the servers. They are the same as the intermediate ones.
They do not know the answer, but know where to find it.

 Top-Level Domain (TLD) name servers

Name servers will be forwarded to the left-right-side readings and the top TLD for the server (.com or
other). These TLD clients will guide you at the right time with the correct server.

 Authoritative DNS servers

Check DNS records for DNS records for information. There are other records, for example, we request our
website to report the IP address for the site.

 Retrieve the record

7
 We provide a website with a record track record from an e-mail server. Its native memory is stored. If
anyone wants a hostile record easily for the same website, if there is information already, it is not
necessary to travel through all these steps. All of these data expire. In this way, users will receive up-to-
date information.

 The final answer

Now it's sending this server to a report it to your computer. To save the computer, read the IP address and
give your information to your browser. The browser connects to the web server, you can finally see the
site.

 What is a domain name?

A domain name or domain is a structural label that connects to a specific IP (Internet Protocol) address of a
web hosting web host. Here is an example: https://domain.me is a domain name on our own website. We
declare that you will see us. Let's look at the structure of the domain.

 Define the types of DNS and the uses of it, with clarifications on how domain names are
structured.
DNS TLD’s Examples of top level domains include: http://www.iana.org
TLD’s (Top Level Domains) know about the location of a DNS server for individual domains but only
forward the request rather than resolve the request.
Examples of top level domains include:
 .com –commercial companies (Verisign)
 .org –non-commercial (public interest registry)
 .gov –US government use.
 .edu –education use.
 .ac.uk –UK academic/educational use.

 HTTP Server
The term "web server" refers only to the HTTP server software that provides the functionality of the
machine. HTTP is the web and HTTP server protocol, such as Microsoft's IIS and open source apache
servers, accepting requests from the browser's browser, and replying HTML documents (web pages) and
files. It also has a server (CGI script, JSPs, ASPs, etc.) and performs tasks such as searching databases and
credit cards.

8
  Built in to hardware too
It's not just web servers. The HTTP server software generally builds a hardware-based hardware
component to configure the device from any hard drive. Includes small websites for many network devices,
such as routers, access points, and printed servers.

 Web server hardware

The primary function of the web server is the implementation and response of web server requests sent
using HTTP. Web server’s memory, large and fast hard disk drives, and normal desktop or notebook
computers are not fast-growing. A virtual server or virtual hosting is more than one server per machine.

 Web server software

Server software is a software designed to use, operate and manage a server. Facilitates the use of the
underlying server computer to use high-end computer services and functions.
Examples of CCTLD’s and their allocation.
 .au –Australia
 .bb –Barbados
 .ca –Canada
 .de –Germany
 .is –Iceland

 Analyze the effect of search engines on website performance.

Provide evidence-based support for improving a site’s index value and rank through search engine optimization.
Success in search engine optimization (SEO) requires not only an understanding of where Google’s algorithm is
today but an insight to where Google is heading in the future.

Based on my experience, it has become clear to me Google will place a stronger weight on the customer’s
experience with page load speed as part of their mobile-first strategy. With the investment Google has made in
page performance, there are some indicators we need in order to understand how critical this factor is now and
will be in the future. For example:

9
 AMP — Specifically designed to bring more information into the search engine results pages (SERPs) in a way
that delivers on the customer’s intent most expeditiously. Google’s desire to quickly serve the customer “blazing-
fast page rendering and content delivery” across devices and media begins with Google caching more content in
their own cloud.

Google Fiber — A faster internet connection for a faster web. A faster web allows for a stronger internet presence
in our everyday lives and is the basis of the success of the internet of things (IoT). What the internet is today is
driven by content and experience delivery. When fiber installations reach critical mass and gigabit becomes the
standard, the internet will begin to reach its full potential.
CSS

CSS is a Cascading Style Sheet. CSS web designers can change the colors, fonts, animations and websites. They
look good.
LESS – a CSS pre-compiler to make working with CSS easier and add functionality
SASS – a CSS pre-compiler to make working with CSS easier and add functionality

 Programming languages
Languages of the programming language to communicate and what to do in it. Languages in different languages
(English, Spanish, French, Chinese, etc.) have a variety of programming languages. Not better than the other.
Developers usually make a couple better than others, because they are merely talented. The following are just a
few of their backing and languages
 JavaScript – used by all web browsers, Meteor and lots of other frameworks
 Coffee script – is a kind of “dialect” of JavaScript. It is viewed as simpler and easier on your eyes as a developer
but it complies (converts) back into JavaScript
 Python – used by the Django framework and used in a lot of mathematical calculations
 Ruby – used by the Ruby on Rails framework
 PHP – used by WordPress

 Go – newer language, built for speed

Google Developer Guidelines — 200-millisecond response time and a one-second top of fold page load time,
more than a subtle hint that speed should be a primary goal for every webmaster.
Now that we are aware page performance is very important to Google, how do we as digital marketing
professionals work speed and performance into our everyday SEO routine?

10
 A first step would be to build the data source. SEO is a data-driven marketing channel, and performance data is no
different from positions, click-through rates (CTRs) and impressions. We collect the data, analyze, and determine
the course of action required to move the metrics in the direction of our choosing.

With page performance tools it is important to remember a tool may be inaccurate with a single measurement. I
prefer to use at least three tools for gathering general performance metrics so I can triangulate the data and
validate each individual source against the other two.

Data is only useful when the data is reliable. Depending on the website I am working on, I may have access to
page performance data on a recurring basis. Some tool solutions like DynaTrace, Quantum Metric, Foglight, IBM
and TeaLeaf collect data in real time but come with a high price tag or limited licenses. When cost is a
consideration, I rely more heavily on the following tools:

Google Page Speed Insights — Regardless of what tools you have access to, how Google perceives the performance
of a page is really what matters.

Pingdom.com — A solid tool for gathering baseline metrics and recommendations for improvement. The added
capability to test using international servers is key when international traffic is a strong driver for the business you
are working on.

GTMetrix.com — Similar to Pingdom, with the added benefit of being able to play back the user experience timeline
in a video medium.
WebPageTest.org — A bit rougher user interface (UI) design, but you can capture all the critical metrics. Great for
validating the data obtained from other tools.

Use multiple tools to capitalize on specific benefits of each tool, look to see if the data from all sources tells the same
story. When the data is not telling the same story, there are deeper issues that should be resolved before performance
data can be actionable.

Identify and explain the common web development technologies and frameworks. Explain the tools and
techniques chosen to the web application and hence justify, by giving reasons, why a web application is
suitable for the given scenario.

Web development comes with a huge set of rules and techniques every website developer should know
about. If you want a website to look and function as you wish them to, you need to get familiar with web

11
technologies that will help you achieve your goal. Developing an app or a website typically comes down to
knowing 3 main languages: JavaScript, CSS, and HTML. And while it sounds quite complicated, once you
know what you are doing, understanding web technology and the way it works becomes significantly
easier.

 Browsers
Browsers request information and then they show us in the way we can understand. Think of them as the
interpreters of the web. Here are the most popular ones: Google Chrome – Currently, the most popular
browser brought to you by Google Safari – Apple’s web browser Firefox – Open-source browser supported
by the Mozilla Foundation

 HTML & CSS

HTML is the one of the one you should learn first. Thanks to HTML, the web browsers know what to show
once they receive the request. If you want to better understand how HTML works, you also need to know
what CSS is. CSS stands for Cascading Style Sheets and it describes how HTML elements are to be
displayed on the screen.

 Carefully placed header tags

The readers are removed from a large text line. Organize and organize your site content in a way that can
be read and read easily and followed. Always separated for use by distances and inconveniences, and
turning it naturally into the stream.

 Inbound and Outbound links

Links in the Google Serial Algorithm are a key factor. How this works is because the search engine is
partly based on the reliability and relevance of our website, which links it to other websites. One source
says: "If we travel online as confidence-based voter names, the number of votes we receive from different
domains will be more powerful than the single domain."

Visual Contact helps to transform our site into a reliable source of information, and links to other sites on
our site from other websites and the SEO site.

 Image optimization

12
Evidence suggests that a good burial image can increase translation rates in a website. The best way to
apply the signature based on the search terms is according to the relevant keywords. The simplest tool is to
add 'alt' and 'title' tags to images. Technology recommended by Google Publication Guides. The 'Alt' tag
describes the function of the image and its image. Tell us what's on the screenwriter's screenshots

 Update content regularly

The simplest and simplest idea is that you would like a higher quality than Google. A very well-ranked
blogger says, "I'm not paying attention to a ton of tons; I'm often trying to push as much of the content as
possible."

 Watch broken links

Web links are based on, and SEO's basics are on the background of your website. When someone clicks a
link to a broken Web site, bad things will happen - the user's frustration, our credibility reduces, and our
page rankings are detrimental. So, broken links is a very bad thing for SEO.
Web Development Frameworks

Web development frameworks are a starting point of items that a developer can use to avoid doing the
simple or mundane tasks, and instead get right to work.

 Angular
Angular is one of the latest web technologies designed specifically for developing dynamic web
applications. With this framework, you can easily create front-end based applications without needing to
use other frameworks or plugins.

13
Task 2 - Categories website technologies, tools and software used to develop websites (LO2)

 Define the relationships between front-end and back-end website technologies and explain how
the front-end and the back-end relate to presentation and application layers.
Backend developer is responsible for this ‘not visual’ part of application. If there is need to save some
information, it creates connection to DB and can do CRUD (create, read, update, delete) operation on
records. Frontend developer is responsible for ‘visual’ part of application. He creates interface that you
often clicks on.

Relationship between them is really close. If you want to develop good product, you have to have
harmonious team. Cooperation between those 2 types of developers is important at the beginning of
project. They has to establish some data schema and authorization type for project

Both are necessary components for a high-functioning application or website. It’s not uncommon for
companies to get tripped up by the “front-end versus back-end” divide when trying to navigate the
development of new software.

After all, there are a growing number of tools on the market aimed at helping developers become more
“full stack” oriented, so it’s easy for non-technicians to assume there isn’t a big difference between front-
end and back-end specialists. Front-end and back-end developers do work in tandem to create the systems
necessary for an application or website to function properly. However, they have opposite concerns. The
term “front-end” refers to the user interface, while “back-end” means the server, application and database
that work behind the scenes to deliver information to the user.

The user enters a request through the interface.

It’s then verified and communicated to the server, which pulls the necessary data from the database and
sends it back to the user. Here’s a closer look at the difference between front-end and back-end
development.
 What is Front-End Development?

14
The front-end is built using a combination of technologies such as Hypertext Markup Language (HTML),
JavaScript and Cascading Style Sheets (CSS).

Front-end developers design and construct the user experience elements on the web page or app including
buttons, menus, pages, links, graphics and more.

 HTML
Hypertext Markup Language is the core of a website, providing the overall design and functionality.
The most recent version was released in late 2017 and is known as HTML5.2.
The updated version includes more tools aimed at web application developers as well as adjustments made
to improve interoperability.

 CSS
Cascading style sheets give developers a flexible, precise way to create attractive, interactive website
designs.

 JavaScript
This event-based language is useful for creating dynamic elements on static HTML web pages.
It allows developers to access elements separate from the main HTML page, as well as respond to server-
side events.

2.2. Critically compare the different between online website creation tools and custom-built sites.
Consider Followings: design flexibility, performance, functionality, User Experience (UX) and User
Interface (UI).
the single most important point about a custom-built website is that your site is designed and built to
specifically to support your established brand in a consistent way.

 Other advantages include

There are no limitations on graphics and functionality. If you can imagine it, a custom site can be
programmed to do it.

15
Custom-built sites are flexible and can grow with you. Down the road you might need significant changes
to not only the design, but also the functionality of your site. If you’re working with a template site, you
may have to start over in the event of major changes. It’s much easier to add new features to a custom site.

Custom-built sites are easier to update as WordPress is updated. Your developer will be able to fix any
problems that might occur as WordPress is updated, because they can change the coding of the site. If a
WordPress update breaks a template site that hasn’t been maintained by the template developer, you’re out
of luck and are stuck running an older version of WordPress. This makes your site more vulnerable to
hackers.

Search engine optimization is better in custom-built sites. Web developers who build sites from scratch
have the technical knowledge to make sure your site is optimized for search engines.

It’s generally easy to see if a website was created using a template, or if it is custom-built. The first step is
to view the site’s source code. Here’s how to access the code:

In Google Chrome: Open the site and go to the “Tools” menu, and select “view source”; alternatively, hit
Ctrl + U

In Internet Explorer, Mozilla Firefox, or Apple Safari: Right-click on the website and choose “View
source”

You’ll see a page of source coding, which may be pretty intimidating if this is unfamiliar territory – but
don’t worry, this isn’t difficult! Toward the top of the page, in the paragraph that begins <head>, scan
through the code and look for the “generator” meta tag to see which Content Management System is being
used.

Examples:
A website built on the WordPress platform may contain this: <meta name=”generator”
content=”WordPress 3.8.1″ />.
A website built on the Joomla platform may contain this: <meta name=”generator” content=”Joomla! 1.5 –
Open Source Content Management” />

16
  Compare and contrast the tools and techniques available to design and develop a custom-built
web Applications.
Website designing requires many important tasks like discipline production in website and website
maintenance. While designing a simple or modern web page, you must have many things in your mind.
There are many important website design area like:
 Web graphic design
 Interface design
 Authoring
 User experience design
 Search engine optimization
 Standardized code and proprietary software
 Tools and technologies

There are different tools and techniques used for designing webpage. It does not mean that all members in a
team use the same tools and techniques for designing a webpage. While choosing your tool and technique
for creating webpage, keep in mind all required things so that you will not face any problem in future.

Tools those are used for website designing:

 Visual Studio Code
 Xampp
 Composer
Simple technologies used for website designing are:
 HTML / CSS
 Javascript
 php
 Skills and technologies
 Bootstrap
 Framework: Laravel

Page layout

17
User interface design is totally affected by page layout. Page layout design of web page may be consistent or
in consistent. For example, if you are designing a web page, you must set width and breadth same for each
type of field. According to that page layout, units are sent to the web browser and which will be fitted into
your browser display.

Marketing and communication design

Many type of markets are available that need to a website for successful run of their business. While
designing website, you must keep in mind what type of website you are designing and what communication
strategy they required. Web designers also keep in mind type of webpage like business to business website
design, retail or entertainment website. Web designers must also consider the reputation of the business and
owner in the market.

User experience design and interactive design

Web designer consider how the web page works and understand the working of web page. User experience
is directly depends on the layout. If layout is well featured, user will come to your webpage again and again.
As the interactive website is, user will use it more and more.

Typography
Web designers also use different type of font faces for their web pages. Web designers recognize specific
number of safe fonts for all types of browsers.

Motion graphics
Page layout and user interface affected by motion graphics. Motion graphics create issues those are not
initiated by the site browser.

Generated content
There are two ways to design a website. First one to design webpage is statistically or dynamically.

Task 3 - Utilize website technologies, tools and techniques with good design principles to create a
multipage website (LO3)

18
  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?

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:

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

19
 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.
 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 E-commercial

 All Users (system-common interfaces)

 Home page
 Register page
 Login page (Using User Name, Password)
 Shopping page (To post forum)

Icons / Shortcuts

Functionalities
User Login

All the system users will log in to the system by typing their user name and password on this interface

Client profile
This is the client’s profile page. For each client in my Online library System system they have their unique
profile

20
Client registration
This web form is filled by the user or client operator

21
 Homepage

22
 Login Page

 Register page

23
 Product Detail:

24
25
 Update information

 Add to cart

 Login Admin

26
 Admin Management

 Admin Personal information update

 Customer management.

 Add customer.

27
  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.

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.

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

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.

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

 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

30
 another, to find errors. This helps the tester in detecting errors in coding and logic that are contained within
that module alone.
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:
 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.

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

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

32
References

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

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

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

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

33