2 Integrate Database With A Website
2 Integrate Database With A Website
Administration
Level III
Based on December, 2021 Version-IV Occupational
Standard (OS)
s
Acknowledgment........................................................................................................................1
Acronym.....................................................................................................................................2
Self-check 1..............................................................................................................................43
Unit Two: Retrieve data from database and display on web pages................................44
Self-check 2..............................................................................................................................49
Self-check 3..............................................................................................................................57
Acknowledgment
Ministry of Labor and Skills wish to extend thanks and appreciation to the many
representatives of TVT instructors and respective industry experts who donated their time
and expertise to the development of this Teaching, Training and Learning Materials
(TTLM).
To complete the unit requirements safely and effectively, the individual must:
Describe a database structure
Outline internet technology as it relates to the use of databases
Identify and apply programming control structures, including object-oriented
programming and structured query language (SQL)
Module Instruction
For effective use this modules trainees are expected to follow the following module
instruction:
1. Read the information written in each unit
2. Accomplish the Self-checks at the end of each unit
3. Perform Operation Sheets which were provided at the end of units
4. Do the “LAP test” giver at the end of each unit and
5. Read the identified reference book for Examples and exercise
This unit will also assist you to attain the learning outcomes stated in the cover page.
Specifically, upon completion of this learning guide, you will be able to:
Web database applications may be created using various approaches. However, there are a
number of components that will form essential building blocks for such applications. In other
words, a Web database application should comprise the following four layers (i.e.
components):
Browser layer
Application logic layer
Database connection layer
Database layer
The browser is the client of a Web database application, and it has two major functions. First,
it handles the layout and display of HTML documents. Second, it executes the client-side
extension functionality such as Java, JavaScript, and ActiveX (a method to extend a
browser’s capabilities).
The three most popular browsers at the present are Mozilla Firefox (Firefox for short),
Google Chrome and Microsoft Edge.
All three browsers are graphical browsers. During the early days of the Web, a text-based
browser, called Lynx, was popular. As loading graphics over the Internet can be a slow and
time-consuming process, database performance may be affected. If an application requires a
speedy client and does not need to display graphics, then the use of Lynx may be considered.
All browsers implement the HTML standard. The discussion of HTML is beyond this
chapter, but you need to know that it is a language used to format data/documents to be
displayed on the Web.
Browsers are also responsible for providing forms for the collection of user input, packaging
the input, and sending it to the appropriate server for processing. For example, input can
include registration for site access, guest books and requests for information. HTML, Java,
JavaScript or ActiveX (for IE) may be used to implement forms.
Application logic layer
The application logic layer is the part of a Web database application with which a developer
will spend the most time. It is responsible for:
Collecting data for a query (e.g. a SQL statement).
Preparing and sending the query to the database via the database connection layer.
Retrieving the results from the connection layer.
Formatting the data for display.
Most of the application’s business rules and functionality will reside in this layer. Whereas
the browser client displays data as well as forms for user input, the application logic
component compiles the data to be displayed and processes user input as required. In other
This is the component which actually links a database to the Web server. Because manual
Web database programming can be a daunting task, many current Web database building
tools offer database connectivity solutions, and they are used to simplify the connection
process.
The database connection layer provides a link between the application logic layer and the
DBMS. Connection solutions come in many forms, such as DBMS net protocols, API
(Application Programming Interface [see note below]) or class libraries, and programs that
are themselves database clients. Some of these solutions resulted in tools being specifically
designed for developing Web database applications. In Oracle, for example, there are native
API libraries for connection and a number of tools, such as Web Publishing Assistant, for
developing Oracle applications on the Web.
The connection layer within a Web database application must accomplish a number of goals.
It has to provide access to the underlying database, and also needs to be easy to use, efficient,
flexible, robust, reliable and secure. Different tools and methods fulfill these goals to
different extents.
Note
An API consists of a set of interrelated subroutines that provide the functionality required to
develop programs for a target operating environment. For example, Microsoft provides
different APIs targeted at the construction of 16- and 32-bit
Windows applications. An API would provide functions for all aspects of system activity,
such as memory, file and process management. Specialized APIs are also supplied by
This is the place where the underlying database resides within the Web database application.
As we have already learned, the database is responsible for storing, retrieving and updating
data based on user requirements, and the DBMS can provide efficiency and security
measures.
In many cases, when developing a Web database application, the underlying database has
already been in existence. A major task, therefore, is to link the database to the Web (the
connection layer) and to develop the application logic layer.
Database gateways
A Web database gateway is a bridge between the Web and a DBMS, and its objective is to
provide a Web-based application the ability to manipulate data stored in the database. Web
database gateways link stateful systems (i.e. databases) with a stateless, connectionless
protocol (i.e. HTTP). HTTP is a stateless protocol in the sense that each connection is closed
once the server provides a response. Thus, a Web server will not normally keep any record
about previous requests. This results in an important difference between a Web-based client-
server application and a traditional client-server application:
There are a number of different ways to create Web database gateways. Generally, they can
be grouped into two categories: client-side solutions and server side solutions,
The client-side solutions include two types of approaches for connections: browser
extensions and external applications.
Browser extensions are add-ons to the core Web browser that enhance and augment the
browser’s original functionality. Specific methods include plug-ins for Firefox, Chrome and
IE, and ActiveX controls for IE. Also, all the three types of browsers (Firefox, Chrome and
IE) support Java and JavaScript languages (i.e. Java applets and JavaScript can be used to
extend browsers’ capabilities).
External applications are helper applications or viewers. They are typically existing database
clients that reside on the client machine and are launched by the Web browser in a particular
Web application. Using external applications is a quick and easy way to bring legacy
database applications online, but the resulting system is neither open nor portable. Legacy
database clients do not take advantages of the platform independence and language
independence available through many Web solutions. Legacy clients are resistant to change,
meaning that any modification to the client program must be propagated via costly manual
installations throughout the user base.
Server-side solutions
Server-side solutions are more widely adopted than the client-side solutions. A main reason
for this is that the Web database architecture requires the client to be as thin as possible. The
Web server should not only host all the documents, but should also be responsible for dealing
with all the requests from the client.
A web server is a computer system capable of delivering web content to end users
over the internet via a web browser.
How web servers work
The end user processes a request via a web browser installed on a web server. The
communication between a web server or browser and the end user takes place using
Hypertext Transfer Protocol (HTTP). The primary role of a web server is to store, process,
and deliver requested information or webpages to end users. It uses:
Physical Storage: All website data is stored on a physical web server to ensure its
safety. When an end user enters the URL of your website or searches it using a
One of the most common use cases for web servers is serving files necessary for rendering a
website in a browser. When you visit http://www.google.com, you begin with entering a
URL that starts a request over the internet. This request passes through multiple layers, one or
more of which will be a web server. This web server generates a response to your request,
which in this case is the Google website, specifically the homepage. Ideally, this happens
quickly and with 24/7 availability.
Web servers act as an intermediary between the backend and the frontend, serving up
resources. While the term “web server” can refer to either the software itself or the hardware
it exists on. A web server handles requests on the internet through HTTP and HTTPS
protocol, and is also called an HTTP server. A web server is distinct from other types of
servers in that it specializes in handling these HTTP and HTTPS requests, differentiating
itself from application servers and servers for other protocols
In practical terms, here are some personal projects that would involve a web server:
This list is by no means comprehensive, and a web server is not strictly limited in the data
types it can serve to an end user. For example, a web server that serves web API requests
often responds with data in a format such as JSON.
Web servers cater to an audience with expectations of speed, availability, reliability, and
more. They have a shared purpose of serving content on the internet, and in order to be
considered a viable web server solution, the following aspects must be considered:
Uptime: This refers to the time a web server is online and operational. Websites need
to be online at all times to serve users, so a high uptime is the goal. This also
translates to stability and predictability. When a user enters a URL or clicks a link to
your website, the expected page should load every time, and at any given time. The
only exceptions should be planned downtimes for updates or maintenance. A web
server that is buggy or crashes at random times adversely affects your users’
experience.
Speed: Your web pages should load as fast as possible. Users want their request
fulfilled immediately, otherwise you risk losing them. On a slow loading web page,
even if the user sits through the first load, every subsequent long load will
exponentially decrease their willingness to stay or visit again.
Concurrency: This refers to the handling of multiple requests coming in at the same
time. Having too many people trying to visit your website at once seems like a good
thing, but this becomes a real problem when load times slow down to a crawl and
Scalability: Scalability refers to either making your existing servers more powerful
through vertical scaling, or adding more servers to your setup through horizontal
scaling. As you grow your audience, you may reach a point where you need more than
one or two small web servers.
Ease of set up: Getting a project up and running quickly is key to the iteration of your
project. A straightforward and repeatable install process is important for the first web
server you set up, and the multiple web servers afterwards when you scale up.
Documentation: Web servers are complex. The most common setups will get you on
your feet quickly, but your needs will grow over time. Oftentimes you will need
features that are not as commonly used. When that time comes, good documentation
is essential to creating custom solutions for your needs.
Developer support: If the core developers are not committed to their own project,
you shouldn’t commit your project to theirs. This includes both plans for long term
support for their software, along with immediate short term support they provide in
the form of bug fixes and patches.
Community support: A core development team will handle most of the heavy lifting,
but a thriving community contributes to filling in the gaps. With open source projects,
this can mean contributions to the actual code base, but a strong community will also
answer your questions and help with your specific issues.
While web servers can offer different solutions, the solutions they offer stem from attempts to
address these same problems. These problems themselves evolve over time along with the
needs and expectations of the end user, making this a living and ever evolving list.
A web server can also perform several other functions, such as:
Store and protect website data: A web server can store and protect critical website
data from unauthorized users.
Control bandwidth to regulate network traffic: A web server can help eliminate
the downtime caused by high web traffic. Web hosts can set bandwidth to manage the
rate of data transmission over the internet and minimize the excess network traffic.
Server-side web scripting: The server-side web scripting feature enables users to
create dynamic web pages using scripting languages such as Ruby, Python, and PHP.
Virtual hosting: Web servers can also be used as virtual servers to run multiple
applications, websites, data, and other services.
Apache web server software: Apache web server or Apache HTTP server is an
open-source server that processes user requests and delivers web assets and content
via HTTP. This web server uses the MySQL database to store critical information in
an easily readable format. With the help of the PHP programming language, Apache
can create and serve dynamic web content.
IIS web server software: Microsoft Internet Information Service (IIS) web server is
also known as a Windows web server. It’s one of the most commonly used web
servers used on a Windows operating system. It is a versatile and stable web server
widely used to host ASP.NET web applications, static websites, and web applications
built on PHP. Although it has a built-in authentication option such as Windows,
ASP.NET, and Basic, it’s easier for Windows users to sign in to various web
applications using their domain account. Other built-in security features include TLS
certificate management, request logging, FTP-specific security options, and more.
Web server: The web server accepts and processes requests from end users for static website
content. It handles requests and responses via HTTP only. Web servers are generally helpful
in serving static content or static HTML webpages. It consumes fewer resources such as CPU
or memory compared to the application server and provides a runtime environment for web
applications.
Application server: The application server can deliver web content and dynamic content
required for displaying decision support, transaction results, or real-time analytics. However,
its primary role is to enable interaction between the end user and server-side application code.
These servers enhance interactive content or website components depending on the request.
Application servers use web containers. These servers use more resources compared to web
servers and provide the runtime environment for enterprise applications.
Optimizing a web server requires regular monitoring of web and application servers. Outlined
below are the few benefits of monitoring and optimizing your server:
XAMPP is a local server that you can install on your laptop/desktop to mimic an actual
web server.
It’s a completely free, open source Apache server distribution with MariaDB (formerly
MySQL), PHP, and Perl. XAMPP is available for all major operating systems, and is
extremely easy to install and use. This explains why it’s the most popular PHP
development environment.
1. Download XAMPP
2. Install XAMPP
3. Open the XAMPP Control Panel
4. Start Apache and MySQL Modules
Start off by downloading the latest version of XAMPP from Apache Friends website. The
current up-to-date version of XAMPP is 8.1.2 / PHP 8.1.2.
Note: If you’re using Linux or OSX, the installation steps are pretty much the same. Just
make sure to download the appropriate version of XAMPP for your OS.
You might get a UAC warning before installation. Click OK and continue.
You might be presented with a User Access Control (UAC) warning by Windows. Nothing to
worry much. Just make sure that you don’t install XAMPP under your Program Files
directory, as UAC can interfere with XAMPP’s writing permissions to this directory. The
default installation directory is C:\XAMPP. So, if you don’t change it, you should be good.
The XAMPP Control Panel sports a simple user interface that lists all the modules of your
local server. It allows you to Start/Stop individual modules, access their Admin area, Config
files, and Logs with just a single click. Its bottom section also displays all your actions and
errors (if any).
Apart from the options discussed above, the XAMPP Control Panel also features other
buttons on its right side:
Click the Start button beside Apache module. If everything’s set correctly, your Apache
server should start successfully under ports 83 and 443.
You can access your Apache server’s dashboard by clicking the Admin button beside it.
Alternatively, you can also reach it via http://localhost/dashboard/ URL in your browser.
You can access your phpMyAdmin dashboard by clicking the Admin button beside MySQL
module. Or you can simply go to http://localhost/phpmyadmin/ in your browser. Here, you
can manage the MariaDB (or MySQL) databases of your web projects.
This concludes the setup of XAMPP as your local development environment. It’s now ready
to host any PHP-based software (e.g. WordPress).
The best way to check whether your local server has been installed and configured correctly
is to create a PHP test page, place it in XAMPP’s localhost folder, and then try accessing it
via your browser.
Let’s do that now. Create a new folder called test in your C:\xampp\htdocs\ directory. This
directory can also be accessed easily by clicking the Explorer button in XAMPP Control
Panel and then going to htdocs folder.
Create a file called test.php with the code below and place it in C:\xampp\htdocs\test folder.
Operation Sheet 1.3.b Enable Internet Information Services (IIS) on a Windows computer
A template driven database access package, is another way to link a Web front end to
a database back end.
The approach
The most important benefit from using a template-driven package is speed of development.
Assuming an available package has been installed and configured properly, it takes as little
time as a few hours to create a Web site that displays information directly from the database.
The structures of templates are normally predetermined by vendors or third party developers.
As a result, they only offer a limited range of flexibility and customis ability. Package
vendors provide what they feel is important functionality, but, as with most off-the-shelf
tools, such software packages may not let you create applications requiring complex
operations.
Visual Web database building tools offer an interesting development environment for
creating Web database applications. For developers accustomed to point-and-click
application programming, these tools help speed the development process. For
instance, Visual Basic and/or Microsoft Access developers should find such a tool
intuitive and easy to use.
The approach
The architectures of visual building tools vary. In general, they include a user friendly GUI
(Graphical User Interface), allowing developers to build a Web database application with a
series of mouse clicks and some textual input. These tools also offer application management
so that a developer no longer needs to juggle multiple HTML documents and other API
programs manually.
At the end of a building session, the tool package can generate applications using various
techniques. Some applications are coded using ODBC; some use native database APIs for the
databases they support; and others may use database net protocols.
Some of these tools create their own API, which can be used by other developers. Some
generate code that works but can still be modified and customized by developers using
various traditional IDEs, compilers and debuggers.
A building tool may generate a CGI program or a Web server API program (such as NSAPI
and ISAPI). Some sophisticated tools even offer all the options. The developer can choose
what he/she wants.
Visual development tools can be of great assistance to developers who are familiar and
comfortable with visual application development techniques. They offer rapid application
development and prototyping, and an organized way to manage the application components.
Visual tools also shield the developer from low-level details of Web database application
development. As a result, a developer can create a useful Web application without the need
to know what is happening in the code levels.
Depending on the sophistication of the package used, the resulting programs may be slower
to execute than similar programs coded by an experienced programmer. Visual application
building tools, particularly Object-oriented ones, tend to generate fat programs with a lot of
unnecessary sub-classing.
Another potential drawback is cost. A good visual tool may be too expensive for a small one-
off development budget.
HTML are markup languages, basically they are set of tags like <html>, <body>, which is
used to present a website using css, and javascript as a whole. All these, happen in the clients
system will be browsing the website. Now, Connecting to a database, happens on whole
another level. It happens on server, which is where the website is hosted. So, in order to
connect to the database and perform various data related actions, you have to use server-side
scripts, like php, jsp, asp.net etc.
MySQL is a popular open source database management system commonly used in web
applications due to its speed, flexibility and reliability. MySQL employs SQL, for accessing
and processing data contained in databases. Simple web applications can be designed using a
two-tier architecture, in which a client communicates directly with a server. A web
2b. you can use your web server applications to create the Database
Open a web browser (chrome, firefox, edge, etc., ) and type this http://localhost/phpmyadmin/
or http://127.0.0.1/phpmyadmin/ for open GUI for managing DB on your computer. See the
xampp screen below how it is coming.
For storing data in MySQL as records, you have to first connect with the DB. Connecting the
code is very simple. The mysql_connect in PHP is deprecated for the latest version therefore
I used it here mysqli_connect.
$con = mysqli_connect ("localhost",
"your_localhost_database_user" ,"your_localhost_database_password",
"your_localhost_database_db");
Unit Two: Retrieve data from database and display on web pages
This unit will also assist you to attain the learning outcomes stated in the cover page.
Specifically, upon completion of this learning guide, you will be able to:
Step 1: Create a PHP page to save data from HTML form to your MySQL database
The contact HTML form action is on “contact.php” page. On this page, you can continue to
write code on the contact.php which was created for connecting the database with website,
now we insert records into the database.
After connection database you need to take post variable from the form. See the below code
$txtName = $_POST['txtName'];
$txtEmail = $_POST['txtEmail'];
$txtPhone = $_POST['txtPhone'];
$txtMessage = $_POST['txtMessage'];
When you will get the post variable then you need to write the following SQL command.
$sql = "INSERT INTO `tbl_contact` (`Id`, `fldName`, `fldEmail`, `fldPhone`, `fldMessage`)
VALUES ('0', '$txtName', '$txtEmail', '$txtPhone', '$txtMessage');"
For fire query over the database, you need to write the following line
$rs = mysqli_query($con, $sql);
Here is PHP code for inserting data into your database from a form.
// insert in database
$rs = mysqli_query($con, $sql);
if($rs)
{
echo "Contact Records Inserted";
}
?>
This unit will also assist you to attain the learning outcomes stated in the cover page.
Specifically, upon completion of this learning guide, you will be able to:
Most application programs need to be connected to the database in order to do some basic
operations like saving and retrieving the user details / data.
<? php
$conn = mysql_connect('localhost','root','');
$db = mysql_select_db ('database_name', $conn);
?>
The code above will establish the connection to MySQL Sever. The UPDATE statement is
used to update existing records in a table, syntax for the same is
UPDATE table_name
SET column1=value, column2=value2,...
WHERE some_column=some_value
In the syntax shown below we see that the UPDATE procedure requires the SET and
WHERE definitions to pinpoint the changes.
An example program to implement the update query is as below:
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
$conn->close();
?>
$conn->close();
?>
Multiple SQL statements must be executed with the mysqli_multi_query() function.
Example for the same is below:
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);