Trong nền kinh tế hiện nay, với xu thế toàn cầu hoá nền kinh tế thế giới, mọi mặt của đời sống xã hội ngày càng được nâng cao, đặc biệt là nhu cầu trao đổi hàng hoá của con người ngày càng tăng, cả về số lượng và chất lượng. Hiện nay các công ty tin học hàng đầu thế giới không ngừng đầu tư và cải thiện các giải pháp cũng như các sản phẩm nhằm cho phép tiến hành thương mại hóa sản phẩm trên Internet. Thông qua các sản phẩm và công nghệ này, chúng ta dễ dàng nhận ra tầm quan trọng và tính tất yếu của thương mại điện tử. Với những thao tác đơn giản trên máy có nối mạng Internet bạn sẽ có tận tay những gì mình cần mà không phải mất nhiều thời gian. Bạn chỉ cần vào các trang dịch vụ thương mại điện tử, làm theo hướng dẫn và chọn những sản phẩm bạn cần. Các nhà dịch vụ sẽ mang đến tận nhà cho bạn.
TRƯỜNG CAO ĐẲNG CÔNG NGHIỆP HUẾ KHOA CÔNG NGHỆ THÔNG TIN ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE BÁN HÀNG WORDPRESS Giảng viên hướng dẫn: TS PHAN NGUYỄN Ý NHI Sinh viên thực hiện: NGUYỄN NHẬT TÂN MSVS: 16513111056 Lớp: 17CDTH31 NIÊN KHĨA: 2017-2020 LỜI CẢM ƠN Kì thực tập vừa qua trải nghiệm tuyệt vời đáng nhớ Em khơng thể hồn thành đề tài mà khơng có trợ giúp nhiệt tình tận tâm cô TS Phan Nguyễn Ý Nhi anh hướng dẫn Trần Cơng Tồn trực tiếp hướng dẫn giúp đỡ em nhiều thời gian em thực tập Công Ty Trách Nhiệm Hữu Hạn Thiết Kế Website Lifecode Đầu tiên cho em gửi lời cảm ơn đến Khoa Công Nghệ Thông Tin, trường Cao Đẳng Công Nghiệp Huế tạo điều kiện cho em tham gia thực tập Lifecode Và cho em gửi lời cảm ơn đến Công Ty Trách Nhiệm Hữu Hạn Thiết Kế Website Lifecode tạo điều kiện cho em tham gia thực tập đơn vị cung cấp tất sở vật chất trang thiết bị tốt cho em thực tập thời gian qua Xin cảm ơn anh chị trainner Lifecode tận tình hướng dẫn giúp đỡ em suốt thời gian tham gia thực tập Đặc biệt, em xin chân thành cảm ơn thầy cô Khoa Công Nghệ Thông Tin, trường Cao Đẳng Công Nghiệp Huế, người đồng hành em suốt ba năm dài giảng đường Vì thời gian, điều kiện có hạn, em cố gắng để hoàn thiện đề tài đợt thực tập, cịn nhiều hạn chế khơng thể tránh khỏi thiếu sót, mong thầy có ý kiến đóng góp để em hồn thiện phát triển đề tài Xin chân thành cảm ơn! Huế, ngày 26 tháng 06 năm 2020 LỜI MỞ ĐẦU Ngày nay, với phát triển mạnh mẽ công nghệ thông tin ứng dụng đời sống Máy tính khơng cịn thứ phương tiện lạ lẫm người mà dần trở thành cơng cụ làm việc giải trí thơng dụng hữu ích chúng ta, khơng cơng sở mà cịn gia đình Trong kinh tế nay, với xu tồn cầu hố kinh tế giới, mặt đời sống xã hội ngày nâng cao, đặc biệt nhu cầu trao đổi hàng hoá người ngày tăng, số lượng chất lượng Hiện công ty tin học hàng đầu giới không ngừng đầu tư cải thiện giải pháp sản phẩm nhằm cho phép tiến hành thương mại hóa sản phẩm Internet Thơng qua sản phẩm công nghệ này, dễ dàng nhận tầm quan trọng tính tất yếu thương mại điện tử Với thao tác đơn giản máy có nối mạng Internet bạn có tận tay cần mà khơng phải nhiều thời gian Bạn cần vào trang dịch vụ thương mại điện tử, làm theo hướng dẫn chọn sản phẩm bạn cần Các nhà dịch vụ mang đến tận nhà cho bạn Để tiếp cận góp phần đẩy mạnh phổ biến thương mại điện tử Việt Nam Em tìm hiểu, xây dựng “Website Bán Hàng” Website xây dựng Wordpress giúp khách hàng có trải nghiệm sử dụng website tốt NHẬN XÉT (Của giảng viên hướng dẫn) NHẬN XÉT (Của giảng viên phản biện) MỤC LỤC 5.2.Mơ hình hóa u cầu 35 Mơ hình trang quản trị 35 CHƯƠNG TỔNG QUAN ĐỀ TÀI 1.1.Giới thiệu Trên giới nay, tin học ngành phát triển không ngừng Thời kỳ cách mạng cơng nghiệp 4.0 địi hỏi thơng tin nhanh chóng, xác Có thể nói tin học chiếm vị trí quan trọng sống hàng ngày, ngành khoa học kỹ thuật Chúng phát triển áp dụng rộng rãi đặc biệt lĩnh vực kinh doanh, buôn bán Việc đưa tin học vào công việc quản lý, nhằm giảm bớt sức lao động người, tiết kiệm thời gian, độ xác cao tiện lợi nhiều so việc quản lý giấy tờ thủ công trước Tin học hóa nhằm thu hẹp khơng gian lưu trữ, tránh thất lạc liệu, tự động hóa cụ thể hóa thơng tin theo u cầu người Hiện nay, nhu cầu buôn bán, trao đổi hang hóa ngày tăng hình thức mua bán ngày cải tiến Ở thị trường mà người mua người bán không cần trực tiếp gặp thực giao dịch địi hỏi cần phải có mơi trường ảo hỗ trợ cơng việc website thương mại điện tử mơi trường khơng thể thuận lợi để thực giao dịch đó, khiến chúng trở nên đơn giản, nhanh chóng thuận tiện Chính mà em nghiên cứu, tìm hiểu thư viện thiết kế web phổ biến ReactJS đồng thời xây dựng website bán hàng Thương mại điện tử hệ thống lớn nên làm đề tài chắn em mắc phải thiếu sót nên mong nhận đóng góp ý kiến thầy, để em có hội sửa sai, phát triển thực tế bước hoàn thiện Trang 1.2.Lý chọn đề tài Trong lĩnh vực cơng nghệ, chủ doanh nghiệp lập trình viên ln ln tìm kiếm phương pháp, nhằm tạo thêm nhiều lợi cạnh tranh cho công ty Và Wordpress cơng nghệ tuyệt vời, giúp doanh nghiệp vượt qua đối thủ họ thiết kế ứng dụng web sử dụng Wordpress so với website truyền thống Wordpress giúp doanh nghiệp tạo ứng dụng với cấu trúc UI tốt nhằm nâng cao tối ưu hóa UX Với cơng nghệ này, họ dễ dàng tăng tương tác người dùng ReactJS thư viện phổ biến dùng để xây dựng Single Web Application có tính tương tác trực tiếp cao, với phương châm “Learn One Write Everywhere” (Học lần viết nơi) ta thấy thông dụng tích hợp React Đây tảng để em chọn ReactJS nhằm xây dựng trang thương mại điện tử dựa thư viện Javascript Trang 1.3.Mục tiêu đề tài • Tìm hiểu khái qt ReactJS, nắm định nghĩa, khái niệm react, cách reactjs render phần view, thuộc tính chủ chốt Props, State • Kết hợp ReactJS với Redux để xây dựng nên store tập trung nhằm quản lý tất trạng thái ứng dụng • Đề tài website thương mại điện tử sử dụng ReactJS giới hạn việc khách hàng lựa chọn sản phẩm, thêm vào giỏ hàng Phía chủ cửa hàng thực thiện thêm sửa xóa sản phẩm, quản lý thành viên • Xác định cấu trúc, thành phần React • Xây dựng website bán rượu • Quản lý sản phẩm, thêm, sửa, xóa cập nhật sản phẩm • Xem sửa, quản lý hóa đơn mà khách hàng đặt • Sử dụng kỹ thuật Code Splitting giúp tăng tốc thời gian load Javascript • Đề tài sử dụng Mock API để giả lập liệu sử dụng Firebase để xác thực việc đăng nhập đăng ký phân quyền tài khoản 1.4.Đối tượng nghiên cứu • • • • ReactJS – Thư viện xây dựng UI Redux – Quản lí state tập trung Code Splitting kỹ thuật giúp tăng tốc thời gian load Javascript Website thương mại điện tử sử dụng ReactJS Trang 3.5 Giao diện giỏ hàng 3.6 Giao diện trang địa khách hàng 3.7 Giao diện trang đơn hàng 3.8 Giao diện trang toán Trang 26 3.9 Giao diện trang blog Trang 27 3.10 Giao diện trang blog chi tiết Trang 28 3.11 Giao diện trang liên hệ Trang 29 3.12 Giao diện trang hiển thị thông báo lỗi 404 3.13 Giao diện trang đăng nhập Trang 30 3.14 Giao diện trang đăng ký Trang 31 CHƯƠNG CHUYỂN ĐỔI THIẾT KẾ PSD SANG HTML Chuyển đổi thiết kế sang HTML Trang 32 CHƯƠNG PHÂN TÍCH WEBSITE BÁN RƯỢU 5.1 Xác định yêu cầu Khách hàng: • Chọn lựa sản phẩm • Xem giá sản phẩm • Mua Hàng • Cung cấp thơng tin • Thanh tốn sản phẩm • Đăng nhập, Đăng ký thành viên Chủ cửa hàng: • Thêm sửa xóa sản phẩm • Cập nhật sản phẩm bật • Thay đổi banner, carousel • Đăng thơng tin cửa hàng, thơng báo • Viết Blog sản phẩm • Quản lý hóa đơn từ khách hàng • Xem thống kê hóa đơn Trang 33 Phân tích yêu cầu Khách hàng: Lựa chọn sản phẩm từ cửa hàng cung cấp Để tiến hành mua hàng, khách hàng chọn sản phẩm cho vào giỏ hàng, chỉnh số lượng mặt hàng Cung cấp thông tin địa chỉ, số điện thoại cho cửa hàng Sau xác nhận gửi đơn hàng Chủ cửa hàng gọi điện xác nhận giao sản phẩm theo thông tin khách hàng Khách hàng liên hệ, đóng góp ý kiến phản hồi sản phẩm mua Chủ cửa hàng: Cung cấp sản phẩm: Cung cấp sản phẩm đồ chơi theo chủng loại Các mặt hàng chia theo chủng loại khác Mỗi mặt hàng tương ứng với chủng loại, mặt hàng nằm ngồi chủng loại có chủ cửa hàng thêm chủng loại Tạo đa dạng mặt hàng Chỉnh sửa giao diện website: Chủ cửa hàng tùy biến số thành phần website, thay đổi banner quảng cáo, carousel hình ảnh Quản lý hóa đơn: Xem hóa đơn mà khách hàng đặt mua Xóa đơn hàng khách hủy đơn hàng Trang 34 5.2 Mô hình hóa u cầu Mơ hình mua hàng Mơ hình tổng quan việc mua hàng Mơ hình trang quản trị Mơ hình tổng quan trang quản trị chủ cửa hàng Trang 35 5.3 Sơ đồ giao diện Sơ đồ giao diện phía Client Mơ hình giao diện phía client Mơ tả: Khách hàng truy cập trang web lựa chọn sản phẩm “Trang Chủ” từ Menu truy cập vào danh mục “Sản Phẩm” để chọn sản phẩm muốn mua Trang 36 Ngoài khu vực “Đang Khuyến Mãi”, “Sản Phẩm Mới”, “Sản phẩm bán chạy” cho phép khách hàng truy cập nhanh vào sản phẩm Khách hàng đọc viết chủ cửa hàng đăng tải từ menu Blog Trang 37 Sơ đồ giao diện Admin Mơ hình giao diện Admin Mô tả: Chủ cửa hàng cấp tài khoản Admin để truy cập vào trang quản trị Tại trang Menu quản trị, admin quản lý sản phẩm việc thêm sửa xóa sản phẩm có Chủ cửa hàng thay đổi banner quảng cáo, carousel Ngồi cịn có chức viết Blog để chủ cửa hàng quảng bá sản phẩm chi tiết Trang 38 6.1 CHƯƠNG TỔNG KẾT Kế hoạch đạt Trong trình thực đề tài, em có thêm hội củng cố, tích lũy thêm kiến thức chun mơn lập trình web kinh nghiệm thiết kế, lên kế hoạch cho đề tài, dự án,… Nắm rõ quy trình phát triển phần mềm cấu trúc dự án React Sau khoảng thời gian tìm tịi, vận dụng học được, sản phẩm em hồn thành chức sau: • • • • • • • • • • Tạo giao diện người dùng từ thiết kế Photoshop Hỗ trợ đa ngơn ngữ Người dùng tạo tài khoản đăng nhập Xác thực, phân quyền tài khoản quản trị Xây dựng trang quản lý thành viên Xử lý tính thêm giỏ hàng Ngồi ra, em cố thêm kiến thức Javascript ES6 ReactJS Firebase, tạo real time web application Áp dụng reactstrap vào trang web, giúp việc tạo giao diện React trở lên đơn giản tối ưu loại bỏ jQuery • Code splitting, tối ưu tốc độ load javascript Trang 39 6.2 Hướng phát triển Dù tạo trang web tương đối đầy đủ chức với thời gian có hạn, ứng dụng chưa đáp ứng yêu cầu người dùng Trong tương lai em cố gắng khắc phục, chỉnh sửa vài sai sót trang web: • Khách hàng đặt mua sản phẩm • Chủ cửa hàng quản lý danh sách đơn hàng Trang 40 ... biến thương mại điện tử Việt Nam Em tìm hiểu, xây dựng ? ?Website Bán Hàng? ?? Website xây dựng Wordpress giúp khách hàng có trải nghiệm sử dụng website tốt NHẬN XÉT (Của giảng viên hướng dẫn) ... tránh thất lạc liệu, tự động hóa cụ thể hóa thơng tin theo u cầu người Hiện nay, nhu cầu buôn bán, trao đổi hang hóa ngày tăng hình thức mua bán ngày cải tiến Ở thị trường mà người mua người bán. .. thuận tiện Chính mà em nghiên cứu, tìm hiểu thư viện thiết kế web phổ biến ReactJS đồng thời xây dựng website bán hàng Thương mại điện tử hệ thống lớn nên làm đề tài chắn em mắc phải thiếu sót nên