Bài giảng xây dựng WEB bằng ASP NET

Thiết kế WEB bằng ASP NET, Ngôn ngữ javascript , kiến thức KTML cơ bản, Tạo trang web động với DHTML và JavaScript, CSS VÀ JS, ASP.NET và Web form

Trang 1

MỤC LỤC

BÀI SỐ 1: Tạo trang web với HTML 5

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

Trang 2

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

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 57

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 62

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

1 Giới thiệu chung 64

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

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

II THỰC HÀNH 78

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

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

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

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

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

1 Giới thiệu DataBinding 85

2 Data Binding 85

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

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

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

V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319

P.2

Trang 3

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

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

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

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

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

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

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

3 Repeater control, DataList control, GridView control 124

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

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

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

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

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

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

PHỤ L‎ỤC 139

PHỤ L‎ỤC 140

I ĐÓNG GÓI WEBSITE 140

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

1 Cài đặt IIS 140

2 Cài đặt NET Framework 140

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 L‎IỆ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

P.4

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 web thự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ặp thẻ 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ặp thẻ 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 >

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

P.6

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

- Sử dụng bảng mô tả các phần tử ở trên để tạo trang theo yêu cầu

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

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

P.8

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 trang

web 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 trang

web được mở, ta chỉ cần đặt các câu lệnh JS ngay trong các cặp thẻ <Script> </script>

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

var d = new Date ();

- Có thể có nhiều đoạn script trong một trang.

- Trong cặp script phải là các CÂU LỆNH JAVASCRIPT

P.10

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>

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ày

ngay 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ệc gọ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

TestJS.htm

<html>

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

</head>

<body>

<script language="javascript">

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:

<html>

<script language="javascript">

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

Số hạng 2: <input type="text" id ="txtSH2"/> <br />

P.12

Trang 13

Tổng: <input type="text" id ="txtTong" /> <br />

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 >

<scriptlanguage ="javascript">

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

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

}

</script>

</ head >

<body>

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

Trang 14

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:

- Nếu dữ liệu hợp lệ thì thực hiện submit

- Nếu dữ liệu nhập vào không hợp lệ thì thông báo cho người dùng và không thực 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:

- Tên nhà cung cấp để trống

- Thành phố không được chọn

- Điện thoại chứa ký tự không phải là số

- Địa chỉ website không đúng

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

<scriptlanguage ="javascript" type ="text/javascript">

function KiemTraDuLieu()

{

P.14

Trang 15

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

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

Trang 18

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"/>

<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" />

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

Trang 20

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ả

- Sử dụng định dạng CSS tại dòng và tạo lớp CSS

- Các phần tử có cùng thuộc tính thì nên tạo một lớp riêng, sau đó áp dụng lớp này cho thẻ bằng thuộc tính Classs= <Tên lớp>

- Tra cứu bảng CSS trong bản mềm đi kèm hoặc trang www.w3schools.com

3 Minh hoạ mẫu

Trang 21

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

Trang 23

< td class ="Nhãn">

Quốc gia:

</ td >

< td >

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

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

Trang 24

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

- Nếu muốn lấy giá trị của một mục trong Listbox (Select) thì viết:

<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

- Muốn đặt bảng vào giữa form, đặt thuộc tính margin-left, margin-right = "auto"

- Các thẻ con có tính kế thừa thẻ cha, tức là: Khi thẻ cha (thẻ chứa) định nghĩa một thuộctí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)

- Để trình bày được tốt dữ liệu dưới dạng hàng, cột (bảng) thì cần phải hiểu rất rõ cácthuộ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ểtham khảo đầy đủ về vấn đề này tại: http://www.w3schools.com/CSS/ Đặc biệt mỗiphầ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

P.24

padding-bottomMargin-left

border-right

Trang 25

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

- Sử dụng CSS khi có nhiều phần tử có cùng định dạng giống nhau trong trang/ứ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

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

Trang 26

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

P.26

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 chứa ký tự ngoài số, địa chỉ website không bắt đầu bằng http://) thì đưa ra thông báo, sau

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

Trang 28

- Để tô nền vàng, truy cập vào thuộc tính backgroundColor của style thuộc phần tử tươngứng

- Để thông báo, dùng hàm alert

- Để xoá form, gọi phương thức reset() của form

- Để thêm một hàng vào bảng, thực hiện trình tự:

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

- -Để thêm một ô (cell hay <td>) vào hàng, dùng phương thức insertCell(thứ tự ô) của đối tượng row

- Để đặt thuộc tính con trong thuộc tính style của mỗi ô, ta lại sử dụng cú pháp truy cập như phần 3.2

3 Minh Hoạ mẫu

border-right : solid 1px gray ;

border-bottom : solid 1px gray ;

}

P.28

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 >

P.32

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 >

- Hãy luôn ghi nhớ, để thay đổi nội dung/ thuộc tính/ style của phần tử thì trước hết 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ếp tụ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:

Mô hình lập trình phía máy khách (Client side)

P.34

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 Trang1.htm Trang2.aspx

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:

P.36

Trang 37

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

- 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

- Bước 2: Trình duyệt gửi yêu cầu tới server với nội dung: ”Làm ơn gửi cho tôi trang abc.aspx thì tốt !”.

- Bước 3: web server sẽ biên dịch code của trang aspx (bao gồm cả các mã code vb.net/c# - gọi là code behind hay code file) thành class

- Bước 4: Lớp sau khi được biên dịch sẽ được server thực thi

- Bước 5: Server trả kết quả thực thi về cho trình duyệt (trang HTML‎).

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”

P.38

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

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

P.40

Định dạng
Số trang	146
Dung lượng	3,58 MB
File đính kèm	Bai giang ASP.NET.rar (2 MB)