Phần 13 - Làm trang chi tiết sản phẩm

- Bạn nhập đoạn code sau vào file 'chi_tiet_san_pham.php' :

<?php
    $id=$_GET['id'];
    $tv="select * from san_pham where id='$id'";
    $tv_1=mysql_query($tv);
    $tv_2=mysql_fetch_array($tv_1);
    echo $tv_2['ten'];echo "<br>";
    echo $tv_2['gia'];echo "<br>";
    echo $tv_2['hinh_anh'];echo "<br>";
    echo $tv_2['noi_dung'];echo "<br>";
?>

- Sau đó bạn truy cập lại vào trang xuất sản phẩm rồi bấm vào các sản phẩm sẽ nhận được kết quả tương tự sau (ở đây mình sẽ truy cập vào "Menu 3" và chọn "Sản phẩm 20") :

- Đoạn code trên sẽ tìm tới dòng dữ liệu trong bảng 'san_pham' mà có cột 'id' bằng với biến 'id trên url' thông qua lệnh where (biến id được lấy bằng '$_GET' , cách viết '$_GET' là cách viết để lấy biến trên url web).Dòng dữ liệu được trả về biến 'tv_2' , sau đó thì xuất (echo) các cột 'ten','gia','hinh_anh','noi_dung' ra ngoài trang web

- Bạn sửa đoạn code trên thành như sau (cũng ở trong file 'chi_tiet_san_pham.php' ) :

<?php
    $id=$_GET['id'];
    $tv="select * from san_pham where id='$id'";
    $tv_1=mysql_query($tv);
    $tv_2=mysql_fetch_array($tv_1);
    $link_anh="hinh_anh/san_pham/".$tv_2['hinh_anh'];
    echo "<table>";
        echo "<tr>";
            echo "<td width='250px' align='center' >";
                echo "<img src='$link_anh' width='150px' >";
            echo "</td>";
            echo "<td valign='top' >";
                echo "<a href='#'>";
                    echo $tv_2['ten'];
                echo "</a>";
                echo "<br>";
                echo "<br>";
                echo $tv_2['gia'];
            echo "</td>";
        echo "</tr>";
        echo "<tr>";
            echo "<td colspan='2' >";
                echo "<br>";
                echo "<br>";
                echo $tv_2['noi_dung'];
            echo "</td>";
        echo "</tr>";
    echo "</table>";
?>

- Sau đó tải lại web , bạn sẽ nhận được kết quả tương tự như sau :

+ Đoạn code mới sẽ thêm 1 bảng 'table' vào.Bảng này có 2 dòng 'tr' , dòng 'tr' thứ 1 có 2 ô 'td' (1 ô chứa ảnh , 1 ô xuất tên , giá sản phẩm ra) , dòng 'tr' thứ 2 xuất nội dung sản phẩm ra (ô td trong dòng này sẽ gộp 2 ô lại(colspan='2') do dòng phía trên có 2 ô)

+ Liên kết ảnh được gán vào biến 'link_anh'.Thư mục chứa ảnh là 'hinh_anh/san_pham'.Khi xuất ảnh ra thì dùng thẻ 'img' cùng với thuộc tính 'href'

- Tại file 'giao_dien.css' , bạn thêm đoạn code sau vào ở phần đầu :

a
{
    text-decoration: none;
}

- Đoạn code này có tác dụng xóa dấu gạch dưới của thẻ 'a' trong web (mặc định thẻ 'a' sẽ có gạch dưới ).Sau đó bạn tải lại web sẽ thấy mất dấu gạch dưới liên kết ở phần tên sản phẩm (trong trang chi tiết sản phẩm)

- Như vậy trang chi tiết sản phẩm đơn giản xem như xong

- Code của tập tin 'giao_dien.css' sau khi thêm code sẽ như sau :

a
{
    text-decoration: none;
}

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
}
div.phan_trang a
{
    font-size:36px;
    margin-left:5px;
    margin-right:5px;
    text-decoration: none;
    color:blue;
}
div.phan_trang a:hover
{
    color:red
}