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

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 2005

2.1 Một số khái niệm cơ sở Form Controls Properties (như ID, Width, Height…) Method Sự kiện Thủ tục – Hàm Thư viện

2.2 Giao diện môi trường Start Page Option Dialog Toolbox

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#

4.2 Thiết kế Form theo mẫu

GV: Huỳnh Khắc Duy 1

Thực hành lập trình Web Tạo table : Menu Layout – Insert Table 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:

ToolBox Control Control type Property Value

Web Forms

Label1 Label ID lblCalculatorFont Arial, Bold, XXLText Web Calculator

Label2 Label ID lblSo1 Font Arial, Medium

Label3 Label ID lblSo2Font Arial, Medium

Textbox1 Textbox ID txtSo1 Textbox2 Textbox ID txtSo2 Button1 Button ID btTong

Text TổngTextbox3 Textbox ID txtTong

HTML <HR> Horizontal Rule

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) { int so1, so2, tong; so1 = int.Parse(txtSo1.Text); so2 = int.Parse(txtSo2.Text); tong = so1 + so2; txtTong.Text = tong.ToString(); }

protected void btTong_Click(object sender, EventArgs e) { int so1, so2, tong; so1 = int.Parse(txtSo1.Text); so2 = int.Parse(txtSo2.Text); tong = so1 + so2; txtTong.Text = tong.ToString(); }

protected void btTong_Click(object sender, EventArgs e) {

}

Thực hành lập trình Web Từ menu chọn File\Save <tên file> As. Từ hộp thoại Save File As, chọn Save

with Encoding.

3) Chạy kiểm thử chương trình 5.1 Chạy chương trình

Bấm Ctrl + F5 : để chạy chương trình

5.2 Thực tập các thao tác Debug Để con trỏ ngay dòng thực hiện phép tính, bấm F9 để đặt Break Point.

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: Số 1 1Số 2 2

3. Nhấn nút Tổng. 4. Ta thấy, chương trình tự động nhảy vào hàm btnTong_Click và dừng ngay dòng

mà chúng ta đã đặt Breakpoint.5. Để kiểm tra giá trị các biến ngay tại thời điểm này, ta nhập tên biến cần kiểm

tra giá trị vào hộp thoại Watch. 6. Bấm F5 để tiếp tục chạy chương trình, hoặc bấm F10 để chạy lần lượt từng

dòng code. 7. Kiểm tra kết quả.

4) Viết code ví dụ6.1 Sử dụng thuộc tính isPostBack

Trong ASP.NET gọi việc gửi thông tin request lại cho chính mình được gọi là postback. Về nguồn gốc tên postback nghĩa là việc gửi thông tin request trong Web application và nó sẽ trả lại request đó cho component đã sinh ra HTML.


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) { // ở đây sẽ mô tả xử lí khởi tạo. }


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 ẩno Không thích hợp cho các control có nhiều dữ liệu như GirdView, Repeater

…o Mặc định ViewState được kích hoạt (enable) cho tất cả các server controls.o Disable ViewState

Page level Contrl level Một số control cơ bản như Textbox, dropdownlist,… luôn duy trì

ViewState cho dù ViewState bị disable.

Lập trình quản lý ViewStateo Mục đích: lưu thông tin bổ sung giữa các lần post-back trên cùng một trang

web.o ViewState có thể lưu trữ các kiểu dữ liệu kiểu cơ sở hoặc kiểu tham chiếu

(đối tượng – objects).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) { if (!Page.IsPostBack) { Txttest.Text = "Welcom"; } else { Txttest.Text = "Postback"; } }

int count = (int)ViewState[“RequestCount”];

ViewState[“RequestCount”]= count;


5) Xây dựng các trang trong website mua bán sách2.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#

2.2 Thêm một Item vào website 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:

ToolBox Control Control type Property Value

Web Forms

Label1 Label ID lblmaloaiText Mã loại

Label2 Label ID lbltenloai Text Tên loại

Textbox1 Textbox ID txtmaloaiTextbox2 Textbox ID txttenloaiButton1 Button ID btnthemloaisach

Text Thêm loại mới

Để 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à xulythemloai.aspx ta tạo trang này tương tự như trang themloaisach.aspx. Viết code cho button thêm loại sách, nhấp đôi vào button thì sẽ xuất hiện



Để 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) {

}

protected void btnthemloaisach_Click(object sender, EventArgs e) {

String url; url = "xulythemloai.aspx?maloai=" + txtMaloai.Text + "&tenloai=" + txttenloai.Text; Response.Redirect(url);

}

protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { Response.Write(Request.QueryString["maloai"]); Response.Write(Request.QueryString["tenloai"]); } }


Tại trang trangnhan.aspx

ta có đoạn code như sau để in các

thông tin gửi từ tranggui.aspx là:

2.6 Thiết kế trang

tìm kiếm sách Thiết kế theo

mẫu sau

2.7 Thiết kế trang

thêm sách

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


protected void btntimsach_Click(object sender, EventArgs e) { Server.Transfer("trangnhan.aspx");

}

protected void Page_Load(object sender, EventArgs e) { string strText = Request.Form.Get("txt1"); Response.Write(strText); string strText1 = Request.Form.Get("txt2"); Response.Write(strText1); }


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áo2.9 Tạo file XML

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


<Advertisements>

<Ad><ImageUrl>images\stu.jpg</ImageUrl><NavigateUrl>http://www.stu.edu.vn</NavigateUrl><AlternateText>DH Cong Nghe Sai Gon</AlternateText><Impressions>80</Impressions><Keyword>Topic1</Keyword><Caption>This is the caption for Ad#1</Caption></Ad>

<Ad><ImageUrl>images\win.jpg</ImageUrl><NavigateUrl>http://www.microsoft.com</NavigateUrl><AlternateText>Windows</AlternateText><Impressions>80</Impressions><Keyword>Topic2</Keyword><Caption>This is the caption for Ad#2</Caption></Ad>

<Ad><ImageUrl>images\ibm.jpg</ImageUrl><NavigateUrl>http://www.ibm.com</NavigateUrl><AlternateText>IBM</AlternateText><Impressions>80</Impressions><Keyword>Topic1</Keyword><Caption>This is the caption for Ad#3</Caption></Ad>

</Advertisements>


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.

2.11 Tạo Adrotator Kéo thả các 1 AdRotator Control vào menu. Chỉ đường dẫn cho thuộc tính

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

8) Sử dụng control calendar nhập liệu cho ngày/tháng

Thiết kế trang theo mẫu đặt tên là ngaythang.aspx



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) { if(!Page.IsPostBack)

Calendarngaysinh.SelectedDate = DateTime.Today; }

protected void Calendarngaysinh_SelectionChanged(object sender, EventArgs e) { txttest.Text = Calendarngaysinh.SelectedDate.ToShortDateString(); }


10) Sử dụng validation control

Thêm phần thiết kế validation vào trang themloaimoi.aspx ở lab2

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

Control Property Value

RequiredFieldValidator1 ControlToValidate txtMaloaiErrorMessage Mã loại không được rỗng

RequiredFieldValidator1 ControlToValidate txttenloaiErrorMessage Tên loại không được rỗng

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

Control Property Value

RangeValidator1 ControlToValidate txtgiaErrorMessage Giá phải là số dươngMaximumValue 1 000 0000 0000Minnimumvalue 0



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 ContentPlaceHolder).


protected void btnthemsach_Click(object sender, EventArgs e) { if (filehinh.PostedFile != null) { String filename = filehinh.PostedFile.FileName.Substring(filehinh.PostedFile.FileName.LastIndexOf("\\")+1); String filetype = filehinh.PostedFile.ContentType; int filesize = filehinh.PostedFile.ContentLength; if (filesize <= 0) { Response.Write("Lỗi upload file"); } else {

filehinh.PostedFile.SaveAs(Server.MapPath(".\\..\\images\\" + filename)); //Response.Write("upload thành công"); } } }


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

trang top.ascx ta thiết kế như sauSử dụng Image Control:

Kéo thả 1 Image Control vào vùng hiển thị.

Đặ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# Chọn : Select master page



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

<td align="center"><a href='www.stu.edu.vn'>

<img height=80 src=”images\stu.jpg” border=0></a>

</td></tr>

<tr><td align="center"> Đại Học Công Nghệ Sài Gòn</td>

</tr><tr>

<td height="30"></td>

</tr> </table>

</marquee>


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

16) Mục tiêuKết nối trong CSDL: Sử dụng đối tượng kết nối CSDL AccessDataSource để kết nối tới CSDL

database.mdb trong thư mục app_data và viết các trang web có kết nối CSDL.

17) Xây dựng CSDL Mở ứng dựng Microsoft Access. 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 …”



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

Chọn “Specify columns from a table or view”Name : sachColumns : 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)


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

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


Thực hành lập trình Web Viết hàm xử lý cho button Thêm sử dụng các đoạn mã của các bài lab trước để xử lý

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 index21) 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ácho Sử dụng GirdView Control:

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

• Đặt tên cho gv1

o Sử dụng AccessDataSource• Từ cửa sổ Toolbox, kéo thả đối tượng AccessDataSource vào Web

Form.

• 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

- Xóa cột hình.



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

Control Control type Property Value Hpl1 HyperLink HeaderText Thực hiện

Text Chi tiếtNavigateUrl Chitiet.aspx?masach=Data NavigateUrlFormatString

Chitiet.aspx?masach={0}

DataNavigateUrlFields masach



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



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


Form.



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


- 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

- Tại Image

Control thì

làm tương tự

như đối với

GirdView.

- Chạy vào

kiểm tra.



Lab 8: Chức năng đăng nhập và sử dụng Application - Session26) 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

Tên đối tượng Chức năng

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

- Khởi tạo, Lấy giá trị và Hủy biến

Phạm vi Cú pháp Diễn giải



Application Application[“TenBien”] = “abc” ; Khởi tạo 1 biến TenBien với giá trị“abc” và lưu vào ứng dụngLấy thông tin giá trị biến TenBien từ ứng dụng và lưu vào biến s

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 user

string 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ếns Thiết lập thời gian TimeOut cho 1 phiên làm việc của user là 30 phút

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

Control Control type Property Value Label1 Label ID lblsokhach

Text Mã loại

- 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

o Từ menu Website Add new item Global.asaxGV: Huỳnh Khắc Duy 36

panellogin

panellogout


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

- Thêm các control như sauControl Control type Property Value

Label1 Label ID lbluserText Tên đăng nhập

Label2 Label ID lblpassText Mật khẩu


void Application_Start(object sender, EventArgs e) { // Khởi tạo số khách viếng thăm ban đầu là 0 Application["SoKhachVieng"] = 0; }

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

protected void Page_Load(object sender, EventArgs e) { lblsokhach.Text = Application["SoKhachVieng"].ToString(); }

Thực hành lập trình Web Label3 Label ID lblchaomung

Text Chào mừng bạn đăng nhập! Button1 Button ID btndangnhap

Text Đăng nhập Button2 Button ID btndangxuat

Text Đăng xuất

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

protected void Page_Load(object sender, EventArgs e) { if (CheckLogin()) { //Ẩn chức năng login panellogin.Visible = false; // Hiển thị chức năng logout panellogout.Visible = true; } else { // Hiển thị chức năng login panellogin.Visible = true; // Ẩn chức năng logout panellogout.Visible = false; } } Protected bool CheckLogin() { return (bool)Session["LOGIN_OK"]; }


o hàm xử lý kiểm tra thông tin đăng nhập xử lý sự kiện cho btndangnhap như sau:

o Tại trang login.ascx chú ý thêm dòng lệnh sau


protected void btndangnhap_Click(object sender, EventArgs e) { if (KiemTradangnhap(txtuser.Text, txtpass.Text)) { // Lưu thông tin đăng nhập thành công vào Session Session["LOGIN_OK"] = true;

// Ẩn chức năng Login panellogin.Visible = false; // Hiển thị chức năng logout và lời chào mừng lblchaomung.Text = "Chào mừng bạn " + txtuser.Text + " đã đăng nhập website!"; panellogout.Visible = true; } else { // Lưu thông tin đăng nhập thất bại vào Session Session["LOGIN_OK"] = false; } } protected bool KiemTradangnhap(string user, string pwd) { string ConnectionString = "Jet OLEDB:Database Password=;Data Source='" + Server.MapPath("App_Data\\database.mdb") + "';Provider='Microsoft.Jet.OLEDB.4.0';User ID=Admin;Password=;"; OleDbConnection conn = new OleDbConnection(); conn.ConnectionString = ConnectionString; conn.Open(); String sql = "select makhachhang,matkhau from khachhang"; OleDbDataAdapter adapter = new OleDbDataAdapter(sql, conn); DataTable dt = new DataTable(); adapter.Fill(dt); int co=0; for (int i = 0; i < dt.Rows.Count;i++ ) { DataRow dr=dt.Rows[i]; String username=dr["makhachhang"].ToString(); String pass = dr["matkhau"].ToString(); if (username.Equals(txtuser.Text) == true) { if (pass.Equals(txtpass.Text) == true) co = 1; } } if (co==1) { return true; } return false; }


- Viết hàm xử lý sự kiện cho btndangxuat như sau

- Chạy và kiểm tra

Lab 9: Xây dựng các trang thêm-sửa-xóa cho người quản trị

30) Mục tiêu- Sử dụng câu lệnh kết nối CSDL để cập nhật dữ liệu.

- Viết code cho các sự kiện cho các trang thêm – xóa - sửa

- Sử dụng các thuộc tính của các control.

31) Xây dựng trang thêm loại sách mới

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



2. Name : xulyloai.aspx

3. Chọn “Select master page”

Thêm các control vào trang như hình trên Đặt thuộc tính cho các đối tượng trên Form:

ToolBox Control Control type Property Value Web Forms Label1 Label ID lbltieude

Text Thêm loại sách mới Textbox1 Textbox ID txtmaloaiTextbox2 Textbox ID txttenloai


protected void btndangxuat_Click(object sender, EventArgs e) { Session["LOGIN_OK"] = false; }

Thực hành lập trình Web Button1 Button ID btnxuly

Text Thêm mớiButton1 Button ID btnhuy

Text Hủy Để thực hiện thêm loại sách mới ta phải viết lênh trong sự kiện nhấp vào btnxuly Nhấp vào btnxuly ta viết đoạn kết sau

Chú ý phải thêm dòng lệnh sau

32) Xây dựng trang xóa – sửa loại sách

Tạo hiển thị danh mục loại sácho Sử dụng GirdView Control:

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

• Đặt tên cho gv1


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



protected void btnxuly_Click(object sender, EventArgs e) { string ConnectionString = "Jet OLEDB:Database Password=;Data Source='" + Server.MapPath("..\\App_Data\\database.mdb") + "';Provider='Microsoft.Jet.OLEDB.4.0';User ID=Admin;Password=;"; OleDbConnection conn = new OleDbConnection(); conn.ConnectionString = ConnectionString; conn.Open(); String sql_insert = "insert into loaisach values('" + txtMaloai.Text + "','" + txttenloai.Text + "')"; OleDbCommand cmd = new OleDbCommand(sql_insert, conn); cmd.ExecuteNonQuery(); }


Sau đó nhấn next và finish

- Đặt thuộc tính DataSourceID là AccessDataSource1 cho gv1

- Thêm vào 2 HyperLink control như sau:

-



- Tại trang xulyloai.aspx ta viết các lệnh xử lý

- Khai báo một biến toàn cục để lưu lệnh thực thi

- Viết đoạn lệnh xử lý cho sự kiện Page_Load

- Nhấp vào trang xulyloai.aspx và viết đoạn lệnh sau


//Xác định loại lệnh cần xử lý//0:Thêm //1: Sửa //2: Xóa int loaixl = 0; protected void Page_Load(object sender, EventArgs e) { }



protected void Page_Load(object sender, EventArgs e) { string ConnectionString = "Jet OLEDB:Database Password=;Data Source='" + Server.MapPath("..\\App_Data\\database.mdb") + "';Provider='Microsoft.Jet.OLEDB.4.0';User ID=Admin;Password=;"; OleDbConnection conn = new OleDbConnection(); conn.ConnectionString = ConnectionString; conn.Open(); String ma = Request.QueryString["maloai"]; String loaixuly = Request.QueryString["loaixuly"]; ; if (loaixuly != null) loaixl = int.Parse(loaixuly); if (!Page.IsPostBack) { if (ma != "") { if (loaixl == 2) { String sql_delete = "delete from loaisach where maloai='" + ma + "'"; OleDbCommand cmd = new OleDbCommand(sql_delete, conn); cmd.ExecuteNonQuery(); Response.Redirect("capnhatloaisach.aspx"); } if (loaixl == 1) { String sql = "select maloai,tenloai from loaisach where maloai='" + ma + "'"; OleDbDataAdapter adapter = new OleDbDataAdapter(sql, conn); DataTable dt = new DataTable(); adapter.Fill(dt); String ml = ""; String tl = "";

for (int i = 0; i < dt.Rows.Count; i++) { DataRow dr = dt.Rows[i]; ml = dr["maloai"].ToString(); tl = dr["tenloai"].ToString(); } txtMaloai.Text = ml; txttenloai.Text = tl;

//----------------

btnxuly.Text = "Cập nhật"; lbltieude.Text = "Cập nhật loại sách"; txtMaloai.ReadOnly = true; } } }

}


- Viết lệnh xử lý cho btnxuly để xử lý các lệnh

- Nhấp vào button btnxuly và viết vào sự kiện Click như sau

- Chạy và kiểm tra các lệnh thêm – xóa – sửa một loại sách.


protected void btnxuly_Click(object sender, EventArgs e) { if (loaixl==0) { string ConnectionString = "Jet OLEDB:Database Password=;Data Source='" + Server.MapPath("..\\App_Data\\database.mdb") + "';Provider='Microsoft.Jet.OLEDB.4.0';User ID=Admin;Password=;"; OleDbConnection conn = new OleDbConnection(); conn.ConnectionString = ConnectionString; conn.Open(); String sql_insert = "insert into loaisach values('" + txtMaloai.Text + "','" + txttenloai.Text + "')"; OleDbCommand cmd = new OleDbCommand(sql_insert, conn); cmd.ExecuteNonQuery(); } else { string ConnectionString = "Jet OLEDB:Database Password=;Data Source='" + Server.MapPath("..\\App_Data\\database.mdb") + "';Provider='Microsoft.Jet.OLEDB.4.0';User ID=Admin;Password=;"; OleDbConnection conn = new OleDbConnection(); conn.ConnectionString = ConnectionString; conn.Open(); String sql_update = "update loaisach set tenloai='" + txttenloai.Text + "' where maloai='" + txtMaloai.Text + "'"; OleDbCommand cmd = new OleDbCommand(sql_update, conn); cmd.ExecuteNonQuery(); } } btnxuly.Text = "Cập nhật"; lbltieude.Text = "Cập nhật loại sách"; txtMaloai.ReadOnly = true; } } }

}


Confirm PASSWORD

<tr> <td align="right" style="font-weight: bold; width: 170px; height: 31px" valign="middle"> Mật khẩu: </td> <td align="left" style="width: 346px; height: 31px"> <asp:TextBox ID="txtpass" runat="server"

TextMode="Password" Width="127px" OnTextChanged="txtpass_TextChanged"></asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtpass" ErrorMessage="Không được trống" Font-Bold="True" Width="123px"></asp:RequiredFieldValidator></td> </tr> <tr> <td align="right" style="font-weight: bold; width: 170px; height:31px" valign="middle"> Nhập Lại Mật Khẩu: </td> <td align="left" style="width: 346px; height: 31px"> <asp:TextBox ID="txtpass1" runat="server" TextMode="Password" Width="130px"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="txtpass1" Display="Dynamic" ErrorMessage="Bạn phải nhập lại mk" Font-Bold="True"></asp:RequiredFieldValidator><br /><asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="txtpass"ControlToValidate="txtpass1" ErrorMessage="Mật khẩu của bạn không trùng nhau!"Font-Bold="True"></asp:CompareValidator></td> </tr>

NGAY THANG<tr><td align="right" style="font-weight: bold; width: 170px; height: 30px">Ngày sinh:</td> <td align="left" style="width: 346px; height: 30px"><asp:TextBox ID="txtngaysinh" runat="server" Width="130px" onkeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" ></asp:TextBox> <asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="txtngaysinh"ErrorMessage="Ngày Tháng Không Dúng" Font-Bold="True" MaximumValue="1/1/3000"MinimumValue="1/1/1000" Type="Date" Width="175px"></asp:RangeValidator></td>

</tr>

GIA SP KHÔNG NHÂP SÔ ÂM

<tr><td style="width: 93px">Giá Sản Phẩm:</td> <td style="width: 126px" align="left"> <asp:TextBox ID="txtgia" runat="server" onkeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" ></asp:TextBox> <asp:RangeValidator ID="RangeValidator2" runat="server" ControlToValidate="txtgia" ErrorMessage="ko nhap so am" MaximumValue="100000000000000000" MinimumValue="0" Type="Double"></asp:RangeValidator></td>

</tr>


Documents

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