Xây dựng hệ thống website order hàng trung quốc syncvi

Người dùng: sẽ phải tải bộ công cụ đặt hàng mà bên SyncVi cung cấp, sau đó tiến hành vào trang Tmall, chọn sản phẩm mà mình muốn mua và tiến hành thêm vào giỏ hàng.. Trường hơp người dùn

Trang 1

TRƯỜNG ĐẠI HỌC SƯ PHẠM – ĐẠI HỌC ĐÀ NẴNG

KHOA TIN HỌC

BÁO CÁO KHOÁ LUẬN TỐT NGHIỆP TÊN ĐỀ TÀI:XÂY DỰNG HỆ THỐNG WEBSITE

ORDER HÀNG TRUNG QUỐC SYNCVI

Trang 2

LỜI CẢM ƠN

Trong quá trình hơn ba tháng thực tập vừa qua, em đã nhận được sự hướng dẫn, giúp đỡ và động viên tận tình từ nhiều phía Tất cả những điều đó đã trở thành một động lực rất lớn giúp em có thể hoàn thành tốt đợt thực tập tốt nghiệp này Với tất cả sự cảm kích và trân trọng, em xin được gửi lời cảm ơn đến tất cả mọi người

Trước tiên cho em được gửi lời cảm ơn đến Công ty TNHH Neolab Việt Nam

đã tạo điều kiện cho em được tham gia thực tập tại đơn vị cũng như cung cấp tất cả các cơ sở vật chất và trang thiết bị có thể cho em trong thời gian vừa qua Xin cảm

ơn các anh chị trong công ty đã tận tình hướng dẫn giúp đỡ em trong suốt thời gian

em tham gia thực tập

Em cũng xin được gửi lời cảm ơn đến ban lãnh đạo trường Đại học Sư phạm

Đà Nẵng, ban lãnh đạo khoa Tin học đã tổ chức các buổi giao lưu giữa các doanh nghiệp và sinh viên thật sự bổ ích, giúp em có cơ hội tìm được một đơn vị thực tập tốt và phù hợp với năng lực của bản thân

Cuối cùng, em xin chân thành cảm ơn thầy Phạm Anh Phương và các thầy cô giáo của Khoa Tin học, Trường Đại học Sư Phạm Đà Nẵng xin cảm ơn quý thầy cô

đã tận tình dạy bảo, giúp đỡ em trong suốt thời gian em học tập tại trường cũng như trong thời gian em thực tập vừa qua

Xin trân trọng cảm ơn!

Đà Nẵng, ngày 06 tháng 05 năm 2020

Sinh viên thực hiện

Lê Đình Huân

Trang 3

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

Đà Nẵng, ngày….tháng….năm 2020

Cán bộ hướng dẫn

Phạm Anh Phương

Trang 4

LỜI CAM ĐOAN

Tôi xin cam đoan:

1 Những nội dung trong báo cáo tốt nghiệp này là do tôi thực hiện dưới sự hướng dẫn trực tiếp của thầy Phạm Anh Phương

2 Mọi tham khảo dùng trong đồ án thực tập đều được trích dẫn rõ ràng và trung thực tên tác giả, tên công trình, thời gian, địa điểm công bố

3 Mọi sao chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, tôi xin chịu hoàn toàn trách nhiệm

Đà Nẵng, ngày tháng năm 2020

Sinh viên thực hiện

Lê Đình Huân

Trang 5

MỤC LỤC

LỜI MỞ ĐẦU 6

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 7

1.1 Tổng quan mô hình hoạt động 7

1.2 Ngôn ngữ lập trình 7

1.2.1 MYSQL 7

1.2.3 VueJS 8

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 9

2.1 Phân tích và thiết kế 9

2.1.1 Mô tả bài toán 9

2.1.2 Yêu cầu chức năng 9

2.1.3 Yêu cầu phi chức năng 9

2.1.4 Biểu đồ Use Case 9

2.2 Biểu đồ hoạt động 24

2.2.1 Đăng nhập 25

2.2.2 Đăng Ký 26

2.2.3 Thêm sản phẩm 27

2.2.4 Cập nhật sản phẩm 28

2.2.5 Xoá sản phẩm 29

2.2.6 Đặt hàng 30

2.2.7 Xác nhận đơn hàng của người dùng 31

2.2.8 Huỷ đơn hàng của người dùng 32

2.2 Mô hình quan hệ dữ liệu 33

CHƯƠNG 3: CÀI ĐẶT CHƯƠNG TRÌNH VÀ DEMO 34

3.1 Demo chương trình 34

3.1.1 Giao diện người dùng 34

3.1.2 Giao diện shop 39

3.1.3 Giao diện admin 43

KẾT LUẬN 45

TÀI LIỆU THAM KHẢO 46

Trang 6

LỜI MỞ ĐẦU

1 Lý do chọn đề tài

Ngày nay với sự phát triển không ngừng internet và ứng dụng công nghệ thông tin vào đời sống là không thể thiếu Nó mang lại rất nhiều lợi ích, rút ngắn thời gian mua hàng cũng như thanh toán Trong những năm gần đây, sự phát triển mạnh mẽ của thương mại điện tử trên thế giới đã góp phần làm thay đổi cách thức kinh doanh, giao dịch truyền thống và đem lại những lợi ích to lớn cho xã hội

Hiện nay có nhiều mặt hàng chúng ta tìm kiếm trên những trang Amazon, Tmall, Alibaba… có giá rẻ hơn nhiều so với những mặt hàng trong nước, tuy nhiên việc order được những mặt hàng trên rất khó, chúng ta cần phải có Visa và đợi rất lâu thì hàng mới về, có nhiều trang web bán hàng trực tuyến không hỗ trợ ship hàng về Việt Nam gây khó khăn cho người mua

Chính vì những điều trên em đã chọn đề tài order hàng hoá từ Trung Quốc làm cho việc order hàng hoá trở nên dễ dàng, chi phí thấp, thời gian giao hàng nhanh chóng

2 Đối tượng nghiên cứu và phạm vi nghiên cứu

• Đối tượng nghiên cứu

- Người dùng trong nước

- Chủ shop là người trực tiếp lấy hàng từ bên Trung Quốc

• Phạm vi nghiên cứu

- Tất cả các shop ở Hà Nội, Đà Nẵng, TP Hồ Chí Minh

- Người dùng có nhu cầu order hàng mà không có visa hoặc chưa biết cách order hàng hoá từ nước ngoài

3 Mục tiêu nghiên cứu

• Mục tiêu tổng quan

- Trên cơ sở tìm hiểu lý thuyết cách thức order hàng online từ nước ngoài, nghiên cứu cách tính phí cũng như các thủ tục để order hàng hoá dễ dàng hơn

• Mục tiêu cụ thể

- Tìm hiểu ưu nhược điểm của loại hình order hàng hoá từ bên nước ngoài

- Nghiên cứu cách tính thuế, phí giao hàng khi order

- Nghiên cứu ngôn ngữ lập trình áp dụng vào project để sao cho phù hợp với bài toán và khả năng mở rộng khi project lớn lên

- Xây dựng giao diện đẹp mắt, thân thiện với người dùng

4 Phương pháp nghiên cứu

Trang 7

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Tổng quan mô hình hoạt động

- Mô hình Agile Scrum là mô hình phát triển phần mềm linh hoạt theo hướng tiếp cận dự án nó gồm một quy trình làm việc tương tác và tích hợp để đưa tới người dùng sản phẩm chất lượng và nhanh chóng

Những phương pháp phát triển phần mềm truyền thống bộc lộ nhiều khuyết điểm khiến cho dự án kém chất lượng, chậm tiến độ cũng như khó mở rộng khi có yêu cầu mới

Bản chất của quy trình phát triển phần mềm này gồm:

+ Individuals and interactions over processes and tools: Cá nhân và sự

tương tác hơn là quy trình và công cụ

+ Working software over comprehensive documentation: Phần mềm chạy

tốt hơn là tài liệu đầy đủ

+ Customer collaboration over contract negotiation: Cộng tác với khách

MySQL là một trong những ví dụ rất cơ bản về Hệ Quản trị Cơ sở dữ liệu quan

hệ sử dụng Ngôn ngữ truy vấn có cấu trúc (SQL) MySQL được sử dụng cho việc bổ trợ PHP, Perl, và nhiều ngôn ngữ khác, nó làm nơi lưu trữ những thông tin trên các trang web viết bằng PHP hay Perl Việc kết hợp cơ sở dữ liệu với ứng dụng web, dữ liệu xử lý do php sẽ tương tác với csdl như lấy dữ liệu, làm nội dung trang web từ trạng thái tĩnh sang động Sự linh hoạt này là cốt lõi của một ứng dụng web động (dynamic web application)

1.2.2 Laravel

Laravel là một PHP Framework mã nguồn mở và miễn phí, được phát triển

Trang 8

nhiều cách khác nhau để truy cập vào các cơ sở dữ liệu quan hệ, nhiều tiện ích khác nhau hỗ trợ việc triển khai vào bảo trì ứng dụng

Vào khoảng Tháng 3 năm 2015, các lập trình viên đã có một cuộc bình chọn PHP framework phổ biến nhất, Laravel đã giành vị trí quán quân cho PHP framework phổ biến nhất năm 2015, theo sau lần lượt là Symfony2, Nette, CodeIgniter, Yii2 vào một số khác Trước đó, Tháng 8 năm 2014, Laravel đã trở thành project PHP phổ biến nhất và được theo dõi nhiều nhất trên Github

1.2.3 VueJS

Theo trang chủ của Vue.js VueJS là một JS Framework dùng để xây dựng giao diện người dùng Vue được thiết kế từ đầu theo hướng cho phép và khuyến khích việc phát triển ứng dụng theo từng bước Có thể đáp ứng được nhu cầu về SPA (Single-Page Applications)

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ệc phá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ích hợ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

Trang 9

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 2.1 Phân tích và thiết kế

2.1.1 Mô tả bài toán

Phát triển cũng như triển khai mô hình kinh doanh theo hướng online đang dần thay thế bán hàng theo kiểu truyền thống, thay vì tốn hàng chục triệu hàng tháng

để thuê mặt bằng thì nay chỉ cần một khoản tiền nhỏ là có thể kinh doanh buôn bán,

ở Việt Nam mô hình order hàng online từ nước ngoài đang rất mới mẻ và có rất nhiều tiềm năng phù hợp với các shop có nhu cầu nhập hàng cũng như phù hợp với những người có nhu cầu mua hàng mà không cần thông qua bất cứ thủ tục rườm rà nào cả chính vì thế SyncVi tạo ra website để hỗ trợ những người mong muốn có những sản phẩm chất lượng cũng như giá thành hợp lý

Hiện tại website gồm 3 đối tượng sử dụng chính gồm admin, shop và người dùng

Admin: có quyền cao nhất trong các đối tượng, admin sẽ quản lý thông tin của shop và user, admin có quyền thêm, sửa, xoá bất cứ shop và user nào

Shop: quản lý các đơn hàng mà người dùng đã đặt từ trên trang Tmall Khi có đơn hàng, shop sẽ kiểm tra xem mình có thể order được những sản phẩm mà người dùng yêu cầu hay không, nếu có thì chấp nhận và báo cho người dùng biết để tiến hành thanh toán, còn không thì sẽ huỷ đơn hàng và phản hồi lại cho người dùng

Sau khi tiếp nhận đơn hàng, shop tiến hành order giùm cho người dùng, cách tính thuế, chi phí ship… shop đã tính trong đơn hàng

Người dùng: sẽ phải tải bộ công cụ đặt hàng mà bên SyncVi cung cấp, sau đó tiến hành vào trang Tmall, chọn sản phẩm mà mình muốn mua và tiến hành thêm vào giỏ hàng Trường hơp người dùng chưa đăng nhập thì SyncVi sẽ yêu cầu đăng nhập, sau khi đăng nhập thành công, người dùng xem những sản phẩm mà mình đã đặt ở trong giỏ hàng, tiến hành nhập các thông tin giao hàng và chờ đợi shop phản hồi

Sau khi được shop phải hồi thành công, người dùng tiến hành thanh toán số tiền trong đơn hàng, tối thiểu 60% tổng giá trị đơn hàng

2.1.2 Yêu cầu chức năng

- Website có đầu đủ các chức năng dành cho admin, shop và user

- Các chức năng giành cho người dùng: đăng nhập, đăng ký, xem giỏ hàng, thêm sản phẩm, xoá sản phẩm khỏi giỏ hàng, tiến hành đặt hàng, quản lý đơn hàng, xem chi tiết đơn hàng, comment đơn hàng với shop

- Chức năng giành cho shop: đăng nhập, đăng ký, quản lý đơn hàng, thống kê đơn hàng, comment đơn hàng với người dùng

- Chức năng giành cho Admin: Đăng nhập, quản lý user, quản lý shop

2.1.3 Yêu cầu phi chức năng

- Giao diện đẹp mắt, thân thiện với người sử dụng

- Hệ thống xử lý ổn định, ít bị gặp lỗi gây khó chịu

- An toàn và bảo mật thông tin người dùng

- Tốc độ truy cập nhanh, độ trễ thời gian ít

Trang 10

Một biểu đồ Use case chỉ ra một số lượng các tác nhân ngoại cảnh và mối liên kết của chúng đối với Use case mà hệ thống cung cấp Một Use case là một lời miêu

tả của một chức năng mà hệ thống cung cấp Lời miêu tả Use case thường là một văn bản tài liệu, nhưng kèm theo đó cũng có thể là một biểu đồ hoạt động Các Use case được miêu tả duy nhất theo hướng nhìn từ ngoài vào của các tác nhân (hành vi của

hệ thống theo như sự mong đợi của người sử dụng), không miêu tả chức năng được cung cấp sẽ hoạt động nội bộ bên trong hệ thống ra sao Các Use case định nghĩa các yêu cầu về mặt chức năng đối với hệ thống

Hệ thống: Với vai trò là thành phần của biểu đồ use case, hệ thống biểu diễn ranh giới giữa bên trong và bên ngoài của một chủ thể trong phần mềm chúng ta xây dựng.Một hệ thống ở trong biểu đồ use case không nhất thiết là một hệ phần mềm;

nó có thể là một chiếc máy,hoặc là một hệ thống thực như một doanh nghiệp, một trường đại học,…

Tác nhân(actor):là người dùng của hệ thống, một tác nhân có thể là một người dùng thực hoặc các hệ thống máy tính khác có vai trò nào đó trong hoạt động của hệ thống Như vậy, tác nhân thực hiện các use case Một tác nhân có thể thực hiện nhiều use case và ngược lại một use case cũng có thể được thực hiện bởi nhiều tác nhân

+ Vô hiệu hoá user

- - Quản lý tài khoản shop

Trang 11

2.1.4.4 Biểu đồ ca sử dụng

Trang 13

2.1.4.5 Chi tiết ca sử dụng

2.1.4.5.1 Đăng nhập

nhập vào hệ thống để thực hiện các chức năng giành riêng cho mình

Điều kiện kích hoạt Actor chọn chức năng đăng nhập ở

trên giao diện Tiền điều kiện Người dùng phải có tài khoản

Hậu điều kiện Người dùng đăng nhập thành công

Luồng sự kiện B1: Người dùng chọn nút Login

B2: Hệ thống hiển thị giao diện Login

B3: Người dùng nhập tên tài khoản

và mật khẩu B4: Hệ thống kiểm tra thông tin B4.1: Nếu thông tin không chính xác sẽ hiển thị lỗi

B4.2: Nếu thành công sẽ vào trang home

ð Kết thúc use case Luồng sự kiện phụ A1: Tài khoản không hợp lê: nhập

sai => yêu cầu người dùng nhập lại

Trang 14

2.1.4.5.2 Đăng xuất

thành công

Điều kiện kích hoạt Actor chọn chức năng đăng xuất ở

trên giao diện

Hậu điều kiện Người dùng đăng xuất thành công

Luồng sự kiện B1: Người dùng chọn nút đăng xuất

B2: Hệ thống hiển thị giao diện đăng xuất

B3: Hệ thống kiểm tra thông tin B4.1: Nếu thông tin không chính xác sẽ hiển thị lỗi

B4.2: Nếu thành công sẽ redirect

về login

ð Kết thúc use case Luồng sự kiện phụ

Trang 15

2.1.4.5.3 Thêm sản phẩm vào giỏ hàng

thêm sản phẩm từ trang khác (Tmall) do SyncVi thiết kế

Người dùng chọn sản phẩm mà mình muốn mua rồi bấm thêm vào giỏ hàng

Điều kiện kích hoạt Actor đã tải bộ công cụ hỗ trợ thêm

sản phẩm Tiền điều kiện Người dùng phải có tài khoản

Luồng sự kiện B1: Người dùng tải bộ công cụ

B2: Truy cập vào trang Tmall B3: Chọn sản phẩm mà mình muốn mua

B4: Hệ thống kiểm tra thông tin B4.1: Nếu chưa đăng nhập sẽ hiển thị thông báo đăng nhập B4.2: Nếu thành công sản phẩm

sẽ được thêm vào giỏ hàng

ð Kết thúc use case Luồng sự kiện phụ

Trang 16

2.1.4.5.4 Xem giỏ hàng

trang Tmall, người dùng bấm vào xem giỏ hàng ở trên thanh công cụ, hoặc truy cập vào trang web SyncVi bấm vào icon giỏ hàng

Điều kiện kích hoạt Actor đã tải bộ công cụ hỗ trợ thêm sản

phẩm và đã thêm sản phẩm Tiền điều kiện Người dùng phải có tài khoản

Hậu điều kiện Người dùng đăng nhập thành công và

thêm thành công

Luồng sự kiện B1: Người dùng tải bộ công cụ

B2: Truy cập vào trang Tmall B3: Bấm vào “Xem giỏ hàng” hoặc truy cập website SyncVi

B4: Hệ thống kiểm tra thông tin B4.1: Nếu chưa đăng nhập sẽ hiển thị thông báo đăng nhập

B4.2: Nếu có sản phẩm thì hệ thống sẽ show ra list sản phẩm mà người dùng đã chọn

B4.3: Nếu không có sản phẩm thì sẽ

Trang 17

2.1.4.5.5 Đặt hàng

hàng, người dùng tiến hành đặt hàng bằng cách bấm vào nút đặt hàng, sẽ

có 1 địa chỉ mặc định và địa chỉ khác nếu muốn thêm mới

sản phẩm và đã thêm sản phẩm, đã

có sản phẩm trong giỏ hàng

Tiền điều kiện Người dùng phải có tài khoản

B4: Hệ thống kiểm tra thông tin và trả về kết quả

B5: hệ thống sẽ redirect sang trang order

Kết thúc use case Luồng sự kiện phụ

Trang 18

2.1.4.5.6 Xem thông tin đơn hàng

thành công, người dùng sẽ được redirect sang trang order, tại đây sẽ

có thông tin đơn hàng đang xử lý, và đơn hàng đã thành công

sản phẩm và đã thêm sản phẩm, đã

có sản phẩm trong giỏ hàng

B5: hệ thống sẽ redirect sang trang order

Trang 19

2.1.4.5.7 Xem chi tiết đơn hàng

thanh header, sau đó chọn đơn hàng

để xem chi tiết

Điều kiện kích hoạt Actor đã đăng nhập

và có đơn hàng

trên thanh header B2: Click vào 1 đơn hàng mà mình muốn xem

B3: Hệ thống kiểm tra B3.1: Nếu đơn hàng không tồn tại thì sẽ chuyển hướng đến 404 B3.2: Nếu đơn hàng thành công thì sẽ chuyển đến trang detail

Trang 20

2.1.4.5.8 Comment chi tiết đơn hàng

chọn một đơn hàng, trong đơn hàng

đó sẽ có ô comment, người dùng nhập đoạn text vào và bấm

“Comment”

Điều kiện kích hoạt Đơn hàng đó tồn tại

và có sản phẩm

trên thanh header

B2: TChọn đơn hàng muốn xem

B3: Nhập text vào ô comment và bấm “Comment”

Trang 21

2.1.4.5.9 Xác nhận đơn hàng

mình, chọn đơn hàng vừa mới order, Shop sẽ liên hệ với người dùng đặt hàng để xác minh thông tin mà họ

đã đặt và đưa trước tiền cọc nếu họ đồng ý Sau đó trên giao diện Shop nhập số tiền đặt cọc và xác nhận giao hàng

Điều kiện kích hoạt Actor đã đăng nhập vào hệ thống

Hậu điều kiện Đơn hàng đang trong thời gian

B2.2: Nếu người dùng không đồng ý thì shop sẽ huỷ đơn hàng

B2.3 Nếu shop cảm thấy không đủ hàng để lấy sẽ liên hệ với người dùng để xác nhận huỷ đơn hàng

Trang 22

2.1.4.5.10 Comment đơn hàng của người dùng

đơn hàng, trong đơn hàng đó sẽ có ô comment, shop nhập đoạn text vào

và bấm “Comment”

Điều kiện kích hoạt Đơn hàng đó tồn tại

Tiền điều kiện Shop phải có tài khoản

Hậu điều kiện Shop đăng nhập thành công và có

sản phẩm

Luồng sự kiện B1: Shop chọn “Quản lý đơn hàng”

trên thanh sidebar

B2: TChọn đơn hàng muốn xem

B3: Nhập text vào ô comment và bấm “Comment”

Trang 23

2.1.4.5.11 Vô hiệu hoá người dùng

người dùng đó spam quá nhiều hoặc không muốn người dùng đó order nữa thì Admin sẽ vô hiệu hoá họ

Điều kiện kích hoạt Người dùng đó đang hoạt động

Tiền điều kiện Người dùng đó đã đăng kí tài khoản

Hậu điều kiện

Luồng sự kiện B1: Admin đăng nhập vào hệ thống

B2: Admin chọn một user cần vô hiệu hoá

B3: Admin bấm nút “Vô hiệu hoá”

B4: Hệ thống xử lý request B4.1: Nếu thành công sẽ hiển thị thông báo

Vô hiệu hoá thành công B4.2: Nếu thất bại sẽ show ra lỗi

Tiêu đề	Xây dựng hệ thống website order hàng trung quốc syncvi
Tác giả	Lê Đình Huân
Người hướng dẫn	TS. Phạm Anh Phương
Trường học	Trường Đại Học Sư Phạm - Đại Học Đà Nẵng
Chuyên ngành	Tin học
Thể loại	Khóa luận tốt nghiệp
Năm xuất bản	2020
Thành phố	Đà Nẵng

Định dạng
Số trang	46
Dung lượng	9,97 MB