CMP223 lap trinh web bai giang

MỤC LỤC LÀM QUEN VỚI ỨNG DỤNG WEBSITE ASP NET MVC .2 1.1 Cơ MVC yêu cầu cần thiết để viết Web Application MVC 1.1.1 Yêu cầu 1.1.2 Các bước cài đặt MVC5 .2 VIẾT TRANG WEB QUẢN LÝ SÁCH (BOOK) VỚI ASP NET MVC THỰC HÀNH THEO DỰ ÁN WEBSITE BIGSCHOOL 22 3.1 Mục tiêu thực hành 22 3.2 Công nghệ sử dụng 22 3.3 Mô tả yêu cầu 23 3.4 Phần mềm 23 3.5 Phân tích yêu cầu ứng dụng BigSchool 23 3.5.1 Xác định usecase dự án 23 3.5.2 Phân tích use case 24 3.5.3 Thứ tự use-case thực 25 3.6 Xây dựng ứng dụng ASP NET MVC 25 3.6.1 Tạo sở liệu theo mơ hình EF Code First 25 3.6.2 Use-case: Thêm khóa học 30 3.6.3 Ghi đè CSS mặc định Bootstrap 46 3.6.4 Thêm thuộc tính Asp.Net Identity Users 49 3.6.5 Hiển thị danh sách khóa diễn trang chủ 50 3.6.6 up) Bổ sung thuộc tính Name vào hình đăng ký, cho phép người dùng nhập tên (Form Sign 51 3.6.7 Chỉnh sửa giao diện trang chủ: danh sách khóa học diễn 54 3.6.8 Use-case: Đăng ký tham dự khóa học 56 3.6.9 Use-case theo dõi Giảng viên 64 3.6.10 Xem danh sách khóa học đăng ký tham dự 70 3.6.11 Use-case Quản lý Khóa học (Xóa, cập nhật) 74 3.6.12 Use-case thông báo (notification) 87 3.6.13 Tách file javascript ứng dụng 93 ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang 1 LÀM QUEN VỚI ỨNG DỤNG WEBSITE ASP NET MVC 1.1 Cơ MVC yêu cầu cần thiết để viết Web Application MVC 1.1.1 Yêu cầu MVC yêu cầu Net 4.5 trở lên chạy tảng hệ điều hành - Windows Vista Sp2 - Windows - Windows - Windows 10 1.1.2 Các bước cài đặt MVC5 Mặc định cài đặt Visual Studio 2013 Visual Studio 2015 thành phần MVC bao gồm Trong trường hợp bạn cài Visual Studio 2012 mà muốn bổ sung MVC5 vào địa website http://www.microsoft.com/en-us/download/41532 tải gói nâng cấp cài đặt theo hướng dẫn Chú ý: Tất hình ảnh LAB thực Visual Studio 2013 & Visual Studio 2015  Bước 1: Tạo ứng dụng ASP.NET MVC Bạn tạo ứng dụng web ASP MVC hai phiên Visual Studio 2013, 2015 Visual Studio 2013, 2015 Express Để tạo ứng dụng MVC - Chọn File  New Project ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang Trong phần mẫu Teamplate cài đặt, chọn Visual C#  Web Template Sau tạo Web Application MVC5, cửa sổ lên chọn MVC ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang Sau chọn xong bước trên, bạn có ứng dụng mẫu MVC Application với thành phần mở rộng thêm vào sẵn, cấu trúc hình ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang Cấu trúc MVC Web Application Thư mục Mô tả /Controllers Thư mục chứa lớp xử lý gọi Controller /Models Thư mục chứa lớp đối tượng Model /Views Thư mục đặt mẫu giao diện View /Scripts Thư mục chứa thư viện javascript tích hợp vào sẵn MVC nơi bạn tổ chức đặt thư viện Javascript mà tự phát triển /fonts Chứa mẫu font thư viện Bootstrap /Contents Đặt CSS, hình ảnh file javascript /App_Data Chứa database local /App_Start Các lớp cấu hình ứng dụng Routing, Bundling (hỗ trợ ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang nén CSS, javascript để giảm kích thước) Nhấn chuột phải lên project chọn View/ View in Browser để chạy website Trang mặc định chạy Views/Home/Index.cshtm, cấu hình quy định trang chạy ứng dụng cấu hình lớp RouteConfig ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang Cấu trúc xử lý để chạy trang web MVC mặc định : http://Localhost:Port:/{Controller}/{Action}/{Id} ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang VIẾT TRANG WEB QUẢN LÝ SÁCH (BOOK) VỚI ASP NET MVC Tạo Model Book File Hình ảnh bìa sách (Sinh viên tự lấy số hình ảnh đưa vào thư mục hình để demo) ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang Đặt tên BooksController.cs ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang 10 - Mở Package manager console o Add-migration AddIsCanceledColumnToCourse o Update-database - Tạo File Controllers/Api/CoursesController.cs (Web Api Controller) *Sử dụng bootstrap modals ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang 81 Download thư viện Bootbox.js http://bootboxjs.com/, copy file thư viện bootbox js vào thư mục Scripts - File App_Start/BundleConfig.cs - File Views/Courses/Mine.cshtml ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang 82 ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang 83 - Chạy website kiểm tra kết Bài tập: Chỉ hiển thị khóa học chưa hủy hình danh sách khóa học (trang chủ trang khóa học tơi) * Sử dụng bootstrap label hiển thị cảnh báo khóa học bị hủy hình theo dõi khóa học - Chỉnh sửa Database ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang 84 - Kết * Di chuyển API vào thư mục API (lưu ý: sử dụng Reshaper dùng tổ hợp phím ctrl + shift + r) ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang 85 ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang 86 3.6.12 Use-case thông báo (notification) Thông báo người dùng thay đổi thơng tin khóa học bao gồm: Thêm, xóa, sửa khóa học - Models/NotificationType.cs Models/Notification.cs Models/UserNotification.cs ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang 87 - Cập nhật Database Add-migration “AddNotification” Update Database - Models/ApplicationDbContext.cs ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang 88 Add-migration “AddNotification” -force Update Database - * Hủy (cancel) khóa học (course) gửi thơng báo cho thành viên đăng ký tham dự khóa học Controllers/Api/CoursesController.cs ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang 89 ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang 90 ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang 91 ĐÁP ÁN BÀI TẬP - File Views/Home/Index.cshtml Ghi Chú: Thực tương tự cho chức theo dõi (follow) ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang 92 - File Controllers/AttendancesController.cs 3.6.13 Tách file javascript ứng dụng - File Views/Home/Index.cshtml ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang 93 - Tạo thư mục Scripts/app  Tạo file Script/app/coursesController.js - File App_start/BundleConfig.cs ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang 94 - File Views/Shared/ Layout.cshtml Bài tập: Hoàn thiện chức theo dõi, bỏ theo dõi tách code javascript cho chức ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang 95 ...1 LÀM QUEN VỚI ỨNG DỤNG WEBSITE ASP NET MVC 1.1 Cơ MVC yêu cầu cần thiết để viết Web Application MVC 1.1.1 Yêu cầu MVC yêu cầu Net 4.5 trở lên chạy... Đình Ánh (nd.anh@hutech.edu.vn) Trang Trong phần mẫu Teamplate cài đặt, chọn Visual C#  Web Template Sau tạo Web Application MVC5, cửa sổ lên chọn MVC ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn)... trang web MVC mặc định : http://Localhost:Port:/{Controller}/{Action}/{Id} ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang ThS Nguyễn Đình Ánh (nd.anh@hutech.edu.vn) Trang VIẾT TRANG WEB QUẢN