hƯỚng dẪn xÂy dỰng website bÁn hÀng qua mẠng

HƯỚNG DẪN XÂY DỰNG WEBSITE BÁN HÀNG QUA MẠNG

THIẾT KẾ WEBSITE BÁN HÀNG QUA MẠNG

Bài thực hành này được viết bằng ngôn ngữ ASPX nên các bạn dùng bộ Visual stdio 2005, 2008 hoặc cao hơn nữa.Đây là bài thực hành web nhưng dùng làm đồ án chuyên ngành cho sinh viên cntt, dù tài liệu được soạn trên World nhưng mong các bạn sao chép, sửa, xoá cẩn thận, vì còn có bản quyền của tác giả nữa nhé! bài này cũng không tránh khỏi sự thiếu sót mong các bạn thông cảm.

Chúc các bạn thành công!

Bài tập này giúp cho sinh viên tiếp cận với CSS, HTML, sử dụng các điều khiển truy cập dữ liệu như GridView, DataList, … , User Control, ADO và Session.

Yêu cầu của bài toán viết 1 web site đơn giản để bán sách trên mạng: Người sử dụng có thể chọn loại sách, tìm kiếm theo tên sách hoặc tác giả, mua sách và hiệu chỉnh lại số lượng sau khi đã mua (Giỏ hàng).1. Chuẩn bịa. Tạo ra 1 thư mục để chứa tất cả các file chương trình, tạo ra 1 thưc mục con có tên ANH để chứa tất cả các ảnh của các quyển sách.b. Tạo CSDL QlSach.mdb lưu vào thư mục trên bao gồm các bảng có quan hệ sau:

Trong đó:+ Bảng SACH: trường ảnh chứa đường đẫn đi đến ảnh (ANH/tên file. phần mở rộng)+ Bảng KhachHang: trường trangthai: kiểu Yes/No để lưu trạng thái khách đã thanh toán hay chưa.2. Tạo 1 WebSite có tên WebSiteBansach lưu vào thư mục trên: Mở trang Default.aspx ở chế độ Design và thiết kế giao diện sau:

+ Từ ToolBox: Chọn HTML và tạo ra 1 bảng 2 dòng 3 cột, trộn 3 ô đầu tiên thành 1 ô.+ (I), (II), (III): Sau này sẽ chứa các WebUserControl: Trai.ascx, Giua.ascx và Phai.ascx3. Tạo lớp CoSo:Lớp này dùng để mở đường kết nối và lấy dữ liệu về:+ Web site -> Add New Item -> Class -> Gõtên Cosousing System;using System.Data;using System.Configurationusing System.Web;using System.Web.Security; using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using System.Data.OleDb;using System.Data;public class CoSo{

//Biến static cn để kết nối đến CSDLpublic static OleDbConnection cn = new OleDbConnection();public static void MoketNoi(string TenCsdl){ //Nếu đường kết nối đang mở thì đóng để mở lại if(cn.State == ConnectionState.Open) cn.Close(); //Đóng đường kết nối//Tạo chuỗi kết nối đến CSDL có tên: TenCsdlcn.ConnectionString = @"provider = microsoft.jet.oledb.4.0; data source =" + TenCsdl; cn.Open();//Mở đường kết nối}public static DataTable LayBang(string TenBang) // trả về nội dung của bảng có tên là TenBang {//Tạo ra 1 CommandOleDbCommand cmd = new OleDbCommand(TenBang,CoSo.cn);cmd.CommandType = CommandType.TableDirect; //Xác định loại câu lệnh của Command OleDbDataAdapter da = new OleDbDataAdapter(cmd);DataSet ds = new DataSet();da.Fill(ds,TenBang);//Nạp bảng vào DataSet return ds.Tables[0]; }}4. Tạo WebUserControl Trai.AscxWebUserControl này hiển thị tất cả các tên loại sách (trong bảng Loai) khi người dùng chọn 1 tên loại sẽ liên kết sang file Default.aspx và truyền tham số là mã loại.+ Website-> Add New Item -> Web User Control -> gõ tên Trai.ascx Thiết kế giao diện như sau:

Chọn Data ở cửa sổ ToolBox: tạo ra 1 GridView(1) Edit Columns để chèn thêm các trường vào GridView(2) Chọn HyperLinkFields -> Add để chèn thêm 1 trường liên kết vào GridView(3):- DataTextField: Tenloai là trường cần hiển thị dữ liệu và tạo liên kết- DataNavigateUrlFormatString: ~/Default.aspx?ml={0}, khi ta chọn tên loại sách sẽ liên kết sang trang Default.aspx và truyền 1 tham số là ml sang trang Default.aspx- DataNavigateUrlField: maloai là giá trị của tham số truyền sang trang Default.aspx + Lập trình trên sự kiện Load của UserControl Trai.ascx để nạp dữ liệu vào Grid Viewpublic partial class Trai : System.Web.UI.UserControl{protected void Page_Load(object sender, EventArgs e){if(!IsPostBack) 

{CoSo.MoketNoi(Server.MapPath("~/qlsach.mdb")); // Mở đường kết nốiGridView1.DataSource = CoSo.LayBang("loai"); // Nạp dữ liệu của bảng loai vào GridView GridView1.DataMember = "loai";GridView1.DataBind();}}}+ Mở trang Default.aspx ở chế độ Design, sau đó kéo UserControl Trai.ascx từ cửa sổ Solution Explorer vào (I) của trang Default.aspx+ Mở cửa sổ Solution Explorer -> kích chuột phải lên Default.aspx -> Chọn Save As Start Page để chọn trang khi chạy chương trình+ Nhấn F5 để chạy thử chương trình+ Để thay đổi lại màu của liên kết ta có thể tạo StyleSheet như sau:-WebSite -> Add New Item -> StyleSheet -> Gõ tên Lienket.css:A:hover{vertical-align:middle; color: #ff0000;background-color:#003366; text-align: center;text-decoration: underline;}- Mở trang Default.ascx ở chế độ Source sửa lại mã ở thẻ Head như sau :

+ Nhấn F5 để chạy thử chương trình5. Tạo WebUserControl Phai.AscxWebUserControl này để người dùng tìm kiếm theo tên sách hoặc tác giả, kết quả sẽ hiển thị trên UserControl giua.ascx+ Website-> Add New Item -> Web User Control -> gõ tên Phai.ascx + Thiết kế giao diện như sau:

Trong đó:Chọn Standard ở cửa sổ ToolBox tạo ra:- 1Label chứa dòng chữ Nhập tên sách …- 1TextBox tên: TxtTim- 1Button: tên butTim+ Lập trình trên sự kiện Click của ButTim để gọi trang Default.aspx và truyền tham số là ts và giá trị của tham số là txtTim.Text:protected void NutTim_Click(object sender, EventArgs e){Response.Redirect("~/Default.aspx?ts="+ TxtTim.Text);}+ Mở trang Default.aspx ở chế độ Design, sau đó kéo UserControl Phai.ascx từ cửa sổ Solution Explorer vào (III) của trang Default.aspx+ Nhấn f5 để chạy thử.

6. Tạo lớp Sach để thao tác trên bảng Sach+ Web site -> Add NewItem -> Class -> Gõ tên Sachusing System;using System.Data;usingSystem.Configuration; using System.Web;usingSystem.Web.Security; using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts; usingSystem.Web.UI.HtmlControls; using System.Data.OleDb;using System.Data;public class Sach{public Sach(string csdl) //Hàmdựng {CoSo.MoketNoi(csdl); //Kết nối đến CSDL}// Hàm trả về 1 bảng chứa nhiều nhất max mẫu tin bắt đầu từ mẫu tin thứ min của các sách có mã loại //là Maloaipublic DataTable TimSach(string Maloai,int min, int max){string sql ="select * from sach where maloai='"+ Maloai+"' order by tensach "; OleDbCommandcmd=newOleDbCommand(sql,CoSo.cn); OleDbDataAdapterda=newOleDbDataAdapter(cmd); DataSet ds = new DataSet();//Lấy về max mẫu tin bắt đầu từ mẫu tin thứ minda.Fill(ds,min,max,"Sach");return ds.Tables[0] ;}// Hàm trả về 1 bảng chứa nhiều nhất 4 mẫu tin bắt đầu từ mẫu tin thứ 0 của các sách có ngày nhập//gần nhấtpublic DataTable TimSach(int SoMauTin){string sql = "select * from sach order byngaynhap desc"; OleDbCommand cmd = newOleDbCommand(sql, CoSo.cn);OleDbDataAdapterda=newOleDbDataAdapter(cmd); DataSet ds = new DataSet();da.Fill(ds,0,SoMauTin,"Sach"); return ds.Tables[0];}// Hàm trả về tổng số sách có mã loại là maloaipublic int DemSachTheoMa(string Maloai){

string sql = "select count(*) from sach where maloai='" + Maloai + "'";OleDbCommand cmd = new OleDbCommand(sql, CoSo.cn);return (int)cmd.ExecuteScalar();}// Hàm trả về 1 bảng chứa nhiều nhất max mẫu tin bắt đầu từ mẫu tin thứ min của các sách có tên//sách hoặc tác giả có cụm từ Tenpublic DataTable TimSachTheoten(string Ten, int min, int max){string sql = string.Format("select * from sach where tensach like '%{0}%' or tacgia like '{1}'", Ten, Ten);OleDbCommand cmd = new OleDbCommand(sql, CoSo.cn);OleDbDataAdapterda=newOleDbDataAdapter(cmd); DataSet ds = new DataSet();da.Fill(ds,min,max,"Sach"); return ds.Tables[0];}// Hàm trả về tổng số sách có tên sách hoặc tác giả có cụm từ Tenpublic int DemSachTheoTen(string Ten){string sql = string.Format("select count(*) from sach where tensachlike '%{0}%' or tacgia like '{1}'", Ten, Ten);OleDbCommand cmd = new OleDbCommand(sql, CoSo.cn); return (int)cmd.ExecuteScalar() ;}}7. Tạo WebUserControl Giua.AscxWebUserControl này dùng để hiển thị các sách có tên loại chọn ở Trai.aspx hoặc hiển thị các sách khi người dùng tìm ở Phai.ascx. Mỗi trang hiển thị nhiều nhất 4 quyển, nếu nhiều sách phải phân trang + Website -> Add New Item -> Web User Control -> gõ tên giua.ascx+ Thiết kế giao diện của giua.ascx như sau:

- Từ Data của ToolBox tạo ra 1 DataList.ascx tên DataList1 -> Chọn Edit Templates để thiết kế các Templates:

- Từ Standard của ToolBox tạo các điều khiển vào ItemTemplate như sau:* 4 Label, lần lượt với tên: LMaSach, LTenSach, LTacGia và LGia* 1 LinkButton với thuộc tính Text: Mua- Lần lượt buộc (Binding) dữ liệu của các trường MaSach, TenSach, TacGia, Gia của bảng Sach vào các Label: LMaSach, LTenSach, LTacGia và LGia như sau:* Buộc trường Masach vào Label: LMaSach: Chọn Label: LMaSach-> Edit DataBindings:

* Chọn thuộc tính Text-> tại Code Expression gõ hàm Eval(“tên trường cần buộc”), ở đây buộc trường Masach vào Label: LMaSach gõ: Eval(“Masach”) như hình bên dưới.

* Tương tự như vậy ta buộc dữ liệu của các trường TenSach, TacGia, Gia vào các Label:LTenSach, LTacGia và LGia.- Chọn DataList1 -> End Template Editing để kết thúc thiết kế Template

- Từ Standard của ToolBox tạo ra 1 Label UserControl với tên LPhanTrang để chứa số thứ tự của các trang được phân:+ Mở UserControl Phai.ascx ở chế độ Source và dùng thẻ HTML:SRC để chèn ảnh như sau:

+ Lập trình trên sự kiện Load của Giua.ascx để hiển thị các sách có tên loại chọn ở Trai.aspx hoặc hiển thị các sách khi người dùng tìm ở Phai.ascx. Mỗi trang hiển thị nhiều nhất 4 quyển, nếu nhiều sách phải phân trang như sau:protected void Page_Load(object sender, EventArgs e){ // Tạo ra 1 đối tượng sáchSach sach = new Sach(Server.MapPath("qlsach.mdb"));// Đếm số dòng của dữ liệu lấy vềint dem = 0;//Lấy mã loại từ Left.ascxstring maloai = Request.QueryString["ml"];//Lấy tên sách hoặc tác giả từ TextBox của file Right.Ascxstring ten = Request.QueryString["ts"];// Khi chạy lần đầu tiênif((maloai==null||maloai=="")&&(ten==null||ten=="")) {//Lấy về 4 quyển sách có ngày nhập gần nhất và nạp dữ liệu vào DataList1DataList1.DataSource = sach.TimSach(4);DataList1.DataBind();}else // Khi chạy lần thứ 2 trở đi{//Tạo ra 1 bảng để chứa dữ liệu lấy vềDataTable dt = new DataTable();int trang;// Biến trang để lưu trang số mấy cần hiển thịif (Request.QueryString["trang"] == null) // Nếu chạy lần đầu tiên trang = 1; elsetrang= int.Parse(Request.QueryString["trang"]); //Lấysốtranngườidùngchọn if (maloai != null) // Nếu người dùng chọn loại sách từ Left.ascx {dem = sach.DemSachTheoMa(maloai); // đếm số sách có mã loại =maloai để phân trangdt = sach.TimSach(maloai, trang * 4 - 4, 4);// Lấy về 4 mẫu tin bắt đầu từmẫutintrang*4-4 }

else // Nếu người dùng tìm sách từ Right.ascx {dem = sach.DemSachTheoTen(ten); // Đếm số sách có tên sách hoặc tgiả có cụm từ ten dt = sach.TimSachTheoten(ten, trang * 4 - 4, 4); // Lấy về 4 mẫu tin bắt đầu từ mẫu tin trang*4-4 }// Nạp dữ liệu ra DataList1DataList1.DataSource=dt; DataList1.DataBind();//Mỗi trang hiển thị 4 mẫu tin, biến dem chứa tổng số trangdem = (dem % 4 == 0 ? dem : dem + 1)/4;LPhanTrang.Text = "";// Hiển thị số thứ tự và liên kết của các trang ra Label1for (int i = 1; i <= dem; i++){string lk = string.Format("<a href=Default.aspx?trang={0}&ml={1}> {2} </a>", i, maloai, i); LPhanTrang.Text = LPhanTrang.Text + lk;}}}+ Nhấn F5 để chạy thử chương trình+ Khi người dùng chọn nút mua trên DataList1 thì thông tin của sách chọn mua phải đưa vào giỏ hàng. Ta đi xây dựng lớp Gio để thao tác trên giỏ hàng như sau:+ Web site -> Add New Item -> Class -> Gõ tên Giopublic class Gio{ //Tạo ra 1 bảng có tên là BanHangPublic DataTable dt = new DataTable("BanHang"); Public Gio() // Hàm dựng{ // tạo ra 5 cột (field) của bảng BanHangdt.Columns.Add("Masach"); // Tạo ra cột MaSach dt.Columns.Add("Tensach"); // Tạo ra cột TenSach dt.Columns.Add("Soluong"); // Tạo ra cột Soluong dt.Columns.Add("Gia"); // Tạo ra cột Giadt.Columns.Add("ThanhTien"); // Tạo ra cột ThanhTien}public void ThemGiohang(string ms,string ts,int sl,int gia)

{ // Tìm xem mã sách: ms trong bảng BanHang có trùng nhau hay không//nếu trùng thì tăng số lượng lên slfor(inti=0;i<dt.Rows.Count;i++) { //Lấyvềdòngthứilưuvàodr1 DataRow dr1 = dt.Rows[i];// Nếu mã sách trùng nhau thì tăng số lượng và tính lại thành tiền

if(dr1["Masach"].ToString().Trim().Equals(ms.Trim())) {int sltam = int.Parse(dr1["Soluong"].ToString());dr1["Soluong"] = Convert.ToString(sltam + sl);dr1["ThanhTien"]=int.Parse(dr1["Soluong"].ToString())*int.Parse(dr1["Gia" ToString());return;}}//Nếu mã sách chưa có thì tạo ra dòng mới và nhập dữ liệu vào cho dòng nàyDataRow dr = dt.NewRow(); dr["Masach"] = ms;dr["TenSach"]=ts ; dr["Soluong"] = sl; dr["Gia"] = gia;dr["ThanhTien"] = sl * gia; dt.Rows.Add(dr);dt.AcceptChanges();}public int TongTien() // Hàm trả về tổng thành tiền trong bảng BanHang {int s=0; for (int i = 0; i < dt.Rows.Count; i++) {DataRow dr1 = dt.Rows[i];s = s + int.Parse(dr1["ThanhTien"].ToString());}return s; }}+ Tạo ra 1 lớp Global để khởi tạo các Session:- Website -> Add New Item -> Global Application Class

-Khởi tạo Session[”gh”], Session này được sử dụng để chứa giỏ hàng:

+ Mở UserControl Gua.ascx và lập trình trên sự kiện ItemCommand của DataList1. Sự kiện này xảy ra khi kích vào bất kỳ nút liên kết nào trên DataList.protected void DataList1_ItemCommand(object source, DataListCommandEventArgs e){//Lấy dòng hiện tại (dòng chọn nút liên kết: Mua) của DataList1int dong = (int)e.Item.ItemIndex;//Lấy mã sách trên Label: LMaSach của DataList1Label LMs = (Label)DataList1.Items[dong].FindControl("LMaSach");//Lấy tên sách trên Label: LTenSach của DataList1Label LTs = (Label)DataList1.Items[dong].FindControl("LTenSach");//Lấy giá trên Label: LGia của DataList1Label LGia = (Label)DataList1.Items[dong].FindControl("LGia"); string ms = LMs.Text;

string ts = LTs.Text;int gia = int.Parse(LGia.Text); int sl = 1;Gio gh;//Nếu khách hàng đặt mua sách lần đầu tiên if (Session["gh"] == null)gh = new Gio(); // Tạo ra 1 giỏ mới, tạo 1 bảng BanHang elsegh = (Gio)Session["gh"]; // Gán các sách trong giỏ hàng vào gh để thao tácgh.ThemGiohang(ms,ts, sl, gia); // Chèn thêm 1 dòng vào giỏ hàngSession["gh"] = gh; // Thay đổi lại giỏ hàngResponse.Redirect("Giohang.aspx"); // Mở trang giỏ hàng}8. Tạo trang GioHang.aspx.Trang này hiển thị và thay đổi số lượng sau khi mua trong giỏ hàng+ Thiết kế giao diện như sau:

- Từ HTML của ToolBox tạo ra 1 Table 2 dòng 3 cột, sau đó trộn 3 ô dầu tiên thành 1 ô- Từ Data của ToolBox tạo ra 1 GridView: tên GridView1 -> Edit Columns để tạo các cột choGridView: (GridView này sẽ hiển thị dữ liệu của bảng dt(masach, tensach, soluong,thanhtien) trong lớp Gio)

* Để tạo 1 cột vào GridView ta chọn BoundField ở Available Fields -> Add: Thuộc tính HeaderText đặt tiêu đề cho cột, DataField gõ tên trường cần hiển thị dữ liệu. Ví dụ cần tạo cột có tiêu đề là Mã sách và trường cần hiển thị là masach thì trên HeaderText gõ mã sách, trên DataField gõ masach. Tương tự như vậy ta lần lượt tạo thêm 4 cột có tiêu đề Tên sách, Số lượng, giá và thành tiền và các trường cần hiển thị (DataField) là TenSach, Soluong, Gia và ThanhTien. Tạo thêm 1 cột có tiêu đề “Nhập số lượng cần mua thêm”, giá trị của trường cần hiển thị sẽ là 1TextBox (TextBox này được tạo khi chạy chương trình)* Bỏ tùy chọn ở Auto-generate fields -Tạo thêm các Button và các Label như sau:

* Từ Standard của ToolBox tạo ra 1 Label với tên: LtongTien để hiển thị tổng tiền trong giỏ hàng* 4 Button, lần lượt với tên ButCapNhat, ButXoaGioHang, ButThanhToan để thay đổi lại số lượng trong giỏ hàng, xóa các sách trong giỏ hàng, lưu lại các thông tin khách hàng. + Lập trình trên sự kiện Load của GioHang.aspx để hiển thi giỏ hàng lên GridView1:protected void Page_Load(object sender, EventArgs e){Gio gh = new Gio(); // Tạo ra đối tượng Giogh = (Gio)Session["gh"]; // Gán các thông tin trong giỏhàng(Session[“gh”]) vào dhif (gh != null) // Nếu trong giỏ đã có hàng{GridView1.DataSource = gh.dt; // Nạp bảng dt trong giỏ hàng lên

GridView1 GridView1.DataBind();LTongTien.Text = gh.TongTien().ToString() ; // Hiển thị tổng tiền trong giỏ}}+ Lập trình trên sự kiện RowDataBound của GridView1 (sự kiện này xảy ra khi nạp từng dòng dữ liệu lên GridView1): Khi mỗi dòng được nạp dữ liệu ta tạo thêm vào cột số 5 1 TextBox để người dùng thay đổi lại số lượng trong giỏ sau khi mua:protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { // Nếu không phải nạp dữ liệu vào cho tiêu đề của GridView1if (e.Row.RowType != DataControlRowType.Header ) { // Tạo 1 đối tượng textboxTextBox textbox = new TextBox();textbox.ID = "tb"; // Gán ID cho TextBox textbox.Text = "0";e.Row.Cells[5].Controls.Add(textbox);// Nạp textbox vào cột thứ 5 của GridView}+ Nhấn F5 để mua thư vài quyển sách+ Lập trình trên sự kiện Click của ButCapNhap để cập nhật lại số lượng trong giỏ hàng khi người dùng thay đổi số lượng trên TextBox của từng dòng trên GridView1:protected void ButCapNhap_Click(object sender, EventArgs e) {Gio gh = new Gio();gh= (Gio)Session["gh"] ; // Gán giỏ hàng vào ghfor (int i = 0; i < GridView1.Rows.Count; i++) // Duyệt qua từng dòng của GridView1 {string ms = GridView1.Rows[i].Cells[0].Text.Trim(); // Lấy mã sách trên dòng i của cột 0// Lấy giá trị về TextBox trên cột số 5TextBox tb = (TextBox)GridView1.Rows[i].Cells[5].FindControl("tb");;int sl=int.Parse(tb.Text); // Lấy số lượng trên TextBoxif(sl!=0)gh.ThemGiohang(ms,"",sl,0); // Tăng số lượng trong giỏ hàng, không quan tâm đến tên sách , giá}Session["gh"] = gh; // Thay đổi giỏ hàngGridView1.DataSource = gh.dt; // Nạp lại dữ liệu vào GridViewGridView1.DataBind();LTongTien.Text =gh.TongTien().ToString() ; // Hiển thị lại tổng tiền của giỏ hàng}+ Lập trình trên sự kiện Click của ButXoaGioHang để xóa giỏ hàngprotected void ButXoaGio_Click(object sender, EventArgs e){Session["gh"] = null; LTongTien.Text = "0";GridView1.DataSource = null ; GridView1.DataBind();}9. Yêu cầu bổ sung:- Thiết kế 1 trang ThongTinKH.aspx để khách hàng điền tất cả thông tin bao gồm họ tên, địa

chỉ, SĐT, sau đó lưu các thông tin này vào bảng KhachHang (Các thông tin như mã sách, số lượng mua, giá,và thành tiền lấy từ giỏhàng, 3 thông tin họ tên, địa chỉ, SĐT có thể trùng nhau nếu khách hàng mua nhiều sách )- Trên trang GioHang.aspx lập trình trên sự kiện Click của ButThanhToan để hiển thị trang ThongTinKH.aspx+ Tạo thêm trang DangNhap.aspx để đăng nhập vào Website ( dữ liệu lấy từ bảng DangNhap), nếu đăng nhập thành công thì:- Hiển thị thông tin của các khách hàng đặt mua sách- Xóa các khách đã đặt cách ngày hiện tại quá 1 tháng- Có thể thay đổi mật khẩu.- Tìm kiếm khách hàng- Thay đổi trạng thái =1 cho các khách hàng đã thanh toán(Sinh viên có thể tự tạo ra 1 menu để điều khiển các công việc trên)