Web Development 5 Lecture Notes

2.1 Wampserver and Apache HTTP on Windows In this section, you will learn how to set up a Web Server on a Windows PC. The steps in this section will illustrate how to use Apache HTTP. The next section will illustrate the setup for Apache Tomcat. Apache is a popular Web Server that allows users to easily set up their own Web Servers. It has the advantage of being open-source and hence is free to download. Apache is the basic software needed to support running of HTML and related content. Additional software, such as Tomcat, can be installed to complement the Web Server. Tomcat is a server that is meant to run applications written in Java and JSP (Java Server Pages). Some popular options for deploying Apache, and optionally PHP and MySQL on Windows are Apache Lounge, XAMPP and Wampserver. Wampserver was used for this example. WAMP is an acronym that stands for “Windows, Apache, MySQL, and PHP”. 2.1.1 Requirements To illustrate the steps below a Windows 7 64-bit computer was used. The Windows computer was connected to a local area network (LAN) that has Internet access. You also need to know the IP address of your Web Servers 2 computer. You can find your IP address by typing ‘ipconfig’ at a command prompt. Find the entry labeled ‘Ethernet adapter Local Area Network’ and take note of the IPv4 address. It is recommended to disable the Windows Firewall before starting the Web Server setup. The steps below are for a fresh installation of Wampserver (assumes that Wampserver had not been installed before). 2.1.2 Installing Wampserver Download WAMP from http://www.wampserver.com/en/ . You will have the option of choosing 64-bit or 32- bit installation depending on your PC. This example uses the 64-bit installation. Locate the downloaded Wampserver file and click on it. This will open an installation wizard as shown in Figure 1. Follow the instruction wizard and leave the default settings as they are. After successful installation you will get the window shown in Figure 2. Leave the ‘launch WampServer 2 now’ box checked and click on ‘Finish’ button (in future you can start WampServer by clicking on your Start menu and clicking on its menu). On your toolbar, you should now see a ‘W’ shaped icon. On left-clicking this icon, you get the pop-up management console in Figure 3. Click on ‘Start all services’ and then check the ‘W’ icon on your toolbar. If the ‘W’ icon is green it means that all services are running. If it is red it means that no services are running. If it is orange it means that some services are running. If everything was installed correctly you should see a window such as the one in Figure 4. Figure 1: Welcome window to WAMP setup Figure 2: Finished installation Figure 3: WampServer Management Console Web Servers 3 Figure 4: Localhost home screen 2.1.3 Setting up Server Passwords In this step, you will learn how to create passwords for your server and also passwords to protect the files that you may want to share from your Web Server. i. Setting up MySQL and PHP Admin Password On your local host home screen (Figure 4) click on ‘phpmyadmin’ under ‘Tools. The interface window opens showing the WAMP configuration page. At the bottom of this page, a message indicates that MySQL is running without a password (Figure 5). Click on users and then check the box next to ‘root localhost’ and then click on ‘Edit Privileges’ (Figure 6). Scroll down to change the password and then click on ‘Go’ to save the changes. If you try to click on any other menu on the interface, for example on the SQL menu, you will get an error. Let us fix this by also changing the PHP admin password to match the MySQL password. Open Windows Explorer. Navigate to the C:\wamp\apps\phpmyadminx.x.x\ folder (Figure 7). Inside that folder open config.inc.php – ideally using Notepad or any other html editor. Search for the line $cfg['blowfish_secret'] = ''; – if you’re using notepad it might be easier to just search for the word ‘blowfish’. Change the line $cfg['blowfish_secret'] = 'abcdef'; to $cfg['blowfish_secret'] = 'mypassphrase'; where mypassphrase is your own password – not the same one that you specified for root in MySQL. Now search for the phrase ['auth_type'] = 'config'. Change ‘config’ to ‘cookie’. Now search for $cfg['Servers'][$i] ['password'] = ''; Replace the '' with 'mysql-password'; where mysql-password is the MySQL password you created earlier. Figure 5: No Password set for WampServer Web Servers 4 Figure 6: Changing root user privilege Figure 7: Access config.inc folder Save the changes you have made and exit out of the editor. Go back to your toolbar where wampserver is located and click on ‘restart all services’. Refresh localhost on your browser. Click on ‘phpmyadmin’. You should now be prompted for a username and password. Your username is ‘root’ (since we did not change it from the default one) and your password is the MySQL password that you created. ii. Setting up a password to access files stored in the Web Server Now in case you want to share files from your server, you do not want just anyone to be able to access the files. So let us password-protect your files. For example, assume that you would like to store music files on your server and share them with others. First, decide where you would like to store your music files. In this illustration, the folder ‘www’ found in C:\wamp is used to store the music directory. We are assuming that you want your users to be able to access any folders that are stored inside the ‘www’ folder. Next, using a command prompt, access the bin directory in the Apache folder (Figure 8). Then type: Web Servers 5 htpsswd –c “C:\wamp\mypassword-file.txt” username my-password-file.txt is the file where you create the password to access the ‘www’ folder. username is the username that you create to access the ‘www’ folder. Pick a username of your choice. Note that the password file is not created inside the music folder. After you press enter, you will be prompted to enter and re-enter a password. Create a password of your choice. This is the password that will be associated with the username you have just created, and the combination will be used to access the ‘www’ folder. Figure 8: Accessing Apache folder via command prompt Now we want to apply the login to your music folder. Open a new file in a plain text editor like Notepad. Copy and paste the following into it: AuthType Basic AuthName "This is a private area, please log in" AuthUserFile "c:\wamp\my_password_file.txt" AuthGroupFile /dev/null require valid-user You can replace the message ‘this is a private area, please log in’ with your own security message that you would like users to see. Save this file in the ‘www’ folder which is our server root folder. There are two important things to note when saving this file: 1. Save this file as .htaccess (including the dot). 2. If using an html editor such as Notepad put quotation marks around the name, thus “.htaccess”. This way, it will not be saved as a text file. Now when you refresh your localhost on the browser, you should be prompted for login details. 2.1.4 Testing Applications Sharing files stored on your WampServer If you would like to share the music files that you have stored on your Web Server, simply create a directory called ‘music’ insider the ‘www’ folder (Figure 9). Put the music files that you would like to share in the ‘music’ folder. Type http://localhost/music/ on your address bar and you should be able to see a listing of your music. Web Servers 6 Figure 9: Music folder to be shared Take note of your computer’s IP address. Go to your wampserver toolbar, left-click and click ‘Put online’. Your server can now be accessed on the Web. Share the address http://xxx.xxx.xx.xxx/music/ with someone else to try on another computer. ‘xxx’ represents the numbers in your IP address. The user will be prompted for the login details that you setup in the last section. Note that this may not work if you are sharing t