Cleaning Up the HTDOCS folder

When XAMPP was installed you were asked to go to the htdocs folder (on Mac: Applications > XAMPP > htdocs, on Windows: C: > xampp > htdocs) where you were told you would develop your website. The htdocs folder is the "root" of your website on your local machine. When XAMPP is started, you can access the contents of the local htdocs folder by typing "http://localhost" into the address bar of your browser.

However, there are already a number of folders and files in the htdocs folder that we want to clean up. It is very important that we don't just delete these, rather we will do some tidying to make things work without interfering with what we want to do. Let's get started!

  1. Go to the htdocs folder on your machine.
  2. Delete the webalizer folder (it should be empty), the favicon.ico and index.php files.
  3. Move all of the other files (applications.html, bitnami.css and the img folder) inside of the dashboard folder.
    1. In windows you will also have a xampp folder inside of the htdocs folder, move it to the dashboard folder too.
  4. When done, your htdocs folder should look like the picture below:

    htdocs folder view

  5. Start XAMPP and start the Apache server.
  6. Launch the admin page by clicking the "Admin" button next to Apache in the Windows control panel or the "Go to Application" button in the Mac application manager.
  7. When the browser opens you should see something rather dull as shown below:

    Browser directory listing

  8. Click the dashboard folder link.
  9. You should now see something like what you saw when you installed and tested XAMPP originally (the version number may not match that shown in the image).

    XAMPP splash page

  10. This is what we want, the functionality remains, but it is all in the dashboard folder.
  11. From now on, when you want to get to the XAMPP control page you will make sure the Apache server is running and type "http://localhost/dashboard" into the address bar. You will be directed to the dashboard tools!

With the htdocs folder cleaned up you can now add your own content as needed.

Video Version