Giáo trình Xây dựng ứng dụng web (Ngành Hệ thống thông tin)

Nội dung môn học lập trình web cơ bản

KHOA CÔNG NGHỆ THÔNG TIN 12

Nội dung môn học lập trình web cơ bản

Nội dung môn học lập trình web cơ bản

Nội dung môn học lập trình web cơ bản

Thuộc tính type của thẻ danh sách cho phép tùy chỉnh kiểu số thứ tự hoặc biểu tượng bullet hiển thị trước mỗi mục trong danh sách Các giá trị của thuộc tính type bao gồm nhiều lựa chọn khác nhau.

Bảng 1-1: Kết quả bảng danh sách

Các giao thức sử dụng cho Web

Thuộc tính HREF (tham chiếu siêu văn bản) được dùng để chỉ địa chỉ hay URL của tài liệu hoặc file được liên kết

Cú pháp của HREF là:

KHOA CÔNG NGHỆ THÔNG TIN 13

Hypertext

Giao thức là một loại quy tắc quan trọng trong giao tiếp mạng, với một số giao thức phổ biến như HTTP (giao thức truyền siêu văn bản), Telnet (mở phiên Telnet), Gopher (tìm kiếm file), FTP (giao thức truyền file) và Mailto (gửi thư điện tử).

Host.domain – Đây là địa chỉ Internet của máy chủ

Port - Cổng phục vụ của máy chủ đích

HyperText – Đây là văn bản hay hình ảnh mà người dùng cần nhấp vào để kích hoạt liên kết

Các mô hình ứng dụng Web

Có nhiều mô hình cài đặt Server cho ứng dụng, mỗi mô hình có những ưu điểm riêng Để chọn lựa mô hình Server tối ưu, bạn cần xem xét các yếu tố như hiệu suất, khả năng mở rộng, tính sẵn có, độ tin cậy, giá cả và khả năng quản lý.

Dưới đây là 5 mô hình Cloud Server phổ biến dành cho ứng dụng, có thể kết hợp linh hoạt và phù hợp với từng môi trường cũng như loại ứng dụng khác nhau.

1.3.1 Tất cả trong một Server Đây là mô hình đơn giản nhất khi tất cả tài nguyên của ứng dụng đều được đặt chung trên một máy chủ duy nhất Một gói tài nguyên ứng dụng bao gồm các web server, application server và database server Chẳng hạn như gói LAMP bao gồm Linux, Apache, MySQL và PHP trên cùng một server

KHOA CÔNG NGHỆ THÔNG TIN 14

Mô hình sử dụng chung phần tài nguyên server mang lại sự đơn giản và nhanh chóng trong việc cài đặt ứng dụng Tuy nhiên, đây chỉ là mô hình cơ bản, gây khó khăn cho việc mở rộng và tách biệt các thành phần của ứng dụng Việc ứng dụng và cơ sở dữ liệu sử dụng chung tài nguyên của cloud server như CPU, bộ nhớ và I/O có thể dẫn đến suy giảm hiệu suất và làm khó khăn trong việc xác định lỗi.

Mô hình này tách biệt hệ thống quản lý cơ sở dữ liệu với các ứng dụng khác nhằm tránh xung đột tài nguyên Đồng thời, tính bảo mật có thể được nâng cao bằng cách đặt cơ sở dữ liệu trong một mạng riêng.

Mô hình tách biệt hệ thống quản lý database mang lại nhiều ưu điểm, bao gồm cải thiện hiệu suất nhờ việc ứng dụng và database sử dụng tài nguyên riêng biệt Mô hình này cũng cho phép mở rộng tài nguyên cho server khi cần thiết Tuy nhiên, việc cài đặt phức tạp hơn so với mô hình all-in-one và có thể dẫn đến suy giảm hiệu suất nếu hai server ứng dụng và database gặp phải độ trễ lớn do khoảng cách xa hoặc băng thông thấp.

KHOA CÔNG NGHỆ THÔNG TIN 15

1.3.3 Sử dụng Load Balancer (Reverse Proxy) Để cải thiện hiệu suất và độ tin cậy trong môi trường máy chủ, chúng ta có thể phân phối việc xử lý request trên nhiều máy chủ bằng load balancer Nếu một trong các máy chủ bị lỗi, load balancer sẽ gửi các yêu cầu xử lý lưu lượng đến các máy chủ khác cho đến khi máy chủ bị lỗi hoạt động trở lại bình thường

Load balancer có thể phục vụ nhiều ứng dụng thông qua cùng một tên miền và cổng bằng cách sử dụng layer application reverse proxy Một số phần mềm nổi bật cho load balancer reverse proxy bao gồm HAProxy, Nginx và Varnish.

Mô hình máy chủ load balancer có ưu điểm nổi bật là khả năng mở rộng dễ dàng bằng cách thêm nhiều máy chủ, đồng thời giúp chống lại các cuộc tấn công DDOS bằng cách giới hạn tần suất kết nối của người dùng Tuy nhiên, nếu load balancer không đạt hiệu suất tối ưu hoặc bị cấu hình kém, nó có thể trở thành nút cổ chai, dẫn đến tình trạng tắc nghẽn trong hệ thống cloud.

Một điểm yếu nghiêm trọng của mô hình này là nếu máy chủ load balancer gặp sự cố, toàn bộ hệ thống sẽ bị ảnh hưởng Ngoài ra, cần xem xét các vấn đề liên quan đến việc chấm dứt SSL và xử lý yêu cầu session.

1.3.4 Dùng HTTP Accelerator (Caching Reverse Proxy)

Các kỹ thuật như HTTP accelerator và caching HTTP reverse proxy giúp giảm thời gian tải nội dung từ server đến người dùng HTTP accelerator lưu trữ nội dung mà ứng dụng trả về lần đầu vào bộ nhớ, và khi có yêu cầu truy cập tương tự, nó chỉ cần lấy nội dung từ bộ nhớ để trả về cho người dùng.

KHOA CÔNG NGHỆ THÔNG TIN 16 cho phép người dùng truy cập mà không cần tương tác trực tiếp với web server Một số phần mềm tăng tốc HTTP trên cloud server nổi bật bao gồm Varnish, Squid và Nginx.

Mô hình HTTP accelerator server rất hiệu quả trong việc nâng cao hiệu suất cho các website có nội dung nặng và tài nguyên truy cập thường xuyên Nó giúp giảm tải CPU trên web server thông qua việc sử dụng bộ nhớ cache và nén Ngoài ra, HTTP accelerator server còn có thể hoạt động như một load balancer server, đồng thời các phần mềm caching cũng đóng vai trò quan trọng trong việc bảo vệ hệ thống khỏi các cuộc tấn công DDOS.

Hai điểm quan trọng khi sử dụng HTTP accelerator là cần điều chỉnh để đạt hiệu suất tối ưu, và nếu tỷ lệ tái sử dụng bộ nhớ cache thấp, hiệu suất của cloud server có thể bị ảnh hưởng tiêu cực.

1.3.5 Cấu hình Master-Slave Database Replication

If your system experiences a higher number of read requests compared to write requests, such as in a Content Management System (CMS), configuring a master-slave database replication can enhance performance.

Định dạng trang web với CSS

Mô hình 3 lớp trong thiết kế Web

Kiến trúc 3-tiers là một mô hình client/server, trong đó giao diện người dùng (UI), quy tắc xử lý (BR/BL) và lưu trữ dữ liệu được phát triển như các module độc lập Mỗi module thường được duy trì trên các nền tảng riêng biệt, giúp tối ưu hóa hiệu suất và khả năng mở rộng Kiến trúc này được xem là một mẫu thiết kế phần mềm và là phương pháp triển khai ứng dụng ở mức vật lý với ba module chính và riêng biệt.

• Tầng Presentation: hiển thị các thành phần giao diện để tương tác với người dùng như tiếp nhận thông tin, thông báo lỗi, …

Tầng Business Logic chịu trách nhiệm thực hiện các hành động nghiệp vụ của phần mềm, bao gồm tính toán và đánh giá tính hợp lệ của thông tin Đồng thời, tầng này còn đảm nhiệm việc di chuyển và xử lý thông tin giữa hai tầng trên và dưới.

Tầng Data là nơi lưu trữ và trích xuất dữ liệu từ các hệ quản trị cơ sở dữ liệu hoặc các file trong hệ thống, giúp tầng Business logic thực hiện các truy vấn dữ liệu một cách hiệu quả.

Mọi người thường nhầm lẫn giữa tier và layer do cấu trúc phân chia tương tự (presentation, business, data), nhưng thực tế chúng hoàn toàn khác nhau Ba tier mang tính vật lý, trong khi ba layer mang tính logic, tức là ứng dụng được chia thành các phần theo chức năng hoặc vai trò một cách hợp lý Các layer khác nhau được thực thi trong một vùng nhớ của process, do đó, một tier có thể chứa nhiều layer.

Việc phân chia mã nguồn thành từng lớp giúp tăng tính tường minh cho code Mỗi lớp đảm nhận các chức năng riêng biệt như giao diện, xử lý và truy vấn, thay vì gộp tất cả vào một chỗ, từ đó giảm sự kết dính và cải thiện khả năng bảo trì.

KHOA CÔNG NGHỆ THÔNG TIN 19

Khi hệ thống được phân chia, việc bảo trì trở nên dễ dàng hơn, cho phép các thành phần riêng lẻ dễ dàng thay đổi Sự thay đổi này có thể được giới hạn trong một lớp cụ thể hoặc ảnh hưởng đến lớp gần nhất mà không làm ảnh hưởng đến toàn bộ chương trình.

Việc phát triển và tái sử dụng trở nên dễ dàng hơn khi lập trình theo một mô hình nhất định, vì điều này giúp chúng ta có một chuẩn mực để tuân theo khi thêm chức năng mới.

Và việc sử dụng lại khi có sự thay đổi giữa hai môi trường ( Winform sang Webfrom ) thì chỉ việc thay đổi lại lớp GUI

Việc bàn giao công việc trở nên dễ dàng và tiết kiệm thời gian hơn khi mọi người tuân thủ một quy chuẩn đã được định sẵn, giúp tăng cường sự tương tác hiệu quả giữa các thành viên trong nhóm.

Mô hình 3 lớp giúp dễ dàng phân phối khối lượng công việc, với mỗi nhóm và bộ phận nhận nhiệm vụ cụ thể Sự phân chia này cho phép các lập trình viên kiểm soát hiệu quả khối lượng công việc của mình.

Các loại CSS

CSS cho phép định nghĩa kiểu và cách hiển thị cho các phần tử HTML, giúp phân tách nội dung và cách trình bày trang Nếu chỉ sử dụng HTML, định dạng và kiểu phần tử phải nằm cùng vị trí trong văn bản, gây khó khăn trong việc bảo trì khi trang web trở nên phức tạp Sử dụng CSS giúp loại bỏ định dạng khỏi văn bản HTML và lưu trữ chúng trong một file CSS riêng biệt.

CSS, hay còn gọi là Cascading Style Sheet, là ngôn ngữ dùng để tạo phong cách cho trang web Nó cho phép định kiểu cho các yếu tố được viết bằng ngôn ngữ đánh dấu như HTML, giúp tiết kiệm công sức cho người viết web bằng cách điều khiển định dạng của nhiều trang cùng lúc CSS phân biệt hiển thị của trang web với nội dung chính thông qua việc kiểm soát bố cục, màu sắc và font chữ.

CSS, được phát triển bởi W3C vào năm 1996, ra đời để khắc phục hạn chế của HTML trong việc định dạng trang web, vì HTML chỉ được thiết kế để đánh dấu nội dung mà không hỗ trợ định dạng hiệu quả.

Thẻ được giới thiệu trong HTML 3.2 đã gây khó khăn cho lập trình viên do sự đa dạng về font chữ, màu nền và phong cách trên website Việc viết lại mã cho trang web trở thành một quá trình tốn thời gian và công sức Để khắc phục vấn đề này, W3C đã phát triển CSS, giúp đơn giản hóa việc quản lý kiểu dáng và bố cục của trang web.

KHOA CÔNG NGHỆ THÔNG TIN 20

HTML và CSS có mối liên hệ chặt chẽ, trong đó HTML là ngôn ngữ đánh dấu cơ bản cho website, còn CSS chịu trách nhiệm về phong cách và giao diện Sự kết hợp của chúng là điều không thể thiếu để tạo nên một trang web hoàn chỉnh.

CSS về lý thuyết không có cũng được, nhưng khi đó website sẽ không chỉ là một trang chứa văn bản mà không có gì khác

Chúng có 3 loại là Inline, External và Internal:

Style CSS Internal là kiểu định dạng được tải mỗi khi trang web được làm mới, dẫn đến tăng thời gian tải trang Mặc dù không thể sử dụng một style CSS cho nhiều trang, vì nó chỉ áp dụng cho từng trang riêng lẻ, nhưng lợi ích của style CSS Internal là giúp dễ dàng chia sẻ và xem trước nội dung của trang khi mọi thứ đã được thiết lập trong cùng một trang.

Phương pháp sử dụng Style External là lựa chọn thuận tiện nhất, vì mọi thứ được lưu trữ trong file css Điều này cho phép bạn tạo phong cách trong một file riêng và áp dụng CSS vào các trang mong muốn Việc sử dụng external style sẽ giúp cải thiện đáng kể thời gian tải trang.

Cuối cùng, chúng ta sẽ khám phá về CSS Inline, một phương pháp áp dụng phong cách trực tiếp cho các yếu tố cụ thể bằng thẻ Mặc dù mỗi thành phần cần có phong cách riêng, cách này không phải lúc nào cũng là lựa chọn tốt nhất cho việc quản lý CSS Tuy nhiên, CSS Inline có thể rất tiện lợi khi bạn muốn nhanh chóng thay đổi và xem trước một yếu tố mà không cần truy cập vào file CSS chính để chỉnh sửa.

CSS In-line, out-line

Để áp dụng CSS tác dụng vào các phần HTML có ba cách nhúng CSS: Inline

• Inline: mã CSS viết tại thuộc tính style của phần tử HTML

• Internal: mã CSS trong chính văn bản HTML, nằm trong khối thẻ

• External: mã CSS ở một file riêng biệt sau đó nạp vào HTML bằng phần tử

Cú pháp của CSS bao gồm ba phần chính: đối tượng, thuộc tính và giá trị, được trình bày theo cấu trúc: Đối tượng {thuộc tính: giá trị} Đối tượng thường là các thẻ HTML mà bạn muốn điều chỉnh cách hiển thị, thuộc tính xác định đặc điểm hiển thị của đối tượng, và giá trị mô tả cách mà thuộc tính đó sẽ được hiển thị Cặp {thuộc tính: giá trị} được đặt trong dấu ngoặc nhọn {}.

KHOA CÔNG NGHỆ THÔNG TIN 21

Nếu giá trị gồm nhiều từ, đặt chúng trong dấu nháy đôi: p {font-family: "sans serif"}

Để định nghĩa nhiều thuộc tính cho một đối tượng, hãy sử dụng dấu chấm phẩy (;) để phân cách các cặp thuộc tính và giá trị Để cải thiện khả năng đọc của Style, bạn có thể định dạng nội dung bằng cách căn giữa và sử dụng màu đỏ cho văn bản.

P { text-align: center; color: black; font-family: arial

Bạn có thể định nghĩa một Style cho nhiều đối tượng cùng một lúc: h1, h2, h3, h4, h5, h6 { color: green

Using the Class attribute, you can define multiple styles for the same element For instance, if you want two styles for the same

tag, you can set it so that any

with class="right" aligns to the right, while class="center" aligns to the center: p.right {text-align: right} p.center {text-align: center}.

Đoạn này sẽ được canh phải

Đoạn này sẽ được canh giữa

KHOA CÔNG NGHỆ THÔNG TIN 22

Bạn cũng có thể bỏ qua tên đối tượng để định nghĩa kiểu Style cho tất cả các thành phần có Class mà bạn định nghĩa Ví dụ:

.center { text-align: center; color: red

Trong trang HTML sau, cả H1 và đoạn văn bản đều được canh giữa:

Tiêu đề này sẽ được canh giữa

Đoạn này sẽ được canh giữa

Thuộc tính ID có thể dùng định nghĩa Style theo hai cách:

- Tất cả các thành phần HTML có cùng một ID

- Chỉ một thành phần HTML nào đó có ID được định nghĩa

Ví dụ sau, Style dùng cho tất cả các thành phần HTML có ID là "intro":

#intro { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent

Ví dụ sau, Style chỉ dùng cho thành phần

nào có ID là "intro" trong trang Web p#intro { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent

KHOA CÔNG NGHỆ THÔNG TIN 23

CSS dùng cách ghi chú tương tự như ngôn ngữ C: các đoạn ghi chú bắt đầu bằng /* và kết thúc bởi

/* Đây là phần ghi chú */ p { text-align: center;

/* Đây là phần ghi chú */ color: black; font-family: arial

2.3.6 Sử dụng CSS trong trang HTML

• Làm thế nào chèn vào một Style Sheet

Khi trình duyệt đọc một Style, nó sẽ định dạng nội dung trang Web theo Style đó

Có 3 cách để sử dụng Style trong một trang HTML

Sử dụng file CSS độc lập là cách hiệu quả khi bạn muốn áp dụng các kiểu dáng cho nhiều trang web Mỗi trang cần liên kết đến file CSS này thông qua thẻ được đặt trong phần HEAD của tài liệu HTML.

Ví dụ một file CSS: Style.css hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}

• Định nghĩa các Style trong phần HEAD

Các Style định nghĩa trong phần HEAD có thể dùng cho nhiều thành phần HTML trong trang Web đó Bạn sử dụng thẻ để định nghĩa Style:

KHOA CÔNG NGHỆ THÔNG TIN 24

hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}

Trình duyệt thường không hiển thị các thẻ HTML mà chúng không nhận diện, vì vậy để đảm bảo rằng các trình duyệt không hỗ trợ CSS không hiển thị phần định nghĩa Style, bạn nên đặt nó trong thẻ ghi chú của HTML.

• Dùng Style cho một thành phần HTML cụ thể

Sử dụng thuộc tính Style cho một thẻ HTML cụ thể hạn chế khả năng tận dụng các lợi ích của CSS, chỉ có thể điều chỉnh cách hiển thị của đối tượng Việc định nghĩa Style cho thành phần HTML thông qua thuộc tính này không mang lại hiệu quả tối ưu.

Đây là đoạn văn bản

• Nhiều Style cho một đối tượng

Nếu một đối tượng được định nghĩa nhiều Style, nó sẽ sử dụng Style cụ thể nhất

Ví dụ, một file CSS định nghĩa thẻ H3 như sau:

KHOA CÔNG NGHỆ THÔNG TIN 25 h3 { color: red; text-align: left; font-size: 8pt

Trong một file HTML có phần định nghĩa Style cho H3 như sau: h3 { text-align: right; font-size: 20pt

Nếu trang HTML có link đến file CSS trên, Style cho H3 sẽ định nghĩa như sau: Color: red; text-align: right; font-size: 20pt

2.3.7 Các ví dụ áp dụng a Màu chữ, màu nền

body {background-color: rgb(250,250,250)} h1 {background-color: #00ff00; color: #0000ff} h2 {background-color: transparent; color: #dda0dd} p {color: #0000FF}}

Đây là dòng tiêu đề: Header 1

Đây là dòng tiêu đề: Header 2

Đây là một đoạn văn bản

KHOA CÔNG NGHỆ THÔNG TIN 26 b Canh lề văn bản

h1 {text-align: center} h2 {text-align: left} h3 {text-align: right}

c Hình nền cho trang Web

Body { background-image: url('Hinh_nen.jpg'); background-repeat: repeat-x

Mặc định, hình nền trang web được tô đầy Để tô hình nền theo hướng ngang hoặc đứng, chúng ta cần chọn giá trị phù hợp cho thuộc tính background-repeat, chẳng hạn như repeat.

KHOA CÔNG NGHỆ THÔNG TIN 27 x/repeat-y/repeat-xy d Font chữ

Ví dụ 1: Định dạng font chữ

h1 {font-family: Tahoma; font-size: 150%} h2 {font-family: Tahoma; font-size: 120%} h3 {font-family: Tahoma; font-size: 12} p {font-family: Tahoma;} p.sansserif {font-family: sans-serif}

Đây là đoạn văn bản

Đây là đoạn văn bản có font sansserif

Ví dụ 2: Định dạng đoạn

p{text-align:justify; font-family: Tahoma; font-size: 12px; border-bottom: 2px solid #ff0000}

KHOA CÔNG NGHỆ THÔNG TIN 28

Để tìm kiếm các Web Service miễn phí, bạn có thể sử dụng Google Chúng tôi xin giới thiệu trang web http://www.webservicex.net, nơi cung cấp nhiều Web Service hữu ích cho người dùng.

e Quản lý màu hiển thị của liên kết: Hyperlink

a {text-decoration:none; color: #0000FF} a:visited {text-decoration:none; color: #0000A0} a:hover {text-decoration:none; color: #FF00FF} a:active {text-decoration:none; color: #FF0000}

Trang Quản lý giáo viên - TTTH

Bài tập áp dụng

Sử dụng CSS định dạng thiết kế form theo biểu mẫu sau:

KHOA CÔNG NGHỆ THÔNG TIN 29

KHOA CÔNG NGHỆ THÔNG TIN 30

Ngôn ngữ JavaScript

Giới thiệu về JavaScript

HTML chỉ cung cấp khả năng tạo trang web tĩnh để hiển thị thông tin, nhưng không hỗ trợ các trang web động có thể tương tác với người dùng Để khắc phục điều này, hãng Netscape đã phát triển ngôn ngữ script mang tên LiveScript, sau đó đổi tên thành JavaScript nhằm tận dụng sự phổ biến của ngôn ngữ lập trình Java Mặc dù Java và JavaScript có một số điểm tương đồng, chúng vẫn là hai ngôn ngữ lập trình khác biệt.

JavaScript là một ngôn ngữ lập trình dạng script có thể tích hợp vào các file HTML Ngôn ngữ này không cần biên dịch mà được trình duyệt diễn dịch trực tiếp, cho phép người dùng dễ dàng học hỏi và thực hành JavaScript thông qua các trang web sử dụng ngôn ngữ này.

JavaScript là ngôn ngữ lập trình dựa trên đối tượng, bao gồm nhiều kiểu đối tượng như đối tượng Math với các chức năng toán học Tuy nhiên, JavaScript không phải là ngôn ngữ hướng đối tượng như C++ hay Java vì không hỗ trợ lớp và tính kế thừa.

Sử dụng JavaScript trong trang HTML

Sử dụng một trong các cách sau:

 Sử dụng các câu lệnh và các hàm trong cặp thẻ

 Sử dụng các File nguồn JavaScript

 Sử dụng một biểu thức JavaScript làm giá trị của một thuộc tính HTML

 Sử dụng thẻ sự kiện (event handlers) trong một thẻ HTML nào đó

Trong đó, sử dụng cặp thẻ và nhúng một File nguồn JavaScript là được sử dụng nhiều hơn cả

 Nhúng JavaScript vào trang HTML

KHOA CÔNG NGHỆ THÔNG TIN 31

JavaScript được chèn vào file HTML thông qua cặp thẻ và Khi đặt trong phần , mã JavaScript sẽ được tải trước, sẵn sàng cho phần còn lại của trang Cú pháp sử dụng như sau:

// Chèn các mã Javacript vào đây

 Sử dụng File nguồn JavaScript

Dùng phương pháp này hay hơn nhúng trực tiếp lệnh JavaScript vào trang HTML

Các File JavaScript bên ngoài chỉ chứa các câu lệnh JavaScript và định nghĩa hàm Tên File của các hàm JavaScript bên ngoài cần có đuôi js,

3.2.1 Cú pháp cơ bản của lệnh

JavaScript cho phép xây dựng hàm, câu lệnh, toán tử và biểu thức trên cùng một dòng, kết thúc bằng dấu chấm phẩy (;) Để gọi một phương thức của đối tượng, cú pháp sử dụng là: object_name.property_name.

Ví dụ 1: document.write("Chào các bạn!");

3.2.2 Hiển thị một dòng văn bản Đối tượng document trong JavaScript được thiết kế sẵn hai phương thức để xuất một dòng văn bản ra màn hình client: write() và writeln() document.write(“Chuỗi văn bản”);

Ví dụ 2: document.write("Chào các bạn"); document.writeln(“Chúc các bạn vui vẽ!”);

Phương thức write(): Xuất ra màn hình dòng văn bản nhưng không xuống dòng

Phương thức writeln(): Sau khi viết xong dòng văn bản tự động xuống dòng

Ghi chú: Có thể dùng “+” để ghép nhiều chuỗi ký tự

KHOA CÔNG NGHỆ THÔNG TIN 32

Cho phép dùng các kí tự đặc biệt trong chuổi:

Khi có dùng các ký tự đặc biệt hoặc lệnh Writeln thì phải đặt khối JavaScript trong cặp thẻ (Thẻ quy định văn bản định dạng trước)

Ví dụ 3: Tạo trang (OutputText.htm) để phân biệt sự khác nhau của write() và writeln():

document.writeln("One,"); document.write("Two,\n"); document.write("Three "); document.write(" ");

3.2.3 Hiển thị hộp thoại thông báo –Lệnh alert()

Cú pháp: alert("Câu thông báo");

Khi đó sẽ chờ cho đến khi người sử dụng nhấn vào nút OK Thông thường, cách thức alert() được sử dụng trong các trường hợp:

• Thông tin đưa vào form không hợp lệ

• Kết quả sau khi tính toán không hợp lệ

• Khi dịch vụ chưa sẵn sàng để truy nhập dữ liệu

Ví dụ 4: Tạo trang (Thongbao.htm)

KHOA CÔNG NGHỆ THÔNG TIN 33 alert("Chào mừng bạn đến với JavaScript! \n Nhấn Ok để tiếp tục");

3.2.4 Giao tiếp với người sử dụng – Lệnh prompt()

Hộp thoại bao gồm một thông báo, một trường nhập dữ liệu, nút OK và nút Cancel Người dùng sẽ nhập thông tin vào trường và nhấn nút OK để hệ thống xử lý dữ liệu đã nhập.

Cú pháp: window.prompt("Câu thông báo","nội dung mặc định”);

Ví dụ 5: Tạo trang (Hello.htm) hiện thị hộp thoại hỏi tên người dùng và sau đó sẽ hiển thị một thông báo chào tên mới đưa vào

var name=window.prompt("Xin chào! Bạn tên gì?",""); document.write("Xin chào bạn " + name + " ! Chúc bạn học tốt JavaScript ");

KHOA CÔNG NGHỆ THÔNG TIN 34

Hình 3-1 Kết quả hộp thoại hỏi tên người dùng

3.2.5 Hỏi đáp người sử dụng – Lệnh confirm()

Lệnh confirm() tạo ra 1 hộp thoại gồm 1 dòng thông báo, nút OK và nút

Người dùng có thể nhấn OK để thực hiện hành động theo yêu cầu, trong khi nếu chọn Cancel, hộp thoại thông báo sẽ bị đóng lại.

Thường sử dụng trong các trường hỏi đáp, xác nhận quyết định xử lý thông tin từ phía người dùng

Cú pháp: confirm("Câu thông báo hỏi ?");

Ví dụ 6: Tạo trang (HoiDap.html) như sau

function Hoidap(){ question = confirm("Bạn thật sự muốn truy cập Website") if (question !="0"){ top.location = "http://www.ktkthcm.edu.vn"

KHOA CÔNG NGHỆ THÔNG TIN 35

Hãy click vào đây để truy cập website: Trường Cao đẳng Kinh tế Kỹ thuật TPHCM

Biến, kiểu dữ liệu, biểu thức, toán tử

Giống như các ngôn ngữ lập trình khác, JavaScript sử dụng biến để lưu trữ các giá trị nhập vào và kết quả tính toán Nói cách khác, biến là vùng nhớ được sử dụng để lưu trữ các giá trị khác nhau trong suốt quá trình hoạt động của chương trình.

Mỗi biến có một tên, Tên biến trong JavaScript phải bắt đầu bằng ký tự Phạm vi của biến có thể là một trong hai kiểu sau:

• Biến toàn cục: Có thể được truy cập từ bất kỳ đâu trong ứng dụng Được khai báo: x = 0;

Biến cục bộ chỉ có thể được truy cập trong phạm vi của chương trình nơi nó được khai báo Để khai báo một biến cục bộ trong hàm, ta sử dụng từ khóa var, ví dụ: var x = 0;

JavaScript khác với C++ và Java ở chỗ nó là ngôn ngữ định kiểu thấp, cho phép người dùng không cần chỉ định kiểu dữ liệu cho biến Kiểu dữ liệu sẽ được tự động chuyển đổi thành kiểu phù hợp khi cần thiết.

Ví dụ 1: Tạo trang (DataType.htm) như sau

var a='Trái Cam '; var nR; n = n + 47; var tb ="Có tất cả " + n + " " + a; document.write(tb);

KHOA CÔNG NGHỆ THÔNG TIN 36

Hình 3-2 Kết quả tính tổng

Trong JavaScript, có bốn kiểu dữ liệu sau đây:

Số nguyên có thể được biểu diễn qua ba hệ cơ số chính: hệ thập phân (hệ cơ số 10), hệ bát phân (hệ cơ số 8) và hệ thập lục phân (hệ cơ số 16), trong đó hệ thập lục phân thường được ký hiệu bằng hai chữ số đầu tiên là 0x, ví dụ như 0x5F.

 Kiểu dấu phẩy động (Floating Point)

Một biến có kiểu dấu phẩy động có 4 thành phần sau: Phần nguyên thập phân Dấu chấm thập phân (.) Phần dư Phần mũ

Kiểu logic được sử dụng để chỉ hai điều kiện : đúng hoặc sai Miền giá trị của kiểu này chỉ có hai giá trị : true , false

Một biến kiểu chuỗi biểu diễn bởi không hay nhiều ký tự đặt trong cặp dấu " " hay ' '

Ghi chú: Để biểu diễn dấu nháy kép ( " ), trong chuỗi sử dụng ( \" ),

Ví dụ 3: document.write(“ \”This text inside quotes.\” ”);

3.3.3 Lệnh, khối lệnh trong JavaScript

Các câu lệnh trong JavaScript kết thúc bằng một dấu chấm phẩy (;)

KHOA CÔNG NGHỆ THÔNG TIN 37

Một khối lệnh là đoạn chương trình gồm hai lệnh trở lên và được đặt trong cặp ngoặc nhọn: { }

Bên trong một khối lệnh có thể chứa một hay nhiều khối lệnh khác

… } // kết thúc khối lệnh 2 lệnh 1.1 lệnh 1.2

3.3.4 Toán tử & Biểu thức trong JavaScript

3.3.4.1 Đị nh ngh ĩ a và phân lo ạ i bi ể u th ứ c

Biểu thức (expression) là tập hợp các biến và toán tử dùng để đánh giá một giá trị cụ thể Có ba kiểu biểu thức cơ bản mà người dùng cần nắm vững.

 Số học: Nhằm để lượng giá giá trị số VÍ Dụ: (3+4)+(84.5/3) bằng

 Chuỗi: Nhằm để đánh giá chuỗi ví dụ: "The dog”+”barked!" là “The dog barked!”

 Logic: Nhằm đánh giá giá trị logic ví dụ: 23>32 là False

Ngòai ra JavaScript cũng hỗ trợ biểu thức điều kiện, cú pháp như sau:

Nếu điều kiện condition là đúng, biểu thức nhận giá trị valTrue, ngược lại nhận giá trị là False

Ví dụ 3: ketqua = (diemtb>=5) ? "Đậu" : "Rớt"

Trong ví dụ này biến ketqua được gán giá trị "Đậu" nếu giá trị của biến diemtb lớn hơn hoặc bằng 5; ngược lại nó nhận giá trị "Rớt"

KHOA CÔNG NGHỆ THÔNG TIN 38

Toán tử được sử dụng để thực hiện một phép toán Được nhóm thành các loại sau đây: gán, so sánh, số học, chuỗi và logic

Bảng 3-1 Bảng các toán tử

= Gán giá trị của toán hạng bên phải cho toán hạng bên trái

== (Bằng)Trả lại giá trị đúng nếu toán hạng bên trái bằng toán hạng bên phải

!= (Khác)Trả lại giá trị đúng nếu toán hạng bên trái khác toán hạng bên phải

> Trả lại giá trị đúng nếu toán hạng bên trái lớn hơn toán hạng bên phải

>= (Lớn hơn hoặc bằng)Trả lại giá trị đúng nếu toán hạng bên trái lớn hơn hoặc bằng toán hạng bên phải

< Trả lại giá trị đúng nếu toán hạng bên trái nhỏ hơn toán hạng bên phải

Nhấp chuột phải (xuất hiện thực đơn ngữ cảnh) -> Chọn Set As Start Page

 Xác định Project khởi động (trong trường hợp Solution có nhiều Project): Chọn Set as StartUp Project từ thực đơn ngữ cảnh

Hiển thị cửa số Properties Window: Thực đơn View | Properties Window

Hiển thị Toolbox: Thực đơn View | Toolbox

Thông qua cửa sổ thuộc tính, chúng ta có thể thiết lập thuộc tính cho trang web và các đối tượng có trong trang web

KHOA CÔNG NGHỆ THÔNG TIN 76

Server Controls - Các điều khiển chuẩn

4.6.1 HTML Control Điều khiển HTML (tag HTML) trong trang ASP.Net có thể xem như những chuỗi văn bản bình thường Để có thể được sử dụng lập trình ở phía Server, ta gán thuộc tính runat="Server" cho các điều khiển HTML đó Những điều khiển HTML (tag HTML) có thuộc tính runat="Server" được gọi là HTML Server Control

KHOA CÔNG NGHỆ THÔNG TIN 77

ASP.Net Page là thành phần chính của giao diện trong ASP.Net Web Control, nơi chứa các điều khiển và thể hiện nội dung trang web đến người dùng.

Sự kiện Page_Init xảy ra đầu tiên khi trang web được yêu cầu protected void MainContent_Init(object sender, EventArgs e)

//Do not modify it using the code editor

KHOA CÔNG NGHỆ THÔNG TIN 78

This event is where most of the processing and initial values for the website are set It occurs every time the website is requested The relevant code for this is: protected void Page_Load(object sender, EventArgs e).

//Put user code to initialize the page here

Sự kiện này xảy ra khi trang Web chuẩn bị được trả về cho Client protected void MainContent_PreRender(object sender, EventArgs e)

The Page_Unload event serves as the final event in the page lifecycle, occurring after all other events have taken place, in contrast to the Page_Init event, which is triggered first when a web page is requested The syntax for handling this event is: protected void MainContent_Unload(object sender, EventArgs e).

Thuộc tính IsPostBack là một thuộc tính kiểu luận lý, cho biết trạng thái của trang Web khi được tải Nếu đây là lần tải đầu tiên, giá trị của IsPostBack sẽ là False Thuộc tính này thường được sử dụng trong sự kiện Page_Load để kiểm tra trạng thái của trang Web, với cú pháp: protected void Page_Load(object sender, EventArgs e).

KHOA CÔNG NGHỆ THÔNG TIN 79

Lb.Text=”Đây là lần đầu tiên”; else

Lb.Text=”Đây là lần yêu cầu”;

Khi nội dung trang Web vượt quá kích thước hiển thị và bạn đang đọc ở giữa trang, việc tải lại trang sẽ đưa bạn về phần đầu trang Tuy nhiên, nếu thuộc tính này được đặt là True, trình duyệt sẽ giữ nguyên vị trí bạn đang đọc sau khi tải lại Đây là một thuộc tính kiểu luận lý với giá trị mặc định là False.

Dưới đây là các lý do bạn nên sử dụng ASP.Net Web Control:

 Đơn giản, tương tự như các điều khiển trên Windows Form

 Đồng nhất: Các điều khiển Web server có các thuộc tính giống nhau -> dễ tìm hiểu và sử dụng

 Hiệu quả: Các điều khiển Web Server tự động phát sinh ra các tag HTML theo từng loại Browser

KHOA CÔNG NGHỆ THÔNG TIN 80

Bảng 4-2 Thuộc tính chung của web Control b Label

Label được sử dụng để hiển thị nội dung trên trang web, với nội dung được xác định qua thuộc tính Text Thuộc tính này có khả năng nhận và hiển thị nội dung cùng với các thẻ HTML.

Ví dụ về cách sử dụng các điều khiển trong lập trình: lblA.Text hiển thị chuỗi văn bản thường, trong khi lblB.Text thể hiện chuỗi văn bản được in đậm Ngoài ra, điều khiển HyperLink được sử dụng để tạo ra các liên kết siêu văn bản.

ImageURL: Qui định hình hiển thị trên điều khiển

KHOA CÔNG NGHỆ THÔNG TIN 81

Khi cả hai thuộc tính ImageURL và Text được thiết lập, thuộc tính ImageURL sẽ được ưu tiên hiển thị trên điều khiển Thuộc tính Text sẽ được sử dụng để hiển thị dưới dạng Tooltip.

NavigateUrl: Đường dẫn cần liên kết đến

Target: Xác định cửa sổ sẽ hiển thị cho mối liên kết

_blank: Hiển thị trang liên kết ở một cửa sổ mới

_self: Hiển thị trang liên kết tại chính cửa sổ chứa liên kết đó

_parent: Hiển thị trang liên kết ở frame cha

Ví dụ: hplASP_net.Text = "Trang chủ ASP.Net"; hplASP_net.ImageUrl = "Hinh\Asp_net.jpg"; hplASP_net.NavigateUrl = http://www.asp.net; hplASP_net.Target = "_blank"; d TextBox

TextBox là điều khiển được dùng để nhập và hiển thị dữ liệu TextBox thường được sử dụng nhiều với các ứng dụng trên windows form

 Text: Nội dung chứa trong Textbox

 TextMode: Qui định chức năng của Textbox, có các giá trị sau:

SingleLine: Hiển thị và nhập liệu 1 dòng văn bản

MultiLine: Hiển thị và nhập liệu nhiều dòng văn bản

Password: Hiển thị dấu * thay cho các ký tự có trong Textbox

 Rows: Trong trường hợp thuộc tính TextMode = MultiLine, thuộc tính Rows sẽ qui định số dòng văn bản được hiển thị

 Maxlength: Qui định số ký tự tối đa được nhập vào cho TextBox

Thuộc tính Wrap xác định khả năng tự động xuống dòng của văn bản khi kích thước ngang của điều khiển không đủ để hiển thị nội dung Giá trị mặc định của thuộc tính này là True, cho phép văn bản tự động xuống dòng.

KHOA CÔNG NGHỆ THÔNG TIN 82

AutoPostBack là thuộc tính xác định liệu điều khiển có được phép tự động gửi dữ liệu về Server khi nội dung trong Textbox thay đổi hay không, với giá trị mặc định là False, tức là không tự động PostBack Điều khiển Image được sử dụng để hiển thị hình ảnh trên trang Web.

 ImageURL: Đường dẫn đến tập tin hình ảnh cần hiển thị

 AlternateText: Chuỗi văn bản sẽ hiển thị khi tập tin được thiết lập trong thuộc tính ImageURL không tồn tại

ImageAlign: Vị trí hiển thị giữa hình và nội dung văn bản Gồm các giá trị: NotSet, Left, Middle, TextTop, Right f Button, ImageButton, LinkButton

- Các điều khiển Button, ImageButton, LinkButton mặc định đều là các nút Submit Button, mỗi khi được nhấn vào sẽ PostBack về Server

- Khi chúng ta thiết lập giá tri thuộc tính CommandName cho các điều khiển này, chúng ta gọi tên chung cho các điều khiển này là Command Button

Bảng 4-3 Bảng thuộc tính chung Button, ImageButton, LinkButton

KHOA CÔNG NGHỆ THÔNG TIN 83

Chúng ta sẽ tìm hiểu 2 thuộc tính CommandName và CommandArgument ở phần sau

Ngoài những thuộc tính trên, điều khiển ImageButton còn có các thuộc tính ImageURL, ImageAlign và AlternateText như điều khiển Image g Listbox và DropdownList

ListBox và DropdownList là các điều khiển hiển thị danh sách lựa chọn cho phép người dùng chọn một hoặc nhiều mục (đối với ListBox) Người dùng có thể thêm các mục vào danh sách thông qua lệnh hoặc cửa sổ thuộc tính.

AutoPostBack là thuộc tính quy định việc điều khiển có cho phép tự động gửi dữ liệu về Server khi chỉ số của mục chọn thay đổi Mặc định, giá trị của thuộc tính này là False, tức là không tự động thực hiện PostBack.

Items là tập hợp các mục chọn trong điều khiển, cho phép người dùng thêm mục chọn trong quá trình thiết kế thông qua cửa sổ ListItem Collection Editor hoặc bằng lệnh.

 Rows: Qui định chiều cao của ListBox theo số dòng hiển thị

Thuộc tính SelectionMode trong ListBox xác định phương thức chọn các mục Lưu ý rằng SelectionMode chỉ có thể được thay đổi trong quá trình thiết kế; trong thời gian thực thi chương trình, thuộc tính này chỉ có thể được đọc.

Single: Chỉ được chọn một mục có trong danh sách (mặc định)

Multiple: Cho phép chọn nhiều lựa chọn

Điều khiển GridView

DataGrid là một công cụ linh hoạt và hiệu quả để hiển thị và thao tác dữ liệu Nó hỗ trợ tốt việc sắp xếp và phân trang dữ liệu, đặc biệt trong quá trình thiết kế với Visual Studio Net.

4.7.1 Các thao tác định dạng lưới Để thực hiện các thao tác định dạng, chúng ta chọn chức năng Property Builder… từ thực đơn ngữ cảnh a Trang General

Trong trang này, có các mục chọn sau:

 Show header: Qui định dòng tiêu đề trên có được phép hiển thị hay không (mặc định là có hiển thị dòng tiêu đề)

 Show footer: Qui định dòng tiêu đề dưới có được phép hiển thị hay không (mặc định là không hiển thị dòng tiêu đề dưới)

 Allow sorting: Có cho phép sắp xếp dữ liệu hay không (mặc định là không cho phép sắp xếp) b Trang Columns (Qu ả n lý thông tin các c ộ t)

Trang Columns quản lý thông tin các cột sẽ hiển thị trên lưới

Khi chọn chức năng tự động tạo cột tại thời điểm chạy, DataGrid sẽ phát sinh tất cả các cột từ nguồn dữ liệu Nếu bạn muốn xác định các cột cụ thể cần hiển thị, hãy không chọn chức năng này.

Column list: Qui định các cột được hiển thị trong lưới

KHOA CÔNG NGHỆ THÔNG TIN 92

 Bound Column: Cột có liên kết với nguồn dữ liệu

 Button Column: Cột dạng nút lệnh đã được thiết kế sẵn Điều khiển DataGrid cung cấp cho chúng ta 3 loại cột dạng này:

• Select: Nút lệnh chọn dòng dữ liệu

• Edit, Cancel, Update: Các nút lệnh hỗ trợ chức năng cập nhật dữ liệu trực tiếp trên lưới

• Delete: Nút lệnh xóa dòng dữ liệu

Chúng ta sẽ có dịp tìm hiểu kỹ hơn về các nút lệnh này trong phần Cập nhật dữ liệu trực tiếp trên lưới

 Hyperlink Column: Cột có liên kết dữ liệu dạng liên kết

KHOA CÔNG NGHỆ THÔNG TIN 93

 Template Column: Cột do người dùng tự thiết kế Đây là loại cột có khả năng làm việc khá linh hoạt

Khi cần hiển thị danh sách khách hàng mà không muốn hiển thị trực tiếp giới tính Nam/Nữ ở cột Phái, bạn có thể sử dụng điều khiển checkbox thay thế Nếu checkbox được chọn, nó sẽ thể hiện phái Nam, và ngược lại Trong trường hợp này, TemplateColumn là sự lựa chọn tối ưu cho bạn.

Chúng ta sẽ tìm hiểu sâu hơn về Template Column ở phần sau

 BoundColumn properties: Qui định thông tin chi tiết cho các cột

• HeaderText, Footer Text: Thông tin tiêu đề trên/dưới của cột

KHOA CÔNG NGHỆ THÔNG TIN 94

• Header Image: Hình hiển thị trên tiêu đề cột (thay thế thông tin tiêu đề cột - Header Text)

• Sort Expression: Biểu thức sắp xếp của cột

• Visible: Qui định cột có được hiển thị hay không

• DataField: Qui định tên field hay tên thuộc tính của đối tượng dữ liệu cần hiển thị

• Data formatting expression: Biểu thức định dạng dữ liệu

Mẫu định dạng: {0:} Ví dụ:

+ Định dạng ngày giờ: {0:dd/MM/yyyy}, {0:hh/mm/ss tt}

• Read Only: Chọn giá trị này để cột chỉ được phép đọc, không cho phép cập nhật dữ liệu

 Convert this column into a Template Column: Chuyển cột hiện hành thành cột dạng Template Column c Trang Paging (Qu ả n lý phân trang)

Trang này quản lý việc phân trang của DataGrid

KHOA CÔNG NGHỆ THÔNG TIN 95

 Allow paging: Có cho phép phân trang hay không

 Page size: Qui định số dòng của mỗi trang

 Show navigation buttons: Có hiển thị bộ nút để di chuyển từ trang này qua trang khác hay không Giá trị mặc định là True

 Possition: Qui định vị trí hiển thị của bộ nút di chuyển Ở phía trên thanh tiêu đề, ở phía dưới hay cả hai

Chế độ hiển thị của bộ nút di chuyển xác định cách thức hiển thị, có thể là số trang hoặc các chuỗi ký tự như "Tiếp theo" và "Trở lại" Nếu chọn hiển thị dạng số, các nút số sẽ được quy định với số lượng tối đa mà có thể hiển thị.

Trang Format quản lý việc định dạng hiển thị trên điều khiển DataGrid Các định dạng chung như:

Màu chữ, màu nền, Font chữ, kích cỡ, in đậm /in nghiêng/gạch dưới và canh lề

KHOA CÔNG NGHỆ THÔNG TIN 96

 DataGrid: Qui định các định dạng chung cho lưới

 Header: Định dạng cho dòng tiêu đề

 Footer: Định dạng cho dòng tiêu đề dưới

 Pager: Định dạng cho dòng chứa các nút lệnh phân trang

Normal Items: Định dạng cho các dòng dữ liệu

Alternating Items: Định dạng hiển thị cho các dòng lẻ

Selected Items:Định dạng hiển thị cho dòng đang được chọn

Edit Mode Items: Định dạng hiển thị cho dòng đang ở trạng thái hiệu chỉnh dữ liệu

 Columns: Qui định độ rộng và các định dạng riêng cho từng cột e Trang Borders (Khung vi ề n)

Trang Borders quản lý việc kẻ khung viền cho lưới

KHOA CÔNG NGHỆ THÔNG TIN 97

Hình 4-21 Hình canh chỉnh Borders

Sắp xếp dữ liệu trên lưới là một công việc cần thiết giúp người dùng dễ dàng tìm kiếm thông tin quan trọng, chẳng hạn như danh sách nhân viên có thâm niên làm việc lâu nhất hoặc số giờ tham gia đề án nhiều nhất Chức năng sắp xếp này tối ưu hóa trải nghiệm người dùng bằng cách cho phép họ nhanh chóng chọn ra các nhân viên phù hợp với yêu cầu Để thực hiện thao tác sắp xếp dữ liệu, cần tiến hành một số bước cụ thể.

Giá trị thuộc tính Allow sorting = True

KHOA CÔNG NGHỆ THÔNG TIN 98

Nhập giá trị cho thuộc tính Sort expression của các cột cần sắp xếp

Xử lý sự kiện protected void Grid_Sorting(object sender, GridViewSortEventArgs e)

Trong sự kiện trên, giá trị e.SortExpression cho biết thông tin của cột được chọn sắp xếp

Ví dụ: protected void Page_Load(object sender, EventArgs e)

{ get { return ViewState["SortDirection"] != null ? ViewState["SortDirection"].ToString() : "ASC"; } set { ViewState["SortDirection"] = value; }

} void LoadNV(string sortExpression = null)

DataTable dt = new DataTable(); string str = "SELECT * FROM NHANVIEN"; dt = cls.getTable(str); if (dt.Rows.Count > 0)

KHOA CÔNG NGHỆ THÔNG TIN 99 if (sortExpression != null)

DataView dv = dt.AsDataView(); this.SortDirection = this.SortDirection == "ASC" ? "DESC" : "ASC"; dv.Sort = sortExpression + " " + this.SortDirection; this.Grid.DataSource = dv;

} protected void Grid_PageIndexChanging(object sender, GridViewPageEventArgs e)

//Chỉ số trang vừa chọn nằm trong e.NewPageIndex

Grid.PageIndex = e.NewPageIndex;//Đặt lại chỉ số trang vừa chọn

} protected void Grid_Sorting(object sender, GridViewSortEventArgs e)

KHOA CÔNG NGHỆ THÔNG TIN 100

Hình 4-22 Danh sách nhân viên sắp xếp 4.7.3 Xử lý phân trang

Phân trang dữ liệu không chỉ giúp người dùng dễ dàng xem và tìm kiếm thông tin, mà còn giảm thiểu khối lượng dữ liệu cần truyền tải từ Server đến Client Việc áp dụng phân trang trong quản lý dữ liệu là rất cần thiết để tối ưu hóa hiệu suất và trải nghiệm người dùng.

Để thực hiện phân trang trong ASP.Net, bạn chỉ cần thực hiện một số thao tác đơn giản Quá trình này bao gồm việc xác định số lượng bản ghi trên mỗi trang và sử dụng các phương thức để lấy dữ liệu theo từng trang một cách hiệu quả.

Qui định các thông số cần thiết cho việc phân trang (xem Quản lý phân trang ở phần Các thao tác định dạng lưới)

Xử lý sự kiện PageIndexChanging(object sender, GridViewPageEventArgs e)

Trong sự kiện trên, giá trị e.NewPageIndex cho biết trang được chọn để hiển thị dữ liệu

KHOA CÔNG NGHỆ THÔNG TIN 101

Code C# xử lý: protected void Grid_PageIndexChanging(object sender, GridViewPageEventArgs e) {

//Chỉ số trang vừa chọn nằm trong e.NewPageIndex

Grid.PageIndex = e.NewPageIndex;//Đặt lại chỉ số trang vừa chọn

Kết quả sau khi phân trang:

Hình 4-23 Kết quả phân trang 4.7.4 Tùy biến các cột

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tùy biến các cột trên lưới, cụ thể là hiển thị checkbox thay vì giá trị True/False cho cột giới tính Để thực hiện việc này, bạn cần thực hiện hai giai đoạn sau.

Trong giai đoạn này, chúng ta có thể tùy biến cột theo yêu cầu cụ thể, sử dụng điều khiển Checkbox để thay thế cho các cột có giá trị luận lý Bên cạnh đó, chúng ta cũng có thể sử dụng điều khiển Image, Image button hoặc Hyperlink để hiển thị hình ảnh thay vì chỉ hiển thị chuỗi đường dẫn đến hình ảnh đó.

KHOA CÔNG NGHỆ THÔNG TIN 102

Sau khi hoàn thành giai đoạn thiết kế, chúng ta cần viết các lệnh xử lý để hiển thị dữ liệu theo yêu cầu.

Bước 1 Thêm mới cột Phái, kiểu Template Column Nhập giá trị Header text, Sort expression cho cột này (nếu cần)

Hình 4-24 Bổ sung cột phái

Bước 2 Từ thực đơn ngữ cảnh, chọn Edit Template \ Column[X] –YYY

(X: Số thứ tự của cột; Y: Chuỗi tiêu đề của cột)

Chúng ta chọn cột cần hiệu chỉnh

Bước 3 Thêm điều khiển checkbox chkPhai, vào mục ItemTemplate

KHOA CÔNG NGHỆ THÔNG TIN 103

Bước 4 Chọn End Template Editing từ thực đơn ngữ cảnh sau khi thiết kế xong

Khác với Bound column, cột kiểu Template column không tự động hiển thị dữ liệu

Để hiển thị dữ liệu từ nguồn dữ liệu trong các điều khiển mới được tạo, cần phải xác định các trường cần hiển thị Do đó, việc viết lệnh xử lý trong sự kiện là cần thiết để đảm bảo dữ liệu được hiển thị theo ý muốn của người dùng.

Mã lệnh xử lý: protected void grid_RowDataBound(object sender, GridViewRowEventArgs e) { DataRowView row; if (e.Row.RowType == DataControlRowType.DataRow)

// Tinh trang nam hay nữ

CheckBox chk = (CheckBox)(e.Row.FindControl("chkPhai"));

KHOA CÔNG NGHỆ THÔNG TIN 104 if (row["Gioi_Tinh"]==True) chk.Checked=true; else chk.Checkedse;

Trước khi khám phá các lệnh xử lý trong đoạn mã, chúng ta cần hiểu sự kiện RowDataBound của DataGrid Sự kiện này xảy ra ngay khi phương thức DataBind được gọi, và điều này đòi hỏi chúng ta phải gán nguồn dữ liệu cho lưới trước đó Mỗi dòng dữ liệu sẽ kích hoạt một sự kiện tương ứng.

4.7.5 Cập nhật dữ liệu trực tiếp trên lưới

Trong ASP.Net, việc cập nhật dữ liệu trực tiếp trên lưới được hỗ trợ tốt về giao diện Nhiệm vụ của chúng ta là thiết kế các nút lệnh như: Chọn, Sửa/Ghi, Hủy, và viết các lệnh để cập nhật dữ liệu.

Trong cửa sổ thuộc tính của lưới, chúng ta thiết lập bộ nút lệnh cần thiết để hỗ trợ việc cập nhật dữ liệu Cụ thể, chúng tôi đã tạo ra các nút như (Select - chọn), (Edit - chỉnh sửa), (Update - cập nhật) và (Cancel - hủy).

Khi sử dụng các nút lệnh như Sửa, Ghi, và Hủy, bạn cần chú ý đến giá trị của thuộc tính CommandName Mỗi nút lệnh sẽ có một giá trị CommandName khác nhau, từ đó giúp bạn viết lệnh xử lý tương ứng với chức năng mà bạn đã chọn.

 Edit, Update/Cancel: Command name = "Edit", "Update"/"Cancel"

KHOA CÔNG NGHỆ THÔNG TIN 105

Hình 4-25 Giao diện tạo các lệnh thêm/ xóa/ sửa

Tìm hiểu về thuộc tính Command Name

Điều khiển DataList

4.8.1 Sử dụng DataList để hiển thị dữ liệu

Giống như DataGrid, điều khiển DataList cũng được sử dụng để hiển thị dữ liệu, nhưng yêu cầu người dùng tự thiết kế hình thức hiển thị dữ liệu, tương tự như Template Column trong DataGrid.

Một số thuộc tính cần chú ý của DataList:

 RepeatDirection: Qui định hướng hiển thị dữ liệu

• Horizontal: Hiển thị dữ liệu theo chiều ngang lbmsg.Text = _matv; if (e.CommandName == "New")

KHOA CÔNG NGHỆ THÔNG TIN 111

• Vertical (mặc định): Hiển thị dữ liệu theo chiều đứng

 RepeatColumns: Qui định số cột hiển thị của DataList

Thiết kế hình thức hiển thị cho DataList cũng tương tự như thiết kế cho cột Template Column của DataGrid

Chọn Edit Template | ItemTemplate từ thực đơn ngữ cảnh để thực hiện thiết kế hình thức hiển thị cho DataList

Ví dụ: Hiển thị thông tin sách với DataList

Trong DataList, việc hiển thị dữ liệu được xử lý thông qua sự kiện ItemDataBound, tương tự như cột Template Column trong DataGrid Ngoài ra, các sự kiện nhấn vào Button trong DataList được quản lý qua sự kiện ItemCommand.

KHOA CÔNG NGHỆ THÔNG TIN 112

>> DANH MỤC SẢN PHẨM

Mã:

Đơn giá

KHOA CÔNG NGHỆ THÔNG TIN 113

• Code C# protected void Page_Load(object sender, EventArgs e)

ClsData cls = new ClsData(); dt = cls.getTable("select * from SANPHAM");

//dt = Loadproduct_en(changeid().Trim()); if (dt.Rows.Count > 0)

Kết quả hiển thị thông tin sách trên trang Web

KHOA CÔNG NGHỆ THÔNG TIN 114

Hình 4-26 Hiển thị danh sách sản phẩm 4.8.2 Cập nhật dữ liệu với DataList

DataList không chỉ hiển thị dữ liệu mà còn cho phép cập nhật thông tin Để thực hiện chức năng này, cần thiết kế thêm vùng EditItemTemplate cho DataList.

Ví dụ Edit trên DataList

KHOA CÔNG NGHỆ THÔNG TIN 115

Text='' runat="server" />

Text='' runat="server" />

KHOA CÔNG NGHỆ THÔNG TIN 116

Text='' runat="server" />

0)

{ rptnv.DataSource = dt; rptnv.DataBind();

Bài tập áp dụng

1 Viết chương trình hiển thị danh sách sinh viên từ cơ sở dữ liệu? Khi người dùng chọn vào một 1 sinh viên thì thông tin sinh viên đó hiển thị ở trang chi tiết thông tin sinh viên?

2 Viết chương trình hiển thị danh sách sản phẩm trên DataList và cho phép phân trang? Khi người dùng muốn xem chi tiết sản phẩm thì click vào tên sản phẩm đó, chuyển trang sang chi tiết sản phẩm?

KHOA CÔNG NGHỆ THÔNG TIN 126

Xây dựng và quản lý ứng dụng

Xây dựng các thành phần truy xuất dữ liệu

Web Services