Scribd
Upload
7 views

Integrating database with a website practical

This document outlines the steps to integrate a database with a website using XAMPP, including downloading and installing XAMPP, starting Apache and MySQL modules, and creating a database and HTML form for user input. It provides detailed instructions for setting up a local development environment and connecting a web application to a MySQL database. The document also includes code examples for creating a contact form and connecting it to the database using PHP.

Uploaded by

Amanuel Kassa
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Integrating database with a website practical

This document outlines the steps to integrate a database with a website using XAMPP, including downloading and installing XAMPP, starting Apache and MySQL modules, and creating a database and HTML form for user input. It provides detailed instructions for setting up a local development environment and connecting a web application to a MySQL database. The document also includes code examples for creating a contact form and connecting it to the database using PHP.

Uploaded by

Amanuel Kassa
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Operation sheet 1.1.

Integrating database with a website


Operation Title: connecting the web application to the database

Purpose: Generate and execute a new database file to test and understand basic database syntax.

Conditions or situations for the operations:

 Safe working area


 Properly operated tools and equipment

Equipment Tools and Materials:

 Computer
 Windows 10 and above.

Steps in doing the task

Step 1: Download XAMPP


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.
XAMPP & PHP most recent file versions.
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.
Step 2: Install XAMPP
Once downloaded, run the XAMPP installer file.

You might get a UAC warning before installation. Click OK and continue.

Select the components you want to install. If you’re planning to install a WordPress site with
XAMPP, you only need Apache, MySQL, PHP, and phpMyAdmin. I’ll check all the
components as I’d like to experiment with them later.
Choose the installation directory for XAMPP (default recommended).
Uncheck Learn more about Bitnami option. Bitnami provides all-in-one tools to install popular
open source apps on top of XAMPP. This includes add-on modules for installing Word Press too.
However, we’ll be installing it manually here.

You may be presented with a Windows Security Alert at the end of the installation. You need to
whitelist Apache HTTP Server from your Windows Defender Firewall by clicking the Allow
access button. Make sure to check the “Private networks, such as my home or work network”
option. This is very important. XAMPP won’t work if you don’t check this and click Allow access.

Complete the setup and run XAMPP Control Panel.


Step 3: Open the XAMPP Control Panel

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

Step 4: Start Apache and MySQL Modules

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.

Then Start the MySQL module. If you’re presented with a Windows Security Alert to whitelist
mysqld.exe, click Allow access. Like before, make sure that you’ve ticked the “Private
networks…” option.
Don’t forget to tick the “Private networks” option. 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.
The phpMyAdmin Dashboard

This concludes the setup of XAMPP as your local development environment. It’s now ready to
host any PHP-based software (e.g. Word Press).

Testing Your XAMPP Installation

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 local host 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.

<html>

<head>

<title>PHP-Test</title>

</head>

<body>

<?php echo '<h1>Hello World!</h1><h3>Welcome to WPMU DEV</h3>'; ?>

</body>

</html>

view raw test.php hosted with ❤ by GitHub

Try visiting http://localhost/test/test.php in your browser. If it displays the words “Hello World!
Welcome to WPMU DEV”, then XAMPP is successfully installed and configured on your system.
If IIS is not installed by default, you can download and install the latest version of IIS Express for
your Windows 10 or Windows 11 OS from the Microsoft website. IIS versions later than 7.0
include the new IIS Manager User interface.

Enable Internet Information Services (IIS) on a Windows computer

1. Open the Start menu.

2. Type "features" and select Turn Windows features on or off

3. Tick the Internet Information Services checkbox and select OK.


4. Wait for the installation to complete and select Close.

5. If you plan on using integrated Windows authentication in website hosted in IIS, tick the
Windows Authentication option under Internet Information Services > World Wide Web
Services > Security as well and select OK.

1. You can now install and test your website on IIS. After installation, you will see your web
console listed in IIS Manager (inetmgr), along with a default website generated when you
enabled IIS.

Connecting the web application to the database

Step 1: Design your Database and HTML form requirements for your web page

Filter your HTML form requirements for your contact us web page

Step 2: Create a database and a table in MySQL

Step 3: Create HTML form for connecting to database

Step 1: Filter your HTML form requirements for your contact us web page
Suppose you selected the form field Name (text input), Email (email input), Phone (number input),
and message (multi-line text). The form submit button also necessary for submitting the form. You
will get the complete form in HTML coding in step 3.

Name E-mail Phone Message

Step 2: Create a database and a table in MySQL

2a. you can use SQL Commands to create your database

CREATE DATABASE `db_Name`

USE `db_Name`;

CREATE TABLE `tbl_Name’()

DROP TABLE IF EXISTS `tbl_Name`;

ALTER TABLE

ADD/Delete PRIMARY KEY (`id`);

Example

CREATE DATABASE IF NOT EXISTS `db_contact`

USE `db_contact`;

CREATE TABLE IF NOT EXISTS `tbl_contact` (

`id` int(10) PRIMARY KEY NOT NULL,

`fldName` varchar(50) NOT NULL,

`fldEmail` varchar(45) NOT NULL,

`fldPhone` varchar(15) NOT NULL,

`fldMessage` text NOT NULL

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

Click on the databases link and create your db by clicking”new”

E.g. click on the databases new link and create your db by the name “db_contact”.

Step 3: Create HTML form for connecting to database

Now you have to create an HTML form. For this, you need to create a working folder first and
then create a web page with the name “contact.html”. If you install xampp your working folder is
in folder this “E:\xampp\htdocs”. You can create a new folder “contact” on your local host working
folder. Create a “contact.html” file and paste the following code.

<html>

<head>

<title>Contact Form - PHP/MySQL Demo Code</title>


</head>

<body>

<fieldset>

<legend>Contact Form</legend>

<form name="frmContact" method="post" action="contact.php">

<p>

<label for="Name">Name </label>

<input type="text" name="txtName" id="txtName">

</p>

<p>

<label for="email">Email</label>

<input type="text" name="txtEmail" id="txtEmail">

</p>

<p>

<label for="phone">Phone</label>

<input type="text" name="txtPhone" id="txtPhone">

</p>

<p>

<label for="message">Message</label>

<textarea name="txtMessage" id="txtMessage"></textarea>

</p>

<p>&nbsp;</p>

<p>
<input type="submit" name="Submit" id="Submit" value="Submit">

</p>

</form>

</fieldset>

</body>

</html>

Now your form is ready. You may test it in your localhost link http://localhost/contact/contact.html

Connect webpage with the DB

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");

You need to place value for your localhost username and password. Normally localhost MySQL
database username is root and password blank or root. For example, the code is as below

$con = mysqli_connect ('localhost', 'root', '',’db_contact’);

The “db_contact” is our database name that we created before. Then you will save the file with
“contact.php”

Quality Criteria: The web page should display the output of your database.

Lap Tests
Task 1: Create database table

Task 2: create HTML form.

Task: Connect webpage with the DB

You might also like