TRƯỜNG ĐẠI HỌC SƯ PHẠM – ĐẠI HỌC ĐÀ NẴNG KHOA TIN HỌC BÁO CÁO KHÓA LUẬN TỐT NGHIỆP TÊN ĐỀ TÀI XÂY DỰNG WEBSITE BÁN MỸ PHẨM Sinh viên : Lưu Tiến Dũng CBHD : TS Nguyễn Đình Lầu Lớp : 16 CNTT1 ĐÀ NẴNG, 07/2020 LỜI CẢM ƠN Trong trình thực thực tập tốt nghiệp, em nhận giúp đỡ, hướng dẫn, hỗ trợ động viên từ gia đình, q thầy bạn Nhờ mà em hồn thành luận văn mong muốn Nay em xin gửi lời cảm ơn sâu sắc chân thành đến: Các thầy cô khoa Tin Học trường Đại học Sư Phạm Đà nẵng truyền đạt kiến thức quý báu để từ chúng em có hội phát triển hiểu biết vận dụng công việc sau Quý ban giám hiệu trường đại học Sư Phạm Đà Nẵng tạo điều kiện thuận lợi giúp đỡ chúng em trình học tập hoàn thành báo cáo Đặc biệt, em xin gửi lời tri ân sâu sắc đến TS Nguyễn Đình Lầu, người trực tiếp hướng dẫn em trình thực báo cáo Trong suốt trình thực hiện, thầy tận tình hướng dẫn, giúp em giải vấn đề nảy sinh trình làm báo cáo hoàn thành báo cáo định hướng ban đầu Cuối cùng, em xin gửi lời cám ơn tới gia đình, bạn bè người động viên, tiếp thêm động lực hỗ trợ giúp chúng em lúc khó khăn Đà Nẵng, ngày 25 tháng năm 2020 Giảng viên hướng dẫn Sinh viên thực Lưu Tiến Dũng Lưu Tiến Dũng-16CNTT01 MỤC LỤC LỜI CẢM ƠN…………………………………………………………………… MỤC LỤC…………………………………………………………………………3 MỞ ĐẦU………………………………….……………………………………… Giới thiệu … …………………………………………………………… Lý chọn đề tài… … ………………………………………………………….7 Phạm vi thực hiện… ……………………………………………………………8 Nội dung thực hiện… … ……………………………………………………… CHƯƠNG CƠ SỞ LÝ THUYẾT…………………………………………… 1.1 Reactjs…………………………………………………………………………9 1.1.1 Giới thiệu Reactjs…… …………………………………………… 1.1.2 Một số khái niệm, kiến thức nghiên cứu React……… ………… 10 1.1.2.1 Khái niệm ……………………………………………………… 10 1.1.2.2 Kiến thức… ………………………………………………………15 1.1.3 Môi trường xây dựng web Reactjs…… ………………………….17 1.1.3.1 Giới thiệu Meteor.…………………………………………… 17 1.1.3.2 Giới thiệu TodoList app……….………………………………… 18 1.1.3.3 Ví dụ React thông qua TodoList app…………….………….….19 1.1.4 Kết luận React…… ……………………………………………… 25 1.2 Redux…………………………………………………………………………27 1.2.1 Giới thiệu Redux……………… ……………………………………27 1.2.2 Nguyên lý hoạt động Redux………… ……………………………27 1.2.3 Cấu trúc Redux……… ……………………………………………28 1.2.4 Kết hợp Redux với React… …………………………………………….29 Lưu Tiến Dũng-16CNTT01 MỤC LỤC CHƯƠNG PHÂN TÍCH WEBSITE BÁN MỸ PHẨM……………………30 2.1 Xác định yêu cầu…………………………………………………………… 30 2.2 Phân tích u cầu…………………………………………………………… 31 2.3 Mơ hình Use-Case……………………………………………………………32 2.3.1 Mơ hình Use-Case tổng qt.…… ……………………………………32 2.3.2 Mơ hình Use-Case khách hàng.… ………………………………….…33 2.3.3 Mơ hình Use-Case Admin………………………………………………34 2.3.4 Mơ hình Use-Case quản lý tài khoản……………………………………35 2.3.5 Mơ hình Use-Case quản lý đơn hàng………………………………… 36 CHƯƠNG THIẾT KẾ WEBSITE BÁN MỸ PHẨM……………………….37 3.1 Thiết kế giao diện…………………………………………………………….37 3.1.1 Giao diện phía người dùng… …………………………………………37 3.1.1.1 Giao diện đăng ký……………………….…………….………… 37 3.1.1.2 Giao diện đăng nhập….……………………………….………… 38 3.1.1.3 Giao diện trang chủ………………………………… ………….…39 3.1.1.4 Giao diện giới thiệu……………………………… ………………40 3.1.1.5 Giao diện tin tức………………………………… ……………….41 3.1.1.6 Giao diện đồ……………………………… ………………….42 3.1.1.7 Giao diện chi tiết sản phẩm………………… ……………………43 3.1.1.8 Giao diện giỏ hàng………………………… …………………… 44 3.1.1.9 Giao diện lịch sử giao dịch………………… …………………… 45 3.1.2 Giao diện phía chủ cửa hàng (Admin)………….…………….……… 46 3.1.2.1 Giao diện quản lý user………….………………………………….46 Lưu Tiến Dũng-16CNTT01 MỤC LỤC 3.1.2.2 Giao diện thêm user…………….…………………………………47 3.1.2.3 Giao diện cập nhật user………….……………………………… 48 3.1.2.4 Giao diện quản lý sản phẩm……….…………………………… 49 3.1.2.5 Giao diện thêm sản phẩm………………………………………….50 3.1.2.6 Giao diện cập nhật sản phẩm………………………………………51 3.1.2.7 Giao diện quản lý trạng thái đơn hàng……………………… 52 KẾT LUẬN…………… ……………………………………………………….53 Kết đạt được… …………………………………………………………….53 Hướng phát triển……… ……………………………………………………… 54 Tài liệu tham khảo……………………………………………………………… 55 Lưu Tiến Dũng-16CNTT01 MỞ ĐẦU • 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ơng nghiệp đị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 bán hang 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ế trang web phổ biến React đồng thời xây dựng website bán hàng Với hướng dẫn nhiệt tình thầy giáo TS.Nguyễn Đình Lầu em hồn thành đề tài nghiên cứu Trong làm 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 hồn thiện Lưu Tiến Dũng-16CNTT01 • Lý chọn đề tài Ngày công nghệ thông tin có bước phát triển vượt bậc chiều rộng chiều sâu Máy tính điện tự khơng phương tiện quý mà dần trở thành cơng cụ làm việc giải trí thơng dụng khơng nơi làm việc mà cịn gia đình Đặc biệt, cơng nghệ thơng tin áp dụng lĩnh vực kinh tế, trị, xã hội…Nó đóng vai trị quan trọng 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 yêu cầu người Trong hoạt động sản xuất kinh doanh, công nghệ thông tin thương mại điện tử khẳng định vai trò xúc tiến thúc đẩy phát triển doanh nghiệp Đối với cửa hàng hay shop, việc quảng bá sản phẩm đến khách hàng cần thiết Vậy quảng bá nào? Đó xây dựng website giới thiệu tất sản phẩm bán Vì em xây dựng website bán mỹ phẩm, người chủ cửa hàng đưa ản phẩm lên website quản lý website đó, khách hàng đặt hàng mà khơng cần đến cửa hàng Chủ cửa hàng liên hệ trực tiếp với khách hàng nhận đơn đặ hàng website Với tính bản, website giúp gắn kết người mua chủ cửa hàng dễ dàng tiết kiệm thời gian cho khách hàng việc phải đến trực tiếp cửa hàng để mua sản phẩm, cịn giúp người chủ cửa hàng dễ dàng nắm bắt, quản lý sản phẩm Lưu Tiến Dũng-16CNTT01 • Phạm vi thực Tìm hiểu khái quát React, nắm định nghĩa, khái niệm React, cách render, import react thuộc tính chủ chốt prop, state,… Đề tài thiết kế website bán đồ chơi giới hạn việc khách hàng lựa chọn sản phẩm, thêm vào giỏ tiến hành điền thông tin khách hàng để gửi hóa đơn cho bên admin Về phía admin tiếp nhận đơn hàng, thực giao hàng đồng thời cập nhật, chỉnh sửa giao diện website bán hàng • Đối tượng nghiên cứu: Hệ thống website bán mỹ phẩm quy trình, phương pháp phát triển website • Phạm vi nghiên cứu: Xây dựng website bán mỹ phẩm • Nội dung thực • Tìm hiểu lý thuyết React JS • Xác định cấu trúc, thành phần React • Tham khảo website bán hàng Việt Nam • Thiết kế liệu API • Lập trình giao diện • Lập trình chức • Test hệ thống Lưu Tiến Dũng-16CNTT01 CHƯƠNG CƠ SỞ LÝ THUYẾT 1.1 React JS 1.1.1 Giới thiệu React JS React JS thư viện Javascript xây dựng kỹ sư Facebook, nhiều công ty tiếng sử dụng để phát triển sản phẩm họ Yahoo, Airbnb tất nhiên nội Facebook, Instagram Nó phù hợp với dự án lớn có tính mở rộng dự án nhỏ • Đặc tính React JS Tư tưởng React JS xây dựng lên components có tính tái sử dụng, dễ dàng cho việc chia nhỏ vấn đề, testing Nó giúp dễ dàng quản lý, mở rộng hệ thống, điều Angular JS địi hỏi cấu trúc, cách viết code phải thật tối ưu React JS giữ components trạng thái stateless (nhiều có thể) khiến ta dễ dàng quản lý chẳng khác trang static HTML Bản thân components khơng có trạng thái (state) nhận đầu vào từ bên thị dựa vào đầu vào đó, điêu lý giải lại mang tính tái sử dụng (reuse) dễ dàng cho việc test • Thế mạnh React JS React JS framework hiển thị view ý đến hiệu (performanceminded) Rất nhiều đối thủ nặng ký framework MVVM (ModelView-ViewModel) thời gian lớn để hiển thị lượng data lớn, trường hợp danh sách (list) tương tự Nhưng React khơng cịn vấn đề, hiển thị thay đổi Lưu Tiến Dũng-16CNTT01 10 Một điểm mạnh React JS virtual DOM - thứ nằm ẩn bên view lí khiến cho React đạt hiệu tốt Khi view yêu cầu gọi, tất thứ đưa vào ảo DOM Sau việc gọi hoàn thành, React tiến hành phép so sánh DOM ảo DOM thật, thực thay đổi phép so sánh Ví dụ: xem danh sách có 20 products hiển thị React, thay đổi product thứ 2, product hiển thị lại, 19 products cịn lại giữ ngun (khơng cần hiển thị lại hay reload lại trang) React dùng gọi “DOM ảo” (“virtual DOM”) để tăng hiệu cách xuất hiển thị ảo, sau kiểm tra khác biệt hiển thị ảo có DOM tạo vá (a patch) 1.1.2 Một số khái niệm, kiến thức nghiên cứu React 1.1.2.1 Khái niệm • Component React xây dựng xung quanh component, không dùng template framework khác Ta tạo component cách extend Component sau Hình 1.1 Một component React Lưu Tiến Dũng-16CNTT01 41 3.1.1.5 Giao diện tin tức Lưu Tiến Dũng-16CNTT01 42 3.1.1.6 Giao diện đồ Lưu Tiến Dũng-16CNTT01 43 3.1.1.7 Giao diện chi tiết sản phẩm Lưu Tiến Dũng-16CNTT01 44 3.1.1.8 Giao diện giỏ hàng Lưu Tiến Dũng-16CNTT01 45 3.1.1.9 Giao diện lịch sử giao dịch Lưu Tiến Dũng-16CNTT01 46 3.1.2 Giao diện phía chủ cửa hàng (Admin) 3.1.2.1 Giao diện quản lí users Lưu Tiến Dũng-16CNTT01 47 3.1.2.2 Giao diện thêm users Lưu Tiến Dũng-16CNTT01 48 3.1.2.3 Giao diện cập nhật users Lưu Tiến Dũng-16CNTT01 49 3.1.2.4 Giao diện quản lý sản phẩm Lưu Tiến Dũng-16CNTT01 50 3.1.2.5 Giao diện thêm sản phẩm Lưu Tiến Dũng-16CNTT01 51 3.1.2.6 Giao diện cập nhật sản phẩm Lưu Tiến Dũng-16CNTT01 52 3.1.2.7 Giao diện trạng thái đơn hàng Lưu Tiến Dũng-16CNTT01 53 KẾT LUẬN • Kết đạt Trong q trình thực khóa luận tốt nghiệp, 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ế giao diện, lên kế hoạch cho đề tài, dự án, viết báo cáo Nắm rõ quy trình phát triển phần mềm biết thêm Javascript thông qua tìm hiểu React Vận dụng kiến thức học để áp dụng vào dự án thực tế Sau khoảng thời gian tìm tịi, vận dụng học với giúp đỡ từ trainer công ty Sun Asterisk, sản phẩm em làm chức sau: • Tạo giao diện thân thiện với người dùng • Quản lý sản phẩm, người dùng, hóa đơn • Xử lý yêu cầu đặt mua hàng từ người dùng • Xử lý form thông tin từ người dùng gửi lên hệ thống Ngồi ra, em cịn củng cố thêm kiến thức về: • React JS, thư viện hỗ trợ tạo giao diện người dùng • Áp dụng React boostrap vào trang web giúp việc tạo giao diện trở nên đơn giản Lưu Tiến Dũng-16CNTT01 54 • 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 hết 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: • Tạo danh mục sản phẩm cho loại sản phẩm • Liên kết tài khoản người dùng với trang mạng xã hội facebook, google… • In hóa đơn cho khách hàng • Xây dựng website có hiệu suất tốt • Thống kê doanh thu theo tháng, năm Lưu Tiến Dũng-16CNTT01 55 TÀI LIỆU THAM KHẢO [1] Thạc sĩ (DEA) Phạm Nguyễn Cương, Giáo trình Phân tích Thiết kế Hệ Thống Thơng Tin, Nhà xuất Giáo Dục, 2014 [2] Ken Rogers, Meteor + React, Ft Collins, Colorado, March 2016 [3] Tham khảo thơng tin số trang web: • https://javascript.info/ • https://reactjs.org/docs/getting-started.html • https://redux.js.org/ • https://www.w3schools.com/js/default.asp • https://www.w3schools.com/react/default.asp Lưu Tiến Dũng-16CNTT01 ... sản phẩm đến khách hàng cần thiết Vậy quảng bá nào? Đó xây dựng website giới thiệu tất sản phẩm bán Vì em xây dựng website bán mỹ phẩm, người chủ cửa hàng đưa ản phẩm lên website quản lý website. .. bán hàng • Đối tượng nghiên cứu: Hệ thống website bán mỹ phẩm quy trình, phương pháp phát triển website • Phạm vi nghiên cứu: Xây dựng website bán mỹ phẩm • Nội dung thực • Tìm hiểu lý thuyết... Dũng-16CNTT01 30 CHƯƠNG PHÂN TÍCH WEBSITE BÁN MỸ PHẨM 2.1 Xác định u cầu Khách hàng: • Đăng nhập • Đăng kí • Đăng xuất • Tìm kiếm Sản phẩm • Chọn lựa sản phẩm • Xem chi tiết sản phẩm • Thêm vào giỏ hàng