BÁO CÁO HỌC PHẦN MÔN DỰ ÁN CÔNG NGHỆ Đề tài : Xây dƣng website bán hàng tiêu dùng qua mạng

BÁO CÁO HỌC PHẦN MÔN DỰ ÁN CÔNG NGHỆ Đề tài : Xây dƣng website bán hàng tiêu dùng qua mạng BÁO CÁO HỌC PHẦN MÔN DỰ ÁN CÔNG NGHỆ Đề tài : Xây dƣng website bán hàng tiêu dùng qua mạngĐề tài : Xây dƣng website bán hàng tiêu dùng qua mạngBÁO CÁO HỌC PHẦN MÔN DỰ ÁN CÔNG NGHỆ Đề tài : Xây dƣng website bán hàng tiêu dùng qua mạng BÁO CÁO HỌC PHẦN MÔN DỰ ÁN CÔNG NGHỆ Đề tài : Xây dƣng website bán hàng tiêu dùng qua mạngĐề tài : Xây dƣng website bán hàng tiêu dùng qua mạng

ĐẠI HỌC QUỐC GIA HÀ NỘI TRƯỜNG ĐẠI HỌC CÔNG NGHỆ BÁO CÁO HỌC PHẦN MÔN DỰ ÁN CÔNG NGHỆ Đề tài : Xây dƣng website bán hàng tiêu dùng qua mạng GIẢNG VIÊN HƯỚNG DẪN : VŨ THỊ HỒNG NHẠN NHÓM SINH VIÊN THỰC HIỆN : - NGUYỄN CƠNG THÀNH - BÙI HỒNG NAM - NGUYỄN BÁ ANH TUẤN : 19021368 - K64 T-CLC : 19021334 - K64 T-CLC : 19020128 - K64 CA-CLC4 HỌC PHẦN : DỰ ÁN CÔNG NGHỆ - 2122I_INT3132_20 Hà Nội - 2021 Lời Cảm Ơn Để hồn thành đề tài này, nhóm chúng em xin trân trọng gửi lời cảm ơn đến cô Vũ Thị Hồng Nhạn thầy cô khoa Hệ thống thông tin giảng dạy, cung cấp kiến thức, tận tình hướng dẫn, ln ln động viên chúng em lúc gặp khó khăn, tạo điều kiện giúp đỡ em mặt để chúng em hồn thành đề tài Thêm vào đó, chúng em xin gửi lời cảm ơn sâu sắc đến gia đình, bạn bè, người thân ln theo sát, giúp đỡ ủng hộ mặt tinh thần Mặc dù có nhiều cố gắng hạn chế mặt thời gian kinh nghiệm thực tế nên đề tài khơng tránh khỏi thiếu sót định Kính mong q thầy tiếp tục, bổ sung góp ý để đề tài hoàn thiện Một lần chúng em xin chân thành cảm ơn! Mục lục Danh mục bảng biểu hình ảnh sử dụng Phần I : Tổng quan đề tài 1.1 Đặt vấn đề 1.2 Mục tiêu ý nghĩa đề tài 1.3 Phương pháp nghiên cứu 1.4 Phạm vi ứng dụng Phần II : Cơ sở lý thuyết 2.1 Khái niệm website thương mại 2.2 Ngôn ngữ lập trình front-end HTML, CSS JAVASCRIPT 2.3 Khái niệm mục đích sử dụng Django 2.4 Tìm hiểu mơ hình MVC Django 2.5 Cơ sở liệu SQLite 10 Phần III : Phân tích thiết kế hệ thống 11 3.1 Các nhóm Actor chức 11 3.2 Biểu đồ Usecase tổng quát hệ thống 17 3.3 Biểu đồ 18 3.4 Biểu đồ trạng thái đối tượng giỏ hàng 20 3.5 Cơ sở liệu tổng quan hệ thống 20 Phần IV : Tiến hành xây dựng website bán hàng 30 4.1 Thiết kế giao diện người dùng 22 4.2 Thiết kế giao diện Admin 27 Phần V : Đánh giá kết hướng phát triển 30 5.1 Đánh giá kết 30 5.2 Hướng nghiên cứu phát triển 31 Phần VI : Kết luận 31 Phần VII : Tài liệu tham khảo sử dụng 32 Danh mục bảng biểu 3.1.1 Bảng Guest tính 12 3.1.2 Bảng User tính 13 3.1.3 Bảng Admin tính 14 Danh mục hình ảnh 2.4.1 Phương thức hoạt động mơ hình MVC 10 3.2.1 Mơ hình Usecase tổng quát 17 3.3.1 Biểu đồ đăng nhập 18 3.3.2 Biểu đồ thêm giỏ hàng 18 3.3.3 Biểu đồ gửi đơn đặt hàng 19 3.4.1 Biểu diễn trạng thái đối tượng giỏ hàng 20 3.5.1 Mơ hình ERD hệ thống 20 4.1.1 Giao diện trang chủ 22 4.1.2 Giao diện đăng nhập 23 4.1.3 Giao diện sản phẩm 24 4.1.4 Giao diện giỏ hàng 25 4.1.5 Giao diện toán 26 4.2.1 Giao diện Admin 27 4.2.2 Giao diện thêm sản phẩm 28 4.2.3 Giao diện quản lí người dùng 29 PHẦN I : TỔNG QUAN VỀ ĐỀ TÀI 1.1 Đặt vấn đề Internet xu hướng thời đại, lại lợi ích to lớn cho cá nhân tổ chức Theo thống kê Bộ thông tin, tính đến tháng 12 năm 2021, có 4,5 tỉ người dùng giới truy cập vào mạng Internet số dự tính khơng ngừng tăng lên hàng ngày Có 75% khách hàng tìm hiểu thông tin sản phẩm trước mua, 43% khách hàng mua sắm có ảnh hường đến Internet Điều có nghĩa thói quen mua sắm người thay đổi, họ khơng phải lịng vịng để tìm kiếm sản phẩm mà thay vào việc ngồi nhà, sử dụng điện thoại, máy tính tìm kiếm sản phẩm mà họ ưa thích Thêm vào đó, với việc dịch bệnh hoành hành, việc mua sắm nhà trở nên cần thiết hết Vì thế, doanh nghiệp hướng tới đối tượng khách hàng thông qua trang mua sắm online Công việc cần làm thiết kế website có tính tự động cao, website đủ mạnh hiệu với tính đơn giản có tương tác với người dùng cao giúp doanh nghiệp vượt xa đối thủ cạnh tranh Với mong muốn hoàn thiện kiến thức học trường, đồng thời rèn luyện kỹ thân, nhóm chúng em lựa chọn đề tài “ Xây dựng website bán hàng tiêu dùng qua mạng.” 1.2 Ý nghĩa mục tiêu đề tài Website xây dựng để áp dụng cho công ty muốn quảng bá, giới thiệu sản phẩm tới người Với giao diện đơn giản, dễ dùng, tiến hành mua sắm sản phẩm website Trong thời đại thương mại điện tử ngày phát triển, việc ứng dụng vào hoạt động website bán hàng trực tuyến mang lại nhiều ý nghĩa như:  Đỡ tốn nhiều thời gian cho người tiêu dùng nhà quản lý việc tham gia vào hoạt động mua bán  Giúp người tiêu dùng có giá cả, hình ảnh đánh giá sản phẩm cách xác  Giúp doanh nghiệp điều hành dễ dàng việc quản lý sản phẩm 1.3 Phƣơng pháp nghiên cứu  Tìm hiểu kĩ thuật lập trình, cách thức hoạt động đối tượng     1.4 website bán hàng Tìm hiểu web, ngơn ngữ HTML, CSS, JAVASCRIPT Tìm hiểu ngơn ngữ Python Tìm hiểu sở liệu SQLite Dùng trang HTML CSS thông qua ngôn ngữ JAVASCRIPT để xây dựng front-end website Sử dụng Django làm back-end Sử dụng SQLite tích hợp sẵn Django làm sở liệu Phạm vi ứng dụng Do tính thuận tiện, tiến hành giao dịch qua website để mua sắm sản phẩm Qua phân tích nhu cầu thực tế, nhóm chúng em tập trung khai thác, quảng bá sản phẩm tâm lý khách hàng thông qua số đối tượng sau đây:  Những người có cơng việc bận rộn, có thời gian mua sắm  Học sinh, sinh viên với nhu cầu mua sắm qua mạng  Tìm kiếm sản phẩm khơng có cửa hàng lân cận  Tìm kiếm sản phẩm với mức giá ưu đãi  Tìm hiểu sản phẩm, đặc điểm, chức năng, giá thành đánh giá người tiêu dùng sản phẩm PHẦN II : CƠ SỞ LÝ THUYẾT Nội dung trọng tâm phần trình bày khái niệm lập trình website thương mại điện tử, ngôn ngữ sử dụng Django framework 2.1 Khái niệm website thƣơng mại điện tử Thương mại điện tử hoạt động mua-bán sản phẩm (hoặc dịch vụ) thông qua hệ thống điện tử Internet mạng máy tính Thương mại điện tử cịn gọi E-commerce, nghĩa Electronic Commerce Trong năm qua, với phát triển mạnh mẽ công nghệ thông tin, doanh nghiệp lớn doanh nghiệp phát triển nhận thấy tiềm lớn vào việc triển khai, khai thác công nghệ vào doanh nghiệp kinh doanh Chúng ta thấy Internet chi phối tất lĩnh vực Vì vậy, hoạt động giao lưu, giải trí, văn hóa, thương mại trao đổi Internet khẳng định tính hiệu việc chia sẻ thơng tin qua Internet 2.2 Ngơn ngữ lập trình front-end HTML, CSS JAVASCRIPT Một ngơn ngữ lập trình cách giao tiếp với phần mềm Những người sử dụng ngơn ngữ lập trình thường gọi lập trình viên nhà phát triển Những điều nói với phần mềm ngơn ngữ lập trình làm cho trang web trơng y ta muốn Về bản, phần giao diện web thường tạo ngôn ngữ sau :  HTML cung cấp cấu trúc trang web, cải tiến sửa đổi công nghệ khác CSS JavaScript  CSS sử dụng để kiểm sốt trình bày, định dạng bố cục  JavaScript sử dụng để kiểm soát hành vi yếu tố khác 2.3 Khái niệm mục đích sử dụng Django 2.3.1 Django Django số web framework bậc cao miễn phí, mã nguồn mở tạo dựa ngơn ngữ Python theo mơ hình MVC (Model - View - Control) Lợi Django khả thiết kế, tạo lập website ứng dụng nhanh chóng đến bất ngờ Mục tiêu Django đơn giản hóa việc tạo website phức tạp có sử dụng sở liệu Django tập trung vào tính “có thể tái sử dụng” “có thể tự chạy” component, tính phát triển nhanh, khơng làm lại làm Một số website phổ biến xây dựng từ Django Pinterest, Instagram, Mozilla, Bitbucket 2.3.2 Ƣu điểm Django Django có ưu điểm sau :  Bảo mật tốt : Khi làm việc với Django, lập trình viên tránh nhiều lỗi bảo mật phổ biến cách cung cấp framework có khả tự bảo vệ trang  Nhanh : Django giúp đẩy nhanh quy trình từ việc xây dựng web đến lúc hồn thành sản phẩm nhiều  Linh hoạt : Django sử dụng để xây dựng hầu hết trang web-từ hệ thống quản lý nội dung, trang tin tức, mạng xã hội bán hàng Framework cung cấp tùy chọn khác cho hầu hết chức tạo template tự động, sở liệu phổ biến  Độ hoàn thiện cao : Django cung cấp hầu hết thứ mà developer muốn để phát triển web theo hướng muốn Tất phần framework hoạt động liền mạch với nhau, tuân theo nguyên tắc thiết kế quán  Khả mở rộng tốt : Do mở rộng cách nâng cấp phần cứng nên nhiều trang web, ứng dụng sử dụng Django để mở rộng nhanh chóng linh hoạt từ đáp ứng nhu cầu, lượng truy cập lớn 2.3.3 Tiến hành cài đặt Django dependencies Django framework Python, Python cần phải cài đặt Tại thời điểm viết báo cáo, Python 3.9 phiên Sau cài đặt package manager pip Khởi tạo mơi trường giả lập Bới lẽ làm việc với nhiều dự án khác cần phiên khác Python thư viện Việc sử dụng môi trường giả lập giúp đảm bảo tính độc lập hoàn thiện dự án Với dự án nhóm em sử dụng env tích hợp Python Để khởi tạo môi trường giả lập cho dự án, ta dùng câu lệnh command line path\> py -m venv project-name Để khởi động môi trường giả lập, ta dùng câu lệnh path\> project-name\Scripts\activate.bat Cài đặt khởi tạo project Django \> py -m pip install Django …\>django-admin startproject project-name 2.4 Tìm hiểu mơ hình MVC Django Khi sử dụng Django, web ứng dụng nhận HTTP yêu cầu từ trình duyệt, sau hệ thống tìm u cầu cần thực dựa URL thông tin POST liệu GET liệu Tùy thuộc vào yêu cầu thông tin đọc vào, hệ thống đọc, ghi thông tin từ sở liệu thực tác vụ khác để đáp ứng yêu cầu khách hàng Khi xử lý xong yêu cầu, kết trả View Tại View tạo mã HTML thành giao diện trả hiển thị trình duyệt Các thành phần mơ hình MVC :  Model (M) : Là phận có chức lưu trữ toàn liệu ứng dụng Bộ phận cầu nối thành phần bên View Controller Sơ đồ phương thức hoạt động mơ hình MVC :  View (V) : Đây phần giao diện dành cho người sử dụng Người dùng lấy liệu MVC thơng qua thao tác truy vấn tìm kiếm sử dụng thơng qua website View khơng có mối liên hệ trực tiếp với Controller, không lấy liệu trực tiếp từ Controller mà thị yêu cầu chuyển yêu cầu qua cho Controller xử lý  Controller (C) : Đây phận có chức xử lý yêu cầu người dùng đưa đến thơng qua View, từ đưa liệu phù hợp với người dùng lấy từ Model Hình 2.4.1 : Phƣơng thức hoạt động mơ hình MVC 2.5 Cơ sở liệu SQLite SQLite hệ trị sở liệu quan hệ tương tự Mysql, Đặc điểm bật SQLite so với sở liệu quan hệ khác gọn, nhẹ, đơn giản, đặt biệt khơng cần mơ hình server-client, khơng cần cài đặt, cấu hình hay khởi động nên khơng có khái niệm user, password hay quyền hạn SQLite Database Dữ liệu lưu file SQLite thường không sử dụng với hệ thống lớn với hệ thống quy mơ vùa nhỏ SQLite khơng thua sở liệu khác chức hay tốc độ Vì khơng cần cài đặt hay cấu hình nên SQLite sử dụng nhiều việc phát triển, thử nghiệm … tránh rắc rối trình cài 10 3.3 Biểu đồ 3.3.1 Biểu đồ cho Usecase đăng nhập Biểu đồ 3.3.1 : Biểu đồ đăng nhập 3.3.2 Biểu đôt cho Usecase thêm giỏ hàng Biểu đồ 3.3.2 : Biểu đồ thêm giỏ hàng 18 3.3.3 Biểu đồ cho Usecase gửi đơn đặt hàng Biểu đồ 3.3.3 : Biểu đồ gửi đơn đặt hàng 19 3.4 Biểu đồ trạng thái đối tƣợng giỏ hàng Biểu đồ 3.4.1 : Biểu diễn trạng thái đối tƣợng giỏ hàng 3.5 Cơ sở liệu tổng quan hệ thống 3.5.1 Biểu đồ Class Diagram Biểu đồ 3.5.1 : Mơ hình ERD hệ thống 20 3.5.2 Mô tả chi tiết sở liệu hệ thống  Item : title, price, discount_price, category, label, slug (ID) (Khóa chính), description, image  OrderItem : (1-nhiều với Item) user (khóa phụ tới user) (Khóa chính), ordered, item (khóa phụ tới item) (Khóa chính), quantity  Order : order_ID (Khóa chính), user (khóa phụ tới user), ref_code, items (nhiều-nhiều với orderItem), start_date, ordered_date, ordered, shipping_address (khóa phụ tới addresses), billing_address (khóa phụ tới addresses), payment (khóa phụ tới payment), coupon (khóa phụ tới coupon), being_delivered, received, refund_requested, refund_granted  User : user_ID (Khóa chính), user_name, user_email, user_address, user_phone  Address : address_ID (Khóa chính), user (khóa phụ tới user), street_address, apartment_address, country, zip, address_type, default  Payment : stripe_charge_id (Khóa chính), user (khóa phụ tới user), amount, timestamp  Coupon : coupon_ID (Khóa chính), code, amount  Refund : refund_ID (Khóa chính), order (khóa phụ tới order), reason, accepted, email 21 PHẦN IV : TIẾN HÀNH XÂY DỰNG WEBSITE BÁN HÀNG Ta bắt đầu tiến hành xây dựng website bán hàng sử dụng Django 4.1 Thiết kế giao diện ngƣời dùng 4.1.1 Giao diện trang chủ Hình 4.1.1 : Giao diện trang chủ Khi người dùng bắt đầu truy cập, trang web hiển thị danh sách sản phẩm Một trang sản phẩm bao gồm 16 sản phẩm, người dùng di chuyển sang trang để xem tìm kiếm sản phẩm Ở navigation danh mục sản phẩm mục tìm kiếm giúp người dùng tìm kiếm sản phẩm theo tên Phía icon giỏ hàng với số lượng mặt hàng có mặt giỏ nút đăng nhập/đăng xuất 22 4.1.2 Giao diện đăng nhập Hình 4.1.2 : Giao diện đăng nhập Giao diện đăng nhập/ đăng ký gồm trường Username, tài khoản, email Người dùng đăng ký sử dụng email cần xác minh tài khoản để sử dụng chức liên quan đến quản lí tài khoản đổi mật khẩu, tên đăng nhập, quên mật Khi đăng nhập, người dùng tích vào ghi nhớ mật để dễ dàng truy cập vào lần đăng nhập Mật lưu vào cache cơng cụ tìm kiếm mà người dùng sử dụng 23 4.1.3 Giao diện sản phẩm Hình 4.1.3 : Giao diện sản phẩm Giao diện sản phẩm gồm có hình ảnh sản phẩm, loại mà sản phẩm thuộc về, giá tiền giá giảm giá Sau phần mơ tả sản phẩm giúp người dùng có thêm thơng tin, nắm rõ sản phẩm tìm hiểu Phía nút thêm xóa sản phẩm khỏi giỏ hàng Mọi cập nhật hiển thị icon Giỏ hàng 24 4.1.4 Giao diện giỏ hàng Hình 4.1.4 : Giao diện giỏ hàng Giao diện giỏ hàng gồm sản phẩm giỏ, giá tiền sản phẩm tổng giá tiền sản phẩm Người dùng thấy giá tiền sau giảm số tiền tiết kiệm mua sắm web Người dùng tăng, giảm lượng sản phẩm muốn mua xóa sản phẩm khỏi giỏ hàng Sau người dùng lựa chọn tiếp tục mua sắm chuyển đến khu toán Nếu chọn tiếp tục mua sắm, người dùng đưa lại trang chủ để tiếp tục thêm sản phẩm vào giỏ hàng 25 4.1.5 Giao diện tốn Hình 4.1.5 : Giao diện tốn Giao diện tốn gồm có địa giao hàng, người dùng chọn quốc gia, điền mã Zipcode khu vực sinh sống địa để nhận hàng Sau người dùng xem lại giá tiền, tổng sản phẩm toán áp dụng mã giảm giá phù hợp để giảm giá tiền phải toán Sau thỏa mãn, người dùng tiến đến mục toán.Ở có lựa chọn tốn chuyển khoản qua PayPal tốn hình thức Shipcod Khi lựa chọn xong nhấn chọn Tiếp tục toán, đơn hàng người dùng gửi cho phía server xử lí tiếp nhận 26 4.2 Thiết kế giao diện Admin 4.2.1 Giao diện trang chủ Admin Hình 4.2.1 : Giao diện Admin Giao diện Admin để quản lí trang web tạo sẵn Django giúp người dùng giảm thiểu thời gian thiết lập mà dễ dàng quản lí Giao diện chia làm nhiều phần tùy thuộc vào nhóm mục đích Admin thay đổi thơng tin người dùng, thêm xóa sản phẩm hay quản lí đơn hàng cách dễ dàng 27 4.2.2 Giao diện Admin thêm sản phẩm Hình 4.2.2 : Giao diện thêm sản phẩm Để thêm sản phẩm vào website, người quản lí cần điền đẩy đủ thông tin sản phẩm vào trường thông tin Từ tên sản phẩm, giá sản phẩm, phân loại nhãn sản phẩm Mục slug giúp khởi tạo đường link riêng để dẫn đến sản phẩm tạo Sau điền thơng tin sản phẩm hình ảnh sản phẩm giúp người dùng hiểu rõ sản phẩm Cuối lưu lại sản phẩm để hiển thị trang web 28 4.2.3 Giao diện Admin quản lí tài khoản Hình 4.2.3 : Giao diện quản lí ngƣời dùng Danh sách người dùng, admin thông tin họ hiển thị dạng bảng Nhà quản lí thấy người dùng đăng kí trang web họ, địa email, họ tên Admin chỉnh sửa để cấp quyền khác cho người dùng 29 PHẦN V : ĐÁNH GIÁ KẾT QUẢ VÀ HƢỚNG PHÁT TRIỂN 5.1 Kết đạt đƣợc Đề tài “xây dựng Website bán hàng trực tuyến” xuất phát từ thực tế ngày nhằm tạo tảng sở ban đầu để hỗ trợ thêm cho bạn muốn thiết kế Website cho công ty hay Website cá nhân Mặc dù có nhiều cố gắng, tìm hiểu kiến thức học, kết hợp tra cứu tài liệu chuyên ngành hạn chế thời gian khả kinh nghiệm thành viên nhóm nên khơng thể tránh khỏi thiếu sót định báo cáo hồn thành mức độ sau Những kết đạt  Về cơng nghệ + Tìm hiểu chung lập trình web, ngơn ngữ sử dụng + Tìm hiểu Framework Django, từ mở hướng hiệu liên quan đến việc lập trình quản lí website + Biết cách thiết kế website động cách tổ chức sở liệu SQLite  Về ứng dụng + Giới thiệu sản phẩm, mặt hàng kinh doanh tới khách hàng + Cho phép khách hàng tra cứu, tìm kiếm sản phẩm + Khách hàng đặt mua sản phẩm online mà không cần trực tiếp xem sản phẩm 30 5.2 Hƣớng nghiên cứu phát triển Tìm hiểu sâu hệ quản trị sở liệu SQLite Framework Django, từ phát huy tối đa tiềm mà sở liệu framework đem lại Tìm hiểu thêm số ngôn ngữ, phần mềm ứng dụng để nâng cao giao diện đồ họa cho thêm phần sinh động, đẹp mắt, thu hút người dùng Tiến hành xây dựng chức tư vấn, chăm sóc khách hàng sử dụng chatbot, quản lí đánh giá khách hàng tăng cường bảo mật, tránh trường hợp kẻ xấu lợi dụng để làm ảnh hưởng đến trang web PHẦN VI : KẾT LUẬN Mục tiêu nghiên cứu để có hiểu biết chung thiết kế website bán hàng áp dụng hiểu biết vào thực tiễn để xây dựng sản phẩm hoàn chỉnh Ta nhận thấy Framework Django kết hợp với hệ quản trị sở liệu SQLite cho phép xây dựng, thiết kế trang web đơn giản vơ hiệu quả, có khả áp dụng vào thực tiễn cao Trong thời đại công nghệ số, mua sắm online gần trở thành phần thiếu sống chúng ta, việc công ty hay cá nhân tổ chức bán hàng mạng phương pháp tối ưu để bán hàng, giảm thiểu thời gian chi phí khác khách hàng cơng ty Trong q trình thực đề tài khơng thể tránh khỏi thiếu sót Kính mong thơng cảm, góp ý bổ sung thầy bạn để Website ngày hồn thiện Chúng em xin chân thành cảm ơn! 31 PHẦN VII : TÀI LIỆU THAM KHẢO VÀ SỬ DỤNG Jon Duckett Web Design with HTML, CSS, JavaScript and jQuery Set 1st Edition William S Vincent Django for Beginners : Build Website With Python & Django Daniel and Audrey Feldroy A wedge of Django : The Django tutorial by the authors of The Two Scoops of Django Và tài liệu tham khảo Internet Youtube 32