728x90
반응형
AWS 클라우드환경 네이티브 수업 120 일차
진행
1. 웹 제작 - MySQL에서 ERD(Entity Relationship Diagram) 생성
2. 웹 제작 - Ajax를 이용하여 아이디 중복 확인 버튼 만들기
요약
1. 웹 제작 - MySQL에서 ERD(Entity Relationship Diagram) 생성
2. 웹 제작 - Ajax 개념
3. 웹 제작 - jQuery를 이용한 Ajax 기본 모양
4. 웹 제작 - Jackson 개념
5. 웹 제작 - Ajax를 이용하여 아이디 중복 확인 버튼 만들기
mySQL에서 ERD(Entity Relationship Diagram) 생성
=> mySQL에서 만들 테이블들간의 관계도를 생성해주는 방법
ERD를 만들 DB에 접속해서 상단 메뉴에 Database - Reverse Enginner 클릭
ERD를 만들 DB를 Stored Connection에서 선택
그 후, 해당 DB의 username과 pw를 넣는다. 그리고 Next
그 후, Next 슝슝 누르다보면 아래 화면이 뜬다.
아래의 경우, Schema 가 한개인데 여러개도 가능하다.
선택할 스키마 체크.
여기가 중요하다.
어떤 테이블을, 어떤 함수를, 어떤 트리거를 나타낼지 정할 수 있다.
아래의 경우, 테이블만 나와있는데 기존 데이터가 어떻게 들어있느냐에 따라 달라진다.
오른쪽에 Show Filter를 클릭하면 아래처럼 해당 목록들이 뜬다. (아래 그림에는 hide filter)
왼쪽에 있으면 ERD에 나타낼 테이블 / 오른쪽은 ERD에 나타내지 않을 테이블 이다.
지정 후 Execute.
그 위에 Next~ Finish 하면 아래처럼 생성이 된다.
ERD를 다른 파일이나 이미지로 생성하려면
File - Export 로 들어가면 아래처럼 각 형식에 따라 뽑아낼 수 있다.
Ajax (Asynchronous JavaScript and XML)
- 다양한 형태의 데이터를 자바 스크립트로 조작해서 비동기식으로 서버와 통신하는 방식
- 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다. (로드된 후에 서버로 데이터 주고 받기 가능)
- 다양한 형태의 데이터 : JSON, XML, HTML, 텍스트 파일 등
- 최근에는 XML 보다 JSON을 더 많이 사용한다.
- 비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미
Ajax의 동작방식
- 기존의 웹 페이지 구동 방식은 웹에서 서버에 요청을 하면 웹 페이지 전체를 다시 로딩한다.
- Ajax 는 XMLHttpRequest 라는 객체를 이용해서 비동기 통신을 해서 요청된 웹 페이지의 일부만 다시 로딩한다.
jQuery를 이용한 Ajax
$.ajax ({
// URL은 필수 요소이므로 반드시 구현해야 하는 Property입니다.
url : "url", // 요청이 전송될 URL 주소
type : "GET", // http 요청 방식 (default: ‘GET’)
async : true, // 요청 시 동기화 여부. 기본은 비동기(asynchronous) 요청 (default: true)
cache : true, // 캐시 여부
timeout : 3000, // 요청 제한 시간 안에 완료되지 않으면 요청을 취소하거나 error 콜백을 호출.(단위: ms)
data : {key : value}, // 요청 시 포함되어질 데이터
processData : true, // 데이터를 컨텐트 타입에 맞게 변환 여부
contentType : "application/json", // 요청 컨텐트 타입
dataType : "json", // 응답 데이터 형식 (명시하지 않을 경우 자동으로 추측)
beforeSend : function () {
// XHR Header를 포함해서 HTTP Request를 하기전에 호출됩니다.
},
success : function(data, status, xhr) {
// 정상적으로 응답 받았을 경우에는 success 콜백이 호출되게 됩니다.
// 이 콜백 함수의 파라미터에서는 응답 바디, 응답 코드 그리고 XHR 헤더를 확인할 수 있습니다.
},
error : function(xhr, status, error) {
// 응답을 받지 못하였다거나 정상적인 응답이지만 데이터 형식을 확인할 수 없기 때문에
// error 콜백이 호출될 수 있습니다.
// 예를 들어, dataType을 지정해서 응답 받을 데이터 형식을 지정하였지만,
// 서버에서는 다른 데이터형식으로 응답하면 error 콜백이 호출되게 됩니다.
},
complete : function(xhr, status) {
// success와 error 콜백이 호출된 후에 반드시 호출됩니다.
// try - catch - finally의 finally 구문과 동일합니다.
}
});
Jackson
Java Object를 JSON으로 변환하거나 JSON을 Java Object로 변환하는데 사용할 수 있는 Java 라이브러리
Jackson 특징
- Stream API : 성능이 좋다. (스트림 형식으로 데이터를 분석하고 생성하기 때문에)
- Tree Model : 유연성이 좋다. (XML의 DOM처럼 Node 형태로 데이터를 다룰 수 있기 때문에)
- Data Binding : POJO 기반의 자바 객체들을 JSON으로 변환시킬 수 있습니다.
Jackson 설정
위의 특징 중 3번째 특징을 활용한다.
jackson-databind 라이브러리는 jackson-core 및 jackson-annotation 라이브러리의 의존성을 포함한다.
따라서, Maven에서 jackson-databind 라이브러리만 추가하면 끝.
Maven Repository : https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.14.0</version>
</dependency>
Ajax를 이용한 아이디 중복검사 페이지 만들기
(1) View 제작
아이디 중복 검사 버튼 뿐만 아니라
맨 아래에 해당 버튼이 동작하기 위한 jQuery를 이용한 Ajax 구문도 넣는다.
<!-- registerAjax.jsp -->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<% request.setCharacterEncoding("UTF-8"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 가입 (AJAX)</title>
</head>
<body>
<!-- 메뉴바 -->
<jsp:include page="../common/topMenu.jsp" flush="false"/>
<h1 align="center">회원 가입(AJAX)</h1>
<div class="container">
<form class="form-horizontal" method="post" action="${contextPath}/member/register">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-6">
<h2 align="center">회원 가입(실시간 아이디 검사)</h2>
</div>
</div>
<div class="form-group">
<label for="id" class="col-sm-2 control-label">아 이 디</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="id" name="name" maxlength="20" placeholder="Enter ID"/>
</div>
<div class="col-sm-2">
<button class="idCheck btn btn-warning" type="button" id="idCheck"
onClick="fn_idCheck();" value="N">아이디 중복확인</button>
</div>
</div>
<div class="form-group">
<label for="id" class="col-sm-2 control-label">비밀번호</label>
<div class="col-sm-3">
<input type="password" class="form-control" id="pw" name="pw" maxlength="20" placeholder="Enter PASSWORD"/>
</div>
</div>
<div class="form-group">
<label for="id" class="col-sm-2 control-label">이 름</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="name" name="name" maxlength="50" placeholder="Enter NAME"/>
</div>
</div>
<div class="form-group">
<label for="id" class="col-sm-2 control-label">이메일</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="email" name="email" maxlength="50" placeholder="Enter Email"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="reset" class="btn btn-warning">입력취소</button>
<button type="button" class="btn btn-danger cancel">회원가입 취소</button>
<button type="submit" class="btn btn-success" id="submit">회원가입</button>
<button type="submit" class="btn btn-primary signUpBtn" disabled="disabled">회원가입</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="text" class="form-control msg" name="msg" placeholder="Message" id="msg"/>
</div>
</div>
</form>
</div>
</body>
<script>
function fn_idCheck() {
// alert($("#id").val());
$.ajax({
url: "/member/idCheck",
type: "post",
dataType: "json",
data: {"id" : $("#id").val()},
success: function(data) {
if(data == 1) {
alert("이미 사용 중인 아이디입니다.\n\n다른 아이디를 입력하십시오.");
} else if(data == 0) {
// 버튼 id="idCheck"의 속성인 value의 값을 "Y"로 변경한다.
$("#idCheck").attr("value", "Y");
alert("사용 가능한 아이디입니다.");
}
}
});
}
</script>
<script>
$(document).ready(function() {
// 취소 버튼이 눌렸을 경우 로그인 화면으로 이동한다.
$(".cancel").on("click", function() {
location.href = "/member/loginForm";
});
// 회원가입 버튼을 눌렀을 경우
$("#submit").on("click", function() {
// alert("회원가입 버튼을 누르셨습니다.");
if($("#id").val() == "") {
alert("아이디를 입력하셔야 합니다.");
$("#id").focus();
return false;
}
if($("#id").val().length < 4) {
alert("아이디는 최소 4자리를 입력하셔야 합니다.");
$("#id").focus();
return false;
}
if($("#pw").val() == "") {
alert("비밀번호를 입력하셔야 합니다.");
$("#pw").focus();
return false;
}
if($("#name").val() == "") {
alert("이름을 입력하셔야 합니다.");
$("#name").focus();
return false;
}
if($("#email").val() == "") {
alert("이메일을 입력하셔야 합니다.");
$("#email").focus();
return false;
}
});
// 아이디 입력란에 글자를 입력하면 실시간으로 사용가능한 아이디 인지 아닌지 검사한다.
$("#id").on("input", function() {
// alert("글자를 입력하셨습니다. => " + $("#id").val());
// 입력된 글자의 값을 변수에 저장한다.
let inputID = $("#id").val();
// 입력한 아이디가 서버에 존재하는 지 알아낸다.
$.ajax({
url: "/member/idCheck",
type: "post",
dataType: "json",
data: {"id" : $("#id").val()},
success: function(data) {
if(inputID == "" && data == '0') {
$(".signUpBtn").prop("disabled", true);
$(".signUpBtn").css("background-color", "#AAAAAA");
// document.getElementById("msg2").innerHTML = "아이디를 입력하십시오.";
document.getElementById("msg").value = "아이디를 입력하십시오.";
$("#msg").css("background-color", "#FFFFFF");
} else if(inputID != "" && data == '0' && inputID.length >= 4) {
// document.getElementById("msg2").innerHTML = "사용이 가능한 아이디입니다.";
document.getElementById("msg").value = "사용이 가능한 아이디입니다.";
$("#msg").css("background-color", "#B0F6AC");
$(".signUpBtn").prop("disabled", false);
$(".signUpBtn").css("background-color", "#4CAF50");
} else if(data == '1') {
$(".signUpBtn").prop("disabled", true);
$(".signUpBtn").css("background-color", "#AAAAAA");
// document.getElementById("msg2").innerHTML = "이미 사용 중인 아이디입니다.";
document.getElementById("msg").value = "이미 사용 중인 아이디입니다.";
$("#msg").css("color", "#FFFFFF");
$("#msg").css("background-color", "#FF3F80");
}
}
});
});
});
</script>
</html>
(2) Mapper
<!-- memberMapper.xml -->
<!-- 아이디 중복 검사 : 입력한 아이디가 존재하는지 알아낸다. -->
<select id="idCheck" parameterType="com.edu.member.vo.MemberVO" resultType="int">
<![CDATA[
SELECT COUNT(*)
FROM t_member
WHERE id = #{id}
]]>
</select>
(3) DAO
// DAO 인터페이스
//================================================================
// 아이디 중복 검사 (AJAX)
//================================================================
public int idCheck(MemberVO memberVO) throws DataAccessException;
// DAO
//================================================================
// 아이디 중복 검사 (AJAX)
//================================================================
@Override
public int idCheck(MemberVO memberVO) throws DataAccessException {
logger.info("MemberDAOImpl 아이디 중복 검사() 시작..." + memberVO.getId());
return sqlSession.selectOne(Namespace + ".idCheck", memberVO);
}
(4) Service
// service 인터페이스
//=====================================================
// 아이디 중복 검사 (AJAX)
//=====================================================
public int idCheck(MemberVO memberVO) throws Exception;
// service
//================================================================
// 아이디 중복 검사 (AJAX)
//================================================================
@Override
public int idCheck(MemberVO memberVO) throws Exception {
logger.info("MemberServiceImpl 아이디 중복 검사() 시작...");
int result = memberDAO.idCheck(memberVO);
return result;
}
(5) Controller
// 컨트롤러 인터페이스
//=====================================================
// 아이디 중복 검사 (AJAX)
//=====================================================
public int idCheck(MemberVO memberVO) throws Exception;
// member 컨트롤러
//=====================================================
// 회원가입 화면 불러오기 (AJAX)
//=====================================================
@Override
@RequestMapping(value = "/registerAjaxForm", method = RequestMethod.GET)
public String RegisterAjaxForm() throws Exception {
System.out.println("MemberController 회원가입 화면 불러오기 (AJAX) ==> ");
return "/member/registerAjax";
}
//=====================================================
// 아이디 중복 검사 (AJAX)
//=====================================================
@Override
@ResponseBody
@RequestMapping(value = "/idCheck", method = RequestMethod.POST)
public int idCheck(MemberVO memberVO) throws Exception {
System.out.println("MemberController 아이디 중복 검사 (AJAX) id ==> " + memberVO.getId());
int result = memberService.idCheck(memberVO);
System.out.println("result : " + result);
return result;
}
(6) 결과
728x90
반응형
'코딩수업 > AWS 클라우드환경 네이티브' 카테고리의 다른 글
| 11/16 웹 제작 - (0) | 2022.11.28 |
|---|---|
| 11/15 웹 제작 - 파일 업로드 / Maven Repository 참고사항 (0) | 2022.11.28 |
| 11/11 웹 제작 - 로그아웃 / 회원 가입 / 회원 리스트 목록 / 회원 정보 수정, 삭제 / Redirect 와 Forward (0) | 2022.11.24 |
| 11/10 웹 제작 - @Component와 @Bean / 도서 쇼핑몰 제작 (로그인) (0) | 2022.11.23 |
| 11/9 웹 제작 - contestPath / c.set 태그 / root-context / 도서 쇼핑몰 만들기 (View) / resources mapping (0) | 2022.11.21 |
댓글