WEB PROGRAMMING FUNDAMENTALS

LAB 5 – MySQL and PHP (Part 3)

Content:
- Design the interface for the websites in the previous labs.
- Using AJAX

Objective: Combine the results in the previous labs to create a complete Song
Review website similar to the following figure.

Figure 29. Song review homepage

Note:
• The exercises in this lab are based on the following exercises: Ex 3, Lab 2; Ex
7 (or Ex 4), Lab 3; Ex 5 (or Ex 6), Lab 3;
• Suppose that the HTML files of this website are saved in the folder
/htdocs/buoi5.

Web Programming Fundamentals Labs (CT214H) – TS. Trần Công Án -46-

Ex 1. Add images for the reviews.
v Requirement:
1) Add the field image_name for table baiviet that will hold the name of the
image for the review. The datatype for this field is varchar(100).
2) Download some images used as the thumbnail for the reviews and save the
downloaded images into the buoi5/images folder. Resize the images to
about 100x100px to 300x300px.
3) Update field image_name in table baiviet to assign the image for each
review.

v Hint:
• Use the ALTER TABLE ADD COLUMN… statement.
• You can download any images for the reviews, or you can download them at
this link: http://bit.ly/1jD2deL
• Create folder buoi5/images and copy the downloaded images into this
folder.
• Use the UPDATE statement to update the name of the image file that will be
used for each review.

Note: To do this task more efficiently, we should name the image files using the
naming rule bviet_xx with xx as the id of the review (from 1 to 17, accordingly
to the provided data). After that, we can write one UPDATE statement for
assigning the image name for all reviews as follow:

UPDATE baiviet SET

image_name = concat(“bviet_”, ma_bviet, “.jpg”);

Ex 2. Create a template for the website

v Requirement: use the result of Ex 3, Lab 2 (called MyMusic page) and make the
following changes to produce a template as in Figure 30:
1) Add a div below the page header for displaying the welcome text with the
following properties: background #FFEBCD; height 25px; padding 5px.
2) Split the header (My Music…, Without music…), welcome bar, menu (links),
and footer (Update…) into separate PHP files.
3) Link the separate PHP files into the template file (MyMusic), delete all page
content, and save it as mymusic-template.php file. The content of this file is
as follows:

Web Programming Fundamentals Labs (CT214H) – TS. Trần Công Án -47-

 Figure 30. MyMusic – Template page

Web Programming Fundamentals Labs (CT214H) – TS. Trần Công Án -48-

Ex 3. Create the homepage for MyMusic website. This page will display the 5 newest
reviews.
v Objective: Combine the MusicTemplate and the result of Ex 4, Lab 4 (song
review list) to create the homepage of MyMusic website.

v Requirement:
1) Create a homepage as shown in Figure 31 (music-home.php). This page will
show the 5 newest reviews with a format similar to Ex 3, Lab 2.
2) Modify the page menu so that the Home item links to the music-home.php.

Figure 31. MyMusic homepage

v Hint:
1) Do the following steps:
• Copy the MusicTemplate file into music-home.php.
• Copy the code for generating the review list in Ex 4, Lab 3 into the place
that will show the content of the homepage (line 20).
• Modify the query to return only 5 newest reviews: use the ORDER BY
ngayviet DESC to sort the reviews by review date and LIMIT 5 to
eliminate the number of reviews.
Web Programming Fundamentals Labs (CT214H) – TS. Trần Công Án -49-
 • Modify the PHP statement that generates the review information so each
review will be put in a div entry. HTML code for each entry (in Ex 3) is as
follows:

The PHP code for generating the review entries with the above structure
is as follows (pay attention to the corresponding between lines 1-7 of the
above code and lines 5-11 of the below code):

Note: In line12, there must be no space after the semicolon ;

2) Do it by yourself.

Ex 4. Design the song review search page based on the review title.
v Objective: Design the song review search page based on the template page and
the result of Ex 5 (or Ex 6), Lab 2.

v Requirement:
1) Create a sing review search page based on the review title, similar to Figure
32 (music-search.php).
2) The search result includes the title (1st line), review date, author (2nd line),
song name, genre, and summary (3rd paragraph). The summary display only
the first 150 characters. The margin for each review entry is 30pt 10pt 20pt
30pt;
3) Update the Search item in the menu to the link page music-search.php.
4) Note: all formats must be done using CSS.

Web Programming Fundamentals Labs (CT214H) – TS. Trần Công Án -50-

 Figure 32. Song review search page – MyMusic

v Hint:
1) Similar to Ex 3, this exercise is based on the template page and the result of
the previous exercises: Ex 5 or Ex 6, Lab 3.
• Create a new file, “music-search.php” from the template file for this
exercise.
• Create a div to contain the search result and the search form. Put this div
inside the content part of the page (line 20).
• Copy the code for searching song reviews from the previous exercises
(including HTML code and PHP code) to the above div.
• Create a CSS file and create a structure for the div containing the search
result as follow:

Web Programming Fundamentals Labs (CT214H) – TS. Trần Công Án -51-

 • The PHP code for generating the div for the search result is as follows:

Note: Lines 4-6 are used to cut 150 characters for the review summary,
which can avoid breaking the last word. This code doesn’t handle the case
in which the review is less than 150 characters.
2) Create CSS rules for the search result (the div s_entry and its inner divs): do
it yourself.

Ex 5. (Extra) Create pagination for the search page music-search.php so that each
page displays at most 5 results.
Ex 6. (Extra) Create pages for adding/deleting reviews based on the template and the
Lab 4 results. Update the website menu to link to the new pages.
Ex 7. (Extra) Design a webpage for updated song reviews using AJAX.
v Objective: Using AJAX to create asynchronous communication to the web server.

v Requirement: Create a webpage for updating the song reviews as described in

Figure 33 and Figure 34:
1) The webpage shows a list of reviews (title) and a form that displays the
selected review and allows the user to update the review information.
2) When the user chooses a review from the list, the page will connect to the
web server using AJAX to get the selected review information and display it
on the form.
3) The user can change the review information, except the review id, and click
the “Cập nhật” button to update the review information or the Reset button
to cancel the modification.
4) If the user wants to change the reviewer name, but the reviewer is not in the
database, they may type the reviewer name into the textfield next to the
dropdown list and click the “Thêm TG” button to add a new reviewer. This
function also uses AJAX to request the server to add a new reviewer and
update the dropdown list without reloading the whole page.

Web Programming Fundamentals Labs (CT214H) – TS. Trần Công Án -52-

 Figure 33. Update the review – Initial

Figure 34. Update review – Select a review

Web Programming Fundamentals Labs (CT214H) – TS. Trần Công Án -53-