Giáo trình Lập trình trên nền Web (Phần 1)
ưu điểm chính của .NET Framework
- Tất cả các ngôn ngữ đều thừa hưởng một thư viện thống nhất. Khi sửa chữa hay
nâng cấp thư viện này thì chỉ phải thực hiện một lần.
- Cách thức phát triển ứng dụng nhất quán và tương tự nhau giữa các ngôn ngữ lập
trình. Có thể chuyển đổi sang ngôn ngữ lập trình .NET khác nhau một cách dễ dàng.
- Viết các ứng dụng Web Form không khác nhiều so với ứng dụng Win Form.
- Cung cấp một tập thư viện truy xuất CSDL thống nhất (ADO.NET) cho mọi ngôn
ngữ .NET.
- Hỗ trợ cơ chế “Write one – Run everywhere” (ciết một lần chạy mọi nơi). Một ứng
dụng viết bằng .NET có thể chạy trên bất cứ hệ điều hành nào mà
không cần phải sửa lại code, miễn là máy đó có cài .NET framework.
- Cung cấp hệ thống kiểu chung (Common Type), do vậy đảm bảo tính thống nhất
về kiểu dữ liệu giữa các ngôn ngữ lập trình.
- Cho phép sử dụng nhiều ngôn ngữ lập trình trong cùng một dự án.
- Kết thừa và sử dụng chéo giữa các ngôn ngữ lập trình dễ dàng như trên cùng một
ngôn ngữ (có thể viết một class trên C#, sau đó kế thừa trong VB.NET và ngược lại).- Việc triển khai (Deploy) các ứng dụng dễ dàng. Chỉ cần Copy-and-run (copy là
chạy). Không cần cài đặt và tránh được “các lỗi DLL” như trước đây.
Trang 1
Trang 2
Trang 3
Trang 4
Trang 5
Trang 6
Trang 7
Trang 8
Trang 9
Trang 10
Tải về để xem bản đầy đủ
194 trang
8180
Bạn đang xem 10 trang mẫu của tài liệu "Giáo trình Lập trình trên nền Web (Phần 1)", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
Tóm tắt nội dung tài liệu: Giáo trình Lập trình trên nền Web (Phần 1)
UBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"">
Using Themes
Skin tới điều khiển được chỉ định
Skin mặc định cho điều khiển TextBox
Không áp dụng Skin mặc định
Khi sử dụng Themes thì mặc định nếu trong các điều khiển trên Form có quy định
thuộc tính thì hiển thị của điều khiển đó sẽ bị ảnh hƣởng của các thuộc tính đó. Tuy nhiên
cũng có thể ghi đè các thuộc tính đó để sử dụng thuộc tính trong Themes quy định, bằng
cách đƣa vào chỉ dẫn .
b) Đăng ký Themes với Web.config
Khi muốn sử dụng themes cho tất cả các trang Web trong Website có thể đăng ký nó
vào trong file Web.config trong ứng dụng Web của mình nhƣ sau:
Để ghi đè vào thuộc tính của điều khiển trong Website
Trong một trang ta ko muốn sử dụng Themes, ta có thể gỡ bỏ nó trong trang này
bằng cách:
Thêm CSS tới Themes
Css là một thay thế cho skins để điều khiển cách xuất hiện của các thành phần của
cả HTML và ASP.NET
Khi thêm css vào folder Themes thì nó sẽ đƣợc áp dụng cho tất cả các trang đƣợc áp
dụng theme
Ví dụ:
Trang simple.css
html{background-color:gray;font:14px Georgia,Serif;}
.content{margin:auto;width:600px;border:solid 1px black;background-
color:White;padding:10px;}
h1{color:Gray;font-size:18px;border-bottom:solid 1px orange;}
label{font-weight:bold;}
input{background-color:Yellow;border:double 3px orange;}
.button{background-color:#eeeeee;}
Trang skintotheme.aspx
<%@ Page Language="C#" Theme="blue" AutoEventWireup="true"
CodeFile="skintotheme.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"">
SIMPLE CSS
Registration Form
<asp:Label id="lblFirstName" Text="First Name:"
AssociatedControlID="txtFirstName" Runat="Server" />
<asp:Label id="lblLastName" Text="Last Name:"
AssociatedControlID="txtLastName" Runat="Server" />
<asp:Button id="btnSubmit" Text="Submit Form" CssClass="button"
Runat="Server" />
Hình 3.85. Kết quả sử dụng CSS kết hợp với Themes
Ở ví dụ trên css đƣợc sử dụng tới kiểu của các thành phần html, bởi vì điều khiển
ASP.NET đƣa ra mã html khi trình duyệt lên áp dụng css cho các điều khiển của aspx
phải sử dụng với thẻ của HTML, nhƣ trog ví dụ trên cả hai điều khiển TextBox và Button
đƣợc đƣa ra mã HTML là thẻ .
c) Đƣa nhiều CSS vào một Themes
Khi muốn đƣa nhiều css vào một thƣ mục themes, ví dụ tạo ra hai file css là
ThemeA.css và ThemesB.css thì khi sử dụng phải dùng cú pháp:
3.5.4. Navigation Controls
Có nhiều cách để một ngƣời truy cập trang Web từ trang này sang trang khác. Ví
dụ có thể thêm các liên kết HTML (hoặc điều khiển HyperLink) trong trang để cho phép
ngƣời dùng lƣớt Web. Nếu muốn thực hiện chuyển hƣớng trang có thể gọi
Response.Redirect() hoặc Server.Transfer() trong trang mã lệnh. Nhƣng trong ứng dụng
Web chuyên nghiệp, các yêu cầu chuyển hƣớng chuyên sâu hơn. Các ứng dụng này cần
một hệ thống cho phép ngƣời dùng lƣớt Web thông qua một hệ thống các trang, mà không
viết đoạn code chuyển hƣớng. ASP.NET cung cấp một mô hình chuyển hƣớng dễ dàng để
cho phép ngƣời dùng lƣớt Web thông qua các ứng dụng Web. Trƣớc khi có thể sử dụng
mô hình này cần phải xác định hệ thống cấp bậc của trang Web, nói cách khác, làm thế
nào các trang đƣợc tổ chức thành các nhóm một cách logic. Sau đó xác định rằng cấu trúc
trong một tập tin chuyên dụng và kết nối thông tin đó để chuyển hƣớng với các điều khiển
menu bao gồm TreeView và Menu.
Hình 3.86 ASP.NET navigation với SiteMap
- Site Maps
Thực hiện việc tạo một Website SimpleSiteMap:
Mở cửa số Add New Item để tạo trang Web.sitemap
Hình 3.87. Tạo trang Web.sitemap với mục chọn SiteMap
Nội dung trang Web.sitemap ban đầu nhƣ sau :
Các nguyên tắc tạo trang SiteMap:
- Một trang SiteMap bắt đầu bằng thẻ
.
- Mỗi trang Web trong SiteMap đƣợc khai báo trong thẻ
<siteMapNode title="RevoStock" description="Investment software for stock charting"
url="~/product1.aspx" />
- Một siteMapNode có thể chứa các siteMapNode khác.
<siteMapNode title="Products" description="Learn about our products"
url="~/products.aspx">
<siteMapNode title="RevoStock" description="Investment software for stock
charting" url="~/product1.aspx" />
<siteMapNode title="RevoAnalyze" description="Investment software for yield
analysis" url="~/product2.aspx" />
- Lập lại địa chỉ URL trong các siteMapNode là không cho phép.
Thiết kế trang sitemap với nội dung sau :
<siteMapNode title="About Us" description="How RevoTech was founded"
url="~/aboutus.aspx" />
<siteMapNode title="Investing" description="Financial reports and investor analysis"
url="~/financial.aspx" />
<siteMapNode title="Products" description="Learn about our products"
url="~/products.aspx">
<siteMapNode title="RevoStock"
description="Investment software for stock charting"
url="~/product1.aspx" />
<siteMapNode title="RevoAnalyze"
description="Investment software for yield analysis"
url="~/product2.aspx" />
Trang MasterPage.master có nội dung sau :
<%@ Master Language="C#" AutoEventWireup="true"
CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"">
Navigation Test
<asp:SiteMapPath ID="SiteMapPath1" runat="Server" Width="264px" Font-
Size="10pt">
Root
<%# Eval("description")
%>
<asp:TreeView ID="TreeView1" runat="Server"
DataSourceID="SiteMapDataSource1" ImageSet="Faq" NodeIndent="0" >
<NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="DarkBlue"
HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" />
<td style="vertical-align: top; padding: 10px; width: 301px;"
bgcolor="LightGoldenrodYellow">
Trang MasterPage
Điều khiển SitemapDataSource :
Điều khiển SiteMapPath :
<asp:SiteMapPath ID="SiteMapPath1" runat="Server" Width="264px" Font-
Size="10pt">
Root
<%# Eval("description")
%>
Hình 3.88. Thay đổi định dạng của SiteMappath
Chọn mục Auto Format.., chọn một lựa chọn scheme thích hợp trong danh sách và
click OK. Sau đó chọn mục Edit Templates để thiết kế nội dung cho SiteMapPath : có 4
thành phần thẻ bên trong gồm RootNodeTemplate, NodeTemplate, CurrentNodeTemplate
và PathSeparatorTemplate.
Nhập nội dung thẻ Current NodeTemplate để hiển thị nội dung thẻ title và thẻ
description. Trong đó là một cách viết theo dạng kết nối dữ liệu đơn
giản (simple data binding) dùng để lấy nội dung title.
<%# Eval("description")
%>
Nhập nội dung thẻ RootNodeTemplate : Hiển thị chữ Root in đậm
Root
Kết quả: khi chọn mục Investing , nội dung SiteMappath hiện ra nhƣ sau :
Hình 3.89. Nội dung SiteMapPath hiển thị theo Web.sitemap
Điều khiển TreeView :
Đầu tiên chọn thuộc tính DataSource của TreeView chỉ đến SiteMapDataSource1 ,
sau đó click vào mục Refresh Schema , nội dung TreeView sẽ đƣợc cập nhật theo
SiteMapDataSource1.Click vào mục Auto Format.. để định dạng hiển thị cho TreeView,
click nút Apply để xác nhận việc thay đổi dạng hiển thị :
Hình 3.90. Định dạng hiển thị cho TreeView
Nội dụng TreeView sau khi cấu hình :
<asp:TreeView ID="TreeView1" runat="Server"
DataSourceID="SiteMapDataSource1" ImageSet="Faq" NodeIndent="0" >
<NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="DarkBlue"
HorizontalPadding="5px"
NodeSpacing="0px" VerticalPadding="0px" />
Tạo một trang StyleSheet.css để định dạng hiển thị cho các thẻ HTML :
body {
font-family: Verdana;
font-size: 83%;}
div.Box {
padding: 5px;
border-width: 2px;
border-style: ridge;
background-color: Lime;
}
Các trang thành phần trong Web.sitemap, chỉ thiết kế với nội dung đơn giản minh
hoạ cho bài tập và sẽ đƣợc gọi khi đƣợc lựa chọn trên TreeView theo sự điều hƣớng của
Web.sitemap
Trang financial.aspx
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true"
CodeFile="financial.aspx.cs" Inherits="financial" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
Investing
Kết quả chọn Investing trên TreeView sẽ gọi trang financial.aspx :
Hình 3.91. Chọn mục Investing trên TreeView
Tƣơng tự với ví dụ trên đƣợc sử dụng Menu trên MasterPage có điều hƣớng theo
Web.sitemap
Hình 3.92. Menu sử dụng theo điều hƣớng của Web.sitemap
Chọn Auto Format.. để định dạng hiển thị cho Menu, click nút OK để xác nhận việc thay đổi.
Hình 3.93 Định dạng hiển thị cho Menu
Trang MasterPage.master có chứa thẻ đƣợc thiết kế theo hình dƣới đây :
Hình 3.94. Menu theo điều hƣớng của Web.sitemap
Nội dung trang MasterPage.master nhƣ sau:
<%@ Master Language="C#" AutoEventWireup="true"
CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"">
Navigation Test
<asp:Menu ID="Menu1" runat="Server" DataSourceID="SiteMapDataSource1"
BackColor="#F7F6F3" DynamicHorizontalOffset="2" Font-Names= "Verdana"
ForeColor="#7C6F57"
StaticDisplayLevels="2" StaticSubMenuIndent="10px">
Phần mã lệnh của trang MasterPage.master cung cấp phƣơng thức
GetDescriptionFromTitle(string Title) hiện thông tin thẻ chọn trên menu.
public partial class MasterPage : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected string GetDescriptionFromTitle(string title)
{
SiteMapNode startingNode = SiteMap.RootNode;
SiteMapNode matchNode = SearchNodes(startingNode, title);
if (matchNode == null){
return null;
}
else {
return matchNode.Description;
}
}
private SiteMapNode SearchNodes(SiteMapNode node, string title)
{
if (node.Title == title) {
return node;
}
else{
foreach (SiteMapNode child in node.ChildNodes)
{
SiteMapNode matchNode = SearchNodes(child, title);
if (matchNode != null) return matchNode;
}
return null;
}
}
}
3.6. Bài tập
1. Xây dựng 2 trang web nhƣ hình sau. Khi ngƣời dùng click vào nút HIỂN THỊ thì
gửi tên, địa chỉ và số điện thoại sang trang HienThi.aspx để hiển thị.
Trang NhapThongTin.aspx Trang HienThi.aspx
2. Xây dựng 2 trang Web nhƣ hình sau. Khi ngƣời dùng click vào nút HIỂN THỊ thì
gửi tên và sở thích sang trang KetQua.aspx để hiển thị.
Trang NhapThongTin.aspx Trang KetQua.aspx
3. Xây dựng ba trang Web nhƣ hình sau. Khi click vào nút HIỂN THỊ, nếu ngƣời
dùng không nhập đủ thông tin thì chuyển sang trang Loi.aspx, ngƣợc lại chuyển
sang trang HienThi.aspx để hiển thị thông tin vừa nhập.
NhapThongTin.aspx Loi.aspx HienThi.aspx
4. Xây dựng trang Web đếm số ngƣời đang Online trên Website nhƣ hình sau:
SoNguoiOnline.aspx
5. Xây dựng trang Web đếm số ngƣời đã truy cập Website nhƣ hình sau:
SoNguoiTruyCap.aspx
6. Tạo file *.CSS với các thuộc tính và giá trị nhƣ sau:
- Màu nền: #FF00FF; Màu chữ: black; Lề chữ:left; Cỡ chữ:14pt.
- Sau đó sử dụng file *.CSS này để hiển thị trên trình duyệt mẫu nhƣ hình sau
7. Tạo file *.CSS với các thuộc tính và giá trị nhƣ sau:
- Màu chữ: #0000ff; Màu nền: #00cccc; Cỡ chữ:15pt; Lề chữ: center.
- Sau đó sử dụng file *.CSS này để hiển thị trên trình duyệt mẫu nhƣ hình sau
8. Tạo file *.CSS với các thuộc tính và giá trị nhƣ sau:
- Màu nền: #00cccc
- Liên kết đã thăm: background-color:#FFF568; color:#FF0000; text-
decoration:none
- Liên kết đang kích hoạt: color:#662D91; font-variant:small-caps.
Sau đó sử dụng file *.CSS này để tạo các hiệu ứng cho 5 liên kết trong hình sau
9. Tạo User Control để hiển thị ngày, giờ hiện tại của Server trên trang Default.aspx
10. Tạo trang web với giao diện nhƣ sau:
Khi ngƣời dùng click vào nút: “Ghi nhận” thì kiểm tra giá trị của các trƣờng
(không đƣợc để trống) và đƣa ra thông báo lỗi tƣơng ứng.
11. Tạo một form theo giao diện dƣới đây:
- Load tự động giá trị của các trƣờng: Ngày, tháng, năm.
- Khi ngƣời dùng click vào nút “Ghi nhận” thì hiển thị lại thông tin theo mẫu sau:
12. Tạo trang Web có giao diện nhƣ sau:
- Khi ngƣời dùng click vào nút “Đặt chỗ” thì sẽ hiển thị lại thông tin theo mẫu sau:
13. Tạo trang Web theo mẫu sau:
Chú thích:
Tên Tour gồm các mục
sau:
- Khi ngƣời dùng click vào nút “Đăng ký Tour” thì sẽ hiển thị lại các thông tin theo
mẫu sau:
14. Tạo trang Web với giao diện theo mẫu sau:
- Đƣa dữ liệu tự động vào các ô ngày, tháng năm.
- Khi ngƣời dùng click vào nút “Tiếp tục” thì kiểm tra giá trị của các trƣờng trên
form. Đƣa ra các thông báo lỗi tƣơng ứng.
15. Tạo trang Web có giao diện nhƣ sau:
- Khi ngƣời dùng click vào nút “Đăng nhập” thì dùng các biến session để lƣu lại
các giá trị và hiển thị kết quả ngay trong trang:
- Khi ngƣời dùng click vào “Click here” thì mở trang mới và hiển thị lại thông tin
nhƣ sau:
16. Tạo trang Web có giao diện nhƣ sau:
- Khi ngƣời dùng click vào nút “Xác nhận” thì sử dụng cookie để lƣu lại các thông
tin và hiển thị ở bên dƣới nút “Xác nhận”:
- Khi click vào “Click here” sẽ hiển thị lại các biến cookie.
17. Tạo trang “dangnhap.aspx” với giao diện nhƣ sau:
- Nếu Username = “admin”, password = “123” thì dùng biến session để lƣu lại các
thông tin và điều hƣớng sang trang “dangnhapthanhcong.aspx”.
- Trang “dangnhapthanhcong.aspx”: hiển thị dòng chữ “Xin chào, admin” và nút
“Thoát” (để hủy session và quay về trang dangnhap.aspx).
18. Tạo trang Web có giao diện nhƣ sau:
- Kiểm tra kiểu dữ liệu trong các trƣờng sao cho phù hợp, nếu không thì thông báo
lỗi tƣơng ứng ở dƣới nút “Đặt hàng”.
19. Tạo trang Web với giao diện nhƣ sau:
- Khi ngƣời dùng click vào nút “Gửi thông tin” thì hiển thị các thông tin trong
phần “HỒ SƠ KHÁCH HÀNG”.
20. Tạo trang “dangky.aspx” với giao diện theo mẫu sau:
- Khi ngƣời dùng click vào nút “Gửi thông tin” thì sử dụng các biến session để lƣu
lại các thông tin, sau đó điều hƣớng sang trang “thongtindangky.aspx”.
- Trang “thongtindangky.aspx” sẽ hiển thị lại các thông tin vừa đăng ký.
21. Tạo một User Control cho phần đăng nhập hệ thống có giao diện nhƣ sau:
- Thêm thuộc tính cho phép ngƣời dùng đặt độ rộng của điều khiển.
22. Tạo User Control cho phần menu có giao diện nhƣ sau:
23. Tạo User Control cho phần chân trang có giao diện nhƣ sau:
24. Xử dụng MasterPage để xây dựng giao diện cho trang chủ phần Quản trị nhƣ hình
bên dƣới. Trong đó có các phần:
- UserControl Header: chứa nội dung phần đầu trang
- UserControl Left: chứa menu chức năng bên trái (nếu chƣa xây dựng thì xem bài
Lab-02-MenuLeft).
- Đặt 01 ContentPlaceHolder ở head để thay đổi tiêu đề trang.
- Đặt 01 ContentPlaceHolder để thể hiện phần nội dung của các trang.
- Xử lý việc click vào các chức năng bên trái để load nội dung tƣơng ứng.
File đính kèm:
- giao_trinh_lap_trinh_tren_nen_web_phan_1.pdf
