Đồ án cơ sở 2 xây dựng webite khóa học tiếng anh

Người học có thểtruy cập vào tào liệu học, video hướng dẫn và tương tác với giảng viên và học viênkhác qua bất kỳ đây có kết nói Internet Mục tiêu của đề tài Trang webite khóa học tiếng

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

TRUYỀN THÔNG VIỆT – HÀN KHOA KHOA HỌC MÁY TÍNH

ĐỒ ÁN CƠ SỞ 2 XÂY DỰNG WEBITE KHÓA HỌC TIẾNG ANH

Sinh viên thực hiện : NGUYỄN THỊ THANH TÌNH

Mã sinh viên : 22DA081

Giảng viên hướng dẫn: THS.ĐẶNG THỊ KIM NGÂN

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

LỜI CẢM ƠN

Để thực hiện và hoàn thành tốt Đồ án cơ sở 2 này, chúng em đã nhận được sự

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

Trước hết chúng em xin gửi tới các thầy cô thuộc Trường Đại học Công nghệThông tin và Truyền thông Việt-Hàn, Đại học Đà Nẵng lời chào trân trọng, lờichúc sức khỏe và lời cảm ơn sâu sắc 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 chúng em đã có thể hoàn thành đề tài Đồ án cơ sở 2

Đặc biệt chúng em xin gửi lời cảm ơn chân thành nhất tới Cô giáo - THS ĐẶNG THỊ KIM NGÂN người đã trực tiếp hướng dẫn cho chúng em đã quan

tâm, giúp đỡ tận tình chúng em hoàn thành tốt đồ án này trong thời gian qua Với điều kiện thời gian cũng như kinh nghiệm còn hạn chế, Đồ án cơ sở 2 nàykhông thể tránh được những thiếu sót Chúng em rất mong nhận được sự chỉ bảo,đóng góp ý kiến của các thầy cô để chúng em 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

Chúng em xin trân trọng cảm ơn!

NHẬN XÉT

(Của giảng viên hướng dẫn)

Đà Nẵng, tháng 11 năm 2023 Giảng viên hướng dẫn

THS ĐẶNG THỊ KIM NGÂN MỤC LỤ

DANH MỤC HÌNH ẢNH 8

MỞ ĐẦU 9

1 Giới thiệu: 9

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

3 Nhiệm vụ của đề tài: 10

4 Bố cục của đề tài: 11

CHƯƠNG 1: NGHIÊN CỨU TỔNG QUAN 12

1 Yêu cầu thực tế 12

2 Mô tả bài toán 12

3 Các nhóm chức năng của hệ thống 13

4 Các tác nhân của hệ thống 13

5 Các ngôn ngữ hỗ trợ 14

5.1 PHP: 14

5.2 HTML-CSS: 15

6 Các công cụ hỗ trợ 16

6.1 Xampp: 16

6.2 Visual Studio Code: 18

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG VÀ CƠ SỞ DỮ LIỆU 22

1 Phân tích quy trình nghiệp vụ: 22

1.1 Quy trình bán hàng: 22

1.2 Quy trình mua hàng: 23

2 Phân tích các chức năng chính của Website: 23

2.1 Chức năng của admin: 23

2.2 Chức năng của khách hàng: 24

3 Phân tích các chức năng chính của Ứng dụng: 24

4 Biểu đồ: 25

4.1 Biểu đồ Usecase quản lí tài khoản: 25

4.2 Biểu đồ Usecase quản lí sản phẩm: 26

4.3 Biểu đồ Usecase: 27

5 Sơ đồ: 28

1 Trang dành cho Admin: 30

1.1 Trang đăng nhập: 30

1.2 Trang quản lí người dùng: 30

1.3 Trang quản lí sản phẩm 31

1.4 Trang quản lí đơn hàng 32

1.5 Trang bảo mật admin 33

2 Giao diện trang web: 34

2.1 Giao diện trang chủ 34

2.2 Đăng ký tài khoản và đăng nhập 34

2.3 Danh mục 35

2.4 Sản phẩm nổi bật 35

2.5 Chi tiết sản phẩm 36

2.6 Trang danh mục yêu thích 36

2.7 Trang giỏ hàng 37

2.8 Trang đặt hàng 37

2.9 Lịch sử mua hàng 38

KẾT LUẬN 40

1 Kết quả đạt được và hạn chế 40

2 Hướng phát triển 40

TÀI LIỆU THAM KHẢO 41

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

DANH MỤC HÌNH ẢNH

Hình 1: Logo PHP 15

Hình 2: Logo ngôn ngữ HTML,CSS 16

Hình 3: Logo phần mềm Xampp 18

Hình 6: Logo phần mềm Sublime Text 22

Hình 7: Quy trình bán hàng 25

Hình 8: Quy trình mua hàng 26

Hình 9: Biểu đồ Usecase quản lí tài khoản 28

Hình 10: Biểu đồ Usecase quản lí sản phẩm 29

Hình 11: Biểu đồ Usecase 30

Hình 12: Sơ đồ quan hệ của các bảng CSDL 31

Hình 13: Trang chủ admin 32

Hình 14: Trang hiển thị danh sách thể loại 32

Hình 15: Trang thêm thể loại 33

Hình 16: Trang cập nhật lại thể loại 33

Hình 17: Trang hiển thị danh sách sản phẩm sách 34

Hình 18: Trang thêm sản phẩm sách 34

Hình 19: Trang Cập nhật lại thông tin sản phẩm 35

Hình 20: Trang hiển thị danh sách người dùng 35

Hình 21: Trang thêm người dùng 36

Hình 22: Trang thay đổi thông tin người dùng 36

Hình 23: Trang quản lí bình luận 37

Hình 24: Trang quản lí đơn hàng 37

Hình 25: Giao diện đăng nhập 38

Hình 26: Giao diện đăng kí 39

Hình 27: Giao diện trang chủ 40

Hình 28: Giao diện menu 41

Hình 29: Sách theo thể loại 42

Hình 30: Chi tiết sản phẩm 43

Hình 31: Trang chi tiết sản phẩm 44

Hình 32: Trang giỏ hàng 45

Hình 33: Trang Đặt hàng 46

Hình 34: Trang chủ 47

Hình 35: Trang 47

Hình 36: Trang 48

Hình 37: Trang giỏ hàng 49

Hình 38: Trang đặt mua hàng 50

Hình 39: Giao diện trang đăng nhập 51

Hình 40: Giao diện trang đăng kí 52

MỞ ĐẦU

1 Giới thiệu

Tiếng Anh là ngôn ngữ giao tiếp toàn cầu Việc sử dụng tiếng Anh giúp kết nối và hiểu biết giữa người từ các quốc gia và văn hóa khác nhau Đối với học sinh,

sinh viên, việc học tiếng Anh không chỉ giúp mở rộng kiến thức mà còn thúc đẩy sựphát triển cá nhân, tư duy và kỹ năng giải quyết vấn đề.

Với sự phát triển của công nghệ thông tin và mạng Internet đã tạo điều kiệnthuận lợi cho việc tiếp cận và tham gia các khóa học trực tuyến Người học có thểtruy cập vào tào liệu học, video hướng dẫn và tương tác với giảng viên và học viênkhác qua bất kỳ đây có kết nói Internet

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

Trang webite khóa học tiếng Anh được thực hiện dựa trên hai mục đích chính sau:

- Thứ nhất là nghiên cứu công nghệ lập trình như: lập trình ứng dụng Webbằng với các ngôn ngữ lập trình như HTM,PHP, đi kèm với sự kết hợpReposive trong CSS để tạo ra 1 trang web có thể sử dụng trên các nền tảngIOS,Android…

- Thứ hai là cung cấp một trang web đa nền tảng đáp ứng đủ các nhu cầu muahàng của khách hàng Chúng em hy vọng dựa trên nền tảng lý thuyết đãđược thầy cô truyền thụ lại, kết hợp với sự tìm hiểu công nghệ của cá nhân,báo cáo đồ án chuyên ngành 1 của chúng em sẽ đạt được mục đích mongđợi

2 Nhiệm vụ của đề tài

3.1 Nội dung

- Tìm hiểu về ngôn ngữ PHP,HTML,CSS

- Tìm hiểu ứng dụng lập trình Visual code ,Sublime Text,cơ sở dữ liệu My sql

3.2 Các yêu cầu cần giải quyết

- Nghiên cứu về các truy xuất dữ liệu để database

- Nghiên cứu về Respove trong CSS

- Sử dụng công cụ lập trình Visual Studio Code, Sublime Text ,các kỹ thuật lập trình website để xây dựng hệ thống bán hàng đa nền tảng.

Chương 2: Phân tích thiết kế hệ thống và cơ sở dữ liệu

1 Phân tích quy trình nghiệp vụ

2 Phân tích các chức năng chính của Website

3 Sơ đồ

4 Biểu đồ

Chương 3: Xây dựng Website

1 Trang dành cho Admin:

2 Giao diện trang chủ mua hàng

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

CHƯƠNG 1: NGHIÊN CỨU TỔNG QUAN

1 Yêu cầu thực tế

- Ngày nay, khoa học kĩ thuật phát triển với tốc độ một cách nhanh chóng,phát triển về cả chiều sâu lẫn chiều rộng Nó góp phần vào sự phát triểncủa nền văn minh loài người Con người đã biết áp dụng công nghệ thôngtin phục vụ cho đời sống của mình Mọi người mọi nhà dù cách xa baonhiêu họ vẫn gần nhau nhờ Internet

- Mạng Internet giờ đây áp dụng trong tất cả các lĩnh vực Đặc biệt nó làmột thứ không thể thiếu trong mọi doanh nghiệp và cá nhân Đây là mộtcông cụ để họ trao đổi thông tin và học hỏi Xã hội phát triển làm choviệc học trở nên dễ dàng,có thể học tập trực tiếp thông qua Website màkhông cần phải đi đâu xa

- Do đó chúng em đã quyết định chọn đề tài: “Xây dựng Webite khóa họctiếng Anh” Nhằm giúp khác hàng có thể học tập, đáp ứng nhu cầu thựcthế qua mạng một cách nhanh chóng mà không cần tốn nhiều thờigian,cũng như công sức

2 Mô tả bài toán

- Hệ thống học tập qua mạng là một hệ thống cung cấp cho người sử dụng,nhà quản lý những chức năng cần thiết để học tập, quản lý những hoạtđộng của trung tâm Đối với khách hàng, hệ thống cho phép tìm kiếm,xem thông tin khóa học trên ứng dụng và đặt hàng, học tập

- Sau khi chọn khóa học xong thì chuyển qua thanh toán, đồng thời chọnđịa điểm và xác định thời gian giao hàng Thực hiện xong khách hàngtiến hành xác nhận thanh toán và đợi nhận hàng từ bộ phận chuyển hàng

và kết thúc giao dịch

3 Các nhóm chức năng của hệ thống

- Chức năng của khách hàng:

+ Nhóm chức năng đăng ký, đăng nhập thành viên

+ Chức năng xem thông tin: xem thông tin khóa học, xem thông tin đơnhang, xem và sửa thông tin cá nhân

+ Chức năng đăng kí khóa học

+ Xem tình trạng học tập của bản thân

- Chức năng của quản lý:

+ Nhóm chức năng quản lý thông tin: gồm quản lý thông tin cá nhân,quản lý danh mục sản phẩm khóa học

+ Nhóm chức năng tiếp nhận và xử lý khóa học

4 Các tác nhân của hệ thống

Các tác nhân của hệ thống bao gồm:

- Khách xem: là người học tập trên ứng dụng, xem thông tin khóa học

- Khách hàng: là những khách thăm đã đăng kí thành viên của hệ thống,đăng kí khóa học

- Người quản trị: điều hành, quản lý và theo dõi mọi hoạt động của hệthống: thêm sửa xóa các thông tin danh mục, thêm sửa xóa thông tin khóahọc

 Đối với các trang PHP khi có yêu cầu xem trang web thì Server sẽ tiếnhành phát sinh trang web đó từ mã nguồn PHP sang mã nguồn HTML,sau đó mới chuyển mã nguồn đó về trình duyệt web để người dùng xem.

Vì các trình duyệt web không thể đọc được các mã nguồn PHP mà chỉđọc được các mã nguồn HTML.

5.2 HTML và CSS

Hình 2: Logo ngôn ngữ Java

 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 Nó có thể được trợ giúp bởicác công nghệ như CSS và các ngôn ngữ kịch bản giống như JavaScript

 Các trình duyệt web nhận tài liệu HTML từ một web server hoặc một kholưu trữ cục bộ và render tài liệu đó thành các trang web đa phương tiện.HTML mô tả cấu trúc của một trang web về mặt ngữ nghĩa và các dấuhiệu ban đầu được bao gồm cho sự xuất hiện của tài liệu

 HTML có thể nhúng các chương trình được viết bằng scripting nhưJavaScript, điều này ảnh hưởng đến hành vi và nội dung của các trangweb Việc bao gồm CSS xác định giao diện và bố cục của nội dung.World Wide Web Consortium (W3C), trước đây là đơn vị bảo trì HTML

và là người duy trì hiện tại của các tiêu chuẩn CSS, đã khuyến khích việc

sử dụng CSS trên HTML trình bày rõ ràng kể từ năm 1997

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

 Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn,vùng chọn có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểukhác Sau đó là nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọnđó

 Mối tương quan giữa HTML và CSS rất mật thiết HTML là ngôn ngữmarkup (nền tảng của site) và CSS định hình phong cách (tất cả những gìtạo nên giao diện website), chúng là không thể tách rời

 XAMPP được ứng dụng trong nhiều lĩnh vực từ học tập đến nâng cấp,thử nghiệm Website của các lập trình viên.

 Xampp là chương trình tạo máy chủ Web (Web Server) được tích hợpsẵ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, chophé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úcnào

Ưu điểm:

- Chạy được trên tất cả các hệ điều hành: Cross-platform, Windows,

- Cấu hình Xampp đơn giản, nhiều chức năng hữu ích cho ngườidùng Ví dụ: giả lập Server, giả lập Mail Server, hỗ trợ SSL trênLocalhost…

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

Nhược điểm:

- Không được hỗ trợ cấu hình Module

- Dung lượng tương đối nặng, dung lượng file cài đặt là 141 Mb,nặng hơn nhiều so với WAMP 41 Mb

- Không có nhiều phiên bản cho các thành phần của server như PHP,Apache, MySQL như WAMP

- Lỗi Xampp thường gặp là Apache không start được, gây bất tiện vìngười dùng thường phải đi sửa lỗi Xampp không start

6.2 Visual Studio Code

Hình 4: Logo phần mềm Visual Studio Code

- Visual Studio Code (VS Code hay VSC) là một trong những trình soạnthảo mã nguồn phổ biến nhất được sử dụng bởi các lập trình viên Nhanh,

nhẹ, hỗ trợ đa nền tảng, nhiều tính năng và là mã nguồn mở chính lànhững ưu điểm vượt trội khiến VS Code ngày càng được ứng dụng rộngrãi

- Là một trình biên tập lập trình code miễn phí dành cho Windows, Linux

và macOS, Visual Studio Code được phát triển bởi Microsoft Nó đượcxem là một sự kết hợp hoàn hảo giữa IDE và Code Editor

- Visual Studio Code hỗ trợ đa dạng các chức năng Debug, đi kèm với Git,

có Syntax Highlighting

- Đặc biệt là tự hoàn thành mã thông minh, Snippets, và khả năng cải tiến

mã nguồn Nhờ tính năng tùy chỉnh, Visual Studio Code cũng cho phépcác lập trình viên thay đổi Theme, phím tắt, và đa dạng các tùy chọnkhác Mặc dù trình soạn thảo Code này tương đối nhẹ, nhưng lại bao gồmcác tính năng mạnh mẽ

- Dù mới được phát hành nhưng VSCode là một trong những Code Editormạnh mẽ và phổ biến nhất dành cho lập trình viên Nhờ hỗ trợ nhiềungôn

ngữ lập trình phổ biến, tích hợp đầy đủ các tính năng và khả năng mởrộng, nên VSCode trở nên cực kì thân thuộc với bất kì lập trình viên nào

Ưu điểm:

- Hỗ trợ nhiều ngôn ngữ lập trình: Visual Studio Code hỗ trợ nhiềungôn ngữ lập trình như C/C++, C#, F#, Visual Basic, HTML, CSS,JavaScript, … Vì vậy, nó dễ dàng phát hiện và đưa ra thông báonếu chương chương trình có lỗi

- Hỗ trợ đa nền tảng: Các trình viết code thông thường chỉ được sửdụng hoặc cho Windows hoặc Linux hoặc Mac Systems NhưngVisual Studio Code có thể hoạt động tốt trên cả ba nền tảng trên

- Cung cấp kho tiện ích mở rộng: Trong trường hợp lập trình viênmuốn sử dụng một ngôn ngữ lập trình không nằm trong số cácngôn ngữ Visual Studio hỗ trợ, họ có thể tải xuống tiện ích mởrộng.

- Kho lưu trữ an toàn: Đi kèm với sự phát triển của lập trình là nhucầu về lưu trữ an toàn Với Visual Studio Code, người dùng có thểhoàn toàn yên tâm vì nó dễ dàng kết nối với Git hoặc bất kỳ kholưu trữ hiện có nào

- Hỗ trợ web: Visual Studio Code hỗ trợ nhiều ứng dụng web Ngoài

ra, nó cũng có một trình soạn thảo và thiết kế website

- Lưu trữ dữ liệu dạng phân cấp: Phần lớn tệp lưu trữ đoạn mã đềuđược đặt trong các thư mục tương tự nhau

- Ngoài ra, Visual Studio Code còn cung cấp các thư mục cho một

số tệp đặc biệt quan trọng

- Hỗ trợ viết Code: Một số đoạn code có thể thay đổi chút ít để thuậntiện cho người dùng Visual Studio Code sẽ đề xuất cho lập trìnhviên các tùy chọn thay thế nếu có

- Xem nhiều file cùng một thời điểm: Hầu hết các trình soạn thảovăn bản code hiện nay đều hỗ trợ người dùng mở nhiều file cũngmột lúc Với ưu điểm này người dùng có thể chuyển đổi qua lạigiữa các file một cách nhanh chóng, dễ dàng dựa trên tab Vớinhiều trình soạn thảo văn bản nâng cao hơn các bạn có thể dễ dàngchỉnh sửa văn bản song song và Visual Studio Code có thể thựchiện tốt việc này, kể cả chiều ngang

- Hỗ trợ thiết bị đầu cuối: Visual Studio Code có tích hợp thiết bịđầu cuối, giúp người dùng khỏi phải chuyển đổi giữa hai màn hìnhhoặc trở về thư mục gốc khi thực hiện các thao tác