Giáo trình Lập trình Web & ASP.Net

Nội dung text: Giáo trình Lập trình Web & ASP.Net

1. . Trong các trang ASP chúng ta phải viết mã để kiểm tra dữ liệu nhập từ người dùng , ASP.NET hỗ trợ các validation controls để kiểm tra chúng ta không cần viết mã, . Hỗ trợ phát triển Web được truy cập trên các thiết bị di động: PocketPC, Smartphone . Hỗ trợ nhiều web server control . . Hỗ trợ thiết kế và xây dựng MasterPage lồng nhau. . Hỗ trợ bẫy lỗi (debug) JavaScript . Cho phép người dùng thiết lập giao diện trang Web theo sở thích cá nhân sử dụng Theme, Profile, WebPart . Tăng cường các tính năng bảo mật (security) . Hỗ trợ kỹ thuật truy cập dữ liệu mới LINQ . Hỗ trợ kỹ thuật xây dụng các ứng dụng đa phương tiện SilverLight . Hỗ trợ kỹ thuật bất đồng bộ ASP.Net Ajax . ASP.Net hỗ trợ mạnh mẽ bộ thư viện phong phú và đa dạng của .Net Framework, làm việc với XML, Web Service, truy cập cơ sở dữ liệu qua ADO.Net, . ASPX và ASP có thể cùng hoạt động trong 1 ứng dụng. . Kiến trúc lập trình giống ứng dụng trên Windows. . Hỗ trợ quản lý trạng thái của các control . Tự động phát sinh mã HTML cho các Server control tương ứng với từng loại Browser . Hỗ trợ nhiều cơ chế Cache. . Triển khai cài đặt : Không cần lock, không cần đăng ký DLL, cho phép nhiều hình thức cấu hình ứng dụng . Hỗ trợ quản lý ứng dụng ở mức toàn cục: Global.aspx có nhiều sự kiện hơn, quản lý session trên nhiều Server, không cần Cookies . Trang ASP.Net được biên dịch trước. Thay vì phải đọc và thông dịch mỗi khi trang web được yêu cầu, ASP.Net biên dịch những trang web động thành những tập tin DLL mà Server có thể thi hành nhanh chóng và hiệu quả. Yếu tố này làm gia tăng tốc độ thực thi so với kỹ thuật thông dịch của ASP. Hình 1.7 Minh họa quá trình biên dịch trang ASP.Net Thí dụ 1.3: Minh họa trang ASP.Net hiển thị ngày hiện hành. Lưu hành nội bộ Trang 8
2. ASP.Net 3.5 Hình 1.6: Nội dung trang Default.aspx us ing System; using System.Collections; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; namespace Sample { public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { lbMsg.Text = lbMsg.Text + DateTime.Now.ToString("dd/MM/yyyy"); } } } Hình 1.7: Nội dung trang Default.aspx.cs Lưu hành nội bộ Trang 9
3. Hình 1.8: Kết quả trang Default.aspx  Quá trình xử lý tập tin .ASPX Khi Web Server nhận được yêu cầu từ phía client, nó sẽ tìm kiếm tập tin được yêu cầu thông qua chuỗi URL được gởi về, sau đó, tiến hành xử lý theo sơ đồ sau: Hình 1.9: Quá trình xử lý tập tin .aspx 1.3 Web Server IIS Trong phần này chúng khảo sát về IIS (phần mềm Web Server của Microsot dành cho Windows), đồng thời hướng dẫn bạn cài đặt, cấu hình và kiểm tra Web Server trên các hệ thống sử dụng Windows 2000, Windows XP, Windows Server 2003,Vista, Lưu hành nội bộ Trang 10
4.  Internet Information Services IIS có thể được sử dụng như một Web server, kết hợp với ASP để xây dựng các ứng dụng Web tận dụng các điểm mạnh của Server-side Script, COM component, theo mô hình Client/Server. IIS có rất nhiều phiên bản, đầu tiên được phát hành rời trong bản Service pack của WinNT. . Các phiên bản Windows 2000 đã có tích hợp IIS 5.0. . Windows XP tích hợp IIS 5.5 . Windows Vista tích hợp IIS 6  Cài đặt Web Server Các bƣớc cài đặt Web Server trên Windows XP Professional Windows XP tích hợp sẵn IIS nhưng không tự động cài đặt do đó, bạn phải tự cài IIS nếu hệ thống đã được cài rồi. Bƣớc 1. Chọn Control Panel | Add/Remove programs. Bƣớc 2. Add/Remove Windows Components. Hình 1.10 : Cài đặt IIS từ đĩa Windows XP Bƣớc 3. Đánh dấu vào mục Internet Information Services (IIS). Bƣớc 4. Chọn nút Details để chọn các mục chi tiết. Bƣớc 5. Chọn các mục cần cài đặt trong đó bạn nhớ chọn: FrontPage 2000 Server Extensions và Internet Information Services Snap-In Bƣớc 6. Nhấp nút Next (có thể Windows yêu cầu đĩa CD Windows XP ) để cài đặt hoàn tất. Lưu hành nội bộ Trang 11
5. Bƣớc 7: Ðể xác định việc cài thành công Web Server, ta có thể kiểm tra như sau: Mở trình duyệt (Browser) : Microsoft Internet Explorer và gõ vào hộp địa chỉ và sau đó nhấn Enter thì trang localstart.asp mặc định sẽ xuất hiện như sau. Hình 1.11: Minh họa cài đặt IIS thành công  Localhost là địa chỉ của máy cục bộ mà bạn đang làm việc. Nếu máy của bạn đang kết nối vào mạng LAN và có một địa chỉ IP, bạn có thể dùng địa chỉ này thay cho localhost. Để xác định địa chỉ IP của máy mình: . Vào menu Start|Run và gõ lệnh: command hoặc cmd . Trên màn hình DOS, gõ lệnh: ipconfig và xem phần IP Address . Khi gõ //localhost, bạn sẽ thấy trong thanh địa chỉ tự động đổi thành: HTTP là giao thức mặc định được dùng trên Internet. Vì HTTP là một giao thức thuộc bộ TCP/IP, bạn cần có địa chỉ IP để các máy tính khác trong mạng có thể truy cập được đến trang web của bạn. . Sau khi cài đặt Web Server, mặc định trên ổ đĩa C:\ sẽ có sẵn thư mục C:\inetpub\wwwroot. Đây là thư mục mà Web Server mặc định ánh xạ vào //localhost, do đó, các trang web đặt trong wwwroot có thể được truy cập bởi các máy tính khác. 1.4 Tạo mới ứng dụng Web với ASP.NET Lưu hành nội bộ Trang 12
6. Chúng ta sẽ bắt đầu bằng việc làm quen với môi trường phát triển ứng dụng (IDE) của Visual Studio.NET. VS.NET 2008 có nhiều thay đổi so với các biên bản trước. Hình dưới là màn hình khởi đầu của VS.NET 2008. Vùng làm việc chính giữa đang hiển thị trang Start Page, Recent Projects, Visual Studio Developer News. Visual Studio Developer News cần một kết nối với Internet để download các thông tin từ website của Microsoft về máy tính của chúng ta. Recent Projects liệt kê các project mà chúng ta đã làm việc trong thời gian gần đây. Trên mục này, chúng ta cũng có thể tạo mới một project bằng cách nhấn vào nút New Project. Hình 1.13 : Cửa sổ giao diện MS Visual Studio .NET 2008 1.4.1 Tạo ứng dụng ASP.NET đầu tiên Chúng ta có thể tạo ứng dụng Asp.Net sử dụng Visual C# Project theo các bước sau: Bƣớc 1. Chọn từ thực đơn File | New | WebSite. Xuất hiện hộp thoại tạo mới Project (hình 1.14). . Chọn loại Language là Visual C# . Chọn ASP.Net Web Site từ vùng Templates . Ứng dụng mới được tạo mặc định có tên là WebSiteXX (XX là số thứ tự tự động). Chúng ta có thể thay đổi tên của Project tại mục Location. Trong ví dụ này, chúng ta thay đổi tên Project WebSite1 thành MinhHoa.  Tại mục Location : Lưu hành nội bộ Trang 13
7. Nếu ta chọn giá trị là File System thì ứng dụng sẽ được tạo ra trong thư mục theo đường dẫn mà ta chỉ định ví dụ : D:\DotNet2008\WebSite1, khi ta chạy ứng dụng thì VS.Net sẽ tạo ra một Web Server ảo và sử dụng Web server này để thực thi ứng dụng. Hình 1.14: Màn hình tạo mới WebSite Nếu như ta chọn giá trị là HTTP,chỉ ta gõ vào đường dẫn: thì ứng dụng sẽ được tạo ra trong thư mục mặc định là C:\Inetpub\wwwroot với tên là WebSite1, khi ta chạy ứng dụng thì VS.Net sẽ sử dụng Web server là IIS mà ta đã cài đặt trên máy. 1.4.2 Thiết kế giao diện thực thi và ứng dụng Trên hộp công cụ (Toolbox), nếu chưa có hộp công cụ chọn View/ToolBox , mở thẻ Standard (chứa các Web Server Control) click vào lần lượt hai điều khiển (Control) nhãn (Label) và dán vào trang Default.aspx. Nhập nội dung thuộc tính Text cho hai điều khiển dạng nhãn theo bảng 1.1 Bảng 1.1: Tên điều khiển Thuộc tính Text lblChao Chào bạn đến với lập trình ASP.Net 3.5 lblThoiGian [Chuỗi rỗng] Lưu hành nội bộ Trang 14
8. thanh công cụ phần mã HTML phần giao diện Hình 1.15: Màn hình thiết kế trang Default.aspx Để viết lệnh cho trang Default.aspx các bạn vào menu View | Code hay nhấn phím F7 , màn hình viết lệnh xuất hiện như hình 4.10 và viết lệnh cho sự kiện Page_Load : namespace MinhHoa { public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { lblThoiGian.Text = "Ngày giờ hiện hành" + DateTime.Now.ToString("dd/MM/yyyy hh:mm:ss"); } } } Thực hiện việc gán nội dung cho thuộc tính Text của điều khiển nhãn lblThoiGian như trong hình. Nhấn F5 hoặc Ctrl + F5 để thi hành ứng dụng. Ứng dụng sẽ được biên dịch (compiler) để kiểm tra lỗi và hiện nội dung ra trình duyệt mặc định trên máy Kết quả như hình 1.16. Lưu hành nội bộ Trang 15
9. Hình 1.16: Màn hình kết quả hiển thị trang Default.aspx 1.5 Khảo sát giao diện Visual Studio .NET 2008  Solution Explorer Hiển thị cửa số Solution Explorer: menu View | Solution Explorer Hình 1.17 Cửa sổ Solution Explorer Đây là cửa số quản lý các "tài nguyên" có trong ứng dụng. Thông qua cửa sổ này, chúng ta có thể: . Thực hiện các chức năng: sao chép, cắt, dán trên tập tin, thư mục như Windows Explorer. . Tổ chức thư mục quản lý ứng dụng: Sử dụng chức năng Add | New Folder từ thực đơn ngữ cảnh. . Thêm thành phần mới cho ứng dụng: Sử dụng chức năng Add | Add New Item từ thực đơn ngữ cảnh. Xuất hiện hộp thoại Add New Item, hình 1.18 o Web Form: Thêm trang Web o Class: Thêm lớp đối tượng o Web User Control: Thêm điều khiển người dùng, Lưu hành nội bộ Trang 16
10. Hình 1.18: Màn hình thêm mới Item . Xác định trang web khởi động cho ứng dụng trong trường hợp chúng ta có nhiều trang web o Chọn trang cần khởi động -> Nhấp chuột phải (xuất hiện thực đơn ngữ cảnh) -> Chọn Set As Start Page. o Xác định Project khởi động (trong trường hợp Solution có nhiều Project): Chọn Solution và từ (thực đơn) menu ngữ cảnh chọn Set as StartUp Project từ thực đơn ngữ cảnh. Hình 1.19 Chọn trang thực thi đầu tiên trong ứng dụng  Property Window o Hiển thị cửa số Properties Window: Thực đơn View | Properties Window. Lưu hành nội bộ Trang 17
11. o Thông qua cửa sổ thuộc tính, chúng ta có thể thiết lập thuộc tính cho trang web và các đối tượng có trong trang web. Hình 1.20  Toolbox o Hiển thị Toolbox: Thực đơn View | Toolbox Hình 1.20: Web Server Control Lưu hành nội bộ Trang 18
12. BÀI THỰC HÀNH CHƢƠNG 1: Bài 1: Tạo ứng dụng cho phép người dùng lựa chọn màu ƣa thích trên trang ASP.NET như sau: Giao diện của chúng ta có 3 checkbox và một button. Khi button được click thì hàm xử lý sự kiện button click được thực hiển và kiểm tra checkbox nào được chọn và hiển thị nội dung tương ứng lên. Hướng dẫn: Chúng ta có file aspx như sau: phần nội dung trong thẻ được nhập và kéo thả các điều khiển CheckBox và Button trong thẻ HTML của hộp công cụ. Nội dung trang Default.aspx : Lưu hành nội bộ Trang 19
13. Bạn thích những màu nào? Đỏ Xanh dương Xanh lục Code xử lý phía server như sau: public partial class _Default : System.Web.UI.Page { protected void submit(object sender, EventArgs e) { string sResult =""; if (red.Checked) sResult = "đỏ, "; if (green.Checked) sResult = sResult + "xanh lục, "; if (blue.Checked) sResult = sResult + "xanh dương"; p1.InnerHtml = "Bạn thích màu: " + sResult; red.Checked = false; green.Checked = false; blue.Checked = false; } } Lưu hành nội bộ Trang 20
14. Chƣơng 2 : Tìm hiểu và sử dụng các Server Controls Trong bài này, chúng ta tập trung tìm hiểu các loại Server controls. Các vấn đề chính sẽ được đề cập :  Cấu trúc một trang ASP.NET  Biến cố của trang ASP.NET  Giới thiệu ASP.NET Server Controls  Các loại HTML Server Controls và Web server Controls  Thuộc tính IsPostBack của trang ASP.NET và AutoPostBack của các Web Server Controls Kết thúc bài này các bạn có thể :  Sử dụng được các Web Server Controls để xây dựng các trang ASP.NET. 2.1 Cấu trúc trang ASP.NET Chúng ta tạo một trang ASP.NET tên ChaoMung.aspx, nhắp chọn File|New|File (hoặc Ctrl+N), hoặc trong cửa sổ Solution Explorer nhắp R-Click|Add New Item , xuất hiển hộp thoại sau : Hình 2.1 Hộp thoại thêm thành phần mới vào ứng dụng đang mở. Chọn đề mục Web Form, nhập Name : ChaoMung.aspx, nhắp nút Add, một trang mới được thêm vào ứng dụng. 2.1.1 Các phƣơng pháp viết mã trong ASP.NET ASP.NET cho phép viết mã lệnh theo 2 mô hình sau: Mô hình Code Inline (Code Inline Model) Mô hình Code Behind (Code Behind Model) Hình 2.2 Trang ChaoMung.aspx mới được thêm vào Lưu hành nội bộ Trang 21
15.  Code Inline Model: Trong mô hình này, phần mã ASP.NET và mã HTML được viết trong cùng một trang, mã ASP.NET được viết ở phần . nằm trong trang ASP.NET nhưng không trộn lẫn với mã HTML dành cho phần nội dung (content section). Chẳng hạn như ta có thể đặt phần mã trong trang ChaoMung.aspx lên trên cùng tách khỏi phần mã HTML . void Page_Load(object sender, EventArgs e) { lblChao.Text = "Lập trình Web với ASP.Net 3.5"; } Chao mung Kết quả thực thi trang trên : Hình 2.3 Minh họa phần HTML code của trang ChaoMung.aspx  Code Behind Model: Lưu hành nội bộ Trang 22
16. Trong mô hình này, phần mã ASP.NET được được sắp xếp trong một tập tin khác riêng biệt với phần mã HTML. Ta có thể viết mã theo xử lý biến cố cho trang ChaoMung.aspx theo các bước sau: Bƣớc 1: Trong cửa sổ Solution Explorer, chọn trang ChaoMung.aspx ,nhấn phải chuột và chọn ViewCode . Bƣớc 2: Sau khi VS.Net tạo một tập tin tên là ChaoMung.aspx.cs ta viết lệnh : lblChao.Text = "Lập trình Web với ASP.Net 3.5" vào trong sự kiện Page_Load . public partial class ChaoMung : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { lblChao.Text = "Lập trình Web với ASP.Net 3.5"; } } Kết quả như trên : Hình 2.4 Minh họa phần Code behind của trang ChaoMung.aspx So với CodeInline thì Code Behind viết mã lệnh (code) dễ hơn do tách được phần giao diện và phần mã HTML riêng biệt đồng thời có thể sử dụng lại các đoạn mã đã viết (reuseable codes) trong tập tin .aspx.cs 2.1.2 Cấu trúc của trang ASP.NET Một trang ASP.NET thông thường gồm 3 phần: Phần 1: Được gọi là Page Directives, phần này cung cấp cho ASP.NET những thông tin đặc biệt để trình biên dịch biết cách thực thi trang ASP.NET, cũng như những thông tin dùng trong tiến trình biên dịch (during the compiling process), gồm các thông tin sau: : Khai báo các biên dịch trang. Language : khai báo ngôn ngữ được sử dụng để viết mã cho trang (C#, VB.Net ) AutoEventWireup: nếu giá trị là true thì các sự kiện của trang được tự động gọi đúng tên như Page_Load mà không cần khởi tạo sự kiện chỉ đến phương thức Page_Load. CodeFile : Chỉ rõ tên tập tin code behind có phần mở rộng .aspx.cs (chứa các đoạn mã thực thi các biến cố) được liên kết với trang ASP.NET có phần mở rộng .aspx. Inherits : Cho biết là trang giao diện thừa kế từ lớp nào là tên của lớp (class) của tập tin code behind, theo thí dụ là trang ChaoMung.aspx.cs. Phần 2: , phần này còn gọi là Code Declaration Block, giống như mã ở phía client (Client Side) nhưng có kèm theo thuộc tính runat="server" cho biết đoạn mã này được thực thi ở phía server (Server Side). Ta có thể đặt để phần này ở bất cứ Lưu hành nội bộ Trang 23
17. nơi nào trong trang web , nhưng để phân biệt mã của ASP.NET với mã của HTML ta nên sắp xếp ở phần đầu tiên của trang. void Page_Load(object sender, EventArgs e) { lblChao.Text = "Lập trình Web với ASP.Net 3.5"; } Phần mã này tạo ra một phương thức (hàm) có tên là Page_Load mặc định (default) cho các trang ASP.NET, phương thức này sẽ thực hiển gán chuỗi "Lập trình Web với ASP.Net 3.5" vào trong thuộc tính Text của Label Control mỗi khi trang được thực thi. Phần 3: , đây là nơi ta bắt đầu phần mã của HTML. Phần này chính là hình thức trình bày nội dung của trang được soạn bởi mã ASP.NET trước khi gởi về và hiển thị trong trình duyệt (browser) của Client. Ngoài ra, ASP.NET cũng cho phép ta kèm theo những chỉ thị (instructions) trong Code Render Block bắt đầu với Bài thực hành 2_1: Xây dựng một ứng dụng Web với tên WebSiteChap2_1 có các thành phần sau : Để thêm thư mục App_Code, R-Click trên tên ứng dụng trong cửa sổ Solution Explorer, chọn Add ASP.NET folder và chọn tiếp App_Code : Sau đó tạo một lớp Product.cs trong thư mục App_Code , R-Click trên thư mục App_Code, chọn Add New Item : Lưu hành nội bộ Trang 24
18. Gõ tên trong khung Name là Product.cs và nhập nội dung sau : // Define the delegate that represents the event. public delegate void PriceChangedEventHandler(); public class Product { private string name; private decimal price; private string imageUrl; public string Name { get { return name; } set { name = value; } } // Define the event. public event PriceChangedEventHandler PriceChanged; public decimal Price { get { return price; } set { price = value; // Fire the event, provided there is at least one listener. if (PriceChanged != null) { PriceChanged(); } } } public string ImageUrl { get { return imageUrl; } set { imageUrl = value; } } public string GetHtml() { string htmlString; htmlString = " " + name + " "; htmlString += " Costs: " + price.ToString() + " "; htmlString += " "; return htmlString; Lưu hành nội bộ Trang 25
19. } public Product(string name, decimal price) { Name = name; Price = price; } } Viết mã lệnh cho trang Default.aspx : private void Page_Load(object sender, EventArgs e) { Product saleProduct = new Product("Kitchen Garbage", 49.99M); saleProduct.ImageUrl = "garbage.jpg"; Response.Write(saleProduct.GetHtml()); } Product Test Kết quả thực thi : 2.2 Biến cố của trang ASP.NET Khi làm việc với trang ASP.NET, bạn có thể bắt gặp một số biến cố của trang theo thứ tự như sau : PreInit, Init, InitComplete, PreLoad, Load, LoadComplete, PreRender, PreRenderComplete, UnLoad. Để khai báo các biến cố trang ASP.NET, bạn vào thực đơn View|Component Design hay R- Click| View Component Design trong cửa sổ Solution Explorer. Lưu hành nội bộ Trang 26