Sunteți pe pagina 1din 47

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