Giao trinh thiet ke va lap trinh web

Lập trình Web - Dùng cho hệ đào tạo CĐN CNTT Lập trình Web - Dùng cho hệ đào tạo CĐN CNTT MỤC LỤC MỤC LỤC 1 Phần 1 – NGÔN NGỮ HTML 5 Bài 1: Tổng quan về HTML 5 1 – Giới Thiệu 5 2 – HTML là gì 6 Bài 2: Ngôn ngữ HTML 7 1 – Các thẻ định dạng cấu trúc tài liệu 7 1.1. HTML thẻ định cấu trúc tài liệu 7 1.2. HEAD 7 1.3. TITLE 7 1.4. BODY 7 2 – Các thẻ định dạng khối 9 2.1. Thẻ <P> 9 2.2. Các thẻ định dạng đề mục H1/H2/H3/H4/H5/H6 9 2.3. Thẻ xuống dòng BR 9 2.4. Thẻ PRE 9 3 – Các thẻ định dạng danh sách 9 4 – Các thẻ định dạng ký tự 11 4.1. Các thẻ định dạng ký tự 11 4.2. Căn lề văn bản trong trang Web 12 4.3. Các ký tự đặc biệt 12 4.4. Sử dụng màu sắc trong thiết kế trang Web 12 4.5. Chọn kiểu chữ cho văn bản 14 4.6. Văn bản siêu liên kết 14 4.7. Kết nối mailto 15 4.8. Vẽ một đường thẳng nằm ngang 15 5 – Thẻ chèn âm thanh và hình ảnh 15 5.1. Đưa âm thanh vào một tài liệu HTML 15 5.2. Chèn một hình ảnh, một đoạn video vào tài liệu HTML 16 6 – Chèn bảng biểu 17 7 – Web Forms 19 Trang 1 Khoa ĐTTH – Biên soạn Khoa ĐTTH – Biên soạn năm 2011 năm 2011 7.1. HTML FORMS 19 7.2. Tạo FORM 19 7.3. Đặt các đối tượng điều khiển (như hộp văn bản, ô kiểm tra, nút bấm…) 20 7.4. Tạo một danh sách lựa chọn 20 7.5. Tạo hộp soạn thảo văn bản 21 Phần 2 – LẬP TRÌNH WEB VỚI PHP 22 Bài 1: Tổng quan về PHP 22 1 – Giới thiệu PHP 22 2 – Cài đặt PHP 22 3 – Cấu hình ứng dụng PHP 22 4 – Giới thiệu PHP 24 4.1. Yêu cầu 24 4.2. Giới thiệu 24 4.3. Thông dịch trang PHP 24 4.4. Kịch bản (script) 25 4.5. Ghi chú trong PHP 28 4.6. In kết quả trên trang PHP 29 Bài 2: Nền tảng ngôn ngữ PHP 31 1 – Khái niệm cú pháp PHP 31 2 – Khai báo biến 31 3 – Kiểu dữ liệu 32 3.1. Thay đổi kiểu dữ liệu 32 3.2. Kiểm tra kiểu dữ liệu của biến 34 3.3. Thay đổi kiểu dữ liệu của biến 35 3.4. Kiểu mảng (Array) 36 3.5. Kiểu đối tượng 37 3.6. Tầm vực của biến 39 4 – Hằng trong PHP 41 4.1. Khai báo và sử dụng hằng 41 4.2. Kiểm tra hằng 41 Bài 3: Phép toán và phát biểu có điều kiện trong PHP 43 1 – Khái niệm về toán tử 43 Trang 2 Lập trình Web - Dùng cho hệ đào tạo CĐN CNTT Lập trình Web - Dùng cho hệ đào tạo CĐN CNTT 2 – Giới thiệu toán tử 44 2.1. Toán tử AND 44 2.2. Toán tử Not: ~ , ! 45 2.3. Toán tử nhân và chia: *, / 46 2.4. Toán tử chia lấy dư: % 46 2.5. Toán tử quan hệ: >=,>,<,<=,==,!= 47 2.6. Toán tử && và || 48 2.7. Toán tử ? 48 3 – Phép gán 49 3.1. Phép gán thông thường nhất như sau: 49 3.2. Phép gán thêm một giá trị là 1 49 3.3. Phép gán chuỗi 49 3.4. Phép gán thêm một với chính nó giá trị 49 4 – Phát biểu có điều kiện 50 4.1. Phát biểu IF (điều kiện) { câu lệnh; } 50 4.2. Phát biểu IF (điều kiện) { câu lệnh; }ELSE { câu lệnh; } 51 4.3. Phát biểu ELSEIF 52 4.4. Phát biểu Switch (điều kiện) 53 4.5. Phát biểu While(điều kiện) 55 4.6. Phát biểu For 55 4.7. Phát biểu do while 56 Bài 4: Biến Form 58 1. Biến form 58 1.1. Biến form từ form được submit với phương thức POST 58 1.2. Biến form từ form được submit với phương thức GET 60 2. Phương thức $HTTP_GET_VARS 65 3. Phương thức $HTTP_POST_VARS 68 Bài 5: Một số đối tượng trong PHP 71 1. Đối tượng SESSION 71 1.1. Nhận dạng Session 71 1.2. Khai báo Session 72 1.3. Lấy giá trị từ session 74 1.4. Huỷ session 78 2. COOKIE 80 Trang 3 Khoa ĐTTH – Biên soạn Khoa ĐTTH – Biên soạn năm 2011 năm 2011 Bài 6: Hàm và tập ]n 84 1. Khai báo hàm trong PHP 84 2. Xây dựng tập ]n định dạng nội dung 87 3. Thống nhất kích thước của mọi trang PHP 95 4. Tập ]n dùng chung 105 Bài 7: Xử lý chuỗi và mảng 109 1. Xử lý chuỗi 109 1.1. Định dạng chuỗi 109 1.2. Hàm chuyển đổi chuỗi 110 1.3. Hàm tách hay kết hợp chuỗi 112 1.4. Tìm kiếm và thay thế chuỗi 115 2. Làm việc với mảng dữ liệu 116 2.1. Mảng một chiều 116 2.2. Mảng hai chiều 118 3. Kiểu DATETIME 120 Bài 8: PHP và MySQL 124 1 – Giới thiệu cơ sở dữ liệu MySQL 124 2 – Tạo cơ sở dữ liệu và người dùng 124 3 – Kết nối cơ sở dữ liệu 126 3 – Thêm một mẩu ]n 127 4 – Cập nhật mẩu ]n 131 5 – Xóa mẩu ]n 133 6 – Truy vấn dữ liệu 135 7 – Xóa, cập nhật dữ liệu dạng mảng 137 7.1. Liệt kê dữ liệu 137 7.2. Cập nhật nhiều mẩu tin 143 Trang 4 Lập trình Web - Dùng cho hệ đào tạo CĐN CNTT Lập trình Web - Dùng cho hệ đào tạo CĐN CNTT Phần 1 – NGÔN NGỮ HTML Bài 1: Tổng quan về HTML 1 – Giới Thiệu * Internet là gì: Có thể hiểu một cách đơn giản nhất là Internet là tập hợp các mạng nhỏ hơn như mạng LAN, WAN, thành một mạng lưới trên khắp thế giới. * Website: Website là một vị trí chứa trang web, một thư mục trên web server chứa tất cả các file của một trang web. Thư mục này được gọi là root (rễ) tức là nơi cao nhất theo phân cấp thư mục của 1 web. Cấu trúc cơ bản của 1 web như sau: <Root> |___index.html (trang chủ) |___page1.html (trang 1) |___page2.html (trang 2) |___<Image> (thư mục chứa hình ảnh cho web) |___ * Domain: Domain là tên miền, chính là tên chính của 1 trang web. http://www.yahoo.com hay http://www.google.com đều là tên miền. Các tên miền này do các Domain Server cung cấp, thường thì 1 web server luôn kèm thêm chức năng cung cấp tên miền, nghĩa là kiêm nhiệm luôn chức năng domain server. Nhưng không phải server nào cũng thế, một số web server không có chức năng domain thường thấy nhất ở các web server cung cấp forum. Thường người dùng chỉ có link dài kiểu http://s17.invisionboard.com/ đây thật ra cũng là 1 domain nhưng nó quá dài để nhớ và rất khó gõ. Thật sự các website hay các thư mục root của bạn được định vị bằng 1 chuỗi IP riêng và duy nhất. Để truy cập vào web của bạn cần phải gõ số IP đó vào địa chỉ nhưng do đó là 1 dãi số khá dài và khó nhớ nên domain được dùng để thay thế dãy số phức tạp đó. Mọi việc rất đơn giản khi bạn đăng ký vào 1 domain server, domain được tạo và nó được gắn dính vào chuỗi IP định vị root của bạn. Khi bạn truy cập domain thì thông tin được gởi lên domain server và server này có nhiệm vụ tìm đúng số IP được gắn với domain này rồi gởi thông tin vị trí đến web server để tải trang web về máy bạn. Có thể hình dung như sau: Trang 5 Khoa ĐTTH – Biên soạn Khoa ĐTTH – Biên soạn năm 2011 năm 2011 Máy bạn (gõ domain) =domain=> Domain server (domain=IP) =IP=> Web server | < < Tải web về < < | 2 – HTML là gì HTML là viết tắt của Hyper Text Markup Language (Ngôn ngữ đánh dấu siêu văn bản). Một tài liệu HTML thường có đuôi mở rộng là .html hoặc .htm và tất nhiên đó là 1 trang web. Các trang HTML nói riêng và các trang web nói chung (.php, .asp, ) có tình chất của một văn bản như các file txt hay .doc chỉ có điều nó phức tạp và đa dạng hơn. Các trang web HTML có thể đọc được bằng các trình duyệt web (Web Browse) khác nhau và phổ biến nhất là Internet Explorer (IE). Ngôn ngữ HTML có ưu điểm là rất đơn giản và có thể chạy tốt với nhiều hệ điều hành và nhiều trình duyệt web khác nhau. Tuy mỗi trình duyệt do 1 hãng khác nhau sản xuất và có 1 cách biên dịch trang web khác nhau nhưng nói chung đều cho 1 kết quả tương tự nhau. Ngòai ra HTML được sọan thảo rất đơn giản, không cần chương trình chuyên dụng, chỉ cần notepad hoặc bất kỳ chương trình sọan thảo văn bản nào. Chỉ cần save nó với định dạng .htm hay .html, sau đây là cách save bằng notepad: Sau khi sọan thảo nội dung HTML xong bạn chọn save nếu chưa save lần nào hoặc save as nếu đã save nó ra file txt trước. Trong phần Encoding chọn Unicode nếu bạn soạn trang web bằng tiếng Việt. Phần Save as type chọn all file. Cuối cùng là phần file name chọn tên file kèm đuôi .htm hay .html sau đó save là xong. Nếu bạn thiết kế trang chủ thì đặt tên file là index.html vì máy chủ sẽ tự động load chính file này đầu tiên khi ai đó truy cập trang web của bạn. Trang 6 Lập trình Web - Dùng cho hệ đào tạo CĐN CNTT Lập trình Web - Dùng cho hệ đào tạo CĐN CNTT Bài 2: Ngôn ngữ HTML 1 – Các thẻ định dạng cấu trúc tài liệu 1.1. HTML thẻ định cấu trúc tài liệu Cặp thẻ này được dử dụng để xác nhận một tài liệu HTML, tức là nó có sử dụng các thẻ HTML để trình bày. Toàn bộ nội dung của tài liệu được đặt ở giữa cặp thẻ này. Cú pháp: <HTML> … Toàn bộ nội dung của tài liệu được đặt ở đây. </HTML> Trình duyệt sẽ xem các tài liệu không sử dụng thẻ <HTML> như những tập tin văn bản bình thường. 1.2. HEAD Thẻ HEAD được dùng để xác định phần mở đầu cho tài liệu. Cú pháp: <HEAD> …. Phần mở đầu (HEADER) của tài liệu được đặt ở đây. </HEAD> 1.3. TITLE Cặp thẻ này chỉ có thể sử dụng trong phần mở đầu tài liệu, tức là nó phải nằm trong phạm vi giới hạn bởi cặp thẻ <HEAD> Cú pháp: <TITLE> Tiêu đề của tài liệu </TITLE> 1.4. BODY Thẻ này được sử dụng để xác định phần nội dung chính của tài liệu – phần thân (body) của tài liệu. Trong phần thân có thể chứa các thông tin định dạng nhất định để đặt ảnh nền cho tài liệu, màu nền, màu văn bản siêu liên kết, đặt lề cho trang tài liệu…Những thông tin này được đặt ở phần tham số của thẻ. Cú pháp: <BODY> … Phần nội dung của tài liệu được đặt ở đây Trang 7 Khoa ĐTTH – Biên soạn Khoa ĐTTH – Biên soạn năm 2011 năm 2011 </BODY> Trên đây là cú pháp cơ bản của thẻ <BODY>, tuy nhiên bắt đầu từ HTML 3.2 thì có nhiều thuộc tính được sử dụng trong thẻ <BODY>. Dưới đây là các thuộc tính chính: BACKGROUND= Đặt một ảnh nào đó làm ảnh nền (background) cho văn bản. Giá trị của tham số này (phần sau dấu bằng) là URL của file ảnh. Nếu kích thước ảnh nhỏ hơn của sổ trình duyệt thì toàn bộ màn hình cửa sổ trình duyệt sẽ được phủ kín bằng nhiều ảnh. BGCOLOR= Đặt màu nền cho trang khi hiển thị. Nếu cả hai tham số BACKGROUND và BGCOLOR cùng có giá trị thì trình duyệt sẽ hiển thị màu nền trước, sau đó mới tải ảnh lên phía trên. TEXT= Xác định màu chữ của văn bản, kể cả các đề mục. ALINK=, VLINK=, LINK= Xác định màu sắc cho các siêu liên kết trong văn bản. Tương ứng, alink(active link) là liên kết đang được kích hoạt – tức là khi đã được kích chuột lên; vlink(visited link) chỉ liên kết đã từng được kích hoạt. Như vậy một tài liệu HTML có cấu trúc cơ bản như sau: <HTML> <HEAD> <TITLE>Tiêu đề của tài liệu</TITLE> </HEAD> <BODY Các tham số nếu có> Nội dung của tài liệu </BODY> </HTML> Trang 8 Lập trình Web - Dùng cho hệ đào tạo CĐN CNTT Lập trình Web - Dùng cho hệ đào tạo CĐN CNTT 2 – Các thẻ định dạng khối 2.1. Thẻ <P> Thẻ <P> được sử dụng để định dạng một đoạn văn bản. Cú pháp: <P> Nội dung đoạn văn bản </P> 2.2. Các thẻ định dạng đề mục H1/H2/H3/H4/H5/H6 HTML hỗ trợ 6 mức đề mục. Chú ý rằng đề mục chỉ là các chỉ dẫn định dạng về mặt logic, tức là mỗi trình duyệt sẽ thể hiện đề mục dưới một khuôn dạng thích hợp. Có thể ở trình duyệt này là font chữ 14 point nhưng sang trình duyệt khác là font chữ 20 point. Đề mục cấp 1 là cao nhất và giảm dần đến cấp 6. Thông thường văn bản ở đề mục cấp 5 hay cấp 6 thường có kích thước nhỏ hơn văn bản thông thường. Dưới đây là các thẻ dùng để định dạng văn bản ở dạng đề mục: <H1> … </H1> Định dạng đề mục cấp 1 <H2> … </H2> Định dạng đề mục cấp 2 <H3> … </H3> Định dạng đề mục cấp 3 <H4> … </H4> Định dạng đề mục cấp 4 <H5> … </H5> Định dạng đề mục cấp 5 <H6> … </H6> Định dạng đề mục cấp 6 2.3. Thẻ xuống dòng BR Thẻ này không có thẻ kết thúc tương ứng, nó có tác dụng chuyển sang dòng mới. Lưu ý, nội dung văn bản trong tài kiệu HTML sẽ được trình duyệt Web thể hiện liên tục, các khoảng trắng liền nhau, các ký tự tab. Ký tự xuống dòng đều được coi như một khoảng trắng. Để xuống dòng trong tài liệu, bạn phải sử dụng thẻ <BR> 2.4. Thẻ PRE Để giới hạn đoạn văn bản đã được định dạng sẵn bạn có thể sử dụng thẻ <PRE>. Văn bản ở giữa hai thẻ này sẽ được thể hiện giống hệt như khi chúng được đánh vào, ví dụ dấu xuống dòng trong đoạn văn bản giới hạn bởi thẻ <PRE> 3 – Các thẻ định dạng danh sách Cú pháp: Trang 9 Khoa ĐTTH – Biên soạn Khoa ĐTTH – Biên soạn năm 2011 năm 2011 <UL> <LI> Mục thứ nhất <LI> Mục thứ hai </UL> Có 4 kiểu danh sách: - Danh sách không sắp xếp (hay không đánh số) <UL>. - Danh sách có sắp xếp (hay có đánh số) <OL>, mỗi mục trong danh sách được sắp thứ tự. - Danh sách thực đơn <MENU> - Danh sách phân cấp <DIR> Với nhiều trình duyệt, danh sách phân cấp và danh sách thực đơn giống danh sách không đánh số, có thể dùng lẫn với nhau. Với thẻ OL ta có cú pháp sau: <OL TYPE=1/a/A/i/I> <LI> Mục thứ nhất <LI> Mục thứ hai <LI> Mục thứ ba ……. <OL> Trong đó: Type = 1 Các mục được sắp xếp theo thứ tự 1, 2, 3… = a Các mục được sắp xếp theo thứ tự a, b, c… = A Các mục được sắp xếp theo thứ tự A, B, C… = i Các mục được sắp xếp theo thứ tự i, ii, iii… = I Các mục được sắp xếp theo thứ tự I, II, III… Ngoài ra còn có thuộc tính START= xác định giá trị khởi đầu cho danh sách. Thẻ <LI> có thuộc tính TYPE= xác định ký hiệu đầu dòng (bullet) đứng trước mỗi mục trong danh sách. Thuộc tính này có thể nhận các giá trị: disc (chấm tròn đậm); circle (vòng tròn); square (hình vuông). Trang 10 [...]... CHECKBOX | FILE | IMAGE | PASSWORD | RADIO | RESET | SUBMIT | TEXT VALUE = value > 7.4 Tạo một danh sách lựa chọn Cú pháp: Tên mục chọn thứ nhất Tên mục chọn thứ hai Trang 20 Lập trình Web - Dùng cho hệ đào tạo CĐN CNTT 7.5 Tạo hộp soạn thảo văn... nền PHP Engine, cùng với ứng dụng Web Server để quản lý chúng Web Server thường sử dụng là IIS, Apache Web Server, 4.3 Thông dịch trang PHP Khi người sử dụng gọi trang PHP, Web Server triệu gọi PHP Engine để thông dịch (tương tự như ASP 3.0 chỉ thông dịch chứ không phải biên dịch) dịch trang PHP và trả về kết quả cho người sử dụng như hình 1-3 Trang 24 Lập trình Web - Dùng cho hệ đào tạo CĐN CNTT... ở trên, khai báo biến trong PHP như sau:  $variablename [=initial value]; $licount=0; $lsSQL=”Select * from tblusers where active=1”; $nameTypes = array("first", "last", "company"); $checkerror=false;  Chẳng hạn, khai báo như ví dụ 2-1 (variables.php) ::Welcome to PHP Trang 31 Khoa ĐTTH – Biên soạn năm 2011 Variable 3.2 Kiểm tra kiểu dữ liệu của biến Để kiểm... giá trị chính là giá trị của biến trước đó thì sử dụng cặp dấu $$ Ví dụ, biến $var có giá trị là "total", sau đó muốn sử dụng biến là total thì khai báo như ví dụ 2-5 (change.php) ::Welcome to PHP Change DataType of Variable Trang 35 Khoa ĐTTH – Biên soạn năm 2011 ... dấu các warning này thì bạn cũng cần khai báo trạng thái Off thay vì On như assert.warning = Off 3 – Cấu hình ứng dụng PHP Cài đặt Vertrigo Web Server Để cài đặt Vertrigo Web Server, thực theo các bước sau 1 Tải tập tin Vertrigo.exe từ địa chỉ: Trang 22 Lập trình Web - Dùng cho hệ đào tạo CĐN CNTT http://nchc.dl.sourceforge.net/project/vertrigo/VertrigoServ/2.24/Vertrigo_ 224.exe 2 Chạy tập tin này và... giữa hai thẻ Kích thước có thể là tuyệt đối (nhận giá trị từ 1 đến 7) hoặc tương đối (+2,-4…) so với font chữ hiện tại 4.2 Căn lề văn bản trong trang Web Trong trình bày trang Web của mình các bạn luôn phải chú ý đến việc căn lề các văn bản để trang Web có được một bố cục đẹp Một số các thẻ định dạng như P, Hn, IMG đều có tham số ALIGN cho phép bạn căn lề các văn bản nằm trong phạm vi giới hạn bởi... Ý nghĩa các tham số: HREF Địa chỉ của trang web được liên kết, là một url nào đó NAME Đặt tên cho vị trí đặt thẻ TABLEINDEX Thứ tự di chuyển khi ấn phím Tab TITLE Văn bản hiển thị khi di chuột trên siêu liên kết TARGET Mở trang web được liên kết trong một cửa sổ mới (_blank) hoặc trong cửa sổ hiện tại (_self), trong một frame (tên frame) Trang 14 Lập trình Web - Dùng cho hệ đào tạo CĐN CNTT 4.7 Kết... đổi kiểu dữ liệu Để thay đổi kiểu dữ liệu, bạn có thể sử dụng cách ép kiểu như trong các ngôn ngữ lập trình C hay Java Chẳng hạn, khai báo ép kiểu như ví dụ 2-2 (box.php): Trang 32 Lập trình Web - Dùng cho hệ đào tạo CĐN CNTT ::Welcome to PHP Variable . thành một mạng lưới trên khắp thế giới. * Website: Website là một vị trí chứa trang web, một thư mục trên web server chứa tất cả các file của một trang web. Thư mục này được gọi là root (rễ) tức. RADIO | RESET | SUBMIT | TEXT VALUE = value > 7.4. Tạo một danh sách lựa chọn Cú pháp: <SELECT NAME = “tên danh sách” SIZE = “chiều cao”> <OPTION VALUE=value1 SELECTED> Tên mục chọn. 1 trang web. Các trang HTML nói riêng và các trang web nói chung (.php, .asp, ) có tình chất của một văn bản như các file txt hay .doc chỉ có điều nó phức tạp và đa dạng hơn. Các trang web HTML