Ngày nay, Internet là thành phần không thể thiếu trong đời sống xã hội. Hàng ngày có đến hàng triệu triệu lượt truy cập Internet trên toàn thế giới. Con người có thể cập nhật vô số thông tin từ đó. Để làm được việc này cần có một tập hợp vô cùng lớn các website. Việc thiết kế một website không còn là một cái gì đó quá lớn, chúng ta có thể tạo ra được những website để quảng bá cho trường mình hay cho chính bản thân mình tới bạn bè khắp thế giới. Giáo trình Thiết kế web này được biên soạn để giúp bạn đọc làm được điều đó. Giáo trình Thiết kế web được biên soạn gồm 6 chương với những nội dung cơ bản sau: Chương 1: Ngôn ngữ HTML Chương 2: Ngôn ngữ định dạng CSS Chương 3: Ngôn ngữ lập trình JAVASCRIPT Chương 4: Tìm hiểu phần mềm XAMPSERVER Chương 5: Cơ sở dữ liệu MYSQL Chương 6: Ngôn ngữ lập trình PHP
-1- MỤC LỤC GIỚI THIỆU VỀ MÔ ĐUN Mã số mô đun: MĐ 20 Thời gian mô đun: 90 giờ; (Lý thuyết: 30 giờ; Thực hành: 60 giờ) I VỊ TRÍ, TÍNH CHẤT CỦA MƠ ĐUN - Vị trí: Mơn học bố trí sau học xong mơn chung trước môn học/mô đun đào tạo nghề chun nghiệp - Tính chất: Là mơn học sở bắt buộc học II MỤC TIÊU MÔ ĐUN - Xây dựng trang chủ, có ứng dụng phục vụ mục tiêu cụ thể, có khả liên kết đến trang Web khác - Trình bày trang Web hệ thống thông tin tổng hợp bao gồm: văn bản, hình ảnh, âm với nhiều kiểu định dạng khác - Ứng dụng số ngơn ngữ lập trình vào trang WEB phục vụ cơng việc tính tốn, tạo hiệu ứng trang WEB - Tạo trang Web động liên kết đến hệ CSDL cho truớc xây dựng phục vụ cho ứng dụng, cụ thể chương trình phát triển CNTT quốc gia So sánh khác ngơn ngữ lập trình Web từ chọn cơng cụ phù hợp thiết kế thi công trang WEB bảo đảm kỹ thuật tính mỹ thuật -2- Chương Ngơn ngữ HTML -3- Chương Ngơn ngữ HTML CHƯƠNG NGƠN NGỮ HTML MỤC TIÊU Sau đọc xong chương bạn đọc có kiến thức sau: - Trình bày văn tương tự Microsoft Word lề, định dạng chữ (gạch chân, bôi đậm, in nghiêng ), thay đổi font chữ, màu chữ, đánh dấu danh sách, thẻ định dạng văn HTML - Sử dụng thành thạo thẻ tạo bảng, tạo hàng, tạo cột; cách trộn ô bước đầu thiết kế trang web sử dụng bảng để chia bố cục.Hình ảnh siêu liên kết HTML - Chèn ảnh liên kết có đầy đủ thuộc tính theo chuẩn - Tạo form đăng nhập hoàn chỉnh với text, password, selectbox NỘI DUNG CỦA CHƯƠNG - Tổng quan HTML - Thẻ định dạng văn - Hình ảnh siêu liên kết - Giao tiếp với máy chủ thẻ form - Các thành phần nâng cao HTML - Bài tập trắc nghiệm 1.1 TỔNG QUAN VỀ HTML 1.1.1 HTML gì? HTML viết tắt cho Hyper Text Markup Language dịch "Ngơn ngữ đánh dấu siêu văn bản" ngôn ngữ đánh dấu thiết kế để tạo nên trang web, nghĩa mẫu thơng tin trình bày World Wide Web Được định nghĩa ứng dụng đơn giản SGML - Standard Generalized Markup Language - hệ thống tổ chức gắn thẻ yếu tố tài liệu, vốn sử dụng -4- Chương Ngôn ngữ HTML tổ chức cần đến yêu cầu xuất phức tạp, HTML trở thành chuẩn Internet tổ chức World Wide Web Consortium (W3C) sáng lập trì Phiên HTML HTML có tác dụng giúp cho trình duyệt web biết cách thể trang web từ văn bản, hình ảnh siêu liêu kết HTML khơng có khác ngồi văn đánh dấu theo thẻ - tag thuộc tính chúng – attribute Các loại thẻ đánh dấu HTML: • Đánh dấu Có cấu trúc miêu tả mục đích phần văn Ví dụ Giáo trình HTML điều khiển phần mềm đọc hiển thị "HTML" đề mục cấp • Đánh dấu trình bày miêu tả phần hình trực quan phần văn chức Ví dụ, boldface hiển thị đoạn văn in đậm: boldface Cách dùng đánh dấu trình bày khơng khun dùng mà thay CSS – Cascade Style Sheet giới thiệu Chương giáo trình • Đánh dấu siêu liên kết chứa phần liên kết từ trang đến trang kia, từ webiste đến website khác Ví dụ: Wikipedia hiển thị từ Wikipedia liên kết ngồi đến trang web khác • Các phần tử thành phần điều khiển tạo đối tượng Ví dụ nút ấn 1.1.2 Cấu trúc file HTML 1.1.2.1 Cấu trúc thẻ đánh dấu HTML Một tài liệu HTML bao gồm thành phần đánh dấu thẻ Dựa vào thẻ trình duyệt web biết cách hiển thị nội dung tài liệu HMTL -5- Chương Ngơn ngữ HTML Một tag có thành phần chính: start tag – thẻ mở, end tag – thẻ đóng attribute – thuộc tính Thuộc tính thẻ đặt thẻ mở, thẻ mở thẻ đóng nội dung tương ứng với thẻ Cấu trúc thông thường thẻ là: content Nếu thẻ khơng có nội dung gọi thẻ rỗng khơng cần dùng đến thẻ đóng mà kết thúc thẻ mở với dấu “/” Ví dụ với đoạn mã HTML sau: Tieu de - Heading – Bao gom the dong, the mo va noi dungThe p voi thuoc tinh text align va noi dung Cung co the chua nhung the khac ben noi dung. Giáo trình Thiết kế web gồm chương Chương I: Ngôn ngữ HTML Chương cung cấp kiến thức HMTL sở website giới Thì thực tế ta nhận là: -7- Chương Ngơn ngữ HTML Hình 1.2 Kết mơ tả thẻ body Một file HTML lưu với phần mở rộng html htm Vậy cấu trúc file HTML sau: Tên trang 1.1.3 XHTML 1.1.3.1 XHTML XHTML - viết tắt Extensible HyperText Markup Language dịch Ngôn ngữ Đánh dấu Siêu văn Mở rộng - ngôn ngữ đánh dấu kế thừa từ HTML, có cú pháp chặt chẽ XHTML 1.0 Khuyến cáo World Wide Web Consortium (W3C) vào ngày 26 tháng năm 2000 Về phương diện kĩ thuật, XHTML kiểu tài liệu thâu nạp HTML, tái cấu trúc lại dạng XML Các dạng tài liệu thuộc họ XHTML tất dựa XML, thiết kế để làm việc tuyệt trình đại diện người dùng hiểu XML XHTML hệ HTML 1.1.3.2 Sự khác HTML XHTML Các phần tử phải lồng cách: -8- Chương Ngôn ngữ HTML Trong HTML số phần tử lồng vào khơng cách This text is bold and italic Trong XHTML tất phần tử phải lồng vào cách, thẻ đóng thẻ mở ln phải theo cặp: This text is bold and italic XHTML phải đặt dạng chuẩn (well-formed) Tất phần tử XHTML phải đặt lồng bên phần tử gốc Tất phần tử khác có phần tử Các phần tử phải theo cặp phải đặt lồng cách bên phần tử mẹ Cấu trúc tài liệu là: Tên gọi thẻ phải viết thường Do XHTML kế thừa cú pháp XML trang XHTML ứng dụng XML XHTML có phân biệt chữ hoa chữ thường, điều khơng có HTML Với HTML thẻ hiểu giống xác định trang web XHTML trình duyệt dịch hai thẻ khác HTML chấp nhận cách viết dưới:
This is a paragraph
XHTML đòi hỏi phải viết lại phần thành:This is a paragraph
Tất thẻ XHTML phải đóng lại -9- Chương Ngơn ngữ HTML Phần tử khơng rỗng phải có thẻ đóng HTML chấp nhận cách viết dưới:This is a paragraph
This is another paragraph XHTML đòi hỏi phải viết lại phần thành:
This is a paragraph
This is another paragraph
Các thẻ rỗng phải đóng lại Các thẻ rỗng phải đóng thẻ mở phải kết thúc /> HTML chấp nhận cách viết dưới: This is a break Here comes a horizontal rule: Here's an image XHTML đòi hỏi phải viết lại phần thành: This is a break Here comes a horizontal rule: Here's an image Chú ý quan trọng: Để làm cho trang XHTML tương thích với trình duyệt nên đặt khoảng trắng thêm vào trước kí tự / kiểu Các giá trị thuộc tính phải đặt dấu nháy kép HTML chấp nhận cách viết dưới: XHTML đòi hỏi phải viết lại phần thành: -10- Chương Ngơn ngữ lập trình PHP echo '' $i.''; } } echo ''; mysql_close(); ?> Bây ta chạy thử tập tin PHP này, ví dụ tơi chạy URL sau: http://localhost/vidu/index.php Kết Nokia 1200 Dell Studio Dell Inspiron Vaio 001 Trang: Khi ta nhấn liên kết phân trang danh sách sản phẩm đổi Bạn thử kiểm nghiệm kết 6.9.2 Kỹ thuật Rewrite URL Đối với ứng dụng web ngày nay, trang web tin tức cụm từ “Friendly URL” trở nên thông dụng quan trọng người lập trình người sở hữu website “Friendly URL” URL dễ nhìn, dễ nhớ khơng giúp cho người dùng mà góp phần tăng số tìm kiếm máy tìm kiếm Google Thay URL phức tạp như: http://domain.com/index.php?module=news &aid=1 http://domain.com/article.php?module=list&cid=2&aid=1 Thì ngày có URL gọn gàng nhiều: http://domain.com/xin-chao.html http://domain.com/the-thao/lich-thi-dau.html Với URL bên trên, bạn hình dung phần cách người ta xử lý URL để lấy viết với mã hiển thị theo module Chương Ngơn ngữ lập trình PHP “news” phức tạp Đó thơng thường người ta xử lý, với URL người ta biết cách hiển thị viết theo module nào, chuyên mục Thực tế, người ta phải lấy mã viêt, chuyên mục nhiên người ta tìm cách xử lý để dấu mã thay vào đường dẫn trực quan Đó kỹ thuật Rewrite URL Trong PHP, ý tưởng Rewrite URL tập trung toàn yêu cầu – request tập tin PHP index.php Rồi từ chèn vào mã cần thiết để xử lý yêu cầu, tách phần URL thành nhiều phần để biết tập tin PHP cần dùng đến Ví dụ http://domain.com/admin/article/edit/1 viết lại http://domain.com/admin/article/edit.php?aid=1 Từ biết cần gọi đến file edit.php thư mục admin/article lấy viết có mã Để làm điều PHP, sử dụng file có tên “.htaccess” đặt với tập tin index.php gốc Nó có nội dung sau: RewriteEngine On RewriteCond %{REQUEST_FILENAME} -s [OR] RewriteCond %{REQUEST_FILENAME} -l [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^.*$ - [NC,L] RewriteRule ^.*$ index.php [NC,L] Trong file htaccess quy định nhiều luật rewrite khác tùy vào cáhc bạn xử lý URL Một yếu tố quan trọng cho kỹ thuật Rewrite URL là: máy chủ cần cần phải hỗ trợ module rewrite URL Đối với server ảo Wamp, bạn kiểm tra mục: Apache -> Apache Modules -> rewrite module Nếu mục đánh dấu có nghĩa server bật module khơng bạn đánh dấu bắt đầu thứ ví dụ sau Chúng ta tạo thư mục vidu thư mục www Wamp file sau:.htaccess, index.php, add.php, edit.php view.php Nội dung file là: htaccess RewriteEngine on Chương Ngơn ngữ lập trình PHP RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php? router=$1 [L,QSA] index.php add.php edit.php view.php Chương Ngơn ngữ lập trình PHP Luật viết file htaccess có nghĩa request gửi tới file index.php phần url sau tên miền gán cho tham số URL tên router Bây ta thử nhập vào đường dẫn sau: • localhost/vidu/xin-chao-cac-ban • localhost/vidu/add/1 • localhost/vidu/edit/1 Chúng ta nhận kết là: • View article with title is xin-chao-cac-ban • Add new article with id = • Edit article with id = 6.9.3 Xây dựng ứng dụng đăng nhập Trước hết phải thiết kế xây dựng mơ hình sở liệu ứng với lệnh bên sau tiến hành triển khai lập trình create database project; create table user( id INT(10) UNSIGNED NOT NULL AUTO_INCREMENT, username VARCHAR(50) NOT NULL, password CHAR(50) NOT NULL, level CHAR(1) NOT NULL, PRIMARY KEY(id)); insert into user(username,password,level) values ("admin","12345","2") ("abc","12345","1"); Như có sở liệu mơ hình Tiếp đến thiết kế form HTML để có hình đăng nhập người dùng truy cập Chương Ngôn ngữ lập trình PHP Hình 6.39 form đăng nhập Username: Password: Tiếp đến tiến hành kiểm tra liệu từ form Đoạn code kiểm tra xem người dùng có tiến hành nhấn nút đăng nhập hay khơng Và có xét tiếp tình trạng người dùng có để trống username password hay khơng Nếu có thơng báo lỗi bên form, để người sử dụng tiến hành nhập liệu Kế đến kiểm tra xem có tồn hai biến $u $p (chỉ người dùng đăng nhập thành cơng tạo biến đó) Tiếp đến tiến hành kết nối sở liệu Chương Ngơn ngữ lập trình PHP