Thực hành lập trình Web

Lab 1: Xây dựng ứng dụng web đơn giản với Microsoft Visual Studio 2005 và ASP.NET Môi trường Microsoft Visual Studio 20052.1 Một số khái niệm cơ sở  Thêm control/tab vào toolbox Click p

Lab 1: Xây dựng ứng dụng web đơn giản với Microsoft Visual Studio 2005 và ASP.NET Môi trường Microsoft Visual Studio 2005

2.1 Một số khái niệm cơ sở

 Thêm control/tab vào toolbox (Click phải \ Add …)

 Kéo thả control vào form

 Properties

 Solution Explorer

 Thêm tham chiếu đến các thư viện (\ References)

 Đặt form bắt đầu (Set As Start Page)

 Class View

 Resource View

 Xem màn hình design form: Shift-F7, xem màn hình code: Ctrl-Alt-0

 Chạy chương trình: Ctrl-F5 (hoặc F5 với chế độ Debug)

 Debug: F11 (Step Into), F10 (Step Over), F9 (Set / Remove break point), xem giátrị biến (trỏ chuột vào biến, chọn thêm biến vào cửa sổ Watch)

2) Xây dựng ứng dụng

4.1 Tạo một Web site

 Từ Menu chọn File - New - Web site

 Template : ASP.NET Web site

 Location : File System

 Language : Visual C#

 Kéo thả các Control trong Toolbox vào WebForm.aspx như mẫu trên.

 Đặt thuộc tính cho các đối tượng trên Form:

4.3 Viết mã lệnh xử lý

 Viết hàm xử lý sự kiện bấm vào nút Tổng

 Bấm đúp (double click) vào nút Tổng trên form sẽ tự động thêm 1 hàm xử lý sự kiện

 Nhập đoạn mã lệnh (in đậm) vào trong thân hàm vừa phát sinh:

4.4 Lưu trữ dạng Unicode :

 Giải thích: Các Form hoặc User Control trong 1 ứng dụng ASP.NET không mặc

định được lưu theo dạng có hỗ trợ Font Unicode Vì vậy khi chạy ứng dụng từ Browser sẽ không hiển thị đúng Font chữ tiếng Việt.

 Cách sửa: Nếu có sử dụng Font Unicode trong file nào thì cần phải chỉ định cho

VS.NET lưu file đó theo đúng định dạng Unicode.

protected void btTong_Click(object sender, EventArgs e)

1 Bấm F5 để bắt đầu chạy và kiểm lỗi chương trình.

2 Nhập giá trị cho các Text Box như sau:

private void Page_Load(object sender, EventArgs e) {

// Sử dụng IsPostBack property, phán đoán xem có postback hay không?

if (!IsPostBack)

{

Ví dụ bạn tạo 1 textbox nếu vừa load lên thì giá trị của nó là “Welcom” còn nếu postback thì giá trị là

“Postback” thì đoạn mã như sau.

6.2 Xác định giá trị VIEWSTATE

 VIEWSTATE

o Duy trì trạng thái của các control trên một trang web giữa các lần postback xảy ra

o Được mã hóa và nhúng trong trang web dưới dạng ẩn

o Không thích hợp cho các control có nhiều dữ liệu như GirdView, Repeater

o Lưu ViewState (name – value)

o Truy xuất Viewstate phải ép kiểu tương ứng

protected void Page_Load(object sender, EventArgs e)

2.1 Tạo Web site mua bán sách

 Từ Menu chọn File - New - Web site

 Template : ASP.NET Web site

 Location : File System

 Language : Visual C#

 Từ Menu Website  Add new item

2.3 Tạo thư mục administrator để chứa các trang quản trị

 Nhấp phải chuột vào WebSach chọn New Folder

2.4 Thiết kế trang thêm loại sách

 Chọn vào thư mục administrator sau đó

 Từ Menu Website  Add new item  Chọn Web Form

 Đặt tên trang là themloaisach.aspx

 Thiết kế trang theo mẫu sau:

 Đặt thuộc tính cho các đối tượng trên Form:

 Để dữ liệu được gửi lên server thì ta cần phải có 1 trang để nhận thông tin gọi là

 Để gửi bằng phương thức “GET” nhập đoạn mã sau

 Tại trang xulythemloai.aspx thì tại phần page_load ta viết đoạn code sau để in ra

kết quả nhận được

 Bây giờ chạy thử xem các trang hoạt động được chưa và đã nhận được dữ liệu chưa.

2.5 Thiết kế các trang web dưới đây và viết code cho các trang nhận và in thông tin

của các trang trên sử dụng phương thức “post”.

 Phương thức post được sử dụng như sau:

 Tại trang tranggui.aspx ta có đoạn code cho sự kiện như sau trong đó có

trangnhan.aspx la trang sẽ nhận dữ liệu gửi lên

protected void btnthemloaisach_Click( object sender, EventArgs e) {

Response.Write(Request.QueryString[ "maloai" ]);

Response.Write(Request.QueryString[ "tenloai" ]);

} }

2.8 Thiết kế trang đăng ký thông tin khách hàng

protected void btntimsach_Click( object sender, EventArgs e) {

Lab 3: Sử dụng các Rich Control (Calendar, add rotator, …), validation, login

6) Mục tiêu

 Sử dụng adrotator xây dựng thành phần quảng cáo

 Viết biểu mẫu sử dụng control calendar nhập liệu cho field ngày/tháng Submit lên server và hiển thị kết quả Thiết lập ngày mặc định cho control calendar là ngày hiện hành của hệ thống

 Xây dựng các form đăng nhập cho người sử dụng khi mua hàng hoặc người quản trị khi đăng nhập quản lý dữ liệu (sử dụng mẫu login có sẵn trong M.VS 2005)

7) Sử dụng adrotator xây dựng thành phần quảng cáo

 Từ Menu chọn WebSite\Add New Item, chọn XML File từ ô cửa sổ Template,

đặt tên file là Adv.xml.

 Sao chép đoạn mã sau vào File Adv.xml

2.10 Tạo thư mục chứa hình ảnh

 Tạo thư mục chứa các hình ảnh quảng cáo đặt tên là images và sao chép các hình có trong thư mục hình ảnh vào thư mục images.

AdvertisementFile của AdRotator là Adv.xml.

 Để website không bị chuyển đến trang khác khi người dùng click chuột vào thì ta nên đặt thuộc tính sau

ngày/tháng

 Thiết lập ngày mặc định cho control calendar là ngày hiện hành của hệ thống

 Khi có sự thay đổi lựa chọn ngày tháng ta muốn cho hiển thị sự thay đổi đó thì ta viết đoạn code

9) Xây dựng các form đăng nhập cho người sử dụng

 Dưa vào các control có sẵn trên Visual Studio 2005 xây dựng trang login.aspx

protected void Page_Load( object sender, EventArgs e) {

10) Sử dụng validation control

validation vào trang

themloaimoi.aspx ở lab2

 Đặt thuộc tính cho các Validation Control

 Tương tự xây dựng các Validation Control cho trang thêm sách mới và trang đăng ký thông tin khách hàng

 Trong trang thêm sách thì muốn giá nhập vào là số dương ta đặt validation như sau

11) Upload file

 Tại button thêm sách ta xử lý như sau

 Nhấp đôi chuột vào button thêm sách

12) Viết lại các biểu mẫu trong lab 2 với yêu cầu:

 Các form thêm một cuốn sách: cần kiểm tra: mã sách, tên sách bắt buộc phải có dữ liệu, Giá: data nhập vào phải là một số dương, Hình của sách upload lên: phải là một file hình

 Trong form khách hàng đăng ký thông tin: cần kiểm tra email phải có và đúng chuẩn, điện thoại bàn theo định dạng: +xx.xx.xxxxxxx

Lab 4: Xây dựng trang Master và cách sử dụng các user control

để tạo trang chủ user

13) Mục tiêu

 Xây dựng master page bằng table như hình trên

 Xây dựng các user control: top.ascx, danhmucloai.ascx, … đưa vào master page theo các vị trí

trên (vùng hiển thị nội dung chứa một

String filetype = filehinh.PostedFile.ContentType;

int filesize = filehinh.PostedFile.ContentLength;

14) Xây dựng master page

 Từ Menu chọn WebSite\Add New Item, chọn Master Page từ ô cửa sổ Template, đặt tên file

MasterPage.aspx.

 Chuyển sang màn hình design - Xóa tất cả các control có trên đó

 Thêm một table : Menu Layout – Insert table

 Sau đó định dạng table theoo dạng như sau

15) Xây dựng các trang theo các vị trí

 Từ Menu chọn WebSite\Add New Item, chọn Master Page từ ô cửa sổ Template, đặt tên file

MasterPage.aspx

 Tạ

Đặt thuộc tính ImageUrl của Image là Images\banner.jpg

 Thiết kế các trang danhmuc.ascx, dangnhap.ascx … theo yêu cầu.

 Vùng hiển thị nội dung chứa một ContentPlaceHolder

Tạo trang chủ mua bán sách

 Vào Menu Website – Add new item

 Template : Webform

 Name : index.aspx

 Language : Visual C#

 Nhập nội dung trang index.aspx

 Thiết kế các trang user control sử dụng các công cụ đã hướng dẫn ở lab 3 để thiết kế theo đúng yêu cầu

 Có thể sử dụng thêm cách control khác để trang thêm sinh động như Marquee

 Sử dụng Marquee:

 Đưa con trỏ vào vùng hiển thị Image, chọn View HTML Source

 Copy & Paste đoạn script sau vào

<marquee bgcolor=”#ffffcc" width="200" height="200" direction=up

scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()">

<table width="100%" cellpadding="0" cellspacing="0">

Lab 5: Kết nối với CSDL

 Mở và xem cấu trúc CSDL có sẵn có tên database.mdb

 Lưu database.mdb vào thư mục App_Data trong thư mục gốc chứa trang web

18) Kết nối Visual Studio NET 2005 với CSDL

 Từ Toolbox kéo thả 1 control AccessDataSource

 Phải chuột vào control AccessDataSource chọn “Configure Data Source …”

 C

họn đường dẫn đến file database.mdb Next

 Chọn “Specify columns from a table or view”

Name : sach

Columns : chọn *

(Chọn các cột sẽ được hiển thị trong câu truy vấn select – chọn * có nghĩa là chọn tất cả các cột)

 C h ọ n

Advanced… sau đó check vào Generate …

 Tạo GirdView tại thuộc tính DataSourceID chọn AccessDataSource1

 Bây giờ chúng ta chạy trang web lên xem kết quả

19) Viết xử lý cho trang thêm sách.

 Viết xử lý của trang thêm sách thiết kế ở lab 2

 Tạo AccessDataSource giống như bài trên và Phải chuột AccessDataSource1,chọn property, chọn thuộc tính “InsertQuery”

 Li

ên kết 1 cột trong bảng với 1control trong màn hình (ví dụ cột Masach liên kết với control txtMasach)

Parameters : MaBanTinParameter source : ControlControlID : txtMasach

 Tương tự cho các cột còn lại

 Riêng cột hình ảnh thì Bấm vào “Show advanced properties”

Properties : PropertyName chọnFileName

việc upload hình ảnh lên website

20) Thiết kế và viết xử lý cho các yêu cầu sau:

- Liệt Kê danh mục các loại sách: Theo bảng

- Thay trang danhmucloai.aspx thành user control để đưa user control này vào vùng danh mục loại sách của master page

- Liệt kê danh mục các loại sách sử dụng gridview (mặc định)

- Liệt kê danh mục các loại sách sử dụng gridview, trong đó hiển thị hình của sách là hình thực sự trong thư mục

…

- Sử dụng datalist để hiển thị kết quả

Lab 6: Sử dụng các control để xây dưng trang index

21) Mục tiêu

- Sử dụng câu lệnh kết nối CSDL.

- Thực hiện việc phân trang

- Sử dụng các liên kết

22) Xây dựng trang index cho website

Thêm trang index.aspx kế thừa từ trang MasterPage (trang cha)

• Menu Website – Add new item

1 Template : Webform

2 Name : index.aspx

3. * Chọn “Select master page”

Tạo hiển thị tóm tắt loại sách

• Kết nối đến tập tin “database.mdb”

• Tạo câu truy vấn INSERT

- Sửa câu lệnh truy vấn theo yêu cầu để hiển thị hình ảnh

23)

- Hiển thị thông tin danh mục sách có phân trang sử dụng gridview Mỗi sản phẩm có link

để xem chi tiết sản phẩm

- Trang chi tiết sản phẩm: Hiển thị chi tiêt sản phẩm cần xem…

- Thay vì sử dụng gridview, hiển thị sản phẩm bằng listView, …

- Sau đó chỉnh sửa gv1 như sau:

- Từ menu chọn edit columns

- Chọn xong sẽ xuất hiện hộp thoại

- Tiếp theo chỉnh sửa các

thuộc tính của hộp thoại

- Them control để hiển thị hình ảnh

- Chọn dataimageurlfield là hình

- Để thực hiện phân trang ta thiết lập các thuộc tính sau

- chúng ta chọn thuộc tính Enable Paging

- nhấp phải chuột vào gv1 chọn properties

- thiết lập thuộc tính

- ,

-Lab 7: Hiển thị chi tiết sách và sử dụng liên kết giữa các trang

24) Mục tiêu

- Sử dụng các thuộc tính của liên kết để hiển thị chi tiết sách

- Sử dụng DataList để hiển thị chi tiết một cuốn sách

- Cách truyền dữ liệu giữa các trang

- Hiểu rõ hơn về các phương thức truyền dữ liệu

25) Xây dựng trang index cho website

- Tại trang index thì chúng ta thêm một liên kết với các thuộc tính sau

Data NavigateUrlFormatString Chitiet.aspx?masach={0}

DataNavigateUrlFields masach

- Thêm trang chitiet.aspx kế thừa từ trang MasterPage (trang cha)

• Menu Website – Add new item

1 Template : Webform

2 Name : chitiet.aspx

3 * Chọn “Select master page”

Tạo hiển thị tóm tắt loại sách

o Sử dụng DataList Control:

• Từ ToolBox – kéo control DataList vào Window form

• Đặt tên cho DataList1

o Sử dụng AccessDataSource

• Tạo câu truy vấn INSERT

- Sửa câu lệnh truy vấn theo yêu cầu để hiển thị hình ảnh

- Nhấp chọn vào WHERE và thực hiện các bước sau

Sau đó bấm vào Add và nhấp vào OK.

Sau đó chỉnh sửa DataList như sau:

- Từ DataList chọn Choose Data Source thì chọn AccessDataSource1

- Chọn vào edit templates chỉnh sửa lại như sau

Control thì làm tương tự như đối với GirdView.

kiểm tra.

Lab 8: Chức năng đăng nhập và sử dụng Application - Session

26) Mục tiêu

- Xây dựng trang web thực hiện các chức năng sau:

- Hiển thị số người dùng đã viếng thăm website

o Nếu người dùng chưa đăng nhập hệ thống thì hiển thị chức năng Đăng nhập (Login):

o Cho phép người dùng nhập Tên đăng nhập và Mật khẩu

- Dùng lệnh kết nối CSDL kiểm tra thông tin đăng nhập

o Nếu thành công hiển thị thông báo chào mừng

o Ngược lại hiển thị thông báo lỗi đăng nhập

- Nếu người dùng đã đăng nhập hệ thống thì hiển thị chức năng Đăng thoát (Logout) cho phép người dùng thoát khỏi hệ thống

27) Tóm tắt Application và Session

Mục đích: Hiểu ý nghĩa và phạm vi sử dụng Application và Session

- Ý nghĩa

Session Lưu trữ thông tin về một session (phiên làm việc) của user

Application Chia sẻ thông tin giữa các user trong cùng một ứng dụng

- Sự Kiện

Tên sự kiện Sự kiện phát sinh

Application_Start Khi ứng dụng web lần đầu tiên được gọi

Session_Start Khi bắt đầu một phiên làm việc của người dùng kết nối vào ứng

dụng

Application_End Khi ứng dụng web kết thúc Một ứng dụng web kết thúc khi ứng

dụng web được khởi tạo lại hoặc khi không còn người dùng nào kết nối vào ứng dụng

Session_End Khi phiên làm việc của người dùng chấm dứt Người dùng không kết

nối đến ứng dụng trong 1 khoảng thời gian TimeOut.

string s = (string) Application[“chuoi”] ;int count = (int) Application[“count”] ;Session Session[“TenBien”] = “abc” Khởi tạo 1 biến TenBien với giá trị

“abc” và lưu vào phiên làm việc của userstring s = (string)

Session[“username”] ;int count = (int) Session[“count”] ;

Lấy thông tin giá trị biến TenBien từphiên làm việc của user và lưu vào biến

s Thiết lập thời gian TimeOut cho 1 phiên làm việc của user là 30 phútSession.TimeOut = 30

Session.Abandon() Hủy bỏ tất cả các biến trong phiên

làm việc của user

28) Hiển thị số khách viếng thăm Website (Sử dụng Application)

- Tạo một Web User Control để hiển thị số khách viếng thăm

- Đặt tên là thongke.ascx

Thiết kế trang thongke.ascx và kéo thả vào trang MasterPage.master

- Thêm vào các control sau

- Khởi tạo và lưu thông tin Số người duyệt website khi website được kích hoạt lần đầu tiên

panellogout

o Từ menu Website  Add new item  Global.asax

o Sửa xử lý trong hàm Application_Start như sau:

- Tăng số người duyệt website mỗi khi có 1 người dùng mới viếng thăm website.

o Mở trang Global.asax ở chế độ viết code (View Code)

o Sửa xử lý trong hàm Session_Start như sau:

- Lấy thông tin số khách viếng website và hiển thị ra màn hình

o Tại trang thongke.ascx viết code cho hàm Page_Load như sau

29) Chức năng đăng nhập (Sử dụng Session)

- Tạo chức năng Login

o Từ Menu chọn Website  Add new item  Web User Control, đặt tên là Login.ascx

o Thiết kế như hình sau:

o

void Application_Start( object sender, EventArgs e)

// Tăng số khách viếng khi có 1 phiên làm việc của user

Application[ "SoKhachVieng" ] = ( int )Application[ "SoKhachVieng" ] + 1;

Label3 Label ID lblchaomung

- Khởi tạo và Huỷ thông tin đăng nhập của người dùng trong Session

o Mở trang Global.asax ở chế độ View Code

o Sửa lại xử lý trong các hàm sau:

o

- Tại sự kiện Page_Load ta xử lý như sau

Viết mã lệnh xử lý khi người dùng nhấn nút “Đăng nhập”

o Nhấn đúp vào nút “Đăng nhập” để phát sinh sự kiện Click cho nút.

void Session_Start( object sender, EventArgs e)

{

// Tăng số khách viếng khi có 1 phiên làm việc của user

Application[ "SoKhachVieng" ] = ( int )Application[ "SoKhachVieng" ] + 1;

// Thiết lập thời gian TimeOut cho mọi phiên là 30 phút

Session.Timeout = 30;

// Đặt trạng thái ban đầu của user là chưa đăng nhập

Session[ "LOGIN_OK" ] = false ;