Đồ án tìm hiểu về reactjs và xây dựng website bán hàng

ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM -   - LỚP: SE122.L11 BÁO CÁO ĐỒ ÁN GIẢNG VIÊN HƯỚNG DẪN: ThS Thái Thụy Hàn Uyển Đề tài:Tìm hiểu ReactJs Xây dựng website bán hàng NHÓM THỰC HIỆN: 11 Nguyễn Mạnh Hiếu 17520479 Ôn Trần Ngọc Hiển 16520369 Tp Hồ Chí Minh, Ngày 22 tháng năm 2021 CHƯƠNG GIỚI THIỆU CHUNG 1.1 Tính cấp thiết đề tài Nhu cầu sử dụng xã hội động thức đẩy sản xuất, chung ta biết việc thiếu thông tin cho công đoạn đáp ứng cung cầu làm cho việc đưa sản phẩm đến tay người tiêu dùng trở nên khó khăn gây nhiều lãng phí cho xã hội Bên cạnh việc phổ biến sử dụng Internet tạo bước ngoặt định hướng phát triên ngành Công Nghệ Thông Tin nước ta với nhu cầu sử dụng phương tiện truyền thông để trao đổi thông tin ngày cáng phát triển mạnh Từ thực tế việc đưa thơng tin đáp ứng nhu cầu người hổ trợ cho việc mua bán diễn cách nhanh chóng, tiết kiệm trở nên vô cấp thiết Mua bán qua mạng xu nay, hay gọi thương mại điện tử, mảnh đất cho thị trưởng hàng tiêu dùng giai đoạn phát triển kinh tế nước ta Việc bạn thể dung dung ngồi nhà mà du ngoạn từ hàng sang cửa hàng trở thành thực Ngày hàng hóa nào, bạn đặt mua qua mạng internet Trong số hàng hóa mua bán qua internet nội thất năm Nội thất mặt hàng cần thiết cho gia đình, muốn mua mạng khách hàng cần ngồi nhà có người đến giao Do đặc điểm mua bán Internet người mua người bán không gặp mặt người mua kiểm tra trực tiếp hàng hóa Vì cần phải xây dụng website đẹp mặt đầy đủ thông tin sản phẩm, Cũng chức mua hàng,… 1.2 Mục đích đề tài Khách hàng tìm kiếm thông tin sản phẩm công ty MTL Khách hàng đặt sản phẩm trực tuyến Website cập nhật thông tin đặt hàng lên sở liệu, cho phép người quản trị phân quyền thao tác công việc sau :  Tìm kiếm đơn đặt hàng xác nhận hay chưa xác nhận  Xác nhận đơn đặt hàng hợp lệ, chỉnh sửa thông tin khác hàng thông tin đặt hàng  Thống kê số lượng mua hàng khách hàng Thay đổi, thêm xóa bỏ thơng tin hình ảnh sản phẩm cơng ty muốn giới thiệu cho khách hàng Theo dõi tình hình liên lạc thông qua website khách hàng, để đáp ứng kịp thời nhu cầu họ Về tổ chức lưu trữ, thực yêu cầu sau :  Thêm, xóa, sửa thơng tin, hình ảnh sản phẩm công ty tổ chức, phục vụ cho công tác quản lý, thống kê tình hình hoạt động cơng ty  Thêm xóa, sửa thơng tin, hình ảnh sản phẩm 1.2 Công cụ phát triển a ReactJS React.js thư viện Javascript lên năm gần với xu hướng Single Page Application Trong framework khác cố gắng hướng đến mơ hình MVC hồn thiện React bật với đơn giản dễ dàng phối hợp với thư viện Javascript khác Nếu AngularJS Framework cho phép nhúng code javasscript code html thông qua attribute ng-model, ngrepeat với react library cho phép nhúng code html code javascript nhờ vào JSX, bạn dễ dàng lồng đoạn HTML vào JS.Tích hợp javascript HTML vào JSX làm cho component dễ hiểu React thư viện UI phát triển Facebook để hỗ trợ việc xây dựng thành phần (components) UI có tính tương tác cao, có trạng thái sử dụng lại React sử dụng Facebook production, www.instagram.com viết hoàn toàn React Ngoài đồ án sử dụng Redux để quản lý state component website cách hiệu Giới thiệu Redux Redux tool dùng để quản lý state cho ứng dụng Javascript Nó giúp bạn viết ứng dụng hoạt động cách quán, chạy môi trường khác (client, server, and native) dễ dàng để test Redux đời lấy cảm hứng từ tư tưởng ngôn ngữ Elm kiến trúc Flux Facebook Do Redux thường dùng kết hợp với React Hầu hết lib React, Angular, etc built theo cách cho components đến việc quản lý nội state chúng mà không cần thư viện or tool từ bên ngồi Nó hoạt động tốt với ứng dụng có components ứng dụng trở lên lớn việc quản lý states chia sẻ qua components biến thành công việc lặt nhặt Trong app nơi data chia sẻ thông qua components, dễ nhầm lẫn để thực biết nơi mà state live Một lý tưởng data component nên live component Vì việc share data thơng qua components anh em trở nên khó khăn Ví dụ, react để share data thơng qua components anh em, state phải live component cha Một method để update state cung cấp component cha pass props đến components a.1.Actions Actions đơn giản events Chúng cách mà send data từ app đến Redux store Những data từ tương tác user vs app, API calls từ form submission a.2.Reducers Reducers function nguyên thủy chúng lấy state app, thực action trả state Những states lưu objects chúng định rõ cách state ứng dụng thay đổi việc phản hồi action gửi đến store a.3.Store Store lưu trạng thái ứng dụng ứng dụng Redux Bạn access state lưu, update state, đăng ký or hủy đăng ký listeners thông qua helper methods b Netcore ASP.NET Core open-source framework đa tảng (cross-platform) cho việc xây dựng ứng dụng dựa kết nối đám mây, giống web apps, IoT backend cho mobile Ứng dụng ASP.NET Core chạy NET Core phiên đầy đủ NET Framework Nó thiết kế để cung cấp tối ưu development framework cho dụng mà triển khai đám mây (clound) chạy on-promise Nó bao gồm thành phần theo hướng module nhằm tối thiểu tài nguyên chi phí phát triển, bạn giữ lại mềm giẻo việc xây dựng giải pháp bạn Bạn phát triển chạy ứng dụng ASP.NET Core đa tảng Windows, Mac Linux Đồng thời trở thành mã nguồn mở Đây thay đổi lớn theo quan trọng ASP.NET Core Điều mà trước khó có lập trình viên nghĩ đến Có lẽ xu mà ngôn ngữ lập trình hướng tới c PosgreSQL PostgreSQL hệ thống quản trị sở liệu quan hệ-đối tượng (object-relational database management system) có mục đích chung, hệ thống sở liệu mã nguồn mở tiên tiến PostgreSQL phát triển dựa POSTGRES 4.2 phịng khoa học máy tính Berkeley, Đại học California PostgreSQL thiết kế để chạy tảng tương tự UNIX Tuy nhiên, PostgreSQL sau điều chỉnh linh động để chạy nhiều tảng khác Mac OS X, Solaris Windows PostgreSQL phần mềm mã nguồn mở miễn phí Mã nguồn phần mềm khả dụng theo license PostgreSQL, license nguồn mở tự Theo đó, bạn tự sử dụng, sửa đổi phân phối PostgreSQL hình thức PostgreSQL không yêu cầu nhiều công tác bảo trì có tính ổn định cao Do đó, bạn phát triển ứng dụng dựa PostgreSQL, chi phí sở hữu thấp so với hệ thống quản trị liệu khác CHƯƠNG : PHÂN TÍCH THIẾT KẾ WEBSITE Sơ đồ use case tổng quát: 2.1 Mô tả website Hoạt động kinh doanh online giúp tăng hiệu quả, doanh thu cho doanh nghiệp linh doanh nội thất Hiện nay, nhiều chủ nội thất kinh doanh theo hình thức truyền thống Tuy nhiên muốn mở rộng kinh doanh sang thị trường trực tuyến khơng thể thiếu website nội thất Có thiết kế website nội thất, giúp khách hàng có nhìn tổng quan, tăng doanh thu cho cửa hàng nội thất bạn Cung cấp đầy đủ thơng tin, hình ảnh sản phẩm nội thất Một thiết kế website nội thất, giúp khách hàng có nhìn tổng quan doanh nghiệp, sản phẩm thơng qua việc cung cấp đầy đủ thông tin giá cả, tính năng, hình ảnh sản phẩm nội thất Khi doanh nghiệp có thiết kế website nội thất, thông tin sản phẩm nội thất đăng tải đầy đủ với hình ảnh sản phẩm giúp khách hàng nắm thông tin cách đầy đủ, xác rõ ràng Việc nắm bắt đầu đủ thông tin sản phẩm nội thất giúp khách hàng đưa lựa chọn xác cho nhu cầu Bên cạnh khách hàng có nhìn tổng quan sản phẩm, so sánh ưu, nhược điểm sản phẩm khác để đưa lựa chọn đắn Hoạt động mua bán, toán dễ dàng Ngồi việc cung cấp thơng tin hình ảnh cách đầy đủ, xác cho khách hàng việc có thiết kế website nội thất giúp cho hoạt động mua bán, toán dễ dàng trước nhiều Nếu với hình thức kinh doanh truyền thống khách hàng phải đến trực tiếp cửa hàng để xem sản phẩm với website nội thất việc mua bán trở nên dễ dàng nhiều Khách hàng tới trực tiếp cửa hàng mà cần truy cấp vào website nội thất xem thông tin sản phẩm đăng tải cách đầy đủ, cụ thể xác với hình ảnh minh họa rõ ràng khách hàng chọn lựa sản phẩm chất lượng, phù hợp với nhu cầu Tiếp theo, việc đặt mua hàng dễ dàng Chỉ cần cú click chuột vào nút “Mua hàn” website, sau lựa chọn hình thức tốn khách hàng mua sản phẩm Sản phẩm sau giao đến tận tay khách hàng tiện lợi nhanh chóng Tính tương tác doanh nghiệp, khách hàng cao Có thiết kế website nội thất, giúp khách hàng có nhìn tổng quan thơng qua việc tương tác dễ dàng, thuận tiện website giứa doanh nghiệp khách hàng Mọi thắc mắc khách hàng sản phẩm giải đáp tận tình, xác, nhanh chóng Hiện website tích hợp tính chat trực tuyến Khi khách hàng có thắc mắc sản phẩm truy cập website hỏi trực tiếp qua hệ thống chat người quản trị website trả lời trực tiếp cho khách hàng để cung cấp thơng tin họ cần Chính tiện ích giúp cho khách hàng cảm thấy hài lòng, phục vụ chu đáo giúp họ thoải mái trình mua hàng khiến cho hiệu bán hàng doanh nghiêp tăng Tạo thu hút, ý cho khách hàng Khi có thiết kế website nội thất doanh nghiệp tạo thêm thu hút, ý cho khách hàng giúp tăng thêm hội bán hàng so với hình thức kinh doanh truyền thơng Để tăng thu hút thiết kế website thêm vào yếu tố như: âm nhạc, video… không nên lạm dụng làm ảnh hưởng đến tốc độ tải trang Với thiết kế website nội thất, giúp khách hàng có nhìn tổng quan đơn vị, doanh nghiệp kinh doanh nội thất đền nên thiết kế web 2.2 Cơ cấu phận nhiệm vụ  Chức giỏ hàng Đầu đề Tên chức : Chức giỏ hàng Đầu vào : Sản phẩm có sở liệu web Đầu : Danh sách sản phẩm mua ( Hóa đơn )  Chức xóa giỏ hàng Đầu đề Tên chức : Xóa giỏ hàng Đầu vào : Sản phẩm có giỏ hàng (VD: Kem chống nắng) Đầu : Giỏ hàng xóa 2.5 Ngơn Ngữ Và Hề Điều Hành 2.5.1 Môi trường phát triển : Hệ điều hành : Window 7,8,8.1,10 Pro Hệ quản trị CSDL : Postgresql Cơng cụ phân tích thiết kế : PowerDesigner Cơng cụ xây dựng : Reactjs Các trình duyệt web : Google Chrome, Cốc Cốc, Mozila FireFox, IE 2.5.2 Môi Trường Triển Khai : Các trình duyệt web : Google Chrome, Cốc Cốc, Mozila FireFox, IE Dịch vụ lưu trữ web : Web Hosting Dịch vụ Domain CHƯƠNG PHÂN TÍCH THIẾT KẾ CSDL 3.1 Thiết kế CSDL Dựa vào phần thiết kế chương CSDL website bán hàng có             Table Product Table ProductHotDeal Table Categories Table Tags Table Orders Table Customers Table Contacts Table Invoices Table Invoices Detail Table BlogPost Table BlogPost Tag Nhóm Table Microsoft Identity 3.2 Chi tiết liệu table Bảng Product Bảng : Product Tên thuộc tính Diễn Giải Kiểu Loại liệu Độ rộng liệu Id ID Int Ràng buộc 30 ký tự Name Tên string Không ràng 50 ký tự Thumbnail Ảnh nhỏ string buộc 50 ký tự Price Giá string Không ràng 10 ký tự Status Trạng thái byte buộc 30 ký tự Images Ảnh string Không ràng 50 ký tự buộc Description Mô tả string 50 ký tự string Khơng ràng Size Kích cỡ 50 ký tự CatagoryID Danh mục int Tag Tag int buộc Không ràng buộc Không ràng 100 ký tự buộc Khơng ràng buộc Khóa ngoại Khóa ngoại  Bảng Categories Thuộc tính Diễn Giải Bảng : Banner Kiểu liệu Loại Độ rộng 50 ký tự Id Id Int liệu Ràng buộc Name Tên Danh string Không 100 ký tự Status mục byte ràng buộc 100 ký tự CreatedTi Trạng thái datetime Không me Thời gian tạo ràng buộc  Bảng Invoices Thuộc tính Diễn Giải Bảng : Invoice Kiểu liệu Loại Độ rộng 50 ký tự Id Id Int liệu Ràng buộc Amount Số lượng Int Ràng buộc 50 ký tự CreatedTi Thời gian tạo datetime Không 100 ký tự me ràng buộc  Bảng InvoicesDetail Bảng : Thuộc tính Diễn Giải InvoicesDetail Kiểu liệu Loại Độ rộng 50 ký tự 100 ký tự Id Id Int liệu Ràng buộc InvoiceId Id hóa đơn Int Khóa ngoại CreatedTi Thời gian tạo Date Khơng me Id sản phẩm Int Khóa ngoại ProductId Số lượng Int Khóa ngoại 100 ký tự Quantity  Bảng Customers Bảng : Thuộc tính Diễn Giải Customers Kiểu liệu Loại Độ rộng 50 ký tự Id Id Int liệu Ràng buộc firstName Họ String Không 100 ký tự lastName Tên String Khơng 100 ký tự Gender Giới tính Bool Không Bool Avatar Avatar String Không 50 ký tự Phone Điện thoại String Không 100 ký tự Address Địa String Không 100 ký tự Note Ghi String Không 50 ký tự Status Trạng thái Byte Không 100 ký tự BirthDate Ngày sinh Datetime Không 100 ký tự CreatedTi Thời gian tạo Datetime Không 50 ký tự me Thời gian Datetime Không 100 ký tự UpdatedTi update Contact Kiểu liệu Loại Độ rộng 10 ký tự me  Bảng Contact Bảng : Thuộc tính Diễn Giải Id Id Int liệu Ràng buộc Name Tên string Không 50 ký tự Email Email string Không 50 ký tự Subject Chủ đề string Không 10 ký tự Message Nội dung string Không 50 ký tự Status Trạng thái byte Không 50 ký tự CreatedTi Thời gian tạo datetime Không 10 ký tự me User ID int Khóa ngoại 10 ký tự Bảng : Orders Kiểu liệu Loại Độ rộng 10 ký tự UserId  Bảng Orders Thuộc tính Diễn Giải Id Id Int liệu Ràng buộc CreatorId Id người tạo Int Ràng buộc 50 ký tự CustomerI Id Khách Int Ràng buộc 50 ký tự d hàng String Không 50 ký tự AddressShi Địa giao String Không 50 ký tự p Mã giao dịch Datetime Không 50 ký tự Code Thời gian tạo Datetime Không 50 ký tự CreatedTi Thời gian Byte Không 50 ký tự me update String Không 50 ký tự UpdatedTi Trang thái me đơn OrderStatu Số điện thoại Bảng : Tags Kiểu liệu Loại Độ rộng 10 ký tự s Phone  Bảng Tags Thuộc tính Diễn Giải Id Id Int liệu Ràng buộc Name Tên String Không 50 ký tự Color Màu String Không 50 ký tự Type Loại String Không 50 ký tự CreatedTi Thời gian tạo Datetime Không 50 ký tự BlogPost Kiểu liệu Loại Độ rộng 10 ký tự 50 ký tự me  Bảng BlogPost Bảng : Thuộc tính Diễn Giải Id Id Int liệu Ràng buộc Thumbnail Ảnh nhỏ String Không Title Tiêu đề String Không 50 ký tự Description Mô tả String Không 50 ký tự Content Nội dung String Không 50 ký tự Status Trạng thái Byte Không 50 ký tự CreatedTi Thời gian tạo Datetime Không 50 ký tự me Thời gian Datetime Không 50 ký tự UpdatedTi update Int Không 50 ký tự me User Id UserId CHƯƠNG : THIẾT KẾ GIAO DIỆN 4.1 Giao diện trang admin Sau truy cập website giao diện trang chủ sau : 4.2 Giao diện mục Hình 4.2.1 Giao diện quản lý sản phẩm Hình 4.2.2 Giao diện chức Thêm sản phẩm 4.3 Giao diện quản lý khách hàng Hình 4.2.3 Giao diện trang quản lý khách hàng Hình 4.2.3 Giao diện trang quản lý đơn hàng 4.3 Giao diện Thống kê Báo cáo Hình 4.2.4 Giao diện thống kê báo cáo 4.4 Giao diện Khách hàng 5.5 Kết luận hướng phát triển a.Kết luận Với đồ án này, chúng em hoàn thành yêu cầu đặt ra, bao gồm : - Giao diện : Thiết kế Photoshop sử dụng tính slide cho trang chủ, tăng tính thẩm mỹ, thiết kế giao diện theo chuẩn Worlpress, sống động thu hút người xem ghé thăm - website Hiển thị nội dung sản phẩm chi thiết khoa học Cho phép người dùng đặt hàng trực tuyến website ứng với - sản phẩm chọn Quản trị cho phép chỉnh sửa giao diện Quản trị cho việc thêm sản phẩm, xóa sửa sản phẩm cũ Quản lý đơn đặt hàng cách khoa học họp lí Thực upload file, phục vụ việc quản lý sản phẩm Phẩn quyền người dùng Ungqa dụng chat với nhân viên cửa hàng b.Hướng phát triển - Bổ sung hoàn thiện giao diện quản lý Admin thêm nhiều - chức Chỉnh sửa hoàn thiện trang template cho phù hợp với thiết bị - Thêm chức toán trực tuyến Visa, Paypal,… Bổ sung chức khách hàng thân thiết, tăng chiết khấu, - ưu đãi cho khách V.I.P Tăng cường bảo mật cho website Bảo mật souce code cửa website Có thể sử dụng kỹ thuật mã hóa tồn souce code website để chống đánh cắp bảo mật thông tin ... số hàng hóa mua bán qua internet nội thất năm Nội thất mặt hàng cần thiết cho gia đình, muốn mua mạng khách hàng cần ngồi nhà có người đến giao Do đặc điểm mua bán Internet người mua người bán. .. truyền thống khách hàng phải đến trực tiếp cửa hàng để xem sản phẩm với website nội thất việc mua bán trở nên dễ dàng nhiều Khách hàng tới trực tiếp cửa hàng mà cần truy cấp vào website nội thất... – giao hàng xử lý Bộ phận bán hàng : Khi khách hàng có thắc mắc sản phẩm sẻ trả lời cho khách hàng, hướng dẫn khách hàng mua hàng Bộ phận kho – giao hàng : Nhận đơn hàng từ phẩn quản lý để xử