Báo cáo thực tập định kì ii đề tài xây dựng website thuê ô tô trực tuyến

BỘ THÔNG TIN VÀ TRUYỀN THÔNG HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG BÁO CÁO THỰC TẬP ĐỊNH KÌ II Đề tài XÂY DỰNG WEBSITE THUÊ Ô TÔ TRỰC TUYẾN Người hướng dẫn ThS HUỲNH TRUNG TRỤ Sinh viên thực hiện NG[.]

BỘ THÔNG TIN VÀ TRUYỀN THÔNG HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THƠNG BÁO CÁO THỰC TẬP ĐỊNH KÌ II Đề tài: XÂY DỰNG WEBSITE THUÊ Ô TÔ TRỰC TUYẾN Người hướng dẫn : ThS HUỲNH TRUNG TRỤ Sinh viên thực : NGUYỄN ĐỨC TÂM Mã số sinh viên : N18DCCN180 Lớp : D18CQCP02-N BÁO CÁO ĐỊNH KÌ I CHƯƠNG 5: CHƯƠNG TRÌNH CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1.1 Tổng quan: Ngày Cơng nghệ thơng tin nói chung, Tin học nói riêng đóng góp vai trị quan trọng đời sống người Các thành tựu đã, ứng dụng, phát triển lĩnh vực kinh tế - trị - quân quốc gia Nếu trước đây, máy tính sử dụng cho nghiên cứu khoa học – kĩ thuật, ngày ứng dụng cho nhiều mục đích khác như: Quản lý, lưu trữ liệu, giải trí, điều khiển tự động Nhờ cơng nghệ thông tin trở thành công cụ quản lý cho toàn hệ thống xã hội Những năm gần đây, nước ta tin học ứng dụng rộng rãi lĩnh vự giáo dục đào tạo Việc ứng dụng phần mềm quản lý hệ thống thông tin trợ giúp nhiều cho nhà quản lý Hệ thống thông tin quản lý cho thuê ô tô giúp ích cho khâu quản lý, khâu tìm kiếm cập nhật thơng tin, đảm bảo khoa học xác nhanh chóng Đồ án giới thiệu phương pháp phân tích thiết kế hướng cấu trúc đồng thời tìm hiểu trạng, nghiên cứu hệ thống quản lý cho thuê ô tô DealCar Áp dụng phương pháp phân tích thiết kế hướng cấu trúc để giải tốn Thử nghiệm cơng cụ MongoDB Visual Studio Code để hỗ trợ thiết kế Tiến hành phân tích cài đặt chương trình thử nghiệm Chương trình xây dựng tảng NodeJs ReactJs Với kiến thức cịn hạn chế, chắn khơng thể tránh khỏi sai sót Vì vậy, em mong nhận góp ý q thầy để em hồn thiện đề tài tốt BÁO CÁO ĐỊNH KÌ I CHƯƠNG 5: CHƯƠNG TRÌNH 1.2 Tìm hiểu “Xây dựng website th tơ trực tuyến” a Lý thuyết: Tìm hiểu về: - Nodejs, MongoDB, RESTful API - HTML, CSS, Javascript, ReactJs - Thương mại điện tử, toán trực tuyến b Thực hành: Phân tích thiết kế sở lưu giữ liệu Xây dựng website thuê ô tô trực tuyến với chức năng: - Thêm/xóa/sửa danh mục cho người dùng - Đăng ký, đăng nhập, tạo tài khoản, phân quyền - Tra cứu theo đơn giá - Xử lý giỏ hàng, toán trực tuyến, theo dõi đơn hàng - Báo cáo doanh thu 1.3 Công cụ sử dụng: - MongoDB Compass Visual Studio Code 1.4 Mục tiêu đề tài: Đảm bảo việc thuê cho thuê xe khách hàng diễn nhanh chóng, xác: - Giúp người quản lý quản lý tình hình hoạt động cơng ty xem báo cáo, thống kê - Đảm bảo khách hàng có thơng tin xác sản phẩm, đặt thuê toán diễn đơn giản BÁO CÁO ĐỊNH KÌ I CHƯƠNG 5: CHƯƠNG TRÌNH CHƯƠNG 2: CƠ SỞ LÝ THUYẾT ĐỀ TÀI 2.1 Giới thiệu MongoDB: - - MongoDB chương trình sở liệu mã nguồn mở thiết kế theo kiểu hướng đối tượng bảng cấu trúc cách linh hoạt cho phép liệu lưu bảng không cần phải tuân theo dạng cấu trúc định Chính cấu trúc linh hoạt nên MongoDB dùng để lưu trữ liệu có cấu trúc phức tạp đa dạng khơng cố định (hay cịn gọi Big Data)  MongoDB sở liệu dựa Document, Collection giữ Document khác Số trường, nội dung kích cỡ Document khác với Document khác - MongoDB đẩy trách nghiệm thao tác Database cho tầng ứng dụng nên tốn tài ngun(tài ngun khơng cịn vấn đề lớn nữa) - MongoDb dùng nhiều máy tính phân tán để lưu trữ liệu phí rẻ Mysql Mysql sử dụng những máy chủ hàng khủng, độc quyền nên đắt đỏ - MongoDb mở trộng theo chiều ngang (scale out) phương pháp tăng cường khả lưu trữ xử lý dùng nhiều máy tính phân tán MongoDb cịn mở rộng theo chiều dọc (scale up) tăng cấu hình server 2.2 Giới thiệu Visual Studio Code: - Là trình biên tập lập trình code miễn phí dành cho Windows, Linux macOS, Visual Studio Code phát triển Microsoft Nó xem kết hợp hoàn hảo IDE Code Editor - Visual Studio Code hỗ trợ chức debug, kèm với Git, có syntax highlighting, tự hồn thành mã thơng minh, snippets, cải tiến mã nguồn Nhờ tính tùy chỉnh, Visual Studio Code cho phép người dùng thay đổi theme, phím tắt, tùy chọn khác - Visual Studio Code hỗ trợ nhiều ngơn ngữ lập trình C/C++, C#, F#, Visual Basic, HTML, CSS, JavaScript, … Vì vậy, dễ dàng phát đưa thông báo chương chương trình có lỗi Các trình viết code thơng thường sử dụng cho Windows Linux Mac Systems Nhưng Visual Studio Code hoạt động tốt ba tảng 2.3 Tổng quan React: - - ReactJS thư viện JavaScript front-end phổ biến lĩnh vực phát triển web, hay gọi React React tạo để xây dựng giao diện người dùng nhanh tương tác cho ứng dụng web di động Trong Reactjs thường dùng javascript để thiết kế bố cục cho trang web, nhược điểm cấu trúc khó Thay vào sử dụng JSX nhúng đoạn HTML vào javascript, ta thấy cú pháp dễ hiểu JSX tối ưu code biên soạn Vừa dễ cho người lập trình mà vừa tiện cho việc biên dịch BÁO CÁO ĐỊNH KÌ I - - CHƯƠNG 5: CHƯƠNG TRÌNH React xây dựng xung quanh component, không dùng template framework khác Trong React, xây dựng trang web sử dụng thành phần (component) nhỏ Chúng ta tái sử dụng component nhiều nơi, với trạng thái thuộc tính khác nhau, component lại chứa thành phần khác Mỗi component React có trạng thái riêng, thay đổi, React thực cập nhật component dựa thay đổi trạng thái Mọi thứ React component Chúng giúp bảo trì mã code làm việc với dự án lớn Một react component đơn giản cần method render Có nhiều methods khả dụng khác, nhưng render là method chủ đạo 2.4 Tổng quan RESTful API: - - REST viết tắt Representational State Transfer RESTful API là tiêu chuẩn dùng việc thiết kế API cho ứng dụng web để quản lý resource RESTful kiểu thiết kế API sử dụng phổ biến ngày ứng dụng (web, mobile…) khác giao tiếp với Chức quan trọng REST là quy định cách sử dụng HTTP method (như GET, POST, PUT, DELETE…) cách định dạng URL cho ứng dụng web để quản resource RESTful không quy định logic code ứng dụng không giới hạn ngơn ngữ lập trình ứng dụng, ngơn ngữ framework sử dụng để thiết kế một RESTful API 2.5 Giới thiệu mơ hình MVC (Model – View - Controller): 2.5.1 Tổng quan MVC: - - Mơ hình MVC ASP.NET Core (Model – View – Controller) mơ hình để xây dựng ứng dụng web sử dụng rộng rãi, kết hợp với framework Javascript front-end Angular Các ứng dụng di động IOS Android dùng biến thể MVC Mơ hình MVC gồm thành phần sau: + Controller: Xử lý yêu cầu đến từ máy khách trình duyệt web đưa tiến trình + View: Là nơi nhận liệu hiển thị liệu người dùng + Model: Là nơi chứa liệu thêm vào từ view, liệu nhập từ người dùng 2.5.2 Lợi ích sử dụng mơ hình MVC: - Trình tự xử lý rõ ràng Tạo mơ hình chuẩn cho dự án, người có chun mơn ngồi dự án tiếp cận dễ dàng Các thành phần phân biệt rõ ràng, việc làm cho q trình phát triển –quản lý – vận hành – bảo trì diễn thuận lợi hơn, tạo chức chuyên biệt hóa đồng thời kiểm sốt luồng xử lý BÁO CÁO ĐỊNH KÌ I CHƯƠNG 5: CHƯƠNG TRÌNH CHƯƠNG 3: KHẢO SÁT HỆ THỐNG 3.1 Khảo sát hệ thống website thuê xe ô tô trực tuyến Các thông tin nghiệp vụ khảo sát: - Khách hàng có thơng tin bao gồm mã khách hàng để phân biệt, họ tên, tính, ngày sinh, địa chỉ, số điện thoại, email - Mỗi khách hàng tài khoản đăng nhập email password Email đăng nhập email mà khách hàng nhân viên đăng ký - Mỗi tài khoản thuộc nhóm quyền nhóm quyền có nhiều tài khoản khác - Khách hàng đặt xe nhiều lần thơng tin bao gồm ngày đặt, họ tên, địa chỉ, số điện thoại người nhận, ngày giao, loại xe thuê, thời gian thuê - lần thuê xe thuê xe, xe thuê duyệt người cho thuê giao nhận xe hợp đồng - đơn hàng có hóa đơn tương ứng, thơng tin bao gồm ngày tạo hóa đơn, tổng tiền mã đơn hàng để phân biệt - đơn đặt hàng có phiếu nhập, đơn đặt hàng nhập cịn thiếu xem đơn đặt hàng kết thúc, muốn nhập lại lập đơn đặt hàng - Thông tin loại sản phẩm bao gồm mã loại để phân biệt loại sản phẩm khác nhau, tên loại (vd: xe chỗ, xe chỗ, ), mơ tả, hình ảnh 3.2 Các chức hệ thống Đề tài Xây dựng website bán nệm Kymdan trực tuyến có chức hệ thống sau: 3.2.1 Yêu cầu chức hệ thống:  Chức admin - Thêm/xóa/sửa danh mục - Thống kê doanh thu bán hàng   - Công việc người thuê xe Đăng ký tài khoản/Đăng nhập Xem thông xe Đặt xe toán Xác nhận hợp đồng thuê xe, nhận xe Công việc người cho thuê xe Đăng ký tài khoản/Đăng nhập Đăng ký xe cho thuê Xác nhận hợp đồng thuê xe, bàn giao xe Đối tượng tham gia hệ thống: · Người thuê xe · Người cho thuê xe Yêu cầu phi chức năng: BÁO CÁO ĐỊNH KÌ I CHƯƠNG 5: CHƯƠNG TRÌNH  Hệ thống đáng tin cậy, xác, giao diện thân thiện, dễ sử dụng, truy cập liệu nhanh chóng  Đảm bảo tính bảo mật cho người điều hành hệ thống  Phải có tính linh hoạt cao BÁO CÁO ĐỊNH KÌ I CHƯƠNG 5: CHƯƠNG TRÌNH CHƯƠNG 4: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 4.1 Mơ hình chức nghiệp vụ (BFD – Business Function Diagram) Chức công việc mà tổ chức cần làm phân theo nhiều mức từ tổng hợp đến chi tiết Mỗi chức có tên nhất, chức khác phải có tên khác Để xác định tên cho chức cách xác cụ thể, bàn luận trí với người sử dụng Hình thức biểu diễn: Hình chữ nhật: Mỗi chức phân rã thành chức Các chức có quan hệ phân cấp với chức cha Biểu diễn mối quan hệ phân cấp chức sau: 4.2 Mô hình luồng liệu (DFD – Data Flow Diagram) BÁO CÁO ĐỊNH KÌ I CHƯƠNG 5: CHƯƠNG TRÌNH Mơ hình luồng liệu cơng cụ mơ tả quan hệ thông tin công việc Biểu đồ luồng liệu gồm có yếu tố chính: Hình Các đối tượng sử dụng để thiết kế biểu đồ luồng liệu 4.3 Thiết lập mô hình thực thể  Car CarSchema = new Schema(   {         id: { type: Number, required: true },         name: { type: String, require: true },         ownerId: { type: Number, required: true },         wd: { type: Number, required: true, default: },         sd: { type: Number, required: true, default: },         location: {             provinceId: { type: String, required: true },             districtId: { type: String, required: true },             wardId: { type: String, required: true },             street: { type: String },         },         locationAddrS: { type: String },         photos: [       { BÁO CÁO ĐỊNH KÌ I CHƯƠNG 5: CHƯƠNG TRÌNH                 id: { type: String, required: true },                 thumbUrl: { type: String, required: true },                 fullUrl: { type: String, required: false },             },         ],         price: { type: Number, required: true, default: },         priceOrigin: { type: Number, required: true, default: },         totalDiscountPercent: { type: Number, required: true, default: },         status: { type: Number, required: true, default: },         seat: { type: Number, required: true, default: },         brand: {             id: { type: Number, required: true },             name: { type: String, require: true },         },         totalTrips: { type: Number, required: true, default: },         optionsFuel: { type: Number, required: true, default: },         optionsFuelConsumption: { type: Number, required: true, default: },         optionsTransmission: { type: Number },         features: [       {                 id: { type: String, required: true },                 logo: { type: String, required: false },                 name: { type: String, required: true },             },         ],         rangeFrom: { type: Number, required: true, default: },         rangeTo: { type: Number, required: true, default: },         rating: {             avg: { type: Number, required: true, default: },             star1: { type: Number, required: true, default: },             star2: { type: Number, required: true, default: },             star3: { type: Number, required: true, default: },             star4: { type: Number, required: true, default: },             star5: { type: Number, required: true, default: },         },         wdShort: {             type: {                 price: { type: Number, required: true, default: },                 priceOrigin: { type: Number, required: true, default: },                 totalDiscountPercent: { type: Number, required: true, default: },             },             requirer: false,         },         reviews: {             type: [         {                     id: { type: String, required: true },                     uid: { type: Number, require: true },                     timeCreated: { type: Number, require: true },                     rating: { type: Number, require: true },                     comment: { type: String, require: false },                 }, 10 BÁO CÁO ĐỊNH KÌ I CHƯƠNG 5: CHƯƠNG TRÌNH             ],             require: false,         },         desc: { type: String, required: false, default: "" },         notes: { type: String, required: false, default: "" },         requiredPapers: [       {                 id: { type: String },                 name: { type: String },                 logo: { type: String },             },         ],         startTime: { type: Number, required: false, default: },         endTime: { type: Number, required: false, default: },         timeApprovedSD: { type: Number, required: false, default: },         timeApprovedWD: { type: Number, required: false, default: },     },     { timestamps: true } );  Brand BrandSchema = new Schema(   {         id: {             type: String,             required: true,         },         name: {             type: String,             required: true,         },         logo: {             type: String,             // require: true,         },     },     { timestamps: true } ); Feature FeatureSchema = new Schema(   {         id: {             type: String,             required: true,         },         name: {             type: String,             required: true,         }, 11 BÁO CÁO ĐỊNH KÌ I CHƯƠNG 5: CHƯƠNG TRÌNH         logo: {             type: String,             // require: true,         },     },     { timestamps: true } );  User  UserSchema = new Schema(   {         uid: { type: Number, require: true },         FirstName: { type: String, required: true },         LastName: { type: String, required: true },         SDT: { type: String, require: true },         Address: { type: String },         Email: { type: String, required: true },         Password: { type: String, required: true },         Avatar: { type: String, require: true },         Role: { type: String, require: true, default: "USER" },         Verified: { type: Boolean, default: false },         VerifyCode: { type: String, required: true, default: "555555" },         VerifyCodeExpired: { type: Date, require: true, default: Date.now() + 1000 * 60 * 15 },         AccessToken: { type: String, required: true },         RefreshToken: { type: String, require: true },     },     { timestamps: true } ) ); 12 BÁO CÁO ĐỊNH KÌ I CHƯƠNG 5: CHƯƠNG TRÌNH CHƯƠNG 5: CHƯƠNG TRÌNH 5.1Thiết kế web service Người sử dụng giao tiếp với Web Service thông qua API Vậy để xác định thông tin người sử dụng tài nguyên mà người phép truy cập Để giải vấn đề này, sử dụng phương pháp bảo mật phổ biến hệ thống xác định người sử dụng thông đoạn mã gọi Token Token gắn vào Header gửi Request Đoạn mã chứa thông tin mã hóa gồm thơng tin người dùng thời gian hết hạn Khi mã hết hạn Người dùng bắt buộc phải đăng nhập lại để lấy mã 13 Hình Authorize Authentication 5.2 Thiết kế giao diện dành cho khách hàng - Form đăng nhập cho nhà đầu tư Username khách hàng đăng ký Password mật mã gửi vào mail đơn đăng ký duyệt Có thể đổi mật Nếu nhập thơng tin khơng xác người dùng nhận thơng báo “đăng nhập thất bại” Nếu đăng nhập thành cơng đưa đến hình ... 1.2 Tìm hiểu ? ?Xây dựng website thuê ô tô trực tuyến? ?? a Lý thuyết: Tìm hiểu về: - Nodejs, MongoDB, RESTful API - HTML, CSS, Javascript, ReactJs - Thương mại điện tử, tốn trực tuyến b Thực hành: Phân... đồng thời kiểm soát luồng xử lý BÁO CÁO ĐỊNH KÌ I CHƯƠNG 5: CHƯƠNG TRÌNH CHƯƠNG 3: KHẢO SÁT HỆ THỐNG 3.1 Khảo sát hệ thống website thuê xe ô tô trực tuyến Các thông tin nghiệp vụ khảo sát: - Khách... liệu Xây dựng website thuê ô tô trực tuyến với chức năng: - Thêm/xóa/sửa danh mục cho người dùng - Đăng ký, đăng nhập, tạo tài khoản, phân quyền - Tra cứu theo đơn giá - Xử lý giỏ hàng, toán trực