728x90
수업내용
1교시 (09:30-10:20)
- 어제 배운 것 정리
- regex_2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<style type="text/css">
.mem{ text-align: center;}
</style>
<script type="text/javascript">
alert(">>>");
function conformFun(){
alert(" conformFun 함수 진입");
// 이름
if (document.member.mname.value=='') {
alert("이름을 입력하세요");
document.getElementById("mname").focus();
return false;
} else {
var exp=/^[a-zA-z]+$/;
if (!exp.test(document.member.mname.value)) {
alert("이름 오류- 영문자로 입력");
document.getElementById("mname").focus();
return false;
}
document.getElementById("maddrno").focus();
} //end of if(mname)
//주소
if (document.member.maddrno.value.length==0) {
alert("주소를 입력하세요");
document.getElementById("maddrno").focus();
return false;
} else {
document.getElementById("mbirth").focus();
} //end of addr
// 생년월일
if (document.member.mbirth.value.length == 0) {
alert("생년월일을 입력하세요");
document.getElementById("mbirth").focus();
return false;
} else {
var exp = /^(19[0-9][0-9]|20\d{2})-(0[0-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
if (!exp.test(document.member.mbirth.value)) {
alert("생일 오류 - 0000-00-00 형식");
document.getElementById("mbirth").focus();
return false;
}
document.getElementById("mid").focus();
}//end of birth.
//아이디
if (document.member.mid.value.length == 0) {
alert("아이디를 입력하세요");
document.getElementById("mid").focus();
return false;
} else {
var length= document.member.mid.value.length;
if (length <6 || length >8) {
alert("아이디 오류 --6자 이상 8자 이하");
document.getElementById("mid").focus();
return false;
}//end of if
document.getElementById("mpw").focus();
}//end of mid
// 비밀번호
if (document.member.mpw.value.length == 0) {
alert("비밀번호를 입력하세요");
document.getElementById("mpw").focus();
return false;
} else {
var length= document.member.mpw.value.length;
if (length <6 || length >12) {
alert("비밀번호 오류- 6자 이상 12자 이하");
document.getElementById("mpw").focus();
return false;
}
document.getElementById("mgender").focus();
}//end of mpw
// 성별
if (document.member.mgender.value !="sel") {
//alert(document.member.mgender.value);
} else {
if (true) {
alert("성별을 입력하세요");
document.getElementById("mgender").focus();
return false;
}
document.getElementById("memail0").focus();
}//end of mgender
// 이메일
if (document.member.memail0.value.length == 0) {
alert("이메일 입력하세요");
document.getElementById("memail0").focus();
return false;
} else {
alert("else");
var email0=document.member.memail0.value;
var email1=document.member.memail1.value;
var tot=email0+"@"+email1;
var exp = /^[a-zA-Z0-9_-]+\@[a-zA-Z]+\.[a-zA-Z]+$/;
if (!exp.test(tot)) {
alert("이메일 오류");
document.getElementById("memail0").focus();
return false;
}
document.getElementById("mphone").focus();
}//end of memail
//휴대폰
if (document.member.mphone.value.length == 0) {
alert("핸드폰 번호를 입력하세요");
document.getElementById("mphone").focus();
return false;
} else {
var exp = /^\d{3}\-\d{4}\-\d{4}$/;
if (!exp.test(document.member.mphone.value)) {
alert("핸드폰 번호 오류 - 000-0000-0000 형식");
document.getElementById("mphone").focus();
return false;
}
} //end of phone
//http://localhost:8088/testServlet/PhmMemberController
//window.document.member.action = "/testServlet/PhmMember";
//window.document.member.submit();
}
function addrCheck(){
alert(" addrCheck 함수 진입");
var width = 500;
var height = 600;
daum.postcode.load(function(){
new daum.Postcode({
oncomplete: function(data){
alert(">>>>");
console.log("우편번호 >>> : " + data.zonecode);
console.log("주소값 >>> : " + data.roadAddress);
console.log("빌딩값 >>> : " + data.buildingName);
//$('#maddr1').val(data.address);
//$('#maddr2').val(data.buildingName);
document.getElementById('maddrno').value=data.zonecode;
document.getElementById('maddr1').value=data.roadAddress;
document.getElementById('maddr2').value=data.buildingName;
}
}).open({
left: (window.screen.width / 2) - (width / 2),
top: (window.screen.height / 2) - (height / 2),
});
});
}//end of addrCheck
function emailCheck(){
alert("emailCheck 함수 진입");
var eVal = document.member.memail.options[document.member.memail.selectedIndex].value;
alert("eVal >>> : " + eVal);
if (eVal == '0') {
document.member.memail1.readOnly = true;
document.member.memail1.value = " ";
}
if (eVal == '9') {
document.member.memail1.readOnly = false;
document.member.memail1.value = " ";
document.member.memail1.focus();
} else {
document.member.memail1.readOnly = true;
document.member.memail1.value = eVal;
}
}//end of emailCheck
</script>
</head>
<body>
<div class="container">
<h1> 회원가입</h1>
<form name="member" method="POST" >
<table class="table table-bordered">
<tr>
<td class="mem"> 회원번호 : </td>
<td>
<input type="text" id="mno" name="mno" disabled/><br/>
</td>
</tr>
<tr>
<td class="mem"> 이름 : </td>
<td>
<input type="text" id="mname" name="mname" /><br/>
</td>
</tr>
<tr>
<td class="mem"> 주소 : </td>
<td>
<input type="text" id="maddrno" name="maddrno" size=6/>
<input type="button" value="우편번호"onclick="addrCheck()"/>(도로명주소)<br/>
<input type="text" id="maddr1" name="maddr1" size=35 readonly/><br>
<input type="text" id="maddr2" name="maddr2" size=35 /><br/>
</td>
</tr>
<tr>
<td class="mem"> 생일 : </td>
<td>
<input type="text" id="mbirth" name="mbirth" /><br/>
</td>
</tr>
<tr>
<td class="mem"> 아이디(6 ~ 8 문자) : </td>
<td>
<input type="text" id="mid" name="mid" />
<input type="button" value="아이디중복확인" onclick="idCheck()" /><br/>
</td>
</tr>
<tr>
<td class="mem"> 비밀번호 : </td>
<td>
<input type="text" id="mpw" name="mpw" /><br/>
<input type="text" id="mpw_r" name="mpw_r" />
<input type="button" value="비밀번호확인" onclick="pwCheck()"/><br/>
</td>
</tr>
<tr>
<td class="mem"> 성별 : </td>
<td>
<select id="mgender" name="mgender" >
<option value="sel">
--- 성별 ---
</option>
<option value="male">
남성
</option>
<option value="female">
여성
</option>
</select>
</td>
</tr>
<tr>
<td class="mem"> 이메일 : </td>
<td>
<input type="text" id="memail0" name="memail0" value=""size=10 onfocus="this.value=''"/> @
<input type="text" id="memail1" name="memail1" value="" size=10 readonly />
<select name="memail" onchange="emailCheck()">
<option value="0">선택하세요</option>
<option value="9">직접입력</option>
<option>naver.com</option>
<option>gmail.com</option>
</select>
</td>
</tr>
<tr>
<td class="mem"> 휴대폰 : </td>
<td>
<input type="text" id="mphone" name="mphone" style="width:50px;" />-
<input type="text" id="mphone1" name="mphone1" style="width:50px;" />-
<input type="text" id="mphone2" name="mphone2" style="width:50px;" /><br/>
</td>
</tr>
<tr>
<td colspan=2 align="center">
<input type="hidden" name="ISUD_TYPE" id="ISUD_TYPE" value="I">
<input type="button" value="확인" onclick="conformFun()">
<input type="reset" value="다시">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>- regex_3.html ←jQuery 버전 제출하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<style type="text/css">
.mem{ text-align: center;}
</style>
<script type="text/javascript">
$(document).ready(function(){
// alert(">>>");
// 이름
$(document).on('click', '#nameChk', function(){
if ($("#mname").val().length == 0) {
alert("이름을 입력하세요.")
$("#mname").focus();
return false;
} else {
let exp = /^[a-zA-z]+$/;
if (!exp.test($('#mname').val())) {
alert("이름 오류 - 영문자로 입력");
$("#mname").focus();
return false
}
} // end of if ($("#mname").val()="")
}); // end of 이름
// 주소
$(document).on('click', '#addrChk', function(){
if ($("#maddrno").val().length == 0) {
alert("주소를 입력하세요.")
$("#maddrno").focus();
return false;
} else {
$("#mbirth").focus();
} // end of if ($("#maddrno").val().length == 0)
}); // end of 주소
// 우편번호
$(document).on('click','#addrCheck', function(){
var width = 500;
var height = 600;
daum.postcode.load(function(){
new daum.Postcode({
oncomplete: function(data){
alert(">>>>");
console.log("우편번호 >>> : " + data.zonecode);
console.log("주소값 >>> : " + data.roadAddress);
console.log("빌딩값 >>> : " + data.buildingName);
$('#maddrno'),val(data.zonecode);
$('#maddr1').val(data.address);
$('#maddr2').val(data.buildingName);
}
}).open({
left: (window.screen.width / 2) - (width / 2),
top: (window.screen.height / 2) - (height / 2),
});
});
}); //end of 우편번호
// 생년월일
$(document).on('click', '#birthChk', function(){
if ($("#mbirth").val().length == 0) {
alert("생년월일을 입력하세요.")
$("#mbirth").focus();
return false;
} else {
let exp = /^(19[0-9][0-9]|20\d{2})-(0[0-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
if (!exp.test($('#mbirth').val())) {
alert("생일 오류 - 000-00-00 형식");
$("#mbirth").focus();
return false
} else {
$('#mid').focus();
}
} // end of if ($("#mbirth").val().length == 0)
}); // end of 생년월일
// 아이디
$(document).on('click', '#idChk', function(){
if ($("#mid").val().length == 0) {
alert("아이디를 입력하세요.");
$("#mid").focus();
return false;
} else {
if ($("#mid").val().length < 6 || $("#mid").val().length > 12 ) {
alert("비밀번호 오류 - 6자 이상 12자 이하");
$("#mid").focus();
return false;
} else {
$("#mpw").focus();
}
} // end of ($("#mid").val().length == 0)
}); // end of 아이디
// 비밀번호
$(document).on('click', '#pwChk', function(){
if ($("#mpw").val().length == 0) {
alert("비밀번호를 입력하세요.");
$("#mpw").focus();
return false;
} else {
if ($("#mpw").val().length < 6 || $("#mpw").val().length > 12 ) {
alert("비밀번호 오류 - 6자 이상 12자 이하");
$("#mpw").focus();
return false;
} else {
$("#mgender").focus();
}
} // end of ($("#mpw").val().length == 0)
}); // end of 비밀번호
// 성별
$(document).on('click', '#genderChk', function(){
let gen = $("select[name=mgender] option:selected").val();
if (gen == "sel") {
$("#mgender").val('sel').prop("selected", true);
alert("성별을 선택하세요");
$("#mgender").focus();
return false;
}
if(gen == "male"){
$("#mgender").val('male').prop("selected", true);
$("#memail0").focus();
}
if(gen=="female"){
$("#mgender").val('female').prop("selected", true);
$("#memail0").focus();
}
}); // end of 성별
// 이메일
$(document).on('click', '#emailChk', function(){
// alert(">>> ");
var eVal =$("select[name=memail] option:selected").val();
alert("eVal >>> : " + eVal);
if (eVal == '선택하세요'){
$("input[name='memail1']").attr("readonly", true);
$("#memail1").val(eVal);
} else if (eVal == '직접입력') {
$("input[name='memail1']").attr("readonly", false);
$("#memail1").val("");
$("#memail1").focus();
} else {
$("input[name='memail1']").attr("readonly", true);
$("#memail1").val(eVal);
}
if ($("#memail0").val().length == 0) {
alert("이메일을 입력하세요");
$("#memail0").focus();
return false;
} else {
let email0 = $("#memail0").val();
let email1 = $("#memail1").val();
let tot = email0 + "@" + email1;
let exp = /^[a-zA-Z0-9_-]+\@[a-zA-z]+\.[a-zA-z]+$/;
if(!exp.test(tot)){
alert("이메일 오류");
$("#memail0").focus();
return false;
} else {
$("#mphone").focus();
}
} // end of ($("#memail0").val().length == 0)
}); // end of 이메일
// 휴대폰
$(document).on('click', '#hpChk', function(){
if ($("#mphone").val().length == 0) {
alert("휴대폰 번호을 입력하세요.")
$("#mphone").focus();
return false;
} else {
let exp = /^\d{3}\-\d{4}\-\d{4}$/;
let expTest = exp.test($("#mphone").val() +"-" + $("#mphone1").val() + "-" + $("#mphone2").val());
if (!expTest) {
alert("휴대폰 번호 오류 - 000-0000-0000 형식");
$("#mphone").focus();
return false
}
} // end of if ($("#mbirth").val().length == 0)
}); // end of 휴대폰
}); // end of $(document).ready()
</script>
</head>
<body>
<div class="container">
<h1> 회원가입</h1>
<form name="member" method="POST" >
<table class="table table-bordered">
<tr>
<td class="mem"> 회원번호 : </td>
<td>
<input type="text" id="mno" name="mno" disabled/><br/>
</td>
</tr>
<tr>
<td class="mem"> 이름 : </td>
<td>
<input type="text" id="mname" name="mname" /><br/>
<input type="button" id="nameChk" value="이름 확인" /><br>
</td>
</tr>
<tr>
<td class="mem"> 주소 : </td>
<td>
<input type="text" id="maddrno" name="maddrno" size=6/>
<input type="button" value="우편번호" id="addrCheck"/>(도로명주소)<br/>
<input type="text" id="maddr1" name="maddr1" size=35 readonly/><br>
<input type="text" id="maddr2" name="maddr2" size=35 /><br/>
<input type="button" value="주소 확인" id="addrChk"/>
</td>
</tr>
<tr>
<td class="mem"> 생일 : </td>
<td>
<input type="text" id="mbirth" name="mbirth" /><br/>
<input type="button" value="생일 확인" id="birthChk"/>
</td>
</tr>
<tr>
<td class="mem"> 아이디(6 ~ 8 문자) : </td>
<td>
<input type="text" id="mid" name="mid" />
<input type="button" value="아이디 확인" id="idChk">
</td>
</tr>
<tr>
<td class="mem"> 비밀번호 : </td>
<td>
<input type="text" id="mpw" name="mpw" /><br/>
<input type="text" id="mpw_r" name="mpw_r" />
<input type="button" value="비밀번호 확인" id="pwChk"/><br/>
</td>
</tr>
<tr>
<td class="mem"> 성별 : </td>
<td>
<select id="mgender" name="mgender" >
<option value="sel">
--- 성별 ---
</option>
<option value="male">
남성
</option>
<option value="female">
여성
</option>
</select>
<input type="button" id="genderChk" value="성별 입력 확인"/>
</td>
</tr>
<tr>
<td class="mem"> 이메일 : </td>
<td>
<input type="text" id="memail0" name="memail0" value=""size=10 onfocus="this.value=''"/> @
<input type="text" id="memail1" name="memail1" value="" size=10 readonly />
<select name="memail">
<option value="choose">선택하세요</option>
<option value="write">직접입력</option>
<option>naver.com</option>
<option>gmail.com</option>
</select>
<input type="button" id="emailChk" value="이메일 확인"/>
</td>
</tr>
<tr>
<td class="mem"> 휴대폰 : </td>
<td>
<input type="text" id="mphone" name="mphone" style="width:50px;" />-
<input type="text" id="mphone1" name="mphone1" style="width:50px;" />-
<input type="text" id="mphone2" name="mphone2" style="width:50px;" /><br/>
<input type="button" id="hpChk" value="휴대폰 확인"/>
</td>
</tr>
<tr>
<td colspan=2 align="center">
<input type="hidden" name="ISUD_TYPE" id="ISUD_TYPE" value="I">
<input type="button" value="확인" onclick="conformFun()">
<input type="reset" value="다시">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
2교시 (10:30-11:20)
- 삭제하기 기능 추가
- 쿼리
UPDATE MVC_BOARD
SET DELETEYN = 'N'
,UPDATEDATE = SYSDATE
WHERE DELETEYN = 'Y'
AND BNUM = '1';3교시 (11:30-12:20)
- BoardController.java
package a.b.c.com.kosmo.board.controller;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.log4j.LogManager;
import org.apache.log4j.Logger;
import a.b.c.com.common.ChabunUtil;
import a.b.c.com.common.EncryptSHA;
import a.b.c.com.kosmo.board.dao.BoardDAO;
import a.b.c.com.kosmo.board.dao.BoardDAOImpl;
import a.b.c.com.kosmo.board.service.BoardService;
import a.b.c.com.kosmo.board.service.BoardServiceImpl;
import a.b.c.com.kosmo.board.vo.BoardVO;
// http://localhost:8088/kosServlet/board
// /kosServlet/board
@WebServlet("/board")
public class BoardController extends HttpServlet {
private static final long serialVersionUID = 1L;
Logger logger = LogManager.getLogger(BoardController.class);
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
logger.info("BoardController :: doGet() 함수 진입 >>> : ");
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
PrintWriter out = response.getWriter();
String isudType = request.getParameter("isudType");
logger.info("BoardController :: doGet() 함수 진입 isudType >>> : " + isudType);
if (isudType !=null && isudType.length() > 0) {
isudType = isudType.toUpperCase();
if ("I".equals(isudType)) {
String bnum = ChabunUtil.getBoardChabun("");
String bsubject = request.getParameter("bsubject");
String bwriter = request.getParameter("bwriter");
String bpw = request.getParameter("bpw");
String bmemo = request.getParameter("bmemo");
BoardVO bvo = null;
bvo = new BoardVO();
bvo.setBnum(bnum);
bvo.setBsubject(bsubject);
bvo.setBwriter(bwriter);
// 패스워드 암호화 하기
bpw = EncryptSHA.encryptSHA256(bpw);
bvo.setBpw(bpw);
bvo.setBmemo(bmemo);
logger.info("bvo.getBnum() >>> : " + bvo.getBnum());
logger.info("bvo.getBsubject() >>> : " + bvo.getBsubject());
logger.info("bvo.getBwriter() >>> : " + bvo.getBwriter());
logger.info("bvo.getBpw() >>> : " + bvo.getBpw());
logger.info("bvo.getBmemo() >>> : " + bvo.getBmemo());
BoardService bs = new BoardServiceImpl();
boolean bool = bs.boardInsert(bvo);
if (bool) {
logger.info("입력 성공 >>> :" + bool);
// setAttribute(java.lang.String, java.lang.Object)
request.setAttribute("bool", new Boolean(bool));
RequestDispatcher rd = request.getRequestDispatcher("/kosmo/board/boardInsert.jsp");
rd.forward(request, response);
}else {
logger.info("입력 실패 >>> :" + bool);
out.println("<script>");
out.println("location.href='/kosmo/board/board.html'");
out.println("</script>");
}
}
if ("SALL".equals(isudType)) {
logger.info("BoardController :: doGet() 함수 진입 SALL isudType >>> : " + isudType);
// 서비스 호출
BoardService bs = new BoardServiceImpl();
ArrayList<BoardVO> aList = bs.boardSelectAll();
if (aList !=null && aList.size() > 0) {
logger.info("전체조회 성공 >>> : " + aList.size());
request.setAttribute("aList_selectALL", aList);
RequestDispatcher rd = request.getRequestDispatcher("/kosmo/board/boardSelectAll.jsp");
rd.forward(request, response);
}else {
logger.info("전체조회 실패 >>> : ");
out.println("<script>");
out.println("location.href='/kosmo/board/board.html'");
out.println("</script>");
}
}
if ("U".equals(isudType)) {
logger.info("BoardController :: doGet() 함수 진입 U isudType >>> : " + isudType);
String bnum = request.getParameter("bnumChk");
BoardVO bvo = null;
bvo = new BoardVO();
bvo.setBnum(bnum);
// 서비스 호출
BoardService bs = new BoardServiceImpl();
ArrayList<BoardVO> aList = bs.boardSelect(bvo);
if (aList !=null && aList.size() > 0) {
logger.info("조회 성공 >>> : " + aList.size());
request.setAttribute("aList_select", aList);
RequestDispatcher rd = request.getRequestDispatcher("/kosmo/board/boardSelect.jsp");
rd.forward(request, response);
}else {
logger.info("조회 실패 >>> : ");
out.println("<script>");
out.println("location.href='/kosServlet/board?isudType=SALL'");
out.println("</script>");
}
}
// 수정하기
if ("UOK".equals(isudType)) {
logger.info("BoardController :: doGet() 함수 진입 UOK isudType >>> : " + isudType);
String bnum = request.getParameter("bnum");
String bsubject = request.getParameter("bsubject");
String bmemo = request.getParameter("bmemo");
BoardVO bvo = null;
bvo = new BoardVO();
bvo.setBnum(bnum);
bvo.setBsubject(bsubject);
bvo.setBmemo(bmemo);
logger.info("bvo.getBnum() >>> : " + bvo.getBnum());
logger.info("bvo.getBsubject() >>> : " + bvo.getBsubject());
// 서비스 호출
BoardService bs = new BoardServiceImpl();
boolean bool = bs.boardUpdate(bvo);
// 결과 포워드 하기 /kosmo/board/boardUpdate.jsp
if (bool) {
logger.info("수정 성공 >>> :" + bool);
request.setAttribute("bool", new Boolean(bool));
RequestDispatcher rd = request.getRequestDispatcher("/kosmo/board/boardUpdate.jsp");
rd.forward(request, response);
} else {
logger.info("수정 실패 >>> :" + bool);
out.println("<script>");
out.println("alert('글 수정 실패')");
out.println("location.href='/kosServlet/board?isudType=SALL'");
out.println("</script>");
}
}
// 삭제하기
if ("D".equals(isudType)) {
logger.info("BoardController :: doGet() 함수 진입 D isudType >>> : " + isudType);
// http://localhost:8088/kosServlet/board?bnumchk=1&isudType=D
String bnum = request.getParameter("bnumChk");
BoardVO bvo = null;
bvo = new BoardVO();
bvo.setBnum(bnum);
logger.info("bvo.getBnum() >>> : " + bvo.getBnum());
// 서비스 호출
BoardService bs = new BoardServiceImpl();
boolean bool = bs.boardDelete(bvo);
// 결과 포워드 하기 /kosmo/board/boardDelete.jsp
if (bool) {
logger.info("삭제 성공 >>> : " + bool);
request.setAttribute("bool", new Boolean(bool));
RequestDispatcher rd = request.getRequestDispatcher("/kosmo/board/boardDelete.jsp");
rd.forward(request, response);
} else {
logger.info("삭제 실패 >>> : " + bool);
out.println("<script>");
out.println("alert('글 삭제 실패')");
out.println("location.href='/kosServlet/board?isudType=SALL'");
out.println("</script>");
}
}
} else {
logger.info("isudType 구분자가 없어서 무슨일을 할 지 모르겠어요 >>> : ");
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}- BoardSqlMap.java
package a.b.c.com.kosmo.board.sql;
public abstract class BoardSqlMap {
// 전체 조회
public static String getBoardSelectAll() {
StringBuffer sb = new StringBuffer();
sb.append(" SELECT \n");
sb.append(" A.BNUM BNUM \n");
sb.append(" ,A.BSUBJECT BSUBJECT \n");
sb.append(" ,A.BWRITER BWRITER \n");
sb.append(" ,A.BPW BPW \n");
sb.append(" ,A.BMEMO BEMMO \n");
sb.append(" ,A.DELETEYN DELETEYN \n");
sb.append(" ,TO_CHAR(A.INSERTDATE, 'YYYY-MM-DD') INSERTDATE \n");
sb.append(" ,TO_CHAR(A.UPDATEDATE, 'YYYY-MM-DD') UPDATEDATE \n");
sb.append(" FROM MVC_BOARD A \n");
sb.append(" WHERE A.DELETEYN = 'Y' \n");
sb.append(" ORDER BY 1 DESC \n");
return sb.toString();
}
// 조건 조회
public static String getBoardSelect() {
StringBuffer sb = new StringBuffer();
sb.append(" SELECT \n");
sb.append(" A.BNUM BNUM \n");
sb.append(" ,A.BSUBJECT BSUBJECT \n");
sb.append(" ,A.BWRITER BWRITER \n");
sb.append(" ,A.BPW BPW \n");
sb.append(" ,A.BMEMO BEMMO \n");
sb.append(" ,A.DELETEYN DELETEYN \n");
sb.append(" ,TO_CHAR(A.INSERTDATE, 'YYYY-MM-DD') INSERTDATE \n");
sb.append(" ,TO_CHAR(A.UPDATEDATE, 'YYYY-MM-DD') UPDATEDATE \n");
sb.append(" FROM MVC_BOARD A \n");
sb.append(" WHERE A.DELETEYN = 'Y' \n");
sb.append(" ORDER A.BNUM = ? \n"); // placeholder 1
return sb.toString();
}
// 입력하기
public static String getBoardInsert() {
StringBuffer sb = new StringBuffer();
/*
INSERT INTO MVC_BOARD (BNUM, BSUBJECT, BWRITER, BPW, BMEMO, DELETEYN, INSERTDATE, UPDATEDATE)
VALUES (?, ?, ?, ?, ?, 'Y', SYSDATE, SYSDATE
*/
sb.append(" INSERT INTO \n");
sb.append(" MVC_BOARD \n");
sb.append(" ( \n");
sb.append(" BNUM \n"); // COLUMN 1
sb.append(" ,BSUBJECT \n"); // COLUMN 2
sb.append(" ,BWRITER \n"); // COLUMN 3
sb.append(" ,BPW \n"); // COLUMN 4
sb.append(" ,BMEMO \n"); // COLUMN 5
sb.append(" ,DELETEYN \n"); // COLUMN 6
sb.append(" ,INSERTDATE \n"); // COLUMN 7
sb.append(" ,UPDATEDATE \n"); // COLUMN 8
sb.append(" ) \n");
sb.append(" VALUES \n");
sb.append(" ( \n");
sb.append(" ? \n"); // placeholder 2
sb.append(" ,? \n"); // placeholder 2
sb.append(" ,? \n"); // placeholder 3
sb.append(" ,? \n"); // placeholder 4
sb.append(" ,? \n"); // placeholder 5
sb.append(" ,'Y' \n"); // 'Y' 6
sb.append(" ,SYSDATE \n"); // SYSDATE 7
sb.append(" ,SYSDATE \n"); // SYSDATE 8
sb.append(" ) \n");
return sb.toString();
}
public static String getBoardUpdate() {
StringBuffer sb = new StringBuffer();
sb.append("UPDATE MVC_BOARD \n");
sb.append("SET BSUBJECT = ? \n"); // placeholder 1
sb.append(" ,BMEMO = ? \n"); // placeholder 2
sb.append(" ,UPDATEDATE = SYSDATE \n");
sb.append("WHERE DELETEYN = 'Y' \n");
sb.append("AND BNUM = ? \n"); // placeholder 3
return sb.toString();
}
public static String getBoardDelete() {
StringBuffer sb = new StringBuffer();
sb.append("UPDATE MVC_BOARD \n");
sb.append("SET DELETEYN = 'N' \n");
sb.append(" ,UPDATEDATE = SYSDATE \n");
sb.append("WHERE DELETEYN = 'Y' \n");
sb.append("AND BNUM = ? \n"); // placeholder 1
return sb.toString();
}
}- BoardDAOImpl.java
package a.b.c.com.kosmo.board.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import org.apache.log4j.LogManager;
import org.apache.log4j.Logger;
import a.b.c.com.common.DBCP_Connectivity;
import a.b.c.com.common.KosConnectivity;
import a.b.c.com.kosmo.board.service.BoardServiceImpl;
import a.b.c.com.kosmo.board.sql.BoardSqlMap;
import a.b.c.com.kosmo.board.vo.BoardVO;
public class BoardDAOImpl implements BoardDAO {
Logger logger = LogManager.getLogger(BoardDAOImpl.class);
// 전체 조회
@Override
public ArrayList<BoardVO> boardSelectAll() {
// TODO Auto-generated method stub
logger.info("BoardDAOImpl:: boardSelectAll() 함수 진입 >>> : ");
// 사용할 객체를 지역변수로 선언하고 디폴트 값으로 초기화한다.
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rsRs = null;
ArrayList<BoardVO> aList = null;
// JDBC를 이용해서 데이터 가져오기
try {
conn = KosConnectivity.getConnection();
String sqls = BoardSqlMap.getBoardSelectAll();
pstmt = conn.prepareStatement(sqls);
logger.info("전체 조회 >>> : \n" + sqls);
rsRs = pstmt.executeQuery();
if (rsRs != null) {
aList = new ArrayList<BoardVO>();
while (rsRs.next()) {
BoardVO _bvo = new BoardVO();
_bvo.setBnum(rsRs.getString(1));
_bvo.setBsubject(rsRs.getString(2));
_bvo.setBwriter(rsRs.getString(3));
_bvo.setBpw(rsRs.getString(4));
_bvo.setBmemo(rsRs.getString(5));
_bvo.setDeleteyn(rsRs.getString(6));
_bvo.setInsertdate(rsRs.getString(7));
_bvo.setUpdatedate(rsRs.getString(8));
aList.add(_bvo);
}
}
KosConnectivity.conClose(conn, pstmt, rsRs);
} catch (Exception e) {
logger.info("전체 조회시 디비 에러가 >>> : " + e);
} finally {
KosConnectivity.conClose(conn, pstmt, rsRs);
}
return aList;
}
// 조건 조회
@Override
public ArrayList<BoardVO> boardSelect(BoardVO bvo) {
// TODO Auto-generated method stub
logger.info("BoardDAOImpl:: boardSelect() 함수 진입 >>> : ");
logger.info("BoardDAOImpl :: boardSelect() bvo.getBnum() >>> : " + bvo.getBnum());
// 사용할 객체를 지역변수로 선언하고 디폻트 값으로 초기화 한다.
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rsRs = null;
ArrayList<BoardVO> aList = null;
// JDBC를 이용해서 데이터 가져오기
try {
conn = KosConnectivity.getConnection();
String sqls = BoardSqlMap.getBoardSelect();
pstmt = conn.prepareStatement(sqls);
pstmt.clearParameters();
pstmt.setNString(1, bvo.getBnum());
logger.info("조건 조회 >>> : \n" + sqls);
rsRs = pstmt.executeQuery();
if (rsRs != null) {
aList = new ArrayList<BoardVO>();
while (rsRs.next()) {
BoardVO _bvo = new BoardVO();
_bvo.setBnum(rsRs.getString(1));
_bvo.setBsubject(rsRs.getString(2));
_bvo.setBwriter(rsRs.getString(3));
_bvo.setBpw(rsRs.getString(4));
_bvo.setBmemo(rsRs.getString(5));
_bvo.setDeleteyn(rsRs.getString(6));
_bvo.setInsertdate(rsRs.getString(7));
_bvo.setUpdatedate(rsRs.getString(8));
aList.add(_bvo);
}
}
KosConnectivity.conClose(conn, pstmt, rsRs);
} catch (Exception e) {
logger.info("조건 조회 시 디비 에러가 >>> : " + e);
} finally {
KosConnectivity.conClose(conn, pstmt, rsRs);
}
return aList;
}
// 입력하기
@Override
public boolean boardInsert(BoardVO bvo) {
// TODO Auto-generated method stub
logger.info("BoardDAOImpl:: boardInsert() 함수 진입 >>> : ");
logger.info("bvo >>> : " + bvo);
// 사용할 객체를 지역변수로 선언하고 초기화 하기
Connection conn = null;
PreparedStatement pstmt = null;
int nCnt = 0;
boolean bool = false;
// JDBC 객체 이용해서 테이블에 인서트 하기
try {
conn = KosConnectivity.getConnection();
String sqls = BoardSqlMap.getBoardInsert();
pstmt = conn.prepareStatement(sqls);
logger.info("인서트 >>> : \n" + sqls);
// 플레이스 홀더에 입력할 데이터 바인딩하기
pstmt.clearParameters();
pstmt.setString(1, bvo.getBnum());
pstmt.setString(2, bvo.getBsubject());
pstmt.setString(3, bvo.getBwriter());
pstmt.setString(4, bvo.getBpw());
pstmt.setString(5, bvo.getBmemo());
nCnt = pstmt.executeUpdate();
if (!conn.getAutoCommit()) conn.commit();
logger.info("인서트 결과는 >>> : " + nCnt);
if (nCnt > 0) bool = true;
KosConnectivity.conClose(conn, pstmt);
}catch(Exception e) {
logger.info("인서트 디비 에러가 >>> : " + e);
}finally {
KosConnectivity.conClose(conn, pstmt);
}
return bool;
}
// 수정하기
@Override
public boolean boardUpdate(BoardVO bvo) {
// TODO Auto-generated method stub
logger.info("BoardDAOImpl :: boardUpdate() 함수 진입 >>> : ");
logger.info("bvo >>> : " + bvo);
// 사용할 객체를 지역변수로 선언하고 초기화하기
Connection conn = null;
PreparedStatement pstmt = null;
int nCnt = 0;
boolean bool = false;
// JDBC 객체 이용해서 테이블에 인서트 하기
try {
conn = KosConnectivity.getConnection();
String sqls = BoardSqlMap.getBoardUpdate();
pstmt = conn.prepareStatement(sqls);
logger.info("업데이트 >>> : \n" + sqls);
// 플레이스 홀더에 입력할 데이터 바인딩 하기
pstmt.clearParameters();
pstmt.setString(1, bvo.getBsubject());
pstmt.setString(2, bvo.getBmemo());
pstmt.setString(3, bvo.getBnum());
nCnt = pstmt.executeUpdate();
if (!conn.getAutoCommit()) conn.commit();
logger.info("업데이트 결과는 >>> : " + nCnt);
if (nCnt > 0) bool = true;
KosConnectivity.conClose(conn, pstmt);
} catch (Exception e) {
logger.info("업데이트 디비 에러가 >>>: " + e);
} finally {
KosConnectivity.conClose(conn, pstmt);
}
return bool;
}
@Override
public boolean boardDelete(BoardVO bvo) {
// TODO Auto-generated method stub
logger.info("BoardDAOImpl :: boardDelete() 함수 진입 >>> : ");
logger.info("bvo >>> : " + bvo);
// 사용할 객체를 지역변수로 선언하고 초기화하기
Connection conn = null;
PreparedStatement pstmt = null;
int nCnt = 0;
boolean bool = false;
// JDBC 객체 이용해서 테이블에 인서트 하기
try {
conn = KosConnectivity.getConnection();
String sqls = BoardSqlMap.getBoardDelete();
pstmt = conn.prepareStatement(sqls);
logger.info("딜리트 >>> : \n" + sqls);
// 플레이스 홀더에 입력할 데이터 바인딩 하기
pstmt.clearParameters();
pstmt.setString(1, bvo.getBnum());
nCnt = pstmt.executeUpdate();
if (!conn.getAutoCommit()) conn.commit();
logger.info("딜리트 결과는 >>> : " + nCnt);
if (nCnt > 0) bool = true;
KosConnectivity.conClose(conn, pstmt);
} catch (Exception e) {
logger.info("딜리트 디비 에러가 >>>: " + e);
} finally {
KosConnectivity.conClose(conn, pstmt);
}
return bool;
}
}- BoardServiceImpl.java
package a.b.c.com.kosmo.board.service;
import java.util.ArrayList;
import org.apache.log4j.LogManager;
import org.apache.log4j.Logger;
import a.b.c.com.kosmo.board.dao.BoardDAO;
import a.b.c.com.kosmo.board.dao.BoardDAOImpl;
import a.b.c.com.kosmo.board.vo.BoardVO;
public class BoardServiceImpl implements BoardService {
Logger logger = LogManager.getLogger(BoardServiceImpl.class);
// 전체 조회
@Override
public ArrayList<BoardVO> boardSelectAll() {
// TODO Auto-generated method stub
logger.info("BoardServiceImple :: boardSelectAll() 함수 진입 >>> : ");
BoardDAO bdao = new BoardDAOImpl();
ArrayList<BoardVO> aList = bdao.boardSelectAll();
return aList;
// return bdao.boardSelectAll();
}
// 조건 조회
@Override
public ArrayList<BoardVO> boardSelect(BoardVO bvo) {
// TODO Auto-generated method stub
logger.info("BoardServiceImple :: boardSelect() 함수 진입 >>> : ");
BoardDAO bdao = new BoardDAOImpl();
ArrayList<BoardVO> aList = bdao.boardSelectAll();
return aList;
// return bdao.boardSelect(bvo);
}
// 입력하기
@Override
public boolean boardInsert(BoardVO bvo) {
// TODO Auto-generated method stub
logger.info("BoardServiceImple :: boardInsert() 함수 진입 >>> : ");
logger.info("bvo >>> : " + bvo);
BoardDAO bdao = new BoardDAOImpl();
boolean bool = bdao.boardInsert(bvo);
return bool;
//return bdao.boardInsert(bvo);
}
// 수정하기
@Override
public boolean boardUpdate(BoardVO bvo) {
// TODO Auto-generated method stub
logger.info("BoardServiceImple :: boardUpdate() 함수 진입 >>> : ");
logger.info("bvo >>> : " + bvo);
BoardDAO bdao = new BoardDAOImpl();
boolean bool = bdao.boardUpdate(bvo);
logger.info("bool >>> : " + bool);
return bool;
// return bdao.boardUpdate(bvo);
}
// 삭제하기
@Override
public boolean boardDelete(BoardVO bvo) {
// TODO Auto-generated method stub
logger.info("BoardServiceImple :: boardDelete() 함수 진입 >>> : ");
logger.info("bvo >>> : " + bvo);
BoardDAO bdao = new BoardDAOImpl();
boolean bool = bdao.boardDelete(bvo);
logger.info("bool >>> : " + bool);
return bool;
// return bdao.boardDelete(bvo);
}
}4교시 (12:30-13:20)
- boardSelectAll.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.ArrayList" %>
<%@ page import="a.b.c.com.kosmo.board.vo.BoardVO" %>
<%@ page import="org.apache.log4j.LogManager" %>
<%@ page import="org.apache.log4j.Logger" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 디바이스에 최적화된 크기로 출력됨 ------------------------------------->
<meta name="viweport" content="width=device-width, iitail-scale=1">
<!-- jQuery CDN 불러오기 -------------------------------------------->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
/*
//체크박스 체크 확인하기
function checkOnly(chk){
// alert(">>> : " + chk);
var chkObj = document.getElementsByName("bnumChk");
console.log("chkObj >>> : " + chkObj);
for (var i=0; i < chkObj.length; i++){
if (chkObj[i] != chk){
chkObj[i].checked = false;
}
}
}
// 체크박스 체크 카운트
function chkInfo(){
var obj = document.getElementsByName("bnumChk");
var nCnt = 0;
for(var i=0; i < obj.length; i++){
if (obj[i].checked == true){
nCnt++;
}
}
console.log('nCnt >>> : ' + nCnt);
return nCnt;
}
*/
$(document).ready(function(){
// 등록하기
$("#I").on('click', function(){
location.href="/kosServlet/kosmo/board/board.html";
});
// 조회하기
$("#SALL").on('click', function(){
location.href="/kosServlet/board?isudType=SALL";
});
// 체크박스 하나만 체크 되게 하기 bnumChk
$(document).on('click', '#bnumChk', function(){
// var b = $(this).prop('checked');
// console.log("b >>> : " + b);
// alert("b >>> : " + b);
if ($(this).prop('checked')){
$('.bnumChk').prop('checked', false);
$(this).prop('checked', true);
}
});
// 수정하기
$(document).on('click', '#U', function(){
if ($('.bnumChk:checked').length == 0 ){
alert("수정할 글번호 하나를 선택하시오 !!!");
return;
}
$('#isudType').val('U');
$('#boardSelectAll').attr({
"action":"/kosServlet/board",
"method":"GET",
"enctype":"application/x-www-form-urlencoded"
}).submit();
});
// 삭제하기
$(document).on('click', '#D', function(){
if ($('.bnumChk:checked').length == 0) {
alert("수정할 글 번호 하나를 선택하시오");
return;
}
$('#isudType').val('D');
$('#boardSelectAll').attr({
"action":"/kosServlet/board",
"method":"GET",
"enctype":"application/x-www-urlencoded"
}).submit();
});
});
</script>
<style type="text/css">
.tt{
text-align: center;
}
a{ text-decoration-line: none;}
</style>
</head>
<body>
<h3>boardSelectAll.jsp</h3>
<hr>
<form name="boardSelectAll" id="boardSelectAll">
<table border="1">
<tr>
<td class="tt">
<input type="checkbox" class="chkAll" name="chkAll" id="chkAll"/>
</td>
<td class="tt">순번</td>
<td class="tt">글번호</td>
<td class="tt">글제목</td>
<td class="tt">글쓴이</td>
<td class="tt">글내용</td>
<td class="tt">등록일</td>
</tr>
<% request.setCharacterEncoding("UTF-8"); %>
<%
Logger logger = LogManager.getLogger(this.getClass());
logger.info("boardSelectAll.jsp 진입 >>> : ");
Object obj = request.getAttribute("aList_selectALL");
if (obj == null) return;
ArrayList<BoardVO> aList = (ArrayList<BoardVO>)obj;
int nCnt = aList.size();
logger.info("boardSelectAll.jsp 전체조회 건수 >>> : " + nCnt);
for (int i=0; i < nCnt; i++){
BoardVO _bvo = aList.get(i);
%>
<tr>
<td class="tt">
<input type="checkbox" class="bnumChk" name="bnumChk" id="bnumChk" value="<%= _bvo.getBnum() %>" />
</td>
<td class="tt"><%= i + 1 %></td>
<td class="tt"><%= _bvo.getBnum() %></td>
<td class="tt"><%= _bvo.getBsubject() %></td>
<td class="tt"><%= _bvo.getBwriter() %></td>
<td class="tt"><%= _bvo.getBmemo() %></td>
<td class="tt"><%= _bvo.getInsertdate() %></td>
</tr>
<%
}
%>
<tr>
<td colspan="7" align="right">
<input type="hidden" name="isudType" id="isudType" value="" />
<input type="button" value="등록" id="I">
<input type="button" value="조회" id="SALL">
<input type="button" value="수정" id="U">
<input type="button" value="삭제" id="D">
</td>
</tr>
</table>
</form>
</body>
</html>- boardDelete.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="org.apache.log4j.LogManager" %>
<%@ page import="org.apache.log4j.Logger" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>boardDelete.jsp</h3>
<hr>
<%
Logger logger = LogManager.getLogger(this.getClass());
logger.info("boardDelete.jsp 진입 >>> : ");
Object obj = request.getAttribute("bool");
if (obj == null) return;
boolean bool = ((Boolean)obj).booleanValue();
if (bool) {
%>
<script>
location.href="/kosServlet/board?isudType=SALL";
</script>
<%
}
%>
</body>
</html>5교시 (14:30-15:20)
- WEB MVC
- Ajax
- jps 페이지 이동
페이지를 이동하면 화면 전환(화면 리프레시)이 이루어 진다.
데이터 이동
HTTP 프로토콜
컨넥션 리스 : Connectionless
한번 연결해서 (데이터를 요청하면)
====================================
====================================
데이터를 받으면 (데이터가 응답되면)
연결한 것을 끊는다.
하위에 TCP 프로토콜
Connection
Ajax : 통신 규칙 : request, response
: 구글 엔지니어 XMLHttpRequest 기술로 만든다.
: 구글의 지도 서비스를 하기 위해서
ajax(), load(), get(), post() ....
$.ajax({
url:,
type:,
data:,
dataType:,
success:,
error:
}) - Ajax(Asynchronous JavaScript and XML)
========================================================
Web 화면을 갱신하지 않고 Server로부터 Data를 가져오는 방법
함수 : load(), $.ajax(), $.get(), $.post(), $.getJSON()
$.ajax() 함수는 load, get, post 함수를 포함하는 함수이다.
예약어(keyword) : ajax() 함수에서 {} : 자바스크립트 리터럴객체 블럭 사용 하는 것
url : 요청이 전송되는 URL이 포함된 문자열
type : http요청 방식 : GET/POST
data : http요청 파라미터 문자열 key=value&key=value
dataType : http요청 후 return하는 데이터 Type
xml, html, srcipt, json, jsonp, text
success : function(data: 리턴매개변수, 변수 이름이 가변적이다 ){....} : http요청 성공시 이벤트 핸들러
error : function(){.....} : http요청 실패시 이벤트 핸들러
async : 요청시 동기 유무 선택(true/false)
true : async, false : sync
cache : 브라우저에 의해 요청되는 페이지를 캐시(true/false)
true : 캐시사용, false : 캐시사용하지 않음
timeout : http요청에 대한 제한 시간(단위 : ms)
ajax() 함수
---------------------------------------
$.ajax({
"url" : "접속할 페이지 주소"
,"type" : "GET" or "POST"
,"dataType" : "XML" or "JSON"
,"data" : "파라미터 문자열 key=value&key=value" or { "key":"value", "key":"value"}
,"success" : function(data){
// 통신에 성공했을 때 실행되는 함수
}
,"error" : function(data){
// 통신에 실패했을 때 실행되는 함수
}
});
get() 함수
---------------------------------------
$.get({
"url"
,{파라미터 Object(JSON)}
,function (){
// 통신에 성공했을 때 실행되는 함수
}
});
var ajax = $.get("url",{파라미터 Object(JSON)},function (){... });
ajax.fail(function(){
// 404, 500 에러등이 발생한 경우 실행
});
ajax.always(function(){
// 통신 성공, 실패 여부에 상관없이 무조건 마지막에 호출됨
});
post() 함수
---------------------------------------
$.post({
"url"
,{파라미터 Object(JSON)}
,function (){
// 통신에 성공했을 때 실행되는 함수
}
});
6교시 (15:30-16:20)
- test_file.txt
Ajax는 Asynchronous JavaScript and XML의 약자입니다.
Ajax는 동적인 대화형 웹페이지를 만듭니다.
Aysnchronous는 비동기 방식입니다.
Ajax로 요청하고 응답할 때 화면전환(리프레시)가 없다.- ajax_1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax load() 함수</title>
<!-- jQuery CDN 불러오기 -------------------------------------------->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#target").load("test_file.txt");
});
});
</script>
</head>
<body>
<h3>Ajax load() 함수 사용하기</h3>
<hr>
<body>
<div id="target" style="width:400px; height:150px; border:solid 1px red"></div>
<button>Get Data</button>
</body>
</html>
- data_2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String id = request.getParameter("id");
System.out.println("id >>> : " + id);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
아이디 : <%= id %><br>
</body>
</html>- ajax_2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- jQuery CDN 불러오기 -------------------------------------------->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
alert(">>>");
/*
$.ajax({
url: 요청할 페이지 url 주소 : action,
type: GET, POST : method,
data: ?key=value&key=value$key=value,
success: function(resData){}, resData : 매개변수 : 변수 이름은 가변적이다.
error: function(e) {}
});
*/
$.ajax({
url : "data_2.jsp",
type : "POST",
data : {
id : $('#id').val(), // data는 쿼리 스트링 data_2.jsp?id=값
},
success : function (resData){
alert("리턴 데이터 >>> : " + resData);
$('#ajaxResData').html("화면에 리턴 데이터 출력 : " + resData);
console.log("콘솔에 리턴 데이터 출력 : " + resData);
},
error : function (e){
alert("error \n" + e);
}
});
/*
$("#frm").attr({
"action":"data_2.jsp",
"method":"GET"
}).submit();
*/
});
});
</script>
</head>
<body>
<form id="frm">
<label>아이디</label>
<input name="id" id="id">
<input id="button" type="button" value="버튼">
</form>
<div id="ajaxResData">리턴 데이터</div>
</body>
</html>
7교시 (16:30-17:20)
- ajax_2_1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- jQuery CDN 불러오기 -------------------------------------------->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function(){
alert(">>>");
let urlV = "data_2.jsp";
let typeV = "POST";
let dataV = $('#id').val();
console.log("urlV >>> : " + urlV);
console.log("typeV >>> : " + typeV);
console.log("dataV >>> : " + dataV);
$.ajax({
url : urlV,
type : typeV,
data : {
id : dataV, // data 는 쿼리 스트링 data_2.jsp?id=값
},
success : whenSuccess,
error : whenError
});
function whenSuccess(resData){
alert("리턴 데이터 >>> : " + resData);
$('#ajaxResData').html("화면에 리턴 데이터 출력 : " + resData);
console.log("콘솔에 리턴 데이터 출력 : " + resData);
}
function whenError(e){
alert("error \n" + e);
}
});
});
</script>
</head>
<body>
<form id="frm">
<label>아이디</label>
<input name="id" id="id">
<input id="button" type="button" value="버튼">
</form>
<div id="ajaxResData">리턴 데이터</div>
</body>
</html>
- data_xml.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String id = request.getParameter("id");
System.out.println("jqueryIdCheck :: id >>> " + id);
int idNcnt = 0;
boolean bool = false;
if (idNcnt == 0){
bool = true;
} else {
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax XML</title>
</head>
<body>
<?xml version='1.0' encoding='UTF-8'?>
<login>
<result><%= bool %></result>
</login>
</body>
</html>- ajax_xml.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- jQuery CDN 불러오기 -------------------------------------------->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function(){
alert(">>>");
callAjax();
});
});
function callAjax(){
alert("<<<>>>");
$.ajax({
url : "data_xml.jsp",
type : "POST",
data : {
id : $('#id').val(),
},
success : whenSuccess,
error : whenError
});
function whenSuccess(data){
alert("리턴 데이터 >>> : " + data);
var boolVal = $(data).find("result").text();
console.log("boolVal >>> : " + boolVal);
// 자바스크립트 eval() 객체를 변환하는 함수
// boolVal 문자열을 자바스크립트 true, false 객체로 변환하는 함수
// 현재는 사용금지 : 보안 취약점에 적용되는 함수
var result = eval(boolVal);
console.log("result >>> : " + result);
if (result){
alert("성공");
console.log("result >>> : " + result);
} else {
alert("실패");
console.log("result >>> : " + result);
}
}
function whenError(){
alert("error");
}
}
</script>
</head>
<body>
<form id="frm">
<label>아이디</label><input name="id" id="id">
<input id="button" type="button" value="버튼">
</form>
</body>
</html>
8교시 (17:30-18:30)
- idCheck.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>ID CHECK</h3>
<hr>
<%
String mid = request.getParameter("mid");
String ISUD_TYPE = request.getParameter("ISUD_TYPE");
String sVal = "";
if ("IDCHECK".equals(ISUD_TYPE)) {
if("test".equals(mid)) {
} else {
sVal = "IDGOOD";
}
}
%>
<?xml version='1.0' encoding='UTF-8'?>
<login>
<result><%= sVal %></result>
</login>
</body>
</html>- pwCheck.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>PW CHECK</h3>
<hr>
<%
String mpw = request.getParameter("mpw");
String ISUD_TYPE = request.getParameter("ISUD_TYPE");
String sVal = "";
if ("PWCHECK".equals(ISUD_TYPE)) {
if ("test00".equals(mpw)) {
sVal = "PWGOOD";
}
}
%>
<?xml version='1.0' encoding='UTF-8'?>
<login>
<result><%= sVal %></result>
</login>
</body>
</html>- idpwCheck.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID PW CHECK</title>
<!-- jQuery CDN 불러오기 -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 아이디 중복 체크
$("#midCheckBtn").click(function(){
alert("midCheckBtn 함수 진입");
let urlVal = "/KosMember/kos_ajax/check/idCheck.jsp";
let typeVal = "GET";
let midVal = $("#mid").val();
let isudtypeVal = $("#ISUD_TYPE").val('IDCHECK');
isudtypeVal = isudtypeVal.val();
if (midVal == '') {
alert("중복 체크할 아이디를 입력하세요 >>> : ");
$("#mid").focus();
return false;
}
alert("urlVal >>> : " + urlVal);
alert("typeVal >>> : " + typeVal);
alert("midVal >>> : " + midVal);
alert("isudtypeVal >>> : " + isudtypeVal);
console.log("urlVal >>> : " + urlVal);
console.log("typeVal >>> : " + typeVal);
console.log("midVal >>> : " + midVal);
console.log("isudtypeVal >>> : " + isudtypeVal);
$.ajax({
url : urlVal,
type : typeVal,
data : {
"mid": midVal,
"ISUD_TYPE": isudtypeVal, // data는 쿼리 스트링
},
success : whenSuccess,
error : whenError
});
function whenSuccess(resData){
var sVal = $(resData).find("result").text();
if (sVal == 'IDGOOD'){
alert("사용할 수 있는 아이디입니다.");
$("#mid").css("background-color", "yellow");
$("#mid").attr("readonly", true);
$("#mid").focus();
}else{
alert("이미 사용 중인 아이디입니다.");
$("#mid").val('');
$("#mid").focus();
}
}
function whenError(){
alert("error");
}
});
// 비밀번호 체크
$("#mpwCheckBtn").click(function(){
alert("mpwCheckBtn 함수 진입 >>> : ");
let urlVal = "/KosMember/kos_ajax/check/pwCheck.jsp";
let typeVal = "GET";
let mpwVal = $("#mpw").val();
let isudtypeVal = $("#ISUD_TYPE").val('PWCHECK');
isudtypeVal = isudtypeVal.val();
if (mpwVal == '') {
alert("비밀번호를 입력하세요 >>> : ");
$("#mpw").focus();
return false;
}
alert("urlVal >>> : " + urlVal);
alert("typeVal >>> : " + typeVal);
alert("mpwVal >>> : " + mpwVal);
alert("isudtypeVal >>> : " + isudtypeVal);
console.log("urlVal >>> : " + urlVal);
console.log("typeVal >>> : " + typeVal);
console.log("mpwVal >>> : " + mpwVal);
console.log("isudtypeVal >>> : " + isudtypeVal);
$.ajax({
url : urlVal,
type : typeVal,
data : {
"mpw": mpwVal,
"ISUD_TYPE": isudtypeVal, // data 는 쿼리 스트링
},
success : whenSuccess,
error : whenError
}); // end of ajax()
function whenSuccess(resData){
var sVal = $(resData).find("result").text();
if (sVal == 'PWGOOD'){
alert("비밀번호가 확인되었습니다.");
$("#mpw").css("background-color", "red");
$("#mpw").attr("readonly", true);
$("#mpw").focus();
}else{
alert("비밀번호가 다릅니다.");
$("#mpw").val('');
$("#mpw").focus();
}
}
function whenError(){
alert("error");
}
});
});
</script>
</head>
<body>
<h3>ID PW CHECK</h3>
<hr>
<form name="memForm" id="memForm">
<table border="1">
<tr>
<td>아이디</td>
<td>
<input type="hidden" name="ISUD_TYPE" id="ISUD_TYPE">
<input type="text" name="mid" id="mid" placeholder="아이디 체크" style="width:100px" />
<input type="button" id="midCheckBtn" value="아이디 중복 확인" />
</td>
</tr>
<tr>
<td>패스워드</td>
<td>
<input type="text" name="mpw" id="mpw" placeholder="비밀번호 체크" style="width:100px" />
<input type="button" id="mpwCheckBtn" value="비밀번호 확인" />
</td>
</tr>
</table>
</form>
</body>
</html>
Notes
728x90