ĐỀ TÀI XÂY DỰNG WEB THƯƠNG MẠI ĐIỆN TỬ

TRƯỜNG ĐẠI HỌC BÁCH KHOA KHOA CÔNG NGHỆ THÔNG TIN Tel (84-236) 3736949, Fax (84-236) 3842771 Website: http://dut.udn.vn/khoacntt, E-mail: cntt@dut.udn.vn BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH CNPM THIẾT KẾ WEBSITE ĐỀ TÀI: XÂY DỰNG WEB THƯƠNG MẠI ĐIỆN TỬ MÃ HỌC PHẦN: 17.11A NHÓM SINH VIÊN THỰC HIỆN: Họ tên: Lâm Ngọc Huy Họ tên: Nguyễn Văn Tự Họ tên: Trần Văn Tú Lớp: 17T3 Lớp: 17T3 Lớp: 17T3 Đà Nẵng, 08/2021 MỤC LỤC MỞ ĐẦU …………………………………………………………………………5 CHƯƠNG 1: TỔNG QUAN VỀ REACTJS VÀ SPRING FRAMEWORK .7 1.1 ReactJS .7 1.1.1 ReactJS gì? 1.1.2 Các tính react JS gì? 1.1.3 Lợi ích ReactJs 1.2 Spring Boot Framework 10 1.2.1 Tổng quan API RESTful 10 1.2.2 Spring framework gì? 11 1.3 Tổng quan HTML/CSS 12 1.3.1 Sơ lược HTML 12 1.3.2 Sơ lược CSS 14 CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HÊ ̣ THỚNG E-COMMERCE 16 2.1 2.2 Khảo sát 16 Phân tích hệ thống 16 2.2.1 Đặc tả hệ thống .16 2.2.2 Yêu cầu chức 17 2.2.3 Yêu cầu phi chức 17 2.2.4 Mô tả chức .18 2.2.5 User case 19 2.2.6 Mơ hình quan liệu 28 CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG MUA HÀNG 29 3.1 3.2 3.3 Giao diện trang web chức dành cho khách hàng 29 Giao diện trang web chức dành cho người bán 33 Giao diện trang web chức dành cho admin 37 KẾT LUẬN …………………………………………………………………… 39 Kết đạt 39 Hạn chế đề tài 39 Hướng phát triển đề tài 39 TÀI LIỆU THAM KHẢO 40 Bảng phân chia công việc Tên thành viên Lâm Ngọc Huy Tên công việc + Hỗ trợ thiết kế Database + Hỗ trợ viết API cho khách hàng và người bán hàng + Viết API cho admin + Frontend cho admin Nguyễn Quang Tuấn + Thiết kế Database + Viết API sign in, sign up + Viết API chức Diretor (thêm, sửa, xoá khách sạn, thống kê khách sạn) + Viết API chức Admin (mở khoá director, thống kê admin) + Viết API chức chung tài khoản (Cập nhật thông tin cá nhân, chỉnh sửa ảnh, quên mật khẩu) +Thiết kế Database + Viết API chức User (booking, huỷ booking, thống kê user) + Viết API chức search phịng + Làm giao diện phía front-end Hồng Trịnh Anh Thái MỞ ĐẦU Tổng quan đề tài Thiết kế website đặt phòng khách sạn trực tuyến tiêu chí hàng đầu cho nhu cầu truyền thông dịch vụ nhiều trung tâm lữ hành cơng tư vào ngồi nước Một số ngành dịch vụ quan trọng dịch vụ du lịch Du lịch đã được chứng minh là mô ̣t chiếc phao cứu sinh cho rất nhiều cô ̣ng đồng nông thôn, nhiên sức mạnh thực sự của du lịch vẫn cần được khai thác triê ̣t để Ngành du lịch không chỉ là nguồn cung cấp viê ̣c làm hàng đầu, đă ̣c biê ̣t đối với phụ nữ và niên, mà còn mang đến hô ̣i gắn kết lãnh thổ và hòa nhâ ̣p kinh tế – xã hô ̣i cho những vùng dễ bị tổn thương nhất Du lịch giúp cộng đồng nông thôn gìn giữ di sản văn hóa thiên nhiên độc đáo họ, hỗ trợ dự án bảo tồn, bao gồm dự án bảo vệ lồi có nguy bị tuyệt chủng, phong tục bản sắc mai mô ̣t Bây thời đại cơng nghệ, có khoảng 70% dân số sử dụng điện thoại thông minh Trong khoảng 80% người thơng thạo việc tìm kiếm mạng Việc tìm kiếm thơng tin chuyến du lịch, đặt khách sạn hồn tất vịng vài giây Như để người chủ khách sạn tiếp cận với khách hàng cách tốt có cách thiết kế phát triển website chuyên nghiệp phục vụ cho điều Mục đích ý nghĩa đề tài 2.1 Mục đích  Nghiên cứu cách tổ chức hoạt động framework React Js áp dụng xây dựng giao diện ứng dụng  Nghiên cứu phương thức nhận trả liệu Java Spring framework áp dụng xây dựng API cho ứng dụng  Xây dựng web application đáp ứng nhu cầu mua hàng online qua mạng, tra cứu thông tin sản phẩm, trực tiếp đánh giá sản phẩm, dễ dàng thao tác với nhiều đối tượng  Xây dựng hệ thống quản lý thông tin cửa hàng, khách hàng  Xây dựng chức thống kê, báo cáo số doanh số cửa hàng theo tháng, số lượng đơn đặt hàng tháng để nhà quản lý đưa hướng phát triển đắn cho thời gian tới 2.2 Ý nghĩa  Xây dựng web application giúp cho việc quản lý cửa hàng,mua hàng online trở nên dễ dàng  Thuận tiện dễ dàng việc đặt phịng, tìm kiếm thơng tin, tối ưu hoá thời gian khách hàng Phương pháp thực  Phương pháp quan sát  Phương pháp điều tra, khảo sát nhu cầu thực tế, sử dụng phương pháp phân tích, điều tra thống kế từ xác định yêu cầu chức yêu cầu phi chức cần thiết  Tổng hợp tài liệu liên quan đến xây dựng phát triển phần mềm Bố cục đề tài Báo cáo đề tài bao gồm nội dung sau:  Mở đầu  Chương 1: Tổng quan ReactJs Spring Framework  Chương 2: Phân tích thiết kế hệ thống mua hàng online  Chương 3: Xây dựng ứng dụng mua hàng online  Kết luận CHƯƠNG 1: TỔNG QUAN VỀ ReactJS VÀ Spring Framework ReactJS 1.1.1 ReactJS gì? ReactJS hay react thư viện, viết JavaScript, dùng để xây dựng giao diện người dùng Tính đến thời điểm tại, có khoảng 1300 developer 94000 trang web sử dụng ReactJS hiểu nơm na thư viện, có chứa nhiều JavaScript mã nguồn “cha đẻ” Facebook Mục đích website sử dụng reactJS phải chạy thật mượt thật nhanh, có khả mở rộng cao đơn giản thực Về bản, tính reactJS thường xuất phát từ việc tập trung phần mềm riêng lẻ, cho phép developer có chức phá vỡ giao diện người dùng từ cách phức tạp biến trở thành phần mềm đơn giản Hiểu đơn giản render liệu khơng thực vị trí server mà cịn vị trí client sử dụng reactJS Hiện nay, reactJS thường dùng để thiết kế bố cục cho trang web, hạn chế cấu trúc khó Thay vào sử dụng JSX nhúng vào đoạn HTML javascript, bạn thấy cú pháp dễ hiểu JSX tối ưu code biên soạn, vừa giúp ích cho người lập trình tiện cho việc biên dịch 1.1.2 Các tính react JS gì? Khi sử dụng react JS người dùng khai thác nhiều tính khác nhau, phải kể đến:    Viết ứng dụng trực tiếp JavaScript Phá vỡ cấu trúc UI phức tạp, biến chúng trở thành component độc lập    Chuyển liệu tùy biến đến UI component cụ thể Thay đổi trạng thái cho nhiều component (child) ứng dụng không làm ảnh hưởng tới component gốc (parent) trạng thái Stateful Biết xác cần render lại cần bỏ DOM 1.1.3 Lợi ích ReactJs Dễ dàng sử dụng, giao diện thân thiện Khi sử dụng reactJS người dùng tạo web hấp dẫn, nhanh 1.1.3.1 chóng, hiệu với mã hóa tối thiểu Nhờ đó, người dùng dễ dàng cảm nhận tốc độ tối ưu react JS component (thành phần) riêng lẻ Thay phải làm việc tồn ứng dụng website, lập trình viên chia nhỏ cấu trúc UI thành nhiều component đơn giản Hỗ trợ reusable component Java Khơng phải lập trình viên thiết kế component hiệu 1.1.3.2 quả, việc tái sử dụng component giúp cho developer có hội sử dụng rộng rãi tính tối ưu sẵn Nhờ có react JS, developer hồn tồn sử dụng lại components phát triển thành ứng dụng khác có chức Viết component dễ dàng Khi viết react component bạn phải sử dụng tới JSX – kết hợp 1.1.3.3 JavaScript HTML Mặc dù phần mở rộng cú pháp phổ biến JSX người dùng đánh giá cao phát triển component đặc biệt ứng dụng khối lượng lớn Khi sử dụng JSX việc xây dựng web app với reactJS trở nên dễ dàng hơn, người dùng hồn tồn mở rộng cú pháp Hiệu suất làm việc tốt so với virtual DOM Đa số ứng dụng website gặp rắc rối trình DOM 1.1.3.4 Với lợi sử dụng virtual DOM, react JS giúp người dùng tránh vấn đề Ngoài ra, reactJS cho phép người dùng xây dựng virtual DOM host chúng nhớ Ưu điểm giúp virtua thay đổi DOM thực thay đổi; cập nhật liên tục ứng dụng để hạn chế tình trạng gián đoạn Người dùng sử dụng liên tục, website ổn định giúp doanh thu tăng trưởng mức cao Thân thiện với SEO Đây điều đặc biệt có reactJS 1.1.3.5 vấn đề lớn JS Frameworks hầu hết JS Frameworks khơng thân thiện với ổ máy tìm kiếm cải thiện nhiều Đối với reactJS không nằm nhóm khơng thân thiện với SEO hỗ trợ render trả trình duyệt dạng webpage mà bạn chạy reactJS server virtual DOM Chính lý mà react dễ dàng đáp ứng đầy đủ tính SEO Friendly Spring Boot Framework 1.2.1 Tổng quan API RESTful 1.2.1.1 Resource Quản lý resource (tài nguyên) phần quan trọng chiếm phần lớn việc phát triển website Trong đó resource của website khác khác Với trang mạng xã hội Facebook resource thường danh sách người dùng (user account), danh sách viết (post article), ảnh đăng (photo image), trang fanpage (fanpage) Đối với trang chia sẻ ảnh Instagram resource ảnh đăng (photo), danh sách người dùng (user) Đối với trang bán hàng resource danh sách sản phẩm (product), danh sách người bán (seller), danh sách khách hàng (user hay customer) Việc quản lý resource website bao gồm tác vụ chính:  Tạo resource (create)  Lấy thơng tin resource (read)  Cập nhật resource (update)  Xoá resource (delete) 10 1.2.1.2 RESTful API Là Gì RESTful API tiêu chuẩn dùng việc thiết kế thiết kế API cho ứng dụng web để quản lý các resource. RESTful là kiểu thiết kế API sử dụng phổ biến ngày Trọng tâm REST quy định cách sử dụng HTTP method (như GET, POST, PUT, DELETE ) cách định dạng URL cho ứng dụng web để quản resource Với ứng dụng web thiết kế sử dụng RESTful, lập trình viên dễ dàng biết URL HTTP method để quản lý resource Cũng cần lưu ý thân RESTful không quy định logic code ứng dụng RESTful không giới hạn ngôn ngữ lập trình ứng dụng Bất kỳ ngơn ngữ lập trình (hoặc framework) áp dụng RESTful việc thiết kế API cho ứng dụng web 1.2.1.3 REST REST(ful) REST và RESTful khác REST viết tắt cụm từ Representational State Transfer và ứng dụng sử dụng kiểu thiết kế REST gọi RESTful (-ful là tiếp vị ngữ giống như beauty và beautiful) Tất nhiên bạn sử dụng thuật ngữ REST thay cho RESTful và ngược lại 1.2.2 Spring framework gì? Spring framework đời để giúp nhà phát triển xây dựng hệ thống chạy ứng dụng JVM cách thuận tiện, đơn giản nhanh chóng Đây mã nguồn mở phát triển nhiều người sử dụng. Với cơng đoạn hơn, Spring trao cho ta sức mạnh để:  Nhanh chóng tạo API  Kết nối API ta với nguồn liệu sở liệu quan hệ, MySQL, API REST, v.v  Kết hợp mối quan hệ mơ hình kiểm soát truy cập cho API phức tạp  Mở rộng API 11 2.2.5.4 Biểu đồ  Biểu đồ đăng ký Hình 11 Biểu đồ đăng ký 26  Biểu đồ đăng nhập Hình 12 Biểu đồ đăng nhập  Biểu đồ sửa thông tin cá nhân Hình 13 Biểu đồ sửa thơng tin cá nhân 27 2.2.6 Mơ hình quan liệu  Mơ hình quan hệ liệu Mơ hình quan hệ liệu thể mối quan quan hệ bảng sở liệu Kết cuối q trình phân tích hệ thống thơng tin Hình 14 Mơ hình quan hệ liệu 28 CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG ĐẶT PHÒNG KHÁCH SẠN HOTELBOOKING 3.1 Giao diện trang web chức dành cho khách hàng  Trang chủ: Hiển thị thông tin website, giới thiệu trang web, danh sách lựa chọn chức 29 Hình 15 Giao diện trang chủ 30  Giao diện chức tìm phịng Hình 16 Giao diện tìm phịng 31  Giao diện chức xem thơng tin tài khoản Hình 17 Giao diện xem thơng tin tài khoản  Giao diện chức thống kê lịch sử đặt 32 3.2 Giao diện trang web chức dành cho chủ khách sạn  Giao diện chức xem thông tin cá nhân 33  Giao diện danh sách khách sạn Hình 18 Giao diện xem khách sạn  Giao diện chức thêm khách sạn Hình 19 Giao diện thêm khách sạn 34  Giao diện chức sửa thơng tin khách sạn Hình 20 Giao diện cập nhật thông tin khách sạn  Giao diện danh sách phịng 35  Giao diện thêm phịng Hình 21 Giao diện thêm phòng  Giao diện chỉnh sửa phịng Hình 22 Giao diện chỉnh sửa phịng  Giao diện thống kê Director 36 Hình: Thống kê doanh số tất khách sạn theo tháng Hình: Thống kê đơn đặt khách sạn khách sạn theo tháng 3.3 Giao diện trang web chức dành cho admin  Giao diện chức quản lý đăng ký director 37 Hình 23 Giao diện duyệt director  Giao diện thống kê khách sạn theo thành phố Hình 24 Giao diện thống kê khách sạn theo thành phố 38 KẾT LUẬN Kết đạt  Nắm vững kiến thức thiết kế xây dựng website với reactJs Springframework  Xây dựng hệ thống cung cấp đầy đủ chức website Hạn chế đề tài Ngoài vấn đề đạt vấn đề chưa giải quyết:  Chưa xuất hồ sơ qua thơng tin bệnh nhân để giảm q trình thủ tục  Hệ thống trang quản trị nhiều thiếu sót  Chưa cung cấp đầy đủ chức cho khách hàng chủ khách sạn  Giao diện đơn giản thiếu thu hút  Cơ sở liệu cịn nhiều thiếu sót  Hệ thống bảo mật chưa cao Hướng phát triển đề tài Xây dựng thêm chức thiếu:  Xây dựng giao diện đẹp mắt, sinh động hơn, sở liệu quán  Xây dựng thêm nhiều lọc cho khách hàng dễ dàng biệc tìm kiếm  Xây dựng thêm tính người quản trị 39 TÀI LIỆU THAM KHẢO [1] Website https://topdev.vn/blog/restful-api-la-gi/ [2] Website http/www.w3schools.com [3] Website https://bkaii.com.vn/tin-tuc/334-khai-niem-co-ban-ve-restful-api 40 ... MUA HÀNG 29 3.1 3.2 3.3 Giao diện trang web chức dành cho khách hàng 29 Giao diện trang web chức dành cho người bán 33 Giao diện trang web chức dành cho admin 37 KẾT LUẬN ……………………………………………………………………... Khảo sát Để có trang web đảm bảo chất lượng hoàn thiện em thực khảo sát tham khảo số trang web đặt phịng khách sạn khác để từ giúp cho em việc hồn thiện sản phẩm tốt Các trang web tham khảo: https://www.booking.com,... luận: Từ việc tham khảo trang web giúp cho em định hình cấu trúc trang web đặt phòng online Những chức chủ sở hữu khách sạn, phương thức đặt phịng , ngồi trang web phải có giao diện dễ nhìn,