Bài giảng lập trình web it15 Đại học mở hà nội

BÀI I: Mục tiêu: Trong bài này, Anh/Chị cần đạ - Nắm vững các kiến th - Nắm bắt được yêu c Nội dung: I. Tổng quan về Internet và Web - Mạng máy tính gồm 2 hay tiện truyền dẫn nhằm m - Người ta sử dụng h mạng máy tính. • Domain Name đư 1. Internet và WWW - Internet là mạng máy tính toàn c - Thông tin trên Internet th (web pages). Các trang web, đư - Các trang web được t 2. Phân loại Web - Web tĩnh: • Nội dung không thay đ cho ra kết quả gi • Muốn cập nhật thì ph không thích hợ xuyên. - Web động: • Một trang web đ từ phía người sử -learning Cơ hội học tập BÀI I: TỔNG QUAN ạt được những mục tiêu sau: n thức cơ bản về môn học. c yêu cầu của bài toán ví dụ của môn học Internet và Web m 2 hay nhiều máy tính kết nối với nhau bằ m mục đích chia sẻ tài nguyên, dữ liệu giữa các máy tính. ng hệ thống địa chỉ IP để xác định địa chỉ cho m Domain Name được sử dụng để ánh xạ tới các địa chỉ IP khó nh ng máy tính toàn cầu. Thông tin trên Internet thể hiện trong các trang thông tin gọi là các “trang web” (web pages). Các trang web, được liên kết và tổ chức trong các Websites. c tạo bởi các mã HTML.

- Internet là mạng máy tính toàn c

- Thông tin trên Internet th

(web pages) Các trang web, đư

- Các trang web được t

2 Phân loại Web

m 2 hay nhiều máy tính kết nối với nhau bằ

m mục đích chia sẻ tài nguyên, dữ liệu giữa các máy tính

ng hệ thống địa chỉ IP để xác định địa chỉ cho mDomain Name được sử dụng để ánh xạ tới các địa chỉ IP khó nh

ng máy tính toàn cầu

Thông tin trên Internet thể hiện trong các trang thông tin gọi là các “trang web” (web pages) Các trang web, được liên kết và tổ chức trong các Websites

c tạo bởi các mã HTML

i dung không thay đổi (người dùng nào, yêu cầu nào, thờ

giống nhau)

t thì phải sửa trong mã nguồn của trang web; t

ợp với các website có tần suất cập nhật thông tin thư

t trang web động có thể trả ra các nội dung khác nhau tùy vào yêu c

ử dụng

ằng các phương

a các máy tính cho mỗi nút trong

IP khó nhớ

i là các “trang web”

c trong các Websites

ời gian nào cũng

a trang web; tốn thời gian,

t thông tin thường

i dung khác nhau tùy vào yêu cầu

• Dữ liệu của các trang web đ

các hệ thống file hay Hcập nhật các dữ

a các trang web động được tổ chức quản lý phía server (b

ng file hay Hệ quản trị CSDL), việc cập nhật trang web chính là

ữ liệu này (thông qua các chức năng của chính trang web Web Server & Web Browser

t phần mềm đóng vai trò phục vụ trên máy ch

ng, nó được nạp vào bộ nhớ và xử lý các yêu cầu t

ầu đối với Web Server thường là về một tư li

- Sau khi nhận được yêu c

muốn là gì, Web Server s

đó sẽ trả lại cho khách hàng các thông tin đ

- Sau khi gửi các yêu c

đợi câu trả lời và các thông tin t

dưới dạng trang Web cho ngư

c yêu cầu nó phân tích xem thông tin hay tư li

eb Server sẽ được kích hoạt, mở và xử lý thông tin c

i cho khách hàng các thông tin để xử lý dưới dạng các mã HTML

Microsoft Internet Information Services (IIS)

i dùng một trình ứng dụng gọi là trình duy

i và gửi các yêu cầu tới máy chủ Web Server

i các yêu cầu thông tin từ máy trạm lên máy chủ, Web Browser s

i và các thông tin từ máy chủ truy vấn và hiển thị các thông tin đó

ng trang Web cho người sử dụng

WebBrowser:

Internet Explorer Mozila FireFox

u nó phân tích xem thông tin hay tư liệu khách hàng

lý thông tin cần thiết sau

ng các mã HTML

i là trình duyệt Web (Web Web Server

, Web Browser sẽ các thông tin đó

II Những thành phần tạo nên m

1 Lĩnh vực ứng dụng

- Thông tin điện tử

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

-

2 Giao diện người dù

- Giao diện người dùng c

ảnh và các tài nguyên đa phương ti

i dùng của một website gồm văn bản, màu sắc, âm thanh, hình

nh và các tài nguyên đa phương tiện khác nhằm truyền tải thông tin t

Các trang web chính là những tệp tin HTML được hiển thị bởi trình duy

u cách trình bày nội dung nội dung của trang web đư

ỗi website là một hệ thống nhằm giải quyết một bài toán nào

lớn, đòi hỏi tính tương tác cao

c, âm thanh, hình

i thông tin tới người

i trình duyệt

a trang web được thực

ỗi website là một hệ thống nhằm giải quyết một bài toán nào đó với số người dùng

Client: Giao diện, tương tác với người dùng

3 Xử lý tương tác phía Client

- Để xử lý tương tác phía Client, ta dùng các

ương tác phía Client

i dùng không chỉ đọc thông tin từ trang web mà còn cung c

web

n có những xử lý ngay từ phía client để

u

o ra các hiệu ứng tương tác với người dung ương tác phía Client, ta dùng các Ngôn ngữ kịch bản

trang web mà còn cung cấp thông tin,

4 Xử lý nghiệp vụ phía Server

- Dữ liệu từ client đượ

• Lưu trữ thông tin

• Tính toán

• Xử lý theo các qui trình nghi

• …

- Để xử lý nghiệp vụ

III Ví dụ của môn học

1 Phát biểu bài toán

- Website Bán hàng tr

• Phần lớn các lbán, đặt mua, phát tri

• Một cửa hàng mucủa mình theo tvới những đặhiểu và đi đếhàng hóa sẽ đư

• Một người mua có thmặt hàng

• Thông tin vềthực tế tại nơi bán (cmại, thông tin tham khwebsite

• Tình trạng củngười bán và ngư

• Hoạt động kinh doanh ctrên website này

phía Server

ợc gửi đến website trên server để xử lý:

thông tin

lý theo các qui trình nghiệp vụ của bài toán

phía server, ta cần xây dựng các trang web đ

Website Bán hàng trực tuyến:

n các loại hàng hóa hiện nay đều có thể triển khai qu

t mua, phát triển kinh doanh trên Internet

a hàng muốn bán hàng trên Internet có thể giới thi

a mình theo từng loại, trong mỗi loại sẽ có các hàng hóa khác nhau

ặc tính khác nhau được mô tả sao cho ngừ

ến quyết định đặt mua Khi người dùng đặt mua và đđược người bán chuyển tới người mua theo th

i mua có thể đặt mua số lượng nhiều về một ho

ề hàng hóa được cập nhật trên website phù hợ

i nơi bán (còn hàng/hết hàng / hàng hóa nào bán ch

i, thông tin tham khảo … ) tùy theo yêu cầu của từng đơn v

ủa từng phiếu mua hàng sau khi đăng kí phả

i bán và người mua theo dõi và quản lý

ng kinh doanh của cửa hàng cũng có thể được thtrên website này

i mua theo thỏa thuận

t hoặc nhiều loại

2 Giao diện trang webn trang web

Chúc Anh/Chị học tập t

1 Bài giảng Lập trình Web,

2 ASP.NET 2.0 Website Programming: Problem

TÀI LIỆU THAM KHẢO

p trình Web, Nhóm tác giả, Khoa CNTT – Viện Đại họASP.NET 2.0 Website Programming: Problem - Design – Solution, Marco

p 7: Sổ tay Kỹ thuật Visual C#), Dương Quang ThiMinh

Learning C#, Jessie Liberty, O’Reilly, 2002

ọc Mở Hà Nội Solution, Marco

t Visual C#), Dương Quang Thiện, NXB

BÀI 7: ĐIỀU KHIỂN KẾT GÁN DỮ LIỆU CỦA ASP.NET

Mục tiêu:

- Hiểu được đặc điểm của các điều khiển kết gán dữ liệu

- Nắm vững được các điều khiển kết gán:

- Dữ liệu được các điều khiển kết gán thể hiện ra trang web trong những dạng thường dùng như dạng bảng (hàng x cột), dạng danh sách, trong các thành phần như listbox, combobox mà người lập trình không cần mất nhiều công sức để trình bày

2 Các bước kết gán dữ liệu

- Cách sử dụng:

o Bước 1: Thiết kế cách hiển thị cho điều khiển

o Bước 2: Lấy dữ liệu ra DataTable/DataSet/DataReader/ …

o Bước 3: Kết gán dữ liệu

 <Ctrl>.DataSource=<Đối tượng chứa dữ liệu>;

 <Ctrl>.DataBind();

- Cách khác (chú ý: không nên lạm dụng)

o Bước 1: Thiết kế cách hiển thị dl cho điều khiển

o Bước 2: Kết nối <Ctrl>.DataSourceID với 1 <DataSource Control> (với các tính chất phù hợp)

3 Các điều khiển kết gán dữ liệu

3.1 GridView

- Hiển thị dữ liệu dưới dạng bảng

- Cho phép sắp xếp theo cột, phân trang, sửa & xóa theo bản ghi

- GridView là một sự thay thế cho điều khiển DataGrid của các phiên bản ASP.NET trước đây

Cơ sở dữ liệu

Thông số kết nối

- Biểu thức kết gán (BindingExpression): trong các Template của TemplateField, ta

có thể sử dụng các biểu thức kết gán dữ liệu như sau:

o <%# DataBinder.Eval(Container.DataItem, “….”) %>

o <%# Eval(“…”) %>

o <%# Bind(“…”) %>

o <%# MyFunction (….) %>

VD: GridView với các cột hiển thị được chỉ định

c Xử lý sự kiện từ 1 Server Control trong GridView

- Trong ItemTemplate của TemplateField, đặt ServerControl cần thiết (VD: Button)

- Thiết lập các thuộc tính của Server Control đó (VD: CommandArgument,

CommandName,…)

- Xử lý sự kiện RowCommand của GridView

Ví dụ: Xoá bản ghi qua GridView

d Sắp xếp dữ liệu trên GridView

- GridView:

o AllowSorting=true

o Đặt SortExpression ở cột cho phép sắp xếp

- Xử lý sự kiện Sorting của GridView

Ví dụ: Sắp xếp dữ liệu trên GridView

e Phân trang dữ liệu hiển thị trên GridView

 ItemCommand

 ItemDataBound

Ví dụ: Hiển thị Danh sách hàng hoá

Thiết kế DataList

Kết gán dữ liệu

Kết quả

Chúc Anh/Chị học tập tốt!

BÀI II: NGÔN NGỮ KỊCH BẢN

 Là những kịch bản lập trình được viết để thực thi bởi webserver

 Khi có yêu cầu đến một trang chứa serverside script, webserver sẽ tiến hành dịch, thực hiện và sau đó trả kết quả dạng HTML cho trình duyệt của người dùng

 Phụ thuộc vào mạng và webserver

3 Đưa ngôn ngữ kịch bản vào trang web

- <script language=“tên NNKB” [runat=“server”]>

……

</script>

 runat=“Server”  ServerScript

II Javascript

1 Đặc điểm

- Giống C, Java: phân biệt chữ hoa chữ thường

- Không có kiểu xác định khi khai báo biến

2.1 Khai báo biến

- Cú pháp: var <tên biến>[=giá trị đầu];

- Ví dụ:

var x=10, a=1.4;

var s=“Hello”, s2=‘World’;

2.2 Hằng số

- Number: viết trực tiếp (x=7; a=1.4)

- Xâu: nằm trong 2 dấu “….” hoặc ‘….’, có sử dụng \ cho kí tự đặc biệt

Vd: var s=“Hello world \n I’m JavaScript”;

2.3 Chuyển đổi kiểu dữ liệu

- isNaN(x): cho biết x là số (false) hay không (true)

- parseInt(x): chuyển x về kiểu số nguyên

- parseFloat(x): chuyển x về kiểu số thực

- Toán tử:

o +, -, *, /, %

o >, >=, <, <=, ==, !=

o &&, ||, !

else{

//khối lệnh 2 }

- (toán tử liên quan: && (điều kiện AND), || (điều kiện OR), ! (NOT))

switch(<biểu thức>){

case <gtr1>:

//xử lý 1 break;

case <gtr2>:

//xử lý 2 break;

…

[default:

//xử lý ] }

2.5 Vòng lặp

for (<biến đếm>=<gtrị đầu>;<đk lặp>;

<bthức tăng/giảm>){

//khối lệnh }

do{

……

}while(<đk lặp>); | until (<đk dừng>);

2.6 Chương trình con

function <tên CT con>([ds đối]){

//nội dung CT con [return [giá trị trả về] ;]

}

 [c]

void myFunction() {

\\

} int myFunc(int a, int b) {

 function xinchao (name){

alert (“Hello ” + name);

}

 function xinchao(name){

if (name==“”) return;

alert(“Hello ” + name);

}

3 Các hàm hỗ trợ

3.1 Alert (message)

 Alert (message): hiển thị hộp thông báo

3.2 Bool confirm (message)

 Bool confirm (message): hiển thị hộp thoại hỏi, trả lời OK/Cancel

3.3 String prompt (message, default)

 String prompt (message, default): hiển thị hộp thoại cho phép nhập liệu

TÀI LIỆU THAM KHẢO

1 Bài giảng Lập trình Web, Nhóm tác giả, Khoa CNTT – Viện Đại học Mở Hà Nội

2 ASP.NET 2.0 Website Programming: Problem - Design – Solution, Marco Bellinaso, Wrox, 2006

3 .NET toàn tập (tập 7: Sổ tay Kỹ thuật Visual C#), Dương Quang Thiện, NXB Tổng hợp Tp Hồ Chí Minh

4 Learning C#, Jessie Liberty, O’Reilly, 2002

BÀI III: DOCUMENT OBJECT MODEL

(DOM)

Mục tiêu:

Trong bài này, Anh/Chị cần đạt được những mục tiêu sau:

 Nắm vững các tính chất của DOM

 Biết cách xử lý sự kiện ở Client

 Sử dụng được DOM để truy xuất, thay đổi cấu trúc văn bản HTML

 2 loại nút: TAG_NODE, TEXT_NODE

4 Các phương thức của DOM

5.2 Truy xuất và thay đổi cấu trúc văn bản

5.3 Truy xuất hàng loạt đối tượng cùng loại

6 Các đối tượng DOM trên trình duyệt

6.1 window: Đại diện cho cửa sổ trình duyệt

 Đối tượng con

• setTimeout(), clearTimeout()

và các phương thức của DOM

6.3 event: Cung cấp thông tin về các sự kiện xảy ra trên trình duyệt

 Thuộc tính:

• keyCode | which, charCode

• altKey, ctrlKey, shiftKey

o onreset

o onload

o onunload

Xử lý sự kiện trên Client

 Ý nghĩa: để đáp ứng(/tương tác) với những tác động từ phía người dùng

 Cách thực hiện

o B1: Khai báo hàm xử lý bằng ngôn ngữ kịch bản

 Nếu hàm trả về false hoặc gán event.returnValue=false thì sự kiện sẽ bị huỷ

o B2: Đăng ký hàm đã khai báo cho sự kiện cần xử lý

<tag ….TênSựKiện=“return HamXuly()”>….</tag>

Ví dụ: Xử lý sự kiện

Ví dụ: Nổi bọt sự kiện

Ví dụ: Bắt lỗi Form

Chúc Anh/Chị học tập tốt!

BÀI IV: ASP.NET cơ bản

Mục tiêu:

Trong bài này, Anh/Chị cần đạt được những mục tiêu sau:

- Hiểu được đặc điểm, cấu trúc trang và cơ chế xử lý của ASP.NET

- Biết được các loại tệp trong website ASP.NET

- Biết sử dụng các đối tượng nội tại của ASP.NET

Nội dung:

I Giới thiệu

1 Đặc điểm của ASP.NET

- ASP.NET là công nghệ lập trình web động thế hệ mới của Microsoft

 Có thể được viết bằng nhiều ngôn ngữ khác nhau (C++, C#, VB.NET … ) có định kiểu và được dịch trước khi sử dụng

 Có chế độ code behind cho phép tách rời mã trình bày (HTML) và mã lệnh xử lý (Code)

 Loại bỏ rất nhiều công đoạn viết mã mà người lập trình Web cần làm bằng các điều khiển phía server

 Cấu hình và phân phối đơn giản

 Vùng đệm (cache) trên server rất linh hoạt

 Hỗ trợ Web Services cho mô hình SOA

- ASP.NET chạy trên web server IIS có cài đặt NET Framework

 cài đặt IIS:

http://www.huudungle.net/uploads/LaptrinhWeb/Windows%202000XP_iisInstalling.pdf

 Cài đặt NET Framework cho IIS

 run: cmd

 vào đường dẫn C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727

 chạy file: aspnet_regiis -i

2 Cấu trúc trang ASP.NET cơ bản

a Tạo 1 trang aspx trong VS.NET

- Right click vào website trong Solution Explorer

- Chọn Add new Item

 Chọn Web Form, Đặt tên file, chọn Language  Add

Mã trang aspx

Phân biệt Code Inline và Code Behind

Chỉ thị @ Page

Phần chứa mã các điều khiển

Mã lệnh trang CodeBehind

3 Cơ chế xử lý trang ASP.NET

 Page_Init: Một trang ASP.NET luôn có sự kiện Page_Init dùng để khởi gán các giá trị khi thiết kế cho các điều khiển trên trang

 Page_Load: Sự kiện Page_Load luôn được gọi đầu tiên (ngay sau Page_Init) mỗi khi trang ASP.NET được yêu cầu từ phía client

 Control’s Event: Các sự kiện phát sinh bởi các điều khiển trên trang ASP.NET

sẽ được gọi sau Page_Load

 Page_Unload: Sự kiện này được gọi sau cùng sau khi các yêu cầu trên trang

đã được thực hiện và trang được giải phỏng khỏi bộ nhớ

4 Các loại tệp trong Website ASP.NET

Tệp tin Global.asa

• Tệp Global.asa là một tệp tùy chọn, dùng để chứa các định nghĩa cho các đối tượng, các biến và phương thức có thể truy xuất bởi mọi trang trong 1 ứng dụng ASP

• Tệp Global.asa phải lưu ở thư mục gốc của ứng dụng ASP, mỗi ứng dụng ASP chỉ có thể có một tệp Global.asa duy nhất

• Một tệp Global.asa chỉ chứa các thành phần sau:

• Các sự kiện của Application, Session

• Các khai báo <object> dùng chung

• Khai báo thư viện kiểu

• Các chỉ thị #Include

Một tệp Global.asa

<script language="vbscript" runat="server">

sub Application_OnStart

‘ some code end sub

sub Application_OnEnd

''''some code end sub

sub Session_OnStart

''''some code end sub

sub Session_OnEnd

''''some code end sub

</script>

II Đối tượng nội tại của ASP.NET

 Các đối tượng Response, Request, Server, Session, Application là những đối tượng tự động được tạo ra trong mỗi ứng dụng ASP.NET; ta có thể dùng trực tiếp mà không cần phải khai báo

 Chúng cung cấp các tính năng để trao đổi thông tin giữa server và client, tương tác với webserver, lưu trữ thông tin phía server với phạm vi truy xuất lớn hơn

 Trong ASP cũng có những đối tượng trùng tên với các đối tượng trên và chúng cũng có những tính năng tương tự

1 Response

 Được sử dụng để điều khiển việc trả thông tin từ server về client

 Là 1 thể hiện của lớp System.Web.HttpResponse

Và Là 1 đối tượng thuộc tính của System.Web.HttpContext.Current

1.1 Thuộc tính

 Buffer: true|false

qui định|cho biết dữ liệu trả ra có được ghi vào vùng đệm trên server trước hay không

 CacheControl: “public”|”private”

có cho phép dữ liệu của trang web được lưu trữ tạm (cache) ở các proxyServer hay không

 ContentType: giá trị MIME qui định kiểu của nội dung trang web (vd:

“image/bmp”, “text/css”, “text/javascript”)

o Cookies chứa những thông tin được website gửi xuống client

o Thông tin trong Cookies không được hiển thị trên trình duyệt nhưng được trình duyệt lưu trữ vào máy client một khoảng thời gian (tùy theo thiết lập của trình duyệt có cho phép không)

o Nếu muốn gửi Cookies xuống client, ta sử dụng tập hợp Cookies của Response

2.3 Phương thức

 Clear(): xóa nội dung trong dòng dữ liệu hiện thời của Response

 End(): ngừng xử lý yêu cầu hiện thời và gửi kết quả hiện có ngay ra

client

 Flush(): gửi dữ liệu hiện thời trong Buffer ra client

 Redirect(url): yêu cầu trình duyệt chuyển đến trang được chỉ định bởi

url

 Write(obj): ghi dữ liệu ra client

Ví dụ: