Giáo trình Thiết kế web: Phần 2 - Trường ĐH Công nghiệp Quảng Ninh
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.34 MB, 72 trang )
CHƯƠNG 3: TẠO VÀ SỬ DỤNG USER CUSTOM CONTROL (UCC)
3.1. Giới thiệu User Custom Control
Visual studio cung cấp cho chúng ta rất nhiều các điều khiển để phát triển ứng dụng gọi là
điều khiển nội tại (Instrict control). Ngoài ra, nó cịn cung cấp cho chúng ta khả năng tự xây
dựng các điều khiển tùy biến nếu các điều khiển hiện hành khơng đáp ứng được u cầu. Ví
dụ: Nếu ứng dụng của bạn cần chiếc máy tính (Calculator) ở rất nhiều trang thì giải pháp tốt
nhất là tạo một điều khiển Calculator riêng thay việc kết hợp các điều khiển truyền thống, khi
đó ta có thể sử dụng điều khiển này trong toàn bộ ứng dụng.
Chương này sẽ hướng dẫn cách tạo và sử dụng điều khiển do lập trình viên tự xây dựng –
hay cịn gọi là điều khiển tùy biến (Custom Control). Tiếp theo sẽ minh họa thêm một số ví dụ
về tạo điều khiển tùy biến để người đọc hiểu rõ hơn.
Thực chất của User Custom Control (UCC) chính là một "trang con", trong đó có thể chứa
bất kỳ nội dung nào (trừ các thẻ <HTML> <BODY>,<FORM>, vì một trang chỉ có duy nhất
một lần xuất hiện các thẻ này) . "Trang con" này sau đó có thể được chèn (Include) vào các
trang khác để sử dụng. Khi muốn cập nhật nội dung ở tất cả các trang, ta chỉ việc sửa đổi duy
nhất UCC ban đầu. Khả năng này của ASP.NET giúp chúng ta xây dựng ứng dụng nhanh hơn,
dễ bảo trì hơn.
Mỗi một UCC được đặt trong một trang có phần mở rộng là *.ascx. File này có đặc điểm
là khơng truy cập trực tiếp từ trình duyệt mà chỉ được chèn vào các trang aspx.
UCC: là trang ASP.NET nhưng nó được sử dụng giống như các điều khiển khác như:
label, TextBox, CheckBox,…Nó được sử dụng dưới dạng Control mà không trực tiếp thực
thi giống như trang ASP.NET. UCC sau khi thiết kế có thể kéo thả vào trang ASP.NET
giống như các điều khiển label, TextBox, CheckBox,…
3.2. Các bước tạo User Custom Control
Việc thực hiện tạo User custom control trải qua 3 bước chính như sau:
Bước 1: Thêm một web form vào Project hiện hành
Vào menu [Website], chọn [Add new item]. Chọn loại Web user control
Đặt tên cho web user control.
Bước 2: Soạn nội dung của trang.
- Chế độ: Source
- Chế độ: Design
Bước 3: Lưu lại nội dung của trang.
*** Một số điểm cần lưu ý khi tạo UCC:
- Trang UCC cũng có trang Code C# tương ứng là : .ascx.cs
- Đầu trang ascx, thay vì viết chỉ dẫn <%@ Page… ta thay bằng:<%@ Control…
- Trong UCC khơng có cặp thẻ HTML, BODY, FORM.
- Khi "chèn" UCC vào trang aspx, cần phải thêm thẻ <%@ Register… ngay sau thẻ
<%@ Page… Tuy nhiên có thể dùng phương pháp kéo-thả bằng cách click vào trang ascx
và "kéo-thả" vào form .aspx (ở chế độ Design view).
- Một UCC có thể xuất hiện nhiều lần trong một trang.
- Muốn thay đổi UCC trên các trang thì phải trở về trang ascx ban đầu để chỉnh sửa.
3.3. Ví dụ minh họa tạo UCC
Ví dụ: Tạo một ứng dụng Website có tên là “WebSach”, trang Default.aspx của ứng dụng
này hiển thị menu có dạng như hình dưới, sử dụng UCC (MenuTrai.ascx) để tạo menu này.
- Thiết kế trang MenuTrai.ascx
+ Tạo 1 Table: 1 cột, 11 hàng, độ rộng của table là Width:100%
+ Dịng đầu tiên (ơ) của bảng: chọn nền cho ô, gõ vào nội dung: “CHỦ ĐỀ SÁCH”
+ Dịng thứ hai gõ như hình trên (Mỗi mục là 1 HyperLink)
..
+ Dịng thứ mười (ơ) của bảng: chọn nền cho ô, gõ vào nội dung: “ĐĂNG NHẬP”
+ Các dịng tiếp theo soạn như hình trên
+ Chọn viền Border cho Table như hình dưới
- Kết quả khi thiết kế xong
- Thiết kế trang Default.aspx
+ Thiết kế trang Default.aspx như bảng dưới, chèn 1 Table, thiết lập độ rộng Width:100%
Width: giữ ngun
Chỉnh kích thước ơ Chỉnh kích thước ơ này có độ rộng khoảng: 75%,
này có độ rộng chiều cao không chỉnh
khoảng: 25%, chiều
cao không chỉnh
Width: giữ nguyên
=> Thiết lập độ rộng 25% của ơ như hình dưới
+ Sau khi thiết kế xong trang Default.aspx, kéo UCC MenuTrai.ascx vào ơ đầu tiên của
dịng thứ hai của bảng trên, kết quả như hình dưới
CÂU HỎI ÔN TẬP CHƯƠNG 3
Bài tập
Tạo 1 ứng dụng Website có tên là “WebSach”, trên ứng dụng này thực hiện các yêu cầu
sau:
1) Tạo UCC “Banner.ascx” như hình dưới
2) Tạo UCC “MenuNgang.ascx” như hình dưới
3) Tạo UCC “MenuTrai.ascx” như hình dưới
4) Tạo UCC “Footer.ascx” như hình dưới
5) Thiết kế trang “Default.aspx” và kéo các UCC vào các vị trí như hình dưới:
Banner.ascx
MenuNgang.ascx
MenuTrai.ascx
Footer.ascx
6) Kết quả chạy trang “Default.aspx” sau khi thiết kế
CHƯƠNG 4: THIẾT KẾ WEBSITE VỚI MASTERPAGE
4.1. MasterPage là gì?
MasterPage: là trang chính trên website nó cung cấp một giao diện chung nhất trên toàn
website. Khi thay đổi nội dung trên Master page thì tồn website sẽ được áp dụng theo.
Trên MasterPage thường bao gồm các thành phần sau:
- Banner của Website
- Menu trái
- Nội dung trang
- Menu phải
- Bottom của Website
Page Layout là gì ?
Page layout: là các bố cục để thể hiện nội dung trên một page. Page layout được áp dụng
cho một trang web.
4.2. Tạo MasterPage
Để tạo trang MasterPage, ta tiến hành tuần tự như sau:
- Tạo ứng dụng Website có tên là “MinhHoa”
- Xây dựng ứng dụng “MinhHoa” trong đó trang Default.aspx, sử dụng MasterPage được
thiết kế như hình dưới:
- MasterPage được thiết kế như sau:
+ Trong ứng dụng “MinhHoa” tạo trang MasterPage như sau: chọn Website\Add New
Item, xuất hiện cửa sổ như hình dưới:
+ Chọn MasterPage, click Add
+ Xóa điều khiển ContentPlaceHolder có đoạn mã sau trong trang MasterPage vừa được
tạo ra.
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
+ Tiến hành thiết kế MasterPage như yêu cầu
+ Sau khi thiết kế xong, tại phần nội dung màu trắng trên trang MasterPage, kéo điều
khiển ContentPlaceHolder vào. Các trang khác khi sử dụng MasterPage này, thì phần nội
dung được soạn thảo sẽ là phần màu trắng mà có chứa điều khiển ContentPlaceHolder này.
Kết quả hiển thị như hình dưới sau khi thêm điều khiển ContentPlaceHolder
- Áp dụng MasterPage cho trang Default.aspx (các trang khác cũng làm tương tự như
vậy)
Tạo trang “Default.aspx” áp dụng “MasterPage.master”
CÂU HỎI ÔN TẬP CHƯƠNG 4
Bài tập
Xây dựng ứng dụng Website “KhoaCNTT”, thực hiện các yêu cầu sau
1) Thiết kế trang MasterPage như hình dưới:
2) Thiết kế trang Default.aspx sử dụng MasterPage như hình dưới:
3) Thiết kế các trang: GioiThieu.aspx, DaoTao.aspx, SinhVien.aspx, TuyenSinh.aspx với
nội dung tương ứng, các trang này đều sử dụng MasterPage ở trên.
CHƯƠNG 5: ASP.NET VÀ CƠ SỞ DỮ LIỆU
5.1. Cơ sở dữ liệu SQL Server
Cơ sở dữ liệu được dùng để minh họa cho ứng dụng ASP.NET là SQL Server
1) Tạo CSDL cho ứng dụng
- Trong SQL Server, tạo CSDL có tên là “SachOnline”, tạo 3 table: Sach, TheLoai,
NguoiDung.
- Table “Sach” có cấu trúc như sau:
- Table “TheLoai” có cấu trúc như sau:
- Table “NguoiDung” có cấu trúc như sau:
2) Thực hiện sao lưu (Back up) hoặc khôi phục (Restore) nếu đã có bản sao lưu
- Thực hiện các bước khơi phục (Restore) như hình dưới
- Thực hiện các bước sao lưu (Back Up) như hình dưới
5.2. Các bước cần thực hiện trước khi thao tác với cơ sở dữ liệu
Bước 1: Tạo ứng dụng Website
- Tạo ứng dụng Website có tên là “”WebSach”
* Bước 2: Tạo một thư mục tại bất kỳ vị trí nào trên máy có tên là “WebSach” để lưu ứng
dụng Website này. (chẳng hạn: D:\WebASP\WebSach)
- Mở Visual Studio để tạo ứng dụng “WebSach”
* Bước 3: Tạo đường dẫn đến thư mục “WebSach” như hình dưới:
* Bước 4: Tạo các trang để sử dụng cơ sở dữ liệu “SachOnline”.
5.3. Công nghệ ADO.NET
Khi phát triển các ứng dụng trên nền web thì cơng việc chủ yếu phải giải quyết là xử lý các
nghiệp vụ, trong đó phần lớn là xử lý Cơ sở dữ liệu. Trong môi trường phát triển Microsoft
.NET tất cả các ứng dụng webform hay winform đều thống nhất sử dụng chung một bộ thư
viện để truy xuất và thao tác Cơ sở dữ liệu gọi là ADO.NET (Active Data Object).
- ADO.NET là một tập các lớp nằm trong bộ thư viện lớp cơ sở của .NET Framework, cho
phép các ứng dụng windows (như C#, VB.NET) hay ứng dụng web (như ASP.NET) thao tác
dễ dàng với các nguồn dữ liệu.
- Mục tiêu chính của ADO.NET là:
+ Cung cấp các lớp để thao tác CSDL trong cả hai môi trường là phi kết nối (Disconected
data) và kết nối (Connected data).
+ Tích hợp chặt chẽ với XML (Extensible Markup Language)
+ Tương tác với nhiều nguồn dữ liệu thông qua mô tả dữ liệu chung.
+ Tối ưu truy cập nguồn dữ liệu (OLE DB & SQL server).
+ Làm việc trên môi trường Internet.
- Các lớp của ADO.NET được đặt trong Namespace là System.Data/ System.Data.oledb
- ADO.NET bao gồm 2 Provider (2 bộ thư viện thường dùng) để thao tác với các CSDL là:
OLE DB Provider (nằm trong System.Data.OLEDB) dùng để truy xuất đến bất kỳ CSDL nào
có hỗ trợ OLEDB; SQL Provider (nằm trong System.Data.SQLClient) chuyên dùng để truy
xuất đến CSDL SQL Server (Không qua OLE DB nên nhanh hơn). Hiện nay, các hãng thứ ba
còn cung cấp các Provider khác như : MySQL, Oracle… provider để cho phép ứng dụng .NET
truy xuất đến các cơ sở dữ liệu không phải của Microsoft khác.
5.4. Các lớp thao tác với cơ sở dữ liệu SQL Server 2008
5.4.1. Lớp Connection
* Chức năng: Là đối tượng có nhiệm vụ thực hiện kết nối đến Cơ sở dữ liệu để các đối
tượng như Command thao tác với CSDL thông qua Connection này.
- Khai báo biến
SqlConnection ketnoi;
- Tạo chuỗi kết nối
string chuoiketnoi = "Server=NGUYENNGOC; Integrated Security=true; Database=SachOnline";
Hoặc
string chuoiketnoi = "Server=NGUYENNGOC; UID=sa; PWD=123; Database=SachOnline";
- Khởi tạo biến
ketnoi = new SqlConnection(chuoiketnoi);
- Thực hiện kết nối đến cơ sở dữ liệu
ketnoi.Open();
SqlConnection ketnoi;
string chuoiketnoi = "Server=NGUYENNGOC; Integrated Security=true; Database=SachOnline";
ketnoi = new SqlConnection(chuoiketnoi);
ketnoi.Open();
Hoặc
string chuoiketnoi = "Server=NGUYENNGOC; Integrated Security=true; Database=SachOnline";
SqlConnection
ketnoi = new SqlConnection(chuoiketnoi);
ketnoi.Open();
Chú ý: Kết nối với cơ sở dữ liệu SQL Server
- Bạn cần nhập khẩu lớp SqlClient
using System.Data.SqlClient;
- Server: NGUYENNGOC là tên Server cơ sở dữ liệu, có thể dùng tên Server là:
localhost.
a) Một số phương thức:
- Open(): Dùng để mở kết nối:
ketnoi.Open(): Mở kết nối đến CSDL do ta chỉ định trong ConnectionString
- Close(): Dùng để đóng kết nối:
ketnoi.Close();
- Dispose: dùng để huỷ bỏ hay giải phóng đối tượng Connection đang sử dụng.
b) Một số thuộc tính:
- ConnectionString: Chứa các thơng tin để kết nối.
