Website Design and Development
Website Design and Development
• Constructive?
Y/N
• Linked to relevant assessment
criteria? Y/N
Give details:
Internal Verifier
Date
signature
Programme Leader
Date
signature (if required)
Higher Nationals - Summative Assignment Feedback Form
Student Name/ID
LO1. Explain server technologies and management services associated with hosting and managing websites.
Pass, Merit & Distinction P1 P2 M1 M2 D1
Descripts
LO2. Categorise website technologies, tools and software used to develop websites.
LO3. Utilise website technologies, tools and techniques with good design principles to create a multipage
website.
Pass, Merit & Distinction P5 P6 M4 D2
Descripts
LO4. Create and use a Test Plan to review the performance and design of a multipage website.
Pass, Merit & Distinction P7 M5 D3
Descripts
Resubmission Feedback:
Important Points:
1. Check carefully the hand in date and the instructions given with the assignment. Late
submissions will not be accepted.
2. Ensure that you give yourself enough time to complete the assignment by the due date.
3. Don’t leave things such as printing to the last minute – excuses of this nature will not be
accepted for failure to hand in the work on time.
4. You must take responsibility for managing your own time effectively.
5. If you are unable to hand in your assignment on time and have valid reasons such as illness,
you may apply (in writing) for an extension.
6. Failure to achieve at least a PASS grade will result in a REFERRAL grade being given.
7. Non-submission of work without valid reasons will lead to an automatic REFERRAL. You will
then be asked to complete an alternative assignment.
8. Take great care that if you use other people’s work or ideas in your assignment, you properly
reference them, using the HARVARD referencing system, in you text and any bibliography,
otherwise you may be guilty of plagiarism.
9. If you are caught plagiarising you could have your grade reduced to A REFERRAL or at worst
you could be excluded from the course.
Student Declaration
I hereby, declare that I know what plagiarism entails, namely to use another’s work and to present it
as my own without attributing the sources in the correct way. I further understand what it means to
copy another’s work.
Unit Number and Title Unit 10- Web Design and Development
Submission Format:
Borrowing books, returning books or viewing the available books at the Library of the Lowa State
University is currently done manually.
Online Library Management System supports to overcome the above-mentioned problems. This system
would be used by members who may be students or professors of that University to check the availability
of the books and borrow the books., The librarian can update the member details and the book lending
details.
Online Library Management System will include the following information.
The librarian, students and the professors can register and login to the system
Any of the above users can update their profile details including the password
The authorized users can reserve a book for 24hours
The authorized users can check book availability
The librarian can check the member status and update the lending details (If the book is
for the lending)
The system allows the Librarian to create the books catalog, add/delete books and
maintain the books catalog.
The librarian can update the book return details
The librarian can calculate the fine for the late returns if necessary
The users can search the books according to the categories (Novels, Frictions, etc.)
Task 1 - Server technologies and management services associated with hosting and managing websites
(LO1)
1.1 Differentiate the communication protocols, server hardware, operating systems and web server
software with regards to designing, publishing and accessing a website.
1.2 Define the types of DNS and the uses of it, with clarifications on how domain names are structured.
1.3 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.
1.4 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.
Task 2 - Categories website technologies, tools and software used to develop websites (LO2)
2.1 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.
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).
2.3 Compare and contrast the tools and techniques available to design and develop a custom-built web
Applications.
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
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.
3.3 Critically evaluate the web design and development process against your design document and
analyse any technical challenges you faced in development.
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).
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.
4.3 Prepare a user documentation to properly guide the users of the implemented system.
Note: User documentation should be simple and understandable by anyone. Use screenshots and
provide stepwise guidance.
Table of content
Table of Contents
Acknowledgment......................................................................................................................12
Table of content........................................................................................................................13
Task 1 - Server technologies and management services associated with hosting and managing websites
(LO1)........................................................................................................................................19
1.1.................................................................................................................................................................19
HTTP........................................................................................................................................19
HTTPS......................................................................................................................................19
FTP...........................................................................................................................................20
TFTP.........................................................................................................................................21
SSL Certificate.............................................................................................................................................22
Server hardware........................................................................................................................23
APACHE......................................................................................................................................................23
MICROSOFT ISS........................................................................................................................................23
TOMCAT.....................................................................................................................................................23
Operating systems....................................................................................................................24
1.2 Define the types of DNS and the uses of it, with clarifications on how domain names are structured. 25
Uses of DNS.................................................................................................................................................26
Sub domain...................................................................................................................................................27
1.3Analyze 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.............................................28
Panda algorithm............................................................................................................................................28
Penguin algorithm........................................................................................................................................29
Hummingbird algorithm...............................................................................................................................31
1.4Identify 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..................................................................................................................32
Task 2 - Categories website technologies, tools and software used to develop websites (LO2)34
2.1 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....................................................34
Front-end......................................................................................................................................................34
Backend........................................................................................................................................................35
2.2 Critically compare the different between online website creation tools and custom-built sites............37
Different between online web creation tools (template) and custom builder sites......................................37
2.3 Compare and contrast the tools and techniques available to design and develop a custom-built web
Applications.................................................................................................................................................38
Task 3 - Utilize website technologies, tools and techniques with good design principles to create a multipage
website (LO3)...........................................................................................................................40
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.....................................................................................40
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...........................................................................................................................................42
Functionalities..........................................................................................................................44
3.3Critically evaluate the web design and development process against your design document and analyze
any technical challenges you faced in development....................................................................................46
Task 4 - Create and use a Test Plan to review the performance and design of a multipage website (LO4) 48
4.1Evaluate the Quality Assurance (QA) process and review how it was implemented during your design
and development stages................................................................................................................................48
4.2Critically 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.................................................................................50
4.3Prepare a user documentation to properly guide the users of the implemented system..........................52
Functionalities..............................................................................................................................................52
Brief description...............................................................................................................................................
Project players..............................................................................................................................................54
Authentication..............................................................................................................................................55
Gantt chart................................................................................................................................57
Table of figures
Figure 1.tom cat web application manager......................................................................................................24
Figure 2. Panda logo.........................................................................................................................................29
Figure 3. Penguin logo.....................................................................................................................................31
Figure 4.hummingbird logo..............................................................................................................................31
Figure 5.front end vs back end.........................................................................................................................35
Figure 6.erd......................................................................................................................................................41
Figure 7.register an account.............................................................................................................................44
Figure 8.user login form...................................................................................................................................45
Figure 9.home page..........................................................................................................................................45
Figure 10.user login..........................................................................................................................................45
Figure 11.book details......................................................................................................................................46
Figure 12.issued books.....................................................................................................................................46
Figure 13.returened books................................................................................................................................46
Figure 14.register.............................................................................................................................................52
Figure 15.login..................................................................................................................................................52
Figure 16.home page........................................................................................................................................53
Figure 17.user availability................................................................................................................................53
Figure 18.book details......................................................................................................................................53
Figure 19.issued books.....................................................................................................................................53
Figure 20returned books..................................................................................................................................54
Table of tables
Task 1 - Server technologies and management services associated with hosting and
managing websites (LO1)
1.1
HTTP
HTTP stands for Hypertext Transfer Protocol. When you enter http:// in your address bar in
front of the domain, it tells the browser to connect over HTTP. HTTP uses TCP (Transmission
Control Protocol), generally over port 80, to send and receive data packets over the web.
It is a protocol that’s used by a client and server which allows you to communicate with other
websites. The client sends a request message to an HTTP server (after the TCP handshake) which
hosts a website, the server then replies with the response message.
The response message contains completion status information, such as “HTTP/1.1 200 OK”.
HTTPS
HTTPS stands for Hypertext Transfer Protocol Secure (also referred to as HTTP over TLS or
HTTP over SSL).
If enter https:// in your address bar in front of the domain, it tells the browser to connect over
HTTPS. Generally sites running over HTTPS will have a redirect in place so even if type
in http:// it will redirect to deliver over a secured connection.
HTTPS also uses TCP (Transmission Control Protocol) to send and receive data packets, but it
does so over port 443, within a connection encrypted by Transport Layer Security (TLS).
[ CITATION BRI16 \l 1033 ]
FTP
File Transfer Protocol (FTP) is a standard Internet protocol for transmitting files between
computers on the Internet over TCP/IP connections.
FTP is a client-server protocol that relies on two communications channels between client and
server: a command channel for controlling the conversation and a data channel for transmitting
file content.
Clients initiate conversations with servers by requesting to download a file. Using FTP, a client
can upload, download, delete, and rename, move and copy files on a server. A user typically
needs to log on to the FTP server, although some servers make some or all of their content
available without login, known as anonymous FTP.
FTP sessions work in active modes. After a client initiates a session via a command channel
request, the server initiates a data connection back to the client and begins transferring data.
POP3
Post Office Protocol version 3 (POP3) is a standard mail protocol used to receive
emails from a remote server to a local email client.
POP3 allows you to download email messages on local computer and read them even
when we are offline. Note, that when you use POP3 to connect to your email account,
messages are downloaded locally and removed from the email server.
This means that if you access your account from multiple locations that may not be the
best option for you. On the other hand, if you use POP3, your messages are stored on
your local computer, which reduces the space your email account uses on your web
server.
IMAP
The Internet Message Access Protocol (IMAP) is a mail protocol used for accessing email
on a remote web server from a local client.
IMAP and POP3 are the two most commonly used Internet mail protocols for retrieving
emails.
While the POP3 protocol assumes that your email is being accessed only from one
application, IMAP allows simultaneous access by multiple clients.
SMTP
Simple Mail Transfer Protocol (SMTP) is the standard protocol for sending emails across
the Internet.
By default, the SMTP protocol works on three ports:
TFTP
TFTP, or Trivial File Transfer Protocol, is a simple high-level protocol for transferring data
servers use to boot diskless workstations, X-terminals, and routers by using User Data Protocol
(UDP).
TFTP works differently than FTP (File Transfer Protocol) and HTTP (Hypertext Transfer
Protocol). Although TFTP is also based in FTP technology, among the differences is that TFTP’s
transport protocol uses UDP which is not secure while FTP uses Transmission Control
Protocol (TCP) to secure information.
TFTP was primarily designed to read or write files by using a remote server. However, TFTP is a
multi-purpose protocol that can be leveraged for an array of different tasks.
Transferring files
Remote-booting without hard drives
Upgrading codes
Backing up network configurations
Backing up router configuration files
Saving IOS images
Booting PCs without a disk
TFTP Protocol Transfer Modes
1. netascii
2. octet
3. mail[CITATION spi19 \l 1033 ]
SSL Certificate
SSL stands for Secure Sockets Layer and, in short, it's the standard technology for keeping an
internet connection secure and safeguarding any sensitive data that is being sent between two
systems.
Preventing criminals from reading and modifying any information transferred, including
potential personal details.
The two systems can be a server and a client (for example, a shopping website and browser) or
server to server (for example, an application with personal identifiable information or with
payroll information).
It does this by making sure that any data transported between users and sites, or between two
systems remain impossible to read. It uses encryption algorithms to scramble data in
transportation, preventing hackers from reading it as it is sent over the connection.
This information could be anything sensitive or personal which can include credit card numbers
and other financial information, names and addresses.
HTTPS (Hyper Text Transfer Protocol Secure) appears in the URL when a website is secured by
an SSL certificate. The details of the certificate, including the issuing authority and the corporate
name of the website owner, can be viewed by clicking on the lock symbol on the browser bar.
Server hardware
A server is a computer that provides data to other computers. It can serve data over a local area network
(LAN) or over a wide area network (WAN) over the Internet.
There are many types of servers, including web servers, mail servers, and file servers. Each type runs
software specific to the server's purpose.
For example, a web server can run Apache HTTP Server or Microsoft IIS, both of which provide access to
websites over the Internet. A mail server can run a program like Exim or Email, which provides SMTP
services for sending and receiving email.
A file server uses samba or the file sharing service available on the operating system to transfer files over a
network server.[ CITATION Per14 \l 1033 ]
It’s possible you’ve never thought about what happens when you enter a URL into your computer’s
browser, or click on a website found in a search result.
In fact, you may just think that when websites appear on your computer screen it is the result of some kind
of technological magic.
APACHE
The apache HTTP server Project is an effort to develop and maintain an open-source HTTP server for
modern operating systems including UNIX and Windows. The goal of this project is to provide a secure,
efficient and extensible server that provides HTTP services in sync with the current HTTP standards.
MICROSOFT ISS
IIS is a web server software package designed for Windows Server. It uses websites and other content to
host the web. Microsoft's Internet Information Services provides a graphical user interface (GUI) for
managing Web sites and associated users. It provides a visual medium for creating, configuring, and
publishing web sites. The IIS Manager tool allows web administrators to modify site options such as default
pages, error pages, logging settings, security settings, and performance optimization.
TOMCAT
Tomcat is an Apache Software Foundation application server that executes Java servers and displays web
pages that include Java server page encoding. Tomcat is described as a "reference implementation" in the
Java Servlet and Java Server Page specifications, and is a result of the open collaboration of developers,
available in binary and source versions on the Apache Web site. Tomcat can be used individually with its
own internal web server or with other web servers including Apache, Netscape Enterprise Server, Microsoft
Internet Information Server (IIS) and Microsoft Personal Web Server. Tomcat requires a Java runtime
enterprise environment compatible with JRE 1.1 or later.[ CITATION jav19 \l 1033 ]
Operating systems
An operating system is a software which acts as an interface between the end user and computer
hardware.an application like chrome, MS word, games, ETC needs some environment in which it will run
and perform its task.
Features of Operating System
1.2 Define the types of DNS and the uses of it, with clarifications on how domain names are
structured.
The domain name system (DNS) is a naming database in which internet domain names are located and
translated into internet protocol (IP) addresses.
The domain name system maps the name people use to locate a website to the IP address that a computer
uses to locate a website
Computers route information and find things on the internet using IP addresses. Everything connected
directly to the internet has a unique IP address, which is reached through the interconnected routers,
peers, bridges and data pipes that make up the back bone of the internet.
DNS servers answer questions from both inside and outside their own domains. When a server receives a
request from outside the domain for information about a name or address inside the domain, it provides
the authoritative answer.
When a server receives a request from inside its own domain for information about a name or address
outside that domain, it passes the request out to another server. Usually, this server is one managed by
its internet service provider (ISP).
If that server does not know the answer or the authoritative source for the answer, it will reach out to the
DNS servers for the top-level domain – e.g., for all of .com or .EDU. The answer will flow back along
the same path.[CITATION Mar \l 1033 ]
Uses of DNS
1. Generally DNS is the only system in the entire world that can help browse the internet. With the
internet becoming an essential part of the society, it has increasingly become important that DNS
Servers remain maintained. Without them, the internet would not exist.
2. DNS servers provide a nifty solution of converting domain or sub domain names to IP addresses.
Imagine how it would feel having to memorize the IP addresses of twitter, Facebook, Google or
any other site that you normally frequent on a daily basis. Its system also makes it easy for
search engines to be able to categorize and archive information.
3. Security enhancement –DNS servers are an important component for the security of your home
or work connections
Domain name structure
Domain name structure can more easily figure out what your choice of domain names. Could be,
alternative ways, variations. The general domain name structure is;
SUBDOMAIN.SECONDLEVELDOMAIN.TOPLEVELDOMAIN
Top level domain
Top level domain (TLD) is a registry entity and it is name is the name of the group to which its member
names are registered.
The most of TLDs is the “com” top level domain registry, and there are many other top level domains.
Examples: .NET, .ORG, .GOV, .EDU
The “dot” (.) is a period character and element of domain name structure which is used to mark the
separation of the various name of domain name.
Example: “NET” is a top level domain name and “INTERCLIX” is second level domain name. We would
speak of INTERCLIX as being a member of the “dot NET” top level domain, such as “Interclix dot NET”.
Note that all Internet domain names follow the same rules for domain name structure.
Second level domain name
“example.com” – the word “example” is a second level domain. The second level domain is important
because:
Sub domain
Sub domain name is a additional part of domain name. Subdomains are created to organize and navigate to
different sections of website.
In above example; APPLE is the sub domain name, YOURWEBSITE domain name is the primary
domain and COM is the top level domain name.
1.3Analyze 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.
1.3 Search engine optimization
It’s the process of getting traffic from the free, organic, editorial or natural search results on search engines.
All the search engines such as google, yahoo, Bing have primary search results, where web page and other
content such as videos or local listings are showed and ranked based on what the search engine considers
most relevant to users.
[ CITATION sea19 \l 1033 ]
Panda algorithm
About panda
In 2010, the falling quality of Google’s search results and the rise of the “content farm” business model
became a subject that was repeatedly making the rounds.
As Google’s told later wired at TED, the caffeine update of late 2009, which dramatically sped up googles
Ability to index content rapidly, also introduced “some not so good” content into their index.
Undoubtedly, headlines like these were a major influence on Google, which responded by developing the
Panda algorithm.
Panda was first introduced on February 23, 2011.in that day, google published a blog about the update,
and indicated that they “launched a big algorithmic improvement to ranking a change that noticeably
impacts 11.8% of queries.
The expressed purpose of the update was as follows.
This update is designed to reduce rankings for low-quality sites—sites which are low-value
add for users, copy content from other websites or sites that are just not very useful.
At the same time, it will provide better rankings for high-quality sites—sites with original
content and information such as research, in-depth reports, thoughtful analysis.
Search engine land founder Danny Sullivan originally referred to it as the “farmer update” although google
later revealed that internally it had been referred to as “panda” the name of the engineer who came up with
the engineer who came up with the primary algorithm development. [CITATION Pra17 \l 1033 ]
The web spam algorithm later became known as the penguin algorithm update via a tweet from matt cuts,
who was then head of the google web spam team. While google officially named penguin.
Penguin update
There have been a number of updates and refreshes to the Penguin algorithm since it was launched in 2012,
and possibly a number of other tweaks that have gone down in history as unknown algorithm updates.
This was another data refresh. It affected queries in the English language, as well as affected
international queries.
Penguin 2.0 impacted around 2.3 percent of English queries, as well as other languages
proportionately.
This was also the first Penguin update to look deeper than the websites homepage and top-level
category pages for evidence of link spam being directed to the website.
The only refresh to Penguin 2.0 (2.1) came on October 4 of the same year. It affected about 1
percent of queries.While there was no official explanation from Google, data suggests that the 2.1
data refresh also advanced on how deep Penguin looked into a website and crawled deeper and
conducted further analysis as to whether spammy links were contained.
While this was named like a major update, it was, in fact, another data refresh; allowing those
impacted by previous updates to emerge and recover, while many others who had continued to
utilize spammy link practices, and had escaped the radar of the previous impacts saw an impact.
Almost two years after the 3.0 refresh, the final penguin algorithm update was update was
launched. The biggest change with this iteration was that penguin became a part of the core
algorithm.
Google penguin algorithmic downgrades --- Soon after the penguin algorithm was introduced. Webmasters
and brands who had used manipulative link building techniques. Not all Penguin downgrades were site-wide
– some were partial and only affected certain keyword groups that had been heavily spammed and over
optimized, such as key products and in some cases even brand. Google penguin recovery---the renounce tool
has been asset to SEO practitioners, and this hasn’t changed even not that penguin exists as of the core
algorithm.[CITATION dan \l 1033 ]
There are was a time when CSS3, HTML5, JAVASCRIPT, PHP, MY SQL were used to be the main
web development technologies to develop website or web application. However, with the emergence of
several new technologies, tools, frameworks, and languages in last few years,
Custom build apps
It is an app built for you from mark according to specifications without using any third-party semi-
ready products. For websites it is without any ready CMS like WordPress, Joomla, etc... For another
app like chat app without using ready SDKs, bispokes.
Browser
Browser is a translator for the web. They ask for information and when it is received, they are shown on
the page in a format that we can see and understand. Google Chrome - Currently, the most popular browser
brought to you by Google Safari - Apple Web Browser Firefox - Mozilla Foundation Internet Explorer -
Open-source browser with the help of Microsoft Browser.
Programming languages
Developers usually promote a couple because of their expertise. Below is a list of some of the languages
and their home pages
Javascript - is used by web browsers, metores and framworks
Coffee Script - is a Javascript "dialect". It sounds simpler and easier than your eyes as a developer, but
it turns it into JavaScript (converts)
Python - uses a lot of mathematical calculations using the Django framework
Ruby - Uses the Ruby on Rails framework
PHP - Uses WordPress
Go - new language, built for speed.
Objective-C - the programming language behind Apple's iOS (your iPhone)
Swift - Apple's newest programming language
Java - Uses a large number of Android (Google) and desktop applications[ CITATION col19 \l 1033 ]
Image optimization
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
Task 2 - Categories website technologies, tools and software used to develop websites
(LO2)
2.1 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.
Front-end
The front end is everything that relates to what the user sees, including design and some languages like
HTML and CSS. While Frontend and Backend are the two most popular applications in the web industry,
the difference between the two is quite subtle. These are the two most basic components of software
engineering that play a significant role in website development.
They certainly have different roles, but they are two sides of the same coin.
Frontend is part of the site where you can directly view and interact with the system's background
capabilities. It relates to everything the user can see, touch and experience. The role of a web designer has
changed drastically over the years, but the basic functions of website development remain the same.
Frontend is the bell and whistle you see on the site. It has a graphical user interface with bright buttons,
colorful graphics, navigation menus, and so on. Frontend is also known as the "client side". In this case the
user side. Typically, a client refers to a computer application, such as a web browser.
The role of a frontend developer is to create an environment where the user can see and touch with the help
of a collection of tools including HTML, CSS, and JavaScript.
Backend
The backend, also known as the "client side", is part of the website you can't see and interact with.
Basically, everything that happens behind the scenes can be attributed to background web development. It's
about how the website works; it’s like an indirect service provider for frontline development. It is part of a
system that does not interact with users. Unlike Frontend, it runs on the server side, but communicates with
Frontend to ensure everything is running smoothly. In every application, there is also a significant portion
of non-user interface code that deals with all complex systems that occur in the background. People who
deal with backend are usually programmers and developers.
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).
Most websites today are designed with a content management system or CMS
WordPress is an open source blogging tool, and by 2017, WordPress will have 50-60 percent of the global
CMS market. Joomla, CMS built Simple, Dot Net Nuke, and Drupal.
The system a developer uses for a website depends on a variety of factors, the technical requirements of
your server and his / her expertise in different platforms.
Online web creation tools
There are several online creation tools such as WIX, word press, blogger, JIMBO, YOLA. This is kind of a
template that help to customer without any guider. here the special thing is customer can creation their own
web as they want.
Custom built sites
Custom Building Websites Custom-made websites include a team behind your business. It starts with a
creative process to understand who your target audience is, who you want to reach, how you want / need
the website to function, and how you want to look at the Internet.
Different between online web creation tools (template) and custom builder sites
Online web creation sites are significantly less than custom sites. Using online web creation means
that most website coding works without your developer pointing a finger. Template sites are more
affordable than custom sites, so developer will still have to spend time customizing the template
and executing the content.
Template sites are slightly faster to implement. Again, this is because a lot of coding has been done.
If the content is good enough, you can launch a template site in a few weeks (however this is often
not the case - often a significant barrier to launching a website) and your developer's schedule is
clear. Depending on the complexity of what you want, a custom site will take a considerable
amount of time.
There are some disadvantages with online web creation tools
The site can be just like everyone else.
Limited graphic design and navigation capability.
Limit of the functionality
Security can be issue
There are no restrictions on graphics and functionality.
A custom website can be programmed to do that. Custom-made sites are flexible and can grow with
customer. Down the road you may need significant changes not only to customer design but also to the
functionality of site.
If customer is working with a template site, builder will have to restart when there are major changes.
Adding new features to a custom website is much easier. Updating custom-made sites is easy because
some designing tools are up to date.
2.3 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. 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.
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.
According to the scenario I used solutions to provide appropriate principals with problems , below
1. Why is it okay for me to use wire frames?
The principle objective is to tell the customer the best way to develop the structure before the site.
Clients largely run their own organizations. Make sure they get dirty and clean up quickly.
2. What happens when I don't use a wireframe?
By creating a basic site structure, you can immediately change any natural location to solve your
customer's problems. A clear explanation of what should be on the various pages of your site,
regardless of whether there is a fast deck on scratch paper.
Figure 6.erd
There are many strategies for converting a wire frame into a complete wire frame, from basic
representations to high stability. The type of equipment that I choose to use depends on the individual's
preferences. Some are looking for a less sophisticated fast paced frame while others are bound to
believe in mockups. Each device has its advantages and concerns and there is no "best" tool for wire
framing. Any office we use and any work for our benefit.
HTML / CSS
When HTML and CSS are on my special list, I can code and link our photos. It is a low-cost tool for
the wireframe of my website and offers no frames. Creating HTML wireframes I could add time to my
process from the beginning of wireframe to the moment I obtain customer approval. Even if it does, it
will reduce gross correspondence and work after our wire frames are approved.
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.
Functionalities
Client profile registration
This is the client’s profile page. For each client in my online library System they have their unique profile.
Therefore customer have to register first.
User Login
All the system users will log in to the system by typing their user name and password on this interface
Figure 14.user login form
3.3Critically evaluate the web design and development process against your design document and
analyze any technical challenges you faced in development.
Multiple page locations are contrary to their single page partners. Multi-page sites may or may not show
the same material, but it will show on different pages.
They must be great for connecting with a wide range of materials, items, or administrations. It can be
difficult to display too many pages or too many items on one page.
Multi-page sites are more common than single-page locations, and many websites are in the business of
improving.
Multiple page locations are better for progressively complex web extensions that require more page content
or improved usability. Attempting to systematically control content on one page of a site is dangerous to a
client's general understanding, and it is difficult to find and connect with them.
For massive sites, for example an Internet business website, this could be the course you need to do. In any
case, you need to think about the arrangement of your site so that clients can find the material they are
looking for at a fast pace.
Specifically, the look should be completed with web-based promotion efforts.
When someone uses a web crawler, it tries to get the most important results. This is valid for natural search
and can be linked to periodic debates. This implies the same questions as in nature, we must create separate
pages for each topic or spelling. We can't do that on a one-page website. As we cannot guarantee, it is a
one-size-fits-all preparation. Thus, this pager has a lot more room for a number of page destinations.
In that case, when you rediscover this exchange (a way to promote promotions to clients who have recently
visited our site), then multiple page locations will basically give you the upper hand. This makes it difficult
to trigger duplicate pixels / content that are systematically embedded. Our CRM is linked to our web
review, and we send prospects to the business team when we visit a specific page.
Task 4 - Create and use a Test Plan to review the performance and design of a
multipage website (LO4)
4.1Evaluate the Quality Assurance (QA) process and review how it was implemented during your
design and development stages.
Software testing is a critical component of software quality assurance and represents the final review of
specification design and coding. Testing is the exposure of a system to a test input to see if the software
meets the correct output. It is not possible to determine whether the software meets the user's needs, only if
it appears to meet the requirements. Testing can show that a system is free of errors, only that it has its own
faults. Testing finds errors, and it does not correct errors. Software success is a quality product at the right
time and cost. Examination can reveal critical mistakes. Therefore, tests should be conducted 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.
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:
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.
4.2Critically evaluate the results of your Test Plan and include a review of the overall success of your
multipage website;
Test scenarios Positive test cases Negative test cases Testing name field
Write down the test Enter valid username Enter valid username Check the Full name
scenarios based on and password. and invalid text field without
the following test password. Prefix.
Click on forgot
types
password link and Enter valid password Check the Full name
User Interface retrieve the password but invalid username. text field without
for the username. adding First name.
Here are some of the Keep both fields
questions that can Click on register link blank and hit enter or Check the Full name
help you form test and fill out the form click login button. text field without
cases. and register adding Last name.
username and
password.
Table 2.recommodation
4.3Prepare a user documentation to properly guide the users of the implemented system.
Functionalities
Text fields
Register
button
If the user forget the password.
He can use this option
Figure 15.register
Search
Available Current Available books Available
books users news papers magazines
Important information
Action to be avoided
Required action
The LOWA library management System is a new method which hopes to identify the most suitable defects
of currently occur in real time with the help of pattern matching techniques
Project players
Administrator
User/Customer
The proposed system which is a web based solution that will mainly provide functionalities such as
avoiding time duplication, program duplication as well as client’s solutions and multiple concurrent
accesses to the data by employees and by the head of the authorities of School
The proposed system will provide user authentication, report generation and database connectivity.
Therefore we will implement a system database to centralize the relevant data.
Gantt chart
1st 2nd 3rd 4th 2nd 3rd 4th 4th 1st 2nd 3rd 4th
Task 01
Task 02
Task 03
Task 04
Grading Rubric
Grading Criteria Achieved Feedback
Comments: