Giáo trình Hướng dẫn thực hành Web

Tài Liệu 
HƯỚNG DẪN THỰC HÀNH 
WEB 
LẬP TRÌNH WEB 
Dzoaõn Thanh 1 
CHƯƠNG 6: HƯỚNG DẪN THỰC HÀNH 
Bài 1: Xây dựng ứng dụng WebCalculator 
1. Tạo một Web site 
 Từ Menu chọn File - New - Web site 
o Template : ASP.NET Web site 
o Location : File System 
o Language : Visual C# 
2. Thiết kế Form theo mẫu 
Tạo table : Menu Layout - Insert Table 
 Kéo thả các Control trong Toolbox vào WebForm.aspx như mẫu trên. 
 Đặt thuộc tính cho các đối tượng trên Form 
LẬP TRÌNH WEB 
Dzoaõn Thanh 2 
3 Viết mã lệnh xử lý 
 Viết hàm xử lý sự kiện bấm vào nút Tổng. 
 Bấm đúp (double click) vào nút Tổng trên form sẽ tự động thêm 1 hàm xử lý sự kiện 
protected void btTong_Click(object sender, EventArgs e) 
{ 
} 
 Nhập đoạn mã lệnh (in đậm) vào trong thân hàm vừa phát sinh: 
protected void btTong_Click(object sender, EventArgs e) 
{ 
int so1, so2, tong; 
so1 = int.Parse(txtSo1.Text); 
so2 = int.Parse(txtSo2.Text); 
tong = so1 + so2; 
txtTong.Text = tong.ToString(); 
} 
4. Lưu trữ dạng Unicode : 
 Giải thích: Các Form hoặc User Control trong 1 ứng dụng ASP.NET không mặc định 
được lưu theo dạng có hỗ trợ Font Unicode. Vì vậy khi chạy ứng dụng từ Browser sẽ 
không hiển thị đúng Font chữ tiếng Việt. 
 Cách sửa: Nếu có sử dụng Font Unicode trong file nào thì cần phải chỉ định cho 
VS.NET lưu file đó theo đúng định dạng Unicode. 
o Từ menu chọn File\Save As. Từ hộp thoại Save File As, Từ hộp thoại 
Save File As, chọn Save with Encoding. 
LẬP TRÌNH WEB 
Dzoaõn Thanh 3 
5 Chạy kiểm thử chương trình 
LẬP TRÌNH WEB 
Dzoaõn Thanh 4 
 Bài 2. Xây dựng trang chủ cho Website Bản tin điện tử 
1. Mẫu trang chủ Website Tuổi trẻ (www.tuoitre.com.vn) 
2. Tạo Project Bản tin điện tử 
o Từ Menu chọn File – New – Web site 
 • Template : ASP.NET We site 
 • Location : File System – D:\BanTinDienTu 
 • Language : Visual C# 
3. Tạo trang Master 
o Từ Menu chọn Website – Add new item 
 • Template : Master page 
 • Name : MasterPage.master 
 • Language : Visual C# 
LẬP TRÌNH WEB 
Dzoaõn Thanh 5 
o Chuyển sang màn hình design - Xóa tất cả các control có trên đó 
o Thêm một table : Menu Layout – Insert table 
LẬP TRÌNH WEB 
Dzoaõn Thanh 6 
Vùng hiển thị Banner 
Vùng hiển thị Menu 
Vùng hiển thị AdRotaror 
Vùng hiển thị Nội dung 
Vùng hiển thị Marquee 
Vùng hiển thị Image 
Copyright@ By 063T 
4. Tạo hiển thị Banner 
o Sử dụng Image Control: 
• Kéo thả 1 Image Control vào vùng hiển thị Banner. 
• Đặt thuộc tính ImageUrl của Image là Images\banner.gif 
LẬP TRÌNH WEB 
Dzoaõn Thanh 7 
5. Tạo hiển thị Menu cột trái 
o Sử dụng Hyperlink Control: 
• Kéo thả các 4 Hyperlink Control vào vùng hiển thị Menu. 
• Đặt thuộc tính cho các Hyperlink. 
Control Property Value 
Hyperlink1 Text Trang chủ 
NavigateUrl Index.aspx 
Hyperlink2 Text Xã hội 
NavigateUrl Xahoi.aspx 
Hyperlink3 Text Kinh tế 
NavigateUrl Kinhte.aspx 
Hyperlink4 Text Thể thao 
NavigateUrl Thethao.aspx 
o Sử dụng AdRotator: 
• Từ Menu chọn Project\Add New Item, chọn XML File từ ô cửa sổ Template, đặt tên 
file là Ads.xml. 
LẬP TRÌNH WEB 
Dzoaõn Thanh 8 
o Ta thêm nội dung của file Ads.xml như sau: 
Images\Quang_cao\qc_Ao_cuoi.jpg 
 qc_Ao_cuoi..com 
Quảng cáo áo cưới 
80 
quangcao 
Images\ Quang_cao\qc_Mouse.jpg 
</Nav 
Mouse</A 
80 
quangcao 
Images\ Quang_cao\qc_Trang_suc.jpg 
</Nav 
Đồ trang sức</A 
80 
quangcao 
o Kéo thả các 1 AdRotator Control vào menu 
o Chỉ đường dẫn thuộc tính AdvertisementFile là Ads.xml 
LẬP TRÌNH WEB 
Dzoaõn Thanh 9 
6. Tạo và hiển thị cột quảng cáo bên phải 
o Sử dụng Marquee 
Đưa con trỏ vào vùng cần hiển thị định dạng marquee, chọn View HTML Source 
Ví dụ nội dung marquee như sau 
<marquee bgcolor=”#ffffcc" width="200" height="200" direction=up 
scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()"> 
<img height=80 src=”Images\ 
Quang_cao\vinhhalong.gif” border=0> 
 Phim trong tuần 
o Sử dụng Image Control: 
• Kéo thả các 2 Image Control vào Ads. 
• Đặt thuộc tính ImageUrl cho các Image: 
Control Value 
Image1 Images\Image1.gif 
Image2 Images\Image2.gif 
LẬP TRÌNH WEB 
Dzoaõn Thanh 10 
7. Tạo hiển thị phần nội dung : 
o Vào vùng hiển thị nội dung thêm control ContentPlaceHolder 
LẬP TRÌNH WEB 
Dzoaõn Thanh 11 
8. Tạo Trang chủ Bản tin điện tử 
o Vào Menu Website – Add new item 
• Template : Webform 
• Name : index.aspx 
• Language : Visual C# 
• Chọn : Select master page 
LẬP TRÌNH WEB 
Dzoaõn Thanh 12 
Nhập nội dung trang Default.aspx 
F5 - Chạy chương trình. 
o Tương tự : xây dựng 3 trang XaHoi.aspx, KinhTe.aspx, TheThao.aspx với kết thừa từ 
trang master page 
LẬP TRÌNH WEB 
Dzoaõn Thanh 13 
Bài 3. Xây dựng trang web Nhập tin tức mới 
 1. Thiế kế Cơ sở dữ liệu (Xây dựng CSDL Access) 
o Mở ứng dựng Microsoft Access 
o Thiết kế CSDL, đặt tên là tintuc.MDB, có cấu trúc gồm: 
- Một bảng Bantin như sau: 
Bantin 
STT Tên trường Kiểu dữ liệu Ghi chú 
1 MaBanTin Text(10) Primary Key 
2 TieuDe Text (255) Required 
3 NoiDungTomTat Memo Required 
4 NoiDung Memo Required 
5 NgayDangTin Date/Time Ngày hiện hành 
6 HinhAnh Text(255) 
7 ChuThichHinh Text(255) 
8 MaLinhVuc Text(10) Foreigned Key 
- Một bản Linhvuc: 
Linhvuc 
STT Tên trường Kiểu dữ 
liệu 
Ghi chú 
1 MaLinhvuc Text(10) Primary Key 
2 Tenlinhvuc Text (255) Required 
o Lưu tintuc.MDB vào thư mục App_Data trong thư mục gốc chứa trang web 
2. Thêm một trang mới và Thiết kế Form theo mẫu dưới đây (dùng control 
AccessDataSource) 
LẬP TRÌNH WEB 
Dzoaõn Thanh 14 
o Xử lý : Khi nhấn nút Lưu, dữ liệu trên from sẽ được lưu xuống table Linhvuc trong 
Database (Access) 
Tạo 1 control AccessDataSource 
o Từ Toolbox – Kéo thả 1 control AccessDataSource 
o Phải chuột vào control AccessDataSource chọn “Configure Data Source ” 
Chọn đường dẫn đến file tintuc.mdb -> Next 
o Chọn “Specify columns from a table or view” 
o Name : Bantin 
o Columns : chọn * 
(Chọn các cột sẽ được hiển thị trong câu truy vấn select – chọn * có nghĩa là chọn tất cả các cột) 
o Next 
LẬP TRÌNH WEB 
Dzoaõn Thanh 15 
o Chọn Advanced  Chọn “Generate INSERT, UPDATE, and DELETE statements” 
(Tự động tạo các câu truy vấn INSERT, UPDATE, DELETE) -> Next -> Finish 
LẬP TRÌNH WEB 
Dzoaõn Thanh 16 
o Phải chuột AccessDataSource1, chọn Property, chọn thuộc tính “InsertQuery” 
o Liên kết 1 cột trong bảng với 1 control trong màn hình (ví dụ cột Malinhvuc liên kết với 
control txtMalinhvuc) 
o Parameters : Malinhvuc 
o Parameter source : Control 
o ControlID : txtMalinhvuc 
o Viết hàm xử lý sự kiện click cho nút Lưu (Bấm đúp (double click) vào nút Lưu trên 
form, chương trình sẽ tự động thêm hàm xử lý sự kiện) 
protected void btnLuu_Click(object sender, EventArgs e) 
{ 
 AccessDataSource1.Insert(); 
} 
F5- Chạy chương trình và nhập nội dung 
LẬP TRÌNH WEB 
Dzoaõn Thanh 17 
3.Thêm một trang mới và Thiết kế Form theo mẫu dưới đây: 
o Xử lý: 
- Lấy data từ table Linhvuc load lên DropdownList Linhvuc tren form (Sinh viên tự 
thực hành phần này) 
- Mặc định CldCldNgaydangtin là chọn ngày hiện hành 
- Nhấn nút Lưu, tất cả dữ liệu sẽ được lưu xuống table Bantin trong database 
Tương tự như trang Thêm Lĩnh vực, ta tạo 1 control AccessDataSource 
o Từ Toolbox – Kéo thả 1 control AccessDataSource 
o Phải chuột vào control AccessDataSource chọn “Configure Data Source ” 
Chọn đường dẫn đến file tintuc.mdb -> Next 
o Chọn “Specify columns from a table or view” 
o Name : Bantin 
(txtMabantin) 
(txtTieude) 
(txtNoidungtomtat) 
(txtNoidung) 
(txtCldNgaydangtin) 
(txtUploadFile) 
(txtChuthichhinh) 
(cmdLuu) (cmdXoa) 
LẬP TRÌNH WEB 
Dzoaõn Thanh 18 
o Columns : chọn * 
(Chọn các cột sẽ được hiển thị trong câu truy vấn select – chọn * có nghĩa là chọn tất cả các cột) 
o Next 
o Chọn Advanced  Chọn “Generate INSERT, UPDATE, and DELETE statements” 
(Tự động tạo các câu truy vấn INSERT, UPDATE, DELETE) -> Next -> Finish 
o Phải chuột AccessDataSource1, chọn Property, chọn thuộc tính “InsertQuery” 
o Liên kết 1 cột trong bảng với 1 control trong màn hình (ví dụ cột MaBanTin liên kết với 
control txtMaBanTin) 
o Parameters : Mabantin 
o Parameter source : Control 
o ControlID : txtMabantin 
o Tương tự cho các cột 
o TieuDe 
o NoiDung 
o NoiDungTomTat 
o NgayDangTin 
o ChuThichHinh 
o Malinhvuc 
o *Riêng cột HinhAnh : Bấm vào “Show advanced properties” ,Properties : PropertyName 
chọn FileName 
LẬP TRÌNH WEB 
Dzoaõn Thanh 19 
o Viết hàm xử lý thông tin cho Trang Nhập Tin tức mới, 
 - Hàm load ngày mặc định là ngày hiện hành cho control Ngày đăng tin 
protected void Page_Load(object sender, EventArgs e) 
{ 
 if (!IsPostBack) 
 cldNgaydangtin.SelectedDate = DateTime.Now; 
} 
- Hàm Nhận tập tin Upload từ Client và Lưu lên Server 
protected void SaveFileUpload() 
{ 
 string strFileName; 
 if (txtFileUpload.FileName != "") 
 { 
 strFileName = Server.MapPath("Upload\\" + txtFileUpload.FileName); 
 txtFileUpload.PostedFile.SaveAs(strFileName); 
 } 
 } 
- Hàm xử lý sự kiện click cho nút Lưu (Bấm đúp (double click) vào nút Lưu trên form, 
chương trình sẽ tự động thêm hàm xử lý sự kiện) 
LẬP TRÌNH WEB 
Dzoaõn Thanh 20 
protected void cmdLuu_Click(object sender, EventArgs e) 
{ 
 AccessDataSource1.Insert(); 
 SaveFileUpload(); 
} 
F5- Chạy chương trình và nhập nội dung 
LẬP TRÌNH WEB 
Dzoaõn Thanh 21 
Bài 4: Xây dựng trang chủ cho từng Lĩnh vực 
1. Xây dựng Trang chủ Lĩnh vực Xã hội 
o Thêm trang xahoi.aspx kế thừa từ trang MasterPage (trang cha) 
• Menu Website – Add new item 
1. Template : Webform 
2. Name : xahoi.aspx 
3. * Chọn “Select master page”, chọn trang Master Page 
o Tạo hiển thị tóm tắt các bản tin thuộc lĩnh vực Xã hội 
Sử dụng DataList Control: 
• Từ ToolBox – kéo control DataList vào Window form 
• Đặt tên cho DataList là dataListTomTatTinTuc 
Sử dụng AccessDataSource 
• Từ cửa sổ Toolbox, kéo thả đối tượng AccessDataSource vào Web Form. 
• Kết nối đến tập tin “tintuc.MDB” 
• Tạo câu truy vấn 
LẬP TRÌNH WEB 
Dzoaõn Thanh 22 
o Vào Property của dataListTomTatTinTuc chọn DataSourceID bằng AccessDataSource1 
- Nhấn chuột phải vào dataListTomTatTinTuc và chọn Edit Template > Item 
Templates từ pop-up menu. 
LẬP TRÌNH WEB 
Dzoaõn Thanh 23 
 - 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 : 
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 
LẬP TRÌNH WEB 
Dzoaõn Thanh 24 
LẬP TRÌNH WEB 
Dzoaõn Thanh 25 
LẬP TRÌNH WEB 
Dzoaõn Thanh 26 
Chạy và kiểm tra chương trình 
2. Nhập thêm thông tin cho các lĩnh vực khác, thiết kế trang chủ cho lĩnh vực Kinh tế 
(kinhte.aspx), Thể thao (thethao.aspx), 
LẬP TRÌNH WEB 
Dzoaõn Thanh 27 
Bài 5: Xây dựng trang hiển thị chi tiết tin tức 
1. Tạo trang BanTin.aspx kết thừa từ MasterPage 
• Vào Menu Website -> Add New Item  
• Chọn Template : Web form 
• 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 phải 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 
Dz ... n).Viết code trong sự kiện Page_Load 
protected void Page_Load(object sender, EventArgs e) 
 { 
 if (!IsPostBack) 
 { 
 cboLinhvuc.DataTextField = "Tenlinhvuc"; 
 cboLinhvuc.DataValueField = "Malinhvuc"; 
GetLinhvuc();// Gọi lại hàm Getlinhvuc để lấy dữ liệu cho CboLinhvuc 
BindGrid(); //dữ liệu load lên GridView tùy vào giá trị hiện tai của CboLinhvuc 
 } 
 } 
LẬP TRÌNH WEB 
Dzoaõn Thanh 60 
//Hàm lấy dữ liệu lên cho CboLinhvuc 
protected void GetLinhvuc() 
{ 
 string strconn = "Provider = Microsoft.Jet.OLEDB.4.0;"; 
 strconn += "Data Source=" + Server.MapPath("~/App_Data/tintuc.mdb"); 
 OleDbConnection dbconn = new OleDbConnection(strconn); 
 dbconn.Open(); 
 string strquery = "Select * from Linhvuc"; 
 OleDbDataAdapter adap = new OleDbDataAdapter(strquery, dbconn); 
 dbconn.Close(); 
 DataTable dt = new DataTable(); 
 adap.Fill(dt); 
 cboLinhvuc.DataSource = dt; 
 cboLinhvuc.DataBind(); 
 } 
//Hàm lấy data lên lưới tùy thuộc vào DropDownList Lĩnh vực 
protected void BindGrid() 
{ 
 string strconn = "Provider = Microsoft.Jet.OLEDB.4.0;"; 
 strconn += "Data Source=" + Server.MapPath("~/App_Data/tintuc.mdb"); 
 OleDbConnection dbconn = new OleDbConnection(strconn); 
 dbconn.Open(); 
 string strquery = "Select * from Bantin where linhvuc = '" + CboLinhvuc.SelectedValue 
+"'"; 
 OleDbDataAdapter adap = new OleDbDataAdapter(strquery, dbconn); 
 dbconn.Close(); 
 DataTable dt = new DataTable(); 
 adap.Fill(dt); 
 gvBantin.DataSource = dt; 
 gvBantin.DataBind(); 
} 
ii. Sự kiện Click của nút Tìm 
//Khi nhấn nút Tìm thì gọi hàm BindGrid 
protected void cmdTim_Click(object sender, EventArgs e) 
{ 
 BindGrid(); 
} 
iii. Phân trang 
protected void gvBantin_PageIndexChanging(object sender, GridViewPageEventArgs e) 
{ 
 gvBantin.EditIndex = e.NewPageIndex; 
 BindGrid(); 
} 
LẬP TRÌNH WEB 
Dzoaõn Thanh 61 
iv. Khi nhấn link Delete của tin nào thì sẽ xóa tin đó. 
// Khi nhấn vào Delete trên lưới thì Xóa bản tin 
protected void gvBantin_RowDeleting(object sender, GridViewDeleteEventArgs e) 
{ 
 //Chọn Properties và đặt thuộc tính DataKeyNames của lưới là tên của trường chứa khóa 
chính 
 //Ví dụ : Mabantin 
 //Lấy giá trị khóa của dòng khi chọn delete trên dòng đó 
 Object objKey = gvBantin.DataKeys[e.RowIndex].Value; 
 string strconn = "Provider = Microsoft.Jet.OLEDB.4.0;"; 
 strconn += "Data Source=" + Server.MapPath("~/App_Data/tintuc.mdb"); 
 OleDbConnection dbconn = new OleDbConnection(strconn); 
 dbconn.Open(); 
 string strquery = "delete from Bantin where mabantin ='" + objKey + "'"; 
 OleDbCommand cmd = new OleDbCommand(strquery, dbconn); 
 cmd.ExecuteNonQuery(); 
 dbconn.Close(); 
 gvBantin.EditIndex = -1; 
 BindGrid(); 
} 
v. Khi nhấn Edit của một tin, chuyển tới trang upload.aspx để chỉnh sửa nội dung của tin đó. 
protected void gvBantin_RowEditing(object sender, GridViewEditEventArgs e) 
{ 
 //Lấy giá trị khóa của dòng khi chọn Edit trên dòng đó 
 Object objKey = this.gvBantin.DataKeys[e.NewEditIndex].Value; 
 //Gửi Khóa của tin đó tới trang update.aspx 
 Response.Redirect("~/webmaster/update.aspx?id=" + objKey,false); 
} 
F5 > Chạy chương trình >> Đăng nhập >> Cập nhật bản tin 
LẬP TRÌNH WEB 
Dzoaõn Thanh 62 
6. Tạo trang Chỉnh sửa, cập nhật một bản tin (update.aspx) 
o Click phải chuột lên thư mục Webmaster chọn – Add new item 
 • Template :WebFrom 
 • Name : update.aspx 
 • Language : Visual C# 
 • Check vào Select MasterPage 
o Trang update.aspx được thiết kế như sau: 
- DropdownList Lĩnh vực 
- TextBox tiêu đề 
- Control Free TextBox Nội dung tóm tắt 
- Control Free TextBox Nội dung 
- Image Hình ảnh để hiển thị hình hiện tại 
- Lable Hìn ảnh hiển thị tên hình hiện tại 
- FileUpload để thay đổi hình khác 
- TextBox chú thích hình 
LẬP TRÌNH WEB 
Dzoaõn Thanh 63 
 Hoạt động : 
i. Nhận Id (thuộc tính Khóa) từ trang Edit_Bantin.aspx, kết nối database lấy dữ liệu hiển thị 
lên các control 
ii. Khi nhấn nút lưu, sẽ update dữ liệu trên các control xuống database, và upload hình khác 
vào thư mục Upload nếu như thay đổi hình 
 Cài đặt: 
i. Khi trang web được load lên lần đầu, dùng đối tượng Request để đón nhận giá trị từ trang 
khác gởi tới 
protected void Page_Load(object sender, EventArgs e) 
{ 
 if (!IsPostBack) 
 { 
 string strKey = ""; 
 // kiểm tra giá trị từ trang Edit_Bantin.aspx chuyển tới 
LẬP TRÌNH WEB 
Dzoaõn Thanh 64 
 if (Request.Params["id"] != null) 
 { 
 strKey = Request.Params["id"].ToString(); // Gán strKey = giá trị nhận được 
 cboLinhvuc.DataTextField = "Tenlinhvuc"; 
 cboLinhvuc.DataValueField = "Malinhvuc"; 
 GetLinhvuc(); // Gọi hàm Load dữ liệu lên Cbolinhvuc 
 LoadData(strKey); // Gọi hàm Load dữ liệu lên cho các control khi đã nhận được khóa 
 } 
 } 
 } 
 protected void GetLinhvuc() 
 { 
 string strconn = "Provider = Microsoft.Jet.OLEDB.4.0;"; 
 strconn += "Data Source=" + Server.MapPath("~/App_Data/tintuc.mdb"); 
 OleDbConnection dbconn = new OleDbConnection(strconn); 
 dbconn.Open(); 
 string strquery = "Select * from Linhvuc"; 
 OleDbDataAdapter adap = new OleDbDataAdapter(strquery, dbconn); 
 dbconn.Close(); 
 DataTable dt = new DataTable(); 
 adap.Fill(dt); 
 cboLinhvuc.DataSource = dt; 
 cboLinhvuc.DataBind(); 
 } 
 private void LoadData(string key) 
 { 
 string strconn = "Provider = Microsoft.Jet.OLEDB.4.0;"; 
 strconn += "Data Source=" + Server.MapPath("~/App_Data/tintuc.mdb"); 
 OleDbConnection dbconn = new OleDbConnection(strconn); 
 dbconn.Open(); 
 string strquery = "Select * from Bantin where mabantin = '" + key + "'"; 
 OleDbDataAdapter adap = new OleDbDataAdapter(strquery, dbconn); 
 dbconn.Close(); 
 DataTable dt = new DataTable(); 
 adap.Fill(dt); 
 foreach (DataRow dr in dt.Rows) 
 { 
 txtTieude.Text = dr["tieude"].ToString(); 
 txtNoidungtomtat.Text = dr["Noidungtomtat"].ToString(); 
 txtNoidung.Text = dr["Noidung"].ToString(); 
 imgHinhanh.ImageUrl = "~/Upload/" + dr["Hinhanh"].ToString(); 
 lblHinhanh.Text = dr["Hinhanh"].ToString(); 
 txtChuthichhinh.Text = dr["Chuthichhinh"].ToString(); 
 } 
 } 
LẬP TRÌNH WEB 
Dzoaõn Thanh 65 
ii. Sau khi chỉnh sửa thông tin, nhấn nút Lưu, dữ liệu mới sẽ được cập nhật xuống database 
và hình ảnh mới vào thư mục Upload (nếu có) 
 protected void cmdLuu_Click(object sender, EventArgs e) 
 { 
 //Gọi hàm cập nhật dữ liệu mới xuống database 
 SaveData(); 
 // Gọi hàm upload hình mới vào thư mục Upload nếu có 
 SaveFileUpload(); 
 } 
 protected void SaveFileUpload() 
 { 
 string strFileName; 
 if (txtFileUpload.FileName != "") 
 { 
 strFileName = Server.MapPath("~/Upload\\" + txtFileUpload.FileName); 
 txtFileUpload.PostedFile.SaveAs(strFileName); 
 } 
 } 
 private void SaveData() 
 { 
 string strKey = ""; 
// kiểm tra giá trị từ trang Edit_Bantin.aspx chuyển tới 
 if (Request.Params["id"] != null) 
 { 
 strKey = Request.Params["id"].ToString(); // Gán strKey = giá trị nhận được 
 } 
 string strconn = "Provider = Microsoft.Jet.OLEDB.4.0;"; 
 strconn += "Data Source=" + Server.MapPath("~/App_Data/tintuc.mdb"); 
 OleDbConnection dbconn = new OleDbConnection(strconn); 
 dbconn.Open(); 
 string strquery = "Update Bantin"; 
 strquery += " set tieude = '" + txtTieude.Text + "',"; 
 strquery += " Noidungtomtat = '" + txtNoidungtomtat.Text + "',"; 
 strquery += " Noidung ='" + txtNoidung.Text + "',"; 
 strquery += " Hinhanh ='" + txtFileUpload.FileName + "',"; 
 strquery += " Chuthichhinh ='" +txtChuthichhinh.Text + "',"; 
 strquery += " Linhvuc ='" + cboLinhvuc.SelectedValue + "'"; 
 strquery += " where mabantin = '" + strKey.ToString() + "'"; 
 OleDbCommand cmd = new OleDbCommand(strquery, dbconn); 
 cmd.ExecuteNonQuery(); 
 dbconn.Close(); 
 } 
F5 >> Chạy chương trình>> Đăng nhập >> Cập nhật Bản tin >> Edit một bản tin 
LẬP TRÌNH WEB 
Dzoaõn Thanh 66 
LẬP TRÌNH WEB 
Dzoaõn Thanh 67 
Lập trình Internet với Cookies 
Cookie thường được dùng để xác định một user. Cookie là một tập tin nhỏ mà server nhúng 
vàomáy tính của user. Mỗi lần một máy tính yêu cầu một trang web với một trình duyệt, nó sẽ 
gửicookie đi theo. 
1. Kiểm tra trình duyệt của user có cho phép sử dụng Cookies hay không 
If (Request.Browser.Cookies == true) 
{ 
 // Trình duyệt có hỗ trợ cookies 
} 
2. Nếu trình duyệt hỗ trợ, kiểm tra có tồn tại cookie chưa 
if (Request.Cookies["name"] !=null) 
{ 
// Tồn tại cookie khóa name 
} 
3. Nếu cookie chưa tồn tại 
o Tạo mới cookie 
HttpCookie cookie = new HttpCookie("name","abc"); 
Hoặc 
HttpCookie cookie1 = new HttpCookie"name"); 
cookie.Value ="abc"; 
o Thiết lập thời gian tồn tại của cookie 
cookie.Expires = new DateTime.Now.AddDays(30); // 30 ngày 
Lưu ý: Nếu Expires là thời điểm hiện tại thì cónghĩa là xoá cookie 
o Lưu cookie vào máy của user: 
Response.Cookies.Add(cookie); 
4. Nếu cookie đã tồn tại lấy thông tin của cookie hiển thị lên web 
String s = Request.Cookies["name"].Value ; 
Ứng dụng vào đề tài: 
 Thiết kế lại trang Login.aspx như sau: 
- TextBox, Checkbox, Button, Literal và control Valadation để kiểm tra dữ liệu 
LẬP TRÌNH WEB 
Dzoaõn Thanh 68 
Cài đặt lại trang Login.aspx như sau: 
protected void Page_Load(object sender, EventArgs e) 
 { 
 if (!IsPostBack) 
 { 
 if (Request.Browser.Cookies) // Trình duyệt có hỗ trợ cookies hay không 
 { 
 if (Request.Cookies["user"] != null && Request.Cookies["pass"] != null) 
 { 
 HttpCookie cookie_user = new HttpCookie("user"); 
 // Thiết lập thời gian tồn tại của cookie 
 cookie_user.Expires = DateTime.Now.AddDays(30); //30 ngày 
 // Lưu cookie vào máy của user 
 Response.Cookies.Add(cookie_user); 
 //Lấy cookie user đã tồn tại gán vào text Username 
 txtUsername.Text = Request.Cookies["user"].Value; 
 // tương tự Password 
 HttpCookie cookie_pass = new HttpCookie("pass"); 
 cookie_pass.Expires = DateTime.Now.AddDays(30); 
 Response.Cookies.Add(cookie_pass); 
 txtPassword.Text = Request.Cookies["pass"].Value; 
 } 
 } 
 } 
 } 
 private void CheckLogin() 
 { 
 string strconn = "Provider = Microsoft.Jet.OLEDB.4.0;"; 
 strconn += "Data Source=" + Server.MapPath("~/App_Data/tintuc.mdb"); 
 OleDbConnection dbconn = new OleDbConnection(strconn); 
 string strquery = "Select * from Taikhoan"; 
 OleDbDataAdapter adap = new OleDbDataAdapter(strquery, dbconn); 
 DataTable dt = new DataTable(); 
 adap.Fill(dt); 
 foreach (DataRow dr in dt.Rows) 
 { 
LẬP TRÌNH WEB 
Dzoaõn Thanh 69 
 if ((txtUsername.Text) == dr["id"].ToString() && txtPassword.Text == 
dr["pass"].ToString()) 
 { 
 if (chkGhinho.Checked) // Nếu người dùng check vào Ghi nhớ 
 { 
 //Lưu cookie user 
 HttpCookie cookie_user = new HttpCookie("user", txtUsername.Text); 
 cookie_user.Expires = DateTime.Now.AddDays(30); 
 Response.Cookies.Add(cookie_user); 
 //Lưu cookie pass 
 HttpCookie cookie_pass = new HttpCookie("pass", txtPassword.Text); 
 cookie_pass.Expires = DateTime.Now.AddDays(30); 
 Response.Cookies.Add(cookie_pass); 
 } 
 Else // người dùng không check vào ghi nhớ 
 { 
 //Xóa cookie user 
 HttpCookie cookie_user = new HttpCookie("user", ""); 
 cookie_user.Expires = DateTime.Now; 
 Response.Cookies.Add(cookie_user); 
 //Xóa cookie pass 
 HttpCookie cookie_pass = new HttpCookie("user", ""); 
 cookie_pass.Expires = DateTime.Now; 
 Response.Cookies.Add(cookie_pass); 
 } 
 Session["Login"] = true; 
 Response.Redirect("Default.aspx", false); 
 return; 
 } 
 } 
//Thông báo lỗi khi thông tin đăng nhập không hợp lệ 
 lblLoi.Text = "Invalid Account"; 
 } 
 protected void cmdLogin_Click(object sender, EventArgs e) 
 { 
 CheckLogin(); 
 } 
LẬP TRÌNH WEB 
Dzoaõn Thanh 70 
MỤC LỤC 
 Chương 1: GIỚI THIỆU ASP.NET ................................................................ 1 
 1. Giới thiệu ASP.NET ................................................................................. 1 
 2. Các yếu tố đặc biệt của ASP.NET ............................................................. 1 
 3. Những đặc điểm mới của ASP.NET ......................................................... 4 
 4. Web Site trong Visual Studio.Net ............................................................. 6 
 5. Trình soạn mã Visual Studio.Net .............................................................. 10 
 6. Mô hình mã của trang ASP.NET .............................................................. 14 
 7. Quy trình xử lý trang ASP.NET ................................................................ 15 
 8. Tìm hiểu thuộc tính IsPostBack và IsCrossPagePostBack ......................... 16 
 9. Tìm hiểu khái niệm ViewState .................................................................. 16 
 10. Cấu trúc tập tin global.asax ..................................................................... 17 
 Chương 2: CÁC CONTROL TRONG ASP.NET........................................... 19 
 1. Server control ........................................................................................... 19 
 2. ASP.NET Server control ........................................................................... 20 
 2.1 Điều khiển cơ bản.............................................................................. 21 
 2.2 Điều khiển thông dụng ...................................................................... 22 
 3. Các Server control kiểm tra dữ liệu ........................................................... 29 
 4. Mộ số điều khiển khác .............................................................................. 36 
 Chương 3: CÁC ĐỐI TƯỢNG TRONG ASP.NET ....................................... 42 
 1. Respone .................................................................................................... 42 
 2. Request ..................................................................................................... 43 
 3. Server ....................................................................................................... 44 
 4. Application ............................................................................................... 45 
 Chương 4: ASP.NET & ADO.NET ................................................................. 47 
 1. Các công nghệ truy xuất dữ liệu ................................................................ 47 
 2. Các đối tượng của ADO.NET ................................................................... 49 
 3. Lưu trữ và xử lý dữ liệu ............................................................................ 55 
 4. SqlDataSource & AccessDataSource ........................................................ 57 
 Chương 5: CÁC CONTROL TRÌNH BÀY DỮ LIỆU ................................... 66 
 1. GridView .................................................................................................. 66 
 2. DetailsView & FormView ........................................................................ 81 
 3. DataList .................................................................................................... 83 
 4. Master ...................................................................................................... 85 
 Chương 6: HƯỚNG DẪN THỰC HÀNH ...................................................... 87