WEB SYSTEM AND

TECHNOLOGY

IT 315 – Track Elective 3

Interactive Web Design
Prof: Leo P. Paliuanan
leopaliuanan@csu.edu.ph

UNIT 3 – Web servers

Content:

a. What is a webserver
b. Static and dynamic web server
c. How do web servers work
d. How client and server communicate
e. Static vs. dynamic content
f. types of web servers
g. The XAMPP web server
h. Installation and Testing

What is a web server?

 The term web server can refer to hardware or software, or both of them working
together.

A web server stores and delivers the content for a website – such as text, images,
video, and application data – to clients that request it. The most common type of client
is a web browser program, which requests data from your website when a user clicks
on a link or downloads a document on a page displayed in the browser.

1. On the hardware side, a web server is a computer that stores web server software and a
website's component files. (for example, HTML documents, images, CSS stylesheets, and
JavaScript files) A web server connects to the Internet and supports physical data interchange
with other devices connected to the web.

2. On the software side, a web server includes several parts that control how web users access
hosted files. At a minimum, this is an HTTP server. An HTTP server is software that
understands URLs (web addresses) and HTTP (the protocol your browser uses to view
webpages). An HTTP server can be accessed through the domain names of the websites it
stores, and it delivers the content of these hosted websites to the end user's device.
At the most basic level, whenever a browser needs a file that is hosted on a web server,
the browser requests the file via HTTP. When the request reaches the correct
(hardware) web server, the (software) HTTP server accepts the request, finds the
requested document, and sends it back to the browser, also through HTTP. (If the
server doesn't find the requested document, it returns a 404 response instead.)

To publish a website, you need either a static or a dynamic web server.

A static web server, or stack, consists of a computer (hardware) with an HTTP server
(software). We call it "static" because the server sends its hosted files as-is to your
browser.

A dynamic web server consists of a static web server plus extra software, most
commonly an application server and a database. We call it "dynamic" because the
application server updates the hosted files before sending content to your browser via
the HTTP server.

For example, to produce the final webpages you see in the browser, the application
server might fill an HTML template with content from a database. Sites like MDN or
Wikipedia have thousands of webpages. Typically, these kinds of sites are composed of
only a few HTML templates and a giant database, rather than thousands of static HTML
documents. This setup makes it easier to maintain and deliver the content.
 How do web servers work
To review: to fetch a webpage, your browser sends a request to the web server, which
searches for the requested file in its own storage space. Upon finding the file, the server
reads it, processes it as-needed, and sends it to the browser. Let's look at those steps in
more detail.

Hosting files
First, a web server has to store the website's files, namely all HTML documents and their
related assets, including images, CSS stylesheets, JavaScript files, fonts, and video.

Technically, you could host all those files on your own computer, but it's far more
convenient to store files all on a dedicated web server because:

 A dedicated web server is typically more available. (up and running)

 Excluding downtime and systems troubles, a dedicated web server is always connected to the
Internet.
 A dedicated web server can have the same IP address all the time. This is known as
a dedicated IP address. (not all ISPs provide a fixed IP address for home lines)
 A dedicated web server is typically maintained by a third-party.

Communicating through HTTP

Second, a web server provides support for HTTP (Hypertext Transfer Protocol). As its
name implies, HTTP specifies how to transfer hypertext (linked web documents)
between two computers.

A Protocol is a set of rules for communication between two computers. HTTP is a

textual, stateless protocol.

Textual

All commands are plain-text and human-readable.

Stateless

Neither the server nor the client remember previous communications. For example, relying
on HTTP alone, a server can't remember a password you typed or remember your progress
on an incomplete transaction. You need an application server for tasks like that.
 HTTP provides clear rules for how a client and server communicate.

 Usually only clients make HTTP requests, and only to servers. Servers respond to a client's
HTTP request. A server can also populate data into a client cache, in advance of it being
requested, through a mechanism called a server push.
 When requesting a file via HTTP, clients must provide the file's URL.
 The web server must answer every HTTP request, at least with an error message.
On a web server, the HTTP server is responsible for processing and answering incoming
requests.

1. Upon receiving a request, an HTTP server first checks if the requested URL matches an existing
file.
2. If so, the web server sends the file content back to the browser. If not, an application server
builds the necessary file.
3. If neither process is possible, the web server returns an error message to the browser, most
commonly 404 Not Found. The 404 error is so common that some web designers devote
considerable time and effort to designing 404 error

pages.

Static vs. dynamic content

Roughly speaking, a server can serve either static or dynamic content. Remember that
the term static means "served as-is". Static websites are the easiest to set up, so we
suggest you make your first site a static site.
The term dynamic means that the server processes the content or even generates it on
the fly from a database. This approach provides more flexibility, but the technical stack
is more complex, making it dramatically more challenging to build a website.

Types of Web Servers

Web servers are at the very core of the concept of web hosting. A web server is
always connected to the internet and each of these connected servers has a certain
unique address.

The hosting providers are able to manage multiple domains on a single server because
of the web servers.

Different types of web servers are available in the market for the developers to choose
from, depending upon their preferences. The most prominent types of Web Servers
available in the market are:

1. Apache HTTP Server Web Server

2. Internet Information Services (IIS) Web Server
3. Lighttpd Web Server
4. Sun Java System Web Server
5. Jigsaw Server Web Server
6. LiteSpeed server Web Server
7. Node.js Web Server

APACHE HTTP WEB SERVER

Developed by the Apache Software Foundation, the Apache HTTP Web Server is one of
the most popular Web Servers.
 It is a free and open-source cross-platform web server software that was released
under the terms of Apache License 2.0.

The key benefit of the Apache HTTP Web Server is that it tends to support almost all
types of operating systems; be it Windows, Linux, Mac OS, Unix, FreeBSD and many
more.

It is because of this that approximately around 60% of machines are run on the Apache
HTTP Web Server.

Another distinguishing feature of the Apache Web Server is that it allows for a certain
degree of customization very easily.

It owes this feature to its modular structure and the fact that it is open-source.

This implies that one has the freedom and scope to add new modules to the server as
per his or her convenience and make any required modifications.

Some other noteworthy features of the Apache HTTP Server are:

 It can be easily installed on multiple platforms and function properly.

 Out of all the types of web servers available, the Apache HTTP servers are much more stable and
easier in terms of functionality, especially the latest released versions which are capable of handling a
distinguishingly greater number of client requests when compared to the other versions.

INTERNET INFORMATION SERVICES WEB SERVER (IIS)

The Internet Information Services Web Server is an extensible Web Server by Microsoft
which was created with the Windows NT family.
It is because of this that Microsoft maintains this product and it works with each and
every Windows Operating System Platform.

The Internet Information Services Web Server supports the HTTP, HTTP/2, HTTPS,
FTP, SMTP, and NNTP but unlike Apache is not open-source.

This makes the process of customization a little complicated and modifications are not
that easy.

LIGHTTPD WEB SERVER

The Lighttpd Web Server is another open-source Web Server. This Web server along
with being very flexible and secure is specifically designed and optimized for high
performance, speed-critical environments.

Lighttpd gets its name from a portmanteau of ‘light’ and ‘httpd’ and has been
nicknamed ‘lighty’. Lighttpd defines itself in terms of security, speed, compliance, and
flexibility.

A distinguishing feature of the Lighttpd Web Server is the efficiency that it offers
especially in the case of servers suffering from load problems.
SUN JAVA SYSTEM WEB SERVER
Sun Microsystems used the brand Sun Java System to market computer software and
this brand superseded the Sun ONE.

Basically, the Sun Java System Web Server is a web server from Sun that runs under
Windows, Solaris and HP- UX and is known for supporting the JavaServer Pages (JSP)
technology, Server- Side JavaScript (SSJS) and Java Servlets.

The Sun Java Web Server can be distinguished as a reliable, easy-to-use and secure
web server specifically designed for large or medium sites.

JIGSAW WEB SERVER

The Jigsaw Web Server is an object-oriented, full-functioning Web Server that offers an
array of distinguishing features along with an advanced architecture that is written in
Java.

The birth of the Jigsaw Web Server was primarily for the purpose of experimentation of
new technology and was not intended to be a full-fledged release.

But the later versions of the Web Server took a leap and focused more on the
development of better features.

LITESPEED WEB SERVER

The LiteSpeed Web Server which was released in 2003 became one of the most popular
Web Servers in a short span of few years.

It was developed by the privately held LiteSpeed Technologies and was a web server
that came with Open Source variants as well.
The LiteSpeed Web Servers are quite compatible with the features of the Apache Web
servers since they use similar configurations.

Owing to this feature, the LiteSpeed Web Servers are capable of directly loading the
Apache configuration files and can replace all Apache functions.

NODE.JS WEB SERVER

Node.js is known for executing the JavaScript code outside of a browser. It is an open-
source, cross-platform, JavaScript runtime environment and enables developers to use
JavaScript for writing commands.

Some of the prominent features of Node.js Web Server are:

 Owing to the fact that it is built on Google Chrome’s V8 JavaScript Engine, it is very fast
in code execution.
 Even though it is based on the Single-threaded model, the Node.js Web Server is highly
scalable which gives it an upper hand over the other traditional Web Servers.

Every client comes with a different set of requirements and it is based on these
requirements that the Web Hosting companies decide which Web servers to opt for.
 The XAMPP Web SERVER
XAMPP is the title used for a compilation of free software. The name is an acronym,
with each letter representing one of the five key components. The software packet
contains the web server Apache, the relational database management system MySQL
(or MariaDB), and the scripting languages Perl and PHP. The initial X stands for the
operating systems that it works with: Linux, Windows, and Mac OS X.

 Apache: ihe open source web server Apache is the most widely used server worldwide for
delivery of web content. The server application is made available as a free software by the
Apache Software Foundation.

 MySQL/MariaDB: in MySQL, XAMPP contains one of the most popular relational database
management systems in the world. In combination with the web server Apache and the scripting
language PHP, MySQL offers data storage for web services. Current XAMPP versions have
replaced MySQL with MariaDB (a community-developed fork of the MySQL project, made by the
original developers).

 PHP: the server-side programming language PHP enables users to create dynamic websites or
applications. PHP can be installed on all platforms and supports a number of diverse database
systems.

 Perl: the scripting language Perl is used in system administration, web development, and
network programming. Like PHP, Perl also enables users to program dynamic web applications.

Alongside these core components, this free-to-use Apache distribution contains some
other useful tools, which vary depending on your operating system. These tools include
the mail server Mercury, the database administration tool phpMyAdmin, the web
analytics software solutions Webalizer, OpenSSL, and Apache Tomcat, and the FTP
servers FileZilla or ProFTPd.

Application areas

An XAMPP server can be installed and used with a single executable file quickly and easily,
functioning as a local test system for Linux, Windows, and Mac OS X. The software packet
contains the same components that are found on common web servers. Developers have
the chance to test out their projects locally and to transfer them easily to productive
systems. But XAMPP isn’t suitable to use as a public server, because many safety
features have been deliberately left out to simplify and speed up the system for
testing.
Installing XAMPP
Our XAMPP tutorial will take you through the installation process for the software package
on Windows. If you’re using Linux or Mac OS X, then the steps listed below for the
installation process may differ.

Step 1: Download
XAMPP is a release made available by the non-profit project Apache Friends. Versions
with PHP 5.5, 5.6, or 7 are available for download on the Apache Friends website.

Step 2: Run .exe file

Once the software bundle has been downloaded, you can start the installation by double
clicking on the file with the ending .exe.

Step 3: Deactivate any antivirus software

Since an active antivirus program can negatively affect the installation process, it’s
recommended to temporarily pause any antivirus software until all XAMPP components
have successfully been installed.

Before
installing XAMPP, it is advisable to disable the anti-virus program temporarily

Step 4: Deactivate UAC

User Account Control (UAC) can interfere with the XAMPP installation because it limits
writing access to the C: drive, so we recommend you deactivate this too for the duration
of the installation process. To find out how to turn off your UAC, head to the Microsoft
Windows support pages.
 User
account control can affect the installation of XAMPP

Step 5: Start the setup wizard

After you’ve opened the .exe file (after deactivating your antivirus program(s) and taken
note of the User Account Control, the start screen of the XAMPP setup wizard should
appear automatically. Click on ‘Next’ to configure the installation settings.

You can
start the setup on the startup screen
Step 6: Choose software components
Under ‘Select Components’, you have the option to exclude individual components of the
XAMPP software bundle from the installation. But for a full local test server, we
recommend you install using the standard setup and all available components. After
making your choice, click ‘Next’.

In the
dialog window entitled 'select components', you can choose the software components
before installation

Step 7: Choose the installation directory

In this next step, you have the chance to choose where you’d like the XAMPP software
packet to be installed. If you opt for the standard setup, then a folder with the name
XAMPP will be created under C:\ for you. After you’ve chosen a location, click ‘Next’.
 For the
next step, you need to select the directory where XAMPP should be installed

Step 8: Start the installation process

Once all the aforementioned preferences have been decided, click to start the installation.
The setup wizard will unpack and install the selected components and save them to the
designated directory. This process can take several minutes in total. You can follow the
progress of this installation by keeping an eye on the green loading bar in the middle of
the screen.
According to the default settings, the selected software components are unpacked and
installed in the target folder

Step 9: Windows Firewall blocking

Your Firewall may interrupt the installation process to block the some components of the
XAMPP. Use the corresponding check box to enable communication between the Apache
server and your private network or work network. Remember that making your XAMPP
server available for public networks isn’t recommended.

Step 10: Complete installation

Once all the components are unpacked and installed, you can close the setup wizard by
clicking on ‘Finish’. Click to tick the corresponding check box and open the XAMPP Control
Panel once the installation process is finished.
 By clicking
on 'finish', the XAMPP Setup Wizard is completed

The XAMPP Control Panel

Controls for the individual components of your test server can be reached through the
XAMPP Control Panel. The clear user interface logs all actions and allows you to start
or stop individual modules with a single. The XAMPP Control Panel also offers you various
other buttons, including:

 Config: allows you to configure the XAMPP as well as the individual components
 Netstat: shows all running processes on the local computer
 Shell: opens a UNIX shell
 Explorer: opens the XAMPP folder in Windows Explorer
 Services: shows all services currently running in the background
 Help: offers links to user forums
 Quit: closes the XAMPP Control Panel
 In the Control
Panel, you can start and stop individual modules
Starting modules

Individual modules can be started or stopped on the XAMPP Control Panel through the
corresponding buttons under ‘Actions’. You can see which modules have been started
because their names are highlighted green under the ‘Module’ title.

An
active module is marked in green in the Control Panel

If a module can’t be started as a result of an error, you’ll be informed of this straight

away in red font. A detailed error report can help you identify the cause of the issue.
 Setting up XAMPP

A common source of error connected with Apache is blocked ports. If you’re using the
standard setup, then XAMPP will assign the web server to main port 80 and the SSL port
443. The latter of these particularly is often blocked by other programs. In the example
above, it’s likely that the Tomcat port is being blocked, meaning the web server can’t be
started. There are three ways to solve this issue:

 Change the conflicting port: Let’s assume for the sake of example that the instant messenger
program Skype is blocking SSL port 443 (this is a common problem). One way to deal with this
issue is to change Skype’s port settings. To do this, open the program and navigate via ‘Actions’,
‘Options’, and ‘Advanced’, until you reach the ‘Connections’ menu. You should find a box checked
to allow Skype access to ports 80 and 443. Deselect this checkbox now.

 Change the XAMPP module port settings: Click the Config button for the module in question
and open the files httpd.conf and httpd-ssl.conf. Replace port number 80 in httpd.conf and port
number 443 in httpd-ssl.conf with any free ports, before saving the file data. Now click on the
general Config button on the right-hand side and select ‘Services and Ports Settings’. Customize
the ports for the module server to reflect the changes in the conf files.

 End the conflicting program: The simplest way to avoid port conflicts in the short term is to
end the conflicting program (Skype in this case). If you restart Skype after your XAMPP module
servers are already running, it will select a different port and your issue will be resolved.
Modules that can’t be started will be shown in red. The user will also receive an error report to
help solve the problem
Module administration

You have an ‘Admin’ option located on the Control Panel for every module in your XAMPP.

 Click on the Admin button of your Apache server to go to the web address of your web server.
The Control Panel will now start in your standard browser, and you’ll be led to the dashboard
of your XAMPP’s local host. The dashboard features numerous links to websites for useful
information as well as the open source project BitNami, which offers you many different
applications for your XAMPP, like WordPress or other content management systems. Alternatively,
you can reach the dashboard through localhost/dashboard/.

By clicking on the 'admin' button of the Apache module, the user will be redirected to the local
dashboard of XAMPP

 You can use the Admin button of your database module to open phpMyAdmin. Here, you can
manage the databases of your web projects that you’re testing on your XAMPP. Alternatively,
you can reach the administration section of your MySQL database via localhost/phpmyadmin/.
The web project’s databases are managed by the user in phpMyAdmin (accessible via the 'Admin'
button in the database module)
Testing your XAMPP installation

To check whether your test server is installed and configured correctly, you have the
option to create a PHP test page, store them on your XAMPP’s local host, and retrieve
them via the web browser.

 Open the XAMPP directory through the ‘Explorer’ button in the Control Panel and choose the
folder htdocs (C:\xampp\htdocs for standard installations). This directory will store file data
collected for web pages that you test on your XAMPP server. The htdocs folder should already
contain data to help configuration of the web server. But you should store your own projects in
a new folder (like ‘Test Folder’ for example).

 You can create a new PHP page easily by using the following content in your editor and storing
it as test.php in your ‘ test’ folder (C:\xampp\htdocs\test):

<html>
<head>
<title>PHP-Test</title>
</head>
<body>
<?php echo '<p>Hello World</p>'; ?>
</body>
</html>

 The last step now is to open your web browser and load your PHP page
via localhost/test/test.php. If your browser window displays the words ‘Hello World’, then you’ve
successfully installed and configured your XAMPP.