Lập trình ứng dụng web

BỘ GIÁO DỤC VÀ ĐÀO TẠO ĐẠI HỌC CÔNG NGHỆ TP.HCM LẬP TRÌNH ỨNG DỤNG WEB Biên Soạn: ThS Mai Ngọc Thu ThS Nguyễn Đình Ánh www.hutech.edu.vn LẬP TRÌNH ỨNG DỤNG WEB Ấn 2015 MỤC LỤC I MỤC LỤC MỤC LỤC I HƢỚNG DẪN IV BÀI 1: ASP.NET 1.1 TỔNG QUAN ASP.NET 1.1.1 Giới thiệu 1.1.2 ASP.NET tích hợp với Framework 1.1.3 Tính đa ngơn ngữ 1.1.4 Tính hướng đối tượng 1.1.5 Biên dịch ASP.NET 1.1.6 Dễ dàng triển khai cấu hình 1.2 TÍNH NĂNG MỚI TRONG ASP.NET 1.2.1 Các công cụ điều khiển 1.2.2 LINQ 1.2.3 Các Assembly 1.2.4 ASP.NET MVC (Model View Control) 1.3 TẠO TRANG WEB VỚI VISIUAL STUDIO 1.3.1 Tạo dự án 1.3.2 Ví dụ 1.4 CÁC SỰ KIỆN TRONG ASP.NET 1.4.1 Chu kỳ sống trang web ASP.NET (Page Life Cycle) 1.4.2 Một số kiện trang web 1.4.3 Sự kiện ứng dụng 10 TÓM TẮT 12 BÀI TẬP 13 BÀI 2: CÁC LỚP SỬ DỤNG TRONG ASP.NET 15 2.1 HTTP REQUEST 15 2.1.1 Giới thiệu 15 2.1.2 Các thuộc tính 16 2.2 HTTP RESPONSE 19 2.2.1 Giới thiệu 19 2.2.2 Các thuộc tính/phương thức 20 2.3 HTTP SERVER 20 2.4 SESSION VÀ COOKIE 21 2.4.1 Giới thiệu Cookie Session 21 2.4.2 Cookie 22 2.4.3 Session 23 TÓM TẮT 25 BÀI TẬP 26 II MỤC LỤC BÀI 3: TRUY CẬP DỮ LIỆU 28 3.1 TỔNG QUAN 28 3.2 TRUY CẬP DỮ LIỆU ADO.NET 30 3.3 TRUY CẬP DỮ LIỆU XML 31 3.4 SQLDATASOURCE 32 3.5 TRUY CẬP DỮ LIỆU LINQ 34 3.5.1 LINQ 35 3.5.2 Cách làm việc LINQ 35 3.5.3 Cú pháp LINQ 35 TÓM TẮT 39 BÀI TẬP 40 BÀI 4: LẬP TRÌNH GIAO DIỆN WEB VỚI JQUERY 41 4.1 JQUERY LÀ GÌ? 41 4.1.1 Giới thiệu 41 4.1.2 Sử dụng jQuery ASP.NET 42 4.2 LẬP TRÌNH VỚI JQUERY 43 4.2.1 Chạy mã trang sẵn sàng 43 4.2.2 Hàm $() - function $() 44 4.2.3 Một số API jQuery 44 TÓM TẮT 51 BÀI TẬP 51 BÀI 5: TỔNG QUAN VỀ ASP.NET MVC FRAMEWORK 52 5.1 TỔNG QUAN ASP.NET MVC 52 5.1.1 Mơ hình MVC .52 5.1.2 Đặc tính ASP.NET MVC 53 5.1.3 Khác biệt với Web Form 53 5.1.4 Lợi ích ứng dụng web dựa mơ hình MVC .54 5.2 XÂY DỰNG ỨNG DỤNG VỚI ASP.NET MVC 56 5.2.1 Tạo Project với ASP.NET MVC Web Application 56 5.3 ĐỊNH TUYẾN URL 58 5.3.1 Giới thiệu 58 5.3.2 Tìm hiểu định tuyến URL 59 TÓM TẮT 61 BÀI TẬP 62 BÀI 6: MODEL – VIEW CONTROLLER 63 6.1 TÌM HIỂU VỀ CONTROLLER 63 6.2 TÌM HIỂU VỀ VIEW 65 6.3 TÌM HIỂU VỀ MODEL 67 6.4 CẤU TRÚC VIEWS\SHARE\SITE.MASTER 70 TÓM TẮT 72 BÀI TẬP 72 MỤC LỤC III BÀI 7: CẬP NHẬT DỮ LIỆU VỚI MVC 73 7.1 THÊM MỚI DỮ LIỆU TRONG MVC 73 7.1.1 Thêm phương thức liệu với mơ hình dbml 73 7.1.2 Các hành động (action) điều khiển (controller) 74 7.2 SỬA ĐỔI DỮ LIỆU TRONG MVC 76 7.3 QUY TRÌNH KIỂM TRA TRONG ỨNG DỤNG MVC 81 7.3.1 Controller ứng dụng test 81 7.3.2 Kiểm thử kết trả từ controller 85 TÓM TẮT 87 BÀI TẬP 87 BÀI 8: THỰC HIỆN BẢO MẬT CHO ỨNG DỤNG ASP.NET MVC 88 8.1 AUTHENTICATION - XAC THƢC NGƢỜI DUNG 88 8.1.1 Tạo ngư i d ng mặc định với ứng dụng ASP.NET MVC 88 8.1.2 Quản l ngư i d ng với công cụ Website Administration 89 8.1.3 Roles - Ph n quyền nh m ngư i d ng 91 8.2 CẤU HÌNH VIỆC XÁC THƢC NGƢỜI DÙNG 93 TÓM TẮT 96 BÀI TẬP 97 LAP 98 TÀI LIỆU THAM KHẢO 204 IV HƢỚNG DẪN HƢỚNG DẪN MÔ TẢ MÔN HỌC Môn học trang bị kiến thức nhập môn lập trình web Nội dung bao gồm: - Asp.net web form - Http request POST/GET - Http response - Lập trình với Session/cookie - Lập trình sở liệu: ADO.NET, Linq - Asp.net MVC - Model – View – Controller - Bảo mật với Asp.net Membership NỘI DUNG MÔN HỌC  Bài Giới thiêu tổng quan ASP.NET  Bài Các lớp thư viện ASP.NET  Bài Truy câp liêu  Bài jQuery  Bài Tổng quan ASP.NET MVC Framework  Bài Model – View - Controller  Bài Chỉnh sửa liệu với MVC  Bài Bảo mật với ASP.NET Membership KIẾN THỨC TIỀN ĐỀ Môn Lập trình web cần kiến thức tiền đề môn học sau - Thiết kế web HƢỚNG DẪN - Lập trình hướng đối tượng - Lập trình C# Windows V YÊU CẦU MÔN HỌC Người học vận dụng kiến thức tảng lập trình web để thiết kế cài đặt ứng dụng web, quản lý website, hệ quản trị nội dung, ứng dụng thương mại điện tử, dịch vụ web Kỹ lập trình, phân tích thiết kế ứng dụng thành thạo Người học cần học đầy đủ, đọc nội dung học trước đến lớp, làm tập nhà đảm bảo thời gian tự học nhà CÁCH TIẾP NHẬN NỘI DUNG MƠN HỌC Để học tốt mơn này, người học cần đọc trước nội dung chưa học lớp; tham gia đặn tích cực lớp; hiểu khái niệm, tính chất ví dụ lớp học Sau học xong, cần ôn lại học làm tập, câu trắc nghiệm Tìm đọc thêm tài liệu khác liên quan đến học làm thêm tập PHƢƠNG PHÁP ĐÁNH GIÁ MƠN HỌC Mơn học đánh giá gồm hai thành phần  Phần điểm trình chiếm 30%, hình thức nội dung đánh giá điểm trình giảng định cơng bố cho người học đầu khóa học  Phần điểm cuối khóa chiếm 70%, hình thức đồ án mơn học cuối khóa BÀI 1: ASP.NET BÀI 1: ASP.NET Học xong người học nắm nội dung sau: - Hiểu tổng quan công nghệ ASP.NET, Khái niệm ASP.NET - Biết tính ASP.NET 3.5 so với ASP.NET 2.0 - Biết cách tạo website Visual Studio 2008 1.1 TỔNG QUAN ASP.NET 1.1.1 Giới thiệu Trước hết, tên đầy đủ ASP.NET Active Server Pages NET (.NET NET framework) Nói đơn giản ASP.NET cơng nghệ có tính cách mạng dùng để phát triển ứng dụng mạng tương lai ASP.NET phương pháp tổ chức hay khung tổ chức (framework) để thiết lập ứng dụng mạnh cho mạng dựa CLR (Common Language Runtime) 1.1.2 ASP.NET tích hợp với Framework NET Framework chia thành tác vụ cho chức gồm lớp (class), cấu trúc (structures), giao diện (interfaces) lõi (core) thành phần chương trình Trước sử dụng thành phần ta phải hiểu chức năng, tổ chức Mỗi hàng ngàn tầng lớp nhóm theo trình tự logic, thứ bậc gọi namespace Mỗi namespace cung cấp tính 1.1.3 Tính đa ngơn ngữ Để xây dựng ứng dụng web không chọn ngơn ngữ mà chọn nhiều ngơn ngữ khác Điều quan trọng ngôn ngữ chọn mã BÀI 1: ASP.NET dịch mã IL Điều có nghĩa IL ngơn ngữ NET có CLR nhận biết IL 1.1.4 Tính hƣớng đối tƣợng ASP.NET ngơn ngữ lập trình hướng đối tượng sử dụng ngơn ngữ NET Nó cung cấp đối tượng nhỏ thực tầng làm việt nguyên lý HTTP HTML Mã nguồn không truy cập toàn đối tượng NET Framework khai thác tất quy ước môi trường OOP (Object Oriented Programming) Chúng ta có tạo lớp, giao diện, kế thừa lớp Chúng ta kiểm sốt đối tượng chương trình hiển thị liệu kiện đối tượng 1.1.5 Biên dịch ASP.NET Một ứng dụng ASP.NET luôn biên dịch, khơng chạy mã C# Visual Basic mà không biên dịch trước Một ứng dụng ASP.NET thực biên dịch thông qua giai đoạn: - Giai đoạn mã (code) ta viết (C#, Visual Basic ngôn ngữ NET khác) dịch Microsoft Intermediate Language (MSIL) Giai đoạn dịch dịch tự động trang wed yêu cầu Chúng ta thực dịch trước Các tập tin dịch thành mã IL (Intermediate Language Code) - Hình 1.1: Kiến trúc Net Framework Giai đoạn dịch trước trang Web thực thi Tại giai đoạn mã IL dịch thành mã máy (Native Machine Code) Giai đoạn gọi Just-In-Time (JIT) 190 LAP Tạo View chỉnh sửa layout cho trang Details nhƣ sau Sinh viên yêu cầu thực hành lại Lab sử dụng mơ hình CodeFirst để tạo CSDL LAP 191 Lab 9: Tạo trang thêm, xóa, sửa chƣơng sách (Chapter)  Mục tiêu - Thêm, xóa, sửa chương sách Chỉnh sửa lại Layout trang Thêm chương sách, điều chỉnh ChapterName, ShortContent, Dropdowlist BookId hình Liên kết Url để trình duyệt trỏ tới trang tạo chương sách: http://localhost:port/Chapter/CreateChapter Kết hiển thị trang thêm chương sách 192 LAP Xử lý nút tạo chương sách Create, sau lựa chọn thông tin sách lưu vào CSDL Viết hàm lưu sách ChapterController.cs LAP 193 Kết hình Tạo Trang chỉnh sửa Chương sách Bổ sung hàm EidtChapter vào ChapterController.cs để viết xử lý cho trang chỉnh sửa Chương sách 194 LAP Tạo View EditChapter, chỉnh sửa lại giao diện trang View/ Chapter/ EditChapter.cshtml sau @model VnExpress_NguyenDinhAnh.Chapter @{ ViewBag.Title = "EditChapter"; Layout = "~/Views/Shared/_Layout.cshtml"; } EditChapter @using (Html.BeginForm()) { @Html.AntiForgeryToken() Chapter @Html.ValidationSummary(true) @Html.HiddenFor(model => model.ChapterId) @Html.LabelFor(model => model.ChapterName, htmlAttributes: new { @class = "control-label col-md-2" }) @Html.TextBoxFor(model => model.ChapterName, new { @class = "formcontrol" }) @Html.ValidationMessageFor(model => model.ChapterName) @Html.LabelFor(model => model.ShortContent, htmlAttributes: new { @class = "control-label col-md-2" }) @Html.TextAreaFor(model => model.ShortContent, new { @style = "width:100%", cols = 100, rows = 14, @placeholder = "Ghi rõ nội dung chi tiết Tiếng Việt có dấu" }) @Html.ValidationMessageFor(model => model.ShortContent) @Html.LabelFor(model => model.BookId, "BookId", htmlAttributes: new { @class = "control-label col-md-2" }) LAP 195 @Html.DropDownList("BookId", (IEnumerable)ViewBag.PriorityID, new { @class = "form-control" }) @Html.ValidationMessageFor(model => model.BookId) } @Html.ActionLink("Back to List", "Index") 196 LAP Tiếp theo viết hàm xử lý cho nút lưu lại thông tin Chương sách sau hoàn tất chỉnh sửa LAP 197 Lab 10: Hƣớng dẫn tạo ứng dụng Giỏ hàng Shopping Cart ASP.NET MVC kỹ thuật xử lý Ajax quản lý Session Bài viết xin giới thiệu kỹ thuật xử lý Ajax dùng Session để quản lý ứng dụng giỏ hàng trang mua bán hàng hóa Phần viết nối series lab thực hành ASP.NET MVC Sau bạn có trang danh sách Book hình (hoặc trang danh sách sản phẩm bạn) Bƣớc 1: Thêm nút Add To Cart (Thêm sản phẩm vào giỏ hàng) dòng sản phẩm nút Your Orders (sản phẩm đặt mua) hình Code Thêm Nút giao diện sử dụng bootstrap lệnh xử lý Javascript Nút Add To Cart – Người dùng Click vào nút xử lý hàm javascript có tên AddToCart, truyền vào tham số mã sách dòng Hàm bạn viết Bước Nút Your Orders

198 LAP Your Orders @ViewBag.count

Bƣớc 2: Viết lớp hỗ trợ xử lý lưu trữ tạm sản phẩm CartItem Tạo model đặt tên CartItem đặt thư mục Models project với code sau: public class CartItem { public Book productOrder { get; set; } public int Quality { get; set; } } Bƣớc 3: Thêm xử lý Ajax đưa sản phẩm vào giỏ hàng, tạo thẻ đầu trang mua hàng thêm hàm xử lý javascript sau: function AddToCart(BookId) { $.ajax({ type: 'POST', url: '/Book/AddToCart', data: { id: BookId }, success: function (data) { $("#Cart_Amount").html(data.ItemAmount); } }); } Bƣớc 4: Viết hàm xử lý JsonResult BookController để Ajax gọi theo cấu trúc url /Book/AddToCart' sau: Mở BookController thêm vào hàm xử lý sau: [HttpPost] public JsonResult AddToCart(int id) { List listCartItem; //Process Add To Cart if (Session["ShoppingCart"] == null) LAP 199 { //Create New Shopping Cart Session listCartItem = new List(); listCartItem.Add(new CartItem { Quality = 1, productOrder db.Books.Find(id) }); Session["ShoppingCart"] = listCartItem; } else { bool flag = false; listCartItem = (List)Session["ShoppingCart"]; foreach (CartItem item in listCartItem) { if (item.productOrder.BookId == id) { item.Quality++; flag = true; break; } } if (!flag) listCartItem.Add(new CartItem { Quality = 1, productOrder db.Books.Find(id) }); Session["ShoppingCart"] = listCartItem; } //Count item in shopping cart int cartcount = 0; foreach (CartItem item in listCartItem) { cartcount += item.Quality; } return Json(new { ItemAmount = cartcount }); } = = Tới bước bạn kết nhấn vào nút Add To Cart sách sách lưu vào giỏ hàng Tiếp tới lúc trang web request tới user (ở lúc bạn load trang /Book/getListBook) gán giá trị đếm số lượng sản phẩm có giỏ hàng Tại Bước 3: Bạn Edit phần javascript thêm chuỗi xử lý để gán số lượng sản phẩm giỏ hàng xuống Your Orders sau: 200 LAP @{ @if(Session["ShoppingCart"]!=null) { int cartcount = 0; List ls = (List)Session["ShoppingCart"]; foreach(CartItem item in ls) { cartcount += item.Quality; } ViewBag.count = cartcount; } } function AddToCart(BookId) { $.ajax({ type: 'POST', url: '/Book/AddToCart', data: { id: BookId }, success: function (data) { $("#Cart_Amount").html(data.ItemAmount); } }); } Chú ý: Bạn phải Using để sử dụng đối tƣợng CartItem Tới bạn hoàn thành bước thêm sản phẩm vào giỏ hàng, bước bạn xây dựng trang hiển thị danh sách giỏ hàng mua hàng Bạn xem nút Your Orders bước có dòng code sau:

Your Orders @ViewBag.count

Tại nút có xử lý thêm kiện lúc nhấn vào trang ShoppingCart (onlick = window.open(„Book/ShoppingCart‟,‟_self) Vậy bạn viết hàm trả View ShoppingCart BookController sau LAP 201 public ActionResult ShoppingCart() { return View(); } Lúc bạn nhấn chuột phải vào hàm ShoppingCart tạo View, sửa code trang View ShoppingCart sau: @using VnExpress_NguyenDinhAnh.Models; @{ ViewBag.Title = "ShoppingCart"; Layout = "~/Views/Shared/_Layout.cshtml"; } Your Shopping Cart Title Author Name Price Year Cover Page Quality Total @{ 202 LAP double total = 0; List listCart = (List)Session["ShoppingCart"]; } @if (listCart != null) { foreach (var item in (List)Session["ShoppingCart"]) { @item.productOrder.Title @item.productOrder.AuthorName @item.productOrder.Price @item.productOrder.Year   @{ double value = (double)item.productOrder.Price * item.Quality; total += value; } @value } } LAP 203 Total: @total

 

Xong ứng dụng tạo giỏ hàng kỹ thuật xử lý Ajax dùng session để lưu trữ 204 TÀI LIỆU THAM KHẢO TÀI LIỆU THAM KHẢO Visual Web Developer, URL: http://msdn.microsoft.com/enus/library/ms178093.aspx Microsoft ASP.NET, URL: http: //www asp.net/ Bill Evjen, Scott Hanselman, Devin Rader (2008) Professional ASP.NET 3.5 In C# And VB jQuery, URL: http://docs.iquery.com ScottGu's Blog, URL: http://weblogs.asp.net/scottgu/archive/2008/12/02/dec- 2nd-links-asp-net-asp-net-dynamic-data-asp-net-aiax-asp-net-mvc-visual-studiosilverlight-wpf.aspx MSDN Online offline Microsoft Mã nguồn tham khảo http://www.wrox.com Các chủ đề lập trình http://www.codeguru.com, http://www.codeproject.com hay http://www.java2s.com ... Mơn Lập trình web cần kiến thức tiền đề môn học sau - Thiết kế web HƢỚNG DẪN - Lập trình hướng đối tượng - Lập trình C# Windows V U CẦU MƠN HỌC Người học vận dụng kiến thức tảng lập trình web. .. trình web để thiết kế cài đặt ứng dụng web, quản lý website, hệ quản trị nội dung, ứng dụng thương mại điện tử, dịch vụ web Kỹ lập trình, phân tích thiết kế ứng dụng thành thạo Người học cần... học trang bị kiến thức nhập mơn lập trình web Nội dung bao gồm: - Asp.net web form - Http request POST/GET - Http response - Lập trình với Session/cookie - Lập trình sở liệu: ADO.NET, Linq - Asp.net