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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (9.49 MB, 86 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

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 cNội dung:

- 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 tồ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ợxun.

- Web động:

• Một trang web đtừ phía người sử

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 u cầu của bài tố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ó nhng máy tính tồ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

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

• Dữ liệu của các trang web đcác hệ thống file hay Hcập nhật các dữ

đó).

3. Web Server & Web Browser

3.1. Web Server - Web server là một ph

được khởi động, nó đưgửi đến. Các yêu cầtin nào đó.

a các trang web động được tổ chức quản lý phía server (bng 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 chng, 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

n lý phía server (bằng t trang web chính là a chính trang web

trên máy chủ (server). Khi u từ máy khách t tư liệu hoặc thông

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

- Sau khi nhận được u cmuốn là gì, Web Server s

đó sẽ trả lại cho khách hàng các thông tin đ- Một số webserver:

• Microsoft Internet Information Services (IIS)• Apache

• …..

3.2. Web Browser

- Người dùng cuối dùng mBrowser ) để kết nối và g- Sau khi gửi các yêu c

đợi câu trả lời và các thông tin tdưới dạng trang Web cho ngư- Một số WebBrowser:

• Internet Explorer• Mozila FireFox• Opera

• ….

c u cầu nó phân tích xem thơng tin hay tư lieb 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 duyi 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 si 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 đó

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

II. Những thành phần tạo nên m1. Lĩnh vực ứng dụng

- Thông tin điện tử - Thương mại điện tử- Chính phủ điện tử - Giải trí

- Và các bài tốn khác có th

o nên một Website ng

ử

Và các bài tốn khác có thể triển khai trên nền Web

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

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

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

3. Xử lý tương tác phía Client- Người dùng khơng ch

tương tác với trang web- Các trang web cần có nh

• Xử lý dữ liệu• Tạo ra các hi

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,

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

4. Xử lý nghiệp vụ phía Server- Dữ liệu từ client đượ

• Lưu trữ thơng tin• Tính tố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 tốn - Website Bán hàng tr• Phần lớn các l

bán, đặt mua, phát tri• Một cửa hàng mu

củ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 tố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 qut 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 chi, 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.

ng các trang web động

n khai quảng cáo, rao

i thiệu hàng hóa có các hàng hóa khác nhau ừơi dùng có thể t mua và đặt tiền, i mua theo thỏa thuận.

t hoặc nhiều loại ợp với tình hình t hàng / hàng hóa nào bán chạy / khuyến ng đơn vị quản lý

ải được cả 2 bên

c thống kê đầy đủ

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

2. Giao diện trang webn trang web

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

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 Bellinaso, Wrox, 2006

3. .NET toàn tập (tập 7: STổng hợp Tp Hồ Chí Minh

4. Learning C#, Jessie Liberty, O’Reilly, 2002p tốt!

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

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

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

- 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:

o GridView o DataList

<b>I. Giới thiệu 1. Đặc điểm </b>

- Điều khiển kết gán dữ liệu (DataBound Controls) là những điều khiển có khả năng kết gán với nguồn dữ liệu để giúp việc hiển thị và cập nhật dữ liệu trong ứng dụng web trở nên dễ dàng hơ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.

- 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)

<b>3. Các điều khiển kết gán dữ liệu </b>

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

<i><b>3.1. GridView </b></i>

- 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

- <asp:GridView> …..

</asp:GridView> - Thuộc tính:

o AutoGenerateColumns o AllowSorting:

o DataSource / DataSourceID o DataKeyNames:

o DataKeys[rowIndex]: o SelectedIndex=-1|N o EditIndex=-1|N o AllowPaging:

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

o PageSize: o PageIndex o Columns: - Phương thức:

o DataBind()

<b>Ví dụ: GridView01.aspx </b>

Hiển thị dữ liệu lên GridView cơ bản

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

<b>Thông số kết nối </b>

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

<i>b. Các cột trong GridView </i>

- BoundField:

o DataField: DataFormatString: o HeaderText

o FooterText o SortExpression: - ButtonField:

o ButtonType:

Button | Image | Link o CommandArgument o CommandName o DataTextField. o Text

o ImageUrl - ImageField:

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

o DataImageUrlField

o DataImageUrlFormatString o AlternateText

o DataAlternateTextField o NullImageUrl

o NullDisplayText - HyperLinkField

o Text

o NavigateUrl o Target

o DataTextField

o DataNavigateUrlFields o DataTextFormatString

o DataNavigateUrlFormatString - CommandField

o ShowDeleteButton o ShowEditButton o ShowInsertButton o ShowSelectButton

o CancelText, DeleteText, InsertText, EditText, UpdateText, SelectText - TemplateField

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

o AlternatingItemTemplate o EditItemTemplate

o FooterTemplate o HeaderTemplate o InsertItemTemplate

- 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 (….) %>

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

<i>c. Xử lý sự kiện từ 1 Server Control trong GridView </i>

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

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

- 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

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

<i>d. Sắp xếp dữ liệu trên GridView </i>

- GridView:

o AllowSorting=true

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

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

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

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

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

<i>e. Phân trang dữ liệu hiển thị trên GridView </i>

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

o FooterTemplate o SeperatorTempate

- Thuộc tính

 DataKeyField

 DataSource / DataSourceID  RepeatColumns=0|N

 RepeatDirection:

 RepeatLayout= Table|Flow - Phương thức

 DataBind() - Sự kiện:

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

 ItemCommand  ItemDataBound

<b>Thiết kế DataList </b>

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

Kết quả

<i><b> Chúc Anh/Chị học tập tốt! </b></i>

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

<b>BÀI II: NGÔN NGỮ KỊCH BẢN </b>

 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.

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

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

</script>

 runat=“Server”  ServerScript

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

<Head>

<Script language=“javascript”> function xinchao(){

alert(‘Hello, I am a script’); }

</Script> </Head>

<Body>

<B> Day la vi du Script</B> <script language=“JavaScript”>

xinchao(); </Script>

</Body> </Html>

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

<b>II. Javascript 1. Đặc điểm </b>

- 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

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

var x=10, a=1.4;

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

- 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”;

<b>2.3. Chuyển đổi kiểu dữ liệu </b>

- 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

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

o (đk)?ValueIfTrue:ValueIfFalse;

<b>2.4. Rẽ nhánh </b>

if (<bt điều kiện>){ //khối lệnh 1 }

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ý ] }

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

for (<biến đếm>=<gtrị đầu>;<đk lặp>; <bthức tăng/giảm>){

//khối lệnh }

alert(i); }

</script>

while (<đk lặp>){ //khối lệnh }

var i=1; while (i<10){

if (i%2==1) alert(i); i++;//i=i+1 }

do{ ……

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

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

<b>2.6. Chương trình con </b>

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) {

return a+b; }

 function xinchao(){ alert(“Hello”); }

 function xinchao (name){ alert (“Hello ” + name); }

 function xinchao(name){ if (name==“”) return;

</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">

alert(“Hello ” + name); }

<b>3. Các hàm hỗ trợ 3.1. Alert (message) </b>

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

<b>3.2. Bool confirm (message) </b>

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

<b>3.3. String prompt (message, default) </b>

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

</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30">

<b>4.1. Lớp String (xử lý xâu) </b>

- charAt(i)

- indexOf(c), lastIndexOf(c) - match(regex):

trả lại phần xâu thỏa mãn biểu thức regular expression

- substr(i, n):

- substring(start, stop): - toLowerCase(): - toUpperCase(): - split(s,n): - length

- Hằng số: PI, LN2 - abs(x)

- ceil(x) - floor(x) - round(x) - pow(x,y)

- sqrt(x) - random() - min(x) - max(x) - sin(x) - cos(x)

</div><span class="text_page_counter">Trang 31</span><div class="page_container" data-page="31">

- tan(x) - exp(x): E<sup>x</sup>

- Log(x): log<small>E</small>(x) - ….

- Date(): - getDate():

- getDay(): thứ trong tuần - getMonth()

- getFullYear() - getHours() - getMinutes()

- getSeconds() - setDate(n): - setMonth(M) - setYear(y) - setHours(h) - setMinutes(m) - setSeconds(s)

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

</div><span class="text_page_counter">Trang 32</span><div class="page_container" data-page="32">

<b>BÀI III: DOCUMENT OBJECT MODEL (DOM) </b>

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

 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

<head><title>DOM Structure</title></head> <body>

Hello!<br / >

I am <b>DOM</b> </body>

</html>

- Cây cấu trúc DOM tương ứng

</div><span class="text_page_counter">Trang 33</span><div class="page_container" data-page="33">

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

 Nút gốc tạo bởi thẻ <html>,

<b>NNKB truy cập bằng document.documentElement </b>

 Quan hệ giữa các nút:  parentNode:  childNodes[….]:

 firstChild ~ childNodes[0]:  lastChild:

 nextSiblings:  previousSiblings:

<b>3. Các thuộc tính của DOM </b>

 nodeType:

1: tagNode 3: textNode  nodeName

 innerHTML  innerText  data/nodeValue  parentNode

 childNodes[…]  firstChild  lastChild  nextSiblings  previousSiblings

<i>Ngoài ra, các nút thẻ cịn có các thuộc tính tương ứng với các </i>

</div><span class="text_page_counter">Trang 34</span><div class="page_container" data-page="34">

<b>4. Các phương thức của DOM </b>

 getElementById(id)

 getElementsByTagName(tag)  createElement(tag)

 createTextNode(text)  appendChild(obj)

 hasChildNodes():true|false

 removeChild(childObj)

 replaceChild(newChild, oldChild)  cloneNode(true|false)

 getAttribute(attribName)  setAttribute(attribName, value)  removeAttribute(attribName)

</div><span class="text_page_counter">Trang 35</span><div class="page_container" data-page="35">

<b>5.3. Truy xuất hàng loạt đối tượng cùng loại </b>

</div><span class="text_page_counter">Trang 36</span><div class="page_container" data-page="36">

<b>6. Các đối tượng DOM trên trình duyệt </b>

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

 Đối tượng con • document • history • location • event  Thuộc tính:

• frames[…] • closed

• defaultStatus, status • opener, self

 Phương thức

• setInterval(), clearInterval() • setTimeout(), clearTimeout() • blur(), focus() • open()

• print()

• resizeTo(), resizeBy() • moveTo(), moveBy()

<b>Ví dụ: setInterval </b>

<b>6.2. document: Đại diện cho trang web </b>

</div><span class="text_page_counter">Trang 37</span><div class="page_container" data-page="37">

 ThdocumentElementuộc tính:

• domain • referer • title • URL

• anchors[..], links[...]

• forms[..], images[..]  Phương thức

• open() • close()

• write(..), writeln(..)

<i>và các phương thức của DOM </i>

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

 Thuộc tính:

• keyCode | which, charCode

• altKey, ctrlKey, shiftKey

• button

• clientX, clientY

• screenX, screenY • type

• target |srcElement • returnValue  phương thức

• cancelBubble() | stopPropagation()

</div><span class="text_page_counter">Trang 38</span><div class="page_container" data-page="38">

o onreset o onload o onunload

<b>Xử lý sự kiện trên Client </b>

 Ý 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>

</div><span class="text_page_counter">Trang 39</span><div class="page_container" data-page="39">

</div><span class="text_page_counter">Trang 40</span><div class="page_container" data-page="40">

</div>