WEB-assignment by NK

Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 34

1/2/2019

Website Design
and Development
Assignment

Adarsh Baral (HND / Second Semester)

ISMT COLLEGE
Website Design and Development 2018

Contents
Part 1......................................................................................................................................................1

Introduction............................................................................................................................................1

DNS........................................................................................................................................................2

Types of DNS.....................................................................................................................................2

Organizing and managing Domain Name System.............................................................................3

Communication Protocol....................................................................................................................5

Server hardware..................................................................................................................................5

Operating system................................................................................................................................6

Web server software...........................................................................................................................6

Publishing and accessing website.......................................................................................................7

Relation between communication protocol, server hardware operating system and web server
software..............................................................................................................................................8

Managing secure websites..................................................................................................................9

Search engine indexing and ranking......................................................................................................9

Improvement of search engine ranking through SEO..........................................................................10

Conclusion............................................................................................................................................10

Part 2....................................................................................................................................................11

Front End Developer............................................................................................................................11

Back End Developer............................................................................................................................12

Relationship between front end and back end technologies................................................................13

Difference between online website creation tools and custom built sites............................................14

Conclusion............................................................................................................................................14

Part: 3...................................................................................................................................................15

Introduction..........................................................................................................................................15

Objective of the system........................................................................................................................16

Hardware Interfaces..........................................................................................................................16

Adarsh Baral (HND / Second Semester)


1
Website Design and Development 2018

Software Interfaces...........................................................................................................................16

Wireframe............................................................................................................................................16

Suitable programming language used for developing website............................................................20

Conclusion............................................................................................................................................24

Part 4....................................................................................................................................................25

Introduction..........................................................................................................................................25

Testing of website................................................................................................................................25

Conclusion............................................................................................................................................30

References............................................................................................................................................31

Part 1

Adarsh Baral (HND / Second Semester)


2
Website Design and Development 2018

1. As a part of your first task you are required to prepare a report identifying the purpose
and types of DNS, including explanations on how domain names are organized and
managed and explain the purpose and relationships between communication protocols,
server hardware, operating systems, and web server software with regards to designing,
publishing and accessing a website. You are required to present the relationships
between domain names, DNS services and communication.

You are also required to document the overview of publishing and managing secure
websites, including search engine indexing and ranking.

Your document must include the explanation and purpose and relationships between
communication protocols, server hardware, operating systems and web server software
with regards to designing and accessing a website.

You may consider the differences between web server hardware, software and host
operating systems.

You may also consider the advantages of an integrated database system with regards to
expanding website capability and common web development technologies and
framework.

2. With reference to your previous task you are required to present a document that
evaluates the impact of common web development technologies and frameworks with
regards to website design, functionality and management.

3. Review the influence of search engines on website performance and provide evidence-
based support for improving a site’s index value and rank through search engine
optimization.

Introduction
Web-solution Technologies Pvt. Ltd is a leading web Hosting reseller and domain
registrationCompany in Nepal since 2007. It has been providing quality web services in Nepal at
affordable cost with reliable, secure and good customer support. The company deals with top-level

Adarsh Baral (HND / Second Semester)


3
Website Design and Development 2018

technician and company possess two dedicated web-hosting servers and cooperate with web hosting
company of USA to provide high quality service.

I have been hired as a member of Web Administrator Group and need to work with total ten
members who are new to web technologies. The leader has assigned the task to individual members
and I have been assigned the task to explain the server technologies and management technologies
associated with hosting and managing websites.

DNS
DNS (Domain Name System) is a worldwide system for translating IP address (192.168.1.1) into a
human readable domain names (www.google.com) [ CITATION NDND9 \l 1033 ]. It is also known
as the phonebook of internet. The translation of IP address is necessary because domain names are
easy for humans to understand but computers or machines cannot understand such language and it
needs to be converted into IP address i.e. machine readable language. All the websites are given their
own IP address and when we access one site (www.google.com) then our ISP views to the DNS
associates with the domain name and then it translates it into a machine readable language
(192.168.1.1) and it connects to the proper websites. The main Purpose of DNS is to provide IP
address to the website and make it easily accessible by the users or humans.

Types of DNS
There are mainly two types of DNS and they are

1. Primary DNS
2. Secondary DNS.

Primary DNS: Primary DNS is the main DNS which has the master copy of the domain data. When
we start to browse any website then when the operation starts all the data’s are loaded with the help
of primary DNS. When any website is accessed then at first all the IP are looked into primary DNS.
If primary DNS is busy and there is excessive load then data is shared into secondary DNS.

Secondary DNS: All the information and data of primary DNS are shared into secondary DNS.
Sometimes there may be failure of primary DNS and this time secondary DNS provides the relevant
information. Not only failure sometimes the primary DNS may be busy there can be heavy traffic so
that it may take some time to provide information or sometime because of some problem registered
IP cannot be found in the primary DNS at this case also it searches in secondary DNS. In simple way
we can say that secondary DNS are the backups of the primary DNS.

Adarsh Baral (HND / Second Semester)


4
Website Design and Development 2018

Organizing and managing Domain Name System


Internet is free and it does not have any space but though it doesn’t have space it is limited. We have
to maintain and manage Domain Name System. It does not have any central government but it is
managed strictly. All the computers that are connected in internet is connected with each other. If we
does not manage DNS then there will be lack of IP address and their starts various problems. There
are mainly four organization that manages the Domain Name System and they are:

i. ICANN (Internet Corporation for Assigned Names and Number)


ii. IANA (Internet Assigned Numbers Authority)
iii. Operators of Top-Level Domains
iv. Accredited registrars

Domain Name are managed and organized by the above-mentioned organization. Though they are
managed by above mentioned organization Domain Name System has got its architecture and all
organization maintain it according to that architecture. It is organized according to its name, space
and server. They are described below.

 Domain Names

Various domain name are used for various purposes. For example some are used for
educational intuition, some are used for organization and so on. Domain Name is just a
symbolic string associated with an IP address. Because of this Domain Names they are
organized according to name like generic (com, edu, gov etc.), country level (au, mp, in etc.).
Different domain names are separated and managed for different use. Some of them with its
meaning are:

Generic Domain Name


Domain Namr Meaning
.com Commercial Business
.edu Education
.gov Government
.net Networking organization
.org Non profit organization
Country level domain names
.au Australia
.np Nepal
.in India
.jp Japan
.us United States
In this way Domain Names are managed and organized.
Adarsh Baral (HND / Second Semester)
5
Website Design and Development 2018

 Domain Name Space


Domain name space refers to a hierarchy in the internet naming system. One domain can
have many other sub domains. In domain name space hierarchy it has multiple levels from 0
to 127 with a root at the top.

Figure 1: Domain Name Hierarchy.

In the above figure in the root level there is main domain that describes the different purpose
domains and then it is divided into secondary level domain. After dividing in to secondary level
domain one domain can have multiple sub domain so from one domain another subdomain is created
and in this way domain name space are provided and domain names are organized and managed.

 Name Server

As computers cannot understand human languages and human cannot remember and understand
computer language, both are converted into its appropriate language. DNS database are available
in Name Server. As computers cannot understand human language all the websites names are
converted into its corresponding IP address. All this names and IP address are available in
database. Since it is not possible for a single server to maintain entire DNSdatabase, therefore,
the information is distributed among many DNS servers.

Adarsh Baral (HND / Second Semester)


6
Website Design and Development 2018

In this way domain names are organized and managed.

Communication Protocol
Rules defining transmission are called protocols. Computers have to connect with each other and
communication protocol is a set of rules by which computer communicate with each other. They are
implemented in hardware and software. The main purpose of communication protocol is to exchange
messages in or between computing systems. There are various communication protocols and they
are:

 HTTP (Hyper Text Transfer Protocol)


 SMTP (Simple Mail Transfer Protocol)
 PoP (Post Office Protocol)
 FTP (File Transfer Protocol)
 TCP (Transmission Control Protocol)
 IP (Internet Protocol)

Server hardware
Components that store web server software and web site components such as HTML documents,
images, CSS style sheets and JavaScript files are web server hardware. They are connected to the
Internet. Some of the important server hardware that should be considered for the hosting company
are CPU, RAM, storage (I/O), processor and HDD. The hardware requirements for the hosting
company is tabulated below:

Item Web server Web server Combined Web & Combined Web &
(minimal) (recommended) Database Server Database Server
(minimal) (recommended)

Processor 1,6 GHz CPU 2 x 1,6 GHz CPU 2 x 1,6 GHz CPU 4 x 1,6 GHz CPU

RAM 1,75 GB RAM 3,5 GB RAM 3,5 GB RAM 7 GB RAM

HDD 1x 40 GB of free space or more is recommended for the company data (non-
system drive is preferred)
1x 40 GB of free space or more is recommended for the software that is listed
in the software requirements (system drive)

Recommended Basic Small VM Basic Medium VM Basic Medium VM Basic Large VM


Microsoft Azure

Adarsh Baral (HND / Second Semester)


7
Website Design and Development 2018

Virtual Machine
Configuration

Operating system
MicrosoftWindows NT Server, Microsoft Windows 2000 or 2003 Server products, Linux, or one
ofseveral UNIX-based operating systems, such as Solaris or FreeBSD are some of the most popular
Operating System and most of the Web Server runs on one of the above mentioned operating system.
Microsoft server products are simpler than UNIX-based systems and it is easy to learn for their staffs
but UNIX based Web servers are more popular, and many users believe that UNIX is a more
secureoperating system on which to run a Web server.

Web server software


Web server is a program that uses HTTP to serve the files that form Web pages to users, in response
to their requests, which are forwarded by their computers HTTP client. We host website and for
hosting also there should be various web server programs/software. Apache, Microsoft’s Information
Server, Nginx are some of the leading web servers. While choosing web server we need to consider
various factors and they are:

 Ability to handle server-side programming


 Security characteristics
 How well it works with the operating system and other servers

Publishing and accessing website


Website is a collection of related web pages which are served from a single web domain. We can
access website by using simple URL known as web address. Though it can be accessed easily we
need to publish it first. Without publishing website we cannot access it.

Adarsh Baral (HND / Second Semester)


8
Website Design and Development 2018

Figure 2: Steps of web publishing.

Website publishing is a process of publishing original content by uploading associated pages, videos,
content and so on, on the internet. Website can be of various purpose like personal, business, e-
commerce and so on. Without publishing a website it cannot be accessed. Before publishing website
it must contain some content because if website is published and if it doesn’t have any content then it
is just lost of money because for publishing website we must take some space in the server. For
publishing a website a publisher must need three things and they are:

 Website development software


 Internet connection
 Server to host website

Before publishing website we need website development tools like WordPress, Dreamweaver etc.
WordPress is a content management system and easiest way to make a website. We can make
website by using HTML codes also but for that we need to know various HTML codes and it is
difficult to make website using HTML codes. We need to choose by which software we want to
make website and after making website we need internet connection so as to host the website. Only
having internet connection is not sufficient for publishing website. For publishing website we need to
have 24X7 internet connection and we need to have backup of the system so that we can get various
companies which host our website. We need to upload our content in the server by providing domain

Adarsh Baral (HND / Second Semester)


9
Website Design and Development 2018

name (www.nepal.com) for hosting our website. After uploading our content then website is fully
published.

After publishing a website we can access it by using its domain name. For example while publishing
website we use domain name and that domain name is entered into the URL path and website is
accessed.

Relation between communication protocol, server hardware operating system and web server
software
The relationship between communication protocols, server hardware, operating system and web
server software are a complicated set of functionalities and exchange of information. All these
components have important roles so that can user can access and utilize the services on the internet.
All these components are essential for websites designing, publishing and accessing.

Using different applications and software websites are designed and published. For publishing the
websites hosting is important and for hosting the web server is necessary. The web server hardware
stores the website data and delivers it to site visitors when they request it by clicking on the website.
The web server hardware acts as datacenters that stores website's data, such as HTML text, images,
CSS stylesheets, and JavaScript files connecting to the internet and supports the exchange of data
between devices connected to the internet, such as user computer[ CITATION Bre17 \l 1033 ]. The
web server software such as FTP allows for the uploading of files and the protocol, HTTP is
responsible for sending website files to site visitors. The OS is responsible for running the web
servers. The cooperation of all these components only help in successful designing, publishing and
accessing of the web sites.

The communication protocols are used to communicate with web server hardware and software. The
web server hardware and software fulfill the users request and store the information users provide.
The OS allows different web server software and hardware to communicate and interact in order to
process the requests or commands of the users. Thus, desired results can only be achieved with the
cooperation of all these components.

Managing secure websites


Only publishing our website is not secure. We need to maintain security in our website. Managing
Secure Website means securing our website from various hackers, and other security risk after
launching. If our website is not secure than cybercrime impact our business by hacking our websites.
Some of the ways for securing websites are discussed below.

Adarsh Baral (HND / Second Semester)


10
Website Design and Development 2018

 Update software: Updating software is applicable in both Operating system as well as


Website. Various holes are found on software that we use for making website. Because of
this holes hackers can enter into our website and misuse them so that we need to check for
frequent updates. If we are using various CMS like WordPress, Umbraco and so on then it
notifies when updates are available and we need to do updates so as to secure our site.
 SQL Injection: It is easy to insert rogue code into our database. Various rogue codes are
inserted frequently so that the query can be changed in database and because of this hackers
can easily insert into our sites. Because of hitting same code several times our data’s may be
deleted so we need to prevent this by using parameterized queries. This is easy to implement.
 Passwords: We need to login in our website and for different users various logins are made.
Admin has got different login panel. All of this are secured by password but only inputting
password will not be secure. While putting password we need to be careful and put password
combining of special character, letters, and numbers and so on. it must be stored in encrypted
form. If small password like only of four characters are kept then there is high chance of
cracking our password so that we have to put long password minimum of eight character that
contain all letter, numbers and so on. Not only this, it is preferable to change password
timely.
 Use HTTPS: HTTPS is one of the protocol and it provides security over the internet. HTTP
is not secured and hackers can easily hack. A login form will often set a cookie for example,
which is sent with every other request to your site that a logged-in user makes, and is used to
authenticate those requests. An attacker stealing this would be able to perfectly imitate a user
and take over their login session. To defeat these kind of attacks, you almost always want to
use HTTPS for your entire site.

Search engine indexing and ranking


There are various website that provide same information. Search Engine Indexing collects data and
store it. For e.g.: we make one website of college named as www.college.com and it is published
then Google start to collect data’s that are available in our website. It has got web program called
spider and it crawl all over our website and collect information and store it in Google. Now when we
search any relevant things in Google related to college or our site then it automatically shows things
related to college and our sites. In this way search engine indexing works. Search Engine Ranking
is the position where a particular site appears. For e.g.: at first while we make our site it does not
appear at the top of the Google while searching. Many people search site and there are many site that
provide same information. We need to bring out site on top so that we can attract more

Adarsh Baral (HND / Second Semester)


11
Website Design and Development 2018

visitors.Search engine ranking is influenced by a multitude of factors including age of site, the
quality of a site’s link portfolio, relevancy of the page, social signals and level of competition,
among others[ CITATION Bri18 \l 1033 ].

Improvement of search engine ranking through SEO


Search Engine Optimization refers to set of activities that are performed to increase number of
desirable visitors who come to your site via search engine[ CITATION Tut167 \l 1033 ]. Activities
for making the websites more friendly and effective are involved in it.Making changes to text and
HTML code, formatting text or document to communicate directly to the search engine.

Effective SEO influences the relevance and importance of the web pages for the related queries that
improve the indexing and ranking. The relevance and importance of any web pages are described
below:

 Relevance
With the use of effective SEO techniques and tools, the intent of the searcher can be figured
out easily and contents of the pages can be changed or improved accordingly. This helps to
attract the large number of visitors to the pages easily and it helps in improvement of the page
ranking.
 Importance
Web pages are considered more important. With the help of effective SEO, various factors
that come into play for enhancing the web pages contents can be identified and applied easily
that attract the visitors utilizing the contents of the web pages.

Conclusion
Different DNS system are known. It converts IP to name and name to IP. Different organization like
ICANN, IANA etc. are responsible for managing domain names. There is an intricate and mutual
relationship among communication protocols, web server hardware, web server software and OS. By
the help of SEO it can influence in the website ranking and indexing. With the use of integrated
database system, the capabilities of websites can be extended and various benefits can be explored.

Part 2
1. Discuss the capabilities and relationships between front-end and back-end website
technologies and explain how these relate to presentation and application layer.

Adarsh Baral (HND / Second Semester)


12
Website Design and Development 2018

The discussion on the front end technologies may include HTML, HTML5, CSS, CSS3, SASS;
JavaScript based frameworks like Angular JS, Knockout JS, and React JS and so on. The back end
technology may include PHP with MySQL, Asp.net with C# and Sql Server /Oracle /Access, Ruby
on Rails and ColdFusion and so on or as advised by the tutors.

2. 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).

These days there are so many online website design sites like wix.com, blogger.com and so on. You
may produce an appropriate documentation that outlines the necessary stuffs as required for the
completion of this task.

Front End Developer


It is a part of website where user interacts with. After opening any website then we can see various
stuffs like navigation bar, color, fonts and so on all this which we see on our screen is front end.
Front end developer must know mainly three languages i.e. HTLM, CSS and JavaScript. By using
this languages they are responsible for a website architecture of its immersive user experiences.
Though this are main languages front end developer must be familiar with other frameworks like
Bootstrap, AngularJS, Foundation and so on.

Front end technologies are related with presentation layer. It is the 6 th layer of OSI model. In
presentation layer data are mainly transmitted between application layer and the network format. As
presentation layer is responsible for effective and efficient communication in front-end also the
communication must be efficient and effective so that it is related with front-end developer. All the
data’s that are seen by the user is possible due to presentation layer. All the images, text and so on. It
is also sometimes called as syntax layer and is responsible for the following:

 Data encryption/decryption
 Character/string conversion
 Data compression
 Graphic handling

Some of the common front end technologies used are:

Adarsh Baral (HND / Second Semester)


13
Website Design and Development 2018

 HTML
HTML (Hyper Text Markup Language) is a backbone of website development. The hypertext
involves the text that has link and hyperlinks embedded in it. Similarly, the markup language
indicates that text can be converted into images, tables, links and representations. Thus,
HTML code provides an overall framework of how the site will look[ CITATION Uda14 \l
1033 ].
 CSS
Cascading Style Sheet (CSS) is a language that is used to describe various styles of an HTML
document. Various changes are made and it represent how HTML element must be displayed.
 JavaScript
It spans framework, task runners, server-side development and more[ CITATION CAR18 \l
1033 ]. It can be used to manipulate the web page in response to events. It can also retrieve
content from the web and provide true dynamic nature to the web page.

Back End Developer


We see various data’s i.e. images, videos and so on in a website i.e. in a front end. Where all this
data are stored? What makes a website possible? This comes on the back end. Back end consist of
database, server and an application. A back-end developer builds and maintains the technology that
powers those components which, together, enable the user-facing side of the website to even exist in
the first place. There must be communication between front end and back end. For communicating
with server, application and database we use back end server side languages like, PHP, Ruby,
Python, Java etc.Net to build an application and tools like MySQL, Oracle and SQL server so as to
find, save or change any data. Some of the commonly used back end technologies are:

 PHP
PHP is a server scripting language, and a powerful tool for making dynamic and interactive
Web pages[ CITATION W3s16 \l 1033 ]. HTML, CSS, JavaScript and PHP code are
contained in it which can generate dynamic page content. It support almost all ranges of
database and is compatible with mostly all the servers.
 SQL Server
Structured Query Language (SQL) is a relational database management system that is used
for storing, editing and deleting data in database. It is used for executing various queries
against a database and retrieving essential data.

Adarsh Baral (HND / Second Semester)


14
Website Design and Development 2018

Application layer is the 7th layer in the OSI model. It focus on process-to-process communication
across IP network. End user application are related in this layer so that it is related to back-end
developer. Server side programming, application etc.are related in this application layer. It provides
many services including

 Simple Mail transfer Protocol


 File Transfer
 Web chat
 Email Clients
 Network Data Sharing etc.

Relationship between front end and back end technologies


The front end explains how the browser need to communicate with the server. The back-end sets up a
series of functions, and the front-end expects them to be there and work correctly[ CITATION
Ale161 \l 1033 ]. For any websites to function smoothly and perform the desired operations that
produces desired output, both front end and back end technologies must work coordinately. Without
front end and backend technologies it is not possible to perform smoothly. Browser helps for
connecting a server. That server provides front end to the browser and users can view different
layout and functions.

Difference between online website creation tools and custom built sites
S.N Online Website Creation Tools Custom Built Sites
.

Adarsh Baral (HND / Second Semester)


15
Website Design and Development 2018

1. We are limited in graphics designing We can make design according to our wish.
and navigation capability.
2. As tools template are used our site canAs tools template are not used site will be different
be similar to another site. than other.
3. As most of the coding is done it is fast
As all coding should be done manually it is slower
to implement. to implement.
4. Functionality can be limited. As all coding are done by our self, functionality is
not limited.
5. As we are using tools given by other We can maintain security as our wish.
there can be security problem.
6. It is cheaper than custom built sites. It is expensive than websites made from website
creation tools.
6. For e.g.: WordPress, wix.com etc.

Conclusion
Both front end and back technologies must work collectively for the smooth operation of the
websites. The use of HTML, CSS and JavaScript as the front end tools and PHP and MySQL as back
end tools have been recommended for the development of the websites. Wide range of the back end
technologies are available to store the records and interact with the front-end part. Though the tools
perform different functions, they must operative collaboratively in order to produce the desired
results.

Adarsh Baral (HND / Second Semester)


16
Website Design and Development 2018

Part: 3
1. Create a design document for a branded, multipage website with medium fidelity
wireframes and full set of client and user requirements. In order to complete this task
you can use any graphics designing tools to design the wireframe for your website and
you must present the screenshots of your design.

2. Use your design document with appropriate principles, standards and guidelines to
produce a branded, multipage website supported with realistic content.
This task is referenced to the previous task where you have successfully designed the
wireframe for your website. Using any suitable web programming language you are
required to develop a complete website. The evidence for this task must be reproduced
as guided by your tutor.

Introduction
Web-solution Technologies is one of the leading company in Web Hosting and domain registration
since 2007. It has got its motto i.e. quality service in affordable cost. As this company has got its
own 2 dedicated server in USA and use its specialist in all of its field it is found to be one of the most
reliable and cheapest company. Not only its own dedicated server but also it has got its own Domain
reseller panel and it also works with top companies in USA.

Now the company is planning to extend its service in web design and development. As it is one of
the leading company andas it plans to extend its service a recently opened hospital i.e. Dirghayu
Hospital which is located in chabahil wants to make its website from web-solution technologies.
Hospital is providing quality service to the patients and now the hospital is going to make website so
as to keep records of visited patients.

Various details like patient’s Name, Age, Address, Number, Phone, Problems and so on are to be
recorded. All this details want to be recorded and by recording all this hospital wants to increase
effectiveness in its service. As a part of the web development currently hospital user is only allowed
to create users for hospital and they can enter records of visited patient. Not only keeping records but
also user is able to edit all the details they have made.

In this task I am going to make a design of Hospital site where all the above mentioned details are
included along with its validation. As I have been employed as a “Web Developer” I am going to
make website according to the requirement of the Hospital and meet the goal of the hospital.

Adarsh Baral (HND / Second Semester)


17
Website Design and Development 2018

As hospital has become the essential part of human lives, it have to provide good facilities to their
customer. It has to keep the records of day to day activities as well as records of patient, doctors,
nurse etc. Keeping records in paper is not easy as well as it takes a lot of time and sometime it may
be lost. It is also insufficient and a time-consuming process. Because of the continuous increase in
the number of patient Hospital is going to make its website for keeping the records. The main aim of
the project is to keep the record of the patient currently by maintaining security of the data.

Objective of the system


The main purpose of this project is to keep day-to-day record of patient who visited the hospital for
different purpose, and also to store doctor and other staffs details. It is design to achieve the
following objectives:

 To computerize all details related to patient and doctor.


 In the computerized system user is able to add, delete, edit or update the patient details.
 User is able to view all patient details.

Hardware Interfaces
Processor: Dual core or above

RAM: 1 GB or above

Hard Disk: 40GB or above

Input Devices: Mouse, keyboard

Output Devices: VGA Monitor

Software Interfaces
OPERATING SYSTEM: XP, 7, 8, 10 and all other OS

FRONT END: All Browsers

BACK END: MySQL Database

Wireframe
Wireframe is a graphical layout which helps in placement of keys, menus, element, features etc. It
helps in designing of website before development. It is similar to the blueprint of house where
structure of website is mainly focused. Some of the advantages are:

Adarsh Baral (HND / Second Semester)


18
Website Design and Development 2018

 Wireframe helps in making the process of the design more interactive and iterative with
providing the feedback earlier in the process[ CITATION Nic16 \l 1033 ].
 It helps in making clarification of the features that are used in the website and helps in
making the client communicate with the project.
 It helps in making design more calculated, development team will understand what you are
building, content creation is much easier, avoids hacks on the later process etc.
 Wireframe helps the developers to push the usability to display the page layout at their core.

Wireframe of Homepage

Figure 3: Homepage Wireframe

At first page there appears homepage containing some information about Hospital. It also contains
various menus but currently only Home and Login are available as shown in the above figure. At top
hospital name is displayed with marquee property as well as various images are placed after menus
portion. In another section notice is displayed along with marquee property and below that section
content is placed. At the footer section logo of hospital is placed with contact number and email of
hospital.

Adarsh Baral (HND / Second Semester)


19
Website Design and Development 2018

Wireframe of Login Page

Figure 4: Wireframe of Login Page.

Login button is available in right side of the home page and while pressing login button a new page
appears asking username and password as shown in the figure. If we are not authorized then we don’t
have any username and password and we cannot login to out dashboard so that at first we need to be
registered. For registering we need to contact to the administrator. After getting username and
password we can login to our dashboard. If we don’t want to login and return back to the homepage
cancel button is available. Sometimes we may forgot out password and at that time for resolving it
forgot password option is available at the buttom of the login form.

Wireframe of Information Page

Adarsh Baral (HND / Second Semester)


20
Website Design and Development 2018

Figure 5: Wireframe of Information Page.

We can see all the details of clients who are registered in our hospital. After seeing all details we can
either update patient information or delete patient information as well as we can register for new
users. Same patient can have various problems or his/her information may be incorrect so that user
can again edit their information once he/she is already registered into the database.

Wireframe of Register Page

Adarsh Baral (HND / Second Semester)


21
Website Design and Development 2018

Figure 6: Wireframe of Register Page

After patient visit hospital with their problems we can register patient and wireframe of registration
page is shown in the above figure. Various details of user like name, address, age, gender etc. are
required for registering the user. If user doesn’t want to register i.e. does not want to check up then
cancel button is available for returning to the information page.

Suitable programming language used for developing website


After making wireframe the website of Dirghayu Hospital was made accordingly using various
programming languages like HTML, CSS, JavaScript, PHP etc. Structure of webpage was described
by HTML. CSS acts as the stylist that provided style and controlled the presentation aspect of the
site. JavaScript helped to program the behavior of the web pages and manipulate the web page in
response to events. JavaScript retrieved content from the web and provided true dynamic nature to
the web pages. All the pages and their content, buttons, forms etc. are designed and developed using
all this languages. All this are used as a frontend technologies.

Adarsh Baral (HND / Second Semester)


22
Website Design and Development 2018

As all the datas must be stored in database. PHP and MySQL are used as backend technologies so as
to communicate with database and store all the datas entered. Not only saving data but it also
communicates database information to the browser. It help in adding, deleting, modifying data in
database. It is compatible with MY SQL server that help to store data. Whenever, the client used the
login panel to provide a validate username and password, they are stored in MY SQL.

Some of the function of these codes with it is language are shown below

 HTML
It is the backbone of the website that presents how the website will look and how the contents
are presented. For instance, with the help of h1 element, the heading ‘Welcome to Dirghayu
Hospital’ is displayed which is presented in code below:

Figure 7: HTML code.

 CSS
Cascade Style Sheet (CSS) helps in providing different styles and formats to the website.
With the help of CSS we have set submit button color to green and cancel button to red in
login page. The code of CSS is shown below.

Adarsh Baral (HND / Second Semester)


23
Website Design and Development 2018

Figure 8: CSS code.

 JavaScript
We need to do proper validation i.e. proper behavior must be maintained in website and it is
done by JavaScript. Various JS conditions are used to develop the websites. The operations
cannot be performed until the JS conditions are properly fulfilled. Below is a JS code that is
used while making the website.

Adarsh Baral (HND / Second Semester)


24
Website Design and Development 2018

Figure 9: JavaScript code.

 PHP
PHP is the server side scripting language that makes the web pages dynamic and interactive.
Various functions, data types, variables, conditional statements, syntax etc. are used to design
the website. PHP codes that is used while developing the website of the hospital is shown
below:

Figure 10: PHP code

 MySQL
Various data entered are stored and retrieved with the help of MySQL. A connection is setup
between front end and back end by using proper code. After this data entered by user are

Adarsh Baral (HND / Second Semester)


25
Website Design and Development 2018

saved into database (MySQL). Code format of MySQL used in making website is shown
below.

Figure 11: MySQL code.

Conclusion
Using appropriate technologies and tools a fully functional website of Dirghayu hospital was
developed. Different programming languages like PHP, JavaScript, HTML etc. were used. CSS was
used to provide style and MySQL server was used to store, edit and delete data. The wireframes of
different pages involved were designed. The design and development process were critically
evaluated and development time scale was formed for designing the website of the hospital in
deadline addressing all the requirements of the clients.

Adarsh Baral (HND / Second Semester)


26
Website Design and Development 2018

Part 4
1. Create a suitable Test Plan identifying key performance area and use it to review the
functionality and performance of your website.
In order to complete this task you are required to prepare a log sheet that highlights
what was tested, the expected output, and the actual output, evidence against the test
which would suitably a screenshot of the test operation and remarks against your test.

Introduction
After making any software we need to test whether it is functioning properly or not. Software testing
is the important part of the software. A test plan is simple a documentation that describe software
testing scope and activities. Test plan identifies various test items, features to be tested, testing tasks
and so on.

In this task I am going to test website and find out whether it is functioning properly or not.

Testing of website
S.N. What was Expected Actual Evidence
tested Output Output
1. Opening of While Dirghayu
home page. entering Hospital
localhost/php site was
hms site must opened.
be opened.

2. Clicking on After clicking Login


Login on Login form in
option option new new page
page must be was
opened and displayed.
login form
must be
displayed.

Adarsh Baral (HND / Second Semester)


27
Website Design and Development 2018

3. Clicking on After clicking Message


submit on submit was
leaving leaving displayed
username username and saying
and password Please fill
password empty out this
empty. message must field.
be displayed.

4. Clicking on After clicking Message


submit on submit was
leaving leaving displayed
password password saying
empty. empty Please fill
message must out this
be displayed. field.

5. Inputting After entering Message


wrong wrong was
username or password or displayed
password username saying
message must Invalid
be displayed. Username
or
Password.
6. Inputting After entering New page
right right containin
username username or g details
and password a was
password new page displayed.
containing
details must
be displayed.

Adarsh Baral (HND / Second Semester)


28
Website Design and Development 2018

7. Clicking on After clicking Detail of


edit / update on edit detail patient
of patient was
must be displayed
displayed in in the
below column column
and update and was
must update updated
data’s successful
successfully ly.

8. Clicking on After clicking Selected


Delete on delete details of
selected patient
patient details were
must be deleted.
deleted.

9. Clicking on After clicking New page


click for on click for containin
registration registration a g form
new page was
must be displayed.
appeared.

Adarsh Baral (HND / Second Semester)


29
Website Design and Development 2018

10. Leaving all A popup must Pop up


fields be displayed. was
empty. displayed
saying
please
enter all
details.
11. Leaving A popup must Popup
some of the be displayed. was
fields displayed
empty. reminding
the first
missing
field.

12 Clicking on After clicking All details


register on register a with
filling all page must be newly
details. displayed registered
showing all details
details with was
newly displayed.
registered
details.
13. Clicking on Homepage Homepag
Logout must be e was
displayed displayed.

Adarsh Baral (HND / Second Semester)


30
Website Design and Development 2018

Conclusion
As hospital is making its website for keeping the records of the patient it is a great improvement of
hospital over the manual system. Because of the computerization of the system it has speed up the
process. Currently as all the data and information are recorded in papers the front office managing
was very slow and after completing the project system was checked thoroughly by inputting the
rough data’s and it was found that to be reliable as well as fast. Software takes care of all the patients
who visited hospital for their various problems. It is capable of storing information securely.

Adarsh Baral (HND / Second Semester)


31
Website Design and Development 2018

References
Barron, B., 2017. relationship of web server componnets in websites activities. [Online]
Available at: https://www.whoishostingthis.com
[Accessed 3 november 2018].

Brick Marketing, n.d. search engine ranking. [Online]


Available at: https://www.brickmarketing.com
[Accessed 3 november 2018].

GeoViz, 2014. web framework. [Online]


Available at: https://www.vizteams.com
[Accessed 3 november 2018].

Haas, N., 2016. what is wireframe?. [Online]


Available at: https://www.orbitmedia.com//7-reasons-to-wireframe/
[Accessed 12 November 2018].

Havy, 2017. Form Validation. [Online]


Available at: https://developer.mozilla.org
[Accessed 12 november 2018].

Menke, A., 2016. relationship of front end and back end technologies. [Online]
Available at: https://www.quora.com
[Accessed 4 november 2018].

N.D, N.D. NS1. [Online]


Available at: https://ns1.com/resources/dns-types-records-servers-and-queries
[Accessed 25 October 2018].

Network Solution, 2014. Web design. [Online]


Available at: http://www.networksolutions.com
[Accessed 12 november 2018].

Rouse, M., N.D.. SearchSoftwareQuality. [Online]


Available at: https://searchsoftwarequality.techtarget.com/definition/quality-assurance
[Accessed 12 November 2018].

Adarsh Baral (HND / Second Semester)


32
Website Design and Development 2018

Scholz, C., 2013. custom website. [Online]


Available at: https://www.forbes.com
[Accessed 11 november 2018].

Subbaiah, V., 2015. planning. [Online]


Available at: https://www.asahitechnologies.com
[Accessed 12 november 2018].

Thompson, G., 2015. Unleashed Technologies. [Online]


Available at: https://www.unleashed-technologies.com/blog/2015/04/30/what-quality-assurance-web
[Accessed 12 November 2018].

Ulrich, R., N D. Atilus. [Online]


Available at: https://www.atilus.com/templates-vs-custom-built-websites/
[Accessed 30 October 2018].

W3 school, 2016. php. [Online]


Available at: https://www.w3schools.com
[Accessed 4 november 2018].

Adarsh Baral (HND / Second Semester)


33

You might also like