Bakeer-Ahamed-COL-00082284 - WEB Design & Development
Bakeer-Ahamed-COL-00082284 - WEB Design & Development
• Identifying opportunities Y/
for improved performance?
N
• Agreeing actions?
Y/
N
Y/
N
LO3. Utilise website technologies, tools and techniques with good design principles to create a
multipage website.
Pass, Merit & P5 P6 M4 D2
Distinction Descripts
LO4. Create and use a Test Plan to review the performance and design of a multipage website.
Pass, Merit & P7 M5 D3
Distinction Descripts
Action Plan
Summative feedback
Pearson
Higher Nationals in
Computing
Unit 10: Web Design and Development
Assignment 01
General Guidelines
1. A Cover page or title page – You should always attach a title page to your assignment. Use previous
page as your cover sheet and make sure all the details are accurately filled.
2. Attach this brief as the first section of your assignment.
3. All the assignments should be prepared using a word processing software.
4. All the assignments should be printed on A4 sized papers. Use single side printing.
5. Allow 1” for top, bottom , right margins and 1.25” for the left margin of each page.
1. The font size should be 12 point, and should be in the style of Time New Roman.
2. Use 1.5 line spacing. Left justify all paragraphs.
3. Ensure that all the headings are consistent in terms of the font size and font style.
4. Use footer function in the word processor to insert Your Name, Subject, Assignment No, and
Page Number on each page. This is useful if individual sheets become detached for any reason.
5. Use word processing application spell check and grammar check function to help editing your
assignment.
Important Points:
1. It is strictly prohibited to use textboxes to add texts in the assignments, except for the compulsory
information. eg: Figures, tables of comparison etc. Adding text boxes in the body except for the before
mentioned compulsory information will result in rejection of your work.
2. Carefully check the hand in date and the instructions given in the assignment. Late submissions will
not be accepted.
3. Ensure that you give yourself enough time to complete the assignment by the due date.
4. Excuses of any nature will not be accepted for failure to hand in the work on time.
5. You must take responsibility for managing your own time effectively.
6. 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.
7. Failure to achieve at least PASS criteria will result in a REFERRAL grade .
8. Non-submission of work without valid reasons will lead to an automatic RE FERRAL. You will then
be asked to complete an alternative assignment.
9. If you use other people’s work or ideas in your assignment, reference them properly using HARVARD
referencing system to avoid plagiarism. You have to provide both in-text citation and a reference list.
10. If you are proven to be guilty of plagiarism or any academic misconduct, your grade could be
reduced to A REFERRAL or at worst you could be expelled from the course.
11. If you are proven to be guilty of plagiarism or any academic misconduct, your grade could be
reduced to A REFERRAL or at worst you could be expelled 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.
e126387@esoft.academy
Student’s Signature: Date:27/07/2023
(Provide E-mail ID) (Provide Submission Date)
Assignment Brief
Student Name /ID Number
Unit Number and Title Unit 10- Web Design and Development
Unit Tutor
Issue Date
Submission Date
Submission Format:
Part 1.
Report- Submit a professional report with approepriate report formattimg and guidelines followed. All the
research data should be referenced along with in-text citations using Hrvard referencing syste.
Part 2
A fully functional web solution
LO1 Explain server technologies and management services associated with hosting and managing
websites.
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.
LO4 Create and use a Test Plan to review the performance and design of a multipage website.
Assignment Brief and Guidance:
Assignment Brief
Scenario.
‘Apex Design Works’ is a leading web design and marketing company. They are focusing on helping
businesses communicate more effectively and build their business through a creative design. Assume that,
you work as an apprentice web developer for Apex Web Design and marketing company. As part of your
role, you have been asked to create a Website for the following organization .
Arogya Health Care hospital currently uses a manual system for the management and maintenance
of critical information. The current system requires numerous paper forms, with data stores spread
throughout the hospital management infrastructure. Often information (on forms) is incomplete, or
does not follow management standards. Multiple copies of the same information exist in the hospital
and may lead to inconsistencies in data in various data stores. There are number of documents to be
maintained in the Health Care hospital and this information typically involves; patient personal
information and medical history, staff information, room and ward scheduling, staff scheduling,
operating theater scheduling and various facilities waiting lists. All of this information must be
managed in an efficient and cost wise fashion so that the resources can be managed effectively. The
reception module handles various inquiries about the patient's admission and discharge details, and
the patient's movements within the hospital.
Assume that you are the web developer hired by the Health Care Hospital, to propose, and engineer
a low cost but yet powerful and complete Hospital Management System (HMS) for the scenario
given above. Suggest and implement important functionalities and features to the system by
identifying system functionalities.
Develop a web based solution for the above scenario and produce a report covering the following
tasks.
Task 1 - Server technologies and management services associated with hosting and managing websites
(LO1)
1.1 Explain and differentiate the different web technologies such as communication protocols, server
hardware, operating systems and web server software with regards to designing, publishing and
accessing the Hospital Management System (HMS).
1.2 Identifry and define the types of DNS and the uses of it, with clarifications on how domain names are
structured. Review the effect of search engines on website performance. Provide evidence-based
support for improving a site’s index value and rank of the Hospital Management System (HMS)
through search engine optimization.
1.3 Identify and explain the common web development technologies and frameworks. Explain the tools
and techniques chosen to develop the above web application and justify your choice by providing
valid evidences.
Task 2 - Categories website technologies, tools and software used to develop websites (LO2)
2.1 Considering the requirments given in the above scenario define the relationships between front-end
and back-end website technologies and discuss how the front-end and the back-end relate to
presentation and application layers.
2.2 Discuss the differences between online website creation tools and custom-built web sites by
considering the
design flexibility, performance, functionality, User Experience (UX) and User Interface (UI).
Evaluate the tools and techniques available to design the web application gicven in the scenario.
.
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 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. Provide evidences of the design,
multipage website supported with fidelity wireframes and a full set of client and user requirements.
3.2 Compare and contrast the multipage website created to the design document. Use your design
document with appropriate principles, standards and guidelines to produce a branded, multipage
website supported with realistic content and Critically evaluate the web design ,development process
against your design document analyisng any technical challenges you faced during the development.
Note - Synthesize client and the server-side functionalities in the proposed design.
Task 4 - Create and use a Test Plan to review the performance and design of a multipage website
(LO4)
4.1 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). Evaluate the Quality Assurance (QA)
process and review how it was implemented during your design and development stages.
4.2 Create a suitable test plan for the developed system and critically evaluate the results of your Test
Plan . 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
improvements.
Grading Rubric
Comments:
Task 1 - Server Technologies and Management Services for Hosting and Managing the
Hospital Management System (HMS)
1.1 Explain and differentiate the different web technologies such as communication protocols,
server hardware, operating systems, and web server software with regards to designing,
publishing, and accessing the Hospital Management System (HMS).
Communication Protocols:
A set of formal guidelines outlining how to send or exchange data, particularly across a network, is
known as a communications protocol. A communications protocol that has been standardized is one
that has been codified as a standard. Below are some of web communication protocol used:
People who use the aforementioned communication protocols can access the internet and websites
safely. Those significant protocols are briefly explained in the section that follows.
The World Wide Web was built on the Hypertext Transfer Protocol (HTTP), which is used
to load webpages with hypertext links. Running on top of other layers of the network
protocol stack, HTTP is an application layer protocol created to transport data between
7 WDD Bakeer Ahamed
networked devices. A client machine makes a request to a server, which then sends a
response message, in a normal HTTP flow (CloudFlare, 2023).
The basic protocol used to transmit data between a web browser and a website is HTTP,
while HTTPS is the secure version of HTTP. To strengthen the security of data transport,
HTTPS is encrypted. This is crucial when customers register into a bank account, email
account, or health insurance provider and transfer sensitive data (CloudFlare, 2023).
Similar to HTTP, WebSocket begins with ws:// or wss:// and is a bidirectional, full-duplex
protocol used in the same client-server communication context. Because it is a stateful
protocol, the connection between the client and the server will remain active until one of the
parties (the client or the server) decides to cut it off. The connection is cut off from both
ends after being closed by either the client or the server.
8 WDD Bakeer Ahamed
Let's use client-server communication as an example. There is a client, which in this case is
a web browser, and a server. Whenever we initiate a connection between client and server,
the client-server made the decision to establish a new connection, and this connection will
remain active until it is terminated by either of them. As long as the connection is active and
established, communication occurs via the same connection channel.
After a client-server handshake, the client-server will choose a new connection to maintain
the previous one; this new connection will be referred to as a WebSocket. As soon as the
connection and communication link are established, message exchange will occur in a
bidirectional mode till the client-server connection remains stable. The connection is cut off
by both parties in the event that one of them (client-server) passes away or decides to do so.
The status code 101 indicates the switching protocol of WebSocket, which differs slightly
from how HTTP operates (geekforgeeks, 2023).
Server Hardware:
The actual devices that house and store the data for the web application are referred to as the server
hardware. Performance, scalability, and dependability should all be aspects taken into account while
choosing server hardware. Among its crucial elements are:
• Central Processing Unit (CPU)
• Random Access Memory (RAM)
• Solid State Drives (SSD) or Hard Disk Drives (HDD)
The central element of a computer, or CPU, serves as its "control center." The CPU,
sometimes known as the "central" or "main" processor, is a sophisticated collection of
electronic circuitry that manages the device's software and operating system. The device's
10 WDD Bakeer Ahamed
hardware and software programs are most frequently where the CPU receives, processes,
and executes instructions.
Arithmetic, logic, and other operations are carried out by the CPU to convert data input into
more useful information output. Although the CPU must have a minimum of one processing
core, many have more. For instance, a server with two hexa-core CPUs has a total of 12
processors (arm, 2023).
The hardware in a computing device called RAM (Random Access Memory) stores the
operating system (OS), application programs, and data that are currently in use so that the
processor of the device can access them rapidly. The primary memory of a computer is
RAM. Compared to other forms of storage like a hard disk drive (HDD), solid-state drive
(SSD), or optical drive, it is much faster to read from and write to.
Volatile random access memory. This means that information is kept in RAM while the
computer is running, but it is erased when the machine is powered off. The operating system
and other files are frequently loaded from an HDD or SSD into RAM when the computer is
restarted (TechTarget, 2023).
A form of storage device used in computers is called a solid-state drive, or SSD. Solid-state
flash memory is used to store persistent data on this non-volatile storage medium. SSDs take
the role of conventional hard disk drives (HDDs) in computers and carry out all of a hard
drive's fundamental tasks. However, SSDs are noticeably quicker in contrast. With an SSD,
the operating system of the device will boot up faster, programs will load more quickly, and
files can be saved more quickly.
A read/write head mounted on a spinning disk and an actuator, or mechanical arm, make up
a conventional hard drive. Data is read and written magnetically by an HDD. But
mechanical failures may result from the magnetic characteristics.
An SSD, in contrast, has no moving bits that could malfunction or spin up and down. The
flash controller and NAND flash memory chips are the two essential parts of an SSD. High
read/write performance is provided by this arrangement for both sequential and ad-hoc data
requests (TechTarget, 2023).
An operating system (OS) is the program that controls all other application programs in a computer
after being installed into the system first by a boot program. Through a predefined application
program interface (API), the application programs use the operating system to request services.
Additionally, through a user interface like a command-line interface (CLI) or graphical user
interface (GUI), users can communicate directly with the operating system (TechTarget, 2023).
The choice of operating system for the server should be based on compatibility and security.
Common choices for web servers include:
• Linux
• Windows Server
1.1.8 Linux
Linux is an operating system, just like Windows, iOS, and Mac OS. In truth, Linux is the
operating system that runs one of the world's most widely used platforms, Android. A
desktop or laptop's operating system is a piece of software that controls all of the hardware
resources connected to it. Simply explained, the operating system controls how your
software and hardware communicate with one another. The operating system (OS) is
necessary for the software to run.
Development for Windows Server started in the early 1980s when Microsoft produced two
operating system lines: MS-DOS and Windows NT. Microsoft engineer David Cutler
developed the kernel of Windows NT with the intent to provide speed, security and
reliability that large organizations require in a server operating system (TechTarget, 2023).
A web server is software and hardware that uses HTTP (Hypertext Transfer Protocol) and other
protocols to respond to client requests made over the World Wide Web. The main job of a web
server is to display website content through storing, processing and delivering webpages to users.
Apache is the most widely used webserver software and runs on 67% of all websites in the
world. Developed and maintained by Apache Software Foundation, Apache is open source
software and available for free.
It’s fast, reliable, and secure. And Apache can be highly customized to meet the needs of
many different environments by using extensions and modules (wpbeginner, 2023).
• Nginx
NGINX is open source software for web serving, reverse proxying, caching, load balancing,
media streaming, and more. It started out as a web server designed for maximum
performance and stability. In addition to its HTTP server capabilities, NGINX can also
function as a proxy server for email (IMAP, POP3, and SMTP) and a reverse proxy and load
balancer for HTTP, TCP, and UDP servers (nginx.com, 2023).
DNS translates human-readable domain names into IP addresses, enabling users to access
websites using easy-to-remember domain names. Types of DNS include:
• Recursive DNS
• Authoritative DNS
Recursive DNS
In a recursive DNS lookup, one DNS server interacts with a number of additional DNS servers
to locate an IP address and provide it to the client. Contrast this with an iterative DNS query,
when the client speaks with each DNS server participating in the lookup directly. Although this
is a pretty technical description, it should become clearer after looking more closely at the DNS
system and the distinction between recursion and iteration (CloudFlare, 2023).
Authoritative DNS
Authoritative DNS is the system that takes an address, like google.com, and provides an answer
about the resources in that zone.
A domain name is structured hierarchically from right to left, with the top-level domain (TLD)
being on the right, followed by the second-level domain (SLD), and any subdomains to the left.
To improve the index value and rank of the Hospital Management System (HMS), the following
evidence-based SEO strategies can be employed:
• Keyword Research:
Find appropriate terms that relate to healthcare, hospital administration, and particular HMS
services.
• On-Page Optimization:
Use targeted keywords to improve the page names, meta descriptions, headings, and content.
• Quality Content:
Offer enlightening and useful content that responds to user inquiries and requirements.
• Backlinks:
Obtain renowned healthcare websites' and directories' high-quality backlinks.
• Mobile Optimization:
A mobile-friendly and completely responsive HMS website is a must.
1.3 Identify and explain the common web development technologies and frameworks. Explain
the tools and techniques chosen to develop the above web application and justify your choice
by providing valid evidence.
Hypertext Markup Language, or HTML. With the aid of a markup language, it is used to design
web pages. Markup language and hypertext are combined to create HTML. The link between web
pages is defined by hypertext. The text document inside the tag that specifies the structure of web
pages is defined using a markup language. This language is used to annotate (add notes to) material
so that a computer can comprehend it and modify the content as necessary. Most markup languages,
like HTML, can be read by people. The language employs tags to specify what text processing is
required.
1.3.3 JavaScript
JavaScript, commonly referred to as the scripting language for websites, is a simple, single-
threaded, interpreted, and cross-platform computer language. Many non-browser environments also
use it, and it is well recognized for web page creation. JavaScript is a dynamically typed, weakly
typed language. Both client-side and server-side development can be done with JavaScript. Both
imperative and declarative languages can be used with JavaScript. In addition to a core set of
linguistic components like operators, control structures, and statements, JavaScript also includes a
standard library of objects including Array, Date, and Math.
A free and open source front-end development framework called Bootstrap is used to build websites
and web applications. Bootstrap offers a collection of vocabulary for template designs and is
designed to enable responsive construction of mobile-first websites.
Developers only need to place the code into a pre-defined grid system because Bootstrap is a
framework that already includes the fundamentals for developing responsive websites. Hypertext
Markup Language (HTML), cascading style sheets (CSS), and JavaScript serve as the foundation
for the Bootstrap framework. By using Bootstrap, web designers may create websites much more
quickly without having to spend time worrying about fundamental commands and functions
(TechTarget, 2023).
An open-source, cross-platform runtime environment and library for JavaScript is called Node.js,
and it is used to run web applications outside of the client's browser. It was created in 2009 by Ryan
Dahl, and version 15.14 of it was made available in April of 2021. Node.js is used by developers to
build server-side web applications, and because it employs an asynchronous, event-driven approach,
it is ideal for data-intensive applications.
For the development of the Hospital Management System (HMS) web application, the following
tools and techniques can be chosen:
• Front-end Development
• Back-end Development
• Database Management
• Framework Selection
• Security Measures
• Testing
A front-end developer is a particular category of software developer who focuses on developing and
designing websites' and online applications' user interfaces (UI) and user experiences (UX). A
front-end developer's main duty is to make sure that a website or application's interactive and visual
elements are user-friendly, visually pleasing, and functionally effective.
Back-end development refers to the development of server-side logic that powers websites and apps
from behind the scenes. It includes all the code needed to build out the database, server, and
application. From database migrations to API integrations to setting up the server-side technologies
that make a website tick, a back-end web developer may be the talent you need to get your next web
project off the ground.
The system software used to create and administer databases is referred to as a database
management system (DBMS). End users can create, protect, read, update, and remove data in a
database with the help of a DBMS. The DBMS, which is the most common type of data
management platform, primarily acts as an interface between databases and users or application
programs, ensuring that data is consistently organized and is always accessible. Types of DBMS
systems e.g., MySQL, Oracle, SQL Server, MongoDB
A framework is a common set of ideas, procedures, and standards for addressing a A typical
problem type that we can use as a model to approach and solve new challenges with a similar
structure. To give a clearer explanation, in the field of web design A framework is described as a
bundle composed of a hierarchy of files and directories comprising standardized code, such as
HTML, CSS, and JS documents, that can be used to support the creation of websites, as a starting
point for website construction. The majority of websites have extremely similar (Not identical, but
similar) structure. The purpose of frameworks is to offer a standard structure so that programmers
can reuse the provided code rather than starting from scratch. Frameworks enable us to save a
significant amount of time and effort in this way.
Ruby on Rails is an extremely productive web application framework written by David Heinemeier
Hansson. One can develop an application at least ten times faster with Rails than a typical Java
framework. Moreover, Rails includes everything needed to create a database-driven web
application, using the Model-View-Controller pattern.
2. Django
Django is another framework that helps in building quality web applications. It was invented to
meet fast-moving newsroom deadlines while satisfying the tough requirements of experienced Web
developers. Django developers say the applications are ridiculously fast, secure, scalable, and
versatile.
Angular is a framework by Google (originally developed by Misko Hevery and Adam Abrons)
which helps us in building powerful Web Apps. It is a framework to build large scale and high-
performance web applications while keeping them as easy-to-maintain. There are a huge number of
web apps that are built with Angular.
4. ASP.NET
ASP.NET is a framework developed by Microsoft, which helps us to build robust web applications
for PC, as well as mobile devices. It is a high performance and lightweight framework for building
Web Applications using .NET. All in all, a framework with Power, Productivity, and Speed.
Meteor or MeteorJS is another framework that gives one a radically simpler way to build realtime
mobile and web apps. It allows for rapid prototyping and produces cross-platform (Web, Android,
iOS) code. Its cloud platform, Galaxy, greatly simplifies deployment, scaling, and monitoring.
6. Laravel
Laravel is a framework created by Taylor Otwell in 2011 and like all other modern frameworks, it
also follows the MVC architectural pattern. Laravel values Elegance, Simplicity, and Readability.
One can right away start learning and developing Laravel with Laracasts which has hundreds of
tutorials in it.
Implement robust security practices such as encryption, input validation, and user authentication to
protect sensitive data.
Conduct comprehensive testing, including unit testing and user acceptance testing, to ensure the
application functions correctly and meets requirements.
Justification:
Node.js:
Node.js is an excellent choice for the back-end due to its event-driven, non-blocking I/O model,
which allows handling a large number of concurrent connections efficiently, making it suitable for
real-time applications like HMS.
Express.js:
Express.js is a widely used and well-supported framework for Node.js, providing a straightforward
and organized approach to build web applications.
Bootstrap:
Utilizing Bootstrap ensures the HMS website is responsive, reducing development time and
providing a consistent user experience across devices.
The choice of the database system will depend on the specific needs of the HMS. For example,
MySQL is a good option for structured data, while MongoDB is suitable for flexible, document-
based data storage.
Security:
Implementing security measures is crucial for handling sensitive patient information, ensuring
compliance with data protection regulations.
Testing:
Thorough testing helps identify and address bugs and issues before the application goes live,
enhancing overall reliability and user satisfaction.
Overall, the chosen tools and techniques will enable the development of a robust, scalable, and
secure Hospital Management System web application.
Task 2 - Categories of Website Technologies, Tools, and Software for Developing Websites
2.1 Considering the requirements given in the above scenario, define the relationships
between front-end and back-end website technologies and discuss how the front-end and the
back-end relate to presentation and application layers.
Front-end Technologies:
Front-end technologies are responsible for the user interface and user experience of a website. They
are executed on the client-side (user's browser) and are directly visible and interacted with by users.
Some common front-end technologies include HTML, CSS, JavaScript, and front-end frameworks
like Bootstrap.
Back-end technologies handle server-side operations, application logic, and interactions with
databases. They are responsible for processing data, managing user sessions, and handling requests
from the front-end. Back-end technologies often include programming languages like Node.js, PHP,
Python, Ruby, and server-side frameworks like Express.js, Flask, and Django.
Front-end and back-end technologies work together to create a complete web application. The front-
end communicates with the back-end through APIs (Application Programming Interfaces). Here's
how the relationship between the two can be understood:
Presentation Layer:
The front-end is primarily responsible for the presentation layer, which includes designing the user
interface, layout, and visual elements that users interact with directly.
Application Layer:
The back-end handles the application layer, which includes the logic and business rules of the web
application. It manages data processing, database interactions, and user authentication.
When a user interacts with the front-end, such as submitting a form or clicking a button, the front-
end sends a request to the back-end via APIs.
Data Handling:
The back-end processes the request, performs any necessary data operations, and sends the response
back to the front-end.
Dynamic Content:
JavaScript plays a vital role in connecting the front-end and back-end by making asynchronous
requests (AJAX) to the server, allowing the front-end to update dynamically without requiring a full
page refresh.
The collaboration between front-end and back-end is crucial for providing a seamless and pleasant
user experience. Fast back-end processing and optimized front-end design contribute to a positive
UX.
2.2 Discuss the differences between online website creation tools and custom-built websites by
considering the design flexibility, performance, functionality, User Experience (UX), and User
Interface (UI). Evaluate the tools and techniques available to design the web application given
in the scenario.
Wix
Wix is a website-building tool that does not require coding to build websites. If you want to build a
website but do not have a lot of experience in it, Wix could be one of the best options. Some
features of the Wix Platform include:
• It enables you to incorporate site elements using the drag-and-drop feature to create your
desired website layout.
• Track the performance of the website using in-house tools and analytics. It offers the
possibility of adding tools like Google Analytics, Google Ads, Facebook Pixel, etc.
• You can create an online community that can interact with each other via likes, follows,
comments, etc. This is similar to other popular social media platforms.
Even though you do not get the creative freedom offered by tools that require coding, Wix’s simple
process can help you make a website with brilliant customization.
Squarespace is another website-building tool that offers more than 100 website templates to start
with. Some features of Squarespace are as follows:
• It provides various functionalities for online shopping centers, such as customer account
functionality, inventory management, abandoned card recovery, and discount codes.
• You can duplicate pages or other content to expedite the website building process.
• You can provide fine-grain access to your project collaborators. The various access levels
are Administrator, Store Manager, Comment Moderator, Viewer, etc.
• The UI of Squarespace itself is amazing, which may be one of the best options for you if
you want to build an e-commerce website.
You can avail a free trial of 2 weeks before subscribing to a paid plan.
custom-built websites
A custom-built website is a website that is generated from scratch. It is coded to suit whatever your
business is looking for in terms of aesthetics and functions. There’s no template that will constraint
your needs, you can have whatever you want (or whatever your developer is capable of creating
should we say!).
Custom-built websites are flexible to update and will grow alongside your business. Unlike
templated sites, personalised ones are easier to modify, and are likely to last a lifetime with new
features being added. You’ll also get…
However, nothing is without its drawbacks, so here are a couple of the key pros and cons of having
a custom-built website.
Considering the requirements of the Hospital Management System (HMS) web application, the
following tools and techniques are suitable:
• Front-end Development
• Back-end Development
• Database Management
• Security Measures
• Testing
• Search Engine Optimization (SEO)
• Mobile Optimization
Front-end Development
HTML, CSS, and JavaScript: These core technologies provide the foundation for creating the front-
end user interface.
Back-end Development
Node.js and Express.js: These technologies provide a robust and efficient server-side runtime and
framework for building the application layer.
Database Management
MySQL or MongoDB: The choice of database system will depend on the specific data storage
requirements of the HMS.
Security Measures
Encryption, input validation, and user authentication: Implementing these security measures is
essential to protect sensitive patient information.
Testing
Unit testing and user acceptance testing: Conducting thorough testing ensures the application is free
of bugs and meets the necessary requirements.
Implementing SEO best practices will improve the HMS website's search engine ranking and
visibility.
Mobile Optimization
Ensuring the website is fully responsive and mobile-friendly is crucial for providing a seamless
experience to users across devices.
Apex Design Works can guarantee that the website satisfies the unique requirements of the
healthcare domain, offers superior performance and security, and delivers a tailored and excellent
user experience for patients, staff, and administrators by custom-building the HMS web application
using these tools and techniques.
Design Flexibility:
Limited Templates: Online tools provide pre-designed templates, limiting the scope for unique and
creative design.
Limited Customization: Customizing templates might be possible, but there are constraints on
altering layouts and design elements.
Generic Look: Many websites created with online tools might end up looking similar due to the use
of common templates.
Custom-Built Websites:
Complete Control: Custom-built websites offer full design control, allowing for unique and tailored
designs that align with the brand and purpose.
Creativity: Designers have the freedom to implement innovative layouts, animations, and visual
elements.
Brand Identity: Custom-built websites can reflect a brand's identity more accurately.
Performance:
Performance Varies: Website performance can be limited by the underlying infrastructure of the
online tool's platform.
Shared Resources: Websites might share resources with other sites hosted on the platform,
impacting loading times.
Functionality:
Limited Features: Online tools offer a fixed set of functionalities, which might not cover complex
requirements.
Scalability Challenges: Scaling the functionality of the website might be limited by the capabilities
of the platform.
Custom-Built Websites:
Tailored Functionality: Custom-built websites can include any required functionality, from complex
databases to intricate user interactions.
Future Scalability: Developers can adapt the website as needs evolve.
Usability Constraints: Tools might limit the design of intuitive and user-friendly interfaces.
Generic UX: User experience might suffer due to the use of cookie-cutter templates and restricted
interactions.
Custom-Built Websites:
Focused UX: Developers can design interfaces that cater specifically to the target audience's needs,
enhancing user satisfaction.
Given the requirements of the Hospital Management System (HMS) web application, a custom-
built approach would be more suitable due to the specific needs of healthcare management. The
HMS involves handling critical patient data, complex scheduling, and specialized functionalities
that cannot be effectively accommodated by online website creation tools.
Using HTML, CSS, JavaScript, Bootstrap, Node.js, and Express.js would allow for a tailored user
experience, efficient data processing, and responsive design. Customizing the UI and UX according
to the unique requirements of healthcare management ensures that patients, staff, and administrators
can navigate and utilize the system effectively.
In summary, while online website creation tools have their place for simple websites, a custom-built
approach is essential for the complex functionalities, security, and user experience required by a
Hospital Management System.
Figure 1-homepage
Figure 2-homepage
Figure 4-login
Figure 6-admission
Figure 12-history
figure 34-Logout
Wireframes
Database
figure 88-database
ER Diagram
An ER diagram and wireframes were created before I started building my website. Then my ER
diagram included a few errors. I was able to complete it successfully with the teacher's help,
although the Wireframes included a few mistakes. I then produced excellent Wireframes using
online website tools. Because an ER diagram and a wireframe reflect the skeletons of a website.
Wireframes and ER diagrams help us develop websites more rapidly. To enhance and grow this
approach, I also gathered a lot of ideas from my friends and the internet, particularly YouTube
videos. As a result, I had a ton of fresh concepts for enhancing and growing my hospital
management system.
Eight pages made up my website. I entered my username and password from the login page on the
first page. Similar to that, the management system at my hospital picked a picture that matched the
criteria, and I shared it. On the second page, the main menu was located utilizing six buttons. I've
added Patient, Ward, Room, Hospital, Doctor, and Staff to the main menu. For the main menu and
all other pages.
I've input my name, specialization, contact details, and Doctor Form Doctor ID on the next page.
The search, update, and remove buttons are also present in this form.
My hospital form's hospital ID, hospital city, and hospital address are listed on the next page. In this
form, I have also included a search, like button.
I've added my patient form's patient ID, patient name, patient address, patient age, and patient
gender on the next page. Similar to that, I have added search, update, and delete buttons to this
form.
My Staff Form staff ID, staff name, staff address, contact information, and ward number are all
included on the next page. In this form, I've also included a button that says "search like." I've
I've uploaded information like my Ward Form Ward ID and Ward Type on the following page.
Additionally, I added search and update buttons to this form.
A variety of coding languages have to be used in order to construct my website. HTML, CSS, and
PHP were all used in the construction of my website. The same was true when I used CSS Coding
as an external file for coding. Similar to that, I code every page on my website differently. I used
the Visual Studio code software to finish all of my coding assignments.
Before I could start and complete my website, I had to go through a few challenges.
In a similar vein, the database did not function correctly for me the first time, but I fixed it, and it
now does. I had trouble with both Varchar and Integer when it comes to data transfer. After I
discovered what was wrong with it and fixed it, it worked considerably better. Following that, I had
a few problems while attempting to connect PHP to the database. Through YouTube and the
internet, I found a lot of ideas that helped me get better and better.
Task 04
The quality assurance process assists a corporation in ensuring that its products fulfil the quality
standards established by the company or its industry. Quality assurance (QA) can also be defined as
a company's method for enhancing the quality of its products.
Many companies see their QA program as a commitment to internal stakeholders and customers
that they will produce high-quality goods with a positive user experience (product plan, 2023).
Quality assurance assists a business in developing products and services that meet the needs,
expectations, and requirements of its consumers. It produces high-quality product offers that foster
The Quality Assurance (QA) process is a critical component of the software development lifecycle
that aims to ensure that a product meets its intended quality standards. In the context of testing a
product's user interface (UI) and gauging the user experience (UX), QA plays a pivotal role in
identifying design issues and development errors before they reach the end-users. Here's an
evaluation of the QA process and its implementation during the design and development stages:
4. Usability Testing:
Usability testing is a crucial part of evaluating the UI and UX. QA teams can create test
cases and scenarios to assess how well the product meets user needs, ensuring that it is
intuitive and user-friendly. Usability testing can be conducted at various stages of
development to catch issues early.
6. Performance Testing:
QA should also evaluate the performance of the UI to ensure it meets performance
standards. This includes testing for page load times, responsiveness, and scalability under
different loads.
In summary, the Quality Assurance process plays a critical role in discovering design issues
and development errors while testing a product's UI and UX. Its successful implementation
Functionality Testing
• checked all user inputs working as expected
• error messages appear when users input the incorrect information
• created users can log in with the new credentials
Usability Testing
• when users visit the pages, they can easily understand where they need to click.
• when users are looking for any piece of information, they be able to quickly find it.
Performance Testing
• Application response times for websites with varied connection speeds
• We ran our website through a series of tests to discover where it might fail under the strain
of heavier-than-usual traffic during peak hours.
• Test the website's ability to recover after a crash brought on by a spike in traffic.
Resubmission
P1 Identify the purpose and types of DNS, including explanations on how domain names are
organized and managed.
(Haven't provide a proper answer. The way domain names are organized has not be provided.)
Purpose: DNS serves as a decentralized system that translates human-readable domain names into IP
addresses. It's much easier for people to remember names like "www.example.com" than numerical
IP addresses like "192.168.1.1".
2. Resource Location:
Purpose: DNS helps locate resources on the internet by resolving domain names to IP addresses.
When you enter a domain in a browser, DNS is responsible for finding the corresponding server's IP
address.
Purpose: DNS can be used for load balancing by distributing traffic across multiple servers. This is
achieved by associating multiple IP addresses with a single domain name.
4. Email Routing:
Purpose: DNS is crucial for email communication, assisting in the routing of emails by mapping mail
server addresses to domain names.
Types of DNS:
Top-Level Domains (TLDs): These are the highest level of the domain hierarchy and include generic
TLDs (.com, .org, .net) and country-code TLDs (.us, .uk).
Second-Level Domains (SLDs): These are immediately below TLDs and represent specific entities or
organizations (e.g., example.com).
Process: Users apply for domain names, providing necessary information. Once approved, the
registrar adds the domain to the central registry database.
Role: ICANN is a global organization overseeing domain name system management. It coordinates
the assignment of IP addresses and domain names.
110 WDD Bakeer Ahamed
4. DNSSEC (DNS Security Extensions):
Purpose: DNSSEC enhances the security of the DNS by adding cryptographic signatures to DNS
data.
Understanding DNS, its types, and how domain names are organized is crucial for effective internet
communication and resource accessibility. It forms the backbone of the web by ensuring that users
can seamlessly navigate the vast online landscape using human-readable domain names.
P2 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.
(Partially done.)
Designing: Developers choose communication protocols, server hardware, operating systems, and
web server software based on the website's requirements. Considerations include anticipated traffic,
security needs, and the development environment.
Publishing: Once designed, the website is published by deploying it on the chosen server hardware,
using the selected operating system and web server software. Communication protocols enable users
to access the site securely.
Accessing: Users access the website through their browsers, which communicate with the web server
using established protocols. The server, powered by hardware and operating systems, delivers the
requested web pages.
In summary, the synergy between communication protocols, server hardware, operating systems, and
web server software is critical for a seamless web experience, from design and publishing to user
access. Each component plays a unique role in ensuring the functionality, performance, and security
of a website.
111 WDD Bakeer Ahamed
P5 Create a design document for a branded, multipage website supported with medium fidelity
wireframes and a full set of client and user requirements.
(Haven't provide a use case diagram and the provided ER diagram is incorrect. Hospital is the system
its not an entity.)
ER Diagram
2. Responsive Design:
Used CSS media queries to adjust styles based on device characteristics.
3. Branding Elements:
Used consistent fonts, colours, and imagery to reinforce the brand.
4. Navigation:
Used navigation menus and breadcrumbs for easy traversal.
5. Content Strategy:
Organized content logically on pages.
A Test Plan is crucial for evaluating the functionality and performance of a website. Here's a basic
structure for a Test Plan with key performance areas:
Objective: Ensure the Bakeer Health Care website functions correctly, meets user expectations, and
performs well under different conditions.
Home Page
Login
The Dashboard
Scheduling Test
References
arm, 2023. arm. [Online]
Available at: https://www.arm.com/glossary/cpu
[Accessed 27 07 2023].
CloudFlare, 2023. CloudFlare. [Online]
Available at: https://www.cloudflare.com/learning/ddos/glossary/hypertext-transfer-protocol-http/
[Accessed 27 07 2023].
geekforgeeks, 2023. geekforgeeks. [Online]
Available at: https://www.geeksforgeeks.org/what-is-web-socket-and-how-it-is-different-from-the-http/
[Accessed 27 07 2023].
nginx.com, 2023. nginx.com. [Online]
Available at: https://www.nginx.com/resources/glossary/nginx/
[Accessed 27 07 2023].
product plan, 2023. Quality Assurance. [Online]
Available at: https://www.productplan.com/glossary/quality-
assurance/#:~:text=The%20quality%20assurance%20process%20helps,the%20quality%20of%20its%20products
.
[Accessed 25 07 2023].
TechTarget, 2023. TechTarget. [Online]
Available at: https://www.techtarget.com/whatis/definition/IMAP-Internet-Message-Access-Protocol
[Accessed 27 07 2023].
wpbeginner, 2023. wpbeginner. [Online]
Available at: https://www.wpbeginner.com/glossary/apache/
[Accessed 27 07 2023].