(NB) Giáo trình Lập trình web động với ASP.NET với mục tiêu giúp các bạn Tìm hiểu các kỹ thuật lập trình ứng dụng web và các mô hình ứng dụng. Cài đặt và cấu hình Web Server. Tìm hiểu môi trường phát triển ứng dụng web với Visual.
TRƯỜNG CAO ĐẲNG NGHỀ CÔNG NGHIỆP HÀ NỘI Tác giả: Nguyễn Thị Nhung Bùi Quang Ngọc GIÁO TRÌNH LẬP TRÌNH WEB ĐỘNG VỚI ASP.NET (Lưu hành nội bộ) Hà Nội năm 2011 BÀI TỔNG QUAN VỀ ASP.NET A Mục tiêu - Tìm hiểu kỹ thuật lập trình ứng dụng web mơ hình ứng dụng - Cài đặt cấu hình Web Server - Tìm hiểu mơi trường phát triển ứng dụng web với Visual B Nội dung Tổng quan lập trình ứng dụng Web Ứng dụng Web hệ thống phức tạp, dựa nhiều yếu tố: phần cứng, phần mềm, giao thức, ngôn ngữ thành phần giao diện Trong phần này, giới thiệu sơ lược cho bạn thành phần ứng dụng Web: HTTP (giao thức trao đổi tài nguyên) HTML (ngôn ngữ xây dựng trang web) 1.1 HTTP HTML - Nền móng Kỹ thuật lập trình web 1.1.1 HTTP (Hypertext Transfer Protocol) Kỹ thuật lập trình ứng dụng web khởi đầu HyperText Transfer Protocol (HTTP), giao thức cho phép máy tính trao đổi thơng tin với qua mạng máy tính HTTP xác định qua URLs (Uniform Resource Locators), với cấu trúc chuỗi có định dạng sau: http: // [: ] [ [? ]] Sau tiền tố http://, chuỗi URL chứa tên host hay địa IP máy server (có thể có số cổng kèm), đường dẫn dẫn đến tập tin server yêu cầu Tùy chọn sau tham số, gọi query string (chuỗi tham số/chuỗi truy vấn) Ví dụ: Phân tích địa http://www.comersus.com/comersus6/store/index.asp Trang web index.asp lưu trữ thư mục /comersus6/store Web Server với host www.comersus.com Một số thuật ngữ: Internet: hệ thống gồm nhiều máy tính khắp nơi giới nối lại với WWW: World Wide Web (mạng toàn cầu), thường dùng nói Internet Web Server: Máy tính lưu trữ trang web Web Client: Máy tính dùng để truy cập trang web Web Browser: Phần mềm dùng để truy cập web Một số web browser phổ biến: Internet Explorer, Netscape Navigator, Avant Browser, Opera, … 1.1.2 HTML (Hypertext Markup Language) Trang web HTML tập tin văn viết ngôn ngữ HTML, ngơn ngữ biết đến với tên gọi: ngôn ngữ đánh dấu văn Ngôn ngữ đánh dấu HTML sử dụng ký hiệu quy định sẵn (được gọi tag) để trình bày nội dung văn Ví dụ: Nội dung trang web AspDotNet.htm ASP.NetChào bạn đến với ASP.Net!!!
1.2 Tìm hiểu mơ hình ứng dụng 1.2.1 Mơ hình ứng dụng lớp Đây dạng mơ hình đơn giản, phổ biến ứng dụng phân tán Trong mơ hình này, việc xử lý liệu thực Database Server, việc nhận hiển thị liệu thực Client a Ưu điểm - Dữ liệu tập trung → đảm bảo liệu quán - Dữ liệu chia sẻ cho nhiều người dùng b Khuyết điểm - Các xử lý tra cứu cập nhật liệu thực Database Server, việc nhận kết hiển thị phải thực Client → Khó khăn vấn đề bảo trì nâng cấp - Khối lượng liệu truyền mạng lớn → chiếm dụng đường truyền, thêm gánh nặng cho Database Server 1.2.2 Mô hình ứng dụng lớp Mơ hình lớp phần đáp ứng yêu cầu khắc khe ứng dụng phân tán, nhiên, khối lượng liệu lớn, ứng dụng đòi hỏi nhiều xử lý phức tạp, số người dùng tăng, mơ hình lớp khơng thể đáp ứng Mơ hình lớp sử dụng thêm Application Server giữ nhiệm vụ tương tác Client Database server, giảm bớt xử lý Database server, tập trung xử lý nhận hiển thị liệu Application server a Ưu điểm - Hỗ trợ nhiều người dùng - Giảm bớt xử lý cho Client → Khơng u cầu máy tính Client có cấu hình mạnh - Xử lý nhận hiển thị liệu tập trung Application Server → dễ quản lý, bảo trì nâng cấp - Xử lý truy cập liệu tập trung Database Server b Khuyết điểm - Phải sử dụng thêm Application Server -> Tăng chi phí Giới thiệu ASP.Net 2.1 Tìm hiểu Net Phatform Net Phatform bao gồm Net Framework công cụ dùng để xây dựng, phát triển ứng dụng dịch vụ ASP.Net Những sản phẩm công nghệ Net Microsoft bao gồm: MSN.Net, Office.Net, Visual Studio.Net Windows Server 2003 biết đến với tên gọi Windows Net Server Visual Studio Net phần mềm dùng để xây dựng phát triển ứng dụng bao gồm ngôn ngữ lập trình: C++.Net, Visual Basic.Net, ASP.Net, C# J# Tất ngôn ngữ xây dựng dựa Net Framework, thế, bạn nhận thấy cú pháp ngôn ngữ tương tự 2.2 Tìm hiểu Net Framework Kiến trúc Net Framework 2.2.1 Hệ điều hành Cung cấp chức xây dựng ứng dụng Với vai trò quản lý việc xây dựng thi hành ứng dụng, NET Framework cung cấp lớp đối tượng (Class) để bạn gọi thi hành chức mà đối tượng cung cấp Tuy nhiên, lời kêu gọi bạn có "hưởng ứng" hay khơng tùy thuộc vào khả hệ điều hành chạy ứng dụng bạn Các chức đơn giản hiển thị hộp thông báo (Messagebox) NET Framework sử dụng hàm API Windows Chức phức tạp sử dụng COMponent yêu cầu Windows phải cài đặt Microsoft Transaction Server (MTS) hay chức Web cần Windows phải cài đặt Internet Information Server (IIS) Như vậy, bạn cần biết lựa chọn hệ điều hành để cài đặt sử dụng NET Framework không phần quan trọng Cài đặt NET Framework hệ điều hành Windows 2000, 2000 Server, XP, XP.NET, 2003 Server đơn giản tiện dụng lập trình 2.2.2 Common Language Runtime Là thành phần "kết nối" phần khác NET Framework với hệ điều hành Common Language Runtime (CLR) giữ vai trò quản lý việc thi hành ứng dụng viết NET Windows CLR thông dịch lời gọi từ chương trình cho Windows thi hành, đảm bảo ứng dụng không chiếm dụng sử dụng tràn lan tài ngun hệ thống Nó khơng cho phép lệnh "nguy hiểm" thi hành Các chức thực thi thành phần bên CLR Class loader, Just In Time compiler, Garbage collector, Exception handler, COM marshaller, Security engine,… Trong phiên hệ điều hành Windows XP.NET Windows 2003, CLR gắn kèm với hệ điều hành Điều đảm bảo ứng dụng viết máy tính chạy máy tính khác mà không cần cài đặt, bước thực đơn giản lệnh xcopy DOS! 2.2.3 Bộ thư viện lớp đối tượng Nếu phải giải nghĩa từ "Framework" thuật ngữ NET Framework lúc thích hợp Framework tập hợp hay thư viện lớp đối tượng hỗ trợ người lập trình xây dựng ứng dụng Có thể số người nghe qua MFC JFC Microsoft Foundation Class thư viện mà lập trình viên Visual C++ sử dụng Java Foundation Class thư viện dành cho lập trình viên Java Giờ đây, coi NET Framework thư viện dành cho lập trình viên NET Với 5000 lớp đối tượng để gọi thực đủ loại dịch vụ từ hệ điều hành, bắt đầu xây dựng ứng dụng Notepad.exe!!!… Nhiều người lầm tưởng môi trường phát triển phần mềm Visual Studio 98 hay Visual Studio.NET tất cần để viết chương trình Thực ra, chúng phần mềm dùng làm "vỏ bọc" bên Với chúng, viết đoạn lệnh đủ màu xanh, đỏ; lỗi cú pháp báo gõ lệnh; thuộc tính đối tượng đặt cửa sổ properties, giao diện thiết kế theo phong cách trực quan… Như vậy, hình dung tầm quan trọng NET Framework Nếu khơng có cốt lõi NET Framework, Visual Studio.NET vỏ bọc! Nhưng khơng có Visual Studio.NET, cơng việc lập trình viên NET bước gian nan! a Base class library – thư viện lớp sở Đây thư viện lớp nhất, dùng lập trình hay thân người xây dựng NET Framework phải dùng để xây dựng lớp cao Ví dụ lớp thư viện String, Integer, Exception,… b ADO.NET XML Bộ thư viện gồm lớp dùng để xử lý liệu ADO.NET thay ADO để việc thao tác với liệu thông thường Các lớp đối tượng XML cung cấp để bạn xử lý liệu theo định dạng mới: XML Các ví dụ cho thư viện SqlDataAdapter, SqlCommand, DataSet, XMLReader, XMLWriter,… c ASP.NET Bộ thư viện lớp đối tượng dùng việc xây dựng ứng dụng Web ASP.NET phiên ASP 3.0 Ứng dụng web xây dựng ASP.NET tận dụng toàn khả NET Framework Bên cạnh "phong cách" lập trình mà Microsoft đặt cho tên gọi kêu: code behind Đây cách mà lập trình viên xây dựng ứng dụng Windows based thường sử dụng – giao diện lệnh tách riêng Tuy nhiên, bạn quen với việc lập trình ứng dụng web, "đổi đời" bạn giải phóng khỏi mớ lệnh HTML lộn xộn tới hoa mắt Sự xuất ASP.NET làm cân xứng trình xây dựng ứng dụng Windows Web ASP.NET cung cấp Server Control để lập trình viên bắt kiện xử lý liệu ứng dụng làm việc với ứng dụng Windows Nó cho phép chuyển ứng dụng trước viết để chạy Windows thành ứng dụng Web dễ dàng Ví dụ cho lớp thư viện WebControl, HTMLControl, … d Web services Web services hiểu sát nghĩa dịch vụ cung cấp qua Web (hay Internet) Dịch vụ coi Web service không nhằm vào người dùng mà nhằm vào người xây dựng phần mềm Web service dùng để cung cấp liệu hay chức tính tốn Ví dụ, cơng ty du lịch bạn sử dụng hệ thống phần mềm để ghi nhận thông tin khách du lịch đăng ký tour Để thực việc đặt phòng khách sạn địa điểm du lịch, công ty cần biết thơng tin phòng trống khách sạn Khách sạn cung cấp Web service biết thơng tin phòng trống thời điểm Dựa vào đó, phần mềm bạn biết liệu có đủ chỗ để đặt phòng cho khách du lịch khơng? Nếu đủ, phần mềm lại dùng Web service khác cung cấp chức đặt phòng để thuê khách sạn Điểm lợi Web service bạn không cần người làm việc liên lạc với khách sạn để hỏi thơng tin phòng, sau đó, với đủ thơng tin nhiều loại phòng người xác định loại phòng cần đặt, số lượng đặt bao nhiêu, đủ hay không đủ lại liên lạc lại với khách sạn để đặt phòng Đừng quên khách sạn lúc cần có người để làm việc với nhân viên bạn chưa họ liên lạc thành cơng Web service cung cấp dựa vào ASP.NET hỗ trợ từ phía hệ điều hành Internet Information Server e Window form Bộ thư viện Window form gồm lớp đối tượng dành cho việc xây dựng ứng dụng Windows based Việc xây dựng ứng dụng loại hỗ trợ tốt từ trước tới cơng cụ ngơn ngữ lập trình Microsoft Giờ đây, ứng dụng chạy Windows làm việc với ứng dụng Web dựa vào Web service Ví dụ lớp thư viện là: Form, UserControl,… 2.2.4 Phân nhóm lớp đối tượng theo loại Một khái niệm hình vẽ cần đề cập đến Namespace Đây tên gọi nhóm lớp đối tượng phục vụ cho mục đích Chẳng hạn, lớp đối tượng xử lý liệu đặt namespace tên Data Các lớp đối tượng dành cho việc vẽ hay hiển thị chữ đặt namespace tên Drawing Một namespace namespace lớn Namespace lớn NET Framework System Hệ thống tên miền (Namespace) Lợi điểm namespace phân nhóm lớp đối tượng, giúp người dùng dễ nhận biết sử dụng Ngoài ra, namespace tránh việc lớp đối tượng có tên trùng với khơng sử dụng .NET Framework cho phép tạo lớp đối tượng namespace riêng Với 5000 tên có sẵn, việc đặt trùng tên lớp với lớp đối tượng có điều khó tránh khỏi Namespace cho phép việc xảy cách sử dụng tên đầy đủ để nói đến lớp đối tượng Ví dụ, muốn dùng lớp WebControls, dùng tên tắt WebControls hay tên đầy đủ System.Web.UI.WebControls Đặc điểm thư viện đối tượng NET Framework trải rộng để hỗ trợ tất ngôn ngữ lập trình NET thấy hình vẽ Điều giúp người bắt đầu bận tâm việc lựa chọn ngơn ngữ lập trình cho tất ngơn ngữ mạnh ngang Cũng cách sử dụng lớp đối tượng để xây dựng ứng dụng, NET Framework buộc người lập trình phải sử dụng kỹ thuật lập trình hướng đối tượng (sẽ nói tới chương sau) Kết quả: (khi khơng có file c:\yahoo.gif) Yahoo! c Xác định chiều rộng chiều cao Để thay đổi chiều rộng chiều cao hình ảnh, sử dụng hai thuộc tính width height Giá trị width height thường dùng pixel (mặc định) % Ví dụ: Yahoo! Kết quả: 2.1.6 Bảng (Table) a Cú pháp HTML sử dụng cấu trúc tag gồm có , để định dạng bảng: : phần nằm tag cấu trúc dòng cột bảng - Table Row: phần nằm tag cấu trúc cột dòng - Table Data: phần nằm tag nội dung cell (một cột dòng) Ví dụ: Cột dòng 1Cột dòng 1 Cột dòng 1 Cột dòng 2Cột dòng 2 Cột dòng 2 1) Tag , bạn thấy ví dụ, đặt cặp tag để định nghĩa mục chọn Tên mục chọn đặt trong cặp tag … Mục chọn mặc định biểu thị qua thuộc tính selected Thuộc tính value cho biết giá trị mục chọn Bạn cần biết giá trị mục chọn xử lý liệu nhập form Nếu bạn muốn ListBox chọn nhiều mục lúc, sử dụng thuộc tính multiple tag Cascading Style Sheets - CSS 3.1 Giới thiệu CSS 3.1.1 CSS - CSS: Cascading Style Sheets - Các Style định nghĩa cách trình duyệt hiển thị đối tượng HTML - Các Style lưu Style Sheet - Các Style Sheet độc lập lưu file CSS riêng biệt - Các Style Sheet độc lập tiết kiệm nhiều thời gian cho bạn - Nhiều định nghĩa Style cho loại đối tượng sử dụng theo lớp 3.1.2 Style giúp bạn giải nhiều vấn đề HTML tag thiết kế để định dạng cách hiển thị nội dung trang Web cách định nghĩa "đây phần header", "đây đoạn", "đây bảng",… Mỗi trình duyệt hiển thị nội dung trang Web theo cách riêng dựa định nghĩa Các trình duyệt thơng dụng Internet Explorer hay Netscape liên tục thêm thắt tag HTML riêng vào danh sách HTML tag chuẩn W3C làm cho việc tạo lập văn Web để hiển thị độc lập trình duyệt ngày khó khăn Để giải vấn đề này, W3C (World Wide Web consortium- tổ chức chịu trách nhiệm tạo lập chuẩn Web) tạo STYLE cho HTML 4.0, Netscape 4.0 Internet Explorer 4.0 hỗ trợ Cascading Style Sheets 1.1.1 Style Sheet tiết kiệm nhiều công sức thiết kế Các Style HTML 4.0 định nghĩa cách mà thành phần HTML hiển thị Các Style thường lưu file độc lập với trang Web bạn Các file CSS độc lập cho phép bạn thay đổi hình thức thể khn dạng tất trang Website thống mà phải thực thay đổi lần 1.1.2 Style dùng? Ta nói rằng, Style sử dụng theo "lớp" (cascade) ưu tiên nhiều Style định nghĩa thành phần HTML tham chiếu file HTML Thứ tự ưu tiên xếp từ cao xuống thấp: - Style cho thành phần HTML cụ thể - Style phần HEAD - Style file CSS - Mặc nhiên theo trình duyệt 3.2 Cú pháp CSS Cú pháp CSS gồm phần: đối tượng, thuộc tính giá trị: Đối tượng {thuộc tính: giá trị} Đối tượng thường tag HTML mà bạn muốn định nghĩa cách hiển thị Thuộc tính thuộc tính hiển thị đối tượng Giá trị cách mà bạn muốn thuộc tính hiển thị Cặp {thuộc tính: giá trị} đặt dấu {} Body {color: black} Nếu giá trị gồm nhiều từ, đặt chúng dấu nháy đôi: p {font-family: "sans serif"} Nếu bạn muốn định nghĩa nhiều thuộc tính đối tượng, phân cách cặp thuộc tính: giá trị dấu (;) p {text-align: center; color: red} Để định nghĩa Style dễ đọc hơn: P { text-align: center; color: black; font-family: arial } 3.2.1 Nhóm nhiều đối tượng Bạn định nghĩa Style cho nhiều đối tượng lúc: h1, h2, h3, h4, h5, h6 { color: green } 3.2.2 Thuộc tính Class Với thuộc tính Class, bạn định nghĩa nhiều Style khác cho đối tượng Ví dụ, bạn muốn có hai Style cho tag, tag
có class=right canh lề bên phải, class=center canh giữa: p.right {text-align: right} p.center {text-align: center} Trong trang HTML:
Đoạn canh phải
Đoạn canh
Bạn bỏ qua tên đối tượng để định nghĩa kiểu Style cho tất thành phần có Class mà bạn định nghĩa Ví dụ: center { text-align: center; color: red } Trong trang HTML sau, H1 đoạn văn canh giữa: Tiêu đề canhĐoạn canh
3.2.3 Thuộc tính ID Thuộc tính ID dùng định nghĩa Style theo hai cách: Tất thành phần HTML có ID Chỉ thành phần HTML có ID định nghĩa Ví dụ sau, Style dùng cho tất thành phần HTML có ID "intro": #intro { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent } Ví dụ sau, Style dùng cho thành phầncó ID "intro" trang Web p#intro { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent } 3.2.4 Ghi CSS CSS dùng cách ghi tương tự ngôn ngữ C: đoạn ghi bắt đầu /* kết thúc */ Ví dụ: /* Đây phần ghi */ p { text-align: center; /* Đây phần ghi */ color: black; font-family: arial } 3.3 Sử dụng CSS trang HTML 3.3.1 Làm chèn vào Style Sheet Khi trình duyệt đọc Style, định dạng nội dung trang Web theo Style Có cách để sử dụng Style trang HTML 3.3.2 Dùng file CSS riêng File CSS độc lập nên dùng Style áp dụng cho nhiều trang Mỗi trang sử dụng Style định nghĩa file CSS phải liên kết đến file tag đặt phần HEAD: Ví dụ file CSS: Style.css hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} 3.3.3 Định nghĩa Style phần HEAD Các Style định nghĩa phần HEAD dùng cho nhiều thành phần HTML trang Web Bạn sử dụng tag để định nghĩa Style: hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} Ghi chú: Trình duyệt thường bỏ qua tag HTML mà khơng biết, để trình duyệt khơng hỗ trợ CSS khơng hiển thị phần định nghĩa Style, bạn nên đặt tag ghi HTML: