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
