Xây dựng Website bán mỹ phẩm trực tuyến sử dụng Framework Laravel

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KHOA TIN HỌC - NGUYỄN LINH XÂY DỰNG WEBSITE BÁN MỸ PHẨM TRỰC TUYẾN SỬ DỤNG FRAMEWORK LARAVEL KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC NGÀNH CỬ NHÂN CÔNG NGHỆ THÔNG TIN Đà Nẵng, tháng 5/2016 ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KHOA TIN HỌC - XÂY DỰNG WEBSITE BÁN MỸ PHẨM TRỰC TUYẾN SỬ DỤNG FRAMEWORK LARAVEL KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC NGÀNH CỬ NHÂN CÔNG NGHỆ THÔNG TIN Người hướng dẫn: ThS Ngơ Đình Thưởng Người thực hiện: NGUYỄN LINH (Khóa 2012-2016) Đà Nẵng, tháng 5/2016 GVHD: ThS Ngơ Đình Thưởng Khoá luận tốt nghiệp MỤC LỤC MỞ ĐẦU 1 Tính cấp thiết đề tài: Mục tiêu nghiên cứu: Đối tượng, phạm vi nghiên cứu: Phương pháp nghiên cứu: Bố cục đề tài: CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 GIỚI THIỆU FRAMEWORK LARAVEL: 1.1.1 Khái niệm: 1.1.2 Lịch sử phát triển Framework Laravel: 1.1.3 Ưu điểm Laravel: 1.1.4 Các ví dụ : 1.2 CÀI ĐẶT: 1.2.1 Yêu cầu hệ thống: 1.2.2 Hướng dẫn cài đặt: 1.3 MƠ HÌNH MVC TRONG FRAMEWORK LARAVEL: 12 1.3.1 Controller: 13 1.3.2 View: 13 1.3.3 Model: 14 1.4 HỆ QUẢN TRỊ CƠ SỞ DỮ LIỆU: 15 1.5 HƯỚNG DẪN SỬ DỤNG LAVAREL FRAMEWORK 17 1.5.1 Cách sử dụng Route: 17 1.5.2 Sử dụng View: 23 1.5.3 Sử dụng Controller Laravel 5: 33 1.3.4 Tạo bảng khoá ngoại database Migration: 39 CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 47 2.1 MỤC TIÊU VÀ YÊU CẦU ĐẶT: 47 Sinh viên thực hiện: Nguyễn Linh – 12CNTT i Khố luận tốt nghiệp GVHD: ThS Ngơ Đình Thưởng 2.1.1 Mục tiêu: 47 2.1.2 Yêu cầu hệ thống: 47 2.2 PHÂN TÍCH HỆ THỐNG: 48 2.2.1 Yêu cầu đề tài: 48 2.2.2 Hoạt động hệ thống cửa hàng mạng: 48 2.2.3 Đặc tả quy trình nghiệp vụ: 50 2.3 XÂY DỰNG BIỂU ĐỒ USER CASE: 53 2.3.1 Mô hình Use case tổng quát : 53 2.3.2 Phân rã biểu đồ User case kịch bản: 54 2.4 Thiết kế sở liệu 66 2.4.1 Nhóm bảng độc lập: 66 2.4.2 Nhóm bảng có quan hệ: 72 CHƯƠNG 3: KẾT QUẢ ĐẠT ĐƯỢC 78 3.1 GIAO DIỆN TRANG KHÁCH HÀNG: 78 3.1.1 Trang chủ: 78 3.1.2 Trang xem chi tiết sản phẩm: 79 3.1.3 Giao diện kết tìm kiếm: 80 3.1.4 Giao diện giỏ hàng: 80 3.1.5 Giao diện toán trực tiếp ngân lượng: 81 3.1.6 Giao diện tốn hình thức COD: 81 3.1.7 Giao diện liên hệ: 82 3.1.8 Giao diện giới thiệu: 82 3.1.9 Giao diện tin tức: 83 3.2 GIAO DIỆN TRANG QUẢN TRỊ: 83 3.2.1 Giao diện đăng nhập: 83 3.2.2 Giao diện trang chủ quản trị: 84 3.2.3 Giao diện quản lý sản phẩm: 84 3.2.4 Giao diện quản lý danh mục sản phẩm: 87 Sinh viên thực hiện: Nguyễn Linh – 12CNTT ii Khoá luận tốt nghiệp GVHD: ThS Ngơ Đình Thưởng 3.2.5 Giao diện quản trị giỏ hàng: 87 3.2.6 Giao diện chi tiết giỏ hàng: 88 3.2.7 Giao diện thống kê đơn hàng: 88 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 89 DANH MỤC TÀI LIỆU THAM KHẢO 90 Sinh viên thực hiện: Nguyễn Linh – 12CNTT iii GVHD: ThS Ngơ Đình Thưởng Khố luận tốt nghiệp LỜI CẢM ƠN Trước tiên, em thành thật xin tỏ lòng biết ơn sâu sắc đến thây Ngơ Đình Thưởng nhiệt tình hướng dẫn, nhận xét đóng góp nhiều ý kiến quý báo cho em lúc gặp khó khăn suốt q trình thực đề tài Em xin chân thành cảm ơn thầy giáo tận tình dạy dỗ truyền đạt kiến thức quý báu cho em suốt bốn năm học Khoa Tin học, trường Đại học Sư phạm Đà Nẵng tạo điều kiện cho em thực hoàn thành đề tài tốt nghiệp Bên cạnh em ln nhận giúp đỡ nhiệt tình từ bạn bè gia đình, động viên góp ý cung cấp tài liệu để đề tài hoàn thành thời gian Mặc dù cố gắng, song với điều kiện thời gian khả hạn chế nên đề tài không tránh khỏi hạn chế cịn nhiều thiếu sót Em kính mong bảo, đóng góp ý kiến thầy bạn để đề tài em tốt Cuối cùng, em xin chân thành cảm ơn thầy hội đồng bảo vệ khố luận tốt nghiệp, dành thời gian q báu để nhận xét, đánh giá chấm đề tài Xin chân thành cảm ơn! Đà Nẵng, tháng 05 năm 2016 Sinh viên thực Nguyễn Linh Sinh viên thực hiện: Nguyễn Linh – 12CNTT iv GVHD: ThS Ngơ Đình Thưởng Khố luận tốt nghiệp LỜI CAM ĐOAN Tôi xin cam đoan đề tài nghiên cứu riêng hướng dẫn thầy Ngơ Đình Thưởng Tơi có tham khảo tài liệu mạng để thực đề tài Đà Nẵng, tháng năm 2016 Sinh viên thực Nguyễn Linh Sinh viên thực hiện: Nguyễn Linh – 12CNTT v GVHD: ThS Ngơ Đình Thưởng Khố luận tốt nghiệp DANH MỤC TỪ VIẾT TẮT STT Từ viết tắt Nghĩa CSDL Cơ sở liệu DB Database HTML HyperText Markup Language HQT CSDL Hệ quản trị sở liệu MVC Model, View, Controler OCD Thanh toán bưu điện PK Primary Key - Khố lớp Sinh viên thực hiện: Nguyễn Linh – 12CNTT vi GVHD: ThS Ngơ Đình Thưởng Khố luận tốt nghiệp DANH MỤC BẢNG Bảng 1.1: Các kiểu Index 44 Bảng 2.1: Kịch User case thêm sản phẩm 56 Bảng 2.2: Kịch Use case sửa sản phẩm 57 Bảng 2.3: Kịch Use case xoá sản phẩm 58 Bảng 2.5: Kịch Use case thêm hàng vào giỏ hàng 60 Bảng 2.6: Kịch Use case xoá hàng giỏ hàng 61 Bảng 2.7: Kịch Use case gửi đơn hàng 62 Bảng 2.8: Kịch Use case toán đơn hàng 65 Bảng 2.8: Phân tích lớp thiensu_db.news 67 Bảng 2.9: Phân tích lớp thiensu_db.settings 68 Bảng 2.10: Phân tích lớp thiensu_db.contacts 69 Bảng 2.11: Phân tích lớp thiensu_db Banners 69 Bảng 2.12: Phân tích lớp thiensu_db password_resets 70 Bảng 2.13: Phân tích lớp thiensu_db Menus 70 Bảng 2.14: Phân tích lớp thiensu_db Migrations 71 Bảng 2.15: Phân tích lớp thiensu_db Users 71 Bảng 2.16: Phân tích lớp thiensu_db Pays 72 Bảng 2.17: Phân tích lớp thiensu_db.cates 73 Bảng 2.18: Phân tích lớp thiensu_db.orders 74 Bảng 2.19: Phân tích lớp thiensu_db.products 75 Bảng 2.20: Phân tích lớp thiensu_db.order_details 76 Bảng 2.21: Phân tích lớp thiensu_db.product_ images 77 Sinh viên thực hiện: Nguyễn Linh – 12CNTT vii GVHD: ThS Ngơ Đình Thưởng Khố luận tốt nghiệp DANH MỤC HÌNH ẢNH Hình 1.1: Tỉ lệ người dùng Lavarel so với framework khác năm 2013 Hình 1.2: Lịch sử phát triển framework Lavarel Hình 1.3: Tải cài đặt laravel Hình 1.4: Đổi tên thư mục chứa laravel bước Hình 1.5: Đổi tên thư mục chứa laravel bước Hình 1.6: Cấu trúc thư mục laravel 10 Hình 1.7: Điều chỉnh URL cho Laravel 11 Hình 1.8: Chạy lệnh php artisan generate terminal 11 Hình 1.9: Key file app.php tự động điền 11 Hình 1.10: Kết chạy Laravel lần đầu 12 Hình 1.11: Cấu trúc mơ hình MVC 13 Hình 1.12: Giao diện phpMyAdmin 16 Hình 1.13: Mơ hình hoạt động ứng dụng web động 16 Hình 2.1: Mơ tả trình thêm sản phẩm vào giỏ hàng 50 Hình 2: Mơ tả q trình thêm sản phẩm vào giỏ hàng 51 Hình 2.3: Mơ tả q trình thêm sản phẩm vào giỏ hàng 52 Hình 2.4: Mơ hình User Case tổng qt 53 Hình 2.5: Mơ tả trình phân rã User Case cập nhật 54 Hình 2.6: Mơ tả q trình phân rã User Case cập nhật sản phẩm 55 Hình 2.7: Mơ tả q trình phân rã User Case đặt hàng 59 Hình 2.8: Mơ tả q trình phân rã User Case đặt hàng 63 Hình 2.9: Sơ đồ lớp sở liệu 66 Hình 3.1: Giao diện trang chủ người dùng 78 Hình 3.2: Giao diện trang chủ người dùng 78 Hình 3.3: Giao diện xem chi tiết sản phẩm 79 Hình 3.4: Giao diện kết tìm kiếm 80 Sinh viên thực hiện: Nguyễn Linh – 12CNTT viii GVHD: ThS Ngơ Đình Thưởng Khố luận tốt nghiệp f Lớp thiensu_db.product_images Tên lớp thiensu_db.product_images Tên thuộc tính Mơ tả Kiểu Cỡ Phạm vi id(PK) Mã hình ảnh int 10 private images Tên hình varchar 255 private top Trên int 10 private left Trái left 10 private product_id Mã sản phẩm int 10 private Tên Mô tả phương thức created_at Giá trị Cỡ Phạm vị trả Thời gian tạo hình ảnh null public null public update_at Thời gian cập nhật hình ảnh Bảng 2.21: Phân tích lớp thiensu_db.product_ images Sinh viên thực hiện: Nguyễn Linh – 12CNTT 77 Khoá luận tốt nghiệp GVHD: ThS Ngơ Đình Thưởng CHƯƠNG 3: KẾT QUẢ ĐẠT ĐƯỢC 3.1 GIAO DIỆN TRANG KHÁCH HÀNG: 3.1.1 Trang chủ: Hình 3.1: Giao diện trang chủ người dùng Hình 3.2: Giao diện trang chủ người dùng Khách hàng truy cập vào trang chủ hệ thống thấy giao diện hình 3.1 hình 3.2 Sinh viên thực hiện: Nguyễn Linh – 12CNTT 78 Khố luận tốt nghiệp GVHD: ThS Ngơ Đình Thưởng Trên hình 3.1 logo hệ thống, menu chức hệ thống Bên trái danh mục loại sản phẩm Chính hình 3.1 slide hình ảnh giới thiệu sản phẩm Trong hình 3.2 danh sách sản phẩm Khi khách hàng chọn sản phẩm lên nút để thêm vào giỏ hàng xem chi tiết sản phẩm 3.1.2 Trang xem chi tiết sản phẩm: Hình 3.3: Giao diện xem chi tiết sản phẩm Giao diện chi tiết sản phẩm mà khách hàng chọn để xem thông tin sản phẩm Sinh viên thực hiện: Nguyễn Linh – 12CNTT 79 GVHD: ThS Ngơ Đình Thưởng Khố luận tốt nghiệp 3.1.3 Giao diện kết tìm kiếm: Hình 3.4: Giao diện kết tìm kiếm Giao diện kết tìm kiếm hiển thị kết tìm tương ứng với từ khố khách hàng cần tìm 3.1.4 Giao diện giỏ hàng: Hình 3.5: Giao diện giỏ hàng Sinh viên thực hiện: Nguyễn Linh – 12CNTT 80 Khoá luận tốt nghiệp GVHD: ThS Ngơ Đình Thưởng Ở giao diện giỏ hàng khách hàng cập nhật số lượng sản phẩm cần mua tiếp tục mua hàng, xố hàng Nếu khách hàng chọn xong nhấn nhút "thanh toán" để chuyển sang giao diện đặt hàng 3.1.5 Giao diện toán trực tiếp ngân lượng: 3.1.6 Giao diện tốn hình thức COD: a Có tài khoản đăng ký trước: b Khơng có tài khoản: Hình 3.6: Giao diện tốn COD khơng có tài khoản Giao diện tốn hình thức COD mà khách hàng khơng có tài khoản, hệ thống yêu cầu khách hàng điền thông tin cá nhân form gửi đơn hàng cho quản trị Nếu thông tin cần thiết mà khách hàng không điền đầy đủ liệu khơng hợp lệ hệ thống yêu cầu khách hàng nhập lại Sinh viên thực hiện: Nguyễn Linh – 12CNTT 81 GVHD: ThS Ngơ Đình Thưởng Khố luận tốt nghiệp 3.1.7 Giao diện liên hệ: Hình 3.7: Giao diện liên hệ Giao diện liên hệ tích hợp GoogleMaps để thể địa thật cửa hàng cho khách hàng xem form để để khách hàng điền thơng tin cá nhân vào 3.1.8 Giao diện giới thiệu: Hình 3.8: Giao diện giới thiệu Sinh viên thực hiện: Nguyễn Linh – 12CNTT 82 GVHD: ThS Ngơ Đình Thưởng Khố luận tốt nghiệp Giao diện giới thiệu trang web cho khách hàng biết thông tin trang web 3.1.9 Giao diện tin tức: Hình 3.9: Giao diện tin tức Giao diện tin tức cung cấp cho khách hàng thông tin sản phẩm giảm giá, 3.2 GIAO DIỆN TRANG QUẢN TRỊ: 3.2.1 Giao diện đăng nhập: Hình 3.10: Giao diện đăng nhập admin Sinh viên thực hiện: Nguyễn Linh – 12CNTT 83 Khố luận tốt nghiệp GVHD: ThS Ngơ Đình Thưởng Giao diện dành riêng cho người quản trị hệ thống có tên đăng nhập mật phép đăng nhập 3.2.2 Giao diện trang chủ quản trị: Hình 3.11: Giao diện trang chủ admin Trong trang quản trị, người quản trị thấy chức mà quản lý Bao gồm quản trị hệ thống, cài đặt thông tin hệ thống, sản phẩm, danh mục sản phẩm, đơn hàng, quản lý menu, banner, liên hệ thành viên 3.2.3 Giao diện quản lý sản phẩm: Hình 3.12: Giao diện quản lý sản phẩm Sinh viên thực hiện: Nguyễn Linh – 12CNTT 84 Khoá luận tốt nghiệp GVHD: ThS Ngơ Đình Thưởng Trang quản lý danh sách sản phẩm hiển thị danh sách sản phẩm Ở đó, người quản trị tìm kiếm, thêm mới, sửa, xố thơng tin sản phẩm Có thể liệt kê sản phẩm theo mục a Giao diện thêm sản phẩm mới: Hình 3.13: Giao diện thêm sản phẩm Giao diện thêm sản phẩm đưa form cho người quản lý điền thông tin sản phẩm vào sau nhấn nút "lưu" để đưa thông tin sản phẩm vào CSDL b Giao diện sửa sản phẩm: Sinh viên thực hiện: Nguyễn Linh – 12CNTT 85 Khố luận tốt nghiệp GVHD: ThS Ngơ Đình Thưởng Hình 3.14: Giao diện sửa sản phẩm Sinh viên thực hiện: Nguyễn Linh – 12CNTT 86 Khoá luận tốt nghiệp GVHD: ThS Ngơ Đình Thưởng Tại người quản trị thay đổi thơng tin sản phẩm tới CSDL 3.2.4 Giao diện quản lý danh mục sản phẩm: Hình 3.15: Giao diện quản lý danh mục sản phẩm Giao diện quản lý danh mục sản phẩm cho phép người quản trị thực chức thêm, sửa, xoá tìm kiếm 3.2.5 Giao diện quản trị giỏ hàng: Hình 3.16: Giao diện quản lý giỏ hàng Giao diện quản trị giỏ hàng người quản trị xoá xem đơn hàng từ khách hàng gửi tới Khi người quản trị chọn chức xem chuyển sang trang chi tiết giỏ hàng Sinh viên thực hiện: Nguyễn Linh – 12CNTT 87 Khoá luận tốt nghiệp GVHD: ThS Ngơ Đình Thưởng 3.2.6 Giao diện chi tiết giỏ hàng: Hình 3.17: Giao diện chi tiết giỏ hàng Tại giao diện chi tiết đơn hàng người quản trị có quyền cập nhật lại tình trạng đơn hàng 3.2.7 Giao diện thống kê đơn hàng: Hình 3.18: Giao diện thống kê đơn hàng Sinh viên thực hiện: Nguyễn Linh – 12CNTT 88 Khoá luận tốt nghiệp GVHD: ThS Ngơ Đình Thưởng KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Qua thời gian học tập tìm hiểu cơng nghệ mới, sau thời gian thực tập, xây dựng ứng dụng web đơn giản để quản bá mua bán mỹ phẩm Ứng dụng xây dựng dựa công nghệ, kĩ thuật Frameword Lavarel, CSDL MySQL ngơn ngữ lập trình phía Client HTML, CSS, Javascript sử dụng Frameword Boostrap Ứng dụng đạt kết định: - Hệ thống đáp ứng phần nhu cầu tin học hố khâu quản bá mỹ phẩm cơng ty xây dựng giỏ hàng khách, thuận tiện tiết kiệm thời gian chi phí cho hai bên mà hiệu công việc không giảm - Hệ thống thiết kế giao diện gần gũi, dễ sử dụng cho người dùng quản trị viên Đặt biệt chạy đa kích cỡ thiết bị mà không bị lỗi giao diện Với thời gian kỹ có hạn, đồng thời chưa có nhiều thời gian để kiểm thử hệ thống chưa rộng lượng người dùng nên ứng dụng cịn thiếu sót nhiều tính nên hướng phát triển nghiên cứu thêm là: - Khả cho phép người dùng đăng nhập vào hệ thống để tạo khách hàng thân thuộc - Có thể phân cơng việc cho thành viên khác - Có thể chat qua lại thành viên thành viên với khách hàng - Phát triển giỏ hàng tốn trực tuyến - Phát triển website đa công ty quản lý - Vấn đề bảo mật an tồn thơng tin cho website - Cải thiện mã nguồn tối ưu Sinh viên thực hiện: Nguyễn Linh – 12CNTT 89 Khoá luận tốt nghiệp GVHD: ThS Ngơ Đình Thưởng DANH MỤC TÀI LIỆU THAM KHẢO Giáo trình tham khảo: [1] Giáo trình, giảng Trung tâm sáng tạo Micrisoft cấp [2] “Giáo trình thiết kế lập trình Web” Ngơ Đình Thưởng (2014) Đại học Sư phạm Đà Nẵng [3] “Giáo trình Phân tích thiết kế hệ thống thơng tin”, Trần Đình Quế (2013) -Học viện cơng nghệ Bưu Viễn thơng Đường link tham khảo: [1] http://vnfit.com/ [2] http://www.toidongian.com/ [3] https://vi.wikipedia.org/ [4] http://webfaver.com/ [5] https://laravel.com/ [6] http://mean.io/ [7] http://getbootstrap.com/ [8] http://luanvan.net.vn/ Sinh viên thực hiện: Nguyễn Linh – 12CNTT 90 GVHD: ThS Ngô Đình Thưởng Khố luận tốt nghiệp NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Đà Nẵng, ngày tháng năm 2016 Giáo viên hướng dẫn Ngô Đình Thưởng Sinh viên thực hiện: Nguyễn Linh – 12CNTT 91 ... thế, việc nghiên cứu xây dựng website bán mỹ phẩm trực tuyến phải đảm bảo tính cần thiết sau: Cung cấp đầy đủ thông tin xác sản phẩm cho khách hàng Xây dựng giỏ hàng trực tuyến cho khách hàng,...ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KHOA TIN HỌC - XÂY DỰNG WEBSITE BÁN MỸ PHẨM TRỰC TUYẾN SỬ DỤNG FRAMEWORK LARAVEL KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC NGÀNH CỬ NHÂN CÔNG NGHỆ THÔNG... giao diện website Sử dụng hệ quản trị sở liệu MYSQL để xây dựng quản trị sở liệu website Sử dụng framework Laravel để kết nối sở liệu truy xuất thành file HTML giao diện cho người dùng sử dụng Phương