Một dự án Website luôn phải có phần quản trị, giúp cho người quản trị dễ dàng quản lý và cập
nhật thông tin lên web.
Tương tự như phần Client ở trên, quản trị cũng cần phải có một giao diện và các chức năng quản
lý. Để cho cấu trúc website rõ ràng, dễ quản lý, chúng ta nên tạo một thư mực (Folder) tên
Webmaster, sau đó tạo tất cả các trang cho quản trị ở trong thư mục này. Trước tiên tạo trang
MasterPage cho phần quản trị.
70 trang |
Chia sẻ: maiphuongdc | Lượt xem: 2268 | Lượt tải: 2
Bạn đang xem trước 20 trang tài liệu Thực hành Lập trình web, để xem tài liệu hoàn chỉnh bạn click vào nút DOWNLOAD ở trên
• Name : bantin.aspx
• Chọn : Place code in separate file (phân chia thiết kế và code thành 2 file)
• Chọn : Select master page (trang này kế thừa từ 1 trang cha)
2. Tạo hiển thị thông tin chi tiết của một bản tin
Sử dụng DataList Control:
• Kéo thả 1 DataList vào bantin.apsx.
• Đặt tên cho DataList là dataListBanTinChiTiet
Thêm control AccessDataSource vào Webform
• Kết nối đến tập tin “TINTUC.MDB”
• Tạo câu truy vấn Select
Vào điều kiện Where
o Column : MaBanTin, Operator : “=”,
o Source : QueryString
o QueryString field : MaBanTin
o Bấm Add
LẬP TRÌNH WEB
Dzoaõn Thanh 28
- Kết nối AccessDataSource vào DataList
• Chọn Property : ->DataSourceID : AccessDataSource1
- Nhấn chuột phải vào dataListBanTinChiTiet và chọn Edit Template -> Item Templates từ pop-
up menu.
- Vào Layout -> Insert table ... Thiết kế table như sau :
- Liên kết 1 control với 1 cột trong bảng BANTIN
Label1 Text NgayDangTin (Format : {0:hh:mm:ss - dd/MM/yyyy})
Label2 Text DataItem.TieuDe
Label3 Text NoiDungTomTat
Label4 Text NoiDung
Label5 Text ChuThichHinh
Image1 ImageUrl HinhAnh
LẬP TRÌNH WEB
Dzoaõn Thanh 29
Phải chuột vào Label1 -> Edit DataBinding …
Tương tự cho các control còn lại..
Chạy và Kiểm tra chương trình:
Bấm Ctrl + F5 : Trang web load lên nhưng không có nội dung
LẬP TRÌNH WEB
Dzoaõn Thanh 30
Thay đổi lại đường link …/ bantin.aspx?MaBanTin=XH1
LẬP TRÌNH WEB
Dzoaõn Thanh 31
3. Liên kết Trang chủ lĩnh vực xã hội với trang hiển thị bản tin chi tiết
Sửa lại Bindable Property cho DataList trong Xahoi.aspx
Bài tập làm thêm:
- Hoàn thiện trang chủ lĩnh vực Kinh tế và liên kết với trang BanTin.aspx
- Hoàn thiện trang chủ lĩnh vực Thể thao và liên kết với trang BanTin.aspx
LẬP TRÌNH WEB
Dzoaõn Thanh 32
Bài 6: Xây dựng Menu động bằng DataList
Như các bài trước, Menu được thiết kế bằng các Hyperlink ở trang PageMaster.master và khi tạo
các trang con chỉ cần Apply (check vào Select MasterPage) là có thể có một Menu giống như ở
trang PageMaster.
Các Menu này quá cố định, vấn đề đặt ra là nếu website này cần thêm một lĩnh vực mới nữa thì
xử lý sao? (Ví dụ thêm lĩnh vực về Giáo dục, các tin tức liên quan đến Giáo dục)…Một dự án
Web hay Software cần tối ưu hóa bằng cách bổ sung đầy đủ các chức năng có thể, mang tính tiện
dụng cao..hạn chế việc chỉnh sửa.
Do đó, chúng ta cần xây dựng một Menu động, những lĩnh vực cần phải lấy từ Database. Các bài
trước chúng ta đã thiết kế trang Thêm lĩnh vực, giờ chỉ cần load lên Menu.
Cũng tương tự như các bài trước, nhưng chúng ta thiết kế Menu trên một Usercontrol (khi thiết
kế xong thì UserContol này cũng như những control vốn có của bộ Visual Studio), sau đó gắn
Usercontrol này lên trang PageMaster.
Tạo một UserControl mới:
o Vào Menu Website – Add new item
• Template : Web User Control
• Name : ucontrolMenu.ascx
• Language : Visual C#
LẬP TRÌNH WEB
Dzoaõn Thanh 33
Sử dụng DataList Control:
• Từ ToolBox – kéo control DataList vào ucontrolMenu
Sử dụng AccessDataSource
• Từ cửa sổ Toolbox, kéo thả đối tượng AccessDataSource vào ucontrolMenu
• Kết nối đến tập tin “tintuc.MDB”
• Tạo câu truy vấn -> Netx -> Finish
LẬP TRÌNH WEB
Dzoaõn Thanh 34
o Vào Property của DataList chọn DataSourceID bằng adsGetLinhvuc
- Nhấn chuột phải vào DataList và chọn Edit Template > Item Templates từ pop-up
menu.
o 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 :
LẬP TRÌNH WEB
Dzoaõn Thanh 35
- Image: thuộc tính ImageUrl là một Buttlet
- Phải chuột vào Hyperlink1 -> Edit DataBinding …
+ Text: Hiển thị Tên Linh vực
+ NavigateUrl: link (ở đây chúng ta chưa đặt thuộc tính cho NavigateUrl)
Xong, ta xóa các Hyperlink lúc đầu ở trang PageMaster, và nắm kéo ucontrol Menu từ cửa sổ
Solution vào chổ các Hyperlink vừa xóa.
Lúc này ta có thể thêm một lĩnh vực mới từ trang Thêm lĩnh vực mới,
F5 -> Chạy chương trình và kiểm tra thử, không khác gì các Menu cũ làm bằng Hyperlink và còn
có thêm một lĩnh vực vừa mới thêm
LẬP TRÌNH WEB
Dzoaõn Thanh 36
Bài 7 : Xây dựng một trang duy nhất để hiển thị thông tin của từng Lĩnh vực
Với một Menu động được load thông tin từ Database như vậy, nếu như ở các bài trước, một lĩnh
vực là một trang riêng biệt thì ở đây chúng ta không thể thêm từng trang mỗi khi có một lĩnh vực
mới…Vấn đề là phải làm sao thiết kế một trang duy nhất đề hiển thị thông tin cho các lĩnh vực
mặc cho có thêm mới lĩnh vực.
1. Tương tự, ta thêm một trang mới để hiển thị thông tin cho từng lĩnh vực,
o Vào Menu Website – Add new item
• Template : Web form
• Name : Linhvuc.aspx
• Language : Visual C#
• Chọn : Select master page (trang này kế thừa từ 1 trang cha)
2. Tạo hiển thị thông tin chi tiết của một bản tin
Sử dụng DataList Control:
• Kéo thả 1 DataList vào Linhvuc.apsx.
Thêm control AccessDataSource vào Webform
• Kết nối đến tập tin “TINTUC.MDB”
• Tạo câu truy vấn Select
Vào điều kiện Where
o Column : Malinhvuc, Operator : “=”,
o Source : QueryString
LẬP TRÌNH WEB
Dzoaõn Thanh 37
o QueryString field : tut
o Bấm Add -> Next -> Finish
o Vào Property của DataList chọn DataSourceID bằng AccessDataSource1
- Nhấn chuột phải vào DataList và chọn Edit Template > Item Templates từ pop-up
menu.
- 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 :
LẬP TRÌNH WEB
Dzoaõn Thanh 38
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
Vì trang Bantin.aspx (trang chi tiết) đang đón nhận, chờ một Mabantin truyền tới, do đó ta thêm
thuộc tính là MaBanTin và Fomat cho NavigateUrl
LẬP TRÌNH WEB
Dzoaõn Thanh 39
LẬP TRÌNH WEB
Dzoaõn Thanh 40
LẬP TRÌNH WEB
Dzoaõn Thanh 41
Chạy và kiểm tra chương trình
Bấm Ctrl + F5 : Trang web load lên nhưng không có nội dung
Thay đổi lại đường link …/ Linhvuc.aspx?tut=TT
LẬP TRÌNH WEB
Dzoaõn Thanh 42
3. Liên kết Menu từ trang PageMaster tới trang Linhvuc.aspx
Sửa lại Edit DataBinding cho Hyperlink trong DataList của ucontrolMenu
Chạy chương trình từ trang Default.aspx
LẬP TRÌNH WEB
Dzoaõn Thanh 43
Bài 8: Xây dựng trang chủ cho website
1. Mẫu trang chủ Bản tin điện tử Website Tuổi trẻ (www.tuoitre.com.vn)
2. Tạo hiển thị tóm tắt các bản tin thuộc các lĩnh vực
Sử dụng DataList Control:
• Kéo thả 1 DataList vào Default.aspx.
Tạo AccessDataSource control
• Từ cửa sổ Toolbox, kéo thả đối tượng AccessDataSource vào Web Form.
• Kết nối DataSource vào TINTUC.mdb.
• Viết câu lệnh SQL SELECT truy vấn dữ liệu từ bảng BANTIN
SELECT T.MaBanTin, T.TieuDe, T.NgayDangTin, T.NoiDungTomTat, T.NoiDung,
T.HinhAnh, T.ChuThichHinh, T.MaLinhVuc, L.TenLinhVuc
FROM (LINHVUC L INNER JOIN BANTIN T ON L.MaLinhVuc = T.MaLinhVuc)
GROUP BY T.MaLinhVuc, T.MaBanTin, T.TieuDe, T.NgayDangTin,
T.NoiDungTomTat, T.NoiDung, T.HinhAnh, T.ChuThichHinh, L.TenLinhVuc, L.MaLinhVuc
HAVING (T.NgayDangTin >= ALL (SELECT NGAYDANGTIN
FROM BANTIN
WHERE MALINHVUC = L.MALINHVUC))
LẬP TRÌNH WEB
Dzoaõn Thanh 44
LẬP TRÌNH WEB
Dzoaõn Thanh 45
Kiểm tra câu truy vấn -> Finish
LẬP TRÌNH WEB
Dzoaõn Thanh 46
3. Chọn thuộc tính DataSourceID của DataList là AccessDataSource1
4. Thiết kế lại Item Template cho DataList
• Nhấn chuột phải vào DataList và chọn Edit Template > Item Templates từ pop-up
menu. Từ Toolbox kéo thả vào Item Template một Table HTML Control. Chọn Tab HTML, sửa
lại thông tin Table như sau:
• Đặt thuộc tính Edit DataBinding cho các control:
Linhvuc.aspx?tut={0}
LẬP TRÌNH WEB
Dzoaõn Thanh 47
Chạy và kiểm tra chương trình
LẬP TRÌNH WEB
Dzoaõn Thanh 48
Bài 9: Application và Session
Hiểu ý nghĩa và phạm vi sử dụng Application và Session
1. Ý 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.
2. Sự kiện
Tên sự kiện Sự kiện phát sinh
Application_Star
t
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.
3. 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ụng
string s = (string) Application[“chuoi”] ;
int count = (int) Application[“count”] ;
Lấy thông tin giá trị biến
“chuoi” từ ứng dụng và lưu vào
biến s,…
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
username từ phiên làm việc của
user và lưu vào biến s,…
Session.TimeOut = 30 Thiết lập thời gian TimeOut cho
1 phiên làm việc của user là 30
phút
Session.Abandon() Hủy bỏ tất cả các biến trong
phiên làm việc của user
LẬP TRÌNH WEB
Dzoaõn Thanh 49
4. Tạo mới một Web User control đặt tên là: ucontrolThongke
Thiết kế như sau và đặt thuộc tính ID cho Label1: lblTruycap và Label2: lblOnline
5. Viết mã lệnh xử lý
a. Khởi tạo và lưu thông tin Số người truy cập và duyệt website khi website được kích hoạt lần
đầu tiên
i. Từ menu Website -> Add new item -> Global Application Class và đặt tên mặc định
là Global.asax
ii. Sửa xử lý trong hàm Application_Start như sau:
void Application_Start(object sender, EventArgs e)
{
// Code that runs on application startup
Application["so_truy_cap"] = 0;
Application["co_nguoi_online"] = 0;
}
b.Tăng số người truy cập và duyệt website mỗi khi có 1 người dùng mới viếng thăm website
LẬP TRÌNH WEB
Dzoaõn Thanh 50
void Session_Start(object sender, EventArgs e)
{
// Code that runs when a new session is started
Application["so_truy_cap"] = (int)Application["so_truy_cap"] + 1;
Application["co_nguoi_online"] = (int)Application["co_nguoi_online"] + 1;
}
c. Giảm số người online khi có 1 người dùng thoát khỏi website
void Session_Start(object sender, EventArgs e)
{
Application["co_nguoi_online"] = (int)Application["co_nguoi_online"] - 1;
}
d. Lấy thông tin số người truy cập và viếng website và hiển thị ra màn hình
i. Từ cửa sổ Solution Explorer, mở trang ucontrolThongke ở chế độ viết
code (View Code)
ii. Sửa xử lý trong hàm Page_Load như sau:
protected void Page_Load(object sender, EventArgs e)
{
lblTruycap.Text = (string)Application["so_truy_cap"].ToString();
lblOnline.Text = (string)Application["so_nguoi_online"]. ToString();
}
Kéo thả controlThongke vào trang MasterPage.
Chạy chương trình từ trang Default.aspx
LẬP TRÌNH WEB
Dzoaõn Thanh 51
PHẦN II: QUẢN TRỊ WEBSITE
Bài 10: Xây dựng trang quản trị cho Webmaster
Một dự án Website luôn phải có phần quản trị, giúp cho người quản trị dễ dàng quản lý và cập
nhật thông tin lên web.
Tương tự như phần Client ở trên, quản trị cũng cần phải có một giao diện và các chức năng quản
lý. Để cho cấu trúc website rõ ràng, dễ quản lý, chúng ta nên tạo một thư mực (Folder) tên
Webmaster, sau đó tạo tất cả các trang cho quản trị ở trong thư mục này. Trước tiên tạo trang
MasterPage cho phần quản trị.
1. Tạo trang Master
o Click phải chuột lên thư mục Webmaster chọn – Add new item…
• Template : Master page
• Name : MasterPage.master
• Language : Visual C#
Cấu trúc web cho quản trị đơn giản, chỉ cần banner và Menu chức năng, giao diện như
sau:
Menu được thiết kế bằng control TreeView, cùng với các link sau:
- Lĩnh vực >> Thêm mới: link tới trang Insert_Linhvuc.aspx
- Lĩnh vực >> Cập nhật: link tới trang Edit_Linhvuc.aspx
- Bản tin >> Thêm mới: link tới trang Insert_Bantin.aspx
- Bản tin>> Cập nhật: link tới trang Edit_Bantin.aspx
- Đổi password: link tới trang ChangePass.aspx
- Xem góp ý: link tới trang ViewGopy.aspx
2. Tạo các trang con trong thư mục Webmaster (Default.aspx,Insert_Bantin.aspx,…) Select
MasterPage ở trên.
3. Tạo trang Đăng nhập cho webmaster
o Click phải chuột lên thư mục Webmaster chọn – Add new item…
• Template :WebFrom
LẬP TRÌNH WEB
Dzoaõn Thanh 52
• Name : Login.aspx
• Language : Visual C#
• Không check vào Select MasterPage
o Trang login.aspx được thiết kế như sau: (có control Vadidation để kiểm tra dữ liệu)
Thông tin được xác định dựa vào dữ liệu từ Database, do đó chúng ta phải thiết kế thêm Table ở
dưới Database, đặt tên table: Taikhoan
Tên trường Kiểu dữ liệu Ghi chú
ID Text(30) Khóa chính
Pass Text(10)
Nhập trước dữ liệu giả: ID: admin và Pass: 123456
Khi đăng nhập thành công, sẽ chuyển về trang Default.aspx của webmaster, vào thao tác các
chức năng từ Menu đã được thiết kế ở trang MasterPage.
Vấn đề đặt ra, nếu trên thanh địa chỉ của trình duyệt, ta gõ link thẳng vào các trang khác trong
webmaster mà không cần phải qua đăng nhập thì sao?
Ví dụ ta gõ:
Do đó, ta phải kiểm tra và ngăn chặn không cho truy cập thẳng vào bên trong mà không qua
đăng nhập bằng cách sử một biến nào đó mà các trang đều nhìn thấy, ta sử dụng Session.
Hoạt động của session này:
i. Khởi tạo giá trị ban đầu của Session này là false
ii. Khi đăng nhập thành công thì giá trị của Session này là true
iii. Ở các trang khác trong webmaster, khi trang web được load lên lần đầu, ta kiểm tra,
nếu như giá trị Session này là false thì chuyển về trang Login, bắt người dung phải
đăng nhập trước. Nên đặt kiểm tra này ở trang MasterPage, không cần đặt nhiều lần ở
các trang con
Cài đặt:
i. Trong file Global.asax ta khởi tạo Session có giá trị false, tên: Session[“Login”]
void Session_Start(object sender, EventArgs e)
{
// Code that runs when a new session is started
Application["so_truy_cap"] = (int)Application["so_truy_cap"] + 1;
Application["co_nguoi_online"] = (int)Application["co_nguoi_online"] + 1;
txtUsernam
e
txtPassword
cmdLogin lblLoi
LẬP TRÌNH WEB
Dzoaõn Thanh 53
// Khởi tạo giá trị Session
Session.Timeout = 30; /
Session["Login"] = false;
}
ii. Ta viết code cho trang Login.aspx, trong sự kiện Click của cmdLogin
protected void cmdLogin_Click(object sender, EventArgs e)
{
CheckLogin();
}
private void CheckLogin()
{
string strconn = "Provider = Microsoft.Jet.OLEDB.4.0;";
strconn += "Data Source=" + Server.MapPath("~/App_Data/tintuc.mdb");
OleDbConnection dbconn = new OleDbConnection(strconn);
string strquery = "Select * from Taikhoan";
OleDbDataAdapter adap = new OleDbDataAdapter(strquery, dbconn);
DataTable dt = new DataTable();
adap.Fill(dt);
foreach (DataRow dr in dt.Rows)
{
if ((txtUsername.Text) == dr["id"].ToString() && txtPassword.Text ==
dr["pass"].ToString())
{
Session["Login"] = true; // Gán giá trị Session là true
Response.Redirect("Default.aspx", false);
return;
}
}
lblLoi.Text = "Invalid Account";
}
iii. Đặt kiểm tra Session ở trong Page_Load của MasterPage, nếu Session là false thì
chuyển về trang Login.aspx
protected void Page_Load(object sender, EventArgs e)
{
if ((bool)Session["Login"] == false)
{
Response.Redirect("Login.aspx", false);
return;
}
}
LẬP TRÌNH WEB
Dzoaõn Thanh 54
iv. Khi Logout khỏi trang quản trị, thì ta gán biến Session[“login”] thành false.
Sự kiện Click của Logout (Dùng control linkbutton thiết kế nút Logout)
protected void linkLogout_Click(object sender, EventArgs e)
{
Session["Login"] = false;
Response.Redirect("Login.aspx", false);
}
4. Tạo trang Thêm mới Bản tin (Insert_Bantin.aspx)
o Click phải chuột lên thư mục Webmaster chọn – Add new item…
• Template :WebFrom
• Name : Insert_Bantin.aspx
• Language : Visual C#
• Check vào Select MasterPage
o Trang Insert_Bantin.aspx được thiết kế như sau: (có control Vadidation để kiểm tra dữ
liệu)
- Sử dụng sự hổ trợ của Control bên ngoài (Free TextBox) để người dùng định dạng html
cho phần nội dung
LẬP TRÌNH WEB
Dzoaõn Thanh 55
Hoạt động của trang Thêm mới bản tin:
i. Khi trang web được load lên, dữ liệu được lấy lên và gắn vào DropdownList Lĩnh vực
ii. Khi nhấn nút Lưu, dữ liệu sẽ được lưu xuống table Bantin đúng theo từng field và định
dạng của Database. Nếu có hình ảnh, hình sẽ được upload vào thư mục Upload đã tạo sẵng
của Website và trường Hinhanh của table Bantin chỉ lưu tên của hình. (Ví dụ: XH1.jpg)
Cài đặt:
i. Lấy dữ liệu lên CboLinhvuc khi trang web vừa hiển thị. Viết code trong sự kiện
Page_Load
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
cboLinhvuc.DataTextField = "Tenlinhvuc";
cboLinhvuc.DataValueField = "Malinhvuc";
GetLinhvuc();// Gọi lại hàm Getlinhvuc
}
}
//Hàm lấy dữ liệu lên cho CboLinhvuc
protected void GetLinhvuc()
{
string strconn = "Provider = Microsoft.Jet.OLEDB.4.0;";
strconn += "Data Source=" + Server.MapPath("~/App_Data/tintuc.mdb");
OleDbConnection dbconn = new OleDbConnection(strconn);
dbconn.Open();
string strquery = "Select * from Linhvuc";
OleDbDataAdapter adap = new OleDbDataAdapter(strquery, dbconn);
dbconn.Close();
DataTable dt = new DataTable();
adap.Fill(dt);
cboLinhvuc.DataSource = dt;
cboLinhvuc.DataBind();
}
ii. Khi nhấn Lưu bản tin, ta mặc địng ngày đăng tin là ngày giờ hiện tại
//Hàm Upload hình ảnh vào thư mục Upload của website nếu có hình
protected void SaveFileUpload()
{
string strFileName;
if (txtFileUpload.FileName != "")
{
strFileName = Server.MapPath("~/Upload\\" + txtFileUpload.FileName);
txtFileUpload.PostedFile.SaveAs(strFileName);
}
}
LẬP TRÌNH WEB
Dzoaõn Thanh 56
//Hàm thêm một bản tin vào table Bantin
private void SaveInfo()
{
string strconn = "Provider = Microsoft.Jet.OLEDB.4.0;";
strconn += "Data Source=" + Server.MapPath("~/App_Data/tintuc.mdb");
OleDbConnection dbconn = new OleDbConnection(strconn);
dbconn.Open();
string strquery = "insert into Bantin";
strquery += " values('" + txtMabantin.Text + "','" + txtTieude.Text + "',";
strquery += "'" + txtNoidungtomtat.Text + "',";
strquery += "'" + txtNoidung.Text + "','" + DateTime.Now + "',";
strquery += "'" + txtFileUpload.FileName + "','" + txtChuthichhinh.Text + "',";
strquery += "'" + cboLinhvuc.SelectedValue + "')";
OleDbCommand cmd = new OleDbCommand(strquery, dbconn);
cmd.ExecuteNonQuery();
dbconn.Close();
}
//Gọi các hàm trên khi nhấn nút Lưu
protected void cmdLuu_Click(object sender, EventArgs e)
{
SaveInfo();
SaveFileUpload();
}
F5 > Chạy thử chương trình.
LẬP TRÌNH WEB
Dzoaõn Thanh 57
5. Tạo trang Cập nhật, chỉnh sửa bản tin (Edit_Bantin.aspx)
o Click phải chuột lên thư mục Webmaster chọn – Add new item…
• Template :WebFrom
• Name : Edit_Bantin.aspx
LẬP TRÌNH WEB
Dzoaõn Thanh 58
• Language : Visual C#
• Check vào Select MasterPage
o Trang Edit_Bantin.aspx được thiết kế như sau:
Một DropdownList Lĩnh vực ( ID: Cbolinhvuc)
button Tìm (ID: cmdTim)
GridView để hiển thị thông tin (gvBantin)
Định dạng Properties của GridView Bản tin:
- AllowPaging: True - Cho phép phân trang
- Allow Sorting: True – Có thể sắp xếp theo cột
- AutoGenerateColumns: False
- Chọn Colums:
o Chọn BoundField > nhấn Add
Header Text: Tiêu đề
DatField: Tieude (tên của trường dữ liệu dưới database)
o Chọn BoundField > nhấn Add
Header Text: Ngày đăng tin
DatField: Ngaydangtin (tên của trường dữ liệu dưới database)
LẬP TRÌNH WEB
Dzoaõn Thanh 59
o Chọn Edit,Update,Cancel và Delete trong CommandField > nhấn Add
o Ok
Hoạt động:
i. Lấy dữ liệu lên cho CboLinhvuc, dữ liệu load lên GridView tùy vào giá trị hiện tai của
CboLinhvuc.
ii. Khi nhấn nút Tìm, GridView bản tin sẽ hiển thị thông tin tùy thuộc vào CboLinhvuc.
Lĩnh vực nào thì hiển thị các bản tin của lĩnh vực đó.
iii. Có thể phân trang được.
iv. Khi nhấn link Delete của tin nào thì sẽ xóa tin đó.
v. Khi nhấn Edit của một tin, chuyển tới trang update.aspx để chỉnh sửa nội dung của tin đó.
Cài đặt:
i. Khi trwng web vừa load lên, lấy dữ liệu đổ vô CboLinhvuc (giống như CboLinhvuc của
trang Thêm mới bản tin).Viết code trong sự kiện Page_Load
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
cboLinhvuc.DataTextField = "Tenlinhvuc";
cboLinhvuc.DataValueField = "Malinhvuc";
GetLinhvuc();// Gọi lại hàm Getlinhvuc để lấy dữ liệu cho CboLinhvuc
BindGrid(); //dữ liệu load lên GridView tùy vào giá trị hiện tai của CboLinhvuc
}
}
LẬP TRÌNH WEB
Dzoaõn Thanh 60
//Hàm lấy dữ liệu lên cho CboLinhvuc
protected void GetLinhvuc()
{
string strconn = "Provider = Microsoft.Jet.OLEDB.4.0;";
strconn += "Data Source=" + Server.MapPath("~/App_Data/tintuc.mdb");
OleDbConnection dbconn = new OleDbConnection(strconn);
dbconn.Open();
string strquery = "Select * from Linhvuc";
OleDbDataAdapter adap = new OleDbDataAdapter(strquery, dbconn);
dbconn.Close();
DataTable dt = new DataTable();
adap.Fill(dt);
cboLinhvuc.DataSource = dt;
cboLinhvuc.DataBind();
}
//Hàm lấy data lên lưới tùy thuộc vào DropDownList Lĩnh vực
protected void BindGrid()
{
string strconn = "Provider = Microsoft.Jet.OLEDB.4.0;";
strconn += "Data Source=" + Server.MapPath("~/App_Data/tintuc.mdb");
OleDbConnection dbconn = new OleDbConnection(strconn);
dbconn.Open();
string strquery = "Select * from Bantin where linhvuc = '" + CboLinhvuc.SelectedValue
+"'";
OleDbDataAdapter adap = new OleDbDataAdapter(strquery, dbconn);
dbconn.Close();
DataTable dt = new DataTable();
adap.Fill(dt);
gvBantin.DataSource = dt;
gvBantin.DataBind();
}
ii. Sự kiện Click của nút Tìm
//Khi nhấn nút Tìm thì gọi hàm BindGrid
protected void cmdTim_Click(object sender, EventArgs e)
{
BindGrid();
}
iii. Phân trang
protected void gvBantin_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
gvBantin.EditIndex = e.NewPageIndex;
BindGrid();
}
LẬP TRÌNH WEB
Dzoaõn Thanh 61
iv. Khi nhấn link Delete của tin nào thì sẽ xóa tin đó.
// Khi nhấn vào Delete trên lưới thì Xóa bản tin
protected void gvBantin_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
//Chọn Properties và đặt thuộc tính DataKeyNames của lưới là tên của trường chứa khóa
chính
//Ví dụ : Mabantin
//Lấy giá trị khóa của dòng khi chọn delete trên dòng đó
Object objKey = gvBantin.DataKeys[e.RowIndex].Value;
string strconn = "Provider = Microsoft.Jet.OLEDB.4.0;";
strconn += "Data Source=" + Server.MapPath("~/App_Data/tintuc.mdb");
OleDbConnection dbconn = new OleDbConnection(strconn);
dbconn.Open();
string strquery = "delete from Bantin where mabantin ='" + objKey + "'";
OleDbCommand cmd = new OleDbCommand(strquery, dbconn);
cmd.ExecuteNonQuery();
dbconn.Close();
gvBantin.EditIndex = -1;
BindGrid();
}
v. Khi nhấn Edit của một tin, chuyển tới trang upload.aspx để chỉnh sửa nội dung của tin đó.
protected void gvBantin_RowEditing(object sender, GridViewEditEventArgs e)
{
//Lấy giá trị khóa của dòng khi chọn Edit trên dòng đó
Object objKey = this.gvBantin.DataKeys[e.NewEditIndex].Value;
//Gửi Khóa của tin đó tới trang update.aspx
Response.Redirect("~/webmaster/update.aspx?id=" + objKey,false);
}
F5 > Chạy chương trình >> Đăng nhập >> Cập nhật bản tin
LẬP TRÌNH WEB
Dzoaõn Thanh 62
6. Tạo trang Chỉnh sửa, cập nhật một bản tin (update.aspx)
o Click phải chuột lên thư mục Webmaster chọn – Add new item…
• Template :WebFrom
• Name : update.aspx
• Language : Visual C#
• Check vào Select MasterPage
o Trang update.aspx được thiết kế như sau:
- DropdownList Lĩnh vực
- TextBox tiêu đề
- Control Free TextBox Nội dung tóm tắt
- Control Free TextBox Nội dung
- Image Hình ảnh để hiển thị hình hiện tại
- Lable Hìn ảnh hiển thị tên hình hiện tại
- FileUpload để thay đổi hình khác
- TextBox chú thích hình
LẬP TRÌNH WEB
Dzoaõn Thanh 63
Hoạt động :
i. Nhận Id (thuộc tính Khóa) từ trang Edit_Bantin.aspx, kết nối database lấy dữ liệu hiển thị
lên các control
ii. Khi nhấn nút lưu, sẽ update dữ liệu trên các control xuống database, và upload hình khác
vào thư mục Upload nếu như thay đổi hình
Cài đặt:
i. Khi trang web được load lên lần đầu, dùng đối tượng Re
Các file đính kèm theo tài liệu này:
- thuc_hanh_int.pdf