WEB DUNG TOOL

TRÌNH BÀY TIN TRONG THỂ LOẠI NHƯ TRANG CHỦ CỦA DANTRI.COM



CHUẨN BỊ:-Tạo database webtintuc
Tạo site web động
1:Tạo trang tintrongloai.php lưu trong site  web tin tức vừa tạo
2:Chọn Tab Databases,click vào  dấu +,chọn MYSQL Conection
3:-Conection name: gõ webtintuc
   -MySQL server: gõ localhost
  -User names :gõ root
  -Password :gõ root
 -Database :click vào nút select
4:Chọn webtintuc,click OK
5:Click OK
6:Mở Conection:click vào dấu +,mở webtintuc.php
7:Để con trỏ cuối dòng 9 ,enter xuống hàng , gõ : mysql_query(“set names ‘utf8’ ”);
Bước 2 :Tạo 3 table lồng nhau chứa theloai,loaitin,tin
 
1:Vào tab Layout,chọn biểu tượng table
2:Rows :2,Colums:2,width:500,Cell padding :4,Cell Spacing :0
Gõ the loai trong ô đầu
3:Chọn Layout ,chọn table
4:Rows:1,Colums:1, width:100%,Cell padding :4,Cell Spacing :0
5:Chọn  tr dòng 2 meges thành 1 ô,chèn table
Rows:1,Colums:1, width:100%,Cell padding :4,
Chèn table như hình sau:
Bước 3:Tạo 3 recordset theloai,loaitin,tin để đưa tin vào table như sau:
1:Vào tab Bingding,click vào dấu +,chọn Recordset (Query)
2:Name:theloai
-         Conection:click vào hình tam giác chon webtintuc
-         table:chọn table theloai,click chọn selected , chọn idTL,TenTL
-         Filter :AnHien ,Enter Value = 1
-         Sort :ThuTu Ascending
-         Click OK
3: Name:loaitin
-         Conection:click vào hình tam giác chon webtintuc
-         table:chọn table loaitin,click chọn selected , chọn idLT,TenLT
-         Filter :idTL ,Enter Value = 123456789
-         Sort :ThuTu Descending
Click OK
4: Name:loaitin
-         Conection:click vào hình tam giác chon webtintuc
-         table:chọn table tintuc,click chọn selected , chọn idLT,TenLT
-         Filter :idTL ,Enter Value = 123456789
-         Sort :idTin Ascending
Click Advanded
5:Gõ thêm :
Limit 0,5
Click OK.
Bước 4:Kéo dữ liệu vào


1:Quét chọn theloai
2:Mở recordset theloai,kéo TenTL vào
3:Quét chọn loại tin
4: Mở recordset loaitin,kéo TenLT vào
5:Quét chọn tieudetin
6: Mở recordset tin,kéo Tieude vào.
Bước 5:Lặp dữ liệu table chứa thể loại,loạitin,tin
1:Chọn table chứa theloai.TenTL
2:Vào Server Behaviors,click dấu cộng(+),chọn  Repeat Region
3:-Recorset :chọn theloai
-check vào all records
-click OK
4:Qua code,Quét chọn cột:  <td><?php echo $row_loaitin[‘TenLT’];?></td>
5: Vào Server Behaviors,click dấu cộng(+),chọn Developer Tollbox->Dynamic Lists->dvanced-> Nested Repeat Region
6:-Master record:theloai
 -Primary key:idTL
-Detail record:loaitin
-click OK
7:Qua code ,quét chọn <tr>… <?php echo $row_tin[‘TieuDe’];?>…</tr>     
8: Vào Server Behaviors,click dấu cộng(+),chọn Developer Tollbox->Dynamic Lists->dvanced-> Nested Repeat Region
9: :-Master record:theloai
 -Primary key:idTL
-Detail record:tin
-click OK
Kết quả F12 chạy sẽ như hình:
Bước 6:Đưa hình và tomtat của tin và định dạng như dantri.com
1:Bôi đen tin.TieuDe








2:Xuống ô link:chitiettin.php?idTin=aa
3:Qua code , bôi đen chữ aa,Kéo idTin  trong recordset tin qua
 4 :Qua code ,Bôi đen hinh,Vào Insert -> Images->Data sources,chọn recordset tin,chọn urlHinh.click OK.Nếu F12 ,chạy lên , hình bị lỗi thì bạn xử lý sau :
Cách xử lý :chép thư mục hình vào site ,sửa đúng đường dẫn hình.Ví dụ , hình nằm trong thư mục Uploads , mình sẽ sửa như sau :
Chỉnh kích thước hình như sau :
Lúc này mình F12 sẽ được như sau :
Để hiện hình giống như cách trình bày của dantri.com như sau :

Trước do của vòng lặp Nested repeat Region , viết $dem=0 ;sau do viết $dem++;
Trước tag <img…>,viết <? If($dem= =1) { ?>,sau tag<img …>,viết <? }?>
Tương tự chèn file tomtat vào mình cùng kẹp   <? If($dem= =1) { ?>  sau <? }?> như hình bên dưới:
Kết quả  F12 chạy lên , mình sẽ được như sau:
Để định dạng giống như trang dantri.com, bạn phải thêm vào code như hình bên dưới:
Và định dạng css  tùy bạn thích màu gì cho đẹp,ví dụ ly định dạng  như vậy:
<style>
#ltin {
          width: 50px;
          text-align: center;
}
#ltin a {
          color: #FFFFFF;
          text-decoration: none;
          text-align: center;
}
.hinh {
          margin-right: 10px;
          padding: 2px;
          float: left;
          height: 100px;
          width: 100px;
          border: 1px solid #666666;
}
.textcanhphai {
          text-align: right;
}
#tin a {
          color: #0033FF;
          text-decoration: none;
}
#tin a:hover {
          color: #00CCCC;
          text-decoration: none;
}
</style>
Và F12 lên ,kết quả được như sau: