Tài liệu Lập trình mạng P5 ppt

Chương 5: Lập trình với hệ thông web - Lập trình web phía client - Lập trình web phía server... Web Browser: chương trình giao tiếp với người dùng, nhận yêu cầu từ user rồi truy xuất t

Chương 5: Lập trình với hệ thông web

- Lập trình web phía client

- Lập trình web phía server

Mô hình hoạt động của hệ thống web:

web browser/ web server

Chương 5

Web server: chương trình quản lý một cây thứ bậc các trang Web và phục

vụ yêu câu truy xuất chúng từ các client từ xa

Web Browser: chương trình giao tiếp với người dùng, nhận yêu cầu từ

user rồi truy xuất trang Web ở server tương ứng đề phân giải và hiễn thị nội

dung lên màn hình

Trang Web: đơn vị gởi nhận giữa Web server và Web client, nó là 1 file văn

bản được viết bằng ngôn ngữ HTML

Web browser va web server sé tạo 1 câu nỗi TCP đề trao đổi thông tin,

server lắng nghe ở port 80 (port mặc định) và dùng giao thức HTTP

(HyperText Transfer Protocol)

Câu trúc một giao dịch HTTP 1.0

Bước 1: HTTP client mở kết nỗi đến HTTP server

Bước 2: HTTP client gửi request message đến HTTP server

Bước 3: HTTP server trả response mesage về cho HTTP client, chứa

resource ma HTTP client yêu câu

Bước 4: HTTP server đóng kết nồi

Ví dụ Client: GET /path/file.html HT TP/1.0

Chương 5

Các đặc điểm của ứng dụng web

— Không phải là một ứng dụng độc lập, là ứng dụng chạy trên nên web-

HTML — HyperText Markup Language

Là một ngôn ngữ đánh dấu siêu văn bản

vSử dụng các thẻ (tag) đề định dạng: văn bản, đoạn văn, hình ảnh, file âm

thanh, Java applet, đối tượng như file Word, Excel, JavaBean

v€Cho phép chèn các đoạn mã script như JavaScript thực thi tại trình duyệt

(browser)

Là định dạng chuẩn cho trang web

— Mở rộng: XML, WSDL/SOAP

CÁC CÔNG CỤ TẠO TRANG WEB

Microsoft Visual InterDev 6

— HTML, ASP

Microsoft Visual Studio.NET 2003

— HTML, ASP.NET, ASP.NET Webservice, C#, C++

FORMs

— Câu trúc cơ bản của một form

<FORM ACTION= 7e" METHOD={GET|POST}>

[<INPUT TYPE="" NAME="" VALUE="">]+

</FORM>

— Cac loai (type) INPUT

TEXT: la textbox dung dé nhap di liéu

— Cú pháp:

<INPUT [TYPE=TEXT] NAME="text-id" [SIZE=nn]

[MAXLENGTH=mr] [VALUE="defaulf texf']>

FORMs

Cac loai (type) INPUT

SUBMIT: truyền dữ liệu form đến ứng dụng web

~ Cú pháp: <INPUT TYPE=SUBMIT [NAME="buffon-id"]

[VALUE="iexf'>

RESET:đưa nội dung của form trở về giá trị ban đầu

— Cu phap: <INPUT TYPE=RESET [VALUE =“‘text']>

BUTTON: nut nhan bat ky

— Cu phap: <INPUT TYPE=BUTTON [NAME="button-ia"

[VALUE="text']>

Chuong 5

FORMs

Cac loai (type) INPUT

RATIO: chọn lựa một trong nhiều

— Cu phap: <INPUT TYPE=RADIO NAME="radio-set-ia"

VALUE="choice-ia" [checked]>

<input type="radio" value="V1" checked name="R1">Option 1

<br><input type="radio" value="V2" name="R1">Option 2

<br><input type="radio" value="V3" name="R1">Option 3

CHECKBOX: lựa chọn một hoặc nhiều

— Cú phap: <INPUT TYPE=CHECKBOX NAME="ia"

VALUE="choice-id" [CHECKED]>

— Vi du:

<input type="checkbox" name="C 1" value="ON">Check 1 <br>

<input type="checkbox" name="C 1" value="ON" checked>Check 2

FORMs

Cac loai (type) INPUT

HIDDEN: dữ liệu không hiễn thị

— Cu phap: <INPUT TYPE=HIDDEN NAME="ia"

VALUE="data">

— Nhap vung van ban: TEXTAREA

<TEXTAREA NAME="/a" [COLS=nn] [ROWS=nn]> default

text</TEXTAREA>

— Lựa chon listbox: SELECT

<SELECT NAME="/a" [SIZE=nn] [MULTIPLE]>

[<OPTION [VALUE="value"] [SELEC TED]>text |+

</SELECT>

<select size="1" name="D1">

<option value="501097">Mang may tinh</option>

<option value="501016">Lap trinhmang</option>

</select>

Chuong 5

FORMs

Cac loai (type) INPUT

HIDDEN: dữ liệu không hiễn thị

— Cu phap: <INPUT TYPE=HIDDEN NAME="ia"

VALUE="data">

— Nhap vung van ban: TEXTAREA

<TEXTAREA NAME="/a" [COLS=nn] [ROWS=nn]> default

text</TEXTAREA>

— Lựa chon listbox: SELECT

<SELECT NAME="/a" [SIZE=nn] [MULTIPLE]>

[<OPTION [VALUE="value"] [SELEC TED]>text |+

</SELECT>

<select size="1" name="D1">

<option value="501097">Mang may tinh</option>

<option value="501016">Lap trinhmang</option>

</select>

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

tren web client

Các phương pháp phổ biên để lập trình hiện nay:

— Script (Javascript, Vbscript)

— Java Applet

— ActiveX Control

Su dung file Javascript (*.js) da co

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

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

— window: chứa các thuộc tính liên quan đến cửa số hiện thời

— document: chứa các thuộc tính trong trang web

— location: các thuộc tính về địa chỉ trang web

— history: các thuộc tính về vi tri ma web browser da dén

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 dé goi ham Javascript

— Cu phap

<tags-name [properties]*

[event-name="procedure call” |*>

- Các sự kiện có thê dùng

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

onMouseOtut: 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: chon phan tử trong listbox

onLoad: xay ra khimột document được load

Kiểm tra thông tin địa chỉ E-mail nhập vào

function isEmail() {

if (document.forms[0].elements[1].value == ") {

alert ("\n The E-Mail field is blank \n\n “+

“Please enter your E-Mail address.")

alert ("\n The E-Mail field requires a \"@\" and a \".\"+

"be used \n\nPlease re-enter your E-Mail address.")

- DHTML (Dynamic HTML) là trang HTML có chứa các đoạn mã JavaScript

tạo các hiệu ứng, thay đổi các phân tử trong trang HTML

- DHTML kết hợp giữa HTML, Javascript và Cascading Style Sheets(CSS)

- CSS là sự kết hợp giữa các tags HTML và style

- Style có thể chứa nhiều thuộc tính

- Mọi tags HTML đều có style Javascript có thê dựa trên các biên cô dé thay đổi các thuộc tính của style

- Mỗi phân tử trong trang HTML đều có thê được gán ID (khác với name)

và có các thuộc tính style

- Có thê dùng tag <div id=“”> </div>

- Mỗi web browser có thể thực thi một số lệnh khác

nhau

Phát hiện loại web browser

— Dùng các thuộc tính apoName và appVersion của đỗi tượng navigator

var browser_name= navigator.appName;

var browser_version = navigator.appName;

alert(“You use browser “+browser_namet+’ version “+

Chương 5

Java Applet

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

— Khi trang HTML có chứa tag applet được gọi, class applet được tải về

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

— Một ứng dụng applet phải thừa kế class java.applet.Applet

— Có thể thực hiện các thao tác như một chương trình Java, tuy nhiên bị

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

Hoạt dong cua mot Applet

— Được web browser tải mã(byte code) vé may client

- Method init() sẽ được gọi để khởi động các thông số

— Method start() được gọi đề thực thi

— Method stop() được gọi khi người dùng thoát khỏi applet

— Method destroy() được thực thi khi applet kết thúc

ActiveX Control

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

/Ifile SampleApplet.java

import java.applet.*;

import java.awt.*;

public class SampleApplet extends Applet {

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

public void init() {

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

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

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

Text displayed by browsers that are not Javaenabled

</APPLET>

</BODY>

</HTML>

Chuong 5

Lập trinhWeb với CGI

Lập trinhWeb với Servlet

Lap trinhWeb voi JSP

Lap trinhWeb voi ASP

Lap trinhWeb voi PHP

Chương 5

Lập trinh web voi CGI

vTrang 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

¥ CGI (Common Gateway Interface) là một chuẩn (standard) dé viết

ứng dụng web

vCác đặc điểm

- Là ứng dụng chạy trên nền web server

- Nhận thông tin từ web browser va xuat thong tin dé web browser

hiển thị thông qua web server

- Ứng dụng có thê được viết với bất cứ ngôn ngữ lập trình có

standard input va standard output (C/C++, Perl, Shell

script, Dos shell )

Lập trinh web voi CGI

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.

Chương 5

ả Lập trình web phía Server

Lập trinh web voi CGI

Lập trinh web voi CGI

Internet

Web Browser

Client sends a standard The web server racelves The Parl interpreter Parl is able to call libraries

HTTP request encoded the HTTP request and = accepts the input fromthe and other network

with special variables and USING special rules server, parses the functions to complete the

their values Thase determines that the variables, applies some requesi

variables are commonly "@quest is destined for programming lagic to the

called “CGI variables" «CG! program and not for data and returns a

an HTML file document back to the

webserver

Hoạt động cua CGI (perl)

#Remember : this path will vary depending on

#where Perl is located

print "Content-type:text/htmi\n\n";

print "<html><head><title>HELLO!</title></head>";

print "<body>\n";

print "<h2>Hello!</h2>\n";

foreach $key (sort(keys %ENV)) {

print "VARIABLE $key = $ENV{$key}<br>\n";

}

print "</body></html>\n";

Lập trinh web voi CGI

Vi du (Perl)

#!/perl/bin/perl

#Remember : this path will vary depending on

#where Perl is located

print "Content-type:text/htmi\n\n";

print "<html><head><title>HELLO!</title></head>";

print "<body>\n";

print "<h2>Hello!</h2>\n";

foreach $key (sort(keys %ENV)) {

print "VARIABLE $key = $ENV{$key}<br>\n";

}

print "</body></html>\n";

Chương 5

vJava servlet là những chương trình độc lập platform và nhỏ chạy ở

phía server được lập trình đề mở rộng chức năng của web server(Web

server phải hỗ trợ Java)

vCơ chế hoạt động theo mô hình CGI mở rộng

vChương trinh servlet:

— Thwong extends class HttpServlet Khong co method main

— Phải được dịch ra ở dạng byte-code(.class) và khai báo với

web server.

Can co package servlet.jar dé biên dịch

(http://java.sun.com/products/servlet/)

Các server hiện hỗ trợ Servlet:

— Apache Tomcat (http://jakarta.apache.org)

— Sun’s Java Web Server, free, hign khong cho download

sang “| request (Instaniated &

Java Servlet API gồm:

— javax.servlet.*

Chứa cac class va interface độc lập voi HTTP

— javax.servlet.http.*

Chitra cac class cu thé cho HTTP

Tat cả sevlet đều phải hiện thực giao diện javax.servlet.Servlet

Tuy nhiên do chúng ta dùng giao thức HTTP nên

Javax.servlet.http.HttpServlet là lớp hiện thực giao diện Servlet, nén ta

thường phải kế thừa từ lớp này và override các method

doGet()/doPost()

Servlet context Javax.servlet.ServletContext

Servlet collaboration Javax.servlet.RequestDispatcher

Java.servlet.http.HttpUtils

Chương 5

Web server nhận yêu câu triệu gọi servlet từ client

Nếu servlet chạy lân đâu, web server load file

*servlet tương ứng, khởi tạo các thông số bằng qua method init()

Nếu servlet đã được khởi tạo, tạo một thread để xử lý yêu câu

vGọi methods doXxx() đề xử lý các request tương ứng theo giao thức

HTTP:

— doGet cho HTTP GET, doPost cho HTTP POST

public class Sample extends HttpServlet{

public doGet(HttpServletRequest request,

HttpServletResponse response)

throws ServletException,IOException{

IIdùng đối tượng “request” để đọc dữ liệu từ client

IIdùng đối tượng “response” đề xuất dữ liệu cho client

PrintWriter out = response.getWriter();

IIdùng đối tượng out đề ghi (method print) dữ liệu cho client

}

}

throws ServletException, IOException {

PrintWriter out = response.getWriter();

out.printin("“Hello World");

}

}

API cho HttpServletRequest

Object getAttribute(String name)

void setAttribute(String name, Object att )

Lây dữ liệu từ web client gởi đến bang servlet

- Dùng đôi tượng của class HffpServletRequestf

- Các methods đề lấy thông số:

getParameter(“para-name”)

getParameterValues(“para-name”)

String username= request.getParameter(“username’);

String[] choice = request.getParameterValues(“comments”);

— Dung déi tuong cua class HttpServietRequest dé lay cac

thong tin HTTP header

— Vi du: Request Parameter

Chuong 5