ĐỀ tài xây DỰNG WEBSITE QUẢN lý KHÁCH HÀNG

Bên cạnh đó để cửa hàng có thể quảng bá cũng như giới thiệu hoặc tri ân các khách hàng cũ ở cửa hàng thì việc lưu lại thông tin khách hàng là một việc không thể thiếu được, do đó nên em

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

TRUYỀN THÔNG VIỆT HÀN

Khoa Khoa Học Máy Tính

BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

XÂY DỰNG WEBSITE QUẢN LÝ

Đà Nẵng, tháng 11 năm 2021

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

TRUYỀN THÔNG VIỆT HÀN

Khoa Khoa Học Máy Tính

BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

XÂY DỰNG WEBSITE QUẢN LÝ

Đà Nẵng, tháng 11 năm 2021

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

3

LỜI CẢM ƠN

Qua bài báo cáo này em xin cảm ơn các thầy cô trong trường đã tận tình dạy và

giúp đỡ cho em trong thời gian em học tập tại trường Đại Học Công Nghệ Thông Tin

Và Truyền Thông Việt – Hàn

Em cũng xin cảm ơn thầy Nguyễn Anh Tuấn đã giúp đỡ và hổ trợ trong bài báo

cáo cũng nhưng một số vấn đề liên quan đến quá trình làm đồ án tốt nghiệp Một lần nữa em xin chân thành cảm ơn và bày tỏ sự chân thành nhất

Sinh viên

Nguyễn Hồ Tuấn Tỉnh

MỤC LỤC

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN 2

LỜI CẢM ƠN 3

MỤC LỤC 4

DANH MỤC CÁC TỪ VIẾT TẮT 1

DANH MỤC HÌNH VẼ 2

MỞ ĐẦU 3

1 Giới thiệu 3

2. Mục tiêu của đề tài 3

3. Nội dung và kế hoạch thực hiện 3

4 Bố cục báo cáo 3

Chương 1: CÔNG CỤ, NGÔN NGỮ VÀ CÔNG NGHỆ 5

1.1: Công cụ phần mềm 5

1.1.1: Visua Studio Code 5

1.1.2: Xampp 5

1.1.3: Photoshop 6

1.2: Ngôn ngữ và công nghệ 7

1.2.1: Ngôn ngữ 7

1.2.2: Công nghệ sử dụng 10

Chương 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 12

2.1: Yêu cầu chức năng 12

2.1.1: Về phía nhân viên 12

2.1.2: Về quản trị viên 12

5

2.2: Yêu cầu về hình thức 12

2.3: Yêu cầu bảo mật 12

2.4: Phân tích chức năng 12

2.4.1: Nhân viên 13

2.4.2: Quản trị viên 15

2.5: Biểu đồ lớp 18

2.6: Phân tích csdl 18

2.6.1: Mối quan hệ giữa các bảng trong csdl 18

2.6.2: Chi tiết các bảng 19

Chương 3: XÂY DỰNG VÀ PHÁT TRIỂN 24

3.1: Giao diện trang chủ 24

3.2: Giao diện trang đăng nhập 24

3.3: Giao diện trang đăng ký 24

3.4: Giao diện form đổi mật khẩu 25

3.5: Giao diện trang thông tin cá nhân 26

3.6: Giao diện trang cấu hình hệ thống 26

3.7: Giao diện trang chính sách giá 27

3.8: Giao diện trang thêm sảm phẩm 28

3.9: Giao diện trang thêm khách hàng 28

3.10: Giao diện trang danh sách khách hàng 29

3.11: Giao diện trang danh sách nhóm khách hàng 30

3.12: Giao diện trang thêm nhóm khách hàng 30

KẾT LUẬN 31

1 Kết quả đạt được 31

2 Hạn chế và thiếu sót 31

3 Hướng phát triển 31 TÀI LIỆU THAM KHẢO 32

1

DANH MỤC CÁC TỪ VIẾT TẮT

DANH MỤC HÌNH VẼ

Hình 1: Hình ảnh phần mềm Visua Studio Code 5

Hình 2: Hình ảnh phần mềm Xampp 6

Hình 3: Hình ảnh về phần mềm Photoshop 7

Hình 4: Hình ảnh minh họa về HTML 8

Hình 5: Hình ảnh minh họa về css 9

Hình 6: Hình ảnh minh họa về javascript 10

Hình 7: Hình ảnh minh họa về php 10

Hình 8: Hình ảnh minh họa về câu lệnh trong MySQL 11

Hình 9: Biểu đồ use case nhân viên 13

Hình 10: Biểu đồ use case quản trị viên 15

Hình 11: Biểu đồ lớp 18

Hình 12: Mối quan hệ giữa các bảng trong csdl 19

Hình 13: Giao diện trang index 24

Hình 14: Form đăng nhập 24

Hình 15: Form đăng ký 25

Hình 16: Form đổi mật khẩu 25

Hình 17: Giao diện trang thông tin cá nhân 26

Hình 18: Form cấu hình hệ thống 27

Hình 19: Form thêm chính sách giá 27

Hình 20: Form thêm sản phẩm 28

Hình 21: Form thêm khách hàng 29

Hình 22: Giao diện danh sách khách hàng 29

Hình 23: Giao diện danh sách nhóm khách hàng 30

Hình 24: Form thêm nhóm khách hàng 30

Khi công nghệ cũng như websitte chưa tiếp cận được với người dùng thì việc mua sắm phải đến trực tiếp cửa hàng để mua, khiến phải tốn nhiều thời gian cho khách hàng Với cách đặt hàng điện tử như hiện nay, khách hàng chỉ việc ngồi ở nhà và mở chiếc điện thoại thông minh của mình lên là có thể tha hồ mua sắm sản phẩm mình yêu thích rồi, việc này rất thuận tiện và an toàn so với tình hình dịch Covid 19 đang diễn ra phức tạp như hiện nay Bên cạnh đó để cửa hàng có thể quảng bá cũng như giới thiệu hoặc tri ân các khách hàng cũ ở cửa hàng thì việc lưu lại thông tin khách hàng là một

việc không thể thiếu được, do đó nên em đã lựa chọn chủ đề “thiết kế website quản lý khách hàng” để thuận tiện cho việc lưu trữ thông tin khách hàng dễ dàng hơn sau này

2 Mục tiêu của đề tài

Website quản lý khách hàng nhắm đến các cửa hàng, doanh nghiệp có lượng khách hàng ra vào thường xuyên, để thuận tiện cho việc áp dụng các ưu đãi cũng như quảng bá sản phẩm mới sau này, thì việc lưu trữ lại thông tin khách hàng để liên hệ sau này là việc không thể thiếu

3 Nội dung và kế hoạch thực hiện

➢ Tìm hiểu về công nghệ, công cụ, các ngôn ngữ được sử dụng trong đồ án lần này…

➢ Tìm hiểu về quy trình hoạt động của website, và các chức năng cần thiết để phục

vụ việc lưu trữ dễ dàng hơn

➢ Tìm hiểu về giao diện, bố cục của website giúp việc thao tác nhanh chóng, thuận tiện

4 Bố cục báo cáo

Sau phần Mở đầu, báo cáo được trình bày trong ba chương, cụ thể như sau:

Chương 1 Tìm hiểu về công cụ, ngôn ngữ và công nghệ, chương này gồm các phẩm:

- Công cụ

- Ngôn ngữ và công nghệ

Chương 2 Phân tích thiết kế hệ thống, chương này gồm các phần:

- Phân tích yêu cầu

- Các biểu đồ

- Các bảng trong csdl và các mối quan hệ

Chương 3 Xây dựng và phát triển

Cuối cùng là Kết luận, Tài liệu tham khảo và Phụ lục liên quan đến đề tài

5

Chương 1: CÔNG CỤ, NGÔN NGỮ VÀ CÔNG NGHỆ

1.1: Công cụ phần mềm

1.1.1: Visua Studio Code

Visual Studio Code là một trình biên tập mã được phát triển bởi Microsoft dành cho Windows, Linux và macOS Nó hỗ trợ chức năng debug, đi kèm với Git, có syntax highlighting, tự hoàn thành mã thông minh, snippets, và cải tiến mã nguồn

Visual Studio Code được dựa trên electron, một nền tảng được sử dụng để triển khai các ứng dụng NodeJS máy tính cá nhân chạy trên động cơ bố trí Blink Mặc dù nó

sử dụng nền tảng Electron nhưng phần mềm này không phải là một bản khác của Atom,

nó thực ra được dựa trên trình biên tập của Visual Studio Online (tên mã là "Monaco")

Hình 1: Hình ảnh phần mềm Visua Studio Code

1.1.2: Xampp

Xampp là chương trình tạo máy chủ Web được tích hợp sẵn Apache, PHP, MySQL, FTP Server, Mail Server và các công cụ như phpMyAdmin Không như Appserv, Xampp có chương trình quản lý khá tiện lợi, cho phép chủ động bật tắt hoặc khởi động lại các dịch vụ máy chủ bất kỳ lúc nào

Xampp là một mã nguồn mở máy chủ web đa nền được phát triển bởi Apache Friends, bao gồm chủ yếu là Apache HTTP Server, MariaDB database, và interpreters dành cho những đối tượng sử dụng ngôn ngữ PHP và Perl Xampp là viết tắt của Cross-

Flatfom (đa nền tảng-X), Apache (A), MariaDB (M), PHP (P) và Perl (P) Nó phân bố Apache nhẹ và đơn giản, khiến các lập trình viên có thể dễ dàng tạo ra máy chủ web local để kiểm tra và triển khai trang web của mình Tất cả mọi thứ cần cho phát triển một trang web - Apache (ứng dụng máy chủ), Cơ sở dữ liệu (MariaDB) và ngôn ngữ lập trình (PHP) được gói gọn trong 1 tệp Xampp cũng là 1 đa nền tảng vì nó có thể chạy tốt trên cả Linux, Windows và Mac Hầu hết việc triển khai máy chủ web thực tế đều sử dụng cùng thành phần như XAMPP nên rất dễ dàng để chuyển từ máy chủ local sang máy chủ online

1.1.3: Photoshop

Adobe Photoshop là phần mềm đồ họa có tác dụng chỉnh sửa ảnh Phần mềm được sáng tạo và phát hành bởi Adobe – một trong nhiều tên tuổi hàng đầu trong các phần mềm thiết kế hiện nay Ngay từ khi ra mắt, Adobe Photoshop đã nhận được nhiều sự quan tâm của khách hàng và nhanh chóng chiếm được cảm tình của những người thiết

kế, nhiếp ảnh gia khó tính nhất

Hình 2: Hình ảnh phần mềm Xampp

HTML gồm một số thẻ như , <span>, <div> ,<a>, <p>, <img>, <video>, <audio>,

<canvas>, <u>, <i>, <li>, <ul>,…

Hình 4: Hình ảnh minh họa về HTML

CSS

CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng

để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML) Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang 5 web Bạn có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta có thể thêm style vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc…

CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì HTML không được thiết kế để gắn tag để giúp định dạng trang web

Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn

có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác Sau đó là nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó

Javascript được biết đến đầu tiên với tên Mocha, và sau đó là LiveScript, nhưng công ty Netscape đã đổi tên của nó thành JavaScript, bởi vì sự phổ biến như là một hiện tượng của Java lúc bấy giờ JavaScript xuất hiện lần đầu trong Netscape 2.0 năm

1995 với tên LiveScript Core đa năng của ngôn ngữ này đã được nhúng vào Netscape,

chương trình, các chuỗi lệnh sẽ được chạy ở trên server nhằm sinh ra mã HTML Nhờ

đó, những ứng dụng trên các website có thể chạy một cách dễ dàng

Ngôn ngữ PHP thông thường phù hợp với việc lập trình web vì nó có thể dễ dàng kết nối với các website có sử dụng HTML để chạy trên những trình duyệt web Chính

vì vậy, ngôn ngữ lập trình này luôn được coi là khá dễ học Và PHP cũng trở thành ngôn ngữ web dev phổ biến nhất mà các lập trình viên sẽ cần phải học khi mới bắt đầu vào nghề

Hình 7: Hình ảnh minh họa về php

1.2.2: Công nghệ sử dụng

MYSQL

11

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 ứng dụ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ản Win32 cho các hệ điều hành dòng

Windows,Linux, Mac , Unix, FreeBSD, NetBSD,

Hình 8: Hình ảnh minh họa về câu lệnh trong MySQL

Chương 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG

2.1: Yêu cầu chức năng

2.1.1: Về phía nhân viên

- Đăng ký, đăng nhập

- Chỉnh sửa thông tin cá nhân

- Đổi mật khẩu

- Thêm, sửa, xóa, quản lý, tìm kiếm, sắp xếp đơn hàng

- Thêm, sửa, xóa, quản lý, tìm kiếm, sắp xếp khách hàng

2.1.2: Về quản trị viên

- Chỉnh sửa thông tin cá nhân

- Đổi mật khẩu

- Thêm, sửa, xóa, quản lý, tìm kiếm sản phẩm

- Thêm, sửa, xóa, quản lý, tìm kiếm, sắp xếp chính sách giá

- Thêm, sửa, xóa, quản lý, tìm kiếm, sắp xếp nhóm khách hàng

- Thêm, sửa, xóa, quản lý, tìm kiếm, sắp xếp, khóa, mở khóa tài khoản

- Cấu hình website

2.2: Yêu cầu về hình thức

- Bố cục trang web hợp lý, phù hợp với nhu cầu người dùng

- Giao diện thân thiện, dễ sử dụng

- Màu sắc hài hòa, phù hợp với màu sắc chủ đạo của công ty

- Phông chữ to, rõ, dễ nhìn

2.3: Yêu cầu bảo mật

- Cài đặt mật khẩu với bảo mật cao, nhiều kí tự, mã hóa mật khẩu trên hệ thống

- Thông tin data phải được backup thường xuyên, bảo mật tuyệt đối, trách các trường hợp không may sảy ra

- Sử dụng mã hóa SSL trên trang web

2.4: Phân tích chức năng

13

2.4.1: Nhân viên

Hình 9: Biểu đồ use case nhân viên

- Đăng kí tài khoản:

+ Nhân viên truy cập vào trang đăng ký, nhập thông tin hệ thống yêu cầu, sau khi nhập xong nhấn tạo tài khoản nếu email đã tồn tại trên hệ thống hoặc mật khẩu bạn nhập hai lần không chính xác thì báo nhập lại ngược lại nếu chưa thì tạo thành công tài khoản và chuyển đến trang đăng nhập

- Đăng nhập:

+ Sau khi đăng ký thành công thì tài khoản của bạn đang bị khóa, để mở khóa bạn cần liên hệ với admin Khi tài khoản đã mở khóa rồi thì bạn nhập địa chỉ email và mật khẩu của bạn đã đăng ký, hệ thống sẽ kiểm tra nếu đúng thông tin như lúc bạn đăng kí thì báo đăng nhập thành công ngược lại nếu không thì báo bạn đã nhập sai email hoặc mật khẩu

- Thay đổi thông tin cá nhân

+ Sau khi đăng nhập thành công, nhân viên có thể truy cập vào trang chỉnh sửa thông tin để nhân để cập nhập lại các thông tin đang thiếu

+ Ở đây bạn cũng có thể đổi lại mật khẩu của mình, bằng cách nhập đúng lại mật khẩu cũ sau đó nhập lại mật khẩu mới cần thay đổi và nhấn đối mật khẩu

- Khách hàng

+ Thêm khách hàng: Sau khi đăng nhập nhân viên sẽ thêm được khách hàng bằng cách truy cập vào trang thêm khách hàng và điền các thông tin hệ thống yêu cầu, sau đó nhấn nút thêm khách hàng nếu thông tin khách hàng chưa tồn tại thì báo tạo thành công, ngược lại nếu đã tồn tại hệ thống sẽ báo người dùng đã tồn tại

• Chỉnh sửa khách hàng: Nhân viên truy cập vào trang danh sách khách hàng sau đó chọn khách hàng cần chỉnh sửa và nhấn vào icon cây bút chì để chuyển đến trang chỉnh sửa Ở đây nhân viên có thể chỉnh sửa các thông tin đã thêm như lúc thêm mới

• Xóa khách hàng: Nhân viên truy cập vào trang danh sách khách hàng sau đó chọn khách hàng cần xóa và nhấn vào icon thùng rác

để xóa khách hàng + Danh sách khách hàng: Nhân viên truy cập vào trang danh sách khách hàng, ở đây hiển thị các thông tin khách hàng đang có trên hệ thống như:

mã khách hàng, tên, số điện thoại, nhóm khách hàng, đơn hàng đã mua, tổng chi tiêu, ngày tạo

• Tìm kiếm khách hàng: Nhân viên nhập từ khóa cần tìm kiếm vào ô tìm kiếm để tìm kiếm thông tin khách hàng

• Sắp xếp các cột theo chiều tăng giảm bằng cách click vào cột đó

- Đơn hàng:

+ Thêm mới đơn hàng: Nhân viên truy cập vào trang thêm mới đơn hàng để tạo đơn hàng cho khách hàng trên hệ thống, sau khi điền các thông tin hệ thống yêu cầu thì nhấn nút tạo đơn hàng

• Chỉnh sửa đơn hàng: Nhân viên truy cập vào danh sách đơn hàng sau đó chọn vào đơn hàng cần chỉnh sửa và nhấn vào icon cây bút

để chuyển đến trang chỉnh sửa Ở đây nhân viên có thể chỉnh sửa các thông tin như lúc thêm vào

• Xóa đơn hàng: Nhân viên truy cập vào trang danh sách đơn hàng sau đó chọn đơn hàng cần xóa và nhấn vào icon thùng rác để xóa đơn hàng

+ Danh sách đơn hàng: Nhân viên truy cập vào trang danh sách đơn hàng, ở đây hiển thị tất cả các đơn hàng ở trên hệ thống

• Xóa sản phẩm: Truy cập vào trang danh sách sản phẩm sau đó chọn sản phẩm cần xóa và chọn vào icon thùng rác để xóa sản phẩm + Danh sách sản phẩm: Truy cập vào trang danh sách sản phẩm ở đây hiển thị các thông tin của sản phẩm như: id, ảnh, tên, số lượng, còn hay hết…

• Tìm kiếm khách hàng: Nhân viên nhập từ khóa cần tìm kiếm vào ô tìm kiếm để tìm kiếm thông tin sản phẩm

• Sắp xếp các cột theo chiều tăng giảm bằng cách click vào cột đó

- Chính sách giá:

+ Thêm mới chính sách giá: Truy cập vào trang thêm chính sách giá để thêm mới, sau khi nhập hết thông tin thì nhấn thêm mới nếu như thông tin đã tồn tại rồi thì báo lại cho người dùng, ngược lại nếu chưa tồn tại thì thêm mới thành công

• Chỉnh sửa chính sách giá: Truy cập vào trang danh sách chính sách giá sau đó tìm đến chính sách giá cần chỉnh sửa và chọn vào icon cây bút để chuyển đến trang chỉnh sửa Ở trang này người dùng có thể chỉnh sửa được tên của chính sách giá

• Xóa chính sách giá: Truy cập vào trang danh sách chính sách giá sau đó tìm đến chính sách giá cần xóa và chọn icon thùng rác để xóa

+ Danh sách chính sách giá: Truy cập vào trang danh sách chính sách giá ở đây hiển thị đầy đủ các chính sách giá ở trên hệ thống

• Tìm kiếm khách hàng: Nhân viên nhập từ khóa cần tìm kiếm vào ô tìm kiếm để tìm kiếm thông tin chính sách giá

• Sắp xếp các cột theo chiều tăng giảm bằng cách click vào cột đó

- Nhóm khách hàng:

+ Thêm nhóm khách hàng: Truy cập vào trang thêm mới khách hàng, và nhập các thông tin hệ thống yêu cầu, sau đó nhấn thêm nhóm khách hàng, nếu như nhóm khách hàng đã tồn tại thì báo lại cho người dùng, ngược lại nếu chưa tồn tại thì tạo mới thành công

• Chỉnh sửa nhóm khách hàng: Truy cập vào trang danh sách nhóm khách hàng tìm kiếm nhóm khách hàng cần chỉnh sửa sau đó nhấn vào icon cây bút để chuyển đến trang chỉnh sửa Ở đây bạn có thể