Đang tải... (xem toàn văn)
TRƯỜNG ĐẠI HỌC KHOA CÔNG NGHỆ PHẦN MỀM
TRƯỜNG ĐẠI HỌC KHOA CÔNG NGHỆ PHẦN MỀM -🙚🙚🙚🙚🙚 - BÁO CÁO ĐỒ ÁN TỐT NGHIỆP Đề tài XÂY DỰNG WEBSITE BÁN Ô TÔ VỚI REACTJS Giảng viên hướng dẫn: Thầy/Cô Sinh viên thực hiện: – Hà Nội, 06/2022 LỜI CẢM ƠN Em xin gửi lời cảm ơn chân thành tri ân sâu sắc thầy cô trường Đại học ………… đặc biệt thầy cô khoa Công nghệ thông tin trường tạo điều kiện cho em hoàn thành đồ án tốt nghiệp Em xin chân thành cảm ơn ………… nhiệt tình hướng dẫn bảo em kiến thưc học, kiến thức thực tế suốt trình thực đề tài Mặc dù cố gắng hoàn thành đồ án phạm vi khả cho phép chắn khơng tránh khỏi thiết sót Em mong nhận thơng cảm, góp ý tận tình bảo q thầy bạn Em xin chân thành cảm ơn! MỤC LỤC CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1.1 Lý chọn đề tài: 1.2 Mục tiêu đề tài: 1.3 Khảo sát hệ thống: 1.4 Yêu cầu ứng dụng: .2 1.5 Các website liên quan liên quan: .2 1.6 Bố cục báo cáo: CHƯƠNG 2: CƠ SỞ LÝ THUYẾT .6 2.1 Phân tích thiết kế hệ thống: 2.2 Ngôn ngữ thiết kế website HTML CSS: .6 2.3 Ngôn ngữ JavaScript: .8 2.3.1 Giới thiệu ngôn ngữ JavaScript: 2.3.2 Lợi ích dùng JavaScript: .8 2.4 Thư viện ReactJS: .9 2.4.1 Giới thiệu ReactJS: 2.4.2 JSX vàVirtual DOM: 2.5 Phần mềm Visual Studio Code: .11 2.5.1 Visual Studio Code gì? 11 2.5.2 Những ưu điểm bật VS Code: 11 2.5.3 Lý nên sử dụng VS Code: 12 CHƯƠNG 3: PHÂN TÍCH HỆ THỐNG 13 CHƯƠNG 4: TRIỂN KHAI PHẦN MỀM 31 CHƯƠNG 5: TỔNG KẾT 35 5.1 Kết luận: 35 5.2 Hướng phát triển: 35 TÀI LIỆU THAM KHẢO 36 DANH MỤC HÌNH Hình Giao diện trang web Chợ Tốt .3 Hình Giao diện trang web oto.com.vn Hình Giao diện trang web otos.vn Hình Lợi ích CSS với trang web HTML .7 Hình JSX Code style 10 Hình So sánh Virtual DOM Real DOM 11 Hình Use Case tổng quát 13 Hình Use Case hệ thống 14 Hình Use Case chi tiết khách hàng 16 Hình 10 Biểu đồ hoạt động đăng ký .21 Hình 11 Biểu đồ hoạt động đăng nhập 22 Hình 12 Biểu đồ hoạt động đăng xuất 23 Hình 13 Biểu đồ hoạt động tìm kiếm sản phẩm 23 Hình 14 Biểu đồ hoạt động thêm sản phẩm vào giỏ hàng 24 Hình 15 Biểu đồ hoạt động xóa sản phẩm giỏ hàng 25 Hình 16 Biểu đồ hoạt động đặt hàng 26 Hình 17 Biểu đồ đăng ký 27 Hình 18 Biểu đồ đăng nhập .28 Hình 19 Biểu đồ xem chi tiết sản phẩm 29 Hình 20 Biểu đồ tìm kiếm sản phẩm 29 Hình 21 Biểu đặt hàng 30 Hình 22 Giao diện trang đăng ký 31 Hình 23 Giao diện trang đăng nhập 31 Hình 24 Giao diện trang chủ .32 Hình 25 Giao diện trang danh sách xe 32 Hình 26 Giao diện trang chi tiết - tab 'Vận hành' 33 Hình 27 Giao diện trang chi tiết - tab 'Nội thất' 33 Hình 28 Giao diện trang chi tiết - tab 'Thơng số' 34 Hình 29 Giao diện trang liên hệ 34 CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1.1 Lý chọn đề tài: Sự phát triển công nghệ thông tin thúc đẩy phát triển hầu hết lĩnh vực, có kinh doanh Hình thức kinh doanh online nhiều cửa hàng lựa chọn để tăng doanh thu cửa hàng để giới thiệu sản phẩm đến người tiêu dùng cách nhanh chóng Cửa hàng, đại lý phân phối xe tơ có nhiều loại xe, với nhiều mẫu mã thuộc dòng xe khác dẫn đến khó khăn cho người dùng việc tìm kiếm giá mẫu xe u thích cửa hàng Và việc tiếp cận với mẫu xe tơ khó khăn với hình thức truyền thống Với mục đích giúp người dùng tiếp cận nhiều dịng xe tơ quản lý cửa hàng bán ô tô dễ dàng, em định chọn đề tài “Xây dựng website bán ô tô với ReactJS” 1.2 Mục tiêu đề tài: Khảo sát hệ thống cửa hàng bán xe ô tô thực trạng nhu cầu tìm kiếm dịng xe người dùng Trình bày vấn đề liên quan đến ngôn ngữ JavaScript, ReactJS, phần mềm Visual Studio Code, Phân tích thiết kế ứng dụng Triển khai cài đặt ứng dụng 1.3 Khảo sát hệ thống: Thời đại 4.0 ngày địi hỏi cơng việc kinh doanh cửa hàng ngày phải đổi Nhất thời điểm dịch bệnh Page of 36 nay, việc mở rộng chiến lược kinh doanh online vô cần thiết Việc tạo website chuyên cung cấp mẫu xe giải đáp thắc mắc mà khách hàng mong muốn cần thiết Website có kiện thơng tin xe, hãng xe Thay việc khách hàng phải đến tận cửa hàng, tìm mẫu xe muốn mua, cần vài click chuột, khách hàng tra cứu, tham khảo, xem chi tiết thơng số xe muốn mua để đặt hàng Và tiến hành toán nhập đầy đủ thông tin quan trọng(tên, số điện thoại, địa nhận) Những mẫu xe dễ dàng tiếp cận với khách hàng nhờ vào việc theo dõi mẫu xe bật, sách đánh giá tốt nhiều nhất… Khách hàng chọn xem chi tiết thơng tin mẫu xe, xem đánh giá sản phẩm xe Việc cập nhật xe cửa hàng trở nên dễ dàng Các mẫu xe cập nhật liên tục website, hãng xe có chương trình khuyến hỗ trợ tìm kiếm theo từ khóa khách hàng cần, lọc theo hãng sản xuất, đánh giá, giá thành… Các danh mục sách liệt kê rõ ràng, giúp khách hàng theo dõi dễ dàng 1.4 Yêu cầu ứng dụng: Yêu cầu chức năng: Khách hàng xem danh sách sản phẩm, xem chi tiết (các thông số kĩ thuật, nội thất, vận hành) sản phẩm, tìm kiếm sản phẩm, thêm sản phẩm vào giỏ hàng mua hàng Yêu cầu giao diện: - Giao diện thân thiện, dễ sử dụng với người dùng Page of 36 - Màu sắc hài hòa 1.5 Các website liên quan liên quan: Một số website liên quan: Trang web xe.chotot.com Hình Giao diện trang web Chợ Tốt Đây trang rao vặt tổng hợp lớn Việt Nam, với chuyên mục mua bán dành riêng cho xe ô tô Trang web oto.com.vn Page of 36 Hình Giao diện trang web oto.com.vn Đây website lâu đời mua bán xe tơ, có tới triệu lượt truy cập 22 triệu lượt xem tháng Trang web otos.vn Hình Giao diện trang web otos.vn Giao diện dễ nhìn trực quan, giúp website nằm top 10 website mua bán tơ uy tín Việt Nam Page of 36 3.2.3 Biểu đồ hoạt động đăng xuất: Hình 12 Biểu đồ hoạt động đăng xuất 3.2.4 Biểu đồ hoạt động tìm kiếm sản phẩm: Hình 13 Biểu đồ hoạt động tìm kiếm sản phẩm Page 22 of 36 3.2.5 Biểu đồ hoạt động thêm sản phẩm vào giỏ hàng: Hình 14 Biểu đồ hoạt động thêm sản phẩm vào giỏ hàng 3.2.6 Biểu đồ hoạt động xóa sản phẩm giỏ hàng: Page 23 of 36 Hình 15 Biểu đồ hoạt động xóa sản phẩm giỏ hàng Page 24 of 36 3.2.7 Biểu đồ hoạt động đặt hàng: Hình 16 Biểu đồ hoạt động đặt hàng Page 25 of 36 3.3 Biểu đồ tuần tự: 3.3.1 Biểu đồ đăng ký: Hình 17 Biểu đồ đăng ký Page 26 of 36 3.3.2 Biểu đồ đăng nhập: Hình 18 Biểu đồ đăng nhập Page 27 of 36 3.3.3 Biểu đồ xem chi tiết sản phẩm: Hình 19 Biểu đồ xem chi tiết sản phẩm 3.3.4 Biểu đồ tìm kiếm sản phẩm: Hình 20 Biểu đồ tìm kiếm sản phẩm Page 28 of 36 3.3.5 Biểu đồ đặt hàng: Hình 21 Biểu đô đặt hàng CHƯƠNG 4: TRIỂN KHAI PHẦN MỀM 4.1 Giao diện trang đăng ký: Page 29 of 36 Hình 22 Giao diện trang đăng ký 4.2 Giao diện trang đăng nhập: Hình 23 Giao diện trang đăng nhập 4.3 Giao diện trang chủ: Page 30 of 36 Hình 24 Giao diện trang chủ 4.4 Giao diện trang danh sách xe: Hình 25 Giao diện trang danh sách xe Page 31 of 36 4.5 Giao diện trang chi tiết – tab ‘Vận hành’: Hình 26 Giao diện trang chi tiết - tab 'Vận hành' 4.6 Giao diện trang chi tiết – tab ‘Nội thất’: Hình 27 Giao diện trang chi tiết - tab 'Nội thất' Page 32 of 36 4.7 Giao diện trang chi tiết – tab ‘Thông số’: Hình 28 Giao diện trang chi tiết - tab 'Thơng số' 4.8 Giao diện trang liên hệ: Hình 29 Giao diện trang liên hệ Page 33 of 36 CHƯƠNG 5: TỔNG KẾT 5.1 Kết luận: Đề tài “Xây dựng website bán ô tô với ReactJS” hướng dẫn thầy cô đạt kết sau: Vận dụng kiến thức học để thiết kế giao diện website bán ô tô Đảm bảo chức ứng dụng: người dùng đăng kí, đăng nhập, mua hàng Thiết kế giao diện ứng dụng Bên cạnh đó, hạn chế mà đề tài tồn tại, cần chỉnh sửa thời gian tới: Do thời gian kiến thức thực tế chưa sâu, nên nghiệp vụ chưa dược đáp ứng đầy đủ 5.2 Hướng phát triển: Trong thời gian tới, phát triển đồ án đầy đủ để áp dụng vào thực tế: Bổ sung thêm số tính Bổ sung hiệu ứng sinh động cho ứng dụng, giúp thu hút khách hàng Tạo nhiều hiệu ứng đẹp mắt giao diện sử dụng khách hàng Page 34 of 36 TÀI LIỆU THAM KHẢO [1] Thạc Bình Cường, 2002, Phân tích thiết kế hệ thống thông tin, nhà [2] [3] [4] [5] xuất Khoa học Kỹ thuật https://vi.wikipedia.org/wiki/HTML (Nguồn: Internet) https://www.w3schools.com/css/ (Nguồn: Internet) https://fullstackstation.com/react-js-la-gi/ (Nguồn: Internet) https://wiki.matbao.net/javascript-la-gi-hoc-lap-trinh-javascript-ngonngu-cua-tuong-lai/ (Nguồn: Internet) Page 35 of 36