Bao cao website ban balo phu kien

- Đố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ý

TRƯỜ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

Ch ươ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àng

là 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í

có 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

- 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

Gọ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

Tailwind 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

Hì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

d MySQL

Hì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

Chươ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 Taylor Otwell 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

NodeJS 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

nay

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

Hình 12: Hình minh họa JavaScript

JavaScript có thể được ứng dụng trong rất nhiều lĩnh vực:

Hình 13: Ví dụ code JavaScriptTrì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

Ch ươ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

- 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à

điều rất cần thiết

- Thường xuyên kiểm tra theo dõi thông tin truy cập

- Sử dụng mã hóa và các giao thức an toàn.

3.2 Phân tích chức năng

a Chức năng dành cho khách hàng

+ Đăng ký

Người dùng cần nhập đầy đủ dữ liệu và đúng yêu cầu trong form đăng

ký Nếu đúng và đủ điều kiện thì sẽ nhận được thông báo đăng ký thành công vàngược lại Khi đăng ký thành công, hệ thống sẽ điều hướng sang phần đăng nhập

để người dùng đăng nhập vào sử dụng website

+ Đă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

+ Tìm kiến sản phẩm

Người dùng nhập từ khóa cần tìm và bấm nút tìm kiếm hệ thống sẽ trả

về những sản phẩm liên quan đến từ khóa mà người dùng cần tìm

+ Lọc sản phẩm

Người dùng có thể lọc sản phẩm theo giá, các thương hiệu, theo màusắc, theo kích thước của balo

+ 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

phẩ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ý

+ Quản lý đơn hàng

Kiểm tra tình trạng đơn hàng, thông tin giao hàng, duyệt đơn hàng chokhách hàng đặt hàng

+ Thống kê

Thống kê đơn hàng ,thống kê doanh thu,thống kê khách hàng, thống

kê sản phẩm và số lượng sản phẩm bán ra

3.3 Sơ đồ usecase

a Sơ đồ chức năng

Hình 14: Sơ đồ chức năng

b. 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

Hình 17: Usecase quản lí giỏ hàng

Hình 18: Usecase lọc sản phẩm

d. 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

3.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

Hình 24: Biểu đồ hoạt động lọc sản phẩm

b Biểu đồ hoạt động quản trị viên

Hình 25: Biểu đồ hoạt động quản lý sản

3.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

price Đơn giá INT 255

R

200

Bảng 1: Bảng sản phẩm

- Loại sản phẩm

Img Hình ảnh TEXT

Bảng 2: Bảng dòng sản phẩm

- Bảng khách hàng

Email Email VARCHAR 50

Bảng 3: Bảng khách hàng

- Chi tiết loại sản phẩm

buộc

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

OrderID ID đơn hàng INT 11 Khóa chính

Payment

MethodsID

ID phương thức thanh toán

Bảng 6:Bảng đơn hàng

- Chi tiết đơn hàng

dài

Ràng buộc

quantity 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 VARCHAR 50 Khóa chính

Bảng 8:Thông tin thanh toán

- Phương thức thanh toán

payment

MethodsID

ID phương thức thanh toán

4.1.1 Giao diện trang chủ

Hình 27: Giao diện trang chủ

Hình 28: Giao diện trang chủ

Hình 29: Giao diện trang chủ

Hình 30: Giao diện trang chủ

Hình 31: Giao diện trang chủ

Hình 32: Giao diện trang chủ

Hì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

Hình 35: Giao diện sản phẩm

Hình 36: Giao diện sản phẩm

Hình 37: Giao diện sản phẩm

Hình 38: Giao diện sản phẩm

Hì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

Hì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

Hì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

Hình 43: Giao diện chi tiết sản phẩm

4.1.4 Giao diện giỏ hàng

Hì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ân

4.1.7 Giao diện đổi mật khẩu

4.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

4.2.3 Giao diện quản trị tổng quan

Hình 47: Giao diện quản trị tổng quan

Chươ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ản

lí 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