bui quang tuan ct1701 129

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC QUẢN LÝ VÀ CƠNG NGHỆ HẢI PHỊNG - ISO 9001:2015 ĐỒ ÁN TỐT NGHIỆP NGÀNH : CÔNG NGHỆ THÔNG TIN Sinh viên: Bùi Quang Tuấn Giảng viên hướng dẫn: TS Đỗ Văn Chiểu HẢI PHÒNG – 2020 Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Công nghệ thông tin BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC QUẢN LÝ VÀ CÔNG NGHỆ HẢI PHÒNG - Xây dựng Website trường Cao đẳng Du lịch Hải Phòng ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY NGÀNH: Cơng nghệ thông tin Sinh viên :Bùi Quang Tuấn Giảng viên hướng dẫn: TS Đỗ Văn Chiểu HẢI PHÒNG – 2020 Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Công nghệ thông tin BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC QUẢN LÝ VÀ CƠNG NGHỆ HẢI PHỊNG - NHIỆM VỤ ĐỀ TÀI TỐT NGHIỆP Sinh viên: Bùi Quang Tuấn Mã sv: 1312101027 Lớp: CT1701 Ngành: Công Nghệ Thông Tin Tên đề tài: Xây dựng Website trường Cao đẳng Du lịch Hải Phòng Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Công nghệ thông tin NHIỆM VỤ ĐỀ TÀI Nội dung yêu cầu cần giải nhiệm vụ đề tài tốt nghiệp - Tìm hiểu lập trình website với PHP/ My SQL - Xây dựng website trường Cao đẳng Du lịch Hải Phòng + Phân tích thiết kế hệ thống + Xây dựng Back - end, Front – end - Demo website thử nghiệm Các tài liệu, số liệu cần thiết ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Địa điểm thực tập tốt nghiệp ……………………………………………………………………………… Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Công nghệ thông tin CÁN BỘ HƯỚNG DẪN ĐỀ TÀI TỐT NGHIỆP Họ tên : Đỗ Văn Chiểu Học hàm, học vị : Tiến sĩ Cơ quan công tác : Trường Đại học Quản lý Cơng nghệ Hải Phịng Nội dung hướng dẫn : Xây dựng Website trường Cao đẳng Du lịch Hải Phòng Đề tài tốt nghiệp giao ngày 30 tháng 03 năm 2020 Yêu cầu phải hoàn thành xong trước ngày 30 tháng 06 năm 2020 Đã nhận nhiệm vụ ĐTTN Đã giao nhiệm vụ ĐTTN Sinh viên Giảng viên hướng dẫn Hải Phòng, ngày tháng năm 2020 HIỆU TRƯỞNG Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Công nghệ thông tin LỜI CẢM ƠN Trong thời gian làm đồ án tốt nghiệp em nhận nhiều giúp đỡ, đóng góp ý kiến bảo nhiệt tình thầy cơ, gia đình bạn bè Em xin gửi lời cảm ơn chân thành đến Th.s Đỗ Văn Chiểu, giảng viên Bộ môn Công Nghệ Thông Tin - Trường Đại học Quản lý Công nghệ Hải Phịng người tận tình hướng dẫn, bảo em suốt q trình làm khố luận Em xin chân thành cảm ơn thầy cô giáo trường Đại học Quản lý Công nghệ Hải Phịng nói chung, thầy Bộ mơn Cơng Nghệ Thơng Tin nói riêng dạy dỗ cho em kiến thức môn đại cương mơn chun ngành, giúp em có sở lý thuyết vững vàng tạo điều kiện giúp đỡ em suốt q trình học tập để em có ngày hôm Cuối cùng, em xin chân thành cảm ơn gia đình bạn bè, ln tạo điều kiện, quan tâm, giúp đỡ, động viên em suốt q trình học tập hồn thành khố luận tốt nghiệp Em xin chân thành cảm ơn! Hải Phòng, ngày tháng năm 2020 Sinh Viên Bùi Quang Tuấn Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Công nghệ thông tin Mục lục GIỚI THIỆU 10 CHƯƠNG 1: TỔNG QUAN 12 1.1 Tổng quan World Wide Web 12 1.1.1 Khái niệm 12 1.1.2 Cách tạo trang web 12 1.1.3 Trình duyệt web (web Client hay web Browser) 12 1.1.4 Webserver 13 1.2.Tổng quan Html-css 13 1.2.1: Giới thiệu html 13 1.2.2: Giới thiệu Css 14 1.3.Ngôn ngữ PHP 15 1.3.1 Định nghĩa PHP 15 1.3.2 Lý nên dùng PHP 15 1.3.3 Hoạt động PHP 16 1.3.4 Tổng quan PHP 16 1.3.5 Hàm php 18 1.3.6 Biểu mẫu PHP 19 1.3.7 PHP OOP(Object-Oriented Programming.) 19 1.3.8 Session Cookie 19 1.4 Tổng quan framework Yii 21 1.4.1 Giới thiệu Yii 21 1.4.2 Một số thành phần 21 1.4.3 Routing and URL Creation 23 CHƯƠNG THIẾT KẾ BACK-END, FRONT-END 24 2.1 Phân tích thiết kế hệ thống 24 Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Công nghệ thông tin 2.1.1 Bảng sở liệu 27 2.1.2 Các kiểu liên kết 30 2.1 Xây dựng back-end 32 2.1.1 Tạo Project thêm framework Yii2 32 2.1.2 Kết nối sở liệu 32 2.1.3 Tạo Model Generator CRUD Generator 34 2.1.4 Giải thích nội dung 38 2.2 Xây dựng Front-end 66 2.2.1 Tạo thư mục 66 2.2.2 Tổng quan front-end 66 2.2.3 Xây dựng trang trang chủ 67 2.2.4 Xây dựng trang giới thiệu 73 2.2.5 Xây dựng trang viết 75 CHƯƠNG 3: DEMO WEBSITE 80 3.1 Demo Back-end 80 3.2 Demo Front-end 82 3.2.1 Demo trang trang chủ 82 3.2.2 Demo trang chi tiết viết 86 KẾT LUẬN 88 TÀI LIỆU THAM KHẢO 89 Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Công nghệ thông tin LỜI MỞ ĐẦU Hịa nhập vào nước với cơng nghệ 4.0, nhu cầu sử dụng công nghệ ngày cao, hiểu rõ lợi ích lớn tầm quan lĩnh vực công nghệ thông tin Các doanh nghiệp dù lớn hay nhỏ, dù lĩnh vực việc tiếp cận công nghệ thông tin song hành cơng nghệ thơng tin ln mang lại lợi ích hiệu mạnh mẽ Phát triển doanh nghiệp áp dụng ứng dụng lợi ích công nghệ thông tin đa dạng lĩnh vực ngành nghề áp dụng cơng nghệ thơng tin giúp ích khơng nhỏ việc hoạt động cơng ty Ví dụ doanh nghiệp áp dụng ứng dụng công nghệ thông tin việc phát triển phần mềm để quản lý doanh nghiệp nâng cao hiệu quả, tính xác cao giảm thiểu nhân lực quản lý Ví dụ khác, cơng ty cần phải giới thiệu lĩnh vực dịch vụ riêng mình, hay truyền tải thông tin cho người đọc giúp họ xem thơng tin, thơng báo hay có tin tức cập nhập cho người cần truy cập hay văn chung cho người tải để xem Trong trình học tập tìm hiểu, giúp đỡ thầy cơ, em có nhận đề tài tốt nghiệp với tên đề tài là: Xây dựng Website trường Cao đẳng Du lịch Hải Phòng Đây hội giúp em có trải nghiệp đề tài thực tế Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Công nghệ thông tin GIỚI THIỆU Mục tiêu đề tài Tìm hiểu, nghiên cứu xây dựng website Trường cao đẳng du lịch Hải Phòng Xây dựng trang website động với nội dung linh hoạt, cấu trúc dễ hiểu, phù hợp với website giáo dục Giải pháp cách thực đề tài Tìm hiểu website giáo dục, tham khảo bố cục trang website, tìm hiểu thơng tin Trường cao đẳng du lịch Hải Phịng, thu thập hình ảnh, liệu Sau phân tích thiết kế hệ thống thông tin, xây dựng nội dung quản trị Back-end giao diện Front-end website Xây dựng website việc lựa chọn ngôn ngữ ứng dụng làm việc điều quan trọng Đề tài sử dụng ngơn ngữ PHP làm ngơn ngữ lập trình sử dụng ứng dụng framework Yii để xây dựng website, số thư viện hỗ trợ việc xây dựng website Giới thiệu Trường cao đẳng du lịch Hải Phòng Trường Cao Đẳng Du Lịch Hải Phịng trường cơng lập trực thuộc Bộ Văn hóa, Thể thao Du lịch, Thủ Tướng phủ lựa chọn đầu tư thành trường chất lượng cao Trường có địa xã Nam Sơn, huyện An Dương, thành phố Hải Phòng Theo định hướng quy hoạch sở giáo dục nghề nghiệp điều chỉnh ngành nghề trọng điểm, Nhà trường phép đào tạo ngành nghề trọng điểm quốc gia bao gồm: Quản trị nhà hàng, Quản trị khách sạn, Quản trị lễ tân, Quản trị lữ hành, Hướng dẫn du lịch Quản trị chế biến ăn Từ năm 2016, Nhà trường thực đào tạo cấp độ quốc tế hai chuyên ngành Quản trị lữ hành Hướng dẫn du lịch theo chương trình chuyển giao Australia, năm 2019 tiếp tục đào tạo hai chuyên ngành Quản trị khách sạn Kỹ thuật chế biến ăn theo chương trình chuyển giao CHLB Đức Sinh viên học trường 100% cam kết bố trí việc làm doanh nghiệp du lịch dịch vụ đẳng cấp Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Công nghệ thông tin 10 2.2.5 Xây dựng trang viết Hình 38: Giao diện trang Khoa - Hiển thị danh sách khoa trường - Khi xem khoa xem nội dung chi tiết viết khoa Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Công nghệ thông tin 75 Code trang viết public function actionBaiViet($path){ if($path == 'gioi-thieu'){ $gioi_thieu_BV = DanhMuc::findOne(['code'=>$path]); $gioi_thieus = ChiTietBaiViet::find() ->andFilterWhere(['code_loai_bai_viet'=>'gioi-thieu']) ->orderBy(['id'=>SORT_DESC]) ->limit(1) ->all(); $danhsachkhoas = ChiTietBaiViet::findAll(['code_loai_bai_viet' => 'khoa']); return $this->render('gioi-thieu',[ 'gioi_thieu_BV'=>$gioi_thieu_BV, 'gioi_thieus' =>$gioi_thieus, 'danhsachkhoas' =>$danhsachkhoas ]); }else{ $baiviets = ChiTietBaiViet::findAll(['code_loai_bai_viet'=>$path]); $danh_muc_BV = DanhMuc::findOne(['code'=>$path]); //echo $path;die(); //echo $danh_muc_BV->name;die(); $noidungViecLamBaiViets = ChiTietBaiViet::findAll(['code_loai_bai_viet'=>'vieclam-htc']); $noidungNoiBatBaiViets = ChiTietBaiViet::findAll(['noi_bat'=>1]); $noidungCamNhanVeHTC = ChiTietBaiViet::findAll(['code_loai_bai_viet'=>'camnhan-ve-htc']); $noidungDoitacBaiviets = ChiTietBaiViet::findAll(['code_loai_bai_viet'=>'doitac']); return $this->render('bai-viet',[ 'baiviets'=>$baiviets, 'danh_muc_BV'=>$danh_muc_BV, 'noidungViecLamBaiViets'=>$noidungViecLamBaiViets, 'noidungNoiBatBaiViets'=>$noidungNoiBatBaiViets, 'noidungCamNhanVeHTC'=>$noidungCamNhanVeHTC, 'noidungDoitacBaiviets'=>$noidungDoitacBaiviets ]); } } Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Công nghệ thông tin 76 2.2.6 Xây dựng trang chi tiết viết Hình 39 Giao diện trang chi tiết viết - Khi xem chi tiết viết, hiển thị nội dung chi tiết viết, viết liên quan thuộc viết danh mục Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Cơng nghệ thơng tin 77 Hình 40 Giao diện trang chi tiết viết - Ngoài chi tiết viết viết liên quan, trang chi tiết viết hiển thị Ảnh viết Bài viết bật Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Công nghệ thông tin 78 Code trang chi tiết viết public function actionProduct($path){ $baiviet = ChiTietBaiViet::findOne(['code'=>$path]); $anh_bai_viet = AnhBaiViet::findAll(['anh_bai_viet_id'=>$baiviet->id]); $noidungNoiBatBaiViets = ChiTietBaiViet::findAll(['noi_bat'=>1]); // $noidungchitiettintucBaiViets = ChiTietBaiViet::findAll(['code_loai_bai_viet'=>'tintuc']); $noidunglienquanBaiViets = ChiTietBaiViet::find() ->andFilterWhere(['code'=>$path]) ->all(); $baivietTuongtus = $baiviet->danhMucs; foreach ($baivietTuongtus as $item){ $samePosts = $item->getBaiViets()->where(['!=','id',$baiviet->id])->all(); } return $this->render('chi-tiet-bai-viet',[ 'bai_viet' =>$baiviet, 'anh_bai_viet'=>$anh_bai_viet, 'noidungNoiBatBaiViets' =>$noidungNoiBatBaiViets, // 'noidungchitiettintucBaiViets' => $noidungchitiettintucBaiViets, 'noidunglienquanBaiViets' => $noidunglienquanBaiViets, 'baiVietTuongTus' => $samePosts ]); } Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Công nghệ thông tin 79 CHƯƠNG 3: DEMO WEBSITE 3.1 Demo Back-end Hình 41 Giao diện đăng nhập Hình 42 Giao diện người dùng đăng nhập Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Công nghệ thông tin 80 Giao diện người dùng đăng nhập với vai trò Admin Danh sách menu gồm danh mục viết, từ khóa, viết, slider, người dùng, logout(Admin) Hình 43 Giao diên người dùng đăng nhập Giao diện người dùng đăng nhập với vai trò người quản lý, với tên đăng nhập Nguyễn Văn A Danh sách menu gồm danh mục viết, từ khóa, viết, slider, logout(Nguyễn Văn A) Giao diện người dùng đăng nhập với vai trò người quản lý khơng có danh mục Người dùng(Nơi chứa tài khoản người dùng) Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Cơng nghệ thơng tin 81 Hình 44 Giao diện Sldier Khi người dùng truy cập vào menu Slider 3.2 Demo Front-end 3.2.1 Demo trang trang chủ Hình 45 Giao diện trang chủ Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Công nghệ thông tin 82 Tại giao diên trang chủ, gồm tên trường, giao diện chức tìm kiếm, danh sách menu, Slider ảnh, bên phải hai viết bật Hình 46 Giao diện trang chủ Giao diện trang chủ gồm danh sách tin tức, danh sách việc làm Nội dung bên phải xem chi tiết trang Sinh viên HTC, xem chi tiết trang Tuyển sinh, xem chi tiết trang Dịch vụ công trực tuyến Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Cơng nghệ thơng tin 83 Hình 47 Giao diện trang chủ Hiển thị danh sách khoa, nội dung bên phải clip bật trường, giao diện đăng nhập Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Công nghệ thông tin 84 Hình 48 Giao diện trang chủ Tại mục Cảm nhận htc hiển thị viết, mục Đối tác hiển thị hình ảnh đối tác Tại mục footer hiển thị thông tin gồm tên trường, địa chỉ, số điện thoại Tại mục Follow Us hiển thị liên kết tới facebook trường, you tube trường Tại mục đồ hiển thị địa tới trường Cao đẳng Du Lịch Hải Phòng Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Công nghệ thông tin 85 3.2.2 Demo trang chi tiết viết Hình 49 Giao diện trang chi tiết viết Giao diện trang chi tiết viết hiển thị tên viết ảnh đại diện, nội dung chi tiết viết Tại mục bên phải hiển thị danh sách viết liên quan Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Cơng nghệ thơng tin 86 Hình 50 Giao diện trang chi tiết viết Giao diện trang chi tiết viết hiển thị Ảnh viết Nội dung bên phải hiển thị hai viết bật Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Công nghệ thông tin 87 KẾT LUẬN Về hiểu trình xây dựng website giáo dục bằng ngơn ngữ lập trình Xây dựng trang back-end với giao diện thân thiện, từ ngữ dễ hiểu, dễ sử dụng với người dùng Đồng thời tạo chức quản lý nội dung khiến người dùng dễ dàng thao tác, quản lý Xây dựng chức phân quyền người dùng đăng nhập để quản lý nội dung Xây dựng trang front-end giúp cung cấp thông tin cần thiết trang web giáo dục Xây dựng trang web hiển thị nội dung linh hoạt, giúp nhà trường cập nhập tin tức, hình ảnh, viết dễ dàng Thiết kế giao diện với màu sắc bố cục hài hòa tạo cho người sử dụng cảm thấy thoải mái sử dụng Tuy nhiên số hạn chế, Website cịn nhỏ Thiếu chức tìm kiếm nội dung, chức đăng ký, đăng nhập, chức chat trực tuyến với người dùng Nội dung chưa đáp ứng đầy đủ tới người dùng Trong thời gian tới em hồn thành chức tìm kiếm nội dung, chức đăng ký, đăng nhập, chức chat trực tuyến với người dùng Tạo sở liệu phong chú, xây dựng trang chi tiết đa dạng hơn, nội dung thuận tiện tới người dùng Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Công nghệ thông tin 88 TÀI LIỆU THAM KHẢO [1] Phạm Hữu Khang – Lập trình web bằng php 5.3 MySQL 5.1 – NXB Phương Đơng [2] Nguyễn Văn Vị (2002), Phân tích thiết kế hệ thống thông tin quản lý, NXB Thống kê [3] Lê Văn Phùng (2010), CSDL quan hệ cơng nghệ phân tích – thiết kế, NXB Thơng tin Truyền thông [4] https://www.w3schools.com/ [5] https://www.yiiframework.com/doc/guide/2.0/vi/intro-yii Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Công nghệ thông tin 89 ... Sinh viên: Bùi Quang Tuấn Mã sv: 1312101027 Lớp: CT1701 Ngành: Công Nghệ Thông Tin Tên đề tài: Xây dựng Website trường Cao đẳng Du lịch Hải Phòng Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành:... diên Model Generator Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Công nghệ thông tin 34 Hình Giao diện Model Generator Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Công nghệ thông tin 35... Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: Công nghệ thông tin 36 Tạo CRUD Generator Giao diện CRUD Generator Hình Giao diện CRUD Generator Sinh Viên: Bùi Quang Tuấn - Lớp: CT1701- Ngành: