1. Trang chủ
  2. » Luận Văn - Báo Cáo

Thiết kế, xây dựng và triển khai website saigon academy sử dụng laravel

37 4 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Thiết kế, xây dựng và triển khai website Saigon Academy sử dụng Laravel
Người hướng dẫn Phạm Xuân Lãng
Trường học Trường Đại học Công nghệ Thông tin, Đại học Quốc gia TP Hồ Chí Minh
Chuyên ngành Công nghệ Thông tin
Thể loại Báo cáo thực tập tốt nghiệp
Năm xuất bản 2023
Thành phố TP Hồ Chí Minh
Định dạng
Số trang 37
Dung lượng 2,75 MB

Các công cụ chuyển đổi và chỉnh sửa cho tài liệu này

Cấu trúc

  • 1.1 Tổng quan về Tập đoàn giáo dục Nguyễn Hoàng (8)
  • 1.2 Mục tiêu thực tập (8)
  • 2.1 Giới thiệu về Laravel (9)
  • 2.2 Các tính năng nổi bật của Laravel (11)
  • 2.3 Thực hiện dự án với Laravel (12)
  • 2.4 Lịch làm việc (12)
  • 3.1 Tổng quan về Saigon Academy (0)
  • 3.2 Mục tiêu và tính năng trang web (0)
    • 3.2.1 Mục tiêu (0)
    • 3.2.2 Các tính năng (0)
  • 3.3 Các yêu cầu đặt ra cho việc thiết kế, xây dựng và triển khai website Saigon Academy (0)
  • 4.1 Phân tích yêu cầu của website Saigon Academy (18)
    • 4.1.1 Yêu cầu về môi trường (18)
    • 4.1.2 Yêu cầu về giao diện (18)
    • 4.1.3 Yêu cầu về chức năng (18)
  • 4.2 Phân tích hệ thống (19)
    • 4.2.1 Sơ đồ phân rã chức năng (19)
    • 4.2.2 Xây dựng biểu đồ Use Case (19)
  • 4.3 Thiết kế cấu trúc thông tin và giao diện người dùng (24)
    • 4.3.1 Cấu trúc thông tin (24)
    • 4.3.2 Giao diện người dùng (25)
  • 5.1 Cài đặt và cấu hình Laravel (28)
    • 5.1.1 Cài đặt Laravel (28)
    • 5.1.2 Cấu hình Laravel (29)
  • 5.2 Xây dựng chức năng và giao diện website (29)
    • 5.2.1 Giao diện người dùng (29)
    • 5.2.2 Giao diện trang quản trị (34)
  • TÀI LIỆU THAM KHẢO (37)

Nội dung

Tổng quan về Tập đoàn giáo dục Nguyễn Hoàng

Tập đoàn giáo dục Nguyễn Hoàng là một trong những thương hiệu hàng đầu trong lĩnh vực giáo dục tại Việt Nam, với hơn 20 năm kinh nghiệm Sự uy tín và chất lượng của tập đoàn đã thu hút sự tin tưởng và lựa chọn từ nhiều người Các đơn vị thành viên của Tập đoàn Nguyễn Hoàng đóng góp vào sự phát triển chung của hệ thống giáo dục nước nhà.

- Trường Đại học Quốc tế Hồng Bàng (HIU)

- Trường Đại học Hoa Sen (HSU)

- Trường Đại học Gia Định (GDU)

- Trường Đại học Bà Rịa - Vũng Tàu (BVU)

- Trường Đại học Công nghệ Miền Đông (MIT University)

- Trường Cao đẳng Hoa Sen (HSC)

- Hệ thống Trường Quốc tế Bắc Mỹ (SNA)

- Hệ Thống Trường Quốc tế Song ngữ Học viện Anh Quốc (UK Academy)

- Hệ thống Trường Hội nhập Quốc tế (iSchool)

- Hệ thống Trường Mầm non Quốc Tế Saigon Academy (SGA)

Khối văn phòng Tập đoàn giáo dục Nguyễn Hoàng bao gồm Ban Công nghệ thông tin, có nhiệm vụ phát triển và quản lý các hệ thống cũng như ứng dụng trong lĩnh vực công nghệ thông tin.

Thực tập tại Ban Công nghệ thông tin của Tập đoàn giáo dục Nguyễn Hoàng mang đến cơ hội tuyệt vời cho những ai đam mê công nghệ và muốn nâng cao kỹ năng Môi trường làm việc chuyên nghiệp và hiện đại tại đây cho phép thực tập sinh tham gia vào các dự án thực tế, góp phần vào phát triển sản phẩm công nghệ mới Bên cạnh đó, thực tập còn giúp nâng cao kỹ năng mềm như làm việc nhóm, giao tiếp và quản lý thời gian, những yếu tố quan trọng cho sự nghiệp và cuộc sống.

Mục tiêu thực tập

Mục tiêu chính là tiếp cận môi trường làm việc thực tế để quan sát và hiểu rõ yêu cầu của nghề nghiệp, từ đó tự đánh giá ưu nhược điểm của bản thân Điều này giúp lập kế hoạch phát huy và khắc phục trước khi chính thức bước vào công việc Việc tạo ra cái nhìn tổng quan về môi trường thực tế sẽ cung cấp tư liệu quý giá cho mỗi cá nhân.

Giới thiệu về Laravel

Laravel là một framework web mã nguồn mở được viết bằng PHP, phát triển bởi Taylor Otwell và ra mắt lần đầu vào năm 2011 Framework này cung cấp cho các nhà phát triển một phương pháp linh hoạt và dễ dàng để xây dựng ứng dụng web phức tạp, với các tính năng nổi bật như định tuyến, giao diện dòng lệnh Artisan, Active Record, phân quyền, xử lý lỗi và cập nhật theo thời gian thực Laravel được thiết kế nhằm tối ưu hóa hiệu suất và đơn giản hóa quy trình phát triển, đồng thời có một cộng đồng phát triển rộng lớn cùng với nhiều tài liệu hữu ích, giúp các nhà phát triển nhanh chóng giải quyết vấn đề và nâng cao kỹ năng.

Hình 1 Giới thiệu về Laravel

 Dùng những tính năng mới nhất của PHP

Laravel nổi bật với việc tận dụng những tính năng mới nhất của PHP, như Interfaces, Namespaces, Anonymous functions, Overloading và cú pháp mảng ngắn gọn Hiện nay, có nhiều bộ CMS được phát triển trên nền tảng Laravel, bao gồm cả mã nguồn mở và thương mại, từ những bộ đơn giản đến những bộ mạnh mẽ.

 Tài nguyên lớn, sẵn có

Laravel có nguồn tài nguyên lớn, sẵn có Chúng đều rất thân thiện với người dùng

Tất cả các phiên bản của công cụ này đều đi kèm với tài liệu chi tiết, giúp bạn dễ dàng tìm hiểu về các phương pháp, phong cách lập trình và các lớp.

Ngày nay, các ứng dụng website cần thông báo về các ưu đãi và giao dịch mới cho người dùng, trong đó việc đăng ký trở thành người dùng mới rất quan trọng Thư viện SwiftMailer của Framework hiện có API sạch với các Driver cho Mailgun, SMTP, SparkPost, chức năng “mail” của PHP, Mandrill, “sendmail” và Amazon SES, giúp gửi thư qua dịch vụ local hoặc dịch vụ dựa trên đám mây.

 Hỗ trợ những cache backend phổ biến

Framework Laravel hỗ trợ những cache backend Ưu điểm này giúp bạn có thể dễ dàng tùy chỉnh được nhiều cấu hình cache

 Tốc độ xử lý nhanh

Laravel hỗ trợ hiệu quả trong việc lập dự án lớn và tạo website nhanh chóng, vì vậy nó được các lập trình viên và công ty công nghệ ưa chuộng để phát triển sản phẩm.

Chỉ cần có vốn kiến thức cơ bản về lập trình PHP và bỏ ra vài giờ là đã có thể thực hiện được dự án nhỏ

Laravel nổi bật với tính bảo mật cao, là một trong những ưu điểm được yêu thích nhất hiện nay Công cụ này cung cấp nhiều tính năng bảo mật mạnh mẽ, giúp người dùng yên tâm tập trung vào việc phát triển sản phẩm Laravel sử dụng PDO để chống lại các cuộc tấn công SQL Injection, áp dụng field token ẩn để ngăn chặn tấn công CSRF, và đặc biệt, các biến được escape trong các view mặc định, giúp tránh được các cuộc tấn công XSS.

 Không hỗ trợ chức năng thanh toán

Laravel không hỗ trợ chức năng thanh toán, điều này gây khó khăn và tốn nhiều công sức cho người dùng khi muốn tích hợp tính năng thanh toán vào sản phẩm của mình.

 Giữa những phiên bản thiếu sự liên tục

Công cụ này thiếu khả năng chuyển đổi liền mạch từ Laravel 4 sang 5, và việc cập nhật mã code có thể dẫn đến việc hủy hoại hoặc làm hỏng ứng dụng.

Một số thành phần trong Laravel, như dependency injection, không được thiết kế tối ưu, khiến nó không phải là lựa chọn lý tưởng cho các nhà phát triển nghiệp dư.

Nhưng, công cụ này hiện vẫn đang được NPH cải hiện Phiên bản mới sẽ tốt hơn nhiều bản cũ và cũng ít sai sót hơn

 Một số nâng cấp của Laravel có thể có vấn đề

Nâng cấp Laravel có thể gây ra vấn đề cho nhiều nhà phát triển, đây cũng là một nhược điểm chung của các PHP Framework Do đó, trước khi tiến hành nâng cấp ứng dụng web hoặc di động, các nhà phát triển cần phải có những biện pháp phòng ngừa thích hợp.

Khi phát triển ứng dụng di động, việc tải lại trang có thể trở nên nặng nề hơn so với các trang web thông thường Framework Laravel thường được coi là quá nặng cho các ứng dụng di động Do đó, các nhà phát triển web nên xem xét sử dụng các Framework nhẹ hơn như Backend JSON API để cải thiện hiệu suất.

Các tính năng nổi bật của Laravel

 Authorization cùng với Program Logic Technique

Công cụ này giúp kiểm soát hiệu quả truy cập vào tài nguyên và sắp xếp logic phân quyền Thiết kế mới của Laravel sẽ bao gồm cả mã kiểm tra tính hợp lệ, từ đó rút ngắn thời gian phát triển mã nguồn.

Blade Templating Engine là một trong những tính năng nổi bật nhất của Laravel, được người dùng đánh giá cao nhờ vào sự dễ hiểu và tiện lợi khi làm việc với HTML và PHP.

- Hơn nữa Laravel web development còn cho phép chúng ta soạn thảo mã PHP trong layout shape Điều này giúp giảm thiểu được những khó khăn khi dùng Laravel

- Công cụ này chính là sự kết hợp hài hòa giữa hướng dẫn bằng video trả phí và miễn phí Laracasts giúp chúng ta hiểu được cách dùng Laravel

 Hỗ trợ tập tin khác nhau

- Laravel còn hỗ trợ nhiều tập tin khác nhau Cụ thể là tính năng local support network cho những document service dùng hệ thống Fly

- Tương tự, những chọn lựa cloud-based inventories đã được NPH tạo ra gần hơn với cloud-based platforms

- Laravel bảo đảm an toàn cho các trang web Application Công cụ này dùng mật khẩu băm Bcrypt, đồng thời không lưu password ở dạng văn bản thuần túy,

- Laravel dùng SQL statement khiến cho những Injection attack khó có thể tiếp cận

Cụ thể, công cụ cung cấp phương pháp thoát khỏi user input giúp tránh Injection

Artisan là một tính năng quan trọng trong Laravel, cho phép lập trình viên sử dụng dòng lệnh để tạo và quản lý các tác vụ liên quan đến Framework Tính năng này giúp lập trình viên tiết kiệm thời gian và công sức trong việc xử lý những công việc lặp đi lặp lại, từ đó nâng cao hiệu suất làm việc.

Sau mỗi lần thay đổi, Hệ thống Di chuyển Cơ sở Dữ liệu giúp phần mềm cải thiện cấu trúc cơ sở dữ liệu mà không làm mất mã nguồn Công cụ này còn cho phép thay đổi cấu trúc thông qua việc sử dụng mã PHP.

Laravel Schema cung cấp khả năng tạo bảng cơ sở dữ liệu, cho phép người dùng chèn cột và chỉ mục, mang lại quyền kiểm soát toàn diện đối với cơ sở dữ liệu.

Thực hiện dự án với Laravel

Sau vài tuần tìm hiểu và thực hiện các dự án nhỏ, tôi đã nắm vững kiến thức cơ bản về Laravel Nhờ sự hướng dẫn tận tình của cán bộ, tôi đã áp dụng những kiến thức đó để phát triển dự án SaiGon Academy, một website giáo dục thuộc hệ thống của tập đoàn.

Lịch làm việc

Ba ̉ng 1 Lịch làm việc

Thời gian Nội dung công việc Kết quả thực hiện

- Tìm hiểu và cấu hình websever trên ubuntu

- Cài đặt composer và tìm hiểu Laravel

- Biết cách cài đặt và chạy ubuntu trên máy ảo VirtualBox

- Hiểu được cách cài đặt các phần mềm như PHP8.1, Nginx

- Hiểu được cấu trúc cơ bản của một dự án sử dụng Laravel

- Tìm hiểu và xây dựng Website với Laravel

- Xây dựng website quản lý sân bóng

- Hiểu được các thành phần trong dự án sử dụng Laravel: Route, Controller, View, Model

- Tạo được web demo quản lý sinh viên với các chức năng cơ bản như :

+ Tạo form nhập thông tin sinh viên

+ Hiển thị danh dánh sinh viên có các chức năng thêm, sửa, xóa

- Xây dựng Webiste quản lý sân bóng đá với một số chức năng:

+Tạo database + Hiển thị thông tin sân bóng theo danh mục

- Tiếp tục xây dựng Website quản lý bóng đá

- Làm thêm được chức năng thêm, xóa , sửa sân bóng

- Hiển thị danh sách đặt sân theo khu vực và ngày đặt sân

- Hiển thị timeline đặt sân theo khu vực

- Hoàn thiện Website quản lý bóng đá

- Xây dựng khung giao diện Website https://saigonacademy.co m Đối với Website quản lí bóng đá:

- Sửa lại giao diện Website người dùng

- Hoàn thiện các chức năng thêm sửa xóa đặt sân

- Hiển thị timeline đặt sân

- Hiển thị danh dách đặt sân của khách hàng Đối với Website saigonacademy:

- Hoàn thiện khung giao diện cơ bản với các thành phần: Header, body, footer

Tiếp tục hoàn thiện Webiste saigonacademy

- Xây dựng giao diện website phía admin và người dùng

- Làm được chức năng chuyển đổi ngôn ngữ cơ bản – nội dung tĩnh

- Hoàn thiện các chức năng bên admin như: Thêm sửa xóa intro, admissions, new, programs, language, contact, feedback

- Hoàn thành Website saigonacademy và deploy dự án lên web server

- Chỉnh sửa lại giao diện phía người dùng, thêm hiệu ứng

- Reponsive cho trang web tương thích với mobile, web

- Thêm chức năng dịch bài viết và hoàn thiện các chức năng còn lại phía admin

- Cài đặt thành công Redhat, php8.1, phpmyadmin, mariaDB

- Deloy dự án saigonacademy lên web sever

- Tìm hiểu về Framework Next.js

- Nắm được một số câu lệnh cơ bản ở hệ điều hành Linux

- Hoàn thành deploy dự án saigonacademy lên Redhat sử dụng nginx, php8.1,mariadb

- Hiểu được cấu trúc cơ bản của một dự án sử dụng Next.js

- Biết được ưu và nhược điểm của nextjs so với framework khác

- Tiếp tục tìm hiểu Laravel

- Sửa lại giao diện Website saigonacademy

- Sửa lại file upload ảnh

- Hiểu sâu hơn về Framework Laravel

- Chỉnh sửa lại giao diện Website saigonacademy cho cân đối và thân thiện hơn

- Hoàn thành chỉnh sửa file upload cho hình ảnh Tạo thư mục và quản lý hình ảnh trước khi đưa vào database

- Tiếp tục tìm hiểu và xây dựng website với Laravel

- Cải thiện chất lượng website saigonacademy

- Viết cáo báo thực tập

- Cải thiện được chất lượng website saigonacademy với các thông số:

+ Performance: 95 + Accessibility: 98 + Best Pratices:92 + SEO: 100

- Tiếp tục tìm hiểu và xây dựng website với Laravel

- Viết báo cáo thực tập

- Hoàn thành báo cáo thực tập

TỔNG QUAN VỀ WEBSITE SAIGON ACADEMY

2.5 Tổng quan về Saigon Academy

Trường Mầm non Quốc Tế Saigon Academy (SGA) tại Thành phố Hồ Chí Minh là đơn vị tiên phong trong việc áp dụng Chương trình giáo dục sớm theo Phương án 0 tuổi, mang đến cho trẻ em môi trường học tập chất lượng và phát triển toàn diện.

Phương pháp dạy linh hoạt và học qua trò chơi giúp trẻ phát triển tư duy và khai thác tối đa tiềm năng trí tuệ, từ đó nâng cao các kỹ năng ngôn ngữ, tư duy, thể chất, kỹ năng sống và năng khiếu Sự kết hợp giữa chương trình Anh ngữ mầm non và giáo dục sớm thông qua “Công thức vàng” CLIL + E.C.E + giáo trình tiếng Anh thực nghiệm giúp học sinh SGA phát triển kỹ năng Anh ngữ tự nhiên hàng ngày, tạo nền tảng vững chắc cho việc chuyển tiếp vào trường quốc tế và du học sau này.

2.6 Mục tiêu và tính năng trang web

Trang web của Hệ thống Trường Mầm non Quốc Tế Saigon Academy được thiết kế để giới thiệu và quảng bá thông tin về trường, bao gồm các dịch vụ, chương trình giảng dạy, cơ sở vật chất, đội ngũ giáo viên và các hoạt động ngoại khóa dành cho học sinh.

Trang web của trường mầm non cung cấp thông tin hữu ích cho phụ huynh trong quá trình đăng ký nhập học, giúp họ và học sinh dễ dàng tiếp cận chương trình giảng dạy, các sự kiện, chia sẻ kinh nghiệm giáo dục, cũng như đánh giá kết quả học tập của các em.

Các tính năng chính của website Saigon Academy bao gồm:

- Giới thiệu về Hệ thống Trường Mầm non Quốc Tế Saigon Academy

- Các thông tin về chương trình học, giáo viên và cơ sở vật chất của trường

- Thông tin về các hoạt động ngoại khóa và sự kiện của trường

- Thông tin về các chương trình đào tạo của trường

- Hình ảnh và video giới thiệu về trường và các hoạt động của trường

- Các thông tin về phương pháp giảng dạy và cách thức đánh giá kết quả học tập của học sinh

- Các bài viết, tin tức và thông tin giáo dục liên quan đến trường và các hoạt động giáo dục khác

- Liên hệ và hỗ trợ trực tuyến cho phụ huynh và học sinh

2.7 Các yêu cầu đặt ra cho việc thiết kế, xây dựng và triển khai website Saigon Academy

Một số yêu cầu được đặt ra như sau:

Thiết kế trang web cần phải thân thiện với người dùng, đảm bảo dễ sử dụng và tương tác Các yếu tố như nút bấm, menu và form liên hệ nên được bố trí một cách đơn giản và dễ tìm kiếm để nâng cao trải nghiệm người dùng.

Thiết kế trang web cần phải tương thích với thiết bị di động, bao gồm điện thoại thông minh và máy tính bảng, để đảm bảo người dùng có thể truy cập một cách thuận tiện và trải nghiệm tốt trên mọi thiết bị.

Thông tin trên trang web cần được cập nhật thường xuyên và đầy đủ, bao gồm chương trình học, giáo viên, hoạt động ngoại khóa, cũng như tin tức và sự kiện của trường.

Tốc độ tải trang web là yếu tố quan trọng, vì thời gian tải nhanh giúp người dùng truy cập nhanh chóng mà không phải chờ đợi lâu.

Để đảm bảo an toàn cho thông tin của trường và khách hàng, trang web cần được bảo vệ bằng các biện pháp bảo mật và an ninh hiệu quả, ngăn chặn nguy cơ xâm nhập hoặc đánh cắp dữ liệu.

Để thu hút nhiều lượt truy cập, trang web cần được tối ưu hóa cho công cụ tìm kiếm, nhằm đạt vị trí cao trên Google và giúp người dùng dễ dàng tìm thấy.

Trang web cần được thiết kế và tùy chỉnh để đảm bảo dễ dàng quản lý, bảo trì và cập nhật nội dung bởi đội ngũ quản lý và kỹ thuật của trường.

Trang web cần tích hợp hệ thống quản lý nội dung để dễ dàng quản lý và cập nhật thông tin Hệ thống này không chỉ giúp tiết kiệm thời gian mà còn nâng cao hiệu quả trong việc quản lý nội dung trang web.

Trang web cần tích hợp tính năng liên kết mạng xã hội để tăng cường khả năng chia sẻ và lan tỏa trên các nền tảng như Facebook, Twitter và Instagram Điều này không chỉ giúp nâng cao mức độ tiếp cận mà còn quảng bá hiệu quả hơn cho trường.

4 THIẾT KẾ WEBSITE SAIGON ACADEMY VỚI LARAVEL

4.1 Phân tích yêu cầu của website Saigon Academy

4.1.1 Yêu cầu về môi trường

- Chạy được trên mọi trình duyệt web

- Chạy được trên mọi hệ điều hành, nền tảng khác nhau

- Cơ sở dữ liệu dùng MySQL

4.1.2 Yêu cầu về giao diện

Giao diện hệ thống cần phải đáp ứng tiêu chí quan trọng là giới thiệu về trường học, các chương trình đào tạo, đội ngũ giáo viên, hoạt động ngoại khóa, tin tức, sự kiện và thông tin tuyển sinh.

- Các điều khiển trên trang web cần quen thuộc, dễ thao tác với người dùng

- Thông tin hình ảnh phải bao quát, đẹp và dễ dàng lựa chọn tìm kiếm

- Hiển thị thông tin chi tiết khi khách hàng lựa chọn

- Nội dung thông tin hình ảnh động Kiểu của giao diện thay đổi động giúp hạn chế sự đơn điệu

- Tên các trường thông tin, chức năng phải thống nhất toàn bộ giao diện

4.1.3 Yêu cầu về chức năng

Trang chủ cung cấp thông tin chi tiết về trường, bao gồm các thông báo mới nhất, sự kiện sắp tới, và liên kết đến các trang con khác trên website.

Mục tiêu và tính năng trang web

Phân tích yêu cầu của website Saigon Academy

Yêu cầu về môi trường

- Chạy được trên mọi trình duyệt web

- Chạy được trên mọi hệ điều hành, nền tảng khác nhau

- Cơ sở dữ liệu dùng MySQL

Yêu cầu về giao diện

Giao diện hệ thống cần phải đảm bảo tiêu chí quan trọng là cung cấp thông tin đầy đủ về trường, các chương trình học, đội ngũ giáo viên, hoạt động ngoại khóa, tin tức, sự kiện và thông tin tuyển sinh.

- Các điều khiển trên trang web cần quen thuộc, dễ thao tác với người dùng

- Thông tin hình ảnh phải bao quát, đẹp và dễ dàng lựa chọn tìm kiếm

- Hiển thị thông tin chi tiết khi khách hàng lựa chọn

- Nội dung thông tin hình ảnh động Kiểu của giao diện thay đổi động giúp hạn chế sự đơn điệu

- Tên các trường thông tin, chức năng phải thống nhất toàn bộ giao diện.

Yêu cầu về chức năng

Trang chủ của website cung cấp thông tin chi tiết về trường, bao gồm các thông báo mới nhất và các sự kiện sắp diễn ra, đồng thời có liên kết đến các trang con khác để người dùng dễ dàng truy cập.

Trường học được giới thiệu với thông tin chi tiết về lịch sử phát triển, mục tiêu và triết lý giáo dục, cùng với hệ thống giáo dục và các dịch vụ hỗ trợ học tập.

- Chương trình giảng dạy: Cho phép người dùng có thể xem thông tin các chương trình giảng dạy

Liên hệ và hỗ trợ là yếu tố quan trọng, với thông tin liên lạc của trường được cung cấp rõ ràng, cho phép phụ huynh dễ dàng đặt câu hỏi và nhận phản hồi từ giáo viên Điều này đảm bảo sự tương tác hiệu quả và hỗ trợ tốt nhất giữa nhà trường và phụ huynh.

- Quản lý nội dung: Cho phép quản trị viên cập nhật thông tin trên trang web một cách dễ dàng, nhanh chóng và hiệu quả

Tính năng liên kết mạng xã hội là yếu tố quan trọng giúp trang web của bạn được chia sẻ và phát tán rộng rãi trên các nền tảng như Facebook, Twitter, và Instagram.

- Trang tin tức: Cập nhật những thông tin mới nhất liên quan đến trường, như sự kiện, hoạt động, thành tích của học sinh, giáo viên, v.v

- Tuyển dụng: Cung cấp thông tin về các vị trí việc làm tại trường, cho phép người dùng đăng ký tuyển dụng và gửi hồ sơ trực tuyến

- Quản lý người dùng: Cho phép quản trị viên quản lý các tài khoản người dùng

Thiết kế responsive là yếu tố quan trọng giúp website có khả năng truy cập và hiển thị tối ưu trên các thiết bị di động, từ đó mang lại sự tiện lợi và trải nghiệm tốt nhất cho người dùng.

- Thay đổi ngôn ngữ: Tích hợp tính năng đa ngôn ngữ phục vụ trải nghiệm tốt hơn cho người dùng

Bảo mật thông tin là yếu tố quan trọng nhằm bảo vệ an toàn dữ liệu của người dùng, ngăn chặn việc rò rỉ thông tin cá nhân và tài khoản Điều này không chỉ đảm bảo tính bảo mật cho hệ thống mà còn giúp người dùng yên tâm khi sử dụng dịch vụ.

Quản lý SEO là quá trình tối ưu hóa trang web nhằm nâng cao thứ hạng tìm kiếm trên các công cụ tìm kiếm, từ đó tăng cường khả năng tiếp cận và thu hút khách hàng mới.

Phân tích hệ thống

Sơ đồ phân rã chức năng

Hình 2 Sơ đồ phân rã chức năng

Xây dựng biểu đồ Use Case

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

Ba ̉ng 2 Các tác nhân của hệ thống

Tên tác nhân Mô tả

Người dùng Người sử dụng hệ thống để xem thông tin

Quản trị viên Người quản trị hệ thống

4.2.2.2 Xác định các Use Case

- Các Use Case của hệ thống

Bảng 3 Các Use Case của hệ thống

Tên Use Case Mô tả

Quản lý người dùng Quản trị viên có thể quản lý người dùng bao gồm việc phân quyền chức năng người dùng

Quản lý chương trình giảng dạy

Người quản trị hệ thống có thể quản lý thông tin bao gồm việc thêm, xoá, sửa chương trình giảng dạy

Quản lý tuyển sinh Người quản trị có thể quản lý cập nhật thông tin tuyển sinh

Quản lý tin tức Người quản trị có thể quản lý tin tức bao gồm việc thêm, xoá, sửa

- Biểu đồ Use Case tổng quát

Hình 3 Biểu đồ Use Case tổng quát

- Biểu đồ Use Case quản lý người dùng của quản trị viên

Hình 4 Biểu đồ Use Case quản lý người dùng a Tóm tắt

Quản lý người dùng là Use case quản trị viên sử dụng để quản lý các thông tin của người dùng b Tác nhân

Tác nhân: Quản trị viên c Use Case liên quan

Use Case đăng nhập d Các luồng sự kiện

Ba ̉ng 4 Luồng sự kiện chính Use Case quản lý người dùng

Hành động tác nhân Phản ứng hệ thống

Chọn danh sách quản lý người dùng

Hệ thống hiển thị giao diện danh sách người dùng

Lựa chọn người dùng và chức năng, nhập thông tin cần cập nhật

Tiếp nhận thông tin, kiểm tra thông tin có hợp lệ hay không

Thông báo cập nhật thành công

- Biểu đồ Use Case quản lý chương trình giảng dạy

Hình 5 Biểu đồ Use Case quản lý chương trình giảng dạy a Tóm tắt

Quản lý chương trình giảng dạy là Use case quản trị viên sử dụng để quản lý các thông tin của chương trình giảng dạy b Tác nhân

Tác nhân: Quản trị viên c Use Case liên quan

Use Case đăng nhập d Các luồng sự kiện

Ba ̉ng 5 Luồng sự kiện chính Use Case chương trình giảng dạy

Hành động tác nhân Phản ứng hệ thống

Chọn danh sách quản lý chương trình giảng dạy

Hệ thống hiển thị giao diện danh sách chương trình giảng dạy

Lựa chọn chương trình giảng dạy và chức năng, nhập thông tin cần cập nhật

Tiếp nhận thông tin, kiểm tra thông tin có hợp lệ hay không

Thông báo cập nhật thành công

- Biểu đồ Use Case quản lý tuyển sinh

Hình 6 Biểu đồ Use Case quản lý tuyển sinh a Tóm tắt

Quản lý tuyển sinh là Use case quản trị viên sử dụng để quản lý các thông tin của tuyển sinh b Tác nhân

Tác nhân: Quản trị viên c Use Case liên quan

Use Case đăng nhập d Các luồng sự kiện

Ba ̉ng 6 Luồng sự kiện chính Use Case tuyển sinh

Hành động tác nhân Phản ứng hệ thống

Chọn danh sách quản lý tuyển sinh

Hệ thống hiển thị giao diện danh sách tuyển sinh

Lựa chọn tuyển sinh và chức năng, nhập thông tin cần cập nhật

Tiếp nhận thông tin, kiểm tra thông tin có hợp lệ hay không

Thông báo cập nhật thành công

- Biểu đồ quản lý tin tức

Hình 7 Biểu đồ Use Case quản lý tin tức a Tóm tắt

Quản lý tin tức là Use case quản trị viên sử dụng để quản lý các thông tin của tin tức b Tác nhân

Tác nhân: Quản trị viên c Use Case liên quan

Use Case đăng nhập d Các luồng sự kiện

Ba ̉ng 7 Luồng sự kiện chính Use Case tuyển sinh

Hành động tác nhân Phản ứng hệ thống

Chọn danh sách quản lý tin tức

Hệ thống hiển thị giao diện danh sách tin tức

Lựa chọn tin tức và chức năng, nhập thông tin cần cập nhật

Tiếp nhận thông tin, kiểm tra thông tin có hợp lệ hay không

Thông báo cập nhật thành công

Thiết kế cấu trúc thông tin và giao diện người dùng

Cấu trúc thông tin

Cấu trúc thông tin của trang web Saigon Academy sẽ được thiết kế để người dùng dễ

Trường cung cấp 25 dịch vụ và khóa học cần thiết, giúp người dùng dễ dàng tìm thấy thông tin quan trọng Các thông tin này nên được tổ chức thành các mục chính để tạo sự rõ ràng và thuận tiện cho người đọc.

- Trang chủ: Giới thiệu tổng quan về tường, các thông tin mới nhất và liên hệ

- Giới thiệu: Giới thiệu chi tiết về trường, mô tả các đặc điểm nổi bật, đội ngũ giáo viên, môi trường giảng dạy, tầm nhìn và sứ mệnh

- Chương trình giảng dạy: Liệt kê các chương trình dạy học của trường, giới thiệu về nội dung và mục tiêu của từng chương trình học

- Tin tức: Cập nhật các tin tức mới nhất về trường, các sự kiện, hoạt động, thành tích của học sinh, giáo viên, v.v

- Tuyển sinh: Những thông tin mới nhất về tuyển sinh của trường

- Tuyển dụng: Giới thiệu các vị trí việc làm tại trường và cho phép người dùng đăng ký tuyển dụng

- Liên hệ: Cho phép người dùng liên hệ với trường để đặt câu hỏi hoặc đóng góp ý kiến.

Giao diện người dùng

4.3.2.1 Các yếu tố cần có

Giao diện người dùng của trang web Saigon Academy sẽ được thiết kế đẹp mắt, trực quan và dễ sử dụng, với các yếu tố quan trọng như tính thẩm mỹ, khả năng tương tác và sự thân thiện.

- Màu sắc: Sử dụng màu sắc phù hợp với phong cách và thương hiệu của trường, tạo cảm giác chuyên nghiệp và thân thiện với người dùng

- Hình ảnh: Sử dụng hình ảnh đẹp, rõ nét và phù hợp với nội dung để tăng tính thẩm mỹ và hấp dẫn cho người dùng

- Đơn giản: Thiết kế giao diện nên đơn giản, không quá phức tạp

Giao diện trang web cần được tối ưu hóa để hiển thị tốt trên nhiều thiết bị, bao gồm cả máy tính để bàn và điện thoại di động, nhằm đảm bảo trải nghiệm người dùng mượt mà và thuận tiện.

- Navigation: Hệ thống định hướng nên được thiết kế để người dùng dễ dàng điều hướng và tìm kiếm thông tin

Liên kết xã hội là cách để người dùng kết nối với trang mạng xã hội của trường, giúp họ cập nhật những thông tin mới nhất và tương tác dễ dàng hơn với cộng đồng học tập.

Hình 8: Bố cục, banner, block

- Header: Phần đầu của website, thường chứa logo/ ô tìm kiếm/ thanh menu chính/ nút đăng nhập/ đăng ký/ thay đổi ngôn ngữ,…

- Body: Nội dung, bài viết trên trang web

- Footer: Phần chân trang chứa các thông tin liên hệ, bản quyền,…

Ngoài ra, bài viết còn đề cập đến các thành phần quan trọng khác như thanh điều hướng, giúp người dùng dễ dàng nắm bắt cấu trúc của website thông qua các menu chính Bên cạnh đó, thanh sidebar cũng đóng vai trò quan trọng, cung cấp menu điều hướng khi kích thước màn hình nhỏ, mang lại trải nghiệm người dùng tốt hơn.

Các banner giới thiệu hay sự kiện thường được đặt trên trang web

Hình 9 Banner sự kiện cuộc thi ảnh online “Chưa bao giờ mẹ kể”

Các khối có kích thước vừa phải, sắp xếp gọn gàng và dễ sử dụng

4.3.2.3 Biểu đồ cấu trúc giao diện

- Biểu đồ cấu trúc giao diện

Hình 10: Biểu đồ cấu trúc giao diện

5 CHƯƠNG 5 XÂY DỰNG VÀ TRIỂN KHAI WEBSITE SAIGON

Cài đặt và cấu hình Laravel

Cài đặt Laravel

Để cài đặt Laravel, ta phải đáp ứng được các yêu cầu bắt buộc sau:

Các bước cài đặt và cấu hình:

- Cài đặt composer : Laravel sử du ̣ng Composer để quản lý các thư viện phu ̣ thuộc

Vì vậy, trước khi sử dụng Laravel, cần đảm bảo rằng đã cài đặt composer

- Sau khi cài đặt composer, thực thi lần lượt các lệnh sau tại command line:

 composer create-project –prefer-dist laravel/laravel blog

- Truy cập vào link: http://localhost:8000 sẽ có giao diện như sau:

Hình 11 Giao diện setup Laravel 9

Cấu hình Laravel

Nếu sử dụng hệ điều hành windows thông thường chúng ta không cần phải cấu hình

Còn trên linux hoặc macOS ta cần chạy các lệnh sau:

 chown -R nginx:nginx /home/laravel blog

Xây dựng chức năng và giao diện website

Giao diện người dùng

Hi ̀nh 22 Giao diện header và slider

- Phần giới thiệu trường học

Hi ̀nh 13 Giao diện giới thiệu

- Mục hiển thị danh sách chương trình học

Hi ̀nh 14 Giao diện chương trình học

- Phần hiển thị đánh giá của phụ huynh

Hi ̀nh 15 Giao diện phản hồi

- Hiển thị tin tức và logo thành viên hệ thống tập đoàn

Hi ̀nh 16 Giao diện tin tức và logo

Hi ̀nh 17 Giao diện footer

5.2.1.2 Giao diện chương trình học

- Hiển thị danh sách chương trình học

Hi ̀nh 18 Giao diện chương trình học

- Chi tiết chương trình học

Hi ̀nh 19 Giao diện chi tiết chương trình học

- Hiển thị bảng tin tuyển sinh

Hi ̀nh 30 Giao diện tuyển sinh

Hi ̀nh 21 Giao diện trang tin tức

- Hiển thị danh sách cơ sở cũng như thông tin liên hệ

Hi ̀nh 22 Giao diện trang liên hệ

Giao diện trang quản trị

Giao diện quản lý nội dung trang web

- Giao diện thêm, sửa nội dung

Hi ̀nh 23 Giao diện trang thêm sủa nội dung

- Bảng dach sách nội dung:

Hi ̀nh 24 Giao diện bảng danh sách nội dung

KẾT QUẢ ĐẠT ĐƯỢC Đánh giá kết quả đạt được

Kết quả từ quá trình thiết kế website trường bằng Laravel rất tích cực, với việc hoàn thành các nhiệm vụ như xây dựng block layout, thiết kế giao diện thân thiện và tạo module slide show Em cũng đã phát triển các trang thông tin tổng quan và chi tiết, đồng thời tối ưu hóa tính năng responsive để trang web thích ứng với nhiều kích cỡ màn hình khác nhau Hình ảnh hiển thị được xử lý triệt để, đảm bảo website luôn đẹp và chuyên nghiệp trên mọi thiết bị.

Chúng tôi đã phát triển chức năng chuyển đổi ngôn ngữ Anh - Việt cho toàn bộ trang, bao gồm cả đường dẫn, giúp người dùng dễ dàng chuyển đổi giữa hai ngôn ngữ một cách thuận tiện.

Tất cả các công việc đã được thực hiện hiệu quả, mang lại kết quả đáng kể cho dự án Website được thiết kế đáp ứng yêu cầu của trường với nhiều tính năng hữu ích và dễ sử dụng Tôi hy vọng rằng website này sẽ mang lại lợi ích cho trường và hỗ trợ phụ huynh trong việc tìm hiểu về trường cũng như các chương trình giáo dục.

Những vấn đề tồn đọng và giải pháp đề xuất

Sử dụng Laravel trong thiết kế và phát triển trang web trường học đã mang lại hiệu quả cao, tiết kiệm thời gian và công sức Các tính năng và module sẵn có của Laravel giúp tối ưu hóa trang web, từ cấu trúc thư mục đến việc xây dựng chức năng.

Mặc dù trang web của trường mầm non đã hoạt động, vẫn còn nhiều vấn đề cần cải thiện, như thiếu tính năng tìm kiếm và đăng ký học, cũng như cần cập nhật thông tin thường xuyên Để nâng cao khả năng thiết kế các trang web phức tạp hơn, em cần cải thiện kiến thức về Laravel Việc thường xuyên cập nhật các phiên bản mới nhất của Laravel và các module sẽ giúp em tận dụng tối đa tính năng mới và nâng cao bảo mật cho trang web.

Ngày đăng: 04/09/2023, 20:58

Nguồn tham khảo

Tài liệu tham khảo Loại Chi tiết
[1] Document Laravel : https://www.laravel.com/docs/10.x Sách, tạp chí
Tiêu đề: Document Laravel
Năm: 2023
[2] Các bài viết cấu hình websever : https://blog.theta.vn/web-server Link
[3] Các bài viết tìm hiểu Laravel trên Viblo: https://viblo.asia/p/tim-hieu-ve-framwork-laravel-p1-amoG8191vz8P Link
[4] Video hướng dẫn: https://www.youtube.com/c/Thetavn Link
[5] Website trường Saigon Academy: https://saigonacademy.com/ Link
[6] Website Tập đoàn Giáo dục Nguyễn Hoàng: https://nhg.vn/ Link

HÌNH ẢNH LIÊN QUAN

Hình 2. Sơ đồ phân rã chức năng - Thiết kế, xây dựng và triển khai website saigon academy sử dụng laravel
Hình 2. Sơ đồ phân rã chức năng (Trang 19)
Hình 4. Biểu đồ Use Case quản lý người dùng - Thiết kế, xây dựng và triển khai website saigon academy sử dụng laravel
Hình 4. Biểu đồ Use Case quản lý người dùng (Trang 21)
Hình 5. Biểu đồ Use Case quản lý chương trình giảng dạy - Thiết kế, xây dựng và triển khai website saigon academy sử dụng laravel
Hình 5. Biểu đồ Use Case quản lý chương trình giảng dạy (Trang 22)
Hình 7. Biểu đồ Use Case quản lý tin tức - Thiết kế, xây dựng và triển khai website saigon academy sử dụng laravel
Hình 7. Biểu đồ Use Case quản lý tin tức (Trang 24)
Hình 8: Bố cục, banner, block - Thiết kế, xây dựng và triển khai website saigon academy sử dụng laravel
Hình 8 Bố cục, banner, block (Trang 26)
Hình 9. Banner sự kiện cuộc thi ảnh online “Chưa bao giờ mẹ kể” - Thiết kế, xây dựng và triển khai website saigon academy sử dụng laravel
Hình 9. Banner sự kiện cuộc thi ảnh online “Chưa bao giờ mẹ kể” (Trang 27)
Hình 11. Giao diện setup Laravel 9 - Thiết kế, xây dựng và triển khai website saigon academy sử dụng laravel
Hình 11. Giao diện setup Laravel 9 (Trang 29)

TỪ KHÓA LIÊN QUAN

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

🧩 Sản phẩm bạn có thể quan tâm

w