Practical 1
Setup Development Environment
1. Preamble
Setup/prepare participants’ workstation/laptop with development environment and tools. E.g.
Web Server and Database Server
Development Environment
1.1. Requirements
Hardware: Participants are to bring along their own workstation/laptop (BYOD)
Software:
o Virtualbox (https://www.virtualbox.org/wiki/Downloads)
o XAMPP (https://www.apachefriends.org/index.html)
o Eclipse PHP Development Tools (https://www.eclipse.org/pdt/)
1.2. Resources
Obtain the following resources from LMS
Development VM (SWAP Development VM)
teachphp.zip
2. Installation of VirtualBox
2.1. VirtualBox Installer Package
Download
o VirtualBox platform packages
o VirtualBox Oracle VM VirtualBox Extension Pack
2.2. Installation
Refer to VirtualBox Manual at the link below:
https://download.virtualbox.org/virtualbox/6.1.26/UserManual.pdf
Complete the installation and proceed to the next section.
Secure Web Applications Page 1 of 12
3. Download and Install
if you wish to install on your host machine, please following the tasks in this section to install
the necessary software. Alternatively, please proceed to section 4.
3.1. XAMPP for Windows (Latest version)
Check if your machine has XAMPP installed in it, it should be found in C drive. If
not, download the installer from the link below.
https://www.apachefriends.org/download_success.html
o to install x64-8.2.4-0-VS16
o do not install in C:\Program Files
Follow the instructions from the link below if you have problems in installation.
http://www.wikihow.com/Install-XAMPP-for-Windows
https://www.apachefriends.org/faq_windows.html
3.2. Eclipse-based Package for PHP Developers (Latest
version)
Check if your machine has Eclipse-base package for PHP developers installed in
it. If not, download the installer from the link below.
https://www.eclipse.org/pdt/
Secure Web Applications Page 2 of 12
3.3 Setup ‘https’ in XAMPP for localhost
Step 1: Generate SSL by clicking on the windows batch script “C:\xampp\apache\makecert”
Step 2: Enter the credentials.
Step3: The SSL.crt is generated in the path C:\xampp\apache\conf\ssl.crt
Step 4: Add the SSL attributes in the htpd-xampp-conf in the path
C:\xampp\apache\conf\extra\httpd-xampp.conf to add in
Secure Web Applications Page 3 of 12
Step 5 : Add SSLRequireSSL to the respective lines in C:\xampp\apache\conf\extra\httpd-xampp.conf
Step 6: Set mod_rewrite to be enable. Remove the comment (# character)
Step7: You will need stop and start apache server
Step7: Since the self cert was not an authorized company, it will still be invalid but nevertheless is
working
https://medium.com/@ajtech.mubasheer/setup-https-in-xampp-for- localhost-bc3d01393f31
Secure Web Applications Page 4 of 12
4. Setup Development VM
4.1. Import SWAP Development VM into VirtualBox
Refer to VirtualBox Manual under section 1.15.2 Importing an Appliance in OVF
Format to import the appliance into VirtualBox.
4.2. Take a snapshot of the SWAP Development VM
Refer to VirtualBox Manual under section 1.11 Snapshots to manage the snapshots of the VM.
4.3. Start the SWAP Development VM
1. Start the SWAP Development VM
2. Login into VM using the following credentials
2.1. UserID: student
2.2. Password: password
4.4. Add Shared Folder to SWAP Development VM
1. Create shared folder in your laptop
1.1. Go to your laptop’s Windows explorer
1.2. Create C:\ swap (C drive “swap” folder)
2. Copy teachphp.zip into C:\swap in your laptop & unpack in the folder (C:\swap\teachphp)
3. Under the Devices>Shared Folders> Shared Folders Settings, add the shared folder (C:\
swap\) to the SWAP Development VM and named it swap
4. Follow the following steps to access shared folder (swap) in SWAP Development VM.
Secure Web Applications Page 5 of 12
o In Windows 10 (SWAP Development VM), open your Windows explorer.
o Under the Directory Path, type \\vboxsvr\swap. Please see diagram below:
o If the folder is shared successfully, the folder in the laptop (C:\swap\) can be accessed in
the SWAP Development VM. Please see diagram below:
5. In the SWAP Development VM, copy \\vboxsvr\swap\teachphp to C:\xampp\htdocs
4.5. Start Web Server and Database Server
1. Launch the XAMPP control panel in SWAP Development VM
2. Start Apache and MySQL to start
3. Access phpMyAdmin by clicking “Admin” button besides MySQL.
Note: phpMyAdmin allows the editing of the database.
Secure Web Applications Page 6 of 12
4.6. Verify access to teachphp labs
1. Open a browser (e.g. Chrome, Firefox, Microsoft Edge,etc.).
2. Access the URL http://localhost to verify that XAMPP is running successfully.
3. Access the URL http://localhost/teachphp to verify access to the PHP labs.(a list of
subdirectories). If the setup is completed successfully, the following web page will be
displayed.
4.7. Orientation to tutorial
Describe how the tutorial is structured
and some key information to take note
when using the tutorial.
Secure Web Applications Page 7 of 12
5. Eclipse PHP IDE
5.1. Launching Eclipse
Students proceed to launch the Eclipse IDE and the following dialog is displayed. Either use the
default location or browse to a preferred location to store the workspace.
5.2. Create a new PHP project
1. Click on File > New PHP Project.
2. The following dialog will be displayed.
3. Specify a project name, e.g. sample.
4. Select “Create project at existing location (from existing source)”, click “Browse”
5. Go to”C:\xampp\htdocs”, Click “New folder” and named the new folder as “sample”.
Secure Web Applications Page 8 of 12
6. Select the “sample” folder and click “Select Folder”. See diagram below.
7. Proceed to click “Finish” at the bottom of the dialog.
8. A project named “sample” will be shown under “Project Explorer”.
5.3. Adding a web page to project
1. Click on File > New HTML File. If the option is not available, select “Other”.
Secure Web Applications Page 9 of 12
2. If “Other” is selected, the following dialog will be displayed.
Under “Web”, select “HTML File”. Click “Next” to proceed.
3. Specify “index.html” as the file name for the HTML page. Click “Finish” button
Secure Web Applications Page 10 of
12
4. If the “index.html” page is created successfully, Enter “Hello World” within “body” tag.
Then the following changes can be seen in the diagram below.
5. Open a browser and access the URL http://localhost/sample to confirm access to the
sample project. If the setup is completed correctly, the following web page will be displayed.
5.4. Using Eclipse with Azure DevOps
Please refer to the following link to see how Eclipse can be used with Azure DevOps
1. https://marketplace.eclipse.org/content/team-explorer-everywhere
2. https://docs.microsoft.com/en-us/azure/devops/organizations/accounts/use-personal-access-
tokens-to-authenticate?view=azure-devops&tabs=preview-page
3. https://azuredevopslabs.com/labs/java/eclipsegit/
4. https://docs.microsoft.com/en-us/azure/devops/repos/git/share-your-code-in-git-eclipse?
view=azure-devops
Please review vario Heus videos about Azure DevOps located in the LMS.
5.5. Learning Git
Please refer to the following link to learn about Git.
1. https://guides.github.com/activities/hello-world/
Please review various videos about Git located in the LMS.
5.6. Additional References
Refer to the Eclipse PHP IDE Manual in the link below to learn how to use the IDE.
https://help.eclipse.org/2019-09/index.jsp?topic=/org.eclipse.php.help/html/table_of_contents.html
Secure Web Applications Page 11 of
12
---------THE-END----------
Secure Web Applications Page 12 of
12
