BÀI 2:CÁC THÀNH PHẦN QUAN TRỌNG TRONG LẬP TRÌNH WEB. ThS. Nguyễn Mạnh Sơn

V1.0011101205 5MỤC TIÊU DHTML Giới thiệu vai trò và mối quan hệ giữa các thành phần trong lập trình Web động như: CGI Các đối tượng ActiveX Các ngôn ngữ Script AJAX NỘI DUNG Khái quát ch

V1.0011101205 1

BÀI 2 CÁC THÀNH PHẦN QUAN TRỌNG

TRONG LẬP TRÌNH WEB

ThS Nguyễn Mạnh Sơn

TÌNH HUỐNG DẪN NHẬP

Web tĩnh và Web động?

V1.0011101205 3

• Web tĩnh: nội dung giống nhau trong những lần truy cập khác nhau (thuần

túy HTML)

• Web động: nội dung thay đổi theo người dùng, theo thời điểm, có khả năng tương

tác với người dùng và hướng tới việc xây dựng các ứng dụng dịch vụ trực tuyến,

thương mại điện tử,

• Xây dựng Web động => Lập trình Web

TÌNH HUỐNG DẪN NHẬP (tiếp theo)



Vấn đề đặt ra:

• Xử lý form người dùng phía Client

• Tương tác giữa các trang và giữa trang web với hệ thống

Giải pháp:

Cần các ngôn ngữ và các thành phần hỗ trợ cho lập trình web

TÌNH HUỐNG DẪN NHẬP (tiếp theo)

V1.0011101205 5

MỤC TIÊU

DHTML

Giới thiệu vai trò và mối quan hệ giữa các thành phần trong lập trình Web động như:

CGI

Các đối tượng ActiveX

Các ngôn ngữ Script

AJAX

NỘI DUNG

Khái quát chung về các thành phần trong lập trình Web

1

Giới thiệu về DHTML

2

Giới thiệu về CGI và ứng dụng

3

Các đối tượng ActiveX

4

Giới thiệu về ngôn ngữ VBScript

5

Java và JavaScript

6

Giới thiệu AJAX

7

V1.0011101205 7

1 KHÁI QUÁT CÁC THÀNH PHẦN TRONG LẬP TRÌNH WEB

Lập trình web: hai thành phần không thể tách rời

• Lập trình phía Client:

 Các trang HTML có thể được lập trình để thực hiện các thao tác thực thi trên

web client

 Các thành phần cơ bản hỗ trợ cho lập trình web phía Client hiện nay:

 Các ngôn ngữ Script (Javascript, VBscript);

 Java Applet;

 ActiveX Control

• Lập trình phía Server:

 Yêu cầu được gửi từ phía Client và xử lý phía Server

 Các ngôn ngữ và thành phần cơ bản:

 CGI;

 AJAX;

 Active Server Pages (Microsoft);

 Java Servlets và Java Server Page (Sun)

1.1 GIỚI THIỆU CÁC NGÔN NGỮ SCRIPT Ở CLIENT

• Là các ngôn ngữ kịch bản chạy trên Web Client

• Có thể làm việc khác nhau trên các loại Web Browser khác nhau

• Các đoạn mã kịch bản (Script) được chạy dựa vào các sự kiện của các phần tử HTML

và xen kẽ với các tags HTML

• Không tương tác được với Server

• Hai ngôn ngữ Script cơ bản:

 Java Script: ngôn ngữ tựa Java;

 VBscript: ngôn ngữ tựa Visual Basic

V1.0011101205 9

• Java Applet:

 Là một ứng dụng được viết bằng Java, nhúng trong trang HTML qua

Tag Applet

 Khi trang HTML có chứa Tag Applet được gọi, Class Applet được tải về

máy client và thực thi trên máy client

 Applet bị hạn chế một số chức năng vì tính bảo mật cho máy Client

• ActiveX Control:

 Tương tự như Java Applet, được viết bởi các công nghệ của Mircosoft, hỗ

trợ cho tương tác giữa trang web với nhiều ngôn ngữ khác nhau

• AJAX:

 AsynchronousJavaScriptAndXML

 Một cách thức mới sử dụng các ngôn ngữ và công nghệ đã có để tăng

tính động cho trang web 2.0

1.1 GIỚI THIỆU CÁC NGÔN NGỮ SCRIPT Ở CLIENT(tiếp theo)

2 GIỚI THIỆU VỀ DHTML

DHTML – Dynamic Hypertext markup language

• Sự kết hợp giữa HTML, JavaScript, Style Sheet

• Trong đó:

 HTML: Tài liệu với nội dung tĩnh;

 JavaScript: Nội dung trang “động” hơn, tăng tính tương tác với người

dùng;

 Style Sheet: Tạo sự thống nhất giữa các trang;

Cách thể hiện DHTML

• Microsoft: sử dụng các CSS (Cascading Style Sheets) Các style được điều khiển

bằng các Script

• Netscape: sử dụng Style Sheet thông qua Layer

CSS: Sẽ được trình bày chi tiết trong Bài 3

V1.0011101205 11

CÁC TÍNH NĂNG CỦA DHTML

• Kiểu động – Dynamic Style: sử dụng các style để thay đổi các thuộc tính;

• Nội dung động – Dynamic Content (hỗ trợ với IE): thay đổi nội dung trang sau khi

hiển thị;

• Định vị - Position: định vị tuyệt đối và tương đối các phần tử;

• Liên kết dữ liệu – Data Binding (hỗ trợ với IE);

• Khả năng tải font chữ - Downloadable Fonts (hỗ trợ với Netscape);

• Được điều khiển bởi các Script;

• Hỗ trợ mô hình DOM – Document Object Model

• Style Sheet

 Tập hợp các quy tắc kiểu – Style;

 Nơi quản lý và điều khiển các Style;

 Dựa vào style, trình duyệt hiển thị nội dung đúng yêu cầu;

 Style: Mô tả các thuộc tính, định dạng cho các phần tử HTML;

• Thay đổi các style

 Inline Style: các style chỉ áp dụng cho từng phần tử cụ thể, không áp

dụng chung cho các phần tử được tạo trực tiếp bởi thuộc tính style;

 Thay đổi bằng các Script: sử dụng đối tượng style, thay đổi các thuộc tính

theo định dạng

CÁC TÍNH NĂNG CỦA DHTML (tiếp theo)

V1.0011101205 13

3 GiỚI THIỆU VỀ CGI VÀ ỨNG DỤNG

• Trang HTML chỉ chứa các nội dung cố định hoặc có thể thao tác thay đổi qua DHTML

ở Client;

• Nhu cầu sử dụng các trang web như một ứng dụng (giao tiếp với user, tìm kiếm, nội

dung thay đổi, tương tác các ứng dụng, với database…)=> ứng dụng web;

• Lập trình xây dựng các ứng dụng như vậy cần các ngôn ngữ và công nghệ

phía Server;

• CGI (Common Gateway Interface) là một chuẩn (Standard) để viết ứng dụng web

phía Server

3.1 ĐẶC ĐIỂM CỦA ỨNG DỤNG WEB THEO CHUẨN CGI

Một ứng dụng web theo chuẩn CGI có các đặc điểm:

• Là ứng dụng chạy trên nền Web Server;

• Nhận thông tin từ web Browser và xuất thông tin để Web Browser hiển thị thông

qua Web Server;

• Chương trình có thể viết bằng bất cứ ngôn ngữ nào (C/C++, Perl, Shell script, Dos

shell…) nếu nó chấp nhận đầu vào và đầu ra theo đặc tả CGI

V1.0011101205 15

3.2 CÁCH THỨC HOẠT ĐỘNG CỦA ỨNG DỤNG WEB CGI

• Web Server nhận Request ứng dụng CGI từ Browser;

• Web Server gọi ứng dụng CGI, truyền các thông số bằng các biến môi trường (thông

qua Standard Input);

• Ứng dụng web CGI xử lý, giao tiếp với các ứng dụng khác (database, mail…), xuất

kết quả dạng HTML qua Standard Output đến web server;

• Web Server nhận kết quả và trả về cho Browser

Hoạt động CGI

3.2 CÁCH THỨC HOẠT ĐỘNG CỦA ỨNG DỤNG WEB CGI (tiếp theo)

V1.0011101205 17

Ví dụ đơn giản với ngôn ngữ C++:

17

// hello.cpp

#include <iostream>

using namespace std;

int main()

{

cout << "Content-Type: text/html" << endl

<< endl;

cout << "Hello and welcome to my page " << endl;

return 0;

}

3.3 CẤU TRÚC ỨNG DỤNG WEB CGI

Ví dụ về đọc file: // fortune.cpp

#include <iostream>

#include <fstream>

#include <string>

#include <ctime>

using namespace std;

int main() { ifstream ffile("fortune.txt");

int numFortunes;

ffile >> numFortunes;

srand((unsigned)time(NULL));

int find = rand() % numFortunes;

string line;

getline(ffile, line);

for (int i = 0; i <= find; i++) { getline(ffile, line);

} ffile.close();

cout << "Content-Type: text/html" << endl

<< endl;

cout << "Remember: " << line << endl;

return 0;

3.4 VÍ DỤ VỀ ỨNG DỤNG WEB CGI (tiếp theo)

V1.0011101205 19

4 KHÁI NIỆM CÁC ĐỐI TƯỢNG ACTIVEX

ActiveX là gì: một tập các công nghệ của Microsoft được tích hợp trong các sản phẩm

của Microsoft:

• Cung cấp các công cụ liên kết ứng dụng Windows Form với Web

• ActiveX controls được sử dụng để tạo nên các khối chức năng trong ứng dụng

Ví dụ: Text Control để nhận ID & Password, Button Control để thực hiện xử lý

nút lệnh;

• Tương tự như Applets, nhưng cú khả năng truy nhập đầy đủ đến hệ điều hành

Windows;

• Chỉ cần download một lần về Client, thành phần điều khiển sẽ tự động đăng ký và

sẵn sàng với trình duyệt Web;

• Có khả năng tự động cập nhật các phiên bản mới

4.1 VAI TRÒ CỦA ACTIVEX

Java Applet

JavaScript™

VBScript

ActiveX Control

HTML Document

Non-HTML Document

Kết nối các thành phần trong lập trình web

Java Applet

JavaScript™

VBScript

ActiveX Control

HTML Document

Non-HTML Document

V1.0011101205 21

4.2 CÁC THÀNH PHẦN CỦA ACTIVEX

Component Object Model (COM) Standard component packaging Windows® Macintosh® UNIX®

Distributed COM

Internet/distributed computing

Components and Services URLs, hyperlinking, browser frame, HTML, Java VM, etc.

Controls and Applets C++, Delphi®, Java, Visual Basic®, etc.

Scripting Visual Basic, Scripting Edition, JScript, Tck/Tk, etc.

Web Pages, Documents, and Applications/Containers

4.3 VAI TRÒ CÁC THÀNH PHẦN ACTIVEX

Server Client

M Remote object on any server

Object running

on client

Object running

on client

COM

V1.0011101205 23

4.4 TƯƠNG TÁC GIỮA ACTIVEX VỚI NGÔN NGỮ JAVA

ActiveX

Control

(C++, VB, etc.)

ActiveX

Scripting

(VBScript, JScript, etc.)

Java applet

ActiveX Java VM

Securely invoke methods

5 GIỚI THIỆU NGÔN NGỮ VBSCRIPT

• Một Script trong tài liệu HTML nói chung có hai phần:

 Phần <HEAD> của tài liệu sẽ có một Script Container đặc biệt chứa định

nghĩa của các hàm được Script dùng;

 Lời gọi hàm làm nhiệm vụ truyền và nhận các giá trị

• VBScript là tập con của Visual Basic

• Làm việc với ActiveX: VBScript vẫn là sự lựa chọn của Microsoft cho tương tác

với ActiveX

V1.0011101205 25

5.1 CẤU TRÚC VÀ CHỨC NĂNG SỰ KIỆN TRONG VBSCRIPT

• Thêm VBScript vào trang HTML

Tag <Script Language = “VBScript”> </Script>

• Các sự kiện trên Form được xử lý bởi VBScript

Tên sự kiện Chức năng

Onclick Phản ứng khi người dùng Click chuột lên một thành

phần của Form

OnFocus Phản ứng khi người dùng đặt Focus vào thành phần

nào đó

OnBlur Phản ứng khi người dùng chuyển Focus ra khỏi thành

phần nào đó.

OnChange Phản ứng khi người dùng thay đổi dữ liệu hay thay

đổi vùng chọn trong thành phần nào đó.

OnSelect Phản ứng khi người dùng chọn nội dung của thành

phần nào đó.

5.2 VIẾT CHƯƠNG TRÌNH XỬ LÝ SỰ KIỆN

• Trong VBScript, các sự kiện được quản lý bằng hàm Sub nằm ở phần đầu tài liệu.

• Lấy dữ liệu trong Form: Document.<tên Form>

• Để viết dữ liệu ta dùng Document.Write “String”

• Cấu trúc mở một cửa sổ mới:

Window.Open (“page.Html”, “Window Name”);

• Cú pháp ngôn ngữ VBScript: về cơ bản giống với Visual Basic

V1.0011101205 27

5.3 VÍ DỤ 1

5.3 VÍ DỤ 2 – KIỂM TRA DỮ LIỆU VÀO TỪ TEXTBOX

<SCRIPT LANGUAGE ="VBScript">

Function frmInput_OnSubmit Dim strName, strEmail, strPhone, strVideo, intSelIndex strName = frmInput.txtName.Value

strPhone = frmInput.txtPhoneNum.Value strEmail = frmInput.txtEmail.Value

If Len(strName) < 5 Then Msgbox "Please input a name at least 5 characters long!"

frmInput.txtName.Value = ""

frmInput.txtName.Focus frmInput_OnSubmit = False Exit Function

ElseIf Len(strPhone) <> 12 Then Msgbox "Please input a phone number with exactly 12 digits!"

frmInput.txtPhoneNum.Value = ""

frmInput.txtPhoneNum.Focus frmInput_OnSubmit = False Exit Function

ElseIf InStr(strEmail,"@") = 0 Or Len(strEmail) < 5 Then Msgbox "Please input an e-mail address with an @ sign" _

& "and at least 5 characters!"

V1.0011101205 29

6 JAVA VÀ JAVA SCRIPT

Lập trình phía Client với ngôn ngữ tựa Java

• JavaScript:

 Ngôn ngữ dạng kịch bản;

 Chèn trực tiếp vào trong văn bản HTML;

 Có thể dùng để thiết lập/kiểm tra các dữ liệu nhập trên form ở phía web client;

 Sẽ được trình bày chi tiết trong Bài 4 và Bài 5

• JavaApplet:

 Chương trình với ngôn ngữ Java kế thừa từ lớp java.applet.Applet;

 Biên dịch thành file class và nhúng vào HTML qua thẻ <applet>

6.1 CÚ PHÁP CHUNG CỦA KỊCH BẢN VỚI JAVASCRIPT

• Cú pháp cho một đoạn code Javascript:

<script language=“JavaScript”>

//các khai báo biến

[var variable;]*

//các lệnh gọi hàm và các hàm

function function-name([agrv]*){

//các câu lệnh khai báo và thực thi

[return [value];]

}

</script>

• Sử dụng file Javascript (*.js) đã có:

<script language="JavaScript" src="*.js"></script>

V1.0011101205 31

6.2 CÁC ĐỐI TƯỢNG TRONG JAVASCRIPT

• Các đối tượng được xây dựng sẵn trong JavaScript:

• Mỗi phần tử trong trang HTML đều có thể coi là một đối tượng, có thể khai báo sự

kiện để gọi hàm Javascript

 Cú pháp:

<tags-name [properties] * [event-name=“procedure call” ]*>

6.3 CÁC SỰ KIỆN CỦA JAVASCRIPT

• onClick:click chuột vào đối tượng

• onFocus:focus vào đối tượng trong form

• onMouseOver:di chuyển chuột vào trên đối tượng

• onMouseOut:di chuyển chuột ra khỏi đối tượng

• onChange:thay đổi giá trị của các đối tượng chứa văn bản

• onBlur:chuyển focus khỏi đối tượng trong form

• onSelect:chọn phần tử trong listbox

• onLoad:xảy ra khi một document được load

V1.0011101205 33

6.4 VÍ DỤ VỚI APPLET

Khai báo lớp SampleApplet

import java.applet.*; import java.awt.*;

public class SampleApplet extends Applet {

String text = "error"; int x = 0; int y = 20;

public void init() {

text = getParameter("text");

try { x = Integer.parseInt(getParameter("x"));

y = Integer.parseInt(getParameter("y"));

}catch(NumberFormatException ex){ } }

public void paint(Graphics g) {

g.setFont(new Font("TimesRoman",Font.BOLD+

Font.ITALIC,36));

g.drawString(text,x,y);

}

}

Nhúng vào file sample.html

<HTML> <HEAD> <TITLE>Using the Applet Tag

</TITLE> </HEAD>

<BODY>

<H1>An Applet that Displays Text at a Designated Location</H1>

<APPLET CODE="SampleApplet.class" HEIGHT=300 WIDTH=300>

<PARAM NAME="text" VALUE="Applets are fun!">

<PARAM NAME="x" VALUE="50">

<PARAM NAME="y" VALUE="50">

Text displayed by browsers that are not Java-enabled

</APPLET>

</BODY>

</HTML>

6.4 VÍ DỤ VỚI APPLET

V1.0011101205 35

7 GIỚI THIỆU VỀ AJAX

• AJAX =AsynchronousJavaScriptAndXML

• AJAX không phải là ngôn ngữ mới mà là một cách mới sử dụng các ngôn ngữ

đã có

• AJAX giúp ta tạo các trang web nhanh hơn, tiện lợi hơn, thân thiện hơn khi sử

dụng

• AJAX dựa trên JavaScript và các yêu cầu HTTP

• Là công nghệ của Web Browser Độc lập với Web Server

• Sử dụng JavaScript để gửi và nhận dữ liệu giữa Client và Server

• AJAX dựa trên:

 JavaScript

 XML

 HTML

 CSS

• AJAX sử dụng XML và yêu cầu HTTP

7.1 KIẾN TRÚC ỨNG DỤNG WEB VỚI AJAX

V1.0011101205 37

7.2 HOẠT ĐỘNG CỦA AJAX

• AJAX làm việc như thế nào?

• Một số ví dụ về Web sử dụng AJAX

 Google Calendar

 Flickr

 Meebo

7.3 CÁC ƯU ĐIỂM CỦA WEB VỚI AJAX

• Kiểm tra lỗi với Form người dùng;

• Tự động gợi ý các đoạn văn bản muốn gõ;

• Cho phép kéo thả các đối tượng;

• Di chuyển xung quanh các đối tượng ảnh hoặc bản đồ;

• Tải trước những nội dung mà bạn có thể sẽ muốn hiển thị;

• Cung cấp các chức năng hạn chế kết quả tìm kiếm hoặc tìm kết quả nhanh

hơn

V1.0011101205 39

TÓM LƯỢC CUỐI BÀI

Học viên cần nắm được:

• Các vấn đề đặt ra trong lập trình web

• Phân biệt các thành phần và ngôn ngữ quan trọng trong lập

trình web:

 DHTML

 CSS

 CGI

 ActiveX

 AJAX

• Ý nghĩa của các thành phần trên trong lập trình web phía Client

và phía Server