Khóa luận tốt nghiệp Công nghệ thông tin: Xây dựng Website bán đồ dùng học tập cho trẻ em bằng Drupal

LỜI NÓI ĐẦU Báo cáo này nhằm mục đích trình bày về quá trình phân tích và thiết kế hệ thống dự án xây dựng website bán đồ dùng học tập cho trẻ em, trong đó tôi đã áp dụng những ki

TRƯỜNG ĐẠI HỌC HẢI PHÒNG

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO ĐỒ ÁN

ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN ĐỒ DÙNG HỌC TẬP CHO TRẺ EM

: 203148201118 : ThS Nguyễn Hà An

LỜI NÓI ĐẦU

Báo cáo này nhằm mục đích trình bày về quá trình phân tích và thiết kế hệ thống dự

án xây dựng website bán đồ dùng học tập cho trẻ em, trong đó tôi đã áp dụng những kiến thức và kỹ năng học được trong quá trình đào tạo tại trường và áp dụng vào thực tế công việc Đồng thời, báo cáo cũng đề cập đến các vấn đề liên quan đến phân tích yêu cầu, thiết kế cơ sở dữ liệu, thiết kế giao diện và các vấn đề kỹ thuật khác trong quá trình xây dựng hệ thống

Tôi nhận thức rằng giáo dục đóng vai trò quan trọng trong sự phát triển của trẻ em Mục tiêu chính của tôi là tạo ra một website bán đồ dùng, giúp trẻ có những dụng cụ học tập tốt nhất và hiệu quả nhất Sử dụng ngôn ngữ lập trình HTML, CSS, PHP và TWIG, tôi hứa mang lại một trải nghiệm lập trình thú vị và giáo dục

Báo cáo này sẽ trình bày quá trình phát triển website, từ việc nghiên cứu và xác định yêu cầu, đến quá trình thiết kế giao diện và triển khai hệ thống Tôi cũng sẽ giới thiệu về các tính năng nổi bật của website, đặc biệt là những tính năng thanh toán và thống kê lãi lỗ từng ngày trong tháng

Mục tiêu chính của báo cáo này là trình bày một cái nhìn tổng quan về quá trình phân tích và thiết kế hệ thống dự án xây dựng website bán đồ dùng học tập cho trẻ em, cung cấp một tài liệu tham khảo cho các bạn sinh viên quan tâm đến lĩnh vực phát triển phần mềm và hệ thống thông tin Báo cáo cũng sẽ đề cập đến các thách thức và khó khăn trong quá trình thực hành, cùng với những bài học rút ra và đề xuất các giải pháp cải thiện Mặc dù bản thân đã cố gắng trong quá trình nghiên cứu và hoàn thiện đề tài nhưng chắc chắn không tránh khỏi những thiếu sót Vì vậy, kính mong nhận được sự góp ý của thầy cô và các bạn

LỜI CẢM ƠN

Để có được một đồ án tốt nghiệp chỉnh chu và đạt được kết quả tốt đẹp, tôi đã nhận được

sự giúp đỡ, hỗ trợ của nhiều cơ quan, tổ chức, cá nhân Với tình cảm sâu sắc, chân thành của mình, cho phép tôi được bày tỏ lòng biết ơn sâu sắc đến tất cả các cá nhân và cơ quan đã tạo điều kiện giúp đỡ trong quá trình học tập và nghiên cứu đề tài

Trước hết tôi xin gửi tới các thầy cô Khoa Công nghệ thông tin - Trường Đại học Hải Phòng lời chào trân trọng, lời chúc sức khỏe và lời cảm ơn sâu sắc nhất Trong quá trình học tập và nghiên cứu đồ án với sự quan tâm, dạy dỗ, chỉ bảo tận tình chu đáo của thầy cô, đến nay tôi đã có thể hoàn thành đồ án của mình Đặc biệt tôi xin gửi lời cảm ơn chân thành nhất

tới cô ThS.Nguyễn Hà An đã quan tâm giúp đỡ, trực tiếp hướng dẫn tôi hoàn thành tốt đồ

án này trong thời gian qua

Tôi xin bày tỏ lòng biết ơn đến lãnh đạo Trường Đại học Hải Phòng, các Khoa Phòng ban chức năng đã trực tiếp và gián tiếp giúp đỡ tôi trong suốt quá trình học tập và nghiên cứu

đề tài Ngoài ra, tôi cũng xin chân thành cảm ơn gia đình và bạn bè - những người luôn ở bên cạnh tôi, đã luôn tạo điều kiện, quan tâm, giúp đỡ, động viên tôi trong suốt quá trình học tập

và hoàn thành đề án tốt nghiệp

Với điều kiện thời gian cũng như kinh nghiệm còn hạn chế của một học viên, luận văn này không thể tránh được những thiếu sót Tôi rất mong nhận được sự chỉ bảo, đóng góp ý kiến của các thầy cô để tôi có điều kiện bổ sung, nâng cao ý thức của mình, phục vụ tốt hơn công tác thực tế sau này

Tôi xin chân thành cảm ơn!

iii

LỜI CAM ĐOAN

Tôi xin cam đoan những số liệu và kết quả nghiên cứu được nêu ra trong đồ án Xây dựng website bán đồ dùng cho trẻ em bằng Drupal là hoàn toàn trung thực Cam kết

không xuất hiện tình trạng sao chép hay sử dụng kết quả nghiên cứu của một công trình nào khác đã được công bố trước đây Những tài liệu tham khảo được trích dẫn một cách đầy đủ, đồng thời ghi rõ ràng về nguồn gốc theo quy định của nhà trường

Hải Phòng, tháng 4 năm 2024

Sinh viên thực hiện Trần Văn Đại

MỤC LỤC

LỜI NÓI ĐẦU i

LỜI CẢM ƠN ii

LỜI CAM ĐOAN iii

DANH MỤC HÌNH ẢNH vi

DANH MỤC BẢNG BIỂU vii

CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI 1

1.1 Giới thiệu chung 1

1.1.1 Lí do chọn đề tài 1

1.1.2 Hướng tiếp cận đề tài 2

1.1.3 Ý nghĩa thực tiễn 2

1.2 Giới thiệu chung về Drupal 3

1.2.1 Ưu điểm của Drupal 3

1.2.2 Tính năng của Drupal 3

1.3 Giới thiệu về ngôn ngữ lập trình PHP 4

1.3.1 PHP là gì? 4

1.3.2 Ưu điểm của PHP 4

1.3.3 Nhược điểm của PHP 5

1.4 Giới thiệu về HTML và CSS 5

1.4.1 Định nghĩa 5

1.4.2 Các thẻ cơ bản trong HTML 5

1.4.3 Các thuộc tính cơ bản của CSS 6

1.5 Giới thiệu về Twig Template 7

CHƯƠNG 2: PHÂN TÍCH YÊU CẦU VÀ THIẾT KẾ HỆ THỐNG 9

v

2.1 Phân tích yêu cầu 9

2.2 Xác định UC tác nhân 9

2.2.1 Người dùng(bao gồm cả khách vãng lai) 9

2.2.3 Phân tích người dùng 10

2.2.4 Mô hình Use Case 11

2.2.5 Sơ đồ tuần tự 19

2.2.6 Sơ đồ lớp 24

2.2.7 Phân tích CSDL 25

CHƯƠNG 3: MỘT SỐ HÌNH ẢNH VỀ WEBSITE 27

3.1 Trang chủ 27

3.2 Trang chi tiết sản phẩm 28

3.3 Trang danh mục sản phẩm 29

3.4 Trang tin tức 30

3.5 Quản lí kho 31

3.6 Thống kê 32

KẾT LUẬN 33

TÀI LIỆU THAM KHẢO 34

DANH MỤC HÌNH ẢNH

Hình 2.1: UseCase tổng quát 11

Hình 2.2: UseCase cập nhật sản phẩm 14

Hình 2.3: UseCase quản lý kho hàng 16

Hình 2.4: Use Case thanh toán 17

Hình 2.5: Sơ đồ tuần tự đăng nhập 19

Hình 2.6: Sơ đồ tuần tự đăng kí 20

Hình 2.7: Sơ đồ tuần tự quản lí sản phẩm 21

Hình 2.8: Sơ đồ tuần tự tìm kiếm 22

Hình 2.9: Sơ đồ tuần tự thanh toán 23

Hình 2.10: Sơ đồ lớp 24

Hình 3.1: Trang chủ 27

Hình 3.2: Trang chi tiết sản phẩm 28

Hình 3.3: Trang danh mục sản phẩm 29

Hình 3.4: Trang tin tức 30

Hình 3.5: Kho 31

Hình 3.6: Thống kê 32

vii

DANH MỤC BẢNG BIỂU

Bảng 2.1: Đặc tả UC đăng nhập 12

Bảng 2.2: Đặc tả UC đăng kí 13

Bảng 2.3: Đặc tả UC cập nhật sản phẩm 15

Bảng 2.4: Đặc tả UC quản lí kho hàng 16

Bảng 2.5: Đặc tả UC thanh toán 18

Bảng 2.6: Đăng kí 25

Bảng 2.7: Sản phẩm 25

Bảng 2.8: Đơn hàng 25

Bảng 2.9: Thanh toán 26

CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI

1.1 Giới thiệu chung

1.1.1 Lí do chọn đề tài

− Xã hội ngày nay đang không ngừng phát triển, song song với đó xu hướng thương mại điện tử ngày càng phát triển Mọi việc giờ đây thật đơn giản, chỉ cần có một chiếc máy tính hay thậm chí chỉ với một chiếc điện thoại thông minh có kết nối với internet, việc học tập trở nên thật dễ dàng hơn bao giờ hết với tất cả mọi người chỉ với một vài cái click chuột

− Nhu cầu thị trường: Trẻ em là một phần không thể thiếu trong xã hội, và nhu cầu

về đồ dùng học tập cho trẻ em luôn tồn tại Việc tạo ra một nền tảng trực tuyến để bán các sản phẩm như sách vở, đồ chơi giáo dục, dụng cụ học tập sẽ đáp ứng được nhu cầu này một cách hiệu quả

− Tiện ích và sự thuận tiện: Môi trường mua sắm trực tuyến đang ngày càng trở

nên phổ biến hơn, và việc có một trang web chuyên biệt dành riêng cho đồ dùng học tập của trẻ em sẽ mang lại sự tiện lợi và thuận tiện cho phụ huynh và những người chăm sóc trẻ

− Sự đa dạng sản phẩm: Trang web có thể cung cấp một loạt các sản phẩm từ sách,

vở, đồ chơi giáo dục đến dụng cụ học tập, cung cấp một sự lựa chọn đa dạng và phong phú cho khách hàng

− Giáo dục và phát triển: Việc tạo ra một nền tảng trực tuyến không chỉ là một nơi

để bán hàng, mà còn là một cơ hội để cung cấp thông tin hữu ích về giáo dục và phát triển trẻ em Điều này có thể bao gồm việc chia sẻ các bài viết, hướng dẫn và các tài liệu học tập hữu ích

− Mở rộng thị trường: Một trang web trực tuyến không giới hạn bởi địa lý, giúp

mở rộng thị trường và tiếp cận được khách hàng từ nhiều nơi trên thế giới

− Tính cạnh tranh: Trong thị trường ngày càng cạnh tranh, việc có một trang web

chuyên biệt với đồ dùng học tập cho trẻ em có thể giúp doanh nghiệp nổi bật và tạo ra lợi thế cạnh tranh

− Tương tác và phản hồi: Một trang web cung cấp cơ hội cho khách hàng để tương

tác, gửi phản hồi và đánh giá về sản phẩm và dịch vụ, từ đó giúp cải thiện chất lượng và tăng cường mối quan hệ với khách hàng

Từ những lý do trên tôi đã quyết định thực hiện đề tài “Xây dựng website bán đồ dùng học tập cho trẻ em bằng Drupal” Website không chỉ cung cấp thông tin một cách

nhanh chóng đầy đủ về các sản phẩm mà còn thanh toán nhanh và tiện lợi

1.1.2 Hướng tiếp cận đề tài

− Web dễ sử dụng, trải nghiệm tốt

− Thân thiện với người dùng

− Kiểm tra và cải thiện sự tư duy của trẻ

− Thanh toán dễ dàng và nhanh chóng

1.1.3 Ý nghĩa thực tiễn

Xây dựng một trang web bán đồ dùng học tập cho trẻ em mang lại nhiều ý nghĩa thực tiễn đáng kể Trang web này không chỉ là một nền tảng thương mại điện tử mà còn là một nguồn tài nguyên hữu ích cho việc giáo dục và phát triển của trẻ em Dưới đây là mô tả

về ý nghĩa thực tiễn của việc xây dựng trang web này:

Việc xây dựng một trang web bán đồ dùng học tập cho trẻ em không chỉ đơn thuần là một dự án kinh doanh, mà còn là một công cụ hữu ích và thiết thực cho cộng đồng Trang web này mang lại nhiều lợi ích cho phụ huynh, người chăm sóc trẻ em và cả các em nhỏ Trước hết, trang web giúp giải quyết vấn đề về tiện ích và tiết kiệm thời gian Phụ huynh và người chăm sóc trẻ em không cần phải tốn thời gian và công sức đi lại để mua sắm đồ dùng học tập cho các em Thay vào đó, họ có thể dễ dàng truy cập và mua sắm các sản phẩm từ nhà, tiết kiệm thời gian và năng lượng cho việc khác

Thứ hai, sự đa dạng về sản phẩm trên trang web làm cho việc mua sắm trở nên dễ dàng và linh hoạt hơn bao giờ hết Từ sách, vở, đến đồ chơi giáo dục và dụng cụ học tập, các sản phẩm được cung cấp đa dạng, đáp ứng được nhu cầu học tập và giáo dục của các

em nhỏ

Thêm vào đó, trang web còn là một nguồn thông tin và hỗ trợ quan trọng cho cả phụ huynh và trẻ em Họ có thể tìm kiếm và tham khảo thông tin về cách sử dụng sản phẩm, các hướng dẫn về giáo dục và phát triển trẻ em, giúp tạo ra môi trường học tập tốt nhất cho các em

1.2 Giới thiệu chung về Drupal

− Drupal là hệ quản trị nội dung (CMS) mã nguồn mở PHP miễn phí giúp phát triển web thương mại điện tử hoặc blog cá nhân Drupal được tạo ra từ năm 2000 bởi một lập trình viên người Bỉ Dries Buytaert Ứng dụng hiện nay của Drupal là gì? Drupal 8 hiện là nền tảng mã nguồn mở được sử dụng nhiều nhất hiện nay để xây dựng các trải nghiệm người dùng trực tuyến, đặc biệt là trong các thiết kế website chuyên nghiệp

− Trải qua một quá trình phát triển, Drupal hiện đã trở thành một trong những giải pháp quản trị nội dung phù hợp nhất với những đơn vị đang tìm kiếm CMS đột phá cho website doanh nghiệp của mình Đồng thời, nó cũng liên tục được cải tiến để tích hợp thêm các tính năng mới

1.2.1 Ưu điểm của Drupal

Bởi sở hữu nhiều tính năng nổi bật nên Drupal có thể giúp bạn thiết kế nên một

website hoàn hảo hơn và tránh được hầu hết những lỗi có thể xảy ra trong quá trình xây dựng Những lợi ích nổi bật đó là:

− Mobile-First: Không những hỗ trợ thiết kế trình duyệt tuyệt vời cho tất cả các

định dạng thiết bị, Drupal còn hỗ trợ hiển thị web trên di động một cách tuyệt vời Để

hiểu hơn về Mobile-First, độc giả nên xem bài viết: “Mobile First Index là gì?“

− Bảo mật cao: Drupal có tính năng bảo mật cao, do đó nó có thể giữ cho website của bạn luôn an toàn Ngoài ra, Drupal còn xác định được các lỗ hổng và tự động

tạo/cung cấp bản vá lỗi một cách nhanh chóng

− Multisite: Drupal giúp bạn quản lý nhiều trang web trong một chiến dịch, thương

hiệu, tổ chức và vùng địa lý của bạn trên một nền tảng đơn

− Đa ngôn ngữ: Drupal hỗ trợ nhiều ngôn ngữ giúp người dùng dễ dàng tạo và

quản lý nhiều trang web trên các khu vực địa lý khác nhau

1.2.2 Tính năng của Drupal

Sở dĩ, Drupal đáp ứng được nhiều yêu cầu đặc biệt như vậy vì nó sở hữu hàng loạt tính năng đặc biệt, chẳng hạn:

− Collaborative Book: Cho phép người dùng đóng góp nội dung và tổ chức dữ liệu

thông qua việc thiết lập một ứng dụng gọi là “quyển sách”

− URL thân thiện: Tạo ra các URL thân thiện với người dùng và cả bộ máy tìm

kiếm thông qua việc sử dụng mod_rewite của Apache Có thể tìm hiểu thêm trong bài viết: “URL là gì? Friendly URL là gì? Hướng dẫn tối ưu URL cho SEO“

− Online help: Xây dựng hệ thống trợ giúp trên website

− Open source: Mã nguồn của Drupal hoàn toàn tự do dưới giấy phép GNU/GPL2

− Cá nhân hóa: Cá nhân hóa nội dung và cách thức trình bày theo các tiêu chuẩn

được người dùng đặt ra

− Hệ thống phân quyền theo vai trò role based: Tạo ra các vai trò khác nhau và

gán cho người dùng

− Tìm kiếm: Có các module tìm kiếm được tích hợp sẵn

1.3 Giới thiệu về ngôn ngữ lập trình PHP

1.3.1 PHP là gì?

PHP là từ viết tắt của thuật ngữ Personal Home Page và hiện nay đang có tên Hypertext Preprocessor Đây là một dạng mã lệnh hoặc một chuỗi ngôn ngữ kịch bản Trong đó, ngôn ngữ PHP chủ yếu được phát triển để dành cho những ứng dụng nằm trên máy chủ

Mỗi khi các lập trình viên PHP viết các chương trình thì các chuỗi lệnh sẽ được chạy

ở trên server, từ đó sinh ra mã HTML Nhờ vậy mà những ứng dụng trên các website có thể chạy được một cách dễ dàng

Ngôn ngữ PHP thông thường sẽ phù hợp với việc lập trình website bởi nó có thể dễ dàng kết nối với các website khác có sử dụng HTML để chạy trên các trình duyệt web Vì vậy, đây là ngôn ngữ lập trình được người dùng đánh giá là khá dễ đọc Ngôn ngữ PHP cũng trở thành ngôn ngữ web dev phổ biến mà các PHP Developer phải học trước khi bắt đầu vào nghề

1.3.2 Ưu điểm của PHP

− Sử dụng mã nguồn mở: Việc cài đặt cũng như sử dụng ngôn ngữ lập trình PHP

rất dễ dàng và hoàn toàn miễn phí dành cho tất cả mọi người Vì vậy nên ngôn ngữ này luôn được cài đặt rất nhiều trên các Web Server như: IIS, Apache, Nginx

− Có tính cộng đồng cao: Do PHP là mã nguồn mở, lại dễ sử dụng nên ngôn ngữ

này được ưa chuộng từ cộng đồng các lập trình viên Cộng đồng ngôn ngữ này rất rộng

rãi và đảm bảo được tính chất lượng Đã có không ít diễn đàn, Blog, website trong và ngoài nước giải thích về ngôn ngữ này nên khả năng tiếp cận của mọi người sẽ dễ dàng

và nhanh chóng hơn

− Hệ thống thư viện phong phú: Do lượng người dùng nhiều nên thư viện của

ngôn ngữ PHP ngày càng được phát triển và mở rộng Với thư viện Code hay hàm phong phú sẽ giúp cho việc học tập hoặc viết các ứng dụng PHP trở nên dễ dàng và nhanh chóng Do đó, đây chính là đặc điểm làm cho ngôn ngữ này trở nên nổi bật Ngôn ngữ PHP có thể kết hợp với những cơ sở dữ liệu lớn hơn như: Oracle, MySQL, Cassandra

− Tính bảo mật: Do đây là mã nguồn mở, đồng thời được sự hỗ trợ của cộng đồng

các lập trình nên ngôn ngữ lập trình PHP sẽ an toàn khi sử dụng Khi kết hợp với kỹ thuật bảo mật ở các tầng khác nhau thì ngôn ngữ lập trình sẽ chắc chắn và đảm bảo được hoạt động của website

1.3.3 Nhược điểm của PHP

Cấu trúc ngữ pháp chính là vấn đề mà một người dùng tiếp xúc với ngôn ngữ này PHP không được đẹp mắt và gọn gàng như các loại ngôn ngữ lập trình khác và chỉ hoạt

động được trên các ứng dụng web

1.4 Giới thiệu về HTML và CSS

1.4.1 Định nghĩa

− HTML (HyperText Markup Language): là một ngôn ngữ đánh dấu được thiết kế ra

để tạo nên các trang web, nghĩa là các mẩu thông tin được trình bày trên World Wide Web

− CSS (Cascading Style Sheets): định nghĩa về cách hiển thị của một tài liệu HTML CSS đặc biệt hữu ích trong việc thiết kế Web Nó giúp cho người thiết kế dễ dàng áp đặt các phong cách đã được thiết kế lên bất kì page nào của website một cách nhanh chóng, đồng bộ

1.4.2 Các thẻ cơ bản trong HTML

1.4.2.1 Các thẻ tiêu đề

− Thường được sử dụng để thế hiện cho tiêu đề của bài viết, bản tin hay các mục nhấn mạnh

− Bao gồm các thẻ từ <h1> đến <h6>

− Font chữ của nội dung trong các thẻ giảm từ <h1> đến <h6>

1.4.2.2 HTML image

Ta dùng thẻ <img> để chèn ảnh vào trang web

Thuộc tính của thẻ <img> gồm:

− src: chỉ ra đường dẫn file ảnh

− alt: để mô tả nội dung sẽ hiển thị khi đường dẫn tới file ảnh không tồn tại

− title: nội dung hiển thị khi đưa trỏ chuột lên hình

− width, height: độ rộng và độ cao của file được tính bằng excel, nếu không có width

và height thì mặc định sẽ lấy kích thước gốc của file

1.4.2.3 Các thẻ định dạng

− <b> (bold): Chữ In đậm

− <u> (Underline): Chữ gạch chân

− <i> (italic): Chữ in nghiêng

− <big> (Big): Chữ lớn hơn

− <sub> (Subscrip) Chỉ số dưới, ví dụ: H2O

− <sup> (Superscript): Chỉ số trên, ví dụ: x2y

− <strong> In đậm (nhấn mạnh <b>)

− <em>(emphasized): Chữ in nghiêng, Nhấn mạnh hơn <i>

1.4.3 Các thuộc tính cơ bản của CSS

1.4.3.1 Đơn vị

Trong css chia làm 2 loại đơn vị:

− Tương đối (Relative Units) là những đơn vị được tính một cách tương đối dựa

trên các phần tử khác (có thể là phần tử cha hoặc phần tử root) Các đơn vị loại này khá linh động, rất thích hợp cho việc thích ứng trên các thiết bị khác nhau Một vài đơn vị tương đối như: rem, em, %, vw, vh, ex, ch, vmin, vmax

− Tuyệt đối (Absolute Units) là những đơn vị mà giá trị của nó không bao giờ thay

đổi và không bị ảnh hưởng bởi các thành phần khác Tức là trong mọi kích thước màn hình thì kích thước của nó vẫn như thế Với loại đơn vị này chỉ nên dùng cho những thứ

có kich thước cố định, hoặc kích thước nhỏ không quá ảnh hưởng như border, … Một vài đơn vị tuyệt đối như: px, pt, cm, mm, pc, in

Lúc mới học thì ta chỉ cần chú ý một vài đơn vị phổ biến

Đơn vị tương đối % – đơn vị phần trăm sẽ tỉ lệ theo phần tử cha trực tiếp của nó Đơn vị tuyệt đối px – pixels (1px = 1/96th of 1in) Pixels (px) là khác nhau giữa các

thiết bị Với các thiết bị có độ phân giải thấp (low-dpi devices), 1px là một chấm điểm hiển thị trên màn hình của thiết bị Với máy in và các thiết bị có độ phân giải cao, 1px lại

là nhiều chấm điểm hiển thị trên màn hình của thiết bị

1.4.3.2 Thuộc tính background

− background-color dùng để đặt màu nền cho một thành phần

− background-image định nghĩa cho hình nền của một thành phần Nó là giá trị

được định nghĩa bằng một đường dẫn hình ảnh với ký hiệu url ()

− background-size định nghĩa kích thước của hình nền Giá trị của nó có thể là kích

thước chiều dài và rộng hoặc là tỉ lệ phần trăm Từ khóa có sẵn cho thuộc tính là contain

và cover Giá trị contain sẽ co dãn hình ảnh để phù hợp với khung giá trị cover, ở một mặt khác nó sẽ kéo dãn hình ảnh sao cho vừa với khung mà ko gây sai lệch tỉ lệ

1.4.3.3 Css model box

− Content: Vùng hiển thị nội dung (text, image, …) của phần tử HTML

− Padding: Vùng đệm khoảng cách từ nội dung (content) đến đường viền (Border), bao quanh bốn mặt của Content

− Border: Đường viền bao xung quanh phần tử HTML, bao quanh bốn mặt của Padding

− Margin: Khoảng cách từ đường viền (Border) của phần tử này đến các phần tử khác hoặc các phần của trang Web (viền trang web), bao quanh bốn mặt của Border

1.5 Giới thiệu về Twig Template

1.5.1.1 Tổng quan

Thông tin từ nhiều tài liệu cung cấp thì Twig là một template engine cho PHP với người đỡ đầu là lập trình viên Symfony Anh ấy là một trong các anh chàng template engine với cú pháp và mã nguồn trong sáng nhất mà mình từng gặp Twig được thiết kế

và phát triển dựa trên các nguyên tắc cơ bản của PHP nhằm giải quyết 3 vấn đề:

Fast: Được tối ưu hóa, đơn giản và rút gọn

Secure: Twig có chế độ sandbox để đánh giá xem mã trong template có đáng tin cậy

hay không

Flexible: Cú pháp linh hoạt, dễ tùy chỉnh, bạn hoàn toàn có thể định nghĩa các thẻ và

bộ lọc riêng

Qua cái nhìn tổng quan thì đây là một anh chàng đơn giản, dễ tiếp cận nhưng lại rất thú vị Twig sử dụng {{}} để in nội dung bên trong, {% %} cho các xử lý logic như if-then-else, for và {# #} để đưa comment vào đoạn mã

1.5.1.2 Các cú pháp cơ bản

Sẽ giống các template khác chứa bên trong gồm các biến và các biểu thức, khi template được xử lý qua template engine, các giá trị của biến và biểu thức sẽ được in ra vị trí phù hợp trong template trang web tạo thành các tài liệu hoàn chỉnh Như đã nói ở phần tổng quan thì Twig có hai cú pháp cơ bản:

− {% %}

− {{ }}

Variables

− Twig hỗ trợ get biến bằng cách đơn giản như sau:

− Điều quan trọng cần biết là các dấu ngoặc nhọn {{}} không phải là một phần của biến mà là câu lệnh in Khi truy cập các biến, chúng ta không đặt các dấu ngoặc xung quanh chúng Nếu một biến hoặc thuộc tính không tồn tại, bạn sẽ nhận được giá trị null khi strict_variables được đặt thành false; hoặc Twig sẽ đưa ra lỗi

CHƯƠNG 2: PHÂN TÍCH YÊU CẦU VÀ THIẾT KẾ HỆ THỐNG

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

− Giao diện dễ sử dụng: Trang web cần có một giao diện người dùng thân thiện và

dễ sử dụng, đặc biệt là với người dùng chính là phụ huynh và người chăm sóc trẻ em Các nút điều hướng, danh mục sản phẩm và chức năng tìm kiếm cần được thiết kế một cách

rõ ràng và dễ nhận biết

− Tính năng tìm kiếm và lọc sản phẩm: Để dễ dàng tìm kiếm và lựa chọn sản

phẩm, trang web cần có tính năng tìm kiếm và lọc sản phẩm theo các tiêu chí như độ tuổi, loại sản phẩm, thương hiệu, hoặc giá cả

− Thông tin sản phẩm chi tiết: Mỗi sản phẩm cần có mô tả chi tiết, hình ảnh rõ

ràng và thông tin về giá cả và tính năng, giúp người dùng đưa ra quyết định mua hàng chính xác

− Giỏ hàng và thanh toán: Trang web cần có tính năng giỏ hàng để người dùng có

thể thêm sản phẩm vào giỏ hàng và tiến hành thanh toán một cách dễ dàng và an toàn thông qua các phương thức thanh toán trực tuyến

− Quản lý tài khoản: Người dùng cần có thể đăng ký tài khoản, đăng nhập và quản

lý thông tin cá nhân, địa chỉ giao hàng và lịch sử mua hàng

− Phản hồi và đánh giá: Tính năng cho phép người dùng gửi phản hồi và đánh giá

về sản phẩm sau khi mua hàng, giúp cung cấp thông tin hữu ích cho người mua khác và cải thiện chất lượng dịch vụ

− Tính năng tương tác: Trang web cần có các tính năng tương tác như trò chuyện

trực tuyến, hỗ trợ qua email hoặc điện thoại để giúp người dùng giải đáp thắc mắc và giải quyết vấn đề khi cần thiết

− Responsive design: Trang web cần được thiết kế linh hoạt để hiển thị một cách tối

ưu trên các thiết bị di động, đảm bảo trải nghiệm người dùng nhất quán trên mọi nền tảng

2.2 Xác định UC tác nhân

2.2.1 Người dùng(bao gồm cả khách vãng lai)

− Đăng kí hoặc đăng nhập tài khoản

− Thay đổi mật khẩu

− Cập nhật thông tin tài khoản cá nhân

− Xem thông tin sản phẩm

− Đặt hàng

− Thanh toán

2.2.2 Quản lí

− Đăng nhập tài khoản

− Thay đổi mật khẩu

− Cập nhật thông tin tài khoản cá nhân

− Thêm, sửa, xóa sản phẩm

− Quản lí kho hàng

− Xem thống kê lãi lỗ từng ngày trong tháng

− Xem đơn đặt hàng và kiểm soát

2.2.3 Phân tích người dùng

2.2.3.1 Mục tiêu người dùng

− Xem chi tiết thông tin về các sản phẩm

− Đặt và mua sắm những sản phẩm tốt nhất

− Thanh toán nhanh chóng và tiện lợi

− Tham khảo thêm các sản phẩm

2.2.3.2 Hành vi người dùng

− Tham khảo sản phẩm và đặt hàng theo ý muốn

− Có thể thanh toán bằng 3 hình thức (Thẻ tín dụng, COD, Internet Banking)

− Thêm vào mục ưa thích và so sánh sản phẩm

2.2.3.3 Trải nghiệm người dùng

− Giao diện dễ sử dụng, trực quan và thân thiện

− Thông tin chi tiết và hình ảnh chất lượng cao cho từng sản phẩm

− Tốc độ load website nhanh chóng

2.2.4 Mô hình Use Case

2.2.4.1 Use Case tổng quát

Hình 2.1: UseCase tổng quát

2.2.4.2 Đặc tả UC đăng nhập

Bảng 2.1: Đặc tả UC đăng nhập

Use case name Đăng nhập

Use Case

Description Người dùng đăng nhập vào hệ thống

Priority

Trigger Người dùng muốn đăng nhập vào hệ thống

Pre-Condition Người dùng đã cố tài khoản đã tạo trước đó hoặc tài khoản có

Hệ thống hiển thị giao diện dành cho người dùng nếu là khách hàng và giao diện dành cho quản trị nếu tài khoản quản trị

Alternative Flow Không

Exception Flow Người dùng không nhập đúng tài khoản mật khẩu của tài khoản

khách hàng hoặc tài khoản có quyền quản trị Bussiness Rule Không

2.2.4.3 Đặc tả UC đăng kí

Bảng 2.2: Đặc tả UC đăng kí

Use case name Đăng ký

UseCase Description Người dùng đăng ký tài khoản

Priority

Trigger Người dùng muốn đăng ký tài khoản

Pre-Condition Tên tài khoản được tạo chưa tồn tại

Post-Condition Người dùng đăng ký làm thành viên của hệ thống

Exception Flow

Người dùng nhập tài khoản đã tồn tại Người dùng nhập email đã tồn tại Mật khẩu người dùng nhập không đủ ký tự/ thừa ký tự

Bussiness Rule Không