XÂY DỰNG WEBSITE nội THẤT

SỞ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KĨ THUẬT TP.HCM KHOA CÔNG NGHỆ THÔNG TIN -*** KHÓA LUẬN TỐT NGHỆP Chuyên ngành: HỆ THỐNG THÔNG TIN ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN ĐỒ NỘI THẤT Họ tên: Phạm Thành Trung 17110394 Huỳnh Hữu Trí 17110389 Lớp: 171101S Khóa: 2017-2021 GVHG: Thầy Nguyễn Thành Sơn TP.HCM, ngày 20 tháng 06 năm 2021 ĐH SƯ PHẠM KỸ THUẬT TP.HCM KHOA CNTT XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập- Tự do- Hạnh phúc ****** ****** PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên 1: Phạm Thành Trung MSSV: 17110394 Họ tên Sinh viên 2: Huỳnh Hữu Trí MSSV: 17110389 Ngành: Cơng nghệ Thơng tin Tên đề tài: XÂY DỰNG WEBSITE NỘI THẤT Họ tên Giáo viên hướng dẫn: TS NGUYỄN THÀNH SƠN NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày…tháng…năm 2021 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) ĐH SƯ PHẠM KỸ THUẬT TP.HCM XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CNTT Độc lập- Tự do- Hạnh phúc ****** ****** PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên 1: Phạm Thành Trung MSSV: 17110394 Họ tên Sinh viên 2: Huỳnh Hữu Trí MSSV: 17110389 Ngành: Công nghệ Thông tin Tên đề tài: XÂY DỰNG WEBSITE NỘI THẤT Họ tên Giáo viên phản biện: NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày…tháng…năm 2021 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) LỜI CẢM ƠN Trong trình nghiên cứu đề tài, giảng viên hỗ trợ, giải đáp thắc mắc hướng dẫn chúng em Cảm ơn thầy hỗ trợ chúng em thời gian qua Đặc biệt, xin gửi lời cảm ơn chân thành đến thầy Nguyễn Thành Sơn – giáo viên hướng dẫn Khóa luận tốt nghiệp– Khoa công nghệ thông tin – Đại học Sư phạm Kỹ thuật Tp Hồ Chí Minh, hướng dẫn, quan tâm, góp ý ln đồng hành nhóm giai đoạn khó khăn đề tài Với kinh nghiệm thực tiễn cịn thiếu sót kinh nghiệm chun mơn cịn non yếu, báo cáo có thiếu sót hạn chế định Kính mong nhận phản hồi, đóng góp ý kiến bảo thêm quý thầy cô để nhóm đạt kiến thức hữu ích nhất, nâng cao ý thức để phục vụ cho kỹ sau Xin chân thành cảm ơn! Trường ĐH Sư Phạm Kỹ Thuật TP.HCM Khoa : CNTT ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP Họ Tên SV thực : Phạm Thành Trung Mã Số SV : 17110394 Họ Tên SV thực : Huỳnh Hữu Trí Mã Số SV : 17110389 Thời gian làm luận văn : Từ : 15/03/2021 Đến : 30/06/2021 Chuyên ngành : Hệ thống thông tin Tên luận văn : Xây dựng website bán đồ nội thất công nghệ Mern Stack GV hướng dẫn : Nguyễn Thành Sơn Nhiệm Vụ Của Luận Văn :  Trước tiên cần nắm kỹ ngơn ngữ lập trình Javascript, tìm hiểu Framework sở liệu để thực tiểu biểu NodeJS, Express, ReactJS MongDB cần hiểu cách hoạt động chúng, phải trải qua trình làm việc với Framework trước khơng khó khăn việc viết ứng dụng hồn chỉnh  Cần phải tìm hiểu trang web có cấu trúc tương tự ví dụ tiki, lazada, …tìm hiểu cấu trúc chương trình sỡ liệu, để hướng phát triển tránh ứng dụng làm không áp dụng rộng rãi  Cuối phải đưa lựa chọn tổ chức ứng dụng theo cách Sau vào thiết kế sở liệu, phân chia công việc tiến hành thực xây dựng server, viết API, Xây dựng giao diện thực chức cách kết nối API với giao diện chức KẾ HOẠCH THỰC HIỆN STT THỜI GIAN CÔNG VIỆC GHI CHÚ 15/03/202120/03/2021 Viết giao diện API login, register Hoàn thành 21/03/202127/03/2021 Viết giao diện API cho trang danh mục sản phẩm Hoàn thành 29/03/202103/04/2021 Xây dựng thêm trang seller Hoàn thành 05/04/202112/04/2021 Xây dựng lại giao diện cho trang admin Hoàn thành 13/04/202130/04/2021 Xây dựng chức quản lý danh mục quản lý sản phẩm, đơn hàng doanh thu cho admin Hoàn thành 01/05/202103/05/2021 Load data giao diện người dùng thêm trang cần thiết đánh giá, trang xem thông tin người bán Hoàn thành 07/05/202110/05/2021 Cải thiện giao diện người dùng thêm tốn momo Hồn thành 12/05/202130/05/2021 Xây dựng thêm chức seller giảm giá, trả lời đánh giá khách hàng, chức thơng báo có đơn hàng Hồn thành 01/06/202111/06/2021 Fix bug viết lại báo cáo Hoàn thành MỤC LỤC DANH SÁCH HÌNH ẢNH .9 PHẦN 1: MỞ ĐẦU 11 1.1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 11 1.2 MỤC ĐÍCH CỦA ĐỀ TÀI .11 1.3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU 11 1.4 KẾT QUẢ DỰ KIẾN 12 1.5 NHỮNG NỘI CHỨC NĂNG ĐÃ HOÀN THÀNH TRONG TIỂU LUẬN 12 1.6 CÁC CHỨC NĂNG ĐÃ HOÀN THIỆN THÊM TRONG KHÓA LUẬN .12 PHẦN 2: NỘI DUNG .14 CHƯƠNG 1: CÔNG NGHỆ MERN STACK .14 I Ý NGHĨA VỀ MERN 14 II LỊCH SỬ PHÁT TRIỂN 14 Lịch sử phát triển Reactjs 14 Lịch sử phát triển NodeJS 15 Lịch sử phát triển MongoDB 15 CHƯƠNG 2: CÀI ĐẶT VÀ TRIỂN KHAI 16 I CÁCH CÀI ĐẶT VỚI NODE.JS 16 II CÀI ĐẶT VỚI EXPRESS 17 III CÀI ĐẶT VỚI REACT 18 IV CÀI ĐẶT VÀ KẾT NỐI CƠ SỞ DỮ LIỆU VỚI MONGODB 18 CHƯƠNG 3: TÌM HIỂU CÁC TRANG WEB BÁN ĐỒ NỘI THẤT 23 I TRANG WEB BÁN ĐỒ NỘI THẤT NHADEP.COM.VN 23 1.Giới thiệu trang web 23 2.Các đặc điểm trang web 24 3.Ưu nhược điểm trang web .24 II TRANG WEB NHAXINH.COM 25 1.Giới thiệu trang web 25 2.Các đặc điểm trang web 25 3.Ưu nhược điểm trang web .26 III TRANG WEB HOMEOFFICE.COM.VN .26 1.Giới thiệu trang web 26 2.Đặc điểm trang web .27 3.Ưu nhược điểm trang web 28 IV TRANG WEB GO HOME 28 1.Giới thiệu trang web 28 2.Đặc điểm trang web .29 3.Ưu nhược điểm trang web 29 V TRANG WEB NOITHATHOAPHAT.PRO .30 Giới thiệu trang web 30 2.Đặc điểm trang web .31 3.Ưu nhược điểm trang web 31 CHƯƠNG 4: PHÂN TÍCH WEBSITE BÁN ĐỒ NỘI THẤT 33 I.MÔ TẢ WEBSITE .33 Lý chọn đề tài 33 2.Các chức xây dựng 33 II CÁC THÀNH PHẦN CẦN CÓ ĐỂ WEBSITE CÓ THỂ HOẠT ĐỘNG ỔN ĐỊNH 34 1.Tên miền 34 2.Thiết kế Website 34 3.Hosting 35 4.Mô tả giao diện webpage .35 III USE CASE HỆ THỐNG 36 IV Mô Tả Use Case 39 Use case đăng nhập .39 Use case thêm danh mục .39 Use case sửa danh mục .40 Use case quản lý danh mục 41 Use case duyệt sản phẩm 42 Use case xác nhận đánh giá 42 Use case thêm sản phẩm .43 Use case gửi đơn hàng 44 V SƠ ĐỒ ACTIVITY 45 1.Đăng nhập 45 2.Giỏ hàng .46 Tìm kiếm sản phẩm .46 4.Đánh giá sản phẩm .47 Thêm danh mục 48 Cập nhật danh mục .49 Đặt hàng 50 VI THIẾT KẾ CƠ SỞ DỮ LIỆU 51 1.Các collection 51 Nhập liệu cho sở liệu 59 VII MƠ TẢ CẤU TRÚC CHƯƠNG TRÌNH VÀ CÁC TRANG WEB .60 Mô tả cấu trúc chương trình 60 Thiết kế trang web 60 PHẦN 3: KẾT LUẬN .62 CHƯƠNG 1: KẾT QUẢ ĐẠT ĐƯỢC 62 I CÔNG NGHỆ .62 II CHỨC NĂNG ỨNG DỤNG .62 10 @Prop({ type: mongoose.Schema.Types.ObjectId, ref: 'Categor y' }) category: Category; verifyPassword: (password: string) => Promise; } ❖ Collection bao gồm: ✔ ower_name: tên người bán ✔ email, password: tương tự admin ✔ status: trạng thái admin xác thực chờ sử lý đưa sản phẩm lên ✔ contact_info: thông tin liên hệ người bán ✔ category: danh mục sản phẩm mà seller bán ❖ Store export class Store extends mongoose.Document { @Prop({ unique: true }) @IsNotEmpty() @IsOptional() store_name: string; @Prop({ unique: true, required: false }) url: string; @Prop() @IsNotEmpty() @IsOptional() representative_name: string; 65 @Prop() @IsNotEmpty() @IsOptional() representative_email: string; @Prop({ type: [contactSchema], default: [] }) contacts: [Contact]; @Prop({ type: mongoose.Schema.Types.ObjectId, ref: 'Seller' }) seller: string | Seller; } Collection bao gồm: ✔ store_name: tên cửa hàng kiểu string ✔ regresentative_name: tên người đại diện kiểu string ✔ contacts: mảng lưu thông tin liên hệ cửa hàng ✔ seller: người bán hàng cho cửa hàng kiểu liệu string tham chiếu đến collection seller Nhập liệu cho sở liệu ❖ Dữ liệu người dùng: tạo người dùng vào trang client, admin, seller thực đăng ký tài khoản, tạo hồ sơ cá nhân ❖ Dữ liệu danh mục sản phẩm: quản lý trang admin, admin thêm vào ❖ Dữ liệu sản phẩm: sản phẩm cửa hàng các seller cung cấp muốn bán sản phẩm qua kiểm duyệt admin 66 ❖ Dữ liệu tốn đơn, thơng tin trao đổi khách hàng: nhận người dùng mua hàng, trao đổi đánh giá website ❖ Dữ liệu thống kê: thống kê trang seller dựa đơn hàng doanh thu đạt Dữ liệu ta khơng lưu vào database có thẻ tính nhờ vào đơn hàng VII MƠ TẢ CẤU TRÚC CHƯƠNG TRÌNH VÀ CÁC TRANG WEB Mơ tả cấu trúc chương trình Hình 28 Mơ tả cấu trúc chương trình Chương trình gồm có thành phần: Seller Portal (cho người dùng bán hàng), Shop (giao diện bán hàng), Admin(cho admin) với API giao diện tương ứng Mỗi API dùng chung sở liệu MongoDB nơi để truy vấn, lưu trữ dự liệu Ngồi API cịn kết nối tới MailGun để thực việc gửi email đến cho người dùng 67 Thiết kế trang web ❖ Trang chủ (giao diện người dùng khách hàng): ❖ Trang admin: bao gồm trang đăng nhập đăng ký, quản lý danh mục, quản lý xét duyệt sản phẩm ✔ Đăng ký, đăng nhập: yêu cầu người dùng phải có tài khoản admin vào hệ thống đăng nhập sau đăng nhập đăng ký ✔ Trang danh mục : trang mà admin phép thêm danh mục vào thực thao tác với ✔ Trang sản phẩm: admin phép hủy sản phẩm duyệt sản phẩm cho seller ❖ Trang seller: mã giảm giá, sản phẩm, quản lý đơn hàng, quản lý profile seller ✔ Trang mã giảm giá: seller tạo phiếu discount cho sản phẩm ✔ Trang sản phẩm: lại chia trang cho mục đích quản lý sản phẩm, áp dụng giảm giá áp dụng, thông tin nhà cung cấp sản phẩm ✔ Trang quản lý profile: thao tác liên quan đến quản lý thông tin seller thông tin cửa hàng ✔ Trang quản lý đơn hàng: giúp seller nắm bắt đơn hàng quản lý giao hàng cách tốt ❖ Trang client: trang giao diện cho khách hàng website chia nhiều trang tiện ích khác ✔ Trang chủ: chứa thông tin shop header, tiêu đề, thông tin quản cáo, số sản phẩm trưng bày cho người dùng, hiển thị giỏ hàng, danh sách danh mục sản phẩm ✔ Trang sản phẩm liệt kê sản phẩm nút tìm kiếm lọc sản phẩm, số thơng tin sản phẩm 68 ✔ Trang chi tiết sản phẩm: thông tin cụ thể sản phẩm kèm mô tả, sản phẩm liên quan thông tin đánh giá từ khách hàng ✔ Trang tìm kiếm: giống trang sản phẩm liệt kê số sản phẩm người dùng yêu cầu ✔ Trang giỏ hàng: thông tin sản phẩm giỏ hàng, giá số lượng ✔ Trang đơn hàng: gồm trang trang để xác nhập thông tin người mua, trang để xác nhận toán gửi đơn hàng ✔ Trang sản phẩm mua: sau nhận hàng khách hàng có trang lịch sử sản phẩm mua họ đánh giá sản phẩm ✔ Ngoải có số trang khác: thơng tin người dùng, 69 PHẦN 3: KẾT LUẬN CHƯƠNG 1: KẾT QUẢ ĐẠT ĐƯỢC I CƠNG NGHỆ  MongoDB: tìm hiểu thành công NoSql, tốc độ truy vấn nhanh dễ dàng giao tiếp với server có sẵn phương thức để truy vấn data  NodeJS: Xây dựng thành công API trang bán hàng với framework NestJS, xử lý thành công chức năng, yêu cầu từ giao diện  Express: Tìm hiểu chức express NodeJS để giúp server chạy tốt code tối ưu hẳn  ReactJS: Xây dựng thành công giao diện việc style css, thư viện từ bên ngồi (khơng dùng template có sẵn), chia giao diện rõ ràng cho chức năng, chuyển trang, xử lý gọi API truy vấn data, xây dựng chức cần có trang web II Chức ứng dụng Trang admin gồm chức năng:  Quản lý danh mục( thêm xóa sửa danh mục, tìm kiếm danh mục)  Quản lý nhân xét đánh giá sản phẩm (admin xét duyệt đánh giá từ khách hàng)  Xét duyệt sản phẩm từ seller ( sản phẩm seller admin duyệt đưa bán)  Quản lý hóa đơn (admin phần trăm doanh thu từ đơn hàng seller, admin người thực giao hàng)  Thống kê (thống kê thơng qua hóa đơn bán hàng) Trang seller gồm chức năng:  Quản lý thông tin seller (các thông tên, địa liên hệ)  Quản lý mã giảm giá (tạo mã giảm giá) 70  Quản lý sản phẩm( thêm xóa sản phần từ danh mục admin, yêu cầu admin duyệt sản phẩm, tìm kiếm sản phẩm)  Quản lý hóa đơn (hóa đơn seller duyệt trước sau admin xác nhận giao hàng)  Quản lý đánh giá trả lời đánh giá Trang client:  Trang chủ hiển thị danh mục sản phẩm sản phẩm  Trang sản phẩm có chức lọc sản phẩm theo giá  Trang tìm kiếm sản phẩm  Trang chi tiết sản phẩm(tất thông tin sản phẩm)  Trang shop (xem thông tin shop sản phẩm)  Trang chọn phương thức toán  Trang đánh giá mua hàng  Trang thông tin cá nhân Một số chức bậc: Thông báo cho seller người dùng mua sản phẩm admin duyệt sản phẩm, khách hàng nhận thông báo đơn hàng xác nhận hay giao hàng xong 71 Hình 29.Thông báo seller Hiển thị thông tin shop cho khách hàng biết Hình 30.Thơng tin seller trang chủ Thanh tốn momo trực tiếp cho phép áp dụng mã giảm giá 72 Hình 20 Trang toán khách hàng Seller trả lời đánh giá khách hàng Hình 31.Seller trả lời đánh giá 73 CHƯƠNG 2: ĐÁNH GIÁ ƯU NHƯỢC ĐIỂM Ưu điểm: tìm hiểu tốt cơng nghệ, có tham khảo trang thương mại điện tử lớn, xây dựng website với chức bản, phù hợp với thực tế đưa vào sử dụng lọc tìm kiếm sản phẩm cách nhanh chóng, có tốn qua ví điện tử, thống kê doanh thu cho người bán, thông báo qua mail cách xác Nhược điểm: giao diện trang chủ chưa đẹp, thiếu tính phí ship hàng, cịn thiếu xót số tín hướng dẫn mua bán hàng, hỏi đáp sản phẩm liên hệ với nhà bán 74 CHƯƠNG 3: HƯỚNG DẪN CHẠY ỨNG DỤNG Bước 1: Vào link tải node https://nodejs.org/en/ lưu ý tải recommended không tải Bước 2: Cài yarn global npm install global yarn Bước 3: Cài MongoDB link https://docs.mongodb.com/manual/installation/ để cài MongoDB version 4, cài thêm tool MongoDB Compass để sử dụng Mongo link https://www.mongodb.com/try/download/compass B4: Tải data từ thư mục database, sau tạo database với tên doan2 sau tạo collection với tên hình (branchs, categories, orderitems, orders, origins, sellers, store, users) sau lấy data từ thư mục database import vào dùng theo cách chạy lệnh video demo Hình 32.Giao diện lưu trữ data mongo compass Bước 5: Vô thư mục project tạo file có tên env 75 ● backend-doan: tạo thư mục tên env copy paste đoạn code vào lưu lại JWT_SELLER=seller JWT_ADMIN=admin JWT_USER=user USER_FORGOT_PASSWORD_SECRET=secret_forgot ADMIN_SECRET=admin_secret FORGOT_PASSWORD_SECRET=forgot_password_secret CLOUDINARY_NAME=phamtrung CLOUDINARY_KEY=231235934529634 CLOUDINARY_SECRET=ugJFwe6vMI1huxPIZTznSm6aadE DB_URL=mongodb://localhost/doan2 MAILGUN_KEY=f22c08854a1637490e17f1d23995c07d-f7d0b107- 860e0e36 SELLER_PORTAL=http://localhost:3003 SHOP=http://localhost:3004 PAYMENT_BACK_URL=https://6d285d7f4573.ngrok.io/api/orders/chec kout/momo 76 Hình 33.File env visual studio code ● seller-portal : copy lệnh bên làm tương tự backend NEXT_PUBLIC_API_URL=http://localhost:3002/api PORT=3003 ● doan: tượng tự NEXT_PUBLIC_API_URL=http://localhost:3005/api ● admin: tương tự NEXT_PUBLIC_API_URL=http://localhost:3001/api/ Bước 6: Mở source code vào thư mục có tên backend-doan sau mở cửa sổ terminal chạy hình (đối với window mở terminal làm tương tự) để chạy trang: trang chủ, admin, seller làm theo video demo cách build docker-compose 77 Hình 34 Terminal chạy backend Bước 7: Mở thư mục frontend seller-portal, admin-fe, doan sau open terminal ứng với thư mục này, gõ tất cửa sổ terminal gõ lệnh yarn sau enter để cài hết modules Bước 8: Khi cài xong modules ứng với cửa sổ terminal chạy lệnh yarn dev -> sau ctrl + click chuột vào đường link để chạy mở trang web ví dụ hình đường link http://localhost:3004 78 Hình 35.Chạy frontend terminal (Lưu ý: thực không thành công xin vui lòng xem lại video hướng dẫn demo) 79 ... 3: TÌM HIỂU CÁC TRANG WEB BÁN ĐỒ NỘI THẤT I TRANG WEB BÁN ĐỒ NỘI THẤT NHADEP.COM.VN 1.Giới thiệu trang web Web nội thất Nhà Đẹp thương hiệu đầu lĩnh vực nội thất Việt Nam có tuổi đời lâu Được... CHƯƠNG 4: PHÂN TÍCH WEBSITE BÁN ĐỒ NỘI THẤT 33 I.MÔ TẢ WEBSITE .33 Lý chọn đề tài 33 2.Các chức xây dựng 33 II CÁC THÀNH PHẦN CẦN CÓ ĐỂ WEBSITE CÓ THỂ HOẠT... Homeooffice.com.vn website bán đồ nội thất trực tuyến thuộc sở hữu công ty TNHH TMDV Home Office đưa vào hoạt động vào tháng năm 2015 Nội thất Home Office kinh doanh sản xuất đa dạng phục vụ 30 cho nội thất