Báo cáo thực tập tốt nghiệp xây dựng website kinh doanh cửa hàng thú cưng trực tuyến

Trang 1 ĐẠI HỌC ĐÀ NẴNGTRƯỜNG ĐẠI HỌC SƯ PHẠMKHOA TIN HỌC------BÁO CÁO THỰC TẬP TỐT NGHIỆPĐỀ TÀI : XÂY DỰNG WEBSITE KINH DOANH CỬAHÀNG THÚ CƯNG TRỰC TUYẾNGiảng viên hướng dẫn: Th.S HỒ

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

KHOA TIN HỌC

- -BÁO CÁO THỰC TẬP TỐT NGHIỆP

ĐỀ TÀI : XÂY DỰNG WEBSITE KINH DOANH CỬA

HÀNG THÚ CƯNG TRỰC TUYẾN

Giảng viên hướng dẫn: Th.S HỒ NGỌC TÚ

Sinh viên: VĂN NHẬT THẢO

Lời Cảm Ơn

Qua thời gian thực tập 12 tuần theo kế hoạch của trường Đại Học Sư Phạm ĐàNẵng (từ ngày 07/02/2022 – 30/04/2022) tại Công ty SHAPEECLOUD JSC em đãđược học hỏi và nâng cao thêm các kỹ năng cần thiết, áp dụng những kiến thức cơ bảnvào công việc nhân viên lập trình Tuy thời gian thực tập và cọ sát với công việc khôngdài nhưng em tin chắc những gì đã học được từ môi trường thực tế này sẽ là bước đầu

để em có những định hướng phù hợp hơn với nghề nghiệp trong tương lai

Để hoàn thành bài “Thực tập tốt nghiệp” em xin gửi lời cảm ơn chân thành đếnquý thầy cô khoa Tin Học, trường Đại Học Sư Phạm Đà Nẵng Đặc biệt, là ThS HồNgọc Tú, cảm ơn thầy vì tất cả những nhiệt tình, sự hết mình trong việc hỗ trợ các kiếnthức liên quan, những kinh nghiệm thực tế của bản thân để giúp em và các sinh viênkhác hoàn thành đúng mục tiêu thực tập

Em cũng gửi lời cảm ơn đến các anh/chị tại công ty đặc biệt là anh và anh NinhVăn Ngọc Cảm ơn anh trong quá trình thực tập đã hướng dẫn tận tình để em làm quencông việc mới và hòa nhập nhanh chóng môi trường văn hóa của công ty

Mặc dù, bản thân em đã cố gắng nhiều để hoàn thành “Thực tập tốt nghiệp” nàynhưng chắc chắn sẽ không tránh khỏi những thiếu soát ngoài ý muốn Vì vậy, em rấtmong nhận được những kiến đóng góp từ phía thầy cô, anh/chị thuộc công ty để em cóthể tự rút kinh nghiệm và có cơ sở chuẩn bị tốt nhất để phát triển lên trong thời giansắp tới Sinh viên thực hiện Văn Nhật Thảo

Đà Nẵng, ngày 22 tháng 04 năm 2022

Sinh viên thực hiện

Văn Nhật Thảo

LỜI CAM ĐOAN

Chúng em xin cam đoan:

1 Những nội dung trong báo cáo này là do em thực hiện dưới sự hướng dẫn trực tiếpcủa Th.S Hồ Ngọc Tú và các anh chị trong Công ty SHAPEECLOUD JSC chinhánh Đà Nẵng

2 Mọi tham khảo dùng trong báo cáo này đều được trích dẫn rõ ràng tên tác giả, têncô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á, chúng em xinchịu hoàn toàn trách nhiệm

Sinh viên thực hiện

Văn Nhật Thảo

NHẬN XÉT CỦA CÁN BỘ HƯỚNG DẪN

Đà Nẵng, ngày tháng năm 2022 Cán bộ hướng dẫn NHẬN XÉT CỦA HỘI ĐỒNG PHẢN BIỆN

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

Hội đồng phản biện

DANH SÁCH CÁC KÝ TỰ, CÁC CHỮ VIẾT TẮT

Từ viết tắt Giải thích

PHP Hypertext Preprocessor

DANH SÁCH CÁC BẢNG:

Bảng 1 Bảng KhachHang (Customer) 53

Bảng 2 Bảng Nguoidung (User) 53

Bảng 3 Bảng SanPham (Product) 53

Bảng 4 Bảng ThuocTinhSanPham(Product_attribute) 53

Bảng 5 Bảng DanhMuc (Product_category) 54

Bảng 6 Bảng DonHang (Order) 54

Bảng 7 Bảng ChiTietDonHang (Order_detail) 54

Bảng 8 Bảng NhaCungCap (Supplier) 54

Bảng 9 Bảng NhanHang (Brand) 55

Bảng 10.Bảng LichSuDonHang (Order_history) 55

Bảng 11.Bảng DiaChiKhachHang (customer_address) 55

Bảng 12 Bảng CapQuyen (Permission) 55

Bảng 13 Bảng VaiTro (Role) 56

Bảng 14 Bảng GiamGia (Discount) 56

DANH SÁCH HÌNH N Ả

Hình 1: Mô hình MVC 26

Hình 2: Luồng xử lý trong MVC 27

Hình 3: Biểu đồ Use Case – biểu đồ ca sử dụng 50

Hình 4: Biểu đồ hoạt động chức năng đăng ký 51

Hình 5: Biểu đồ hoạt động chức năng đăng nhập 51

Hình 6: Biểu đồ hoạt động chức năng đặt hàng 52

Hình 7: Biểu đồ hoạt động chức năng quản lý thông tin cá nhân 52

Hình 8: Biểu đồ hoạt động chức năng quản lý đơn hàng 53

Hình 9: Biểu đồ hoạt động chức năng quản lý sản phẩm 53

Hình 10: Biểu đồ hoạt động chức năng quản lý người dùng 54

Hình 11: Biểu đồ hoạt động chức năng quản lý thông tin khách hàng 54

Hình 12: Biểu đồ hoạt động chức năng quản lý thông tin cửa hàng 55

Hình 13: Biểu đồ hoạt động chức năng quản lý đánh giá sản phẩm 55

Hình 14: Biểu đồ hoạt động chức năng quản lý chương trình giảm giá 55

Hình 15: Biểu đồ tuần tự mô tả ca sử dụng “Đăng ký” 56

Hình 16: Biểu đồ tuần tự mô tả ca sử dụng “Đăng nhập” 56

Hình 17: Biểu đồ tuần tự mô tả ca sử dụng “Quản lý thông tin cá nhân” 57

Hình 18: Biểu đồ tuần tự mô tả ca sử dụng “Đặt hàng” 57

Hình 19: Biểu đồ tuần tự mô tả ca sử dụng “Quản lý đơn hàng” 58

Hình 20: Biểu đồ tuần tự mô tả ca sử dụng “Quản lý người dùng” 58

Hình 21: Biểu đồ tuần tự mô tả ca sử dụng “Quản lý khách hàng” 59

Hình 22: Biểu đồ tuần tự mô tả ca sử dụng “Quản lý sản phẩm” 59

Hình 23: Biểu đồ tuần tự mô tả ca sử dụng “Quản lý đánh giá sản phẩm” 60

Hình 24: Biểu đồ tuần tự mô tả ca sử dụng “Quản lý thông tin cửa hàng” 60

Hình 25: Biểu đồ tuần tự mô tả ca sử dụng “Quản lý chương trình giảm giá” 61

Hình 26: Biểu đồ Quan hệ 67

Hình 27: Màn hình trang chủ 69

Hình 28: Màn hình trang cửa hàng 70

Hình 29: Màn hình trang tin tức 71

Hình 30: Màn hình trang liên hệ 72

Hình 31: Màn hình trang dăng nhập 72

Hình 32: Màn hình trang dăng ký 73

Hình 33: Màn hình trang chi tiết sản phẩm và đánh giá 74

Hình 34: Màn hình trang giỏ hàng 75

Hình 35: Màn hình trang ghi thông tin nhận hàng 75

Hình 36: Màn hình trang thông tin khách hàng 76

Hình 37: Màn hình trang Đăng nhập dành cho người dùng hệ thống quản lý 76

Hình 38: Màn hình thông kê 77

Hình 39: Màn hình quản lý đơn hàng 78

Hình 40: Màn hình quản lý sản phẩm 79

Hình 41: Màn hình quản lý đánh giá sản phẩm 79

Hình 42: Màn hình quản lý khách hàng 80

Hình 43: Màn hình quản lý báo cáo sản phẩm 80

Hình 44: Màn hình quản lý mã giảm giá, flash sale 81

Hình 45: Màn hình quản lý người dùng 81

Hình 46: Danh sách vai trò 82

Hình 47: Phiếu mẫu in hóa đơn 82

Hình 48: Quản lý chi tiết hóa đơn 83

Hình 49: Thêm sản phẩm mới 84

MỤC LỤC

DANH SÁCH CÁC KÝ TỰ, CÁC CHỮ VIẾT TẮT 5

DANH SÁCH CÁC BẢNG: 6

DANH SÁCH HÌNH ẢNH 7

MỤC LỤC 9

MỞ ĐẦU 12

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

2 Mục tiêu và nhiệm vụ đề tài 13

2.1 Mục tiêu 13

2.2 Nhiệm vụ 13

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

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

3.2 Phạm vi nghiên cứu 14

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

4.1 Phương pháp nghiên cứu lý thuyết 14

4.2 Phương pháp nghiên cứu thực tiễn 14

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

1.1 Ngôn ngữ PHP: 15

1.1.1 Giới thiệu: 15

1.1.2 Ưu và nhược điểm: 16

1.2 Mô hình MVC: 17

1.2.1 Giới thiệu: 17

1.2.2 Luồng xử lý trong MVC 19

1.2.3 Ưu điểm nhược điểm của MVC 20

1.3 HTML: 20

1.3.1 Giới thiệu: 20

1.3.2 Lịch sử của HTML 21

1.3.3 HTML hoạt động như thế nào? 21

1.3.4 Các thuật ngữ HTML phổ biến 22

1.3.5 Ưu điểm nhược điểm HTML: 23

1.4 CSS: 23

1.4.1 Giới thiệu: 23

1.4.2 CSS hoạt động như thế nào? 24

1.4.3 `Khai báo CSS 25

1.5 JavaScript: 26

1.5.1 Giới thiệu: 26

1.5.2 Ưu điểm và nhược điểm Javascript: 27

1.6 Boostrap framework: 28

1.6.1 Giới thiệu 28

1.6.2 Ưu điểm và nhược điểm: 28

1.7 Laravel framework: 30

1.7.1 Giới thiệu: 30

1.7.2 Những tính năng nổi bật của Laravel 30

1.7.3 Tại sao nên sử dụng Laravel? 31

1.8 Hệ quản trị CSDL: 32

1.8.1 MySQL: 32

1.8.2 Xampp: 33

CHƯƠNG 2: KHẢO SÁT VÀ MÔ TẢ HỆ THỐNG 34

2.1 Khảo sát thực tế bài toán: 34

2.1.1 Khảo sát một số Website kinh doanh cửa hàng thú cưng hiện nay 34

2.1.2 Khảo sát bằng phương pháp quan sát và phỏng vấn 34

2.1.3 Khảo sát bằng Phiếu khảo sát, điều tra: 34

2.1.4 Đánh giá khảo sát 40

2.2 Mô tả hệ thống 41

2.2.1 Mục tiêu của hệ thống 41

2.2.2 Lợi ích của việc xây dựng hệ thống 41

2.2.3 Mô tả ý tưởng của Website: 41

2.3 Phát biểu bài toán: 42

CHƯƠNG 3: PHÂN TÍCH, THIẾT KỂ HỆ THỐNG 43

3.1 Phân tích hệ thống: 43

3.1.1 Liệt kê các tác nhân và use case: 43

3.1.2 Đặt tả các use case: 44

3.1.3 Xây dựng biểu đồ Use case: 48

3.1.4 Biển đồ hoạt động: 49

3.2 Thiết kế hệ thống: 54

3.2.1 Biểu đồ tuần tự: 54

3.3 Thiết kế CSDL: 60

3.3.1 Xác định các tập thực thể (bảng) thuộc tính chính: 60

3.3.2 Mô hình Quan hệ: 65

CHƯƠNG 4: TRIỂN KHAI VÀ KẾT QUẢ 66

4.1 Môi trường triển khai: 66

4.2 Kết quả 67

4.2.1 Màn hình dành cho khách hàng 67

4.2.2 Màn hình dành cho người dùng 74

CHƯƠNG 5: KIỂM THỬ HỆ THỐNG 83

5.1 Sở lược về kiểm thử 83

5.1.1 Định nghĩa 83

5.1.2 Mục tiêu của kiểm thử 83

5.1.3 Tầm quan trọng của kiểm thử 83

5.1.4 Nguyên tắc kiểm thử 84

5.2 Phân loại kiểm thử 85

5.2.1 Dựa vào mục đích kiểm thử 85

5.2.2 Dựa vào chiến lược kiểm thử 85

5.2.3 Dựa vào phương pháp tiến hành kiểm thử 86

5.2.3 Dựa vào kỹ thuật kiểm thử 86

KẾT LUẬN 88

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

2 Ưu – nhược điểm của đề tài 88

3 Hướng phát triển của đề tài 89

TÀI LIỆU THAM KHẢO 90

MỞ ĐẦU

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

Ngày nay, với sự phát triển mạnh mẽ của khoa học công nghệ, công nghệ thông tin

là một trong những ngành có vị thế dẫn đầu và có vai trò rất lớn trong sự phát triển chung đó Các ứng dụng của công nghệ thông tin được áp dụng trong mọi lĩnh vực nghiên cứu khoa học cũng như trong mọi lĩnh vực của đời sống Là một phần của ngành công nghệ thông tin, công nghệ web đang có được sự phát triển mạnh mẽ và phổ biến rất nhanh bởi những lợi ích mà nó mang lại cho cộng đồng là rất lớn

Khi đời sống vật chất tinh thần của con người ngày càng cao thì gắn liền với nó là những nhu cầu giải trí Với truyền thống và thói quen nuôi thú cưng trong nhà có từ xaxưa của tổ tiên, ngày nay người dân Việt Nam tiếp tục phát huy truyền thống và thói quen tốt đẹp ấy, biến nó thành một thú tiêu khiển cực kỳ tao nhã và bổ ích Thú cưng còn thể hiện đẳng cấp, tính cách, phong cách sống của người chủ sở hữu Vì vậy những người chủ rất quan tâm đến việc chăm sóc cho những chú thú cưng của mình

Họ không ngần ngại chi trả những số tiền không nhỏ để chăm sóc chúng từ đồ ăn, thứcuống, quần áo, trang sức, mỹ phẩm, Cũng chính sự hấp dẫn và nhu cầu khách hàng cần ngày càng lớn trên thị trường nên em quyết định lấy tên đề tài “ Xây dựng website kinh doanh cửa hàng thú cưng trực tuyến ”

Website giúp cung cấp cho khách hàng những lựa chọn linh hoạt và tiện lợi trong việc tìm kiếm sản phẩm phụ kiện, dịch vụ tốt nhất cho thú cưng của mình thông qua chức năng tìm kiếm và giỏ hàng Các thông tin về sản phẩm được hiển thị chi tiết với từng sản phẩm cũng như các dịch vụ chăm sóc từ đó khách hàng dễ dàng nhận biết và lựa chọn được thứ mình cần Hệ thống mang lại sự tiện dụng trong việc cập nhập và quản lý các thông tin cho website, tạo khả năng liên lạc nhanh và dễ dàng

2 Mục tiêu và nhiệm vụ đề tài

2.1 Mục tiêu

Xây dựng website kinh doanh cửa hàng thú cưng trực tuyến cung cấp một giải pháp tìm kiếm nơi mua bán phụ kiện và dịch vụ cho thú cưng một cách tổng thể, linh hoạt, theo hướng đơn giản với đầy đủ chức năng giúp người dùng phương pháp tìm kiếm nơi mua bán phụ kiện và dịch vụ cho thú cưng uy tín.

2.2 Nhiệm vụ

Từ những mục đích nêu trên ta thấy ứng dụng của ta cần đạt được những yêu cầu sau :

- Giao diện hài hoà, thân thiện, giúp người dùng dễ dàng sử dụng.

- Trang chủ sẽ hiển thị danh sách sản phẩm dịch vụ tiêu biểu mới nhất giúp cho người dùng có thể dễ dàng hơn trong việc tìm kiếm.

- Người dùng có thể dễ dàng tìm thấy thông tin chi tiết các sản phẩm mà họ quan tâm.

- Tạo các bài viết về thú cưng

- Giúp người quản lý dễ dàng xem sửa thêm xóa sản phẩm, dịch vụ của cửa hàng.

- Giúp người quản lý thống kê, báo cáo doanh thu của cửa hàng.

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

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

- Website của hàng thú cưng theo nhu cầu của người dùng

Chrome

3.2 Phạm vi nghiên cứu

Sử dụng ứng dụng trên trình duyệt web để có thể tìm kiếm cửa hàng và lựa chọn

sản phẩm phụ kiện hay dịch vụ của cửa hàng.

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

4.1 Phương pháp nghiên cứu lý thuyết

- Nghiên cứu tài liệu tham khảo có liên quan đến đề tài.

- Khảo sát thực tế và điều tra.

4.2 Phương pháp nghiên cứu thực tiễn

Nghiên cứu và sử dụng ngôn ngữ lập trình PHP kết hợp cùng với hệ quản trị cơ

sở dữ liệu MySql , API, URLSession.

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

Trong chương này, nội dung chính sẽ được trình bày cơ sở lý thuyết về ngôn ngữ lập trình, công nghệ sử dụng để xây dựng và cài đặt cho mã nguồn

1.1 Ngôn ngữ PHP:

1.1.1 Giới thiệu:

PHP là cách viết tắt hồi quy của cụm từ tiếng Anh Hypertext Preprocessor, là ngôn ngữlập trình kích bản mã nguồn mở (hay ngôn ngữ lập trình đa mục đích) được được phát triển từ năm 1994 Nó được dùng để phát triển các ứng dụng cho máy chủ Ngôn ngữ này chạy ở phía server, nhằm sinh mã html trên client Cũng chính bởi thế, PHP đã tạo

ra các ứng dụng web Mã lệnh của nó được nhúng vào html nhờ sử dụng cặp thẻ PHP

<?php?>

Ngôn ngữ lập trình PHP hiện đã trải qua rất nhiều phiên bản khác nhau Do được tối

ưu hóa cho website nên cách viết mã tương đối rõ ràng Tốc độ của mã PHP, dễ hiểu

dễ học Bởi vậy mà PHP trở thành một trong những ngôn ngữ lập trình website phổ biến, được sử dụng nhiều nhất hiện nay bởi các công ty, dịch vụ thiết kế website Một số ứng dụng của PHP như:

- Thiết lập các chương trình cho hệ thống máy chủ:

Ứng dụng chủ yếu của PHP đó chính là việc xây dựng nên các chương trình dành cho các server máy chủ Để có thể viết nên các chương trình chạy được trên máy chủ thì các lập trình viên sẽ phải thực hiện các công việc như: xây dựng máy chủ web, phân tích cú pháp ngôn ngữ lập trình PHP, trình duyệt web Các lập trình viên có thể xây dựng output này bằng các trình duyệt web phổ biến

- Tạo các dòng tập lệnh:

Các ngôn ngữ PHP Dev có thể tạo nên dòng tập lệnh để chạy các chương trình PHP

mà không cần bất cứ một máy chủ nào Lập trình này được sử dụng trên các hệ điều hành như: Các trình lập tác vụ trên Windows, Linux

- Hỗ trợ cho một loại cơ sở dữ liệu khác nhau:

Đây chính là ứng dụng mạnh nhất của PHP Nếu trang web được hỗ trợ cơ sở dữ liệu tốt sẽ giúp ích rất nhiều đến việc vận hành cũng như backup dữ liệu nếu không may xảy ra tình huống tấn công an ninh mạng xảy ra

Hiện nay, ngôn ngữ PHP được sử dụng trên hầu hết các hệ điều hành phổ biến trên thị trường như: Microsoft Windows, Linux, macOS…

1.1.2 Ưu và nhược điểm:

Ưu điểm:

- Đơn giản, linh động:

Từ thiết kế của PHP, cộng với việc PHP là ngôn ngữ Script và cú pháp khá thoải mái nên nó rất linh động Cú pháp PHP cũng rất dễ học nên rất nhiều người biết PHP Chính vì sự dễ dàng đó nên số lượng developer rất đông và hung hãn

PHP có rất nhiều phần xử lý liên quan đến text cực tốt PHP được viết dựa trên Perl, một ngôn ngữ lập trình sinh ra để làm việc với Text PHP cực tốt để giải quyết các bài toán liên quan đến Text, mà HTML hay Web lại là bài toán xử lý text Do vậy thật dễ hiểu tại sao PHP lại là ngôn ngữ phổ biến nhất để xây dựng các Website.

- Có rất nhiều Framework, thư viện:

Cùng với việc sở hữu cộng đồng lớn, PHP cũng sỡ hữu vô số bộ thư viện,

extension, rất nhiều Framework Do vậy PHP có thể giải quyết rất nhiều bài toán khác nhau Hầu như nói đến vấn đề gì cũng có thể có những thư viện liên quan để PHP Do vậy đôi khi người ta còn tưởng PHP là lời giải cho mọi vấn đề

- Model: có nhiệm vụ thao tác với cơ sở dữ liệu, nghĩa là nó sẽ chứa tất cả các hàm, các phương thức truy vấn trực tiếp với dữ liệu và controller sẽ thông qua các hàm, phương thức đó để lấy dữ liệu rồi gửi qua View

- View: có nhiệm vụ tiếp nhận dữ liệu từ controller và hiển thị nội dung sang các đoạn mã HTML, bạn có thể hiểu nôm na đây người ta còn gọi là thành phần giao diện.

- Controller: đóng vài trò trung gian giữa Model và View Nó có nhiệm vụ tiếp nhận yêu cầu từ client sau đó xử lý request, load model tương ứng và gửi data qua view tương ứng rồi trả kết quả về cho client

Hình 1: Mô hình MVC

Nhìn vào mô hình này các bạn thấy giữa model và view không hề có mối liên

hệ mà nó sẽ thông qua controller để giao tiếp với nhau

1.2.2 Luồng xử lý trong MVC

Hình 2: Luồng xử lý trong MVC

- Đầu tiên, client sẽ gửi một request tới server thông qua Controller

- Controller tiếp nhận request, và xử lý luồng đi tiếp theo của yêu cầu Trong trường hợp chỉ chuyển từ trang này sang trang khác mà không yêu cầu gửi và nhận dữ liệu thì lúc này Controller sẽ redirect(chuyển hướng) lại cho browser và kết thúc luồng Lúc này luồng xử lý sẽ đi theo thứ tự 1-> 6 -> 7 -> 8

- Nếu request của người dùng yêu cầu phải xử lý dữ liệu thì Controller gọi

xuống Model để lấy dữ liệu Lúc này Model sẽ tương tác với database để lấy dữ liệu,

dữ liệu được Model gửi về Controller, Controller gọi đến View phù hợp

với request kèm theo dữ liệu cho View, View sẽ lắp dữ liệu tương ứng vào HTML và gửi lại một HTML cho Controller sau khi thực hiện xong nhiệm vụ của mình Cuối cùng Controller sẽ trả kết quả về Browser Lúc này luồng xử lý sẽ đi từ 1 -> 2 -> 3 -> 4-> 5 -> 6 -> 7 -> 8

- Nếu request của người dùng chỉ yêu cầu dữ liệu nhưng không chuyển trang thì thay vì Controller sẽ trả dữ liệu về cho View thì Controller sẽ respone lại cho trình duyệt thông qua API, dữ liệu trả về thường sẽ là dạng JSON Luồng xử lý lúc này sẽ là

Source code được tách bạch rõ ràng nên việc bảo trì code sẽ dễ dàng hơn

Nhược điểm của MVC

Model sẽ phải xử lý rất nhiều nếu dữ liệu lớn và phức tạp

Đối với cái mô hình ứng dụng lớn và có độ phức tạp cao thì có lẽ MVC không còn khả dụng

1.3 HTML:

1.3.1 Giới thiệu:

HTML (viết tắt của từ Hypertext Markup Language, hay là “Ngôn ngữ Đánh dấu Siêu văn bản”) là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web trên World Wide Web

HTML không phải là ngôn ngữ lập trình, nghĩa là nó không thể tạo ra các chức năng “động” được Giống như như phần mềm Microsoft Word, HTML dùng để bố cục

và định dạng trang web

HTML khi kết hợp với CSS và JavaScript sẽ trở thành một nền tảng vững chắc chothế giới mạng Các phần tử HTML được phân định bằng các tags, được viết bằng dấu ngoặc nhọn

1.3.2 Lịch sử của HTML

HTML được tạo ra bởi Tim Berners-Lee là nhà vật lý học của trung tâm nghiên cứu CERN ở Thụy Sĩ Ông đã nghĩ ra và viết siêu văn bản và hypertext trên Internet Hypertext được hiểu là văn bản chứa link, có thể giúp người xem truy cập ngay lập tức

Hiện nay, HTML đã trở thành một chuẩn Internet được vận hành và phát triển bởi

tổ chức W3C (World Wide Web Consortium) Bạn có thể tự tìm kiếm cập nhật mới nhất của HTML tại bất kỳ thời điểm nào trên Website của W3

HTML đầu tiên được công khai là một tài liệu có tên “HTML Tags” được đề cập trên Internet vào cuối năm 1991 Gồm 18 phần tử đơn giản của HTML và các phiên bản sau của HTML đều có thêm tag và attributes mới

Từ năm 1996, các phần tử HTML được duy trì với đầu vào là các nhà cung cấp phần mềm thương mại bởi World Wide Web Consortium

Năm 2000, HTML đã trở thành tiêu chuẩn quốc tế, sau đó đến năm 2004 HTML5 trong Web Hypertext Application Technology Working Group và được hoàn thiện vào năm 2014 Nó có thêm tags vào markup để xác định rõ nội dung là gì ví dụ như

<article>, <header>, <footer>

1.3.3 HTML hoạt động như thế nào?

HTML documents là files được kết thúc html hay htm Với những file này có thể xem bằng cách sử dụng bất kỳ trình duyệt nào (Google Chrome, Firefox, Safari,…) Các trình duyệt đọc những file HTML này và biến đổi chúng thành một dạng visual trên Internet sao cho người dùng có thể xem và hiểu được chúng

Bình thường một trang web có nhiều có web HTML như: trang chủ, giới thiệu, liên

hệ, blog,… Mỗi trang như thế đều cần một trang HTML riêng Trong mỗi trang HTMLchứa một bộ các tag (elements) để xác định từng khối của một trang web và tạo thành một cấu trúc gồm section, paragraph, heading và các khối nội dung khác

Đa phần các HTML elements đều có tag mở và tag đóng <tag></tag> Bạn có thể xem qua một đoạn HTML được cấu trúc như thế nào:

<img src="/" alt="Alternative information">

<p>Paragraph two with a <a

- Đoạn văn thứ 2 chứa tag <a></a> với attribute href chứa URL đích

- Tag hình ảnh chứa 2 attribute: src cho ảnh và alt cho mô tả hình ảnh

- name: Dùng để khai báo tên

- type: Dùng để thiết lập thể loại

- id: Dùng để đặt tên khóa cho thẻ

- value: Dùng để khai báo giá trị cho thẻ

1.3.5 Ưu điểm nhược điểm HTML:

Ưu điểm:

- Cộng đồng với nhiều tài nguyên lớn

- Hoạt động mượt mà trên tất cả các trình duyệt

- Các markup sử dụng trong HTML ngắn gọn và có độ đồng nhất cao

Một số trình duyệt còn chậm cập nhật để hỗ trợ tính năng mới của HTML

1.4 CSS:

1.4.1 Giới thiệu:

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

1.4.2 CSS hoạt động như thế nào?

CSS sử dụng cấu trúc tiếng Anh đơn giản để tạo ra một bộ các quy tắc bạn có thể tận dụng Như đã nói ở trên, HTML không được dùng để tạo phong cách cho các yếu

tố, nó chỉ đánh dấu từng phần để biết được yếu tố đó là gì thôi Ví dụ: <p>Đây là văn bản.</p>

Còn làm thế nào để tạo ra phong cách cho văn bản đó? Syntax của CSS rất đơn giản Nó có phần block chọn và block khai báo

Selector sẽ trỏ về yếu tố HTML bạn cần muốn tạo phong cách Block khai báo sẽ bao gồm một hay nhiều khai báo cách nhau bởi dấu chấm phẩy,

Mỗi khai báo bao gồm một tên CSS và giá trị, cách nhấu bởi dấu 2 chấm Khai báo CSS luôn kết thúc bằng dấu chấm phẩn, và block khai báo được đặt trong dấu ngoặc nhọn

Hãy xem qua ví dụ:

Tất cả các thành phần trong element <p> sẽ dùng màu xanh và in đậm.

<style>

Chúng ta có 3 cách để khai báo CSS trong tài liệu HTML là:

- CSS cục bộ: Viết mã CSS trực tiếp trong thẻ HTML, cụ thể là trong thuộc tính

style, CSS cục bộ chỉ có tác dụng trong thẻ HTML được khai báo

<p style="font-size: 16pt; color: blue">Đoạn văn bạn sẽ bịảnh hưởng khi khai báo CSS cục bộ.</p>

- CSS nội tuyến: CSS nội tuyến là phần mã CSS được khai báo trong cặp thẻ

<style> và đặt trong phần <head> của tài liệu 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áctrong cùng một website

<style>

h1,h2,h3 {font-size: 14px;}

p {color:blue;}

</style>

- CSS ngoại tuyến: Đây là cách khai báo CSS được s d ng nhiềều nhâất trongử ụ

th c tềấ và cách khai bá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 i tài li uệ ỏ ệ HTML, người thiềất kềấ ch câền viềất m t fle CSS duy nhâất màỉ ộ

s d ng nhiềều lâền trong ng d ng c a h ử ụ ứ ụ ủ ọ

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

cả các file html trong ứng dụng Đến đây chúng ta thấy được sự cần thiết và hiệu quả

1. HTML: Giúp bạn thêm nội dung cho trang web

2. CSS: Định dạng thiết kế, bố cục, phong cách, canh lề của trang web.

3 JavaScript: Cải thiện cách hoạt động của trang web

Nhiệm vụ của Javascript là xử lý những đối tượng HTML trên trình duyệt Nó có thể can thiệp với các hành động như thêm / xóa / sửa các thuộc tính CSS và các thẻ HTML một cách dễ dàng Hay nói cách khác, Javascript là một ngôn ngữ lập trình trêntrình duyệt ở phía client Tuy nhiên, hiện nay với sự xuất hiện của NodeJS đã giúp cho Javascript có thể làm việc ở backend

Khi truy cập vào một số website trên internet thì sẽ thấy có những hiệu ứng

slide, menu xổ xuống, các hình ảnh chạy qua chạy lại rất đẹp tất cả các chức năng nàyđều được xử lý bằng Javascript đấy các bạn ạ

Trong những năm gần đây, sự xuất hiện của các framework như NodeJS (chuyên code backend), ExpressJS (NodeJS framework), và nhiều thư viện frontend khác như Angular, jQuery, RactJS ra đời, giúp tạo ra một cơn sốt với từ khóa Javascript

Fullstack

1.5.2 Ưu điểm và nhược điểm Javascript:

Ưu điểm:

Javascript giúp thao tác với người dùng ở phía client và tách biệt giữa các client Ví

dụ 2 người đang truy cập vào 2 trình duyệt khác nhau thì cả hai đều có những phiên xử

lý Javascript không giống nhau, không ảnh hưởng lẫn nhau

Javascript có thể hoạt động trên nhiều nền tảng không giống nhau, từ Windows, macOS cho đến các hệ điều hành trên mobile

Javascript là một ngôn ngữ dễ tiếp xúc, bạn có thể đơn giản học nó mà không cần phải thiết lập quá là nhiều phần mềm

Nhược điểm:

Vì là một ngôn ngữ rất đơn giản bị soi code nên dễ bị khai thác Hacker có thể nhậpmột đoạn code bất kì vào khung console của trình duyệt web, lúc này trình duyệt

web sẽ hiểu rằng đoạn code đấy là chính thống, nên hacker có thể gửi nhửng request lên server một cách dễ dàng.

Có thể bạn đã thấy những tool về trang Facebook trên Internet, hoặc những đoạn code làm thay đổi công dụng và giao diện của Facebook, chúng được viết từ Javascript

1.6 Boostrap framework:

1.6.1 Giới thiệu

Bootstrap là 1 framework HTML, CSS, và JavaScript cho phép người dùng dễ dàngthiết kế website theo 1 chuẩn nhất định, tạo các website thân thiện với các thiết bị cầm tay như mobile, ipad, tablet,

Bootstrap bao gồm những cái cơ bản có sẵn như: typography, forms, buttons, tables, navigation, modals, image carousels và nhiều thứ khác Trong bootstrap có thêm nhiều Component, Javascript hỗ trợ cho việc thiết kế reponsive của bạn dễ dàng, thuận tiện và nhanh chóng hơn

Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter, và phát hành như một sản phẩm nguồn mở vào tháng 8 năm 2011 trên GitHub

Vào tháng 6 năm 2014, Bootstrap là No.1 project trên GitHub

Bản chất Bootstrap bao gồm một tập hợp các cú pháp thực hiện các chức năng cụ thể Để hoạt động tốt, Bootstrap cần có các file chính quản lý giao diện người dùng và chức năng của trang web Đó là 3 file:

- Bootstrap.css: một framework CSS sắp xếp và quản lý bố cục của trang web

Để thực hiện một hành động cụ thể, cần tồn tại cùng lúc hai cấu trúc: HTML quản lý nội dung và cấu trúc website, CSS xử lý bố cục website

- Bootstrap.js: File này là phần cốt lõi của Bootstrap Bootstrap.js gồm các file JavaScript chịu trách nhiệm cho việc tương tác của trang web

- Glyphicons: Liên kết icon với các hành động và dữ liệu nhất định trong giao diện người dùng

1.6.2 Ưu điểm và nhược điểm:

ra một website thân thiện với các thiết bị điện tử, thiết bị cầm tay

- Tương thích với trình duyệt:

Nó tương thích với tất cả các trình duyệt (Chrome, Firefox, Internet Explorer, Safari, and Opera) Tuy nhiên, với IE browser, Bootstrap chỉ hỗ trợ từ IE9 trở lên Điềunày vô cùng dễ hiểu vì IE8 không support HTML5 và CSS3

Nhược điểm:

- Chưa hoàn thiện:

Bootstrap chưa đầy đủ các thư viện cần thiết Các phát triển chưa thể tạo ra một framework riêng hoàn hảo, do đó một số trang web vẫn phải dùng phiên bản dành riêng cho mobile

- Quá nhiều code thừa:

Không thể phủ nhận rằng Bootstrap có rất nhiều ưu điểm khi nó cũng cấp gần như đầy đủ những tính năng cơ bản của một trang web responsive hiện đại Tuy nhiên, mặt trái của việc này là website của bạn sẽ phải tải thêm rất nhiều dòng code không cần thiết khi mà bạn chỉ cần chưa đến 10% những gì Bootstrap cung cấp

- Bootstrap không khuyến khích sáng tạo:

Chỉ cần nhét Bootstrap vào themes sẵn có, gọi ra cái class từ stylesheet và thế là bạn đã có một trang web responsive trông cũng ổn ổn Sự tiện dụng và dễ dàng của

Bootstrap nhiều khi sẽ khuyễn khích tính lười sáng tạo, vốn luôn thường trực trong mỗi chúng ta Kết quả là, chúng ta thướng thoả hiệp những gì mình thực sự muốn cho website để đổi lấy sự tiện dụng và tiết kiệm thời gian mà Bootstrap mang lại.

Những ưu điểm vượt trội đó đã giúp Laravel nhanh chóng chiếm được chỗ đứng trên thị trường và phát triển mạnh mẽ

Laravel hiện được phát hành theo giấy phép MIT, với source code được lưu trữ tại Gitthub Tính đến thời điểm hiện tại, Laravel đã phát triển đến phiên bản 9 với nhiều cải tiến

1.7.2 Những tính năng nổi bật của Laravel

- Nâng cấp, cài đặt, … với Composer

- Thao tác với cú pháp đẹp mắt và đơn giản với Eloquent ORM

- Hỗ trợ biến Laravel thành một web service API với Restful API

- Cung cấp các lệnh cần thiết để phát triển ứng dụng với Artisan

- Hỗ trợ tạo các trường trong cơ sở dữ liệu, thêm các cột trong bảng, tạo mối quan hệ giữa các bảng, với Migrations

- Cung cấp sẵn các tính năng đăng nhập, đăng ký, quên mật khẩu, … với

Authentication

- Hỗ trợ test lỗi để sửa chữa với Unit Testing

1.7.3 Tại sao nên sử dụng Laravel?

- Bắt đầu dễ dàng

Lý do đầu tiên phải kể đến chính việc Laravel có thể sử dụng cực dễ dàng cho người mới bắt đầu, kể cả khi bạn chỉ biết sơ về PHP, bạn vẫn có khả năng phát triển 1 website với 5 trang trong vòng vài giờ

Cấu trúc MVC và lập trình hướng đối tượng OOP vẫn được giữ lại trong

Framework Laravel, giúp cung cấp tài liệu tốt hơn, và tăng hiệu suất hơn

- Được xây dựng dựa trên những Framework hiệu quả nhất

Vì ra đời muộn nên Laravel được thừa hưởng những ưu điểm và thế mạnh của Framework khác, khi có phần route cực mạnh Ví dụ điện hình là Laravel sử dụng một số thành phần tốt nhất của Symfony

- Di chuyển Database dễ dàng

Di chuyển Database là một trong những tính năng trọng yếu của Laravel Nó cho phép bạn duy trì cấu trúc cơ sở dữ liệu ứng dụng mà không nhất thiết phải tạo lại

Di chuyển Database còn cho phép bạn viết mã PHP để kiểm soát Database, thay

vì sử dụng SQL Nó còn cho phép bạn khôi phục những thay đổi gần đây nhất trong Database

- Tính năng bảo mật hoàn thiện

Ứng dụng của bạn sẽ an toàn khi dùng Framework Laravel Kỹ thuật ORM của Laravel sử dụng PDO, chống chèn SOL

Ngoài ra, tính năng bảo vệ crsf của Laravel giúp ngăn chặn giả mạo từ yêu cầu trang chéo Đó là cú pháp tự động thoát bất kì HTML nào đang được truyền qua các tham số xem, nhằm ngăn chặn kịch bản chéo trên trang web

1.8 Hệ quản trị CSDL:

1.8.1 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à đượccá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 độngtrê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êninternet 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 OS X, Unix, FreeBSD, NetBSD, Novell NetWare, SGI Irix, Solaris, SunOS,

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ợ Node.js, PHP, Perl, và nhiều ngôn ngữ khác, làm nơi lưu trữ những thông tin trên các trang web viết bằng NodeJs, PHP hay Perl, Công cụ hỗ trợ quản lý MySQL

- Database Master - MySQL Management Tool

Chữ X đầu tiên là viết tắt của hệ điều hành mà nó hoạt động với: Linux, Windows và Mac OS X

Apache: Web Server mã nguồn mở Apache là máy chủ được sử dụng rộng rãi nhất trêntoàn thế giới để phân phối nội dung Web Ứng dụng được cung cấp dưới dạng phần mềm miễn phí bởi Apache Software Foundation

MySQL / MariaDB: Trong MySQL, XAMPP chứa một trong những hệ quản trị cơ sở

dữ liệu quan hệ phổ biến nhất trên thế giới Kết hợp với Web Server Apache và ngôn ngữ lập trình PHP, MySQL cung cấp khả năng lưu trữ dữ liệu cho các dịch vụ Web Các phiên bản XAMPP hiện tại đã thay thế MySQL bằng MariaDB (một nhánh của dự

án MySQL do cộng đồng phát triển, được thực hiện bởi các nhà phát triển ban đầu)

PHP: Ngôn ngữ lập trình phía máy chủ PHP cho phép người dùng tạo các trang Web hoặc ứng dụng động PHP có thể được cài đặt trên tất cả các nền tảng và hỗ trợ một số

hệ thống cơ sở dữ liệu đa dạng

Perl: ngôn ngữ kịch bản Perl được sử dụng trong quản trị hệ thống, phát triển Web và lập trình mạng Giống như PHP, Perl cũng cho phép người dùng lập trình các ứng dụngWeb động

CHƯƠNG 2: KHẢO SÁT VÀ MÔ TẢ HỆ THỐNG

2.1 Khảo sát thực tế bài toán:

2.1.1 Khảo sát một số Website kinh doanh cửa hàng thú cưng hiện nay

Ví dụ như: https://petshopdanang.com/

https://www.petmart.vn/

2.1.2 Khảo sát bằng phương pháp quan sát và phỏng vấn

Bằng cách quan sát bằng giác quan của mình để có thể tìm hiểu và phân tích về đối tượng quan sát Từ đó thu thập thông tin của người dùng

2.1.3 Khảo sát bằng Phiếu khảo sát, điều tra:

Vì các lý do khác nhau không có thời gian để trả lời phỏng vấn trực tiếp, em đã

sử dung google biểu mẫu để tiện cho việc khảo sát trên thực tế Nội dung chuẩn bị cụ thể như sau:

- Tìm kiếm địa điểm phù hợp cho mục đích khảo sát

- Tìm hiểu và xác định câu hỏi thích hợp

- Chuẩn bị phương tiện hỗ trợ: biểu mẫu google dụa vào phiếu khảo sát thực tế

 Câu hỏi khảo sát cần thiết và có liên quan:

 Kết quả khảo sát: