- Phần này sẽ làm phần menu dọc , phần menu dọc này cũng tương tự với menu ngang
- Bạn truy cập lại vào http://localhost/phpmyadmin/ , sau đó tại phần bên trái bạn chọn 'ban_hang'
- Chỗ này là chọn lại cơ sở dữ liệu 'ban_hang' (nếu bạn chọn rồi thì thôi)
- Tại phần Create new table on database thì phần Name bạn nhập vào là menu_doc , phần Number of fields bạn nhập vào là 2.Sau đó bạn nhấn nút 'Go'
- Bạn khai báo giống với phần menu_ngang làm trước đó :
- Sau đó bấm nút "Save".Như vậy bạn đã tạo xong bảng 'menu_doc' với 2 cột là 'id' và 'ten'
- Bạn tiến hành thêm dữ liệu menu dọc bằng cách bấm vào nút 'Insert' tương tự như lúc bạn thêm dữ liệu vào menu ngang.Ở đây mình sẽ thêm 8 menu , nếu thành công thì bạn nhận được kết quả sau :
- Tiếp tới tại file 'index.php' thì tại ô cột trái bạn thêm đoạn code sau (nhớ là xóa từ "Cột trái" đi) :
<?php
include("chuc_nang/menu_doc/menu_doc.php");
?>
include("chuc_nang/menu_doc/menu_doc.php");
?>
- Đoạn code trên là gọi file 'menu_doc.php' vào file 'index.php'.Bạn tạo thư mục 'menu_doc' trong thư mục 'chuc_nang' rồi tạo file 'menu_doc.php' trong thư mục 'menu_doc'
- Ở file 'menu_doc.php' , bạn nhập vào đoạn code sau :
<?php
$tv="select * from menu_doc order by id";
$tv_1=mysql_query($tv);
echo "<div class='menu_doc' >";
while($tv_2=mysql_fetch_array($tv_1))
{
echo "<a href=''>";
echo $tv_2['ten'];
echo "</a>";
}
echo "</div>";
?>
$tv="select * from menu_doc order by id";
$tv_1=mysql_query($tv);
echo "<div class='menu_doc' >";
while($tv_2=mysql_fetch_array($tv_1))
{
echo "<a href=''>";
echo $tv_2['ten'];
echo "</a>";
}
echo "</div>";
?>
- Sau đó bạn truy cập lại vào http://localhost/ban_hang/ thì nhận được kết quả sau (ở những phần sau có thể mình sẽ gọi đơn giản là 'truy cập lại trang chủ' hoặc 'truy cập lại trang chính' ):
- Như vậy code menu dọc là tương tự code menu ngang.Bạn sẽ thấy rằng là có sự đổi tên 'menu_ngang' thành 'menu_doc' trong câu truy vấn (ở biến 'tv') , ngoài ra phần div bọc các link menu bạn cũng thấy đổi tên class từ 'menu_ngang' thành 'menu_doc'. Ở đây do bạn chưa định dạng giao diện menu dọc lại nên sẽ thấy menu dọc hiển thị lộn xộn.Bạn định dạng giao diện menu dọc bằng cách thêm đoạn code này vào phần style css (ở giữa thẻ head) trong file 'index.php' :
div.menu_doc a
{
color:blue;
text-decoration: none;
display:block;
}
div.menu_doc a:hover
{
color:red
}
{
color:blue;
text-decoration: none;
display:block;
}
div.menu_doc a:hover
{
color:red
}
+ div.menu_doc a là tham chiếu đến thẻ 'a' trong thẻ 'div' có class tên là 'menu_doc' (tham chiếu đến liên kết menu dọc)
+ div.menu_doc a:hover là tham chiếu đến thẻ 'a' trong thẻ 'div' có class tên là 'menu_doc' khi mà bạn rê chuột vào thẻ 'a' (rê chuột vào liên kết)
+ Ở đây khi ghi display:block; (ghi cho thẻ liên kết 'a') thì bạn có thể hiểu là để cho liên kết tự xuống dòng
+ div.menu_doc a:hover là tham chiếu đến thẻ 'a' trong thẻ 'div' có class tên là 'menu_doc' khi mà bạn rê chuột vào thẻ 'a' (rê chuột vào liên kết)
+ Ở đây khi ghi display:block; (ghi cho thẻ liên kết 'a') thì bạn có thể hiểu là để cho liên kết tự xuống dòng
- Kết thúc phần này , bạn nhận được kết quả sau :
- Và nội dung file 'index.php' như sau :
<?php
include("ket_noi.php");
?>
<html>
<head>
<meta charset="UTF-8">
<title>Web bán hàng</title>
<style type="text/css" >
div.menu_ngang a
{
color:blue;
margin-left: 10px;
margin-right: 10px;
text-decoration: none;
font-size:20px;
}
div.menu_ngang a:hover
{
color:red
}
div.menu_doc a
{
color:blue;
text-decoration: none;
display:block;
}
div.menu_doc a:hover
{
color:red
}
</style>
</head>
<body>
<center>
<table width="990px">
<tr>
<td colspan="3"><img src="hinh_anh/banner.JPG" ></td>
</tr>
<tr>
<td colspan="3" height="50px" >
<?php
include("chuc_nang/menu_ngang/menu_ngang.php");
?>
</td>
</tr>
<tr>
<td width="170px">
<?php
include("chuc_nang/menu_doc/menu_doc.php");
?>
</td>
<td width="650px">Cột giữa</td>
<td width="170px">Cột phải</td>
</tr>
<tr>
<td colspan="3">Footer</td>
</tr>
</table>
</center>
</body>
</html>
include("ket_noi.php");
?>
<html>
<head>
<meta charset="UTF-8">
<title>Web bán hàng</title>
<style type="text/css" >
div.menu_ngang a
{
color:blue;
margin-left: 10px;
margin-right: 10px;
text-decoration: none;
font-size:20px;
}
div.menu_ngang a:hover
{
color:red
}
div.menu_doc a
{
color:blue;
text-decoration: none;
display:block;
}
div.menu_doc a:hover
{
color:red
}
</style>
</head>
<body>
<center>
<table width="990px">
<tr>
<td colspan="3"><img src="hinh_anh/banner.JPG" ></td>
</tr>
<tr>
<td colspan="3" height="50px" >
<?php
include("chuc_nang/menu_ngang/menu_ngang.php");
?>
</td>
</tr>
<tr>
<td width="170px">
<?php
include("chuc_nang/menu_doc/menu_doc.php");
?>
</td>
<td width="650px">Cột giữa</td>
<td width="170px">Cột phải</td>
</tr>
<tr>
<td colspan="3">Footer</td>
</tr>
</table>
</center>
</body>
</html>
