- Đối với doanh nghiệp:Website được xây dựng nhằm giúp quảng bá thông tin sản phẩm , dịch vụ của hệ thống ra ngoài thị trường một cách rộng rãi. Qua đó giúp tăng số lượng khách hàng sử dụng trang web và tăng doanh thu. Bên cạnh đó, còn giúp cho doanh nghiệp, cá nhân giảm được chi phí. - Đối với khách hàng: Giúp cho người sử dụng có thể nhanh chóng lựa chọn những món hàng mà mình muốn đặt mà không cần đến cửa hàng. - Đối với bản thân sinh viên: Qua đề tài này, em có thể xây dựng một website để ứng dụng vào thực tế với giao diện thân thiện, dễ dàng sử dụng trong quá trình xem thông tin và dễ quản lý
Trang 1TRƯỜNG ĐẠI HỌC CÔNG NGHỆ SÀI GÒN
KHOA CÔNG NGHỆ THÔNG TIN
XÂY DỰNG PHẦN MỀM WEB
Đề tài:
XÂY DỰNG WEBSITE BÁN BALO
Nhóm: 11
Trang 2Chương 1 ng 1 GIỚI THIỆU
1.1 Giới thiệu
Trong thời đại công nghiệp hóa - hiện đại hóa đất nước ngày nay nói đềncông nghệ thông tin chúng ta hình dung ngày tới một môi trường phát triển năngđộng được xếp vào hàng bậc nhất thể giới Công nghệ thông tin được ứng dụngrộng rãi vào lĩnh vực của đời sống xã hội hiện nay.
Từ những phần mềm quản lý giúp cho công việc bán hàng của cở hàng trởnên nhanh chóng và dễ dàng, ngày nay công nghệ thông tin đã phát triển mạnh mẽhơn nữa, Website ra đời không chỉ đáp ứng cho các khách hàng đến trực tiếp cửahàng mua sản phẩm mà nó còn phục vụ cho những khách hàng ở xa Không nhữngthế, với việc giới thiệu, quảng bá hình ảnh về của hàng, công ty được mở rộng trênquy mô lớn giúp cho việc kinh doanh, buôn bán, trao đổi tin tức thuận lợi hơn rấtnhiều, mang lại hiệu quả kinh tế cao hơn tạo uy tín trong khách hàng
Trong thời đại 4.0 như hiện nay, Việt Nam có hơn 45 triệu người sử dụngInternet mỗi ngày và trong đó có hơn 75% có xu hướng tìm kiếm thông tin, muasắm trực tuyến Nắm bắt được nhu cầu trên cùng với cập nhật xu hướng hiện đại,nhóm chúng em đã tìm hiểu và cài đặt “website bán hàng trực tuyến” với mặt hànglà balo, vali để khách hàng dễ dàng tìm kiếm thông tin, xem phản hồi và đặt muasản phẩm qua mạng một cách nhanh chóng, tiện lợi và tiết kiệm chi phí
Trang 3có nhu cầu mua sắm online chị em thường phân vân không biết nên chọn mua tại
đâu mẫu mã đẹp và chất lượng uy tín Việc lên mạng tìm kiếm và mua sản phẩm
trở nên khá gần gũi với các bạn trẻ ngày nay Do vậy em quyết định thực hiện đềtài này với mong muốn đưa đến nhiều sự lựa chon hơn cho khách hàng, và pháttriển của hàng trên quy mô lớn hơn và giúp cho việc mua sắm balo, phụ kiện vànhững sản phẩm liên quan trở nên dễ dàng hơn Những vấn đề như hạn chế rađường khi không cần thiết,
rất phù hợp cho dịch bệnh hiện tại, tiết kiệm thời gian cho khách hàng khi mọi hoạtđộng mua bán đều thực hiện qua online, khách hàng chỉ việc thanh toán và nhậnhàng.
Xây dựng một Website bán hàng trực tuyến và giới thiệu quảng bá sảnphẩm, đặt hàng theo yêu cầu, các sản phẩm đa dạng với giá cả hợp lý nhất.
- Xây dựng một website cung cấp cho khách hàng tất cả những thông tin chitiết về các sản phẩm trên trang web, thông tin liên hệ cũng như những sản phẩmmới nhất được cập nhật thường xuyên
- Khách hàng có thể đặt hàng ngay những sản phẩm mà khách hàng yêuthích
- Tạo ra sản phẩm thân thiện, đơn giản với giao diện tự nhiên, bắt mắt, dễ sửdụng cho tất cả mọi người
- Xây dựng một website giúp người quản trị quản lý thông tin hệ thống mộtcách dễ dàng hơn, tiện lợi hơn
- Củng cố và bổ sung kiến thức các môn đã học Qua đó, rèn luyện kỹ nănglàm việc độc lập
Trang 4- Từ đề tài này có thể mở rộng ra và ứng dụng cho các đề tài khác có liênquan.
1.3 Phạm vi thực hiện đề tài
- Đối với doanh nghiệp:Website được xây dựng nhằm giúp quảng bá thông
tin sản phẩm , dịch vụ của hệ thống ra ngoài thị trường một cách rộng rãi Qua đógiúp tăng số lượng khách hàng sử dụng trang web và tăng doanh thu Bên cạnh đó,còn giúp cho doanh nghiệp, cá nhân giảm được chi phí
- Đối với khách hàng: Giúp cho người sử dụng có thể nhanh chóng lựa
chọn những món hàng mà mình muốn đặt mà không cần đến cửa hàng
- Đối với bản thân sinh viên: Qua đề tài này, em có thể xây dựng một
website để ứng dụng vào thực tế với giao diện thân thiện, dễ dàng sử dụng trongquá trình xem thông tin và dễ quản lý
1.4 Công nghệ sử dụng
a.Vue.js
Trang 5Gọi tắt là Vue, Vue.js là một framework linh động dùng để xây dựng giao
diện người dùng (user interfaces) Khác với các framework nguyên khối(monolithic), Vue được thiết kế từ đầu theo hướng cho phép và khuyến khích việcphát triển ứng dụng theo từng bước Khi phát triển lớp giao diện (view layer),người dùng chỉ cần dùng thư viện lõi (core library) của Vue, vốn rất dễ học và tíchhợp với các thư viện hoặc dự án có sẵn Cùng lúc đó, nếu kết hợp với những kĩthuật hiện đại như SFC (single file components) và các thư viện hỗ trợ, Vue cũngđáp ứng được dễ dàng nhu cầu xây dựng những ứng dụng một trang (SPA - Single-Page Applications) với độ phức tạp cao hơn nhiều.
Hình 2: Ví dụ code Vue.js
b Thư viện Tailwind.css
Trang 6Tailwind CSS nó là một utility-first CSS framework, nó cũng giống như
Bootstrap, nó có những class built-in mà chúng ta có thể dùng Tailwind CSS cónhiều các class bao gồm các thuộc tính CSS khác nhau và quan trọng, chúng ta cóthể dễ dàng mở rộng tạo mới ra những class bằng chính những class của nó Mộtđiều tiện lợi khi dùng framework này là chúng ta có nhiều class mới hơn tiện lợihơn Boostrap Và hơn nữa, việc có nhiều thêm những class nhưng với quy tắc đặttên cực kỳ thân thiện với người dùng, người dùng cũng có thể nhìn vào class đóvà có thể biết được class này nó đang style cái gì Chúng ta cũng phải nói đến khảnăng tùy biến và mở rộng cao, đem đến cho ta sự linh hoạt không giới hạn.
Hình 4: Ví dụ code Tailwind CSS
c PHP
PHP: Hypertext Preprocessor, thường được viết tắt thành PHP là một
ngôn ngữ lập trình kịch bản hay một loại mã lệnh chủ yếu được dùng để phát triểncác ứng dụng viết cho máy chủ, mã nguồn mở, dùng cho mục đích tổng quát Nórất thích hợp với web và có thể dễ dàng nhúng vào trang HTML
Trang 7Hình 5: Hình minh họa PHP
Do được tối ưu hóa cho các ứng dụng web, tốc độ nhanh, nhỏ gọn, cú phápgiống C và Java, dễ học và thời gian xây dựng sản phẩm tương đối ngắn hơn so vớicác ngôn ngữ khác nên PHP đã nhanh chóng trở thành một ngôn ngữ lập trình webphổ biến nhất thế giới
Trang 8Hình 7: Hình minh họa MySQL
MySQL là hệ quản trị cơ sở dữ liệu tự do nguồn mở phổ biến nhất thế giới
và được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng VìMySQL là hệ quản trị cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khảchuyển, hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiệních rất mạnh Với tốc độ và tính bảo mật cao, MySQL rất thích hợp cho các ứngdụng có truy cập CSDL trên internet Người dùng có thể tải về MySQL miễn phí từtrang chủ MySQL có nhiều phiên bản cho các hệ điều hành khác nhau: phiên bảnWin32 cho các hệ điều hành dòng Windows, Linux, Mac OS X, Unix, FreeBSD,NetBSD, Novell NetWare, SGI Irix, Solaris, SunOS,
Hình 8: Giao diện MySQL
Trang 9Chương 2 CÔNG NGHỆ LIÊN QUAN
2.1 Laravel
Hình 9: Hình minh họa Laravel
Laravel là một Frame Work miễn phí được thiết kế và phát triển bởi TaylorOtwell nhằm hỗ trợ các ứng dụng trang web theo cấu trúc model- view- controller
(MVC) một trong những cấu trúc tối ưu Website đang rất thịnh hành hiện nay Laravel có khá nhiều ưu điểm từ việc cấu trúc câu lệnh rõ ràng, truy xuất dữliệu đơn giản, một hệ thống đóng gói module tiện lợi và nhiều ưu điểm khác tạo ramột Framework mã nguồn mở đầy triển vọng để phát triển như hiện nay
2.2 Node.js
Trang 10NodeJS ban đầu được tác giả đặt tên là web.js vì mục đích đơn thuần chỉ là
sử dụng như một ứng dụng web thay cho Apache hay các server khác Tuy nhiên,dự án nhanh chóng phát triển rất mạnh, vượt qua những khả năng của mộtwebserver thông thường và thậm chí có thể được xem như một nền tảng đa mục
đích Vì vậy, sau này dự án đã được đổi tên thành Node.JS và sử dụng đến ngày
Hình 11: Ví dụ code NodeJS
NodeJS là một môi trường runtime chạy JavaScript đa nền tảng và có mã
nguồn mở, được sử dụng để chạy các ứng dụng web bên ngoài trình duyệt củaclient Nền tảng này được xem là một giải pháp hoàn hảo cho các ứng dụng sửdụng nhiều dữ liệu nhờ vào mô hình hướng sự kiện (event-driven) không đồng bộ.
2.3 JavaScript
JavaScript là một ngôn ngữ lập trình website, được tích hợp và nhúng trong
HTML giúp website sống động hơn JavaScript cho phép kiểm soát các hành vi
của trang web tốt hơn so với khi chỉ sử dụng mỗi HTML Vậy ứng dụng thực tiễncủa JavaScript là gì? Các slideshow, pop-up quảng cáo và tính năng autocompletecủa Google là những ví dụ dễ thấy nhất cho bạn, chúng đều được viết bằngJavaScript.
Trang 11Hình 12: Hình minh họa JavaScript
JavaScript có thể được ứng dụng trong rất nhiều lĩnh vực:
Trang 12Hình 13: Ví dụ code JavaScript
Trình duyệt cũng ghi nhận các sự kiện giao diện người dùng như: di chuyểnchuột, nhấp chuột, v.v Sau đó, tùy theo phản hồi của người dùng, đoạn mã sẽ thựchiện công việc được lập trình tương ứng Sử dụng tất cả các tiện ích này, bạn cóthể xây dựng các ứng dụng nhỏ để phục vụ cho một vài mục đích được cho phép
Trang 13Chương 1 ng 3 PHÂN TÍCH MÔ HÌNH HỆ THỐNG
3.1 Phân tích yêu cầu
a.Yêu cầu về hình thức
Yêu cầu về hình thức của website gồm:
- Trang web nên có từ 1-2 màu chính và giữ những màu đó xuyên suốt cả
web site Một website đẹp khi màu chủ đạo là màu trắng, văn bản màu đen kết hợpvới 1-2 màu nổi bật khác
- Sử dụng hình ảnh có chất lượng tốt và có cùng kích cỡ cho trang web để có
được sự đồng nhất trong cách sắp xếp hình ảnh, đảm bảo tính thẩm mỹ
- Logo tạo ấn tượng cho khách truy cập rằng trang web của doanh nghiệp
luôn đề cao sự nghiêm túc, chỉnh chu và chuyên nghiệp
- Thêm các icons bên cạnh nội dung để tăng tính minh họa mà không cần
phải thiết kế hình ảnh cũng tăng tính thu hút và thẩm mỹ cho trang web
- Phối hợp các font chữ với nhau để vừa đảm bảo tính thẩm mỹ vừa tạo sự
hài hòa dễ đọc cho khách đến xem trang web
- Những nội dung trên trang web phải được sắp xếp hợp lý
- Phải có sự liên kết ý chính xuyên suốt cả website, như vậy càng tăng tính
chuyên nghiệp cho thiết kế web.
b. Yêu cầu về bảo mật
- Tắt hóa tất cả module không cần thiết
Trang 14- Thiết lập quyền truy cập và hạn chế truy cập vào các tập tin và thư mục là
+ Đăng nhập
Người dùng nhập email hoặc số điện thoại và mật khẩu đã đăng kí vàđúng cú pháp Hệ thống sẽ kiểm tra tài khoản và mật khẩu có tồn tại hoặc hợp lệhay không Nếu đúng thì hệ thống sẽ load về trang chủ và ngược lại hệ thống sẽbáo sai tên đăng nhập hoặc mật khẩu
Trang 15+ Xem chi tiết sản phẩm
Người dùng có thể xem chi tiết sản phẩm bằng cách bấm chuột vàosản phẩm ở trang sản phẩm Hệ thống sẽ chuyển đến trang chi tiết sảnphẩm.Người dùng có thể xem tất cả những thông tin về sản phẩm ở trangnày
+ Thêm vào giỏ hàng
Sau khi người dùng chọn được sản phẩm mà mình yêu thích thì bấmvào nút thêm vào giỏ hàng Hệ thống sẽ tự động cập nhật sản phẩm vừathêm vào giỏ Nếu sản phẩm trùng trong giỏ hàng của người dùng thì hệthống sẽ cập nhật cộng thêm số lượng sản phẩm trùng đó Người dùng có thểxóa hoặc tăng giảm số lượng sản phẩm trong giỏ hàng
+ Đặt hàng
Người dùng có thể chọn sản phẩm ở trên giao diện hoặc chọn nhữngsản phẩm trong giỏ hàng , lựa chọn sản phẩm mà mình muốn mua sau đóbấm thanh toán ở giỏ hàng hoặc bấm nút mua ngay nếu người dùng ở trangchi tiết sản phẩm, hệ thống sẽ chuyển đến trang thanh toán Ở trang thanhtoán có thể xóa, tăng, giảm số lượng sản phẩm khi thanh toán Hệ thống sẽtự động lấy thông tin người dùng đăng kí để hiện thị thông tin thanh toán ởtrong trang thanh toán và người dùng có thể thay đổi địa chỉ nhận hàng Saukhi hoàn tất thì người dùng bấm nút đặt hàng để tiến hành đặt hàng
+ Xem tình trạng đơn hàng
Khi người dùng đặt hàng thành công người dùng có thể theo dõi tìnhtrạng của đơn hàng Đơn hàng có 4 tình trạng: Chờ duyệt, chuẩn bị sản
Trang 16phẩm, đang giao hàng, đã giao hàng Người dùng có thể hủy đơn hàng nếutình trạng đơn hàng là chờ duyệt
b Chức năng dành cho người quản trị
+ Đăng nhập
Thông tin đăng nhập của quản trị viên sẽ được tạo sẵn khi web đượcđưa vào sử dụng Quản trị viên phải đăng nhập để sử dụng các chức năngquản lý
Trang 173.3 Sơ đồ usecase
a.Sơ đồ chức năng
Hình 14: Sơ đồ chức năng
Trang 18b. Sơ đồ usecase tổng quát
Hình 15: Biểu đồ usecase tổng quát
c. Sơ đồ use case người dùng
Hình 16: Biểu đồ usecase khách hàng
Trang 19Hình 17: Usecase quản lí giỏ hàng
Hình 18: Usecase lọc sản phẩm
Trang 20d. Sơ đồ use case quản trị viên
Hình 20: Biểu đồ usecase quản trị viên
Hình 21: Usecase quản lý sản phẩm
Hình 22: Usecase quản lý khách hàng
Trang 213.4 Biểu đồ hoạt động
a.Biểu đồ hoạt động người dùng
Hình 23: Biểu đồ hoạt động quản lý giỏ hàng
Trang 22Hình 24: Biểu đồ hoạt động lọc sản phẩm
Trang 23b Biểu đồ hoạt động quản trị viên
Hình 25: Biểu đồ hoạt động quản lý sản
Trang 243.5 Phân tích cơ sở dữ liệu a.Sơ đồ quan hệ
Hình 26: Sơ đồ quan hệ
b Phân tích chi tiết bảng
- Sản phẩm
Trang 25price Đơn giá INT 255shortDescriptio
Bảng 1: Bảng sản phẩm
- Loại sản phẩm
Trang 26Img Hình ảnh TEXT
Bảng 2: Bảng dòng sản phẩm
- Bảng khách hàng
Trang 27Email Email VARCHAR 50
Bảng 3: Bảng khách hàng
- Chi tiết loại sản phẩm
Bảng 4:Chi tiết loại sản phẩm
- Giỏ hàng
Bảng 5:Bảng giỏ hàng- Đơn hàng
Trang 28OrderID ID đơn hàng INT 11 Khóa chính
Payment MethodsID
ID phương thứcthanh toán
Bảng 6:Bảng đơn hàng
- Chi tiết đơn hàng
Ràng buộc
Trang 29quantity Số lượng INT 11
Bảng 7:Bảng chi tiết đơn hàng
- Thông tin thanh toán
PaymentInformation ID
ID thông tin thanh toán VARCHAR50Khóa chính
Bảng 8:Thông tin thanh toán
- Phương thức thanh toán
Trang 30payment MethodsID
ID phương thức thanhtoán
VARCHAR50Khóa chính
payment MethodsName
Tên phương thức thanhtoán
Bảng 9:Phương thức thanh toán
Chương 1 ng 4 XÂY DỰNG ỨNG DỤNG4.1 Giao diện khách hàng
4.1.1 Giao diện trang chủ
Trang 31Hình 27: Giao diện trang chủ
Hình 28: Giao diện trang chủ
Trang 32Hình 29: Giao diện trang chủ
Hình 30: Giao diện trang chủ
Trang 33Hình 31: Giao diện trang chủ
Hình 32: Giao diện trang chủ
Trang 34Hình 33: Giao diện trang chủ
Hình 34: Giao diện trang chủ
4.1.2 Giao diện sản phẩm
Trang 35Hình 35: Giao diện sản phẩm
Hình 36: Giao diện sản phẩm
Trang 36Hình 37: Giao diện sản phẩm
Hình 38: Giao diện sản phẩm
Trang 37Hình 39: Giao diện sản phẩm
Hình 40: Giao diện sản phẩm
4.1.3 Giao diện chi tiết sản phẩm
Trang 38Hình 41: Giao diện chi tiết sản phẩm
Hình 40: Giao diện chi tiết sản phẩm
Trang 39Hình 42: Giao diện chi tiết sản phẩm
Hình 40: Giao diện chi tiết sản phẩm
Trang 40Hình 43: Giao diện chi tiết sản phẩm
4.1.4 Giao diện giỏ hàng
Trang 41Hình 44: Giao diện giỏ hàng
4.1.5 Giao diện thanh toán
4.1.6 Giao diện thông tin cá nhân4.1.7 Giao diện đổi mật khẩu
Trang 424.2.1 Giao diện quản lý sản phẩm
Hình 45: Giao diện quản lý sản phẩm
4.2.2 Giao diện quản lý khách hàng
Hình 46: Giao diện quản lý khách hàng
Trang 434.2.3 Giao diện quản trị tổng quan
Hình 47: Giao diện quản trị tổng quan
Trang 44Chương 5 KẾT LUẬN
5.1 Kết quả đạt được
Qua quá trình làm đề tài, em nhận thấy đề tài đã đạt được một số kết quả như sau:
Về phía người quản trị:
- Hoàn thành được các chức năng quản lý như: quản lý danh mục, sản phẩm,tài khoản, người dùng, đơn hàng
- Ngoài ra còn có các chức năng như quản lý banner, quản lý bình luận, quảnlí khuyến mãi
Về phía người dùng:
- Khách hàng có thể đăng nhập, đăng ký, xem thông tin sản phẩm
- Mua hàng, thêm sản phẩm vào giỏ hàng, sắp xếp, tìm kiếm sản phẩm, cập nhật giỏ hàng
- Khách hàng còn có thể thay đổi thông tin của mình và mật khẩu - Xem lịch sử mua hàng
- Đăng xuất
Về phía bản thân:
- Phân tích được dữ liệu và các chức năng của hệ thống - Thiết kế được CSDL và giao diện chương trình
- Xây dựng được Website tương đối hoàn chỉnh so với yêu cầu đặt ra
- Xây dựng được bố cục trang web hợp lí, bước đầu thực hiện được nghiệp
Trang 45- Cơ bản nắm được các bước xây dựng một website bán hàng trực tuyến,thực hiện đúng quy trình
Tuy nhiên, chương trình vẫn còn một số hạn chế sau: - Website nhỏ, mang tính chất mô phỏng
- Cơ sở dữ liệu nhỏ, chức năng phân quyền chưa tối ưu
5.2 Hướng phát triển
- Xây dựng website sử dụng được đáp ứng đầy đủ yêu cầu nghiệp vụ của hệthống
- Phân quyền và quản trị tối ưu
- Tìm hiểu sâu hơn hệ quản trị cơ sở dữ liệu để đáp ứng nhu cầu người dùng,phát triển và tối ưu hóa hệ thống
- Xây dựng website với quy mô lớn hơn, thêm nhiều chức năng
