How do I test a website using XAMPP?

Question

This is a fairly general query as I'm very confused about how to do this. I want to use the apache server which I have downloaded as part of XAMPP in order to test the website I am building, which will use php and mysql. The general question is: how do I do this?

As far as I understand it, the files go into C:\xampp\htdocs, which can then be accessed via localhost. What confuses me though is that the XAMPP admin stuff is also located here - so, for instance, I can't replace the file index.php without losing access to phpMyAdmin and so on. Do I have to create a new folder for the website within this?

I tried setting up a virtual host using instructions I found online. I added it to the windows host file and to the xampp hosts config file as directed here, for instance. Having done this the Apache service would not start and gave me an error log very similar to this one. I followed the instructions given in the answer to that, and it still did not work. I have since removed and reinstalled it and it is working ok again, but without the virtual hosts set up.

Finally, I want to use HTMLPad to build the website because I really like its real time preview feature. However, to set this up, it again needs to be connected with the server. The instructions it gives are:

In-depth Tutorial: How do I preview PHP files?

To be able to preview PHP files locally without uploading to web, you need to have a web server installed on your computer and it must be configured to support PHP files. Please refer to PHP and web server manuals for more info on installing web server with PHP support.

We recommend to use the free Apache web server from apache.org

Step 1 - What is your document root? Find out what is your local web server document root folder. The document root folder stores web page files available via your web server URL. Please refer to your web server manual for more info.

Step 2 - What is your web server address? Find out what is your local web server URL, usually it is http://localhost/

Step 3 - Make sure your web server works Verify that your web server really works with PHP files. To do this, save a PHP file to your web document root and try to open it via web browser. For example, if your web document root is c:\htdocs\, save your file as c:\htdocs\index.php and try to open it via URL http://localhost/index.php

If your web server works, you are now ready to configure internal preview.

Step 4 – Configure internal preview Now you must tell the editor software how to use your web server to display the PHP file preview.

On the Options menu, click Preferences; In Preferences window, click Preview folder; Click Mappings, then click Add; Enter your document root folder and the corresponding web address, in the above example you would enter c:\htdocs\ and http://localhost/

Again, in the context of all the above, I'm not quite sure I understand this. Presumably this links to all the php, mysql etc files within the original htdocs folder? But does it matter where the files I'm working on are saved, for example?

Basically, I'm just a bit confused, and any help would be very much appreciated!

Solution 1

The webpages on an online server reside in a location which looks somewhat like this: http://www.somerandomsite.com/index.php

Since xampp is Offline, it sets up a local server whose address is like this http://localhost/

Basically, xampp sets up a server (apache and others) in your system. And all the files such as index.php, somethingelse.php, etc., reside in the xampp\htdocs\ folder.

The browser locates the server in localhost and will search through the above folder for any resources available in there.

So create any number of folders inside the "xampp\htdocs\" each folder thus forming a website (as you build it).

Sometimes apache won't even start. This is due to the clashing of ports with some applications. Some of them I commonly encounter is Skype. See to that it is killed completely and restart apache

Solution 2

Just make a new folder inside C:\xampp\htdocs like C:\xampp\htdocs\test and place your index.php or whatever file in it. Access it by browsing localhost/test/

Good luck!

Solution 3

Just edit the httpd-vhost-conf scroll to the bottom and on the last example/demo for creating a virtual host, remove the hash-tags for DocumentRoot and ServerName. You may have hash-tags just before the <VirtualHost *.80> and </VirtualHost>

After DocumentRoot, just add the path to your web-docs ... and add your domain-name after ServerNmane

<VirtualHost *:80>
    ##ServerAdmin [email protected]
    DocumentRoot "C:/xampp/htdocs/www"
    ServerName example.com
    ##ErrorLog "logs/dummy-host2.example.com-error.log"
    ##CustomLog "logs/dummy-host2.example.com-access.log" common
</VirtualHost>

Be sure to create the www folder under htdocs. You do not have to name the folder www but I did just to be simple about it. Be sure to restart Apache and bang! you can now store files in the newly created directory. To test things out just create a simple index.html or index.php file and place in the www folder, then go to your browser and test it out localhost/ ... Note: if your server is serving php files over html then remember to add localhost/index.html if the html file is the one you choose to use for this test.

Something I should add, in order to still have access to the xampp homepage then you will need to create another VirtualHost. To do this just add

<VirtualHost *:80>
    ##ServerAdmin [email protected]
    DocumentRoot "C:/xampp/htdocs"
    ServerName htdocs.example.com
    ##ErrorLog "logs/dummy-host2.example.com-error.log"
    ##CustomLog "logs/dummy-host2.example.com-access.log" common
</VirtualHost>

underneath the last VirtualHost that you created. Next make the necessary changes to your host file and restart Apache. Now go to your browser and visit htdocs.example.com and your all set.

Solution 4

create a folder inside htdocs, place your website there, access it via localhost or Internal IP (if you're behind a router) - check out this video demo here

Solution 5

Make a new folder inside htdocs and access it in browser.Like this or this. Always start Apache when you start working or check whether it has started (in Control panel of xampp).

View more solutions