Lab 1

CS314 (Web Application Development)

Objective (CLO1, CLO2):

1. Installing web and database server (Xampp).

2. Installing the code editor.
3. Running, editing, a sample html file inside the web server.

Contents
Part1: 1.Installing web and database server (Xampp).................................................................................2
How to install XAMPP on Windows 10....................................................................................................2
How to configure XAMPP on Windows 10...............................................................................................7
How to fix Apache not starting on XAMPP............................................................................................10
Uninstall World Wide Web Services..................................................................................................11
Change the default Apache TCP/IP port............................................................................................12
Manually stop World Wide Web Publishing Service..........................................................................13
How to increase phpMyAdmin upload size on XAMPP..........................................................................15
How to change phpMyAdmin password on XAMPP..............................................................................16
Part2: Setup the Code Editor.....................................................................................................................21
Creating an HTML file, deploying into web server, running it from a client..........................................21
Create an HTML file and deploy it to the folder that you just created..................................................27
Server architecture and index.html or index.htm or index.php or index.aspx......................................29
Part3: Running, editing, a sample html file inside the web server.............................................................31
Practicing html programming................................................................................................................31
Chapter2: Text.......................................................................................................................................31
You will learn about:..............................................................................................................................31
Heading.............................................................................................................................................31
Paragraph..........................................................................................................................................31
Bold & iTalic.......................................................................................................................................32
Other tags..........................................................................................................................................33
Your Task:..................................................................................................................................................34
Part4: Assessment.....................................................................................................................................35
Part1: 1.Installing web and database server (Xampp).

How to install XAMPP on Windows 10

1. Download XAMPP from https://www.apachefriends.org/index.html

2. If you have special version requirements for PHP, then download the version you’re
required to install. If you don’t have a version requirement, then download the oldest
version, as it may help you to avoid issues trying to install a PHP based software.
3. Double-click the file to run the installer.
4. Click OK on the warning to continue.

5. Click Next.
6. XAMPP offers a variety of components that you can install, such as MySQL,
phpMyAdmin, PHP, Apache, and more. For the most part, you will be using most of
these components, as such it’s recommended to leave the default options and click Next.
7. Uncheck the Learn more about Bitnami for XAMPP and click Next.
8. Leave the default install location settings or choose another folder to install the software,
and click Next to begin the installation.

9. During the installation Windows will prompt you to allow certain services to
communicate through the firewall. Click Allow access through the firewall for private.
10. Click Finish to complete the installation and to start using XAMPP Control Panel.

11. Choose your language (English or German), and click Save to complete and open
XAMPP Control Panel.
How to configure XAMPP on Windows 10
The XAMPP Control Panel includes three main sections. In Modules, you will find all the
services available. You can run each service by clicking the Start button.

When you start some of the services, including Apache and MySQL, on the right side, you will
also see the process ID number and TCP/IP port numbers each service is using. For example, by
default Apache uses TCP/IP port 80 and 443, while MySQL uses TCP/IP port 3306.

You can also click the Admin button to get access to the administration dashboard for each
service and verify that everything is working correctly.

On the right side have a list of buttons to configure various aspects of the control panel,
including Config to configure which modules will automatically want to start when you launch
XAMPP.
Netstart will give you a list of services currently accessing the network, process ID and TCP/IP
port information.
And there are also quick access buttons to open the shell command-line utility, XAMPP install
folder, Services, and quick.

Lastly, you get the logs section, where you can get a glance of what happens every time you start
a module or change a setting. This is also the first place to look at when something isn’t working.
The default settings should work for most people using XAMPP to create a testing environment
to run a website for personal use or a client. However, depending on your setup configuration,
you may need to change the TCP/IP port number for the Apache server, the database upload size,
or set the password for phpMyAdmin.

To change these settings, you’ll need to use Config button for the corresponding service. For
example, you’ll need to open the httpd.conf file to change the settings on the Apache server, and
the my.ini file to change the settings for MySQL.

How to fix Apache not starting on XAMPP

The XAMPP installation is very straightforward, but on Windows 10 and other versions of the
operating system, sometimes there is a problem that will not allow the Apache server to run.

The issues can be attributed to the World Wide Publishing Service that may be installed and
running on port 80 on your Windows PC. Port 80 also happens to be the default TCP/IP port that
Apaches uses on XAMPP and no two applications can use the same port in the computer.

You have a few ways to fix the problem as shown below:

Uninstall World Wide Web Services

If you don’t have any applications depending on the World Wide Web Services feature, you can
uninstall it using the following steps:

1. Use the Windows key + X keyboard short to open the Power User menu and select
Programs and Features.
2. Click the Turn Windows features on or off link.

3. Expand Internet Information Services and uncheck World Wide Web Services. Here,
you can also uncheck FTP Server and Web Management Tools, if you don’t depend on
those services.
4. Click OK.
 5. Reboot your computer to complete the task.
6. Open XAMPP Control Panel and click Start on Apache.

Change the default Apache TCP/IP port

Alternatively, you can configure Apache to run on a different TCP/IP port using the following
steps:

1. One the XAMPP Control Panel, click the Admin button on Apache, and click
httpd.conf.
2. Scroll down and find the line: Listen 80.
3. Change the 80 for another TCP/IP port number. You can try port 81. After the change the
line should read: Listen 81.
 4. Save and close the httpd.conf file.
5. Click the Start button to run the Apache server.

The only caveat with this configuration change is that you’ll need to append TCP/IP port number
on the address every time you want to connect to your website. For example, to access the
Apache server on the web browser, you will need to type: localhost:81/dashboard instead of
localhost/dashboard.

Manually stop World Wide Web Publishing Service

Another thing you could do is to stop World Wide Web Publishing Service (World Wide Web
Services) and change its settings to only start the service manually using the following steps:

1. Open the Start menu, do a search for Services, and press Enter.
2. Scroll down, find, and double-click World Wide Web Publishing Service.
3. Click Stop.
4. Change the startup type to Manual.
5. Click Apply.
6. Click OK.
 7. On XAMPP Control Panel, click the Start button to run the Apache server.

The best way to get Apache working again is by uninstalling the World Wide Web Publishing
Service, but when that’s not possible you can alternatively change the TPC/IP port number or
stop service as necessary.

How to increase phpMyAdmin upload size on XAMPP

Another common problem with XAMPP is the default database upload limit. For example, many
times web designers and developers will make a copy of a website for troubleshooting purposes
or work in site without disrupting the live website.

However, people using WordPress or another content management software will quickly find out
that they can’t upload a database because it exceeds the maximum upload size permitted, which
by default is 2,048KiB.

Increasing the database upload limit on phpMyAdmin is pretty simple, just follow these steps.

1. On XAMPP Control Panel, click the Explorer button.

 2. Open the php folder and open the php.ini file with a text editor.
3. Change the value for upload_max_filesize and post_max_size to the size you want.
For example: post_max_size=20M and upload_max_filesize=20M to import database
files of up to 20MB.
4. Click the Stop button for MySQL and Apache .
5. Click the Start button to restart Apache and MySQL.

You should now be able to import larger database files on phpMyAdmin.

How to change phpMyAdmin password on XAMPP

By default, phpMyAdmin (MySQL) uses “root” as username without password, which means
that if you’re installing a WordPress site, when asked you only need to enter root as the
username and leave the password field empty.

However, if you want to change the password, you can use the following steps.

1. On XAMPP Control Panel, click the Admin button for MySQL.

2. Click on the User accounts tab.
3. Click the Edit privileges link for the username root, but the one with hostname
localhost.
4. Click Change password.
5. Type and re-type the new password.
6. Click the Go button to complete the task.
At this point if you try to login to phpMyAdmin, you will get an access denied message:
“Cannot connect: invalid settings.”
To fix access issue you need to change the configuration settings in the config.inc.php file using
the following steps:

1. On XAMPP Control Panel, click the Explorer button.

2. Inside the XAMPP folder, open the phpMyAdmin folder, and the open the
config.inc.php file with a text editor.
3. Under Authentication type and info, and update the following lines:
o On $cfg['Servers'][$i]['auth_type'] = 'config'; replace config for
cookie.
o On $cfg['Servers'][$i]['AllowNoPassword'] = true; replace true
for false.
 4. Save and close the file.

After saving the file, you should be able to login to phpMyAdmin dashboard.

Now XAMPP is configured and ready to use with any supported PHP-based software.

How to install XAMPP on MAC

1. Download XAMPP from https://www.apachefriends.org/index.html

Select Download.
2. Select the one of the following version

3. Make sure that you downloaded the .dmg

If the file is .bz, change it to dmg

4. Double click

5. Step up
You need to Write your
computer password
 6. Configure XAMPP

6.1 Mange server:

 This step very important, You need
to start running servers.

6.2 Go to the application, open the Apache Friends website, form this website you can open
phpMyAdmin

6.3 Open Application ,it open the web server location

All the web pages have to be saved in this location
Part2: Setup the Code Editor

Recommended Code Editor  https://code.visualstudio.com/download (Visual Studio Code)

Other excellent editors: https://www.sublimetext.com/ , https://atom.io/

Creating an HTML file, deploying into web server, running

it from a client
Windows 10
1. Go to your web server at the following location
Open any browser and type http://localhost. You should see the following, which says the web server is
up and running
Go to the web server folder called htdocs
Create your first web server folder in the root of the webserver, named UPM-CS314

Now you can browse this folder from any computer within the same network the following URL

http://IP Address of the web server/UPM-CS314

If you have installed this server in your own computer, then use the following URL

http://localhost/UPM-CS314 or http://127.0.0.1/UPM-CS314

In this part of the lab, students will be installing the web server in one of the lab PCs or in their own
computer. Students have to find out the IP address of the web server and mark it.

Type cmd in the search box

Now, before you start testing the web server, make sure that both the client and the webserver are
inside the same network (either same Wireless network or lab network)

Open any browser and type the above address with the folder that you just created as following:
MAC
1. Open XAMPP
2. Run the Servers

3. Open htdocs, as following:

4. Create your first web server folder in the root of the
webserver, named UPM-CS314
5. Now you can browse this folder from any computer within
the same network the following URL http://IP Address of
the web server/UPM-CS314
6. Students have to find out the IP address of the web server
and mark it.

6.1 open System Preference then select Network then

advance
 6.2 select TCP/IP

This is the IP
address

7. Now you can browse this folder from any computer within the same network the following URL
http://IP Address of the web server/UPM-CS314
The following pic from my phone browser.
Create an HTML file and deploy it to the folder that you just
created.
Open the editor, and create a new file with name “homepage.html” and copy the following text from
your book (into this file and save it to the UPM-CS314 folder.
Now, you can browse this web server folder from any web browse client using the following URL
Now students will be able to explain the domain, the root project folder and the html file from the URL

Server architecture and index.html or index.htm or

index.php or index.aspx
Students will be renaming the homepage.html into index.html and see the difference
Which is equivalent to
Part3: Running, editing, a sample html file inside the web
server.

Practicing html programming

Chapter2: Text
You will learn about:
The elements that you can use to describe both headings and paragraphs.

Heading
Paragraph
Bold & iTalic
Other tags

 <b> and </b> we can make characters appear bold

 <i> and </i> we can make characters appear italic.
 The <sup> element is used to contain characters that should be superscript such as the suffixes
of dates or mathematical concepts like raising a number to a power such as 22
 The <sub> element is used to contain characters that should be subscript. It is commonly used
with foot notes or chemical formulas such as H20.
 To add a line break inside the middle of a paragraph you can use the line break tag <br />.
 To create a break between themes — such as a change of topic in a book or a new scene in a
play — you can add a horizontal rule between sections using the <hr /> tag.
 The use of the <strong> element indicates that its content has strong importance.
 The <em> element indicates emphasis that subtly changes the meaning of a sentence.
 Your Task:
1. Create a new folder within webserver root i.e. htdocs. The name of the folder should be your
student number.
2. Create an html file that looks like the following figure and run from the web server folder.
Title

Heading 1

Heading 2
Heading 3 , the font is italic

Heading 4
This block is paragraph. The word
This block is paragraph and H1 are Strong
paragraph

This is line

This block is paragraph and the size is

header 2.

It has 3 spaces

The name and ID must be italic

Part4: Assessment

1. Each student will show all the above 3 parts running as demo to the Lab Instructor before
leaving the lab. Total marks for the lab is as follows

Part (demo + report) Marks (demo + report)

1 30

2 10

3 60

Total 100

See the lab1 excel sheet rubric.

2. Students will prepare a report in which they will submit the snapshots taken while they worked
on each part. They will explain the figures to make sure that they understood what they did.

3. The deadline to submit the report is after The lab time at Teams.

Note: Any submission crossing the deadline will be penalized by 10% reduction per day.