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: traning@vietchuyen.org 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: traning@vietchuyen.org 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: traning@vietchuyen.org 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: traning@vietchuyen.org 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: traning@vietchuyen.org 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: traning@vietchuyen.org 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: traning@vietchuyen.org 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 . 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. 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), P 12, Q10, TP.HCM Tel: (84.8) 8 62 7509 – (84.8) 26 49179. 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), P 12, Q10, TP.HCM Tel: (84.8) 8 62 7509 – (84.8)