ĐẠI HỌC LÂM NGHIỆP VIỆT NAM KHOA CƠ ĐIỆN VÀCÔNG TRÌNH BỘ MÔN KỸ THUẬT ĐIỆN VÀ TỰ ĐỘNG HÓA KHOÁ LUẬN TỐT NGHIỆP Tên đề tài XÂY DỰNG TRANG THÔNG TIN ĐIỆN TỬ SỬ DỤNG PHẦN MỀM JOOMLA Giảng viên hướng dẫn[.]
ĐẠI HỌC LÂM NGHIỆP VIỆT NAM KHOA CƠ ĐIỆN VÀCÔNG TRÌNH BỘ MƠN KỸ THUẬT ĐIỆN VÀ TỰ ĐỘNG HĨA KHOÁ LUẬN TỐT NGHIỆP Tên đề tài: XÂY DỰNG TRANG THÔNG TIN ĐIỆN TỬ SỬ DỤNG PHẦN MỀM JOOMLA Giảng viên hướng dẫn : ThS Lê Minh Đức Sinh viên thực : Đỗ Văn Long MSV : 1451081913 Lớp : K59_CĐT Khoá học : 2014- 2018 Hà Nội - năm 2018 Giảng viên hướng dẫn: ThS Lê Minh Đức Sinh viên thực hiện: Đỗ Văn Long LỜI NÓI ĐẦU Hiện có nhiều phương thức truyền thơng tin báo đài, truyền hình, thơng tin điện tử Trong thơng tin điện tử phổ biến tính ứng dụng cao truyền tải thông tin nhanh, chất lượng Trang thơng tin điện tử có nhiều loại khác báo mạng điện tử, trang thông tin cá nhân, trang thông tin nội bộ, trang thông tin điện tử tổng hợp, trang thông tin ứng dụng chuyên ngành Trong ta chọn trang thơng tin nội để xây dựng trang thông tin nội trường Trung HọcPhổ Thông (THPT) Minh Khai, QuốcOai, Hà Nội Với phát triển cơng nghệ thơng tin có nhiều phần mềm để xây dựng trang thông tin điện tử như: Wordpress, Joomla, Site123 Phần mềm Joomla phần mềm có giao diện dễ sử dụng, dung lượng cài đặt nhỏ (khoảng 37MB), có tính phổ thơng cao ứng dụng xây dựng website cao Trong đề tài khóa luận tốt nghiệp tơi lựa chọn phần mềm Joomla với nội dung: “Xây dựng trang thông tin điện tử sử dụng phần mềm Joomla”, với mục tiêu xây dựng trang thông tin điện tử nội trường THPT Minh Khai Bố cục khóa luận bao gồm 03 chương Chương 1:Tổng quan trang thông tin điện tử phần mềm Joomla Chương 2: Xây dựng thành phần trang thông tin điện tử Chương 3: Xây dựng trang thông tin điện tử trường trung học phổ thông Minh Khai Do thời gian làm khóa luận ngắn kinh ngiệm thân cịn hạn chế, nên đề tài khơng tránh khỏi khỏi thiếu sót, tơi mong nhận ý kiến đóng góp quý báu thầy, bạn bè để đề tài hồn thiện Hà Nội, ngày 10 tháng năm 2018 Sinh viên thực đề tài Đỗ Văn Long Giảng viên hướng dẫn: ThS Lê Minh Đức Sinh viên thực hiện: Đỗ Văn Long NHẬN XÉT (Của giảng viên hướng dẫn) GIẢNG VIÊN HƯỚNG DẪN (Chữ ký, họ tên) Giảng viên hướng dẫn: ThS Lê Minh Đức Sinh viên thực hiện: Đỗ Văn Long NHẬN XÉT (Của giảng viên phản biện) GIẢNG VIÊN PHẢN BIỆN (Chữ ký, họ tên) Giảng viên hướng dẫn: ThS Lê Minh Đức Sinh viên thực hiện: Đỗ Văn Long MỤC LỤC PHẦN TỔNG QUAN VẤN ĐỀ NGHIÊN CỨU PHẦN 2: NỘI DUNG KHÓA LUẬN CHƯƠNG TỔNG QUAN VỀ TRANG THÔNG TIN ĐIỆN TỬ VÀ PHẦN MỀMJOOMLA 1.1Cài đặt phần mềm Appserv 1.1.1Cài đặt phần mềm Appserv .3 1.1.2Tạo sở liệu (Database) .6 1.3Cài đặt gói ngơn ngữ tiếng việt cho Joomla 12 1.4 Thay đổi số thông số cho website …14 1.4.1 Thay đổi giao diện cho trang Front end .14 1.4.2 Thay đổi hình ảnh đại diện (logo) trang Web 18 1.4.3 Cấu hình số thông số Global 18 CHƯƠNG XÂY DỰNG CÁC THÀNH PHẦN NỘI DUNG CỦA TRANG THÔNG TIN ĐIỆN TỬ 22 2.1 Các thao tác quản lý Section 22 2.1.1 Tạo Section 22 2.1.2 Chỉnh sửa Section 24 2.1.3 Xóa Section 25 2.2 Các thao tác quản lý Category 26 2.2.1 Tạo nhóm (Category) 26 2.2.2 Chỉnh sửa Category 28 2.2.3 Di chuyển Category sang Section khác 29 2.2.4 Xóa Category 29 2.3 Tạo quản lý viết 29 2.3.1Tạo viết……………………………………………………………………30 2.3.2 Chèn hình ảnh, video vào viết 30 2.3.3 Tạo phần đọc tiếp (Read more), phân trang (Page break) cho viết 33 2.3.4 Tạo bình luận, đánh giá cho viết 34 2.4 Tạo quản lý Menu 36 2.4.1 Tạo Menu 36 2.4.2 Xóa chỉnh sửa Menu 39 Giảng viên hướng dẫn: ThS Lê Minh Đức Sinh viên thực hiện: Đỗ Văn Long CHƯƠNG 3: XÂY DỰNG TRANG THÔNG TIN ĐIỆN TỬ CỦA TRƯỜNG TRUNG HỌC PHỔ THÔNG MINH KHAI 40 3.1 Cấu trúc website 40 3.2 Hệ thống Section 41 3.3 Hệ thống Category .42 3.4 Hệ thống Menu 43 3.5 Kết xây dựng trang thông tin điện tử 47 KẾT LUẬN 48 DANH MỤC TÀI LIỆU THAM KHẢO 49 Giảng viên hướng dẫn: ThS Lê Minh Đức Sinh viên thực hiện: Đỗ Văn Long DANH MỤC CÁC HÌNH VẼ Hình 1.1 Cài đặt Appserv mặc định ổ C Hình 1.2 Select Components Hình 1.3 Apache HTTP Server Infomation Hình 1.4MySQL Server Configuration Hình 1.5 Màn hình sau cài đặt thành công Appserv Hình 1.6 Giao diện phpMyAdmin Hình 1.7 Tạo sở liệu Hình 1.8 Chọn ngơn ngữ cài đặt Hình 1.9 Kiểm tra thơng tin trước cài đặt Hình 1.10 Cấu hình sở liệu Hình 1.11 Cài đặt cấu hình FTP Hình 1.12 Cài đặt cấu hình 10 Hình 1.13 Màn hình Joomla 10 Hình 1.14 Đăng nhập vào trang quản trị 11 Hình 1.15 Giao diện trang quản trị 11 Hình 1.16 Cài đặt gói ngơn ngữ tiếng việt .13 Hình 1.17 Chọn ngơn ngữ tiếng việt 13 Hình 1.18 Template cho website 14 Hình 1.19 Giao diện template Beez 15 Hình 1.20 Các template mạng 15 Hình 1.21 Tải template mạng 16 Hình 1.22 Cài đặt template 16 Hình 1.23 Giao diện template 17 Hình 1.24 Xóa template 17 Hình 1.25 Thay đổi logo cho trang web 18 Hình 1.26 Trung tâm cấu hình 19 Hình 1.27 Thay đổi tên trang web 19 Hình 1.28 Mô tả thông tin trang web 20 Hình 2.1 Thanh công cụ Section 22 Hình 2.2 Tạo Section 23 Hình 2.3 Tải hình ảnh lên máy chủ 24 Giảng viên hướng dẫn: ThS Lê Minh Đức Sinh viên thực hiện: Đỗ Văn Long Hình 2.4 Chỉnh sửa Section 25 Hình 2.5 Xóa Section 25 Hình 2.6 Cơng cụ Category 26 Hình 2.7 Tạo Category 27 Hình 2.8 Tạo Category khác 27 Hình 2.9 Di chuyển thứ tự Category 28 Hình 2.10 Chỉnh sửa Category 28 Hình 2.11 Di chuyển Category sang Section khác .29 Hình 2.12 Sơ đồ phân cấp nội dung 29 Hình 2.13 Tạo Article 30 Hình 2.14 Chèn hình ảnh vào viết 31 Hình 2.15 Chọn hình ảnh cho viết 32 Hình 2.16 Chèn video vào viết 32 Hình 2.17 Hiện thị video soạn thảo 33 Hình 2.18 Tạo read more 34 Hình 2.19 Tạo Page break 34 Hình 2.20 Cài đặt phần mềm Jcomment 35 Hình 2.21 Cài đặt thơng số bình luận cho viết 35 Hình 2.22 Phần bình luận viết 36 Hình 2.23 Tạo Menu 36 Hình 2.24 Tạo Menu cho Section 37 Hình 2.25 Chỉnh thông số cho Menu 38 Hình 2.26 Tạo Menu Category 39 Hình 2.27 Chỉnh thơng số Menu Category 39 Hình 2.28 Cơng cụ xóa chỉnh sửa 39 Hình 3.1 Cấu trúc nội dung trang TTĐT trường THPT Minh Khai 40 Hình 3.2 Đăng nhập vào trang quản trị 41 Hình 3.3 Thanh cơng cụ Section 41 Hình 3.4 Tạo Section 42 Hình 3.5 Các Section tạo 42 Hình 3.6 Thanh cơng cụ Category 42 Hình 3.7 Tạo Category 43 Giảng viên hướng dẫn: ThS Lê Minh Đức Sinh viên thực hiện: Đỗ Văn Long Hình 3.8 Các Category tạo 43 Hình 3.9 Chọn menu 44 Hình 3.10 Tạo menu cho Section 44 Hình 3.11 Menu Section tạo 45 Hình 3.12 Chọn menu Category 45 Hình 3.13 Tạo menu Category 46 Hình 3.14 Các menu Category tạo 46 Hình 3.15 Trang thơng tin điện tử tạo 47 Hình 3.16 Thời khóa biểu 47 Hình 3.17 Hội sách 47 PHẦN TỔNG QUAN VẤN ĐỀ NGHIÊN CỨU Tình hình nghiên cứu ngồi nước liên quan tới đề tài khóa luận Trên giới có nhiều phần mềm để tao website, việc sử dụng phần mềm Joomla cho người bắt đầu a) Lý chọn Joomla Vì Joomla Hệ quản trị nội dung (CMS) Nó cho phép ta xây dựng trang Web ứng dụng trực tuyến mạnh mẽ dễ dàng Ưu điểm Joomla dễ sử dụng mở rộng Điều giúp cho Joomla trở thành phần mềm thiết kế Web phổ biến với người dùng, từ bình dân chuyên nghiệp Joomla thiết kế để cài đặt thiết lập dễ dàng Với Joomla, không cần phải chuyên gia thiết kế hay chun viên lập trình Web, ta xây dựng trang Web dành cho khách hàng cách nhanh.Joomla giải pháp mã nguồn mở miễn phí cho tất người b) Các lĩnh vực ứng dụng Joomla Joomla sử dụng khắp giới nhiều lĩnh vực từ Cổng thông tin điện tử, Thương mại điện tử trực tuyến, Báo điện tử, tạp chí điện tử, Website doanh nghiệp vừa nhỏ, Website quan, tổ chức phi phủ, trường học thông dụng Website gia đình hay cá nhân Một số trang web tiếng dùng Joomla là:Đại học Havard: http://gsas.harvard.edu Tạpchí Outdoor Photographer :http://www.outdoorphotographer.com.Mạng xã hội MTV: http://www.quizilla.com Chuỗi nhà hàng IHOP: http://www.ihop.com.Thời trang Châu Á: http://www.thoitrangchaua.com/ NgânHàng Đơng Nam Á:http://www.seabank.com.vn/ Tình hình nghiên cứu nước liên quan tới đề tài khóa luận Trong nước nay xây dựng website Joomla Joomla phần mềm dễ sử dụng cho người bắt đầu có tính xây dựng website trực tuyến dễ dàng, để người lập trình website phần mềm Joomla gói để bắt đầu * Hệ quản trị nội dung web (CMS) trọng Để tạo mục bình chọn viết phần mềm joomla ta cần cài thêm phần mềm Jcomment Ta cài đặt phần mềm thành phần bổ sung khác Hình 2.20 Cài đặt phần mềm Jcomment Để tiến hành cài đặt thơng số cho phần bình luận viết ta vào Components>Jcomments -> settings Hình 2.21 Cài đặt thơng số bình luận cho viết 35 Hình 2.22 Phần bình luận viết 2.4 Tạo quản lý Menu 2.4.1 Tạo Menu Để tạo menu, ta mở trình duyệt truy cập vào địa chỉ: http://localhost/minhkhai/administrator,đăng nhập tên tài khoản (username) admin, mục mật (password),ta nhập vào mật khẩuđã thiết lập trình cài đặt Joomla Tiếp theovào menu Menus, chọn Main Menu Ta nhấn vào biểu tượng New để tạo Tiếp theo, bấm vào ô vuông bên trái mục Internal Link để mở mục ra, chọn mục Articles Joomla liệt kê tất dạng menu liên quan đến việc quản lý tin tức Trong phần này, cần quan tâm đến menu dành cho Section Category Hình 2.23 Tạo Menu 36 a) Tạo ạo Menu cho Section Bây l tạo menu tương ứng với Section đđã tạo phần trước Ta nhấn vào liên kết k Section Blog Layout, sau đónhập ập vvào thơng tin bao gồm: Tên menu (Title Title), bắt buộc phải có, ví dụ Tin tức Tiếp ếp theo llà tên viết tắt menu (Alias),phải ải viết dính liền, khơng khoảng trắng và không đư bỏ dấu Mục Display in cho biết ết menu n hiển thị nhóm menu nào, ào, bạn chọn Main Menu Ở mục Parent Item m, menu tạo menu cha, bạn chọn llà Top Nếu menutạo làà menu con, ta phải chọn menu Parent Item làm menu cha Tiếp theo mục Published chobiết menu có ợc sử dụng hay không, mặc định ịnh tạo menu th Yes Mục Order,, cho phép bbạn xếp thứ tự ữa menu Mặc định tạo th menu nằm vị trí cuối ối ccùng, vàchỉ chỉnh sửa ửa lại thứ tự menu sau khiđã lưu lại Mục On Click, Open in giúpchọn hành động ộng nhấn vvào menu như: Chuyển đến trang liên kết ết Section (Parent (Parent Window with Browser Navigation Navigation), mở cửa sổ chuyển ển đến trang liên li kết Section (New New Window with Browser Navigation), mở cửa sổ v chuyển đến viết ết có Section ((New Window without Browser Navigation) Navigation Hình 2.24 Tạo Menu cho Section 37 Tiếp theo cần cấu hình tham số cho menu.Ởgóc phải, khung Parameters (Basic),chú ý mục sau: Mục Section quan trọng, ta phải chọn đến Section mà menu liên kết Tiếp theo mục Description dùng để ẩn/hiện mô tả Section, mục Description Image dùng để ẩn/hiện hình ảnh Section Phần bên cách bố trí hiển thị viết Mục # Leading cho biết số lượng phần giới thiệu viết hiển thị hết bề ngang trang Mục # Intro cho biết số lượng phần giới thiệu viết hiển thị Cuối phần giới thiệu có dòng chữ nhỏ Read more Đọc thêm để xem toàn viết Tiếp theo mục # Column cho biết số cột viết chia Website, mục # Links dùng để cấu hình số lượng tên viết hiển thị dạng liên kết Sau hồn tất nhấn Save để lưu lại Hình 2.25 Chỉnh thông số cho Menu b) Tạo menu cho Category Tiếp theo, ta cần tạo menu tin tức,sự kiện nằm menu tin tức Nhấn New để tạo menu, lúc chọn dạng Category Blog Layout 38 Hình 2.26 Tạo Menu Category Tương tự tạo ạo menu Section Blog Layout, ta ũng phải điền vvào thông tin sau: tên menu (Title), bắt buộc phải có, tên t viết tắt menu (Alias Alias) Ở mục Parent Item, dođang tạo ạo menu menu Tin Tứcnên đâychọn ọn Sự Kiện Ở phần Parameter, mục Category, Category ta chọn đến Category mà menu liên ên kkết, ví dụ Tin Tức /Sự Kiện Cuối ùng nhấn nh Save để lưu lại Hình 2.27 Chỉnh thơng số Menu Category 2.4.2 Xóa chỉnh ỉnh sửa Menu Cũng giống g phần ph Section, Category, Article việc xóa vàà ch chỉnh sửa ta chọn Edit Trash Hình 2.28 Cơng cụ xóa chỉnh sửa 39 CHƯƠNG 3.XÂY DỰ ỰNG TRANG THÔNG TIN ĐIỆN TỬ CỦA TRƯỜNG TRUNG HỌC H PHỔ THƠNG MINH KHAI 3.1 Cấu ấu trúc trang thơng tin Để xây dựng trang thông tin điện tử cấu trúc bên ên rrất quan trọng Để có nhìn tổng quan trang thơng tin trường ờng trung học phổ thông Minh K Khai ta cần có ững Section, Category, Article mục làm nên trang thơng tin tin Dưới cấu trúc trang thông tin điện tử Giới thiệu chung Giới Thiệu Cơ cấu tổ chức Thông Báo Tin Tức Sự Kiện Tin tức Sự kiện Tài liệu môn tốn Trường THPT Minh Khai Thư Viện Tài liệu mơn ngữ văn Tài liệu mơn khác Khối 10 Thời Khóa Biểu Khối 11 Nghiên Cứu Khoa Học Khối 12 Giải Trí Thư Giãn Hình 3.1 Cấu ấu trúc nội dung trang TTĐT trường ờng THPT Minh Khai 40 3.2 Hệệ thống Section Trang thông tin điện tử trường trung học phổ thơng Minh Khai hai có Section Sau ta tiến hành tạo ạo Section Do thao tác tạo Section làà hoàn toàn gi giống nên ta trình ình bày chi tiết ti tạo Section “Giới Thiệu” Đầu tiên mở trình duyệt truy cập vào địa chỉ: http://localhost/minhkhai/administrator/index.php Ta đăng nhậpp bbằng tên tài khoản http://localhost/minhkhai/administrator/index.php (username), mật (password password),mật mà ta thiết lậpp trình cài đặt Joomla Hình 3.2 Đăng nhập vào trang quản trị Khi đăng nhập p xong, để đ tạo Section, ta vàoContent, chọnn Section Manager xong chọnNew để tạo o Section m Để tạo Category cho mục Giới Thiệu Chung bạnn vào th thẻ Content, chọn Category Manager, chọn n New để đ tạo nhóm Hình 3.3 Thanh cơng cụ Section 41 Nhập Title (tên ên Section) Giới Thiệu,Alias (viết tăt) GioiThieu GioiThieu, chọn mặc định Published làà yes Các mục m khác cài đặt măc định Hình 3.4 Tạo Section Sau nhấn ấn Save để lưu l lại Với Section khác trường ờng ta llàm tương tự Hình 3.5 Các Section tạo 3.3 Hệệ thống Category Tương tự tạo ạo Section, trang thông tin điện tử trường ờng trung học phổ thông Minh Khai có 10 Category tướng tư ứng ta cần tạo 10 Category Hình ình 3.6 Thanh cơng cụ Category 42 Tương tự nhưtạo ạo Section khác có thêm th mục chọn Section Section, ta cần chọn vào mục Giới Thiệuđã tạo ạo phần Section trước Các thơng số đặt ặt mặc định nh hình Xong ta Save lại để lưu ưu Hình 3.7 Tạo Category Với ới Category khác ta làm l tương tự khác cần ần ccòn mục Section khác mà ta định ịnh hướng h từ trước Hình 3.8 Các Category tạo 3.4 Hệ thống Menu Đểể tạo hệ thống Menu cho Section, Category website trư trường trung học phổ ổ thông Minh Khai ta cần tạo Menu Section trước tr a) Tạo Menu Section Đầu tiên tavào vào menu Menus, chọn Main Menu Ta nhấn vào bi biểu tượng New để tạo Tiếp theo, bấm ấm vào v ô vuông bên trái mục Internal Link đểể mở mục ra, chọn mục Articles Articles Joomla liệt kê tất ất dạng menu li liên quan đến 43 việc ệc quản lý tin tức Trong phần này, n cần quan tâm âm đđến menu dành cho Section Hình 3.9 Chọn menu Ta nhấn vào liên kết k Section Blog Layout, sau ta nhập vào thông tin bao gồm: Tên menu (Title), ), đặt Giới Thiệu Tiếp theo làà tên vi viết tắt menu (Alias), ta phải ải viết dính liền, không khoảng trắng v không ợc bỏ dấu Mục Display in cho biết menu ợc hiển thị th nhóm menu nào, ta ch chọn Main Menu Ở mục Parent Item, Item ta chọn Top.Tiếp theo mục Published cho ta biết menu có sử dụng ụng hay khơng, mặc định tạo menu th Yes Mục Order, cho phép ta s xếp thứ tự trước sau menu Mục On Click, Open inta in chọn chuyển đến trang liên kết ết Section ((Parent Window with Browser Navigation) Navigation Hình 3.10 Tạo menu cho Section 44 Tiếp ếp theo cần cầ cấu hình tham số cho menu Ở góc phải, khung Parameters (Basic) Mục ục ti Section quan trọng, ta phải ải chọn đến Section mà menu liên kết chọn Giới Thiệu Tiếp theo mục Description dùng để ẩn/hiện mô tả Section ta chọn ẩn (Hide), mục Description Image dùng để ẩn/hiện hình ảnh Section ta chọn ẩn Cịn thơng sốố khác ta đặt mặc định, sau Save để lưu lại ại Với Menu Section khác ta làm l tương tự Hình 3.11 Menu Section tạo b) Tạo menu Category Tiếp theo, ta cần ần tạo menu Giới Thiệu Chung, Cơ Câu T Tổ Chức nằm menu Giới Thiệu Nhấn Nh New để tạo menu, lúc ta chọn ọn dạng Category Blog Layout Hình 3.12 Chọn menu Category Tương tự tạo ạo menu Section Blog Layout, ta ũng phải điền vvào thông tin sau: tên menu (Title), bắt buộc phải có, tên t viết tắt menu (Alias Alias) Ở mục Parent Item, ta tạo ạo menu menu Giới Thiệunên ta chọnGiới Thiệu 45 Chung Ở phần Parameter, Parameter mục Category, ta chọn đến Category màà menu ssẽ liên kết, làGiới ới Thiệu Chung/ Cơ C Cấu Tổ Chức, tham sốố khác để mặc định Cuối ta nhấn Save để lưu ưu lại l Hình 3.13Tạo menu Category Với ới Menu Category khác ta làm l tương tự Hình 3.14 Các menu Category tạo 46 3.5 Kết ết xây dựng trang thơng tin điện tử Sau ta hồn thành bước bư tạo website trường ờng trung học phổ thôn thông Minh Khai đạt ợc kết Hình 3.15 Trang thơng tin điện tử tạo Hình 3.16 Thời khóa biểu Hình 3.17 Hội sách 47 KẾT LUẬN Thơng qua q trình thực đề tài khóa luận “Xây dựng trang thơng tin điện tử sử dụng phần mềm Joomla” thực mục tiêu đề ra: - Xây dựng trang TTĐT trường THPT Minh Khai sử dụng phần mềm Joomla - Trang TTĐT có nội dung Tin Tức, Giới Thiệu, Thời Khóa Biều Trang TTĐT số hạn chế: - Giao diện đơn giản - Màu sắc đơn điệu Hướng phát triển cho đề tài khóa luận - Bổ sung thêm chức bỏ phiếu, đếm số lượng người truy cập - Cải tiến hình thức cho phong phú, chuyên nghiệp Nếu có điều kiện tiếp tục nghiên cứu, xây dựng website lớn hơn, phong phú 48 DANH MỤC TÀI LIỆU THAM KHẢO Ebooks Joomla tiếng việt, nhà xuất Sinhvienit.net Nguyễn Bá Long,Nguyễn Văn Thể, Vũ Đức Vinh (2012), Nghiên cứu phát triển hệ thống mã nguồn mở Joomla JoomlaShine, Thiết kế Website thật dễ dàng với Joomla 3.X Trang web: http://www.buaxua.vn/ Trang web: http://echip.com.vn/ 49