WEB PROGRAMMING FUNDAMENTALS

LAB 4 – MySQL and PHP (Part 2)

Content:
- Update MySQL data in PHP.
- Pagination.

Ex 1. Create a form for adding song reviews.

v Objective: Insert data into the database.

v Requirement:
1) Create a webpage to add a new song review, as shown in Figure 24.
2) Field “mã bài viết” will be assigned a next value when the form is shown (the
current max value + 1).
3) The field “ngày viết” will also assign the current date as the default value.
4) (Extra) Validate the form data before submitting it to the web server (e.g.,
the fields must not be empty). In addition, if the song name is empty, use the
review title for this field.

Figure 24. Add a new review page

Web Programming Fundamentals Labs (CT214H) – TS. Trần Công Án -37-
 v Hint:
1) To create this page, we do the following tasks:
a. Create the “Adding new review” form for collecting data:
• Request method: any, can be POST or GET.
• Form action: will be processed in the same form.
b. Form processing (for adding new review): use the isset() function to
check the form variables (data). If all data is available, connect to MySQL
and execute the INSERT INTO statement to add a new review to the
database.
c. Display the list of reviews: do the same as in Ex 4, Lab 3. Note: This step
must be done after the new review has been added to the database to
show the new review in the list.
The structure of the PHP page is as follows:

2) The default value for “Mã bài viết” will be calculated on the server side:
• Use SQL to select the max value of the review id.
• Compute new review id = max value + 1.
• We should write a function to handle this task (e.g., write a function
named get_ma_bviet()) and save it in a separate PHP file.
• To display the review id in the text field: use the echo statement

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

 <input type=”text” … value=”<? echo get_ma_bviet()?>”>

Note: if the get_ma_bviet() function is put in a separate PHP file, we

need to use the include or require command to use this file before
calling the function.
3) The default value for “Ngày viết” field can be generated using JS (client side)
or PHP (server side).
• Server side (PHP): similar to the 2nd requirement, but we don’t need to
connect to MySQL as we can use the date() function to get the current
date.
• Client side (JS): use DOM and JS function as follow

<script type="text/javascript">
var d = new Date();
f_add.ngayviet.value = d.getFullYear() + "/"
+ (d.getMonth()+1) + "/" + d.getDate();
</script>

4) (Extra) Use JS to make the validation (see Lab 3 or Chapter 4).

Ex 2. Create a form for deleting song reviews.

v Objective: Use the hidden fields and delete data in MySQL DB.

v Requirement: Create a webpage for deleting song reviews, as shown in Figure

25, with the following particular requirements:
1) The initial page shows all reviews with the button “Xóa bài viết” for each
review. If the user clicks the button, the corresponding review will be deleted
from the DB, and the review list will be updated.
2) The user can filter out the review list by entering the filter keyword.
3) (Extra) Display a confirm dialog before deleting a review, and a message box
will also be displayed after the review has been deleted successfully (see
Figure 26). In addition, there must be a Clear Filter button to clear all filters
applied.

v Hint: Students see the example Title-Manager in Chapter 5.1 to recap how to
create a form for deleting data.
1) This requirement can be fulfilled based on the result of Ex 5, Lab3, with the
following modification:
• For each review, besides the current information as in Ex 5, Lab 4, we add
a new form (child form) which contained a button “Xóa bài viết”. When
the delete button is clicked, the form containing this button will be
submitted to the server to process the request.

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

 Figure 25. Delete reviews

Figure 26. Delete review – Advanced

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

 • In the form containing the “Xóa bài viết” button, we also need to add a
hidden field containing the corresponding review's id so that when the
form is submitted, the server will get the review id to delete it from the
database.
<form action='baiviet-delete.php' method='post'>
Mã bài viết ... <br>
Tiêu đề ... <br>
…
<input type='submit' value='Xóa bài viết'>
<input type='hidden' name='ma_bviet_del' value='mã_BV'>
</form>

Figure 28 shows the organization of the code of this webpage.

2) Review filter: similar to the search page (see Ex 5, Lab 4).
3) There are 3 requirements:
• Show the confirmation dialog: write a JS function on the client side (e.g.,
named ask_confirm()) that shows the confirmation box (using the
confirm() function) and returns true if the user clicks the OK button and
false if the user clicks the Cancel button (see Chapter 1 – HTML for the
syntax of this function). In the onclick event of the “Xóa bài viết” button,
the function ask_confirm() will be called:
< . . . onclick = “return ask_confirm();”>
• Show the message box if the review is deleted successfully. This task will
be processed in the PHP code. There are 2 methods:
o PHP code will generate HTML code for showing the message.
o The PHP code will generate a JS function showing the message
using DOM (the document.getElementById() function and the
innerHTML property).
Note: before deleting the review, we need to select the title of the review
being deleted and save it to show the deleted review title in the message.
• Remove the filter: submitting the search form with the empty keyword is
the easiest method.

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

 Figure 27. Outline of the deleted review page

Ex 3. (Extra) Modify the adding review page so that the author name and genre of the
song can be selected in a dropdown box. In addition, the post date can also be
selected in a calendar.
v Objective:
1) Using the combobox.
2) Increase the user-friendly of the webpage.
3) Create JS code in HTML page by PHP.

v Requirement: Modify the result of Ex 1, Lab 5; we create a webpage, as shown

in Figure 28 with the following criteria:
Web Programming Fundamentals Labs (CT214H) – TS. Trần Công Án -42-
 1) The reviewer's name can be selected from the dropdown list.
2) The song genre can also be selected from a dropdown.
3) The default review date is the current date, and the user can choose another
date in a calendar without typing the date value.

Figure 28. Adding new review – Advanced

v Hint:
1) Use a dropdown list (<select> tag) for getting reviewer names instead of a
textfield in Ex 1. The structure of the dropdown list for selecting the reviewer
name is as follows:
Tác giả <select name="ma_tgia">
<option value='1'>Nhacvietplus</option>
<option value='2'>Sưu tầm</option>
. . .
<option value='8'>Tâm tình</option>
</select>

The options inside the <select> tag will be selected from table tacgia with
the value property from field ma_tgia, and the tag's content got from field

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

 ten_tgia. When the form is submitted, the value of the selected option will be
sent to the server for processing.
To generate the options of the <select> tag, we put the following PHP code
in the <select> tag as follow:

<select name=”ma_tgia”>
<?php
//tạo các options:
// nối kết CSDL, truy vấn dữ liệu
// với mỗi mẩu tin, xuất ra 1 thẻ option tương ứng
while ($row = mysql_fetch_array($q_result)) {
echo "<option value='", $row["ma_tgia"], "'>";
echo $row["ten_tgia"], "</option>";
}
?>
</select>

We can save the code for generating the options as a function (with 3
parameters: table name, the field used for value property, and the field used
for the content of the option) so that we can reuse it for other dropdown lists
(e.g., the 2nd requirement of this exercise).
2) Similar to the 1st requirement.
3) Use a JS date picker, e.g., the DatePicker (http://jqueryui.com/datepicker/).
This library can be downloaded at http://bit.ly/1rY2kWn (includes 3 JS files
and 1 CSS file). To use this library, we do the following steps:
• Put the following code in the head section of the page to include the CSS
files in the HTML page:
<link rel="stylesheet"
href="jquery-datepick/smoothness.datepick.css">

<script src="jquery-datepick/jquery-1.10.2.js"></script>

<script src="jquery-datepick/jquery.plugin.js"></script>

<script src="jquery-datepick/jquery.datepick.js"></script>

• Attach the datepicker to review the date textfield using the following JS
code written in jQuery syntax (also put it in the head section):
<script>

$(function() {

$("#ngayviet").datepick({dateFormat: 'yyyy/mm/dd'});

});

</script>

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

 In which #ngayviet is the id of the review date textfield:
Ngày viết
<input type="text" name="ngayviet" id="ngayviet">

Ex 4. (Extra) Add the pagination for the review search page in Ex 5 or Ex 6, Lab 3, so
each page shows at most 5 reviews.
v Hint: See Chapter 4.2 – Advanced PHP, pagination part.

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