Giáo trình Thiết kế Web

s sau vào 
GiftShop.css 
.ShoppingCartTitle 
{ 
 color: Red; 
 font-family: Verdana, Helvetica, sans-serif; 
 font-size: 16px; 
} 
- Chuột phải vào dự án trong Solution Explorer và kích Add New 
Item. 
- Chọn Web Form Template, đặt tên ShoppingCart.aspx. Kích vào hộp 
chọn Place code in separate file and Select master page nhƣ hình dƣới và 
sau đó kích Add. 
261 
Hình 3.55: Thêm ShoppingCart.aspx 
- Chọn GiftShop.master trong hộp thoại hiện ra và kích OK. 
- Bạn hãy thiết kế trang ShoppingCart giống hình dƣới đây, và đặt 
thuộc các thuộc tính có trong trang nhƣ bảng dƣới. 
Hình 3.56: ShoppingCart.aspx trong cửa sổ Design 
262 
Thuộc tính các điều khiển trong ShoppingCart.aspx 
- Bây giờ bạn định dạng điều khiển GridView. Thiết lập thuộc tính 
AutoGenerateColumns là false, DataKeyNames là ProductID, độ rông 
100%, và BorderWidth là 0px. 
- Trong cửa sổ Design , chọn GridView, kích vào Smart Link, và chọn 
Add New Column và thêm vào các cột theo danh sách dƣới đây: 
- Kích GridView Smart Link và chọn Edit Columns, trong bảng 
Selected fields, chọn Price và đặt thuộc tính DataFormatString giá trị {0:c}. 
- Tƣơng tự nhƣ vậy đặt thuộc tính DataFormatString giá trị {0:c} cho 
trƣờng Subtotal. 
- Trƣờng Quantity là một Template Field vì vậy bạn phải điền nó bằng 
tay, chuyển sang cửa sổ Source thêm Textbox sau đây tới Item Template: 
 <asp:TextBox ID="editQuantity" runat="server" 
CssClass="GridEditingRow" Width="24px" MaxLength="2" 
Text='' /> 
263 
- Sử dụng style SmallButtonText cho nút nhấn Delete, chuyển sang 
cửa sổ Design kích vào Grid Smart Link, chọn Edit Columns. Trong hộp 
thoại mở ra, chọn Delete field kích chuột thuộc tính ControlTyle, và đặt 
CssClass là SmallButtonText, nhƣ hình dƣới đây: 
Hình 3.57: Chọn style cho nút nhấn Xóa 
- Kích chuột OK để đóng hộp thoại. Xác minh rằng trong phần nội 
dung của nó phải giống hình 3.58. 
Hình 3.58. Phần nội dung của ShoppingCart.aspx trong cửa sổ Design 
- Mở tập tin code-behind (ShoppingCart.aspx.cs), viết những đoạn mã 
giống dƣới đây: 
264 
public partial class ShoppingCart : System.Web.UI.Page 
{ 
 protected void Page_Load(object sender, EventArgs e) 
 { 
 // Tải trang ban đầu 
 if (!IsPostBack) 
 PopulateControls(); 
 } 
 // đổ dữ liệu vào điều khiển giỏ hàng 
 private void PopulateControls() 
 { 
 // đặt tiêu đề cho trang 
 this.Title = BalloonShopConfiguration.SiteName + " : Shopping 
Cart"; 
 // lấy những sản phẩm có trong giỏ hàng 
 DataTable dt = ShoppingCartAccess.GetItems(); 
 // nếu giỏ hàng là rỗng... 
 if (dt.Rows.Count == 0) 
 { 
 titleLabel.Text = "Giỏ hàng trống!"; 
 grid.Visible = false; 
 updateButton.Enabled = false; 
 totalAmountLabel.Text = String.Format("{0:c}", 0); 
 } 
 else 
 // nếu giỏ hàng không rỗng... 
 { 
 // liệt kê danh sách vào nội dung giỏ hàng 
 grid.DataSource = dt; 
 grid.DataBind(); 
 // cài đặt điều khiển 
 titleLabel.Text = "Những sản phẩm trong giỏ hàng của bạn:"; 
 grid.Visible = true; 
 updateButton.Enabled = true; 
265 
 // hiển thị tổng giá 
 decimal amount = ShoppingCartAccess.GetTotalAmount(); 
 totalAmountLabel.Text = String.Format("{0:c}", amount); 
 } 
 } 
} 
 Chỉnh sửa số lƣợng sản phẩm 
- Mở ShoppingCart.aspx trong cửa sổ Design, chọn GridView, trong 
cửa Properties trong phần Action kích đúp vào RowDeleting cho việc tạo 
sự kiện tự động: 
- Viết vào đoạn mã giống dƣới đây: 
// xoá sản phẩm khỏi giỏ hàng 
 protected void grid_RowDeleting(object sender, 
GridViewDeleteEventArgs e) 
 { 
 // Chỉ số hàng bị xóa 
 int rowIndex = e.RowIndex; 
 // ID của sản phẩm bị xóa 
 string productId = grid.DataKeys[rowIndex].Value.ToString(); 
 // Xoá sản phẩm khỏi giỏ hàng 
 bool success = ShoppingCartAccess.RemoveItem(productId); 
 // Hiển thị trang thái 
 statusLabel.Text = success ? "Xóa sản phẩm thành công!<br 
/>" : 
 "Có lỗi trong việc xoá sản phẩm khỏi giỏ hàng!<br 
/>"; 
 PopulateControls(); 
 } 
- Trong ShoppingCart.aspx kích đúp vào nút Update Quantities, và 
viết vào đoạn mã nhƣ dƣới đây: 
// Cập nhật số lƣợng sản phẩm vào giỏ hàng 
 protected void updateButton_Click(object sender, EventArgs e) 
 { 
266 
 // Số hàng trong GridView 
 int rowsCount = grid.Rows.Count; 
 // lƣu trữ một hàng của GridView 
 GridViewRow gridRow; 
 // Đƣa vào một textbox nhập số lƣợng trong GridView 
 TextBox quantityTextBox; 
 // Khai báo biến lƣu trữ ID sản phẩm và số lƣợng 
 string productId; 
 int quantity; 
 // Khi cập nhật thành công? 
 bool success = true; 
 // duyệt qua các hàng của GridView 
 for (int i = 0; i < rowsCount; i++) 
 { 
 // Lấy một hàng 
 gridRow = grid.Rows[i]; 
 // ID của sản phẩm bị xoá 
 productId = grid.DataKeys[i].Value.ToString(); 
 // Lấy Textbox số lƣợng trong hàng 
 quantityTextBox = (TextBox)gridRow.FindControl("editQuantity"); 
 // Lấy số lƣợng và bảo vệ các giá trị không có thật 
 if (Int32.TryParse(quantityTextBox.Text, out quantity)) 
 { 
 // Cập nhật số lƣợng sản phẩm 
 success = success && ShoppingCartAccess.UpdateItem(productId, 
quantity); 
 } 
 else 
 { 
 // Không thành công 
 success = false; 
 } 
 // thông báo trạng thái 
 statusLabel.Text = success ? 
267 
 "Cập nhật giỏ hàng thành công!" : 
 "Lỗi cập nhật! Làm ơn kiểm tra lại!"; 
 } 
 PopulateControls(); 
 } 
 Chức năng “Continue Shopping” (Tiếp tục mua hàng) 
- Chỉnh sửa ShoppingCart.aspx trong cửa sổ Design kích đúp vào nút 
Continue Shopping tự động tạo ra phƣơng thức 
continueShoppingButton_Click, sửa nó giống dƣới đây: 
// Chuyển hƣớng đến các trang danh mục trƣớc đó 
 protected void continueShoppingButton_Click(object sender, 
EventArgs e) 
 { 
 // Chuyển hƣớng đến trang danh mục cuối cùng truy cập 
 // hoặc đến trang chính của danh mục 
 object page; 
 if ((page = Session["LastVisitedCatalogPage"]) != null) 
 Response.Redirect(page.ToString()); 
 else 
 Response.Redirect(Request.ApplicationPath); 
 } 
- Mở GiftShop.master.cs và sửa đổi nó để có thể lƣu vị trí trang hiện 
tại và phiên làm việc (Session) của khách truy cập. 
public partial class GiftShop : System.Web.UI.MasterPage 
{ 
 // Các trang web đƣợc coi là “danh mục trang” mà ngƣời truy câp 
 // có thể tiếp tục mua hàng 
 private static string[] catalogPages = { "~/Default.aspx", 
"~/Catalog.aspx", "~/Search.aspx" }; 
 // Thực thi bất kỳ trang nào khi trang đƣợc tải 
 protected void Page_Load(object sender, EventArgs e) 
 { 
268 
 // Khi trang tải lần đầu 
 if (!IsPostBack) 
 { 
 /* Lƣu truy cập vào trang danh mục mới nhất vào session 
 Để hỗ trợ chức năng tiếp tục mua hàng “Continue Shopping” */ 
 // lấy những trang hiện đƣợc nạp 
 string currentLocation = 
Request.AppRelativeCurrentExecutionFilePath; 
 // Nếu trang là một nới mà khác muốn tiếp tục mua hàng 
 // ghi nó lại vào session của ngƣời truy cập 
 for (int i = 0; i < catalogPages.GetLength(0); i++) 
 if (String.Compare(catalogPages[i], currentLocation, true) == 0) 
 { 
 // ghi lại vị trí hiện thời 
 Session["LastVisitedCatalogPage"] = Request.Url.ToString(); 
 // ngừng vòng lặp 
 break; 
 } 
 } 
 } 
} 
- Mở trang Product.aspx và thêm một nút nhấn Continue Shopping 
cạnh nút Add to Cart, với những thuộc tính sau: 
Tên thuộc tính Giá trị thuộc tính 
ID ContinueShoppingButton 
CssClass SmallButtonText 
Text Tiếp tục mua hàng 
- Trong cửa sổ Design, kích đúp vào để có sự kiện Click của nó đƣợc 
tạo ra và hoàn thành đoạn mã cho nút “Tiếp tục mua hàng”: 
// Chuyến hƣớng đến các trang danh mục đã truy cập trƣớc đó 
 protected void continueShoppingButton_Click(object sender, 
EventArgs e) 
269 
 { 
 // chuyển hƣớng đến trang danh mục cuối cùng đƣợc truy cập 
 object page; 
 if ((page = Session["LastVisitedCatalogPage"]) != null) 
 Response.Redirect(page.ToString()); 
 else 
 Response.Redirect(Request.ApplicationPath); 
 } 
- Thực thi dự án và đảm bảo rằng không xảy ra lỗi nào. 
Hình 3.59. Hiển thị nội dung tóm tắt của giỏ hàng 
270 
Hình 3.60: Trang ShoppingCart.aspx khi có sản phẩm 
B. THỰC HÀNH 
1. Nội dung thực hành 
Thực hành lại các ví dụ và ứng dụng đã làm ở bài học 
2. Bảng vật tƣ thiết bị cần thiết 
TT Thiết bị - Vật tƣ Thông số kỹ thuật Số lƣợng 
1 Một bộ máy tính - CPU: duo core 2.0 Ghz trở lên 
- Ram: 1 Gb trở lên 
- HDD: 40 GB 
1 bộ / học 
sinh 
2 Phần mềm - Hệ điều hành Windows 7 
- Microsoft SQL Server 2008 
- Microsoft Visual Studio 2010 
3. Quy trình thực hiện công việc 
TT Công việc Thao tác Yêu cầu 
1 Chuẩn bị 
- Kiểm tra các hoạt động của 
máy tính. 
- Phần mềm Visual Studio 2010 
- Phần mềm MS SQL Server 
2008 
- MT Hoạt động 
bình thƣờng. 
Đã cài đặt 
Đầy đủ. 
271 
2 
Xác định 
yêu cầu. 
- Xác định nội dung, mục đích 
của website. 
- Xác định đối tƣợng chủ yếu sử 
dụng website 
- Đầy đủ và 
chính xác. 
3 
Tạo cơ sở 
dữ liệu. 
- Thiết kế các bảng. 
- Ràng buộc giữa các bảng với 
Nhau. 
- Thiết kế các thủ tục cần thiết 
xử lý dữ liệu. 
- Thiết kế các hàm cần dùng nếu 
có. 
Đầy đủ, chính 
xác. 
4 
Xây dựng 
các lớp xử 
lý dữ liệu. 
- Lớp cấu hình. 
- Lớp xử lý dữ liệu. 
Đúng 
5 
Xây dựng 
lớp hiển thị. 
- Thiết kế khung trang trong tệp 
tin Master page. 
- Xây dựng các Web User 
Control. 
- Xây dựng các trang theo yêu 
cầu của ngƣời sử dụng. 
Đúng , trang 
web phải hoạt 
động tốt. 
6 Kiểm tra. 
- Chạy Website. 
- Chỉnh sửa lại các trang theo 
yêu cầu. 
- Hoạt động 
tốt. 
- Không lỗi. 
4. Tổ chức thực hiện. 
Mỗi học sinh một máy, thực hành dƣới sự hƣớng dẫn của giáo viên. 
5. Kiểm tra đánh giá. 
- Tạo và liên kết đƣợc với cơ sở dữ liệu: 2 điểm 
- Các chức năng trên các form giao diện hoạt động tốt : 6 điểm. 
- Các trang web đẹp, bố cục hợp lý, mầu sắc hài hoà : 2 điểm. 
272 
 BÀI TẬP BÀI 3. 
Bài 1: Thực hành lại tất cả các thí dụ về HTML Server Controls và Web 
Server Controls đã đƣợc học. Có thể viết các bài thực hành có nội dung 
tƣơng đƣơng các thí dụ để năm vững bài học. 
Bài 2: Sử dụng các điều khiển để thực hiện các bài tập sau: 
Tạo trang Default.aspx để thực hiện các nội dung sau: 
1) Nhập x, in ra tri tuyệt đối của x. 
2) Tính T = 1+2+3++n với n nguyên và n>0. 
3) In ra các số có 3 chữ số sao cho abc = a3 + b3 + c3 
4) Tính S = 1+2/22+3/33++n/nn, với n nguyên > 0. 
Hãy tạo các đƣờng link đến từng trang cho từng bài tập ở trên. 
Bài 3: Thực hành lại các ví dụ trong bài học, có thể tùy chỉnh theo ý của 
ngƣời làm. 
Bài 4: Đọc và giải thích nội dung của phần mã lệnh trang bai4.aspx. 
<%@ Page Language="C#" AutoEventWireup="true" 
CodeFile="bai4.aspx.cs" Inherits="bai4" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" "
transitional.dtd"> 
 Session 
 <asp:DropDownList runat="server" id="Chonmau" 
autopostback="true" 
 onselectedindexchanged="Chonmau_IndexChanged"> 
 Chọn mầu 
... 
 Red 
 Green 
 Blue 
273 
Phần code behind 
public partial class bai4 : System.Web.UI.Page 
{ 
 protected void Page_Load(object sender, EventArgs e) 
 { 
 if (Session["BackgroundColor"] != null) 
 { 
 Chonmau.SelectedValue = 
Session["BackgroundColor"].ToString(); 
 BodyTag.Style["background-color"] = Chonmau.SelectedValue; 
 } 
 } 
 protected void Chonmau_IndexChanged(object sender, EventArgs e) 
 { 
 BodyTag.Style["background-color"] = Chonmau.SelectedValue; 
 Session["BackgroundColor"] = Chonmau.SelectedValue; 
 } 
} 
Thực thi trang, khi chọn màu Red từ DropdownList, kết quả thực thi trang: 
Hình 3.61: Kết quả thực thi trang 
- Kết thúc ứng dụng và chạy lại ứng dụng nà trong cùng một cửa sổ 
trình duyệt đang mở, trang hiển thị ra sao? Giải thích. 
- Nếu đóng cửa sổ trình duyệt và thực thi lại ứng dụng , trang hiển thị 
ra sao? Giải thích. 
274 
Bài 5: Tạo một ứng dụng ASP.NET về đối tƣợng Application và tập tin 
Global.asax . 
-Tạo trang Global.asax. 
void Application_Start(object sender, EventArgs e) 
{ 
int SiteHitCounter=500; 
int CurrentUsers=100; 
Application["SiteHitCounter"] = SiteHitCounter; 
Application["CurrentUsers"] = CurrentUsers; 
} 
void Application_End(object sender, EventArgs e) 
{ 
HitCountClass cls = new HitCountClass(); 
} 
void Application_Error(object sender, EventArgs e) 
{ 
// Code that runs when an unhandled error occurs 
} 
void Session_Start(object sender, EventArgs e) 
{ 
Application["SiteHitCounter"] = 
(int)Application["SiteHitCounter"] + 1; 
Application["CurrentUsers"] = 
(int)Application["CurrentUsers"] + 1; 
} 
void Session_End(object sender, EventArgs e) 
{ 
Application["CurrentUsers"] = 
(int)Application["CurrentUsers"] - 1; 
// Code that runs when a session ends. 
// Note: The Session_End event is raised only when the sessionstate 
mode 
275 
// is set to InProc in the Web.config file. If session mode is set to 
StateServer 
// or SQLServer, the event is not raised. 
} 
Tạo trang Counter.aspx 
<%@ Page Language="C#" AutoEventWireup="true" 
CodeFile="Counter.aspx.cs" 
Inherits="ApplicationPage" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
""> 
Counter 
  
Viết đoạn mã sau cho trang Counter.aspx.cs 
public partial class Counter : System.Web.UI.Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
Label.Text = "Hit Counter: " + 
Application["SiteHitCounter"] .ToString(); 
Label.Text = "Current users: " + 
276 
Application["CurrentUsers"].ToString(); 
} 
} 
Khi thực thi trang Counter ta đƣợc kết quả sau: 
Hit Counter: 501 
Current users: 101 
Hãy giải thích tại sao lại có kết quả trên? 
Bài 6: Hãy viết chƣơng trình thêm sửa xóa cho các bảng (Department, 
Category, Product) và quản lý hóa đơn để hoàn thành ứng dụng mẫu đã 
thiết kế ở bài 3, phần 5. 
277 
TÀI LIỆU THAM KHẢO 
Tiếng Việt. 
[1] Macromedia Dreamweaver 8 - Nguyễn Tƣờng Sinh và Lê Minh Hoàng 
- NXB Lao động xã hội, năm 2008. 
[2] Kỹ thuật xây dựng ASP.NET – Nguyễn Văn Lân – NXB Lao động xã 
hội, 2008. 
[3] Học và thực hành thiết kế web chuyên nghiệp với Macromedia 
Dreamweaver – Nguyễn Mạnh Hải – NXB Văn hóa thông tin, 2007. 
[4] Giáo trình HTML và thiết kế Web - Khoa Công nghệ thông tin, 
Trƣờng ĐH Công Nghệ, ĐHQGHN. 
[5] Bài giảng thiết kế web - Dƣơng Thành Phát trƣờng Cao đẳng Công 
nghệ thông tin Hồ Chí Minh. 
[6] Giáo trình thiết kế Web và làm hoạt hình - Phạm Quang Huy - NXB 
Giao thông vận tải, năm 2003. 
[7] Giáo trình tự học thiết kế Web động -Hoàng Hải - NXB Lao động Xã 
Hội , năm 2007. 
Tiếng Anh 
[8] HTML, DHTML and JavaScript - Aptech WorldWide‟s book.. 
[9] Beginning ASP.NET 2.0 in C# 2005-Matthew MacDonald - 2006 
[10] Pro ASP.NET 2.0 in C# 2005 - Matthew MacDonald và Mario 
Szpuszta -2005 
[11] Beginning SQL Server 2005 for Developers - Robin Dewson -2006 
[12] Professional ASP.NET 2.0 - Wiley Publishing xuất bản năm 2006 
[13] Web Designer For Teens - Thomson Course Technology PTR - 2005 
[14] Microsoft® 
ASP.NET 4Step by Step tác giả George Shepherd - 2010