Đầy là báo cáo đồ án viết chi tiết cho đề tài thiết kế website và các loại bài tập lớn ( 80 trang chuẩn). Giúp các bạn có thể đạt điểm cao trong quá trình báo cáo cũng như làm đồ án để thầy cô xét duyệt.Đề tài của đồ án là: Xây dựng website hỗ trợ nấu ăn tương tác sử dụng Framwork Laravel và Vue.js
0 MỤC LỤC DANH MỤC CÁC BẢNG .0 DANH SÁCH CÁC HÌNH ẢNH VÀ BIỂU ĐỒ LỜI CẢM ƠN MỞ ĐẦU Tên đề tài Lý chọn tính cấp thiết đề tài .4 Mục tiêu nghiên cứu Nội dung nghiên cứu 5 Đối tượng phạm vi nghiên cứu Bố cục đồ án CHƯƠNG KHẢO SÁT VÀ ĐẶC TẢ HỆ THỐNG HỖ TRỢ NẤU ĂN TƯƠNG TÁC 1.1 Khảo sát sơ hệ thống 1.2 Xác định yêu cầu hệ thống 1.3 Kết khảo sát sơ 1.4 Phân quyền người dùng 1.4.1 Quản trị hệ thống (Admin) 1.4.2 Các nhân viên 1.4.3 Các chuyên gia ẩm 1.4.4 Người dùng internet (Thành viên/ người chưa có tài khoản) CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG .10 2.1 Biểu đồ ca sử dụng 10 2.2 Các tác nhân hệ thống 11 2.3 Đặc tả ca sử dụng 12 2.3.1 Usecase Login 12 2.3.2 Usecase Xem công thức 13 2.3.3 Usecase Comment 13 2.3.4 Usecase Quản lý User .14 2.3.5 UseCase Đăng công thức 15 2.3.6 Usecase Quản lý Công thức 16 2.3.7 Usecase Hỗ trợ nấu ăn tương tác 18 2.4 Tìm lớp lĩnh vực hệ thống 19 2.4.1 Xác định lớp dựa vào khái niệm lĩnh vực ứng dụng 19 2.4.2 Mơ hình hóa tương tác .22 2.5 Thiết kế sở liệu 39 2.5.1 Bảng sở liệu chung 39 2.5.2 Chi tiết bảng 41 2.6 Phác thảo giao diện 47 2.6.1 Trang đăng nhập 47 2.6.2 Trang đăng ký thành viên 48 2.6.3 Trang chủ 49 2.6.4 Trang quản trị .50 2.6.5 Trang xem công thức 51 2.6.6 Trang hỗ trợ nấu ăn tương tác 52 CHƯƠNG 3: THIẾT KẾ VÀ CÀI ĐẶT CHƯƠNG TRÌNH 53 3.1 3.1.1 Cài đặt lập trình 53 Framework Laravel 53 3.1.2 Vue Js 54 3.1.3 PHP 55 3.1.4 Cấu trúc Project 56 3.2 Kết đạt .57 3.2.1 Giao diện Trang chủ 57 3.2.2 Giao diện trang Đăng nhập .59 3.2.3 Giao diện trang Đăng ký 60 3.2.4 Giao diện trang Quản trị 61 3.2.5 Giao diện trang Xem công thức 62 3.2.6 Giao diện trang Hỗ trợ nấu ăn tương tác 64 3.2.7 Giao diện trang Thêm thể loại 65 3.2.8 Giao diện trang Quản lý ăn (dish) 66 3.2.9 Giao diện trang Thêm ăn 68 3.2.10 Giao diện trang Quản lý công thức nấu 69 3.2.11 Giao diện trang Thêm công thức 70 3.2.12 Giao diện trang Cập nhật công thức 71 3.2.13 Giao diện trang Quản lý user 72 3.2.14 Giao diện trang Thêm user .73 3.2.15 Giao diện trang Cập nhật thông tin user 74 3.2.16 Giao diện trang Thông tin cá nhân 75 3.2.17 Giao diện trang Đăng công thức 76 KẾT LUẬN .78 Đánh giá kết 78 Hướng phát triển đề tài .79 Tổng kết 79 TÀI LIỆU THAM KHẢO 80 PHỤ LỤC .81 DANH MỤC CÁC BẢNG Bảng 1: Bảng users .41 Bảng 2: Bảng category 42 Bảng 3: Bảng dish .42 Bảng 4: Bảng recipes 43 Bảng 5: Bảng messages .45 Bảng 6: Bảng Comment 45 Bảng 7: Bảng TuKhoa 45 Bảng 8: Bảng Slide .46 DANH SÁCH CÁC HÌNH ẢNH VÀ BIỂU ĐỒ Hình 1.1: Sơ đồ quy trình hệ thống .7 Hình 1.2: Sơ đồ phân quyền người dùng Hình 2.1 : Biểu đồ ca sử dụng 10 Hình 2.2: Biểu đồ trình tự đăng nhập 24 Hình 2.3: Biểu đồ trình tự đăng ký tài khoản 25 Hình 2.4: Biểu đồ trình tự xem cơng thức 26 Hình 2.5: Biểu đồ trình tự bình luận (comment) 27 Hình 2.6: Biểu đồ trình tự tính ngun liệu (count material) .28 Hình 2.7: Biểu đồ trình tự đăng công thức 29 Hình 2.8: Biểu đồ trình tự thêm user 30 Hình 2.9: Biểu đồ trình tự cập nhật user .31 Hình 2.10: Biểu đồ trình tự xóa user 32 Hình 2.11: Biểu đồ trình tự thêm công thức 33 Hình 2.12: Biểu đồ trình tự duyệt cơng thức 34 Hình 2.13: Biểu đồ trình tự update recipe 35 Hình 2.14: Biểu đồ trình tự xóa cơng thức 36 Hình 2.15: Biểu đồ trình tự Tìm kiếm cơng thức 37 Hình 2.16: Biểu đồ trình tự chat real-time 38 Hình 2.17:Lược đồ Cơ sở liệu .39 Hình 2.18: Phác thảo giao diện trang đăng nhập 47 Hình 2.19: Phác thảo giao diện trang đăng ký thành viên 48 Hình 2.20: Phác thảo giao diện trang chủ 49 Hình 2.21: Phác thảo giao diện trang quản trị 50 Hình 2.22: Phác thảo giao diện trang xem cơng thức 51 Hình 2.23: Phác thảo giao diện trang hỗ trợ nấu ăn tương tác 52 Hình 3.1: Mơ hình MVC .55 Hình 3.2: Cấu trúc Project 56 Hình 3.3: Giao diện trang chủ .58 Hình 3.4: Giao diện trang đăng nhập 59 Hình 3.5: Giao diện trang đăng ký 60 Hình 3.6: Giao diện trang quản trị 61 Hình 3.7: Giao diện trang xem công thức 63 Hình 3.8: Giao diện trang hỗ trợ nấu ăn tương tác .64 Hình 3.9: Giao diện trang thêm thể loại 65 Hình 3.10: Giao diện trang Quản lý ăn (dish) .67 Hình 3.11: Giao diện trang thêm ăn .68 Hình 3.12: Giao diện trang quản lý công thức 69 Hình 3.13: Giao diện trang thêm cơng thức 70 Hình 3.14: Giao diện trang update cơng thức .71 Hình 3.15: Giao diện trang quản lý user .72 Hình 3.16: Giao diện trang thêm user 73 Hình 3.17: Giao diện trang cập nhật thông tin user 74 Hình 3.18: Giao diện trang thơng tin cá nhân .75 Hình 3.19: Giao diện trang đăng công thức 77 LỜI CẢM ƠN Em xin cảm ơn trường Đại học Công Nghiệp Hà Nội khoa Công Nghệ Thông Tin cho em hội làm đồ án tốt nghiệp Em xin chân thành cảm ơn giúp đỡ thầy giáo T.S Phạm Văn Hà tận tình giúp đỡ em suốt thời gian làm đồ án thời gian thực tập tốt nghiệp Em mong nhận góp ý thầy bạn, giúp sản phẩm em ngày hoàn thiện hơn, đáp ứng nhu cầu thực tiễn người sử dụng Em xin chân thành cảm ơn! Sinh viên thực Trưởng Nguyễn Văn Trưởng MỞ ĐẦU Tên đề tài “ Xây dựng hệ thống hỗ trợ nấu ăn tương tác sử dụng Laravel FrameWork Vue.js” Lý chọn tính cấp thiết đề tài Chế biến thức ăn việc làm cần thiết cho sống người, thực nơi cơng cộng hay hộ gia đình Chính thế, nấu ăn hoạt động khơng thể thiếu Muốn có thức ăn ngon, phải có người nấu ăn giỏi Xã hội phát triển, sống ngày sung túc văn minh, nhu cầu ăn ngon mặc đẹp ngày nâng cao Hiện nay, nhiều trường lớp đào tạo nấu ăn phát triển mạnh mẽ, từ hệ sơ cấp đến hệ đại học tổ chức dạng trường lớp chuyên nghiệp, quy, khơng quy, lớp dạy nấu ăn ngắn hạn Tuy nhiên, khơng phải có nhiều thời gian cho việc học nấu ăn để nấu cho gia đình, thay vào sử dụng Internet để hỗ trợ việc nấu ăn Với nhiều ưu điểm tiện ích vượt trội, Internet từ đời đến ln đóng vai trị quan trọng đời sống xã hội, có ảnh hưởng tác động đến mặt, lĩnh vực sống Vì em thấy việc xây dựng hệ thống hỗ trợ nấu ăn tương tác trực tuyến phù hợp cần thiết bối cảnh nay, giúp cho việc nấu ăn bà nội chợ trở lên đơn giản hơn, tăng chất lượng bữa ăn chất lượng sức khỏe cho thành viên gia đình Với lí đó, hướng dẫn giúp đỡ thầy giáo T.S Phạm Văn Hà, em chọn đề tài :”Xây dựng hệ thống hỗ trợ nấu ăn tương tác sử dụng Laravel FrameWork Vue.js” làm đề tài luận án tốt nghiệp Mục tiêu nghiên cứu Vận dụng kiến thức học, triển khai phân tích, thiết kế website hỗ trợ nấu ăn tương tác trực tuyến, nghiên cứu ứng dụng Laravel FrameWork Vue.js vào xây dựng phần mềm thiết kế Người dùng: Giúp cho công việc nấu ăn bà nội chợ trở nên dễ dàng hơn, tiết kiệm thời gian tiền bạc, đảm bảo chất lượng cho bữa ăn gia đình bữa tiệc với máy tính smartphone có kết nối Internet Người quản trị: giúp việc quản lý liệu hệ thống cách dễ dàng phục vụ việc nghiên cứu nhu cầu , thói quen ăn uống người dùng Nội dung nghiên cứu Khảo sát, phân tích, thiết kế xây dựng hệ thống Tìm hiểu Framework Laravel Vue.js Thiết kế xây dựng theo mơ hình MVC Tính chat real-time tính tương tác cho người dùng Đối tượng phạm vi nghiên cứu Phạm vi nghiên cứu: bà nội chợ, người có sở thích học dạy nấu ăn Internet Đối tượng nghiên cứu: ăn công thức nấu ăn Bố cục đồ án Nội dung đề tài gồm chương : CHƯƠNG 1: KHẢO SÁT VÀ ĐẶC TẢ HỆ THỐNG NẤU ĂN TƯƠNG TÁC CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG CHƯƠNG 3: THIẾT KẾ VÀ CÀI ĐẶT CHƯƠNG TRÌNH CHƯƠNG KHẢO SÁT VÀ ĐẶC TẢ HỆ THỐNG HỖ TRỢ NẤU ĂN TƯƠNG TÁC 1.1 Khảo sát sơ hệ thống Hệ thống hỗ trợ nấu ăn monngon365.com website giúp cho công việc nấu ăn trở nên dễ dàng hơn, người biết hàng ngàn công thức nấu ăn ngon, đơn giản vô hấp dẫn Tại người tham khảo cơng thức chế biến ăn từ đầu bếp tiếng, bạn chia cách nấu ăn lên cho người biết Một số tính hệ thống: Tìm kiếm cách chế biến ăn từ chuyên gia ẩm thực hệ thống Để lại bình luận, đánh giá công thức, like công thức Chat trực tiếp với người làm ăn để hỏi cơng thức Hệ thống hỗ trợ trực tiếp người dùng cần hỗ trợ Chia sẻ công thức nấu ăn riêng thân 1.2 Xác định yêu cầu hệ thống Xây dựng hệ thống hỗ trợ nấu ăn tương tác tảng Web cần đáp ứng yêu cầu sau: Giao diện đẹp mắt, thân thiện với người dùng Chia sẻ công thức nấu ăn tới người dùng Cho phép tra cứu công thức người sử dụng có nhu cầu tìm cơng thức Các thành viên tương tác với chuyên gia ẩm thực trực tuyến, giúp người dùng tính tốn ngun liệu nấu nướng Like cơng thức để lại lời bình cơng thức Hình 3.10: Giao diện trang Quản lý ăn (dish) 3.2.9 Giao diện trang Thêm ăn - Cho phép người quản trị/nhân viên thêm sau nhập đầy đủ thông tin hợp lệ click vào nút “Thêm” để thêm ăn vào hệ thống Hình 3.11: Giao diện trang thêm ăn 3.2.10 Giao diện trang Quản lý công thức nấu - Cho phép người quản trị/nhân viên thực nghiệp vụ như: Thêm, Cập nhât, Xóa liệu cơng thức hệ thống Hình 3.12: Giao diện trang quản lý công thức 3.2.11 Giao diện trang Thêm công thức - Cho phép người quản trị/nhân viên sau nhập đầy đủ thông tin hợp lệ click vào nút “Thêm” để thêm công thức vào hệ thống.Ở có mục hướng dẫn nhập (khơng load lại trang) để người quản trị xem trước nhập Hình 3.13: Giao diện trang thêm cơng thức 3.2.12 Giao diện trang Cập nhật công thức - Cho phép người quản trị/nhân viên sau nhập đầy đủ thông tin hợp lệ click vào nút “Cập nhật” để cập nhật lại thông tin công thức hệ thống Nếu không hợp lệ báo nhập không hợp lệ lại trang Hình 3.14: Giao diện trang update công thức 3.2.13 Giao diện trang Quản lý user - Cho phép người Quản trị thực nghiệp vụ như: Thêm, Xem thông tin, Cập nhât, Xóa liệu User (Người dùng) hệ thống Hình 3.15: Giao diện trang quản lý user 3.2.14 Giao diện trang Thêm user - Cho phép người quản trị sau nhập đầy đủ thông tin hợp lệ click vào nút “Thêm” để thêm user vào hệ thống Nếu không hợp lệ báo lỗi Hình 3.16: Giao diện trang thêm user 3.2.15Giao diện trang Cập nhật thông tin user - Cho phép người Quản trị sau nhập đầy đủ thông tin hợp lệ click vào nút “Cập nhật” để cập nhật lại thông tin user hệ thống Nếu không hợp lệ báo nhập không hợp lệ lại trang Hình 3.17: Giao diện trang cập nhật thông tin user 3.2.16 Giao diện trang Thông tin cá nhân - Cho phép người dùng xem thông tin cá nhân công thức mà người dùng đăng lên hệ thống Hình 3.18: Giao diện trang thơng tin cá nhân 3.2.17 Giao diện trang Đăng công thức - Cho phép người dùng sau đăng nhập đăng cơng thức ăn riêng thân lên hệ thống để chờ Phê duyệt, công thức phê duyệt hiển thị lên trang chủ Hình 3.19: Giao diện trang đăng cơng thức KẾT LUẬN Đánh giá kết Trong tuần em làm đồ án, hệ thống xây dựng chức theo yêu cầu ban đầu Hệ thống thiết kế tương đối rõ ràng chi tiết, usecase chức giới thiệu, mơ tả chi tiết dễ hình dung Bài báo cáo đồ án em tìm hiều áp dụng kiến thức có từ trình học tập trường, nhận hướng dẫn bảo tận tình từ thầy giáo TS Phạm Văn Hà Kết đạt được: - Hoàn thành khảo sát hệ thống - Hoàn thành thiết kế hệ thống: Phân tích usecase, hồn thành thiết kế sở liệu biểu đồ, hoàn thành thiết kế giao diện - Hồn thành việc lập trình triển khai: + Về phía người dùng: Đó hiển thị đăng nhập, đăng ký, xem công thức, đăng công thức, like cơng thức, tính tốn ngun liệu, viết bình luận, chat real-time,… + Về phía quản trị: Quản lý thể loại, quản lý ăn, quản lý cơng thức, quản lý từ người dùng, slide, từ khóa tìm kiếm,… Về yêu cầu phi chức năng: - Giao diện sản phẩm đẹp mắt, thân thiện, dễ sử dụng - Chạy thích hợp nhiều thiết bị (Đã Responsive) Hướng phát triển đề tài Xây dựng thêm chức nhắn tin riêng Mở rộng ứng dụng với quy mô lớn hơn, có khả trao đổi liệu xử lí với ứng dụng khác Phát triển thêm chức như: chức thống kê lượng liệu truy cập Tăng cường tính bảo mật hệ thống website nhằm đảm bảo tính tồn vẹn liệu khơng đánh cắp thơng tin người dùng Cần kiểm sốt chặt chẽ liệu trước người dùng đăng Thiết kế giao diện đẹp mắt Tổng kết WEBSITE HỆ THỐNG HỖ TRỢ NẤU ĂN TƯƠNG TÁC TRỰC TUYẾN (THEO MƠ HÌNH MVC) xây dựng Framework Laravel (PHP) Vue.js.Hệ thống xây dựng khơng mang tính chất chia sẻ cơng thức nấu ăn, vừa phải phần mềm hỗ trợ nấu ăn,giúp người dùng tương tác với chuyên gia ẩm thực, dễ dàng tìm kiếm cơng thức nấu ăn mua nguyên liệu hợp lý mà không nhiều thời gian cho việc tính tốn ngun liệu, nâng cao chất lượng cho bữa ăn Qua khóa luận đồ án tốt nghiệp lần giúp em hiều áp dụng thêm nhiều kiến thức chuyên ngành chuyên môn vào lĩnh vực làm việc Tạo cho em tiền đề tốt trước trường bước vào đường nghiệp TÀI LIỆU THAM KHẢO [1] Bùi Quốc Huy, “Giáo trình PHP MySql”, Trung tân đào tạo công nghệ mạng Việt Chuyên [2] Tổ HTTT Đai học Cơng Nghiệp Hà Nội – Giáo trình hệ quản trị sở liệu SQL [5] [3] https://cooky.vn [4] http://laravel.com.vn/ [5] https://vi.vuejs.org/v2/guide/ [6] https://www.youtube.com/watch?v=H_4UubWE9NQ&t=1s [7] https://getbootstrap.com/docs/4.0/getting-started/introduction/ [8] https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp [9] https://jquery.com/ [10] https://colorlib.com/ PHỤ LỤC