Cấp bậc tác giả:

TRAINING

[TUT]Xây dựng Website Bán Hàng - Xây dựng Form Quản trị Admin Control Panel(P2)

Được viết bởi QuangIT ngày 22/03/2013 lúc 11:32 AM
Chào các bạn, phần trước mình đã hướng dẫn các bạn xây dựng giao diện trang Quản trị người dùng, hôm nay mình sẽ hoàn thành phần Login và User
  • 0
  • 13349
Tải tệp tin: Click ở đây

[TUT]Xây dựng Website Bán Hàng - Xây dựng Form Quản trị Admin Control Panel(P2)

Chào các bạn, phần trước mình đã hướng dẫn các bạn xây dựng giao diện trang Quản trị người dùng, hôm nay mình sẽ hoàn thành phần Login và User.
Đầu tiên để phân biệt đâu là Insert đâu là Update, ta sẽ xây dựng các biến Insert và Update, biến kiểu bool nhé các bạn.
public static bool insert;
Bây giờ tới phần Load danh sách người dùng
protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
                BindGrid();
        }

        public void BindGrid()
        {
            grdUser.DataSource = UserService.db.User_GetByAll();
grdUser.DataBind();
        }

Làm thế nào khi bấm nút "Thêm" thì sẽ hiển thị các trường để nhập vào, còn không thì nó sẽ không hiển thị
Vào User.aspx ở chế độ Design, nhấn đúp vào biểu tượng "Thêm", tự động nó sẽ nhảy sang trang User.aspx.cs, hàm mới được tạo ra tự động thêm vào:
        protected void btnThem_Click(object sender, EventArgs e)
        {
            pnUpdate.Visible = true;//Hiển thị
            pnShow.Visible = false;//Đóng lại
ControlClass.ResetControlValues(pnUpdate);
insert = true;//Nếu thực hiện Thêm, biến insert chuyển sang true
        }
Bắt sự kiện: Câu lệnh Reset Control
ControlClass.ResetControlValues(pnUpdate);
Nếu Insert = true thì nó sẽ Insert, ngược lại thì Update
Sau đó chúng ta bắt sự kiện ItemCommand trên DataGrid, bằng cách chuyển User.aspx sang chế độ Design, vào Properties, chọn biểu tượng Event, nhấn đúp vào trường ItemCommand, tự động nó sẽ chuyển sang User.aspx.cs với hàm mới tạo.
protected void grdUser_ItemCommand(object source, DataGridCommandEventArgs e)
        {
            UserInfo obj = new UserInfo();//Khởi tạo Oject UserInfo
            string id = e.CommandArgument.ToString();//Khai báo chuỗi "Khóa"
            if (e.CommandName == "Edit")//Kiểm tra sự kiện click có phải Edit không
            {
insert = false;//Nếu thực hiện chỉnh sửa, biến insert chuyển sang false
                DataTable dt = UserService.db.User_GetById(id);
txtId.Text = id;//Gán Id vào TextBox để sử dụng cho việc cập nhật trong hàm tới
                txtUserName.Text = dt.Rows[0]["UserName"].ToString();
                txtMatKhau.Text = dt.Rows[0]["Password"].ToString();
                txtName.Text = dt.Rows[0]["Name"].ToString();
                cboQuyenHan.SelectedValue = dt.Rows[0]["Role"].ToString();
                cboTrangThai.SelectedValue = dt.Rows[0]["Status"].ToString();
                pnUpdate.Visible = true;//Hiển thị
                pnShow.Visible = false;//Đóng lại
            }
            else//Nếu sự kiện Click không phải Edit thì thực hiện việc xóa
            {
                UserService.db.User_Delete(id);
                BindGrid();
            }
        }
Sau khi Select ra được người dùng, bây giờ chỉnh sửa thông tin người dùng. Bằng cách chuyển User.aspx sang chế độ Design, nhấn đúp vào biểu tượng "Cập nhật", tự động nó sẽ nhảy sang trang User.aspx.cs, hàm mới được tạo ra tự động thêm vào:
Kiểm tra các ký tự nhập vào như khoảng trống
protected void lbUpdate_Click(object sender, EventArgs e)
        {
            #region[TestInput]
            if (txtUserName.Text.Trim().Equals(""))
            {
                WebMsgBox.Show("Bạn chưa nhập tên đăng nhập");
                txtUserName.Focus();
                return;
            }
            if (txtMatKhau.Text.Trim().Equals(""))
            {
                WebMsgBox.Show("Bạn chưa nhập mật khẩu");
                txtMatKhau.Focus();
                return;
            }
            #endregion

  var obj = new UserInfo();
            obj.Id = txtId.Text;
            obj.Name = txtName.Text;
            obj.UserName = txtUserName.Text;
            obj.Password = txtMatKhau.Text;
            obj.Rule = cboQuyenHan.SelectedValue;
            obj.Status = cboTrangThai.SelectedValue;
            if (insert)
            {
                UserService.db.User_Insert(obj);
            }
            else
            {
                UserService.db.User_Update(obj);
            }

            BindGrid();
            pnUpdate.Visible = false;
            pnShow.Visible = true;

        }

Bây giờ thực hiện xử lý nút Back. Bằng cách chuyển User.aspx sang chế độ Design, nhấn đúp vào biểu tượng "Trở lại", tự động nó sẽ nhảy sang trang User.aspx.cs, hàm mới được tạo ra tự động thêm vào:
protected void lbBack_Click(object sender, EventArgs e)
        {
            pnShow.Visible = true;
            pnUpdate.Visible = false;
        }
Tiếp theo thực hiện sự kiện phân trang. Bằng cách chuyển User.aspx sang chế độ Design, chọn DataList, trong properties chuyển sang biểu tượng Events, nhấn đúp vào trường trống PageIndexChanged để kích hoạt sự kiện chỉ mục trên trang nếu có sự thay đổi, tự động nó sẽ nhảy sang trang User.aspx.cs, hàm mới được tạo ra tự động thêm vào:
protected void grdUser_PageIndexChanged(object source, DataGridPageChangedEventArgs e)
        {
            grdUser.CurrentPageIndex = e.NewPageIndex;
            BindGrid();
        }

Toàn bộ Code User.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using MyWeb.Business;
using MyWeb.Common;
using MyWeb.Data;
using System.Data;

namespace WebBanHang.Admins
{
    public partial class User : System.Web.UI.Page
    {
        public static bool insert;
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
                BindGrid();
        }

        public void BindGrid()
        {
            grdUser.DataSource = UserService.db.User_GetByAll();
        }

        protected void btnThem_Click(object sender, EventArgs e)
        {
            pnUpdate.Visible = true;//Hiển thị
            pnShow.Visible = false;//Đóng lại
            ControlClass.ResetControlValues(pnUpdate);
            insert = true;
        }

        protected void grdUser_ItemCommand(object source, DataGridCommandEventArgs e)
        {
            UserInfo obj = new UserInfo();
            string id = e.CommandArgument.ToString();
            if (e.CommandName == "Edit")
            {
                insert = false;
                DataTable dt = UserService.db.User_GetById(id);
                txtId.Text = id;
                txtUserName.Text = dt.Rows[0]["UserName"].ToString();
                txtMatKhau.Text = dt.Rows[0]["Password"].ToString();
                txtName.Text = dt.Rows[0]["Name"].ToString();
                cboQuyenHan.SelectedValue = dt.Rows[0]["Role"].ToString();
                cboTrangThai.SelectedValue = dt.Rows[0]["Status"].ToString();
                pnUpdate.Visible = true;
                pnShow.Visible = false;
            }
            else
            {
                UserService.db.User_Delete(id);
                BindGrid();
            }
        }

        protected void lbUpdate_Click(object sender, EventArgs e)
        {
            #region[TestInput]
            if (txtUserName.Text.Trim().Equals(""))
            {
                WebMsgBox.Show("Bạn chưa nhập tên đăng nhập");
                txtUserName.Focus();
                return;
            }
            if (txtMatKhau.Text.Trim().Equals(""))
            {
                WebMsgBox.Show("Bạn chưa nhập mật khẩu");
                txtMatKhau.Focus();
                return;
            }
            #endregion

            var obj = new UserInfo();
            obj.Id = txtId.Text;
            obj.Name = txtName.Text;
            obj.UserName = txtUserName.Text;
            obj.Password = txtMatKhau.Text;
            obj.Rule = cboQuyenHan.SelectedValue;
            obj.Status = cboTrangThai.SelectedValue;
            if (insert)
            {
                UserService.db.User_Insert(obj);
            }
            else
            {
                UserService.db.User_Update(obj);
            }

            BindGrid();
            pnUpdate.Visible = false;
            pnShow.Visible = true;

            insert = false;
        }

        protected void lbBack_Click(object sender, EventArgs e)
        {
            pnShow.Visible = true;
            pnUpdate.Visible = false;
        }

        protected void grdUser_PageIndexChanged(object source, DataGridPageChangedEventArgs e)
        {
            grdUser.CurrentPageIndex = e.NewPageIndex;
            BindGrid();
        }
    }
}
User.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Admins/Administrator.Master" AutoEventWireup="true"
    CodeBehind="User.aspx.cs" Inherits="WebBanHang.Admins.User" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>Trang Quản trị - DOTNET GROUP</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="title">
        Quản trị người dùng</div>
    <asp:Panel ID="pnShow" runat="server" Width="100%">
        <table style="border-collapse: collapse; background-color: #D0DEF0;">
            <tr>
                <td>
                    <asp:Button ID="btnThem" runat="server" CssClass="btnthem" Text="Thêm mới" 
                        onclick="btnThem_Click" />
                </td>
            </tr>
        </table>
        <asp:DataGrid ID="grdUser" runat="server" AllowPaging="true" AutoGenerateColumns="false"
            CellPadding="4" ForeColor="#333333" Width="100%" PageSize="10" 
            onitemcommand="grdUser_ItemCommand" 
            onpageindexchanged="grdUser_PageIndexChanged">
            <AlternatingItemStyle BorderColor="White" />
            <HeaderStyle CssClass="trHeader" />
            <Columns>
                <asp:BoundColumn DataField="UserName" HeaderText="Tài khoản"></asp:BoundColumn>
                <asp:BoundColumn DataField="Name" HeaderText="Tên Người dùng"></asp:BoundColumn>
                <asp:BoundColumn DataField="Rule" HeaderText="Quyền"></asp:BoundColumn>
                <asp:BoundColumn DataField="Status" HeaderText="Trạng thái"></asp:BoundColumn>
                <asp:TemplateColumn>
                    <HeaderTemplate>
                        Chức năng</HeaderTemplate>
                    <ItemTemplate>
                        <asp:LinkButton ID="lbt1" runat="server" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"Id") %>'
                            CommandName="Edit" CssClass="edit" ToolTip="Sửa"></asp:LinkButton>
                        |
                        <asp:LinkButton ID="lbt2" runat="server" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"Id") %>'
                            CommandName="Delete" CssClass="delete" ToolTip="Xóa" OnClientClick="return confirm(Bạn có chắc chắn muốn xóa không?)"></asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateColumn>
            </Columns>
            <EditItemStyle BackColor="#2461BF" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="true" ForeColor="White" />
            <ItemStyle BackColor="#EFE3F8" />
            <PagerStyle BackColor="#F3F8FE" Font-Bold="true" ForeColor="Blue" HorizontalAlign="Center"
                Mode="NumericPages" />
            <SelectedItemStyle BackColor="#D1D0F1" Font-Bold="true" ForeColor="#333333" />
        </asp:DataGrid>
    </asp:Panel>
    <asp:Panel ID="pnUpdate" runat="server">
        <table cellpadding="0" width="100%" style="border-collapse: collapse;" border="1">
            <tr>
                <td width="150px" class="name_fild_row">
                    <asp:Label ID="lbldangnhap" Text="Tên đăng nhập" runat="server"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
                    <asp:TextBox ID="txtId" runat="server" Visible="false"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td width="150px" class="name_fild_row">
                    <asp:Label ID="Label1" Text="Mật khẩu" runat="server"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtMatKhau" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td width="150px" class="name_fild_row">
                    <asp:Label ID="Label4" Text="Tên người dùng" runat="server"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td width="150px" class="name_fild_row">
                    <asp:Label ID="Label2" Text="Quyền hạn" runat="server"></asp:Label>
                </td>
                <td>
                    <asp:DropDownList ID="cboQuyenHan" runat="server">
                        <asp:ListItem Value="1">Admin</asp:ListItem>
                        <asp:ListItem Value="2">User</asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td width="150px" class="name_fild_row">
                    <asp:Label ID="Label3" Text="Trạng thái" runat="server"></asp:Label>
                </td>
                <td>
                    <asp:DropDownList ID="cboTrangThai" runat="server">
                        <asp:ListItem Value="1">Sử dụng</asp:ListItem>
                        <asp:ListItem Value="0">Cần sử dụng</asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td width="150px" class="name_fild_row">
                    
                </td>
                <td>
                    <asp:LinkButton ID="lbUpdate" runat="server" CssClass="update" 
                        onclick="lbUpdate_Click">Cập nhật</asp:LinkButton>
                    <asp:LinkButton ID="lbBack" runat="server" CssClass="back" 
                        onclick="lbBack_Click">Trở lại</asp:LinkButton>
                </td>
            </tr>
        </table>
    </asp:Panel>
</asp:Content>

Thực hiện Build Project. Để kiểm tra có lỗi nào không, thường là thiếu các DLL. Nếu thiếu DLL AjaxControlToolkit thì Add Reference vào
Ngoài ra, vào Web.config để thêm chuỗi kết nối vào:
  <connectionStrings>
      <add name="ConnectionString" connectionString="Data Source=.;DATABASE=VDWebBanHang;Integrated Security=true"/>
  </connectionStrings>
Vào Trong CSDL để thêm mới User cho việc đăng nhập vào Form Login. Vào Table Users, nhập admin/admin như hình bên dưới để đăng nhập.
Chạy Website bằng cách F5, nếu lỗi ở đâu thì Debug ở đó để fix.
thanhcong.jpg
Cách 2(Sử dụng Project sinh code)
Bạn nên tải Source code về xem, vì một số phần tương tự như cách 1, chỉ khác ở chỗ cách thức đặt tên. Ví dụ như việc hiển thị danh sách người dùng:
public void BindGrid()
        {
            TList<Users> Tlist_NguoiDung = DataRepository.UsersProvider.GetAll();
            grdUser.DataSource =  Tlist_NguoiDung;
            grdUser.DataBind();
        }
Thống nhất cách đặt tên.
Sự kiện trên DataList
protected void grdUser_ItemCommand(object source, DataGridCommandEventArgs e)
        {
            //Users obj = new Users();
            string id = e.CommandArgument.ToString();
            if (e.CommandName == "Edit")
            {
                insert = false;
                Users us = DataRepository.UsersProvider.GetById(Convert.ToInt32(id));//UserService.db.User_GetById(id);
                txtId.Text = id;
                txtUserName.Text = us.UserName.ToString();
                txtMatKhau.Text = us.Password.ToString();
                txtName.Text = us.Name.ToString();
                cboQuyenHan.SelectedValue = us.Rule.ToString();
                cboTrangThai.SelectedValue = us.Status.ToString();
                pnUpdate.Visible = true;
                pnShow.Visible = false;
            }
            else
            {
                DataRepository.UsersProvider.Delete(Convert.ToInt32(id));
                BindGrid();
            }
        }

Thực hiện hàm xử lý Cập nhật
protected void lbUpdate_Click(object sender, EventArgs e)
    {
        #region[TestInput]
        if (txtUserName.Text.Trim().Equals(""))
        {
            WebMessage.Show("Bạn chưa nhập tên đăng nhập");
            txtUserName.Focus();
            return;
        }
        if (txtMatKhau.Text.Trim().Equals(""))
        {
            WebMessage.Show("Bạn chưa nhập mật khẩu");
            txtMatKhau.Focus();
            return;
        }
        #endregion

        var obj = new Users();
        obj.Id = Convert.ToInt32(txtId.Text);
        obj.Name = txtName.Text;
        obj.UserName = txtUserName.Text;
        obj.Password = txtMatKhau.Text;
        obj.Rule = Convert.ToInt32(cboQuyenHan.SelectedValue);
        obj.Status = Convert.ToInt32(cboTrangThai.SelectedValue);
        if (insert)
        {
            DataRepository.UsersProvider.Insert(obj);
        }
        else
        {
            DataRepository.UsersProvider.Update(obj);
        }

        BindGrid();
        pnUpdate.Visible = false;
        pnShow.Visible = true;

        insert = false;
    }

Vậy là chúng ta đã thực hiện xong phần Login và User trong trang quản trị. Bài tiếp theo chúng ta sẽ thực hiện các phần còn lại của trang quản trị. Vì chức năng site nhiều, nền các phân tiếp theo Tôi sẽ hướng dẫn cách 2(gene code) thay vì code chay như hiện nay, không hiệu quả bằng code gene, tiết kiệm thời gian, công sức hơn.
Bạn nên theo dõi xuyên suốt bài giảng để hiểu hơn, và tải source code về, vì 1 phần trong đó hoàn chỉnh hơn, dễ hình dung hơn.

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML