Đang tải... (xem toàn văn)
PHẦN MỀM PHỤC VỤ Các bài tập thực hành trong học phần này được xây dựng thực hành với ASP.Net Web Application (.NET Framework) + C + Mô hình MVC + Entity Framework Visual Studio phiên bản 2022 , Sql server 2019. Địa chỉ để tải phần mềm + Link cài đặt SQL Server 2019 Express: https:www.microsoft.comenUSdownloaddetails.aspx?id=101064 + Cài đặt Visual Studio 2022 Community: https:visualstudio.microsoft.comdownloads 3. TÀI LIỆU THAM KHẢO Internet: https:learn.microsoft.comenusaspnetmvc https:www.tutorialspoint.comasp.net_mvcasp.net_mvc_getting_started.htm?fbcl
TRƯỜNG ĐẠI HỌC HỒNG ĐỨC KHOA CÔNG NGHỆ THÔNG TIN VÀ TRÙN THƠNG BÀI THỰC HÀNH HỌC PHẦN: LẬP TRÌNH WEB SỐ TÍN CHỈ: DÙNG CHO: SINH VIÊN NGÀNH CNTT THANH HÓA, 02/2023 HƯỚNG DẪN CHUNG CHÍNH SÁCH CỦA MƠN HỌC - Sinh viên "bắt ḅc" in thực hành mang theo buổi thực hành Sinh viên phải làm thực hành đầy đủ buổi thực hành, khuyến khích sinh viên mang máy tính cá nhân để thực hành Sinh viên khơng có máy tính cá nhân thực hành máy tính nhà trường yêu cầu cuối buổi thực hành cần lưu lại code, CSDL buổi thực hành ngày hôm để phục vụ buổi thực hành kiểm tra Sinh viên sử dụng GIT để quản lý code nén file lưu giữ lên Google drive, copy vào USB - Sinh viên vắng (một) buổi thực hành sẽ bị đánh vắng tương đương 05 (năm) tiết học - Sinh viên mang thêm giảng lý thuyết, tài liệu tham khảo học phần - Tổng số buổi thực hành học phần 06 buổi, tương đương 30 tiết PHẦN MỀM PHỤC VỤ - Các tập thực hành học phần được xây dựng thực hành với ASP.Net Web Application (.NET Framework) + C# + Mơ hình MVC + Entity Framework - Visual Studio phiên 2022 , Sql server 2019 - Địa chỉ để tải phần mềm + Link cài đặt SQL Server 2019 Express: https://www.microsoft.com/en-US/download/details.aspx?id=101064 + Cài đặt Visual Studio 2022 Community: https://visualstudio.microsoft.com/downloads/ TÀI LIỆU THAM KHẢO - Internet: https://learn.microsoft.com/en-us/aspnet/mvc/ https://www.tutorialspoint.com/asp.net_mvc/asp.net_mvc_getting_started.htm?fbcl DỰ ÁN XÂY DỰNG - Trong buổi thực hành (30 tiết), sinh viên sẽ thực hành xây dựng website quản lý bán hàng MỤC LỤC HƯỚNG DẪN CHUNG 1 CHÍNH SÁCH CỦA MÔN HỌC PHẦN MỀM PHỤC VỤ TÀI LIỆU THAM KHẢO .1 DỰ ÁN XÂY DỰNG HƯỚNG DẪN THỰC HÀNH BUỔI SỐ Hướng dẫn thực hành: Xây dựng ứng dụng Asp.net MVC – CSDL SQL Server 1.1 Phân tích hệ thống Website bán hàng xây dựng sở liệu 1.2 Tạo ứng dụng Asp.net MVC .8 1.3 Kết nối ứng dụng Asp.net MVC với CSDL sử dụng Entity Framework .18 1.4 Xây dựng trang quản lý liệu 24 HƯỚNG DẪN THỰC HÀNH BUỔI SỐ 34 Hướng dẫn thực hành: Xây dựng chức nâng cao cho trang quản trị 34 2.1 Hoàn thiện menu quản lý liệu .34 2.2 Xây dựng chức tìm kiếm .39 2.2 Xây dựng kết hợp tìm kiếm + phân trang 41 HƯỚNG DẪN THỰC HÀNH BUỔI SỐ 47 Hướng dẫn thực hành: Xây dựng chức nâng cao cho trang quản trị (tiếp) 47 3.1 Validate form nhập liệu .47 3.2 Tích hợp Ckeditor Ckfinder vào dự án 49 3.3 Thực thêm sản phẩm có kèm hình ảnh sản phẩm mô tả 53 HƯỚNG DẪN THỰC HÀNH BUỔI SỐ 60 Hướng dẫn thực hành: Hoàn thiện trang quản trị 60 4.1 Xây dựng trang đăng nhập cho website quản trị sử dụng session 60 4.2 Xây dựng chức đăng xuất tài khoản 64 4.3 Mã hoá mật lưu vào database 64 4.4 Hoàn thiện website quản lý 68 HƯỚNG DẪN THỰC HÀNH BUỔI SỐ 69 Xây dựng trang dành cho người dùng 69 5.1 Xây dựng trang dành cho người dùng 69 5.2 Sử dụng PartialView để hiển thị sản phẩm 71 5.3 Xây dựng trang chi tiết sản phẩm 77 HƯỚNG DẪN THỰC HÀNH BUỔI SỐ 80 Xây dựng chức giỏ hàng .80 6.1 Xây dựng class giỏ hàng, phương thức xử lý giỏ hàng 80 6.2 Xây dựng trang giỏ hàng partial, giỏ hàng .84 6.3 Xây dựng chức chỉnh sửa giỏ hàng đặt hàng 88 HƯỚNG DẪN THỰC HÀNH BUỔI SỐ I Mục tiêu - Nắm được hệ thống website quản lý bán hàng - Xây dựng được sở liệu website quản lý bán hàng - Biết cách tạo Template ASP.NET MVC Project; cấu trúc một ASP.NET MVC Project chạy ứng dụng môi trường Localhost - Biết cách kết nối CSDL với project thông qua Entity Framework - Xây dựng nắm được phương thức Index, Create, Details, Edit Delete thao tác với liệu II Nợi dung - Phân tích hệ thống, - Tạo sở liệu sau phân tích - Tạo project, phân chia quản lý project - Kết nối CSDL với project - Xây dựng trang quản trị website bán hàng: + Quản lý Danh mục sản phẩm, Quản lý Sản phẩm , Quản lý phân quyền, Quản lý người dùng (Thêm, xóa, sửa xem chi tiết liệu) Hướng dẫn thực hành: Xây dựng ứng dụng Asp.net MVC – CSDL SQL Server 1.1 Phân tích hệ thống Website bán hàng xây dựng sở liệu - CSDL mẫu cho dự án website bán hàng, gồm bảng: + NguoiDung: Bảng lưu trữ thông tin về người dùng hệ thống + PhanQuyen: Bảng lưu trữ thông tin về quyền người dùng hệ thống + DanhMucSanPham: Bảng lưu trữ thông tin về danh mục sản phẩm hệ thống + SanPham: Bảng lưu trữ thông tin về sản phẩm hệ thống + KhachHang: Bảng lưu trữ thông tin về khách hàng tham gia mua hàng hệ thống + DonHang: Bảng lưu trữ thông tin về đơn hàng khách hàng + ChiTietDonHang: Bảng lưu trữ thông tin chi tiết đơn hàng đơn hàng đơn hàng gồm nhiều chi tiết đơn hàng - Diagram: - Mô tả chi tiết thiết kế bảng: a PhanQuyen Tên cột Kiểu liệu MaQuyen INT TenQuyen NVARCHAR(50) MoTa NVARCHAR(200) b NguoiDung Tên cột MaNguoiDung HoTen DiaChi Email SoDienThoai TenDangNhap MatKhau AnhDaiDien MaQuyen Kiểu liệu INT NVARCHAR(50) NVARCHAR(100) NVARCHAR(50) NCHAR(10) NVARCHAR(50) NVARCHAR(50) NVARCHAR(50) INT Mô tả IDENTITY(1,1), PRIMARY KEY NOT NULL NULL Mô tả IDENTITY(1,1), PRIMARY KEY NOT NULL NULL NOT NULL NOT NULL NOT NULL NOT NULL NULL FOREIGN KEY REFERENCES PhanQuyen(MaQuyen) c DanhMucSanPham Tên cột MaDanhMuc TenDanhMuc MoTa Kiểu liệu INT NVARCHAR(50) NVARCHAR(200) Mô tả IDENTITY(1,1), PRIMARY KEY NOT NULL NULL d SanPham Tên cột MaSanPham TenSP GiaTien MoTa LaSanPhamMoi HinhAnh SoLuong MaDanhMuc Kiểu liệu INT NVARCHAR(50) DECIMAL(18, 0) NVARCHAR(500) BIT NVARCHAR(50) INT INT Mô tả IDENTITY(1,1), PRIMARY KEY NOT NULL NOT NULL NOT NULL DEFAULT NULL NOT NULL FOREIGN KEY REFERENCES DanhMucSanPham(MaDanhMuc) e DonHang Tên cột MaDonHang NgayDatHang TongTien TrangThai DiaChiNhanHang PhuongThucThanhToan MaKhachHang Kiểu liệu INT DATETIME DECIMAL(18, 0) NVARCHAR(50) NVARCHAR(100) NVARCHAR(50) INT Mô tả IDENTITY(1,1), PRIMARY KEY NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL FOREIGN KEY REFERENCES KhachHang(MaKhachHang) Kiểu liệu INT Mô tả FOREIGN KEY REFERENCES DonHang(MaDonHang) INT FOREIGN KEY REFERENCES SanPham(MaSanPham) NOT NULL NOT NULL NOT NULL f ChiTietDonHang Tên cột MaDonHang MaSanPham INT SoLuong INT GiaBan DECIMAL(18, 0) ThanhTien DECIMAL(18, 0) PRIMARY KEY(MaDonHang, MaSanPham) g KhachHang Tên cột MaKhachHang HoTen DiaChi Email SoDienThoai TenDangNhap MatKhau Kiểu liệu INT NVARCHAR(50) NVARCHAR(100) NVARCHAR(50) NCHAR(10) NVARCHAR(50) NVARCHAR(50) Mô tả IDENTITY(1,1), PRIMARY KEY NOT NULL NULL NOT NULL NOT NULL NOT NULL NOT NULL - Tiến hành tạo CSDL gồm bảng trên, CSDL Lưu thư mục HTenSinhVien_QLBanHangMVC\Database với tên HTenSinhVien_QLBanHangMVC (ví dụ NVCuong_QLBanHangMVC) B1 Tạo sở liệu (database) B2 Thiết kế bảng (table) - Tạo bảng (new table) - Khai báo cột (Column) - Chọn kiểu liệu (Data Type) tương ứng cho cột o Char(), Nvarchar(), bigint, int, varchar(), datetime, bit, float,… - Thiết lập khóa (primary key), khóa ngoại, check… - Thiết lập tḥc tính tự đợng tăng cho khố bảng cần thiết - Lưu bảng B3 Thiết lập ràng buộc (diagram) B4 Nhập liệu mẫu - Sau thực hiện thiết kế Database xong, thực hiện nhập liệu mẫu cho bảng: + PhanQuyen: MaQuyen Admin TenQuyen MoTa NULL NULL Manager + DanhMucSanPham MaDanhMuc TenDanhMuc Xiaomi Iphone Nokia Samsung LG Oppo Sony MoTa NULL NULL NULL NULL NULL NULL NULL 1.2 Tạo ứng dụng Asp.net MVC Tạo project lưu trữ thư mục HTenSinhVien_QLBanHangMVC (ví dụ NVCuong_QLBanHangMVC) máy tính: - Mở phần mềm Visual Studio 2022, chọn Create a new project: - Chọn ASP.NET Web Application (.NET Framework) - Đặt tên theo cú pháp HTenSinhVien_QLBanHangMVC (ví dụ NVCuong_QLBanHangMVC), sau chọn Create - Chọn MVC sau Create: - Tương tự: Add View cho SanPhamTrangChuPartial: 74 - Chỉnh sửa View SanPhamTrangChuPartial.cshtml: Danh sách sản phẩm @foreach (var item in Model) { @item.TenSP Giá: @String.Format("{0:0,0}", @item.GiaTien) VND @using (Html.BeginForm("ThemGioHang", "GioHang", new { @iMaSanPham = item.MaSanPham, @strURL = Request.Url.ToString() })) { Mua hàng } } @Html.ActionLink("Xem tất ", "Index", "SanPham") - Chỉnh sửa: Views/Home/Index.cshtml @{ ViewBag.Title = "Home Page"; } ICT SHOPĐiện thoại, máy tính bảng, phụ kiện giá rẻ
Xem thêm »
@Html.Action("SanPhamMoiPartial", "Home") @Html.Action("SanPhamTrangChuPartial", "Home") - Build lại Solution - Chạy dự án: 75 - Trang chủ hiển thị: 76 5.3 Xây dựng trang chi tiết sản phẩm - Thêm SanPhamController: using QuanLyBanHang.Models; using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Web; using System.Web.Mvc; using PagedList; namespace QuanLyBanHang.Controllers { public class SanPhamController : Controller { QuanLyBanHangModel db = new QuanLyBanHangModel(); // GET: Admin/SanPham public ActionResult Index(int? page) { if (page == null) page = 1; var sanPhams = db.SanPhams.OrderBy(x => x.MaSanPham); int pageSize = 6; int pageNumber = (page ?? 1); return View(sanPhams.ToPagedList(pageNumber, pageSize)); } // GET: Admin/SanPham/ChiTietSanPham/5 public ActionResult ChiTietSanPham(int? id) { if (id == null) { return new HttpStatusCodeResult(HttpStatusCode.BadRequest); } SanPham sanPham = db.SanPhams.Find(id); if (sanPham == null) { return HttpNotFound(); } return View(sanPham); } } } 77 - Add View cho ChiTietSanPham ( View thông thường – Partialview).Mẫu: @model QuanLyBanHang.Models.SanPham @{ ViewBag.Title = "ChiTietSanPham"; Layout = "~/Views/Shared/_Layout.cshtml"; } Chi tiết sản phẩm @Html.DisplayNameFor(model => model.TenSP) @Html.DisplayFor(model => model.TenSP) @Html.DisplayNameFor(model => model.HinhAnh) @Html.DisplayNameFor(model => model.DanhMucSanPham.TenDanhMuc) @Html.DisplayFor(model => model.DanhMucSanPham.TenDanhMuc) @Html.DisplayNameFor(model => model.MoTa) @Html.Raw(@Model.MoTa) @Html.DisplayNameFor(model => model.SoLuong) @Html.DisplayFor(model => model.SoLuong) @Html.DisplayNameFor(model => model.GiaTien) @Html.DisplayFor(model => model.GiaTien) VND @using (Html.BeginForm("ThemGioHang", "GioHang", new { @iMaSanPham = Model.MaSanPham, @strURL = Request.Url.ToString() })) { Mua hàng } 78 - Build lại dự án khởi chạy dự án - Click vào hình ảnh sản phẩm: - Sinh viên code HTML CSS trang hiển thị danh sách sản phẩm, chi tiết sản phẩm theo thiết kế cá nhân 79 HƯỚNG DẪN THỰC HÀNH BUỔI SỐ I Mục tiêu - Xây dựng - Xây dựng - Xây dựng - Xây dựng II Nội dung - Xây dựng - Xây dựng - Xây dựng - Xây dựng được được được được class giỏ hàng, phương thức xử lý giỏ hàng trang giỏ hàng chức thêm sản phẩm vào giỏ hàng chức chỉnh sửa giỏ hàng, đặt hàng class giỏ hàng, phương thức xử lý giỏ hàng trang giỏ hàng chức thêm sản phẩm vào giỏ hàng chức chỉnh sửa giỏ hàng, đặt hàng Xây dựng chức giỏ hàng 6.1 Xây dựng class giỏ hàng, phương thức xử lý giỏ hàng - Tạo class GioHang.cs thư mục Models 80 - class GioHang.cs: using using using using System; System.Collections.Generic; System.Linq; System.Web; namespace QuanLyBanHang.Models { public class GioHang { QuanLyBanHangModel db = new QuanLyBanHangModel(); public int iMaSanPham { get; set; } public string sTenSP { get; set; } public string sHinhAnh { get; set; } public double dGiaTien { get; set; } public int iSoLuong { get; set; } public double ThanhTien { get { return iSoLuong * dGiaTien; } } //Hàm tạo cho giỏ hàng public GioHang(int MaSanPham) { iMaSanPham = MaSanPham; SanPham sp = db.SanPhams.Single(n => n.MaSanPham == iMaSanPham); sTenSP = sp.TenSP; sHinhAnh = sp.HinhAnh; dGiaTien = double.Parse(sp.GiaTien.ToString()); iSoLuong = 1; } } } - Thêm controller GioHangController.cs 81 - GioHangController.cs Xây dựng phương thức xử lý giỏ hàng theo code sau: - GioHangController.cs: using using using using using using QuanLyBanHang.Models; System; System.Collections.Generic; System.Linq; System.Web; System.Web.Mvc; namespace QuanLyBanHang.Controllers { public class GioHangController : Controller { QuanLyBanHangModel db = new QuanLyBanHangModel(); //Lấy giỏ hàng public List LayGioHang() { List lstGioHang = Session["GioHang"] as List; if (lstGioHang == null) { lstGioHang = new List(); Session["GioHang"] = lstGioHang; } return lstGioHang; } 82 //Thêm giỏ hàng public ActionResult ThemGioHang(int iMaSanPham, string strURL) { return RedirectToAction("GioHang"); } //Cập nhật giỏ hàng public ActionResult CapNhatGioHang(int iMaSanPham, FormCollection f) { return RedirectToAction("GioHang"); } //Xóa giỏ hàng public ActionResult XoaGioHang(int iMaSanPham) { return RedirectToAction("GioHang"); } //Xây dựng trang giỏ hàng public ActionResult GioHang() { if (Session["GioHang"] == null) { return RedirectToAction("Index", "Home"); } List lstGioHang = LayGioHang(); return View(lstGioHang); } //Tính tổng số lượng tổng tiền //Tính tổng số lượng private int TongSoLuong() { return 0; } //Tính tổng thành tiền private double TongTien() { return 0; } //tạo partial giỏ hàng public ActionResult GioHangPartial() { if (TongSoLuong() == 0) { return PartialView(); } ViewBag.TongSoLuong = TongSoLuong(); ViewBag.TongTien = TongTien(); return PartialView(); } //Xây dựng view cho người dùng chỉnh sửa giỏ hàng public ActionResult SuaGioHang() { return View(); } } } 83 6.2 Xây dựng trang giỏ hàng partial, giỏ hàng - Thêm PartialView: GioHangPartial: - GioHangPartial.cshtml giohang { color: white; } Giỏ hàng (@ViewBag.TongSoLuong) - Tại _layout.cshtml: Thêm đoạn code sau thẻ để sử dụng fontawesome: - Tại _layout.cshtml: Thêm hiển thị giỏ hàng header: 84 - Tiến hành build lại solution chạy website: - Code phương thức ThemGioHang //Thêm giỏ hàng public ActionResult ThemGioHang(int iMaSanPham, string strURL) { SanPham sp = db.SanPhams.SingleOrDefault(n => n.MaSanPham == iMaSanPham); if (sp == null) { Response.StatusCode = 404; return null; } //Lấy session giỏ hàng List lstGioHang = LayGioHang(); //Kiểm tra sản phẩm session[giohang] tồn tại? GioHang sanpham = lstGioHang.Find(n => n.iMaSanPham == iMaSanPham); if (sanpham == null) { sanpham = new GioHang(iMaSanPham); //Add sản phẩm thêm vào list lstGioHang.Add(sanpham); return Redirect(strURL); } else { sanpham.iSoLuong++; return Redirect(strURL); } } 85 //Tính tổng số lượng private int TongSoLuong() { int iTongSoLuong = 0; List lstGioHang = Session["GioHang"] as List; if (lstGioHang != null) { iTongSoLuong = lstGioHang.Sum(n => n.iSoLuong); } return iTongSoLuong; } - Tiến hành build lại solution chạy website: - Bấm mua hàng: Giỏ hàng hiển thị số lượng sản phẩm giỏ hàng: - Xây dựng View cho trang giỏ hàng: 86 @using QuanLyBanHang.Models; @model List @{ ViewBag.Title = "GioHang"; Layout = "~/Views/Shared/_Layout.cshtml"; } GIỎ HÀNG Mã SP Tên SP Hình ảnh Đơn giá Số lượng Thành tiền @foreach (var item in Model) { @item.iMaSanPham @item.sTenSP @String.Format("{0:0,0}", item.dGiaTien) VNĐ @item.iSoLuong @String.Format("{0:0,0}", item.ThanhTien) VNĐ } @Html.ActionLink("Chỉnh sửa giỏ hàng", "SuaGioHang") @using (Html.BeginForm("ThanhToanDonHang", "GioHang", new { @class = "" })) { } @*Css giỏ hàng*@ divGioHang { border: 2px solid #EEEEEE; margin-left: 10%; font-size: large } divGioHang td { padding: 10px; border: 2px solid #EEEEEE; text-align: center } divGioHang th { text-align: center } 87 - Build solution – Chạy website: - Tiến hành bấm mua hàng để thêm sản phẩm vào giỏ hàng Sau click vào giỏ hàng Hiển thị chi tiết giỏ hàng: 6.3 Xây dựng chức chỉnh sửa giỏ hàng đặt hàng - Sinh viên thực xây dựng chức Chỉnh sửa giỏ hàng Đặt hàng Phần nâng cao hướng tìm hiểu thêm cho sinh viên - Phần website quản trị: + Tìm hiểu thay _layout.cshtml mặc định một template Admin HTML, CSS miễn phí internet để có giao diện đẹp, tiết kiệm thời gian code + Tìm hiểu thêm về bảo mật cho ứng dụng Asp.net MVC + Xây dựng trang quản lý đơn hàng, xây dựng dashboard hiển thị thống kê đơn hàng, tiền hàng, số lượng khách hàng… - Phần website người dùng: + Tìm hiểu thay _layout.cshtml mặc định mợt template HTML, CSS miễn phí internet để có giao diện đẹp, tiết kiệm thời gian code + Xây dựng chức tìm kiếm, bợ lọc sản phẩm + Hoàn thành chức giỏ hàng, đơn hàng, trang toán cho người dùng + Xây dựng trang đăng ký, đăng nhập, đổi mật cho người dùng… -HẾT - 88