닷넷 게시판 만들기 Part 32 - 홈페이지 구축, 로그인기능

2011/05/13 - [ⓟrogramming/asp.net 게시판] - 닷넷 게시판 만들기 Part 31

1. 닷넷 개발환경 준비, 테스트
2. 닷넷 알아보기 [7/7]
3. asp.net 컨트롤 [10/10]
4. 데이터베이스(DB) [7/7]
5. 닷넷 게시판을 만들어보기 전에.. [4/4]
6. 게시판 만들기 [2/..]

지면 관계상 Part 4의 Database를 이미 숙지하고 있다고 가정합니다. 이미 다룬 내용은 생략하고 진행하니, 혹시 막히시면 4장을 꼭 다시 봐주시기 바랍니다.
글의 내용에도 자주 등장하겠지만, 이미 다룬 내용이 태반입니다. 1~5장을 어느정도 숙지하셨다면 처음 등장하는 내용은 많이 없을 것입니다.


이전시간에 aspnet DB에 3개의 테이블 - 게시판쓰기(board), 게시판댓글(board_comment), 회원(member) - 을 만들었다. 혹시 이 테이블들의 'ID사양'이나 '기본값'등을 Part 31과 다르게 했다면 앞으로 오류가 발생할 수가 있으니 다시 확인해보길 바란다.

위의 그림처럼 DB관리툴을 열어서 회원테이블인 member 의 '디자인'으로 들어가자.
만들었던 테이블 구조를 확인하거나 수정할 수 있는 항목이다.

회원테이블은 게시판과 게시판댓글과 다르게 고유번호(또는 일련번호, ID)가 없다. 회원 ID 자체가 중복되어서는 안되기 때문이다. 데이터베이스는 각각 컬럼(회원테이블은 현재 4개의 Column이 있다)의 값이 중복이 있어서는 안된다. 즉,

user_id : abcd
user_password : abcd
nickname : abcd
regdate : 어쩌고저쩌고.

라는 데이터가 들어가면 1개의 레코드(행)이 생기게 된다는 건 알고 있을 것이다.
이 상태에서 자료를 하나 더 넣을 때, 기존 있는 자료(1개가 됐든 몇백개가 됐든)의 각각의 행이 모두 일치해서는 안된다는 말이다. 하나의 컬럼이라도 틀려야 한다.

이런 데이터 유입을 방지하기 위해 컬럼 옆에 노란 열쇠를 표시하는 "기본 키 설정"을 했었는데, 어쩌다 데이터가 들어갈 때, 해당 컬럼만은 절대 중복 값을 허용하지 말라는 의미가 된다. 만약 중복해서 들어가게 되면, DBMS(DB서버)는 해당 중복되는 레코드(자료)가 어떤 녀석이 기준인지 알 수가 없게 된다. 즉 두개를 다 지우거나 두개를 다 수정할 수 밖에 없다.

이런 내용은 DB에 관련된 내용인데, DB에 관련된 전문가도 따로 있기도 하다. 프로그래밍 만큼이나 복잡한 녀석이기도 하기 때문에 관심있으신 분은 따로 공부하시기 바란다. ^^

우리나라 IT개발자 현실상, DB의 기본은 알아야 되며, 디자인요소의 기본도 알아야 한다. 슬프긴 해도 어쩔 수 없다. (그러나 프로그래머임을 절대 잊지말자.)

어디론가 샜는데... -_-;

1. 회원 아이디
2. 회원 비밀번호
3. 닉네임
4. 회원 가입일 (현재 시간 자동입력)

우리는 앞서 member 테이블을 회원가입 용도로 만들었고, 총 4개의 필드 중 3개의 필드는 사용자가 입력해야 하는 입력값이며, regdate 라는 컬럼으로 지정한 "회원 가입일"은 자동으로 레코드가 들어갈 때 넣도록 했었다. (열 속성의 '기본값 또는 바인딩'에 getdate() 값을 입력했었다)

그렇기 때문에 실제 테이블에 자료를 넣을 때는 INSERT 문에서는 총 3개의 컬럼만 지정하면 된다.

DB관리툴에서 현재의 DB가 aspnet 임을 확인하고 (화면의 상단 좌측에 현재의 DB) "새 쿼리(N)"를 이용해 쿼리문을 입력할 수 있는 명령창을 열자. (단축키 : Alt+N)

설명이 필요 없는, 4장에서 이미 다룬 내용이기도 하다.

INSERT INTO member (user_id, user_password, nickname) VALUES('test', 'test', '테스트');

실행이 잘 되었는가? SELECT 문으로 이제 확인해보도록 하자. 자동으로 네 번째 컬럼인 regdate에 쿼리가 실행될 때의 당시 시간이 잘 들어갔을 것이다.

모~두 다 4장에서 다뤘던 내용이다. 이제 앞으로 강의에서는 건너뛰겠지만 여러분들은 매 프로그램을 만들 때 버릇을 들이길바란다. Part 31 처럼 DB를 설계하고 테이블을 만든 후, 실제 자료를 임시로 상수를 넣어서 쿼리문을 꼭 넣어보자. (여러번 해보면 자동으로 쿼리문의 형식이 외워진다.) 
여러분들이 닷넷에서 프로그램으로 사용자의 입력값을 요리조리 조합하여 만들어야하는 쿼리문 상수이기 때문이다. 

#참고
물론 이렇게 쿼리문을 프로그램 언어(닷넷 등)에서 상수로 만들어서 날리지는 않는다. 파라미터형식으로 프로그래밍 형식을 만들어서 DB로 명령을 날리는 방법도 존재한다. SQL Server 에는 "스토어드 프로시저"라는 스크립트가 존재한다. 프로그래밍 개발 코드처럼 DB를 조작, 관리하는 것이다. 참으로 하면 할수록 알아야 될게 많기도 하다 :) 참고만 하자.

테이블을 다시 깔끔하게 초기화하는 명령어는 다음과 같다.

truncate table 테이블명

member 테이블을 초기화 하고 넘어가자. (DELETE 명령으로 삭제해도 별 문제는 없다)

회원 테이블 설계도 끝났고, 자료도 원하는 대로 잘 들어가는 것을 확인했으니 지루한 DB를 잠깐 벗어나서 우리의 본업으로 돌아와보자.

뭐든지 기본 바탕은 만들어야 될 것이다.

필자의 엣지있는 디자인의 결과물이다. ^_^

메뉴는 총 5개이며 그 중 '회원가입'은 회원가입 테이블을 이용할 것이고, '자유게시판/포토게시판/방명록'은 게시판 테이블을 이용해 자료를 관리할 것이다. 자유게시판과 포토게시판, 방명록은 처리하는 방법은 동일하지만 겉으로 보이는 디자인이 변경되어야 할 것이다.

예전에 처음 우리가 닷넷을 시작하기 위해 IIS에서 홈디렉터리 설정했던 것을 기억하는가?
새롭게 시작하는 마음으로 하나의 홈디렉터리를 설정하거나 현재 만들어져 있는 것들을 모두 삭제 또는 이동시키고 비우자. 그리고 위의 그림처럼 메뉴가 5개 있는 홈페이지를 구성해본다.

home_start.zip

이미지는 딱 1개가 있고, 시작페이지(메인페이지)인 index.aspx 파일이 들어있는 파일이다.
다시 말씀드리지만, 우리는 개발자이기 때문에 디자인은 크게 신경쓰지 마시기 바라며, 욕심있으신 분들은 직접 디자인에 뛰어들어 보는 것도 괜찮을 것이다.

압축된 파일을 풀어서 여러분들의 IIS에 index.aspx 를 실행하여 직접 돌려보자.
당연히 디자인이 뿐이기 때문에 태그밖에 없을 것이다.


이것을 기반으로 하여 5장 Part 28 에서 다룬 "공통 페이지"를 분리해보자.

내용 부분을 제외하여 top, bottom 이렇게 위/아래로 두개를 사용자 컨트롤로 분리할 것이다.
윗부분은 top.ascx 파일로, 아랫부분은 bottom.ascx 로 하기로 하자.

Step 1.
index.aspx 소스파일을 열고, 중간 내용의 윗 부분을 모두 잘라서 top.ascx로 저장한다.
(60번째 줄 윗 부분)

Step 2.
아랫부분은 78번째 줄 부터 끝까지 잘라서 bottom.ascx로 저장하자.

잘라놓고 보면 index.aspx 파일의 내용은 다음처럼 남아 있을 것이다.

<!--------------------------- 여기서부터 내용 ------>
<div id="content">

닷넷 게시판 만들기 예제 홈페이지!
<br>
재밌게 만들어봅시다.
<br>
<br>
1. asp.net 은 HTML과 관계가 있다? 없다?
<br>
2. asp.net 은 DB와 관계가 있다? 없다?
<br>
3. 오류메시지를 보면 반가워합시다!

</div>
<!-- 내용끝 ---------------------------------------->

이렇게 자른 이유는 홈페이지 전체부분에 나올 "회원 로그인/로그아웃"을 위해서이다. 게다가 홈페이지 전반적으로 같은 내용이기 때문에 차후 메뉴를 추가/수정/삭제할 때 모든 페이지를 수정할 필요가 없이 top.ascx 파일만 수정하면 되기 때문이다.

이제 top.ascx, bottom.ascx 사용자 컨트롤을 잘라내었으니, index.aspx 에서 이를 사용해보도록 하자. (이미 다 다뤘던 내용이다)

포함할 사용자 컨트롤을 선언하는 방법은 페이지의 첫 부분에 <%@ Register .. %> 라는 구문으로 해결된다. index.aspx 파일의 제일 윗 부분에 다음처럼 입력하자.

<%@ Register TagPrefix="INCLUDE" TagName="TOP" src="top.ascx" %>
<%@ Register TagPrefix="INCLUDE" TagName="BOTTOM" src="bottom.ascx" %>

이제 top.ascx, bottom.ascx 파일을 각각 놓고 싶은 곳에 배치하면 끝이다. 우리가 잘라 버린 그 곳에 각각의 .ascx 를 넣도록 하자.

 

수정된 index.aspx 메인 페이지 전체 소스

<%@ Register TagPrefix="INCLUDE" TagName="TOP" src="top.ascx" %>
<%@ Register TagPrefix="INCLUDE" TagName="BOTTOM" src="bottom.ascx" %>

<INCLUDE:TOP
      runat="server" />

<!--------------------------- 여기서부터 내용 ------>
<div id="content">

닷넷 게시판 만들기 예제 홈페이지!
<br>
재밌게 만들어봅시다.
<br>
<br>
1. asp.net 은 HTML과 관계가 있다? 없다?
<br>
2. asp.net 은 DB와 관계가 있다? 없다?
<br>
3. 오류메시지를 보면 반가워합시다!

</div>
<!-- 내용끝 ---------------------------------------->

<INCLUDE:BOTTOM
      runat="server" />

index.aspx 페이지를 열어보면 잘 나오는 것을 볼 수 있다.


이제 우리가 해야 할 첫 시작은 "회원 가입"이다.

회원 관리라고 하면 회원을 가입시키고 로그인할 수 있게 하고, 로그아웃 할 수 있게도 해야되며 정보수정 또는 회원 탈퇴도 가능해야겠다.

1. 회원가입 기능
2. 회원로그인 기능
3. 회원정보 수정 및 탈퇴 기능

다른 사이트에서 회원가입 할 때 개인정보보호 취급이니 어쩌니 읽고 체크해야 가입이 가능한 것을 많이 봤다. 이것은 정보통신부인가 어딘가에서 인터넷에서 회원을 가입 받기 위해 인터넷 사용자에게 고지해야 되는 것들이기 때문이다. 우리는 이런 것들을 모~두 무시하도록 하자. 어차피 그나물에 그밥이기 때문이다. 여러번 말씀드리지만 1~4장까지 숙지한 여러분들이 회원 가입을 따로 실습할 필요가 있겠냐 만은.. (필자의 오만일 뿐인가? 글쎄..)

top.ascx 페이지를 열어보면 필자가 주석처리로 회원 로그인/로그아웃 두 군데를 만들어놓았을 것이다. "로그인 폼 시작", "로그인 된 화면" 이렇게 2가지로 <div> 태그로 그것을 구분해놓았다. 회원 가입처리를 끝난 후에 여기를 채워서 로그인/로그아웃을 구현해볼 것이다.

index.aspx 파일을 그대로 "다른 이름으로 저장"하도록 하자. 회원 가입 페이지는 "member_join.aspx" 파일명으로 하기로 한다. 그리고 기존의 내용을 모두 지우고 회원 가입페이지에 맞는 디자인을 구현하자.

"어서오세요~ 회원가입이 어쩌고.. 저쩌고.." 처럼 여러분 마음대로 꾸며보도록 하자.
단, 회원가입 폼은 모두 웹폼(WebForm)으로 구성하도록 한다.
잊지 않으셨겠지만 <form runat="server">.....</form> 내에 들어가야 될 것이다.

프로그래밍 코드가 들어갈 예정이기 때문에 컨트롤의 id 등의 가이드라인을 알려드리겠다.
디자인이 조금 우스워지더라도 그렇게 상관하지말자. 명시된 것이 없다면 컨트롤의 길이나 색깔 등 모두 본인의 의지대로 해도 상관없을 것이다.

당연히 웹폼은 여러분들이 직접 넣을 수 있어야 한다.

member_join.aspx 회원 가입 폼 작성 예시


(top.ascx 부분)
.
.

<form runat="server">

1. 회원아이디 TextBox 컨트롤 (id=txtID) 배치. 그 오른쪽에 ID중복체크 Button 컨트롤 (id=btnCheck) 하나 배치. 
2. 다음줄에 비밀번호 TextBox 컨트롤 (id=txtPass) 배치. 비밀번호이므로 textmode=password 속성을 줄것!
3. 다음줄에 닉네임 TextBox 컨트롤 (id=txtNick) 배치.
4. 다음줄에 회원가입완료버튼 Button 컨트롤 (id=btnJoin) 배치.

</form>
.
.
(bottom.ascx 부분)


# btnCheck 의 Click 이벤트를 btnCheck_Click 메서드 이름으로, btnJoin 의 Click 이벤트를 btnJoin_Click 메서드 이름으로 하도록 하자.

이렇게 컨트롤들을 배치한다. 충분히 이해하시리라 믿는다. 총 2개의 버튼(아이디중복체크, 회원가입처리)에 Click 이벤트가 각각 들어가는데 (버튼 클릭시 처리를 해야되기 때문이다) 이벤트를 처리할 메서드를 정의해 놓지 않으면 다음처럼 오류가 발생할 것이다.

우리는 프로그래밍 코드는 5장에서 했었던  aspx.cs 파일로 하거나 /app_code 에 cs 파일을 따로 만들어서 하지 않을 것이다. 같은 aspx 파일에 배치를 해놓고 라이브러리를 /bin 에 넣어서 가져다 쓸 예정이다. 그런 방법이 있고, 그렇게 하면 좀 더 괜찮아 보이겠지만 복잡하면 어려워지기 때문이다.

그러므로 이벤트 처리는 디자인페이지(aspx)에 함께 놓을 것이다. 즉, 페이지가 로드될 때 실행되는 Page_Load() 이벤트 등도 모두 포함된다.

 

member_join.aspx 프로그래밍 코드 작성 (맨 윗부분)

<%@ Register TagPrefix="INCLUDE" TagName="TOP" src="top.ascx" %>
<%@ Register TagPrefix="INCLUDE" TagName="BOTTOM" src="bottom.ascx" %>

<script language="C#" runat="server">

 void btnCheck_Click(object sender, EventArgs e)
 {
 }

 void btnJoin_Click(object sender, EventArgs e)
 {
 }

</script>



(top.ascx 부분)
.
.

<form runat="server">

(..각종 웹폼들..)

</form>
.
.
(bottom.ascx 부분)

이렇게 비었지만 void 이므로 리턴이 없는 이벤트를 처리하는 메서드를 2개 배치하면 오류가 발생하지 않을 것이다. 여기에 각각의 버튼을 클릭할 때 처리될 프로그램 코드를 작성하게 된다.

다음 첨부파일이 필자가 "나름대로" 작성한 member_join.aspx 페이지다.

member_join.aspx

가이드라인과 동일하니 여러분들도 이런식으로 웹폼의 ID와 이벤트 이름정도만 맞추어 자유롭게 작성하도록 하자. 이런 것들은 결국 껍데기일 뿐이다. TextBox의 ID가 중요하지 크기나 색은 별 중요하지 않다. 작고 이쁜 버튼도 결국 기능상 회색의 두툼한 버튼과 같은 기능의 Button 일 뿐이다.

그리고 다음은 지금까지 진행한 전체 파일이다. 함께 잘 따라하셨다면 아~무 필요없는 전체소스이기도 하다.

home_part2.zip

이렇게 오늘은 전체적으로 홈페이지를 잡아보고, 회원가입 페이지를 위한 디자인까지 작성해보았다. 처음에도 말씀드렸지만 진행 방법이나 과정은 누구나 생각대로 다를 수 있다. 필자는 게시판을 어려분들에게 "이렇게 만듭니다"라고 말하고 싶지 않다. "이런 방법으로 한번 같이 만들어 봅시다" 일 뿐이다.

다음시간에..