1.Đă ̣t vấn đề
Nếu như trước đây khi Internet chưa ra đời và ngay cả khi nó ra đời được một thời gian, con người thường có thói quen mua bán hàng hóa, giao dịch trên các mơi trường truyền thống như siêu thị, cửa hàng, khu chợ hay trung tâm thương mại. Với hình thức mua bán truyền thống này, người mua phải đến tận nơi để xem xét sản phẩm, trả giá, thanh toán và nhận sản phẩm. Tuy nhiên giờ đây, với hình thức bán hàng trực tuyến, người mua hàng và người bán có thể tương tác trực tiếp với nhau trên Internet. Ưu điểm của bán hàng trực tuyến đối với các cửa hàng, doanh nghiệp đó là khơng bị giới hạn về thời gian và khơng gian, có thể bán hàng mọi lúc, mọi nơi 24/7, tiết kiệm chi phí đầu tư thuê mặt bằng hay nhân công, phạm vi tiếp cận rộng bao gồm mọi vùng miền trong nước và cả ngoài nước từ đó mang lại lợi nhuận và doanh thu cao, hiệu quả hơn so với bán hàng truyền thống. Có rất nhiều hình thức bán hàng trực tuyến khác nhau như bán hàng trên Facebook, bán hàng trên Youtube, bán hàng trên Forum,….tuy nhiên bán hàng trực tuyến qua website được nhiều cửa hàng, doanh nghiệp lựa chọn nhất hiện nay..
2.Lịch sử giải quyết vấn đề
Trong thực tế đã có nhiều website bán hàng trực tuyến ra đời như: - Các trang thương mại điện tử lớn như Shopee, Lazada, Tiki...
- Các ứng dụng với lượng khách hàng truy cập cực lớn nhưng vẫn không bị trễ hay gián đoạn quá nhiều
- Xử lí hàng ngàn đến hàng triệu request mỗi giây vẫn xử lí ổn thỏa
3.Mục tiêu đề tài
- Tìm hiểu về framework Laravel để viết xử lý back-end xây dựng 1 website bán hàng trực tuyến
- Kết hợp với html, css , Js và bộ thư viện Bootstrap để xây dựng khung giao diện cho website
- Sử dụng scss để viết css tường minh và ngắn gọn, dễ quản lí hơn
- Tìm hiếu về Vuejs để viết trang admin với mục đích khơng tải lại trang, tăng trải nghiệm cho người dùng
- Tìm hiểu về mơ hình MVC của laravel - Tìm hiểu Template engine là blade và vue - Các khái niệm về component, view, model
- Có thể mua sắm trực tuyến, phần trang quản lí của admin cho phép thêm, sửa, xóa và quản lí người dùng, sản phẩm, danh mục...
4.Đối tượng và phạm vi nghiên cứu
Website được xây dựng phục vụ hai đối tượng chính là Admin( người quản trị) và khách hàng với các chức năng sau:
Người quản trị:
- Đăng nhập trang người quản trị
- Quản lí các danh mục, sản phẩm, người dùng... - Xem thống kê ngày, tổng hóa đơn bán,...
- Thực hiện các chức năng thêm, sửa, xóa với các danh mục, sản phẩm, màu sắc, kích thước,...
Khách hàng:
+ Guest: Khách viếng thăm
- Mua các sản phẩm mà không cần đăng nhập + User:
- Bình luận sản phẩm sau khi đăng nhập
- Đăng nhập, đăng xuất cơ bản với người đã đăng kí tài khoản
5.Kết quả đạt được
- Kết quả là ứng dụng trên máy tính và ứng dụng Demo trên trình duyệt web. - Xây dựng được Website mua quần áo trực tuyến.
II.Phần nội dung
1.Mơ tả chi tiết bài tốn.
Hệ thống được chia ra 2 phần là phần khách hàng và phần quản trị Phần khách hàng:
- Được cung cấp chức năng xem sản phẩm, khuyến mãi, tìm kiếm sản phẩm - Được cấp quyền đăng kí, đăng nhập
- Khi đăng nhập được cung cấp chức năng bình luận sản phẩm - Xem được giỏ hàng, thao tác với giỏ hàng, tiến hành mua hàng Phần quản trị:
- Được cấp quyền hạn cao nhất để kiểm sốt trang web - Có thể truy cập quyền xem, sửa, xóa tất cả dah mục - Xem được thống kê đơn hàng, thành viên mới
- Cập nhật đơn giá sản phẩm, áp đặt thời gian khuyến mãi...
2.Vấn đề và giải pháp liên quan đến bài tốn.2.1.Mơ hình MVC 2.1.Mơ hình MVC
Mơ hình MVC được chia thành 3 lớp xử lý:
- Model : là nơi chứa những nghiệp vụ tương tác với dữ liệu hoặc hệ quản trị cơ sở dữ
liệu (mysql, mssql… ) nó sẽ bao gồm các class,function xử lý nhiều nghiệp vụ như kết nối database, truy vấn dữ liệu, thêm – xóa – sửa dữ liệu…
- View : là nơi chứa những giao diện như một nút bấm, khung nhập, menu, hình ảnh…
nó đảm nhiệm nhiệm vụ hiển thị dữ liệu và giúp người dùng tương tác với hệ thống. - Controller : là nơi tiếp nhận những yêu cầu xử lý được gửi từ người dùng, nó sẽ gồm
những lớp, hàm có chức năng xử lý nhiều nghiệp vụ logic giúp lấy đúng dữ liệu thông tin cần thiết nhờ vào các lớp Model cung cấp và hiển thị dữ liệu đó ra cho người dùng nhờ lớp View
Ảnh 2.1. Mơ hình MVC
2.2.SCSS
SASS/SCSS là một chương trình tiền xử lý CSS (CSS preprocessor). Giúp viết CSS theo cách của một ngôn ngữ lập trình, có cấu trúc rõ ràng, rành mạch, dễ phát triển và bảo trì code hơn. Các file dạng _scss trong ứng dụng sẽ không được dịch trực tiếp sang css mà sẽ được import vào file style.scss và nó sẽ biên dịch tất cả ra css thuần.
2.3.API
API là các phương thức, giao thức kết nối với các thư viện và ứng dụng khác. Nó là viết tắt của Application Programming Interface – giao diện lập trình ứng dụng. API cung cấp khả năng cung cấp khả năng truy xuất đến một tập các hàm hay dùng. Và từ đó có thể trao đổi dữ liệu giữa các ứng dụng. Ở đây sử dụng Vuejs để get/post API của trang Admin.
Ảnh 2.3. Mơ hình cách API hoạt động
2.4.Component
Trong lĩnh vực phần mềm, component có chức năng đặc biệt, được gọi ra từ các chương trình khác, được liên kết và sử dụng như một bộ phận của chương trình. Nó có thể tái sử dụng lại và tối ưu, tường minh hơn cho chương trình.
III.Thiết kế và cài đặt1.Mơ hình CDM 1.Mơ hình CDM
Ảnh 1. Mơ hình CDM
2.Giao diện
2.1.Giao diện khách hàng
Ảnh 2.1. Giao diện chính của trang
Ảnh 2.1.2. Giao diện trang đăng nhập và đăng xuất
Ảnh 2.1.3. Giao diện trang sản phẩm theo danh mục
Ảnh 2.1.5. Giao diện giỏ hàng
Ảnh 2.1.6. Giao diện trang tìm kiếm
Ảnh 2.1.8. Giao diện trang đặt hàng
2.2.Giao diện trang quản trị
Ảnh 2.2. Giao diện chính trang quản trị
Ảnh 2.2.2 Giao diện quản lí sản phẩm
Ảnh 2.2.3. Giao diện quản lí hóa đơn
Ảnh 2.2.5. Giao diện quản lí thuộc tính sản phẩm
Ảnh 2.2.6. Giao diện quản lí màu sắc
Ảnh 2.2.7. Giao diện quản lí kích thước sản phẩm
Ảnh 2.2.8. Giao diện quản lí bình luận
CHƯƠNG IV. KẾT LUẬNI.Kết quả đạt được I.Kết quả đạt được
Sau q trình thực tâ ̣p tại cơng ty, chúng em đã rút ra được nhiều bài học quý giá cho bản thân:
- Và đầu tiên phải nói đến đó là kiến thức, chỉ hai tháng ngắn ngủi nhưng chúng em đã tiếp thu được rất nhiều kiến thức hay cho mình, và phần lớn nhờ vào các anh chị trong cơng ty, rất nhiê ̣t tình giúp đỡ khi chúng em khi gă ̣p khó khăn trong q trình thực tâ ̣p. Nhờ vào đó, chúng em nhâ ̣n thấy kiến thức của mình đã phát triển lên thêm khơng chỉ là mơ ̣t bâ ̣c.
- Bên cạnh đó là khả năng làm viê ̣c nhóm, qua đợt thực tâ ̣p lần này chúng em đã hiểu rõ hơn về tầm quan trọng của viê ̣c làm viê ̣c nhóm nói chung và trong các dự án cơng nghê ̣ thơng tin nói riêng.
- Cũng nhờ vào lần thực tâ ̣p này mà chúng em đã tiếp câ ̣n với mô ̣t trường làm viê ̣c thực tế, giúp chúng em hiểu được phần nào q trình làm viê ̣c, điều đó giúp ích rất nhiều sau khi chúng em ra trường và đi làm.
II.Những điều thiếu sót
- Ngoài những kết quả đạt được, do chưa quen với cách làm viê ̣c nên lúc đầu chúng em đã gă ̣p khơng ít khó khăn, nhưng nhờ vào sự tâ ̣n tâm hướng dẫn của các anh chị mà chúng em đã dần dần cải thiê ̣n được điều đó.
- Và do kiến thức còn hạn chế cũng như lần đầu tiếp câ ̣n với cách làm viê ̣c ở đây nên đề tài của chúng em cịn nhiều thiếu xót. Nhưng q lần thực tâ ̣p này chúng em sẽ cố gắng khắc phục và phát triên bản thân hơn trong tương lai.
- Chúng em xin chân thành cảm ơn Công ty TNHH Thương mại dịch vụ Trần Gia Long đã tạo điều kiện cho chúng em được thực tập tại quý công ty. Và chúng em xin cảm ơn chị Nguyễn Thị Thúy Kiều cũng như các anh chị trong cơng ty đã tận tình hướng dẫn chúng em hồn thành đợt thực tập tốt nghiệp này. Một lần nữa chúng em chúc các anh chị nhiều sức khỏe.
TÀI LIỆU THAM KHẢO
[1] Mark Boulton. “Designing for the web”
[2] Nicholas C.Zakas. “Understanding ecmascript 6 – The definitive guide for javascript developer”
[3] Trang chủ Laravel (ngày 10/2/2020) https://laravel.com/docs/6.x
[4] Tầm quan trọng của trang website thương mại điện tử (ngày 29/6/2020)
http://tapchicongthuong.vn/bai-viet/tam-quan-trong-cua-thuong-mai-dien-tu-doi-voi- doanh-nghiep-64027.htm , 2020
[5] Tìm hiểu về API (ngày 20/3/2020)
https://viblo.asia/p/api-la-gi-nhung-dac-diem-noi-bat-cua-web-api-Qpmle9L9lrd [6] Trang chủ hướng dẫn SCSS-SASS (ngày 15/2/2020)