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


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

*

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

Xem thêm: 8+ Cách Dạy Con Học Lớp 1 Ở Nhà (Học Chữ, Tập Đọc), Cách Dạy Kèm Con Học Lớp 1 Hiệu Quả

*

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