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

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM _oOo_ BÁO CÁO THỰC TẬP TỐT NGHIỆP THIẾT KẾ, XÂY DỰNG VÀ TRIỂN KHAI WEBSITE SAIGON ACADEMY SỬ DỤNG LARAVEL Cơng Ty Thực Tập : Tập Đồn Giáo Dục Nguyễn Hoàng Người Phụ Trách : Phạm Xuân Lãng Sinh Viên Thực Tập : Nguyễn Xuân Son MSSV : 19522141 TP Hồ Chí Minh, 2023 LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Tập Doàn Giáo Dục Nguyễn Hồng tạo điều kiện cho em có hội thực tập công ty Khoảng thời gian thực tập ngắn ngủi nhờ dẫn nhiệt tình anh chị công ty giúp em tiếp thu kiến thức quan trọng để làm website SaiGon Academy Thời gian thực tập cơng ty giúp em có trải nghiệm thực tế, kinh nghiệm quý báu kỹ cần thiết để em bước môi trường công việc thực tế sau Đặc biệt cảm ơn anh Phạm Xuân Lãng anh chị quan hướng dẫn, giúp đỡ em tận tình khoảng thời gian thực tập Cũng xin cảm ơn thầy cô ban Công Nghệ Phần Mềm nhiệt tình giúp đỡ, tạo điều kiện cho em hồn thành báo cáo Do chưa có nhiều kinh nghiệm thời gian thực tập hạn hẹp nên khơng thể tránh khỏi thiếu sót định Em mong nhận đóng góp quý thầy cơ, anh chị để em hồn thành tốt báo cáo thân trở nên hoàn thiện Em xin chân thành cảm ơn Thành phố Hồ Chí Minh ngày…tháng năm 2023 Sinh viên thực Nguyễn Xuân Son NHẬN XÉT CỦA KHOA ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… MỤC LỤC TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN – ĐẠI HỌC QUỐC GIA HỒ CHÍ MINH LỜI CẢM ƠN………………………………………………………………………… NHẬN XÉT CỦA KHOA MỤC LỤC DANH MỤC HÌNH ẢNH DANH MỤC BẢNG CHƯƠNG GIỚI THIỆU CHUNG 1.1 Tổng quan Tập đoàn giáo dục Nguyễn Hoàng 1.2 Mục tiêu thực tập CHƯƠNG NỘI DUNG THỰC TẬP 2.1 Giới thiệu Laravel 2.2 Các tính bật Laravel…………………………………………….11 2.3 Thực dự án với Laravel 11 2.4 Lịch làm việc…………………………………………………………………12 CHƯƠNG TỔNG QUAN VỀ WEBSITE SAIGON ACADEMY 16 3.1 Tổng quan Saigon Academy 16 3.2 Mục tiêu tính trang web 16 3.2.1 Mục tiêu 16 3.2.2 Các tính 16 3.3 Các yêu cầu đặt cho việc thiết kế, xây dựng triển khai website Saigon Academy 17 CHƯƠNG Thiết kế Website SAIGON Academy với Laravel 18 4.1 Phân tích yêu cầu website Saigon Academy 18 4.1.1 Yêu cầu môi trường 18 4.1.2 Yêu cầu giao diện 18 4.1.3 Yêu cầu chức 18 4.2 Phân tích hệ thống 19 4.2.1 Sơ đồ phân rã chức 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 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 CHƯƠNG Xây dựng triển khai Website SAIGON Academy với Laravel 28 5.1 Cài đặt 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 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 KẾT QUẢ ĐẠT ĐƯỢC 36 Đánh giá kết đạt 36 Những vấn đề tồn đọng giải pháp đề xuất 36 TÀI LIỆU THAM KHẢO 37 DANH MỤC HINH ẢNH Hình Giới thiệu Laravel……………………………….…………………………9 Hình Sơ đồ phân rã chức năng…………………………….……………………… 19 Hình Biểu đồ Use Case tổng quát………………………………………………… 20 Hình Biểu đồ Use Case quản lý người dùng……………………………………… 21 Hình Biểu đồ Use Case quản lý chương trình giảng dạy……………………………22 Hình Biểu đồ Use Case quản lý tuyển sinh…………………………………………23 Hình Biểu đồ Use Case quản lý tin tức………………… …………………………24 Hình 8: Bố cục, banner, block…………………………………………………………26 Hình Banner kiện thi ảnh online “Chưa mẹ kể”……………………26 Hình 10: Biểu đồ cấu trúc giao diện……………………………………………………27 Hình11 Giao diện setup Laravel 9…………………………………………………….28 Hình12 Giao diện header slider …………………………………….………………29 Hình 13 Giao diện giới thiệu………………………………………………………… 30 Hình 14 Giao diện chương trình học………………………………………………… 30 Hình 15 Giao diện phản hồi……………………………………………………………30 Hình 16 Giao diện tin tức logo…………………………………………… ………31 Hình 17 Giao diện footer………………………………………………… ………….31 Hình 18 Giao diện chương trình học………………………………………………… 32 Hình 19 Giao diện chi tiết chương trình học………………………………………… 32 Hình 20 Giao diện tuyển sinh………………………………………………………….33 Hình 21 Giao diện trang tin tức………………………………………………… … 33 Hình 22 Giao diện trang liên hệ………………………………………………… … 34 Hình 23 Giao diện trang thêm sủa nội dung………………………………………… 34 Hình 24 Giao diện bảng danh sách nội dung………………………………………….35 DANH MỤC BẢNG Bảng Lịch làm việc………………………………………………………………….12 Bảng Các tác nhân hệ thống…………………………………………………….19 Bảng Các Use Case hệ thống…………………………………………….…… 20 Bảng Luồng kiện Use Case quản lý người dùng…………………….…….21 Bảng Luồng kiện Use Case chương trình giảng dạy………………….… 22 Bảng Luồng kiện Use Case tuyển sinh……………………………….……23 Bảng Luồng kiện Use Case tuyển sinh……………………………….……24 CHƯƠNG GIỚI THIỆU CHUNG 1.1 Tổng quan Tập đoàn giáo dục Nguyễn Hoàng Tập đoàn giáo dục Nguyễn Hoàng tập đoàn hàng đầu lĩnh vực giáo dục Việt Nam Với 20 năm kinh nghiệm hoạt động, Tập đoàn Nguyễn Hoàng trở thành thương hiệu uy tín, nhiều người tin tưởng lựa chọn Các đơn vị thành viên Tập đoàn Nguyễn Hoàng: - 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) Một phận Tập đồn giáo dục Nguyễn Hồng khối văn phịng tập đồn Nguyễn Hồng Trong đó, Ban Cơng nghệ thơng tin chịu trách nhiệm phát triển quản lý hệ thống, ứng dụng lĩnh vực công nghệ thông tin Việc thực tập Ban Công nghệ thông tin Tập đoàn giáo dục Nguyễn Hoàng hội tuyệt vời cho em, người đam mê công nghệ muốn trau dồi kỹ Thực tập đây, em tiếp cận với môi trường làm việc chuyên nghiệp, đại đầy thử thách Em tham gia vào dự án thực tế có hội góp phần vào việc phát triển sản phẩm cơng nghệ Tập đồn Nguyễn Hồng Ngồi ra, thực tập Ban Cơng nghệ thơng tin Tập đồn giáo dục Nguyễn Hồng cịn giúp em nâng cao kỹ mềm làm việc theo nhóm, giao tiếp, quản lý thời gian, v.v Đây kỹ quan trọng sống nghiệp 1.2 Mục tiêu thực tập Mục tiêu tiếp cận mơi trường làm việc thực tế, có hội quan sát, hiểu yêu cầu nghề nghiệp tự đánh giá ưu khuyết điểm thân để có kế hoạch phát huy, khắc phục trước thực bước vào môi trường làm việc thực tế Tạo nhìn tổng quan mơi trường thực tế để ghi lại làm tư liệu cho cá nhân CHƯƠNG NỘI DUNG THỰC TẬP 2.1 Giới thiệu Laravel Laravel framework web mã nguồn mở viết ngơn ngữ PHP Nó phát triển Taylor Otwell mắt lần đầu vào năm 2011 Laravel cung cấp cho nhà phát triển cách tiếp cận linh hoạt dễ dàng để xây dựng ứng dụng web phức tạp Nó thiết kế để tối ưu hóa hiệu suất, đơn giản hóa quy trình phát triển cung cấp tính định tuyến, giao diện dòng lệnh Artisan, Active Record, phân quyền, xử lý lỗi, cập nhật theo thời gian thực nhiều Laravel có cộng đồng phát triển rộng lớn nhiều tài liệu hữu ích, giúp cho nhà phát triển nhanh chóng giải vấn đề cải thiện kỹ Hình Giới thiệu Laravel  Ưu điểm Laravel :  Dùng tính PHP Dùng tính PHP ưu điểm bật Laravel Framework Cụ thể, dùng cơng cụ bạn sử dụng tính PHP, đặc biệt Interfaces, Namespaces, Anonymous functions Overloading, Shorter array syntax Hiện nay, xuất nhiều CMS viết Laravel, từ mã nguồn mở tới thương mại, từ CMS đơn giản “siêu mạnh”  Tài nguyên lớn, sẵn có Laravel có nguồn tài nguyên lớn, sẵn có Chúng thân thiện với người dùng Những phiên công cụ phát hành kèm theo tài liệu phù hợp Từ bạn dễ dàng tìm thấy giải thích Methods, Coding style Classes  Tích hợp với mail Ngày nay, ứng dụng website cần phải thông báo offer deal cho người sử dụng Việc đăng ký trở thành người dùng điều vô quan trọng Trên thư viện SwiftMailer Framework trang bị API Trong có Driver cho Mailgun, SMTP, SparkPost, PHP’s “mail” function, Mandrill “sendmail”, Amazon SES giúp gửi thư qua dịch vụ local dịch vụ dựa đám mây  Hỗ trợ cache backend phổ biến Framework Laravel hỗ trợ cache backend Ưu điểm giúp bạn dễ dàng tùy chỉnh nhiều cấu hình cache  Tốc độ xử lý nhanh Hỗ trợ hiệu cho việc lập dự án lớn khoảng thời gian ngắn tạo website Vì vậy, Laravel lập trình viên công ty công nghệ ứng dụng để phát triển sản phẩm họ  Dễ sử dụng Chỉ cần có vốn kiến thức lập trình PHP bỏ vài thực dự án nhỏ  Tính bảo mật cao Tính bảo mật cao ưu điểm Laravel nhiều người u thích Cơng cụ cung cấp tính bảo mật mạnh giúp người dùng an tâm tập trung cao độ cho việc phát triển sản phẩm: Dùng PDO để chống công SQL Injection Dùng field token ẩn để chống công kiểu CSRF Đặc biệt, Laravel escape biến đưa view mặc định, tránh công XSS  Nhược điểm Laravel :  Không hỗ trợ chức tốn Nhược điểm phải kể tới Laravel khơng hỗ trợ chức tốn Điều khiến bạn tốn nhiều công sức toán để tạo sản phẩm  Giữa phiên thiếu liên tục Không vậy, công cụ chưa có chuyển đổi liền mạch, liên tục từ Laravel sang Nếu bạn cố update code, hủy phá vỡ ứng dụng  Chất lượng Một số thành phần Laravel không thiết kế tốt, chẳng hạn dependency injection.Vì vậy, nhà phát triển nghiệp dư, không chọn lựa tốt 10 Hình Biểu đồ Use Case quản lý tuyển sinh a Tóm tắt Quản lý tuyển sinh tuyển sinh Use case quản trị viên sử dụng để quản lý thông tin 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 kiện Luồng kiện Bảng Luồng kiện 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 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 23 Hình Biểu đồ Use Case quản lý tin tức a Tóm tắt Quản lý tin tức tức Use case quản trị viên sử dụng để quản lý thông tin tin 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 kiện Luồng kiện Bảng Luồng kiện 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 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 4.3 Thiết kế cấu trúc thông tin giao diện người dùng 4.3.1 Cấu trúc thông tin Cấu trúc thông tin trang web Saigon Academy thiết kế để người dùng dễ 24 dàng tìm thấy thơng tin cần thiết trường dịch vụ, khóa học mà trường cung cấp Các thông tin nên chia thành mục sau: - Trang chủ: Giới thiệu tổng quan tường, thông tin liên hệ Giới thiệu: Giới thiệu chi tiết trường, mô tả đặc điểm bật, đội ngũ giáo viên, mơi trường giảng dạy, tầm nhìn sứ mệnh Chương trình giảng dạy: Liệt kê chương trình dạy học trường, giới thiệu nội dung mục tiêu chương trình học Tin tức: Cập nhật tin tức trường, kiện, hoạt động, thành tích học sinh, giáo viên, v.v Tuyển sinh: Những thông tin tuyển sinh trường Tuyển dụng: Giới thiệu vị trí việc làm trường 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 đóng góp ý kiến 4.3.2 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 trang web Saigon Academy thiết kế đẹp mắt, trực quan dễ sử dụng Các yếu tố cần trọng thiết kế giao diện sau: - Màu sắc: Sử dụng màu sắc phù hợp với phong cách thương hiệu trường, tạo cảm giác chuyên nghiệp thân thiện với người dùng Hình ảnh: Sử dụng hình ảnh đẹp, rõ nét phù hợp với nội dung để tăng tính thẩm mỹ 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 phức tạp Tính responsive: Giao diện trang web nên thiết kế để hiển thị tốt nhiều thiết bị khác nhau, từ máy tính để bàn đến điện thoại di động Navigation: Hệ thống định hướng nên thiết kế để người dùng dễ dàng điều hướng tìm kiếm thơng tin Liên kết xã hội: Liên kết đến trang mạng xã hội trường để người dùng kết nối với trường cập nhật thông tin 25 4.3.2.2 Bố cục, banner, block 4.3.2.2.1 Bố cục Hình 8: Bố cục, banner, block - Header: Phần đầu website, thường chứa logo/ tìm kiếm/ menu chính/ nút đăng nhập/ đăng ký/ thay đổi ngôn ngữ,… Body: Nội dung, viết trang web Footer: Phần chân trang chứa thông tin liên hệ, quyền,… Ngồi ra, cịn bao gồm thành phần khác như: o Navigation: Thanh điều hướng chứa menu web giúp người dùng hiểu cấu trúc web o Sidebar: Thanh chứa menu điều hướng kích thước hình nhỏ 4.3.2.2.2 Banner Các banner giới thiệu hay kiện thường đặt trang web 26 Hình Banner kiện thi ảnh online “Chưa mẹ kể” 4.3.2.2.3 Block Các khối có kích thước vừa phải, xếp gọn gàng 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 27 CHƯƠNG XÂY DỰNG VÀ TRIỂN KHAI WEBSITE SAIGON ACADEMY VỚI LARAVEL 5.1 Cài đặt cấu hình Laravel 5.1.1 Cài đặt Laravel Để cài đặt Laravel, ta phải đáp ứng yêu cầu bắt buộc sau: - PHP >= 7.1.3 OpenSSL PHP Extension PDO PHP Extension Mbstring PHP Extension Tokenizer PHP Extension XML PHP Extension Ctype PHP Extension JSON PHP Extension Các bước cài đặt 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 sử dụng Laravel, cần đảm bảo cài đặt composer - Sau cài đặt composer, thực thi lệnh sau command line:  composer create-project –prefer-dist laravel/laravel blog  php artisan serve - Truy cập vào link: http://localhost:8000 có giao diện sau: - 28 Hình 11 Giao diện setup Laravel 5.1.2 Cấu hình Laravel Nếu sử dụng hệ điều hành windows thơng thường khơng cần phải cấu hình Còn linux macOS ta cần chạy lệnh sau:  chown -R nginx:nginx /home/laravel blog  chmod -R 777 storage/ bootstrap/cache/ 5.2 Xây dựng chức giao diện website 5.2.1 Giao diện người dùng 5.2.1.1 Giao diện trang chủ - Thanh header slider: Hình 22 Giao diện header slider - Phần giới thiệu trường học 29 Hình 13 Giao diện giới thiệu - Mục hiển thị danh sách chương trình học Hình 14 Giao diện chương trình học - Phần hiển thị đánh giá phụ huynh Hình 15 Giao diện phản hồi - Hiển thị tin tức logo thành viên hệ thống tập đoàn 30 Hình 16 Giao diện tin tức logo - Cuối footer Hì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 31 Hình 18 Giao diện chương trình học - Chi tiết chương trình học Hình 19 Giao diện chi tiết chương trình học 5.2.1.3 Giao diện tuyển sinh - Hiển thị bảng tin tuyển sinh 32 Hình 30 Giao diện tuyển sinh 5.2.1.4 Giao diện tin tức - Hiển thị bảng tin Hình 21 Giao diện trang tin tức 5.2.1.5 Giao diện liên hệ - Hiển thị danh sách sở thông tin liên hệ 33 Hình 22 Giao diện trang liên hệ 5.2.2 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 Hình 23 Giao diện trang thêm sủa nội dung - Bảng dach sách nội dung: 34 Hình 24 Giao diện bảng danh sách nội dung 35 KẾT QUẢ ĐẠT ĐƯỢC Đánh giá kết đạt Kết đạt qua trình thực đề tài thiết kế website trường Laravel tích cực đáng khích lệ Em hồn thành cơng việc đề ra, bao gồm xây dựng block layout cho website, thiết kế giao diện thân thiện, tạo module slide show áp dụng thành công cho trang web, xây dựng trang thông tin tổng quan chi tiết Đặc biệt, em responsive trang web thích ứng nhiều kích cỡ hình khác xử lý triệt để hình ảnh hiển thị, đảm bảo trang web hiển thị đẹp chuyên nghiệp thiết bị Bên cạnh đó, em xây dựng chức thay đổi ngơn ngữ Anh -Việt cho tồn trang bao gồm đường dẫn trang, giúp người dùng dễ dàng chuyển đổi hai ngôn ngữ cách thuận tiện Tất công việc thực đạt hiệu cao mang lại kết đáng kể cho đề tài Website thiết kế đáp ứng yêu cầu trường với nhiều tính hữu ích dễ sử dụng cho người dùng Em hy vọng website mang lại lợi ích cho trường hỗ trợ phụ huynh việc tìm hiểu trường chương trình giáo dục trường Những vấn đề tồn đọng giải pháp đề xuất Việc sử dụng Laravel để thiết kế xây dựng trang web trường mang lại hiệu cao, giúp tiết kiệm thời gian công sức cho q trình phát triển trang web Các tính module có sẵn Laravel giúp em tối ưu hóa trang web, từ việc phân chia cấu trúc thư mục xây dựng chức Tuy nhiên, số vấn đề cần cải thiện Trang web trường mầm non thiếu số tính tìm kiếm đăng ký học, cần cập nhật thường xuyên thông tin trường Ngoài ra, em cần nâng cao kiến thức Laravel để tận dụng tối đa tính module để thiết kế trang web phức tạp tương lai Để cải thiện nâng cao hiệu sử dụng Laravel, em đề xuất nên thường xuyên cập nhật phiên Laravel module để sử dụng tính giải vấn đề bảo mật 36 TÀI LIỆU THAM KHẢO [1] Document Laravel : https://www.laravel.com/docs/10.x [2] Các viết cấu hình websever : https://blog.theta.vn/web-server [3] Các viết tìm hiểu Laravel Viblo: https://viblo.asia/p/tim-hieu-veframwork-laravel-p1-amoG8191vz8P [4] Video hướng dẫn: https://www.youtube.com/c/Thetavn [5] Website trường Saigon Academy: https://saigonacademy.com/ [6] Website Tập đoàn Giáo dục Nguyễn Hoàng: https://nhg.vn/