Lớp: Chuyên Viên Website Lành Nghề Trang 1 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.
Trang 1Lớp: Chuyên Viên Website Lành Nghề Trang 1
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
Trang 2+ 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
Trang 3Lớp: Chuyên Viên Website Lành Nghề Trang 3
+ 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
Trang 4+ 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> <?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)); ?>
VIETCHUYEN.ORG
Trang 5Lớp: Chuyên Viên Website Lành Nghề Trang 5
+ 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
Trang 6$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
Trang 7Lớp: Chuyên Viên Website Lành Nghề Trang 7
+ 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