Giáo trình Thiết kế website (Nghề: Thiết kế đồ họa - Trung cấp) là mô đun đào tạo nghề được biên soạn theo hình thức tích hợp lý thuyết và thực hành dành cho sinh viên chuyên ngành Thiết kế đồ họa ở trình độ Trung cấp. Giáo trình được chia thành 2 phần, phần 2 trình bày những nội dung về: xây dựng Web động với ngôn ngữ mã nguồn mở; thao tác trên các ngôn ngữ mã nguồn mở; xử lý trên web mã nguồn mở;... Mời các bạn cùng tham khảo!
BÀI 4: XÂY DỰNG WEB ĐỘNG VỚI NGÔN NGỮ MÃ NGUỒN MỞ Mã bài: MĐ-04 Giới thiệu Trình khái niệm tác dụng mã nguồn mở Trình bày vai trò cua Webserver Cài đặt Web server Xây dựng Website sử dụng mã nguồn mở Wordpress Thực thao tác an tồn với máy tính Mục tiêu - Cài đặt, cấu hình IIS Xampp - Sử dụng tốt joomla, Drupal, nukeviet… - Sử dụng tốt đối tượng, tiện ích ngơn ngữ mã nguồn mở Nội dung Tổng quan Ngôn ngữ mã nguồn mở 1.1 Giới thiệu mã nguồn mở 1.1.1 Khái niệm mã nguồn mở Mã nguồn mở phần mềm cung cấp dạng mã nguồn, khơng miễn phí giá mua mà chủ yếu miễn phí quyền: người dùng có quyền sửa đổi, cải tiến, phát triển, nâng cấp theo số nguyên tắc định giấy phép PMNM (ví dụ General Public Licence – GPL) mà không cần xin phép ai, điều mà họ không phép làm phần mềm nguồn đóng (tức phần mềm thương mại) Nhìn chung, thuật ngữ “Open source” dùng để lôi nhà kinh doanh, điều thuận lợi miễn phí cho phép người dùng có quyền “sở hữu hệ thống” 1.1.2 Lợi ích phần mềm mã nguồn mở-miễn phí? Phần mềm chép hồn tồn miễn phí, bạn hồn tồn an tâm chia chương trình tuyệt vời với bạn bè Các định dạng file khơng hồn tồn bị kiểm sốt vài nhà cung cấp Điều xảy liệu nằm phần mềm độc quyền? Việc sử dụng định dạng file bí ẩn khiến bạn dùng chương trình cơng ty Do yêu cầu công việc, bạn muốn sử dụng liệu cho ứng dụng khác ương trình quyền khơng cho phép ! Cịn nhà cung cấp chấm dứt hổ trợ ngưng việc nâng cấp sản phẩm, chắn liệu bạn phải vứt xó Với phần mềm quyền, có nhà cung cấp giải 122 vấn đề bạn Nhưng! với OpenSource bạn gặp hàng tá nhà cung cấp làm vừa lịng Hầu hết sản phẩm Open Source có khả bảo mật tuyệt vời, vết nứt tìm thấy, thường trám nhanh phần mềm có quyền Các hệ thống Open Source, hệ thống dựa UNIX, thường linh hoạt đến khó tin Bởi chúng xây dựng từ nhiều khối thống miêu tả cặn kẽ, dễ để bạn thay nhiều phần hệ thống với phần có giao diện tương tự Có cộng đồng hỗ trợ lớn Không bị phụ thuộc vào công ty 1.1.3 Các loại mã nguồn mở Web phổ biến WordPress Wprdpress CMS danh giá thị trường nay, web-giadinh chọn mã nguồn làm nguồn thiết kế web cho khách hàng, thời gian thiết kế web nhanh, giao diện quản trị dễ dùng phù hợp với khách hàng, có hệ thống hỗ trợ tối ưu hóa cơng cụ tìm tiếm tốt cho SEO, Plugin Widget đa dạng cho người lập trình sử dụng mà không cần phải động vào code nhiều Joomla Joomla mã nguồn mở xuất internet vào năm 2005 sử dụng nhiều vào website thương mại điện tử, designer dễ dàng tùy chỉnh website bán hàng thêm modul cho nó, Joomla cịn viết PHP sử dụng môi trường php & mysql Drupal Drupal đời vào năm 2001 tên lâu đời nhất, trước WordPress Joomla Drupal số mã nguồn mở lớn hỗ trợ Các nhà phát triển chấp nhận tính chất nguồn mở Drupal, tách CMS thành phần chính: core – xây dựng lập trình viên, module – phát triển cộng đồng Tại thời điểm có khoảng 9000 module download Drupal xây dựng từ PHP nhiều loại database: MySQL, PostgreSQL, SQLite, Microsoft SQL Server, MongoDB MariaDB Magento Magento mã nguồn mở cho phép thiết kế web bán hàng tốt, mắt vào ngày 31 tháng năm 2008 Magento phát triển Varien, với 123 giúp đỡ từ lập trình viên cộng đồng mã nguồn mở, sở hữu Magento Inc Magento xây dựng tảng Zend Framework – Mã nguồn Magento áp dụng rộng rãi nhà bán lẻ trực tuyến với khoảng 150.000 trang web – Magento phát hành phiên khác dùng cho đối tượng khách hàng bao gồm: – Magento Comunity Edition – Phiên Magento hoàn toàn miễn phí – Magento Go – Phiên Magento có trả phí hàng tháng, chủ yếu bao gồm dịch vụ Hosting cho website người sử dụng – Magento Enterprise – Phiên Magento chuyên nghiệp tích hợp tính mạnh mẽ cho website “khủng” Shop bán hàng lớn OpenCart Mã nguồn mở Opencart mã nguồn bán hàng gần gũi với phong cách thương mại điện tử Việt Nam – OpenCart sử dụng ngôn ngữ PHP, cung cấp giải pháp thương mại điện tử mạnh mẽ với khả tạo kinh doanh trực tuyến,ngồi tính free opencart biết đến với tinh vốn có opensource, sửa đổi, dễ hiệu chỉnh, dễ cải tiến theo hướng phát triển thân ngưởi sử dụng – Opencart đầu tư công phu cho việc sử dụng , quản lý gian hàng, khách hàng Nó chứa module cho phép bạn sử dụng mục đích khác nhau, giới thiệu sản phẩm, sản phẩm đưa trưng bày, liệt kê sản phẩm theo tính CMS Made Simple CMS Made Simple đời năm 2009 với hàng triệu lượt download trở nên phổ biến với người dùng – Được dùng làm việc với code lập trình, CMS Made Simple cung cấp cho người dùng phương pháp phát triển tùy chỉnh website thật đơn giản mà khơng cần phải đối diện với dịng mã phức tạp – CMS Made Simple phát triển tảng PHP MySQL PostgreSQL B2evolution B2evolution có nguồn gốc với WordPress đời vào năm 2003, biết đến nhiều có hỗ trợ nhiều blog, admin user với lần cài đặt 124 Hầu hết CMS khác đòi hỏi số loại phần mở rộng plugin để hỗ trợ tính – đặc biệt tính multi-blog B2evolution xây dựng tảng PHP MySQL Thao tác ngôn ngữ mã nguồn mở 2.1 Web server 2.1.1 Web server gì? Web server dịch tiếng Việt nghĩa máy chủ Web server máy tính lớn kết nối với tập hợp mạng máy tính mở rộng Đây dạng máy chủ internet máy chủ IP khác đọc ngơn ngữ file *.htm *.html… Tóm lại máy chủ kho để chứa toàn liệu hoạt động internet mà giao quyền quản lý Web server phải máy tính có dung lượng lớn, tốc độ cao để lưu trữ vận hành tốt kho liệu internet Nó điều hành trơn chu cho hệ thống máy tính hoạt động internet, thơng qua cổng giao tiếp riêng biệt máy chủ Các web server phải đảm bảo hoạt động liên tục không ngừng nghỉ để trì cung cấp liệu cho mạng lưới máy tính Dễ hiểu web server máy chủ, thiết kế với siêu tính dùng để chứa liệu cho phần mạng lưới máy tính internet Tất hoạt động dịch vụ internet phải có máy chủ hoạt động Đôi nét web server 125 Web server xử lý liệu cung cấp thông tin đến máy khách thông qua máy tính cá nhân mơi trường Internet qua giao thức HTTP, giao thức thiết kế để gửi file đến trình duyệt Web, giao thức khác (Ví dụ: bạn truy cập vào trang web vinahost.vn máy chủ cung cấp đến bạn tất liệu trang web thơng qua lệnh giao tiếp) Máy tính máy chủ cài đặt lên chương trình phần mềm Server Software sau kết nối vào Internet Phần mềm Web Server Software giống phần mềm khác, dùng để cài đặt chạy máy tính đáp ứng đủ yêu cầu nhớ Nhờ có chương trình mà người sử dụng truy cập đến thông tin trang Web từ máy tính khác mạng Khi SEO thường gặp máy chủ nhỏ, máy chủ ảo thông thường hay thuê máy chủ dạng VPS hay Hosting để lưu giữ liệu trang web Cài đặt Web server 2.1.2 Localhost 2.1.2.1 Localhost gì? Trên mạng máy tính, localhost hostname hiểu nơm na dễ hiểu tên “máy tính đó” Nó sử dụng để truy cập dịch vụ mạng chạy máy tính thông cổng mạng loopback Sử dụng giao diện loopback không cần cổng vật lý Localhost thường dùng để cài đặt thử nghiệm website (thường dành cho website designer, developer) Thao tác xử lý liệu localhost nhanh tiện hơn, đỡ lo hosting gặp vấn đề 2.1.2.2 Cách thức localhost hoạt động Với việc cài đặt nhiều ứng dụng hỗ trợ khác nhau, giúp bạn tạo mơi trường giống hosting chạy source code WordPress máy tính bạn Giống Hosting, bạn cần ứng dụng phần mềm sau: Web server, Apache PHP MySQL PHPMyAdmin Sau cặt đặt localhost, khởi động Apache bạn truy cập vào địa http://127.0.0.0 http://localhost 126 Có lưu ý bạn phải kích hoạt ứng dụng kèm chạy localhost ( mở bảng điều khiển Cpanel) Ý nghĩa Localhost Hãy tưởng tượng bạn muốn test xem website hiển thị browser Nhưng lại phải cài cắm server, để test vài thứ đơn giản Quá thời gian Các nhà lập trình viên ln cần phải kiểm tra xem phần mềm, hay ứng dụng cửa chạy Mà khơng cần truy cập internet lần test Đó lúc localhost đời Mọi thứ kết nối máy tính họ, thuật tiện nhiều 2.1.2.3 Hướng dẫn cài đặt localhost Đầu tiền cần download cài đặt phần mềm XAMPP XAMPP phần mềm phổ biến, miễn phí ln có cập nhật liên tục, hỗ trợ hầu hết hệ điều hành Windows, Linux, Mact Vậy khuyên bạn sử dụng XAMPP để cài đặt localhost Các bạn bấm vào link để download: https://www.apachefriends.org/download.html Ngay bạn tháy XAPP for Windows, cho Windows Sau tải bấm cài đặt Sẽ bảng thơng báo xuất Nếu bạn kích hoạt User Account Control (UAC) vài XAMPP bị hạn Nên cảnh báo yêu cầu bạn bỏ kích hoạt UAC Bấm Next để tiến hành cài đặt: 127 Giữ nguyên bấm Next Tiếp theo chọn đường dẫn để cài đặt Bạn giữ nguyên tốt 128 Bỏ tích “Learn more about Bitnami for XAMMP” 129 Đợi phần mềm tiến hành cài đặt xong Và bấm Finish cài đặt localhost với XAMPP Lựa chọn ngôn ngữ, bảng điều khiển XAMPP tự khởi động Bạn để ý thấy hai ứng dụng Apache MySQL có nút Start, dấu hiệu cho biết ứng dụng chưa khởi động, ấn vào nút Start ứng 130 dụng để khởi động Webserver Apache MySQL Server lên chạy localhost Nếu hai ứng dụng chuyển sang màu xanh hình khởi động thành cơng Mở trình duyệt web gõ vào địa http://localhost http://127.0.0.1 Một trang giới thiệu xuất 131 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, đ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 lập Tất nhiên khơng có plugin có thiết lập giống plugin nên bạn ý đọc kỹ phần tập mò cách sử dụng cho quen Sau tùy chỉnh xong bạn phải ấn nút Save Change để thay đổi có hiệu lực Giai đoạn Kiểm tra Chúng ta vừa cài plugin TinyMCE Advanced tùy chỉnh rồi, 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 208 Lời kết Trong hướng dẫn chi tiết giai đoạn bạn nên làm tiến hành cài plugin vào website WordPress mình, hy vọng với giai đoạn bạn tìm cài plugin phù hợp dành cho bạn Nhưng lưu ý rằng, cài plugin vào mà đơi lúc plugin có xung đột với nhau, nên có số lời khun cho bạn là: Hạn chế cài nhiều plugin ảnh hưởng đến tốc độ website bạn Khơng nên cài hai nhiều plugin có chức na ná Không nên cài plugin chia sẻ nguồn khơng uy tín bảo mật Ưu tiên tìm cài plugin WordPress.Org Thường xuyên cập nhật plugin, có phiên thơng báo qua Dashboard bạn cần click cập nhật tự động 3.7 Quản trị người dùng (users) WordPress 209 Khi website WordPress tạo ra, điều khơng có nghĩa có bạn quyền sử dụng quản trị website, mà bạn cịn tạo thêm người dùng (hoặc mở chức tự đăng ký để người khác tự đăng ký (Mở Settings -> General đánh dấu vào “Anyone can register“) thiết lập họ vào nhóm người dùng mà bạn cần Mỗi nhóm người dùng có sẵn WordPress có quyền riêng mà đó, nhóm quyền cao Administrator – phép sử dụng tồn quyền có Dashboard bạn Để lấy ví dụ nhé, giả sử bạn muốn thêm người dùng đăng lên website bạn họ khơng có quyền sửa khác sao? Hoặc người dùng quyền sửa mà khơng có quyền tạo đăng lên website? Đó lúc mà cần sử dụng tính quản trị người dùng có WordPress Nó đơn giản lại mạnh mẽ với độ tùy biến cao, đặc biệt bạn cịn tạo nhóm người dùng với quyền bạn tự thiết lập thông qua plugin 3.7.1 Tạo người dùng (user) quản lý Để tạo thêm người dùng, bạn truy cập vào Dashboard –> Users –> Add New, bạn cần khai báo thông tin cho người dùng muốn tạo Các thơng tin khơng có chữ required không bắt buộc khai báo 210 Username: Tên đăng nhập người dùng để đăng nhập vào website E-mail: Email người dùng cần tạo First: Tên người dùng Last Name: Họ người dùng Website: Địa website họ Password: Thiết lập mật cho họ Repear Password: Nhập lại mật Send Password?: Gửi mật username qua email họ (tự động) Role: Nhóm thành viên cần thiết lập cho người dùng (xem kỹ phần Tìm hiểu nhóm thành viên) Nhập xong thông tin người dùng, bạn ấn vào nút Add New User để bắt đầu tạo người dùng Sau tạo xong người dùng, bạn xem danh sách người dùng có website Dashboard –> Users –> All Users 211 Để sửa thông tin người dùng, bạn cần ấn vào tên người dùng cần sửa 3.7.2 Vai trị nhóm người dùng (User Role) Như lúc tạo thêm người dùng bạn thấy, phần Role cho phép bạn chọn năm nhóm người dùng Subscriber, Contributor, Author, Editor, Administrator Vậy ý nghĩa nhóm gì, quyền đặc trưng nhóm sao? Mình giải thích trọn vẹn để bạn hiểu rõ vai trò nhóm người dùng Tổng quan vai trị nhóm Tuy bạn thấy WordPress có nhóm người dùng lúc tạo người dùng mới, thực tính đầy đủ mặc định WordPress có tất nhóm người dùng, bao gồm: Super Admin – Nhóm người dùng cao có quyền quản trị tồn hệ thống thực WordPress có tính tạo mạng website nội tên WordPress MultiUser Ngồi ra, Super Admin có quyền xóa người dùng nhóm Administrator Administrator – Nhóm người dùng có quyền sử dụng tồn tính có website WordPress, khơng bao gồm website khác mạng website nội Editor – Nhóm có quyền đăng viết lên website (publish) quản lý post khác người dùng khác Author – Nhóm có quyền đăng lên website quản lý post họ Contributor – 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ọ Subscriber – Người dùng nhóm quản lý thơng tin cá nhân họ Chi tiết vai trị nhóm 212 Nếu giải thích vài chữ bạn hiểu vai trị nhóm, bạn có biết quyền WordPress biểu diễn chữ kiểu “quyen_han”, tức chữ viết thường có dấu “_” để ngăn cách Lý cần bạn hiểu sau dùng plugin để tùy biến quyền nhóm người dùng, nên tốt bạn nên xem qua để hiểu chi tiết quyền nhóm người dùng Dưới bảng chi tiết quyền hạn nhóm người dùng trang hướng dẫn WordPress Tên quyền Supe r Adm in manage_network Y manage_sites Y manage_network _users Y manage_network _plugins Y manage_network _themes Y manage_network _options Y unfiltered_html Y activate_plugins Y Y create_users Y Y (single site) delete_plugins Y Y delete_themes Y Y (single site) Adminis trator Edi tor Auth or Contri butor Subsc riber 213 delete_users Y Y edit_files Y Y edit_plugins Y Y (single site) edit_theme_opti ons Y Y edit_themes Y Y (single site) edit_users Y Y (single site) export Y Y import Y Y install_plugins Y Y (single site) install_themes Y Y (single site) list_users Y Y manage_options Y Y promote_users Y Y remove_users Y Y switch_themes Y Y update_core Y Y (single site) update_plugins Y Y (single 214 site) update_themes Y Y (single site) edit_dashboard Y Y moderate_comm ents Y Y Y manage_categori es Y Y Y manage_links Y Y Y edit_others_post s Y Y Y edit_pages Y Y Y edit_others_page s Y Y Y edit_published_p ages Y Y Y publish_pages Y Y Y delete_pages Y Y Y delete_others_pa ges Y Y Y delete_published _pages Y Y Y delete_others_po sts Y Y Y delete_private_p Y Y Y 215 osts edit_private_post s Y Y Y read_private_pos ts Y Y Y delete_private_p ages Y Y Y edit_private_pag es Y Y Y read_private_pag es Y Y Y edit_published_p osts Y Y Y Y upload_files Y Y Y Y publish_posts Y Y Y Y delete_published _posts Y Y Y Y edit_posts Y Y Y Y Y delete_posts Y Y Y Y Y read Y Y Y Y Y Y Cấp độ nhóm người dùng Ngồi việc biểu diễn quyền hạn thơng qua bảng trên, WordPress sử dụng hệ thống cấp độ từ 01 đến 10 để biểu diễn quyền hạn nhóm người dùng Mặc dù bạn thấy số plugin có cho phép bạn chỉnh quyền theo thang cấp độ thời điểm trở đi, bạn khơng cần quan tâm tính xóa bỏ khỏi WordPress từ phiên 3.0 dư thừa 216 BÀI TẬP MỞ RỘNG Thiết kế website theo mẫu sau Thiết kế website theo mẫu sau (http://greetings.yahoo.com) Thiết kế website theo mẫu sau (http://www.flowers.com) 217 Thiết kế website theo mẫu sau (http://shopping.yahoo.com) Thiết kế website theo mẫu sau (http://www.is-edu.hcmuns.edu.vn) 218 Thiết kế website theo mẫu sau (http://vnexpress.net) 219 Thiết kế website theo mẫu sau (http://www.codeproject.com) 220 Thiết kế website theo mẫu sau (http://www.bttvn.com ) 221 TÀI LIỆU THAM KHẢO Thiết Kế Web Với Dreamweaver – Trường đại học FPT – Nhà xuất Bách Khoa Hà Nội Tự Học Thiết Kế Trang Web Bằng HTML – Đậu Quang Tuấn – Nhà xuất Giao thông vận tải HTML5 Và CSS3: Thiết Kế Trang Web Thích Ứng Giàu Tính Năng – Jermy Osborn & Nhóm AGI Creative – Nhà xuất Bách Khoa Hà Nội 222 ... khơng điền sử dụng cổng 80 2. 2 Wordpress 2. 2.1.Những iều cần biết Wordpress 2. 2.1.1 Tổng quan website Với website thơng thường, bao gồm thành phần sau: Giao diện (Front-end): Là thấy hiển thị... ảnh Như để xây dựng website, phải làm phần với độ phức tạp cao yêu cầu bảo mật khắt khe Thế với hỗ trợ WordPress, công việc làm sẵn việc sử dụng cho chạy 2. 2.1 .2 Wordpress gì? WordPress phần mềm... cho phép thiết kế web bán hàng tốt, mắt vào ngày 31 tháng năm 20 08 Magento phát triển Varien, với 123 giúp đỡ từ lập trình viên cộng đồng mã nguồn mở, sở hữu Magento Inc Magento xây dựng tảng