thiết kế và xây dựng website giới thiệu và bán motor – xe máy cho cửa hàng xe máy cao sơn

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT Chương hai, trình bày về cơ sở lý thuyết được dùng để xây dựng đồ án như lýthuyết về phân tích và thiết kế hướng đội tượng UML, ngôn ngữ lập trình HTML,CSS, PHP

TÓM TẮT

Hiện nay với sự phát triển không ngừng của thương mại điện tử, nhu cầu muabán trực tuyến của con người ngày càng tăng Các website thương mại điện tử dầnthay thế các phương pháp mua bán truyền thống có ưu điểm không những giúp conngười không những giảm thời gian mà còn giảm cả chi phí cho mọi vấn đề giao dịch.Nhờ có sự phát triển vượt bậc của công nghệ thông tin và các website thương mại điện

tử mà việc kinh doanh buôn bán ngày càng một dễ dàng

Mục tiêu xây dựng đồ án này nhằm giúp cho các khách hàng có thể nắm rõ vàtìm hiểu về các dòng xe máy – motor hiện tại trên thị trường Việt Nam thông qua cácbài viết giới thiệu về sản phẩm và tin tức Khách hàng có thể đặt mua xe trực tiếp từ xathông qua mạng internet trên website thương mại điện tử Dù ở đâu, khách hàng đều

có thể tham khảo thông tin sản phẩm mình cần, lựa chọn cho mình một mẫu xe ưathích, phục hợp với nhu cầu sử dụng của bản thân, giúp cho việc mua sắm nhanh gọn,tiện ích và tiết kiệm thời gian Hệ thống có chức năng tìm kiếm dễ dàng, giao diện dễ

sử dụng Khách hàng có thể chủ động tương tác với hệ thống mua và tạo đơn hàng

Để xây dựng được một website hoàn chỉnh em đã lên kế hoạch xây dựng đầy đủcác chức năng: quản lý người dùng, quản lý đơn hàng, quản lý sản phẩm Dành chokhách hàng có nhiều chức năng thú vị như tìm kiếm sản phẩm, chức năng giỏ hàng vàthanh toán

Bố cục đồ án của em gồm 4 chương:

CHƯƠNG 1: TỔNG QUAN

Chương một là phần tổng quan, giới thiệu về lý do chọn đề tài, mục tiêu của đềtài, giới hạn và phạm vi của đề tài, kết quả dự kiến đạt được

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

Chương hai, trình bày về cơ sở lý thuyết được dùng để xây dựng đồ án như lýthuyết về phân tích và thiết kế hướng đội tượng UML, ngôn ngữ lập trình HTML,CSS, PHP, Javascript, cũng như các Framework Bootstrap, Laravel, jQuery và hệ cơ

sở dữ liệu MySQL, một số công cụ sử dụng hỗ trợ làm đồ án như Git, XAMPP,PhpStorm

CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ

Chương ba trình bày phân tích và thiết kế hệ thống theo phương pháp luậnhướng đối tượng gồm các phần: khảo sát hệ thống, phân tích và thiết kế hệ thống, thiết

kế CSDL

CHƯƠNG 4: XÂY DỰNG CHƯƠNG TRÌNH

Chương bốn xây dựng chương trình gồm: xây dựng hệ thống, kết quả đạt được

và phương hướng phát triển

M C L C ỤC LỤC ỤC LỤC

LỜI CẢM ƠN 1

LỜI CAM ĐOAN 2

MỤC LỤC 4

DANH MỤC BẢNG 6

DANH MỤC HÌNH ẢNH 7

THUẬT NGỮ VIẾT TẮT 10

LỜI MỞ ĐẦU 11

CHƯƠNG 1: TỔNG QUAN 12

1.1 Lý do chọn đề tài 12

1.2 Mục tiêu và nhiệm vụ 12

1.2.1 Mục tiêu 12

1.2.2 Nhiệm vụ 13

1.3 Giới hạn và phạm vi của đề tài 13

1.4 Kết quả dự kiến đạt được 13

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 14

2.1 Kiến thức nền tảng 14

2.1.1 Trình bày phân tích và thiết kế hướng đối tượng UML 14

2.1.2 Trình bày về HTML, CSS 16

2.1.3 Trình bày về Javascript và jQuery 19

2.1.4 Trình bày về PHP, mô hình MVC 21

2.1.5 Tìm hiểu về Framework Bootstrap 23

2.1.6 Trình bày về MYSQL 25

2.2 CÔNG CỤ SỬ DỤNG 27

2.2.1 Tìm hiểu phầm mềm hỗ trợ phân tích thiết kế Rational Rose 27

2.2.2 Phần mềm hỗ trợ code Sublime Text 27

2.2.3 Chương trình tạo máy chủ Web XAMPP 28

CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG THÔNG TIN 30

3.1 Khảo sát hệ thống 30

3.1.1 Khảo sát hiện trạng thực tế của các hệ thống mua bán trực tuyến 30

3.1.2 Lập mục tiêu cho hệ thống 34

3.1.3 Lên kế hoạch cho dự án 34

3.2 Phân tích và thiết kế hệ thống 35

3.2.1 Biểu đề UseCase 35

3.2.2 Biểu đồ lớp 52

3.2.3 Biểu đồ tuần tự và biểu đồ tương tác 53

3.3 Thiết kế cơ sở dữ liệu vật lý 90

CHƯƠNG 4: XÂY DỰNG CHƯƠNG TRÌNH 94

4.1 Xây dựng hệ thống 94

4.1.1 Giao diện chương trình 94

4.1.2 Chức năng chính 110

4.1.3 Code một số chức năng 110

4.2 Kết quả đạt được và phương hướng phát triển 121

4.2.1 Kết quả đạt được 121

4.2.2 Thuận lợi và khó khăn 121

4.2.3 Hướng phát triển đồ án 121

TÀI LIỆU THAM KHẢO 122

DANH M C B NG ỤC LỤC ẢNG

Bảng 2.1: Các vấn đề liên quan đến UML 16

Bảng 3.1: Bảng khảo sát người quản lý 31

Bảng 3.2: Bảng khảo sát khách hàng 33

Bảng 3.3: Các tác nhân (Actor) và chức năng (Use case) 36

Bảng 3.4: Đặc tả UC Add User (thêm tài khoản người dùng): 39

Bảng 3.5: Đặc tả UC Edit User (Sửa người dùng) 40

Bảng 3.6: Đặc tả UC Delete User 40

Bảng 3.7: Đặc tả UC Search User (Tìm kiếm người dùng) 40

Bảng 3.8: Đặc tả UC Add Product (Thêm sản phẩm) 41

Bảng 3.9: Đặc tả UC Edit Product (Sửa sản phẩm) 41

Bảng 3.10: Đặc tả UC Delete Product (Xóa sản phẩm) 42

Bảng 3.11: Đặc tả UC Search Product (Tìm kiếm sản phẩm) 42

Bảng 3.12: Đặc tả UC View Booking (Xem đơn hàng) 43

Bảng 3.13: Đặc tả UC Search Booking (Tìm kiếm đơn hàng) 43

Bảng 3.14: Đặc tả UC Add Post (Thêm bài viết) 44

Bảng 3.15: Đặc tả UC Edit Post (Sửa bài viết) 44

Bảng 3.16: Đặc tả UC Delete Post (Xóa bài viết) 45

Bảng 3.17: Đặc tả UC Search Post (Tìm kiếm bài viết) 45

Bảng 3.18: Đặc tả UC View Comment (Xem bình luận) 46

Bảng 3.19: Đặc tả UC Reply Comment (Trả lời bình luận) 46

Bảng 3.20: Đặc tả UC Register (Đăng kí) 47

Bảng 3.21: Đặc tả UC Login (Đăng nhập) 47

Bảng 3.22: Đặc tả UC Statistics 49

Bảng 3.23: Đặc tả UC Views 50

Bảng 3.24: Đặc tả Search 50

Bảng 3.25: Đặc tả Booking 51

Bảng 3.26: Đặc tả Comment 52

Bảng 3.27: Đặc tả UC Contact 52

Bảng 3.28: Bảng User (Người dùng) 90

Bảng 3.29: Bảng Category Product (Danh mục sản phẩm) 90

Bảng 3.30: Bảng Product (Sản phẩm) 91

Bảng 3.31: Bảng Category Post (Danh mục tin tức) 91

Bảng 3.32: Bảng Post (Tin tức) 91

Bảng 3.33: Bảng Booking_product (Đơn hàng sản phẩm) 92

Bảng 3.34: Bảng Comment (Bình luận) 92

Bảng 3.35: Bảng Booking (Đơn hàng) 92

DANH M C HÌNH NH ỤC LỤC ẢNG

Hình 2.1: Cấu hình cơ bản tập tin HTML 18

Hình 2.2: Quy trình hoạt động của PHP 23

Hình 2.3: Mô hình MVC 24

Hình 3.1: Sơ đồ UseCase tổng quát 37

Hình 3.2: UseCase Manages 38

Hình 3.3: UseCase Manage Users 39

Hình 3.4: UseCase Manage Products 41

Hình 3.5: UseCase Manage Booking 42

Hình 3.6: UseCase Manage Posts 43

Hình 3.7: UseCase Manage Comment 45

Hình 3.8: UseCase Authenticate 46

Hình 3.9: UseCase Statistics 47

Hình 3.10: UseCase View 48

Hình 3.11: UseCase Search 49

Hình 3.12: UseCase Booking 49

Hình 3.13: UseCase Comment 50

Hình 3.14: UseCase Contact 51

Hình 3.15: Class tổng quát 52

Hình 3.16: Biểu đồ trình tự “Add User” 53

Hình 3.17: Biểu đồ trình tự “Edit User” 54

Hình 3.18: Biểu đồ trình tự “Delete User” 54

Hình 3.19: Biểu đồ trình tự “Add Product” 55

Hình 3.20: Biểu đồ trình tự “Edit Product” 56

Hình 3.21: Biểu đồ trình tự “Delete Product” 56

Hình 3.22: Biểu đồ trình tự “Add Post” 57

Hình 3.23: Biểu đồ trình tự “Edit Post” 58

Hình 3.24: Biểu đồ trình tự “Delete Post” 58

Hình 3.25: Biểu đồ trình tự “View Booking” 59

Hình 3.26: Biểu đồ trình tự “Statistics” 59

Hình 3.27: Biểu đồ trình tự “Comment” 60

Hình 3.28: Biểu đồ trình tự “Register” 61

Hình 3.29: Biểu đồ trình tự “Login” 62

Hình 3.30: Biểu đồ trình tự “View” 62

Hình 3.31: Biểu đồ trình tự “Search” 63

Hình 3.32: Biểu đồ trình tự “Booking” 63

Hình 3.33: Biểu đồ trình tự “Contact” 64

Hình 3.34: Biểu đồ tương tác “Add User” 64

Hình 3.35: Biểu đồ tương tác “Edit User” 65

Hình 3.36: Biểu đồ tương tác “Delete User” 65

Hình 3.38: Biểu đồ tương tác “Edit Product” 66

Hình 3.39: Biểu đồ tương tác “Delete Product” 67

Hình 3.40: Biểu đồ tương tác “Add Post” 67

Hình 3.41: Biểu đồ tương tác “Edit Post” 68

Hình 3.42: Biểu đồ tương tác “Delete Post” 68

Hình 3.43: Biểu đồ tương tác “View Booking” 69

Hình 3.44: Biểu đồ tương tác “Statistics” 69

Hình 3.45: Biểu đồ tương tác “Comment” 70

Hình 3.46: Biểu đồ tương tác “Register” 70

Hình 3.47: Biểu đồ tương tác “Login” 71

Hình 3.48: Biểu đồ tương tác “View” 71

Hình 3.49: Biểu đồ tương tác “Search” 72

Hình 3.50: Biểu đồ tương tác “Booking” 72

Hình 3.51: Biểu đồ tương tác “Contact” 73

Hình 3.52: Biểu đồ hoạt động “Add User” 74

Hình 3.53: Biểu đồ hoạt động “Edit User” 75

Hình 3.54: Biểu đồ hoạt động “Delete User” 75

Hình 3.55: Biểu đồ hoạt động “Add Product” 76

Hình 3.56: Biểu đồ hoạt động “Edit Product” 77

Hình 3.57: Biểu đồ hoạt động “Delete Product” 77

Hình 3.58: Biểu đồ hoạt động “Add Post” 78

Hình 3.59: Biểu đồ hoạt động “Edit Post” 79

Hình 3.60: Biểu đồ hoạt động “Delete Post” 79

Hình 3.61: Biểu đồ hoạt động “View Booking” 80

Hình 3.62: Biểu đồ hoạt động “Statistics” 80

Hình 3.63: Biểu đồ hoạt động “Comment” 81

Hình 3.64: Biểu đồ hoạt động “View” 82

Hình 3.65: Biểu đồ hoạt động “Search” 83

Hình 3.66: Biểu đồ hoạt động “Booking” 84

Hình 3.67: Biểu đồ hoạt động “Register” 85

Hình 3.68: Biểu đồ hoạt động “Login” 86

Hình 3.69: Biểu đồ hoạt động “Contact” 87

Hình 3.70: Biểu đồ trạng thái “Sản phẩm” 87

Hình 3.71: Biểu đồ trạng thái “Thanh toán đơn hàng” 88

Hình 3.72: Biểu đồ thành phần 88

Hình 3.73: Biểu đồ triển khai 89

Hình 4.1: Giao diện Trang chủ 93

Hình 4.2: Giao diện trang Đăng nhập tài khoản khách hàng 93

Hình 4.3: Giao diện trang Đăng ký tài khoản khách hàng 94

Hình 4.4: Giao diện trang Sản phẩm 94

Hình 4.5: Giao diện trang Chi tiết sản phẩm 95

Hình 4.6: Giao diện trang Tin tức 95

Hình 4.7: Giao diện trang Chi tiết tin tức 96

Hình 4.8: Giao diện trang Giỏ hàng 96

Hình 4.9: Giao diện trang Đăng nhập tài khoản Admin 97

Hình 4.10: Giao diện trang Quản lý của Admin 97

Hình 4.11: Giao diện trang Quản lý danh mục Sản phẩm 98

Hình 4.12: Giao diện Thêm mới danh mục sản phẩm 98

Hình 4.13: Giao diện Sửa danh mục sản phẩm 99

Hình 4.14: Giao diện trang Quản lý sản phẩm 99

Hình 4.15: Giao diện trang Thêm mới sản phẩm 100

Hình 4.16: Giao diện trang Sửa thông tin sản phẩm 100

Hình 4.17: Giao diện trang Quản lý danh mục tin tức 101

Hình 4.18: Giao diện trang Thêm mới danh mục tin tức 101

Hình 4.19: Giao diện trang Sửa danh mục tin tức 102

Hình 4.20: Giao diện trang Quản lý bài viết tin tức 102

Hình 4.21: Giao diện trang Thêm mới bài viết tin tức 103

Hình 4.22: Giao diện trang Sửa thông tin bài viết tin tức 103

Hình 4.23: Giao diện Quản lý tài khoản Admin 104

Hình 4.24: Giao diện Thêm mới tài khoản Admin 104

Hình 4.25: Giao diện Sửa thông tin tài khoản Admin 105

Hình 4.26: Giao diện Quản lý tài khoản khách hàng 105

Hình 4.27: Giao diện Xem thông tin chi tiết tài khoản khách hàng 106

Hình 4.28: Giao diện trang Quản lý đơn hàng 106

Hình 4.29: Giao diện trang Xem thông tin chi tiết đơn hàng 107

Hình 4.30: Giao diện Quản lý bình luận khách hàng 107

Hình 4 31: Giao diện trang Xem chi tiết bình luận khách hàng 108

Hình 4.32: Giao diện trang Liên hệ của khách hàng 108

Hình 4.33: Giao diện trang Quản lý liên hệ của Admin 109

Hình 4.34: Giao diện trang Xem chi tiết liên hệ của khách hàng 109

THU T NG VI T T T ẬT NGỮ VIẾT TẮT Ữ VIẾT TẮT ẾT TẮT ẮT

dùng để đặc tả, trực quan hóa và tưliệu hóa phần mềm hướng đối tượn

hay một loại mã lệnh chủ yếu đượcdùng để phát triển các ứng dụng viếtcho máy chủ, mã nguồn mở, dùng chomục đích tổng quát

HTML Hyper Text Markup Language Là ngôn ngữ được thiết kế ra để tạo

nên các trang web

ra với mục đích quản lý và xây dựng

dự án phần mềm

SQL Structured Query Language Là hệ quản trị cơ sở dữ liệu tự do

nguồn mở phổ biến nhất thế giới

trên đối tượng được phát triển từ các ýniêm nguyên mẫu

L I M Đ U ỜI MỞ ĐẦU Ở ĐẦU ẦU

Thị trường thương mại điện tử tại Việt Nam ngày càng phát triển về cả số lượng

và chất lượng Nhu cầu tìm kiếm sản phẩm trên internet của người dùng tại Việt Namcũng như trên thế giới ngày càng tăng nhanh kể từ khi thương mại điện tử bắt đầu xuấthiện từ năm 1979

Cùng với sự phát triển mạnh mẽ không ngừng của xã hội, thì nhu cầu đi lại củacon người ngày càng tăng cao Một phương tiện di chuyển tiện ích giúp cho con người

có thể di chuyển đi lại nhanh chóng giải quyết được nhiều vấn đề hơn Bên cạnh cácphương tiện công cộng ngày càng chiếm được niềm tin từ nhiều người, hay cácphương tiện cá nhân sang trọng như ô tô, thì motor – xe máy vẫn luôn là phương tiệnđược đông đảo người dân Việt Nam tin dùng nhất và chiếm thị phần lớn trên thịtrường bán xe Việt Nam với các ưu điểm như nhỏ gọn, di chuyển nhanh chóng và phùhợp với túi tiền của người mua

Trong thời đại công nghệ 4.0, với sự bùng nổ phát triển mạnh mẽ của côngnghệ thông tin và điện tử viễn thông hiện nay, thì một website thương mại điện tửdành cho việc mua bán motor – xe máy là một điều cần thiết để có thể quảng báthương hiệu của hàng, cũng như tiếp cận với lượng khách hàng nhiều hơn do vớiphương pháp bán hàng truyền thống Với những kiến thức đã được học trên ghế nhà

trường và kinh nghiệm thực tế, em đã chọn đề tài “ THIẾT KẾ VÀ XÂY DỰNG WEBSITE GIỚI THIỆU VÀ BÁN MOTOR – XE MÁY CHO CỬA HÀNG XE MÁY CAO SƠN ” để làm tốt nghiệp của mình.

CHƯƠNG 1: TỔNG QUAN1.1 Lý do chọn đề tài

Hiện nay nền kinh tế phát triển kéo theo nhu cầu di chuyển đi lại của con ngườitrở nên nhiều hơn Bên cạnh các phương tiên công cộng đang phát triển mạnh mẽ vàđược nhiều người quan tâm sử dụng, thì xe máy vẫn luôn là một phương tiện cá nhânđược đông đảo người dân ưa chuộng và sử dụng phổ biến do đáp ứng được các nhucầu thiết yếu cơ bản của người sử dụng như nhanh, gọn, chủ động được thời gian cũngnhư chi phí mua sắm và chi phí vận hành phù hợp với túi tiền của người tiêu dùng.Hiểu được điều đó, cửa hàng xe máy Cao Sơn đã nhập và cung cấp các dòng xe, mẫu

xe đa dạng ra thị trường để người tiêu dùng có thể có nhiều lựa chọn khác nhau tùyvào nhu cầu và sở thích của mỗi người tiêu dùng Cửa hàng xe máy Cao Sơn hiện tại

có các cơ sở bán hàng ở nhiều địa điểm trên địa bàn tỉnh Bắc Ninh như T.X Từ Sơn,huyện Tiêu Du

Trong vài năm gần đây, các website thương mại điện tử đang trở thành kênhmua sắm của rất nhiều người Những người mua tham khảo các mẫu xe, dòng xe haymua xe họ thường chọn việc tìm kiếm và lựa chọn trên các trang website bán motor –

xe máy nhắm tiếp kiệm thời gian hơn so với trước đây phải đến tận cửa hàng để hỏigiá, và xem xe Việc mua hàng trên các trang website thương mại điện tử không cònquá xa lạ với những người tiêu dùng thông thái trong thời đại công nghệ 4.0 như hiệnnay Nhưng vấn đề, nhiều website vấn chưa thể đáp ứng được như cầu mua sắm củangười tiêu dùng muốn xem, hay tham khảo các mẫu xe ưa chuộng, mẫu xe mới, củanhiều hãng xe trên thị trường hiện nay

Chính vì vậy em đã chọn đề tài “Thiết kế và xây dựng website giới thiệu và bán motor – xe máy cho cửa hàng xe máy Cao Sơn” với mục đích tìm hiểu hệ thống

– đáp ứng nhu cầu bán hàng của cửa hàng xe máy Cao Sơn và đáp ứng như cầu mua

xe của khách hàng Giúp khách hàng có thể lựa chọn một mẫu xe, loại xe phù hợp vớinhu cầu và sở thích của bản thân Đồng thời tạo niềm tin cũng như sự uy tín cho củahàng xe máy Cao Sơn qua việc bán hàng trên website

1.2 Mục tiêu và nhiệm vụ

1.2.1 M c tiêu ục tiêu

- Nắm bắt được phương pháp làm việc kinh doanh và quy trình hoạt động của mộtwebsite thương mại điện tử

- Xây dựng thành công website bán motor – xe máy với đầy đủ các chức năng cần thiết

và hiệu quả, áp dụng công nghệ thông tin vào kinh doanh, hướng tới phong cách kinhdoanh chuyên nghiệp và hiệu quả

- Thông qua quá trình làm đồ án tốt nghiệp, em sẽ áp dụng những kiến thức đã được hỏitrong bốn năm học Đại học, đồng thời tự bồi dưỡng, trang bị những kiến thức mới đểxây dựng một ứng dụng đáp ứng yêu cầu của đồ án tốt nghiệp Qua quá trình làm đồ

án, em sẽ rút ra những kinh nghiệm cho bản thân để chuẩn bị hành trang bước vàocuộc sống, sau những năm tháng trên giảng đường Đại học

1.2.2 Nhi m v ệm vụ ục tiêu

- Khảo sát nhu cầu sử dụng motor – xe máy trên thị trường Việt Nam

- Khảo sát, phân tích thiết kế hệ thống

- Tìm hiểu, nắm rõ quy trình mua bán quản lý sản phẩm

1.3 Giới hạn và phạm vi của đề tài

- Xây dựng website dựa trên các ngôn ngữ lập trình HTML, CSS, JS, PHP và quản lý cơ

sở dữ liệu thông qua hệ quản trị cơ sở dữ liệu MySQL

- Chương trình tập chung chức năng mua-bán trên website

1.4 Kết quả dự kiến đạt được

Xây dựng website gồm 2 phần chính:

- Người dùng: Giao diện người dùng, xem thông tin sản phẩm (chi tiết, giá,

v.v.), xem các bài viết tin tức giới thiệu, đăng ký, đăng nhập thành viên, mua hàng vàđặt hàng trên hệ thống website, v.v

- Quản trị: Giao diện trang admin, quản lý sản phẩm, bài viết tin tức giới thiệu

với các chức năng cơ bản (thêm, sửa, xóa), quản lý tài khoản khách hàng, quản lý cácdanh mục sản phẩm, bài viết, thống kê sản phẩm, v.v

CH ƯƠNG 2: CƠ SỞ LÝ THUYẾT NG 2: C S LÝ THUY T ƠNG 2: CƠ SỞ LÝ THUYẾT Ở ĐẦU ẾT TẮT2.1 Ki n th c n n t ng ến thức nền tảng ức nền tảng ền tảng ảng.

2.1.1 Trình bày phân tích và thi t k h ến thức nền tảng ến thức nền tảng ướng đối tượng UML ng đ i t ối tượng UML ượng UML ng UML.

2.1.1.1 Khái niệm phân tích thiết kế hướng đối tượng và các vấn đề liên quan

Phân tích và thiết kế hướng đối tượng (OOAD – Object Oriented Analysis and Design): là phân tích xem hệ thống gồm những đối tượng nào trong trong hệ

thống và chúng tương tác, liên kết với nhau như thế nào, từ việc mô tả được tất cả cácđối tượng và sự tương tác của chúng sẽ giúp chúng ta hiểu rõ về hệ thống và cài đặtđược nó

Ưu điểm:

- Gần gũi với thế giới thực

- Tái sử dụng dễ dàng

- Đóng gói, che dấu thông tin làm cho hệ thống tin cậy hơn

- Thừa kế giảm chi phí, hệ thống có tính mở cao

- Với hệ thống lớn và phức tạp, hoặc có nhiều luồng dữ liệu khác nhau, sử dụngphương pháp hướng đối tượng giúp tận dụng khả năng bảo vệ giữ liệu ngoài racòn tiết kiệm công sức và tài nguyên

Nhược điểm: Phương pháp này khá phức tạp, khó theo dõi được luồng dữ liệu

do có nhiều luồng dữ liệu ở đầu vào

Các giai đoạn phân tích thiết kế hướng đối tượng:

- Phân tích hướng đối tượng (Object Oriented Analysis)

- Thiết kế hướng đối tượng (Object Oriented Design)

- Lập trình hướng đối tượng (Object Oriented Programming)

2.1.1.2 Khái niệm UML và các vấn đề liên quan.

UML (Unified Modeling Language) là một ngôn ngữ mô hình hóa tổng quát,

trực quan bằng hình ảnh, dùng để đặc tả (Specifying), mô hình hóa trực quan(Visualizing), hình dung xây dựng (Constructing) và tài liệu hóa (Documenting), cácnhân tố của hệ thống phần mềm

UML sử dụng để vẽ cho nhiều lĩnh vực khác nhau như phần mềm, cơ khí, xây

dựng v… trong phạm vi đồ án chỉ nghiên cứu cách sử dụng UML cho phân tích và

thiết kế hướng đối tượng trong ngành phần mềm OOAD sử dụng UML bao gồm cácthành phần sau:

- View (góc nhìn)

- Diagram (bản vẽ)

- Notations (ký hiệu)

- Mechanisms (qui tắc, cơ chế)

Bảng 2.1: Các vấn đề liên quan đến UML

- Mô tả tương tác giữa người sử dụng với hệ thống

- Biểu đồ tuần tự: Mô tả tương tác giữa các đối tượng

theo trình tự thời gian và thông điệp được truyền đigiữa các lớp

- Biểu đồ cộng tác: Không theo thứ tự nhưng biểu diễn

tổng quát giao tiếp giữa các đối tượng

- Mô tả các hoạt động, luồng xử lý bên trong hệ thống

Nó có thể được sử dụng để mô tả các qui trình nghiệp

vụ trong hệ thống, các luồng của một chức năng hoặccác hoạt động của một đối tượng

7 Trạng thái - Mô tả vòng đời của đối tượng từ khi nó được tạo ra tới

khi kết thúc

- Mô tả cách chuyển biến trạng thái của đối tượng tươngứng với tác động bên ngoài.

2.1.2 Trình bày v HTML, CSS ền tảng.

2.1.2 1 HTML là gì ?

- Khái niệm về HTML:

HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản,

dùng để tạo ra các trang web

HTML bao gồm một tập hợp các thẻ dùng để:

● Định nghĩa cấu trúc của trang web

● Định dạng nội dung của trang web

● Tạo các siêu liên kết để liên kết đến những trang web khác

● Chèn âm thanh, hình ảnh, video,… vào trang web

- Tập tin HTML là gì ?

● Tập tin HTML là một tập tin text có chứa các thẻ HTML (tập tin có phần mởrộng là html)

● Tập tin HTML còn được gọi là một trang web

● Nếu cú pháp có bị sai thì trình duyệt vẫn không bão lỗi, nhưng nó sẽ hiển thịkhông như ý muốn

● Các thẻ gồm một cặp thẻ đóng và mở được gọi là thẻ kép (Ví dụ: <b></b>,

<p></p>, <i></i>)

● Một số thẻ có thêm các thuộc tính: Dùng để chỉ định một số thuộc tính khácliên quan đến thẻ Nếu có, sẽ được khai báo trong thẻ mở (Ví dụ: <p align =

“center”>align là một thuộc tính dùng để căn lề cho đoạn văn bản</p>)

- Cấu trúc cơ bản của một tập tin HTML:

Một tập tin HTML được bắt đầu bằng thẻ <html> và kết thúc bởi </html> Bêntrong cặp thẻ <html></html> được chia thành hai phần chính:

1 Phần <head>: chứa tiêu đề trang web, các tập tin hỗ trợ, cách khai báo,…

2 Phần <body>: chứa các nội dung mà bạn muốn hiển thị ra màn hình

Hình 2.1: Cấu hình cơ bản tập tin HTML 2.1.2.2 CSS là gì ?

- Khái niệm CSS

CSS (Cascading Style Sheet) là mã sử dụng dùng để trình bày bố cục của một

website dựa vào các thẻ HTML CSS là ngôn ngữ quy định cách trình bày của các thẻHTML trên trang web CSS được tổ chức World Wide Web (W3C) giới thiệu vào năm

1996 Hiện này CSS đang là ngôn ngữ đang được sử dụng rất nhiều trong lập trìnhweb, có thể nói CSS ra đời đã tạo nên một cuộc cách mạng

CSS chỉ đơn thuần là một file có phần mở rộng là css, trong file này chứa

những câu lệnh CSS, mỗi câu lệnh CSS sẽ định dạng một phần nhất định của tài liệuHTML, như màu sắc, font chữ

- Ưu điểm CSS

● CSS có thể tách riêng phần định dạng ra khỏi nội dung trang web

● CSS giúp người thiết kế kiểm soát toàn bộ giao diện nhanh nhất và hiệu quảnhất Giúp lập trình viên tiết kiệm công sức rất nhiều trong việc thiết kế giao diệnwebstie.

● Do được tách rời khỏi nội dung trang web, nên các mã HTML sẽ gọn gànghơn, giúp lập trình viên thuận tiện trong việc chỉnh sửa giao diện web Kích thước củafile html cũng được giảm đáng kể Hơn thế nữa sẽ được trình duyệt tải một lần vàdùng nhiều lần (cache), do đó sẽ giúp tốc độ load trang web nhanh hơn

<p style = “font-size: 16px; color: red” > Khai báo CSS cục bộ </p>

+ Khai báo CSS nội tuyến:

CSS nội tuyến là phần mã CSS được khai báo trong cặp thẻ <style> </style> vàđặt trong phần <head> </head> của file HTML Khi sử dụng CSS nội tuyến nó sẽ cótác dụng lên file html được khai báo nhưng không ảnh hưởng đến các file khác trongcùng một website

Đây là cách khai báo CSS được sử dụng nhiều nhất trong thực tế và cách khaibáo này mới tận dụng được hết thế mạnh mà CSS mang lại, tách biệt hoàn toàn khỏifile html, người thiết kế chỉ cần viết một file CSS duy nhất mà sử dụng nhiều lầntrong ứng dụng của họ.

Nó có phạm vi ảnh hưởng đến toàn bộ website chứ không phải một file htmlriêng biệt Do đó mỗi khi muốn thay đổi thuộc tính hiển thị của một thành phần nào đótrong website chỉ cần chỉnh file CSS này thay vì phải chỉnh sửa tất cả các file htmltrong ứng dụng

Để khai báo CSS ngoại tuyến, ta chỉ cần tạo một file có tên ví dụ như style.css,sau đó chèn đoạn code sau trong phần <head> </head> của trang web

Đoạn code cần chèn: <link rel = “stylesheet” href= “style.css” >

2.1.3 Trình bày v Javascript và jQuery ền tảng.

2.1.3.1 Javascript

JavaScript là một ngôn ngữ lập trình của HTML và WEB Nó là nhẹ và được

sử dụng phổ biến nhất như là một phần của các trang web, mà sự thi hành của chúngcho phép Client-Side script tương tác với người sử dụng và tạo các trang web động

Nó là một ngôn ngữ chương trình thông dịch với các khả năng hướng đối tượng

JavaScript được biết đến đầu tiên với tên Mocha, và sau đó là LiveScript,

nhưng Hãng Netscape thay đổ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.0năm 1995 với tên LiveScript Core đa năng của ngôn ngữ này đã được nhúng vàoNetscape, IE, và các trình duyệt khác

Các lợi thế của việc sử dụng JavaScript là:

● Sự tương tác Server ít hơn: có thể xác nhận đầu vào (input) người sử dụng

trước khi gửi trang tới Server Điều này làm tiết kiệm lưu lượng tải ở Server,nghĩa là Server tải ít hơn

● Phản hồi ngay lập tức tới khách truy cập: Họ không phải chờ cho một

trang web tải lại để thấy xem nếu họ đã quên nhập cái gì đó

● Khả năng tương tác tăng lên: Bạn có thể tạo các giao diện mà phản ứng lại

khi người sử dụng rê chuột qua chúng hoặc kích hoạt chúng thông qua bànphím

● Giao diện phong phú hơn: Bạn có thể sử dụng JavaScript để bao gồm

những mục như các thành phần Drag và Drop (DnD) và các con trượt (Slider)

để cung cấp một Rich Interface (Giao diện giàu tính năng) tới site khách truycập của bạn

Hạn chế của Javascript

● Client-side JavaScript không cho phép đọc và ghi các file, bởi vì lý do bảomật

● JavaScript không được sử dụng cho việc kết nối mạng các ứng dụng bởi vìkhông có những hỗ trợ có sẵn

● JavaScript không có bất kỳ khả năng đa luồng hoặc đa xử lý

2.1.3.2 jQuery

jQuery là một thư viện kiểu mới của JavaScript, được tạo bởi John Resig vào năm 2006 với một phương châm tuyệt vời: Write less, do more - Viết ít hơn, làm nhiều hơn.

jQuery làm đơn giản hóa việc truyền tải HTML, xử lý sự kiện, tạo hiệu ứng

động và tương tác Ajax Với jQuery, khái niệm Rapid Web Development đã khôngcòn quá xa lạ

jQuery là một bộ công cụ tiện ích JavaScript làm đơn giản hóa các tác vụ đa

dạng với việc viết ít code hơn Dưới đây liệt kê một số tính năng tối quan trọng được

hỗ trợ bởi jQuery:

● Thao tác DOM − jQuery giúp dễ dàng lựa chọn các phần tử DOM

để traverse (duyệt) một cách dễ dàng như sử dụng CSS, và chỉnh sửa nội dung

của chúng bởi sử dụng phương tiện Selector mã nguồn mở, mà được gọi

là Sizzle.

●Xử lý sự kiện − jQuery giúp tương tác với người dùng tốt hơn bằng việc xử

lý các sự kiện đa dạng mà không làm cho HTML code rối tung lên với cácEvent Handler

● Hỗ trợ AJAX − jQuery giúp bạn rất nhiều để phát triển một site giàu tính

năng và phản hồi tốt bởi sử dụng công nghệ AJAX

●Hiệu ứng − jQuery đi kèm với rất nhiều các hiệu ứng đa dạng và đẹp mắt mà

bạn có thể sử dụng trong các Website của mình

● Gọn nhẹ − jQuery là thư viện gọn nhẹ - nó chỉ có kích cỡ khoảng 19KB

(gzipped)

● Được hỗ trợ hầu hết bởi các trình duyệt hiện đại − jQuery được hỗ trợ

hầu hết bởi các trình duyệt hiện đại, và làm việc tốt trên IE 6.0+, FF 2.0+,Safari 3.0+, Chrome và Opera 9.0+

● Cập nhật và hỗ trợ các công nghệ mới nhất − jQuery hỗ trợ CSS3 Selector

và cú pháp XPath cơ bản

Có hai cách để sử dụng jQuery:

● Cài đặt nội bộ − Bạn có thể tải jQuery Library trên thiết bị nội bộ của bạn và

include nó trong HTML code

● Sử dụng từ CDN (CDN Based Version) − Bạn có thể include thư viện

jQuery vào trong HTML code một cách trực tiếp từ Content Delivery Network(CDN)

2.1.4 Trình bày v PHP, mô hình MVC ền tảng.

2.1.4.1 PHP là gì ?

PHP là viết tắt của chữ "Hypertext Preprocessor", đây là một ngôn ngữ lập

trình được sử dụng để viết ở phía máy chủ (lập trình web) Hiện nay có rất nhiều ngônngữ có thể viết ở máy chủ như C#, Java, Python và PHP chính là một trong nhữngngôn ngữ của nhóm này

PHP có cú pháp đơn giản, tốc độ nhanh và nhỏ gọn, dễ học và thời gian để tiếp

cập PHP ngắn hơn so với các ngôn ngữ lập trình khác nên hiện nay PHP đang chiếm

số lượng lập trình viên tương đối lớn, có thể gọi là lớn nhất Hiện PHP có rất nhiềucác CMS mã nguồn mở như WordPress, OpenCart, NukeViet cùng với đó là cácframework như Laravel, Symfony, CodeIgniter, … nên nó rất đa dạng và đáp ứng hầuhết các website thông thường từ blog cá nhân cho đến website giới thiệu công ty vàbán hàng

PHP sử dụng cặp thẻ mở <?php và thẻ đóng ?>, phía bên trong chính là nội

dung của mã code PHP

PHP chạy trên môi trường Webserver và lưu trữ dữ liệu thông qua hệ quản trị

cở sở dữ liệu nên PHP thường đi kèm với Apache, MySQL và hệ điều hành Linux(LAMP) Trong đó:

● Apache: là một phần mền web server có nhiệm vụ tiếp cận request từ trìnhduyệt người dùng sau đó chuyển giao cho PHP xử lý và gửi trả lại cho trình duyệt.

● MySQL cũng tương tự như các hệ quản trị cở sở dữ liệu khác như Oracle,SQL Server,… đóng vai trò là lưu trữ và truy vấn dữ liệu Phần này, em xin có phầntrình bày chi tiết riêng trong quá trình làm báo cáo đồ án

● Linux: hệ điều hành mã nguồn mở được sử dụng rất rộng rãi cho các webserver Thông thường các phiên bản được sử dụng nhiều nhất là RedHat EnterpriseLinux, Ubuntu,…

- Một số tính chất của file PHP:

● Các file PHP trả về kết quả cho trình duyệt là một trang HTML thuần

● Các file PHP có thể chứa văn bản (Text), các thẻ HTML (HTML tags) vàđoạn mã kịch bản (Script)

● Các file PHP có phần mở rộng là: php, php3, phpml

● Các file code php phải sử dụng thẻ mở <?php hoặc <? và phải có đóng ?>.

● File code PHP sử dụng encode: UTF-8 without BOOM

● Từ phiên bản 4.0 trở về sau mới hỗ trợ session

- Quy trình hoạt động của PHP:

Khi người sử dụng gọi trang PHP, Web Server sẽ triệu gọi PHP Engine đểthông dịch dịch trang PHP và trả kết quả cho người dùng như hình 2.2 bên dưới

Hình 2.2: Quy trình hoạt động của PHP

2.1.4.2 Mô hình MVC

MVC (Model – View – Controller): Mô hình MVC là một kiến trúc phần

mềm, được tạo ra với mục đích quản lý và xây dựng dự án phần mềm có hệ thốnghơn Mô hình MVC được dùng khá rộng rãi và đặc biệt là trong các ngôn ngữ lậptrình Web Mô hình MVC chia 1 ứng dụng ra 3 thành phần khác nhau : Model,View và Controller Với việc sử dụng mô hình MVC giúp cho mỗi thành phần cómột nhiệm vụ riêng biệt và độc lập với các thành phần còn lại

Nhiệm vụ của từng phần trong mô hình MVC:

● Model: chịu trách nhiệm tương tác với cơ sở dữ liệu, có thể thực thi truy vấn

thông thường hoặc trả về dữ liệu dạng đóng gói cho Controller xử lý và điều hướng

● View: có nhiệm vụ chứa mã giao diện hoặc nhận dữ liệu trả về từ Controller.

● Controller: chịu trách nhiệm nhận các request được gửi lên từ người dùng,

sau đó sẽ xử lý và điều hướng dữ liệu trả về

Hình 2.3: Mô hình MVC

Ưu điểm của MVC: Thể hiện tính chuyên nghiệp trong lập trình, phân tích

thiết kế Do được chia thành các thành phần độc lập nên giúp phát triển ứng dụngnhanh, đơn giản, dễ nâng cấp, bảo trì

Nhược điểm của MVC: Đối với dự án nhỏ việc áp dụng mô hình MC gây cồng

kềnh, tốn thời gian trong quá trình phát triển Tốn thời gian trung chuyển dữ liệu củacác thành phần

2.1.5 Tìm hi u v Framework Bootstrap ểu về Framework Bootstrap ền tảng.

Bootstrap là một front-end framework miễn phí giúp quá trình phát triển web

được nhanh chóng và dễ dàng hơn

Bootstrap bao gồm các mẫu thiết kế dựa trên HTML và CSS như typography,

forms, buttons, tables, navigation, modals, images carousels,… cũng như các pluginJavaScript tùy chọn

Bootstrap cũng cung cấp cho người sử dụng khả năng tạo ra các renponsive

designs một cách dễ dàng

Bootstrap ban đầu có tên Twitter Blueprint được phát triển bởi Mark Otto và

Jacob Thornton tại Twitter

Bootstrap là một trong những framework được sử dụng nhiều nhất trên thế giới

để xây dựng một giao diện website Bootstrap đã xây dựng nên một chuẩn riêng và rấtđược nhiều người dùng ưa chuộng Chính vì thế, chúng ta hay nghe tới một cụm từ rấtthông dụng: “Thiết kế theo chuẩn Bootstrap”

- Ưu điểm của Bootstrap:

● Dễ sử dụng: bất kỳ ai có kiến thức cơ bản về HTML và CSS đều có thể bắtđầu sử dụng Bootstrap

● Các tính năng đáp ứng (Responsive features): renponsive CSS của Bootstrapđiều chỉnh cho điện thoại, máy tính bảng, máy tính để bàn

● Cách tiếp cận hướng làm web hiện hành nhất hiện nay Mobile-first: trongBootstrap 3, mobile-first là một phần của core framwork

● Khả năng tương thích trình duyệt: Bootstrap tương thích với tất cả các trìnhduyệt hiện tại như Chorme, Firefox, Internet Explorer, Edge, Safari và Opera

- Các phiên bản của Bootstrap:

● Bootstrap 1.0: được phát hành vào ngày 19/08/2011 Ở phiên bản đầu tiên

của Bootstrap, chưa được hỗ trợ trên màn hình mobile

● Bootstrap 2.0: được phát hành vào ngày 31/01/2012 Trên phiên bản này so

với phiên bản Bootstrap 11.0 trước đã được bổ sung hệ thống Gird-Layout 12 cột.Thêm một số thành phần (component) mới Và thay đổi một vài thành phần sẵn có.Nhưng vẫn chưa hỗ trợ trên màn hình mobile

● Bootstrap 3.0: được phát hành vào ngày 19/08/2013 Ở trên phiên bản này

các thành phần được thiết kế lại theo phong cách thiết kế phẳng (flat design) Và lầnđầu tiên, ở trên phiên bản 3.0 này Bootstrap đã hỗ trợ trên các thiết bị mobile

● Bootstrap 4.0: được phát hành vào ngày 19/01/2018 Đối với phiên bản 4.0

này gần như được viết lại hoàn toàn từ phiên bản 3.0 Nhưng lại được đánh giá dễ sử

dụng hơn rất nhiều so với phiên bản 3.0 trước Đây cũng là phiên bản được sử dụngnhiều nhất hiện nay.

2.1.6 Trình bày về MYSQL

2.1.6.1 Tìm hiểu về SQL và một số vấn đề liên quan.

SQL (Struct Querry Language): là ngôn ngữ truy vấn mang tính cấu trúc Nó

được thiết kế để quản lý dữ liệu trong một hệ thống quản lý cơ sở dữ liệu quan hệ(RDBMS) SQL là ngôn ngữ cơ sở dữ liệu, được sử dụng để tạo, xóa trong cơ sở dữliệu, lấy các hàng và sửa đổi các hàng

SQL được sử dụng để điều khiển tất cả các chức năng mà một hệ quản trị cơ sở

dữ liệu cung cấp cho người dùng bao gồm:

- Định nghĩa dữ liệu: SQL cung cấp khả năng định nghĩa các cơ sở dữ liệu, các

cấu trúc lưu trữ và tổ chức dữ liệu cũng như mối quan hệ giữa các thành phần

dữ liệu

- Đảm bảo toàn vẹn dữ liệu: SQL định nghĩa các ràng buộc toàn vẹn trong cơ sở

dữ liệu nhờ đó đảm bảo tính hợp lệ và chính xác của dữ liệu trước các thao táccập nhật cũng như các lỗi của hệ thống

- Điều khiển truy cập: SQL có thể được sử dụng để cấp phát và kiểm soát các

thao tác củangười sử dụng trên dữ liệu, đảm bảo sự an toàn cho cơ sở dữ liệu

- Truy xuất và thao tác dữ liệu: Với SQL, người dùng có thể dễ dàng thực hiện

các thao tác truy xuất, bổ sung, cập nhật và loại bỏ dữ liệu trong các cơ sở dữliệu

- Các lệnh trong SQL: Căn cứ vảo bản chất của các lệnh để phân chia ra làm

các loại

- Ngôn ngữ định nghĩa dữ liệu (Data Definition Language - DLL): gồm có cáclệnh:

+ Create: Lệnh tạo mới một đối tượng trong Database

+ Alter: Lệnh sửa đổi một đối tượng trong Database

+ Drop: Lệnh xóa một đối tượng trong Database

Ngôn ngữ điều khiển dữ liệu (Data Control Language – DCL): gồm có các lệnh:

+ Grant: Lệnh trao quyền cho người dùng

+ Revoke: Lệnh thu hồi quyền đã trao cho người dùng

Ngôn ngữ thao tác dữ liệu (Data Manipulation Language - DML) gồm có các lệnh:

+ Insert : Tạo một bản ghi.

+ Update: Sửa dổi bản ghi

+ Delete: Xóa bản ghi

+ Truncate: Xóa toàn bộ dữ liệu trong bảng

Ngôn ngữ điều khiển giao dịch (Transaction Control Language - TCL)

+ Commit: Ủy thác giao dịch

+ Rollback: Lùi ngược lại giao dịch

+ Save Transaction: Đánh dâu một điểm trong giao dịch

Ngôn ngữ lập trình: Gồm các lệnh:

+ Declare: Khái báo biến

+ Execute: Thực thi câu lệnh

+ Open: Mở một con trỏ để truy vấn kết quả truy vấn

+ Close: Đóng một con trỏ

+ Fetch: Đọc một dòng trong kết quả truy vấn

2.1.6.2 MySQL và một số vấn đề liên quan.

MySQL là một Hệ thống quản lý cơ sở dữ liệu quan hệ (RDBMS) nhanh và dễ

dàng để sử dụng MySQL đang được sử dụng cho nhiều công việc kinh doanh từ lớntới nhỏ MySQL được phát triển, được công bố, được hỗ trợ bởi MySQL AB, là mộtcông ty của Thụy Điển MySQL trở thành khá phổ biến vì nhiều lý do:

- MySQL là mã nguồn mở Vì thế, để sử dụng nó, bạn chẳng phải mất một xunào

- MySQL là một chương trình rất mạnh mẽ

- MySQL sử dụng một Form chuẩn của ngôn ngữ dữ liệu nổi tiếng là SQL

- MySQL làm việc trên nhiều Hệ điều hành và với nhiều ngôn ngữ như PHP,PERL, C, C++, Java, …

- MySQL làm việc nhanh và khỏe ngay cả với các tập dữ liệu lớn

- MySQL rất thân thiện với PHP, một ngôn ngữ rất đáng giá để tìm hiểu để pháttriển Web

- MySQL hỗ trợ các cơ sở dữ liệu lớn, lên tới 50 triệu hàng hoặc nhiều hơn nữatrong một bảng Kích cỡ file mặc định được giới hạn cho một bảng là 4 GB,nhưng bạn có thể tăng kích cỡ này (nếu hệ điều hành của bạn có thể xử lý nó)

để đạt tới giới hạn lý thuyết là 8 TB

- MySQL là có thể điều chỉnh Giấy phép GPL mã nguồn mở cho phép lập trìnhviên sửa đổi phần mềm MySQL để phù hợp với môi trường cụ thể của họ

2.2 CÔNG C S D NG ỤC LỤC Ử DỤNG ỤC LỤC

2.2.1 Tìm hi u ph m m m h tr phân tích thi t k Rational Rose ểu về Framework Bootstrap ầm mềm hỗ trợ phân tích thiết kế Rational Rose ền tảng ỗ trợ phân tích thiết kế Rational Rose ợng UML ến thức nền tảng ến thức nền tảng.

Rational Rose là phần mềm công cụ mạnh hỗ trợ phân tích, thiết kế hệ thống phần

mềm theo đối tượng Nó giúp ta mô hình hóa hệ thống trước khi viết mã chương trình

Có ba phiên bản khác nhau của Rose :

- Rose Modeler: Cho phép bạn tạo mô hình cho hệ thống, nhưng không hỗ trợ

tiến trình phát sinh mã hoặc thiết kế kỹ thuật đảo ngược

- Rose Professional: Cho phép bạn phát sinh mã trong một ngôn ngữ

- Rose Enterprise: Cho phép bạn phát sinh mã cho C++, Java, Ada, Corba,

Visual Basic, Oracle … Một mô hình có thể có các thành phần được phát sinhbằng các ngôn ngữ khác nhau

Một số ưu điểm của Rose

- Cung cấp UML, COM, OMT, Booch 93

- Kiểm tra ngữ nghĩa

- Hỗ trợ phát sinh mã cho một số ngôn ngữ

- Mô hình hướng đối tượng

Một số nhược điểm của Rose

- Phải căn chỉnh nhiều để mô hình được đẹp

- Trong bản miễn phí không hỗ trợ sinh mã

- Dung lượng lớn

2.2.2 Ph n m m h tr code Sublime Text ầm mềm hỗ trợ phân tích thiết kế Rational Rose ền tảng ỗ trợ phân tích thiết kế Rational Rose ợng UML.

Sublime Text là một text editor được viết bằng ngôn ngữ lập trình Python và

có thể được sử dụng trên nhiều nền tảng hệ điều hành khác nhau như Windows, Mac,Linux Sublime Text hỗ trợ nhiều ngôn ngữ lập trình và là một phần mềm có thể được

sử dụng miễn phí tuy nhiên cũng có phiên bản trả phí của Sublime Text

Sublime Text khác với các IDE khác ở đặc điểm nhẹ, linh hoạt trong tùy biến

và cung cấp nhiều tính năng rất tiện lợi khi lập trình

Bạn có thể tùy biến Sublime Text thông qua việc thêm các plugin hoặc tạo cácautomation task bằng việc tùy biến các đoạn snippet

Sublime Text hỗ trợ nhiều tính năng hữu ích khi lập trình như: multiple

selection, goto anything, command pallete

Những plugin phổ biến trong Sublime Text hỗ trợ cho các lập trình viên trongviết code:

2.2.3 Chương trình tạo máy chủ Web XAMPP

XAMPP là chương trình tạo máy chủ Web (Web Server) đượ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ủ độngbậ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

Mọi người thường sử dụng để thực hành và phát triển Web phục vụ cho việchọc tập và giải trí

XAMPP là viết tắt của X + Apache + Mysql + PHP + Perl.

Chữ X là cross (platform) ám chỉ dùng được cho cả 4 hệ điều hành khác nhau : Windows, Linux, Solaris và MAC

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 chính là một phần mềm cho phép bạn giả lập môi trường server hosting cho phép bạn chạy thử demo một website ngay trên chiếc máy vi tính của bạn không cần thiết phải mua hosting hay vps.

Có rất nhiều gói WAMP khác có sẵn, nhưng XAMPP là một trong những góihoàn chỉnh nhất được cung cấp Ngoài Apache, MySQL và PHP, XAMPP còn baogồm các công cụ thực sự hữu ích khác như công cụ quản trị cơ sở dữ liệuphpMyAdmin, máy chủ FTP FileZilla, máy chủ thư Mercury, ngôn ngữ lập trình Perl

và máy chủ JSP Tomcat

Ưu điểm của Xampp:

- Xampp tích hợp nhiều tính năng:

+ Apache+ PHP (tạo môi trường chạy các tập tin script và php)

+ Thay vì phải cài đặt từng phần trên, giờ đây chỉ cần tải XAMPP là đã

có 1 web server hoàn chỉnh

- Mã nguồn mở: Không như Appserv, XAMPP có giao diện quản lý khá tiệnlợi Nhờ đó người dùng có thể chủ động bật tắt hoặc khởi động lại các dịch vụ máychủ bất kỳ lúc nào

CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG THÔNG TIN3.1 Khảo sát hệ thống

3.1.1 Khảo sát hiện trạng thực tế của các hệ thống mua bán trực tuyến

3.1.1.1 Đơn vị khảo sát:

- Trang web khảo sát: motormaianh.com

- Địa chỉ: 74 Phố Chùa Hà – Cầu Giấy – Hà Nội

- Lĩnh vực kinh doanh: Chuyên buôn bán các loại xe motor – xe máy

- Cách thức hoạt động: Bán hàng trực tuyến trên website và địa điểm cố định

3.1.1.2 Nội dung khảo sát

a Khảo sát người quản lý website:

- Đối tượng khảo sát: Người quản lý website

- Mục đích: Nhằm thu thập thông tin, nắm bắt được cách hoạt động của trangweb cũng như các nghiệp vụ chuyên môn

- Phương thức khảo sát: Gọi điện, gửi email và kết hợp phỏng vấn trực tiếp tạicửa hàng

Bảng 3.1: Bảng khảo sát người quản lý

1 Chào admin, em đang thực hiện đồ án về đề

tài xây dựng website bán motor – xe máy

trực tuyến Mong admin có thể bớt chút thời

gian cho em tìm hiểu một vài thông tin được

Chào bạn Bên mình rất sẵnlòng trả lời những câu hỏi củabạn

không ạ?

2 Website của cửa hàng chủ yến bán motor- xe

máy cho một hãng xe cụ thể nào đó Hay là

bán xe của cả nhiều hãng xe khác nhau ?

Hiện tại, website bên cửa hànghiện đang bán rất nhiều mẫu xecủa nhiều hãng xe khác nhaunhư Honda, Suzuki, Yamaha

3 Cách thức hoạt động của website gồm những

gì ạ?

Hiện tại website đang hoạtđộng là một website thươngmại điện tử gồm những hoạtđộng chính như đăng bán cácmẫu xe mà cửa hàng kinhdoanh, các bài viết về thông tinhay các tin tức về các dòng xekhác nhau Ngoài ra websitecòn cho khách hàng có thể đặtmua hàng online,…

4 Cho em hỏi là, Website của cửa hàng có bao

nhiêu người tham gia quản lý trang web ạ?

Hiện tại, website do mình làchủ cửa hàng là quản lý chính

5 Thông tin của người dùng có cần đăng kí tài

khoản không? Bao gồm những thông tin gì?

Hiện tại, webstie của cửa hàng

có mở thêm chức năng đăng kýtài khoản cho khách hàng đểkhách hàng dễ dàng mua xe,cũng như có thể tham gia cácchương trình khuyến mại đặcbiệt dành riêng cho những aiđăng ký tài khoản bên cửahàng Để đăng ký tài khoản,khách hàng cần điền các thôngtin vào trong form đăng ký trênwebsite bao gồm các thông tin

cơ bản như họ tên, email, sốđiện thoại, địa chỉ, password,tên đăng nhập

hàng, khách hàng chỉ cần ấnchọn vào sản phẩm muốn muachọn nút “Mua hàng” Sau khichọn, sản phẩm sẽ chuyển vàogiỏ hàng Khách hàng vào giỏhàng để kiểm tra lại đơn hàng.rồi chọn hình thức thanh toáncũng như xác thực đơn hàng.

7 Thanh toán bằng hình thức ra sao ạ? Hiện tại, bên cửa hàng áp dụng

hai hình thức thanh toán chính:

1 Thanh toán trực tiếp khinhận hàng

2 Thanh toán bằng chuyểnkhoản qua số tài khoảncủa cửa hàng

8 Bên cửa hàng có thể cung cấp cho em một

vài thông tin khách hàng đã đặt mua hàng

qua website, để em có thể khảo sát ý kiến

của khách hàng khi đặt mua hàng qua

website ?

Bên mình, sẽ cũng cấp một sốthông tin khách hàng để bạn cóthể khảo sát về ý kiến củakhách hàng

b Khảo sát người mua hàng thông qua website:

- Đối tượng khảo sát: khách hàng đã đặt hàng – mua hàng trên website.

- Mục đích: Nhằm thu thập ý kiến, các đánh giá của khách hàng khi đặt muahàng trên website, để nắm bắt được ý kiến khách hàng về các chức năng của website

đã đáp ứng được nhu cầu của khách hàng chưa và cần phải nâng cấp hay cải thiện tínhnăng nào để khách hàng có thể mua hàng thuận lợi dễ dàng nhất

- Phương thức khảo sát: gửi email, gọi điện thông qua một vài thông tin kháchhàng do bên cửa hàng cung cấp

Bảng 2.2: Bảng khảo sát khách hàng

1 Chào anh (chị), em đang thực hiện đồ án về

đề tài xây dựng website bán motor – xe máy

Chào bạn Mình có đặt mua mộtchiếc xe ga Lead của Honda qua

trực tuyến Em được biết anh (chị) vừa đặt

mua xe máy tại website motormaianh.com ?

website motormaianh.com vàongày 12/6/2019

2 Trong quá trình xem sản phẩm, đặt hàng

trên website anh (chị) có gặp khó khăn gì

không ạ ?

Khi mình xem sản phẩm thìmình cảm thấy khá ổn thông tin

và hình ảnh sản phẩm khá rõràng, cụ thể Khi đặt hàng thìmình khá thuận lời khi đặt mua

xe qua website

3 Trong quá trình anh chị sử dụng website để

mua hàng, chức năng nào anh (chị) cảm

thấy là ưng ý nhất ?

Mình cảm thấy chức năng thanhtoán là chức năng mình ưng ýnhất, mình có thể chuyển khoảntrực tiếp mà không cần phải sửdụng quá nhiều tiền mặt

4 Vậy còn chức năng nào anh (chị) cảm thấy

chưa được tốt, cần phải nâng cấp và cải

thiện ?

Với góc độ, là người sử dụngwebsite mình thấy website cầnnâng cấp lại giao diện cho đẹphơn, để thu hút được ngườixem

5 Anh (chị) cảm thấy thủ tục mua hàng trên

website như thế nào ?

Thủ tục mua hàng trên websitekhá tốt

7 Anh (chị) sử dụng hình thức nào trên

website để thanh toán ?

Mình sử dụng hình thức chuyểnkhoản qua số tài khoản ngânhàng của cửa hàng để thanhtoán

8 Anh (chị) có thể cho em xin một vài ý kiến,

nhận xét nhỏ về các tính năng hỗ trợ khách

hàng trên website không ạ ?

Mình nghĩ website nên tích hợpthêm mục chát qua messagefacebook để thuận lợi cho kháchhàng có thể nhắn tin trao đổitrực tiếp cho cửa hàng Vì hiệntại số lượng người dùngfacebook rất lớn

3.1.1.3 Hiện trạng khảo sát

Sau khi khảo sát người quản lý website và khách hàng xử dụng website để đặt muasản phẩm Em nhận thấy website cơ bản đã có đầy đủ các chức năng để đáp ứng đượcnhu cầu của người quản trị, cũng như khách hàng khi xử dụng website Nhưng do hệthống website đã khá lỗi thời, nên cần phải nâng cấp để giúp người quản trị dễ dànghơn, khách hàng cảm thấy thoải mãi, thuận tiện hơn khi sử dụng website.

Về hệ thống cũ:

- Ưu điểm:

+ Có đủ chức năng cần thiết của 1 trang mua hàng trực tuyến

+ Có đủ các thông tin về sản phẩm giúp người dùng có thể dễ dàng lựachọn

3.1.2 L p m c tiêu cho h th ng ập mục tiêu cho hệ thống ục tiêu ệm vụ ối tượng UML.

- Nâng cấp hệ thống cũ, thêm nhiều chức năng mới để thuận tiện cho ngườiquản trị dễ dàng quản lý website

- Xây dựng lại giao diện bắt mắt, dễ dàng sử dụng

3.1.3 Lên k ho ch cho d án ến thức nền tảng ạch cho dự án ự án

Về hệ thống mới:

- Thiết kế giao diện bắt mắt, dễ nhìn

- Xây dựng các chức năng mới, dễ sử dụng

- Quản lý người sử dụng: Thêm, sửa, xóa, tìm kiếm thông tin

- Quản lý sản phẩm: Thêm, sửa, xóa, tìm kiếm thông tin

- Quản lý bài viết: Thêm, sửa, xóa, tìm kiếm thông tin

- Quản lý đơn hàng: Sửa trạng thái, xem chi tiết, tìm kiếm thông tin

3.2 Phân tích và thi t k h th ng ến thức nền tảng ến thức nền tảng ệm vụ ối tượng UML.

3.2.1 Bi u đ UseCase ểu về Framework Bootstrap ền tảng.

3.2.1.1 Xác định các tác nhân (Actor) và chức năng (Use case)

Bảng 3.3: Các tác nhân (Actor) và chức năng (Use case)

1

User

Là khách hàng có tài khoản cá nhân trong hệ thống website bán hàng củacửa hàng

- Khách hàng có thểtìm kiếm, xem, đặtmua, đánh giá sảnphẩm

- Khách hàng có thểthay đổi mật khẩu

- Khách hàng có thểbình luận về sảnphẩm

GuestUser

Là khách hàng chưa có tài khoản cá nhân trong hệ thống website bán hàng của cửa hàng

- Khách hàng có thểtìm kiếm, xem, sảnphẩm

chức năng cho người sử dụng

- Cập nhật các hoạtđộng, chức năng thêm,sửa, xóa, tìm kiếm

- Thay đổi mật khẩu,thông tin cá nhân

- Quản lý bình luậncủa khách hàng, trả lờicác bình luận củakhách hàng

3.2.1.2 Biểu đồ UseCase

a Biểu đồ UseCase tổng quát:

Hình 3.1: Sơ đồ UseCase tổng quát.

Chú thích:

- Admin: Người quản lý website.

- User: Khách hàng có tài khoản trên hệ thống website.

- GuestUser: Khách hàng không có tài khoản trên hệ thống website.

- Views: Xem thông tin (như sản phẩm, tin tức,…).

- Search: Tìm kiếm.

- Booking: Đặt hàng.

- Manages: Quản lý (quản lý sản phẩm, quản lý tài khoản khách hàng,…).

- Reply Comment: Trả lời bình luận của khách hàng.

- Statistics: Thống kê (sản phẩm,…)

- Authenticate: Xác thực.

b Biểu đồ UseCase chi tiết:

- Biểu đồ chi tiết UseCase “Manages” (Quản lý)

Hình 3.2: UseCase Manages

Chú thích:

- Admin: Người quản lý website.

- Manages: Quản lý.

- Manage User: Quản lý tài khoản người sử dụng.

- Manage Product: Quản lý sản phẩm.

- Manage Booking: Quản lý đơn đặt hàng.

- Manage Posts: Quản lý bài viết.

- Manage Comment: Quản lý bình luận.

- Manage Contact: Quản lý liên hệ.

- Biểu đồ chi tiết UseCase “Manage Users” (Quản lý người dùng)

Hình 3.3: UseCase Manage Users

Chú thích:

- Admin: Người quản lý website.

- Manages: Quản lý.

- Manages Users: Quản lý tài khoản người dùng.

- Add User: Thêm tài khoản người dùng.

- Edit User: Sửa thông tin tài khoản người dùng.

- Delete User: Xóa tài khoản người dùng.

- Search User: Tìm kiếm tài khoản người dùng.

Bảng 3.4: Đặc tả UC Add User (thêm tài khoản người dùng):

dụng

Admin chọn chức năng “Thêm mới”

Hệ thống hiện thị form thêm người sử dụngAdmin nhập thông tin người sử dụng sau đó chọn chức năng lưu

Hệ thống kiểm tra thông tin, nếu đúng thì lưu thông tin vào trong CSDL và thông báo kết quả thêm thànhcông, ngược lại, yêu cầu nhập lại thông tin

Nhập sai định dạngNhập thiếu thông tin

Bảng 3.5: Đặc tả UC Edit User (Sửa người dùng)

đã có trong hệ thống

Admin chọn chức năng “Sửa”

Hệ thống hiển thị form sửa thông tin người dùngAdmin chọn và nhập thông tin cần thay đổi sau đó chọn chức năng lưu

Hệ thống lưu vào CDSL, thông báo sửa thành công

Nhập sai định dạngNhập thiếu thông tin

Admin chọn chức năng “Xóa”

Hệ thống thực hiện xóa, lưu CSDL và thông báo xóathành công

Bảng 3.7: Đặc tả UC Search User (Tìm kiếm người dùng)

Hình 3.4: UseCase Manage Products

Chú thích:

- Admin: Người quản lý website.

- Manages: Quản lý.

- Manage Product: Quản lý sản phẩm.

- Add Product: Thêm sản phẩm.

- Edit Product: Sửa thông tin sản phẩm.

- Delete Product: Xóa sản phẩm.

- Search Product: Tìm kiếm sản phẩm.

Bảng 3.8: Đặc tả UC Add Product (Thêm sản phẩm)

Admin chọn chức năng “Thêm”

Hệ thống hiển thị form thêm sản phẩmAdmin nhập thông tin sản phẩm mới

Hệ thống kiểm tra thông tin, nếu đúng thì lưu vào CDSL và thông báo thêm thành công, sai thì yêu cầunhập lại thông tin

Nhập sai định dạngNhập thiếu thông tin

Bảng 3.9: Đặc tả UC Edit Product (Sửa sản phẩm)

1 Tác nhân Admin

trong hệ thống

Admin chọn chức năng “Sửa”

Hệ thống hiển thị form sửa thông tin sản phẩmAdmin nhập thông tin cần thay đổi sau đó chọn chứcnăng lưu

Hệ thống lưu vào CDSL, thông báo sửa thành công

Nhập sai định dạngNhập thiếu thông tin

Bảng 3.10: Đặc tả UC Delete Product (Xóa sản phẩm)

Admin chọn chức năng “Xóa”

Hệ thống thực hiện xóa, lưu CSDL và thông báo xóathành công

Bảng 3.11: Đặc tả UC Search Product (Tìm kiếm sản phẩm)

Hình 3.5: UseCase Manage Booking

Chú thích:

- Admin: Người quản lý website.

- Manages: Quản lý.

- Manage Booking: Quản lý đơn hàng.

- View Booking: Xem đơn hàng.

- Search Booking: Tìm kiếm đơn hàng.

Bảng 3.12: Đặc tả UC View Booking (Xem đơn hàng)

Hệ thống hiển thị trang chi tiết đơn hàng đó

Bảng 3.13: Đặc tả UC Search Booking (Tìm kiếm đơn hàng)

Hệ thống hiển thị danh sách đơn hàng cần tìm

- Biều đồ chi tiết UseCase “Manage Post” (Quản lý bài viết):