Using Xampp

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 popup messages and click yes

Using Xampp by Michael Ashinze

Page 45

Now type in new records. Firstname: John Lastname: Smith Email: [email protected] 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