Bài giảng lập trình WEB

Bài giảng lập trình WEB Bài giảng lập trình WEB Bài giảng lập trình WEB Bài giảng lập trình WEB Bài giảng lập trình WEB Bài giảng lập trình WEB Bài giảng lập trình WEB Bài giảng lập trình WEB Bài giảng lập trình WEB Bài giảng lập trình WEB Bài giảng lập trình WEB Bài giảng lập trình WEB Bài giảng lập trình WEB Bài giảng lập trình WEB Bài giảng lập trình WEB Bài giảng lập trình WEB Bài giảng lập trình WEB Bài giảng lập trình WEB Bài giảng lập trình WEB Bài giảng lập trình WEB Bài giảng lập trình WEB Bài giảng lập trình WEB Bài giảng lập trình WEB Bài giảng lập trình WEB Bài giảng lập trình WEB Bài giảng lập trình WEB GIỚI THIỆU Tổng quan về Web Phân loại trang web  Trang web tĩnh  Là trang được lưu trữ sẵn trên server  Khi có yêu cầu từ phía client, trang này sẽ được tải về và hiển thị trên browser  Trang web.

Tổng quan về Web

Phân loại trang web

 Trang web tĩnh:

 Là trang được lưu trữ sẵn trên server

 Khi có yêu cầu từ phía client , trang này sẽ được tải về và hiển thị trên browser

Phân loại trang web

 Trang web có nhúng các Applet và Script:

Mô hình web tĩnh

Mô hình Web động

Ngôn ngữ phía Server

ASP.NET

 Ví dụ một đoạn code

Python

 Ngôn ngữ hướng đối tượng, dễ sử dụng (đặc biệt trên Linux)

 Ví dụ một đoạn code:

Sự phát triển của công nghệ Web

Công nghệ Web

 Công nghệ Web: tập hợp các công nghệ

dùng để phân tích, thiết kế, thực hiện,

kiểm thử, vận hành và bảo trì các ứng

dụng Web với chất lượng cao nhất

 Ứng dụng Web: ứng dụng được chạy

trên nền web

Công nghệ Web

 Qui trình xây dựng ứng dụng web

 Thu thập yêu cầu

Sự phát triển của công nghệ Web

Các loại Web

Doc-Centric

Interactive, Transactional

Workflow Based

Social Web

Portal Oriented

Semantic Web

Web tương tác & giao dịch

(Interactive/Transactional)

 Chuẩn CGI (Common Gateway Interface) tạo ra trang web động

 Tương tác đơn giản

 Cập nhật nội dung thông qua phiên giao dịch

 Không tập trung (Decentralized)

 Kết nối với cơ sở dữ liệu

 Độ phức tạp cao

Ứng dụng web dựa trên Workflow

 Được tổ chức để xử lý các công việc giữa các bộ phận trong các tổ chức xã hội hoặc các doanh nghiệp

 Ví dụ: Chính phủ điện tử (e-Government)

 Vai trò của Web services: khả năng cộng tác, kết nối mềm

 Độ phức tạp rất cao

Cổng thông tin điện tử

 Một điểm truy cập với rất nhiều thể loại thông tin khác nhau

Web ngữ nghĩa (Semantic Web)

 Các hệ thống thông tin có thể giao tiếp với nhau, phân tích và diễn giải ý nghĩa của

mọi dữ liệu

 VD: wolframalpha

 Giúp dữ liệu có thể được chia sẻ và tái sử dụng xuyên suốt nhiều ứng dụng

 Một số định dạng chung cho lưu trữ, chia

sẻ dữ liệu: XML, JSON, OWL, RDF

Web ứng dụng ở Việt Nam

 Quản lý nội dung

 Các trang tin tức trực tuyến, tin tức doanh nghiệp, tin tức của các tổ chức đoàn thể

 Thương mại điện tử

 Các trang bán hàng trực tuyến

 Dịch vụ Web (web service)

 Dịch vụ web của ngân hàng

 Cổng thông tin điện tử

Others

Kiến trúc Web

Nội dung

 Kiến trúc web

 Giao thức HTTP

 Mô hình MVC

Kiến trúc Web

 Kiến trúc Web Platform

 Platform

• Software modules & configurations

• Choice of software platform (e.g., J2EE, NET)

 Kiến trúc Web Application

 Mô hình hóa các tiến trình xử lý

 Trong một lĩnh vực cụ thể

 Module hóa và phức tạp

Kiến trúc Web Platform

application server, database, web services)

HTTP Server

HTTP for transport

URL/URI for addressing

HTML/XHTML

for display

PHP, python etc

for interaction

Mô hình Web (các tầng giao thức)

SONET interface

IP

SONET interface

Ethernet interface

Giao dịch của HTTP

một response (một phản hồi của một request nào đó) giữa web client và web server

GET / HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/ jpeg, image/pjpeg, */*

Accept-Language: en-us Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible;

MSIE 5.01; Windows NT) Host: www.eurecom.fr Connection: Keep-Alive

server

HTTP/1.1 200 OK Date: Mon, 15 Jul 2002 08:49:00 GMT Server: Apache/1.3.26 (Unix) PHP/4.2.1 Last-Modified: Wed, 12 Jun 2002 08:49:49 GMT

ETag: "2a-50ea-3d070b2d"

Accept-Ranges: bytes Content-Length: 20714 Keep-Alive: timeout=15, max=100 Connection: Keep-Alive

Content-Type: text/html

<html>

HTML

HTTP Message

 HTTP message ở dạng ASCII text, gồm:

 Một dòng yêu cầu

Method Request-URI HTTP-Version (Request-Line)

HTTP-Version Status-Code Reason-Phrase (Status-Line)

Accept-Encoding: gzip, deflate

User-Agent: Mozilla/4.0 (compatible; MSIE 5.01; Windows NT)

Host: www.eurecom.fr

Connection: Keep-Alive

<CR>

GET /foo.html HTTP/1.1 — request "/foo.html" using HTTP version 1.1

Accept: — types of documents accepted by browser

Accept-Language: — preferred language is english

Accept-Encoding: — browser understands compressed documents

User-Agent: — identification of browser (real type is IE 5.01)

Host: — what the client thinks the server host is

Connection: — keep TCP connection open until explicitly disconnected

HTTP Response

 Ví dụ:

HTTP/1.1 200 OK

Date: Mon, 15 Jul 2002 08:49:00 GMT

Server: Apache/1.3.26 (Unix) PHP/4.2.1

Last-Modified: Wed, 12 Jun 2002 08:49:49 GMT

HTTP/1.1 200 OK — document found (code 200); server is using HTTP 1.1

Date: — current date at the server

Server: — software run by the server

Last-Modified: — most recent modification of the document

ETag: — entity tag (unique identifier for the server resource, usable for caching)

Accept-Ranges: — server can return subsections of a document

Content-Length: — length of the body (which follows the header) in bytes

Connection: — the connection will close after the server's response

Content-Type: — what kind of document is included in the response

<html> — document text (follows blank line)

Client Methods

 GET

Retrieve a resource from the

server (static file, or

dynamically-generated data)

 HEAD

Get information about a

resource (but not the actual

resource)

 POST

Client provides some

information to the server, e.g.,

through forms (may update

the state of the server)

 PUT

Provide a new or replacement

resource to put on the server

 TRACE (HTTP 1.1)

Ask proxies to declare themselves in the headers (used for debugging)

 CONNECT (HTTP 1.1)

Used for HTTPS (secure HTTP) through a proxy

HTTP Caching

 Dữ liệu Cache gần người dùng hơn

 Improves Web performance, reduces load on server

 Cache control directives in HTTP header (no cache, age, etc.)

GET http://origin/

Client 1

Cache server Origin server

HTTP Client Authentication

 Cơ chế bảo mật đơn giản thông qua username/password

 Basic scheme: username:password base-64 encoded

echo -n “user:password" | openssl base64

echo "c2NvdHQ6dGlnZXI=" | openssl base64 -d

HTTP/1.1 401 Unauthorized WWW-Authenticate: Basic realm="secret"

GET /private/ HTTP/1.1 Authorized: Basic SHY3GH7D3SH==

Username: joe Password: ********

Cookies

 Cho phép Web servers lưu

trạng thái của Client

 Dùng cặp khóa – giá trị

 Thường dùng quản lý các

phiên giao dịch session

 Cookie có thể truy xuất bởi

một site/domain

 Server có thể định thời gian

hết hạn

 Client có thể từ chối cookie,

giới hạn kích thước, thời

gian…

Client

Origin server

GET http://origin/

200 OK Set-Cookie: ABC=XYZ

GET http://origin/

Cookie: ABC=XYZ

200 OK

Mô hình: Model View Controller

 Mô hình được sử dụng trong Smalltalk

(1979)

 Tách riêng giữa tầng dữ liệu và hiển thị

 Dễ dàng phát triển

Mô hình: Model View Controller

 Model

 Tượng trưng cho dữ liệu trong phần mềm

ứng dụng

 View

 Tầm nhìn hay khung nhìn (view) bao gồm các

thành phần của giao diện người dùng

 Controller

 Quản lý sự trao đổi dữ liệu

 C ác nguyên tắc nghề nghiệp trong các thao

tác liên quan đến mô hình

Model-View-Controller 2 cho

Web

 Sự thích ứng của MVC đối với Web

 Kết nối không bền vững giữa client và server

 Thông báo những thay đổi

 Truy vấn lại server để phát hiện những thay đổi

Client/Server (2-Layer)

Business Layer

Data Layer

N-Layer Architectures

Vì sao dùng N-Layer Architecture?

JSP-Model-1 Architecture

Công nghệ Web

2

Nội dung

 Giới thiệu về công nghệ Web

 Công nghệ trên Server

 Công nghệ trên Client (browser)

Giới thiệu công nghệ Web

3

Client-side

Programming

Clients (browsers)

HTTP for transport

URL/URI for addressing

HTML

for display

WML

XML dialects XSLT (Transformations)

FML

XHTML

Server Side Programming

(X)HTML XML

HTTP Server

Từ Web 1.0 đến Web 3.0

 Web 1.0

 Trang chứa các liên kết

 Nội dung: text, images, media

 Web 2.0

 Mục đích Web2.0 hướng tới cộng đồng, xã

hội: YouTube, Wikipedia

 Công nghệ: Ajax, Adobe Flash, XHTML,

SOA…

 Web 3.0

4

Web 2.0

6

Apache

 Apache (hay Apache HTTP server) là web server mã nguồn mở được sử dụng rộng rãi nhất thế giới

 Chạy trên các hệ điều hành: Windows,

Linux, Unix, FreeBSD, Solaris, …

 Các tính năng: chứng thực người dùng,

virtual hosting, hỗ trợ CGI, FCGI, SCGI,

WCGI, SSI, ISAPI, HTTPS, Ipv6, …

Nginx

 Nginx là phần mềm mã nguồn mở, ổn

định, cấu hình đơn giản và hiệu suất cao

 Chạy trên các hệ điều hành: Linux,

FreeBSD, Windows, Solaris, MacOS…

 Các tính năng: chứng thực người dùng,

hỗ trợ HTTPS, virtual hosting, hỗ trợ

FastGCI, hỗ trợ Ipv6…

Internet Information Services

(IIS)

 IIS do Microsoft phát triển, tích hợp cùng

hệ điều hành Windows IIS bao gồm nhiều dịch vụ như: dịch vụ Web Server, dịch vụ FTP Server

 IIS hỗ trợ chứng thực người dùng, virtual hosting, CGI, FCGI, ISAPI, php, hỗ trợ

Ipv6, …

Apache Tomcat

phát triển bởi Apache Software Foundation

Lighttpd

chiếm ít tài nguyên

OS,…

nó chạy được các ứng dụng web được viết bằng bất cứ ngôn ngữ nào

HTTPS, virtual hosting, hỗ trợ Ipv6,…

Application Programming Interface)

Database

14

Tương tác ở phía Client

17

Công nghệ dùng trên Client

Code sẽ được thực hiện

bên ngoài trình duyệt (a

Java vs Applets vs Java Plug-in

19

 Java Plug-in extends the browser

 Applets or Java Beans run under JRE

Java bytecode

Server

JVM (browser)

Java bytecode

Client

Network File

system

 An Applet is a class that

extends Applet , executed in a browser

JRE

System

PHP

Giới thiệu về PHP

 PHP (Hypertext Preprocessor)

 Là ngôn ngữ script chạy trên server (Server

Scripting)

 Là mã nguồn mở, chạy được trên nhiều

platforms (Unix, Linux, Windows)

 PHP scripts:

• chứa text, thẻ HTML, script

2

Giới thiệu về PHP (tt)

 Lịch sử phát triển

nhập sử dụng giao thức HTTP của Unix

 PHP 2 (1995): script server, hỗ trợ CSDL, upload file,

khai báo biến, mảng, hàm đệ quy, câu điều kiện, biểu

HĐT, XML, SOAPcho Web Services, SQLite

3

IIS, Caudium, Netscape Enterprise Server

Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC, etc

 Dễ học và phát triển nhanh các ứng dụng trên

Web

 Được sử dụng rộng rãi trong môi trường phát triển ứng dụng Web

4

Giới thiệu về PHP (tt)

5

Giới thiệu về PHP (tt)

 Cơ chế hoạt động của WebServer

7

PHP nâng cao

HTTP header

HTTP header

 Http header là các thông tin điều khiển

nằm trong các http request, http response

 Chứa các chỉ thị báo cho trình

duyệt/server

 Chuyển qua trang khác

 Không hiển thị file php

 Không lưu vào cache

10

HTTP header

 Xem http header bằng FireBug

 Mở firefox, nhấn F12 để bật FireBug

 Gõ địa chỉ 1 trang web

 Xem header trong cửa sổ FireBug

11

HTTP header

 Xem http header bằng LiveHTTPHeaders (tiện ích mở rộng của Firefox)

http://livehttpheaders.mozdev.org

Request header

Header Description

Host Địa chỉ server đang truy cập

User-Agent Chứa thông tin về browser và HĐH

Accept Các kiểu dữ liệu mà browser chấp nhận

Accept-Language Chỉ ra những ngôn ngữ để server đáp ứng

Accept-Encoding Chỉ ra các kiểu file compress để server nén dữ

liệu Accept-Charset Những character set mà browser chấp nhận

Connection Chỉ ra các trạng thái kết nối

Cookie Danh sách các biến cookie đã được tạo trước

đây Referer Địa chỉ của trang web mà từ đó link đến trang

hiện tại

………

13

Reponse header

Header Description

Cache-Control Thông báo cho browser có cache dữ liệu hay

không Content-Type Chỉ định kiểu MIME của tài liệu

Content-Language Ngôn ngữ trong nội dung trả về

Expires Chỉ định thời gian nội dung trả về sẽ hết hạn Last-Modified Thời điểm tài liệu cập nhật lần gần đây nhất

Content-Encoding Kiểu nén dữ liệu gửi về browser

Server Tên của server

Content-Length Kích thước của tài liệu

Location Chuyển hướng sang trang khác

Set-cookie Tập các biến cookie mà server gửi đến browser

14

HTTP status code

thành công

15

Ứng dụng của HTTP Header

 Chuyển hướng (redirection):

 VD:

Nếu browser là IE thì chuyển đến trang welcome.html,

ngược lại chuyển đến welcome1.html

Ứng dụng của HTTP Header

 Content-type: dùng để báo cho browser kiểu

dữ liệu mà webserver đang trả về cho

browser

 Cú pháp:

header(“content-type:MimeType”)

18

// Chuẩn bị xuất 1 file pdf

header( 'Content-type: application/pdf' );

application/vnd.ms-excel File excel

Cookie

COOKIE

 Dùng để lưu thông tin của người dùng

Cookie được lưu ở máy client, browser

quản lý

 Mỗi biến cookie có 1 thời gian quá hạn

Vượt qua thời điểm đó, browser sẽ xóa

biến cookie

 Mỗi lần thực hiện request 1 trang, browser

sẽ gửi lại các biến cookie chưa hết hạn

 Được đặt trước thẻ <html>

2

COOKIE

 setcookie.php

<?php

$value = "something from somewhere" ;

setcookie( "TestCookie" , $value , time() +

3600 ); /* hết hạn trong 1 giờ */

?>

 viewcookie.php

<?php

if(isset( $_COOKIE [ "TestCookie" ]==true))

echo $_COOKIE [ "TestCookie" ];

?>

4

COOKIE

setcookie( "cookie[three]" , "cookiethree" );

setcookie( "cookie[two]" , "cookietwo" );

setcookie( "cookie[one]" , "cookieone" );

// after the page reloads, print them out

if (isset( $_COOKIE [ 'cookie' ])){

foreach ( $_COOKIE [ 'cookie' ] as $name => $value ){

$name = htmlspecialchars ( $name );

$value = htmlspecialchars ( $value );

echo "$name : $value <br />\n"; }

}

?>

5

<input type ="password" name ="txtmatkhau" /><br/>

<input type ="checkbox" name ="chknho" />

Nhớ thông tin này <br/>

<input type ="submit" name ="btngui" value ="Gửi"/>

</form>

6

COOKIE – ví dụ

 xuly.php

<?php

if(isset( $_POST [ "chknho" ]) == true){

setcookie ( "ten" , $_POST [ "txtten" ],time()+ 3600 )

setcookie ( "ten" , $_POST [ "txtten" ],- 1 );

setcookie ( "matkhau" , $_POST [ "txtmatkhau" ],- 1 );

}

?>

7

Session

SESSION

 Session là đối tượng trên server, chứa

thông tin của từng user

 Mỗi user có vùng session riêng biệt

 $_SESSION là 1 dãy toàn cục có sẵn

trong php

9

$_SESSION [ "name" ]= "abc" ;

header( "Location: index.php" );

?>

11

Ứng dụng Session

 Làm thế nào để ngăn không cho người

dùng truy cập vào các trang web nếu chưa đăng nhập?

 Ý tưởng: dùng các biến Session để lưu

trạng thái đăng nhập của người dùng

 $_SESSION[“Login”] = 0/1: l ưu trạng thái

đăng nhập

 $_SESSION[ “Username”]: l ưu t ên đăng nhập

 $_SESSION[ “Authentication”]: l ưu l oại quyền đăng nhập

 …

12

Ứng dụng Session

 Tạo trang login.htm yêu cầu người dùng đăng nhập

 Tạo trang validateuser.php xử lí thông tin đăng nhập từ

 N ếu đúng thì dùng một biến Session để lưu trạng thái

login thành công lại

• Ví dụ $_SESSION["IsLogin“] = 1;

 Tạo trang logout.php là trang xử lý khi người dùng logout

 Reset trạng thái login là chưa đăng nhập

• Ví dụ unset($_SESSION[“IsLogin”]);

13

Tập tin, thư mục

Quản lý file & thư mục

 Hàm thao tác trên file

$mode)

gửi toàn bộ nội dung file đang mở cho browser

(binary)

gửi toàn bộ nội dung file đang mở cho browser (text)

đọc một khối dữ liệu dài tối đa length (binary)

int $length])

ghi nội dung của chuỗi ra file

15