thực hành lab – tạo menu động 2 cấp

Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 1
Biên soạn: Nguyễn Phát Tài
LAB – TẠO MENU ĐỘNG 2 CẤP

+ Mở trang menudong2cap.php thực hiện lệnh Nested Repeat Region Wizard



+ Trong bước 1 cấu hình như sau:



VIETCHUYEN.ORG
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 2
Biên soạn: Nguyễn Phát Tài

+ Click nút Next
+ Trong bước 2 chọn Repeat Style là Sub-Table



+ Click nút Finish
+ Bạn sẽ thấy kết quả như sau:



+ Trong Tab Server Behaviors xuất hiện 2 Recordset: master1category và detail2subcategory
VIETCHUYEN.ORG
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 3
Biên soạn: Nguyễn Phát Tài


+ File -> Save -> F12 để kiểm tra thử chức năng nhóm dữ liệu bạn sẽ thấy kết quả như sau:



+ Hãy mở Recordset master1category lên chỉnh lại cách sắp xếp thứ tự các chủ đề trên menu là
theo trường CatSort và chỉ cho hiện các thể loại menu cấp 1 có trường CatVisibleMenu=1 mà thôi.

VIETCHUYEN.ORG
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 4
Biên soạn: Nguyễn Phát Tài


+ Click nút OK
+ Chuyển sang chế độ Code tham khảo Code mẫu như sau:

<table border="1">
<?php do { ?>
<tr>
<td><b><?php echo $row_master1category['CatName']; ?></b></td>
</tr>
<?php
if ($totalRows_master1category>0) {
$nested_query_detail2subcategory = str_replace("123456789", $row_master1category['CatID'],
$query_detail2subcategory);
mysql_select_db($database_con_cso);
$detail2subcategory = mysql_query($nested_query_detail2subcategory, $con_cso) or
die(mysql_error());
$row_detail2subcategory = mysql_fetch_assoc($detail2subcategory);

$totalRows_detail2subcategory = mysql_num_rows($detail2subcategory);
$nested_sw = false;
if (isset($row_detail2subcategory) && is_array($row_detail2subcategory)) {
do { //Nested repeat
?>
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $row_detail2subcategory['SubCatName']; ?></td>
</tr>
<?php
} while ($row_detail2subcategory = mysql_fetch_assoc($detail2subcategory)); //Nested move next
}
}
?>
<?php } while ($row_master1category = mysql_fetch_assoc($master1category)); ?>
</table>
VIETCHUYEN.ORG
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 5
Biên soạn: Nguyễn Phát Tài

+ Hãy thay thế đoạn Code trên bằng đoạn Code sau:

<! Begin Faux Columns >

<div id="faux">
<! Begin Left Column >
<div id="leftcolumn">
<div style="padding-bottom:10px"><img src="images/title.jpg" alt="" /></div>
<div style="font-size:1px"><img src="images/top_title.jpg" alt="" /></div>
<div id="contet_title">
<div id="navcontainer">
<script language="javascript">
var aCategory = new Array();
var totalCate = <?php echo $totalRows_master1category ?>;
function showSubCategory(index,categorySelected){
for(var i = 1; i <= totalCate; i++){
if (document.getElementById("subnavlist_"+i)) {
if (i == index)
document.getElementById("subnavlist_"+i).style.display = "";

else {
if (aCategory[i] != categorySelected)
document.getElementById("subnavlist_"+i).style.display = "none";
}
}
}
}
</script>

<ul id="navlist">

<?php
$dem=0;
do {

$dem++;
?>

<li id="active"><a href="index.php?mod=CatProduct&CatID=<?php echo
$row_master1category['CatID']; ?>" id="current" onmouseover="showSubCategory(<?php echo
$dem; ?>,'0')"><img src="images/arrow.png" alt="" width="7" height="8" border="0" /><?php echo
$row_master1category['CatName']; ?></a>

<?php
if ($totalRows_master1category>0) {
$nested_query_detail2subcategory = str_replace("123456789",
$row_master1category['CatID'], $query_detail2subcategory);
mysql_select_db($database_con_cso);
VIETCHUYEN.ORG
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 6
Biên soạn: Nguyễn Phát Tài
$detail2subcategory = mysql_query($nested_query_detail2subcategory, $con_cso) or
die(mysql_error());
$row_detail2subcategory = mysql_fetch_assoc($detail2subcategory);
$totalRows_detail2subcategory = mysql_num_rows($detail2subcategory);
$nested_sw = false;
if (isset($row_detail2subcategory) && is_array($row_detail2subcategory)) {

?>

<ul id="subnavlist_<?php echo $dem; ?>" style="display:none">

<?php

do { //Nested repeat
?>

<li id="subactive"><a href="index.php?mod=SubProduct&CatID=<?php echo
$row_detail2subcategory['CatID']; ?>&SubCatID=<?php echo
$row_detail2subcategory['SubCatID']; ?>" id="subcurrent"><?php echo
$row_detail2subcategory['SubCatName']; ?></a></li>

<?php
} while ($row_detail2subcategory = mysql_fetch_assoc($detail2subcategory)); //Nested
move next
?>

</ul>

<?php
}
}
?>
</li>

<div style="border-bottom:1px solid #cccccc;"></div>

<?php } while ($row_master1category = mysql_fetch_assoc($master1category)); ?>

</ul>
</div>
</div>


<div style="font-size:1px; height: 20px;"><img src="images/repeat_bottom.jpg" alt=""
/></div>

<div class="clear"></div>
</div>
<! End Left Column >
VIETCHUYEN.ORG
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 7
Biên soạn: Nguyễn Phát Tài

+ Trước thẻ </head> hãy dùng thẻ Link để liên kết đến tập tin main.css dùng để định dạng cho giao
diện của menu.
+ Chép các tập tin hình ảnh sau bỏ vào thư mục images: arrow.png, title.jpg, top_title.jpg,
repeat_bottom.jpg

+ Chú ý: Nếu bạn sử dụng lại đoạn Code này hãy chú ý trong đoạn Code màu đỏ sử dụng cho đúng

tên Recordset và tên kết nối database



VIETCHUYEN.ORG