Tìm hiểu kỹ thuật làm giao diện cho hệ quản trị nội dung wordpress và ứng dụng

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC DÂN LẬP HẢI PHÒNG -o0o - ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN HẢI PHÒNG 2016 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC DÂN LẬP HẢI PHÒNG -o0o - TÌM HIỂU KỸ THUẬT LÀM GIAO DIỆN CHO HỆ QUẢN TRỊ NỘI DUNG WORDPRESS VÀ ỨNG DỤNG ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY Ngành: Cơng nghệ Thơng tin HẢI PHỊNG - 2016 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC DÂN LẬP HẢI PHÒNG -o0o - TÌM HIỂU KỸ THUẬT LÀM GIAO DIỆN CHO HỆ QUẢN TRỊ NỘI DUNG WORDPRESS VÀ ỨNG DỤNG ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY Ngành: Cơng nghệ Thơng tin Sinh viên thực hiện: Trịnh Doãn Khiển Giáo viên hướng dẫn: ThS Đỗ Văn Chiểu Mã số sinh viên: 1212101001 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC DÂN LẬP HẢI PHỊNG CỘNG HỒ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập - Tự - Hạnh phúc -o0o - NHIỆM VỤ THIẾT KẾ TỐT NGHIỆP Sinh viên: Trịnh Doãn Khiển Mã số: 1212101001 Lớp: CT1601 Ngành: Cơng nghệ Thơng tin Tên đề tài: Tìm hiểu kỹ thuật làm giao diện cho hệ quản trị nội dung Wordpress ứng dụng 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 a Nội dung: - Tìm hiểu hệ quản trị nội dung mã nguồn mở WordPress - Cài đặt máy website xây dựng từ WordPress - Kỹ thuật tạo giao diện người dùng cho WordPress - Quản trị nội dung trang tin WordPress - Đưa website lên Internet b Các yêu cầu cần giải - Hiểu mục tiêu cách thức thực - Xây dựng website với giao diện riêng đưa lên Internet Các số liệu cần thiết để thiết kế, tính tốn Địa điểm thực tập CÁN BỘ HƯỚNG DẪN ĐỀ TÀI TỐT NGHIỆP Người hướng dẫn thứ nhất: Họ tên: Đỗ Văn Chiểu Học hàm, học vị: Thạc sĩ Cơ quan cơng tác: Đại học Dân lập Hải Phịng Nội dung hướng dẫn: - Tìm hiểu hệ quản trị nội dung mã nguồn mở WordPress - Cài đặt máy website xây dựng từ WordPress - Kỹ thuật tạo giao diện người dùng cho WordPress - Quản trị nội dung trang tin WordPress - Đưa website lên Internet Người hướng dẫn thứ hai: Họ tên: ………………………………………………………………………………… Học hàm, học vị……………………………………………………………………………… Cơ quan công tác: ……………………………………………………………………………… Nội dung hướng dẫn: …………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… Đề tài tốt nghiệp giao ngày 18 tháng 04 năm 2016 Yêu cầu phải hoàn thành trước ngày tháng 07 năm 2016 Đã nhận nhiệm vụ: Đ.T.T.N Sinh viên Đã nhận nhiệm vụ: Đ.T.T.N Cán hướng dẫn Đ.T.T.N Hải Phòng, ngày tháng .năm 2016 HIỆU TRƯỞNG GS.TS.NGƯT Trần Hữu Nghị PHẦN NHẬN XÉT TÓM TẮT CỦA CÁN BỘ HƯỚNG DẪN Tinh thần thái độ sinh viên trình làm đề tài tốt nghiệp: Đánh giá chất lượng đề tài tốt nghiệp (so với nội dung yêu cầu đề nhiệm vụ đề tài tốt nghiệp) Cho điểm cán hướng dẫn: ( Điểm ghi số chữ ) Ngày .tháng .năm 2016 Cán hướng dẫn ( Ký, ghi rõ họ tên ) PHẦN NHẬN XÉT ĐÁNH GIÁ CỦA CÁN BỘ CHẤM PHẢN BIỆN ĐỀ TÀI TỐT NGHIỆP Đánh giá chất lượng đề tài tốt nghiệp (về mặt sở lý luận, thuyết minh chương trình, giá trị thực tế, ) Cho điểm cán phản biện ( Điểm ghi số chữ ) Ngày .tháng .năm 2016 Cán chấm phản biện ( Ký, ghi rõ họ tên ) Đồ án tốt nghiệp Trường ĐH Dân lập Hải Phòng LỜI CẢM ƠN Trước hết em xin bày tỏ lòng biết ơn Th.S Đỗ Văn Chiểu – Bộ môn Công nghệ thông tin – Trường Đại học Dân Lập Hải Phòng, người dành cho em nhiều thời gian quý báu, trực tiếp hướng dẫn tận tình giúp đỡ, bảo em suốt trình làm luận văn tốt nghiệp Em xin chân thành cảm ơn tất thầy cô giáo Bộ môn Công nghệ thông tin - Trường ĐHDL Hải Phịng, chân thành cảm ơn thầy giáo, giáo tham gia giảng dạy truyền đạt kiến thức quý báu suốt thời gian em học tập trường, đọc phản biện luận văn em giúp em hiểu rõ vấn đề nghiên cứu, để em hồn thành luận án Em xin cảm ơn GS.TS.NGƯT Trần Hữu Nghị Hiệu trưởng Trường Đại học Dân lập Hải Phòng, Ban giám hiệu nhà trường, Bộ mơn tin học, Phịng ban nhà trường tạo điều kiện tốt suốt thời gian học tập làm tốt nghiệp Tuy có nhiều cố gắng trình học tập, thời gian thực tập trình làm luận văn khơng thể tránh khỏi thiếu sót, em mong góp ý quý báu tất thầy giáo, cô giáo tất bạn để kết em hoàn thiện Em xin chân thành cảm ơn! Hải Phòng, Ngày … tháng … năm 2016 Sinh viên Trịnh Doãn Khiển Trịnh Doãn Khiển – CT1601 Đồ án tốt nghiệp Trường ĐH Dân lập Hải Phòng MỤC LỤC LỜI CẢM ƠN DANH MỤC HÌNH GIỚI THIỆU CHƯƠNG 1: HỆ QUẢN TRỊ NỘI DUNG WORDPRESS 1.1 Giới thiệu mã nguồn mở 1.1.1 Khái niệm mã nguồn mở 1.1.2 Phân loại phần mềm nguồn mở 1.1.3 Lợi ích mã nguồn mở 1.1.4 Một số loại mã nguồn mở thường gặp 1.2 Tìm hiểu WordPress 11 1.2.1 Giới thiệu hệ quản trị nội dung WordPress 11 1.2.2 Các giai đoạn phát triển WordPress 12 1.2.3 Những thành tựu WordPress 14 1.2.4 Những nét bật WordPress 15 CHƯƠNG 2: CÀI ĐẶT TRÊN MÁY WEBSITE ĐƯỢC XÂY DỰNG TỪ WORDPRESS 17 2.1 Những yêu cầu cài đặt cho WordPress 17 2.2 Cài đặt Wordpress Localhost 17 CHƯƠNG 3: KỸ THUẬT TẠO GIAO DIỆN NGƯỜI DÙNG TRONG WORDPRESS 25 3.1 Khái niệm giao diện người dùng WordPress (Theme Wordpress)25 3.2 Cấu trúc Theme WordPress 26 3.2.1 Cấu trúc thư mục Theme WordPress 26 3.2.2 Theme Stylesheet 27 3.2.3 Tệp tin tùy chọn chức 27 3.2.4 Template files 28 3.2.6 Vòng lặp (Loop) 32 3.3 Thiết kế theme WordPress 33 3.3.1 Ý tưởng thiết kế Theme 33 3.3.2 Tạo cấu trúc theme 34 3.3.3 Viết code cho tệp tin function.php 35 Trịnh Doãn Khiển – CT1601 Đồ án tốt nghiệp Trường ĐH Dân lập Hải Phịng Hình 4.2.19: Thêm Trang vào Menu Bước 3: Thêm liên kết với tùy chọn Link xem hình đây: Hình 4.2.20: Thêm Liên kết vào Menu Bước 4: Thêm Catelogy (Chuyên mục) vào Menu vừa tạo, xem hình sau: Trịnh Doãn Khiển – CT1601 70 Đồ án tốt nghiệp Trường ĐH Dân lập Hải Phịng Hình 4.2.21: Thêm Chuyên mục vào Menu - Cách tạo Menu Location Sau thêm đầy đủ đối tượng vào Menu Học WordPress rồi, chọn Menu Location để áp dụng cho Menu phần Menu Settings phía ấn Lưu trình đơn Hình 4.2.22: Tạo Menu Location Bây trở lại trang chủ thấy website hiển thị Menu Học WordPress Trịnh Doãn Khiển – CT1601 71 Đồ án tốt nghiệp Trường ĐH Dân lập Hải Phòng Hình 4.2.23: Menu xuất trang chủ 4.2.6 Hướng dẫn Plugin WordPress - Plugin gì? Plugin dịch theo nghĩa tiếng Việt Ghim vào, dùng để bổ sung thêm tính vào Website WordPress tính WordPress khơng đáp ứng đủ nhu cầu Chúng ta cài thêm Plugin để Website trở nên hồn hảo Website WordPress chun nghiệp khơng cần Theme đẹp mà cần có cách sử dụng Plugin hợp lý Hiện số lượng Plugin có thư viện WordPress.org nhiều hồn tồn miễn phí - Cách tìm cài đặt Plugin + Cách tìm Plugin: Chúng ta truy cập vào Bảng tin –> Gói mở rộng –> Cài Plugin Trịnh Doãn Khiển – CT1601 72 Đồ án tốt nghiệp Trường ĐH Dân lập Hải Phịng Hình 4.2.23: Cài plugin Chúng ta tìm plugin cách:  Cách 1: Thông qua tên cách điền tên khung Tìm Plugins bên tay phải Enter  Cách 2: Chúng ta xem danh sách Plugin thông qua lọc Nổi bật (Featured), Được quan tâm (Popular), Khun dùng (Recommended), u thích (Favorites) Hình 4.2.24: Danh sách plugin Trịnh Doãn Khiển – CT1601 73 Đồ án tốt nghiệp Trường ĐH Dân lập Hải Phòng + Cách cài đặt Plugin Sau tìm plugin, nhấn vào Cài đặt để tiến hành cài đặt Plugin: Hình 4.2.25: Giao diện cài đặt Plugin 4.2.7 Quản trị người dùng (users) WordPress Mỗi nhóm người dùng có WordPress lập sẵn có quyền khác nhau, tạo nhóm người dùng với quyền tự thiết lập thông qua plugin Cụ thể muốn thêm người dùng để họ đăng lên Website họ khơng có quyền sửa khác cho vào nhóm người dùng Thành viên đăng ký, người dùng quyền sửa mà khơng có quyền tạo đăng lên website cho vào nhóm Chỉnh sửa chẳng hạn - Tạo người dùng (user) quản lý Chúng ta truy cập vào Bảng tin -> Thành viên -> Thêm Trịnh Doãn Khiển – CT1601 74 Đồ án tốt nghiệp Trường ĐH Dân lập Hải Phòng Hình 4.2.26: Giao diện thêm người dùng Nhập xong thông tin người dùng, ấn vào nút Thêm thành viên để bắt đầu tạo người dùng - Cách xem sửa thông tin người dùng Sau tạo xong người dùng, xem danh sách người dùng có website cách truy cập vào Bảng tin -> Thành viên –> Tất người dùng Hình 4.2.27: Danh sách người dùng Để chỉnh sửa thông tin người dùng, nhấn vào Chỉnh Sửa bên tên người dùng tiến hành chỉnh sửa nhấn vào nút Cập nhật để lưu thay đổi Trịnh Doãn Khiển – CT1601 75 Đồ án tốt nghiệp Trường ĐH Dân lập Hải Phịng Vai trị nhóm người dùng: + Biên tập viên – Nhóm có quyền đăng viết lên website (publish) quản lý post khác người dùng khác + Tác giả – Nhóm có quyền đăng lên website quản lý post họ + Cộng tác viên – Nhóm có quyền viết khơng phép đăng lên mà gửi để xét duyệt (Save as Review) quản lý post họ + Thành viên đăng ký – Người dùng nhóm quản lý thơng tin cá nhân họ + Quản lý – Người dùng nhóm đóng vai trị chủ chốt 4.2.8 Hướng dẫn mục Cài đặt - Cài đặt -> Tổng quan Hình 4.2.28: Cài đặt tổng quan Trong khu vực có thiết lập sau: + Tiêu đề trang (Site Title): Tên website, tên hiển thị mặc định tiêu đề website + Khẩu hiệu (Tagline): Mô tả – slogan website + Địa WordPress (URL) [WordPress Address (URL)]: Địa website WordPress Địa tác động đến đường dẫn Post Page website Trịnh Doãn Khiển – CT1601 76 Đồ án tốt nghiệp Trường ĐH Dân lập Hải Phòng + Địa trang Web (URL) [Site Address (URL)]: Địa website trang chủ chúng ta, cài website WordPress làm trang chủ nên để giống với WordPress Address + Địa E-mail (E-mail Address): Địa email người quản trị website, thông báo quan trọng website gửi + Thành viên (Membership): Nếu đánh dấu vào mục Anyone can register, khách tự đăng ký tài khoản người dùng website địa http://domain/wp-login.php?action=register + Vai trò thành viên (New User Default Role): Nhóm người dùng mà người dùng đăng ký đưa vào mặc định sau họ đăng ký xong + Múi (Timezone): Múi mà muốn sử dụng website, Việt Nam GMT + + Định dạng ngày (Date Format): Định dạng ngày tháng năm muốn hiển thị website + Tuần bắt đầu vào (Week Start On): Ngày mà muốn ngày tuần + Ngơn ngữ trang (Site Language): Ngôn ngữ mà muốn dùng website - Cài đặt -> Viết Trịnh Doãn Khiển – CT1601 77 Đồ án tốt nghiệp Trường ĐH Dân lập Hải Phịng Hình 4.2.29: Cài đặt Viết Ý nghĩa thiết lập: + Định dạng(Formatting):  Biến đổi biểu tượng chuyển đổi…(Convert emotions…): Tự động chuyển đổi ký hiệu biểu cảm sang dạng hình ảnh hỗ trợ sẵn WordPress  WordPress tự động sửa chữa XHTML không hợp lệ(WordPress should correct…): Nếu đánh dấu vào phần nội dung post phải tuân thủ theo cấu trúc cú pháp XHTML hợp lệ + Chuyên mục mặc định (Default Posnt Category): Category mặc định Post quên chọn category đăng + Định dạng viết mặc định (Default Post Format): Loại định dạng post mặc định đăng quên chọn + Đăng trang web (Press This): Tính copy nội dung địa tự đăng lên website WordPress + Đăng qua thư điện tử (Post via e-mail): Tính đăng thơng qua e-mail, có hướng dẫn cụ thể phần riêng Trịnh Doãn Khiển – CT1601 78 Đồ án tốt nghiệp Trường ĐH Dân lập Hải Phòng + Dịch vụ cập nhật (Update Service): Các dịch vụ ping mà muốn WordPress tự động gửi tín hiệu ping có - Cài đặt -> Đọc Hình 4.2.30: Cài đặt đọc Ý nghĩa thiết lập: + Hiển thị nhiều (Blog pages show at most): Số lượng post hiển thị trang blog Hiện hiểu trang blog nghĩa trang hiển thị danh sách post website + Dịng thơng tin cho viết (Syndication feeds show the most recent): Số lượng post hiển thị trang RSS Feed website (http://domain/feed) + Bài dịng thơng tin,hiện (For each article in a feed, show): + Đầy đủ (Full text): hiển thị nội dung RSS Feed với tồn nội dung + Tóm tắt (Summary): hiển thị nội dung RSS Feed với rút gọn + Tương tác với cơng cụ tìm kiếm (Search Engine Visibility): Nếu đánh dấu vào phần này, nghĩa bot cỗ máy tìm kiếm (Google chẳng hạn) đánh mục nội dung chúng ta, từ website khơng hiển thị kết tìm kiếm Google Trịnh Dỗn Khiển – CT1601 79 Đồ án tốt nghiệp - Trường ĐH Dân lập Hải Phòng Cài đặt -> Thảo luận Để truy cập vào khu vực làm theo hướng dẫn sau: Cài đặt -> Thảo luận Hình 4.2.31: Trang khu vực Cài đặt -> thảo luận Ý nghĩa thiết lập: + Tùy chọn mặc định cho viết/trang: Các thiết lập đến việc bật tính liên quan tới bình luận dạng mặc định Các thiết lập sửa lại post/page riêng lẻ + Các tùy chọn khác phản hồi: Các thiết lập khác liên quan tới việc gửi bình luận + E-mail me whenever: Thiết lập nhận e-mail thơng báo bình luận + Trước phản hồi đăng: Áp dụng trước bình luận hiển thị lên + Xét duyệt phản hồi: Tự động đưa bình luận vào trạng thái chờ duyệt bình luận chứa từ khóa, liên kết, email địa IP có danh sách Mỗi quy tắc chặn phải đặt dịng riêng Trịnh Dỗn Khiển – CT1601 80 Đồ án tốt nghiệp Trường ĐH Dân lập Hải Phòng + Danh sách đen phản hồi: Các từ cấm bình luận Mỗi từ cấm khai báo dịng Nếu bình luận chứa từ cấm bị đánh dấu Spam + Ảnh đại diện: Tùy chọn hiển thị ảnh avatar người gửi bình luận - Cài đặt -> Phương tiện Hình 4.2.32: Trang khu vực tùy chỉnh Media Các thiết lập có ý nghĩa sau: + Kích thước ảnh (Image sizes): Các thiết lập xác định kích thước ảnh mặc định WordPress sinh sau upload ảnh lên thư viện, bao gồm loại sau:  Cỡ thu nhỏ (Thumbnail size): Kích thước ảnh loại nhỏ  Cỡ trung bình (Medium size): Kích thước ảnh loại trung bình  Cỡ lớn (Large size): Kích thước ảnh loại lớn + Khi tải tệp tin lên (Uploading Files): Thiết lập liên quan tới việc upload tệp tin  Sắp xếp tệp tin theo thư mục dựa năm,tháng (Organize my uploads into month – and year – based folder): Tự động đưa tệp tin upload lên vào thư mục với cấu trúc ngày tháng so với thời gian upload - Cài đặt -> Đường dẫn tĩnh Trịnh Doãn Khiển – CT1601 81 Đồ án tốt nghiệp Trường ĐH Dân lập Hải Phịng Hình 4.2.33: Trang khu vực Cài đặt -> Đường dẫn tĩnh Các thiết lập khu vực có ý nghĩa sau: + Cài đặt thông dụng (Common Settings): Các thiết lập thông dụng  Mặc định (Default): Cấu trúc đường dẫn mặc định (đường dẫn động)  Ngày tiêu đề (Day and name): Cấu trúc đường dẫn với kiểu hiển thị đầy đủ ngày tháng đăng post tên post  Tháng tiêu đề (Month and name): Cấu trúc đường dẫn với kiểu hiển thị tháng, năm tên post  Dạng số (Numeric): Cấu trúc đường dẫn hiển thị ID post thay tên  Tên (Post name): Chỉ hiển thị tên post đường dẫn  Tùy biến (Custom Structure): Tùy chỉnh cấu trúc đường dẫn tùy ý, xem thêm phần cuối viết + Tùy chọn thêm (Optional): Các thiết lập tùy chọn không bắt buộc  Cơ sở cho chuyên mục (Category base): Tên đường dẫn mẹ đường dẫn tới trang category  Cơ sở thẻ (Tag base): Tên đường dẫn mẹ đường dẫn tới trang tag Trịnh Doãn Khiển – CT1601 82 Đồ án tốt nghiệp Trường ĐH Dân lập Hải Phòng KẾT LUẬN Đề tài “Tìm hiểu kỹ thuật làm giao diện người dùng cho hệ quản trị nội dung WordPress ứng dụng” đề tài quan tâm nhiều thời gian Hệ quản trị nội dung WordPress phát triển mạnh mẽ Trong trình khảo sát tìm hiểu để phân tích đề tài dẫn giảng viên Th.S Đỗ Văn Chiểu, em hiểu phần thấy công việc cần phải làm để thiết kế giao diện cho website sử dụng hệ quản trị nội dung WordPress Tuy gặp phải nhiều khó khăn em cố gắng để hồn thành đề tài tiêu chí sau: - Hiểu cấu trúc theme WordPress - Tạo website với giao diện riêng theo ý muốn - Đưa website lên Internet quản trị Giao diện xây dựng đảm bảo đủ tiêu chuẩn Theme WordPress với Template cần thiết Mặc dù cố gắng nhiều trình khảo sát tìm hiểu thiết kế giao diện, khơng tránh khỏi thiếu sót Vì em mong quý thầy cô quan tâm đến đề tài dẫn góp ý kiến cho em, để em hoàn thiện giao diện cách đầy đủ Trịnh Doãn Khiển – CT1601 83 Đồ án tốt nghiệp Trường ĐH Dân lập Hải Phòng CÁC TÀI LIỆU THAM KHẢO [1] Kỹ Thuật Và Thủ Thuật Lập Trình PHP, Th.S Nguyễn – Lương Phúc nhóm tin học thực dụng, NXB Hồng Đức [2] Tạo Website Hướng Database Bằng PHP&MySQL, VN-GUIDE (Tổng hợp biên dịch), NXB Thống Kê [3] Giáo Trình - Lập Trình Ứng Dụng Web Với PHP (Tập 1, Tập 2), Khuất Thùy Dương, NXB Đại Học Quốc Gia TP.HCM [4] Sổ Tay PHP & MySQL, Nguyễn Trường Sinh chủ biên, NXB Lao Động – Xã Hội Trịnh Doãn Khiển – CT1601 84 ... a Nội dung: - Tìm hiểu hệ quản trị nội dung mã nguồn mở WordPress - Cài đặt máy website xây dựng từ WordPress - Kỹ thuật tạo giao diện người dùng cho WordPress - Quản trị nội dung trang tin WordPress. .. DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC DÂN LẬP HẢI PHÒNG -o0o - TÌM HIỂU KỸ THUẬT LÀM GIAO DIỆN CHO HỆ QUẢN TRỊ NỘI DUNG WORDPRESS VÀ ỨNG DỤNG ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY Ngành: Công nghệ... viên: Trịnh Dỗn Khiển Mã số: 1212101001 Lớp: CT1601 Ngành: Cơng nghệ Thơng tin Tên đề tài: Tìm hiểu kỹ thuật làm giao diện cho hệ quản trị nội dung Wordpress ứng dụng NHIỆM VỤ ĐỀ TÀI Nội dung