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