Download miễn phí Thực hành Lập trình web
Một dự án Website luôn phải có phần quản trị, giúp cho người quản trị dễ dàng quản lý và cập
nhật thông tin lên web.
Tương tự như phần Client ở trên, quản trị cũng cần có một giao diện và các chức năng quản
lý. Để cho cấu trúc website rõ ràng, dễ quản lý, chúng ta nên tạo một thư mực (Folder) tên
Webmaster, sau đó tạo tất cả các trang cho quản trị ở trong thư mục này. Trước tiên tạo trang
MasterPage cho phần quản trị.
Để tải bản Đầy Đủ của tài liệu, xin Trả lời bài viết này, Mods sẽ gửi Link download cho bạn sớm nhất qua hòm tin nhắn.
Ai cần download tài liệu gì mà không tìm thấy ở đây, thì đăng yêu cầu down tại đây nhé:
Nhận download tài liệu miễn phí
Tóm tắt nội dung tài liệu:
• Name : bantin.aspx
• Chọn : Place code in separate file (phân chia thiết kế và code thành 2 file)
• Chọn : Select master page (trang này kế thừa từ 1 trang cha)
2. Tạo hiển thị thông tin chi tiết của một bản tin
Sử dụng DataList Control:
• Kéo thả 1 DataList vào bantin.apsx.
• Đặt tên cho DataList là dataListBanTinChiTiet
Thêm control AccessDataSource vào Webform
• Kết nối đến tập tin “TINTUC.MDB”
• Tạo câu truy vấn Select
Vào điều kiện Where
o Column : MaBanTin, Operator : “=”,
o Source : QueryString
o QueryString field : MaBanTin
o Bấm Add
LẬP TRÌNH WEB
Dzoaõn Thanh 28
- Kết nối AccessDataSource vào DataList
• Chọn Property : ->DataSourceID : AccessDataSource1
- Nhấn chuột phải vào dataListBanTinChiTiet và chọn Edit Template -> Item Templates từ pop-
up menu.
- Vào Layout -> Insert table ... Thiết kế table như sau :
- Liên kết 1 control với 1 cột trong bảng BANTIN
Label1 Text NgayDangTin (Format : {0:hh:mm:ss - dd/MM/yyyy})
Label2 Text DataItem.TieuDe
Label3 Text NoiDungTomTat
Label4 Text NoiDung
Label5 Text ChuThichHinh
Image1 ImageUrl HinhAnh
LẬP TRÌNH WEB
Dzoaõn Thanh 29
Phải chuột vào Label1 -> Edit DataBinding …
Tương tự cho các control còn lại..
Chạy và Kiểm tra chương trình:
Bấm Ctrl + F5 : Trang web load lên nhưng không có nội dung
LẬP TRÌNH WEB
Dzoaõn Thanh 30
Thay đổi lại đường link …/ bantin.aspx?MaBanTin=XH1
LẬP TRÌNH WEB
Dzoaõn Thanh 31
3. Liên kết Trang chủ lĩnh vực xã hội với trang hiển thị bản tin chi tiết
Sửa lại Bindable Property cho DataList trong Xahoi.aspx
Bài tập làm thêm:
- Hoàn thiện trang chủ lĩnh vực Kinh tế và liên kết với trang BanTin.aspx
- Hoàn thiện trang chủ lĩnh vực Thể thao và liên kết với trang BanTin.aspx
LẬP TRÌNH WEB
Dzoaõn Thanh 32
Bài 6: Xây dựng Menu động bằng DataList
Như các bài trước, Menu được thiết kế bằng các Hyperlink ở trang PageMaster.master và khi tạo
các trang con chỉ cần Apply (check vào Select MasterPage) là có thể có một Menu giống như ở
trang PageMaster.
Các Menu này quá cố định, vấn đề đặt ra là nếu website này cần thêm một lĩnh vực mới nữa thì
xử lý sao? (Ví dụ thêm lĩnh vực về Giáo dục, các tin tức liên quan đến Giáo dục)…Một dự án
Web hay Software cần tối ưu hóa bằng cách bổ sung đầy đủ các chức năng có thể, mang tính tiện
dụng cao..hạn chế việc chỉnh sửa.
Do đó, chúng ta cần xây dựng một Menu động, những lĩnh vực cần lấy từ Database. Các bài
trước chúng ta đã thiết kế trang Thêm lĩnh vực, giờ chỉ cần load lên Menu.
Cũng tương tự như các bài trước, nhưng chúng ta thiết kế Menu trên một Usercontrol (khi thiết
kế xong thì UserContol này cũng như những control vốn có của bộ Visual Studio), sau đó gắn
Usercontrol này lên trang PageMaster.
Tạo một UserControl mới:
o Vào Menu Website – Add new item
• Template : Web User Control
• Name : ucontrolMenu.ascx
• Language : Visual C#
LẬP TRÌNH WEB
Dzoaõn Thanh 33
Sử dụng DataList Control:
• Từ ToolBox – kéo control DataList vào ucontrolMenu
Sử dụng AccessDataSource
• Từ cửa sổ Toolbox, kéo thả đối tượng AccessDataSource vào ucontrolMenu
• Kết nối đến tập tin “tintuc.MDB”
• Tạo câu truy vấn -> Netx -> Finish
LẬP TRÌNH WEB
Dzoaõn Thanh 34
o Vào Property của DataList chọn DataSourceID bằng adsGetLinhvuc
- Nhấn chuột phải vào DataList và chọn Edit Template > Item Templates từ pop-up
menu.
o Xóa tất cả nội dung trong Item Template. Vào Layout – Insert Table (có thuộc tính Width
= 100%), thêm vào các control theo mẫu sau :
LẬP TRÌNH WEB
Dzoaõn Thanh 35
- Image: thuộc tính ImageUrl là một Buttlet
- Phải chuột vào Hyperlink1 -> Edit DataBinding …
+ Text: Hiển thị Tên Linh vực
+ NavigateUrl: link (ở đây chúng ta chưa đặt thuộc tính cho NavigateUrl)
Xong, ta xóa các Hyperlink lúc đầu ở trang PageMaster, và nắm kéo ucontrol Menu từ cửa sổ
Solution vào chổ các Hyperlink vừa xóa.
Lúc này ta có thể thêm một lĩnh vực mới từ trang Thêm lĩnh vực mới,
F5 -> Chạy chương trình và kiểm tra thử, không khác gì các Menu cũ làm bằng Hyperlink và còn
có thêm một lĩnh vực vừa mới thêm
LẬP TRÌNH WEB
Dzoaõn Thanh 36
Bài 7 : Xây dựng một trang duy nhất để hiển thị thông tin của từng Lĩnh vực
Với một Menu động được load thông tin từ Database như vậy, nếu như ở các bài trước, một lĩnh
vực là một trang riêng biệt thì ở đây chúng ta không thể thêm từng trang mỗi khi có một lĩnh vực
mới…Vấn đề là phải làm sao thiết kế một trang duy nhất đề hiển thị thông tin cho các lĩnh vực
mặc cho có thêm mới lĩnh vực.
1. Tương tự, ta thêm một trang mới để hiển thị thông tin cho từng lĩnh vực,
o Vào Menu Website – Add new item
• Template : Web form
• Name : Linhvuc.aspx
• Language : Visual C#
• Chọn : Select master page (trang này kế thừa từ 1 trang cha)
2. Tạo hiển thị thông tin chi tiết của một bản tin
Sử dụng DataList Control:
• Kéo thả 1 DataList vào Linhvuc.apsx.
Thêm control AccessDataSource vào Webform
• Kết nối đến tập tin “TINTUC.MDB”
• Tạo câu truy vấn Select
Vào điều kiện Where
o Column : Malinhvuc, Operator : “=”,
o Source : QueryString
LẬP TRÌNH WEB
Dzoaõn Thanh 37
o QueryString field : tut
o Bấm Add -> Next -> Finish
o Vào Property của DataList chọn DataSourceID bằng AccessDataSource1
- Nhấn chuột phải vào DataList và chọn Edit Template > Item Templates từ pop-up
menu.
- Xóa tất cả nội dung trong Item Template. Vào Layout – Insert Table (có thuộc tính
Width = 100%), thêm vào các control theo mẫu sau :
LẬP TRÌNH WEB
Dzoaõn Thanh 38
Font Size Font Bold Fore Color
Hyperlink1 Small True Maroon
Label1 Small DimGray
Label2 Small
- Phải chuột vào từng Control chọn EditDataBinding
• Bindable Properties : Text
• Field binding – Bound to : TieuDe
Vì trang Bantin.aspx (trang chi tiết) đang đón nhận, chờ một Mabantin truyền tới, do đó ta thêm
thuộc tính là MaBanTin và Fomat cho NavigateUrl
LẬP TRÌNH WEB
Dzoaõn Thanh 39
LẬP TRÌNH WEB
Dzoaõn Thanh 40
LẬP TRÌNH WEB
Dzoaõn Thanh 41
Chạy và kiểm tra chương trình
Bấm Ctrl + F5 : Trang web load lên nhưng không có nội dung
Thay đổi lại đường link …/ Linhvuc.aspx?tut=TT
LẬP TRÌNH WEB
Dzoaõn Thanh 42
3. Liên kết Menu từ trang PageMaster tới trang Linhvuc.aspx
Sửa lại Edit DataBinding cho Hyperlink trong DataList của ucontrolMenu
Chạy chương trình từ trang Default.aspx
LẬP TRÌNH WEB
Dzoaõn Thanh 43
Bài 8: Xây dựng trang chủ cho website
1. Mẫu trang chủ Bản tin điện tử Website Tuổi trẻ (www.tuoitre.com.vn)
2. Tạo hiển thị tóm tắt các bản tin thuộc các lĩnh vực
Sử dụng DataList Control:
• Kéo thả 1 DataList vào Default.aspx.
Tạo AccessDataSource control
• Từ cửa sổ Toolbox, kéo thả đối tượng AccessDataSource vào Web Form.
• Kết nối DataSource vào TINTUC.mdb.
• Viết câu lệnh SQL SELECT truy vấn dữ liệu từ bảng BANTIN
SELECT T.MaBanTin, T.TieuDe, T.NgayDangTin, T.NoiDungTomTat, T.NoiDung,
T.HinhAnh, T.ChuThichHinh, T.MaLinhVuc, L.TenLinhVuc
FROM (LINHVUC L INNER JOIN BANTIN T ON L.MaLinhVuc = T.MaLinhVuc)
GROUP BY T.MaLinhVuc, T.MaBanTin, T.TieuDe, T.NgayDangTin,
T.NoiDungTomTat, T.NoiDung, T.HinhAnh, T.ChuThichHinh, L.TenLinhVuc, L.MaLinhVuc
HAVING (T.NgayDangTin >= ALL (SELECT NGAYDANGTIN
FROM BANTIN
WHERE MALINHVUC = L.MALINHVUC))
LẬP TRÌNH WEB
Dzoaõn Thanh 44
LẬP TRÌNH WEB
Dzoaõn Thanh 45
Kiểm tra câu truy vấn -> Finish
LẬP TRÌNH WEB
Dzoaõn Thanh 46
3. Chọn thuộc tính DataSourceID của DataList là AccessDataSource1
4. Thiết kế lại Item Template cho DataList
• Nhấn chuột phải vào DataList và chọn Edit Template > Item Temp...