Setting up XAMPP and Your Project Folder

This is an introductory tutorial where we setup our first PHP-MySQL project using XAMPP. Follow the following steps to get started with web application development without any hassel. I want to keep everything simple and step by step guide for beginners.

Step 1: Download XAMPP to your system:-

Pick up the latest XAMPP installation version and download it to your system. (In case of windows user,) make sure you download it in separate directory other than the one where you have your windows installed. So as to keep things organised and free from hassel.

Step 2: Intall XAMPP server:-

Xampp Installation.

Xampp Installation.

Click on the application you just downloaded and follow the installation procedure step by step. Check on the MySQL, Apache services and install them all (though not recommended as it may sometimes clash with other network services running on your system)

Install this application in a separate directory; the one you made during download.

Step 3: Test it:-

5600

Run the XAMPP application by clicking the shortcut on your desktop. (In case of Mac, find it in your applications folder.)

You will see a control panel for the XAMPP server. Start MySQL as well Apache Services by clicking on the start/run button beside.

Once started successfully, it will show you the status (green means running). If you are not able to start it and the server shows “busy” status, it means that you are already using the port required by MySQL and Apache. Quit all the applications like Hamachi, Skype and any other network service. Start the service again. It must be running now.

xampp11

Now open your browser (IExplorer/Chrome/Firefox… etc) and type in “http://localhost/xampp”. You will see XAMPP logo or home page. This means your services are running successfully and now you may start web application development in PHP – MySQL.

Step 4: Download an Editor/IDE to code your programs:-

It’s totally up to you to decide which editor to download. Here are a few that I have used:
Sublime
Notepad++
Adobe Dreamweaver

Sublime has pretty nice interface and is quiet efficient. Notepad++ is the simplest (my first editor). Dreamweaver is a lot more than an editor and has some extra nice features but it’s not free.

Step 5: Create first project:-

Okay so here is the most interesting step. Locate the directory where you installed your XAMPP application. and then go to “…/XAMPP/htdocs/“. Create a new folder and call it “myFirstProject” (or whatever you like). Open an editor and write the following code

<html><head><title> Title of Page </title></head><body><p>Paragraph of the Page.</p><?php echo “My first PHP script.”;?></body></html>

Save this as “myPage.php”  in  “…/XAMPP/htdocs/myFirstProject/” folder.

Now type the following url in your browser “http://localhost/myFirstProject/myPage.php“.

You will be able to see something like:

Paragraph of the Page.

My first PHP script.

Viola! You just created your first php page! Remember the following things.

  1. myFirstProject = Your Project Directory.
  2. myPage.php = Your PHP script/Web page.
  3. htdocs = workspace; where you create your web projects (always make a new directory for each project with in this folder).
  4. http://localhost/myFirstProject = The local URL of your website.

Feel free to comment below if you have any suggestions or issue with getting started. I would love to help 🙂 Don’t forget me if you find any bug. (Exterminate them all!!) =D

Advertisements

2 thoughts on “Setting up XAMPP and Your Project Folder

  1. Hi I like this tutorial but I have a small problem with my XAMPP for Ubuntu, in my Htdocs I have created a folder where I put my work, everything is Okay but the problem I have is with my pictures, pictures are not working. I can call one picture with the html tag for it to appear on my web but it can’t see it in my file.
    I don’t know what wrong but it’s somethings I use to do with my WAMP Server in Windows very easy. So help me on this

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s