Đồ Án Viễn Thông 1 55Dvt.docx

TRƯỜNG ĐẠI HỌC KĨ THUẬT CÔNG NGHIỆP KHOA ĐIỆN TỬ BỘ MÔN ĐIỆN TỬ VIỄN THÔNG  ĐỒ ÁN VIỄN THÔNG 1 Đề tài LẬP TRÌNH MODULE KHÓA HỌC ONLINE TRÊN NỀN TẢNG WEBSITE Sinh viên thực hiện Lê Thị Thanh Hằng[.]

TRƯỜNG ĐẠI HỌC KĨ THUẬT CÔNG NGHIỆP

Sinh viên thực hiện: Lê Thị Thanh Hằng K195520207015

Nguyễn Văn Sơn K195520207045

Giáo viên hướng

dẫn:

Nguyễn Đức Mùi

TRƯỜNG ĐH KTCN CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA ĐIỆN TỬ

BỘ MÔN

ĐIỆN TỬ VIỄN THÔNG

Độc lập - Tự do - Hạnh phúc -o0o -

PHIẾU GIAO ĐỀ TÀI ĐỒ ÁN MÔN HỌC

Ngành: Điện tử viễn thông

Giáo viên hướng dẫn: GV Nguyễn Đức Mùi

Ngày giao đề tài: ……… Ngày hoàn thành: ………

1 Tên đề tài: Lập trình module khóa học online trên nền tảng website

2 Nội dung thuyết minh tính toán:

- Các chức năng chính của sản phẩm đồ án:

- Thiết kế hệ thống:

3 Báo cáo, chương trình:

Sinh viên được yêu cầu nộp các nội dung sau:

 Báo cáo bản word + slide powerpoint

 Mã nguồn chương trình hoặc phần mềm

 Sơ đồ nguyên lý hoạt động trang web

Thông qua phần Demo Đồng ý cho bảo vệ

PHIẾU THÔNG QUA ĐỒ ÁN

(Thực hiện theo lịch của GVHD)

Ngày Nội dung đã thực hiện và cần chuẩn bị cho

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

………

………

………

………

………

………

………

………

Thái Nguyên, ngày….tháng… năm 2023 GIẢNG VIÊN HƯỚNG DẪN (Ký ghi rõ họ tên) NHẬN XÉT CỦA GIẢNG VIÊN CHẤM ………

………

………

………

………

………

………

………

Thái Nguyên, ngày….tháng… năm 2023

GIẢNG VIÊN CHẤM

(Ký ghi rõ họ tên)

2

MỤC LỤC

CHƯƠNG I: MỞ ĐẦU 11

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

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

1.3 Đối tượng khảo sát 12

1.4 Giới hạn và phạm vi nghiên cứu 12

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

1.6 Ý nghĩa của đề tài 13

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

2.1 Khái quát về laravel 14

2.1.1 Một vài nét về laravel 14

2.1.2 Framework là gì? PHP Framework là gì? 15

2.1.3 Mô hình MVC là gì? 16

2.1.4 Lịch sử phát triển của Laravel 17

2.1.5 Ưu điểm và nhược điểm của Laravel 17

2.1.6 Những tính năng hữu ích của Laravel 19

2.1.7 Hướng dẫn cài đặt Laravel 19

2.2 Khái quát về Vuejs 20

2.2.1 Định nghĩa Vuejs là gì? 20

2.2.2 Lịch sử ra đời 21

2.2.3 Lý do nên sử dụng Vuejs là gì? 22

2.2.4 Cài đặt Vuejs như thế nào? 22

2.2.5 Một số khái niệm cần nắm vững của Vuejs là gì? 23

2.2.6 Ưu, nhược điểm của vuejs 24

2.3 Laravel kết hợp với Vuejs 25

3.1 Giao diện của trang web 27

3.1.1 Chia bố cục cho trang 27

3.1.2 Sử dụng thư viện Pinia 28

3.1.3 Thiết kế đa giao diện 28

3.2 Cơ sở dữ liệu (Database) 30

3.2.1 Migration thiết kế cơ sở dữ liệu 30

3.3.2 Tạo các Seeding để tạo dữ liệu kiểu mẫu ban đầu 32

3.3.3 Sử dụng controllers và routing trong laravel 34

3.3.4 Sử dụng Axios 35

3.3 Lưu đồ thuật toán 37

3.4 Giao diện trang web sau lập trình 37

CHƯƠNG 4: KẾT LUẬN 40

 Kết quả đạt được: 40

DANH MỤC HÌNH ẢNH Hình 2 1: laravel 14

Hình 2 2: Framwork 15

Hình 2 3: ASP.NET MVC 16

Hình 2 4: Ưu, nhược điểm của laravel 17

Hình 2 5: Tính năng hữu ích của Laravel 19

Hình 2 6: Vue.js 21

Hình 2 7: Lịch sử ra đời vuejs 21

Hình 3 1: Bố cục trang web 27

Hình 3 2: Giao diện hiển thị trên điện thoại 29

Hình 3 3: Giao diện hiện thị trên màn hình máy tính 29

4

Hình 3 4: Thông số tạo database 30

Hình 3 5: Bảng dữ liệu được tạo 31

Hình 3 6: Hiển thị khóa ngoại database 32

Hình 3 7: Data khóa học 33

Hình 3 8: Controllers và routing trong laravel 34

Hình 3 9: Get API 35

Hình 3 10: Render API ra trang quản lý khóa học 36

Hình 3 11: BodyCell 36

Hình 3 12: Lưu đồ thuật toán 37

Hình 3 13: Giao diện trang web 37

Hình 3 14: Chức năng quản trị 38

Hình 3 15: Hiển thị khóa học 38

Hình 3 16: Thêm khóa học 39

Hình 3 17: Update khóa học 39

LỜI CẢM ƠN

Qua một thời gian nghiên cứu và tìm hiểu và thực hiện đến nay đề tài

“Lập trình moduls khóa học online trên nền tảng website” đã hoàn thành.

Trong suốt quá trình thực hiện đề tài, nhóm đề tài đã nhận được rất nhiều sựgiúp đỡ nhiệt tình của thầy cô và các bạn

Nhóm đề tài xin chân thành cảm ơn các thầy các cô đã trang bị những kiếnthức quý báu cho nhóm trong suốt quá trình học tập tại trường Đại học kĩ thuậtCông Nghiệp Đặc biệt là các thầy các cô trong khoa Điện Tử Viễn Thông đã tậntình giảng dạy, chỉ bảo, trang bị cho nhóm những kiến thức cần thiết nhất trongsuốt quá trình học tập và nghiên cứu tại khoa, thầy cô đã tạo điều kiện thuận lợigiúp nhóm thực hiện đề tài này

Nhóm đề tài xin cảm ơn giáo viên hướng dẫn, thầy đã tận tình hướng dẫn,chỉ bảo và giúp đỡ nhóm trong suốt thời gian qua Nhờ vào sự giúp đỡ chỉ bảocủa thầy mà nhóm đã hoàn thành đồ án viễn thông 1

Nhóm xin gửi lời cảm ơn gia đình và bạn bè đã luôn luôn động viên, ủng

hộ nhóm trong suốt quá trình thực hiện đồ án viễn thông 1 Mặc dù nhóm đã cốgắng nỗ lực hết mình để thực hiện để tài nhưng nhóm đề tài không thể tránhkhỏi thiếu sót, kính mong sự đóng góp và hướng dẫn của các thầy cô Nhóm đềtài xin chân thành cảm ơn!

6

CHƯƠNG I: MỞ ĐẦU

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

Công nghệ thông tin là một trong những lĩnh vực bức thiết không thể thiếutrong guồng máy kinh tế của nhiều nước trên thế giới đặc biệt là những nướcđang phát triển như Việt Nam hiện nay

Trải qua thời kì đại dịch covid 2019 chúng ta càng nhận thức sâu sắc thêmtầm quan trọng của lĩnh vực ứng dụng công nghệ thông tin Một trong số đó làhình thức giảng dạy trực tuyến online Đây là hình thức truyền tải thông tinnhanh chóng, hiệu quả và chi phí thấp Giúp người dùng có nhu cầu tiếp cậncho mình một khóa học thông qua website trực tuyến, không mất nhiều thờigian

Với nhiều thành quả quan trọng, công nghệ thông tin đã được ứng dụngrộng rãi trong nhiều lĩnh vực, trở thành một trong những yếu tố quan trọng nhấtcủa sự phát triển kinh tế - xã hội, an ninh - quốc phòng Việc đẩy mạnh ứngdụng công nghệ thông tin sẽ làm thay đổi tác phong làm việc, nâng cao năngsuất lao động, nâng cao dân trí,…Chính vì thế, công nghệ thông tin sẽ trở thànhnền kinh tế mũi nhọn của nước ta trong những năm tới đây Qua quá trình đượchọc trên lớp và tìm hiểu về môn học lập trình Laravel kết hợp với Vuejs nhóm

em đã áp dụng những kiến thức đã học để xây dựng đề tài “Lập trình moduls khóa học online trên nền tảng website” với sự hướng dẫn tận tình của giáo

viên hướng dẫn

Ngoài ra làm báo cáo chuyên đề này cũng giúp cho các thành viên trongnhóm nâng cao khả năng lập trình và rút được nhiều kinh nghiệm cho cáctrang web sau Do kiến thức và kinh nghiệm lập trình, thiết kế còn hạn chế nênphần mềm của nhóm em còn có nhiều thiếu xót Rất mong được sự đóng gópcủa thầy cô và các bạn để phần mềm của nhóm được hoàn thiện hơn nữa

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

Người sử dụng là tất cả những người có nhu cầu học tập nhưng không cóthời gian để đến địa điểm học trực tiếp

Công cụ: Microsof Visual Studio 2019, Laragon, Node.js, Bootstrap, Ant

1.3 Đối tượng khảo sát

Người cung cấp khóa học: Người quản lý trang web

1.4 Giới hạn và phạm vi nghiên cứu

Đây là trang web nhằm tạo ra và giới thiệu các khóa học cho người sửdụng, với thông tin chi tiết và nhanh chóng Website nhằm:

Giúp người dùng:

 Tìm kiếm những thông tin về khóa học từ hệ thống và học

 Việc giảng dạy trực tiếp giúp khách hàng tiết kiệm thời gian , chi phí từ

đó được giảm xuống so với việc tìm đến trung tâm học

 Linh động với người sử dụng không gò bó về thời gian rảnh của mỗingười

 Tạo tài khoản để học tập dễ dàng và nhanh chóng

 Theo dõi tiến trình học và gửi ý kiến đóng góp phản hồi lại cho hệ thống

Giúp người quản lý:

 Trong vấn đề quản lý người dùng, lượng người truy cập, quản lý thông tincũng như quản lý về nguồn tìm kiếm của khách hàng

 Thêm sửa xóa thông tin khóa học và thông tin người dùng, kiểm tra và xửlý

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

 Tìm kiếm tài liệu về lập trình Laravel kết hợp với Vuejs

 Tham khảo các website học trực tiếp trên mạng

 Vận dụng vào việc thiết kế và xây dựng ứng dụng web

 Thu thập các tài liệu sau đó coding thành website trên visual studio 2019

1.6 Ý nghĩa của đề tài

Đề tài lập trình trang web về học online có ý nghĩa rất lớn trong thời đạicông nghệ số hóa hiện nay Nhờ vào trang web này, người học có thể tiếp cậnđược với nhiều khóa học và tài liệu học tập online từ khắp mọi nơi trên thế giới.Đồng thời, trang web cũng cung cấp các công cụ học tập trực tuyến, baogồm bài kiểm tra và bài tập để giúp người học đánh giá và cải thiện kiến thứccủa mình Với sự phát triển của công nghệ thông tin và internet, học online đangtrở thành một xu hướng tất yếu trong giáo dục và đào tạo Trang web học onlinegiúp cho người học có thể truy cập vào tài liệu học tập mỗi lúc mọi nơi thôngqua việc kết nối internet trên các thiết bị di động, máy tính xách tay, hoặc máytính để bàn

Điều này mang lại sự tiện lợi, linh động và tiết kiệm thời gian cho ngườihọc trong quá trình học tập Ngoài ra, trang web học online còn giúp cho giảngviên và tổ chức giáo dục có thể đưa ra các khóa học trực tuyến, chia sẻ kiến thức

và kinh nghiệm giảng dạy một cách dễ dàng và tiện lợi đến với học viên ở mọinơi trên thế giới

Trang web học online còn giúp cho tổ chức giáo dục có thể tối ưu hóa kinhphí của mình bằng cách giảm thiểu chi phí về vật tư và không gian học tậptruyền thống Bạn có thể xây dựng các nội dung học tập đa dạng trên trang webnày, đảm bảo tính thực tiễn và ứng dụng cao giúp các học viên cải thiện kiếnthức và kỹ năng Vì vậy, đề tài lập trình trang web về học online mang lại rấtnhiều lợi ích cho học viên, giảng viên và tổ chức giáo dục

14

Hình 2 1: laravel

Laravel là một framework PHP với nhiều ưu điểm vượt trội

Những lý do khiến Laravel trở nên rộng rãi:

 Cú pháp dễ hiểu – rõ ràng

 Hệ thống đóng gói modular và quản lý gói phụ thuộc

 Nhiều cách khác nhau để truy cập vào các cơ sở dữ liệu quan hệ

 Nhiều tiện ích khác nhau hỗ trợ việc triển khai vào bảo trì ứng dụng

2.1.2 Framework là gì? PHP Framework là gì?

Hình 2 2: Framwork

Framework - thư viện với các tài nguyên không thể thiếu với các lập trìnhviên Framework – thư viện với các tài nguyên không thể thiếu với các lập trìnhviên Framework chính là một thư viện với các tài nguyên có sẵn cho từng lĩnhvực để lập trình viên sử dụng thay vì phải tự thiết kế Có Framework, lập trìnhviên chỉ tìm hiểu và khai thác những tài nguyên đó, gắn kết chúng lại với nhau

và hoàn chỉnh sản phẩm của mình Đối với lập trình viên trong mỗi một lĩnhvực, họ cần phải xây dựng các lớp chương trình để xây dựng nên những phầnmềm, ứng dụng thành phẩm

PHP framework là thư viện làm cho sự phát triển của những ứng dụng

web viết bằng ngôn ngữ PHP trở nên trôi chảy hơn Bằng cách cung cấp 1 cấutrúc cơ bản để xây dựng những ứng dụng đó Hay nói cách khác, PHPframework giúp bạn thúc đẩy nhanh chóng quá trình phát triển ứng dụng Giúpbạn tiết kiệm được thời gian, tăng sự ổn định cho ứng dụng Giảm thiểu số lầnphải viết lại code cho lập trình viên

16

2.1.3 Mô hình MVC là gì?

Hình 2 3: ASP.NET MVC

MVC có khả năng tách bạch giao diện người dùng với nguyên tắc nghiệp

vụ lập trình

MVC (Model-View-Controller) là mẫu kiến trúc phần mềm trên máy tính

nhằm mục đích tạo lập giao diện cho người dùng Theo đó, hệ thống MVC đượcchia thành ba phần có khả năng tương tác với nhau và tách biệt các nguyên tắcnghiệp vụ với giao diện người dùng Ba thành phần ấy bao gồm:

 Controller: Giữ nhiệm vụ nhận điều hướng các yêu cầu từ người

dùng và gọi đúng những phương thức xử lý chúng

 Model: Là thành phần chứa tất cả các nghiệp vụ logic, phương thức

xử lý, truy xuất database, đối tượng mô tả dữ liệu như các Class, hàm

xử lý…

 View: Đảm nhận việc hiển thị thông tin, tương tác với người dùng,

nơi chứa tất cả các đối tượng GUI như textbox, images…

Bằng cách này, thông tin nội hàm được xử lý tách biệt với phần thông tinxuất hiện trong giao diện người dùng Bảo đảm các nguyên tắc nghề nghiệp củalập trình viên

2.1.4 Lịch sử phát triển của Laravel

Laravel là framework được phát triển đến phiên bản 5.8 với nhiều cải tiến.Phiên bản đầu tiên của Laravel được Taylor Otwell tạo ra vào tháng 6 năm

2011 như một giải pháp thay thế cho CodeIgniter Với framework này, lập trìnhviên được hỗ trợ nhiều tính năng mới mẻ, hiệu quả và dễ thực hiện hơn Cho đếnnay, Laravel đã được phát triển đến phiên bản 5.8 với nhiều cải tiến mới mẻhơn

2.1.5 Ưu điểm và nhược điểm của Laravel

Hình 2 4: Ưu, nhược điểm của laravel

Laravel có rất nhiều ưu điểm hữu ích cho người dùng nhưng lại tồn tại ítkhuyết điểm

 Ưu điểm của Laravel là gì?

- Sử dụng các tính năng mới nhất của PHP:

18

Sử dụng Laravel 8x giúp các lập trình viên tiếp cận những tính năng mớinhất mà PHP cung cấp, nhất là đối với Namespaces, Interfaces, Overloading,Anonymous functions và Shorter array syntax.

- Nguồn tài nguyên vô cùng lớn và sẵn có:

Nguồn tài nguyên của Laravel rất thân thiện với đa dạng tài liệu khác

nhau để tham khảo Các phiên bản được phát hành đều có nguồn tài liệu phùhợp với ứng dụng của mình

- Tích hợp với dịch vụ mail:

Lavarel là framework được trang bị API sạch trên thư viện SwiftMailer,

do đó, có thể gửi thư qua các dịch vụ dựa trên nền tảng đám mây hoặc local

- Tốc độ xử lý nhanh:

Laravel hỗ trợ hiệu quả cho việc tạo lập website hay các dự án lớn trongthời gian ngắn Vì vậy, nó được các công ty công nghệ và lập trình viên sửdụng rộng rãi để phát triển các sản phẩm của họ

- Dễ sử dụng:

Laravel được đón nhận và trở nên sử dụng phổ biến vì nó rất dễ sử

dụng Thường chỉ mất vài giờ để thực hiện một dự án nhỏ với vốn kiến thức

cơ bản nhất về lập trình với PHP

- Tính bảo mật cao:

Laravel cung cấp sẵn cho người dùng các tính năng bảo mật mạnh mẽ

để người dùng hoàn toàn tập trung vào việc phát triển sản phẩm của mình:

 Sử dụng PDO để chống lại tấn công SQL Injection

 Sử dụng một field token ẩn để chống lại tấn công kiểu CSRF

Mặc định đều được Laravel escape các biến được đưa ra view mặc định,

do đó có thể tránh được tấn công XSS

 Nhược điểm của Laravel là gì?

So với các PHP framework khác, Laravel bộc lộ khá ít nhược điểm Vấn đềlớn nhất có thể kể đến của framework này là thiếu sự liên kết giữa các phiênbản, nếu cố cập nhật code, có thể khiến cho ứng dụng bị gián đoạn hoặc phá vỡ Bên cạnh đó, Lavarel cũng quá nặng cho ứng dụng di động, khiến việc tảitrang trở nên chậm chạp

2.1.6 Những tính năng hữu ích của Laravel

Cài đặt Laravel không khó khăn đối với những người đã có kiến thức cơbản về lập trình

Hình 2 5: Tính năng hữu ích của Laravel

Những tính năng tuyệt vời có thể kể đến của Laravel là:

- Composer: sử dụng để nâng cấp, cài đặt…

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

- Restful API: hỗ trợ biến Laravel thành một web service API

- Artisan: cung cấp các lệnh cần thiết để phát triển ứng dụng

- View: giúp code sạch sẽ hơn rất nhiều

- Migrations: hỗ trợ tạo các trường trong cơ sở dữ liệu, thêm các cột trongbảng, tạo mối quan hệ giữa các bảng, hỗ trợ quản lý cơ sở dữ liệu

- Authentication: cung cấp sẵn các tính năng đăng nhập, đăng ký, quênmật khẩu…

- Unit Testing: hỗ trợ test lỗi để sửa chữa

2.1.7 Hướng dẫn cài đặt Laravel

Thao tác cài đặt Laravel không quá phức tạp Các bạn có thể tham khảochi tiết bên dưới đây:

 Yêu cầu hệ thống để cài đặt Laravel : Để có thể cài Laravel, bạn phải đáp

ứng được các yêu cầu bắt buộc sau:

 PHP >= 5.5.9

 OpenSSL PHP Extension

 PDO PHP Extension

20

 Mbstring PHP Extension

 Tokenizer PHP Extension

Đối với Windows: sử dụng phần mềm tạo Webserver trên Windows như

Openserver, Wamp, Xampp, Ampps…

 Cài đặt Laravel:

- Thông qua Laravel Installer

Bạn mở Terminal (CMD hoặc Git Bash), gõ dòng lệnh sau: “composer

global require “laravel/installer””

Đối với Windows, đường dẫn là “%appdata%Composervendorbin”

Đối với macOS và Linux, đường dẫn là “~/.composer/vendor/bin”

Sau khi cài đặt xong, bạn di chuyển vào thư mục htdocs của XAMPP Sau

đó mở cửa sổ lệnh (đối với windows thì nhấp Shift + chuột phải và chọnCommand Window Here hoặc Git Bash Here) và gõ: “laravel new blog” Trong

đó blog chính là tên thư mục laravel project của bạn Vậy là chúng ta đã cài đặtxong Laravel rồi đấy Thông qua Composer Di chuyển thẳng vào thư mụchtdocs của XAMPP, tại đây mở cửa sổ lệnh và gõ “composer create-project –prefer-dist laravel/laravel blog” Trong đó blog chính là tên thư mục laravelproject của bạn

- Sử dụng framework Laravel

Sau khi cài đặt hoàn tất, mở WebServer của bạn lên, đến thư mục publictrong thư mục Laravel project hoặc từ thư mục Laravel project, gõ lệnh: “phpartisan serve” Khi đó trên màn hình console xuất hiện thông báo: ”Laraveldevelopment server started on http://localhost:8000/”

Vào trình duyệt gõ: http://localhost:8000 Như vậy là bạn đã có thể bắt đâu

cũng như khuyến khích làm việc để phát triển dễ dàng hơn các ứng dụng theotừng bước một.

Hình 2 6: Vue.js

Một khi đã phát triển lớp giao diện (view layer) thì người dùng chỉ cần sửdụng loại thư viện lõi của Vue Ngoài ra, nếu như bạn kết hợp với các kỹ thuậtthiên hướng hiện đại thì Vue cũng có thể đáp ứng được dễ dàng mọi nhu cầu xâydựng ứng dụng của một trang với độ phức tạp cao hơn

ý đến những khái niệm bổ sung”

Đây là phát biểu được xem là bước đệm giúp cho Vue đã và đang có mặttại thời điểm hiện tại Vue đã được phát hành vào đầu năm 2014 và dự án này đãđược tăng tải lên HackerNew, Echo Js ngay trong ngày đầu tiên ra mắt

22