Project+ +eticket+1.0+ +Ghi+Chu+Ben+Le+Du+An

Project : ETicket 1.
PROJECT
ETICKET
Phiên bản : 1.0
Tác giả : Phan Minh Tài
Cộng sự : Nguyễn Huỳnh Việt; Dương Văn Kiệm
(Bản nháp, Tài liệu ghi chú bên lề dự án)
TP. HCM, 2009
© 2009, Phan Minh Tài – TT CNTT – Ngân hàng Đầu tư và Phát triển Việt Nam Trang 1
Project : ETicket 1.0
BẢN QUYỀN
Tác giả dự án, ông Phan Minh Tài, Trung tâm CNTT – Ngân hàng Đầu tư và Phát
triển Việt Nam, giữ toàn quyền đối với dự án.
ETicket được cung cấp miễn phí cho cộng đồng và dự án chỉ được sử dụng như là
một công cụ nghiên cứu kiến trúc ứng dụng và kỹ thuật lập trình, phục vụ mục đích
học tập và nâng cao kỹ năng phát triển ứng dụng.
Các dự án liên quan đến thương mại điện tử được triển khai dựa trên mã nguồn
ETicket đều phải xin ý kiến của tác giả và chỉ được triển khai khi có văn bản cho
phép, cùng với một khoản phí nhất định dựa trên thỏa thuận triển khai.
GIỚI THIỆU TÁC GIẢ
Tác giả : Phan Minh Tài

Hiện tại đang công tác tại Phòng CNTT Miền Nam – Trung tâm
CNTT – Ngân hàng Đầu tư và Phát triển Việt Nam, đồng thời
là Giám đốc điều hành CTY TNHH Giải Pháp VI NA, có trụ sở
tại TP.HCM.
Lĩnh vực nghiên cứu :

Toán học : Lý thuyết số, Toán học rời rạc
Tin học : OOP, UML, RUP, Design Patterns,
Solution Architecture
• CLR and the core .NET Base Class Libraries
Kinh nghiệm • ASP.NET, ASP.NET MVC, LINQ, …
• Silverlight, WPF, IIS 7.0
• Visual Studio Tools for ASP.NET, WPF, Silverlight and Mobile
• JavaScript, Jquery, CSS, …
• Java, IBM Ration Application Developer, IBM WebSphere MQ, …
Email : taipm@bidv.com.vn; taipm@vinasolution.vn; taipm.bidv@gmail.com

Liên hệ
Yahoo : phanminhtaihoaitan@yahoo.com
Blog : http://taipm.blogspot.com/
GIỚI THIỆU DỰ ÁN
ETicket là dự án mã nguồn mở, được xây dựng nhằm mô phỏng (tương đối gần) một
hệ thống cung ứng “Vé Tàu Xe Điện Tử” qua mạng Internet. Trên phương diện kỹ
thuật, dự án này được xây dựng dựa trên nền tảng một số công nghệ mới nhất của
Microsoft, bao gồm :
- .NET Framework 3.5
- ASP.NET 3.5 / ASP.NET MVC 1.0
- Microsoft SQL Server 2005
- AJAX / LINQ
- Visual Studio 2008/2010
Bên cạnh đó, dự án cũng được thừa hưởng một số những mô hình thiết kế chuẩn như :
3 – Tier Architecture, Design Patterns cùng các kỹ thuật tiên tiến khác trong kỹ thuật
lập trình web : JQuery, CSS, JavaScript, Ajax, …
ETicket 1.0 – DATABASE
Lưu ý :
Để phục vụ cho quá trình tìm kiếm dữ liệu, hầu hết các bảng đều có
trường Tag để lưu các từ khóa nổi bật cho từng record. Bản thân trường
Tag sẽ được tự động cập nhật theo một công thức có sẵn (dựa trên cấu
trúc thông tin của đối tượng), ngoài ra, trường Tag cũng có thể được bổ
sung bằng cách thủ công do chính người sử dụng thay đổi.
ETicket 1.0 – DỮ LIỆU MẪU

Trong các ứng dụng theo mô hình ASP.NET MVC, việc xây dựng một bộ khung để
nhập dữ liệu đầu vào nhằm phục vụ quá trình test tương đối dễ dàng. Do vậy, trong
hầu hết các tình huống trên thực tế, tôi luôn quan tâm đến việc phát triển các tính
năng cơ bản để nhập dữ liệu đúng chuẩn và hợp lệ để quá trình kiểm thử được diễn ra
thuận lợi theo đúng kịch bản đề ra.
Quy trình nhập & sinh dữ liệu
ETicket là một hệ thống tương đối phức tạp, khối lượng dữ liệu lớn, do đó chúng ta
cần phải khai thác triệt để dữ liệu để cập nhật và xử lý phù hợp, nhằm giảm bớt công
sức cho đội ngũ nhân viên nhập liệu đầu vào.
Quy trình nhập dữ liệu
- Bước 1 : Mỗi khi có một công ty đăng ký tham gia hệ thống ETicket, họ sẽ
phải cung cấp các dữ liệu liên quan : Director, Company, Car, CarSchedule.
Đây là các dữ liệu nguyên thủy được cung cấp tại các nhà xe/bến xe – gọi
chung là nhà cung cấp dịch vụ.
Lưu ý : Hầu hết các xe đều có một lịch trình cố định, cách ngày. Chẳng hạn, xe
77M1 – 7152 (Dũng Thủy – Bến xe Bồng Sơn) cứ ngày chẳn thì chạy Bồng
Sơn – Sài Gòn, ngày lẻ chạy Sài Gòn – Bồng Sơn, ngày 13 âm lịch thì nghỉ. Do
đó, chúng ta cần phải xây dựng một cơ chế nhận dạng “mẫu lịch trình” để sinh
dữ liệu cho CarSchedule một cách phù hợp, đồng thời cũng cho phép người sử
dụng chỉnh sửa khi cần thiết.
1. Bảng Company (02 record)
Record 01 :
FullName : Tập đoàn Mai Linh
ShortName : Mai Linh Express
TaxNumbers : 030
2. Bảng Car (02 record)
3.
ETicket 1.0 – Quy ước mã nguồn
Thuộc tính
- Private : Ký tự đầu (_), chữ cái đầu tiên của từ tiếp theo là chữ thường, chữ cái
các từ tiếp theo là chữ hoa. Ví dụ : private string _firstName;
- Public : Chữ cái đầu tiên của từ tiếp theo là chữ hoa, chữ cái các từ tiếp theo là
chữ hoa. Ví dụ : public string FirstName;
ETicket 1.0 – Models Package

Models được xem là một Database mở rộng của ứng dụng, nó bao hàm một tập các
ánh xạ 1 – 1 giữa các bản trong Database, và danh sách các đối tượng mở rộng như
các kiểu đối tượng cache trong hệ thống, các đối tượng trợ giúp hiển thị dữ liệu trong
mô hình MVC, … đây là các đối tượng không được lưu trữ.
Models
BusinessObjects
ETicket.dbml
ViewObjects
TicketView.cs
IServices.cs
IEnumerable<Bill> GetCustomersByTags(List<string> tags);
IEnumerable<Bill> GetBillsOfCustomer(Guid customerId);

IEnumerable<Bill> GetBillsByTags(List<string> tags);
IEnumerable<Car> GetCarsOfCompany(Guid companyId);

IEnumerable<Car> GetCarsByTags(List<string> tags);
IEnumerable<User> GetUsersOfOffice(Guid officeId);
IEnumerable<Ticket> GetTicketsByTags(List<string> tags);

IEnumerable<Company> GetCompaniesByTags(List<string> tags);
IUserRepository.cs
Insert
Delete
Edit
GetEntity(Guid id);
GetEntities();
IOfficeRepository.cs
Insert
Delete
Edit
GetEntity(Guid id);
GetEntities();
IBillRepository.cs
Insert
Delete
Edit
GetEntity(Guid id);
GetEntities();
ITicketRepository.cs
Insert
Delete
Edit
GetEntity(Guid id);
GetEntities();
ICarScheduleRepository.cs
Insert
Delete
Edit
GetEntity(Guid id);
GetEntities();
ICarRepository.cs
Insert
Delete
Edit
GetEntity(Guid id);
GetEntities();
ICompanyRepository.cs
Insert
Delete
Edit
GetEntity(Guid id);
GetEntities();
ICustomerRepository.cs
Insert
Delete
Edit
GetEntity(Guid id);
GetEntities();
Services.cs
UserRepository.cs
OfficeRepository.cs
BillRepository.cs
TicketRepository.cs
CarScheduleRepository.cs
CarRepository.cs
CompanyRepository.cs
CustomerRepository.cs
ETicket 1.0 – Controllers

Controller, được xem là trung tâm điều phối các hoạt động diễn ra trong ứng dụng, do
đó việc thiết kế và xây dựng hệ thống Controller như thế nào cho hợp logic, đạt hiểu
quả cao nhất, … luôn luôn là một bài toán khó. Dựa trên kinh nghiệm, tôi cho rằng
một số gợi ý dưới đây là hữu ích cho việc hoạch định Controller.
Lưu ý : Hoạch định Controller
- Trên nguyên tắc, mỗi một BusinessObject đều cần một Controller tương ứng,
controller này thường sẽ chịu trách nhiệm chính với các method cơ bản :
Create, Detail, Edit, Delete.
- Các ứng dụng ASP.NET MVC trong thực tế đều cung cấp một danh sách các
đối tượng mở rộng nhằm hỗ trợ tốt hơn quá trình xây dựng dựng các lớp giao
diện phức tạp. Các đối tượng này gọi chung là ViewObjects, được chứa trong
thư mục ViewObjects, có thể (hoặc không) thừa kế các đối tượng thuộc
BusinessObjects.
- Ngoài ra, hầu hết các ứng dụng đều mang một số tính năng đặc thù như :
Search, Email, … đây là các tính năng độc lập (tương đối) không phục thuộc
nhiều vào các BusinessObjects hay ViewObjects, do đó chúng ta có thể cân
nhắc xây dựng các Controller riêng để đảm nhận các công việc này.
TicketController
TicketController, ngoại trừ cung cấp một số tính năng cơ bản liên quan đến CRUD,
còn được bổ sung một số action sau :
- AddToCart(Guid ticketId)
Chịu trách nhiệm đưa Ticket.id = ticketId vào Cart để chuẩn bị thanh toán.
AddToCart sẽ tác động lên Cart.ascx, đây là một điều khiển dùng chung được
xây dựng để trình bày danh sách các ticket đã được chọn.
Một số Controller mở rộng
Trên cơ sở những yêu cầu riêng về tính năng đặc thù của hệ thống ETicket, dưới đây
là danh sách một số controller mở rộng :
! SearchController
! PaymentController
SearchController
SearchController có trách nhiệm thực thi mọi yêu cầu tìm kiếm từ khách hàng,
nó bao gồm việc ghi nhận dữ liệu và hành động đầu vào, sau đó thực thi các
quyết định cần thiết theo thuật toán, thu nhận kết quả trả về và quyết định cách
thức hiển thị dữ liệu phù hợp (một cách thông minh nhất) cho khách hàng.
# Phương thức : Search(string strKeyWord)
# Phương thức : SearchTicket(string strKeyWord);
Mô tả : Biến strKeyWord nhận dữ liệu đầu vào là giá trị của ô textbox trong
hộp tìm kiếm. Phương thức Search được thực hiện ngay tức khắc sau khi
khách hàng nhấn nút tìm kiếm.
Thuật toán
! Mặc định, hệ thống sẽ tìm kiếm trong phạm vi vé xe và nhà xe, bằng
cách duyệt danh sách từ khóa của từng đối tượng khi đang được lưu
trong hệ thống. Kết quả tìm kiếm sẽ được phân loại và trả về trong một
View phù hợp.
! Từ khóa đầu vào sẽ được băm nhỏ thành từng từ hoặc cụm từ nguyên tố
(mang đủ nghĩa) và sẽ được so sánh với danh sách từ khóa có trong cơ sở
dữ liệu.
PaymentController
SellController
SellController cung cấp đầy đủ các hoạt động trong một quy trình bán vé, bao gồm
các phương thức :
! SelectTicket()
Lưu ý : Các controller dựa trên BusinessObjects
Đối với các ứng dụng theo mô hình ASP.NET MVC, mỗi một BusinessObjects
thường sẽ chịu sự điều khiển của một Controller tương ứng, tôi gọi đây là
ObjectController.
Hầu hết các ObjectController đều cung cấp các tính năng cơ bản (mặc định) :
Index, Create, Delelte, Details, Edit.
ETicket 1.0 – Views

Đối với các ứng dụng ASP.NET MVC, mỗi một BusinessObject thông thường sẽ đi
cùng với 4 Views : Index, Details, Create, Edit. Tất nhiên, tùy một số tình huống mà
chúng ta có thể bỏ bớt hoặc thêm một số View cho phù hợp.
Lưu ý : Đối với một số Create View bị phụ thuộc dữ liệu
Trước tiên, chúng ta xem qua mô hình CSDL cho hai bảng phụ thuộc (1 – n)
như hình dưới đây :
Trên thực tế, mỗi một xe (Car) phải nằm (một cách duy nhất) tại một công ty
(Company). Do đó, trong giao diện Create View (của Car), ta phải cho phép
người nhập liệu chỉ chọn một trong số các công ty đã có trong CSDL của hệ
thống. Do vậy, phần CompanyId của Car sẽ phải phụ thuộc (duy nhất, chỉ chọn
một) vào bảng Company.
Shares
ETicket 1.0 – Scenario 01 : Tìm kiếm thông tin về vé tàu xe
Kịch bản
Bất cứ ai có thể truy cập Internet được bằng máy tính hoặc điện thoại đều có
thể sử dụng hệ thống www.vetauxe.vn để tìm kiếm những thông tin mới nhất
về hệ thống Vé Tàu Xe của hầu hết các hãng cung cấp dịch vụ vận tải hành
khách tại Việt Nam. Hệ thống VETAUXE cho phép :
- Tìm kiếm thông tin về vé,
Kịch bản ứng dụng
Bước 1 : Khách hàng, đăng nhập vào địa chỉ www.vetauxe.vn, gõ vào ô tìm
kiếm từ khóa cần tìm (có gợi ý kèm theo), chẳng hạn :
- Để tìm kiếm tất cả các chuyến xe (và vé khả dụng) từ TP.HCM về Quy
Nhơn, khách hàng có thể sử dụng từ khóa : TP.HCM – Quy Nhơn.
- Để tìm kiếm thông tin về một hãng xe cụ thể, chẳng hạn để tìm kiếm thông
tin liên quan về xe Phương Trang, hoặc Mai Linh, khách hàng có thể sử
dụng từ khóa : Phương Trang, Mai Linh, …
- …
Bước 2 : Ngay sau khi gõ Enter (hoặc nhấn nút Tìm kiếm), khách hàng sẽ được
đưa đến trang kết quả tìm kiếm, trang này :
- Nếu người sử dụng tìm chọn kiểu tìm kiếm Vé xe, thì trang kết quả tìm
được sẽ trả về thông tin là danh mục vé chưa được đặt, …
- Nếu khách hàng chọn kiểu tìm kiếm là Nhà xe, thì trang kết quả sẽ trả về tất
cả các thông tin liên quan đến nhà xe đó, …
- …
Bước 3 : Khách hàng có thể xem thông tin liên quan dựa trên kết quả tìm kiếm,
nếu thông tin trả về là vé tàu xe, khách hàng có thể chọn mua để đưa vé xe vào
hộp vé, sau đó thực hiện các thao tác khác nếu có nhu cầu mua thực sự và
thanh toán.
ETicket 1.0 – Scenario 02 : Khách hàng mua vé & Thanh toán
Tiến trình mua/bán (vé) chỉ hoàn tất khi nhà cung cấp dịch vụ đã nhận được
tiền và khách hàng nhận được vé.
Kịch bản
ETicket 1.0 – Interface : Trang chủ
Ý tưởng
Trang chủ cần phải thông thoáng, màu sắc thanh, nhẹ, có thể xem trang chủ của
BaamBoo, Google hoặc WolframAlpha là một gợi ý. Ở đây tôi thích giao diện của
WolframAlpha.
Phân tích bố cục trang
- Để có thể xây dựng được trang chủ như trang của WolframAlpha, chúng ta
cần phải phân tích bố cục của trang một cách thận trọng.
- Phần Menu, nằm trên cùng, tốt nhất nên đặt nó trong một thẻ <div> có tên
“divMenu”.
- Tiếp theo là ô tìm kiếm, ta định nghĩa nó trong thẻ <div id =

“divSearchBox” … >
- Phần còn lại, phía dưới, ta định nghĩa nó trong thẻ <div id = “divMain” …>
Thực hành : Hộp tìm kiếm
- Mặc định, khi một ứng dụng ASP.NET MVC khởi động, trang
Home/Index.aspx sẽ được gọi. Do đó, ngoại trừ master page ra, trang
Home/Index.aspx chính là trang chủ. Ta sẽ bắt đầu thiết kế từ trang này.
- Thẻ divSearchBox, sẽ có độ rộng 80%, được canh giữa, có viền.
- Thẻ Input Text và Input Submit sẽ được canh giữa vào khung viền đỏ.
Lưu ý : Kỹ thuật tương tác giữa Html và Action Controller
Đoạn mã dưới đây mô tả cách thức tương tác giữa các điều khiển Html với các action
controller. Bạn đọc mới làm quen với ASP.NET MVC có thể sẽ cần đến kỹ thuật này.
<div id = "divSearchBox">
<form action = "/Search/Search" method = "post" >

<input type = "text" id = "txtKeyWord" name = "strKeyWord" />
<input type = "submit" id = "btnSearch" />
<br />
<hr />
Ví dụ : Sài Gòn - Hà Nội, Huế - Đà Nẵng, ...
</form>
</div>
ETicket 1.0 – Interface : Trang kết quả (Vé) – Search/Search/…
Học hỏi kinh nghiệm từ SocBay.com, trang kết quả tìm kiếm Ticket vẫn chứa một
khung thoại tìm kiếm. Khi đó mọi thao tác tìm kiếm, hiển thị kết quả, cập nhật vào
TicketBox cần phải sử dụng kỹ thuật Ajax để refresh từng phần của trang.
Kỹ thuật CSS : Trang Search.aspx
Trang Search.aspx chịu trách nhiệm trình bày kết quả tìm kiếm Ticket, về cơ bản sẽ
có cấu trúc tương tự như trang kết quả Mp3 của SocBay.com.
Ô tìm kiếm
(SearchBox)
<div id = “divSearchBox”>
Trang kết quả (SearchResult.ascx) Ô vé đã chọn (TicketBox.ascx)
Chiều rộng : 70% Chiều rộng : 25%
Chiều cao : Trình bày 20 kết quả đầu tiên Chiều cao : Mở rộng theo danh
sách vé đã chọn
Phân trang
Điều khiển : Thanh toán
Điều khiển : Xem chi tiết, Chọn mua (cho mỗi vé)
<div id = “divTicketBox”>
<div id = “divSearchResultBox”>
Ô quảng cáo, …
<div id = “divAdvBox”>
Lưu ý : Kỹ thuật Ajax trên ASP.NET MVC
- Để sử dụng kỹ thuật Ajax trong các ứng dụng ASP.NET MVC, việc trước
tiên là cần khai báo bộ script cần sử dụng cho Master Page. Thao tác này
cũng được lặp lại khi chúng ta muốn sử dụng một số thư viện kiểu
javascript liên quan.
- Đoạn mã dưới đây khai báo các script cần thiết cho kỹ thuật Ajax trong các
ứng dụng ASP.NET MVC
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server"
/></title>
<script src="../../Scripts/MicrosoftAjax.js"
type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js"
<script src="../../Scripts/jquery-1.2.6.min.js"
<link href="../../Content/Site.css" rel="stylesheet"
type="text/css" />
</head>
- Đoạn mã dưới đây thể hiện kỹ thuật sử dụng Ajax.BeginForm(), để thực

hiện các tính năng ajax.
Code : Search.aspx
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent"
runat="server">
<h2>Search</h2>
<div id = "divSearchBox">
<% using (Ajax.BeginForm("Search", new AjaxOptions() {
UpdateTargetId = "divSearchResult" })) { %>
<input type = "text" id = "txtKeyWord" name = "strKeyWord"
/>
<input type = "submit" id = "btnSearch" />
<br />
<hr />
Ví dụ : Sài Gòn - Hà Nội, Huế - Đà Nẵng, ...
<% } %>
<hr />
</div>
<br /> <br /> <br />
<div id = "divSearchResult">
<% Html.RenderPartial("SearchResult"); %>
</div>
</asp:Content>
- Đoạn mã dưới đây
Code : SearchController.cs
public ActionResult Search(string strKeyWord)
{
string[] strSplit = { "-" };
List<string> lstKeyWord = new List<string>();
lstKeyWord = strKeyWord.Split(strSplit,
StringSplitOptions.None).ToList();
List<Ticket> lstTicket = new List<Ticket>();
foreach (string str in lstKeyWord)

{
List<Ticket> lst = new List<Ticket>();
lst = service.GetTicketsByTag(str).ToList();
foreach (Ticket t in lst)

{
lstTicket.Add(t);
}
}
if (Request.IsAjaxRequest())
{
return PartialView("SearchResult", lstTicket);
}
else
{
return View("Search", lstTicket);
}
}
ETicket 1.0 – Interface : SearchTicketResult.ascx
SearchResult.ascx được sử dụng để trình bày kết quả tìm kiếm (Ticket) cho khách
hàng. Mỗi một Ticket tìm được cần được định dạng một cách phù hợp, làm nổi bật
kết quả tìm kiếm.
Do mỗi khi tìm kiếm, kết quả trả về thường sẽ khá nhiều, do đó chúng ta cần định
dạng và giới hạn kết quả trả về. Ở đây tôi sử dụng class của CSS để định dạng kết
quả. Lưu ý, để định dạng ID ta sử dụng ký tự “#”, để định dạng Class ta sử dụng “.”.
ETicket 1.0 – Interface : Trang kết quả (nhà xe) – Search/Company/…
ETicket 1.0 – Interface : Trang Thanh Toán – Payment/…
ETicket 1.0 – Interface : Trang Thanh Toán – Payment/…
MỘT SỐ VẤN ĐỀ CẦN LƯU Ý CHO CÁC ỨNG DỤNG ĐA NGƯỜI DÙNG
Khi xây dựng và triển khai các ứng dụng web cho đa người dùng, chúng ta cần phải
chú ý đặc biệt đến danh mục các tài nguyên được dùng chung. Trong ví dụ này, một
trong những tài nguyên dùng chung rõ nét nhất là Cart.cs, đây là một đối tượng
nghiệp vụ mở rộng, có nhiệm vụ lưu trữ danh mục vé đã được khách hàng chọn, khi
đó, mỗi khách hàng sẽ có một và chỉ một Cart trong một phiên làm việc.
Phân tích TicketCart.cs
Cart là đối tượng mở rộng, chỉ tồn tại trong một phiên làm việc, của duy nhất một
người sử dụng. Nó bắt đầu khởi tạo khi người sử dụng chọn mua vé đầu tiên, và kết
thúc khi người sử dụng chọn nút thanh toán hoặc kết thúc phiên làm việc (rời khỏi
website).
Dưới đây là mô hình một dự án về Cart mẫu :
ETiket 1.0 – Interface : Một số ghi chú trong kỹ thuật CSS

CSS là ngôn ngữ định dạng (trình bày) trang, được sử dụng một cách rộng rãi trong
kỹ thuật thiết kế web.
Một số quy ước về cú pháp CSS
1. ID & Class trong CSS
Trong CSS có hai định nghĩa rất quan trọng là ID và Class xuất phát từ (X)HTML. Cho đến bây giờ
vẫn còn một số bạn mới tìm hiểu CSS thường vẫn chưa hiểu rõ sự khác biệt của 2 thẻ HTML này.
Sự khác biệt giữa ID và Class

Về cơ bản có thể nói 2 thẻ ID (#) và Class (.) đều mang thuộc tính giống nhau, nhưng sự khác biệt
nằm ở chỗ với thẻ ID (div) được gán cho một div thì div đó là duy nhất trong file (X)HTML. Không
bao giờ được phép có 2 thẻ ID trùng tên. Trong khi đó Class thì lại được gán cho mọi đối tượng có
cùng lớp (class), các đối tượng có cùng class sẽ chịu sự điều khiển của CSS cho Class đó. Trong
bài viết này ta sẽ tìm hiểu tại sao và những nơi nào thì dùng ID hay Class.
Trước tiên ta hãy xem qua cách sử dụng hai thẻ ID và Class trong một đoạn (X)HTML.
<div id="container">
container là tên được gán cho ID và nó chứa toàn bộ các thành phần của một
trang web
</div>
<div class="module">
module là tên được gán cho Class và nó sẽ được sử dụng lặp lại nhiều lần
trên một trang web
</div>
Qua hai đoạn (X)HTML chúng ta có thể dễ dàng nhận thấy ID được sử dụng cho các thành phần
mang tính tuyệt đối và duy nhất trong toàn bộ trang web, và nó thường được gán cho heading,
container, leftcol, rightcol, content-warpper, footer ...
Còn với Class sẽ được gán cho các thành phần sẽ lặp lại nhiều lần như Module, Module H3,
Content title, readon, ul li ... bởi khi gán Class cho nhiều thành phần của trang web thì bạn chỉ việc
khai báo style trên file CSS cho các thành phần này một lần duy nhất.
Chúng ta hãy xem cách khai báo thuộc tính cho ID và Class trong file CSS ở ví dụ sau:
#container{
width: 80%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}
.module{
font-size: small;
color: #008080;
font-weight: bold;
}
Đến bây giờ ta đã có thể nắm bắt được về cơ bản của các thành phần trong một website, cách thể
hiện chúng bằng ngôn ngữ HTML và điều khiển chúng theo ý muốn bằng CSS. Trong toàn bộ các
bài viết này xin các bạn hãy đọc kỹ, hiểu và thử trực tiếp ngay trên một trang (X)HTML mà bạn tạo
ra. Chỉ khi nắm chắc những yếu tố cơ bản thì chúng ta có thể dễ dàng hơn trong các thử nghiệm
sau.
2. Tạo bố cục và định dạng cho một trang cơ bản

Hầu hết các trang đều có cấu trúc cơ bản như sau :
! Phần Header : Bao gồm các thành phần chính như Menu, Logo, Slogan, …
! Phần Main : Bao gồm nội dung chính của trang. Trong phần Main, tùy yêu cầu
của website mà các trang có thể chia ra một hay nhiều cột, hoặc là bố trí nhiều
phần khác với các bố cục khác nhau.
! Phần Footer : Là phần cuối cùng bên dưới các trang, nhằm cung cấp các thông
tin về công ty, bản quyền, …
3. Các điều khiển lồng nhau
Đoạn mã
input[type="text"]
{
width: 300px;
border: 1px solid #CCC;
}
quy định tất cả các thẻ input[type= “text”] sẽ có độ rộng quy ước là 300px. Tuy
nhiên, vẫn có một số trường hợp ngoại lệ, chẳng hạn, ô nhập dữ liệu dạng
input[type="text"] bên trọng hộp SearchBox sẽ có độ rộng lớn hơn, chẳng hạn
500px, khi đó ta cần khai báo thêm đoạn mã sau trong file CSS.
#divSearchBox input[type="text"]
{
width: 500px;
border: 1px solid #CCC;
}
4. Padding & Magrin
5. Position & Float
6. clear: both & Kỹ thuật chống tràn theo màn hình
Nguyên tắc :
Phần nào ăn theo nội dung của phần khác, ta chỉ cần thêm thuộc tính clear:both cho
mã CSS của phần đó là xong.
7.

Project+ +eticket+1.0+ +Ghi+Chu+Ben+Le+Du+An

Uploaded by

Copyright:

Available Formats

You might also like

Project+ +eticket+1.0+ +Ghi+Chu+Ben+Le+Du+An

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Project+ +eticket+1.0+ +Ghi+Chu+Ben+Le+Du+An

Uploaded by

Copyright:

Available Formats

Project : ETicket 1.

Tác giả : Phan Minh Tài

Cộng sự : Nguyễn Huỳnh Việt; Dương Văn Kiệm

(Bản nháp, Tài liệu ghi chú bên lề dự án)

TP. HCM, 2009

GIỚI THIỆU TÁC GIẢ

Tác giả : Phan Minh Tài

Lĩnh vực nghiên cứu :

Email : taipm@bidv.com.vn; taipm@vinasolution.vn; taipm.bidv@gmail.com

- .NET Framework 3.5

- ASP.NET 3.5 / ASP.NET MVC 1.0

- Microsoft SQL Server 2005

- Visual Studio 2008/2010

ETicket 1.0 – DATABASE

ETicket 1.0 – DỮ LIỆU MẪU

Quy trình nhập & sinh dữ liệu

Quy trình nhập dữ liệu

1. Bảng Company (02 record)

FullName : Tập đoàn Mai Linh

ShortName : Mai Linh Express

2. Bảng Car (02 record)

ETicket 1.0 – Quy ước mã nguồn

ETicket 1.0 – Models Package

IEnumerable<Bill> GetBillsOfCustomer(Guid customerId);

IEnumerable<Car> GetCarsOfCompany(Guid companyId);

IEnumerable<User> GetUsersOfOffice(Guid officeId);

IEnumerable<Ticket> GetTicketsByTags(List<string> tags);

ETicket 1.0 – Controllers

Lưu ý : Hoạch định Controller

Một số Controller mở rộng

# Phương thức : Search(string strKeyWord)

# Phương thức : SearchTicket(string strKeyWord);

Lưu ý : Các controller dựa trên BusinessObjects

ETicket 1.0 – Views

Lưu ý : Đối với một số Create View bị phụ thuộc dữ liệu

ETicket 1.0 – Scenario 01 : Tìm kiếm thông tin về vé tàu xe

- Tìm kiếm thông tin về vé,

Kịch bản ứng dụng

ETicket 1.0 – Scenario 02 : Khách hàng mua vé & Thanh toán

ETicket 1.0 – Interface : Trang chủ

Phân tích bố cục trang

- Tiếp theo là ô tìm kiếm, ta định nghĩa nó trong thẻ <div id =

Thực hành : Hộp tìm kiếm

- Thẻ divSearchBox, sẽ có độ rộng 80%, được canh giữa, có viền.

Lưu ý : Kỹ thuật tương tác giữa Html và Action Controller

<form action = "/Search/Search" method = "post" >

ETicket 1.0 – Interface : Trang kết quả (Vé) – Search/Search/…

Kỹ thuật CSS : Trang Search.aspx

Trang kết quả (SearchResult.ascx) Ô vé đã chọn (TicketBox.ascx)

Chiều rộng : 70% Chiều rộng : 25%

Lưu ý : Kỹ thuật Ajax trên ASP.NET MVC

- Đoạn mã dưới đây thể hiện kỹ thuật sử dụng Ajax.BeginForm(), để thực

- Đoạn mã dưới đây

List<Ticket> lstTicket = new List<Ticket>();

foreach (string str in lstKeyWord)

foreach (Ticket t in lst)

ETicket 1.0 – Interface : SearchTicketResult.ascx

ETicket 1.0 – Interface : Trang kết quả (nhà xe) – Search/Company/…