Lập trình Web-Chương 6: Hướng dẫn thực hành pot
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (4.82 MB, 70 trang )
LẬP TRÌNH WEB
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
Dzoaõn Thanh
1
LẬP TRÌNH WEB
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.
Dzoaõn Thanh
2
LẬP TRÌNH WEB
5 Chạy kiểm thử chương trình
Dzoãn Thanh
3
LẬP TRÌNH WEB
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#
Dzoaõn Thanh
4
LẬP TRÌNH WEB
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
Dzoaõn Thanh
5
LẬP TRÌNH WEB
Vùng hiển thị Banner
Vùng hiển thị Menu
Vùng hiển thị Marquee
Vùng hiển thị Nội dung
Vùng hiển thị AdRotaror
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
Dzoãn Thanh
6
LẬP TRÌNH WEB
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
Text
Xã hội
NavigateUrl
Xahoi.aspx
Text
Kinh tế
NavigateUrl
Kinhte.aspx
Text
Thể thao
NavigateUrl
Thethao.aspx
Hyperlink2
Hyperlink3
Hyperlink4
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.
Dzoaõn Thanh
7
LẬP TRÌNH WEB
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><AlternateText>Mouse<Impressions>80</Impressions>
<Keyword>quangcao</Keyword>
</Ad>
<Ad>
<ImageUrl>Images\ Quang_cao\qc_Trang_suc.jpg</ImageUrl>
<NavigateUrl><AlternateText>Đồ trang sức<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
Dzoãn Thanh
8
LẬP TRÌNH WEB
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
scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><a href='Giaitri.aspx'>
</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
Image1
Images\Image1.gif
Image2
Dzoãn Thanh
Value
Images\Image2.gif
9
LẬP TRÌNH WEB
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
Dzoaõn Thanh
10
LẬP TRÌNH WEB
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
Dzoaõn Thanh
11
LẬP TRÌNH WEB
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
Dzoaõn Thanh
12
LẬP TRÌNH WEB
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:
STT
1
2
3
4
5
6
7
8
Tên trường
MaBanTin
TieuDe
NoiDungTomTat
NoiDung
NgayDangTin
HinhAnh
ChuThichHinh
MaLinhVuc
Bantin
Kiểu dữ liệu
Text(10)
Text (255)
Memo
Memo
Date/Time
Text(255)
Text(255)
Text(10)
Ghi chú
Primary Key
Required
Required
Required
Ngày hiện hành
Foreigned Key
- Một bản Linhvuc:
STT
1
2
Tên trường
MaLinhvuc
Tenlinhvuc
Linhvuc
Kiểu dữ
liệu
Text(10)
Text (255)
Ghi chú
Primary Key
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)
Dzoaõn Thanh
13
LẬP TRÌNH WEB
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
Dzoaõn Thanh
14
LẬP TRÌNH WEB
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
Dzoaõn Thanh
15
LẬP TRÌNH WEB
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
Dzoaõn Thanh
16
LẬP TRÌNH WEB
3.Thêm một trang mới và Thiết kế Form theo mẫu dưới đây:
(txtMabantin)
(txtTieude)
(txtNoidungtomtat)
(txtNoidung)
(txtCldNgaydangtin)
(txtUploadFile)
(txtChuthichhinh)
(cmdLuu)
(cmdXoa)
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
Dzoaõn Thanh
17
LẬP TRÌNH WEB
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
Dzoaõn Thanh
18
LẬP TRÌNH WEB
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)
Dzoaõn Thanh
19
LẬP TRÌNH WEB
protected void cmdLuu_Click(object sender, EventArgs e)
{
AccessDataSource1.Insert();
SaveFileUpload();
}
F5- Chạy chương trình và nhập nội dung
Dzoãn Thanh
20
LẬP TRÌNH WEB
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
Dzoãn Thanh
21
LẬP TRÌNH WEB
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.
Dzoaõn Thanh
22
LẬP TRÌNH WEB
- 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
Hyperlink1
Label1
Label2
Font Bold
Small True
Small
Small
Fore Color
Maroon
DimGray
- Phải chuột vào từng Control chọn EditDataBinding
• Bindable Properties : Text
• Field binding – Bound to : TieuDe
Dzoaõn Thanh
23
LẬP TRÌNH WEB
Dzoãn Thanh
24
LẬP TRÌNH WEB
Dzoãn Thanh
25
