자바/Jsp
[Jsp] 개인 홈페이지 만들기(1)-기본 화면,회원가입페이지
taehee94
2022. 3. 9. 18:09
코딩공부가 목적이여서, 간단한 틀만 만들었습니다. 디자인이 목적이 아니니 코딩한것만 참고해주세요.
Jsp와 Mysql 연동해서 회원가입, 로그인, 정보수정을 해보겠습니다.
1.기본화면입니다.
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<head>
</head>
<body>
<button onClick="location='Login/Login.jsp'">로그인</button>
<button onClick="location='Join/JOIN.jsp'">회원가입</button>
</body>
간단하게 로그인버튼과 회원가입 버튼만 만들었습니다.
로그인버튼을 클릭하면 Login.jsp로 이동하고, 회원가입 버튼을 클릭하면 JOIN.jsp로 이동합니다.
2.회원가입 페이지입니다.
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<% request.setCharacterEncoding("UTF-8");%> <!-- 한글깨짐 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>회원가입</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<h2>회원가입</h2>
<script src="emailcheck.js"></script>
<form action="users_ok.jsp" method="post">
<fieldset>
<legend> | 회원가입 | </legend>
<label for="ID">ID : </label>
<input type="text" name="ID" value=""placeholder="Dave">
<input type="button" value ="중복확인" onclick="openIdChk()">
<input type ="hidden" name ="idDuplication" value="idUncheck"><br/>
<label for="PWD">비밀번호 : </label>
<input type="password" name="PWD" value="" placeholder="1234"><br/>
<label for="NAME">성명 : </label>
<input type="text" name="NAME" value="" placeholder="이정재"> <br/>
<label for="SSNUM">주민번호 : </label>
<input type="text" name="SSNUM" value="" placeholder="111111" size="6" maxlength="6">-
<input type="password" name="SSNUM_pwd" value="" placeholder="1111111" size ="7" maxlength="7"><br/>
<label for="Email">이메일: </label>
<input type="text" id="email_id" name="email_id" class="form_w200" value="" title="이메일 아이디" placeholder="이메일" maxlength="18" > @
<input type="text" id="email_domain" name="email_domain" class="form_w200" value="" title="이메일 도메인" placeholder="이메일 도메인" maxlength="18">
<select class="select" title="이메일 도메인 주소 선택" onclick="setEmailDomain(this.value);return false;">
<option value="">-선택-</option>
<option value="naver.com">naver.com</option>
<option value="gmail.com">gmail.com</option>
<option value="hanmail.net">hanmail.net</option>
<option value="hotmail.com">hotmail.com</option>
<option value="korea.com">korea.com</option>
<option value="nate.com">nate.com</option>
<option value="yahoo.com">yahoo.com</option>
</select><br/>
<label for="CNUM">전화번호 : </label>
<input type="text" name="CNUMF" value="" size="3" maxlength="3" placeholder="000">-
<input type="text" name="CNUMM" value="" size ="4" maxlength="4" placeholder="0000">-
<input type="text" name="CNUML" value="" size="4" maxlength="4" placeholder="0000"><br/>
<label for="PNUM">핸드폰: </label>
<select name="PNUMF">
<option value="">-선택-</option>
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="019">019</option></select>-
<input type="text" name="PNUMM" value="" size ="4" maxlength="4" placeholder="0000">-
<input type="text" name="PNUML" value="" size="4" maxlength="4" placeholder="0000"><br/>
<label for="GENDER">성별 : </label>
<input type="radio" name="GENDER" value="male" checked/><label for="GENDERMAIL">남자</label>
<input type="radio" name="GENDER" value="female"/><label for="GENDERFEMAIL">여자</label>
<br/>
<label for="HABBY">취미 </label>
<input type="checkbox" name="HOBBY" value="soccer" checked/ >축구
<input type="checkbox" name="HOBBY" value="game" checked/ >게임
<input type="checkbox" name="HOBBY" value="hiking" / >등산
<input type="checkbox" name="HOBBY" value="fish" / >낚시
<input type="checkbox" name="HOBBY" value="shopping" / >쇼핑<br/>
<label for="INTRODUCE">자기소개 :</label>
<input type="text" name="INTRODUCE" value="" placeholder="하나둘셋">
<br/>
<input type="submit" value="회원가입">
</fieldset>
</form>
</body>
</html>
회원가입페이지는,html의 form,action을 통해 users_ok.jsp로 정보를 보내주는 기능을 합니다.
JOIN.jsp 코드에 포함된 emailcheck.js입니다.
function checkemail()
{
var email_rule = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
var email_id =$("#email_id").val();
var email_domain =$("#email_domain").val();
var mail ="";
if(!email_id){
alert("이메일을 입력해주세요");
$("#email_id").focus();
return false;
}
if(!email_domain){
alert("도메인을 입력해주세요");
$("#email_domain").focus();
return false;
}
mail = email_id+"@"+email_domain;
$("#mail").val(mail);
if(!email_rule.test(mail)){
alert("이메일을 형식에 맞게 입력해주세요.");
return false;
}
}
function setEmailDomain(domain){
$("#email_domain").val(domain);
}
//$('#~~~'):태그값 설정checkemail 함수를 통해 이메일이 제대로 갖춰진 형식인지 알 수 있네요.
JOIN.jsp에서 action을 통해 보내준 정보를 받는 users_ok.jsp입니다.
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<% request.setCharacterEncoding("UTF-8");%> <!-- 인코딩 -->
<%@ page import="java.sql.*"%>
<html>
<head>
<title>회원가입</title>
</head>
<body>
<%
String DB_URL = "jdbc:mysql://localhost:3306/ezen";
// DB URL Format = "jdbc:mysql://'DB IP':'Connector Port'/'DB_Name'";
String DB_USER = "root";
String DB_PASSWORD= "oracle";
// DB ID/PASSWORD
Connection conn;
Statement stmt;
ResultSet rs = null;
String ID =request.getParameter("ID");
String PWD =request.getParameter("PWD");
String NAME=request.getParameter("NAME");
String SSNUM = request.getParameter("SSNUM");
String SSNUM_PWD = request.getParameter("SSNUM_pwd");
String EMAIL_ID=request.getParameter("email_id");
String EMAIL_DOMAIN=request.getParameter("email_domain");
String CNUMF=request.getParameter("CNUMF");
String CNUMM=request.getParameter("CNUMM");
String CNUML=request.getParameter("CNUML");
String PNUMF=request.getParameter("PNUMF");
String PNUMM=request.getParameter("PNUMM");
String PNUML=request.getParameter("PNUML");
String GENDER=request.getParameter("GENDER");
String [] HABBY=request.getParameterValues("HOBBY");
String H ="";
String INTRODUCE=request.getParameter("INTRODUCE");
/* out.println(ID);
out.println(PWD);
out.println(NAME);
out.println(SSNUM);
out.println(SSNUM_PWD);
out.println(EMAIL_ID);
out.println(EMAIL_DOMAIN);
out.println(CNUMF);
out.println(CNUMM);
out.println(CNUML);
out.println(PNUMF);
out.println(PNUMM);
out.println(PNUML);
out.println(GENDER); */
for (int i =0; i<HABBY.length;i++){
H +=HABBY[i]+" ";
}
String PN=PNUMF+"-"+PNUMM+"-"+PNUML;
/*out.println(H);
out.println(INTRODUCE);*/
try {
Class.forName("com.mysql.jdbc.Driver");
// Load JDBC Class
conn = DriverManager.getConnection(DB_URL, DB_USER, DB_PASSWORD);
// Make Connection
String sql = "INSERT INTO users " +
"SET ID = " + "'"+ID +"'"+ "," +
"PWD = '" + PWD + "', " +
"NAME = " +"'"+ NAME +"'"+ ", " +
"SSNUM = " +"'"+ String.format("%s-%s",SSNUM,SSNUM_PWD)+"'"+ ", " +
"EMAIL = " + "'"+String.format("%s@%s",EMAIL_ID,EMAIL_DOMAIN)+"'"+ ", " +
"CNUM = " + "'"+String.format("%s-%s-%s",CNUMF,CNUMM,CNUML)+"'" +", " +
"PNUM = " + "'"+PN+"'" +", " +
"GENDER = " +"'"+ GENDER+"'"+ ", " +
"HABBY = " +"'"+ H +"'"+ ", " +
"INTRODUCE = " + "'"+INTRODUCE +"'"+ ";";
//out.println(sql);
stmt = conn.createStatement();
stmt.executeUpdate(sql);
stmt.close();
conn.close();
}
catch(Exception e){
out.print("Exception Error...");
out.print(e.toString());
}
finally {
}
%>
</body>
</html>DB연동을 위해 Connection과 Statement Resultset 함수를 사용했습니다. DB연동이 제대로 이루어졌는지 확인하기위해
out.println()을 이용해 브라우저에 정보를 띄웠는지 한번씩 확인해보고, 연동이 제대로 되어 주석처리 해줍니다.
sql 을 통해 mysql 테이블에다가 insert해줍니다.
기존에 있던 테이블입니다. 2개의 데이터가 존재하는것을 알 수 있습니다.
회원가입을위해 정보를 입력해줍니다.
데이터가 3개로 늘어난 것을 알 수 있습니다.
다음 시간에는 로그인페이지로 이어지겠습니다.