프론트 엔드. 나한테는 너무 힘들다.
코드 작성하고 결과물이 화면에 보이는 건 재밌다.
근데 이제 꾸미기.. 그것도 예쁘게 꾸미기ㅋㅋㅋㅋㅋ큐ㅠㅠㅠㅠㅠ
그거 정말 나한테 어려운 일이다...😢😣😢😣🥺😢😣
그래서 아직은 수업시간에 배운 걸로 활용하는 수밖에..ㅎ
연습으로 하려는 거는 기본인
회원가입, 회원수정, 로그인, 로그아웃이다.
혼자 짚고 넘어가본적이 없어서
1. 회원가입 작성폼 만들어주기 - addMember.jsp
daum도로명주소 이용해서 주소양식 폼 추가했다.
invaildation은 이후에 추가해줘야겠다.
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html><html><head><meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<jsp:include page="menu.jsp"/>
<div class="jumbotron">
<div class="container">
<h1 class="display-3">회원가입</h1>
</div>
</div>
<div class="container">
<form action="processAddMember.jsp" method="post">
<div class="form-group row">
<label class="col-sm-2">아이디</label>
<div class="col-sm-3">
<input name="id" class="form-group" placeholder="ID" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">비밀번호</label>
<div class="col-sm-3">
<input type="password" name="password" class="form-group" placeholder="PASSWORD" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">이름</label>
<div class="col-sm-3">
<input name="name" class="form-group" placeholder="NAME" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">성별</label>
<div class="form-check form-check-inline">
<input type="radio" value="남자" name="gender" class="form-check-input" checked>
<label class="from-check-label">남자</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" value="여자" name="gender" class="form-check-input">
<label class="from-check-label">여자</label>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">생일</label>
<div class="col-sm-3">
<input name="birthhyy" maxlength="4" size="6" class="form-group" placeholder="년(4자)" required>
<input name="birthhmm" maxlength="2" size="4" class="form-group" placeholder="월" required>
<input name="birthhdd" maxlength="2" size="4" class="form-group" placeholder="일" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">이메일</label>
<div class="col-sm-10">
<input name="mail1" maxlength="50" required>@
<select name="mail2">
<option value="naver.com">naver.com</option>
<option value="daum.net">daum.net</option>
<option value="gmail.com">gmail.com</option>
<option value="nate.com">nate.com</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">전화번호</label>
<div class="col-sm-5">
<select name="phone1" required>
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="019">019</option>
</select>
-<input name="phone2" maxlength="4" size="4"required>
-<input name="phone3" maxlength="4" size="4"required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">우편번호</label>
<div class="col-sm-3">
<input name="zipcode" class="from-control" placeholder="우편번호">
<input type="button" onclick="Postcode()" value="우편번호 찾기"><br>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">도로명주소</label>
<div class="col-sm-3">
<input name="roadAddress" class="from-control" placeholder="도로명주소">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">지번주소</label>
<div class="col-sm-3">
<input name="jibunAddress" class="from-control" placeholder="지번주소">
</div>
</div>
<span id="guide" style="color:#999;display:none"></span>
<div class="form-group row">
<label class="col-sm-2">상세주소</label>
<div class="col-sm-3">
<input name="detailAddress" class="from-control" placeholder="상세주소">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">참고항목</label>
<div class="col-sm-3">
<input name="extraAddress" class="from-control" placeholder="참고항목">
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-primary" value="등록">
<input type="reset" class="btn btn-warning" value="취소">
</div>
</div>
</form>
</div>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
//본 예제에서는 도로명 주소 표기 방식에 대한 법령에 따라, 내려오는 데이터를 조합하여 올바른 주소를 구성하는 방법을 설명합니다.
function Postcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 도로명 주소의 노출 규칙에 따라 주소를 표시한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var roadAddr = data.roadAddress; // 도로명 주소 변수
var extraRoadAddr = ''; // 참고 항목 변수
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
extraRoadAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if(data.buildingName !== '' && data.apartment === 'Y'){
extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if(extraRoadAddr !== ''){
extraRoadAddr = ' (' + extraRoadAddr + ')';
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('zipcode').value = data.zonecode;
document.getElementById("roadAddress").value = roadAddr;
document.getElementById("jibunAddress").value = data.jibunAddress;
// 참고항목 문자열이 있을 경우 해당 필드에 넣는다.
if(roadAddr !== ''){
document.getElementById("extraAddress").value = extraRoadAddr;
} else {
document.getElementById("extraAddress").value = '';
}
var guideTextBox = document.getElementById("guide");
// 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.
if(data.autoRoadAddress) {
var expRoadAddr = data.autoRoadAddress + extraRoadAddr;
guideTextBox.innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';
guideTextBox.style.display = 'block';
} else if(data.autoJibunAddress) {
var expJibunAddr = data.autoJibunAddress;
guideTextBox.innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';
guideTextBox.style.display = 'block';
} else {
guideTextBox.innerHTML = '';
guideTextBox.style.display = 'none';
}
}
}).open();
}
</script>
</body>
</html>
2. MYSQL에서 회원DB 만들어주기
create table member(
id varchar(10) primary key,
password varchar(10) not null,
name varchar(10) not null,
gender varchar(4),
birth varchar(10),
mail varchar(30),
phone varchar(20),
zipcode varchar(5), --우편번호
roadAddress varchar(100), --도로명주소
jibunAddress varchar(100), --지번주소
detailAddress varchar(100), --상세주소
extraAddress varchar(100), --참고항목
register_day varchar(50) --가입일자
);
Parameter로 값 전달받는 거 확인
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
String id = request.getParameter("id");
String password = request.getParameter("password");
String name = request.getParameter("name");
String gender = request.getParameter("gender");
String year = request.getParameter("birthhyy");
String month = request.getParameter("birthhmm");
String day = request.getParameter("birthhdd");
String birth = year+"/"+month+"/"+day;
String mail1 = request.getParameter("mail1");
String mail2 = request.getParameter("mail2");
String mail = mail1+"@"+mail2;
String phone1 = request.getParameter("phone1");
String phone2 = request.getParameter("phone2");
String phone3 = request.getParameter("phone3");
String phone = phone1+"-"+phone2+"-"+phone3;
String zipcode = request.getParameter("zipcode");
String roadAddress = request.getParameter("roadAddress");
String jibunAddress = request.getParameter("jibunAddress");
String detailAddress = request.getParameter("detailAddress");
String extraAddress = request.getParameter("extraAddress");
/* 회원 가입일자 타임스템프 정보 생성 */
Date currentDatetime = new Date(System.currentTimeMillis());
java.sql.Date sqlDate = new java.sql.Date(currentDatetime.getTime());
java.sql.Timestamp timestamp = new java.sql.Timestamp(currentDatetime.getTime());
%>
<%-- 값을 잘 전달받았는지 확인해보기 --%>
<%=id%><br>
<%=password%><br>
<%=name%><br>
<%=gender%><br>
<%=birth%><br>
<%=mail%><br>
<%=phone%><br>
<%=zipcode%><br>
<%=roadAddress%><br>
<%=jibunAddress%><br>
<%=detailAddress%><br>
<%=extraAddress%><br>
3. 회원가입 기능 구현해주기 - processAddMember.jsp
1. dao랑 dto만들어서 DB연동하는 방법
2. jstl 사용해서 DB연동하는 방법
2번을 사용해서 회원가입 기능을 구현했다.
<%@page import="java.util.Date"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>
<%
request.setCharacterEncoding("utf-8");
String id = request.getParameter("id");
String password = request.getParameter("password");
String name = request.getParameter("name");
String gender = request.getParameter("gender");
String year = request.getParameter("birthhyy");
String month = request.getParameter("birthhmm");
String day = request.getParameter("birthhdd");
String birth = year+"/"+month+"/"+day;
String mail1 = request.getParameter("mail1");
String mail2 = request.getParameter("mail2");
String mail = mail1+"@"+mail2;
String phone1 = request.getParameter("phone1");
String phone2 = request.getParameter("phone2");
String phone3 = request.getParameter("phone3");
String phone = phone1+"-"+phone2+"-"+phone3;
String zipcode = request.getParameter("zipcode");
String roadAddress = request.getParameter("roadAddress");
String jibunAddress = request.getParameter("jibunAddress");
String detailAddress = request.getParameter("detailAddress");
String extraAddress = request.getParameter("extraAddress");
/* 회원 가입일자 타임스템프 정보 생성 */
/* JDBC에서 날짜시간타입은 Timestamp이므로 Date타입 변환 */
Date currentDatetime = new Date(System.currentTimeMillis());
java.sql.Date sqlDate = new java.sql.Date(currentDatetime.getTime());//long 타입의 값의 매개변수 생성
java.sql.Timestamp timestamp = new java.sql.Timestamp(currentDatetime.getTime());
%>
<%-- 데이터 셋 설정(DB연결) --%>
<sql:setDataSource var="dataSource"
url="jdbc:mysql://localhost:3306/board"
driver="com.mysql.jdbc.Driver" user="root" password="1234"/>
<%-- 입력처리 --%>
<sql:update dataSource="${dataSource}" var="resultSet">
insert into member values(?,?,?,?,?,?,?,?,?,?,?,?,?)
<sql:param value="<%=id %>"/>
<sql:param value="<%=password %>"/>
<sql:param value="<%=name %>"/>
<sql:param value="<%=gender %>"/>
<sql:param value="<%=birth %>"/>
<sql:param value="<%=mail %>"/>
<sql:param value="<%=phone %>"/>
<sql:param value="<%=zipcode %>"/>
<sql:param value="<%=roadAddress %>"/>
<sql:param value="<%=jibunAddress %>"/>
<sql:param value="<%=detailAddress %>"/>
<sql:param value="<%=extraAddress %>"/>
<sql:param value="<%=timestamp %>"/>
</sql:update>
<%-- 입력 후 페이지 이동 처리, response.sendRedirect --%>
<c:if test="${resultSet>=1 }">
<c:redirect url="resultMember.jsp?msg=1"/>
</c:if>
결과보기
초라한 회원가입 폼에서 길동씨 입력해서 등록해주면
정보가 잘 들어간 것을 확인할 수 있다.
jstl을 사용하지 않으면 Connection, PreparedStatement, ResultSet 객체들을 하나하나
다 써줘야하는데 그것이 아주 귀찮다..
근데 또 연결 메소드 하나 만들어서 불러서 써오면 되긴 해서 익숙해진 것 같다.
jstl은 아직 모든 페이지마다 써줘야하는 방식밖에 몰라서 더 편한게 있다면 계속 알아가야할 것 같다.
일단은 기초 알아두기✌︎
회원가입 기능은 이렇게 끝!
css 다듬고 회원가입폼 입력할 때 무효화하는 함수 만드는 거는 로그인 기능까지 한 다음에 차근차근 해야겠다.
벨로그? 난 켈로그