Giáo trình thiết kế web và quản trị website

UDPM-CĐ-MĐ20-TKQTWEBSITE TUYÊN BỐ BẢN QUYỀN Tài liệu thuộc loại sách giáo trình nên nguồn thơng tin phép dùng nguyên trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác mang tính lệch lạc sử dụng với mục đích kinh doanh thiếu lành mạnh bị nghiêm cấm LỜI GIỚI THIỆU Chương trình khung quốc gia nghề Quản trị mạng máy tính xây dựng sở phân tích nghề, phần kỹ thuật nghề kết cấu theo môđun, môn học Để tạo điều kiện thuận lợi cho sở dạy nghề trình thực hiện, việc biên soạn giáo trình kỹ thuật nghề theo môđun, môn học đào tạo nghề cấp thiết Thiết kế quản trị website mô đun đào tạo nghề biên soạn theo hình thức tích hợp lý thuyết thực hành Trong q trình thực hiện, nhóm biên soạn tham khảo nhiều tài liệu thiết kế lập trình web nước, kết hợp với kinh nghiệm thực tế sản xuất Mặc dầu có nhiều cố gắng, không tránh khỏi khiếm khuyết, mong nhận đóng góp ý kiến độc giả để giáo trình hồn thiện Cần Thơ, ngày 17 tháng 06 năm 2018 Tham gia biên soạn Chủ biên Nguyễn Phát Minh MỤC LỤC TRANG LỜI GIỚI THIỆU MỤC LỤC GIÁO TRÌNH MƠN HỌC/MƠ ĐUN BÀI 1: TỔNG QUAN VỀ DỊCH VỤ WORLD WIDE WEB Mã bài: MĐ 20 - 01 Một số dịch vụ quan trọng Internet Cấu trúc hoạt động dịch vụ WWW 10 Lịch sử phát triển hệ thống WebServer-WebBrowser 14 BÀI 2: TẠO CÁC TRANG HTML 17 Mã bài: MĐ 20 - 02 17 Tạo thực thi trang web HTML 17 Cấu trúc trang web HTML 22 Định dạng văn 23 Địa tương đối tuyệt đối 26 Siêu liên kết 26 Âm - Hình ảnh 29 Bảng biểu 32 Tạo Form 34 Kiểm tra 35 BÀI 3: THIẾT KẾ WEBSITE VỚI DREAM WEAVER 36 Mã bài: MĐ 20 - 03 36 Tạo thư mục chứa web 37 Tạo trang web 37 Lưu trang web 38 Định dạng trang web 38 Xem trang web trình duyệt 39 Tạo bảng trang web 40 Chèn hình vào trang web 42 Chèn ảnh động flash, video clip vào trang web 44 Tạo menu cho trang web 44 10 Tạo liên kết cho trang web 50 11 Cách tạo Template 50 12 Tạo trang web từ template 53 13 Đưa website lên hosting 54 BÀI 4: LẬP TRÌNH WEB VỚI NGƠN NGỮ PHP 58 Mã bài: MĐ 20 - 04 58 Tổng quan PHP 58 Cài đặt webserver 59 Nền tảng PHP 65 Sử dụng biến Form 76 Sử dụng số đối tượng PHP 77 Kiểm tra 77 BÀI 5: XUẤT BẢN VÀ QUẢN TRỊ WEBSITE 78 Mã bài: MĐ 20 - 05 78 Đăng kí website miễn phí internet 78 WordPress gì? 80 WordPress.com WordPress.org khác nào? 81 5.4 Cài Đặt WordPress 81 Các Chức Năng Chính Trong WordPress 88 TÀI LIỆU THAM KHẢO 99 GIÁO TRÌNH MƠN HỌC/MƠ ĐUN Tên mơn học/mơ đun: THIẾT KẾ WEB VÀ QUẢN TRỊ WEBSITE Mã môn học/mơ đun: MĐ 20 Vị trí, tính chất, ý nghĩa vai trị mơn học/mơ đun: _ _ Vị trí: mơ đun bố trí giảng dạy sau mơn sở nghề, Lập trình giao diện, Lập trình sở liệu, Hệ quản trị sở liệu Tính chất: mơ đun bắt buộc thuộc chun mơn nghề chương trình đào tạo Cao đẳng (ứng dụng phần mềm) Ý nghĩa vai trò môn học/mô đun: Mục tiêu môn học/mô đun: _ _ Kiến thức: o Sinh viên hiểu rõ mơ hình, cấu trúc nguyên lý hoạt động website; o Hiểu rõ cấu trúc trang HTML tính năng, cú pháp thẻ HTML; o Hiểu rõ đặc điểm tính phần mềm thiết kế web DreamWeaver như: định dạng văn bản, âm thanh, hình ảnh, liên kết, ; o Hiểu kỹ thuật lập trình web với ngơn ngữ PHP: Kết nối sở liệu, tương tác sở liệu, ; _ _ Kỹ năng: o Xây dựng website có thẩm mỹ, có ứng dụng phục vụ mục tiêu tương tác liệu cụ thể, có khả liên kết đến trang web hay tài nguyên khác; o Xuất website lên internet quản trị website; Về lực tự chủ trách nhiệm: o Nghiêm túc, tỉ mỉ việc tiếp nhận kiến thức Chủ động, tích cực thực hành tìm kiếm nguồn tập liên quan Nội dung môn học/mô đun: Số TT Thời gian Tên mô đun Tổng số Lý thuyết Thực hành, Kiểm tra* Bài tập (LT TH) Bài 1: Tổng quan dịch vụ World Wide Web 2 0 Bài 2: Tạo trang HTML 24 11 12 Bài 3: Thiết kế website với công cụ DreamWeaver 36 12 22 Bài 4: Lập trình website với PHP 42 12 28 5 Bài 5: Quản trị website 16 8 Tổng cộng 120 45 70 BÀI 1: TỔNG QUAN VỀ DỊCH VỤ WORLD WIDE WEB Mã bài: MĐ 20 - 01 Giới thiệu: Bài học nhằm giới thiệu sơ lược lịch sử World Wide Web (www), URL, giao thức HTTP ngôn ngữ phổ biến dùng World Wide Web HTML (Hyper Text Markup Language) Mục tiêu:  Hiểu môi trường hoạt động website;  Hiểu cấu trúc nguyên lý hoạt động website;  Mô tả mạch lạc mô hình hoạt động WWW, FTP, Email; Nghiêm túc, tích cực việc tiếp nhận kiến thức Chủ động, tích cực tìm kiếm nguồn tài liệu liên quan Nội dung chính: Một số dịch vụ quan trọng Internet 1.1 Dịch vụ truyền file FTP Dịch vụ truyền tệp (FTP) dịch vụ phổ biến cho phép chuyển tệp liệu máy tính khác mạng FTP hỗ trợ tất dạng tệp, thực tế khơng quan tâm tới dạng tệp cho dù tệp văn mã ASCII hay tệp liệu dạng nhị phân Với cấu hình máy phục vụ FTP, quy định quyền truy nhập người sử dụng với thư mục liệu, tệp liệu giới hạn số lượng người sử dụng có khả lúc truy nhập vào nơi lưu trữ liệu 1.2 Dịch vụ thư điện tử Email Dịch vụ thư điện tử dịch vụ thơng dụng Internet Nó cho phép bạn gửi thơng điệp tới một nhóm người qua mạng Internet Ngồi việc gửi thơng điệp dạng văn bản, bạn cịn đính kèm tệp tin với thông điệp Dịch vụ thư điện tử sử dụng phổ biến có ưu điểm sau: • Tốc độ cao khả chuyển tải tồn cầu: Có thể nói ưu điểm hàng đầu hệ thống thư điện tử Bạn gửi thư cho người gần Người nhận nhận thư đâu, miễn nơi có kết nối Internet • Giá thành thấp: Giá thành việc gửi thông tin thư điện tử gần không đáng kể bạn cần trả chi phí cho việc sử dụng Internet bạn có khả sử dụng hệ thống thư điện tử miễn phí tồn cầu từ liên lạc đến khắp nơi Nếu so sánh mặt giá thành với hệ thống thư tín thơng thường, gửi thư quốc tế việc gửi hệ thống thư điện tử rẻ tiện dụng nhiều lần • Linh hoạt mặt thời gian: Nếu bạn có người quen Mỹ bạn muốn gọi điện cho người lúc 12 trưa, bạn không nhận câu trả lời (do quan Mỹ nghỉ), bạn đánh thức họ vào lúc nửa đêm, phiền toái Tuy nhiên, sử dụng thư điện tử bạn gửi vào lúc người nhận đọc thư vào lúc họ muốn Để sử dụng thư điện tử, người dùng phải có tài khoản Tài khoản đăng ký miễn phí nhà cung cấp dịch vụ cấp Cấu trúc chung địa thư điện tử sau: Tênđăngký@tênmiền Ví dụ địa thư: nva@topica.edu.vn, nve@neu-edutop.edu.vn Tên đăng ký: nva, nve Ký tự @ phân tách tên đăng ký tên miền, ký tự buộc phải có địa thư điện tử Tên miền: topica.edu.vn, neu-edutop.edu.vn địa website tổ chức mà người dùng đăng ký dịch vụ thư điện tử Hệ thống thư điện tử chia làm hai phần: UA (Mail User Agent) MTA (Message Transfer Agent) MUA thực chất hệ thống làm nhiệm vụ tương tác trực tiếp với người dùng cuối, giúp họ nhận tin, soạn thảo tin, lưu tin gửi tin Nhiệm vụ MTA định tuyến tin xử lý tin đến từ hệ thống người dùng cho tin đến hệ thống đích Hình 1.10 Cấu trúc hệ thống thư điện tử 1.3 Dịch vụ Telnet Telnet dịch vụ Internet cho phép người dùng ngồi thiết bị đầu cuối thơng qua kết nối mạng truy nhập đến thiết bị từ xa để điều khiển câu lệnh ngồi máy xa Một máy trạm thực đồng thời nhiều phiên telnet đến nhiều địa IP khác Telnet hoạt động theo phiên, phiên kết nối truyền liệu theo giao thức TCP với cổng 23 Telnet hoạt động theo mô hình khách/chủ (Client/Server), Client phần mềm chạy máy người dùng, phần mềm cung cấp giao diện hiển thị để người dùng gõ lệnh điều khiển Phần Server dịch vụ chạy máy từ xa lắng nghe xử lý kết nối câu lệnh gửi đến từ máy trạm chỗ Dịch vụ Telnet thường sử dụng để điều khiển cấu hình từ xa cho thiết bị, chẳng hạn định tuyến (Router) chuyển mạch (Switch) Để kết nối từ xa đến thiết bị đó, câu lệnh sử dụng là: Telnet IP_address Trong đó: • Telnet tên lệnh • IP_address địa IP thiết bị 1.4 Dịch vụ WWW World Wide Web hay Web dịch vụ phổ biến Internet Dịch vụ cho phép bạn truy nhập đến trang thông tin siêu văn (trang web) đặt nhiều vị trí khác Internet Dịch vụ hoạt động theo mơ hình Khách/Chủ (Client/Server) Trong máy chủ web máy tính Internet có chạy phần mềm Web server Máy chủ web lưu trữ nội dung thông tin (các trang web), nhận trả lời yêu cầu từ máy khách web Máy khách web máy tính người dùng có chạy trình duyệt web (như Internet Explorer, Netscape Navigator, Firefox …) Máy khách web gửi yêu cầu hiển thị thông tin trả lời từ máy chủ web Dịch vụ web sử dụng giao thức HTTP (Hyper Text Transfer Protocol): Giao thức truyền siêu văn Hình 1.9 Mơ hình hoạt động dịch vụ Web Để truy nhập đến trang web đó, người dùng gõ địa trang web vào địa trình duyệt web Ví dụ, để truy nhập tới trang web Chương trình đào tạo cử nhân theo phương thức Elearning (NEU-EDUTOP), bạn gõ: http://www.neu-edutop.edu.vn, http://www.topica.edu.vn 1.5 Bộ định vị tài nguyên URL URL, viết tắt Uniform Resource Locator (Định vị Tài nguyên thống nhất)[1], dùng để tham chiếu tới tài nguyên Internet URL mang lại khả siêu liên kết cho trang mạng Các tài nguyên khác tham chiếu tới địa chỉ, URL, cịn gọi địa mạng liên kết mạng (hay ngắn gọn liên kết) Về kỹ thuật, URL dạng URI, nhiều tài liệu kỹ thuật thảo luận lời nói, URL thường sử dụng từ đồng nghĩa với URI, điều không bị coi vấn đề.[2] Cấu trúc hoạt động dịch vụ WWW 2.1 Kiến trúc WWW World Wide Web (gọi tắt Web hay WWW) • Là dịch vụ Internet, cho phép bạn truy nhập tới nguồn thông tin đồ sộ Internet Nguồn thông tin tổ chức dạng trang web có liên kết chặt với • Mỗi trang web tài liệu siêu văn Tài liệu chứa văn bản, âm thanh, hình ảnh… Được mã hố đặc biệt, sử dụng ngơn ngữ đánh dấu siêu văn – HTML (HyperText Markup Languages) Ngôn ngữ cho phép tác giả tài liệu nhúng liên kết siêu văn (còn gọi siêu liên kết – hyperlink) vào tài liệu Các liên kết siêu văn móng World Wide Web • Khi đọc trang web, nhấp chuột vào từ hay hình ảnh mã hoá liên kết siêu văn chuyển tới vị trí khác nằm bên tài liệu tới trang Web khác Trang thứ hai nằm máy tính với trang đầu, nằm nơi Internet • Một tập hợp trang Web có liên quan gọi WebSite Mỗi WebSite lưu trữ trên máy phục vụ Web, vốn máy chủ Internet lưu trữ hàng ngàn trang Web riêng lẻ Việc chép trang lên Web Server gọi tải (hoặc nạp) lên (uploading) 10 mắt người dùng: http://www.yourdomain.com/sample-post/ Và đừng quên chọn nút “Lưu thay đổi“ 85 tùy chỉnh permalinks 5.4.3 Thảo luận Bước với trang WordPress cài đặt thảo luận – tính cho phép người dùng bình luận website bạn Đây tính tuyệt vời WordPress cần phải quản lý để tránh spammer Để làm việc này, truy cập vào “Cài đặt” > “Thảo luận” Chúng khuyên bạn nên bỏ chọn “Cho phép liên kết thông báo từ blog khác (pingbacks trackbacks) viết mới” tính gây nhiều phiên phức cho website sau Để hiểu rõ vấn đề này, miêu tả chi tiết viết làm để vơ hiệu hóa self pingbacks 86 Những lựa chọn cịn lại để mặc định bạn làm Bạn thay đổi chúng sau website bắt đầu có nhiều bình luận spam Tùy chọn thảo luận Ở phía cuối trang web, có vài lựa chọn cho ảnh đại diện Nơi bạn nhìn thấy hình người nhỏ bên trái tên người Bạn chọn ảnh mặc định người cho thành viên trường hợp họ ảnh đại diện tắt chức bạn muốn ảnh đại diện bình luận 5.4.4 Hồ sơ bạn Một phần bạn khơng thể bỏ qua trang hồ sơ cá nhân bạn Phần nằm “Thành viên” > “Hồ sơ bạn”, cho phép bạn cài đặt vài tuỳ chọn trình sử dụng website thông tin cá nhân bạn 87 Phần trang, có lựa chọn cho phép bạn tắt tính “Hiển thị” Chúng tơi khun bạn khơng nên làm gây khó khăn q trình soạn thảo viết Bạn tuỳ chọn màu sắc hiển thị cho khu vực admin thấy màu sắc mặc định nhàm chán Hay ẩn “Thanh cơng cụ” q trình sử dụng website Thanh công cụ hiển thị trang web với vài tính cho phép bạn chỉnh sửa viết, website cách nhanh thuận tiện Cá nhân khuyên bạn giữ nguyên tơi thích thuận tiện q trình vận hành website hồ sơ cá nhân bạn Ngay bên tuỳ chọn này, bạn nhập tên, thơng tin liên hệ, website cá nhân đoạn miêu tả ngắn bạn Các Chức Năng Chính Trong WordPress Vậy bạn quen thuộc với cách cài đặt wordpress, cấu hình chung WordPress Bây thời điểm sử dụng chúng vào mục đích hữu ích xây dưng nội dung cho website bạn Trong phần này, giới thiệu cho bạn cách đăng viết trang với vài tuỳ chọn mà bạn sử dụng sau Vậy viết gì? trang gì? Chúng tơi khác biệt Post Page WordPress kỹ lưỡng viết 5.1 Soạn thảo viết 88 Chúng ta đến trang soạn thảo viết, nơi bạn dành gần toàn thời gian để tạo nội dung giá trị công khai chúng trang web Thậm chí, bạn đặt lịch xuất cho chúng vào thời điểm mà bạn muốn Để làm việc đó, truy cập vào “Bài viết” > “Viết mới“ Trang soạn thảo viết có chứa trống cho phép bạn nhập tiêu đề viết ô to nằm bên để nhập nội dung viết Ngay phía trên, bạn thấy “trình soạn thảo nâng cao”, nơi cho phép bạn chỉnh sửa định dạng viết bôi đạm, in nghiêng, thêm đường dẫn… Và phía cơng cụ soản thảo nút “Thêm Media“, nơi bạn dùng để thêm ảnh, video, gif….v cho viết thêm viết Hãy trải nghiệm cách nhập tiêu đề viết vài nội dung tuỳ thích, sau bấm “Lưu nháp” Với chức lưu nháp viết lưu tạm nháp để bạn tiếp tục viết cịn chưa hoàn thiện Nếu muốn thêm đường dẫn, chọn đoạn chữ mà bạn muốn gắn link cho chúng chọn biểu tượng đường dẫn, nhập đường dẫn bạn muốn Bạn chọn nút “Xem thử” để xem thành trang web Bạn yên tâm, viết chưa công khai chế độ 89 Mặc định, bạn có nhiều lựa chọn để định dạng viết công cụ soản thảo Khi bấm vào biểu tượng bên tay phải công cụ với tên gọi “Hiện ẩn cơng cụ”, xuất dịng thứ hai bên với nhiều lựa chọn cho định dạng viết Một điều quan trọng đưa viết đến nhiều người đọc Một viết có hay đến đâu mà khơng đọc thật vơ ích phải khơng Vì phải viết chuẩn SEO Điều giúp viết bạn có thứ hạng cao cơng cụ tìm kiếm, thứ hạng cao đồng nghĩa việc có nhiều traffic nhiều người biết đến 5.2 Hướng dẫn tạo trang (Page) Như có giải thích khác biệt Post Page Nói tóm lại Post mang tính cập nhật thay đổi liên tục, cịn Page thay đổi, có tính độc lập thường tạo lần sử dụng mãi trang Liên hệ website Để tạo Trang(Page) bên thang Menu bên trái Page » Add New Giống tạo viết có khung soạn thảo văn cho bạn Nhập nội dung mà bạn muốn khung 90 Ỏ bên tay phải có thêm Page Attributes (thuộc tính trang) Bạn thêm trang mẹ cho trang tạo: giống việc tạo thư mục máy tính Trang có đường dẫn: tenmiencuaban/trangme/trangcon/ Ngồi bạn chọn giao diện riêng cho trang 5.3 Quản lý thư viện Media Phần quan trọng blog chun nghiệp hình ảnh Đã có nhiều chứng viết có hình ảnh có nhiều lượt view viết khơng có 91 Tất hình ảnh, video âm WordPress quản lý “Thư viện Media” Khi soạn thảo viết, bạn truy cập vào thư viện để tải ảnh sử dụng hình ảnh có sẵn từ trước Trong trang soạn thảo viết, chọn nút “Thêm Media” phía cơng cụ Một popup xuất hiển thị tồn hình ảnh mà bạn sử dụng website tải lên trước thư viện media Để thêm ảnh mới, chọn tab “Tải tập tin lên”, mở chức tải file WordPress Tại đây, bạn cần kéo thả nhiều hình ảnh từ máy tính vào khu vực bấm bút “Chọn tập tin” Một ảnh tải lên thành công, bạn nhìn thấy vài tuỳ chọn bên tay phải hình Các tính cho phép bạn đặt tiêu đề hay miêu tả cho ảnh cần thiết, thẻ Alt vài tuỳ chọn hiển thị viết Tham khảo viết để hiểu rõ khác Alt Text Và tiêu đề hình ảnh 92 chèn ảnh vào viết Nhấn “Chèn vào viết” hình ảnh thêm vào viết Nếu cần thay đổi tuỳ chọn gì, việc chọn hình ảnh công cụ xuất để bạn thực việc Để học cách quản lý thư viện Media cách chuyên nghiệp đọc viết: Hướng dẫn hồn thiện cách quản lý hình ảnh WordPress Ngồi bạn tạo chèn Gallery hình ảnh trang WordPress, bạn nhiếp ảnh gia tạo Gallery ảnh giúp website trông chuyên nghiệp đẹp mắt 5.4 Đăng viết Vậy bạn hoàn thành việc soạn thảo viết cho website, bao gồm việc thêm đường dẫn hình ảnh đó, nên tin bạn sẵn sàng công khai nội dung với tồn giới Nhưng trước đăng viết, vài việc bạn phải hồn thành trước Bên tay phải hình soạn thảo, có vài lựa chọn mà bạn nên hoàn tất Bỏ qua mục “Đăng viết”, quay lại cuối Hãy lựa chọn chuyên mục cho viết từ danh sách tạo trước Nếu muốn, bạn tạo thêm chuyên mục Điền vài tag bấm “Thêm” sau Và cuối hình ảnh đai diện Tại đây, bạn tải lên hình ảnh liên kết với viết Mỗi 93 giao diện hiển thị hình ảnh cách khác nhau, hiển thị ảnh to phía bên cạnh tiêu đề viết 94 95 Một bạn cảm thấy thoả mãn với lựa chọn mình, quay lại khu vực bên phải, nơi bỏ qua lúc “Đăng viết” Để công khai viết bạn trang web, đơn giản bấm nút “Đăng viết” xong Trươc làm việc đó, bạn muốn trải nghiệm vài thu thuat wordpress hay tính khác WordPress lập lịch đăng, bạn việc chọn “Chỉnh sửa” bên cạnh đoạn “Đăng lập tức”, bạn chọn xác ngày mà viết công khai Nếu làm vậy, nút “Đăng viết” tư động chuyển thành “Lên lịch” viết bạn đăng vào thời điểm mà bạn chọn trước Đây tính tuyệt vời bạn muốn thêm nhiều viết lúc phân chia thời gian đăng khoảng thời gian khác Trước đăng viết nhớ bấm “Xem thử” để xem cịn sai sót trước cơng khai viết hay khơng Giờ bạn biết làm để đăng viết WordPress website Và trang thêm vào cách tương tự Truy cập “Trang” > “Tạo mới” hình soản thảo tương tự ra, nhiên khơng có lựa chọn chun mục tag Trang có tính lên lịch viết Chức Revision 96 Revision ( quảy lý nhật ký soạn thảo) chức cho phép bạn lưu lại bạn chỉnh sửa gần viết lưu nháp Giúp bạn dễ dàng quay lại bạn chỉnh sửa cũ muốn Bạn cần nháp để sử dụng tính Bấm vào Revision(Xem lại) để chọn phiên muốn khôi phục 5.5 Cách chèn video vào viết Để chèn video vào viết đoan giản, bạn cần copy đường dẫn video dán vào viết 97 Hoặc bạn có thêm cách vào Thêm Media » Chèn từ URL Nhập đường dẫn video ( tốt từ youtube), chọn chèn vào viết Trong WordPress có tính Embed cho phép tự động nhận diện liên kết từ video chuyển thành dạng nhúng video Vì mà bạn cần copy paste đường dẫn video 98 TÀI LIỆU THAM KHẢO  VN-Guide, Thiết kế trang web với HTML, NXB Thống kê HN, 2004;  VN Guide, Internet toàn tập, NXB Khoa học kỹ thuật, 1995;  SCC Technology, Thiết kế website với Macromedia Dreamweaver, 2004;  Nguyễn Trường Sinh, Thiết kế website với FrontPage, NXB Thống kê, 2006;  Khuất Thùy Phương, Lập Trình Ứng Dụng Web Với PHP, NXB Thống kê, 2007;  Các tài liệu, tập PHP internet;  Maricopa Center for Learning and Instruction, Writing HTML Tutorial, 1999;  Web Publishing with HTML 3.0 in a Week;  Mediaspace Club, Macromedia Dreamweaver MX, 2004 99