tài liệu khóa học lập trình asp.net

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

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 8

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

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

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

P.1

Trang 2

3 Minh Hoạ mẫu 28

4 Ghi chú 33

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 39

4 Webform trong ASP.NET 42

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

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

7 HTML Server Controls và Web controls 47

1 Yêu cầu 48

2 Hướng dẫn 49

4 Ghi chú 54

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

1 Request Object 55

2 Response Object 58

3 Server Object 60

4 Session Object 61

5 Application Object 61

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

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

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

1 Giới thiệu chung 69

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

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

II THỰC HÀNH 84

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

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

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

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

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

1 Giới thiệu DataBinding 91

2 Data Binding 91

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

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

Trang 3

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

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

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

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

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

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

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

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

3 Repeater control, DataList control, GridView control 132

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

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

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

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

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

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

PHỤ LỤC 150

I ĐÓNG GÓI WEBSITE 150

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

1 Cài đặt IIS 150

2 Cài đặt NET Framework 150

P.3

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

P.5

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

P.7

Trang 8

2 Hướng dẫn

trang theo yêu cầu

2008 và tạo dự án web, sau đó mở trang Default.aspx và viết các thẻ HTML

F5 hoặc click chuột phải trong trang soạn 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 />

Trang 9

Điện thoại:

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

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

< br />

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

P.9

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ức là: 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ọi ngườ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 ứng dụng nên một trang web phải có khả năng động (Dynamic webpage - tức là: nội dung của trang 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ác nhau ) Khả năng "động" đó có thể thực hiện ở bên phía trình duyệt hoặc phía server Nếu trang 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> 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>

var d = new Date ();

JAVASCRIPT

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 khi trang 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ư click chuộ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>

<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

File

TestJS.htm

<html>

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

<html>

Trang 13

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

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

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 >

< script language ="javascript">

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:

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:

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

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

P.15

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:

P.17

Trang 18

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ĩa CSS 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>

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

tính>: <Giá trị> và cách nhau bởi dấu hai chấm

nghĩa của mỗi thuộc tính có thể tra 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.w3schools.com/CSS/CSS_reference.asp hoặc trang http://www.javascriptkit.com/dhtmltutors/cssreference.shtml

- Với cách này ta phải định nghĩa riêng cho từng phần tử, không sử dụng lại được và 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 định nghĩ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

Lớp MỤC_LỚNcó 2 thuộc tính: Màu chữ đậm, cỡ chữ 16

Lớp MỤC_NHỎ có 3 thuộc tính: Màu chữ đậm, in nghiêng, cỡ chữ 14

< html >

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 >

Trang 20

** Ưu điểm của định nghĩa lớp này là ta chỉ phải định nghĩa một lần, sau đó sử dụng cho nhiều phần tử Việc bảo trì và sửa chữa sẽ dề dàng và nhanh chóng hơn.

Ngoài ra, người ta có thể định nghĩa CSS trong một tệp riêng, sau đó có thể sử dụng trong tất cả các trang khác nhau Để sử dụng (gọi) các CSS định nghĩa trong một file xyz.css nào

đó, 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 >

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>

Trang 21

- 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

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 >

</ td >

</ tr >

P.21

Trang 22

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

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

Trang 24

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

< 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

<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

margin-left, margin-right = "auto"

Khi thẻ cha (thẻ chứa) định nghĩa một thuộc tính A nào đó thì các thẻ con cũng có đặc

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

cột (bảng) thì cần phải hiểu rất rõ các 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ể tham khảo đầy đủ về vấn đề này tại:

Trang 25

http://www.w3schools.com/CSS/ Đặc biệt mỗi 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.

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

đị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ác nhau, 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ết document.getElementsByTag sẽ trả về các phần tử nằm trong document, nếu ta viết form1.getElementsByTag thì trả về các phần tử nằm trong form, v.v

P.25

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ốn thay 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 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

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

Trang 28

backgroundColor của style thuộc phần tử tương ứng

dùng phương thức insertCell(thứ tự ô) của đối tượng row

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

Trang 29

border-right : solid 1px gray ;

border-bottom : solid 1px gray ;

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

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

//Hàm kiểm tra dữ liệu nhập vào có hợp lệ hay không trả về true nếu hợp lệ.

P.29

Trang 30

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

Trang 33

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

<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

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ại yê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áy khá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ó

P.33

Trang 34

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

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/ ghi cá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ên chí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 theo cá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)

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à khi nà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,

Trang 36

Trả lời: Hai chương trình này hoàn toàn có thể nằm trên cùng một máy tính Chương trình server thực chất là một chương trình có tên là IIS (Internet Information Service).

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ệt cầ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 server là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:

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:

P.37

Trang 39

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

Trang 40

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)

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