VS 2008을 이용한 블로그 프로그래밍 - Part5

 

이 포스트는 월간 마이크로소프트웨어에 기고한 원고를 재편집한 포스트입니다. 그러므로, 본의 아니게 반말로 진행되고 있습니다. 원래 싸가지가 없어서 그런 것이 아니니 무한 용서를... ^^;;
또한, .NET Framework 3.5 SP1이 적용되기 이전의 소스이므로, 현재의 개발 환경과 다를 수 있습니다. 마소에 제출한 블로그 소스는 블로그 소스 다운로드에서 다운로드하실 수있습니다.

블로그 관리자의 로그인/로그아웃 기능 구현

이제부터, 블로그를 관리하는 역할을 가진 관리자의 로그인 기능을 구현해보도록 하겠다. 우선 관리자 로그인이 된 경우와 로그인이 되지 않은 경우(Session값을 가지고 구분하게 된다), 메뉴 부분을 다르게 보여주기 위해서 마스터 페이지(BlogMasterPage.master)에 정의된 메뉴 부분을 <리스트 1>과 같이 변경한다.

        <div class="nav">

            <a href="Default.aspx">HOME</a> 

            <a href="About.aspx">ABOUT</a> 

            <a href="Tag.aspx">TAG</a>

            <a href="Rss.aspx">RSS</a> 

            <a href="Search.aspx">SEARCH</a> 

            <a href="GuestBook.aspx">GUESTBOOK</a>

            <asp:HyperLink ID="hlnkLogin" runat="server" 

                NavigateUrl="~/Login.aspx" Text="LOGIN"></asp:HyperLink>

            <asp:HyperLink ID="hlnkLogout" runat="server" 

                NavigateUrl="~/Logout.aspx" Text="LOGOUT"></asp:HyperLink>

            <asp:HyperLink ID="hlnkAdmin" runat="server" 

                NavigateUrl="~/Admin.aspx" Text="ADMIN"></asp:HyperLink>

            <div class="clearer">

                <span></span>

            </div>

        </div>

<리스트 1> BlogMasterPage.master 페이지의 소스 코드

또한, 블로그 마스터 페이지의 코드 비하인드 페이지에서는 Session값 중 "Admin"값을 확인하여, <리스트 1>에서 재구성한 HyperLink 컨트롤의 Visible 속성을 <리스트 2>와 같이 정의하게 된다.

    protected void Page_Load(object sender, EventArgs e)

    {

        // Session의 값이 없을 경우에는,

        // Logout과 Admin링크를 보여주지 않도록 한다.

        if (Session["Admin"] == null)

        {

            hlnkLogout.Visible = false;

            hlnkAdmin.Visible = false;

        }

        else

        {

            hlnkLogin.Visible = false;

        }

    }

<리스트 2> BlogMasterPage.master.cs 페이지의 소스 코드

<리스트 1>과 <리스트 2>의 코드로 인해, 관리자로 로그인했을 경우와, 관리자로 로그인하지 않은 경우의 메뉴 구조는 각각 <화면 6>, <화면 7>과 같게 된다.

<화면 6> 관리자로 로그인이 되지 않은 경우의 메뉴 구성

<화면 7> 관리자로 로그인이 된 경우의 메뉴 구성

이제, 메뉴의 "Login"을 클릭할 경우, 관리자 로그인을 하기 위한 페이지인 Login.aspx 페이지를 구성해보도록 하자. <리스트 3-1>과 <리스트 3-2>는 Login.aspx 페이지의 소스 코드 및 Login 버튼을 클릭했을 경우에 실행되는 소스 코드를 보여준다.

<%@ Page Language="C#" MasterPageFile="~/BlogMasterPage.master" AutoEventWireup="true" 

CodeFile="Login.aspx.cs" Inherits="Login" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <script language="javascript" type="text/javascript">

        // ID, PWD 입력상자 유효성 검사

        function fnLoginValidation() {

            var txtAdminID = document.getElementById("<%=txtAdminID.ClientID%>");

            var txtAdminPassword = document.getElementById("<%=txtAdminPassword.ClientID%>");

            if (txtAdminID.value == "") {

                alert("ID를 입력하세요.");

                return false;

            }

            if (txtAdminPassword.value == "") {

                alert("PASSWORD를 입력하세요.");

                return false;

            }

            return true;

        }

        // ID, PWD 입력상자 초기화

        function fnClearInputText() {

            var txtAdminID = document.getElementById("<%=txtAdminID.ClientID%>");

            var txtAdminPassword = document.getElementById("<%=txtAdminPassword.ClientID%>");

            txtAdminID.value = "";

            txtAdminPassword.value = "";

            return false;

        }

    </script>

    <div class="left">

        <div class="content">

            <h1>LOGIN</h1>

            <div style="width:100%;text-align:center">

                <table width="80%" cellpadding="2" cellspacing="0" border="0">

                    <tr valign="middle" style="height:26px;">

                        <td class="td_left_input_width30">ID : </td>

                        <td class="td_right_input_width70">

                            <asp:TextBox ID="txtAdminID" runat="server" MaxLength="10" 

                                CssClass="txtCommon"></asp:TextBox>

                        </td>

                    </tr>

                    <tr valign="middle" style="height:26px;">

                        <td class="td_left_input_width30">PASSWORD : </td>

                        <td class="td_right_input_width70">

                            <asp:TextBox ID="txtAdminPassword" runat="server" MaxLength="10" 

                                TextMode="Password" CssClass="txtCommon"></asp:TextBox>

                        </td>

                    </tr>

                    <tr style="height:40px;" valign="middle">

                        <td style="width:100%" colspan="2" align="center">

                            <asp:Button ID="btnLogin" runat="server" Text="Login" 

                                OnClientClick="return fnLoginValidation()" OnClick="btnLogin_Click" /> 

                            <asp:Button ID="btnCancel" runat="server" Text="Clear" 

                                OnClientClick="return fnClearInputText()" /> 

                        </td>

                    </tr>

                </table>

            </div>

        </div>

    </div>

</asp:Content>

<리스트 3-1> Login.aspx 페이지의 소스 코드

    protected void btnLogin_Click(object sender, EventArgs e) 

    {

        BlogDataClassesDataContext blogContext 

            = new BlogDataClassesDataContext();

        var adminInfo = from USER in blogContext.BLOG_USERINFO select USER;

        string strAdminID = string.Empty;

        string strAdminPassword = string.Empty;

        // 관리자 정보가 있을 경우

        if (adminInfo != null)

        {

            foreach (BLOG_USERINFO userInfo in adminInfo)

            {

                strAdminID = userInfo.AdminID;

                strAdminPassword = userInfo.AdminPWD;

            }

            // 관리자 정보와 입력한 정보가 일치할 경우

            if (string.Compare(strAdminID, txtAdminID.Text.Trim(), true) == 0 && 

                string.Compare(strAdminPassword, txtAdminPassword.Text.Trim(), true) == 0)

            {

                Session["Admin"] = "admin";

                Response.Redirect("Default.aspx");

            }

            else 

            {

                string strNotCorrect 

                    = "alert('관리자 ID 또는 비밀번호가 틀립니다.');";

                Page.ClientScript.RegisterStartupScript(

                    this.GetType(), "notcorrect", strNotCorrect, true);

            }

        }

        else 

        {

            string strNotData = "alert('관리자 정보가 없습니다.');";

            Page.ClientScript.RegisterStartupScript(

                this.GetType(), "notdata", strNotData, true);

        }

    }

<리스트 3-2> Login 버튼을 클릭시의 소스 코드

<리스트 3>에서 보여지는 코드에 대해서 잠깐 설명하도록 하겠다. Login 버튼을 클릭하게 되면, BLOG_USERINFO 테이블에 저장되어 있는 관리자 아이디 정보와 비밀번호 정보를 LINQ 쿼리로 가져와서 변수에 할당한 후, 사용자가 입력한 값과 일치하는 지를 확인한다. 사용자가 입력한 값과 일치하게 되면 Session값 중 "Admin"값에 값을 할당한 후, 블로그의 초기 화면으로 이동시키게 되며, 일치하지 않을 경우는 아이디 또는 비밀번호가 틀렸다는 경고창을 보여주게 된다. "CTRL+F5키" 또는 디버그 메뉴의 "디버깅하지 않고 시작 메뉴"를 선택하여, 웹 브라우저로 지금까지 적용한 화면을 보도록 한다. 메뉴의 "Login"을 눌러 로그인 페이지로 이동 후에 아이디와 비밀번호에 임의의 글자를 입력한 후 로그인 버튼을 클릭하면 <화면 8>과 같은 경고창이 뜨게 되며, 정확하게 아이디와 비밀번호를 입력하게 되면 Default.aspx 페이지로 이동하게 되며 상단의 메뉴 구조가 <화면 7>과 같이 변경되게 된다.

<화면 8> 로그인이 실패했을 경우의 화면

로그인 부분이 완성되었으므로, 로그아웃 부분에 대해서 설명하도록 하겠다. 로그아웃은 별도의 페이지인 "Logout.aspx"를 사용하여 로그아웃 기능을 구현하도록 하며, 별다른 기능 없이 Session 값 중 Admin에 할당된 값을 초기화시키는 코드를 가지게 된다. 웹 사이트 이름에서 우측 마우스를 클릭하여 “새 항목 추가(Add New Item...)" 메뉴를 선택하여, "Logout.aspx"라는 이름의 페이지를 추가한다. 추가한 "Logout.aspx.cs" 페이지에 다음과 같은 코드를 추가한다.

    protected void Page_Load(object sender, EventArgs e)

    {

        Session["Admin"] = null;

        Response.Redirect("Login.aspx");

    }

관리자로 로그인했을 경우, 상단 메뉴의 "LogOut" 메뉴를 클릭하면, 세션값 중 Admin값은 null로 변경되며, 페이지는 "Login.aspx" 페이지로 이동하게 된다.

로그아웃 기능에 대해서 별도로 페이지를 만든 것에 대해서 의문점을 가지고 있는 독자들이 있을 줄로 안다. 물론, Visual Studio 2008부터는 기본적으로 ASP.NET AJAX 기능이 포함되어 있기 때문에 AJAX가 제공하는 기능 중 페이지 메소드나 웹 서비스를 이용하여 Session값에 대한 처리를 할 수도 있지만, 로그아웃에 관련된 별도의 페이지를 만들어 Session값에 대한 처리를 하는 것이 좀 더 편하기 때문에 필자는 이와 같이 로그아웃 페이지를 별도로 만들게 되었다.

또한, 관리자 아이디와 비밀번호를 저장하고 있는 BLOG_USERINFO 테이블 또한, AdminID와 AdminPWD 2개의 필드만을 염두에 두고 있지는 않았던 테이블이다. 블로그를 방문하는 방문자 중에서 블로그에 회원 가입을 하는 사용자들의 정보를 저장하기 위한 테이블로 구상하였으나, 지면상 회원 가입 부분에 관련되어서 설명을 별도로 드릴 수 없을 것 같기 때문에 AdminID와 AdminPWD, 이와 같이 2개의 필드로만 구성하였고 관리자의 아이디 정보와 비밀번호 정보를 담게 하였다. 회원 가입 부분에 관련되어서는 여러 ASP.NET 도서나 블로그 및 사이트를 참조하기 바란다.

---

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.