hông thường, các website tin tức sẽ được lưu trữ theo kiểu thư mục hoặc chuyên đề, đó là cách để đảm bảo nội dung website được thêm đều đặn mỗi ngày mà không gây ảnh hưởng gì đến tốc độ tải trang hay trải nghiệm cho người dùng khi vào trang web. Khách hàng có thể dễ dàng tìm kiếm được thông tin trên website mà không phải tốn quá nhiều thời gian cũng như công sức.
Trang 1Bài 7:
Xây dựng trang chủ cho từng lĩnh vực (Nâng cao)
1 Mục đích
• Trong bài thực hành này, bạn sẽ làm quen với cách xây dựng một trang web tương tác với CSDL sử dụng kỹ thuật phân trang trên DataGrid
• Xây dựng Trang chủ cho từng lĩnh vực, cho phép xem bản tin theo ngày tháng
2 Yêu cầu
• Đã hoàn tất bài thực hành Tuần 2, xây dựng trang chủ bản tin điện tử
• Đã nắm bắt được cách thức kết nối CSDL sử dụng AccessDataSource
3 Vấn đề liên quan
• Đọc và hiển thị thông tin được phân trang từ CSDL lên DataGrid (AccessDataSource với DataGrid)
• Sử dụng JavaScript cho phép người dùng chọn xem tin theo ngày tháng
4 Thời gian để hoàn tất bài thực hành: 120 phút
Trang 2Thiết kế giao diện
1 Xây dựng Trang chủ chung cho từng Lĩnh vực sử dụng lại bài tập Tuần 2
• Ghi chú: Một số thông tin mới trong Project
o Thư mục Images: Có thêm một số hình ảnh sử dụng cho các nút phân trang của DataGrid
o Thư mục DatePicker: Mã nguồn JavaScript tạo PopCalendar
• Tạo trang LinhVuc.aspx giống như trang Index.aspx
2 Tạo hiển thị tóm tắt các bản tin thuộc một lĩnh vực
• Sử dụng AccessDataSource :
o Kết nối file WebNews MDB
o Tạo câu truy vấn SELECT
Trang 3o Tạo thuộc tính ORDER BY
Trang 4• Sử dụng DataGrid Control:
o Kéo thả một DataGrid Control vào LinhVuc.aspx, đặt tên là
dataGridTomTatTinTuc
o Đặt các thuộc tính Property của dataGridTomTatTinTuc như sau :
DataSourceID AccessDataSource1
DataGrid
trang PaperSetting -
NextPageText
<img src="images\Next.png"> Text hiển thị nút trang kế
PaperSetting
-PreviousPageText
<img src="images\Prev.png"> Text hiển thị nút trang trước
o Vào Property – Column
Xóa hết các field trong Selected fields
Thêm vào 1 field TemplateField
Trang 5• Phải chuột vào dataGridTomTatTinTuc Edit Template Column[0]
• Thiết kế table như thiết kế
Font Size Font Bold Fore Color
Label1 Small
• Đặt thuộc tính Bindable Properties cho các control:
Bindable Properties Bound to Format
3 Chạy và Kiểm tra chương trình:
• Chạy chương trình sẽ ra một trang không có dòng dữ liệu nào
• Thay đổi URL …/linhvuc.aspx?MaLinhVuc=XH
Trang 6Lp trình JavaScript to PopCalendar chn ngày tháng
• Mục đích: Tạo PopCalendar cho phép người dùng chọn xem tin theo ngày tháng
1 Khai báo biến toàn cục NgayDangTin trong tập tin LinhVuc.aspx.cs
public string NgayDangTin;
2 Mở LinhVuc.aspx, chọn Tab HTML, copy & paste đoạn mã sau vào cuối trang HTML
Trang 7
src="datepicker/ipopeng.htm" scrolling="no" frameborder="0" style="Z-INDEX:999; LEFT:-500px; VISIBILITY:visible; POSITION:absolute; TOP:0px">
</iframe>
<! java script functions to show time and pop calendar >
<script type='text/javascript'>
function showPopcal(frmId)
{
var gfCtrl = document.getElementById(frmId);
var giCtrl = gfCtrl.txtDate;
var gdCtrl = gfCtrl.popcal;
gdCtrl.title = giCtrl.value;
if (self.gfPop)
gfPop.fPopCalendar(gfCtrl, giCtrl, gdCtrl);
}
function showDate(frmId)
{
var gfCtrl = document.getElementById(frmId);
var giCtrl = gfCtrl.txtDate;
var gdCtrl = gfCtrl.popcal;
gdCtrl.title = giCtrl.value;
}
</script>
<! —End PopCalendar >
</asp:Content>
• Lưu ý:
o id="txtDate": Id của INPUT control, thuộc tính bắt buộc
o value="<%=NgayDangTin%>": Value của INPUT control, lấy giá trị của biến NgayDangTin toàn cục được khai báo trong trang
o name="popcal": Name của IMG control, thuộc tính bắt buộc
o ‘aspnetForm’: Id của Form chính trong trang (nằm trong trang masterpage)
3 Sửa lại hàm Page_Load trong LinhVuc.aspx.cs như sau:
protected void Page_Load( object sender, EventArgs e)
{
if (Request.Form[ "txtDate" ] != null )
NgayDangTin = Request.Form[ "txtDate" ].ToString(); else NgayDangTin = DateTime Now.ToShortDateString(); }
4 Chạy vả kiểm tra chương trình
***Hết***