WampServer Missing “Your Virtual Hosts” Menu

WAMPSERVERicon-200As a web developer, I must have 20 different instances of various web sites I’m working on, set up in various directories, on my local computer, and I made virtual hosts to handle these sites that point to their location. This is a nice work set up.

WampServer, before version 2.2, had a convenient “Your Virtual Hosts” menu section on the main localhost screen where you could put these virtual hosts web sites for convenient access. I describe how to set this up in my article on “Multiple Virtual Hosts in WampServer

If you install WampServer now, you’ll find that the menu selection “Your Virtual Hosts” is no longer in the localhost home page. I’ve seen several forum posts where people are looking for the menu, one even citing my article, but complaining there was no virtual host menu. Here's what the page looks like.

wampmenu-600

Well, it hit me right in the face when I hosed my index file installing PEAR, boo on PEAR, which has always been a pain in the butt to install, and I hope PEAR dies a quiet death, its Git all the way. I digress.

When I reinstalled the index file from a later version of WampServer. Lo and behold, I didn't find a “Your Virtual Hosts” menu in the localhost menu. This was a real problem, since I have all these virtual hosts already set up, and wanted to keep it that way.

I started hacking the file to put the menu back in, and I was successful. I learned some things, which slightly alters the ending in my first article above.

So here’s the deal. Everything you need to do is in one file, the WampServer localhost index file located at: wamp/www/index.php. The index.php file sole purpose is to put the WampServer localhost menu page in your browser window. Before you do anything, make a copy of your existing index.php file in case you hose this is any way.

I would include the entire file here, but it's a little long at about 500 lines of code, so in the essence of space and learning, you can download the file at the end of the article. If you would like to know how this menu is created, read on. This technique could be used for putting menus on your existing web sites, or additional menus in your localhost menu screen.

Let's get started. First, we'll define where to find the files listing the virtual hosts. These files, if you remember in my first article is in wamp/vhosts. Here's where you set this up in the index.php file around line 20.

//chemin jusqu'aux fichiers vhosts
$vhostsDir = '../vhosts/';

Remember, WampServer was developed by a French developer so titles are in French. This tells me, I can have my virtual hosts directory anywhere on my computer.

Let's make two associative array values, for the text to appear in the menu, in this case "Your Virtual Hosts." This is done in the 'en' for English array that starts around line 48.

// textes
$langues = array(
	'en' => array(
		'txtVhosts' => 'Your Virtual Hosts',
		'txtNoVhosts' => 'No Virtual Hosts yet.
To create a new one, use the WAMPSERVER menu.',

This tells me that the menu on the screen could be labeled anyway you like, like "Finished Sites" or "Under Development." You get the idea.

Let's put the menu on the page, toward the bottom of the file after the body tag around line 513, you'll find a h2 tag, with an unordered list of menu items in html. Here's where we'll put in the "Your Virtual Hosts" menu, it looks like this:


{$langues[$langue]['txtVhosts']}

 
    ${vhostsContents}

The h2 tag is the menu title we put in the array above. The class is the CSS styling, and the ${vhostsContents} will end up being our li list of virtual hosts.

Let's look at the CSS styling between lines 411-425 you'll find multiple styles under the vhosts class. The thing to note here is all the menus have the same styling. In this case, each menu and the lists under each menu are styled the same. Its just that each menu was given a different class name, not sure why, but all the menu styles are set up the same for each class. The menu, thus, will blend in with the rest of the menus. If your putting up a different menu, just give it one of the other class names, and your styles will be fine.

And finally, the most interesting part, how do we get our list into ${vhostsContents}?
This all takes place between lines 300-320. Let's take a look.

$vhostsContents = '';
// recuperation des vhosts
if (is_dir($vhostsDir))
{
    $handle=opendir($vhostsDir);
    while ($file = readdir($handle)) 
    {
	    if (is_file($vhostsDir.$file) && strstr($file, '.conf'))
	    {		
		    $vhostsContents .= 
'
  • http://'.str_replace('.conf','',$file).'
  • ';
                } 
        } 
    closedir($handle); 
    } 
    if (!isset($vhostsContents)) 
          $vhostsContents = $langues[$langue]['txtNovhosts'];
    

    First, we initialize our $vhostsContents variable. We check to see if there is a vhosts directory that you described the location of earlier in the file. If the directory is found, we enter the conditional code and open the directory getting our handle. If your not sure what's going on, see my article on "PHP - Working with Files."

    We have our handle, lets spin through the directory getting the contents of the directory. The contents being your .conf files for each of your virtual hosts. Here's an example of what the vhosts directory might look like.

    vhosts files-600

    We run through the while loop once for each file in the directory, until there are no files left to read.  First, we make sure it is a file, and not just some text, and that the file ends with a ".conf".  If both conditions are true, we enter our conditional code.  If not, we go back to the while loop and continue reading and looping through the directory until there's nothing else to read.

    Let's enter the conditional code, and create our list of virtual hosts. By getting inside the conditional code, we know that we are in the vhosts directory, we read a file name, and the file ends in .conf.  Those file names are the names of our virtual hosts, and we want to put them in a list that we can click on to go to the site. The key is the ".=" which strings together a series of li tags which will make our list.

    Inside the li tag is where all the work gets done. We create a link that starts with "http://". We take out the .conf from the file name with a PHP string replace, and since we made the virtual host, that's all we need to put the web site up when we click on the title. Pretty slick.

    What did I learn by going through this exercise? Well, in my first article, I told you what the contents of the .conf file should look like. It turns out, you don't need anything in the file, just the .conf file name in the directory to get the menu up. That makes life a little simpler.

    Here's the www index file all zipped up to download if you don't want to enter the text yourself.

    Comments

    WampServer Missing “Your Virtual Hosts” Menu — 1 Comment

    1. Greetings I am so delighted I found your webpage, I really found you by accident,
      while I was searching on Askjeeve for something else, Nonetheless I am
      here now and would just like to say thank you for a fantastic post and
      a all round enjoyable blog (I also love the theme/design), I don’t have time to read through
      it all at the minute but I have saved it and also added in your RSS feeds, so when I have time I will be back
      to read more, Please do keep up the awesome work.

      My website … google