You are on page 1of 79

ASSIGNMENT 1 FRONT SHEET

Qualification BTEC Level 5 HND Diploma in Computing


Unit number and title 10: Website Design & Development
Submission date Date Received 1st submission
Re-submission Date Date Received 2nd submission
Student Name Nguyen Le Uyen Nhi Student ID GCD201400

Class GCD0905 Assessor name Phan Thanh Tra

Student declaration
I certify that the assignment submission is entirely my own work and I fully understand the consequences of plagiarism. I understand that
making a false declaration is a form of malpractice.
Student’s signature Nhi
Grading grid
P1 P2 P3 P4 M1 M2 M3 D1
❒ Summative Feedback: ❒ Resubmission Feedback:

Grade: Assessor Signature: Date:


Signature & Date:

Table of Contents
I. DNS (P1).....................................................................................................................................................................5
1. Purpose of DNS.............................................................................................................................................. 5
2. DNS work......................................................................................................................................................... 5
3. Working principle of DNS........................................................................................................................... 6
4. Types................................................................................................................................................................. 6
5. The way domain names are organised................................................................................................... 7
II. Explain the purpose. (P2)...................................................................................................................................7
1. Communication protocols.......................................................................................................................... 7
a. Protocols function............................................................................................................................................................................................. 8
b. Some typical protocols.................................................................................................................................................................................... 9
c. Popular communication protocols............................................................................................................................................................. 9
2. Server hardware......................................................................................................................................... 11
a. Server hardware works............................................................................................................................................................................... 11
b. Server hardware components................................................................................................................................................................... 12
3. Operating systems..................................................................................................................................... 15
4. Web server software.................................................................................................................................. 17
a. How Web Server Works............................................................................................................................................................................... 17
b. Types of Web servers.................................................................................................................................................................................. 18
* Apache............................................................................................................................................................................................................. 18
* IIS...................................................................................................................................................................................................................... 19
* Nginx................................................................................................................................................................................................................ 20
5. Relationship................................................................................................................................................. 21
a. Communication protocol............................................................................................................................................................................. 21
b. Server Hardware............................................................................................................................................................................................ 21
c. Operating System............................................................................................................................................................................................ 21
d. Web server software..................................................................................................................................................................................... 21
III. Discuss the capabilities and relationships between front-end and back-end website
technologies (P3).....................................................................................................................................................22
1. Front-end...................................................................................................................................................... 22
a. Front-end Languages.................................................................................................................................................................................... 23
b. Front End Frameworks and Libraries.................................................................................................................................................... 25
2. Back-end....................................................................................................................................................... 27
a. Back-end Languages...................................................................................................................................................................................... 28
b. Back-end Frameworks................................................................................................................................................................................. 30
c. Relationships between front-end and back-end................................................................................................................................. 30
3. Explain how these relate to presentation and application layers................................................31
a. Protocols in the OSI model.......................................................................................................................................................................... 32
b. Roles and functions of layers..................................................................................................................................................................... 33
IV. Tools For Creating Online Website And Custom-Built Websites (P4).............................................37
1. Creating Online Website........................................................................................................................... 37
2. Custom-built websites............................................................................................................................... 42
3. Compare online website creation tools and custom-built websites............................................43
V. Common web development technologies and frameworks (M1).......................................................44
1. Front-end frameworks.............................................................................................................................. 44
2. Back-end frameworks............................................................................................................................... 47
3. Evaluating the effects of employing web frameworks on website design, functionality, and
maintenance.................................................................................................................................................... 50
a. The advantages of using frameworks..................................................................................................................................................... 50
b. The disadvantages of using frameworks............................................................................................................................................... 51
4. Conclusion.................................................................................................................................................... 52
VI. The Influence Of Search Engines On Website Performance (M2).....................................................52
1. Concept of search engine.......................................................................................................................... 52
a. Structure of Search Engine......................................................................................................................................................................... 53
b. The top Search Engines today................................................................................................................................................................... 54
2. Concept of SEO............................................................................................................................................. 57
a. Common types of SEO................................................................................................................................................................................... 57
b. SEO's advantages and disadvantages..................................................................................................................................................... 58
3. Technical solutions to improve website index based on SEO.........................................................58
VII. Evaluating A Range Of Tools And Techniques Available To Design And Develop A Custom-
Built Website (M3)..................................................................................................................................................59
1. Front End tools and techniques.............................................................................................................. 59
Sublime Text......................................................................................................................................................................................................... 59
HTML....................................................................................................................................................................................................................... 61
Visual Studio Code.............................................................................................................................................................................................. 62
2. Back End tools and techniques............................................................................................................... 62
PHP........................................................................................................................................................................................................................... 63
JavaScript............................................................................................................................................................................................................... 64
Python..................................................................................................................................................................................................................... 65
3. Database tools and techniques.............................................................................................................. 66
MySQL...................................................................................................................................................................................................................... 66
SQL............................................................................................................................................................................................................................ 67
4. IDE.................................................................................................................................................................. 68
5. CMS................................................................................................................................................................. 70
References..................................................................................................................................................................72
I. DNS (P1)

1. Purpose of DNS.
DNS (Domain Name System) or domain name resolution system is a system that makes it easier for
humans and computers to "connect" with each other (Because of their communication language).
Computers can only understand numerical sequences!) We are names and letters, and computers can only
understand numerical sequences. The technique aids in the conversion of domain names (hostnames) into
numerical strings that computers can comprehend.

Figure 1: DNS
The DNS server's job is to transform a domain name into an IP address. This is done by looking up the
requesting domain's DNS records. This DNS lookup process usually has eight steps that follow the
information stream from the originating web browser to the DNS server and back.

2. DNS work.
This DNS system has its own query structure that it uses to function.

Figure 2: DNS works


The DNS server will automatically look for the resolved information in the operating system's hosts file
with this structure. One of two possibilities emerge from the search:
- No information found -> DNS keeps looking at cache
- Did not receive any information -> DNS shows error code.

3. Working principle of DNS.


The DNS system is based on the notion of querying DNS servers. A website service provider operates and
manages each DNS server. As a result, the provider is in charge of keeping an eye on the DNS server and
the accompanying domain name.
In other words, when a browser needs to look up a website address, only the DNS server of the company
that manages the website in question may resolve the name. In this instance, the DNS server for the
domain name is in charge of resolving the names of all domain devices to Internet addresses.
When external DNS servers attempt to resolve the name of a website that is not under their control, the
domain name's DNS server will respond appropriately.

4. Types.
In fact, the domain name system analysis system has around 4 communities with participating servers,
including:
 Root Name Servers:
Name Server is another term for it. In the DNS hierarchy, this is the most important server. You
can also think of Root Name Server as a library that can help find what looking for.
Following the actual process, the Root Name Server will respond that it should look in certain top-
level domain name servers after receiving a request from the DNS Recursive Resolver ( TLD
Name Servers ).
 DNS Recursor:
As previously said, this "hardware" serves as a diligent worker, obtaining and returning
information to the browser in order for them to find the information they require. To put it another
way, DNS Recursor is in charge of talking with other servers in order to react to a user's browser.
Of course, Root DNS Server will be required at times during the information gathering procedure.
 TLD Nameserver:
One of the top-level domains is ".com." TLD Nameserver is the server for this type of top-level
domain. This is the person in charge of a common domain name extension's full information
system. The TLD Name Server receives responses from the DNS Resolver in order, then forwards
them to an Authoritative DNS Server - the official repository of that domain's data source.
 Authoritative Nameserver:
The domain name resolving process begins when the DNS Resolver locates the Authoritative
Nameserver. The Authoritative Name Server, on the other hand, includes information about the
domain name's associated address. It will provide the relevant IP address from its records directory
to the Recursive Resolver.
5. The way domain names are organised.
The domain name is usually included in the URL. Labels are the components of a domain name. Each
domain hierarchy segment represents a subdivision and is read from right to left. The TLD appears after
the period in the domain name. There are various top-level domains to choose from, including.com,.org,
and.edu. Some domain extensions may reflect a country code or geographic region, such as.us for the
United States or.vn for Vietnam.
Each label on the left side of the TLD represents a different subdomain of the domain to the right. Each
label can have up to 63 characters, and subdomains can have up to 127 levels. It is possible to have a total
domain character length of up to 253 characters. Other rules prohibit the use of hyphens at the beginning
or end of labels, as well as the use of a fully numeric TLD name.

Figure 3: The Domain Name System is organized in a hierarchical manner


II. Explain the purpose. (P2)

1. Communication protocols.
A communication protocol is a set of communication rules and practices. A protocol is a collection of
protocols for transmitting data between two computer systems or computing devices. The following are
the main components of a protocol:
 Syntax: data format, encoding method and signal levels.
Direct or indirect information transmission between two entities is possible. Entities can communicate
information directly without the use of intermediate entities in two point-to-point connection systems.
Two entities communicate with each other via intermediate entities in the broadcast structure. When
entities do not share the same switching network and are indirectly connected across numerous subnets,
things get a lot more complicated.

Figure 4: Internet protocol

a. Protocols function.
 Encapsulation: Data packets are appended with certain control information during information
transmissions, such as source and destination addresses, error detection codes, and protocol
control.
 Segmentation and aggregation: Communication networks accept only set packet sizes. Data must
be split into packets of a certain size by low-layer protocols. Segmentation is the term for this
procedure.
 Link control: There are two types of information flow between entities: Connection-Oriented and
Connectionless.
 Monitoring: PDU packets can travel over separate paths independently, arriving at their destination
in the same sequence as when they were sent. The packets must be monitored in the link-oriented
mode.
 Flow control: Flow control is concerned with the receiver entity's ability to receive packets as well
as the amount or pace of data transmitted by the sending entity in order to avoid overloading the
receiver and assuring the greatest possible speed.
 Error control: Error management is a crucial approach for preventing data loss or damage during
transmission.
 Synchronization: Window size, binding parameters, and time value are parameters for state
variables and state definitions in protocol entities.

b. Some typical protocols.


 TCP (Transmission Control Protocol): provides a data transfer connection between computers. It
divides data into packets (packets) and assures data transfer success.
 IP (Internet Protocol): routes data packets as they travel over the Internet, ensuring that the data
reaches the intended recipient.
 HTTP (HyperText Transfer Protocol): permits information to be exchanged (often in the form of
hypertext) across the Internet.
 FTP (File Transfer Protocol): permit for file sharing via the Internet.
 SMTP (Simple Mail Transfer Protocol): allows sending electronic mail (e-mail) messages via the
Internet.
 POP3 (Post Office Protocol, version 3): enables e-mail communications to be received over the
Internet.
 MIME (Multipurpose Internet Mail Extension): an SMTP protocol extension that allows binary
files, videos, music, and other types of items to be attached to emails.
 WAP (Wireless Application Protocol): permits data to be exchanged between wireless devices,
such as cell phones.

c. Popular communication protocols.


 Internet Protocol Suite: is a collection of protocols that make up the Internet's protocol stack. The
TCP/IP protocol suite is another name for the Internet Protocol Suite. Transmission Control
Protocol (TCP) and Internet Protocol (IP) are two major protocols in the Internet Protocol Suite
(IP). The Internet Protocol Suite is similar to the OSI model, although there are a few distinctions.
Furthermore, not all layers are well-matched.
 Protocol Stack Protocols: a group of protocol layers that work together to offer networking
functionality.
 Transmission Control Protocol (TCP): core protocols of the Internet Protocol Suite. The
Transmission Control Protocol is a network protocol that works in conjunction with the Internet
Protocol. As a result, TCP/IP is commonly used to refer to the Internet Protocol Suite. TCP is a
protocol that allows an octet stream (8-bit data block) to be securely delivered over an IP network.
The capacity to send commands and check for faults is TCP's most important feature. TCP is used
by all major Internet applications, including the World Wide Web, email, and file transfers.
 Internet Protocol (IP): the main protocol in the Internet protocol suite for forwarding data over the
network. The Internet Protocol's routing function essentially aids in the establishment of the
Internet. Previously, this protocol was the connectionless datagram service in the original
Transmission Control Program (TCP). Therefore, the Internet protocol suite is also known as
TCP/IP.
 Hypertext Transfer Protocol (HTTP): is the World Wide Web's data communication platform.
Hypertext is a type of organized text that uses hyperlinks to connect text nodes. HTTP is a
hypermedia information system application protocol for distributed and hybrid hypermedia
systems.
 File Transfer Protocol (FTP): on the Internet and in private networks, it is the most widely used
protocol for file transmission.
 Secured Shell (SSH): is the most used command-level way for securely managing network
devices. Because Telnet does not provide secure connections, SSH is frequently used to replace it.
 Telnet: is the most used command-line approach for managing network devices. Telnet, unlike
SSH, does not provide a secure connection, but rather a simple unprotected one.
 Simple Mail Transfer Protocol (SMTP): transferring emails from the source mail server to the
destination mail server and transferring emails from end-user to mail systems are the two major
functionalities of this program.
 Domain Name System (DNS): to convert domain names to IP addresses, use this tool. A root
server, a TLD, and an authoritative server make up the DNS hierarchy.
 Post Office Protocol version 3 (POP 3): is one of the two most common protocols for retrieving
email from the Internet. POP 3 is a basic protocol that allows a client to retrieve the whole contents
of a server's mailbox and delete the items from that server.
 Internet Message Access Protocol (IMAP): is yet another important protocol for receiving mail
from a server. The content of the server mailbox is not removed while using IMAP.
 Simple Network Management Protocol (SNMP): used to administer a network. Network devices
can be monitored, configured, and controlled via SNMP. SNMP traps can also be set up on
network devices to send notifications to the central server when certain events occur.
 Hypertext Transfer Protocol over SSL/TLS (HTTPS): HTTPS is a protocol that works in
conjunction with HTTP to provide similar services over a secure connection provided by SSL or
TLS.
2. Server hardware
The main server is a complicated system that is responsible for centrally storing data sources, processing,
and accessing data from other computers connected to the Internet. For a comprehensive setup, the server
hardware equipment is equivalent to that of a desktop computer (also known as a PC). The server, on the
other hand, has far greater reliability and performance than a typical PC. Server hardware is the device
hardware, the components that make up a complete device. With PC, devices such as mouse, keyboard,
monitor, hard drive, DVD drive... are hardware devices.

Figure 5: Server hardware


The server application will have varying hardware requirements for that server depending on the user's
wants. The server's job is to deliver services to a large number of users on a network, which necessitates a
variety of criteria.
Server hardware, by virtue of its ability to run continuously for an extended period of time, necessitates a
high level of availability. As a result, hardware dependability and durability are critical criteria. Users
should select branded and respected servers while selecting a server.

a. Server hardware works.


 Pre-boot memory checks and remote administration services are common on servers.
 The drives are then started progressively, rather than all at once, by the hard-drive controllers.
With incremental starting, the purpose is to avoid overloading the power supply. They next
proceed to a RAID system, where the backup device must be tested for proper operation.
 When compared to a computer that simply takes a few minutes to boot up, this procedure can take
a long time. It's possible that the server won't need to be rebooted for months or even years.
 Many server hardware configurations take a long time to boot and load the operating system.

Some of the most prominent servers:


According to Server Watch, the following are the top 5 strongest and best servers in the world
 Cisco UCS C240 M6
 Dell EMC PowerEdge R750
 Fujitsu PRIMERGY RX4770 M5
 HPE Proliant DL380 Gen10
 Huawei FusionServer Pro 2288H V5
 IBM Power System S922
 Inspur NF8480
 Lenovo ThinkSystem SR630
 Oracle Server X8-2
 Dell EMC PowerEdge R840
 HPE Proliant DL 325 Gen10
 IBM Power System E980
 Oracle SPARC T8-1

b. Server hardware components


- Server board
Because of their exceptionally powerful virtualization support, server motherboard chipsets are always
completely different from PC motherboard chipsets. These must be server-specific processors with
specialized virtualization capabilities, particularly for the most common types of servers. Most PC
motherboards use old chipsets like Intel 845 and 865, or newer chipsets like Intel 945 and 975. Intel
E7520, Intel 3000, Intel 5000X, and other specialist chipsets are frequently used in server hardware
motherboards. These chipsets are notable for their ability to support high-speed interfaces such as ECC
RAM, SCSI HDD – SAS, Raid, and multiple Xeon CPUs, among other things.
Figure 6: Server board

- Processor (CPU)
A server CPU is a high-performance processor with a large number of cores and threads. Simultaneously,
the CPU must be capable of providing greater support for server functionality. Socket 478, 775 should not
be used with Pentium 4, Pentium D, Dual-Core, Quadcore lines, or PCs and servers that use different
CPUs, primarily the Xeon series.

Figure 7: CPU
- Memory (RAM)
On the market, can find DDR RAM I, II with Bus 400, 800, etc. Actually, RAM for server is similar but
with ECC feature added.
ECC (Error Correction Code) RAM is a type of memory that may automatically fix errors by regulating
the data stream it accesses.
RAM ECC simply demands that the proper packet that crashed be present when a collision occurs.
Because ECC RAM offers such a high level of reliability, it will reduce risks and operational expenses.
When there is a single bit error during data processing, EEC prevents the machine from hanging and
dumping the blue screen.
Furthermore, these RAMs may be replaced without having to shut down the system if they get damaged.
However, in order to use this RAM, the motherboard must support the new RAM standard.

Figure 8: Ram
- Hard Drive (HDD)
The hard disk and its performance are usually a top priority when it comes to ensuring the ability to store
exceptionally large amounts of data. Dedicated hard drives for servers always have a far better storage
capacity and rotation speed than PC hard drives.
Server HDDs use SCSI or SAS (Serial Attached SCSI) interfaces, whereas PC HDDs use IDE, SATA I,
and SATA II interfaces. This interface features a larger bandwidth (600MB/s) and an almost 30% higher
rpm than the previous one (10,000RPM). Some modern SAS drives, in an instance, may spin up to 15,000
RPM to enhance data read/write performance.

Figure 9: Hard Drive


- Raid controller
In a modern server, this is an important piece of server hardware. The hard drives will be combined into a
single unit with backup mechanisms using this controller. In the event of a physical failure, these fail-
proof backup mechanisms keep your data safe. Depending on the board, the ability to support different
levels of Raid. Raid 1 and Raid 5 are the two most prevalent tiers on most servers. Some server boards
already have this controller chip built in, thus you may not need to retrofit.

Figure 10: Raid controller


- Power Supply Unit (PSU)
The component that gives electricity to the server's internal devices is critical to its functionality. As a
result, dedicated server lines frequently trail high-power power sources that can be swapped or used as a
backup if the primary power supply fails.

Figure 11: Power Supply Unit


3. Operating systems
An operating system (OS) is a piece of software that connects computer hardware and the user. Every
computer system must have at least one operating system in order to run additional programs. Browsers,
Microsoft Office, Notepad Games, and other applications all require a specific environment to function
and perform their tasks.
The operating system allows you to communicate with a computer without having to learn its language. A
computer or mobile device cannot be used unless an operating system is installed.

Figure 12: Operating System


The following are the most common types of OS (Operating System):
- Batch Operating System: Some computer procedures might be time-consuming. To speed up the
same process, jobs with similar needs are batched together and run as a group. The user of a batch
operating system never interacts with the machine directly. In this type of OS, each user prepares
his or her job on an offline device, such as a punch card, and gives it to the computer operator.
- Multi-Tasking/Time-sharing Operating systems: A time-sharing operating system enables
several users to use a single computer system from different terminals at the same time (shells).
The division of processor time (CPU) across multiple users is referred to as time-sharing.
- Real-time OS: A real-time operating system processes and responds to inputs in real time. Real-
time operating systems include military software systems and space software systems.
- Distributed Operating System: Distributed operating systems leverage several processors spread
across multiple devices to provide users with incredibly fast processing.
- Network Operating System: A server-based operating system is Network Operating System. It
can handle data, users, groups, security, applications, and other networking functions.
- Mobile OS: Mobile operating systems (OS) are those designed specifically for smartphones,
tablets, and wearable devices. Android and iOS are two of the most well-known mobile operating
systems, with BlackBerry, Web, and watchOS also making appearances.
Functions of Operating System:
- Process management: The operating system can generate and destroy processes via process
management. It also contains process coordination and communication tools.
- Memory management: Memory space is allocated and released by the memory management
module to programs that require it.
- File management: File management includes all aspects of file management, such as file
organization, storage, retrieval, naming, sharing, and security.
- Device Management: The process of keeping track of all of your gadgets is known as device
management. Another module in charge of this function is the I/O controller. It's also in charge of
device allocation and de-allocation.
- I/O System Management: One of the fundamental goals of any operating system is to conceal the
eccentricities of the physical device from the user.
- Secondary-Storage Management: The storage hierarchy of a system contains primary storage,
secondary storage, and cache storage. Instructions and data must be saved in primary storage or
cache so that a running application can reference them.
- Command interpretation: In order to process commands sent by acting system resources, this
module translates them.
- Networking: A scattered system is a group of processors that share no memory, hardware, or
clock. The processors can communicate with one another thanks to the network.
- Job accounting: is the process of tracking the time and resources used by various jobs and users.
- Communication management: coordination and allocation of compilers, interpreters, and other
software resources among computer system users

4. Web server software


A web server is a computer that runs software to serve web applications. A web server can receive
requests from web browsers and respond to clients using HTTP or other protocols. There are numerous
web servers available, including Apache, Nginx, IIS, and others. Today's most popular web server is:
Figure 13: Web server

a. How Web Server Works.


* Browsers resolve domain names to IP addresses
The web browser must first figure out what IP address the domain name refers to. The browser will query
one or more DNS servers for information (through the internet). The DNS server will inform the browser
of the IP address to which the domain name should refer, which is also the location of the website.
Now that the web browser has the website's IP address, it may ask the webserver for the full URL.
* Web Server resends client Requested page
The web server responds by returning the requested data... It returns the proper error message if the page
does not exist or if another issue occurs (most commonly 404 Not Found).
* The browser displays the web page
The user's web browser receives the html css files (many more)… and renders the page as requested.
Figure 14: Web Server Works

b. Types of Web servers.


* Apache
Apache is a web server that is both free and open source. It has a market share of roughly 46% of all
websites in the world. The Apache Software Foundation operates and develops Apache HTTP Server,
which is its official name. It assists website owners in uploading content to the internet, hence the name
"webserver." Apache is one of the most widely used and trustworthy web servers; the first version was
launched in 1995, more than 20 years ago. When someone comes to your site, they will type the domain
name into the address bar. As a virtual delivery worker, the web server then sends the requested files
down.
Figure 15: Web server Apache
Advantages Disadvantages
- Free and open source software, including for - Having performance problems if the website has
commercial use. a lot of traffic.
- Reliable, stable software. - Too many setup options can cause security
- Updated regularly, many security patches weaknesses.
continuously.
- Flexible because of the modular structure.
- Easy to configure, beginner-friendly
- Cross-platform (works with both Unix and
Windows servers).
- Works extremely well with WordPress sites.
- Has a large community and is ready to assist with
any problem.
Table 1: Pros and cons of Apache Web Server

* IIS
Today's most common web servers are Apache and Nginx. Internet Information Services (IIS, originally
Internet Information Server) is another Microsoft web server application that was initially released in
1995. Previously, Apache and IIS were two of the most used web servers on the Internet, but according to
a W3techs assessment, Microsoft-IIS has fallen to fourth place, behind Apache, Nginx, and Cloudflare
Server. To date, IIS has come out to version 10 (no IIS 9, same as Windows). IIS has been updated to
version 10 so far (no IIS 9, same as Windows).
Figure 16: Web server IIS
Advantages Disadvantages
- IIS has the ability to support outstanding - To use this software, users must purchase the
advantages, superior to competitors is the ability to appropriate Windows NT editions. Some versions
optimally support languages and frameworks like are free, so please take use of them.
Microsoft like ASP.NET or framework .NET - The IIS user community is smaller and less
because it owns all the features of IIS Window. supportive than those of competing web servers.
This is also why, since 2013, the number of users
accessing this web server has decreased.
Table 2: Pros and cons of IIS

* Nginx
Nginx is a popular open-source web server. Nginx was designed to serve HTTP web pages when it was
initially released. However, it is now utilized as a load balancer and reverses proxy for HTTP, TCP, and
UDP servers, as well as an email proxy (IMAP, POP3, and SMTP). Sysoev publicly released Nginx in
October 2004. An asynchronous event architecture is used by Nginx. Nginx becomes faster, more
scalable, and more dependable as a result of this feature. Because of its powerful ability to handle
thousands of concurrent connections, Nginx is already used by many high-traffic websites.
Figure 17: Nginx
Google, Netflix, Adobe, Cloudflare, WordPress, and a slew of other Internet titans use it. According to
W3techs, Nginx is used as a Web server by a large number of individuals, accounting for 42.1 percent of
all Web servers in the world.

Advantages Disadvantages
- NGINX manages incoming traffic by acting as a - Extensions are small modules used to customize
"relay" that allows HTTP servers to scale quickly. websites according to the developer's
This results in a quick and simple setup with no specifications. NGINX lacks the availability of
data misallocation and complete avoidance of a several modules/extensions; however, a few are
meltdown. available but are rarely required by the websites
- Despite concerns that it will disrupt, corrupt, or that use them.
cause malfunctions in other servers linked to it, - The NGINX web server lacks the community
users should not be afraid to use the NGINX support of competitors such as "Apache." It is
server. There are a number of "how-to" lessons more dependent on your level of expertise and the
available to assist users in learning how to use the NGINX use case. It, too, lacks proper
software effectively. documentation, unlike Apache web servers.
Table 3: Pros and cons of NGINX

5. Relationship
a. Communication protocol.
The protocol specifies communication rules, syntax, semantics, and synchronization, as well as error
recovery mechanisms. Hardware, software, or a combination of both can implement protocols.

b. Server Hardware.
Hardware refers to all of the physical objects that you can touch and see that are combined and made into
a single entity known as a Personal Computer (PC). In this situation, it may be a laptop or even your
smartphone. 

c. Operating System.
The operating system (OS) is the software that runs on top of the hardware. The operating system (OS) is
the software that provides you with an interface via which you may communicate with the hardware. Of
course, there's more to it than that. The OS communicates with the kernel through device drivers, which
deliver "commands" to the hardware to do the tasks you desire.

d. Web server software.


Web server software is also just a piece of software. It is installed and operates on a computer - the server
acts as a Web Server, allowing users to access information on the Web site from another computer on the
network (Internet, intranet). The HTTP protocol allows Web servers to send Web clients across the
Internet (or Intranet) environment.

III. Discuss the capabilities and relationships between front-end


and back-end website technologies (P3)
The most commonly used phrases in web development are frontend and backend. These terms are
important in web development, but they are not interchangeable. To increase the website's functionality,
each side must communicate and collaborate efficiently as a single unit.
Figure 18: Front-end & Back-end

1. Front-end
The front end of a website is the section that the user interacts with directly. It's also referred to as the
application's 'client-side.' It features text colors and styles, photos, graphs and tables, buttons, colors, and a
navigation menu that users interact with directly.

Figure 19: Front-End developers


The languages used for Front End development are HTML, CSS, and JavaScript. Front End developers
provide the structure, appearance, behavior, and content of everything that appears on browser displays
when websites, online applications, or mobile apps are opened. The Front End's key goals are
responsiveness and performance. The developer must guarantee that the site is responsive, meaning that it
works properly on devices of all sizes. No part of the website should behave inappropriately regardless of
screen size.
Figure 20: Front-end programming language

a. Front-end Languages
The front end is made up of several languages, which are explained below:
 HTML: HTML stands for Hypertext Markup Language. It is a markup language that is used to
design the front-end portion of web pages. HTML is a markup language that combines hypertext
with markup. The term "hypertext" refers to the link between web pages. Within the tag that
specifies the structure of web pages, the markup language is used to create the text documentation.

Figure 21: HTML

 CSS: CSS (Cascading Style Sheets) is a simple language that was created to make the process of
making web pages presentable easier. Styles can be applied to web pages using CSS. More
crucially, CSS allows you to do so without having to worry about the HTML code that makes up
each web page.
Figure 22: CSS
 JavaScript: JavaScript is a well-known programming language that is used to do magic on
websites in order to make them more interactive for users. It's used to make a website more
functional by allowing exciting games and web-based software to operate on it.

Figure 23: Java Script


There are numerous different languages that can be used for front-end development depending on the
framework, such as Dart in Flutter, JavaScript in React, Python in Django, and so on.

b. Front End Frameworks and Libraries


 AngularJS: AngularJs is an open-source front-end framework written in JavaScript that is
mostly used to create single-page web applications (SPAs). It is a framework that is always
evolving and provides better ways to construct online apps. The static HTML is replaced by
dynamic HTML. It's an open-source project that may be downloaded for free. It adds Directives to
HTML attributes and uses HTML to bind data.

Figure 24: AngularJS


 React.js: React is a JavaScript library for creating user interfaces that are declarative, efficient,
and customizable. ReactJS is an open-source, component-based front-end library that is only
responsible for the application's view layer. Facebook is in charge of keeping it up to date.

Figure 25: React.js

 Bootstrap: Bootstrap is a toolkit for building responsive websites and web applications that is
free and open-source. It is the most widely used HTML, CSS, and JavaScript framework for
creating mobile-first, responsive websites.
Figure 26: Bootstrap
 jQuery: jQuery is a free JavaScript framework that makes it easier to deal with HTML/CSS
documents, specifically the Document Object Model (DOM), and JavaScript. jQuery simplifies
HTML document traversal and manipulation, browser event handling, DOM animations, Ajax
interactions, and cross-browser JavaScript programming, to name a few things.

Figure 27: jQuery


 SASS: It's the most dependable, mature, and stable CSS extension language available. It's used to
easily extend the capabilities of a website's existing CSS, including variables, inheritance, and
nesting.

Figure 28: SASS


 Flutter: Flutter is a Google-managed open-source UI developer SDK. Dart is the programming
language that powers it. From a single code base, it creates performant and attractive natively
generated applications for mobile (iOS, Android), web, and desktop. Flat development is made
easier, expressive, and adaptable with UI and native performance, which is flutter's main selling
feature. Flutter 2 will be released in March 2021, and it will improve flutter to construct release
applications for the web and the desktop.

Figure 29: Flutter

2. Back-end
The backend of a website is known as the backend. It organizes and stores data, as well as ensures that
everything on the client-side of the website functions properly. It's the section of the website you can't see
or interact with. It's the part of the software that doesn't interact with users directly.

Figure 30: Back-end developer


Users have indirect access to the pieces and attributes established by backend designers via a front-end
application. The backend includes activities such as writing APIs, creating libraries, and working with
system components without user interfaces or even scientific programming systems.

a. Back-end Languages
The back end is made up of several languages, which are explained below:
 PHP: PHP is a server-side programming language that was created with web development in
mind. PHP is referred to as a server-side scripting language since its code is executed on the
server.

Figure 31: PHP


 C++: It's a general-purpose programming language that's popular in competitive programming
nowadays. It's also a backend programming language.

Figure 32: C++

 Java: Java is a computer language and platform that is quite popular and widely utilized. It has a
lot of scalabilities. Components for Java are widely accessible.
Figure 33: Java
 Python: Python is a programming language that allows the user to access more quickly and
efficiently with systems.

Figure 34: Python


 JavaScript: JavaScript is a programming language that can be used on both the front end and
the back end.

Figure 35: Java Script

 Node.js: Node.js is a cross-platform runtime environment for executing JavaScript code outside
of a browser that is open-source. It's important to realize that NodeJS isn't a framework or a
programming language. The majority of folks are perplexed and believe it is a framework or
programming language. We frequently utilize Node.js to create back-end services such as APIs,
Web Apps, and Mobile Apps. Paypal, Uber, Netflix, Walmart, and other significant corporations
use it in their production.

Figure 36: Node.js

b. Back-end Frameworks
 The list of back-end frameworks are: Express, Django, Rails, Laravel, Spring, etc.
 The other back-end program/scripting languages are C#, Ruby, REST, GO, etc.

c. Relationships between front-end and back-end


The user interface/client and related code/tools are known as the front-end, whereas the server-side and
related code/tools are known as the back-end. CSS, HTML, and JavaScript are examples of user interface
code and tools, and the various tools and frameworks that operate with these technologies will be used to
interact with the app. The back-end/server will communicate over the internet and answer requests via the
"HTTP" protocol, which allows requests and responses to be sent as "packets" across a network or
networks.
The back-end will have some code (PHP, Python, Java, etc.) that will instruct the server what to do, such
as grabbing data, creating new data, updating data, deleting data, and so on. The server will next often
interact with a data storage, such as a database, to store and provide data in a structured manner. Of
course, there are many more processes and technologies involved, but the basic relationship between
front-end and back-end is that it permits interactions between a human on a browser (or another server
with mere back-end via APIs) and a server/database someplace on the internet.
Figure 37: Relationships between front-end and back-end

3. Explain how these relate to presentation and application layers.


The OSI model (Open Systems Interconnection Reference Model, referred to as OSI Model or OSI
Reference Model) - is a fundamental model of communication processes that establish international
network architecture standards and serves as a common foundation for different systems to link and
communicate with one another. The OSI model divides communication protocols into seven layers, with
each layer dealing with a specific section of the communication process, dividing the communication
process into several layers, and allowing many different protocols to be implemented in each layer
specific communication requirements.

Figure 38: OSI model


The OSI model adheres to the stratification principles outlined below:
 The model has N = 7 floors. OSI is an open system that must be able to connect to other systems
that are compliant with OSI standards.
 Applications are processed in open systems while remaining connected to other systems.
 Create a logical channel for the purpose of exchanging information between entities.

a. Protocols in the OSI model.


The OSI model distinguishes between two types of protocols: connection-oriented and connectionless.
* Connection-oriented
Before data can be transferred, the peer entities in the two systems must establish a logical link. They
negotiate the set of parameters to be used in the data transmission phase, data slicing/merging, and the link
will be removed. The establishment of a logical link will improve the dependability and security of data
exchange.

Figure 39: Connection-oriented


* Connectionless
Data is transmitted independently via various routes. There is only one phase of data transmission with
connectionless protocols.

Figure 40: Connectionless


b. Roles and functions of layers.
 Application Layer
This layer's responsibility is to define the interface between the user and the OSI environment.
Includes application protocols that allow users to access the network environment and provide
distributed services. When the AE (Application Entity) application entity is created, the ASE
(Application Service Element) application service elements are called. One or more application
service elements can be found in each application entity. SAO (Single Association Objects) are
associations that coordinate application service elements in the application entity's environment.
SAO manages communication and allows media events to be serialized.

Figure 41: Application Layer


 Presentation Layer
The presentation layer is in charge of the syntax and semantics of the data being transmitted. User
information must be represented in a way that is consistent with network working information, and
vice versa. Because the applications run on different systems, the information representative of the
source and target applications is frequently different. The presentation layer is in charge of
converting network data from one representation type to another. To that end, it provides a
common media representation that enables conversion from local to public representations and
vice versa.
Figure 42: Presentation Layer
 Session Layer
The session layer enables users on different machines to create, maintain, and synchronize
communication sessions with one another. In other words, the session layer is responsible for
establishing "transactions" between terminal entities. The session service establishes a link
between two terminals that use the session service, allowing data to be exchanged synchronously.
When the session service is terminated, the link is released. Tokens (Token) can be used to
perform data transfer, synchronization, and delink in parallel or alternate transmission methods. In
the conversation, create synchronization points. In the event of a failure, the conversation can be
resumed from a previously agreed-upon synchronization point.

Figure 43: Session Layer


 Transport Layer
It is the top layer, which is concerned with open system data exchange protocols, which control
data transmission from node to node (End-to-End). The procedures in each system's three lower
layers (physical, data link, and network) serve only to transfer data between adjacent layers.
During data transmission, peer-to-peer entities converse and negotiate with one another. Before
sending, the transport layer divides large packets into smaller packets, numbers the packets, and
ensures they are delivered in the correct order. The transport layer protocol is highly dependent on
the nature of the network layer as the final layer responsible for the level of security in data
transmission. To save money, the transport layer can multiplex several links onto the same link.
Figure 44: Transport Layer
 Network Layer
The network layer is responsible for routing source packets to their destinations, which could be on
the same or different networks. The path can be fixed, defined at the start of a conversation, or
dynamic (Dynamic), changing with each packet depending on the instantaneous network load
state. Routing is very simple in broadcast networks. Congestion control is another important
function of the network layer. Congestion can occur when there are too many packets traveling on
the same path. As packets travel from one network to another to reach their destination, perform
inter-network communication functions.

Figure 45: Network Layer


 Data Link Layer
The data link layer's primary function is to create, maintain, and remove data links. Controlling
errors and controlling the flow of information. Divide the information into frames, send the frames
sequentially, and process the receiver's acknowledgment frames. Frames are decompiled into an
unstructured bitstream that is routed to the physical layer. Layer 2 reconstructs the bit sequence
into information frames on the receiver side. Because the physical link can cause errors, the data
link layer must deal with error control, flow control, flow control, and preventing the source node
from "flooding" the receiver with data. reduce your speed In broadcast networks, the MAC
(Medium Access Sublayer) is in charge of link entry maintenance.
Figure 46: Data Link Layer

 Physical Layer
The physical layer is the bottom layer of the OSI model's seven layers. Layer entities communicate
with one another via a physical connection. The physical layer specifies the electrical, mechanical,
and optical functions and procedures that are used to enable, maintain, and release physical
connections between network systems. Provide electrical mechanisms, functions, procedures, and
so on to perform the physical connection of network elements into a system. Ensures that the
switching requirements are met in order to generate real paths for information bit sequences. The
physical layer's standards define the user interface and the network environment. Physical layer
protocols are classified into two types: asynchronous and synchronous.

Figure 47: Physical Layer


Summary of the function of protocol layers in OSI
Layer Main function Protocol
7 – Application Human communication and network environment Application
6 – Presentation Transform data syntax to meet communication requirements Protocol
of applications Code Transformation
5 - Session Manage communications between entities by establishing,
maintaining, synchronizing, and canceling communication Session protocol
sessions between applications
4 – Transport Transport information between servers (End to End). Error Protocol
control and data flow Shipping
3 – Network Perform routing and ensure communication in the Network Protocol
internetwork with appropriate switching technology.
2 – Data Link Create/remove Frames, flow control, and error control Control procedure
1 - Physical Secures requests to transmit/receive bit strings over physical DTE - DCE . interface
media.
Table 4: Summary of the function of protocol layers in OSI

IV. Tools For Creating Online Website And Custom-Built


Websites (P4).
Website-creation tools have been around for a long time. However, a new generation has arrived. One that
makes use of new technologies such as responsive and mobile platforms. Today, can create almost
anything for a client or a business. Everything from a simple one-page website to a professional online
store is possible. It is possible to do so without any HTML or design experience. Some good examples of
online website construction tools are Wix, WordPress, SquareSpace, and so on.

1. Creating Online Website


Wix
Wix.com, also known as WIX, is a platform that allows users to create an online website by dragging and
dropping elements. WIX integrates with HTML5 and is extremely user-friendly. Simply create an account
and can use WIX tools to create websites or blog. WIX is, in essence, a completely free platform. It does,
however, provide paid plans with many premium features such as removing logos, using separate domain
names, and so on. WIX is widely used, with over 100 million users worldwide covers over 190 countries.
Figure 53: WIX's interface

* WIX software user manual


 Step 1: Register for a WIX account
Go to the home page of the web www.wix.com. Select the “Get Started” button and the system
will display an information panel. At this point, fill in ones email and password. Once done, WIX
will ask to choose how to create a website. Can choose to create the interface automatically or
based on a template.
Figure 48: Sgin Up
 Step 2: Select the WIX interface
Wix offers two options for creating a website, which are listed below:

Figure 49: Two options for building a website provided by Wix

WIx ADI: is a website building platform that uses Artificial Intelligence to allow users to create
websites in minutes. Just answer a few questions about what kind of site a website needs, the
features it needs, and the theme it wants.
Figure 50: WIx ADI
WIx Editor: is a unique approach to website presence. Users have complete control over the
construction process and can create a completely new design from scratch or manually customize an
existing template. While it lacks an AI-based algorithm, the editor includes drag-and-drop
functionality that makes creating websites a breeze.

Figure 51: WIx Editor

Advantages Disadvantages
- WIX's extremely simple drag-and-drop operation - WIX's free version, like most software today, has
is one of its most notable features. It makes editing limitations such as not allowing the use of its own
and designing websites easier, faster, and more domain name, displaying ads frequently, and
convenient thanks to intelligently integrated limiting important features.
features and tools.
- There are numerous designs available. There are - The paid plan is quite expensive, if want to use
approximately 510 website interfaces in many own domain name for website and use the
industries such as technology, e-commerce, upgraded features, have to pay to buy a domain
tourism, education, real estate... to help choose name on WIX.
freely with a sample warehouse.
- Maximum support. At the library, will find - Few applications are compatible. Although the
more than 300 apps, both free and premium. WIX platform supports over 500 apps, this number
For each feature, WIX has a "Help" button is still quite small when compared to the number
available to help users easily find out more of plugins available on WordPress.
information.
Table 5: Pros and cons of WIx

WordPress
WordPress is an open source blogging/website publishing system written in the PHP programming
language and using the MySQL database. WordPress is well-known for being the world's most popular,
free, and easy-to-use content management system (CMS).

Figure 52: WordPress

On May 27, 2003, WordPress was officially released the first version by Matt Mullenweg and Mike Little.
Figure 53: WordPress interface early versions
Advantages Disadvantages
- Users do not need advanced programming - Installation is not simple, improper installation
knowledge to use WordPress because it is very can lead to many conflicts when using.
simple, easy to understand, and operate.
- All items such as posts, interface, settings, and so - Has low performance in handling large
on are organized in an easy-to-understand, databases, so it is not suitable for businesses with
scientific, and user-friendly manner. large server capacity.
- There are built-in tools to make website SEO
simpler and faster.

Table 6: Pros and cons of WordPress

SquareSpace
Squarespace is a professional website builder that can assist in the creation of websites with a beautiful
interface and a plethora of basic features. Squarespace provides all of the tools and features needed to
build and design a website that is beautiful, elegant, and professional, with an intuitive, vibrant design.
Squarespace does not necessitate the use of an experienced individual or extensive programming
knowledge. All that is required is a basic understanding of how to use the user-friendly tools that they
provide. Squarespace provides a 14-day free trial to give user enough time and ability to learn the system
or experience Squarespace's features. It is then possible to determine whether it is appropriate or not.
Figure 54: SquareSpace
Advantages Disadvantages
- Good Website Speed - There is no free plan. Squarespace offers a 14-
day editor trial.
- The variety of models, with 67 models to choose - Complicated editor
from, is sure to pick up a few favorites.
- E-commerce friendly - Limited SEO Customization
- Great support service. To get in touch with - Not compatible with third-party CDNs (content
Squarespace, either email them at any time of the delivery networks)
day (or night) or reach out to them via Twitter.
Most importantly, they still have live chat support.
Table 7: Pros and cons of Squarespace

2. Custom-built websites
Custom-built websites are built through a series of programming procedures, with the end result being a
unique website user experience. Furthermore, designers can use their experience reacting to user input (or
any user action) to produce a wide range of results. With custom-built websites, have the freedom and
flexibility to design user interfaces that meet the needs of company and customers. A website with more
features and capabilities can offer more to users.
SEO is critical to a website's success. There are guidelines to follow when creating a website, and not all
themes can meet these criteria. For this reason uniquely fabricated sites are such a ton better; the engineer
can advance the site during improvement to permit Google and other web indexes to check each page and
give the end-client a more applicable query item, normally giving specially constructed destinations a
higher situation on the framework.
Figure 55: Custom-built websites

3. Compare online website creation tools and custom-built websites


Online Creaction Tools Custom-built websites
Because templates and layouts Custom websites are designed
are limited, using them may with the user's goals, needs, and
result in a website that appears to aspirations in mind. They are
Design flexibility be identical to other websites. built offline with scripts and then
Furthermore, cannot create an published online. As a result, the
ideal website that is one-of-a- user's website can be
kind and the best fit for distinguished and distinguished
objectives. from the websites of other users.
Performance Since developers have no clue Superior execution since
about how the last site will look developers can see the 'last' plans
during execution, execution is each time they compose a line of
normal, and SEO capacities are code, alongside top tier SEO
restricted. techniques
Functionality They have prepared to-utilize It gives a more ideal way to deal
templates, notwithstanding, they with web composition, which is
just proposition a restricted coding, and greater
measure of the plan and design effortlessness in internet
choices. Moreover, most little business arrangements.
firms require CRM (Customer Moreover, they permit buyers
Relationship Manager), contact control of their sites.
the board frameworks,
arrangement schedulers, etc.
While some web-based business
components are accessible
through web-based developers,
they are reliant upon outsider
programming to work.
UX They keep individuals from Give upgraded page execution as
exploiting SEO benefits since well as introduce valuable
they have constrained SEO substance through ideal SEO
capacities. Building utilizing approaches.
these doesn't empower you to
address site innovations, which
might bring about a more slow
stacking time for your site.
UI Since layouts are restricted, this Custom sizes are made with your
will influence the UI. Moreover, points, requests, and desires as a
clients might consider another primary concern; therefore, the
site despite the fact that they are interesting plan of UI relies upon
utilizing your site. your thoughts.
Table 8: Differents between online website creation tools and custom-built website

V. Common web development technologies and frameworks (M1).

1. Front-end frameworks
React
Facebook developed and created the open-source framework React. According to the Stack Overflow
Developer's Survey 2021, this framework is the best UI framework for 2022, and it is used by the majority
of front-end developers.

Figure 56: ReactJS


Its team was focused on achieving exceptional performance through the creation of a user-friendly
interface. The major goal was to address code maintainability issues caused by the app's continual addition
of new features. React is a front-end framework that is distinguished by its virtual Document Object
Model (DOM), which displays its superior capability. It's an ideal framework for people that expect a lot
of traffic and need a reliable platform to handle it. This framework is also user-friendly for new
developers, providing guidelines to help with any problems that arise during the learning process.
Advantages Disadvantages
- Time savings while repurposing components. - Due to the rapid pace of development, there is a
- Virtual DOM improves both the user's lack of documentation.
experience and the developer's labor. - The learning curve is relatively steep.
- An open-source library that includes a wide - The complexities of JSX are difficult for
range of tools. developers to comprehend.
- One way data movement provides stable code.
Table 9: Pros and cons of React
Angular
Without mentioning Angular, any list of the top front-end development frameworks would be inadequate.
It's a TypeScript-based framework that's simple and straightforward. The Angular framework was created
by Google in 2016 to bridge the gap between the increasing needs of technology and the traditional
conceptions that displayed the results. In contrast, to React, Angular's two-way data binding feature is
exclusive. It indicates that the view and the model are actually time-synchronized, meaning that any
change in the model is immediately replicated on the display, and vice versa.

Figure 57: Angular


Angular is an excellent choice if your plan includes developing online or mobile apps. Our web
developers use the Angular framework to create progressive web applications and single-page applications
as an Angular development firm. Some applications of companies like Xbox, BMW, Blender, and Forbes
have been developed by Angular. When comparing Angular with React, Angular is more difficult to
understand. However, there is a plethora of documentation available; however, it is either too complex or
difficult to read.

Advantages Disadvantages
- Because of its refactoring services and improved - An angular complication is a type of
navigation, it makes coding easier. complication that occurs when there is a
- The component-based pattern of Angular - Legacy schemes are being migrated from
sanctions forms a user interface with single AngularJS to Angular.
components. - The documentation for the CLI is not well-
- An ecosystem that is large. defined.
- Material Design interface production is - The time spent learning.
reorganized with Angular Material.
- High Performance.
Table 10: Pros and cons of Angular
jQuery
In 2006, jQuery was one of the first frontend frameworks to be released. What sets it different, regardless
of its release date, is its importance in today's tech ecosystem. Not only does jQuery make it simple to use,
but it also eliminates the need to create complex JavaScript codes.

Figure 58: jQuery


jQuery is used to enhance the interactivity and usefulness of a website by performing DOM and CSS
modifications on the front-end. Even while jQuery cannot be used to create mobile apps, recent advances
in jQuery Mobile have revealed that the usage boundaries have been expanded. Furthermore, with its
HTML5-based UI scheme – jQuery Mobile – the most recent advancement in this framework allows
developers to construct native mobile apps. In addition, the jQuery framework is browser-friendly and
compatible with the browsers you intend to use.
Advantages Disadvantages
- The transmission of HTTP requests has been - Numerous progressive substitutes are accessible
simplified. other than jQuery.
- The Document Object Model (DOM) allows for - The Document Object Model (DOM) APIs are
the addition or removal of components. obsolete.
- HTTP requests are simplified. - Reasonably sluggish working capability.
- Dynamic content is made easier.
Table 11: Pros and cons of jQuery
2. Back-end frameworks.
Django
Django is a Python high-level web framework built on the MTV paradigm that is free and open-source
(including Model-Template-Views). The Django Software Foundation now develops and manages this
framework.

Figure 59: Django


Django was created with the intention of assisting in the creation of sophisticated websites using readily
available databases. It operates on the premise of reusing 'plug in' components to construct websites with
less code, less coupling, scalability, and no duplication.
Advantages Disadvantages
- Good security: Developers working with - No conventions: Django web development is
Django have almost no space for security disliked by most programmers due to its lack of
errors. It aids developers in avoiding any convention. Unlike Ruby on Rails, the framework
frequent mistakes like as cross-site scripting, does not have a set of web development principles
SQL injection, request forgery, and so on. As a that developers can follow. It's challenging for
result, the framework's output has exceptional developers who are used to working with
security. Configuration Conventions in frameworks.
- Expansion: Django comes with built-in - Not for smaller projects: During development,
extensions to assist programmers to manage Django necessitates a lot of coding, which
traffic, making it ideal for high-traffic sites. consumes server processing time and bandwidth.
- Ease of use: Django was built using the It's frequently utilized in projects that need to scale
Python programming language and the MVC or are going to scale.
style, making it simple to use in applications. - Multiple requests problem: Django, unlike
Multi-language and multi-site capabilities are most web development frameworks, cannot handle
available. many requests at the same time. They are required
- Easy to learn: Django can be learned using a for specific processes, and each one takes time to
variety of methods, including free internet complete.
resources and paper books. The Django
community is thriving right now, and
newcomers can find support on Facebook
pages, forums, blogs, and more.
Table 12: Pros and cons of Django
Laravel
Taylor Otwell created Laravel, which was first released in June 2011. It's a free, open-source framework
with a logical, consistent syntax. Laravel was created to support web applications, with the MVC (Model -
View - Controller) model at its core.

Figure 60: Laravel


Laravel has shown to be a "heavyweight" choice when it comes to establishing a tremendous "fever"
because it is highly valued in many aspects and utilized by many people, despite its late start compared to
many competitors. today's most extensively utilized.
Advantages Disadvantages
- Using Laravel 5 gives developers access to the - When updating code, the application is subject to
most up-to-date PHP functionality. breaking or stoppage due to a lack of connectivity
- The documentation resources available are between versions.
incredibly diverse and rich, making them ideal for - The high capacity causes the page to load slowly.
programmers. - The payment feature is not owned by him.
- Fast data processing speed: Laravel assists you in
quickly launching websites or huge projects.
- Ease of use: You can create a website quickly
even if your PHP knowledge is poor.
- Database Migration Made Simple: Laravel lets
you keep your database schema without having to
recreate it. You may control the data with PHP
rather than SQL. Additionally, you can revert the
Database's most recent updates.
- High-security features: Laravel protects against
SQL Injection attacks with PDO, as well as CSRF
attacks with a hidden token field. Users will be
able to concentrate entirely on product creation as
a result of this.
Table 13: Pros and cons of Laravel
NodeJs
Nodejs is a platform based on the V8 JavaScript Engine, which is a code execution
interpreter for JavaScript. Building Web apps has become considerably simpler and easier
thanks to Nodejs. In addition, Nodejs provides a network server and application
environment that is free and open source.

Figure 61: Nodejs


According to Stack Overflow statistics on Frameworks, Nodejs has risen to the top of the heap, with a user
base of up to 50%. Future career chances and promotion will be abundant if you master Nodejs.
Advantages Disadvantages
- Because of the asynchronous processing - Nodejs uses up a lot of resources and time.
mechanism, it has a quick processing speed (non- Because Nodejs is built in C++ and JavaScript, it
blocking). Can easily manage tens of thousands of must be compiled before it can be used.
connections in a short period of time. - When comparing Nodejs to other languages like
- When the need for website development arises, it PHP, Ruby, and Python, there won't be much of a
is simple to grow. difference. Nodejs will most likely be suitable for
- A single thread can receive and manage developing new applications. When it comes to
numerous connections. As a result, the processing developing and deploying critical projects, though,
system will use the least amount of RAM possible, Nodejs isn't the best option.
allowing Nodejs to run considerably more quickly.
- Capable of handling multiple requests at once in
the least amount of time.
- For optimal performance, it is capable of
handling thousands of Processes.
- Suitable for developing real-time applications
such as chat apps, social networks, and so on...
Table 14: Pros and cons of Nodejs

3. Evaluating the effects of employing web frameworks on website design,


functionality, and maintenance.
a. The advantages of using frameworks.
 Makes easier the Development Process: The frameworks give tools and packages to assist
people in getting started with their website development. Because frameworks handle numerous
standard templates built from scratch, the program does not have to write all of the scripts from
scratch. They also provide opportunity for beginners to learn about essential topics and provide
access to a variety of tools and specialists. Because frames launch the basic structure and store
network programs in the shape of a ship, they considerably decrease coding time.
 Eases Debugging and Application Maintenance: Many programming languages don't
place a high priority on code readability and robustness while in flight. Although designing an
online software that is framework-adapted is highly suggested, it has a lot to do with simplicity of
debugging and maintenance. There is always a quick response to any difficulties that arise with the
foundation because each framework has a community of innovations associated with it.
Furthermore, many models enable developers to do their first tests.
 Reduces Code Length: There is no need to create large lines of rules with frames on the
website; instead, include common patterns. As a result, in the code part, introduce it fast and
concisely. This reduction in extra time and effort is frequently linked to improved overall
performance. Furthermore, the frameworks include features and tools that enable developers to
automate common operations like web construction, text storage, session management
authentication, and URL mapping.
 Improves Database Proficiency: Many frameworks begin with a collection of rules that
enable programs to frequently work with related data. Although some standards make data
integration easier, they also incorporate an Object Relational Mapping (ORM) engine that goes
unnoticed. This ORM object is also used in other examples to write straight to programming
languages. Furthermore, this ORM paradigm allows developers to perform database functions
without having to write extensive SQL scripts.
 Reinforces security: Snapshots aren't required by developers to defend their online programs
from SQL injection, web application fraud, and database manipulation. Developers can use the
built-in security tools and strategies to safeguard their websites from existing and future security
threats. Developers can rely on extra protection for their websites by using features and tools as
their basic capabilities.

b. The disadvantages of using frameworks.


 Framework Limitations: A framework is usually very adjustable, although it can't be
completely modified. Developers are obligated to adhere to the design's constraints and norms.
While this might be advantageous in terms of ensuring that conventions and best practices are
strictly followed, developers must ensure that the framework they choose matches their needs and
expectations. Forcing a project to adapt and skew to fit later stages might create as many issues as
it solves.
 Learning the Framework and Not the Language: Leaning excessively on a framework
can obscure some of the learning necessary to develop a better understanding of the system or
language itself, which is a huge drawback for teams. Because the framework takes care of a lot of
the hard lifting, developers may leave some of the more complex elements of the application alone.
Engineers that work with code on a regular basis may not be familiar with the ins and outs of a
system when only interacting with the framework's higher levels is sufficient. Over-reliance on the
framework means programmers have less opportunities to tackle complicated problems and
develop a thorough understanding of the entire application.
 Unnecessary Extras: A framework, by necessity, will come with everything required to
satisfy a wide range of projects and use cases. In practice, this means your framework will come
with features, functionality, and code that won’t be used at all within your project. In fact, the bulk
of the code included within a large framework may well be irrelevant. This is particularly true
when building exceptionally simple web apps. The extra files and unnecessary code in your project
can adversely impact the speed and performance of a framework and the sites it supports.
4. Conclusion.
Frameworks do, in reality, have a big influence. Building a website utilizing frameworks is easier and
more fun for many experienced web developers than re-inventing the wheel by writing common, known
features found across many websites and web applications. Instead of reinventing the wheel by developing
common, familiar features prevalent across many websites and web applications, frameworks allow
designers and developers to focus on creating unique features for their projects.
As indicated in the advantages section, employing frameworks has a number of advantages, including
making the web development process easier and faster for developers and boosting the quality of the
websites they generate. Using frameworks reduces code length, produces bootstraps during development,
and makes debugging and maintaining the program easier, among other benefits.
Frameworks, like anything else in life, contain flaws. Because frameworks have some limitations, such as
giving a rigid programming model or making it difficult for your site to load, a consumer may mistake
your website for another. It also inhibits consumers from learning the programming language itself.
In short, frameworks substantially assist website developers; yet, developers may readily design websites
without the assistance of frameworks, and they can also build websites that are adapted to their individual
needs.

VI. The Influence Of Search Engines On Website Performance


(M2).

1. Concept of search engine.


A search engine is a sort of operating system that searches the Internet for information. When users use a
search engine, they must enter a term (keyword) connected to the topic they want to learn in order to
receive a table of results containing web pages, photographs, videos, map addresses (for place names), or
document files, among other things.

Figure 62: Search Engines.


The search algorithms of the search engines will sort the returned results in a specific order, and each
search engine has a particular search methodology. These returning results are also known as natural
search results because there is no human intervention (Organic Search Traffic).
Currently, search engine market share is quite competitive globally, with Google Search temporarily
taking the top spot and the average global user market share dipping below 70%. Specifically:

Figure 63: Search Engine Global Search Market Share in 2014.


Vietnam is yet another unique example. Coc Coc is the most popular search engine in Vietnam, with over
a million monthly and daily visits. However, Google Search is responsible for the majority of the search
results returned by this search engine. As a result, Google Search will theoretically be the most popular
search engine in Vietnam today.

a. Structure of Search Engine.


Currently, a search engine is made up of three basic components in order to save consumers time when
looking for information. Specifically:
 Spider: Spider is a tool that assists Search Engines in collecting data from any website, such as
information on the content on the page, as well as the quantity and frequency of links from other
websites to that page. Crawling by the spider will continue indefinitely from any page and will
cease only when all relevant links have been crawled. The information about the links to and from
the website (internal link & external link) will be connected to the website in order to aid search
engines in determining the website's popularity and reputation (Domain authority & Domain
popularity). Thus, Spider could have crawled millions of other websites from a single page,
ensuring that all websites are crawled and reviewed as correctly as possible.
 Index: Index is a tool that optimizes all of a web page's collected data, including its content and
incoming and outgoing links. These data will be encoded as text files (text) in order to save space
and extract search results as quickly as possible. The encrypted data will be evaluated, indexed,
and saved in the original database, allowing the Look Engine to avoid having to search for
information on each website every time a user searches for a keyword, reducing the number of
times the user receives search results.
 Search Engine Extractor: Extraction tool for search results. When a user submits a search to
a search engine, the keyword must pass through query filters in order for search engines to better
assess search data and user data. Then, to best match the user's query, search and extract
information from the indexed data. As a result, whenever a user searches the Internet for
information, they are essentially searching the website archives that Search Engine has previously
saved.
 Search Results Table (SERP): After being processed by the Search Engine Extraction
Engine and ranking the search results, Google search results will be shown on a results table,
similar to what we see now when using Google.

b. The top Search Engines today.


The top four search engines, including Google Search, Yahoo! Search, Bing Search, and Baidu Search,
currently account for almost 97 percent of the global user market. Specifically:
Google Search.
Google Search, often known as Google Web Search or simply Google, is a Google Corporation-owned
online information search engine that is one of the most widely used in the world today. With over 3
billion searches every day, Google is the most used search engine on the planet. In 1998, Google formally
unveiled its search engine, which had been in development since 1997 by Larry Page and Sergey Brin.

Figure 64: Google Search


Until now, after many years of constant updating and improvement, with billions of data stored, top-notch
search performance, and a history of being a pioneer in developing and updating anti-spam algorithms, it
has aided in providing the finest user experience.
Yahoo! Search.
Yahoo Search is a Yahoo!-owned website search engine. As of February 2015, it was the third most
popular search engine in the United States, with 12.8 percent of all searches. Despite the fact that it was
founded in 1995, Yahoo! did not formally launch its Search Engine product until 2004. Despite being born
later, Yahoo! Messenger and Yahoo! Mail have a sizable user base. Yahoo Search is still able to hold its
own against competitors that are half a decade older.
Figure 65: Yahoo! Search
Prior to the heated battle with Google Search, Yahoo and Microsoft decided to collaborate in 2009 to
develop Bing Yahoo Search together.
Bing Search.
Microsoft Corporation's Bing Search, formerly known as MSN Search (formerly known as Live Search,
Windows Live Search), is a search engine. The Bing search engine debuted on May 28, 2009, and quickly
rose to become the second most popular search engine in North America.

Figure 66: Bing Search


Microsoft and Yahoo! signed a ten-year pact on July 29, 2009, with Yahoo! Search being replaced by
Bing Search. For the first five years of the arrangement, Yahoo! will earn 88 percent of the revenue from
all search advertising sales on its website, as well as the opportunity to sell advertising on specific
Microsoft websites.
Baidu Search.
Baidu is the most popular Chinese search engine to date, and it was created particularly for Chinese-
speaking consumers. Baidu has surpassed Google as the world's second most popular search engine since
its introduction in 2000.

Figure 67: Baidu Search


Baidu has to rely heavily on nationalism and monopoly government support to achieve such success, in
addition to inheriting the triumphs of its predecessors such as Google or Wikipedia. Baidu Search has now
become a must-have search engine for everyone who speaks Chinese and wants to do business in China.
2. Concept of SEO.
SEO is an acronym for "search engine optimization." SEO is defined as a process or group of procedures
for optimizing websites, making them search engine friendly, and enhancing website rankings on search
engines like Google, Yahoo, and Bing, among others. SEO is a field in marketing, communication, and
promotion that provides the best approach for a website. It is a good marketing profession for individuals
who work in search engine optimization.

Figure 68: SEO


Administrators can use SEO to boost their website's ranking in the SERP (search engine result page) by
using related keywords to improve traffic and competitiveness. SEO is a self-contained task, but it is
occasionally combined with a marketing campaign by the administration. If the administrator understands
the value of SEO training, he or she will have a lot of success, attracting a large number of clients from
search engines.

a. Common types of SEO.


 Keyword SEO: is a method that businesses and SEO professionals use to improve the search
rankings of keywords on Google.
 Image SEO: is SEO using images to bring the images in the Website to the Top of Google's search
when users search with that keyword and select the Display Image Tab.
 SEO clip: Use SEO strategies to place videos, clips, and other social media networks like Youtube
in the Video Tab of your website.
 Local SEO: On Google Maps, searchers can quickly locate the location they are looking for.
 SEO App Mobile: On Google Maps, searchers can quickly locate the location they are looking for.
b. SEO's advantages and disadvantages.
Advantages Disadvantages
- Spending time on SEO optimization while - It will take a long time to achieve the effects you
keeping costs low results in a large number of desire, and it may take months to see them.
visits. Patience is required. So, if a company has to
- By devoting time and effort to SEO, you will advertise rapidly and wants to see results right
gain credibility with the major search engines, now, SEO is not the way to go.
which will benefit your business in the long run. - If your SEO campaign is successful and yields
- SEO provides continual traffic at a low cost results, competitors may alter their strategy in
because you simply pay for the service and not for order to copy or attack you.
the quantity of visits to your website. - It's usual for your ranking to fluctuate from day
- When people search the internet, they are more to day, hour to hour, from Top 1 to Top 10.
inclined to click on organic search results rather
than paid advertisements (about 8.5 times).
- When compared to other paid advertising
strategies, there are more profitable conversion
prospects.
Table 15: Pros and cons of SEO

3. Technical solutions to improve website index based on SEO.


 Publish Relevant, Authoritative Content: The number one driver of your search engine
rankings is quality, authoritative content, and there is no alternative for outstanding content,
especially when it comes to SEO marketing. Quality content tailored to your target audience boosts
site traffic, which boosts your site's authority and relevancy. Sharpen your web writing skills and
establish yourself as an expert on the subject you're writing about.
 Update Your Content Regularly: You've probably noticed how passionate we are about
content. Search engines are no exception. Maintain in mind that regularly updated material is one
of the best markers of a site's relevance, so make sure to keep it up to date. Audit your content on a
regular basis (every semester, for example) and make any necessary modifications.
 Metadata: Each page on your website has a space between the head> tags where you can insert
metadata or information about the page's contents. If you have a CMS site that was built by the
UMC web team, this data will be pre-populated for you. However, as your site evolves, it's critical
that you analyze and update metadata.
 Have a link-worthy site: A content-rich, authoritative, unbiased homepage that helps visitors
learn more about what they're interested in is more likely to draw links from other websites,
improving your search engine optimization. By including relevant links within the content, you can
increase your authority and credibility. Instead of "click here" links, consider writing out the
destination's name. "Click here" has no search engine value beyond the connected URL, however
"Michigan Tech Enterprise Program" is keyword-rich and will increase both your and the page
you're connecting to's search engine rankings.

VII. Evaluating A Range Of Tools And Techniques Available To


Design And Develop A Custom-Built Website (M3).

1. Front End tools and techniques.


In just a few years, web development tools have come a long way. As a result of this advancement,
developers can now take advantage of the power of well-tested libraries to simplify our workflow and gain
access to more responsive design options. Not only that, but thanks to ever-improving version control
systems, we can construct things together. There have never been more choices for producing excellent
web applications, from browser add-ons and plugins to processors that streamline your code.

Sublime Text
Sublime Text is a cross-platform source code editor that uses the Python programming language as its
interface. Many developers use this application since it is both free and packed with useful support
features. It supports both programming and markup languages, allowing users to customize the plugin's
functionality as they see fit.

Figure 69: Sublime Text


Features of sublime text:
 Multi-platform: On Mac, Windows, and Linux, the Sublime text editor comes pre-installed. As a
result, people can use it on any machine. It makes use of an unique UI framework, thus the
interface is extremely fast and pleasing to the eye. Not only that, but it also makes use of all of the
platform's native features.
 Efficiency: Because of its robust and easily customizable cross-platform UI and proprietary tools,
Sublime Text prioritizes performance. It's made up of custom parts and is extremely adaptable.
 Fast conversion: The whole contents of the workspace, including editing and unsaved files, is
contained in Sublime text projects. Users can convert these projects right away, but any
modifications will be undone when the project is opened again.
 Split Editing: The width of your screen will determine whether or not you may use this feature.
You can modify as many rows and columns as you wish, as well as edit files side by side or at
different locations inside the same file.
 Customize everything: Everything in Sublime Text may be changed using simple JSON files.
The options that can be provided on each file type and project are more flexible when using this
editor.
 Powerful API and package ecosystem: Sublime Text's rich Python API is one of its most
appealing features, allowing users to integrate upgraded plugins. Furthermore, you have easy
access to thousands of community-built programs.
 Command Palette: Users can find what they want with just a few keystrokes rather to having to
browse through menus or master intricate keyboard commands.
 Multiple Selections: This functionality enables users to alter numerous lines at once, rename files
quickly, and manage files more efficiently than ever before.
 Goto Definition: Sublime Text users can utilize syntax definitions to have Sublime Text create a
project-wide entry for every function, method, and class.
 Goto Anything: Files, icons, lines, and words may all be navigated to quickly.
The advantages of Sublime text
- When it comes to Sublime text editor, one of the first notable advantages is the flexibility to
modify. Website designers can entirely change as they wish using plugins. Developers can install,
enhance, or remove plugins straight from within the editor, eliminating the need to restart (start).
- Sublime Text includes Goto and Command Palette features, as well as the ability to search for
regular expressions, case sensitive keywords, and full phrases. Not only that, but it also allows
users to save search results in order to utilize them in the future.
- Sublime Text can also display numerous text files in a variety of ways. Several open files may be
arranged in tabs by the user. This is how the programmer can freely move and rearrange them.
This method is widely used, however there are a variety of additional options.
- Because the Sublime Text source code editor is based on Python and C/C++, it is extremely light.
It is extremely fast; when you open Sublime Text from the Windows Start Menu, it will begin
downloading immediately and appear on the screen in a matter of seconds.
HTML
HTML is the abbreviation for Hypertext Markup Language. HTML is used to divide paragraphs,
headings, links, blockquotes, and other elements in a web page or application. HTML is a markup
language, not a programming language. As a result, it is unable to generate "dynamic" functions. HTML,
in a nutshell, is comparable to Microsoft Word software in that it solely affects the layout and formatting
of web pages.

Figure 70: HTML


Advantages and disadvantages of HTML
Advantages Disadvantages
- The language is widely used, with a large - This language is mostly used to create static
community and a wealth of support resources. websites. You'll need to utilize JavaScript or a
- Can be used with practically any contemporary third-party backend language like PHP for
browser. dynamic features.
- HTML is a straightforward language to learn. - Even if the elements are the same, users must
- It's fully free and open source construct individual web pages for HTML.
- HTML markup is often brief and consistent. - Some browsers take a long time to adapt to new
- The World Wide Web Consortium is in charge of functionality. The newest tags are not always
the main web standard (W3C). displayed in older browsers.
- Backend languages like as PHP, Node.js, and
others are simple to incorporate.
Table 16: Pros and cons of HTML
Visual Studio Code.
Visual Studio Code is a desktop code editor for Windows, macOS, and Linux that is both lightweight and
powerful. VSCode includes support for JavaScript, TypeScript, and Node.js out of the box, as well as a
robust extensibility ecosystem for other languages (such as C++, C#, Java, Python, PHP, and Go).

Figure 71: Visual Studio Code


Visual Studio Code's advantages and disadvantages
Advantages Disadvantages
- With Microsoft's help, there is a lot of - VSCode, like all other electron programs, uses a
development going on. The formal documentation lot of memory and battery power.
is kept in good condition. - There is no git merge, which many people expect
- With all of the plugins you'll need, there's a because ST3 and Atom can perform it.
thriving community to help you out. You'll usually - The default shortcuts are incomprehensible, and
get a response within four days if you submit an users must change nearly all of them.
issue on the GitHub repo.
- VSCode is extremely fast for electron
applications, almost as fast as the natively
developed ST3.
Table 17: Pros and cons of Visual Studi Code

2. Back End tools and techniques.


While Frontend Web Development is concerned with the design of the website's user interface utilizing
web technologies such as HTML, CSS, JavaScript, and others, Backend Web Development (also known
as Server-Side Development) is in charge of the website's proper functionality.
PHP
The word Hypertext Pre Processor is abbreviated as PHP. Is a popular programming language for creating
applications. The PHP programming language was created by the community, with Zend Inc. making a
significant contribution. Is a corporation created by the PHP core developers to provide a professional
atmosphere. Bring this programming language up to the level of professional and business development.
PHP now accounts for more than 70% of the web; for example, the introductory websites of firms like
influxwebtechnologies and Monamedia are developed with WordPress, a PHP-based source code.

Figure 72: PHP


PHP’s advantages and disadvantages
Advantages Disadvantages
- The first is that PHP is a completely free - The grammar structure of PHP is still restricted.
program to use. This is a significant benefit for It is not as well-designed or as visually appealing
anyone interested in learning this programming as other programming languages.
language. You can study and practice on the - PHP can only be used to create and run web
internet. There's no need to spend a lot of money applications. This is why it is difficult for this
to learn to code. language to compete with other programming
- PHP's syntax and structure are relatively simple. languages. If you wish to improve and increase
It won't take you long to learn the language if you your programming skills.
want to. Most programmers are apprehensive of
complex structures. Is a significant benefit for
anyone who is interested in and enjoys the most
popular programming languages.
- It will be fairly simple to get a job that pays well.
Today, almost every web design firm has a PHP
department. And that is really necessary. There are
other software development firms. You can earn a
lot of money by doing a variety of significant jobs
and working for a variety of companies.
- Not just for now, but also for the future. This
programming language will continue to evolve in
order to maintain its position as the best in the
programming language survey.
Table 18: Pros and cons of PHP

JavaScript
JavaScript is a dynamic programming language for computers. It is an extremely lightweight script that is
often used as part of web pages, allowing client-side script to interact with users and build dynamic pages.
It's an object-oriented programming language that can be interpreted.

Figure 73: JavaScript


Js was originally known as LiveScript, but Netscape renamed it JavaScript, probably as a result of Java's
influence. JavaScript was first introduced as LiveScript in Netscape 2.0 in 1995. Netscape, Internet
Explorer, and other online browsers already include the language's versatile core.
JavaScript’s advantages and disadvantages
Advantages Disadvantages
- Server interaction is reduced since user input can - Client-side js does not support file reading or
be validated before the page is sent to the server. writing. This has been maintained for the sake of
This reduces server traffic, resulting in a lower security.
stress on your server. - Because there is no support for network
- Visitors get a quick response - they don't have to applications in Js, it cannot be used.
wait for the page to reload to discover if they've - Multithreading and multiprocessing are not
forgotten something. available in Js.
- Increase interactivity - You may make interfaces - Js is another lightweight, interpreted
that react when the user hovers over them or uses programming language that can be used to add
the keyboard to activate them. interactivity to static HTML pages.
- Richer Appearance - You can utilize JavaScript
to incorporate stuff like drag and drop elements to
allow your website users to glide the Rich
Appearance.
Table 19: Pros and cons of JavaScript

Python
Python is an interpreted programming language established by Guido van Rossum in 1990. It is regarded
as a programming language with a highly attractive appearance, a simple structure, and is easy to learn for
beginners.

Figure 74: Python


In an interview, Guido van Rossum stated that Python's structure allows users to create code with the
fewest possible keystrokes. Python is similar to Perl, Ruby, Scheme, Smalltalk, and Tcl in that it is totally
dynamically typed and employs automated memory allocation. Python is an open-source project run by
the Python Software Foundation, a non-profit organization.
Python’s advantages and disadvantages
Advantages Disadvantages
- Simplicity: Simple syntax is easy to understand - Python has no protected, private, or public
and learn for programmers. properties, and no do... Case loops using while and
- Speed: Python is a speedier programming switch.
language than PHP. - Python is faster than PHP but not as fast as C++
- Interactive: Interactive mode helps programmers or Java.
to debug code snippets in real time.
- Quality: The library is of great quality, and
Python includes a large database block that can
connect to all major commercial databases.
- Convenience:  Python is compiled and runs on
all major platforms nowadays, making it
extremely conve.
- Extensibility: Python's extensibility feature
allows programmers to create or customize tools
in order to increase job efficiency.
- GUI Programming: Assists in the creation of
natural and vivid mobile images.
Table 20: Pros and cons of Python

3. Database tools and techniques.


Every company need a well-designed database management system. Finding a well-organized, effective
system that enables your team to easily conduct data-related tasks is critical to your company's success.

MySQL
MySQL is an open source relational database management system (RDBMS) that works in a client-server
format. RDBMS is an acronym for Relational Database Management System. MySQL, Apache, and PHP
are all interwoven. MySQL uses databases to manage data. Many relational tables holding data can be
found in a database. The SQL language has the same access and code as MySQL. In the 1990s, MySQL
was released.

Figure 75: MySQL


History of formation and development of MySQL:
- The Swedish company MySQL AB developed MySQL in 1994.
- The first version of MySQL was released in 1995.
- Sun Microsystems Company acquired MySQL AB in 2008.
- In 2010, Oracle Corporation acquired Sun Microsystems. At that moment, the MySQL
development team forked MySQL into a separate branch called MariaDB. Oracle continues to
develop MySQL to version 5.5.
- 2013 MySQL release version 5.6
- 2015 MySQL release version 5.7
- MySQL is being developed to version 8.0
MySQL’s advantages and disadvantages
Advantages Disadvantages
- Ease of Use: MySQL is a high-performance, - Limitations: MySQL isn't meant to be a one-size-
stable, easy-to-use, cross-platform database with a fits-all solution, and it has restrictions in terms of
wide range of extremely strong utility functions. the features an application may use.
- High security: MySQL is highly suited for - Reliability: MySQL is less dependable than some
applications that require Internet access to DBMSs because of the way specific functions
databases while also providing a high level of (such as references, transactions, audits, and so on)
security. are handled.
- Multi-feature: Many SQL functions expected of - Limited capacity: If the amount of entries in your
a relational database management system are database grows, it will become increasingly
supported by MySQL, both directly and indirectly. difficult to retrieve your data; in this case, we will
- Scalable and powerful: MySQL can manage a need to take a variety of methods to speed up data
large amount of data and, if necessary, can be retrieval, such as load-sharing the database over
expanded. multiple servers or setting up a MySQL cache.
- Fast: The adoption of numerous standards has
enabled MySQL to operate more efficiently and
cost-effectively, resulting in faster execution
times.
Table 21: Pros and cons of MySQL

SQL
SQL stands for Structured Query Language, which is a specialized computer language used to manage
relational databases and execute various operations on the data stored within. Most RDBMS (Relational
Database Management Systems) employ SQL as its standard language, including Oracle, Informix,
Posgres, SQL Server, MySQL, MS Access, and Sybase.

Figure 76: SQL


Raymond FF. Boyce and Donald D. Chamberline at IBM created SQL as SEQUEL in the 1970s. SQL is
designed to modify and retrieve data stored in IBM's DBMS at this time. SQL was first commercially
implemented on VAX systems in June 1979 by Relational Software.
SQL’s advantages and disadvantages
Advantages Disadvantages
- No code needed: Without having to write any - Difficult interface: SQL has a complex interface
code, it is incredibly simple to manage database that makes it difficult for some users to access.
systems using ordinary SQL. - Not having full control: SQL programmers do
- Standards are clearly defined: When it comes to not have full control over the database due to
SQL, there are two standards to follow: ISO and hidden business rules.
ANSI, however there are none for non-SQL - Execution: Most SQL database programs have
databases. their own proprietary extensions in addition to the
- Mobility: SQL is a programming language that SQL standards.
may be used on PCs, servers, laptops, and even Price: The operating costs of some versions of
mobile phones. SQL make it difficult for some programmers to
- Interactive language: This language can interface access.
with databases and provide instant answers to
difficult problems.
- Multiple data views: Users can create distinct
views of the database structure and databases for
different users using the SQL language.
Table 22: Pros and cons of SQL

4. IDE.
IDE stands for Integrated Development Environment. An IDE is a software application that allows
programmers to design software in a complete manner.

Figure 77: IDE


By merging common software development operations such as editing source code, creating executables,
and debugging into a single tool, IDEs aid programmer productivity. A source code editor, build
automation tools, and a debugger are usually included in an IDE. Compilers, interpreters, and both are
included in some IDEs, such as NetBeans and Eclipse. SharpDevelop and Lazarus, for example, do not.
There are many different IDEs, catering to many different needs and types of code that programmers use.
There are IDEs that are born only to support a certain type of language, there are also types that can work
with many different programming languages.
 IDE supports multi-language: These are IDEs capable of supporting multiple programming
languages. Specifically:
- Eclipse: Supports C, C++, Python, Perl, PHP, Java, Ruby… This free open source editor is the
model for many other development frameworks. Eclipse started as a software development
environment for Java and has expanded through plugins.
- NetBeans: Supports Java, JavaScript, PHP, Python, Ruby, C, C++… It's also a free IDE with
open source code. You can install additional modules for support with other programming
languages.
- Komodo IDE: Supports Perl, Python, Tcl, PHP, Ruby, Javascript… This is a tool for businesses
with a slightly higher price tag.
- Aptana: Supports HTML, CSS, JavaScript, AJAX… through plugins. IDE is chosen by many
programmers to develop web applications.
- Geany: Supports C, Java, PHP, HTML, Python, Perl, Pascal... This is a highly customizable
environment through a wide variety of plugins.
 IDE supports one language: Besides IDEs that support multiple languages, there are also some
IDEs that cater only to programmers with a single language. These include: CodeLite and C-Free
for C/C++, Jikes and Jcreator for Java, IDLE for Python, and RubyMine for Ruby/Rails.5. CMS
 IDEs for mobile app development: IDEs specifically for mobile development include
Appcelerator's PhoneGap and Titanium Mobile. Many IDEs, especially multilingual ones, have
mobile development plugins. For example, Eclipse has this functionality.
 HTML IDE: Some of the most popular IDEs are those for developing HTML applications. These
include IDEs like HomeSite, DreamWeaver or FrontPage. They automate many tasks related to
website development.
 Cloud-Based IDE: Cloud-based IDE is gradually becoming the mainstream nowadays. The
capabilities of these IDEs are increasing rapidly, most of the major vendors will jump into this
field to come up with competitive products.
Cloud IDEs allow developers to access their code from anywhere. Eg:
- Nitrous is a cloud IDE that supports Ruby, Python, Node.js…
- Cloud9 supports over 40 programming languages, including PHP, Ruby, Python, JavaScript with
Node.js and Go.
- Heroku is a cloud-based development platform as a service (PaaS), which supports multiple
programming languages.
 Microsoft or Apple ecosystem-specific IDE:
- Visual Studio: Supports Visual C++, VB.NET, C#, F#… Visual Studio is an IDE from Microsoft
and is designed to create applications on the Microsoft platform.
- MonoDevelop: Supports C/C++, Visual Basic, C# and .NET languages.
- Xcode: Supports the Objective-C and Swift programming languages, Cocoa and Cocoa Touch
APIs. This IDE is specialized for creating applications on Mac and iOS. It includes an iPhone/iPad
emulator and a GUI builder.
- Espresso: Supports HTML, CSS, XML, JavaScript and PHP. This is a tool specifically for web
developers on Mac.
- Coda: Supports PHP, JavaScript, CSS, HTML, AppleScript and Cocoa API. Coda calls itself
“one-window development” for Mac users.

5. CMS.
CMS stands for "Content Management System," which is a method for managing the content needed to
construct a website, such as graphics and text. CMS is simple to use even for individuals who are new to
web development and do not have considerable knowledge of HTML or CSS,...

Figure 78: CMS


CMS is divided into 3 big categories:
- Small-scale CMS: you can use it for free and immediately.
- Medium-sized CMS: this system is mainly provided by companies to use and mostly for a fee.
- Large-scale CMS: this system can add functions suitable for use, and is widely applied in websites.
Besides the above types, there are also CMS types suitable for each use purpose as follows:
- E-commerce system: CMS used for shopping websites.
- Blog system: CMS used to update blog posts.
- Community system: CMS used for SNS or websites for company employees.
- Portal system: CMS to develop administrative website and corporate website.
CMS’s Advantages and disadvantages.
Advantages Disadvantages
- It is possible to create a website easily without - Function is fixed: Because CMS has fixed
any deep understanding: Because CMS has many functionality, it is difficult to customize freely,
templates that are not as complicated as HTML, moreover it is not suitable to use when you want to
you can save a lot of time if you use them. create campaign pages. On the other hand, you
- There is a connection to SEO: When using CMS, also need to spend time to be able to master the
you can update your website easily and quickly, so functions of the CMS, so it will not be effective as
the frequency of updates will be increased. soon as you start using it.
- Reduce costs and shorten implementation time: - Security issues: CMS basically works through
CMS will help work more efficiently, avoiding the Internet, so it also faces risks such as network
waste because the work content of designers and attacks, unauthorized access and information
content creators is more transparent. Besides, leakage, etc. Especially with open source CMS, it
CMS will also help cut down on time for building is very vulnerable to attack. due to poor security.
website layouts as it can manage page layout In addition, it also does not have support services,
adjustments by automatically,... so there may be delays in handling when problems
occur. Paid CMS is no exception, so you need to
confirm before using
- Issues with migrating existing content: When the
new CMS application comes to work, it is
imperative that you migrate the important content
that is already there. If the amount of content is
large, it will take a lot of time and effort to
implement. In addition, CMS is updating content
on the internet, so whether it is a paid or free
CMS, it does not save data locally. Therefore, if
you lose data, it is difficult to recover, so it is
necessary to backup data regularly.
Table 23: Pros and cons of CMS
References
Admin, 2020. THIETKEDALAT. [Online]
Available at: https://thietkewebdalat.net/blog/javascript-la-gi/
[Accessed 14 April 2022].
Anon., 2019. Free PHP Editor. [Online]
Available at: http://free-php-editor.com/php-la-gi/#1_PHP_la_gi
[Accessed 14 April 2022].
Anon., 2021. GeeksforGeeks. [Online]
Available at: https://www.geeksforgeeks.org/frontend-vs-backend/
[Accessed 11 April 2022].
Anon., 2021. U N I C A. [Online]
Available at: https://unica.vn/blog/uu-nhuoc-diem-cua-seo-lam-sao-khai-thac-seo-toi-da
[Accessed 14 April 2022].
Anon., n.d. ApecSoft. [Online]
Available at: https://apecsoft.asia/ngon-ngu-lap-trinh-python-d195
[Accessed 14 April 2022].
Anon., n.d. Got It. [Online]
Available at: https://vn.got-it.ai/blog/ide-la-gi-ban-da-biet-6-loai-ide-nay
[Accessed 14 April 2022].
Anon., n.d. Michigan Tech. [Online]
Available at: Các công cụ và kỹ thuật Front End.
[Accessed 14 April 2022].
Anon., n.d. Mona Media. [Online]
Available at: https://mona.media/laravel-la-gi/
[Accessed 14 April 2022].
Anon., n.d. MONA MEDIA. [Online]
Available at: https://mona.media/dns-la-gi/
[Accessed 07 April 2022].
Anon., n.d. Quantrimang. [Online]
Available at: https://quantrimang.com/danh-gia-microsoft-visual-studio-code-171374
[Accessed 14 April 2022].
Anon., n.d. TOPDev. [Online]
Available at: https://topdev.vn/blog/web-server/#web-server-la-gi
[Accessed 10 April 2022].
Bao, M., 2021. MATBAO. [Online]
Available at: https://wiki.matbao.net/mysql-la-gi-huong-dan-toan-tap-ve-mysql/#:~:text=%C6%AFu
%20%C4%91i%E1%BB%83m%20v%C3%A0%20nh%C6%B0%E1%BB%A3c%20%C4%91i%E1%BB
%83m%20c%E1%BB%A7a%20MySQL,-MySQL%20c%C3%B3%20kh%C3%A1&text=
%C4%90%E1%BB%99%20b%E1%BA%A3o%20m%E1%BA%ADt%20ca
[Accessed 14 April 2022].
Da, T., n.d. WIKI HTTL. [Online]
Available at: https://httl.com.vn/wiki/cong-cu-tim-kiem-la-gi/
[Accessed 14 April 2022].
Deed, I., n.d. PANGEA. [Online]
Available at: https://www.pangea.ai/dev-web-development-resources/best-practices/
[Accessed 14 April 2022].
G., H., 2022. HOSTINGER. [Online]
Available at: https://www.hostinger.vn/huong-dan/apache-la-gi-giai-thich-cho-nguoi-moi-bat-dau-hieu-
ve-apache-web-server#Apache_Web_Server_hoat_dong_nhu_the_nao
[Accessed 10 April 2022].
Giang, 2021. Bizfly Cloud. [Online]
Available at: https://bizflycloud.vn/tin-tuc/html-la-gi-20211119162558126.htm
[Accessed 14 April 2022].
Hưng, N., 2021. VIETNIX. [Online]
Available at: https://vietnix.vn/he-dieu-hanh-la-gi/#he-dieu-hanh-la-gi
[Accessed 10 April 2022].
hostingviet, n.d. HOSTINGVIET. [Online]
Available at: https://hostingviet.vn/wix-la-gi
[Accessed 12 April 2022].
Huynh, T., 2021. Thegioididong. [Online]
Available at: Trang Huỳnh
[Accessed 12 April 2022].
Murtaza, A., 2021. Creative Tim. [Online]
Available at: https://www.creative-tim.com/blog/educational-tech/benefits-frameworks-development/
[Accessed 14 April 2022].
Nam, T. V., 2020. TOTOLINK. [Online]
Available at: https://www.totolink.vn/article/136-mo-hinh-osi-la-gi-chuc-nang-cua-cac-tang-giao-thuc-
trong-mo-hinh-osi.html
[Accessed 12 April 2022].
Nguyễn, T., 2021. Bizfly. [Online]
Available at: https://bizfly.vn/techblog/iis-la-gi.html
[Accessed 10 April 2022].
Nguyen, T., 2020. Bizfly. [Online]
Available at: https://bizfly.vn/techblog/sublime-text-la-gi-va-cac-tinh-nang-quan-trong-doi-voi-lap-trinh-
vien.html#sublime_text_co_uu_diem_gi
[Accessed 14 April 2022].
Nguyen, T., 2021. Bizfly. [Online]
Available at: https://bizfly.vn/techblog/squarespace-la-gi.html
[Accessed 13 April 2022].
Nhi, H., n.d. TINO GROUP. [Online]
Available at: https://wiki.tino.org/phan-cung-may-chu-la-gi/#ftoc-heading-16
[Accessed 09 April 2022].
Semtek, 2020. SEMTEK. [Online]
Available at: https://www.semtek.com.vn/protocols-la-gi/#1_Protocols_la_gi
[Accessed 09 April 2022].
S, N., 2020. TLINK.VN. [Online]
Available at: https://tlink.vn/he-dieu-hanh-server/
[Accessed 09 April 2022].
Vietnam, G. I., 2021. Got It. [Online]
Available at: https://vn.got-it.ai/blog/tim-hieu-ve-nodejs-va-nhung-uu-nhuoc-diem-cua-nodejs
[Accessed 14 April 2022].

Figure 1: DNS.................................................................................................................................................5
Figure 2: DNS works......................................................................................................................................5
Figure 3: Internet protocol..............................................................................................................................7
Figure 4: Server hardware............................................................................................................................10
Figure 5: Server board..................................................................................................................................11
Figure 6: CPU...............................................................................................................................................12
Figure 7: Ram...............................................................................................................................................12
Figure 8: Hard Drive.....................................................................................................................................13
Figure 9: Raid controller...............................................................................................................................13
Figure 10: Power Supply Unit......................................................................................................................14
Figure 11: Operating systems.......................................................................................................................14
Figure 12: Operating systems.......................................................................................................................15
Figure 13: Main components........................................................................................................................15
Figure 14: Functions of the operating system...............................................................................................16
Figure 15: Windows Server..........................................................................................................................17
Figure 16: Mac OS........................................................................................................................................18
Figure 17: Linux...........................................................................................................................................18
Figure 18: Web server..................................................................................................................................19
Figure 19: Web Server Works......................................................................................................................20
Figure 20: Web server Apache.....................................................................................................................20
Figure 21: Web server IIS.............................................................................................................................21
Figure 22: Nginx...........................................................................................................................................22
Figure 23: Front-end & Back-end.................................................................................................................24
Figure 24: Front-End developers..................................................................................................................24
Figure 25: Front-end programming language...............................................................................................25
Figure 26: HTML.........................................................................................................................................25
Figure 27: CSS..............................................................................................................................................26
Figure 28: Java Script...................................................................................................................................26
Figure 29: AngularJS....................................................................................................................................27
Figure 30: React.js........................................................................................................................................27
Figure 31: Bootstrap.....................................................................................................................................28
Figure 32: jQuery..........................................................................................................................................28
Figure 33: SASS...........................................................................................................................................28
Figure 34: Flutter..........................................................................................................................................29
Figure 35: Back-end developer.....................................................................................................................29
Figure 36: PHP.............................................................................................................................................30
Figure 37: C++..............................................................................................................................................30
Figure 38: Java..............................................................................................................................................31
Figure 39: Python.........................................................................................................................................31
Figure 40: Java Script...................................................................................................................................31
Figure 41: Node.js........................................................................................................................................32
Figure 42: Relationships between front-end and back-end..........................................................................33
Figure 43: OSI model...................................................................................................................................33
Figure 44: Connection-oriented....................................................................................................................34
Figure 45: Connectionless............................................................................................................................34
Figure 46: Application Layer........................................................................................................................35
Figure 47: Presentation Layer.......................................................................................................................35
Figure 48: Session Layer..............................................................................................................................36
Figure 49: Transport Layer...........................................................................................................................36
Figure 50: Network Layer............................................................................................................................37
Figure 51: Data Link Layer..........................................................................................................................37
Figure 52: Physical Layer.............................................................................................................................38
Figure 53: Sgin Up........................................................................................................................................40
Figure 54: Two options for building a website provided by Wix.................................................................40
Figure 55: WIx ADI......................................................................................................................................41
Figure 56: WIx Editor...................................................................................................................................41
Figure 57: WordPress...................................................................................................................................42
Figure 58: WordPress interface early versions.............................................................................................43
Figure 59: SquareSpace................................................................................................................................44
Figure 60: Custom-built websites.................................................................................................................45
Figure 61: ReactJS........................................................................................................................................46
Figure 62: Angular........................................................................................................................................47
Figure 63: jQuery..........................................................................................................................................48
Figure 64: Django.........................................................................................................................................49
Figure 65: Laravel.........................................................................................................................................50
Figure 66: Nodejs.........................................................................................................................................51
Figure 67: Search Engines............................................................................................................................54
Figure 68: Search Engine Global Search Market Share in 2014..................................................................55
Figure 69: Google Search.............................................................................................................................56
Figure 70: Yahoo! Search.............................................................................................................................57
Figure 71: Bing Search.................................................................................................................................57
Figure 72: Baidu Search...............................................................................................................................58
Figure 73: SEO.............................................................................................................................................59
Figure 74: Sublime Text...............................................................................................................................61
Figure 75: HTML.........................................................................................................................................63
Figure 76: Visual Studio Code.....................................................................................................................64
Figure 77: PHP.............................................................................................................................................65
Figure 78: JavaScript....................................................................................................................................66
Figure 79: Python.........................................................................................................................................67
Figure 80: MySQL........................................................................................................................................68
Figure 81: SQL.............................................................................................................................................69
Figure 82: IDE..............................................................................................................................................70
Figure 83: CMS............................................................................................................................................72

Table 1: Pros and cons of Apache Web Server............................................................................................21


Table 2: Pros and cons of IIS........................................................................................................................22
Table 3: Pros and cons of NGINX................................................................................................................23
Table 4: Summary of the function of protocol layers in OSI.......................................................................38
Table 5: Pros and cons of WIx.....................................................................................................................42
Table 6: Pros and cons of WordPress...........................................................................................................43
Table 7: Pros and cons of Squarespace.........................................................................................................44
Table 8: Differents between online website creation tools and custom-built website..................................46
Table 9: Pros and cons of React...................................................................................................................47
Table 10: Pros and cons of Angular.............................................................................................................48
Table 11: Pros and cons of jQuery...............................................................................................................48
Table 12: Pros and cons of Django...............................................................................................................49
Table 13: Pros and cons of Laravel..............................................................................................................50
Table 14: Pros and cons of Nodejs...............................................................................................................52
Table 15: Pros and cons of SEO...................................................................................................................60
Table 16: Pros and cons of HTML...............................................................................................................63
Table 17: Pros and cons of Visual Studi Code.............................................................................................64
Table 18: Pros and cons of PHP...................................................................................................................66
Table 19: Pros and cons of JavaScript..........................................................................................................67
Table 20: Pros and cons of Python...............................................................................................................68
Table 21: Pros and cons of MySQL.............................................................................................................69
Table 22: Pros and cons of SQL...................................................................................................................70
Table 23: Pros and cons of CMS..................................................................................................................73

You might also like