[회원가입 사이트 만들기] 2. html, asp, db 연동 (아이디 중복체크)

2024. 3. 15. 16:05복습/인터넷 보안 실습

1. 회원가입 페이지를 html 코드를 이용해 작성해준뒤, 가상 디렉터리에 저장해준다. 

만약 가상 디렉터리를 만들지 않았다면, 아래 링크를 참고하여 폴더를 만들고 진행하면 된다.

 

 

가상 디렉터리 추가 방법 : https://studywithsheep.tistory.com/11

 

asp 개발 환경 구축, 가상 디렉터리 추가를 이용한 웹 사이트 구축

IIS 웹 서버의 운영 및 설정 - 가상 디렉터리 추가 http://localhost/iisstart.htm ←→ C:\inetpub\wwwroot 위에서 만들었던 iis 사이트는 실제로 컴퓨터 C드라이브의 inetput 폴더 안의 wwwroot 안에 저장되어있다.

studywithsheep.tistory.com

 

2. 파일이 아닌 local로 열어준다.

(주소창에 http://localhost/MySite/member.html 입력, 혹은 iis를 이용해 열어주기)

 

 

3. 창에서 버튼이 잘 작동하는지 확인해준다.

(ex. 아이디를 입력하지 않았을 경우, 패스워드가 일치하지 않는 경우, 이메일 형식이 잘못된 경우 등)

 

 

4.  이제 html에서 데이터를 받아오는 asp 코드를 작성해줄 것이다.

 

이 코드는 html에서 작성한 데이터를 받아오고,

DB와 비교하여 중복되지 않는다면 해당 정보를 DB에 저장하고,

중복된다면 오류 메시지를 띄워준다. ("이미 사용중인 ID 입니다.")

 

데이터를 받아오는 방식은 크게 두 가지(post 방식, get 방식) 가 있으며,

코드는 각각 다음과 같다.

Request 객체를 이용하여 데이터를 받아올 때

post 방식 : request.form("변수")
get 방식 : request.querystring("변수")

 

post 방식을 이용하여 이름과 id를 받아오기 위해선 아래와 같이 작성하면 된다. 

(변수를 입력해야하는 자리에는 html 코드에서 사용했던 변수를 작성해주어야 한다.)

' 데이터 받아오기 
name = request.form("name") 
userid = request.form("userid")

 

 

이제 html에서 작성된 데이터는 asp로 넘어올 것이다. 

하지만 아이디 중복체크와 회원가입을 해주기 위해서는 DB와 연동을 해줘야 한다.

 

그러기 위해 OLEDB 연동 방식을 사용해준다.

 

코드는 아래와 같다.

<%

Set dbConn = Server.CreateObject(“ADODB.Connection”)

dbconn.open "Provider=SQLOLEDB;User ID=sa;Password=지정한 패스워드;Initial Catalog=DB명;Data Source=(local);"

—중략—

dbConn.Close

Set dbConn = Nothing '소멸자, 자료 반환

%>

 

띄어쓰기와 철자가 조금이라도 틀리면 오류가 뜰 수도 있으니 주의한다.

 

Initial Catalog는 내가 접속하려는 DB이름이고, Data Source는 접속하려는 ip 주소라는 것 정도는 알아두자.

 

 

DB와 연동했으면 ID 중복체크, 회원 정보 등록 등이 가능한데, 

 

이를 구현할 때에는 select 문과 insert 문을 이용해준다.

 

 

ID 중복 체크

 

중복 체크를 먼저 알아보자. 

 

중복 체크를 위해 먼저 아래와 같은 코드를 작성해주어야 한다. (밑에 더 있음)

sql = "select * from member where userid='"&userid &"'"
  set rs = dbconn.execute(sql)

 

코드를 한 줄씩 읽어보면

 

sql= "select * from member where userid='"&userid &"'"

 

구문으로 SQL 쿼리를 sql이라는 변수에 저장하고,

 

set rs = dbconn.execute(sql)

 

dbconn 으로 DB에 연동시켜준 뒤 저장한 쿼리를  execute을 이용해 실행시키고,

 

그 결과를 rs라는 변수를 세팅하여 할당해준다는 뜻이다.

 

 

우리야 실제로 ssms 에 들어가서

 

select * from member where userid= 입력받은 ID 

 

를 실행해주면 바로 결과를 얻을 수 있지만, 

 

사람들이 새로 회원가입하는 족족 그럴 수도 없고

 

수가 많아지면 오히려 사람이 하는 게 비효율적일 수도 있다.

 

따라서 처음에 번거롭더라도 컴퓨터와 DB가 처리할 수 있도록 해줘야 한다. 

 

 

rs는 우리가 실제로 sql 문을 실행했을 때 나타나는 테이블이라 생각하면 편한데, 

 

위의 두 줄만 작성하면 중복체크는 되지 않는다.

 

따라서 if문을 이용한 코드를 추가로 적어준다.

 

  '검색 결과가 없다면 
  if rs.BOF and rs.EOF then 
  
     sql = "insert into member values ('"
	 sql = sql &name&"','"
	 sql = sql &userid&"','"
	 sql = sql &pwd&"','"
	 sql = sql &email&"','"
	 sql = sql &phone&"',default,'"
	 sql = sql &addr&"')"
	 
	 dbconn.execute(sql)
     response.write "<HTML><HEAD></HEAD><CENTER><H1 style='color:red;'>회원 가입이 완료되었습니다.</H1><BR><BR><A href='login.asp'>로그인</A>후 사이트를 이용하세요</CENTER></HTML>"	 
	 
  else%>
    <script>
	   alert("이미 사용중인 ID입니다");
	   history.back();
	</script>  
 <%end if%>

 

 여기서 잘 봐두어야 할 부분은 if rs.BOF and rs.EOF then 이다.

 

BOF(Begin Of File)란, 맨 처음 데이터의 윗부분

 

EOF(End Of File)란, 맨 마지막 데이터의 아랫부분이라 생각하면 된다.

 

 

대충 그려보면 다음과 같다.

 

그럼 BOF와 EOF가 같다는 건 아래 사진처럼 데이터가 하나도 없는 경우를 의미할 것이다.

 

(데이터가 하나라도 존재한다면 BOF는 EOF와 다를 것이다.)

 

 

where userid='"&userid &"' 에서 회원 가입 사이트에서 입력한 아이디의 값을

 

데이터베이스에 저장되어있는 아이디와 같은 경우를 출력해달라고 했으므로,

 

데이터가 없다면 아이디는 중복되지 않으므로 BOF = EOF가 성립하고

 

데이터가 있다면 아이디는 중복되므로  BOF != EOF 가 된다.  

 

 

위에 첨부한 코드를 이용해서 member.html 에서 작성한 회원 정보를

 

DB로 올려주는 회원 등록 코드 (mem_regist.asp)를 작성해준뒤, 

 

http://localhost/MySite/member.html 에서 회원가입을 해보면, 

 

 

http://localhost/MySite/mem_regist.asp 페이지로 넘어가며

 

회원가입이 완료되었다는 문구가 뜨는 것을 확인할 수 있다.

 

 

그리고 입력한 정보를 ssms에서 조회해보면, 

 

DB로 정상적으로 넘어온 것을 확인할 수 있다.

 

 

 

하지만, 가입 완료 페이지에서 로그인을 클릭하면

 

 

이런 식으로 오류페이지가 뜨는데, 

 

주소창을 잘 살펴보면 이유를 알 수 있다.

 

아직 작성하지 않은 login.asp 로 이동하도록 코드를 작성했기 때문에

 

갈 곳을 잃은 것이다.

 

 

다음 글에서는 이를 해결하기 위해 login.asp 작성을 진행할 것이다 :)