programming 4

profileShane0301
lsn9_lab_install.docx

______________________________________________________________________________________________________________________________________________________________________________________________________________________

CTI 110 Page 20

______________________________________________________________________________________________________________________________________________________________________________________________________________________

Lesson 9

Lab 9 - Install a Web Server and student files

Objectives:

· Describe the technology behind a client/server application

· Install and Configure a Web Server to be used in a test and development environment (XAMPP)

· Test your XAMPP installation (Server) by running a program (Application)

· Understand when to use the Windows Directory Address

· Understand when to use the Uniform Resource Locator (URL) Address

· Know what ports are and understand that sometimes the default may need change

Lab Task Checklist:

· Read the Required Reading and Presentations

· Read the lab BEFORE starting the XAMPP installation.

· File Naming Convention: lastname-l9-install.docx

· Install a working XAMPP application

· Test using a URL and Student Files

· Take a snip of your Control Panel showing XAMPP successfully started

· Upload all files to Blackboard.

PC/Windows - How to Install the XAMPP Web Server

This document provides installation instruction to use the Windows version of your standalone Apache Web server (XAMPP) on a portable USB drive.

This lab ONLY covers the installation of a Windows version of XAMPP on a USB. It does not cover the installation on your computer system hard drive.

Installing on a portable drive will allow you to use your Web server on any Windows computer by simply inserting the USB drive and starting the server. In addition, it will prevent you from having potential Windows access issues.

Phase 1: Installing and Using Your Web Server for Windows (XAMPP)

** Note: After this Phase is complete you MAY or may not have a successful startup due to port conflicts. This should be resolved in Phase 2 of this lab.

You will install the XAMPP software from Apache Friends. XAMPP provides the Apache Web server and PHP processor that you will use to run your Web applications.

You will need about 250MB of file space (including space for your code development). Before you install, first insert a USB drive into any USB port.

Start Installation

1. Download the latest PORTABLE XAMPP Version from here ( Plain Text: https://sourceforge.net/projects/xampp/files/XAMPP%20Windows/) to your USB drive.

2. Unless you do not have admin rights you should use the PORTABLE .exe version. If not, then you will need to download the .zip or .7z version.

a. Both the xxx.7z and xxx.zip are compressed files that can be checked by your virus software before implementation. Notice the xxx.7z is a smaller file size because of the file compression algorithm used. To open/unzip a xxx.7z file you will need a program capable of uncompressing xxx.7z files. This can be found with a search but 7-zip is recommended.

3. If you have not done so already, create a cti110 folder at the root of your USB drive (***notice there are no spaces between cti and 110. **If you choose to install on elsewhere or under another folder it is important that you know you path. The following labs will assume you have used the same path as the lab.

4. There may be exceptions to your path and the labs example path. For example, you may have a different drive letter for your USB. You also may have a different folder directory structure or port number. This is fine as long as you know where it is and can adjust.

***Note: Not putting spaces in your folder names will minimize issues you may have when you must access files via the command line.

Screenshot Of Windows Directory with folder CTI110

2. Run the .exe file or unzip the downloaded file. Once downloaded and the cti110 folder created, double click on installer or unzip to the cti110 folder and install into the cti110 folder.

3. You may be asked to stop your anti-virus temporarily. Generally, this does not cause an issue but in the event it does, turn off your virus protection temporarily and then select continue.

4. **If using the compressed download…make sure you do not end of up with double folder for example: xampp\xampp. If this happens it may cause addressing issues in the future. If this does happen just copy the information in the inside xampp folder to the root xampp folder.

***Note: If you have anti-virus software running, the installation may take some time because there are many small files that will be checked for viruses. You can speed up the installation by adding exceptions to your anti-virus software, see "How do I configure my antivirus application?" in Appendix “A”

5. Since we are installing to a USB device and not your local system select “OK”. Screenshot of UAC Warning

** Do not install under the “ Program Files ” folder on your hard drive since items under this folder are managed by your Windows User Account Control (UAC); if UAC is activated on your computer it may restrict some XAMPP functions (if you really want to install to C:\Program Files, you will need to deactivate your UAC, using msconfig ).

** If you still want your install to be on your system/hard drive you can install XAMPP in the “ root” of C: just not in “ Program Files”.

6. Start the setup wizard. Select “Next”

Screenshot of Setup Wizard for XAMPP

Choose software components. Uncheck/select to match the following and select “Next”:

**Make sure you follow the screen shot below. If you do not match it may cause problems on some labs for this course.

Screenshot of what to install: apache, MySql, php and phpMyAdmin.  No others are needed

7. Choose the installation directory. Select the folder to install to match your USB drive and select “OK”:

Screenshot Windows Directory

8. Set the correct path for your installation. Add \xampp to the folder path and select “Next”, “Next. Setup is now ready to install, select “Next”.

Selecting the Installation Folder

9. Uncheck “Learn more about Bitnami for XAMPP (Unless you really want to know more) and “Next”.

Uncheck Bitnami

10. Start the installation process. Select “Next”. The setup wizard will unpack and install the selected components and save them to the designated directory. This process can take several minutes in total. Give it time, your USB is not as fast as your hard drive. You can follow the progress of this installation by keeping an eye on the green loading bar.

Select Next

Shows XAMPP installing

Starting YOUR WEB SERVER (WINDOWS)

Start XMAPP. Your XAMPP Control Panel may come up once you install. Select “Start” for both Apache and MySql. If windows come up with a security warning select “ALLOW ACCESS”.

**NOTE: If you do not get this, go to STARTING AND STOPPING YOUR WEB SERVER step 5, but review the remaining steps in this Phase. You will repeat them in Phase 2. If you are successful you are still required to complete Phase 2. You will need a screen shot with ports 8082 and 4430 to complete the Lab.

Shows XAMPP Control Panel before startup

Shows XAMPP Control Panel after startup.  Apache (por 80,443) and MySQL (port 3306).

STARTING AND STOPPING YOUR WEB SERVER.

When you have finished, you end the session with XAMPP by using stop on your Control Panel.

1. Click the Stop button on your XAMPP Control Panel for Apache. Wait until you see the message "Apache stopped" and the Stop button is redisplayed as a Start button.

2. Click the Stop button on your XAMPP for mySQL. Wait until you see the message “mySQL stopped” and the Stop button is redisplayed as a Start button.

3. This may take a few seconds, be sure to wait! The server has now stopped.

Remember to select the stop buttons before you quit.

Now select “Quit”. Closing using the “x” does not close the XAMPP.

Do not use x to close out Select Quit

Starting XAMPP GUI Interface. Start XAMPP using Windows Explorer and drill down to xampp-control.exe. ***SELECT THEN RIGHT CLICK “Run as Administrator”.***

Run xampp-control as adminstrator

This will open your XAMPP Control Panel. Click the Start button to the right of Apache and MySQL and the server will start. The word Running will appear and the Start button will change to Stop.

Running Apached and MySQL with new port 8080

4. However, some of you will have a port conflict issue as shown by:

Example when have error or port conflict

5. This should be resolved once Phase 2 has been completed.

Testing Your XAMPP Installation

Congratulations, your installation was successful if you are getting ready to test. There are two ways to test your localhost. First, remember that you must use the URL address and not the windows directory address. For now our DNS is localhost until we change it to localhost:8082 in Phase 2.

1. Select the “admin” panel to the right of “Start” which will use your default browser.

2. Or…open your browser of choice and in the address line use: http://localhost/dashboard/ to test apache and http://localhost/phpmyadmin/ to test phpmyadmin.

use localhost/dashboard to test

Shows phpadmin running

**In Phase 2 we will reconfigure the ports and defaults the the “Admin” uses and try again. Even if you have been successful to this point you are required to do Phase 2

Phase 2: Reconfigure your ports and defaults.

If conflict happens you will need to reconfigure your ports or adjust other settings. In Phase 2 we will reconfigure our ports and the default where our “Admin” button takes us.

Although we will resolve our port conflicts by using configuration files, here are some common reasons for port conflicts and potential solutions.

Common Reasons

· WINDOWS 10

Sometimes, by default, Windows 10 starts Microsoft IIS on port 80, which is the same default port used by Apache in XAMPP. As a result, Apache cannot bind to port 80.

To disable IIS from running on port 80, follow these steps:

· Open the Services panel in Computer Management.

· Search for the 'World Wide Web Publishing Service' and select it.

· Click the link to 'Stop the service'.

· Double-click the service name.

· In the 'Startup type' field, change the startup type to 'Disabled'.

· Click 'OK' to save your changes.

· You should now be able to start Apache in XAMPP on port 80.

· SKYPE

· If you are using SKYPE, this may conflict with the Web server since Skype reserves port 80, the same port XAMPP uses by default. Skype does not actually need port 80 but will use it if it’s available. So, if Skype is running BEFORE you start XAMPP you will get an error. But if you run Skype AFTER starting XAMPP, both programs should run OK. Alternatively, you can tell Skype not to use Port 80.

· Let’s assume for the sake of example that the instant messenger program Skype is blocking SSL port 443 (this is a common problem). One way to deal with this issue is to change Skype’s port settings. To do this, open the program and navigate via ‘Actions’, ‘Options’, and ‘Advanced’, until you reach the ‘Connections’ menu. You should find a box checked to allow Skype access to ports 80 and 443. Deselect this checkbox.

· VMWARE

· If you are using VMWARE, this will conflict with the Web Server since VMWARE reserves port 443, the same port XAMPP uses by default. The recommended solution is to configure the Shared VMs Workstation preferences:

· Go to Edit>Preferences

· Click the Shared VMs tab

· Disable Sharing and this will close port 443 for access by VMWARE

· Remember to reenable Sharing when you need VMWARE and port 443

· Sometimes none of the solutions above work and then you will need to change default ports that are currently not being used. We will be using port 8080 and 4430 instead of 80 and 443 to prevent issues. Since I do not know your configuration these ports are usually free and can be used. If you still get the issue of port conflict then you will need to find a free port. More guidance can be found in the “Additional Material” and “Course Resources”.

Change the XAMPP module port settings.

· Quick summary: We will use the Config button in the Control panel and open the files httpd.conf and httpd-ssl.conf. We will then replace port number 80 in httpd.conf and port number 443 in httpd-ssl.conf with 8080 for 80 and 4430 for 443. Save the file. Now click on the general Config button on the right-hand side and select ‘Services and Ports Settings’. Customize the ports for the module server to reflect the changes in the conf files.

· Steps to change the Default ports

· You will edit the configuration files:

· Apache (httpd.conf)

· Apache Secure (httpd-ssl.conf)

· Start the XAMPP Control Panel but do not start the services. They should be stopped before editing.

· Select “Config” to the right of “Apache”

· select Apache (httpd.conf). or you can also use “Windows Explorer” to drill down to the file (example: H:\CTI110\xampp\apache\conf).

Shows the config button where we we will change settings

shows config files that can be edited

· The httpd.conf file will open with notepad or Notepadd++ if configured as such.

screenshot of the httpd.conf file

B. Change wherever you see the number 80 to the number 8082 XAMPP Control Panel with port changes 4430,8082 You should be able to use the find in “Edit” menu. Examples:

#Listen 12.34.56.78.80 to #Listen 12.34.56.78:8082

Show line that needs to be edited

Listen 80 to Listen 8082

Show line that needs to be edited

ServerName locahost:80 to ServerName localhost:8082

Show line that needs to be edited

· Save the file with the changes.

· Next, change the Apache (httpd-ssl.conf) by changing the number from 443 to 4430. Use the same procedure as above. There will be:

· Listen 443 to Listen 4430

· VirtualHost_default_:443 to VirtualHost_default_:4430

· ServerName www.example.com:443 to ServerName www.example.com:4430

· Save the file with the changes.

· If the ports are correct, and you made all the changes where they are supposed to be, then your XAMPP should run without conflict.

XAMPP Control Panel with port changes 4430,8082

** When you change the ports you also change the localhost address.

Testing Your XAMPP Installation with the new default ports (8082, 4430)

There are two ways to test your localhost. First, remember that you must use the URL address and not the windows directory address. Our DNS has now changed and is localhost:8082.

· Open your browser of choice and in the address line use: http://localhost:8082/dashboard/ to test apache and http://localhost:8082/phpmyadmin/ to test phpmyadmin.

test installation localhost/dashboard

test phpadmin

· Now test your installation using the respective “Admin” buttons for Apache and MySQL. If we do this via the Control Panel “Admin” you will get an error. This is because “Admin” is set to try to open the services at http://localhost/dashboard/ and http://localhost/phpmyadmin/ and will say the site cannot be reached. We still have to change the XAMPP “Admin” settings so that they go to the new port number http://localhost:8082/dashboard/ to test apache and http://localhost:8082/phpmyadmin/ to test phpmyadmin.

Error code if not in localhost

a. To fix this. Open Config

Shows Config button above Netstat

b. Select Service and Port Settings

Service and Port Settings

· Select the Apache tab if not already there and change port settings to 8080 and 4430 then save.

Changes to Apache 8082, 4430

· Select “Save” again.

· You have now changed the pointer for the “Admin” button.

i. Apache (httpd.conf)

ii. Apached (httpd-ssl.conf)

· Take a snip of your Control Panel using ports 8082 and 4430 and put in in a word document. It should look similar to:

XAMPP Control Panel showing 4430,8082

** Note: When you used the “Config” GUI what you were actually doing was editing the XAMPP initiallization file (“ xampp-control.ini”) specifically the Service Ports.

Shows xampp-control.ini

image2.png

image3.png

image4.png

image5.png

image6.png

image7.png

image8.png

image9.png

image10.png

image11.png

image12.png

image13.png

image14.png

image15.png

image16.png

image17.png

image18.png

image19.png

image20.png

image21.png

image22.png

image23.png

image24.png

image25.png

image26.png

image27.png

image28.png

image29.png

image30.png

image31.png

image32.png