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