Using Xampp

XAMPP is a free and open source web server package, consisting mainly of the Apache HTTP
Server, MySQL database, and interpreters for scripts written in the PHP and Perl programming
languages. It provides a local web server for easy testing of server dependent websites

It can be used as a development tool, to allow website designers and programmers to test their
work on their own computers without any access to the Internet.

Click here to
add Security
Password

Using Xampp by Michael Ashinze Page 1

Click here

Type in your
password and click

password
changing

Using Xampp by Michael Ashinze Page 2

Click here for

phpmyadmin

Using Xampp by Michael Ashinze Page 3

Log in with the
user name and
password that
you chose earlier

Using Xampp by Michael Ashinze Page 4

To create database

Type in a database Name

Here we have chosen
member

And click create

Using Xampp by Michael Ashinze Page 5

Type in your table name
and Number of Fields
Here we will use details
and 5

And click Go

Using Xampp by Michael Ashinze Page 6

Enter the field names as
shown

Using Xampp by Michael Ashinze Page 7

 For the ID field
Select Primary
on the index
menu
and tick the A_I
field

Click save

Using Xampp by Michael Ashinze Page 8

Table has been
created

Using Xampp by Michael Ashinze Page 9

 Click Insert to
add records

Using Xampp by Michael Ashinze Page 10

Enter records
and click Go

Using Xampp by Michael Ashinze Page 11

Now one
record has
been added

Using Xampp by Michael Ashinze Page 12

Now we need
a website that
will allow us
connect to the
database with
a form.

Define a new
site

Click New
site

Using Xampp by Michael Ashinze Page 13

Define the site
name as
phptutorial

Using Xampp by Michael Ashinze Page 14

Tick yes to allow
for server side
technology

Then select
PHP MySQL

Click Next

Using Xampp by Michael Ashinze Page 15

Browse to your
Xampp Folder on your C
drive.

Note. When creating a

server based site, your
root folder must be
stored on the server
which in this case is your

Xampp > htdocs

Your root folder must

be in the htdocs
folder.

Using Xampp by Michael Ashinze Page 16

Using Xampp by Michael Ashinze Page 17
Browse to your
C/xampp/htdo
cs/

You must save

your php
based
websites in

Using Xampp by Michael Ashinze Page 18

 Now create a
new folder
called
phptutorial

*This is your
root drive

Click open >

select

Using Xampp by Michael Ashinze Page 19

Select Edit
locally and
make sure
your new
folder is in the
right location

Click next

Using Xampp by Michael Ashinze Page 20

 Click Next

Using Xampp by Michael Ashinze Page 21

Your local URL must be

http://localhost/folder
name/

For this tutorial it should

be
http://localhost/phptu
torial/

Click Next

Click ok

Using Xampp by Michael Ashinze Page 22

 Click ok

Click Next

Using Xampp by Michael Ashinze Page 23

 Click Done

Using Xampp by Michael Ashinze Page 24

 Click ok

Now we will create a page, but we will be creating a php page instead of a regular
HTML page. This is because we need to connect our website to the server side
database using a server side programming language like php

Click new

Using Xampp by Michael Ashinze Page 25

Select php
Select the
highlighted
layout

Click create

Using Xampp by Michael Ashinze Page 26

Now for this examples
we will just make
changes to the page as
follows

The heading: Elatt

Comments Form

Using Xampp by Michael Ashinze Page 27

 Now delete
the text in
the content
area

And

Click Save

Using Xampp by Michael Ashinze Page 28

Save as
index.php

Php is the file

extension

And click save

Using Xampp by Michael Ashinze Page 29

 Add Some text to the
main body of the page as above

Using Xampp by Michael Ashinze Page 30

Now from the
windows
menu select
Database

Using Xampp by Michael Ashinze Page 31

 On the Database
tab,
Select the + sign
and
Click
MysqlConnection

Select your Connection

name This can be any
name you choose. We
have chosen to use
tutorial

Server name: Usually

your localhost

Username: This is your

Xampp user name

Password: This is your

Xampp password

Database: This is the

database you intend to
use. it must be a
database that you have
created.
Here we are using
Using Xampp by Michael Ashinze Page 32
Use the information
provided but make sure
you use your Xammp
password.

Then click the test

button.

If everything goes well

you should have this
message

Click ok and ok again

Using Xampp by Michael Ashinze Page 33

Database
panel
showing your
connection
tutorial

This means
that your site
is now
connected to
your
database by
by connected
called

Using Xampp by Michael Ashinze Page 34

Click on the common drop
down, select the data tab
and select Record
Insertion Form Wizard

connections tab :
tutorial

Table: From the

dropdown select
the table details

Then you should

see all the fields in
the details table

Using Xampp by Michael Ashinze Page 35

Type in thankyou.php
in the After Inserting,
go to: field" --- This
page will created
later

Then click the – sign

to remove a field
from the field list.

Here we have
removed the ID field
since it has been set
as a primary key and
AI (auto increment)
value in the
database.

We don’t want the

students to choose
their own ID’s.

Using Xampp by Michael Ashinze Page 36

Now a new form
has been
created ready to
act as the
comments form
on your site

Using Xampp by Michael Ashinze Page 37

Now we can see
that the form
button says
insert record.

We need to
change the value
to a more
appropriate
name

To change the
name, you have
to select the
button. Then
change the value
from the
properties panel

Using Xampp by Michael Ashinze Page 38

Using Xampp by Michael Ashinze Page 39
Now create
your new
thankyou.php
page. This page
will act as the
result page
when a user
has submitted
a comment

Using Xampp by Michael Ashinze Page 40

Select a new php
page and then chose
a good page layout

Then click create

Using Xampp by Michael Ashinze Page 41

Your New page.

Using Xampp by Michael Ashinze Page 42

Now make changes
to the page as
follows

The heading: Elatt

Comments Form

Content: Thanks for

leaving a feedback.
We will get back to
you shortly

Using Xampp by Michael Ashinze Page 43

Save the page as
thankyou.php

The page is saved as

thankyou.php
because you have
redirected the form
to go to a page called
thankyou.php.

Using Xampp by Michael Ashinze Page 44

 Now Preview
Your site

Using any
available
Browsers

Select Don’t show

me this message
again for both pop-
up messages and
click yes

Using Xampp by Michael Ashinze Page 45

Now type in new
records.

Firstname: John
Lastname: Smith
Email:
John@yahoo.com
Comments: I am
interested in web
design

Using Xampp by Michael Ashinze Page 46

Final Result

Your database has

been updated with
the new record. You
can check it out by
logging into
phpmyadmin.

Using Xampp by Michael Ashinze Page 47