Chia sẻ cho các bạn giáo trình được sử dụng giảng dạy tại trường ĐHSPKT Hưng Yên22
Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech MỤC LỤC I. Lý thuyết 5 1.1 Giới thiệu 5 1.2 Danh sách các phần tử HTML thường dùng 5 II. Bài tập thực hành 7 1. Yêu cầu: 7 2. Hướng dẫn 7 3. Minh hoạ mẫu 8 4. Ghi chú 9 BÀI SỐ 2: Tạo trang web động với DHTML và JavaScript 10 I. Lý thuyết 10 1. Đưa câu lệnh javascript vào trang web 10 2. Đưa câu lệnh javascript vào từ một file riêng biệt 11 3. Truy cập các phần tử HTML bằng câu lệnh Javascript 12 4. Xây dựng hàm trong Javascript 13 5. Một số hàm thông dụng của Javascript 14 II. Thực hành 14 1. Yêu cầu 14 2. Hướng dẫn 14 3. Minh hoạ mẫu 14 4. Ghi chú 17 BÀI 3: THAY ĐỔI NỘI DUNG TRANG WEB BẰNG CSS VÀ JS ĐỊNH DẠNG TRANG WEB VỚI CSS 17 I. Lý thuyết 17 1. Định dạng CSS ngay trong định nghĩa phần tử (Gọi là Inline) 17 2. Định dạng CSS thông qua lớp 18 II. Thực hành 20 1. Yêu cầu 20 2. Hướng dẫn 20 3. Minh hoạ mẫu 21 4. Ghi chú 24 BÀI 4 (Tiếp): THAY ĐỔI NỘI DUNG TRANG WEB BẰNG CSS VÀ JS ĐỊNH DẠNG TRANG WEB VỚI CSS 25 I. Lý thuyết 25 1. Tham chiếu đến một phần tử trong trang web 25 2. Tham chiếu đến một thuộc tính của phần tử 26 3. Thay đổi nội dung của một phần tử 26 II. Thực hành 27 1 Yêu cầu 27 2 Hướng dẫn 28 3 Minh Hoạ mẫu 28 4 Ghi chú 33 BÀI SỐ 5: ASP.NET và Web form 33 V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319 P.1 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech I. Lý thuyết 33 1. Mô hình lập trình phía máy chủ 33 2 Cơ chế xử lý file ASP.NET phía máy chủ 36 3 Một số ví dụ minh họa 38 4 Webform trong ASP.NET 41 5 Tìm hiểu cấu trúc trang ASP.NET 41 6. Code behind và viết code phía Server 44 7. HTML Server Controls và Web controls 44 II. Thực hành 46 1. Yêu cầu 46 2. Hướng dẫn 47 3. Minh hoạ mẫu 47 4. Ghi chú 52 BÀI 6: Các đối tượng trong ASP.NET 53 I. Lý thuyết 53 1. Request Object 53 2 Response Object 56 3 Server Object 57 4 Session Object 58 5 Application Object 58 II. Thực hành 59 1. Bài 1: Tạo một trang Login 59 2. Bài 2: Tạo một trang đếm số lượng người truy cập 63 BÀI 7: CÔNG NGHỆ ADO.NET 65 I. Lý thuyết 65 1. Giới thiệu chung 65 2. Kiến trúc của ADO.NET 66 3. Các lớp thao tác với CSDL: Connection, Command,… 67 II. THỰC HÀNH 79 1. Tạo cơ sở dữ liệu 79 2. Nhập dữ liệu cho bảng 80 3. Hiển thị dữ liệu trong bảng lên trình duyệt 83 4. Cập nhật dữ liệu bằng DataSet và DataAdapter 84 BÀI 8: Tìm hiểu và ứng dụng cơ chế Data Binding 86 I. Lý thuyết 86 1 Giới thiệu DataBinding 86 2 Data Binding 86 3. Các điều khiển Data Source (Data source controls) 90 II. THỰC HÀNH 98 BÀI 9: Làm việc với GridView 102 I. Lý thuyết 102 1. Giới thiệu tổng quan 102 2. Tìm hiểu lớp GridView 102 3. Các tính năng hỗ trợ của GridView 106 V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319 P.2 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech 4. Tạo các cột tùy biến HyperLink, BoundColunm… 110 5. Tạo và xử lý các cột Select, Edit, Delete, Update… 113 II. Thực hành 118 BÀI 10: Sử dụng Templates 125 I. Lý thuyết 125 1. Giới thiệu tổng quan 125 2. Các điều khiển hỗ trợ Templates 125 3. Repeater control, DataList control, GridView control 126 II. THỰC HÀNH 132 1. Bài 1: Hiển thị danh sách cán bộ 132 2. Bài 2: Bổ sung thêm trường vào bảng 134 3 Bài 3: Hiển thị danh sách cán bộ dạng chi tiết 135 4. Bài 4: Hiển thị danh sách người dùng dưới dạng Flow (tuyến tính) 136 Bài 5: Hiển thị thông tin kèm Hyperlink 139 Bài 6: Thực hiện phân trang 140 PHỤ LỤC 142 I. ĐÓNG GÓI WEBSITE 142 II. CÀI ĐẶT HỆ THỐNG IIS HỖ TRỢ ASP.NET WEBSITE 142 1. Cài đặt IIS 142 2. Cài đặt .NET Framework 142 V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319 P.3 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech TRUNG TÂM HƯNG YÊN – APTECH Địa chỉ : Tầng 2, Nhà A – Đại học SPKT Hưng Yên Điện thoại : 0321-713.319; Fax: 0321-713.015 E-mail : aptech@utehy.edu.vn; Website : http://www.aptech.utehy.vn TÀI LIỆU KHÓA HỌC LẬP TRÌNH ASP.NET Biên soạn: - Nguyễn Minh Quý - Lê Quang Lợi HƯNG YÊN 7/2009 V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319 P.4 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech PHẦN I Cơ bản về HTML, DHTML, JavaScript BÀI SỐ 1: Tạo trang web với HTML Mục tiêu: Kết thúc bài học, sinh viên có thể Tạo được trang web tĩnh trên notepad/ HTML Editor Định dạng nội dung trang web bằng các phần tử HTML cơ bản Thao tác được với phần tử bảng (Table), <TR>, <TD>, Nội dung I. Lý thuyết 1.1 Giới thiệu Một trang web khi được hiển thị trên trình duyệt (IE; FireFox; Netscape, ) về bản chất được tạo từ các cặp thẻ (tag) đặc biệt. Các thẻ này sẽ chỉ dẫn cho trình duyệt biết nên hiển thị nội dung như thế nào. Ví dụ cặp thẻ <b> </b> sẽ chỉ dẫn cho trình duyệt phải in đậm nội dung bên trong, v.v Mỗi cặp thẻ như vậy gọi là cặp thẻ HTML (Hyper Text Markup Language). Vì vậy, đối với mỗi lập trình viên web, trước khi muốn xây dựng ứng dụng web thực thụ thì không chỉ phải hiểu rất rõ những cặp thẻ HTML (ít nhất là những cặp thẻ cơ bản) mà còn phải biết cách Code (tạo) các cặp thẻ này. 1.2 Danh sách các phần tử HTML thường dùng Dưới đây là danh sách các phần tử HTML cơ bản và cách tạo ra tương ứng bằng cặp thẻ HTML STT Phần tử Hình thù hiển thị trên trang web Cách tạo ra bằng thẻ HTML tương ứng Input <input type="text" value="hello" name="txtMsg"> Button <input type="button" value="Yes" name="btnYes"> CheckBox <input type="checkBox" name="chkHTML" value="Checked"> Radio button <input type="radio" value='Checked' name = 'optGioiTinh'> List <Select name="lstDSSV" Size="3"> <Option value="sv1"> Nguyễn Văn A </Option > <Option value="sv2"> Nguyễn Văn B </Option > <Option value="sv3"> Nguyễn Văn C </Option > </Select> Danh sách (Combo Box) <Select name="lstDSSV" Size="1"> <Option value="sv1"> Nguyễn Văn A </Option > <Option value="sv2"> Nguyễn Văn B </Option > <Option value="sv3"> Nguyễn Văn C </Option > </Select> V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319 P.5 Nam CheckBox1 Yes ✘ Nguyn Vn A Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech Phân cách <hr> xuống dòng <br> div Là một phần tử chứa các phần tử khác. Khi ẩn/ hiện/ di chuyển phần tử div thì các phần tử khác cũng ẩn/hiện/di chuyển theo <div> <input type="text" value="" name = "txtHoTen"> <input type ="button" value="OK" name="btnOK"> </div> Table 11 12 21 22 <Table border = "1"> <tr> <td> 11 </td> <td> 12 </td> </tr> <tr> <td> 21 </td> <td> 22 </td> </tr> </table> TR Thẻ TR phải nằm trong một <Table> nào đó, không thể tạo riêng TD Thẻ TD phải nằm trong một <TR> nào đó, không thể tạo riêng. Trộn hai cột => <tr> <td> </td> <td colspan = 2> </td> </tr> Trộn 2 hàng => <table border="1"> <tr> <td >1</td> <td>2</td> <td>3</td> </tr> <tr> <td rowspan="2" >1</td> <td>2</td><td>3</td> </tr> <tr> <td >1</td> <td>2</td> </tr> </table> a www.aptech.utehy.vn <a href="http://www.utehy.vn"> www.aptech.utehy.vn </a> img <img src="utehylogo.png" alt ="Logo UTEHY"> Chú ý: Thuộc tính đặt cho các phần tử được viết dưới dạng: <Tên thuộc tính>=<giá trị>. Phần <giá trị> được đặt trong cặp dấu nháy đơn hoặc cặp dấu nháy kép. V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319 P.6 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech II. Bài tập thực hành 1. Yêu cầu: Tạo một trang web để hiển thị nội dung như sau: Giao diện trang web cần tạo 2. Hướng dẫn - Sử dụng bảng mô tả các phần tử ở trên để tạo trang theo yêu cầu. V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319 P.7 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech - Vào trình soạn thảo web của Visual Studio 2008 và tạo dự án web, sau đó mở trang Default.aspx và viết các thẻ HTML. - Để chạy (mở) trang web vừa tạo, có thể nhấn F5 hoặc click chuột phải trong trang soạn thảo (hoặc tệp Default.aspx bên panel phải), sau đó chọ "View in Browser". 3. Minh hoạ mẫu Default.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Bài thực hành số 1 - Hưng Yên Aptech</title> </head> <body> <br /> <h1> PHẦN MỀM QUẢN LÝ BÁN HÀNG</h1> <h2> NHẬP THÔNG TIN NHÀ CUNG CẤP </h2> <hr /> <form id="form1" runat="server"> Tên nhà cung cấp: <input type ="text" id ="txtNCC" size="30"/> <br /> Người đại diện: <input type ="text" id ="txtContactName" /> Chức vụ: <input type ="text" id ="txtContactTitle" /> <br /> Địa chỉ Nhà CC: <input type ="text" id ="txtAddress" size ="50" /> <br /> Thành phố : <select id ="lstCity" size ="1"> <option value ="null"> Chọn </option> <option value ="HN">Hà nội</option> <option value ="HCMC">TP Hồ Chí Minh</option> <option value ="ĐN">Đà Nẵng</option> <option value ="HP">Hải Phòng</option> <option value ="HY">Hưng Yên</option> <option value ="HD">Hải Dương</option> <option value ="QN">Quảng Ninh</option> <option value ="OTHER">Nơi khác</option> </select> Vùng: <input type ="text" id ="txtRegion" /> <br /> Mã bưu điện: <input type ="text" id ="txtPostalCode" /> <br /> Quốc gia: <select id ="lstCountry" size ="4"> <option value ="VN" selected>Việt Nam</option> <option value ="LAO">Lào</option> <option value ="CAMPUCHIA">Campuchia</option> <option value ="OTHER">Nơi khác</option> </select> <br /> Điện thoại: <textarea rows ="3" cols ="20" id ="txtTelephone"> </textarea> Số Fax: <input type ="text" id ="txtFaxNumber" /> <br /> V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319 P.8 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech Địa chỉ website: <input type ="text" id ="txtHomepage" size ="50" /> <hr /> <input type ="reset" value ="Xoá (reset form)" /> <input type ="submit" value ="Thêm mới" /> <br /> <hr /> <h3>Danh sách nhà cung cấp hiện có</h3> <table border ="1"> <tr> <th>Mã NCC</th> <th>Tên NCC</th> <th>Địa chỉ</th> <th>Homepage</th> </tr> <tr> <td>1</td> <td>Công ty FPT</td> <td>Láng Hạ - Ba Đình</td> <td><a href ="http://www.fpt.vn"> www.fpt.vn</a></td> </tr> <tr> <td>2</td> <td>Công ty CMC</td> <td>Hàn Thuyên - Hai Bà Trưng</td> <td><a href ="http://www.cmc.vn"> www.cmc.vn</a></td> </tr> <tr> <td>3</td> <td>Công ty Trần Anh</td> <td>Giảng võ - Ba Đình</td> <td><a href="http://www.trananh.vn">www.trananh.vn</a></td> </tr> </table> </form> </body> </html> 4. Ghi chú Để thực hiện xoá (reset về trạng thái đầu) của một form nhập liệu, ta tạo phần tử button nhưng đặt "type" là "reset" (thay vì type = "button). Để gửi toàn bộ nội dung dữ liệu đã nhập về server xử lý, tạo phần tử button nhưng đặt "type" là "submit" (thay vì type = "button") Để chọn mặc định một mục trong danh sách (Select) thì đặc thuộc tính là "Selected" cho mục đó. Để tạo hộp text có nhiều dòng, ta dùng thẻ <TextArea>. Muốn thay đổi độ rộng của textbox, chỉ cần thay đổi thuộc tính "size". Có thể bố trí lại trang web trên cho đẹp hơn bằng cách đặt các phần tử trong các ô của bảng (sử dụng thẻ Table). V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319 P.9 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech BÀI SỐ 2: Tạo trang web động với DHTML và JavaScript Mục tiêu: Kết thúc bài thực này, người học có thể Truy xuất các đối tượng trình duyệt và các phần tử HTML bằng JavaScript. Tạo trang web đăng ký có xử lý tính hợp lệ của dữ liệu nhập vào. Nội dung: I. Lý thuyết Một trang web được tạo ở bài trước được gọi là một trang web tĩnh (Static webpage - tức là: Nội dung của nó một khi đã được tạo ra thì luôn luôn hiển thị giống nhau đối với mọi người dùng ở mọi thời điểm). Tuy nhiên, ngày nay do nhu cầu của người dùng và của ứng dụng nên một trang web phải có khả năng động (Dynamic webpage - tức là: nội dung của trang web có thể hiển thị, ứng xử khác nhau ứng với người sử dụng hoặc tình huống khác nhau ). Khả năng "động" đó có thể thực hiện ở bên phía trình duyệt hoặc phía server. Nếu trang web cho phép thực hiện thay đổi (bằng ngôn ngữ kịch bản như VBScript, JavaScript ) bên phía trình duyệt, gọi là trang DHTML (Dynamic HTML); còn nếu trang web thực hiện xử lý bên phía server (bằng ngôn ngữ C#, VB.NET, ASP, PHP, Perl, ) gọi là các trang động phía server (Active Server Page). Trong tài liệu này chúng ta sẽ tìm hiểu cả hai dạng web động ở trên, còn trong bài này ta sẽ tìm hiểu trang DHTML với Javascript (JS). 1. Đưa câu lệnh javascript vào trang web 1.1 Đưa câu lệnh javascript vào luồng xử lý ngay khi trang web được mở. Để đưa các câu lệnh Javascript vào trang web và yêu cầu trình duyệt thực thi ngay khi trang web được mở, ta chỉ cần đặt các câu lệnh JS ngay trong các cặp thẻ <Script> </script> nhưng không hàm. Ví dụ: Hiển thị một lời chào và thông báo ngày hiện tại khi trang web được mở. <html> <body> <form id="form1"> <script language="javascript" type ="text/javascript"> var d = new Date (); document.write ("<h1>Chào bạn ! </h1>"); document.write("Hôm nay là: " + d.toDateString()); </script> </form> </body> </html> ** Chú ý: - Có thể có nhiều đoạn script trong một trang. - Trong cặp script phải là các CÂU LỆNH JAVASCRIPT V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319 P.10 [...]... lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech 2 Hướng dẫn - Để tô nền vàng, truy cập vào thuộc tính backgroundColor của style thuộc phần tử tương ứng Để thông báo, dùng hàm alert Để xoá form, gọi phương thức reset() của form Để thêm một hàng vào bảng, thực hiện trình tự: + thêm hàng (row hay tr) mới: Gọi phương thức insertRow(Vị trí cần thêm) của bảng + thuộc tính rows.length của bảng... (DateTime.Today.Date.ToString()); %> Câu hỏi: Chương trình Client và server có nhất thiết phải nằm trên hai máy tính riêng biệt không ? và Client là các trình duyệt rồi (IE, FireFox…), còn server là chương trình nào ? Trả lời: Hai chương trình này hoàn toàn có thể nằm trên cùng một máy tính Chương trình server thực chất là một chương trình có tên là IIS (Internet Information Service) V2.0 – http://www.aptech.utehy.vn;... bảng CSS trong bản mềm đi kèm hoặc trang www.w3schools.com V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319 P.20 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech 3 Minh hoạ mẫu CSS Nhãn { font-style:italic; font-size:12pt; color:Gray; text-align:right; width:150px; padding-right:5px; } Bảng... world " Đây là cơ sở để ta thay đổi nội dung của trang web Hãy luôn ghi nhớ, để thay đổi nội dung/ thuộc tính/ style của phần tử thì trước hết phải truy cập/ tham chiếu được đến phần tử đó Cách để truy cập hay dùng là hàm document.getElementById("Id của thẻ") BÀI SỐ 5: ASP.NET và Web form I Lý thuyết 1 Mô hình lập trình phía máy chủ Trong thế giới web, tất cả các giao tiếp giữa Client (trình duyệt) và... bảo mật cao Mô hình theo cách này gọi là mô hình lập trình phía máy chủ Dưới đây là hình ảnh minh họa cho 2 mô hình này: Mô hình lập trình phía máy khách (Client side) V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319 P.34 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech Mô hình lập trình phía máy chủ Câu hỏi: Khi nào thì một trang sẽ được... tiên là phải tham chiếu đến phần tử đó Với mỗi trình duyệt khác nhau có thể có các cách khác nhau, tuy nhiên cách truy cập sau đây tương thích với hầu hết các trình duyệt Để tham chiếu đến một phần tử, có thể dùng 2 cách phổ biến sau: 1.1 Dùng hàm getElementById("Giá trị thuộc tính id của phần tử") Ví dụ, có phần tử: Chương I Nếu muốn tham chiếu (truy xuất) đến phần tử H1 này, ta... trả lại cho trình duyệt xử lý Câu hỏi: Sao không gửi ngay cho trình duyệt xử lý như trước đây mà cứ phải để server xử lý …! Để Client xử lý sẽ giảm tải cho server, điều này chẳng tốt hơn sao ? Trả lời: Vì trình duyệt chỉ có thể hiểu và xử lý được các thẻ HTML và Javascript thôi, còn nó không thể xử lý được các nội dung phức tạp Ví dụ nó không hiểu asp:Calendar là gì ? 2 Cơ chế xử lý file ASP.NET phía... (phần tử đầu có chỉ số 0) 2 Tham chiếu đến một thuộc tính của phần tử Khi đã tham chiếu được đến phần tử thì việc tham chiếu đến thuộc tính khá dễ dàng, có thể viết theo cú pháp sau: . Ví dụ: (Ở đây, type, value và id là các thuộc tính của thẻ input) Nếu muốn truy xuất đến thuộc tính value, ta viết: document.getElementById("button1").value... hoặc phần tử bất kỳ) Việc truy xuất đến phần tử tuân theo cú pháp chung như sau: + Document.., hoặc: + Document.forms[Chỉ số]., hoặc: + Document.getElementById() Khi đã truy xuất đến phần tử, ta có thể truy xuất đến các thuộc tính của nó để đọc/ ghi như sau: . . Yên Điện thoại : 032 1-7 13.319; Fax: 032 1-7 13.015 E-mail : aptech@utehy.edu.vn; Website : http://www.aptech.utehy.vn TÀI LIỆU KHÓA HỌC LẬP TRÌNH ASP. NET Biên soạn: - Nguyễn Minh Quý - Lê Quang Lợi HƯNG. TRỢ ASP. NET WEBSITE 142 1. Cài đặt IIS 142 2. Cài đặt .NET Framework 142 V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321 3-7 13.319 P.3 Tài liệu khóa học lập trình web với ASP. NET. trình phía máy chủ 33 2 Cơ chế xử lý file ASP. NET phía máy chủ 36 3 Một số ví dụ minh họa 38 4 Webform trong ASP. NET 41 5 Tìm hiểu cấu trúc trang ASP. NET 41 6. Code behind và viết code phía Server