THE HONG KONG POLYTECHNIC UNIVERSITY
Department of Electronic and Information Engineering
ENG2003 Information Technology - Workshop 2
Setting up a Web Server and Interactive Blog
Objective:
• Set up an Apache web server using XAMPP package.
• Create an interactive blog using WordPress.
Tasks:
1. Start XAMPP package
2. Install WordPress
3. Customize your page
4. Add plug-in
5. Restore system setting [COMPULSORY]
Task 1: Start XAMPP package [1]
Many people know from their own experience that it's not easy to install an Apache web server and it gets
harder if you want to add MySQL, PHP and Perl.
XAMPP is easy to install Apache distribution containing MySQL, PHP and Perl. XAMPP is really very
easy to install and to use - just download, extract and start.
XAMPP for Windows
The new version of XAMPP 1.8.3 includes:
• Apache 2.4.7
• MySQL 5.6.14
• PHP 5.5.6
• phpMyAdmin 4.0.9
• XAMPP Control Panel 3.2.1
Step 1: Start the Apache Web server & MySQL Database server from XAMPP Control Panel
Open Windows Explorer, go to "C:\xampp" and double click the file "xampp-control.exe".
1
In the XAMPP Control Panel, click Start button to start the Apache and MySQL services. If the Action
button shows Stop, it means the service is running already.
You should see the following screen after successfully starting up the services (If the Action button shows
Stop with port(s) number, it means the service is running.)
Use Google Chrome or Mozilla Firefox [Recommended]. Type “http://localhost” in the address bar and
then press Enter key. In computer networking, localhost refers to this computer and resolves to the
address 127.0.0.1 which is used as the IPv4 loopback address. It is a hostname that the computer's
software and users may employ to access the computer's own network services via its loopback network
interface. If a computer has been configured to provide a website, directing its web browser to
http://localhost may display its home page.
Then click “English” for the language.
You should see the screen below if you have successfully started the services. If you can’t see the screen
below, please raise your hands to seek help from lab supervisors.
Click phpinfo() in the left menu, look for the keyword DOCUMENT_ROOT which is the default
location where you should place your web files.
2
Write down your default DOCUMENT_ROOT here:
Step 2: Create a Database with your student id.
You can create a database via the phpMyAdmin page. To access the phpMyAdmin page, you may click
“phpMyAdmin” from the left menu shown on the screen above.
There are two optional ways to access “phpMyAdmin”:
1. Access “phpMyAdmin” through the XAMPP Control Panel by clicking MySQL's “Admin” button.
2. Use Google Chrome or Mozilla Firefox and enter the address http://localhost/phpmyadmin/ directly.
3
While you are at the phpMyAdmin page, click the“Databases” tab.
Create a Database with your student ID. Replace "123456d" shown below with your student ID.
4
Task 2: Install WordPress [2]
Download “wordpress-3.8.1.zip” from Blackboard. Then, right click the “wordpress-3.8.1.zip” file and
click “Extract All…”. Browse to or enter "C:\xampp\htdocs" for the destination (or right-click the file
and select 7-Zip -> Extract File ... -> Browse to or enter "C:\xampp\htdocs" for the destination).
Notes: Extract all files to "C:\xampp\htdocs" only if your DOCUMENT_ROOT is "C:\xampp\htdocs".
Otherwise, extract them to your own htdocs folder. Please refer to the previous page on how to find your
default DOCUMENT_ROOT folder. (e.g. If your default DOCUMENT_ROOT is
"C:\Temp\xampp\htdocs", extract them to "C:\Temp\xampp\htdocs".)
Go to "C:\xampp\htdocs" and you will find the extracted “wordpress” folder.
Rename the extracted “wordpress” folder with your
student ID.
5
Use Google Chrome or Mozilla Firefox [Recommended] and type “http://localhost/123456d/” in the
address bar and then press enter. (In this example, you should replace “123456d” with your student id.)
You should end up with the following screen.
Click “Create a Configuration File”.
Click “Let’s go!”.
Fill in the form as follows. Note that you should replace “123456d” with your own student ID for the
“Database Name”. Enter “root” for “User Name”. The “Password” field should be left blank. When you
are done, click “Submit”.
6
Click “Run the install”.
Provide your own information for the following form. Here is an example for Chan Tai Man's Blog. You
should replace “Chan Tai Man” with your full name. You may use your student ID for the password field.
Fill in your PolyU's CONNECT email address. When you are done, click “Install WordPress”.
Click “Log In” to continue.
7
Enter the username and password that you have just created and click the “Log In” button in blue. Once
logged-in, you can customize your site here. DON’T do any updates! (You can also access to this page
later through http://localhost/123456d/wp-admin/)
You can preview your page through http://localhost/123456d (or replace “localhost” with your IP address
e.g. http://158.132.151.102/123456d/ where “158.132.151.102” should be replaced with your own IP.
You may refer to next page for how to find your IP.)
Task 3: Customize your page [3]
Begin by logging into the “administration area” or the back end of your website. You can always visit
your site's login page by placing "wp-admin" after your domain name (e.g.
http://example.com/StudentId/wp-admin). Some themes provide a "log in" link or form on the front end
as well. Now login to WordPress using your username and password.
8
After logging in you are on the main Administration Screen called the Dashboard. This is the brain
behind your website, the place where you can let your creativity explode, writing brilliant prose, and
designing the best and most lovely website possible. This is where the organization of your site begins -
and this is just the start.
At the top of the screen, there is an area called “toolbar”. You can
always visit your WordPress site by clicking the link with your site’s
name on it.
Tips: You may always keep and review your homepage (not admin page) in a separate browser.
Take time to look at the site before you get into the changing of things and figuring out how all of this
works; it's important to see how the WordPress Twenty Fourteen theme is laid out and works.
The Dashboard is a collection of information about the activities and actions on your WordPress site. The
left side of the screen is the main navigation menu detailing each of the administrative functions you can
perform. Move your mouse down the list and the sub-menus will "fly-in/appear" for you to move your
mouse to and click. Once you choose a "parent" navigation section, it will open up to reveal the options
within that section. You can always return to the Dashboard by clicking “Dashboard > Home”.
Preparing your blog
In order to allow other people to view your blog, you have to do the following:
Write down your IP address here:
(Hints: You may retrieve your IP address through the following step. Click Windows Start at the bottom
left corner. Type “cmd” in the “Start Search” textbox and press Enter key to call out the command prompt.
Inside the command prompt, type “ipconfig” and press Enter key. Scroll up and look for your
Windows IPv4 address. DON'T use any website like http://whatismyipaddress.com/ to retrieve your
current IP address, especially using a router to share the Internet at home. If you have multiple IPs, try to
locate that IP only with a number next to "Default Gateway" also. If you are not sure with your IP address,
please raise your hand to seek help from lab supervisors.)
Important:
Use a new Google Chrome or Mozilla Firefox and try to access your page first through
http://xxx.xxx.xxx.xxx/123456d where “xxx.xxx.xxx.xxx” is you own IP written above and "123456d" is
your student ID. You may highlight the verified link and then right click -> copy to save the link for later
use. If you can't access your page through this method, please check and don't move on! You may type a
wrong IP address.
Back to the Administration Screen, go to Settings > General
Replace the word "localhost" inside the "WordPress Address (URL)" and "Site Address fields (URL)"
with your IP address written down above. Please refer to the figure in the next page. (In other word,
replace the underlined part of the following figure with your own IP address.)
9
Important:
Make sure you type your IP address correctly e.g. 158.132.xxx.xxx (or 192.168.xxx.xxx if working at
home through home router). Each computer should have a unique IP address. Please note that your
IP address which has been written down in the previous page must be different from your
classmates. If you configure the IP address wrongly, the step cannot be undone and you may need
to reinstall WordPress again!
Finally, remember to click the “Save Changes” button at the bottom of the page. You may have to login
again.
Quick Changing the Look
The “Appearance > Themes” section from the main navigation menu allows you to change the look of
your site using different Themes. Themes are presentation styles that completely change the look of your
site. In your Appearance Screen, you will see a list of currently installed themes, including the WordPress
Twenty Fourteen theme. To quickly change the theme, simply click on the Activate button under one of
the themes listed, then click on your site’s name in the top toolbar to see how it looks. Wow, you have
another look and nothing else on the site has changed. It's that easy.
Important:
Go back to the Appearance > Theme
section and click the Activate button
under the WordPress Twenty Fourteen
theme to bring the design back to what
you had. To see it again, click your site’s
name on the toolbar, and there it is.
10
Writing and Managing Posts
Back to the Administration Screen, move your pointer over “Posts” on the main navigation menu. You
can use the tabs under the Posts Menu to write and manage your posts. Let's start making your first test
post by clicking “Posts > Add New” on the menu.
You may simply fill in the blanks, one by one, in
the post beginning with the title and then write a
little test message in the post window. This is just
for a test, so you can write anything you want.
When you are done, click the blue Publish button
that is on the right of the post entry window and it
is done. You will then see a blank Write a Post
screen and you're ready to write another post.
You can view your posts by clicking your site’s name on the toolbar at the top of the screen.
Creating Pages (This technique will be used in the coming exercise)
To create a new Page, log in to your WordPress installation with sufficient admin privileges to create new
articles. Select the “Pages > Add New” from the main navigation menu
to begin writing a new Page.
Organizing Your Pages
Just as you can have subcategories within your Categories, you can also have subpages within your Pages,
creating a hierarchy of pages.
For example, a WordPress site for a travel agent may feature an individual Page for each continent and
country to which the agency can make travel arrangements. Under the Page titled "Africa" would be
subpages for Lesotho, Cameroon, Togo, and Swaziland. Another parent Page "South America" would
feature subpages of Brazil, Argentina, and Chile.
To create a subpage (This technique will be used in the coming exercise)
1. Click “Pages > Add New” from the main navigation menu.
2. From the menu on the right, click the “Parent" drop-down menu. The drop-down menu contains a list
of all the Pages already created for your site.
3. Select the appropriate parent Page from the drop-down menu to make the current Page as a child Page.
4. Add content to the subpage.
5. Click Publish when ready.
11
(Note: If you cannot see the subpage flying out from the parent page, try to change back to the default
“Twenty Fourteen” template. )
Settings Discussion Screen (This technique will be used in the coming exercise)
The “Settings > Discussion” section allows you to set the options concerning comments (also called
discussion). It is here the administrator decides if comments are allowed, if pingbacks and trackbacks are
acceptable, and what constitutes Comment Spam. On this Screen, you also control the circumstances
under which your blog sends you e-mail notification of certain events at your site.
Go back to Administration Screen. Click “Settings > Discussion”.
Working with Images (This technique will be used in the coming exercise)
WordPress makes it easy to add images to your WordPress site. You can upload images to your
WordPress using the built-in file uploading utility on the Posts screen. WordPress can help you to resize
images and create thumbnails.
Inserting Images into Posts and Pages
Step 1 – Placing your cursor
In order to add an image to your page or post
while you are composing your post, you must
first insert your cursor in the place in the text
where you want the image to appear. By placing
your cursor within your text, you can add images
inline with your content. You can also place
your cursor on a blank line if you want the
image to appear by itself instead.
Step 2 – Click the Add Media button
Once you’ve placed your cursor on the line where
you want your image to appear, click on the Add
Media button to launch the media uploader interface,
and then select the Insert Media option from the list
of actions in the left side of the media uploader
window.
12
Step 3 – Add or Select Your Image
You can add or select the image you want to add to
your page or post by choosing from either of the
following options in the center of the media uploader
window:
• Upload Files: Upload an image you want to
use from your computer by dragging it into
the upload area.
• Media Library: Select from any previously
uploaded images in the media library by
clicking on the one you wish to add to your
page or post.
Once you have selected or uploaded the image you want to add. You will see a checkbox next to the
thumbnail confirming your selection, and see information about it displayed in the Attachment Details
pane on the right-hand side of the media uploader interface.
Step 4 – Inserting the image
Once you have determined your image settings, click on the blue “Insert into post” or “Insert into page”
button, to add the image to your page or post. After the image uploader window closes, you will see the
image in the text editor window, including a preview of the
alignment of the image, if you have specified an image
alignment.
At any time, you can edit the image settings by clicking on
the Edit Image button in the upper left-hand corner. You
can remove the image from your page/post by clicking on
the Remove Image button.
For further support, go to http://codex.wordpress.org/Inserting_Images_into_Posts_and_Pages
Embeds
It's super easy to embed videos, images, and other content into your WordPress site. To embed something
into a post or page, all you need to do is to post the URL to your content area. Make sure that the URL is
on its own line and not hyperlinked (clickable when viewing the post).
(Hints: You may highlight the web address and click the unlink button to disable the hyperlink feature)
13
For example, type the following text in your post:
Check out this cool video:
http://www.youtube.com/watch?v=htBqqzPcvCA
That was a cool video.
WordPress will automatically turn that URL into an
embedded YouTube video when the post is viewed. Try to
embed a YouTube video in your own blog. Make sure your URL is correct.
Exercises:
1. Add a new page named “About Me” with your personal details including your student full name (same
as your student ID card) and your student ID.
2. Add a new subpage named “My Favorite” under the previous page “About Me”.
3. Add a new post with an image and a YouTube video.
4. Ask your classmate to use any PC other than yours to post any comment with his/her student full name
to your blog. He / She may access your blog through your IP address. Replace the localhost inside the
web address with your IP address. What is your web address which is typed by your classmate in order to
access your blog? (If your classmate can't access your PC, turn off your firewall please by typing
Windows Firewall in the program search menu and selecting Windows Firewall. Choose Turn Windows
Firewall on or off and then turn off the setting.)
5. Spend 10 more minutes on exploring at least one simple function or setting not mentioned before. What
is it?
(Hint: http://codex.wordpress.org/)
14
Task 4: Add plug-in [4]
Plug-in 1: My Weather
Go to the admin page through http://localhost/123456d/wp-admin/ and then login. (You should replace
“123456d” with your student id.)
Click “Plugins > Add New”.
Search for “My Weather” and click “Install Now”
15
Activate the plugin after successful installation.
Go to Dashboard and click Manage widgets.
You may add plugin by dragging and dropping the plugin to the corresponding widget area. Note that the
items under the "Primary Sidebar" appears in the left menu section of the site (Note: This is based on
"Twenty Fourteen" theme. If you are using another theme, the number of sidebars and the location may
be different.)
Drag and drop here
16
Expand this area
Now, fill in the Widget detail for local weather.
Make sure you have enter correct full city name e.g. “Hong Kong” into active My Weather widget.
When you are done, scroll down and click the blue “Save” button. Then you can go to
http://localhost/123456d/ to view your site. You should see the My Weather on the sidebar.
(Note: If you cannot see the My Weather on the page, try to change back to the
default “Twenty Fourteen” template. )
17
Checkpoint: Demonstrate your WordPress page to a lab supervisor to get your marks for this
workshop.
Write down the web address to access your WordPress page here:
Checklist for the checkpoint:
⚫ The site’s name should be your full name.
⚫ There is a new page named “About Me” with your personal details including your full name and
student ID.
⚫ There is a new subpage named “My Favorite” under the previous page “About Me”.
⚫ There is a new post with an image and a YouTube video.
⚫ There is a comment posted by your classmate with his/her student full name and student ID.
⚫ Explore at least one simple function or setting not mentioned before.
⚫ There is “My Weather” displayed on the WordPress page.
⚫ Answer the questions on pages 3, 9 and 14.
DOCUMENT_ROOT of your web server: _______________________
IP address of your web server: _________________________________
Web Address of your WordPress: _______________________________
18
Task 5: Restore System Setting AFTER completing your demonstration [5] [COMPULSORY]
1. Go to http://localhost/phpmyadmin/. Click the“Databases” tag in the top menu and tick only the
previous database (named by your student ID) created by you. Finally, click Drop and OK to drop the
database.
2. Open Windows Explorer, go to "C:\xampp\htdocs" and delete ONLY your “wordpress” folder (named
by your student ID).
3. In the XAMPP Control Panel, click Stop button to stop both the Apache and MySQL services. (Notes:
Open Windows Explorer, go to "C:\xampp" and double click the file "xampp-control.exe".)
19
Appendix: XAMPP installation and de-installation
To install XAMPP, you may go to https://www.apachefriends.org/download.html
If you prefer to install XAMPP using ZIP or 7zip version, you only need to download and extract
XAMPP. There are no changes to the Windows registry and it's not necessary to edit any configuration
files. If you decide that XAMPP isn't needed anymore, just delete the XAMPP directory and it's
completely removed from your system.
However, if you use the Windows installer version of XAMPP, it's recommended to use the uninstall
feature to remove it as every installer will make registry entries to remember the install.
Important:
PHP in this package needs the Microsoft Visual C++ 2008 Redistributable package from
http://www.microsoft.com/en-us/download/details.aspx?id=5582. Please ensure that the VC++ 2008
runtime libraries are installed on your system.
Method: Download and install XAMPP using the ZIP version
Troubleshooting
To install a WordPress Plugin manually: Download your WordPress Plugin to your desktop. If
downloaded as a zip archive, extract the Plugin folder to your desktop. Read through the "readme" file
thoroughly to ensure you follow the installation instructions. Copy the Plugin folder to the wp-
content/plugins folder in your WordPress directory. Go to Plugins screen and find the newly uploaded
Plugin in the list. Click Activate to activate it.
References
[1] http://www.apachefriends.org/en/xampp.html
[2] http://wordpress.org/
~ End ~
20
