(NB) Giáo trình “Lập trình web 1 (Web Form ASP.NET)” được biên soạn dành cho học sinh trung cấp và sinh viên cao đẳng các nghề Công nghệ Thông tin (Ứng dụng phần mềm) và Lập trình máy tính với mục tiêu cung cấp cho người học các kiến thức và kỹ năng cần thiết để có thể hoàn thành ứng dụng web quảng cáo sản phẩm, thương mại điện tử,…
ỦY BAN NHÂN DÂN TỈNH BR – VT TRƯỜNG CAO ĐẲNG NGHỀ GIÁO TRÌNH MƠ ĐUN: LẬP TRÌNH WEB (WEB FORM ASP.NET) NGHỀ: LẬP TRÌNH MÁY TÍNH, CƠNG NGHỆ THƠNG TIN TRÌNH ĐỘ: TRUNG CẤP VÀ CAO ĐẲNG Ban hành kèm theo Quyết định số: /QĐ-CĐN …… ngày …… tháng …… năm ……… Hiệu trưởng trường Cao đẳng nghề tỉnh BR – VT Bà Rịa – Vũng Tàu, năm 2015 TUYÊN BỐ BẢN QUYỀN Tài liệu thuộc loại sách giáo trình nên nguồn thơng tin phép dùng nguyên trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác mang tính lệch lạc sử dụng với mục đích kinh doanh thiếu lành mạnh bị nghiêm cấm Trang LỜI GIỚI THIỆU Giáo trình “Lập trình web (Web Form ASP.NET)” biên soạn dành cho học sinh trung cấp sinh viên cao đẳng nghề Công nghệ Thông tin (Ứng dụng phần mềm) Lập trình máy tính với mục tiêu cung cấp cho người học kiến thức kỹ cần thiết để hồn thành ứng dụng web quảng cáo sản phẩm, thương mại điện tử, … Tác giả nghiên cứu số tài liệu, công nghệ đại kết hợp với kinh nghiệm làm việc thực tế để viết nên giáo trình Nội dung tác giả trình bày động, dễ hiểu kèm theo bước hướng dẫn thực hành chi tiết giúp cho người học dễ tiếp thu kiến thức cần thiết hình thành kỹ nghề Trong trình biên soạn, chắn giáo trình nhiều thiếu sót Tác giả mong nhận ý kiến đóng góp quý thầy/cô em học sinh, sinh viên để tiếp tục hoàn thiện Xin chân thành cảm ơn quý đồng nghiệp, bạn bè có ý kiến đóng góp q trình xây dựng giáo trình Bà Rịa – Vũng Tàu, ngày …… tháng …… năm 2015 Tham gia biên soạn Phan Hữu Phước – Chủ biên Trang MỤC LỤC Trang MÔ ĐUN: Lập trình Web (Web Form ASP.NET) Mã mơ đun: Vị trí, tính chất, ý nghĩa vai trò mơ đun: − Được giảng dạy sau học xong Thiết kế web, Lập trình Windows EF WCF, SQL Server − Cung cấp cho người học kiến thức kỹ để xây dựng hoàn chỉnh website thương mại điện tử, quảng bá cho tổ chức, cá nhân NET Framework Mục tiêu mô đun: − Biết kiến thức Web Client, Web Server, ASP.Net môi trường Visual Studio − Rèn luyện phát triển kỹ tổ chức xây dựng ứng dụng Web với ASP.Net 5.0 sử dụng ngôn ngữ C# theo kiến trúc đa tầng (n-tier), hướng dịch vụ (SOA) − Rèn luyện nâng cao kỹ lập trình theo cơng nghệ Entity Framework (EF), Windows Communication Foundation (WCF) − Xây dựng sở vững chắc, tạo tiền đề cho việc tìm hiểu kiến thức lập trình Web nâng cao phát triển nghề nghiệp − Thực thực hành đảm bảo trình tự An toàn cho người, mạng thiết bị Nội dung mô đun: Trang BÀI TỔNG QUAN VỀ LẬP TRÌNH WEB Mã bài: Giới thiệu: Bài cung cấp cho HSSV kiến thức tổng quát liên quan đến trang web Internet, ứng dụng web ASP.NET môi trường phát triển Mục tiêu: − Biết khái niệm HTTP, URL, HTML − Phân biệt khái niệm web tĩnh web động − Biết trình xử lý yêu cầu ứng dụng web ASP.NET − Cẩn thận, an toàn Nội dung chính: Tìm hiểu số khái niệm 1.1 Giới thiệu Internet − Là mạng máy tính tồn cầu Các máy tính mạng trao đổi thơng tin với thông qua giao thức TCP/IP (Transmission Control Protocol/Internet Protocol) − Mang lại nhiểu tiện ích cho người sử dụng, bật dịch vụ thư điện tử (email), trò chuyện trực tuyến (chat) truy tìm liệu (search engine), … − Dịch vụ dùng phổ biến Internet World Wide Web (WWW, thường gọi tắt Web) thông qua giao thức HTTP (Hyper Text Transfer Protocol) 1.2 Phân biệt Web Server, Web Client Web Server Web Client Máy tính lưu trữ website Máy tính dùng để truy cập trang web Xử lý trả kết cho Web Gửi yêu cầu nhận kết từ Web Client nhận yêu cầu Server 1.3 Giới thiệu số trình duyệt web − Trình duyệt Web (Web Browser) phần mềm dùng để xem tài liệu tìm kiếm tài nguyên World Wide Web − Một số trinh duyệt Web thông dụng nay: Trang o Internet Explorer (IE) cài đặt sẵn cài đặt hệ điều hành Microsoft Windows o Mozilla FireFox tập đoàn Mozilla o Chrome Google o Safari hãng Apple 1.4 Phân biệt HTTP, URL, HTML − HTTP (Hyper Text Transfer Protocol) o Là giao thức truyền tải siêu văn o Tập hợp quy định dùng để trao đổi tài liệu (văn bản, hình ảnh, âm thanh, video, tập tin đa truyền thông, …) Web Server Web Browser − URL (Uniform Resource Locator) o Đường dẫn đến trang web (hoặc tập tin) cụ thể Internet o Cú pháp đầy đủ: scheme://[:port][][?] Trong đó: scheme: loại dịch vụ Internet (http, https, ftp) host: địa máy chủ chứa tài nguyên port: cổng dịch vụ giao tiếp path: đường dẫn tên tập tin tài nguyên máy chủ querystring: tham số gửi kèm theo (khi sử dụng http, https) Ví dụ: http://brtvc.edu.vn http://brtvc.edu.vn/thoikhoabieu/2015-2016-hk1.pdf http://brtvc.edu.vn/danhsachlop?lop=cd14lt http://t3h.vn/Pages/View.aspx?id=2 − HTML (Hyper Text Markup Language) o Ngôn ngữ dùng để xây dựng trang web o Gồm tag giúp Web Browser biết cách định dạng thông tin hiển thị Ví dụ: nội dung trang web chao.html ASP.NET Chào mừng bạn đến với Lập trình Web Form ASP.NET Trang Tổng quan lập trình web 2.1 Web tĩnh − Trang web trình bày dạng văn Nội dung tạo lúc thiết kế không thay đổi theo thời gian − Được viết, thiết kế ngôn ngữ HTML, không kết nối đến sở liệu (CSDL) − Dùng ngơn ngữ Client Side Script (Javascript) có nhu cầu xử lý tương tác trang web Lập trình Client Side Javscript − Quá trình xử lý trang web xảy Web Browser Web Client Đặc điểm o Nhanh, không nhiều thời gian hiển thị kết trang web Web Browser o Chỉ thực xử lý đơn giản độc lập o Không cần phải cài đặt phần mềm Web Server Web ngày phát triển website: Có thể có trang web tĩnh Có xử lý Client trang web động Trang 2.2 Web động − Là trang web có hiển thị nội dung từ CSDL − Dùng ngôn ngữ Server – Side Script để xử lý − Quá trình xử lý Web Server Lập trình Server – Side Đặc điểm: o o o o Chậm, thời gian để hiển thị kết Có khả thực xử lý phức tạp truy cập CSDL Trang web linh động, phục vụ nhiều yêu cầu Phải cài đặt phần mềm Web Server Giới thiệu ASP.NET 3.1 Khái niệm ASP.NET? − Active Server Pages NET Framework − Công nghệ dùng để phát triển ứng dụng web động dịch vụ web − Kỹ thuật lập trình phát triển ứng dụng web phía Server (Server – Side) dựa NET Framework Server – Side: đoạn mã lệnh (VB.NET, C#, …) biên dịch xử lý Server trả kết HTML, Javascript, CSS, … sau gửi cho Web Browser phía Client Trang 3.2 Tìm hiểu số đặc điểm ASP.NET − Easy Programming Model o ASP.NET hỗ trợ phát triển triển khai ứng dụng web mạng Internet thời gian ngắn o ASP.NET tự động phát sinh mã HTML cho Server Control tương ứng cho tối ưu với loại Web Browser − Flexible Language Options: có khả giao tiếp với nhiều ngơn ngữ lập trình: VB.NET, C#, MC++.NET, … − Rich Class Framework: có sẵn 5000 lớp đối tượng hỗ trợ cho nhiều yêu cầu khác Internet như: XML, Data Access, File Upload, SMTP Mail, … nên việc viết lệnh xử lý trở nên dễ dàng tiện lợi − Great Tool Support o Hỗ trợ thiết kế nhanh Web Form hay Services theo phương pháp Kéo – Thả - Click đôi quen thuộc hệ điều hành Windows o Hỗ trợ việc phát loại bỏ lỗi sai trình phát triển ứng dụng web − Mơ hình Code – Behind: cho phép tách riêng giao diện HTML đoạn mã Server – Side − ASP.NET Compiled Interpreted o Trang ASP.NET biên dịch trước thành tập tin DLL nhị phân Server thi hành cách nhanh chóng o ASP.NET biên dịch dạng Common Language Runtime (CLR) nên cho phép người lập trình viết mã ASP.NET ngôn ngữ NET Framework 3.3 Giới thiệu số website tạo ASP.NET − http://tuyensinh.brtvc.edu.vn − http://t3h.vn Trang 10 o Fields: khai báo dạng nút phân trang − Bổ sung template riêng vào DataPager o o o o Chọn Edit Pager Fields DataPager Tasks DataPager control Chọn loại Template Pager Field click OK Chọn Edit Templates Bổ sung control vào thành phần PageTemplate Sắp xếp Bổ sung nút lệnh (Button, LinkButton, ImageButton) vào LayoutTemplate khai báo thuộc tính: − CommandName= “Sort” − CommandArgument= “Tên field muốn xếp” Ví dụ: tạo nút xếp dòng tiêu đề, sử dụng LinkButton thay cho Label Cập nhật liệu − Bật tùy chọn cho phép thêm, xóa, sửa liệu − Tạo nút tương ứng với chức thêm, xóa, sửa liệu − Xử lý kiện tương tự GridView CÁC BÀI TẬP MỞ RỘNG, NÂNG CAO VÀ GIẢI QUYẾT VẤN ĐỀ Bài 1: Trong website ThuongMaiDienTu, tạo webform hiển thị danh sách sản phẩm dạng tiled (1 dòng có cột) ListView Bài 2: Trong website ThuongMaiDienTu_QuanTri, tạo webform cho phép xóa, sửa sản phẩm ListView Trang 80 BÀI 18 HIỂN THỊ VÀ CẬP NHẬT DỮ LIỆU TRÊN DETAILSVIEW Mã bài: Giới thiệu: Bài cung cấp cho HSSV kiến thức kỹ tạo webform cho phép hiển thị cập nhật liệu DetailsView control Mục tiêu: − Biết công dụng DetailsView − Tạo trang web hiển thị cập nhật liệu DetailsView từ đơn giản đến phức tạp − Cẩn thận, an tồn Nội dung chính: Giới thiệu − Hiển thị liệu dạng cột − Thể trình duyệt dạng HTML table − Đặc điểm o Hỗ trợ phân trang o Cho phép cập nhật liệu trực tiếp o Cho phép kết hợp với GridView để tạo Master-Detail Liên kết liệu, định dạng liệu, phân trang, thiết kế cột tùy biến Tương tự GridView Cập nhật liệu − Thiết kế: sử dụng bột nút CommandField giống GridView − Xử lý: tương tự GridView, khác tên kiện số thuộc tính Trang 81 Tạo Master-Detail Bước 1: tạo EntityDataSource1 dùng làm nguồn liệu cho GridView Bước 2: tạo GridView dùng làm Master liên kết với nguồn EntityDataSource1, nên tạo thêm nút lệnh xử lý chọn dòng liệu Bước 3: Tạo EntityDataSource2 dùng làm nguồn liệu cho DetailsView, khai báo thuộc tính Where Bước 4: tạo DetailsView dùng làm Detail kết nguồn vào Trang 82 Khai báo thuộc tính Where cho EntityDataSource2 CÁC BÀI TẬP MỞ RỘNG, NÂNG CAO VÀ GIẢI QUYẾT VẤN ĐỀ Bài 1: Trong website ThuongMaiDienTu, tạo webform cho phép xem danh sách sản phẩm chi tết sản phẩm Master-Detail cách kết hợp GridView DetailsView Bài 2: Trong website ThuongMaiDienTu_QuanTri, tạo webform cho phép xem, xóa, sửa liệu sản phẩm Master-Detail cách kết hợp GridView DetailsView Trang 83 BÀI 19 QUẢN LÝ ỨNG DỤNG WEB Mã bài: Giới thiệu: Bài cung cấp cho HSSV kiến thức kỹ sử dụng đối tượng, tập tin liên quan để quản lý liệu trình thực thi ứng dụng web Mục tiêu: − Biết cơng dụng tập tin cấu hình ứng dụng − Biết công dụng đối tượng quản lý ứng dụng − Biết sử dụng kết hợp tập tin cấu hình đối tượng quản lý có hiệu ứng dụng web − Tạo chức thống kê truy cập quản lý giỏ hàng − Cẩn thận, an tồn Nội dung chính: Tập tin Global.asax Giới thiệu Tập tin tùy chọn chứa code để quản lý kiện cấp Application Session Được đặt thư mục gốc ứng dụng web ASP.NET Một ứng dụng web có tập tin Global.asax Tạo Global.asax Click chuột phải lên website, chọn Add Add New Item … Trang 84 Các kiện bên Global.asax Tâp tin Web.config − Khai báo thơng số mặc định cho website, có dạng XML − Chứa thơng tin cấu hình riêng website − Trong website thư mục có tập tin Web.config riêng − Cấu trúc ban đầu sau tạo website − Đặt thông tin tùy chọn riêng cho website − Truy xuất thông tin o Sử dụng NameSpace: System.Configuration Trang 85 Đối tượng Request − Nhận giá trị từ client gửi cho web server − Thuộc tính QueryString cho phép nhận giá trị truyền theo chuỗi tham số = Request.QueryString[“Tên tham số”] Đối tượng Response − Giao tiếp với client (gửi kết đến client) − Quản lý điều phối thơng tin từ server đến trình duyệt người dùng − Phương thức o Write: in chuỗi trang web, khơng thể quy định vị trí hiển thị o Redirect: gửi thơng điệp u cầu trình duyệt truy cập đến địa khác Đối tượng Session − Lưu trữ thông tin phiên làm việc cụ thể − Được tạo người dùng truy cập đến website − Thuộc tính Timeout(phút): thời gian trì Session, người dùng khơng tương tác với website (mặc định 20 phút) − Phương thức Abandon: hủy Session giải phóng tài nguyên cho web server − Tạo biến Session: Session[“tên biến”] = ; − Đọc giá trị Session: = Session[]; Đối tượng Application − Đối tượng toàn cục, quản lý toàn website − Thông tin lưu trữ đối tượng Application hiểu tất trang aspx suốt thời gian sống website − Chỉ bị đóng/hủy tắt web server − Tạo biến Application Application.Lock(); Application[“tên biến”]=; Application.Unlock(); − Đọc giá trị = Application[]; Trang 86 Đối tượng Server − Cung cấp thông tin web server cho ứng dụng − Phương thức o Transfer(“URL”): ngừng thi hành trang hành, gửi yêu cầu đến trang khác o MapPath(): trả đường dẫn vật lý tương ứng với URL MapPath(“”): đường dẫn thư mục trang MapPath(“\”): đường dẫn đến thư mục root IIS (C:\Inetpub\wwwroot) Đối tượng Cookies − Lưu trữ thông tin người dùng client − Thêm Cookies: Response.Cookies.Add(); − Đọc giá trị Cookies: = Request.Cookies[“tên cookie”].Value; Ví dụ Xuat_Cook.Text = cookTen.Value; CÁC BÀI TẬP MỞ RỘNG, NÂNG CAO VÀ GIẢI QUYẾT VẤN ĐỀ Bài 1: Tạo webform Login kiểm tra đăng nhập sử dụng trang ThuongMaiDienTu_QuanTri Bài 2: Tạo chức giỏ hàng người sử dụng website ThuongMaiDienTu Bài 3: Tạo chức thống kê truy cập đơn giản website ThuongMaiDienTu Trang 87 BÀI 20 HOÀN CHỈNH ỨNG DỤNG WEB VỚI JQUERY PLUGIN Mã bài: Giới thiệu: Bài cung cấp cho HSSV kiến thức kỹ sử dụng jQuery để trang trí tạo hiệu ứng tương tác trang web trình duyệt người dùng Mục tiêu: − Biết cơng dụng jQuery plugin − Cài đặt jQuery plugin cho ứng dụng − Tạo trang web có giao diện tương tác sinh động − Tạo nút FanPage chức Comment Facebook trang web − An tồn, cẩn thận Nội dung chính: Cài đặt jQuery plugin Tải thư viện jquery jquery-ui jquery.com lưu vào thư mục Scripts website Đóng/mở nội dung không gian giới hạn $(function() { $( "#accordion" ).accordion(); }); Section 1Nội dung Section 1
Section 2Nội dung Section 2
Tạo hộp nhập tự động gợi ý nội dung Trang 88 $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Java", "JavaScript" ]; $( "#tags" ).autocomplete({ source: availableTags }); }); Tags: Tạo khả kéo/thả #draggable { width: 150px; height: 150px; 0.5em; } $(function() { $( "#draggable" ).draggable(); });Drag me around
padding: Trang 89 Tạo khả kéo/thả để chọn #draggable { width: 100px; height: 100px; 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable { width: 150px; height: 150px; 0.5em; float: left; margin: 10px; } $(function() { $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ drop: function( event, ui ) { $( this ) addClass( "ui-state-highlight" ) find( "p" ) html( "Dropped!" ); } }); });Drag me to my target
Drop here
padding: padding: Tạo giao diện Tabs Trang 90 $(function() { $( "#tabs" ).tabs(); });- Nunc tincidunt
- Proin dolor
- Aenean lacinia
Nội dung tab1
Nội dung tab2
Nội dung tab3
Tạo Model Popup $(function() { $( "#dialog" ).dialog(); });Nội dung hộp thoại Popup
Trang 91 Tạo Datepicker $(function() { $( "#datepicker" ).datepicker(); });Date:
Tạo nút FanPage − Đăng nhập Facebook − Tạo Fan Page − Vào https://developers.facebook.com/docs/plugins/page-plugin − Khai báo tùy chọn cho Fan Page − Click chuột lên − Sao chép đặt đoạn code sau sau thẻ mở − Đặt đoạn code sau vị trí muốn hiển thị thơng tin FanPage Tạo chức Comment − Tạo Application Facebook http://developers.facebook.com/setup/ − Ghi lại App ID App Secret sau click − Thực bước để nhận đoạn code XFBML − Đặt đoạn code XFBML vào vị trí cần hiển thị nội dung Comment facebook Trang 92 CÁC BÀI TẬP MỞ RỘNG, NÂNG CAO VÀ GIẢI QUYẾT VẤN ĐỀ Bài 1: Tạo nút FanPage cho website ThuongMaiDienTu Bài 2: Tạo chức Comment cho sản phẩm, viết (khi xem nội dung chi tiết) Trang 93 TÀI LIỆU THAM KHẢO [1] Lập trình viên cơng nghệ NET – Module 3, Trung tâm Tin học trường Đại học Khoa học Tự nhiện Tp Hồ Chí Minh [2] http://w3schools.com [3] http://jquery.com [4] http://asp.net [5] https://facebook.com Trang 94 ... Trang LỜI GIỚI THIỆU Giáo trình Lập trình web (Web Form ASP.NET)” biên soạn dành cho học sinh trung cấp sinh viên cao đẳng nghề Công nghệ Thông tin (Ứng dụng phần mềm) Lập trình máy tính với mục... ý kiến đóng góp trình xây dựng giáo trình Bà Rịa – Vũng Tàu, ngày …… tháng …… năm 2 015 Tham gia biên soạn Phan Hữu Phước – Chủ biên Trang MỤC LỤC Trang MƠ ĐUN: Lập trình Web (Web Form ASP.NET)... dung trang web chao.html ASP.NET Chào mừng bạn đến với Lập trình Web Form ASP.NET Trang Tổng quan lập trình web 2 .1 Web tĩnh