ĐỒ án môn học lập TRÌNH WEB xây DỰNG WEBSITE bán HÀNG ONLINE

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH KHOA CÔNG NGHỆ THÔNG TIN ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB Giảng viên hướng dẫn: NGUYỄN MAI HUY Sinh viên thực hiện: CHU DOÃN ĐỨC MSSV: 2000003917 Chuyên ngành: Khoa Học Dữ Liệu Mơn học: Lập trình Web Khóa: 2021 Tp.HCM,15 tháng 12 năm 2021 MỤC LỤC Đường dẫn trang web đưa lên hosting: 10 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 11 11 Model-View-Controller Design Pattern, ASP.NET MVC: 1.1- MVC Design Pattern: 11 1.2- ASP.NET MVC: 12 Model–View–Controller ASP.NET MVC Framework: 14 2.1- Controller chế ánh xạ dựa theo URL: 14 2.2- View cú pháp Razor cho mục tiêu xây dựng giao diện: 14 2.3- Thành phần Model ASP.NET MVC: 16 2.4- Truyền liệu View ConTroller: 16 Entity Framework: 19 3.1- ORM (Object Related Mapping): 19 3.2- Entity Framework: 20 3.3- Entity Framework Model: 20 3.4- Entity Data Model: 20 Manipulation on Data Model: 21 4.1- LINQ (Language Integrated Query): 21 CHƯƠNG 2: XÂY DỰNG WEBSITE BÁN PHỤ TÙNG Ô TÔ 22 22 Giới Thiệu Đề Tài: 1.1- Tên đề tài: 22 1.2- Công nghệ sử dụng: 22 1.3- Chức dự kiến website: 22 1.4- Phân tích đối tượng sử dụng website: 22 1.5- Cấu trúc project website quản lý bán hàng: 23 Cơ Sở Dữ Liệu Của Website: 24 2.1- Diagram website phụ tùng xe: 24 2.2- Phân tích bảng Database website phụ tùng xe 24 2.3- Giao diện chức website: 30 CHƯƠNG 3: KẾT LUẬN 48 48 Ưu điểm đồ án: 2 Hạn chế đồ án: 49 TÀI LIỆU THAM KHẢO: 50 DANH MỤC CÁC HÌNH Hình 1: Hình minh họa sơ đồ 10 Hình 2: Hình mơ hình ASP.NET 12 Hình 3: Hình minh họa chức Standard HTML Helper 17 Hình 1: Cấu trúc project website phụ tùng xe 23 Hình 2: Các thành phần View, Controller Model 23 Hình 3: Diagram website phụ tùng xe 24 Hình 4: Giao diện đăng nhập 32 Hình 5: Controller chức đăng nhập 32 Hình 6: Các lệnh xóa, cấm duyệt chức đăng 33 Hình 7: Giao diện trang viết kiểm duyệt 33 Hình 8: Giao diện viết cấm hiển thị 34 Hình 9: Hình giao diện trang tạo viết 35 Hình 10: Lệnh bước để đăng viết lưu hình 35 Hình 11: Các lệnh xóa, cấm duyệt chức đăng sản phẩm 36 Hình 12: Giao diện trang viết kiểm duyệt 37 Hình 13: Giao diện viết cấm hiển thị 37 Hình 14: Hình giao diện trang tạo sản phẩm 38 Hình 15: Lệnh bước để đăng sản phẩm lưu hình 38 Hình 16: Hình giao diện trang Chủng loại – Ngành hàng 39 Hình 17: Hình lệnh thêm, xóa loại sản phẩm 39 Hình 18: Hình giao diện trang chủ 41 Hình 19: Hình lệnh lấy, thêm sản phẩm cập nhật giỏ hàng vào vùng nhớ trang chủ 42 Hình 20: Hình giao diện trang sản phẩm 42 Hình 21: Hình giao diện trang viết 43 Hình 22: Giao diện trang dịch vụ 43 Hình 23: Giao diện trang About Us 44 Hình 24: Giao diện trang Contact Us 44 Hình 25: Giao diện trang giỏ hàng 45 Hình 26: Hình table giỏ hàng 45 Hình 27: Hình lệnh thực thêm, xóa giỏ hàng 46 Hình 28: Hình trang nhập thơng tin sau tiến hành tốn (CheckOut) 47 Hình 29: Hình trang xác nhận sau toán 48 DANH MỤC CÁC BẢNG Bảng 1: Bảng viết 24 Bảng 2: Bảng Chi tiết đơn hàng 25 Bảng 3: Bảng đơn hàng 26 Bảng 4: Bảng khách hàng 26 Bảng 5: Bảng loại sản phẩm 27 Bảng 6: Bảng sản phẩm 28 Bảng 7: Bảng tài khoản 29 LỜI CẢM ƠN Đầu tiên, em xin gửi lời cảm ơn chân thành đến Trường Đại học Nguyễn Tất Thành đưa môn học Lập trình Web vào trương trình giảng dạy Đặc biệt, em xin gửi lời cảm ơn sâu sắc đến giảng viên môn – Thầy Nguyễn Mai Huy dạy dỗ, truyền đạt kiến thức quý báu cho em suốt thời gian học tập vừa qua Trong thời gian tham gia lớp học thầy, em có thêm cho nhiều kiến thức bổ ích, tinh thần học tập hiệu quả, nghiêm túc cho em chắn hoạch định tương lai Bộ mơn Lập trình Web mơn học thú vị, vơ bổ ích có tính thực tế cao Đảm bảo cung cấp đủ kiến thức, gắn liền với nhu cầu thực tiễn sinh viên nói chung riêng thân em nói riêng Tuy nhiên, vốn kiến thức nhiều hạn chế khả tiếp thu thực tế nhiều bỡ ngỡ hạn hẹp Mặc dù em cố gắng chắn báo em khó tránh khỏi thiếu sót nhiều chỗ cịn chưa xác, kính mong thầy/cơ chấm xem xét góp ý để tiểu luận em hồn thiệt Kính chúc thầy có nhiều sức khỏe, hạnh phúc, thành cơng đường giảng dạy Em xin chân thành cảm ơn! LỜI MỞ ĐẦU Ngày nay, ứng dụng công nghệ thơng tin việc tin học hóa xem yếu tố mang tính định hoạt động phủ, tổ chức, cơng ty, cửa hàng Nó đóng vai trị quan trọng, tạo bước đột phá mạnh mẽ Việc xây dựng trang web để phục vụ cho nhu cầu riêng tổ chức, cơng ty, hàng, chí cá nhân ngày khơng lấy làm lạ Với vài thao tác đơn giản, người trở thành chủ website giới thiệu thứ có như: website trình bày sưu tập hình ảnh loại máy tính, xe hơi,… mà thích Giúp việc phát triển kinh doanh, hỗ trợ khách hàng tiếp cận mặt hàng bạn cách dễ dàng Thông qua trang web, thông tin họ công văn, thông báo, hay sản phẩm, dịch vụ cơng ty hay cửa hàng nhanh chóng, kịp thời đến với khách hàng họ, tránh khỏi phiền hà mà phương thức giao tiếp truyền thống thường gặp phải Website giúp tối ưu hiệu kinh doanh nhờ tính bán hàng Online: với chức tốn tích hợp trực tiếp website Chăm sóc khách hàng chu đáo dịch vụ kèm theo tập hướng dẫn Online, kiến thức bổ trợ, tư vấn khách hàng trực tuyến,… Chính ý tưởng xây dựng website “Bán mặt hàng xe hơi” đời nhằm đáp ứng nhu cầu thực tế kinh doanh việc quảng bá thương hiệu doanh nghiệp Bằng việc vận dung ngơn ngữ lập trình ASP.NET MVC giúp website tối ưu chức cần thiết khách hàng đồng thời kết hợp với giao diện đại thân thiện với người dùng làm website phù hợp với đối tượng khách hàng hướng tới Hoàn thành xong đề tài, em vô biết ơn thầy hướng dẫn nhiệt tình cho chúng em suốt trình thực đề tài NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Điểm đồ án: TPHCM, Ngày …… tháng …… năm Giáo viên hướng dẫn (Ký tên, đóng dấu) ĐƯỜNG DẪN TRANG WEB ĐÃ ĐƯA LÊN HOSTING: ● Hosting: http://doanduc-001-site1.ftempurl.com/ ● Username: admin ● Password : abc Để thao tác hệ thống quản trị bạn cần viết thêm "login" đường dẫn website: http://doanduc-001-site1.ftempurl.com/ Sau xong trang web bạn di chuyển đến phần đăng nhập hệ thống quản trị: Ở bạn có bảng điền thơng tin đăng nhập vào hệ thống quản trị: - Tài khoản: tên tài khoản cung cấp phía - Mật khẩu: chuỗi mật cung cấp phía Sau điền đầy đủ thơng tin bạn xác nhận cách nhấn vào nút ”Sign In”: Điền tài khoản cung cấp Điền mật cung cấp Sau nhập đầy đủ thông tin bấm Sign In Ảnh minh họa Sau bạn đăng nhập thành cơng trang web bạn sẽ được chuyển hướng đến trang chủ hệ thống quản trị CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Model-View-Controller Design Pattern, ASP.NET MVC: 1.1- MVC Design Pattern: - Mẫu thiết kế Model - View - Controller (MVC) định ứng dụng bao gồm mơ hình liệu, trình bày thơng tin kiểm sốt thơng tin Mơ hình u cầu tách thành đối tượng khác - Mơ hình (Model) liệu logic nghiệp vụ: để biểu thị hình dạng liệu logic nghiệp vụ trì liệu ứng dụng - Các đối tượng mơ hình truy xuất lưu trữ trạng thái mơ hình sở liệu - Chế độ xem (View) Giao diện Người dùng: để hiển thị liệu mơ hình cho người dùng cho phép họ sửa đổi liệu - Bộ điều khiển (Controller) trình xử lý u cầu: Thơng thường, người dùng tương tác với Chế độ xem (View), đưa yêu cầu URL thích hợp, yêu cầu xử lý điều khiển Bộ điều khiển (controller) kết xuất chế độ xem phù hợp với liệu mơ phản hồi Hình 1: Hình minh họa sơ đồ 10 e Trang đăng quản lý sản phẩm (sản phẩm giới thiệu): Trang quản lý sản phẩm cho phép người quản trị kiểm duyệt sản phẩm trang website như: Kiểm duyệt sản phẩm sau đăng bài, chỉnh sửa sản phẩm, xóa sản phẩm Các thao tác thực nhanh chóng giúp người quản trị dễ dàng thực Trang sản phẩm kiểm duyệt sản phẩm cấm hiển thị tách làm để người quản trị dễ thao tác bị nhầm lẫn thực lệnh Hình 11: Các lệnh xóa, cấm duyệt chức đăng sản phẩm 36 Hình 12: Giao diện trang viết kiểm duyệt Hình 13: Giao diện viết cấm hiển thị f Trang tạo sản phẩm mới: Khi đăng sản phẩm hệ thống tự gán tên tài khoản đăng nhập vào đăng để nhận biết người đăng sản phẩm Khi vừa đăng sản phẩm cần vào trang “Sản phẩm cấm hiển thị” để duyệt sản phẩm Sau duyệt sản phẩm tự động lưu vào database đồng thời đẩy lên trang giao diện người dùng 37 Đầu tiên xử lý thông tin nhận từ View mà người quản trị nhập vào Xác định vị trí lưu hình upload dựa vào đường dẫn vật lý, ghi nhận cập nhật đường dẫn cho domain Ở trang tạo sản phẩm cho phép người đăng, nhập tên sản phẩm, nội dung tóm tắt, nội dung sản phẩm hình đại diện sản phẩm Mã sản phẩm, ngày đăng, tài khoản Hệ thống tự động nhập qua mã lệnh dựng sẵn Hình 14: Hình giao diện trang tạo sản phẩm 38 Hình 15: Lệnh bước để đăng sản phẩm lưu hình g Trang chủng loại – Ngành hàng: Cho phép người quản trị thêm nhóm sản phẩm mà khơng cần truy cập database, đồng thời chỉnh sửa - xóa tên thích cho loại ngành hàng Hình 16: Hình giao diện trang Chủng loại – Ngành hàng 39 Hình 17: Hình lệnh thêm, xóa loại sản phẩm h Trang chủ: 40 Thành phần trang chủ Thành phần trang chủ Thành phần trang chủ Truy vấn liệu bảng “LoaiSP” “SanPham”: Để đưa ngàng hàng khác tab khác đưa hình đại diện sản phẩm, giá bán cho sản phẩm 41 Hình 18: Hình giao diện trang chủ Truy vấn liệu bảng “BaiViet”: Để đưa ảnh đại diện cho viết, tên người đăng, ngày đăng tên viết Hình 19: Hình lệnh lấy, thêm sản phẩm cập nhật giỏ hàng vào vùng nhớ trang chủ 42 i Trang danh sách sản phẩm: Hình 20: Hình giao diện trang sản phẩm Truy vấn liệu trang “SanPham” để đưa tên sản phẩm, giá tiền, hình ảnh, sản phẩm xếp dựa ngày đăng k Trang viết: Hình 21: Hình giao diện trang viết Truy vấn liệu bảng “BaiViet”: Để đưa ảnh đại diện cho viết, tên người đăng, ngày đăng tên viết 43 l Trang dịch vụ: Hình 22: Giao diện trang dịch vụ m Trang about us: Hình 23: Giao diện trang About Us 44 n Trang liên lạc: Hình 24: Giao diện trang Contact Us o Trang giỏ hàng: Hình 25: Giao diện trang giỏ hàng 45 Hình 26: Hình table giỏ hàng 46 Hình 27: Hình lệnh thực thêm, xóa giỏ hàng Khi người dùng truy cập vào trang web tự đơng cung cấp cho giỏ hàng, sau thêm sản phẩm vào giỏ hàng Sản phẩm tự chuyển giỏ hàng tự đơng tính tốn chi phí người dùng thực tốn 47 Hình 28: Hình trang nhập thơng tin sau tiến hành tốn (CheckOut) Lúc người dùng nhập đầy đủ thơng tin bao gồm: Họ tên, giới tính, ngày sinh, địa chỉ, số điện thoại, email, ghi đơn hàng bắt đầu bấm toán kiểm tra thông tin Sau người dùng nhập đầy đủ thông tin hệ thống tự truy vấn liệu đưa thông tin người dùng vừa nhập vào table “KhachHang” – “DonHang” - “CtDonHang” để lưu thông tin khách hàng đơn hàng Hình 29: Hình trang xác nhận sau toán 48 Sau khách hàng mua hàng thành công, liệu lưu database thành cơng, xác nhận đơn hàng đặt thành công cho khách hàng biết đơn hàng nhận chờ thời gian ngày để sản phẩm giao tới CHƯƠNG 3: KẾT LUẬN Ưu điểm đồ án: Sau thời gian hoàn thành đồ án em có đạt nhiều kinh nghiệm từ lúc bắt đầu đến lúc hoàn thành đồ án Hoàn thiện gần đầy đủ chức trang web cần có Các bước thực đồ án: ● Lên ý tưởng thực đồ án ● Tìm tịi thiết kế template cho hợp lý ● Thực ý tưởng có ban đầu Tìm hiểu mơ hình MVC Hạn chế đồ án: Trong trình thực đồ án em, tránh khỏi hạn chế nhiều mặt như: ● Bản thân website em chưa hồn thiện phẩn giao diện ● Cịn nhiều chức trang nhỏ chưa thực hồn chỉnh ● Website chưa có bảo mật Nếu có hội làm việc tiếp tục với đồ án, em phát triển website với quy mô lớn quản lý tốt chặt chẽ Hồn thiện đầy đủ tính nangw mà trang web cần có, đảm bảo tính bảo mật cao cho người sử dụng 49 TÀI LIỆU THAM KHẢO: ● Thầy Nguyễn Mai Huy (slide giảng mơn Lập trình Web – video tảng youtube) 50 ... trúc project website quản lý bán hàng: 23 Cơ Sở Dữ Liệu Của Website: 24 2.1- Diagram website phụ tùng xe: 24 2.2- Phân tích bảng Database website phụ tùng xe 24 2.3- Giao diện chức website: 30... Cấu trúc project website quản lý bán hàng: Hình 1: Cấu trúc project website phụ tùng xe 22 Hình 2: Các thành phần View, Controller Model Cơ Sở Dữ Liệu Của Website: 2.1- Diagram website phụ tùng... thường gặp phải Website giúp tối ưu hiệu kinh doanh nhờ tính bán hàng Online: với chức tốn tích hợp trực tiếp website Chăm sóc khách hàng chu đáo dịch vụ kèm theo tập hướng dẫn Online, kiến thức