hướng dẫn thực hành web.

Tài Liệu

HƯỚNG DẪN THỰC HÀNH
WEB





LẬP TRÌNH WEB

Dzoaõn Thanh 1
CHƯƠNG 6: HƯỚNG DẪN THỰC HÀNH

Bài 1: Xây dựng ứng dụng WebCalculator
1. Tạo một Web site
 Từ Menu chọn File - New - Web site
o Template : ASP.NET Web site
o Location : File System
o Language : Visual C#




2. Thiết kế Form theo mẫu

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
LẬP TRÌNH WEB

Dzoaõn Thanh 2
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

protected void btTong_Click(object sender, EventArgs e)
{

}


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

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

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.
o Từ menu chọn File\Save <tên file> As. Từ hộp thoại Save File As, Từ hộp thoại
Save File As, chọn Save with Encoding.
LẬP TRÌNH WEB

Dzoaõn Thanh 3




5 Chạy kiểm thử chương trình




LẬP TRÌNH WEB

Dzoaõn Thanh 4
Bài 2. Xây dựng trang chủ cho Website Bản tin điện tử

1. Mẫu trang chủ Website Tuổi trẻ (www.tuoitre.com.vn)

2. Tạo Project Bản tin điện tử
o Từ Menu chọn File – New – Web site…
• Template : ASP.NET We site
• Location : File System – D:\BanTinDienTu
• Language : Visual C#

3. Tạo trang Master
o Từ Menu chọn Website – Add new item…
• Template : Master page
• Name : MasterPage.master
• Language : Visual C#

LẬP TRÌNH WEB

Dzoaõn Thanh 5


o Chuyển sang màn hình design - Xóa tất cả các control có trên đó
o Thêm một table : Menu Layout – Insert table



LẬP TRÌNH WEB

Dzoaõn Thanh 6



Vùng hi

ển thị Banner

Vùng hiển thị Menu


Vùng hi
ển thị AdRotaror


Vùng hiển thị Nội dung
Vùng hiển thị Marquee


Vùng hi
ển thị Image

Copyright@ By 063T

4. Tạo hiển thị Banner
o Sử dụng Image Control:
• Kéo thả 1 Image Control vào vùng hiển thị Banner.
• Đặt thuộc tính ImageUrl của Image là Images\banner.gif




LẬP TRÌNH WEB

Dzoaõn Thanh 7
5. Tạo hiển thị Menu cột trái

o Sử dụng Hyperlink Control:
• Kéo thả các 4 Hyperlink Control vào vùng hiển thị Menu.
• Đặt thuộc tính cho các Hyperlink.

Control Property Value
Hyperlink1 Text Trang chủ
NavigateUrl Index.aspx
Hyperlink2 Text Xã hội
NavigateUrl Xahoi.aspx
Hyperlink3 Text Kinh tế
NavigateUrl Kinhte.aspx
Hyperlink4 Text Thể thao
NavigateUrl Thethao.aspx


o Sử dụng AdRotator:
• Từ Menu chọn Project\Add New Item, chọn XML File từ ô cửa sổ Template, đặt tên
file là Ads.xml.

LẬP TRÌNH WEB

Dzoaõn Thanh 8
o Ta thêm nội dung của file Ads.xml như sau:

<Advertisements>
<Ad>
<ImageUrl>Images\Quang_cao\qc_Ao_cuoi.jpg</ImageUrl>
<NavigateUrl>http://www. qc_Ao_cuoi com</NavigateUrl>
<AlternateText>Quảng cáo áo cưới</AlternateText>
<Impressions>80</Impressions>
<Keyword>quangcao</Keyword>
</Ad>
<Ad>
<ImageUrl>Images\ Quang_cao\qc_Mouse.jpg</ImageUrl>
<NavigateUrl></Nav
<AlternateText>Mouse</A
<Impressions>80</Impressions>
<Keyword>quangcao</Keyword>

</Ad>
<Ad>
<ImageUrl>Images\ Quang_cao\qc_Trang_suc.jpg</ImageUrl>
<NavigateUrl></Nav
<AlternateText>Đồ trang sức</A
<Impressions>80</Impressions>
<Keyword>quangcao</Keyword>
</Ad>
<Advertisements>

o Kéo thả các 1 AdRotator Control vào menu
o Chỉ đường dẫn thuộc tính AdvertisementFile là Ads.xml

LẬP TRÌNH WEB

Dzoaõn Thanh 9

6. Tạo và hiển thị cột quảng cáo bên phải
o Sử dụng Marquee
Đưa con trỏ vào vùng cần hiển thị định dạng marquee, chọn View HTML Source
Ví dụ nội dung marquee như sau

<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='Giaitri.aspx'><img height=80 src=”Images\
Quang_cao\vinhhalong.gif” border=0> </a>
</td>
</tr>

<tr>
<td align="center"> Phim trong tuần </td>
</tr>
<tr>
<td height="30"> </td>
</tr>
</table>
</marquee>


o Sử dụng Image Control:

• Kéo thả các 2 Image Control vào Ads.
• Đặt thuộc tính ImageUrl cho các Image:



Control Value
Image1 Images\Image1.gif
Image2 Images\Image2.gif
LẬP TRÌNH WEB

Dzoaõn Thanh 10



7. Tạo hiển thị phần nội dung :
o Vào vùng hiển thị nội dung thêm control ContentPlaceHolder

LẬP TRÌNH WEB

Dzoaõn Thanh 11
8. Tạo Trang chủ Bản tin điện tử
o Vào Menu Website – Add new item
• Template : Webform
• Name : index.aspx
• Language : Visual C#
• Chọn : Select master page




LẬP TRÌNH WEB

Dzoaõn Thanh 12
Nhập nội dung trang Default.aspx



F5 - Chạy chương trình.



o Tương tự : xây dựng 3 trang XaHoi.aspx, KinhTe.aspx, TheThao.aspx với kết thừa từ
trang master page
LẬP TRÌNH WEB

Dzoaõn Thanh 13
Bài 3. Xây dựng trang web Nhập tin tức mới

1. Thiế kế Cơ sở dữ liệu (Xây dựng CSDL Access)
o Mở ứng dựng Microsoft Access
o Thiết kế CSDL, đặt tên là tintuc.MDB, có cấu trúc gồm:
- Một bảng Bantin như sau:

Bantin

STT

Tên trường Kiểu dữ liệu

Ghi chú
1 MaBanTin Text(10) Primary Key
2 TieuDe Text (255) Required
3

NoiDungTomTat

Memo

Required

4 NoiDung Memo Required
5 NgayDangTin Date/Time Ngày hiện hành
6 HinhAnh Text(255)
7 ChuThichHinh Text(255)
8 MaLinhVuc Text(10) Foreigned Key

- Một bản Linhvuc:

Linhvuc

STT

Tên trường Kiểu dữ
liệu
Ghi chú
1 MaLinhvuc Text(10) Primary Key
2 Tenlinhvuc Text (255) Required


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


2. Thêm một trang mới và Thiết kế Form theo mẫu dưới đây (dùng control
AccessDataSource)



LẬP TRÌNH WEB

Dzoaõn Thanh 14
o Xử lý : Khi nhấn nút Lưu, dữ liệu trên from sẽ được lưu xuống table Linhvuc trong
Database (Access)


Tạo 1 control AccessDataSource
o Từ Toolbox – Kéo thả 1 control AccessDataSource
o Phải chuột vào control AccessDataSource chọn “Configure Data Source …”
Chọn đường dẫn đến file tintuc.mdb -> Next

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

LẬP TRÌNH WEB

Dzoaõn Thanh 15




o Chọn Advanced … Chọn “Generate INSERT, UPDATE, and DELETE statements”
(Tự động tạo các câu truy vấn INSERT, UPDATE, DELETE) -> Next -> Finish



LẬP TRÌNH WEB

Dzoaõn Thanh 16

o Phải chuột AccessDataSource1, chọn Property, chọn thuộc tính “InsertQuery”
o Liên kết 1 cột trong bảng với 1 control trong màn hình (ví dụ cột Malinhvuc liên kết với
control txtMalinhvuc)
o Parameters : Malinhvuc

o Parameter source : Control
o ControlID : txtMalinhvuc

o Viết hàm xử lý sự kiện click cho nút Lưu (Bấm đúp (double click) vào nút Lưu trên
form, chương trình sẽ tự động thêm hàm xử lý sự kiện)

protected void btnLuu_Click(object sender, EventArgs e)
{
AccessDataSource1.Insert();
}

F5- Chạy chương trình và nhập nội dung

LẬP TRÌNH WEB

Dzoaõn Thanh 17
3.Thêm một trang mới và Thiết kế Form theo mẫu dưới đây:




o Xử lý:
- Lấy data từ table Linhvuc load lên DropdownList Linhvuc tren form (Sinh viên tự
thực hành phần này)
- Mặc định CldCldNgaydangtin là chọn ngày hiện hành
- Nhấn nút Lưu, tất cả dữ liệu sẽ được lưu xuống table Bantin trong database

Tương tự như trang Thêm Lĩnh vực, ta tạo 1 control AccessDataSource
o Từ Toolbox – Kéo thả 1 control AccessDataSource
o Phải chuột vào control AccessDataSource chọn “Configure Data Source …”

Chọn đường dẫn đến file tintuc.mdb -> Next
o Chọn “Specify columns from a table or view”
o Name : Bantin
(txtMabantin)
(txtTieude)
(txtNoidungtomtat)
(txtNoidung)
(txtCldNgaydangtin)
(txtUploadFile)
(txtChuthichhinh)
(cmdLuu) (cmdXoa)
LẬP TRÌNH WEB

Dzoaõn Thanh 18
o 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)
o Next
o Chọn Advanced … Chọn “Generate INSERT, UPDATE, and DELETE statements”
(Tự động tạo các câu truy vấn INSERT, UPDATE, DELETE) -> Next -> Finish
o Phải chuột AccessDataSource1, chọn Property, chọn thuộc tính “InsertQuery”

o Liên kết 1 cột trong bảng với 1 control trong màn hình (ví dụ cột MaBanTin liên kết với
control txtMaBanTin)
o Parameters : Mabantin
o Parameter source : Control
o ControlID : txtMabantin
o Tương tự cho các cột
o TieuDe
o NoiDung
o NoiDungTomTat

o NgayDangTin
o ChuThichHinh
o Malinhvuc
o *Riêng cột HinhAnh : Bấm vào “Show advanced properties” ,Properties : PropertyName
chọn FileName


LẬP TRÌNH WEB

Dzoaõn Thanh 19


o Viết hàm xử lý thông tin cho Trang Nhập Tin tức mới,

- Hàm load ngày mặc định là ngày hiện hành cho control Ngày đăng tin

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
cldNgaydangtin.SelectedDate = DateTime.Now;
}

- Hàm Nhận tập tin Upload từ Client và Lưu lên Server

protected void SaveFileUpload()
{
string strFileName;
if (txtFileUpload.FileName != "")
{
strFileName = Server.MapPath("Upload\\" + txtFileUpload.FileName);

txtFileUpload.PostedFile.SaveAs(strFileName);
}

}


- Hàm xử lý sự kiện click cho nút Lưu (Bấm đúp (double click) vào nút Lưu trên form,
chương trình sẽ tự động thêm hàm xử lý sự kiện)

LẬP TRÌNH WEB

Dzoaõn Thanh 20

protected void cmdLuu_Click(object sender, EventArgs e)
{
AccessDataSource1.Insert();
SaveFileUpload();
}

F5- Chạy chương trình và nhập nội dung

LẬP TRÌNH WEB

Dzoaõn Thanh 21
Bài 4: Xây dựng trang chủ cho từng Lĩnh vực

1. Xây dựng Trang chủ Lĩnh vực Xã hội
o Thêm trang xahoi.aspx kế thừa từ trang MasterPage (trang cha)
• Menu Website – Add new item
1. Template : Webform

2. Name : xahoi.aspx
3. * Chọn “Select master page”, chọn trang Master Page

o Tạo hiển thị tóm tắt các bản tin thuộc lĩnh vực Xã hội
Sử dụng DataList Control:
• Từ ToolBox – kéo control DataList vào Window form
• Đặt tên cho DataList là dataListTomTatTinTuc

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 “tintuc.MDB”
• Tạo câu truy vấn



LẬP TRÌNH WEB

Dzoaõn Thanh 22


o Vào Property của dataListTomTatTinTuc chọn DataSourceID bằng AccessDataSource1
- Nhấn chuột phải vào dataListTomTatTinTuc và chọn Edit Template > Item
Templates từ pop-up menu.



LẬP TRÌNH WEB

Dzoaõn Thanh 23
- Xóa tất cả nội dung trong Item Template. Vào Layout – Insert Table (có thuộc

tính Width = 100%), thêm vào các control theo mẫu sau :

Font Size Font Bold Fore Color

Hyperlink1 Small

True Maroon
Label1 Small DimGray
Label2 Small



- Phải chuột vào từng Control chọn EditDataBinding
• Bindable Properties : Text
• Field binding – Bound to : TieuDe


LẬP TRÌNH WEB

Dzoaõn Thanh 24