Báo cáo thực tập tốt nghiệp đề tài ứng dụng reactjs, nodejs vào xây dựng website bán điện thoại

TRƯỜNG ĐẠI HỌC SƯ PHẠM KHOA TIN HỌC  BÁO CÁO THỰC TẬP TỐT NGHIỆP ĐỀ TÀI ỨNG DỤNG REACTJS, NODEJS VÀO XÂY DỰNG WEBSITE BÁN ĐIỆN THOẠI Giảng viên hướng dẫn: ThS Hồ Ngọc Tú Sinh viên thực hiện: Cao Khả Hiếu Lớp: 18CNTT1 Đà Nẵng, 04/2022 NHẬN XÉT CỦA CÁN BỘ HƯỚNG DẪN Đà Nẵng, ngày … tháng … năm … Cán hướng dẫn NHẬN XÉT CỦA HỘI ĐỒNG PHẢN BIỆN Đà Nẵng, ngày … tháng … năm … Hội đồng phản biện LỜI CAM ĐOAN Em tên Cao Khả Hiếu, sinh viên lớp 18CNTT1 Em xin cam đoan đề tài em thực Các nội dung kết nghiên cứu trình bày Đồ án tốt nghiệp trung thực tham khảo trích dẫn, rõ nguồn tham khảo theo quy định Sinh viên thực Cao Khả Hiếu LỜI CẢM ƠN Đầu tiên, em xin chân thành cảm ơn Quý Thầy/Cô khoa Tin học trang bị kiến thức cho em suốt trình học tập Trường Đại học Sư phạm – Đại học Đà Nẵng vừa qua Chính nhờ cơng lao giảng dạy, bảo tận tình Q Thầy/Cơ mà em trang bị kiến thức chuyên ngành cơng nghệ thơng tin để thực tiếp chặng đường học tập, vận dụng sáng tạo sản phẩm hữu ích g óp phần phục vụ lĩnh vực khác Với lịng kính trọng biết ơn sâu sắc, em xin gửi lời cảm ơn đến giảng viên hướng dẫn, TS.Hồ Ngọc Tú tận tình giúp đỡ em từ bước xây dựng ý tưởng nghiên cứu, đề cương suốt q trình thực hồn thiện Đồ án tốt nghiệp Em xin gửi lời cảm ơn chân thành tới bạn Khoa Tin học, Trường Đại học Sư phạm tạo điều kiện thuận lợi giúp đỡ em thời gian học tập nghiên cứu thực Đồ án Mặc dù em cố gắng nổ lực để hoàn thành Đồ án tốt nghiệp phạm vi khả cho phép, chắn Đồ án khơng tránh khỏi thiếu sót Em mong nhận thơng cảm, góp ý tận tình bảo Q Thầy/Cơ để báo cáo hồn thiện Em xin chân thành cảm ơn! Sinh viên thực Cao Khả Hiếu MỤC LỤC CHƯƠNG CƠ SỞ LÝ THUYẾT 10 Khái niệm Internet 10 1.1 Giới thiệu chung .10 1.2 Phân loại 10 1.3 World Wide Web 10 1.4 Ngôn ngữ sử dụng 10 CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 10 2.1 Phân tích yêu cầu đề tài 10 2.1.1 Phát biểu toán 10 2.1.2 Yêu cầu toán 10 2.2 Nghiên cứu trạng 10 2.3 Đặc tả hệ thống .10 2.4 Sơ đồ use-case 11 2.4.1 Sơ đồ use-case khách hàng 12 2.4.2 Sơ đồ use-case khách hàng – thành viên 13 2.4.3 Sơ đồ use-case người quản lí 14 2.5 Biểu đồ .15 2.5.1 Biểu đồ đăng nhập .15 2.5.2 Biểu đồ đăng kí thành viên .15 2.5.3 Biểu đồ tìm kiếm điện thoại 16 2.5.4 Biểu đồ đặt hàng 16 2.5.5 Biểu đồ xem thông tin điện thoại 17 2.5.6 Biểu đồ bình luận .17 2.5.7 Biểu đồ hiển thị danh sách điện thoại 18 2.5.8 Biểu đồ thêm điện thoại 19 2.5.9 Biểu đồ xóa điện thoại .20 2.5.10 Biểu đồ xem đơn hàng 21 2.5.11 Biểu đồ xoá thành viên 22 2.5.12 Biểu đồ xoá đơn hàng .23 2.6 Thiết kế sở liệu .23 CHƯƠNG CÀI ĐẶT CHƯƠNG TRÌNH VÀ KẾT QUẢ 27 LỜI MỞ ĐẦU Đặt vấn đề Ngày nay, sống xã hội đại với công nghệ phát triển vũ bão việc đưa vào đời sống khơng cịn xa lạ Ứng dụng công nghệ thông tin việc tin học hóa xem yếu tố mang tính định hoạt động phủ, tổ chức cơng ty Nó đóng vai trị quan trọng tạo bước đột phá mạnh mẽ Là phần công nghệ thông tin, công nghệ web có phát triển mạnh mẽ phổ biến nhanh lợi ích mà mang lại cho cộng đồng lớn Hiện nay, hầu hết cửa hàng điện thoại sử dụng rộng rãi ứng dụng công nghệ thông tin, giúp người dùng dễ dàng mua hàng, dễ dàng quản lí thơng tin cá nhân,… Bên cạnh đó, hỗ trợ mạnh mẽ ngơn ngữ lập trình, với đời framework thúc đẩy em chọn đề tài “Ứng dụng Reactjs, Nodejs vào xây dựng website bán điện thoại” để thực đồ án chuyên ngành nhằm đáp ứng theo chương trình đào tạo đồng thời mong muốn ứng dụng cơng nghệ vào việc tìm hiểu đưa giải pháp tốt nhằm giải công việc bán vé xem phim trực tuyến cho rạp chiếu phim Với đề tài này, website cho phép người sử dụng thực cách nhanh chóng, xác việc tìm kiếm thơng tin, loại điện thoại, giá tiến hành việc đặt hàng,… với giao diện làm việc thân thiện, tiện dụng với người sử dụng hệ thống, người tiêu dùng Được hướng dẫn tận tình TS Hồ Ngọc Tú, em chọn đề tài “Ứng dụng Reactjs, Nodejs vào xây dựng website bán điện thoại” sử dụng ngôn ngữ Javascript với hai framework tương ứng Reactjs Nodejs hệ quản trị sở liệu MongoDB làm đề tài cho môn Mục tiêu nghiên cứu Mục tiêu đồ án tìm giải pháp hiệu để giải công việc bán hàng cho ác cửa hàng điện thoại Các mục tiêu cụ thể đồ án gồm: - Tìm phương pháp hiệu việc đặt hàng cho khách hàng việc quản lí thơng tin điện thoại - Ứng dụng Reactjs, Nodejs xây dựng website quản lí bán điện thoại Đối tượng phạm vi nghiên cứu Đối tượng nghiên cứu gồm: - Các khách hàng cửa hàng điện thoại - Vai trị người quản lí cửa hàng - Các loại điện thoại thị trường - Các chi nhánh cửa hàng Giới hạn phạm vi nghiên cứu đồ án gồm: - Tập trung xây dựng hệ thống giúp người dùng đặt hàng trực tuyến quản lí thơng tin điện thoại - Đề tài xây dựng ngơn ngữ lập trình như: Javascript, HTML, CSS sử dụng hệ quản trị sở liệu MongoDB Phương pháp nghiên cứu - Phương pháp tài liệu: Nghiên cứu tài liệu liên quan đến nội dung nghiên cứu: Tài liệu ngơn ngơn ngữ lập trình, framework Reactjs Nodejs, nhu cầu người dùng, tài liệu thông tin điện thoại - Phương pháp thực nghiệm: Nghiên cứu, xây dựng phương pháp đặt hàng quản lí điện thoại hiệu cho cửa hàng Phát triển phần mềm quản lí bán điện thoại cho cừa hàng đánh giá kết Nhiệm vụ kết đạt - Nghiên cứu tìm hiểu số phần mềm bán điện thoại trực tuyến - Phân tích yêu cầu đề xuất phần mềm - Thiết kế đặc tả hệ thống - Xây dựng sở liệu - Lập trình module hệ thống Bố cục đồ án Trên sở nội dung nghiên cứu, để đạt mục tiêu đề đảm bảo tính logic, ngồi phần mở đầu phần kết luận, đồ án tổ chức thành chương sau: Chương Cơ sở lý thuyết Chương trình bày sở lí thuyết internet website; trình bày kết nghiên cứu, tìm hiểu ngơn ngữ lập trình: Javascript, Reactjs, Nodejs sử dụng việc xây dựng đề tài Chương 2: Phân tích thiết kế hệ thống Chương giới thiệu toán đưa mơ hình hệ thống; đề xuất ý tưởng, chức cho phần mềm; trình bày mơ hình thực thể quan hệ, sơ đồ phân cấp chức Phân tích chi tiết chức người sử dụng người quản lí; thiết kế giao diện người dùng thiết liệu, chức cho hệ thống Chương 3: Cài đặt chương trình kết Trong chương này, nêu kết thực đề tài trình bày cách cài đặt chương trình Đóng góp đồ án Trong đồ án tốt nghiệp này, em vận dụng linh hoạt kiến thức học giảng đường để thực đề tài Bên cạnh đó, em tự tìm tòi, học hỏi, nghiên cứu thêm kiến thức mới, ngơn ngữ lập trình nhằm xây dựng đồ án ngày nhanh chóng, hồn thiện Những đóng góp đồ án: - Phân tích rõ ràng vai trò người hệ thống Đối với người quản lí, khách hàng đăng nhập hay chưa đăng nhập giới hạn số chức định - Đưa chức điều khiển dành cho người quản lí Nghiên cứu triển khai thực nghiệm chức nhằm đáp ứng nhu cầu cho người quản lí quản lí thơng tin điện thoại, thông tin người dùng cửa hàng - Đưa chức đặt hàng cho khách hàng Nghiên cứu triển khai thực nghiệm chức đặt hàng trực tuyến với đầy đủ thông tin liên quan tên điẹn thoại, dung lượng pin, hình hay thông số kĩ thuật khác để khách hàng nắm bắt thơng tin đặt hàng phù hợp với họ CHƯƠNG CƠ SỞ LÝ THUYẾT Khái niệm Internet 1.1 Giới thiệu chung Internet hệ thống thơng tin tồn cầu truy nhập cơng cộng gồm mạng máy tính liên kết với Nguồn gốc Internet bắt nguồn từ phát triển chuyển mạch gói nghiên cứu quốc phòng Hoa Kỳ ủy quyền thực vào năm 1960 phép chia sẻ thời gian máy tính[1] Vào mạng Internet, bạn có tìm thấy tài liệu để nghiên cứu, học tập, trao đổi thư từ, mặt hàng, mua bán, … Một mục tiêu Internet chia sẻ thông tin người dùng nhiều lĩnh vực khác 1.2 Phân loại Các máy tính mạng chia làm nhóm Client Server - Client: Máy khách mạng, chứa chương trình Client - Server: Máy phục vụ-máy chủ Chứa chương trình Server, tài nguyên (tập tin, tài liệu, …) dùng chung cho nhiều máy khách Server trạng thái chờ yêu cầu đáp ứng yêu cầu Client Các dịch vụ thường dùng Internet:  Dịch vụ World Wide Web (gọi tắt Web)  Dịch vụ Electronic Mail (gọi tắt Mail)  Dịch vụ FPT Để truyền thông với máy tính khác, máy tính Internet phải hỗ trợ giao thức chung TCP/IP (Transmission Control Protocol/Internet Protocol - giao thức điều khiển truyền liệu giao thức Internet), giao thức đồng bộ, cho truyền thông điệp từ nhiều nguồn tới nhiều đích khác Ví dụ vừa lấy thư từ hộp thư, đồng thời vừa truy cập vào trang web TCP đảm bảo tính an tồn liệu, IP giao thức chi phối phương thức vận chuyển liệu Internet [1] 1.3 World Wide Web Các khái niệm World Wide Web World Wide Web (WWW) hay gọi Web dịch vu phổ biến Internet, 85% giao dịch Internet ước lượng thuộc WWW Ngày số Website giới đạt tới số khổng lồ WWW cho bạn truy xuất thơng tin văn bản, hình ảnh, âm thanh, video tồn giới Thơng qua Website, 10 cung cấp thông tin điện thoại giá bán, hãng, thông tin giảm giá 1.2.2 Giao diện chi tiết điện thoại Đây trang web cung cấp tên điện thoại, hãng, pin, hình, … giá bán, đánh giá người mua khác, xem số đánh giá, … nhằm đáp ứng nhu cầu tìm 43 điện thoại người dùng 44 1.2.3 Giao diện đăng nhập Người dùng đăng nhập đăng kí tài khoản để đảm bảo việc mua hàng toán 1.1 45 1.2.4 Giao diện tìm kiếm điện thoại 46 Người dùng tìm kiếm điện thoại theo ý muốn 47 1.1 48 1.2.5 Giao diện đặt hàng Người dùng chọn điện thoại mà muốn, hệ thống chuyển tiếp đến trang đặt hàng Trong trang này, người dùng nắm giá tiền sản phẩm mà khách hàng thêm vào giỏ hàng Ứng với số lượng điện thoại chọn, tổng giá tiền thay đổi để tiện cho người dùng theo dõi 49 1.2.6 Giao diện quản lí điện thoại Trong trang này, người quản lí kiểm sốt tồn thơng tin điện thoại Với chức năng, xem thông tin chi tiết, thêm, chỉnh sửa, xóa điện thoại Khi click vào nút exit bên phải điện thoại, trang thông tin điện thoại Khi muốn thêm điện thoại mới, người quản lí chọn vào icon “ Add” phía trang quản lí điện thoại phim Hệ thống trang sản phẩm để người quản lí nhập thơng tin điện thoại vào Sau điền đầy đủ thông tin, người dùng chọn “ Save” để lưu thông tin vào hệ thống Người dùng muốn chỉnh sửa thông tin phim, click vào nút chỉnh sửa điện thoại, hệ thống trang thông tin để phục vụ việc chỉnh sửa Sau chỉnh sửa thông tin cần thiết, người dùng nhấn nút Save để lưu thông tin vào hệ thống Đối với chức Xóa điện thoại, người dùng nhấn vào nút xóa bên phải để thực tiến trình xóa 50 51 1.2.7 Giao diện quản lí thành viên Trong trang này, người quản lí xem tồn thơng tin tài khoản thành viên 1.1 52 1.2.8 Giao diện quản lí đơn hàng Trong trang này, người quản lí kiểm sốt tồn thơng tin đơn đặt hàng 53 Kiểm thử Đăng nhập & đăng kí Testcas Descriptio Data input e id n Hiển thị trang login Hiển thị trang đăng kí Đăng nhập Đăng kí Đặt hàng Testcase id Descriptio n Thêm sản phẩm vào giỏ hàng Hiển thị trang giỏ hàng Tuỳ chỉnh giỏ hàng Đặt hàng Steps Email: caokhahieu9@gmail.co m Pasword: hieu12345 Email: caokhahieu8@gmail.co m Password: hieu12345 Data input Steps ấn nút thêm vào giỏ hàng Mở trang giỏ hàng từ nút giỏ hàng Thay đổi số lượng sản phẩm giỏ hàng Nhấn nút đặt hàng 54 Expecte Actua d output l outpu t Mở trang Hiển thị Hiển trang login từ thị nút login login trang login Mở trang Hiển thị Hiển đăng kí trang thị đăng kí trang từ nút đăng kí đăng kí Đăng Đăng Nhấn email nhập nhập pass thành thành word cơng cơng Đăng kí Đăng Nhập email thành kí paswwor cơng thành d cơng tiến hành đăng tiến hành nhập đăng nhập Expected output Sản phẩm thêm vào giỏ hàng Hiển thị trang giỏ hàng Actual output Sản phẩm thêm vào giỏ hàng Hiển thị trang giỏ hàng Statu s Pass Pass Pass Pass Status Pass Pass Cập nhật Cập nhật lại giá tiền lại giá tiền Pass Đặt hàng thành cơng Pass Đặt hàng thành cơng đăng Quản lí đơn hàng Testcase Descriptio id n Hiển thị danh sách đơn hàng Chấp nhận đơn hàng Huỷ đơn hàng Khơng có đơn hàng Quản lí sản phẩm Testcase Descriptio id n Hiển thị danh sách sản phẩm Thêm sản phẩm Sửa sản phẩm Xoá sản phẩm Data input Steps Mở đơn hàng từ sidebar ấn nút đồng ý đơn hàng ấn nút huỷ Mở đơn hàng từ sidebar Data input Steps Mở danh sách sản phẩm từ sidebar Nhập đầy dủ thông tin sản phẩm cần thêm ấn nút edit sản phẩm ấn nút xoá sản phẩm 55 Expected output Hiển thị danh sách đơn hàng Cập nhật status đơn hàng Actual output Hiển thị danh sách đơn hàng Cập nhật status đơn hàng Status Cập nhật status đơn hàng Thơng báo khơng có đơn hàng Cập nhật status đơn hàng Thơng báo khơng có đơn hàng Pass Expected output Hiển thị danh sách sản phẩm Actual output Hiển thị danh sách sản phẩm Status Hiển thị sản phẩm vừa thêm Hiển thị sản phẩm vừa thêm Pass Cập nhật sản phẩm vừa thêm Xoá sản phẩm khỏi danh sách Cập nhật sản phẩm vừa thêm Xoá sản phẩm khỏi danh sách Pass Pass Pass Pass Pass Pass KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Kết đạt Về kiến thức học tập: Đối với lần nghiên cứu này, em xem hội thử thách thân để tự học hỏi, rèn luyện điều lạ từ ngơn ngữ lập trình hay framework chúng Khi tiếp xúc thực hành dùng ngôn ngữ, em nhận thú vị, đặc trưng riêng biệt mà chúng hỗ trợ Bên cạnh đó, việc áp dụng kiến thức học tự học điều thu hút em Điển ngơn ngữ Javascript, HTML, CSS,… thầy cô truyền tải cho chúng em giảng đường, bây giờ, lại trở thành kiến thức bản, tảng để em tiếp tục đường tự tìm tịi, học hỏi Đặc biệt, khả phân tích, thiết kế hệ thống hay giải vấn đề trình nghiên cứu lần củng cố, áp dụng cách linh hoạt Xây dựng sở liệu trình nghiên cứu phân tích hệ thống nhằm đáp ứng tốt cho việc viết chương trình Và khơng qn trọng vào việc tìm hiểu nghiên cứu cấu trúc hệ thống để đảm bảo trải nghiệm tốt cho người dùng Về phần mềm: Phần mềm viết ngôn ngữ Javascript (thơng qua Framework Nodejs) đóng vai trị server để xử lí logic, để tìm kiếm, lưu trữ, thay đổi liệu phục vụ trở lại người dùng Phần mềm viết ngơn ngữ thơng qua Reactjs, đóng vai trị Client, hệ thống giao diện người sử dụng để tương tác trực tiếp với người dùng Phần mềm viết rõ ràng phần liên quan đến ngôn ngữ nên hệ thống vận hành cách nhanh chóng xác, đảm bảo trải nghiệm cho người dùng cách tốt Bên cạnh việc tìm kiếm đặt hàng mà mục tiêu hệ thống nhằm hướng đến người sử dụng khách hàng nên việc đảm bảo tốc độ tải trang, khả truy suất thực cần thiết Bên cạnh việc thiết kế bố cục, tương phản châu chuốt kĩ lưỡng để thu hút thích thú người tiêu dùng Về phía hệ thống, xử lí tốt liệu, yêu cầu người dùng gửi đến, đảm bảo tính đắn, nhanh chóng Thêm vào đó, hệ thống cịn cung cấp số tính cho người quản lí khách hàng nhu cầu 56 Hạn chế đề tài Hệ thống dành cho khách hàng người quản lí thật hệ thống lớn, cần đầu tư thời gian, cơng sức nỗ lực để hồn thiện Song, thời gian nghiên cứu có hạn, hệ thống mà em phân tích thiết kế cịn nhiều hạn chế:  Chưa bổ sung thêm vai trò nhân viên để tạo thơng tin sản phẩm  Chưa thực chức thống kê doanh thu  Chưa đầy đủ chức điều khiển vai trị người quản lí  Chưa thực chức sửa đổi thơng tin cá nhân  Tính bảo bảo mật cho hệ thống chưa hoàn chỉnh  Kiến thức thực tế kiến thức lập trình cịn hạn chế, nên tính chuyên nghiệp chương trình chưa cao, bắt lỗi chưa kĩ số chổ số tính chưa tối ưu Hướng phát triển Để phát triển hệ thống hoàn chỉnh, trước hết cần phải khắc phục hạn chế đề tài bổ sung nhiều tính năng, cơng nghệ để sản phẩm đến tay người tiêu dùng cách tuyệt vời TÀI LIỆU THAM KHẢO [1] https://vi.wikipedia.org/wiki/Internet [2] https://vi.wikipedia.org/wiki/World_Wide_Web [3] https://webso.vn/web-tinh-va-web-dong-la-gi [4] https://vi.wikipedia.org/wiki/Javascript 57