INSTALLING, CONFIGURING, AND DEVELOPING WITH XAMPP

by Dalibor D. Dvor !i, Mar"# $%%& S!ill Ca'a(a ) O'*ario

DISCLAIMER: A lot of care has been taken in the accuracy of information provided in this article ho!ever it cannot be "uaranteed that inaccuracies !ill not occur# $he author and Skills Canada !ill not be held responsible for any claims or dama"es caused as a result of any information from this article#

$his article e%plains the installation and confi"uration process of the &AM'' Apache distribution and then provides a step(by(step tutorial on developin" a simple address book pro"ram usin" the ')' pro"rammin" lan"ua"e and MyS*L database packa"e# In order to comply !ith the +ntario Skills Competition this article !ill use the follo!in" codin" standards and tools: &)$ML ,#- $ransitional ')' .#- MyS*L .#- and phpMyAdmin /#0#

About XAMPP and Installation Requirements

&AM'' is a small and li"ht Apache distribution containin" the most common !eb development technolo"ies in a sin"le packa"e# Its contents small si1e and portability make it the ideal tool for students developin" and testin" applications in ')' and MyS*L# &AM'' is available as a free do!nload in t!o specific packa"es: full and lite# 2hile the full packa"e do!nload provides a !ide array of development tools this article !ill focus on usin" &AM'' Lite !hich contains the necessary technolo"ies that meet the +ntario Skills Competition standards# As the name implies the li"ht version is a small packa"e containin" Apache )$$' Server ')' MyS*L phpMyAdmin +penssl and S*Lite# 3or more details on the packa"in" and versions refer to $A4LE ,# In order to be able to successfully run &AM'' Lite you !ill re5uire ,6 M4 for the self(e%tractin" 7I' installation archive and at least ,,8 M4 after it has been e%tracted on a local hard disk or 9S4 drive#

$A4LE ,: &AM'' and &AM'' Lite feature comparison chart# +

Obtaining and Installing XAMPP

As previously mentioned &AM'' is a free packa"e available for do!nload and use for various !eb development tasks# All &AM'' packa"es and add(ons are distributed throu"h the Apache 3riends !ebsite at the address: http://www.apachefriends.org/# +nce on the !ebsite navi"ate and find the 2indo!s version of &AM'' Lite and do!nload the self(e%tractin" 7I' archive# After do!nloadin" the archive run and e%tract its contents into the root path of a hard disk or 9S4 drive# 3or e%ample the e%tract path for a local 2indo!s installation !ould simply be C:\# If e%tracted properly you !ill notice a ne! xampplite directory in the root of your installation disk# In order to test that everythin" has been installed correctly first start the Apache )$$' Server by navi"atin" to the xampplite directory and run the apache_start.bat batch file#
:+$E: Dependin" on your local 2indo!s confi"uration you may be asked to provide net!ork access to the Apache )$$' Server# It is important that you allo! net!ork access to the server throu"h your fire!all in order to have a functionin" server#

:e%t !e !ill test if the server is runnin" correctly by openin" an internet bro!ser and typin" http://localhost/ into the address bar# If confi"ured correctly you !ill be presented !ith a screen similar to that of the one in 3I;9RE ,#

3I;9RE ,: &AM'' splash screen#

In order to stop all Apache processes do not close the runnin" terminal application but instead run another batch file in the xampplite directory called apache_stop.bat#

PHP Hello World

In the previous pa"es !e installed and ran the Apache )$$' Server !ith success# $he ne%t step is to !rite a simple <)ello 2orld= pro"ram in ')' that !ill test the confi"uration of ')' under &AM''# In a te%t editor such as $e%t'ad !rite the follo!in" lines of code:

$he above code e%ample starts a ne! &)$ML document !ith the pa"e title set as <)ello 2orld= and then prints a sin"le line of te%t Hello World usin" the echo ')' lan"ua"e construct# In order to run and test this ')' pro"ram save it into your xampplite\htdocs directory !ith the file name of helloWorld.php# $hen to vie! it in your bro!ser simply type in http://localhost/helloWorld.php into the address bar# If done correctly you !ill see your Hello World line of te%t in the !eb bro!ser as sho!n in 3I;9RE /#

3I;9RE /: Resultin" output for hello2orld#php#

Creating a Database and Table, and Inserting Data

:o! that !e have run and tested Apache and ')' the ne%t step is runnin" MyS*L and creatin" a database and table !hich !ill hold information for our address book pro"ram# In order to start MyS*L navi"ate to the xampplite directory and run the mysql_start.bat batch file#
:+$E: Similarly to the Apache )$$' Server MyS*L !ill also need net!ork access> therefore in order to have a functionin" database it is important to allo! this access throu"h your local 2indo!s fire!all confi"uration#

$he &AM'' Lite packa"e contains an application called phpMyAdmin !hich allo!s developers to administer and maintain MyS*L databases# 3or the remainder of this article !e !ill be usin" phpMyAdmin to create a database and table and enter test data used in the address book pro"ram# In order to start phpMyAdmin you must first copy the phpMy dmin folder from the xampplite directory and place it into the xampplite\htdocs directory# 4efore testin" phpMyAdmin make sure that both Apache and MyS*L are runnin" by openin" their respective batch files: apache_start.bat and mysql_start.bat# Alon" !ith Apache and MyS*L runnin" in the back"round type http://localhost/phpMy dmin/ into your internet bro!ser# If successful you !ill be presented !ith a phpMyAdmin start pa"e similar to the one in 3I;9RE ?#

3I;9RE ?: phpMyAdmin start pa"e# -

$he first step !ith phpMyAdmin runnin" is creatin" a ne! database# $o do this point to the te%tbo% labelled Create new database and type address!oo" as the name of a ne! database# 9pon doin" so you !ill be for!arded to a screen similar to the one in 3I;9RE @# :e%t insert a ne! table in the address!oo" database by typin" colleag#e into the table name te%tbo% and clickin" the $o button to proceed !ith creatin" the table#

3I;9RE @: Creatin" a ne! table in the address4ook database#

3ollo!in" the creation of the colleag#e table you !ill be re5uired to insert the columns that make up your table# 4y usin" $A4LE / as a reference insert the necessary columns that !ill make up your colleag#e table for the address book#

$A4LE /: $able summary for the collea"ue table#

Lastly !ith the database and table created !e ne%t need to input some data into the table# 9sin" the fictional information from $A4LE ? on the ne%t pa"e input the contact data into your o!n table#
:+$E: 2hen inputtin" data into the table leave the id field blank because it is set to auto increment to an automatic number on every record entry#

$A4LE ?: 3ictional table data for the collea"ue table#

2e are no! ready to !rite the ')' pro"ram that !ill connect to the database and display our data in an internet bro!ser# $he procedure that !e !ill !rite this pro"ram is to first establish a connection !ith the database usin" ')' then start our &)$ML deceleration and meta data and finally in the body of our pa"e !rite a loop that !ill iterate throu"h each record in the colleag#e table and display that data in the bro!ser#

$he ')' block above !ill connect to our database usin" localhost as the address root as the username and a blank pass!ord field# $his confi"uration of root as the username and a blank pass!ord is the default that is set !hen phpMyAdmin is confi"ured and is !hat !e !ill be usin" for our e%amples#
:+$E: Althou"h it is perfectly fine to use the default username and pass!ord for learnin" purposes it is stron"ly su""ested to chan"e the pass!ord to somethin" more secure if developin" full !eb applications#

3ollo!in" the mysql_connect%&localhost&' &root&' &&() line of code is another line statin" that !e !ill be connectin" to and usin" the address!oo" database# Lastly !e !ill create a variable called res#lt !hich !ill contain a S*L 5uery that !ill select all records from the colleag#e table#

In the above code e%ample you !ill notice that the ')' code block contained !ithin *+php and +, is started and then ended before declarin" the &)$ML document# Remember that in the <)ello 2orld= e%ample earlier in this article !e also had a ')' code block !ithin a &)$ML para"raph ta"# $his is important to note because &)$ML and ')' can interchan"eably be used !ithin one another# $his concept !ill also be sho!n !hen !e !rite a ')' loop to retrieve all the records from the database and display it in a &)$ML table# Insert a couple ne! lines after the closin" */head, ta" and then type in the follo!in" code:

$his ne! addition to your code !ill simply start the body of your document and then place a ne! &)$ML table alon" !ith a ne! table ro! follo!ed by five table headin"s: ID 3irst :ame Last :ame $elephone and Email Address#

&

:e%t !e !ill create a ne! ')' code block in !hich !e !rite a while loop that "oes throu"h each database table record and outputs each piece of data in a ne! &)$ML table cell:

$his loop !ill !rite a ne! table ro! for each record by printin" the *tr, ta" and then also !rite the id first-ame last-ame telephone and email into its o!n respective table cells usin" the *td, ta"s# 3inally before endin" the loop the table ro! is closed by printin" out */tr,# $he ')' code block is concluded by freein" the memory !ith mysql_free_res#lt%.res#lt() and closin" the database connection !ith mysql_close%()# $he maAority of the code has no! been !ritten ho!ever to properly end this &)$ML document !e !ill need to insert a fe! more closin" ta"s:

Bou may refer to the ne%t pa"e for complete code of the address book pro"ram#

:o! that you have created a database and table inserted some data into that table and !ritten a pro"ram that reads the data usin" ')' all that is left to do is test and if re5uired debu"# Makin" sure that the Apache )$$' Server alon" !ith MyS*L are runnin" open up an instance of your internet bro!ser and type in the location of your address book ')' file# 3or e%ample if you created an address!oo" folder inside the htdocs folder then the path to run the address book pro"ram !ould be: http://localhost/address!oo"/index.php# If done correctly you !ill be presented !ith a pa"e similar to that of the one in 3I;9RE .# $his fi"ure sho!s the address book pro"ram runnin" !ith a &)$ML table sho!in" the data from the colleag#e table# If you encounter an error please revie! and compare your code !ith the complete code provided on the previous pa"e# Lastly to stop and close all processes run the apache_stop.bat and mysql_stop.bat batch files for the server and database respectively#

3I;9RE .: $he address book pro"ram displayin" contact information from the database#

Conclusion
$hrou"hout this article you have been sho!n the be"innin" concepts that !ill allo! you to set up a development environment create and administer a database and !rite a pro"ram that connects to a database and retrieves data# Althou"h these concepts are important ones they are in no means the end of an application# 4y usin" the address book pro"ram as an e%ample there is still a lot of features that can be implemented in such an application# 3eatures such as editin" contact information deletin" contacts addin" ne! contacts and bein" able to email contacts throu"h a form are all additions that can be implemented to the e%ample used in this article# Challen"e yourself use this article and other resources as a Aump(start and try addin" other capabilities to your o!n address book pro"ramC
+%