Giáo trình ASP.net (từ cơ bản đến nâng cao)

Chia sẻ cho các bạn giáo trình được sử dụng giảng dạy tại trường ĐHSPKT Hưng Yên22

Trang 1

MỤC LỤC

I Lý thuyết 5

1.1 Giới thiệu 5

1.2 Danh sách các phần tử HTML thường dùng 5

II Bài tập thực hành 7

1 Yêu cầu: 7

2 Hướng dẫn 7

3 Minh hoạ mẫu 8

4 Ghi chú 9

BÀI SỐ 2: Tạo trang web động với DHTML và JavaScript 10

1 Đưa câu lệnh javascript vào trang web 10

2 Đưa câu lệnh javascript vào từ một file riêng biệt 11

3 Truy cập các phần tử HTML bằng câu lệnh Javascript 12

4 Xây dựng hàm trong Javascript 13

5 Một số hàm thông dụng của Javascript 14

II Thực hành 14

1 Yêu cầu 14

2 Hướng dẫn 14

4 Ghi chú 17

BÀI 3: THAY ĐỔI NỘI DUNG TRANG WEB BẰNG CSS VÀ JS ĐỊNH DẠNG TRANG WEB VỚI CSS 17

1 Định dạng CSS ngay trong định nghĩa phần tử (Gọi là Inline) 17

2 Định dạng CSS thông qua lớp 18

1 Yêu cầu 20

2 Hướng dẫn 20

4 Ghi chú 24

BÀI 4 (Tiếp): THAY ĐỔI NỘI DUNG TRANG WEB BẰNG CSS VÀ JS ĐỊNH DẠNG TRANG WEB VỚI CSS 25

1 Tham chiếu đến một phần tử trong trang web 25

2 Tham chiếu đến một thuộc tính của phần tử 26

3 Thay đổi nội dung của một phần tử 26

1 Yêu cầu 27

2 Hướng dẫn 28

3 Minh Hoạ mẫu 28

4 Ghi chú 33

BÀI SỐ 5: ASP.NET và Web form 33

Trang 2

1 Mô hình lập trình phía máy chủ 33

2 Cơ chế xử lý file ASP.NET phía máy chủ 36

3 Một số ví dụ minh họa 38

4 Webform trong ASP.NET 41

5 Tìm hiểu cấu trúc trang ASP.NET 41

6 Code behind và viết code phía Server 44

7 HTML Server Controls và Web controls 44

1 Yêu cầu 46

2 Hướng dẫn 47

4 Ghi chú 52

BÀI 6: Các đối tượng trong ASP.NET 53

1 Request Object 53

2 Response Object 56

3 Server Object 57

4 Session Object 58

5 Application Object 58

1 Bài 1: Tạo một trang Login 59

2 Bài 2: Tạo một trang đếm số lượng người truy cập 63

BÀI 7: CÔNG NGHỆ ADO.NET 65

1 Giới thiệu chung 65

2 Kiến trúc của ADO.NET 66

3 Các lớp thao tác với CSDL: Connection, Command,… 67

II THỰC HÀNH 79

1 Tạo cơ sở dữ liệu 79

2 Nhập dữ liệu cho bảng 80

3 Hiển thị dữ liệu trong bảng lên trình duyệt 83

4 Cập nhật dữ liệu bằng DataSet và DataAdapter 84

BÀI 8: Tìm hiểu và ứng dụng cơ chế Data Binding 86

1 Giới thiệu DataBinding 86

2 Data Binding 86

3 Các điều khiển Data Source (Data source controls) 90

BÀI 9: Làm việc với GridView 102

1 Giới thiệu tổng quan 102

2 Tìm hiểu lớp GridView 102

3 Các tính năng hỗ trợ của GridView 106

Trang 3

4 Tạo các cột tùy biến HyperLink, BoundColunm… 110

5 Tạo và xử lý các cột Select, Edit, Delete, Update… 113

BÀI 10: Sử dụng Templates 125

1 Giới thiệu tổng quan 125

2 Các điều khiển hỗ trợ Templates 125

3 Repeater control, DataList control, GridView control 126

1 Bài 1: Hiển thị danh sách cán bộ 132

2 Bài 2: Bổ sung thêm trường vào bảng 134

3 Bài 3: Hiển thị danh sách cán bộ dạng chi tiết 135

4 Bài 4: Hiển thị danh sách người dùng dưới dạng Flow (tuyến tính) 136

Bài 5: Hiển thị thông tin kèm Hyperlink 139

Bài 6: Thực hiện phân trang 140

PHỤ LỤC 142

I ĐÓNG GÓI WEBSITE 142

II CÀI ĐẶT HỆ THỐNG IIS HỖ TRỢ ASP.NET WEBSITE 142

1 Cài đặt IIS 142

2 Cài đặt NET Framework 142

Trang 4

TRUNG TÂM HƯNG YÊN – APTECH

Địa chỉ : Tầng 2, Nhà A – Đại học SPKT Hưng Yên

Điện thoại : 0321-713.319; Fax: 0321-713.015

E-mail : aptech@utehy.edu.vn;

Website : http://www.aptech.utehy.vn

TÀI LIỆU KHÓA HỌC LẬP TRÌNH ASP.NET

Biên soạn:

- Nguyễn Minh Quý

- Lê Quang Lợi

HƯNG YÊN 7/2009

Trang 5

PHẦN I

Cơ bản về HTML, DHTML, JavaScript

BÀI SỐ 1: Tạo trang web với HTMLMục tiêu: Kết thúc bài học, sinh viên có thể

 Tạo được trang web tĩnh trên notepad/ HTML Editor

 Định dạng nội dung trang web bằng các phần tử HTML cơ bản

 Thao tác được với phần tử bảng (Table), <TR>, <TD>,

trình duyệt phải in đậm nội dung bên trong, v.v Mỗi cặp thẻ như vậy gọi là cặp

thẻ HTML (Hyper Text Markup Language)

Vì vậy, đối với mỗi lập trình viên web, trước khi muốn xây dựng ứng dụng webthực thụ thì không chỉ phải hiểu rất rõ những cặp thẻ HTML (ít nhất là những cặpthẻ cơ bản) mà còn phải biết cách Code (tạo) các cặp thẻ này

1.2 Danh sách các phần tử HTML thường dùng

Dưới đây là danh sách các phần tử HTML cơ bản và cách tạo ra tương ứng bằng cặpthẻ HTML

STT Phần tử Hình thù hiển thị trên trang web Cách tạo ra bằng thẻ HTML tương ứng

Input <input type="text" value="hello" name="txtMsg">

Button <input type="button" value="Yes" name="btnYes">

CheckBox <input type="checkBox" name="chkHTML" value="Checked"> Radio

button <input type="radio" value='Checked' name = 'optGioiTinh'>

List

<Select name="lstDSSV" Size="3">

<Option value="sv1"> Nguyễn Văn A </Option >

<Option value="sv2"> Nguyễn Văn B </Option >

<Option value="sv3"> Nguyễn Văn C </Option >

</Select>

Danh sách

(Combo

Box)

<Select name="lstDSSV" Size="1">

<Option value="sv1"> Nguyễn Văn A </Option >

<Option value="sv2"> Nguyễn Văn B </Option >

<Option value="sv3"> Nguyễn Văn C </Option >

</Select>

Nam CheckBox1

Yes

✘

Nguyn Vn A

Trang 6

phần tử div thì các phần tử khác cũng ẩn/hiện/di chuyển theo

<div>

TR Thẻ TR phải nằm trong một <Table> nào đó, không thể tạo riêng

TD Thẻ TD phải nằm trong một <TR> nào đó, không thể tạo riêng.

Chú ý: Thuộc tính đặt cho các phần tử được viết dưới dạng: <Tên thuộc tính>=<giá

trị> Phần <giá trị> được đặt trong cặp dấu nháy đơn hoặc cặp dấu nháy kép

Trang 7

II Bài tập thực hành

1 Yêu cầu:

Tạo một trang web để hiển thị nội dung như sau:

Giao diện trang web cần tạo

2 Hướng dẫn

Trang 8

- Vào trình soạn thảo web của Visual Studio 2008 và tạo dự án web, sau đó mở trang Default.aspx và viết các thẻ HTML.

thảo (hoặc tệp Default.aspx bên panel phải), sau đó chọ "View in Browser"

3 Minh hoạ mẫu

Default.aspx

<% @ Page Language ="C#" AutoEventWireup ="true" CodeFile ="Default.aspx.cs" Inherits ="_Default" %>

< html xmlns ="http://www.w3.org/1999/xhtml">

< head runat ="server">

< title > Bài thực hành số 1 - Hưng Yên Aptech </ title >

< form id ="form1" runat ="server">

Tên nhà cung cấp: < input type ="text" id ="txtNCC" size ="30"/> < br />

Người đại diện: < input type ="text" id ="txtContactName" />

Chức vụ: < input type ="text" id ="txtContactTitle" /> < br />

Địa chỉ Nhà CC: < input type ="text" id ="txtAddress" size ="50" /> < br />

Thành phố :

< select id ="lstCity" size ="1">

< option value ="null"> Chọn </ option >

< option value ="HN"> Hà nội </ option >

< option value ="HCMC"> TP Hồ Chí Minh </ option >

< option value ="ĐN"> Đà Nẵng </ option >

< option value ="HP"> Hải Phòng </ option >

< option value ="HY"> Hưng Yên </ option >

< option value ="HD"> Hải Dương </ option >

< option value ="QN"> Quảng Ninh </ option >

< option value ="OTHER"> Nơi khác </ option >

< select id ="lstCountry" size ="4">

< option value="VN" selected>Việt Nam </ option >

< option value ="LAO"> Lào </ option >

< option value ="CAMPUCHIA"> Campuchia </ option >

</ select >

< br />

Điện thoại:

< textarea rows ="3" cols ="20" id ="txtTelephone"> </ textarea >

Số Fax: < input type ="text" id ="txtFaxNumber" />

< br />

Trang 9

Địa chỉ website: < input type ="text" id ="txtHomepage" size ="50" />

< hr />

< input type ="reset" value ="Xoá (reset form)" />

< input type ="submit" value ="Thêm mới" />

 Để tạo hộp text có nhiều dòng, ta dùng thẻ <TextArea>

 Muốn thay đổi độ rộng của textbox, chỉ cần thay đổi thuộc tính "size"

 Có thể bố trí lại trang web trên cho đẹp hơn bằng cách đặt các phần tử trong các

ô của bảng (sử dụng thẻ Table)

Trang 10

BÀI SỐ 2:

Tạo trang web động với DHTML và JavaScript

Mục tiêu: Kết thúc bài thực này, người học có thể

 Truy xuất các đối tượng trình duyệt và các phần tử HTML bằng JavaScript

 Tạo trang web đăng ký có xử lý tính hợp lệ của dữ liệu nhập vào

Nội dung:

I Lý thuyết

Một trang web được tạo ở bài trước được gọi là một trang web tĩnh (Static webpage - tứclà: Nội dung của nó một khi đã được tạo ra thì luôn luôn hiển thị giống nhau đối với mọingười dùng ở mọi thời điểm) Tuy nhiên, ngày nay do nhu cầu của người dùng và của ứngdụng nên một trang web phải có khả năng động (Dynamic webpage - tức là: nội dung củatrang web có thể hiển thị, ứng xử khác nhau ứng với người sử dụng hoặc tình huống khácnhau ) Khả năng "động" đó có thể thực hiện ở bên phía trình duyệt hoặc phía server Nếutrang web cho phép thực hiện thay đổi (bằng ngôn ngữ kịch bản như VBScript,JavaScript ) bên phía trình duyệt, gọi là trang DHTML (Dynamic HTML); còn nếu trangweb thực hiện xử lý bên phía server (bằng ngôn ngữ C#, VB.NET, ASP, PHP, Perl, ) gọi

là các trang động phía server (Active Server Page) Trong tài liệu này chúng ta sẽ tìm hiểu

cả hai dạng web động ở trên, còn trong bài này ta sẽ tìm hiểu trang DHTML với Javascript(JS)

1 Đưa câu lệnh javascript vào trang web

1.1 Đưa câu lệnh javascript vào luồng xử lý ngay khi trang web được mở

Để đưa các câu lệnh Javascript vào trang web và yêu cầu trình duyệt thực thi ngay khi trangweb được mở, ta chỉ cần đặt các câu lệnh JS ngay trong các cặp thẻ <Script> </script>nhưng không hàm

Ví dụ: Hiển thị một lời chào và thông báo ngày hiện tại khi trang web được mở.

<html>

<body>

Trang 11

- Những câu lệnh JS nếu không nằm trong các hàm thì sẽ được thực hiện ngay khitrang web được mở.

1.2 Đưa câu lệnh javascript vào các sự kiện (event)

Như ở phần 1.1 thì các câu lệnh JS sẽ được thực thi ngay khi trang web được mở, tuy nhiên

có những lúc ta muốn nó chỉ được thực hiện khi một sự kiện nào đó xảy ra, như clickchuột, nhấn phím Trong trường hợp này đơn giản là ta đưa câu lệnh vào sự kiện tươngứng theo cú pháp:

<Tên sự kiện> = "Danh sách câu lệnh JS được cách nhau bởi dấu chấm phảy"

Ví dụ: Hiển thị lời chào và thông báo ngày hiện tại khi người dùng nhấn vào nút "Hello":

<html>

<body>

<form>

<input type ="button" value="Hello"

onclick="var d=new Date (); document.write ('Chào bạn !

<br> Hôm nay là:'+d.toDateString());"

2 Đưa câu lệnh javascript vào từ một file riêng biệt.

Trong các ứng dụng lớn, số hàm, câu lệnh JS cũng sẽ rất lớn, vì vậy nếu để các hàm nàyngay trong file HTML như ở trên sẽ khó bảo trì và khiến cho việc chia sẻ gặp khó khăn Đểkhắc phục hạn chế này, người ta thường đặt các hàm JS trong một tệp riêng, sau đó chỉ việcgọi các hàm này trong trang HTML

Ví dụ: Tạo một file chứa các hàm JS Cộng và trừ trong một file có tên là MyMath.js, sau

đó gọi các hàm này trong trang web có tên là TestJS.htm

Việc "nhúng" các trang *.JS vào trang html thông qua thuộc tính "src"

Trang 12

File TestJS.htm

<html>

<headrunat="server">

<title>Lession 02</title>

<script language="javascript" src="MyMath.js"></script>

3 Truy cập các phần tử HTML bằng câu lệnh Javascript

Trong JS, có thể truy xuất (đọc/ ghi) các biến hoặc các phần tử trên trang web (như button,textbox, select, checkbox, radio button, hoặc phần tử bất kỳ)

Việc truy xuất đến phần tử tuân theo cú pháp chung như sau:

+ Document.<tên form>.<Tên/hoặc ID phần tử thuộc form>, hoặc:

+ Document.forms[Chỉ số].<Tên/hoặc ID phần tử thuộc form>, hoặc:

+ Document.getElementById(<ID phần tử cần truy xuất>)

Khi đã truy xuất đến phần tử, ta có thể truy xuất đến các thuộc tính của nó để đọc/ ghi nhưsau:

Trang 13

Số hạng 1: <inputtype="text"id ="txtSH1" /><br />

Còn để truy xuất đến thuộc tính value (chứa nội dung của textbox), ta chỉ cần thêm thuộc

tính Value vào sau tham chiếu, cụ thể viết: document.form1.txtSH1.value

Ngoài ra có thể viết theo cách khác như sau:

Để biết danh sách các thuộc tính của phần tử tương ứng, có thể tra cứu trên Internet (ví dụ

4 Xây dựng hàm trong Javascript

Trong Javascript, có thể xây dựng các hàm giống như các ngôn ngữ lập trình khác Tuy nhiên có một số sự khác biệt, cụ thể:

- Hàm không có kiểu trả về

- Danh sách tham số không có kiểu

Ví dụ: Viết một hàm tính luỹ thừa của một số xy

< html >

< head runat ="server"> < title > Lession 02 </ title >

< script language ="javascript">

y=document.getElementById( "txtY" ).value ;

document.getElementById( "txtXMuY" ).value = LuyThua (x,y);

}

</ script >

</ head >

< body >

Trang 14

< form name ="form1" action ="Default.aspx" method ="post">

< h3 > Chương trình tính luỹ thừa </ h3 >

Cơ số: < input type ="text" id ="txtX" /> < br />

Số mũ: < input type ="text" id ="txtY" /> < br />

Kết quả (X < sup > Y </ sup > ): < input type ="text" id ="txtXMuY" />< br />

< input type ="button" onclick ="ThucHien();" value ="Tính" />

</ form >

</ body >

</ html >

5 Một số hàm thông dụng của Javascript

- Hàm write(<Biểu thức cần in ra màn hình>): Để in kết quả ra trang web

- Hàm alert(<Biểu thức>): Thông báo trong một hộp thoại riêng

- Hàm prompt(<Biểu thức>): Để yêu cầu nhập thông tin từ người dùng

- Hàm confirm(<thông báo>): Yêu cầu người dùng xác nhận

- Hàm open(<URL>): để mở một trang web

- Hàm xử lý toán học: như Sin, cos, abs, pow, nằm trong đối tượng Math

- Hàm xử lý xâu: SubStr, Length, toLower có sẵn đối với mỗi xâu

- Hàm chuyển xâu sang số nguyên, thực: pareInt(<Xâu>); pareFloat(<Xâu>)

- Hàm tính giá trị của một biểu thức: eval(<Xâu chứa biểu thức>).

II Thực hành

1 Yêu cầu

Sắp xếp lại trang web trong bài thực hành 1 dưới dạng bảng sau đó viết thủ tục xử lý sự kiện click của nút submit , theo yêu cầu sau đây:

hiện submit

Dữ liệu nhập vào được gọi là không hợp lệ nếu gặp một trong các trường hợp sau:

2.1 Để huỷ một sự kiện của một phần tử bất kỳ, chỉ cần thêm câu lệnh "return false;"

trong phần câu lệnh xử lý sự kiện tương ứng

2.2 Sử dụng các hàm kiểm tra số IsNaN() (true = không phải là số, false=đúng là số)

< head id ="Head1" runat ="server">

<title>Bài thực hành số 2 - Hưng Yên Aptech</title>

Trang 15

< script language ="javascript" type ="text/javascript">

< td > Người đại diện: </ td >

< td >< input type ="text" id ="txtContactName" />

Chức vụ: < input type ="text" id ="txtContactTitle" />

< td >< select id ="lstCity" size ="1">

Trang 16

< option value ="VN" selected > Việt Nam </ option >

< option value ="LAO" Lào </ option >

< td >< input type ="text" id ="txtTelephone" />

Số Fax: < input type ="text" id ="txtFaxNumber" />

< input type ="submit" value ="Thêm mới" onclick ="return KiemTraDuLieu();" />

Trang 17

THAY ĐỔI NỘI DUNG TRANG WEB BẰNG CSS VÀ JS

ĐỊNH DẠNG TRANG WEB VỚI CSS

Mục tiêu sau khi kết thúc bài học

 Trình bày được cách định nghĩa CSS kiểu dòng và lớp

Có nhiều cách định kiểu cho phần tử web bằng CSS, tuy nhiên thực tế hay sử dụng cáchđịnh dạng sau đây:

1 Định dạng CSS ngay trong định nghĩa phần tử (Gọi là Inline)

Với cách này, khi muốn định dạng cho một phần tử/ thẻ bất kỳ nào đó người ta định nghĩaCSS ngay trong phần tử/ thẻ đó

Ví dụ1: Định nghĩa nội dung thẻ H2 có màu chữ đỏ, font chữ nghiêng như sau:

Trang 18

<h2style="color:Red; font-style:italic">Màu đỏ, chữ nghiêng</h2>

Ví dụ2: Định nghĩa nút nhấn "Yes" có nền đỏ, cỡ chữ 16pt như sau:

<inputtype="button"style="background-color:Red; font-size:16pt"value="Yes"/>

Chú ý:

dấu hai chấm

trong bảng (bản mềm kèm khoá học) hoặc vào tìm kiếm trên internet:

http://www.javascriptkit.com/dhtmltutors/cssreference.shtml

mất thời gian bảo trì Thường được sử dụng cho những phần tử có định dạng riêng

2 Định dạng CSS thông qua lớp

Cách thứ hai linh hoạt hơn và thường áp dụng cho các trang web lớn, đó là người ta địnhnghĩa sẵn một số CSS gọi là lớp (class), sau đó có thể áp dụng lớp này cho các phần tửmong muốn Phần định nghĩa CSS này được đặt trong cặp thẻ <HEAD> </HEAD>

<Tên_thẻ class = <Tên_Lớp> />

Ví dụ: Định nghĩa 2 lớp MỤC_LỚN và MỤC_NHỎ, sau đó áp dụng để định dạng nội

dung mục lục của một cuốn tài liệu

Trang 19

< span class ="MỤC_LỚN"> Bài 1: Tạo trang web tĩnh với HTML </ span > < br />

< span class = "MỤC_NHỎ"> 1.1 Lý thuyết </ span > < br />

< span class = "MỤC_NHỎ"> 1.2 Thực hành </ span > < br />< br />

< span class ="MỤC_LỚN"> Bài 2: Sử dụng JavaScript </ span >< br />

< span class = "MỤC_NHỎ"> 2.2 Thực hành </ span > < br />< br />

< span class ="MỤC_LỚN"> Bài 3: Tạo trang web tĩnh với CSS & JS </ span >< br />

< span class = "MỤC_NHỎ"> 3.2 Thực hành </ span >

đó, ta chỉ cần khai báo như sau trong phần Head:

< link type ="text/css" rel ="Stylesheet" href ="xyz.css" />

Trang 20

*Chú ý: Nội dung trang css chỉ chứa định nghĩa các lớp, không có thẻ kiểu như <style >

II Thực hành

1 Yêu cầu

Viết lại trang nhập thông tin nhà cung cấp ở các bài học trước nhưng sử dụng CSS để định nghĩa lại các phần tử

Kết quả sau cùng cần đạt tới ít nhất phải như sau:

Giao diện kết quả

Trang 21

3 Minh hoạ mẫu

border-right : solid 1px gray ;

border-bottom : solid 1px gray ;

< td style =" background-color : Purple ; color : White ; text-align : center" colspan ="2">

< span style =" font-size : 18pt ; width : 600px"> NHẬP THÔNG TIN NHÀ CC </ span >

Trang 22

< select id ="lstCity" size ="1">

</ select >

Vùng: < input type ="text" id ="txtRegion" style =" width : 150px" />

</ td >

Trang 23

< input type ="text" id ="txtTelephone" style =" width : 150px" />

Số Fax: < input type ="text" id ="txtFaxNumber" style =" width : 150px" />

< td colspan ="2" style =" text-align : center">

< input type ="submit" value ="Thêm mới" />

< td colspan ="4" style =" background-color : Purple ; color : White ; text-align : center">

< span style =" font-size : 18pt"> Danh sách nhà cung cấp hiện có </ span >

</ td >

</ tr >

< tr >

Trang 24

< th class ="TiêuĐềNCC"> Mã NCC </ th >

< th class ="TiêuĐềNCC"> Tên NCC </ th >

< th class ="TiêuĐềNCC"> Địa chỉ </ th >

< th class ="TiêuĐềNCC"> Homepage </ th >

</ tr >

< tr >

< td style =" text-align : center ; border-right : solid 1px gray"> 1 </ td >

< td class ="CạnhPhải"> Công ty FPT </ td >

< td class ="CạnhPhải"> Láng Hạ - Ba Đình </ td >

< td class ="CạnhPhải">< a href ="http://www.fpt.vn"> www.fpt.vn </ a ></ td >

</ tr >

< tr >

< td class ="CạnhPhải"> Công ty CMC </ td >

< td class ="CạnhPhải"> Hàn Thuyên - Hai Bà Trưng </ td >

< td class ="CạnhPhải">< a href ="http://www.cmc.vn"> www.cmc.vn </ a ></ td >

</ tr >

< tr >

< td class ="CạnhPhải"> Công ty Trần Anh </ td >

< td class ="CạnhPhải"> Giảng võ - Ba Đình </ td >

< td class ="CạnhPhải">< a href ="http://www.trananh.vn"> www.trananh.vn </ a ></ td >

<Tham chiếu đến phần tử Select>.options[Chỉ số của mục].text để lấy

phần Text (phần hiển thị) hoặc viết: <Tham chiếu đến phần tử

Select>.options[Chỉ số của mục].value để lấy phần value.

tính A nào đó thì các thẻ con cũng có đặc tính A Ví dụ: nếu ta viết

<div style="color:blue"> <h2> Màu gì? </h2> <h3>Màu xanh </h3> </div> thì tất cáccác nội dung của thẻ h2 và h3 đều có màu xanh (Trừ phi chính thẻ h2 hay h3 địnhnghĩa lại)

thuộc tính qui định cách thức hiển thị của các phần tử như TD, TR, TABLE Có thể

phần tử đều có các thuộc tính hiển thị như Margin, Border, padding Muốn hiển thịđúng cần nắm được ý nghĩa của các khái niệm này

Trang 25

Mô hình biểu diễn khái niệm margin, border, padding

ứng dụng web

BÀI 4 (Tiếp):

THAY ĐỔI NỘI DUNG TRANG WEB BẰNG CSS VÀ JS

ĐỊNH DẠNG TRANG WEB VỚI CSS Mục tiêu

I Lý thuyết

1 Tham chiếu đến một phần tử trong trang web

Để đọc hay thay đổi nội dung hay thuộc tính của phần tử bất kỳ thì điều cần làm trước tiên

là phải tham chiếu đến phần tử đó Với mỗi trình duyệt khác nhau có thể có các cách khácnhau, tuy nhiên cách truy cập sau đây tương thích với hầu hết các trình duyệt

Để tham chiếu đến một phần tử, có thể dùng 2 cách phổ biến sau:

1.1 Dùng hàm getElementById("Giá trị thuộc tính id của phần tử")

Ví dụ, có phần tử: <h1 id="TieuDe"> Chương I </h1> Nếu muốn tham chiếu (truy xuất) đến phần tử H1 này, ta viết: document.getElementById("TieuDe") Khi đã truy xuất đến

phần tử nào đó thì ta hoàn toàn có thể đọc hoặc thay đổi nội dung/ thuộc tính của nó

1.2 Dùng hàm getElementsByTag("Tên của thẻ")

Hàm này trả về một mảng chứa các phần tử có cùng loại/ tên (thẻ) nằm trong phần tử Chúý: bất kỳ phần tử nào cũng có phương thức getElementByTag, vì vậy khi ta viếtdocument.getElementsByTag sẽ trả về các phần tử nằm trong document, nếu ta viếtform1.getElementsByTag thì trả về các phần tử nằm trong form, v.v

padding-bottomMargin-left

border-right

Trang 26

1.3 Truy xuất đến tất cả các phần tử con của một phần tử bất kỳ.

Mỗi phần tử đều có thuộc tính childNodes (mảng) chứa các nút con nằm bên trong nó Vì vậy có thể dùng vòng lặp để duyệt tất cả các phần tử bên trong nó Thuộc tính ChildNodes lại có một thuộc tính con là length cho biết số phần tử bên trong (phần tử đầu có chỉ số 0).

2 Tham chiếu đến một thuộc tính của phần tử

Khi đã tham chiếu được đến phần tử thì việc tham chiếu đến thuộc tính khá dễ dàng, có thểviết theo cú pháp sau:

Ví dụ: <input type="button" value="Click here" id = "button1">

(Ở đây, type, value và id là các thuộc tính của thẻ input) Nếu muốn truy xuất đến thuộc

tính value, ta viết: document.getElementById("button1").value.

3 Thay đổi nội dung của một phần tử

3.1 Qui định về việc viết tên thuộc tính

Trong các bài trước, khi định nghĩa style cho một phần tử, tên thuộc tính có thể có chứa

dấu "-", ví dụ: <span style="font-size:16pt; background-color"> Hello </span> Tuy

nhiên khi xử lý trong các câu lệnh Javascript thì thuộc tính này cần viết lại theo qui tắc sau:Chuyển chữ cái ngay sau dấu "-" thành chữ hoa sau đó bỏ dấu trừ này đi Ví dụ tên thuộc

tính trên sẽ viết lại thành fontSize và backgroundColor.

3.1 Thay đổi thuộc tính của phần tử

Cú pháp: <Tham chiếu của phần tử>.<Tên thuộc tính> = <giá trị mới>

Ví dụ có phần tử: <input type="button" value="Click here" id = "button1">, sau đó muốnthay nội dung "Click here bằng "Thực hiện" thì viết như sau:

document.getElementById("button1").value= "Thực hiện".

**Chú ý: Có những thuộc tính chỉ đọc như thuộc tính "type" chẳng hạn

3.2 Thay đổi style của phần tử bằng Javascript

Khi định nghĩa phần tử, mỗi style chứa các thuộc tính riêng (ví dụ: <span id="hello"

style="font-size:16pt; background-color"> Hello </span>), lúc đó nếu muốn thay đổi các

thuộc tính của style thì viết như sau:

document.getElementById(<Id của thẻ>).style.<Tên thuộc tính của style> =<giá trị>.

Chú ý:<Tên thuộc tính của style> tuân thủ cách đặt tên ở trên.

Ví dụ: Đặt màu nền cho phần tử hello ở trên thành màu đỏ, như sau:

document.getElementById("hello").style.backgroundColor = "red";

Trang 27

II Thực hành

1 Yêu cầu

1.1 Về giao diện

giao diện trang web

1.2 Yêu cầu về chức năng/ xử lý

- Khi người dùng click vào nút "Thêm mới", hệ thống sẽ thêm bản ghi vào danh sách NCC

ở phía dưới nếu dữ liệu hợp lệ, tiếp theo xoá các ô nhập và đưa focus về ô Tên nhà CC

- Trường hợp dữ liệu không hợp lệ (Tên NCC để trống, chưa chọn thành phố, điện thoại

đó đặt focus vào vị trí ô nhập sai kèm tô nền màu vàng

Trang 28

ứng

+ thêm hàng (row hay tr) mới: Gọi phương thức insertRow(Vị trí cần thêm) của bảng+ thuộc tính rows.length của bảng cho biết số phần tử (hàng trong bảng)

đối tượng row

border-right : solid 1px gray ;

border-bottom : solid 1px gray ;

}

Trang 29

var URL= document.getElementById( "txtHomePage" ).value ;

cell.innerHTML= "<a href='" + URL + "'>" + URL + "</a>" ;

//xoá form để nhập bản ghi mới

document.getElementById ( "form1" ).reset();

Trang 30

alert ( "Bạn phải nhập tên nhà cung cấp !" );

document.getElementById( "lstCity" ).focus();

document.getElementById( "lstCity" ).style.backgroundColor= "yellow" ;

return false ;

}

if (isNaN(document.getElementById( "txtTelephone" ).value) == true )

{

alert ( "Số điện thoại phải là các ký tự số ! " );

document.getElementById( "txtTelephone" ).focus();

document.getElementById( "txtTelephone" ).style.backgroundColor= "yellow" ;

alert ( "Địa chỉ website không đúng, hãy nhập theo dạng http://" );

document.getElementById( "txtHomePage" ).focus();

document.getElementById( "txtHomePage" ).style.backgroundColor= "yellow" ;

< td style =" background-color : Purple ; color : White ; text-align : center" colspan ="2">

< span style =" font-size : 18pt ; width : 600px"> NHẬP THÔNG TIN NHÀ CC </ span >

Trang 31

< select id ="lstCity" size ="1" onchange ="ClearBackgroundColor(this);">

Trang 32

< input type ="text" id ="txtTelephone" style =" width : 150px" />

Số Fax: < input type ="text" id ="txtFaxNumber" style =" width : 150px" />

< input type ="text" id ="txtHomePage"

value ="http://" style =" width : 200px"

onchange ="ClearBackgroundColor(this);"/>

</ td >

</ tr >

< tr >

< td colspan ="2" style =" text-align : center">

< input type ="reset" value ="Xoá (Reset form)" />

< input type ="button" value ="Thêm mới" onclick ="AddRow();" />

< td colspan ="4" style =" background-color : Purple ; color : White ; text-align : center">

< span style =" font-size : 18pt"> Danh sách nhà cung cấp hiện có </ span >

</ td >

</ tr >

< tr >

< th class ="TiêuĐềNCC"> Mã NCC </ th >

< th class ="TiêuĐềNCC"> Tên NCC </ th >

< th class ="TiêuĐềNCC"> Địa chỉ </ th >

< th class ="TiêuĐềNCC"> Homepage </ th >

</ tr >

< tr >

Trang 33

< td class ="CạnhPhải"> Công ty FPT </ td >

< td class ="CạnhPhải"> Láng Hạ - Ba Đình </ td >

< td class ="CạnhPhải">< a href ="http://www.fpt.vn"> www.fpt.vn </ a ></ td >

</ tr >

< tr >

< td class ="CạnhPhải"> Công ty CMC </ td >

< td class ="CạnhPhải"> Hàn Thuyên - Hai Bà Trưng </ td >

< td class ="CạnhPhải">< a href ="http://www.cmc.vn"> www.cmc.vn </ a ></ td >

</ tr >

< tr >

< td class ="CạnhPhải"> Công ty Trần Anh </ td >

< td class ="CạnhPhải"> Giảng võ - Ba Đình </ td >

< td class ="CạnhPhải">< a href ="http://www.trananh.vn"> www.trananh.vn </ a ></ td >

giữa thẻ đóng và thẻ mở Ví dụ với <h1> Hello <b> world </h1>, thì innerHTML

chính là : "Hello <b> world " Đây là cơ sở để ta thay đổi nội dung của trang web.

phải truy cập/ tham chiếu được đến phần tử đó Cách để truy cập hay dùng là hàm

document.getElementById("Id của thẻ").

BÀI SỐ 5: ASP.NET và Web form

I Lý thuyết

1 Mô hình lập trình phía máy chủ

Trong thế giới web, tất cả các giao tiếp giữa Client (trình duyệt) và Server (web server) đều

được thực hiện theo cơ chế “Request and Response” Tức là, trước tiên phía máy khách

cần phải “requesst” (gửi yêu cầu) tới Server, sau đó phía server sẽ “response” (hồi đáp) lạiyêu cầu

Cùng một cơ chế này, người ta có 2 cách tiếp cận để xử lý “request trang web” từ máykhách:

Cách 1: Khi máy khách yêu cầu một trang – ví dụ trang abc – thì máy chủ sẽ đọc toàn bộ

nội dung của trang và gửi về cho phía máy khách mà không thực hiện bất kỳ xử lý nào Nó

hoàn toàn không qua tâm đến ý nghĩa bên trong của trang abc Nội dung trang này sau đó

sẽ được phía trình duyệt xử lý

Cách 2: Khi máy khách yêu cầu một trang – ví dụ trang xyz – thì máy chủ sẽ đọc toàn bộ

nội dung của trang đó và xử lý tại Server (trước khi gửi về cho client) để được kết quả,

tiếp theo lấy kết quả xử lý được gửi về cho phía máy khách Kết quả trả về cho máy khách

có thể chứa các phần tử HTML, các câu lệnh JavaScript, các định nghĩa kiểu CSS….và tiếptục được phía client (trình duyệt) xử lý như cách 1

Trang 34

Với cách 1, do việc xử lý không diễn ra bên phía server nên trang web không thể đọc/ ghicác dữ liệu trên Server được (ví dụ Danh sách khách hàng, danh mục sản phẩm,….) Vì vậy

nó chỉ phù hợp với các trang web đơn giản, không đòi hỏi xử lý chi tiết

Với cách 2, do việc xử lý thông tin ở tại server nên hoàn toàn có thể đọc/ ghi dữ liệu trênchính server đó Vì vậy, nó phù hợp với các dự án lớn và tính bảo mật cao Mô hình theocách này gọi là mô hình lập trình phía máy chủ

Dưới đây là hình ảnh minh họa cho 2 mô hình này:

Trang 35

 Mô hình lập trình phía máy chủ

Câu hỏi: Khi nào thì một trang sẽ được xử lý ở bên Server trước ? hay nói cách khác là khinào thì được gọi là xử lý theo mô hình phía server?

Trả lời: Các trang (file) có đuôi mở rộng mà server có thể xử lý, ví dụ: asp, php, jsp, aspx…Câu hỏi: Có thể lấy một ví dụ về một trang sẽ được xử lý phía server và trang sẽ khôngđược xử lý phía server ?

Trang 36

Câu hỏi: Phải viết như thế nào để server hiểu là cần phải xử lý bên phía server trước khi gửi

về cho phía Client ?

Trả lời: Trước tiên phải đặt phần mở rộng cho file (ví dụ aspx), sau đó trong trình duyệtcần phải đặt những nội dung muốn xử lý bên phía server trong cặp thẻ đặc biệt, ví dụ:

<% Response.Write (DateTime.Today.Date.ToString ()); %>

Hoặc:

<asp:Calendar runat="server" ID="Lịch"> </asp:Calendar>

</form>

*** Chính các ký hiệu <% %> và Runat = “Server” đã “mách bảo” Server rằng : “Hãy xử

lý nội dung đó bên phía server đi”! Nếu không có những ký hiệu này thì mặc nhiên serverlàm mỗi việc là gửi trả lại cho trình duyệt xử lý

Câu hỏi: Sao không gửi ngay cho trình duyệt xử lý như trước đây mà cứ phải để server xử

lý …! Để Client xử lý sẽ giảm tải cho server, điều này chẳng tốt hơn sao ?

Trả lời: Vì trình duyệt chỉ có thể hiểu và xử lý được các thẻ HTML và Javascript thôi, còn

nó không thể xử lý được các nội dung phức tạp Ví dụ nó không hiểu asp:Calendar là gì ?

2 Cơ chế xử lý file ASP.NET phía máy chủ.

Đối với các trang ASP.NET, thì cơ chế xử lý giống như đã mô tả ở trên, tức là theo mô hình xử lý bên phía server Nhưng có bổ sung thêm tính năng Compile and Cache:

Giải thích cơ chế xử lý ở trên:

Trang 37

- Bước 0: Người lập trình phải tạo các trang ASPX (giả sử tên trang đó là abc.aspx) và

đặt nó vào trong thư mục web của web server (có tên là www.server.com) Trên thanhđịa chỉ của trình duyệt, người dùng nhập trang www.server.com/abc.aspx

abc.aspx thì tốt !”.

c# - gọi là code behind hay code file) thành class

Riêng với ASP.NET thì việc biên dịch sẽ được thực hiện “thông minh hơn”, như sau:

Trang 38

3 Một số ví dụ minh họa.

3.1 Yêu cầu xử lý tại phía server thông qua Runat=”Server”

Trang 39

3.2 Yêu cầu xử lý bên phía server thông qua cặp thẻ <% %>

Ngoài 2 cách trên, còn 2 cách để yêu cầu xử lý trang web trực tiếp trên server, đó là:Đặt các câu lệnh ngay trong cặp thẻ Script, nhưng có thuộc tính Runat = “Server”:

……… ……….

/// <summary>

/// Các câu lệnh/ khai báo biến/ khai báo hàm/ định nghĩa lớp v.v

/// cần xử lý bên phía server thì đặt vào đây ! Ví dụ:

/// </summary>

string HoVaTen = "Aptech Center";

public int Tong (int a, int b)

Trang 40

3.3 Yêu cầu xử lý bên server thông qua Script

3.4 Yêu cầu xử lý bên phía server bằng cách đặt trong file Code

Định dạng
Số trang	142
Dung lượng	3,55 MB