Install And Configure XAMPP Server With Data Insert Into Database

Introduction

XAMPP stands for Cross-Platform (X), Apache (A), Maria DB (M), PHP (P) and Perl (P). It is developed by friends of Apache. XAMPP Server is a local WebServer to run the scripting language (PHP, PERL) and this is open source. It includes Apache and MySQL, FileZilla, Mercury and Tomcat.

Here, I am going to show how to create a database and insert the data into the database, using XAMPP Server.

Requirements

XAMPP Server
Brackets (IDE)
Little bit of Web development knowledge

Steps which should be followed are given below.

Carefully follow my steps to create a database and insert the data into the database, using XAMPP Server and I have included the source code given below.

Step 1

Download the latest version of Windows XAMPP Server from the Webpage given below.

Download link: https://www.apachefriends.org/download.html

Step 2

Select your language and click Next.

Step 3

Choose your destination folder.

Step 4

Select all the Services, followed by clicking Install.

Step 5

This is XAMPP Control panel. Start Apache and MySQL Server. Now, provide the permission for Apache and MySQL accesses the firewall.

Step 6

Open your Browser, followed by typing http://localhost or http://127.0.0.1. Afterwards, you will see XAMPP community page.

Step 7

Open the XAMPP Control Panel, followed by clicking MySQL admin.

Step 8

Create the new database and click New.

Step 9

Put the database name as whatever you want. Here, the database name tutorial is given. Click Ceate.

Step 10

Go to SQL query tab, copy and paste the query given below. Click Go. Afterwards, your table (my table name : person) creates successfully.

MySQL query

CREATE TABLE `person` (
`Id` int(11) NOT NULL,
`Name` varchar(20) NOT NULL,
`Email` varchar(25) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Step 11

Put your Webpage files into the destination folder. Default folder is c:/xampp/htdocs.

Step 12

Open the bracket (IDE) and create the index.html file. Copy the code given below and paste into index.html.

Index.html

<!DOCTYPE html>
<html>
<head>
<title>
Xampp Tutorial
</title>
<style>
h1{
color: rebeccapurple;
font-family: fantasy;
font-style: italic;
}
</style>
</head>
<body>
<h1>Xampp Tutorial</h1>
<hr>
<form action="insert.php" method="post">
<fieldset>
<legend>enter the details below</legend>
<label>Name</label><br><br>
<input type="text" placeholder="ex:john" name="Name">
<br><br>
<label>Email</label><br><br>
<input type="email" placeholder="[email protected]" name="Email" >
<br><br>
<input type="submit" value="insert">
</fieldset>
</form>
</body>
</html>

Step 13

Create the insert.php file. Copy the code given below and paste into insert.php.

insert.php

<?php
$con = mysqli_connect('127.0.0.1','root','');
if(!$con)
{
echo 'not connect to the server';
}
if(!mysqli_select_db($con,'tutorial'))
{
echo 'database not selected';
}
$Name = $_POST['Name'];
$Email = $_POST['Email'];
$sql = "INSERT INTO person (Name,Email) VALUES ('$Name','$Email')";
if(!mysqli_query($con,$sql))
{
echo 'Not inserted';
}
else
{
echo 'Data Inserted';
}
header("refresh:3; url=index.html")
?>

Step 14

Run index.html. Give the name and an E-mail Id.

Step 15

The data is inserted. Afterwards, go the database and check it.

Step 16

Go to the tutorial database. Open the person table.name and an email id was inserted successfully.

Output

Here, our message is inserted in dynamic Webpage, which has been created and executed. I will continue my next article to give you an in-depth knowledge about XAMPP, FileZilla and GitHub lessons.

Source code

https://github.com/GaneshanNT/message-insert-into-database