Indiana University: IT Training Tips Blog

The Apache web server software application, MySQL database, and PHP interpreter are separate modules that work together to allow for testing of a dynamic PHP web site. Windows has none of these modules built-in, and so they must all be installed.

While you could install them separately, it is easiest to download and install them from a single bundled package. There are several companies that build these packages, and so there are certainly a few to choose from: XAMPP, AMPSS, and WampServer being a few popular options.

Today we will be installing WampServer, because it is among the fastest and easiest solutions.

Downloading WampServer

WampServer can be downloaded for free on the company’s web site.

1. To get to the WampServer web site, go to www.wampserver.com/en in an internet browser.

NOTE: If you didn’t type "/en" at the end of the web address, then you probably landed on the French version of the site. Click "English" in the top-right corner.

You are now on the WampServer web site.

2. To see the different available download options, scroll down to the Downloads section.

You should see five different download options (at the time of this article’s publication). To narrow down which options to choose from, first we must know if our installation of Windows is 64-bit or 32-bit.

3. To check if your installation of Windows is 64-bit or 32-bit, press the Windows key on the keyboard, and type msinfo32, then press enter.

The System Information window should appear. Under "System Type", which is located a few rows from the top, the value should read as either "x64-based PC" or "x86-based PC."

If you have an x64-based PC, you will choose one of the WampServer downloads that is labeled "64 bits"; with an x86-based PC, go with "32 bits."

Now we have to choose the version of PHP and Apache, the options being either 5.3 or 5.4, and 2.2 or 2.4, respectively (at the time of this article’s publication). IU’s webserve server, for which different IU organizations and departments are hosted, has PHP version 5.2 installed (as of this article’s publication), and so we will select the 5.3 WampServer option.

4. To select WampServer with PHP version 5.3, click either "WAMPSERVER (64 BITS…" or "WAMPSERVER (32 BITS…" depending on if you have an x64-based PC or x86-based PC, as described above.

You should see a "Download WampServer" pop-up warning you that you must have the appropriate Visual C++ package installed on your computer in order for WampServer to work. You may or may not already have this installed.

In order to verify this information, we can download and run the installer from the link provided.



5. To go to the Visual C++ download page, click either the x86 or x64 link, corresponding with your version of Windows.

You should now be on Microsoft’s official download page for this package.

6. In order to download the Visual C++ installer, click "DOWNLOAD."

The file should begin downloading automatically.

7. Once the file is downloaded, run the installer.

The installer window should appear. If it is prompting you to either "Repair" or "Remove" Visual C++, then that means that you already have it installed, and you can just simply cancel out the window. Otherwise, go ahead and go through the install wizard, clicking "Next" at each page.

We are now ensured that Visual C++ is installed, and so we can proceed with downloading WampServer.

8. Go back to the WampServer page by clicking back on the browser window twice, and if necessary, click on the appropriate WampServer download link again.

The warning pop-up should re-appear.

9. To go to the WampServer download page, this time click the "you can download it directly" link on the "Download Wampserver" pop-up, shown in the image above.

You will be taken to a page that may have a short countdown timer before your download automatically begins.

10. Once the WampServer installer file downloads, run it.

The installation wizard should open.



The window indicates what version of Apache, MySQL, and PHP will be installed, as well as a few other various applications that may assist you in your future web development.

We will continue through the installation wizard.

11. Click "Next" past this wizard’s start page, and license agreement page.

You should now be on a page which allows you to select where WampServer will be installed. This is important. This directory will serve as the primary default location for your web sites. Thus, prevent hurdles to jump over in the future, you should choose a convenient location on one of your storage drive to hold your web files.

NOTE: Make sure there are no spaces in any of the directories in the path you choose.

12. Once you have chosen a path, click "Next." Check whether or not you want a "Quick Launch" or Desktop icon, and click "Next," and then click "Install."

WampServer will now install. After it finishes, the installer will ask which web browser you want WampServer to default to. This choice dictates which browser opens when you tab through WampServer’s configuration options in the future.

Keep in mind that whatever you choose here will not affect which browser can test your web site. You will be able to use whatever browser you like, no matter what you choose.

The default option is Internet Explorer.

13. Either simply click "Open" to accept the default browser (Internet Explorer), or locate the executable file for a different browser, and click "Open."

WampServer will now ask you about the default PHP email. This allows you to set up which email address is used for various PHP tasks, for example, where a contact form hosted on your web site will be sent. However, in order for this to work, you’ll have to have an email server installed, which neither Windows nor WampServer comes with, or be using an email service that has one available.

We will be skipping this today, as it is unnecessary to start testing PHP sites.

14. To finish the installer and launch WampServer, click "Next," and click "Finish," keeping the "Launch WampServer…" checkbox selected.

WampServer should now be running.

Using WampServer to test a PHP site

If all went well, WampServer should be running. In order to verify this, look for a little WampServer ‘W‘ icon on your Windows taskbar on the right.

This icon may appear either green, red, or orange. Green indicates that the server is online. Red indicates that the server is not online. Orange means that the server is online, but there is a problem keeping it from running any sites. If you ever get the orange icon, it is very likely a "port" issue.

NOTE: WampServer uses "port 80" by default in order to connect. So does Skype. If Skype is running, then you will likely run into this orange icon problem. The easy solution is to quit Skype, "Restart All Services" in the WampServer menu, and re-launch Skype, if desired. You can disable Skype from using port 80 by default in the Skype options.

Let’s test WampServer now. First we will activate WampServer’s menu.

1. To open WampServer’s menu, click the ‘W‘ icon in the taskbar.

A fly-out menu should appear.



At the bottom of the menu, you should see "Start All Services," "Stop All Services," and "Restart All Services." If the server is offline (red ‘W’ icon), you can click "Start All Services." to bring WampServer online, making the taskbar icon go green.

NOTE: If you make any changes to any configuration files associated with PHP, Apache, MySQL, or any other modules or plugins, you will have to click "Restart All Services" in order for the changes to take effect.

2. To test if WampServer is working, click "Localhost" at the top of the WampServer menu.

The default internet browser you chose earlier should launch or open a new tab, with the address being "localhost." localhost is the default alias for the root of the local server that WampServer is hosting. If all went well, you should see something like this:



If your browser displays something like what the image above shows, then congratulations, WampServer is running successfully, and you can now start creating and editing PHP sites.

NOTE: If the browser throws an error saying that it cannot find the resource, make sure that WampServer is running. Click "Start All Services" to make sure.

If the browser says something else, like “forbidden”, then it’s possible that it is an IPv6-related issue. Try the WampServer localhost actual address, "127.0.0.1" in the address bar of the web browser instead, as a simple solution.

Now that we have verified that WampServer is up and running, let’s create a test PHP document.

3. Open Notepad, or other text editor of your choosing.
4. In the text editor, type <?php phpinfo(); ?>
5. To save this as a PHP file, click File, click Save As…

The root directory where localhost is pointing is in the "www" directory of WampServer’s install location. We will now create a new sub directory within that root, and save our file there.

6. Navigate to the directory you installed WampServer (default is C:\wamp), double-click the www directory. Click "New folder" and name it "testsite."
7. To save our file, in the "File name" field, type " index.php, and click "Save."

We now have a php file in a sub-directory of our root called index.php. Let’s test it in a browser.

8. To test the newly-created PHP file, in a web browser, go to the address: "localhost/testsite"

The browser should now execute the phpinfo() function you wrote, and display the configuration of Apache, MySQL, and PHP, that WampServer has set up.

NOTE: You didn’t have to type index.php into the address because that file name is configured as a "default" home page file name.

Congratulations, you are now ready to start testing your own PHP web sites! Remember to create a different sub-folder of the www directory to serve as the root for any web site you wish to create or work on. For example, you would create a PHPBA folder within WampServer’s www folder to serve as the root directory for the PHP: The Basics class.

Good luck with your PHP sites!

To develop database-driven PHP applications, we need three things, the Apache web server, the PHP processor, and MySQL. This tutorial will walk you through all of the installation and setup that you need to do on your own machine to have a local instance of a Apache/MySQL/PHP (AMP) environment.

The instructions below will walk you through the setup you need for each of our PHP workshops, starting with PHP: The Basics.

At the time of writing, PHP: The Basics is the only PHP workshop offered by IT Training.

PHP: The Basics

The following links contain step-by-step instructions on configuring XAMP for the PHP: The Basics workshop.

• Macintosh OS: Install and Configure MAMP for PHP Development.
• Windows: Install and Configure WAMP for PHP Development.

If you are planning on developing PHP applications on Mac OS X, you’re in luck! Most of the tools come built-in to the operating system; all we need to do is activate them.

This tutorial is written for the most recent (at time of writing) version of Mac OS X, 10.8 Lion. The instructions listed here will work on most of the recent versions of Mac OS X. If you need help with another OS version, leave a comment on this post.

This instruction set is also focused primarily on the setup needed to complete PHP: The Basics. Specifically, this post will not detail what needs to be done to set up MySQL and phpMyAdmin to administer a MySQL database. Instructions for that topic will be included in another post.

Configuring Apache for Mac OS X 10.8 Lion

Let’s start with Apache, the web server. This is built in to the operating system, but it’s not accessible by any of the graphical interfaces available. Let’s begin by launching Terminal.

1. To launch Terminal,
   Press Command – Space,
   Type Terminal,
   Press Return

   This will launch Terminal to your home directory:

2. To start Apache, type: sudo apachectl start
   Press Return

   Apache will start.

Other Useful Apache Commands

Now that Apache has started, let’s take a moment to review some other useful Terminal commands for Apache.

• sudo apachectl stop — stops the Apache service
• sudo apachectl graceful — restarts the Apache service
• httpd -v — shows the current version of Apache (Apache 2.2.22 comes installed with Mac OS X 10.8 Lion)

These commands will be useful throughout your time working with apache. Let’s test that Apache has started.

1. To see if Apache has started,
   Launch a Web Browser,
   In the Address bar, type: localhost,
   Press Return

   If apache has started, you should see a web page that says “It works!“

   By default, this will make your document root be /Library/WebServer/Documents. When we navigate to http://localhost, the files in this directory are displayed. This is not a good place to do our work since it’s in the root level of the operating system. We will create a folder inside our own user directory that will contain all of our sites. This will be referred as User Root.

   To begin this process, let’s set up a folder called Sites in our user directory.

2. To make the appropriate directory, in Therminal, type:
   mkdir /Users/username/Sites

   Where username is replaced with the short username of your account. If you do not know your short username, in Terminal, type: whoami and press return.Now that we have a User Root directory for all of our sites, let’s tell Apache where to find them. To do this, we need to create a file called username.conf and add some XML to that file.

3. To create username.conf, in terminal, type:
   sudo nano /etc/apache2/users/username.conf

   Replacing username with your short username.The nano editor launches with a new file called username.conf. This is where we will add our XML.

4. To add the XML needed to configure the User Root, type:

   <Directory "/Users/username/Sites/">
   Options Indexes MultiViews
   AllowOverride All
   Order allow,deny
   Allow from all
   </Directory>

   Again, replacing username with your short username.

5. To save the file, press:
   Ctrl – O, Return, Ctrl – X

   Before we are finished, let’s make sure the file has the correct permissions.

6. To change the permissions of the file, in Terminal, type:
   
   sudo chmod 644 /etc/apache2/users/username.conf

   Replacing username with your short username.

   Apache is now configured to look in /Users/username/Sites when we browse to http://localhost/~username. Let’s restart Apache and configure PHP.

7. To restart apache, in Terminal, type:
   sudo apachectl graceful

Configuring PHP

Now that Apache is running, we need to start PHP. This is done by uncommenting a line in the Apache configuration file located at /etc/apache2/httpd.conf. Let’s do that now.

1. To open the httpd.conf file, in Terminal, type:
   sudo nano /etc/apache2/httpd.conf
   Press Return

   Now, we will use nano’s built-in search functionality to find the line that talks about PHP.

2. To search for PHP, in nano, type:
   Ctrl – W, php, Return

   This will locate the apropriate line.

3. To uncomment the line,
   Remove the octothorp (#) from the beginning of the line

4. To save the file and continue, press:
   Ctrl – O, Return, Ctrl – X

   Now that the line is uncommented, let’s restart Apache to have the changes take affect.

5. To restart Apache, in Terminal, type:
   sudo apachectl graceful
   Press Return

Testing PHP

Now that we have PHP configured, let’s test the installation by creating a php document that contains the phpinfo(); function in our User Root directory.

1. To create the PHP information file, in Terminal, type:
   nano /Users/username/Sites/phpinfo.php
   Press Return
   

   Again, replace username with your short username.

   This will create the file, now let’s add the code.

2. To add the PHP code, type:
   <?php phpinfo(); ?>
3. To save the file, press:
   Ctrl – O, Return, Ctrl – X

   This saves the file. We are now ready to test the connection.

4. To test the PHP configuration, in a Web Browser, navigate to:
   http://localhost/~username/phpinfo.php
   

   You should now see the PHP installation information.

This concludes what is needed to move through PHP: The Basics in self-study mode. The last bit of information here is a list of recommendations on how to set up your Sites folder to complete the workshop.

• Create a sub-folder in your User Root directory named PHPBA. This will be the Local Site Folder when configuring your site in Dreamweaver.
• Since you are working on your local machine, you do not have to upload files using the Ctrl – Shift – U keyboard shortcut in Dreamweaver. Simply save and refresh the web browser.
• To make sure all of your exercise files are ready to go, place the contents of the PHPBA folder in your newly created PHPBA folder inside your User Root directory.

That’s it! Happy PHP’ing!

If you are using Internet Explorer 9 you may have run across web pages where only a background color is loading or pieces of content are missing. If you have been wondering why this is happening, the answer might be that you have the PostScript Type 1 font Helvetica installed on your computer.

IE9 has display issues when it tries to use this specific font. This is not the first issue that has been linked back to PostScript Type 1 fonts like Helvetica. We’ve previously detailed a problem Outlook 2010 has with this font (and other PostScript Type 1) fonts in the article Help! Outlook 2010 Keeps Freezing and then Restarting!

The extent of the problem depends on how Helvetica was used. The problem causes less significant issues if the font is only applied to parts of the site. On the other hand, if it’s applied to the whole page, then all of the content of the page just doesn’t appear. (more…)

You’ve fully completed the home page for a new website you’re working on, and you’re about ready to copy it dozens of times to flesh out the rest of the pages for your website. Right before you start duplicating that index.html page, you remember that you wanted to add copyright information to the footer.
It is also a bit of a wake up call that you could have remembered to put in the copyright information a month later and would have to, at that point, go into each of these of pages individually to fix the footer.
This tutorial is about a handy little css property that allows you to control the content inside of any given element in your xhtml documents. Since this can be handled in an external css stylesheet document, you’d be able to change the content across all the dependent xhtml files while only having to go to one place.
Prerequisite knowledge:
an intermediate understanding of XHTML and CSS
Say we have a page like this:

Note: this tutorial assumes you would know how to create a page like this, or any basic webpage for that matter.
The footer has a bit of contact information inside of it, but let’s say we also want to add the copyright information to the footer, next to the email address.
The code for the footer may look like this:

<div id="footer">
  <p>contact: email@example.com</p>
</div>

The css property we will be using to insert the desired additional text is the “content” property. There are a few quirks to get used to when using this property. For one, the property can only be used in a rule whose selector uses the either the “before” or “after” pseudo-selector. The content that you add using css will be placed within the targeted element, but whether the content will appear before or after the pre-existing content of the targeted element depends on which pseudo-selector you choose.
Since we want the copyright information to appear after the e-mail address, we will use the “after” pseudo-selector. Create an additional rule in your stylesheet as follows:

div#footer p:after
{
  
}

This rule will target only paragraphs within the footer, and place whatever the value of the content property is after the existing content within the paragraph. Let’s create this copyright information with the content property now:

div#footer p:after
{
  content: " - copyright 2011";
}

If you look at the page in a browser, you should see that the footer now says “contact: email@example.com – copyright 2011″. Every page on the website should now have the updated footer, and we didn’t have to lay a finger on any of the xhtml documents.
Success, right? Well let’s say that you wanted to use the copyright character entity instead of the text “copyright.” Naturally, you’d think to replace “copyright” with the &copy; character entity. You can go ahead and try it if you’d like.
What you’d see is that the text “&copy;” appears literally on the webpage. The next thing you might do is remember that each character entity name has an entity number value too, that can be used as a character entity reference as well. You could then look up copyright’s character entity value as 169, and try replacing &copy; with &#169; in that content property value.
Well, this would have worked if we were using &#169; in the xhtml content, but unfortunately, it does not work that way in the css. In order to get these character entities to work, we have to convert the entity decimal value to hexadecimal and use css escape syntax. If you don’t understand what is meant by all that, then no worries, the process is really straightforward.
First, do an internet search for “decimal to hex converter”; there are many of these resources on the web. In fact, you can simply type in “169 decimal to hex” to the bing search engine, and the answer should be at the top of the results, without having to go into any pages.
The hexadecimal equivalent of decimal value 169 is hex value A9.
Note: to differentiate hexadecimal numbers from standard [base ten or decimal] numbers, some resources might use the “0x” notation, e.g., 0xA9 for the hexadecimal value A9.
In order to use this in the css content property value, to prevent literally displaying “A9″ we need to use the css “escape” syntax to use it as a character entity. We do this with a backslash.
Replace &copy; (or “copyright” if you didn’t attempt to use the xhtml character entity name) with “\A9 “:

content: " - \A9  2011";

Note: there are two spaces between “\A9″ and “2011″ and that is because the space following the hexadecimal value is part of the escape syntax. The space prevents ambiguity in situations where the designer wants the character entity to appear next to the content without any space, and the first character of that content just so happens to be a hexadecimal digit (i.e. 0-9 and a-f or A-F). If we wanted “©2011″ (that is, no space between © and 2011) then we would use “\A9 2011″ instead of “\A92011″ because the browser can’t tell you don’t mean \A and 92011, or \A92 and 011, \A920 and 11, and so on.
Well, everything works, but before you leave here to try this on your own project, there are a couple important items to consider.
First, the content property and the :before and :after pseudo-selectors do not work in versions of Internet Explorer before IE8, so if this content you will generate with this css technique is pivotal to the accessibility of your site, then it may be a good idea to hold off until more users have migrated away from those earlier versions of IE.
Second, and somewhat related to the previous concern, is the idea of semantics. Css is meant to be used for presentation and style only. All content and structure is intended to be kept in xhtml. This being said, when we use the content property, it is usually to enhance the page, rather than to add essential content.
Along this same vein, you may have already noticed that you cannot drag-select the text generated with the content property, because as far as the actual document goes, that content does not actually exist– it is merely presentational elements from css, and so it most definitely will not be used in any semantic application, like use in “pagerank” for Google’s search engine, accessibility with screen readers, and so forth.
As long as you are aware of these caveats, then go ahead and find clever uses of this unique and powerful css property.

Have you ever been to a web page where you can click on buttons or tabs that swap content on the page without having to load an entirely separate web page? Have you ever wondered how to make your own page have similar behavior?
Well, there’s good news and bad news. The bad news is that you’re going to need to write a bit of javascript to get this to work, and if you don’t know javascript, I can understand your reflex to just close this tutorial right now– but hold on! The good news is that it’s simple and doesn’t require an in-depth understanding of javascript to get this working.

Prerequisites for this tutorial:
A moderate understanding of XHTML and CSS

(more…)

Ladies and Gentlemen,

It’s been in development for over a year and has been completely redesigned to help you find the training you want more easily; I would like to introduce you to the new IT Training website!

I will be guiding you through some of the new features of the site in our screenshot tour. There are still some tweaks that are being made, but all-in-all, the site is functional and will soon be ready to be released to the masses.

We’ve spent a lot of time in design and testing of this new site and we hope you all enjoy using it.

Without further ado, let’s dive into the tour (at any time, click on an image to see its larger version).

(more…)

We’ve got a new website coming soon at IT Training, and this week on it2go, you’ll get a chance to preview how the new website works.  It will be live soon, but listen in and get a preview of all the new functionality.  Comment on this post about the new website or the podcast.

it2go – The IT Training Podcast

Knowing the basics of Illustrator and very little Dreamweaver, it has become very easy to create an interesting and fun website, complete with rollovers without knowing any code. Here’s an example of what can be accomplished. I used CS5 on my iMac, but you can use a PC and Adobe versions as old as CS2 just as well.

To Start with, create a new Folder on the Desktop (or wherever you plan to save your website) and title is “website.” This will provide a location where all your files for this particular website will be saved. It is important to keep all web files for one website in one location.

(more…)

This blog post in the “Web Accessibility Made Easy” series discusses why it is important to keep the navigation and presentation consistent.

Consistency

In spite of the importance of consistency for navigation and presentation, not all Web sites on the internet have a consistent navigational structure or presentation. This can be a severe disadvantage for users with physical or cognitive disabilities. For those with cognitive disabilities, remembering the location of links or sections of a Web can be very taxing. If these locations change from page to page, the extra cognitive processing required to relocate links or web page sections may inhibit users from task completion. Similarly, people with other impairments (fine motor, vision, or dexterity issues) may find it physically exhausting if links constantly change position on a Web page.

Consistency also benefits those without disabilities. Because of the vast array of information available on the Internet and the wide variety of Web site design methods, the cognitive load on people without disabilities is great. If the navigation and presentation remain the same throughout a Web site, the cognitive load is lessened for all users and the time it takes for users to locate their desired content is significantly reduced. Consistent navigation and presentation, also known as user interface, is a big topic in the world of usability. Renowned usability expert Jakob Nielsen has written a book on this topic, Coordinating User Interfaces for Consistency (http://www.useit.com/jakob/constbook.html). With the advent of templates and content management systems, consistent navigation and presentation is becoming easier to maintain and more prolific throughout the Internet.

The Guideline

IU Web Accessibility guideline

4. Presentation and navigation style shall remain consistent throughout the document.

Wrap Up

Maintaining consistent navigation and presentation is not hard to do and is beneficial for both users with and without disabilities. It provides better usability and efficient navigation for all users. Take steps to help improve user experiences by ensuring all navigation and presentation of content on your Web site is consistent.