M, V 그리고 C의 각방생활(3) - 초간단 사이트 만들기(1)

안녕하세요. 추운날씨 잘 견디셨죠? 이제야 좀 어깨펴고 글좀 쓰겠네요. 자~ 오늘도 함께하시죠^^

이번에는 MVC로 사이트를 만드는 시간을 가져보려합니다. 간단하게 회원가입, 로그인, 게시판 정도로 해볼 생각입니다. 오늘은 첫번째로 회원가입을 해보도록 하겠습니다. 너무 썰렁하더라도 옷 단단히 더 껴입으시고 웃음으로 넘어가 주세요^^;

DB 생성하기

사용자 테이블을 만들어봐야죠^^ 테이블 컬럼은 다음과 같습니다.

컬럼명	데이터 타입
SEQ	int
ID	nvarchar(50)
NAME	nvarchar(50)
PWD	nvarchar(50)
EMAIL	nvarchar(100)
EMAIL_YN	char(1)
RGST_DT	datetime

다음의 순서대로 테이블을 생성하겠습니다.

1. SQL Server DataBase를 생성합니다. 솔루션 탐색기에서 마우스 우클릭하여 App_Data -> Add -> New Items을 선택하여 MvcDb.mdf라는 이름으로 데이터베이스를 생성합니다.
2. 서버 탐색기에서 생성된 MvcDb.mdf를 클릭하면 데이터베이스가 연결되면서 DB구조가 확장이됩니다. Tables 폴더에서 마우스 우클릭하여 Add New Table을 클릭하고, 위의 테이블 구조로 TB_USER 테이블을 만들겠습니다. 다 만든후 저장해주세요^^

DB와 테이블이 생성이 되었으면 이제 다음의 순서대로 모델을 생성하겠습니다.

1. 솔루션 탐색기에서 Models -> Add -> New Items을 선택합니다.
2. Data 카테고리를 선택하고 ADO.NET Entity Data Model 템플릿을 선택합니다.
3. 모델 이름을 UserDbModel.edmx라고 입력한후 다음버튼을 클릭합니다.
4. Entity Data Model 위자드 팝업이 뜨면 Generate from database를 선택하여 다음버튼을 클릭합니다.

5. 완료가 되면 엔티티 데이터 모델 디자인 창이 열립니다.

SQL Server DataBase의 생성과 모델 생성은 여기를 참고하세요.

초간단한 가입페이지 만들기

정말 간단하게 만듭니다. 위 모델 보시면 항목도 많지가 않죠^^

먼저, 컨트롤러를 하나 생성하겠습니다. 이름은 Member로 하겠습니다.
Controllers에서 Add -> Controller을 하시고 다음과 같이 Member 입력하시고 Add를 꼬옥 눌러줍니다.

다음으로 액션메쏘드를 만들도록 하겠습니다. 이름은 Join으로 하겠습니다.^^

public ActionResult Join()
{
return View();
}

네, 잘 만들었죠. 그러면 View 페이지도 생성하도록 하겠습니다. 메쏘드 안에서 오른쪽 버튼 클릭후 Add View 하시면 Member 폴더 밑에 Join.aspx 페이지가 생성이 됩니다. 소스는 다음과 같습니다.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Join
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>회원가입</h2>
<% using (Html.BeginForm()) {%>
<p>아 이 디 : <%= Html.TextBox("Id") %></p>
<p>이 름 : <%= Html.TextBox("Name") %></p>
<p>패스워드 : <%= Html.Password("Pwd") %> </p>
<p>패스워드 확인 : <%= Html.Password("CPwd") %></p>
<p>이 메 일 : <%= Html.TextBox("Email") %>
<%= Html.CheckBox("Email_Yn", true, new { @value = "Y" } )%>수신여부</p>
<input type="submit" value="가입" />
<% } %>
</asp:Content>

여기서 확인해볼 것은, Html.BeginForm() 입니다. 브라우저를 열어서 소스보기를 해보시면

자연스럽게 <form>~</form>태그가 생성된 것을 확인하실 수 있습니다. 또, action 부분에 /Member/Join 이 매핑되는 것도 확인하실 수 있습니다.

페이지를 만들었으니 확인을 해봐야겠죠? F5를 꾸욱 눌러봅니다.(위에서 먼저 눌러서 확인했잖아~!! 소스보기는 하늘에서 뚝 떨어진 거니? 라고 물으신다면, 저는 할말이 ;;;)

^^ 바로 띄우기도 좀 거시기해서, 링크하나 걸었습니다;;

폼 내용을 입력하시고, 가입버튼을 클릭합니다.
그런데 이게 무슨 퐝당한 시츄에이션인지요. 뭔가 상태바를 보니 서버를 호출하는것은 같은데 제가 입력한 값들만 다 사라지고 아무 변화가 없습니다. 이유인 즉, 폼이 /Member/Join으로 전송되면 Join메쏘드를 호출합니다. 그런데 거기서 아무 처리를 안해줬으니 그냥 동일하게 뷰페이지만 새로 렌더링하는거죠. 그래서 제가 입력한 값들은... 과감히 버려졌습니다. 앍!
여기서 하나 알게된 것은, 아~ 그러면 값들을 처리하는 메쏘드가 하나 더 있어야겠구나 하는거죠^^;

소스를 보시면, Join 메쏘드가 두개인 것을 확인하실 수 있습니다. 하나는 /Member/Join이 호출되었을때의 메쏘드 이고, 다른 하나는 폼입력을 마친후에 submit시 호출되는 메쏘드 입니다.

Post로 받는 메쏘드를 보시면 EMAIL_YN이 하나 걸리긴 하는데요. Html.CheckBox() 헬퍼 메쏘드를 사용하면 hidden 필드값이 하나 더 생깁니다.(소스보기 참고) value 값은 false 로 되어있고요, 그래서 체크박스가 체크가 되어있으면 제가 value로 지정한 'Y'가 넘어오는데 체크해제때에는 'false'로 넘어옵니다. 그래서 저런 구문을 추가했긴했는데, 추후에 조금 더 알아보도록 하겠습니다.
_db.AddToUserSet(userInfo); 의 경우 엔티티 프레임워크에서 제공하는 프로퍼티로 저희가 생성한 User를 추가해준다는 거겠죠? 그리고 항상 디비작업을 완료하려면 SaveChanges(); 메쏘드를 호출해야합니다.

완료가 됐으니 JoinSuccess 페이지에 모델객체를 넘겨서 마무리를 짓도록 하겠습니다.
Views 폴더 밑 Member 폴더에서 Add -> View 를 하셔서 형식화된 뷰를 생성하도록 하겠습니다.

JoinSuccess.aspx 페이지의 소스는 아래와 같습니다.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcSite.Models.USER>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
JoinSuccess
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>회원가입 완료</h2>
<%= Html.Label(Model.NAME) %> 님, 회원가입이 완료되었습니다. <br />
환영합니다!
</asp:Content>

다시, 실행을 시켜서 폼 입력을 마친 후 가입버튼을 클릭하면,

네, 디비에 값이 잘 인서트 되었는지도 확인해보세요^^;
여기서 잠깐! 우리가 여기까지 너무 쉽게 온 것 같네요. 다시 실행을 시켜보도록 하죠. 그리고 폼에 값을 입력하지 않고 가입버튼을 클릭하면 Excepton 발생!!!

역시, 너무 쉽게 됐다고 생각했습니다. View Datail을 클릭하니

'Cannot Insert the value NULL into column 'ID...'
아이디부터 걸리기 시작합니다.

급 마무리요

글이 너무 길어졌습니다. 간단한 것을 이리도 길게 글을 쓰는 저를 꾸짖진 말아주세요^^
암튼, 여기서 과제가 생겼습니다. 다음 포스팅에서는 유효성 검사 부분들을 다루도록 하겠습니다