Hướng dẫn thiết kế web bằng visual studio 2010

-

Giới thiệu

Trong bài viết này tôi sẽ hướng dẫn các bạn lập trình tạo trang web động sử dụng ASP.NET với ngôn ngữ C# và kết nối với hệ quản trị cơ sở dữ liệu SQL Server

Chuẩn bị

Ngoài ra bạn cần:


Các câu lệnh SQL cơ bản như SELECT, INSERT, UPDATE, DELETE

Cơ sở dữ liệu

Đây là phần code đơn giản giới thiệu cách lập trình ASP.NET với cơ sở dữ liệu nên chúng tôi chỉ làm ví dụ với cơ sở dữ liệu chỉ có một bảng:

tblKhachHang( MaKH nchar(10), TenKH nvarchar(50), DiaChi nvarchar(100), DienThoai nvarchar(13) , DiDong nvarchar(13), Email nvarchar(20))

Thiết kế giao diện


*

Thiết kế giao diện phần quản lý khách hàng


Chú ý:Khi xây dựng giao diện các trang web cho một website, chúng ta nên xây dựng một giao diện đồng nhất cho tất cả các trang, ví dụ như các trang sẽ có chuẩn màu sắc giống nhau, có cùng menu, footer… Để giải quyết vấn đề đồng nhất qua tất cả các trang, trong ASP.NET chúng ta có thể thiết kế trang Master Page, và các trang con có thể kế thừa từ các trang nàySử dụng CSS để định kiểu trang một cách linh hoạt và dễ bảo trì

Các bước thực hiện

Mở chương trình Visual Studio (trong ví dụ này là phiên bản 2010), vào menu Start > All Programs > Microsoft Visual Studio 2010 > Microsoft Visual Studio 2010Vào menu File > New > Web Site… rồi chọn các tham số như hình dưới
*

Tạo mới một website với Visual Studio


Cửa sổ Solution Explorer chứa các tài nguyên của WebSite, cấu trúc như sau:Thư mục Account – chứa các trang thực thi liên quan đến quản lý tài khoản người dùng. Trong ví dụ này ta sẽ không dùng tới.Thư mục App_Data – Nơi chứa tập tin cơ sở dữ liệu SQL Server Express.Thư mục Scripts – chứa code script thực thi tại phía client như JavaScript.Thư mục Styles – chứa file định kiểu CSS.Các file trang web, có đuôi mặc định là .aspxFile Global.asax – dùng để khai báo và khởi tạo giá trị cho các biến Application, Session.File Site.master – là file Master page. Định nghĩa bố cục của tất cả các trang của website.File Web.config – chứa các cấu hình cho website như chuỗi kết nối tới cơ sở dữ liệu, v.v..Tạo CSDL, kích vào tên Project trong Solution Explorer > Add New Item > SQL Server Database, rồi đặt tên phần Name: QLBanHang.mdfTrong cửa sổ Server Explorer, kích vào QLBanHang.mdf > Tables > Add New Table, tạo bảng dữ liệu tblKhachHang có cấu trúc như ở trên.

Bạn đang xem: Hướng dẫn thiết kế web bằng visual studio 2010


*

Tạo cơ sở dữ liệu bán hàng trong SQL Server


Thiết kế trang Default.aspx quản lý khách hàng. Kích đúp vào trang này rồi chọn chế độ Design ở góc dưới bên phải của cửa sổ chính. Kéo các control vào trang Default.aspx như sau:Phần giao diệnLoại controlCác thuộc tính
Phần nhập dữ liệuPanelName = pnlEdit
Mã khách hàngTextBoxName = txtMaKH
RequiredFieldValidatorName = rfvMaKH, ControlToValidate = txtMaKH, ErrorMessage = Mã khách hàng phải được nhập!
Tên khách hàngTextBoxName = txtTenKH
RequiredFieldValidatorName = rfvTenKH, ControlToValidate = txtTenKH, ErrorMessage = Tên khách hàng phải được nhập!
 Địa chỉTextBoxName = txtDiaChi
Điện thoạiTextBoxName = txtDienThoai
RegularExpressionValidatorName = revDienThoai, ControlToValidate = txtDienThoai, ValidationExpression = \d{1,4}-\d{6,8}, ErrorMessage = Số điện thoại bạn nhập không đúng định dạng
Di độngTextBoxName = txtDiDong
RegularExpressionValidatorName =revDiDong, ControlToValidate = txtDiDong, ValidationExpression = \d{1,4}-\d{6,8}, ErrorMessage = Số di động bạn nhập không đúng định dạng
EmaiTextBoxName = txtEmail
RegularExpressionValidatorName = revEmail, ControlToValidate = txtEmail, ValidationExpression = \w+(<-+.’>\w+)*
\w+(<-.>\w+)*\.\w+(<-.>\w+)*, ErrorMessage = Địa chỉ email bạn nhập không đúng
 Phầnhiển thị lỗiLablelName = lblErrorMsg
Phần lưới hiển thịGridViewName = grvKhachHang, PageSize = 10, AllowPaging = True, AllowSorting = True AutoGenerateColumn = False, Width = 100%, kích vào Columns:Thiết kế phần hiện dữ liệu trên lưới, chọn Available fields > BoundField > Add, rồi thay đổi thuộc tính HeaderText, DataField, SortExpression ví dụ như HeaderText = Mã khách hàng, DataField = MaKH, SortExpression = MaKHThiết kế hai nút SửaXoá trên lưới, chọn Available fields > Command Field > Add hai nút DeleteEdit, Update, Cancel. Chỉnh sửa thuộc tính ButtonType, EditText, CancelText, DeleteText và chọn Behavior tương ứng với các nút.
Phần code giao diện trang Default.aspx

CHƯƠNG TRÌNH QUẢN LÝ KHÁCH HÀNG


Email)";//Thực thi câu lệnh SQLcmd = new SqlCommand(sql, con);//Lấy dữ liệu từ trên các ô textbox để truyền các tham biến vào đối tượng Command//Mã khách hàngSqlParameter parMaKH = new SqlParameter("
MaKH", SqlDbType.NChar);parMaKH.Direction = ParameterDirection.Input;parMaKH.Value = txtMaKH.Text;cmd.Parameters.Add(parMaKH);//Tên khách hàngSqlParameter parTenKH = new SqlParameter("
TenKH", SqlDbType.NVarChar);parTenKH.Direction = ParameterDirection.Input;parTenKH.Value = txtTenKH.Text;cmd.Parameters.Add(parTenKH);//Địa chỉSqlParameter parDiaChi = new SqlParameter("
DiaChi", SqlDbType.NVarChar);parDiaChi.Direction = ParameterDirection.Input;parDiaChi.Value = txtDiaChi.Text;cmd.Parameters.Add(parDiaChi);//Điện thoạiSqlParameter parDienThoai = new SqlParameter("
DienThoai", SqlDbType.NVarChar);parDienThoai.Direction = ParameterDirection.Input;parDienThoai.Value = txtDienThoai.Text;cmd.Parameters.Add(parDienThoai);//Di độngSqlParameter parDiDong = new SqlParameter("
DiDong", SqlDbType.NVarChar);parDiDong.Direction = ParameterDirection.Input;parDiDong.Value = txtDiDong.Text;cmd.Parameters.Add(parDiDong);//EmailSqlParameter parEmail = new SqlParameter("
Email", SqlDbType.NVarChar);parEmail.Direction = ParameterDirection.Input;parEmail.Value = txtEmail.Text;cmd.Parameters.Add(parEmail);//Thực thi câu lệnh truy vấncmd.ExecuteNonQuery();//Sau khi Lưu xong phải xóa cacheCache.Remove(KHACH_HANG);//Nạp lại dữ liệu lên GridViewBindDataKhachHang();pnlEdit.Visible = false;btlLuu.CommandArgument = "";}}}}//Đây là sự kiện Săp xếp trên GridView, sự kiện này xảy ra khi người dùng kích vào tiêu đề cột trên GridView//Sự kiện này chỉ chạy khi thuoc tinh AllowSorting = True tren GridView và SortExpression được thiết lập trên BoundColumnprotected void grvKhachHang_Sorting(object sender, GridViewSortEventArgs e){//Lưu trữ trạng thái sắp xếp hiện thời (cột sắp xếp) trong một thẻ hidden của HTML//Đây là thủ thuật đơn giản để lưu lại trạng thái cột đang được sắp xếphidMaKH.Value = e.SortExpression;//Nạp lại dữ liệu trên lướiBindDataKhachHang();}//Đây là sự liện phân trang khi người sử dụng hiển thị các bản ghi của trang khác//Sự kiện này chỉ chạy khi thuoc tinh AllowPaging = Trueprotected void grvKhachHang_PageIndexChanging(object sender, GridViewPageEventArgs e){grvKhachHang.PageIndex = e.NewPageIndex;//Nạp lại dữ liệu của trang hiện tại trên lướiBindDataKhachHang();}//Sự kiện xảy ra khi người dùng thêm mới dữ liệuprotected void btnThemMoi_Click(object sender, EventArgs e){btlLuu.CommandArgument = "New"; //để phân biệt trang thái khi nào thêm mới, sửa, xóapnlEdit.Visible = true;}//Sự kiện xảy ra khi người sử dụng ấn nút Sửaprotected void grvKhachHang_RowEditing(object sender, GridViewEditEventArgs e){grvKhachHang.EditIndex = e.NewEditIndex;//Gắn lại dữ liệuBindDataKhachHang();}//Chức năng khi người sửa dụng kích nút xóa xóa khách hàngprotected void grvKhachHang_RowDeleting(object sender, GridViewDeleteEventArgs e){//Lấy MaKH ở hàng hiện tại cột 0string idKH = grvKhachHang.Rows.Cells<0>.Text;//Thực hiện xóaif (con.State != ConnectionState.Open)con.Open();string sql = "Delete from tblKhachHang Where MaKH ="" + idKH +""";cmd = new SqlCommand(sql, con);cmd.ExecuteNonQuery();Response.Write(idKH);}//Sự kiện xảy ra khi người dùng ấn nút Cập nhậtprotected void grvKhachHang_RowUpdating(object sender, GridViewUpdateEventArgs e){GridViewRow row = (GridViewRow)grvKhachHang.Rows;Response.Write(row.Cells<0>.Text);TextBox txtMaKH1 = (TextBox)row.Cells<0>.Controls<0>;TextBox txtTenKH1 = (TextBox)row.Cells<1>.Controls<0>;TextBox txtDiaChi1 = (TextBox)row.Cells<2>.Controls<0>;TextBox txtDienThoai1 = (TextBox)row.Cells<3>.Controls<0>;TextBox txtDiDong1 = (TextBox)row.Cells<4>.Controls<0>;TextBox txtEmail1 = (TextBox)row.Cells<5>.Controls<0>;//Đóng lại các ô nhậpgrvKhachHang.EditIndex = -1;//Mở kết nốiif (con.State != ConnectionState.Open)con.Open();string sql = "Update tblKhachHang Set TenKH=
MaKH";cmd = new SqlCommand(sql, con);//Lấy dữ liệu từ trên các ô textbox để truyền các tham biến vào đối tượng Command//Mã khách hàngSqlParameter parMaKH = new SqlParameter("
MaKH", SqlDbType.NChar);parMaKH.Direction = ParameterDirection.Input;parMaKH.Value = txtMaKH1.Text;cmd.Parameters.Add(parMaKH);//Tên khách hàngSqlParameter parTenKH = new SqlParameter("
TenKH", SqlDbType.NVarChar);parTenKH.Direction = ParameterDirection.Input;parTenKH.Value = txtTenKH1.Text;cmd.Parameters.Add(parTenKH);//Địa chỉSqlParameter parDiaChi = new SqlParameter("
DiaChi", SqlDbType.NVarChar);parDiaChi.Direction = ParameterDirection.Input;parDiaChi.Value = txtDiaChi1.Text;cmd.Parameters.Add(parDiaChi);//Điện thoạiSqlParameter parDienThoai = new SqlParameter("
DienThoai", SqlDbType.NVarChar);parDienThoai.Direction = ParameterDirection.Input;parDienThoai.Value = txtDienThoai1.Text;cmd.Parameters.Add(parDienThoai);//Di độngSqlParameter parDiDong = new SqlParameter("
DiDong", SqlDbType.NVarChar);parDiDong.Direction = ParameterDirection.Input;parDiDong.Value = txtDiDong1.Text;cmd.Parameters.Add(parDiDong);//EmailSqlParameter parEmail = new SqlParameter("
Email", SqlDbType.NVarChar);parEmail.Direction = ParameterDirection.Input;parEmail.Value = txtEmail1.Text;cmd.Parameters.Add(parEmail);//Thực thi câu lệnh truy vấncmd.ExecuteNonQuery();//Sau khi Lưu xong phải xóa cacheCache.Remove(KHACH_HANG);//Nạp lại dữ liệu lên GridViewBindDataKhachHang();}//Sư kiện xảy ra khi người sử dụng ấn nút hủy bỏprotected void grvKhachHang_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e){grvKhachHang.EditIndex = -1;//Nạp lại dữ liệuBindDataKhachHang();}}

Download

Bạn có thể tải mã nguồn tại đây.

Xem thêm: Xây Dựng Dân Dụng Là Gì ? Vai Trò Của Xây Dựng Dân Dụng


Các thẻ: ASP.NETC#CSSDatabasehtmlSQL

Có thể bạn sẽ thích…

7 phản hồi


*
Gia sư Tây Đô viết:

Khi gia sư đăng ký hồ sơ, tôi muốn viết code để tự động tạo url theo tên người đăng ký. Xin help, cảm ơn nhiều.


Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận


Please enable JavaScript to submit this form.

Tên *

Email *

Lưu tên của tôi, email, và trang web trong trình duyệt này cho lần bình luận kế tiếp của tôi.