CÔNG NGHỆ WEB NÂNG CAO XÂY DỰNG WEBSITES VỚI ASP.NET 2.0

ĐẠI HỌC CÔNG NGHIỆP THỰC PHẨM TP.HCM
Khoa Công Nghệ Thông Tin
    
CÔNG NGHỆ WEB NÂNG CAO
XÂY DỰNG WEB SITES VỚI ASP.NET 2.0







Hồ Chí Minh, 7/2011
P a g e | 2

MỤC LỤC
Chƣơng 1. PHÂN TÍCH THIẾT KẾ DATABASE 6
1.1. YÊU CẦU HỆ THỐNG 6
1.2. THIẾT KẾ DATABASE 6
1.2.1. Diagram 6
1.2.2. Bảng chủ đề: tbChuDe 6
1.2.3. Bảng nhà xuất bản: tbNhaXuatBan 6
1.2.4. Bảng sách: tbSach 7
1.2.5. Bảng tác giả: tbTacGia 7
1.2.6. Bảng khách hàng: tbKhachHang 7
1.2.7. Bảng đơn đặt hàng: tbDonHang 7
1.2.8. Bảng chi tiết đặt hàng: tbCTDonHang 8
1.2.9. Bảng chi tiết đặt hàng: tbNhanVien 8
1.3. STORE PROCEDURE 8
1.3.1. Xây dựng Store Procedure Insert 8
1.3.2. Xây dựng Store Procedure Update 9

1.3.3. Xây dựng Store Procedure Delete 10
1.3.4. Xây dựng Store Procedure GET 11
1.4. MỘT SỐ ĐỒ ÁN 13
Chƣơng 2. XÂY DỰNG MÔ HÌNH 3 LAYER 14
2.1. TẠO MÔ HÌNH PROJECT 14
2.1.1. Tạo Solution 14
2.1.2. Tạo Project Data Object Transfer 15
2.1.3. Tạo Project Data Access Layer 16
2.1.4. Tạo Project Busineess 17
2.1.5. Tạo Website 17
2.1.6. Tạo File Web.Config cho Web Site 18
2.1.7. Tạo Reference 19
2.2. XÂY DỰNG ĐỐI TƢỢNG DATA TRANSFER 22
2.2.1. Xây dựng class Entities 22
2.2.2. Tip: Cách xây dựng nhanh đối tƣợng Data Access Transfer 25
2.2.3. Xây dựng enum Columns 27
2.2.4. Xây dựng lớp Collection 28
P a g e | 3

2.3. XÂY DỰNG LỚP DATA ACCESS 28
2.3.1. Thuộc Tính SqlConnection 28
2.3.2. Phƣơng thức khởi tạo 28
2.3.3. Phƣơng thức Insert 29
2.3.4. Phƣơng thức Update 30
2.3.5. Phƣơng thức Delete 30
2.3.6. Phƣơng thức Get 31
2.4. XÂY DỰNG LỚP BUSINESS 33
2.4.1. Phƣơng thức Insert 33
2.4.2. Phƣơng thức Update 33
2.4.3. Phƣơng thức Delete 34

2.4.4. Phƣơng thức Get 34
2.4.5. Phƣơng thức GetAll 34
2.4.6. Phƣơng thức GetByID 35
Chƣơng 3. XÂY DỰNG PHÂN HỆ QUẢN LÝ 36
3.1. TẠO TRANG MASTER PAGE 36
3.1.1. Tạo trang Master Page 36
3.1.2. Thiết kế giao diện cho trang Master Page 37
3.1.3. Kiểm tra đăng nhập 37
3.2. XÂY DỰNG CHỨC NĂNG ĐĂNG NHẬP 38
3.2.1. Thiết kế giao diện cho trang đăng nhập 38
3.2.2. Xử lý đăng nhập 39
3.3. XÂY DỰNG CHỨC NĂNG XEM DANH SÁCH SẢN PHẨM 40
3.3.1. Tạo trang danh sách sản phẩm 40
3.3.2. Thiết kế giao diện 41
3.3.3. Xử lý Page Load 44
3.3.4. Xử lý chức năng phân trang 47
3.3.5. Chức năng xóa 48
3.3.6. Chức năng tìm kiếm 48
3.4. XÂY DỰNG CHỨC NĂNG THÊM SẢN PHẨM 48
3.4.1. Thiết kế giao diện cho trang thêm sản phẩm 48
3.4.2. Xử lý tải dữ liệu 50
3.4.3. Xử lý thêm sản phẩm 51
P a g e | 4

3.5. XÂY DỰNG CHỨC NĂNG CHỈNH SỬA SẢN PHẨM 52
3.5.1. Thiết kế giao diện cho trang chỉnh sửa sản phẩm 52
3.5.2. Xử lý Page Load 55
3.5.3. Xử lý chỉnh sửa sản phẩm 56
3.6. XÂY DỰNG CHỨC NĂNG XEM DANH SÁCH ĐƠN HÀNG 57
3.6.1. Thiết kế giao diện 57

3.6.2. Xử lý tải dữ liệu 59
3.6.3. Xử lý phân trang 61
3.7. XÂY DỰNG CHỨC NĂNG XEM CHI TIẾT ĐƠN HÀNG 61
3.7.1. Thiết kế giao diện 61
3.7.2. Xử lý tải dữ liệu 65
3.7.3. Xử lý phân trang 67
Chƣơng 4. XÂY DỰNG PHÂN HỆ NGƢỜI DÙNG 68
4.1.1. TẠO TRANG MASTER PAGE 68
4.1.2. Thiết kế giao diện 68
4.1.3. Xử lý tải dữ liệu 72
4.1.4. Xử lý thoát khỏi hệ thống 73
4.2. XÂY DỰNG TRANG CHỦ 73
4.2.1. Thiết kế giao diện 73
4.2.2. Xử lý tải dữ liệu 74
4.3. XÂY DỰNG TRANG DANH SÁCH SẢN PHẨM THEO CHỦ ĐỀ 75
4.3.1. Thiết kế giao diện 75
4.3.2. Xử lý tải dữ liệu 76
4.3.3. Phân trang 77
4.4. XÂY DỰNG TRANG CHI TIẾT SẢN PHẨM 78
4.4.1. Thiết kế giao diện 78
4.4.2. Xử lý tải dữ liệu 81
4.4.3. Xử lý thêm vào giỏ hàng 82
4.5. XÂY DỰNG CHỨC NĂNG ĐĂNG KÝ 82
4.5.1. Thiết kế giao diện 82
4.5.2. Xử lý đăng ký 84
4.6. XÂY DỰNG CHỨC NĂNG ĐĂNG NHẬP 85
4.6.1. Thiết kế giao diện 85
P a g e | 5

4.6.2. Xử lý đăng nhập 86

4.7. XÂY DỰNG CHỨC NĂNG GIỎ HÀNG 86
4.7.1. Xây dựng giỏ hàng 86
4.7.2. Thiết kế giao diện 88
4.7.3. Xử lý tải dữ liệu 90
4.8. XÂY DỰNG CHỨC NĂNG ĐẶT HÀNG 91
4.8.1. Thiết kế giao diện 91
4.8.2. Xử lý chức năng đặt hàng 92


P a g e | 6

Chƣơng 1. PHÂN TÍCH THIẾT KẾ DATABASE
1.1. YÊU CẦU HỆ THỐNG
1.2. THIẾT KẾ DATABASE
1.2.1. Diagram

1.2.2. Bảng chủ đề: tbChuDe
Field Name
Data Type
Constraint
MaCD
Int (Autonumber)

TenChuDe
nVarchar(255)
Not Null
1.2.3. Bảng nhà xuất bản: tbNhaXuatBan
Field Name
Data Type
Constraint

MaNXB
Int (Autonumber)

TenNXB
nVarchar(255)
Not Null
DiaChi
nVarchar(255)

DienThoai
nVarchar(15)

P a g e | 7

1.2.4. Bảng sách: tbSach
Field Name
Data Type
Constraint
MaSach
Int (Autonumber)

TenSach
nVarchar(255)
Not Null
MaCD
Int

MaTG
Int

MaNXB
Int

HinhMinhHoa
nVarchar(255)

DonGia
Int

MoTa
nText

NgayCapNhat
DateTime

SoLuongBan
Int

SoLanXem
Int

1.2.5. Bảng tác giả: tbTacGia
Field Name
Data Type
Constraint
MaTG
Int (Autonumber)

Ten
nVarchar(255)

Not Null
DiaChi
nVarchar(255)

DienThoai
nVarchar(255)

1.2.6. Bảng khách hàng: tbKhachHang
Field Name
Data Type
Constraint
MaKH
Int (Autonumber)

HoTen
nVarchar(255)
Not Null
Email
nVarchar(255)

MatKhau
nVarchar(255)

DiaChi
nVarchar(255)

DienThoai
nVarchar(255)

1.2.7. Bảng đơn đặt hàng: tbDonHang

Field Name
Data Type
Constraint
MaDH
Int (Autonumber)

P a g e | 8

MaKH
Int

NgayDatHang
DateTime

TriGia
Int

DaGiao
Bit

NgayGiaoHang
DateTime

DiaChiNhanHang
Nvarchar(255)

1.2.8. Bảng chi tiết đặt hàng: tbCTDonHang
Field Name
Data Type
Constraint

MaCTDonHang
Int (Autonumber)

MaDH
Int

MaSach
Int

SoLuong
Int

DonGia
Int

1.2.9. Bảng chi tiết đặt hàng: tbNhanVien
Field Name
Data Type
Constraint
MaCTDonHang
Int (Autonumber)

Ma
Int

TaiKhoan
nVarchar(255)

MatKhau
nVarchar(255)

TenNV
nVarchar(255)

DiaChi
nVarchar(255)

DienThoai
nVarchar(255)

1.3. STORE PROCEDURE
1.3.1. Xây dựng Store Procedure Insert
Để thêm dữ liệu vào bảng tbSach chúng ta cần khai báo các tham số @TenSach,
@DonGia, @MoTa, @HinhMinhHoa, @MaCD, @MaNXB, @NgayCapNhat,
@SoLuongBan, @SoLanXem, @MaTG cho Store Procedure mang tên
sp_tbSach_Insert. Chúng ta không cần nhận vào nội dung của trƣờng MaSach vì đã
thiết lập thuộc tính tự tăng cho trƣờng MaSach.
P a g e | 9

Sau khi nhận đƣợc các tham số, Store Procedure tiến hành câu lệnh INSERT các dữ
liệu đã nhận đƣợc vào cơ sở dữ liệu.
Sau đây là nội dung của Store Procedure Insert của table tbSach.
ALTER PROCEDURE dbo.sp_tbSach_Insert
@TenSach NVARCHAR(255),
@DonGia INT,
@MoTa NTEXT,
@HinhMinhHoa NVARCHAR(255),
@MaCD INT,
@MaNXB INT,
@NgayCapNhat DATETIME,

@SoLuongBan INT,
@SoLanXem INT,
@MaTG INT
AS
INSERT INTO tbSach VALUES(
@TenSach,
@MaCD,
@MaTG,
@MaNXB,
@HinhMinhHoa,
@DonGia,
@MoTa,
@NgayCapNhat,
@SoLuongBan,
@SoLanXem
)
1.3.2. Xây dựng Store Procedure Update
Ngoài những tham số nhận vào giá trị của trƣờng cần thay đổi @TenSach,
@DonGia, @MoTa, @HinhMinhHoa, @MaCD, @MaNXB, @NgayCapNhat,
@SoLuongBan, @SoLanXem, @MaTG, chúng ta cần phải truyền vào @MaSach để xác
định thay đổi sản phẩm nào trong cơ sở dữ liệu.
Store Procedure Update tiến hành cập nhật các thay đổi bằng câu lệnh UPDATE.
Sau đây là nội dung của Store Procedure Update.
P a g e | 10

CREATE PROCEDURE dbo.sp_tbSach_Update
@MaSach INT,
@TenSach NVARCHAR(255),
@DonGia INT,
@MoTa NTEXT,

@HinhMinhHoa NVARCHAR(255),
@MaCD INT,
@MaNXB INT,
@NgayCapNhat DATETIME,
@SoLuongBan INT,
@SoLanXem INT,
@MaTG INT
AS
UPDATE tbSach SET
TenSach = @TenSach,
DonGia = @DonGia,
MoTa = @MoTa,
HinhMinhHoa = @HinhMinhHoa,
MaCD = @MaCD,
MaNXB = @MaNXB,
NgayCapNhat = @NgayCapNhat,
SoLuongBan = @SoLuongBan,
SoLanXem = @SoLanXem,
MaTG = @MaTG
WHERE @MaSach = @MaSach
1.3.3. Xây dựng Store Procedure Delete
Để xóa một sản phẩm từ bảng tbSach, Store Procedure Delete cần khai báo tham
số @MaSach để truyền vào khóa chính của sản phẩm cần xóa.
Sau khi nhận đƣợc khóa chính của sản phẩm cần xóa thì Store Procedure Delete tiến
hành kiểm tra đối tƣợng sách cần xóa đã đƣợc sử dụng ở các bảng có khóa ngoại đến
tbSach. Nếu chƣa đƣợc sử dụng thì Store Procedure sẽ tiến hành xóa đối tƣợng cần xóa.
Ngƣợc lại Store Procedure sẽ không xóa đối tƣợng đó. Sau đây là nội dung của Store
Procedure Delete.
ALTER PROCEDURE dbo.sp_tbSach_Delete
P a g e | 11

@MaSach INT
AS
DECLARE @TOTAL INT
SELECT @TOTAL = COUNT(*) FROM tbCTDonHang
WHERE MaSach = @MaSach

IF @TOTAL = 0
BEGIN
DELETE FROM tbSach where MaSach = @MaSach
END

1.3.4. Xây dựng Store Procedure GET
1.3.4.1. MicroSoft SQL Server 2000
Để có thể dùng một Store Proceduce GET cho mọi trƣờng hợp thì chúng ta cần phải
thành lập câu lệnh „WHERE…‟ từ code và truyền vào Store Procedure GET. Vì vậy chúng ta
cần khai báo tham số @Where.
Hai tham số @PageIndex (trang hiện tại) và @PageSize (số dòng /trang) dùng để
phân trang cho Store Procedure GET.
Để lấy dữ liệu đã đƣợc sắp xếp, chúng ta cần khai báo 2 tham số là @OrderBy và
@OrderDirection lần lƣợt quy định sắp sếp theo cột nào và sắp xếp theo thứ tự tăng hay
giảm dần.
Tham số @TotalRecords không phải là tham số INPUT mà là tham số OUTPUT.
Tham số này sẽ truyền lại cho chƣơng trình biết là có bao nhiêu sản phẩm thỏa điều kiện
@Where truyền vào.
Sau khi nhận đƣợc đầy đủ các tham số kể trên, Store Procedure tiến hành tạo bảng
tạm mang tên #Temp(IDTemp, MaSach). Trƣờng IDTemp có kiểu dữ liệu là INT tự tăng khi
INSERT, và là khóa chính của bảng #Temp. Trƣờng IDTemp còn đƣợc tạo ra để phục vụ mục
đích phân trang, vì các giá trị của chúng là liên tiếp nhau. Trƣờng MaSach của bảng #Temp
dùng để lƣu MaSach của tất cả các sản phẩm thỏa điều kiện @Where.

Chƣơng trình thành lập câu lệnh @sql tìm kiếm tất các sản phẩm thỏa điều kiện
@Where, sắp sếp theo cột @OrderBy và theo thứ tự @OrderDirection. Lấy trƣờng MaSach
P a g e | 12

của tất cả các sản phẩm thỏa điều kiện đó, insert vào bảng #Temp. Lúc này trong bảng #Temp
chúng ta có đƣợc MaSach của tất cả các sản phẩm thỏa điều kiện và đƣợc sắp sếp theo các
tham số truyền vào, đồng thời cũng có đƣợc cột IDTemp chứa các giá trị liên tiếp nhau.
Vì bảng #Temp chƣa tất cả MaSach của các sản phẩm thỏa điều kiện @Where nên
muốn có đƣợc tham số @TotalRecord chúng ta chỉ cần đếm số dòng của bảng #Temp.
Chƣơng trình sẽ lấy những thông tin cần thiết từ bảng #Temp JOIN với bảng tbSach
với điều kiện JOIN là #Temp.MaSach = tbProduct.Masach. Nếu @PageIndex truyền vào là
0 thì chƣơng trình sẽ lấy tất cả sản phẩm có trong bảng #Temp. Ngƣợc lại, nếu @PageIndex
khác 0 thì chƣơng trình sẽ tiến hành phân trang.
Cuối cùng chúng ta xóa bảng #Temp. Sau đây là nội dung của Store Procedure
GET.
CREATE PROCEDURE dbo.sp_tbSach_GET_2000
@Where NVARCHAR(255),
@PageIndex INT,
@PageSize INT,
@OrderBy NVARCHAR(25),
@OrderDirection NVARCHAR(4),
@TotalRecords INT OUTPUT
AS
SET TRANSACTION ISOLATION LEVEL READ COMMITTED
CREATE TABLE #Temp (
IDTemp INT IDENTITY(1,1),
MaSach INT
)
DECLARE @sql NVARCHAR(1000)
SET @sql = 'INSERT INTO #temp ([MaSach]) SELECT [MaSach] FROM

tbSach ' + @Where + ' ORDER BY ' + @OrderBy + ' ' + @OrderDirection
EXEC (@sql)
SELECT @TotalRecords = COUNT(*) FROM #Temp
SELECT
S.MaSach,
S.TenSach,
S.DonGia,
S.MoTa,
P a g e | 13

S.HinhMinhHoa,
S.MaCD,
S.MaNXB,
S.NgayCapNhat,
S.SoLuongBan,
S.SoLanXem,
S.MaTG
FROM #Temp AS T JOIN tbSach AS S ON T.MaSach = S.MaSach
WHERE
(@PageIndex = 0)
OR
(T.IDTemp > (@PageIndex - 1) * @PageSize AND
T.IDTemp <= @PageIndex * @PageSize)
DROP TABLE #temp
1.4. MỘT SỐ ĐỒ ÁN


P a g e | 14

Chƣơng 2. XÂY DỰNG MÔ HÌNH 3 LAYER

2.1. TẠO MÔ HÌNH PROJECT
2.1.1. Tạo Solution
Khởi động chƣơng trình Visual Studio 2005

New  Project Other Project Type  Visual Studio Solutions  Blank Solution.
Nhập tên và chọn đƣờng dẫn cho solution, sau đó nhấn vào nút “OK”
P a g e | 15


2.1.2. Tạo Project Data Object Transfer
Từ cửa sổ Solution Explorer, nhấp chuột phải vào Solution  Add  New Project.

Trong khung Add New Project, chọn loại project là Class Library, đặt tên cho
project là Entities, chọn đƣờng dẫn và nhấn vào nút ”OK”
P a g e | 16


2.1.3. Tạo Project Data Access Layer
Lặp lại các bƣớc nhƣ tạo project Entities. Đặt tên cho project này là DAL.

P a g e | 17

2.1.4. Tạo Project Busineess
Lặp lại các bƣớc nhƣ tạo project Entities. Đặt tên cho project này là BUS.

2.1.5. Tạo Website
Từ cửa số Solution Explorer, nhấp chuột phải vào solution  Add  New Web
Site.

P a g e | 18

Trong khung Add New Web Site, chọn loại Web Site là ASP.NET Web Site, thƣ
mục để chứa Web Site và ngôn ngữ là Visual C#. Sau đó nhấn nút “OK”.

2.1.6. Tạo File Web.Config cho Web Site
Từ cửa sổ Solution Explorer, chọn chuột phải vào Project Web Site  Add New
Item…

Trong khung Add New Item, chọn loại file là Web Configuration File và nhấn vào
nút “Add”.
P a g e | 19


Chúng ta thêm chuỗi kết nối cơ sở dữ liệu vào file Web.config vừa tạo ra.
<connectionStrings>
<add name="strConnection" connectionString="Data
Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;I
ntegrated Security=True;User Instance=True"/>
</connectionStrings>
2.1.7. Tạo Reference
2.1.7.1. Reference của DAL
Lớp Data Access Layer bắt buộc phải thêm reference tới đối tƣợng Data Objects
Transfer.
Từ cửa sổ Solution Explorer, nhấp chuột phải vào thƣ mục Reference của project
DAL  Add Reference.
P a g e | 20


Trong khung Add Reference, chọn tab Project, chọn Project Data Object Transfer,
sau đó nhấn vào nút “OK”.

2.1.7.2. Reference của BUS
Lớp Business bắt buộc phải thêm reference tới đối tƣợng Data Objects Transfer và
Data Access Layer.
Từ cửa sổ Solution Explorer, nhấp chuột phải vào thƣ mục Reference của project
BUS  Add Reference.
P a g e | 21


Trong khung Add Reference, chọn tab Project, chọn Project Data Object Transfer
và project Data Access Layer sau đó nhấn vào nút “OK”.

2.1.7.3. Reference của Web Site
Lớp Presentation (Web Site) bắt buộc phải thêm reference tới đối tƣợng Business
Layer, Data Objects Transfer và Data Access Layer.
Từ cửa sổ Solution Explorer, nhấp chuột phải vào Web Site  Add Reference.
P a g e | 22


Trong khung Add Reference, chọn tab Project, chọn project Business Layer, project
Data Object Transfer và project Data Access Layer sau đó nhấn vào nút “OK”.

2.2. XÂY DỰNG ĐỐI TƢỢNG DATA TRANSFER
2.2.1. Xây dựng class Entities
Để đóng gói các thuộc tính của tbProduct, chúng ta khai báo class tbProduct nhƣ
sau:
P a g e | 23

public class tbSach
{

}
Sau đó, chúng ta khai báo các thuộc tính của Product và tạo các phƣơng thức get và
set cho thuộc tính đó.
public class tbSach
{
private int maSach;
public int MaSach
{
get { return maSach; }
set { maSach = value; }
}
private string tenSach;
public string TenSach
{
get { return tenSach; }
set { tenSach = value; }
}
private int donGia;
public int DonGia
{
get { return donGia; }
set { donGia = value; }
}
private string moTa;
public string MoTa
{
get { return moTa; }
set { moTa = value; }
}
private string hinhMinhHoa;

public string HinhMinhHoa
{
get { return hinhMinhHoa; }
set { hinhMinhHoa = value; }
P a g e | 24

}
private int maCD;
public int MaCD
{
get { return maCD; }
set { maCD = value; }
}
private int maNXB;
public int MaNXB
{
get { return maNXB; }
set { maNXB = value; }
}
private DateTime ngayCapNhat;
public DateTime NgayCapNhat
{
get { return ngayCapNhat; }
set { ngayCapNhat = value; }
}
private int soLuongBan;
public int SoLuongBan
{
get { return soLuongBan; }
set { soLuongBan = value; }

}
private int soLanXem;
public int SoLanXem
{
get { return soLanXem; }
set { soLanXem = value; }
}
private int maTG;
public int MaTG
{
get { return maTG; }
set { maTG = value; }
}
P a g e | 25

}
2.2.2. Tip: Cách xây dựng nhanh đối tƣợng Data Access Transfer
2.2.2.1. Cách 1
Khai báo thuộc tính với loại là Private. Khuyến cáo nên đặt ký tự đầu tiên là chữ
thƣờng.
private int maSach;
Bôi đen từ maSach, nhấn chuột phải  Refactor  Encapsulate Field. Trong khung
Encapsulate Field, lựa chọn các thông số mặc định. Sau đó nhấn chọn vào nút “OK”.

Trong khung Review Reference Changes - Encapsulate Field, nhấn chọn vào nút
“Apply”.