Bài giảng thiết kế và lập trình web bằng ngôn ngữ ASP

Lý thuyết: 45 tiết Thực hành: 30 tiết • GVHD: Dương Khai Phong • Email: khaiphong@gmail.com • Website: http://sites.google.com/site/khaiphong 1/ Giới thiệu tổng quan Web 2/ HTML JavaScript 3/ Các đối tượng ASP.Net 4/ ADO.Net (kết nối sở liệu) 5/ Triển khai ứng dụng Web + Ôn tập PHẦN 1: Webpage – Website HTML, XHTML, DHTML Các ngôn ngữ lập trình web Web Server – Web Browser – HTTP Mô hình ứng dụng Quá trình Request - Respone a Webpage:  Web hệ thống văn có mối siêu liên kết bên với (interlinked hypertext documents) truy xuất thông qua hệ thống Internet  Webpage trang thông tin chứa: văn (text), hình ảnh (images), phim (videos) đa phương tiện khác…có mối siêu liên kết với (hyperlinks)  Một trang web tập tin HTML XHTML truy xuất thông qua giao thức HTTP b Website:  Website tập hợp trang web nằm tên miền tên miền phụ WWW hệ thống mạng Internet Phân loại: • Website tĩnh: chủ yếu giới thiệu thông tin • Website động: có tương tác với người dùng WEBSITE WEB PAGE Trang chủ WEB PAGE Giới thiệu WEB PAGE Tin tức WEB PAGE Liên hệ WEB PAGE Quảng cáo WEB PAGE Sản phẩm WEB PAGE Hình ảnh WEB PAGE Menu WEB PAGE Sự kiện WEB PAGE Videos a HTML:  HTML viết tắt HyperText Markup Language (ngôn ngữ đánh dấu siêu văn bản)  HyperText – văn kết nối đến văn khác  Sử dụng “thẻ” để “đánh dấu” văn bản, giúp trình duyệt xác định cách biểu diễn trang web đến người sử dụng  Một tập tin HTML tập tin văn có chứa thẻ đánh dấu (các tập tin có phần mở rộng *.htm *.html) b XHTML:  XHTML viết tắt eXtensible HyperText Markup Language (ngôn ngữ đánh dấu siêu văn mở rộng): ngôn ngữ đánh dấu tương tự ngôn ngữ HTML có cú pháp chặt chẽ  XHTML xem hệ HTML dựa chuẩn XML c DHTML:  DHTML viết tắt Dynamic HyperText Markup Language (ngôn ngữ đánh dấu siêu văn động)  Là ngôn ngữ dùng tạo trang web dựa kết hợp nhiều kỹ thuật như: ngôn ngữ HTML tĩnh, ngôn ngữ kịch máy khách (Javascript), ngôn ngữ định dạng trình diễn Cascading Style Sheets (CSS) Document Object Model (DOM)  DHTML cho phép người dùng thêm hiệu ứng vào trang web mà HTML không thực a Giới thiệu:  Các đối tượng javascript hỗ trợ: Array Math Date String … Window objects Document Event Frames History Location Navigator Screen b • • • • c  Đối tượng bản: Array: đối tƣợng dùng quản lí danh sách mảng Math: đối tƣợng liên quan đến phép tính toán học String: đối tƣợng dùng để thao với chuỗi văn Date: đối tƣợng liên quan đến ngày Đối tượng trình duyệt: window:  Công dụng: dùng quản lý thông tin tất đối tƣợng cửa sổ trình duyệt  Các thuộc tính bản: đối tƣợng window đƣợc xem đối tƣợng (base class) tất đối tƣợng khác  Các phương thức bản: alert(), blur(), close(), open(), focus(), navigate() c Đối tượng trình duyệt:  document:  Công dụng: dùng quản lý thông tin tài liệu HTML cửa sổ trình duyệt (đƣợc xem đối tƣợng window)  Các thuộc tính phương thức: Các thuộc tính: • alinkColor • bgColor • Body • fgColor • linkColor • location • Title • URL • vlinkColor Các phƣơng thức: • clear() • close() • open() • write() • writeln() c Đối tượng trình duyệt:  history:  Công dụng: dùng quản lý danh sách URL duyệt  Các thuộc tính phương thức: Các thuộc tính: • current • length • next • previous Các phƣơng thức: • back() • forward() • go(relPos string) c Đối tượng trình duyệt:  location:  Công dụng: dùng quản lý thông tin URL  Các thuộc tính phương thức: Các thuộc tính: • hash • host • hostname • href Các phƣơng thức: • reload() • replace(URL) a Giới thiệu:  Javascript quản lý tƣơng tác ngƣời dùng trình duyệt thông qua quản lý kiện (Event) Form đối tƣợng Form b Sự kiện: (Event)  Sự kiện kết thao tác ngƣời dùng tác động lên đối tƣợng  Một kiện bao gồm thông tin:  Kiểu kiện: click, double click, change,  Vị trí trỏ thời điểm xảy kiện  Các kiện thƣờng gặp: • • • • • • onClick onChange onFocus onBlur onSelect onMouseOver • • • • • • onMouseOut onLoad onUnload onSubmit onMouseDown onMouseUp c Các kiện đối tượng:  Đối tượng window: (onLoad - onUnload)  Công dụng: kiện xảy ngƣời dùng mở trang đóng trang  Ví dụ: viết trang ngƣời dùng mở trang hiển thị thông báo nhập Tên  xuất “Hi, welcome my pages”, sau đóng trang hiển thị thông báo “Good bye, see you again !” var name = ""; function hello() { name = prompt('Enter Your Name:','Name'); alert('Hi ' + name + ', welcome to my page!'); } function goodbye() { alert('Goodbye ' + name + ', see you again!'); } c Các kiện đối tượng:  Đối tượng form:  Sự kiện form đƣợc xử lý phụ thuộc vào yếu tố sau: • Thuộc tính kiện form: Action, Method, … • Việc xử lý kiện đối tƣợng (button, textbox, ) bên form: onSubmid, onClick, onBlur, onChange, …  Ví dụ chu trình kiện form: c Các kiện đối tượng:  Đối tượng form:  Ví dụ chu trình kiện form: Ngƣời dùng tác động lên Form Ngƣời dùng tác động lên đối tƣợng Form Bộ lắng nghe kiện Javascript hoạt động Ngƣời dùng thực thao tác xác nhận Form abcdef *****  OnMouseOver OnChange (tuỳ đối tượng) OnClick OnSubmit Xử lý Form phụ thuộc vào thuộc tính kiện c Các kiện đối tượng:  Đối tượng form:  Ví dụ chu trình kiện form:  Thuộc tính kiện:  Action: thuộc tính dùng để chuyển trang hành đến trang khác theo địa URL truyền vào  Method: phƣơng thức gởi nội dung đi: “get / post” OnMouseOver OnChange (tuỳ đối tượng) OnClick OnSubmit Xử lý Form phụ thuộc vào thuộc tính kiện d Các ví dụ xử lý kiện:  Ví dụ 1: thiết kế trang gồm button cho phép ngƣời dùng thay đổi màu trang nhƣ sau: d Các ví dụ xử lý kiện:  Ví dụ 2: thiết kế trang cho phép nhập thông tin họ tên năm sinh, xuất câu chào cho biết tuổi ngƣời đó: Muiten01 d Các ví dụ xử lý kiện:  Ví dụ 3: thiết kế trang gồm radio button cho phép ngƣời dùng thay đổi hình ảnh trang nhƣ sau: d Các ví dụ xử lý kiện:  Ví dụ 4: thiết kế trang cho phép ngƣời dùng đăng nhập, thành công cho phép ngƣời dùng xem sản phẩm trang sanpham.html [...]... hợp dữ liệu của người dùng và gởi đến Web Server  HTTP: là một giao thức dùng để trao đổi thông tin giữa Web Browser với Web Server Hành động gởi nội dung đến Web Server trong quá trình xử lý thông tin và sau đó Server trả kết quả về cho Web Browser thì được xem là Postback Ví dụ: các trang đăng nhập website, forum… Web Server Web Browser Default.aspx Thể hiện lên trang web Client gởi yêu cầu Server... Gởi kết quả Trình tự xử lý: 1 Web Browser (WB) ra yêu cầuHttp Request 2 HTTP gởi yêu cầu đến Web Server (WS) (GET) 3 Web Server xử lý yêu cầu 4 Web Server gởi hồi đáp (kết quả)Internet đến Web Browser (sử dụng giao thức HTTP để gởi HTTP response đến trình duyệt ) 5 Web Browser xử lý kết quả (response) và thể hiện lên trang Web 6 Khi người dùng nhập dữ liệu hoặc thực hiện một hành động gởi dữ liệu về Web. .. nhiều ngôn ngữ lập trình hỗ trợ cho việc viết các ứng dụng web chạy trên máy chủ (xây dựng các website động) như:  ASP (Active Server Pages): do Microsoft phát triển  JSP (Java Server Pages): IBM phát triển  PHP (Hypertext Preprocessor): cộng đồng phát triển (các tài liệu liên quan PHP được cung cập tại Zend)  Web Server: là nơi nhận và điều phối các yêu cầu từ Web Browser và gởi kết quả trả về  Web. .. liệu về Web Server (như click chuột Http vào nút lệnh Submit) Response Web Server Web Browser 7 Lúc đó HTTP được sử dụng để gởi dữ liệu đến Web Server (POST) 8 Web Server xử lý dữ liệu 9 Web Server gởi hồi đáp (kết quả) đến Web Browser (sử dụng giao thức HTTP để gởi HTTP response đến trình duyệt ) 10 .Trình duyệt xử lý kết quả (response) và thể hiện lên trang Web Lý thuyết: 45 tiết Thực hành: 30 tiết... HTML ta chỉ thiết kế đƣợc trang web để hiển thị thông tin, không tạo ra đƣợc sự tƣơng tác từ phía ngƣời dùng  JavaScript là ngôn ngữ kịch bản (do hãng Sun Microsystems và Netscape phát triển từ ngôn ngữ LiveScripts) dùng để tạo các client-side scripts và server- side scripts (có sự tƣơng tác với ngƣời dùng)  Mặc dù có những điểm tƣơng đồng giữa Java và JavaScipt , nhƣng chúng vẫn là hai ngôn ngữ riêng... trên trình duyệt tuổi của ngƣời này b Ví dụ: Cấu trúc lặp 1 Viết chƣơng trình nhập n, in ra trên trình duyệt bảng cửu chƣơng thứ n 2 Viết chƣơng trình nhập n, in ra in ra trên trình duyệt n bảng cửu chƣơng 3 Viết chƣơng trình nhập số dòng, số cột, in ra bảng biểu có số dòng và số cột đã nhập 4 Viết chƣơng trình nhập tháng, năm, in ra trên trình duyệt ra lịch của tháng và năm đó 5 Viết chƣơng trình. .. điều kiện 1 Viết chƣơng trình giải và biện luận phƣơng trình bậc 1 2 Viết chƣơng trình giải và biện luận phƣơng trình bậc 2 3 Nhập 3 cạnh tam giác a , b , c: cho biết loại tam giác là tam giác đều, cân, vuông cân, vuông, thƣờng 4 Viết chƣơng trình kiểm tra ngày, tháng, năm có hợp lệ? 5 Viết chƣơng trình nhập điểm TB, cho biết xếp loại: giỏi, khá, trung bình, yếu 6 Viết chƣơng trình nhập năm sinh, nếu... • Website: http://sites.google.com/site/khaiphong 1/ Giới thiệu tổng quan Web 2/ HTML và JavaScript 3/ Các đối tượng trong ASP. Net 4/ ADO.Net (kết nối cơ sở dữ liệu) 5/ Triển khai ứng dụng Web + Ôn tập PHẦN 2 (tiếp theo): (HTML và JAVASCRIPT) 1 Giới thiệu 2 Kiểu dữ liệu, hằng và biến 3 Các phép toán trong javascript 4 Các đối tƣợng hộp thoại trong javascript 5 Các cấu trúc điều khiển cơ bản 6 Mảng và. .. hoa và chữ thƣờng b Cách nhúng Javascript vào một trang HTML: JavaScript có thể chèn vào một tài liệu HTML theo những cách sau:  Sử dụng thẻ SCRIPT  Sử dụng một file JavaScript từ bên ngoài  Sử dụng các biểu thức JavaScript trong các giá trị thuộc tính của thẻ  Sử dụng JavaScript trong các trình điều khiển sự kiện b Cách nhúng Javascript vào một trang HTML: b.1> Sử dụng thẻ SCRIPT: • Khi trình. .. lệnh đó b Cách nhúng Javascript vào một trang HTML: b.1> Cú pháp sử dụng thẻ SCRIPT: … • Việc khai báo sử dụng ngôn ngữ Javascript có thể đặt bất kỳ vị trí nào trong cặp thẻ … Tuy nhiên, nên đặt các câu lệnh script trong phần và để đảm bảo tất cả các câu lệnh đều đƣợc đọc và biên dịch trƣớc khi nó đƣợc gọi ... Language (ngôn ngữ đánh dấu siêu văn động)  Là ngôn ngữ dùng tạo trang web dựa kết hợp nhiều kỹ thuật như: ngôn ngữ HTML tĩnh, ngôn ngữ kịch máy khách (Javascript), ngôn ngữ định dạng trình diễn... quan Web 2/ HTML JavaScript 3/ Các đối tượng ASP. Net 4/ ADO.Net (kết nối sở liệu) 5/ Triển khai ứng dụng Web + Ôn tập PHẦN 1: Webpage – Website HTML, XHTML, DHTML Các ngôn ngữ lập trình web Web... người dùng WEBSITE WEB PAGE Trang chủ WEB PAGE Giới thiệu WEB PAGE Tin tức WEB PAGE Liên hệ WEB PAGE Quảng cáo WEB PAGE Sản phẩm WEB PAGE Hình ảnh WEB PAGE Menu WEB PAGE Sự kiện WEB PAGE Videos