Bài giảng Thực hành lập trình Web 2

C# 
 Cú pháp Ví dụ 
Khai báo Biến Kiểu_biến Tên_biến 
int iCount 
string[] arrName = new string[10] 
TextBox txtName = new TextBox() 
Phép Gán Tên_biến = Giá_trị iCount = 3 arrName[1] = “John” 
Lệnh Điều kiện 
if (điều_kiện) 
 câu_lệnh 
else 
 câu lệnh 
if (iCount == 3) 
 iCount = 5 
else 
 iCount = 6 
Lệnh lặp 
While 
while (điều_kiện_lặp) 
 Câu_lệnh 
(Thoát dùng break) 
while (iCount > 0) 
{ 
 iCount--; 
} 
Lệnh lặp 
do...while 
do 
 Câu_lệnh 
while (điều_kiện_l
(Thoát dùng break) 
ặp) 
do 
{ 
 iCount--; 
}while (iCount > 0); 
Lệnh lặp 
For 
for(Khởi_tạo;Điều_kiện;Lệnh)
 Câu_lệnh 
(Thoát dùng Exit For) 
for(int i=0; i<10; i++) 
 arrName = i.ToString(); 
Lệnh 
Select..Case 
switch (biểu thức) 
{ 
 case giá_trị_1 : 
 Câu_lệnh 
 break; 
 case giá_trị_2 : 
 Câu_lệnh 
 break; 
 default : 
 Câu_Lệnh 
 break; 
} 
switch (arrName[0]) 
{ 
 case “AAA”: 
 intX = 1; 
 break; 
 case “BBB”: 
 intX = 0; 
 break; 
 default: 
 intX = -1; 
 break; 
} 
Khai báo 
Thủ tục 
public void 
TenThuTuc(KhaiBaoBien) 
{ 
 Câu_Lệnh 
} 
public TinhTong(int X, int Y) 
{ 
 intX = X + Y 
} 
Khai báo hàm 
public Kiểu_biến_trả_về 
TenHam(KhaoBaoBien) 
{ 
 Câu_lệnh; 
 return giá_trị_trả_về;
} 
public bool LaSoDuong() 
{ 
 if (intX > 0) 
 return true; 
 return fasle; 
} 
Gọi phương thức 
của đối tượng strX = objX.ToString() arrName[0] = iCount.ToString(); 
Toán tử nối 
chuỗi + strFruit = "Apples" + " Oranges" 
Toán tử so sánh ==, >, =, if (intX >= 5) … 
Phủ định ! if (!IsPostBack) … 
Toán tử so sánh is if (objX is objY)… 
1 BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2 
GV: Trần Thị Bích Hạnh 
đối tượng 
Kiểm tra Giá trị 
null cho đối 
tượng 
null if (objX == null)… 
1 BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2 
GV: Trần Thị Bích Hạnh 
4 Xây dựng ứng dụng WebCalculator 
4.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# 
1 BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2 
GV: Trần Thị Bích Hạnh 
4.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: 
ToolBox Control Control type Property Value 
Label1 Label ID lblCalculator 
 Font Arial, Bold, XXL 
 Text Web Calculator 
Label2 Label ID lblSo1 
 Font Arial, Medium 
Label3 Label ID lblSo2 
 Font Arial, Medium 
Textbox1 Textbox ID txtSo1 
Textbox2 Textbox ID txtSo2 
Button1 Button ID btTong 
 Text Tổng 
Textbox3 Textbox ID txtTong 
Web Forms 
 Horizontal Rule HTML 
4.3 Viết mã lệnh xử lý 
o 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 
1 BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2 
GV: Trần Thị Bích Hạnh 
protected void btTong_Click(object sender, EventArgs e) 
{ 
} 
o 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.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, chọn Save 
with Encoding. 
1 BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2 
GV: Trần Thị Bích Hạnh 
1 BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2 
GV: Trần Thị Bích Hạnh 
5 Chạy kiểm thử chương trình 
5.1 Chạy chương trình 
Bấm Ctrl + F5 : để chạy chương trình 
5.2 Thực tập các thao tác Debug 
1. Để con trỏ ngay dòng thực hiện phép tính, bấm F9 để đặt Break Point. 
2. Bấm F5 để bắt đầu chạy và kiểm lỗi chương trình. 
3. Nhập giá trị cho các Text Box như sau: 
Số 1 1 
Số 2 2 
4. Nhấn nút Tổng. 
1 BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2 
GV: Trần Thị Bích Hạnh 
5. Ta thấy, chương trình tự động nhảy vào hàm btnTong_Click và dừng ngay dòng 
mà chúng ta đã đặt Breakpoint. 
6. Để kiểm tra giá trị các biến ngay tại thời điểm này, ta nhập tên biến cần kiểm tra 
giá trị vào hộp thoại Watch. 
7. Bấm F5 để tiếp tục chạy chương trình, hoặc bấm F10 để chạy lần lượt từng dòng 
code. 
8. Kiểm tra kết quả 
Bài 2. BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2 
GV: Trần Thị Bích Hạnh 
Bài 2. Xây dựng trang chủ cho Website Bản tin điện tử (Phần 1) 
Mục đích 
Trong bài thực hành này, bạn sẽ tạo 1 trang Master page (trang cha) gồm những 
thành phần chung cho tất cả các trang, và 4 trang nội dung (trang con) là Trang chủ, Xã hội, 
Kinh tế, Thể thao. 
Bạn sẽ làm quen với cách thiết kế một trang web sử dụng một số control cơ bản: 
Hyperlink, Image, AdRotator và Marquee. 
Xây dựng trang Master cho Website Bản tin điện tử bao gồm Banner, Menu phải và 
Quảng cáo trái. 
Yêu cầu 
Đã nắm được các khái niệm cơ bản về xây dựng ứng dụng web bằng Visual 
Studio.NET. 
Vấn đề liên quan 
Thiết kế giao diện web theo mẫu. 
Thời gian để hoàn tất bài thực hành: 120 phút 
Bài 2. BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2 
GV: Trần Thị Bích Hạnh 
Bài tập 2.1. Thiết kế giao diện 
Mục đích: Học cách thiết kế form theo mẫu 
1. Mẫu trang chủ Website Tuổi trẻ (www.tuoitre.com.vn) 
2. Tạo Project Bản tin điện tử 
™ 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 
™ Từ Menu chọn Website – Add new item… 
• Template : Master page 
• Name : MasterPage.master 
• Language : Visual C# 
Bài 2. BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2 
GV: Trần Thị Bích Hạnh 
™ Chuyển sang màn hình design - Xóa tất cả các control có trên đó 
™ Thêm một table : Menu Layout – Insert table 
Bài 2. BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2 
GV: Trần Thị Bích Hạnh 
 Property Value 
Width 800 Table Align Center 
ColSpan 3 TR (Dòng 1) TD (Cột 1) 
Width 200 
bgColor #f2f7fb TD (Cột 1) 
Valign Top 
Width 400 TD (Cột 2) Valign Top 
Width 200 
bgColor #f2f7fb 
TR (Dòng 2) 
TD (Cột 3) 
Align Center 
ColSpan 3 
Align Center TR (Dòng 3) TD (Cột 1) 
(Nội dung) Copyright @ 2004 by 
Tuoi tre 
Bài 2. BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2 
GV: Trần Thị Bích Hạnh 
(vùng hiển thị Nội dung) 
4. Tạo hiển thị Banner 
™ 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 
5. Tạo hiển thị Menu cột trái 
™ 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 
Text Trang chủ Hyperlink1 NavigateUrl Index.aspx 
Bài 2. BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2 
GV: Trần Thị Bích Hạnh 
Text Xã hội Hyperlink2 
NavigateUrl Xahoi.aspx 
Text Kinh tế Hyperlink3 NavigateUrl Kinhte.aspx 
Text Thể thao Hyperlink4 NavigateUrl Thethao.aspx 
™ 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. 
• Cut & Paste đoạn mã sau vào File Ads.xml. 
 images\imageAds1.gif 
 Microsoft Main Site 
 80 
 Topic1 
Bài 2. BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2 
GV: Trần Thị Bích Hạnh 
 This is the caption for Ad#1 
 images\imageAds2.gif 
 Wing Tip Toys 
 80 
 Topic2 
 This is the caption for Ad#2 
• Kéo thả các 1 AdRotator Control vào menu. 
 Chỉ đường dẫn cho thuộc tính AdvertisementFile của AdRotator là ads.xml. •
6. Tạo hi ột phải 
™ Sử dụ
• Đưa con trỏ vào vùng hiển thị Image, chọn View HTML Source. 
ển thị Quảng cáo c
ng Marquee: 
Bài 2. BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2 
GV: Trần Thị Bích Hạnh 
• Copy & Paste đoạn script sau vào 
<marquee bgcolor=”#ffffcc" width="200" height="200" direction=up 
 scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()"> 
 Phim trong tuần 
™ 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 
Bài 2. BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2 
GV: Trần Thị Bích Hạnh 
7. Tạo hiển thị phần nội dung : 
™ Vào vùng hiển thị nội dung thêm control ContentPlaceHolder 
Bài 2. BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2 
GV: Trần Thị Bích Hạnh 
8. Tạo Trang chủ Bản tin điện tử 
™ Vào Menu Website – Add new item 
• Template : Webform 
• Name : index.aspx 
• Language : Visual C# 
• Chọn : Select master page 
Bài 2. BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2 
GV: Trần Thị Bích Hạnh 
Bài 2. BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2 
GV: Trần Thị Bích Hạnh 
™ Nhập nội dung trang index.aspx 
Bài 2. BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2 
GV: Trần Thị Bích Hạnh 
Bài tập 2.2. Chạy chương trình 
Kết quả 
Bài tập 2.3. Bài tập thêm 
Mục đích: Thực tập lại các thao tác đã thực hành trong Bài tập 2.1. 
1. Sử dụng AdRotator Control 
™ Tạo 1 File XML đặt tên là Ads1.xml với nội dung: 
o chỉ đường dẫn tới các file imageAds3.gif và imageAds4.gif trong thư mục Images. 
o ứng với mỗi hình chỉ rõ thuộc tính NavigateUrl, AlternateText… tương ứng. 
™ Kéo thả một AdRotator Control vào vùng hiển thị Menu và chỉ đường dẫn cho thuộc tính 
AdvertisementFile của AdRotator là file XML vừa tạo. 
2. Sử dụng Marquee 
™ Sửa đổi Script của Marquee sao cho: 
o thể hiện thị thêm 2 hình imageView2.gif và ImageView3.gif trong thư mục Images. 
o Đặt tiêu đề tương ứng cho mỗi hình trên. 
Bài 2. BÀI GIẢNG THỰC HÀNH LẬP TRÌNH WEB 2 
GV: Trần Thị Bích Hạnh 
3. Sử dụng Image Control 
™ Kéo thả một Image Control vào vào vùng hiển thị quản cáo và chỉ đường dẫn cho thuộc 
tính ImageUrl của Image là image3.gif trong thư mục Images. 
4. Xây dựng 3 trang XaHoi.aspx, KinhTe.aspx, TheThao.aspx với kết thừa từ trang master 
page