LỜI CẢM ƠN Trong lời báo cáo khoá luận tốt nghiệp “Xây dựng website giới thiệu du lịch tỉnh U Đôm Xay” Em muốn gửi lời cảm ơn biết ơn chân thành tới tất người hỗ trợ, giúp đỡ em kiến thức tinh thần trình thực đồ án Trước hết em xin chân thành cảm ơn ThS Phan Trung Kiên, giảng viên khoa Toán - Lý - Tin , trường Đại học Tây Bắc, người trực tiếp hướng dẫn, nhận xét, giúp đỡ em suốt trình thực tập Xin chân thành cảm ơn ban giám hiệu nhà trường, thầy khoa Tốn - Lý - Tin phòng ban nhà trường tạo điền kiện tốt cho em suốt thời gian học tập và làm khóa luận Cuối cùng, em xin gửi lời cảm ơn đến gia đình, bạn bè, người thân giúp đỡ động viên em trình học tập làm khóa luận Do thời gian thực kiến thức nhiều hạn chế nên khóa luận chắn khơng tránh khỏi thiếu sót định, em mong nhận ý kiến đóng góp thầy giáo bạn để em có thêm kinh nghiệm hồn thiện khóa luận Em xin chân thành cảm ơn! Sơn La, tháng năm 2018 Sinh viên Năn Thị Đa Sẻng Súc MỤC LỤC LỜI MỞ ĐẦU 1 Lý chọn đề tài Mục đích nghiên cứu Đối tƣợng nghiên cứu Phạm vi nghiên cứu Phƣơng pháp nghiên cứu Bố cục đề tài CHƢƠNG GIỚI THIỆU VỀ WORDPRESS 1.1 WordPress gì? 1.2 Các loại WordPress 1.3 Ƣu điểm WordPress CHƢƠNG 2: TỔNG QUAN VỀ MỘT WEBSITE WORDPRESS 2.1 Localhost gì? 2.2 Localhost vận hành nhƣ 2.3 Hƣớng dẫn cài đặt Localhost 2.4 Thao tác localhost 2.4.1 Làm việc với thƣ mục tập tin 2.4.2 Tạo sở liệu MySQL (Database) 2.4.3 Cách đổi cổng mạng cho Localhost 2.4.4 Các bƣớc cài đặt WordPress localhost 10 2.5.1 Cách đăng Post 15 2.6 Chức revision WordPress 18 2.7 Ý nghĩa chức trang tạo post 19 2.7.1 Xem tính ẩn Post 19 2.7.2 Ý nghĩa tính ẩn khung soạn Post 21 2.8 Cách tạo page WordPress 25 2.8.1 Page WordPress gì? 25 2.9 Sự khác post page 26 2.9.1 Điểm chung Post Page 26 2.9.2 Post Page khác nào? 26 2.9.3 Khi dùng Post 26 2.9.4 Khi dùng Page 26 2.11 Chèn ảnh/tập tin kỹ thuật số vào nội dung WordPress 27 3.13 Cách chèn video vào nội dung 32 2.14 Tìm hiểu khu vực appearance dashboard 33 2.14.1 Menu 33 2.14.2 Thêm menu kiểu mẹ/con 34 2.15 Cách cài đặt theme WordPress 35 2.15.1 Tìm cài đặt theme từ thƣ viện 35 2.15.2 Cài theme cách upload từ máy tính lên website 36 2.15.3 Cài theme cách upload trực tiếp vào host/localhost 36 2.16 Hƣớng dẫn sử dụng widget 37 2.17 Hƣớng dẫn Plugin 38 2.17.1 Plugin gì? 38 2.17.2 Cách tìm cài đặt plugin 38 2.17.3 Các plugin cần thiết nên cài đặt 42 CHƢƠNG 3: CÀI ĐẶT VÀ THỬ NGHIỆM ỨNG DỤNG 44 3.1 Giới thiệu trang website du lịch tỉnh U Đôm Xay 44 3.1.1 Trang Home 44 3.1.2 Trang About 45 3.1.3 Trang Gallery 45 3.1.4 Trang Contact 46 3.1.5 Trang Maps 46 3.1.6 Trang Guesthouse and Eat 47 KẾT LUẬN 48 TÀI LIỆU THAM KHẢO 49 DANH MỤC HÌNH ẢNH Hình 1: Hình 2: Hình 3: Hình 4: Hình 5: Hình 6: Hình 7: Hình 8: Hình 9: Hình 10: Hình 11: Giao diện thêm database Giao diện thiết lập Xampp Giao diện thƣ mục WordPress tải 10 Các tập tin thƣ mục mã nguồn WordPress 10 Giao diện thƣ mục WordPress 11 Giao diện mở đầu vào WordPress 12 Giao diện cài đặt WordPress 12 Giao diện cài đặt WordPress 13 Giao diện cài đặt WordPress 13 Giao diện nhập thông tin cài đặt Website 14 Giao diện cài đặt thành công WordPress 14 Hình 12: Hình 13: Hình 14: Hình 15: Hình 16: Hình 17: Hình 18: Hình 19: Hình 20: Hình 21: Hình 22: Hình 23: Hình 24: Hình 25: Hình 26: Giao diện quản trị WordPress 15 Giao diện thiếp lập WordPress 15 Giao diện sửa nội dung viết 16 Giao diện thiếp lập Category 16 Giao diện thiếp lập Tag 17 Giao diện thiếp lập Featured Image 17 Giao diện post 18 Giao diện thiếp lập Revision 19 Giao diện thiếp lập Revision 19 Giao diện thêm post 20 Giao diện thêm post 20 Giao diện khung soạn nội dung 21 Giao diện Excerpt 21 Giao diện Trackbacks 22 Giao diện Custom Fields 22 Hình 27: Hình 28: Hình 29: Hình 30: Hình 31: Hình 32: Giao diện iscussion 23 Giao diện Slug 23 Giao diện Revisions 24 Giao diện Comments 24 Giao diện Format 24 Giao diện thêm page 25 Hình 33: Hình 34: Hình 35: Hình 36: Giao diện reading settings 27 Giao diện chèn ảnh tập tin 27 Giao diện add media 28 Giao diện sau upload ảnh 28 Hình 37: Hình 38: Hình 39: Hình 40: Hình 41: Hình 42: Hình 43: Hình 44: Hình 45: Giao diện hình ảnh đƣợc hiển thị 29 Giao diện create Gallery 30 Giao diện thiếp lập create Gallery 30 Giao diện thiếp lập Gallery 31 Giao diện hiển thị thành công 31 Giao diện chèn video trực tuyến 32 Giao diện chèn video 33 Giao diện trang chủ 34 Giao diện kết 35 Hình 46: Hình 47: Hình 48: Hình 49: Hình 50: Giao diện add theme 35 Giao diện tìm theme 36 Giao diện Widget 37 Giao diện chỉnh Widget 38 Giao diện Plugin 39 Hình 51: Hình 52: Hình 53: Hình 54: Hình 55: Hình 56: Hình 57: Hình 58: Hình 59: Hình 60: Hình 61: Giao diện thông tin plugin 39 Giao diện vào tùy chỉnh plugin 41 Giao diện tùy chỉnh plugin 41 Giao diện kiểm tra plugin 42 Giao diện header 44 Giao diện home 44 Giao diện viết 45 Giao diện ảnh 45 Giao diện contact 46 Giao diện map 47 Giao diện Guesthous 47 LỜI MỞ ĐẦU Lý chọn đề tài Ngày nay, ứng dụng công nghệ thông tin việc Tin học hóa đƣợc xem yếu tố mang tính định hoạt động phủ, tổ chức, đóng vai trò quan trọng, tạo bƣớc đột phá mạnh mẽ Đứng trƣớc vai trò thơng tin hoạt động cạnh tranh gay gắt, tổ chức doanh nghiệp tìm biện pháp để xây dựng hồn thiện hệ thống thơng tin nhằm Tin học hóa hoạt động vụ đơn vị Hiện website phát triển mạnh mẽ Kỹ thuật số giúp tiết kiệm đáng kể chi phí vận chuyển chung gian đặc biệt giúp tiết kiệm thời gian để ngƣời đầu tƣ vào hoạt động khác Bởi thời điểm này, Internet bùng nổ đóng vai trò vơ cần thiết đời sống kinh tế Tất thông tin tour du lịch đến việc tiếp cận đƣợc khách du lịch tiềm đƣợc thơng qua website chun nghiệp uy tín nhất, để quảng cáo tăng lên số lƣợng khách du lịch lên Chính em chọn đề tài về: “Xây dựng website giới thiệu du lịch tỉnh U Đôm Xay” cho quan du lịch tỉnh U Đôm Xay Mục đích nghiên cứu - Nghiên cứu học tập mã nguồn mở WordPress - Nghiên cứu phát triển “Xây dựng website giới thiệu du lịch tỉnh U Đôm Xay” Đối tƣợng nghiên cứu - Mã nguồn mở WordPress - Hệ thống quản lý điểm du lịch tỉnh U Đôm Xay Phạm vi nghiên cứu - Hệ thống quản lý điểm du lịch tỉnh U Đôm Xay Phƣơng pháp nghiên cứu - Tổng hợp tài liệu - Nghiên cứu tài liệu - Khảo sát, phân tích thực tế - Thiết kế, cài đặt kỹ thuật Bố cục đề tài Đề tài gồm phần:  Mở đầu  Nội dung - Chƣơng Giới thiệu WordPress - Chƣơng Tổng quan WordPress - Chƣơng Cài đặt thử nghiệm ứng dụng  Kết luận  Tài liệu tham khảo CHƢƠNG GIỚI THIỆU VỀ WORDPRESS 1.1 WordPress gì? - WordPress phần mềm mã nguồn mở đƣợc cung cấp miễn phí, sử dụng ngơn ngữ lập trình PHP hệ sở liệu MySQL Do đó, thích hợp cho muốn đặt blog website sử dụng tên miền riêng Tuy nhiên, khơng có tên miền riêng chịu đƣợc vài hình ảnh quảng cáo đơi xuất hiện, dùng chung với nhà cung cấp Automattic Production địa http://wordpress.com tƣơng tự nhà cung cấp khác - WordPress dạng phần mềm mã nguồn mở, đƣợc phát triển Michel Valdrighi Cái tên WordPress đƣợc đề xuất Christine Selleck, ngƣời bạn nhà phát triển Matt Mullenweg - WordPress viết PHP sử dụng hệ quản trị MySQL WordPress chạy tốt PHP5, hầu hết host (dịch vụ lƣu trữ trực tuyến) có PHP hỗ trợ WordPress Nhiều Host (Godaddy, Host Gator,…) có chức tự động cài đặt WordPress - WordPress để đăng tải thơng tin lên mạng, WordPress có chức nhƣ website khác Nó làm site tin tức, đánh giá, bán hàng… chí mạng xã hội Ngồi ra, WordPress hỗ trợ tạo Blog miễn phí WordPress.com để khơng có điều kiện tài chính, kỹ thuật, thời gian… sử dụng đƣợc WordPress - WordPress thêm vào số tính nhỏ nhằm hỗ trợ ngƣời dùng trình sử dụng nhƣ khả tự động lƣu liên tục soạn thảo, nạp nội dung từ blog khác hay chia mục cho viết Tuy nhiên, WordPress lại chức xem trƣớc (preview) nội dung viết mình, điều gây khó khăn cho ngƣời dùng họ cần xem xét chỉnh sửa - Các nâng cấp đƣợc định tên mã (codenames) đại diện cho nhạc sĩ nhạc jazz tiếng 1.2 Các loại WordPress WordPress tạm đƣợc phân thành hai loại: Sử dụng dịch vụ nhà cung cấp (WordPress.com) - WordPress.com nhóm ngƣời dựa mã nguồn WordPress tinh chỉnh lại để cung cấp dịch vụ tạo blog cho ngƣời sử dụng, nhằm đơn giản cho ngƣời dùng không chuyên Khối lƣợng theme lớn, sử dụng mã nguồn mở PHP, tuỳ biến giao diện khá, xứng đáng đối thủ ngang tài google blogger - Giao diện thân thiện dễ sử dụng, cung cấp 50 kiểu giao diện khác cập nhật thƣờng xuyên, hệ thống quản lý viết comment mạnh mẽ, cho phép nhiều ngƣời viết quản lý blog, kết nối với cộng đồng WordPress.com thông qua trang chủ, hỗ trợ tốt tiếng Việt nhiều điểm bật khác 1.3 Ƣu điểm WordPress - WordPress mã nguồn mở - Dễ cài đặt, cần khởi tạo database, upload thiết lập tham số file wpconfig.php, sau 1,2 lần click chuột, bạn sẵn sàng để viết blog - Không giới hạn số lƣợng category sub-category: bạn tạo vơ số chun mục chuyên mục chuyên mục mà khơng gặp phải rắc rối Tự động xuất RSS Atom: giúp cập nhật thông tin blog bạn - Sử dụng giao diện XML RPC để trackback viết từ xa - Có thể đăng blog từ email - Hỗ trợ plugin theme: điểm mạnh WordPress Nó tạo hội cho hàng nghìn nhà phát triển tham gia phát triển plugin theme cho WordPress, làm cho ngày phong phú tính giao diện - Có thể nhập liệu từ Blogger, Blogware, Bunny’s Technorati Tags, DotClear, GreyMatter, Jorome’s Keyword, LiveJournal, Movable Type, TypePad, RSS, Simple Tagging, Textpattern, B2evoluton, v.v Đây chức tuyệt vời nhƣ bạn muốn chuyển từ blog khác sang sử dụng WordPress, giúp lại lấy lại tất viết blog khác để chuyển qua WordPress - Rất nhiều tài liệu hƣớng dẫn để giúp phát triển thêm tính năng, nhiều API để mở rộng - Dễ quản lý trì mà chẳng cần phải có nhiều kĩ hay kinh nghiệm - Khả tìm kiếm blog tốt - Xuất nội dung chiều dài viết - Hỗ trợ viết blog đa ngôn ngữ - Administration Panel đƣợc tổ chức tốt với nhiều tính nhƣng lại dễ hiểu dễ sử dụng - Quản lý liên kết dễ dàng Với trợ giúp plugin nhiều API, bạn chỉnh sửa WordPress tùy thích theo nhu cầu bạn, chí bạn sử dụng WordPress để làm website hồn chỉnh WordPress có hàng ngàn plugin theme, cộng với đồng ngƣời sử dụng đơng đảo ln sẵn sàng góp sức phát triển, điều làm cho WordPress ngày lớn mạnh thể vai trò số Kiểm tra kết Hình 45: Giao diện kết 2.15 Cách cài đặt theme WordPress 2.15.1 Tìm cài đặt theme từ thư viện Để cài theme cho WordPress, vào Appearance –> Themes ấn Add New Hình 46: Giao diện add theme Lúc bạn thấy danh sách theme có thƣ viện WordPress.Org, ghi nhớ thƣ viện có 2000 themes khác lận Bạn sử dụng lọc để tìm theme phù hợp với sở thích/nhu cầu 35 Hình 47: Giao diện tìm theme Sau tìm theme ƣng ý, ấn vào theme để xem thơng tin xem trƣớc theme Hãy lƣu ý rằng, tính xem trƣớc có ý nghĩa tƣợng trƣng đơi lúc khơng hiển thị xác đầy đủ tính có theme Ấn nút Install để cài đặt ấn vào nút Activate lên để kích hoạt 2.15.2 Cài theme cách upload từ máy tính lên website Ta có theme máy tính nén lại thành file zip Lƣu ý rằng, phải nén thƣ mục theme khơng nén ln thƣ mục lồng vào Sau có file nén zip theme, bạn vào Appearance –> Themes –> Add New –> Upload Theme Sau bạn upload file zip theme lên kích hoạt nhƣ thơng thƣờng Nếu báo lỗi missing style.css nén với cấu trúc sai, giải nén nén lại cho nhƣ nói 2.15.3 Cài theme cách upload trực tiếp vào host/localhost Cách dùng để làm bị giới hạn dung lƣợng upload theme nặng, giải nén upload thƣ mục theme vào thƣ mục /wp- content /themes/, nhớ thƣ mục theme phải có dạng /tên-theme/style.css khơng phải 36 Sau upload xong, vào Appearance –> Themes kích hoạt lúc theme vừa upload hiển thị 2.16 Hƣớng dẫn sử dụng widget Widget gọi tính mà website WordPress phải cần dùng, tập hợp chức Mỗi widget tƣơng ứng với chức để chèn vào sidebar (thanh bên) theme Chẳng hạn nhƣ bạn chèn widget Recent Posts để hiển thị viết nhất, widget Text để chèn mã HTML vào,…v v… Để thao tác với Widget, bạn vào Appearance –> Customize Appearance –> Widget Hình 48: Giao diện Widget Trong đó, bên tay trái danh sách widget mà sử dụng tay phải sidebar Tùy vào theme, có sidebar, có nhiều theme có sidebar dành riêng cho phần (Trang chủ, Single, Page,…) Để sử dụng widget, cần click kéo widget bên tay trái vào sidebar mà muốn hiển thị widget mà thơi 37 Hình 49: Giao diện chỉnh Widget Hoặc click vào widget bên tay trái chọn sidebar cần dùng ấn nút Add Widget, tự thêm vào vị trí cuối sidebar Sau thêm xong widget, widget có tùy chọn riêng biệt để bạn thiết lập nhằm hiển thị nhƣ ý muốn, bạn bấm vào tùy chỉnh lại, sau ấn Save để lƣu lại 2.17 Hƣớng dẫn Plugin 2.17.1 Plugin gì? Plugin đƣợc dịch theo nghĩa tiếng Việt trình cắm, dùng để bổ sung tính vào website WordPress mà mặc định khơng hỗ trợ Ví dụ bạn muốn có thêm tính hiển thị viết liên quan cài Plugin làm chức viết liên quan 2.17.2 Cách tìm cài đặt plugin Giai đoạn 1: Tìm hiểu Plugin Trƣớc cài plugin gì, phải nên tìm hiểu qua plugin xem có chức cần thiết khơng Trƣớc tiên, vào trang https://WordPress.org/plugins/ để tìm xem qua thơng tin plugin 38 Hình 50: Giao diện Plugin Sau click thẳng vào plugin TinyMCE Advanced để xem thơng tin Hình 51: Giao diện thông tin plugin Ở trang thông tin, thấy nhiều thông tin nhƣ mô tả (Description), cách cài đặt & sử dụng (Installation), hỏi đáp câu hỏi thơng dụng (FAQ), 39 hình ảnh plugin (Screenshots), lịch sử cập nhật (Changelog), thống kê (Stats), gửi hỗ trợ (Support), đánh giá (Reviews) nhà phát triển (Developers) Khơng phải plugin có đủ phần mà tùy thuộc nhà phát triển cung cấp ta xem đó, tốt nên quan tâm phần Description, Installation Screenshots Nếu thấy lƣợt tải cao tƣơng thích với phiên WordPress (phần Requires) đánh giá plugin tốt, đƣợc cập nhật thƣờng xuyên nhiều ngƣời tin dùng Giai đoạn Cài đặt Khi cài plugin thƣ viện WordPress.Org vào Dashboard –> Plugins –> Add New gõ tên plugin cần cài Install Activate Giai đoạn Tìm khu vực tùy chỉnh Mỗi plugin đa phần cung cấp khu vực tùy chỉnh để thiết lập tùy chọn, có vài cần kích hoạt lên chạy nên khơng có phần nhƣng đa phần có Và khu vực tùy chỉnh đa phần nằm menu Settings Dashboard Do vậy, sau cài plugin xong rê chuột vào phần Settings (Một số plugin chứa phần tùy chỉnh mục khác, có menu riêng) xem có khu vực tùy chỉnh liên quan tới plugin vừa cài hay khơng 40 Hình 52: Giao diện vào tùy chỉnh plugin Cũng có vài trƣờng hợp, khu vực tùy chỉnh liên kết riêng menu Dashboard, có lọt vào mục Tools, Appearance, nhƣng đa phần nằm Settings nên mò trƣớc Nhƣ plugin TinyMCE Advanced có khu vực tùy chỉnh phần Settings, click vào để bắt đầu thiết Hình 53: Giao diện tùy chỉnh plugin 41 Khơng có plugin có thiết lập giống plugin nên ý đọc kỹ phần tập mò cách sử dụng cho quen Sau tùy chỉnh xong phải ấn nút Save Change để thay đổi có hiệu lực Giai đoạn Kiểm tra Ta vừa cài plugin TinyMCE Advanced tùy chỉnh, biết plugin có tác dụng khu vực soạn thảo nội dung chắn để kiểm tra phải vào phần soạn thảo nội dung mà kiểm tra Hình 54: Giao diện kiểm tra plugin 2.17.3 Các plugin cần thiết nên cài đặt Danh sách plugin cần cài đặt: - JetPack – Bộ tập hợp cơng cụ hữu ích cho WordPress (không cài đƣợc localhost) - Akismet – Chống spam bình luận cực mạnh - Advanced TinyMCE – Bổ sung nút soạn thảo vào WordPress - Yoast SEO – Hỗ trợ SEO cho WordPress tốt - WP Super Cache – Tạo nhớ đệm để tăng tốc website - iThemes Security – Plugin bảo mật thông dụng cho WordPress - Contact Form – Tạo form liên hệ tốt 42 - Responsive Lightbox by dFactory – Tạo hiệu ứng lightbox click vào ảnh để xem ảnh lớn - ReplyMe – Gửi thông báo có ngƣời trả lời bình luận - Disqus – Nếu bạn muốn dùng hệ thống bình luận nhƣ Thachpham.com cài vào 43 CHƢƠNG 3: CÀI ĐẶT VÀ THỬ NGHIỆM ỨNG DỤNG 3.1 Giới thiệu trang website du lịch tỉnh U Đôm Xay Phần Header Header phần đầu trang web bao gồm:  Site title: Tên đề trang Web la Oudomxaytourism  Menu: : nơi chứa chuyên mục cho trang web bao gồm: Home, About, Gallery, Contact, Maps, Guesthouse and Eat Hình 55: Giao diện header 3.1.1 Trang Home Nhấn vào menu Home hiển thông tin giới thiệu lịch sử tỉnh U Đom Xay Hình 56: Giao diện home 44 3.1.2 Trang About Trong menu About gồm có menu con, menu chứa thông tin giới thiệu huyện nơi du lịch Hình 57: Giao diện viết 3.1.3 Trang Gallery Trong menu Gallery có menu Photos videos du lịch Hình 58: Giao diện ảnh 45 3.1.4 Trang Contact Hình 59: Giao diện contact 3.1.5 Trang Maps Menu Maps chứa sơ đồ du lịch 46 Hình 60: Giao diện map 3.1.6 Trang Guesthouse and Eat Menu Guesthouse and Eat chứa thông tin nhà nghỉ quán ăn Hình 61: Giao diện Guesthous 47 KẾT LUẬN Với bảo hƣớng dẫn thầy Phan Trung kiên với nỗ lực làm việc thân, em hồn thành khố luận tốt nghiệp với đề tài “Xây dựng website giới thiệu du lịch tỉnh U Đôm Xay” Với thuận lợi khó khăn q trình làm việc, em xây dựng đƣợc website giới thiệu du lịch khóa luận đƣợc hồn thành với nội dung sau: - Tìm hiểu nắm đƣợc quy trình cài đặt ứng dụng WordPress - Xây dựng trang web giới thiệu du lịch WordPress Trong trình thực hiện, em tổng hợp lại đƣợc kiến thức thời gian học Trƣờng qua em nâng cao khả tìm kiếm thông tin để phục vụ công việc Kết nghiên cứu làm khóa luận giúp em có thêm phƣơng pháp xây dựng website, góp phần làm cho môi trƣờng làm việc thuận tiện dễ dàng 48 TÀI LIỆU THAM KHẢO http://hoclaptrinhweb.org/hoc-thiet-ke-web/hoc-thiet-ke-website-bangwordpress/256-huong-dan-cai-dat-wordpress.html https://thachpham.com/WordPress https://wordpress.org 49 ... website chuyên nghiệp uy tín nhất, để quảng cáo tăng lên số lƣợng khách du lịch lên Chính em chọn đề tài về: Xây dựng website giới thi u du lịch tỉnh U Đôm Xay cho quan du lịch tỉnh U Đơm Xay Mục... nghiên c u - Nghiên c u học tập mã nguồn mở WordPress - Nghiên c u phát triển Xây dựng website giới thi u du lịch tỉnh U Đôm Xay Đối tƣợng nghiên c u - Mã nguồn mở WordPress - Hệ thống quản lý... thống quản lý điểm du lịch tỉnh U Đôm Xay Phạm vi nghiên c u - Hệ thống quản lý điểm du lịch tỉnh U Đôm Xay Phƣơng pháp nghiên c u - Tổng hợp tài li u - Nghiên c u tài li u - Khảo sát, phân tích