[ASP.NET] 회원관리 폼 만들기

ASP.NET 2020. 3. 18. 08:48

목표

회원가입, 삭제, 수정이 가능하고 정보를 불러올 수 있는 간단한 테이블 제작

ms-sql 테이블 생성

CREATE TABLE 회원관리
(
사번 varchar(6) DEFAULT REPLICATE('0',5 - LEN(NEXT VALUE FOR forStrId)) + CONVERT(varchar(6),NEXT VALUE FOR forStrId) NOT NULL,
성명 VARCHAR(10) NOT NULL,
주민번호 VARCHAR(13),
성별 CHAR(1),
이메일 VARCHAR(100),
전화번호 VARCHAR(11),
우편번호 VARCHAR(6),
주소 VARCHAR(200),
부서 VARCHAR(20),
직위 VARCHAR(20),
CONSTRAINT SET_PK PRIMARY KEY(사번)
)

사번을 int 타입이 아닌 string타입으로 사용하기 위해 IDENTITY를 사용하지 않고 SEQUENCE를 생성하여 사번을 자동으로 생성하게 한 뒤 PK를 주었다.

Index.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="CRUD_practice.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div>
                <label>사번</label>
                <asp:TextBox ID="tb_num" runat="server" ReadOnly="true"></asp:TextBox><br />

                <label>성명</label>
                <asp:TextBox ID="tb_name" runat="server"></asp:TextBox><br />

                <label>주민번호</label>
                <asp:TextBox ID="tb_rNum1" runat="server"></asp:TextBox>
                <asp:TextBox ID="tb_rNum2" runat="server" TextMode="Password"></asp:TextBox><br />

                <label>이메일</label>
                <asp:TextBox ID="tb_email" runat="server"></asp:TextBox><br />

                <label>전화번호</label>
                <asp:TextBox ID="tb_phoneNum" runat="server"></asp:TextBox><br />

                <label>주소</label>
                <asp:TextBox ID="tb_postNum" runat="server"></asp:TextBox><asp:TextBox ID="tb_addr" runat="server"></asp:TextBox><br />

                <label>부서</label>
                <asp:DropDownList ID="ddl_dept" runat="server">
                </asp:DropDownList><br />

                <label>직위</label>
                <asp:DropDownList ID="ddl_rank" runat="server">
                </asp:DropDownList><br />
            </div>

            <div class="row-cols-6">
                <asp:Button ID="btn_test" runat="server" Text="TEST" OnClick="btn_test_Click"></asp:Button>
                <asp:Button ID="btn_new" runat="server" Text="신규" OnClick="btn_new_Click"></asp:Button>
                <asp:Button ID="btn_save" runat="server" Text="저장" OnClick="btn_save_Click"></asp:Button>
                <asp:Button ID="btn_delete" runat="server" Text="삭제" OnClick="btn_delete_Click"></asp:Button>
            </div>

            <div>
                <asp:GridView ID="gv" runat="server" AutoGenerateColumns="False" CellPadding="4" DataKeyNames="사번" DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None" OnRowCommand="Unnamed_RowCommand">
                    <AlternatingRowStyle BackColor="White" />
                    <Columns>
                        <asp:TemplateField HeaderText="사번">
                            <ItemTemplate>
                                <asp:LinkButton runat="server" CommandName="ITEM" CommandArgument='<%# Eval("사번") %>'><%# Eval("사번") %></asp:LinkButton>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:BoundField DataField="사번" HeaderText="사번" ReadOnly="True" SortExpression="사번" />
                        <asp:BoundField DataField="성명" HeaderText="성명" SortExpression="성명" />
                        <asp:BoundField DataField="주민번호" HeaderText="주민번호" SortExpression="주민번호" />
                        <asp:BoundField DataField="부서" HeaderText="부서" SortExpression="부서" />
                        <asp:BoundField DataField="직위" HeaderText="직위" SortExpression="직위" />
                    </Columns>
                    <EditRowStyle BackColor="#2461BF" />
                    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                    <RowStyle BackColor="#EFF3FB" />
                    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                    <SortedAscendingCellStyle BackColor="#F5F7FB" />
                    <SortedAscendingHeaderStyle BackColor="#6D95E1" />
                    <SortedDescendingCellStyle BackColor="#E9EBEF" />
                    <SortedDescendingHeaderStyle BackColor="#4870BE" />
                </asp:GridView>

                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TEST_LJHConnectionString %>" SelectCommand="SELECT [사번], [성명], [주민번호], [부서], [직위] FROM [회원관리]"></asp:SqlDataSource>
            </div>
        </div>
    </form>

    <script type="text/javascript">

        var re_name = /^[기-힣]{2,5}$/ 
        var re_rNum1 = /^[0-9]{6,6}$/
        var re_rNum2 = /^[0-9]{7,7}$/
        var re_email = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
        var re_phoneNum = /^[0-9]+$/
        var re_postNum = /^[0-9]{4,5}$/
        

        $(document).ready(function () {
            $('#<%= btn_test.ClientID %>').on('click', function () {

                var num = $('#<%= tb_num.ClientID %>').val();
                var name = $('#<%= tb_name.ClientID %>').val();
                var rNum1 = $('#<%= tb_rNum1.ClientID %>').val();
                var rNum2 = $('#<%= tb_rNum2.ClientID %>').val();
                var email = $('#<%= tb_email.ClientID %>').val();
                var phoneNum = $('#<%= tb_phoneNum.ClientID %>').val();
                var postNum = $('#<%= tb_postNum.ClientID %>').val();
                var addr = $('#<%= tb_addr.ClientID %>').val();
                var dept = $('#<%= ddl_dept.ClientID %>').val();
                var rank = $('#<%= ddl_rank.ClientID %>').val();

                var arrNum1 = new Array();
                var arrNum2 = new Array();


                if (!re_name.test(name)) {
                    alert('2자에서 5자 사이의 이름을 입력하자');
                    $('#<%= tb_name.ClientID %>').append('2자에서 5자 사이의 이름을 입력하자');
                    return false;
                }

                /*주민등록번호*/
                if (!re_rNum1.test(rNum1)){
                    alert('주민 앞자리는 6자리 숫자여야 합니다.');
                    return false;
                };

                if (!re_rNum2.test(rNum2)){
                    alert('주민 뒷자리는 7자리 숫자여야 합니다.');
                    return false;
                };

                if (!re_email.test(email)) {
                    alert('이메일 형식을 확인 바랍니다.');
                    return false;
                };

                if (!re_phoneNum.test(phoneNum)) {
                    alert('전화번호는 숫자만 입력 가능합니다.');
                    return false;
                };

                re_postNum
                if (!re_postNum.test(postNum)) {
                    alert('4~5자리의 숫자만 입력 가능합니다.');
                    return false;
                };


                if (dept == '--선택--') {
                    alert('부서를 선택해야 합니다.');
                    return false;
                }

                if (rank == '--선택--') {
                    alert('직급을 선택해야 합니다.');
                    return false;
                }

                return false;
            });
        });
    </script>
</body>
</html>

aspx페이지는 하나의 큰 <div> 태그 안에 3개의 작은 <div>태그를 사용하여 구역을 나누었다.

첫번째 구역은 테이블 형식의 데이터가 들어가고 두번째 구역에는 버튼, 셋째 구역은 그리드뷰가 들어간다. <div>태그에는 어떠한 클래스도 주지 않았으며 공간의 구분을 쉽게하기 위한 용도로 임시로 생성해 두었다.

테이블

<div>
    <label>사번</label>
    <asp:TextBox ID="tb_num" runat="server" ReadOnly="true"></asp:TextBox><br />

    <label>성명</label>
    <asp:TextBox ID="tb_name" runat="server"></asp:TextBox><br />

    <label>주민번호</label>
    <asp:TextBox ID="tb_rNum1" runat="server"></asp:TextBox>
    <asp:TextBox ID="tb_rNum2" runat="server" TextMode="Password"></asp:TextBox><br />

    <label>이메일</label>
    <asp:TextBox ID="tb_email" runat="server"></asp:TextBox><br />

    <label>전화번호</label>
    <asp:TextBox ID="tb_phoneNum" runat="server"></asp:TextBox><br />

    <label>주소</label>
    <asp:TextBox ID="tb_postNum" runat="server"></asp:TextBox><asp:TextBox ID="tb_addr" runat="server"></asp:TextBox><br />

    <label>부서</label>
    <asp:DropDownList ID="ddl_dept" runat="server">
    </asp:DropDownList><br />

    <label>직위</label>
    <asp:DropDownList ID="ddl_rank" runat="server">
    </asp:DropDownList><br />
</div>

label은 일반태그를 사용하고 동작이 필요한 부분은 asp에서 제공하는 태그를 사용.

- 사번은 자동생성이기 때문에 ReadOnly 속성을 true 로 주어서 사용자가 입력할 수 없도록 하였다.

- 주민번호에 입력된 TextMode="Password"는 텍스트를 암호형식으로 표시해주는 역할이다.

- 부서와 직위는 입력되어야 하는 값이 한정되어 있으므로 DropDownList 태그를 사용 하였고 그 이외의 입력이 필요한 곳에는 TextBox를 사용하였다.

버튼

<div class="row-cols-6">
    <asp:Button ID="btn_test" runat="server" Text="TEST" OnClick="btn_test_Click"></asp:Button>
    <asp:Button ID="btn_new" runat="server" Text="신규" OnClick="btn_new_Click"></asp:Button>
    <asp:Button ID="btn_save" runat="server" Text="저장" OnClick="btn_save_Click"></asp:Button>
    <asp:Button ID="btn_delete" runat="server" Text="삭제" OnClick="btn_delete_Click"></asp:Button>
</div>

이 페이지에서 사용될 모든 버튼들은 서버컨트롤로 생성하였기 때문에 cs페이지에서 버튼의 명령을 수행하지만 저장 버튼은 아래에 <script>를 두어서 먼저 유효성 검사를 시행하도록 하였다. 유효성 검사에 통과하지 못한 값이 있을 경우 alert로 수정되어야 할 부분에 대해서 경고창을 띄워 주도록 하였다.

re로 시작하는 변수는 정규식을 입력한 것이고 그 아래에는 페이지가 읽어진 뒤 save 버튼이 click이 되는것을 지켜보는 감시자(Listener) 형식으로 JS가 실행되도록 하였다.

스크립트

<script type="text/javascript">

    var re_name = /^[기-힣]{2,5}$/ 
    var re_rNum1 = /^[0-9]{6,6}$/
    var re_rNum2 = /^[0-9]{7,7}$/
    var re_email = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
    var re_phoneNum = /^[0-9]+$/
    var re_postNum = /^[0-9]{4,5}$/
        

    $(document).ready(function () {
        $('#<%= btn_test.ClientID %>').on('click', function () {

            var num = $('#<%= tb_num.ClientID %>').val();
            var name = $('#<%= tb_name.ClientID %>').val();
            var rNum1 = $('#<%= tb_rNum1.ClientID %>').val();
            var rNum2 = $('#<%= tb_rNum2.ClientID %>').val();
            var email = $('#<%= tb_email.ClientID %>').val();
            var phoneNum = $('#<%= tb_phoneNum.ClientID %>').val();
            var postNum = $('#<%= tb_postNum.ClientID %>').val();
            var addr = $('#<%= tb_addr.ClientID %>').val();
            var dept = $('#<%= ddl_dept.ClientID %>').val();
            var rank = $('#<%= ddl_rank.ClientID %>').val();

            var arrNum1 = new Array();
            var arrNum2 = new Array();


            if (!re_name.test(name)) {
                alert('2자에서 5자 사이의 이름을 입력하자');
                $('#<%= tb_name.ClientID %>').append('2자에서 5자 사이의 이름을 입력하자');
                return false;
            }

            /*주민등록번호*/
            if (!re_rNum1.test(rNum1)){
                alert('주민 앞자리는 6자리 숫자여야 합니다.');
                return false;
            };

            if (!re_rNum2.test(rNum2)){
                alert('주민 뒷자리는 7자리 숫자여야 합니다.');
                return false;
            };

            if (!re_email.test(email)) {
                alert('이메일 형식을 확인 바랍니다.');
                return false;
            };

            if (!re_phoneNum.test(phoneNum)) {
                alert('전화번호는 숫자만 입력 가능합니다.');
                return false;
            };

            re_postNum
            if (!re_postNum.test(postNum)) {
                alert('4~5자리의 숫자만 입력 가능합니다.');
                return false;
            };


            if (dept == '--선택--') {
                alert('부서를 선택해야 합니다.');
                return false;
            }

            if (rank == '--선택--') {
                alert('직급을 선택해야 합니다.');
                return false;
            }

            return false;
        });
    });
</script>

그리드뷰

<div>
    <asp:GridView ID="gv" runat="server" AutoGenerateColumns="False" CellPadding="4" DataKeyNames="사번" DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None" OnRowCommand="Unnamed_RowCommand">
        <AlternatingRowStyle BackColor="White" />
        <Columns>
            <asp:TemplateField HeaderText="사번">
                <ItemTemplate>
                    <asp:LinkButton runat="server" CommandName="ITEM" CommandArgument='<%# Eval("사번") %>'><%# Eval("사번") %></asp:LinkButton>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="사번" HeaderText="사번" ReadOnly="True" SortExpression="사번" />
            <asp:BoundField DataField="성명" HeaderText="성명" SortExpression="성명" />
            <asp:BoundField DataField="주민번호" HeaderText="주민번호" SortExpression="주민번호" />
            <asp:BoundField DataField="부서" HeaderText="부서" SortExpression="부서" />
            <asp:BoundField DataField="직위" HeaderText="직위" SortExpression="직위" />
        </Columns>
        <EditRowStyle BackColor="#2461BF" />
        <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
        <RowStyle BackColor="#EFF3FB" />
        <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
        <SortedAscendingCellStyle BackColor="#F5F7FB" />
        <SortedAscendingHeaderStyle BackColor="#6D95E1" />
        <SortedDescendingCellStyle BackColor="#E9EBEF" />
        <SortedDescendingHeaderStyle BackColor="#4870BE" />
    </asp:GridView>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TEST_LJHConnectionString %>" SelectCommand="SELECT [사번], [성명], [주민번호], [부서], [직위] FROM [회원관리]"></asp:SqlDataSource>
</div>

그리드뷰는 서버컨트롤을 그대로 사요하였지만 사번이 출력될 부분에 대해서만 다른 옵션을 주었다.

TemplateFiled로 사번이 들어갈 칼럼을 생성하고 값으로는 링크가 들어가도록 하였다.

<%# Eval("사번") %>은 그 필드에 맞는 사번의 값을 불러오고 <LinkButton>으로 감싸서 클릭이 가능하도록 하였으며 CommandName을 'ITEM' CommandArgument를 그 자리에 있는 사번이 되도록 설정하였다.

'ASP.NET' 카테고리의 다른 글

ASP.NET MVC 자습서(2) - 뷰 추가 (0)	2020.03.20
ASP.NET MVC 자습서(1) - 컨트롤러 추가 (0)	2020.03.20
ASP.NET에서 JavaScript로 C# 함수 호출하기 (0)	2020.03.16
GRIDVIEW.DataBind() (0)	2020.03.12
이메일 정규표현식 (0)	2020.03.12

ABOUT ME

디벨로프로 디벨로프로

'ASP.NET' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'ASP.NET' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바