spring - 회원제 게시판 구현하기 - [아이디 중복확인]회원 가입(1)(2022-11-05)

1. 서론

이제 페이지도 이어봤겠다. 해당 페이지를 이용하기 위해선 회원가입을 해야하니 먼저

회원가입부터 해보도록 하자.

 

2. 본론

 

먼저 아이디 중복 확인을 해보도록 하자.!!!!!!!!!!!!!!!!!

 

pow.xml은 밑작업에서 올렸던 것을 그대로 사용할 예정이다.

 

<!-- https://mvnrepository.com/artifact/com.oracle.database.jdbc/ojdbc6 -->
<dependency>
<groupId>com.oracle.database.jdbc</groupId>
<artifactId>ojdbc6</artifactId>
<version>11.2.0.4</version>
</dependency>

<!-- https://mvnrepository.com/artifact/com.zaxxer/HikariCP -->
<dependency>
<groupId>com.zaxxer</groupId>
<artifactId>HikariCP</artifactId>
<version>4.0.3</version>
</dependency>

<!-- https://mvnrepository.com/artifact/org.springframework/spring-jdbc -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>${org.springframework-version}</version>
</dependency>

<!-- https://mvnrepository.com/artifact/org.mybatis/mybatis -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.5.11</version>
</dependency>

<!-- https://mvnrepository.com/artifact/org.mybatis/mybatis-spring -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>2.0.1</version>
</dependency>

그게 아니면 위와 같이 추가해주도록 하자.

 

DatabaseConfig.java

package com.care.pra.membership.config;

import java.io.IOException;

import org.mybatis.spring.SqlSessionFactoryBean;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.io.support.PathMatchingResourcePatternResolver;

import com.zaxxer.hikari.HikariConfig;
import com.zaxxer.hikari.HikariDataSource;

@Configuration
@MapperScan(basePackages = {"DAO가 있는 패키지"})
public class DatabaseConfig {
	
	@Bean
	public HikariDataSource dataSource() {
		HikariConfig hikariConfig = new HikariConfig();
		hikariConfig.setDriverClassName("oracle.jdbc.OracleDriver");
		hikariConfig.setJdbcUrl("jdbc:oracle:thin:@localhost:1521:xe");
		hikariConfig.setUsername("시스템에서 권한 받은 아이디");
		hikariConfig.setPassword("오라클 설치 시 설정한 비밀번호");
		HikariDataSource dataSource = new HikariDataSource(hikariConfig);
		return dataSource;
	}

	@Bean
	public SqlSessionFactoryBean sqlSessionFactory() throws IOException {
		SqlSessionFactoryBean sqlSessionFactory = new SqlSessionFactoryBean();
		sqlSessionFactory.setDataSource(dataSource());
		PathMatchingResourcePatternResolver resovler = new PathMatchingResourcePatternResolver();
		sqlSessionFactory.setMapperLocations(resovler.getResources("/mappers/**/*Mapper.xml"));
		return sqlSessionFactory;
	}
}

 

 

mapper.xml의 경로는 위와 같다.

 

memberMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.care.pra.membership.dao.IMemberDAO">
	
	<select id="isExistId" parameterType="String" resultType="int">
		SELECT count(*) FROM login WHERE id=#{id}
	</select>
	
</mapper>

 

테이블을 구성해줄텐데 테이블은 다음과 같다.

 

 

이제 이 테이블을 토대로 각각의 DTO를 만들도록 하자.

그전에?

필자가 만든 패키지는 다음과 같다.

 

 

중복확인이 되는지 실험해보기 위해 LoginDTO를 만들고 아이디를 등록해보자.

 

LoginDTO.java

package com.care.pra.membership.dto;

/*
SQL> CREATE TABLE login(
 2 id varchar2(20),
 3 pw varchar2(128),
 4 CONSTRAINT pk_login PRIMARY KEY (id)
 5 );
Table created.

SQL> INSERT INTO login VALUES('admin', '1234');
1 row created.

SQL> commit;

Commit complete.
*/

public class LoginDTO {
	private String id;
	private String pw;
	
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getPw() {
		return pw;
	}
	public void setPw(String pw) {
		this.pw = pw;
	}
	
	
}

 

memberForm.jsp에서 이제 약간의 손을 좀 볼 예정이다.

 

memberForm.jsp(아이디 중복확인하기)

 

<script>
var req;
function isExistId(){
	req = new XMLHttpRequest();
	req.onreadystatechange = printMsg;
	req.open('post', 'isExistId');
	req.send(document.getElementById('id').value);
	}
	function printMsg(){
	var msg = document.getElementById('msg');
	msg.innerHTML = req.responseText;
	}
</script>
<center>
	<h3>
		<font color="red" id="msg">${msg } </font>
	</h3>
<table>
	<tr>
		<td align='right' height=40>아이디</td>
		<td>
			<input type=text name='id' placeholder='id 입력' id="id"/> 
		</td>
		<td colspan="2"><input type="button" value="중복 확인" onclick="isExistId()"></td>
	</tr>

아이디 입력 텍스트 칸에 id="id"로 지정하고, 중복 확인을 클릭했을 때 이벤트가 작동할 onclick함수를 지정해주었다.

 

onclick에 대한 함수는 <script> </script>에 작성하는데 ajax통신이 이루어져 페이지 전환이 이루어지지 않고 데이터만

전송하도록 하였다.

 

이제 ajax로 보낸 녀석을 MemberController.java로 받아서 MemberServiceImpl.java부분으로 보내어 검증하고 결과를 Controller로 다시 보내 Controler가 받은 결과 값을 MemberForm에서 띄어주면 된다.

 

MemberController.java

package com.care.pra.membership;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;

import com.care.pra.membership.service.MemberServiceImpl;

@Controller
public class MemberController {
	@Autowired
	private MemberServiceImpl memberService;

//	아이디 중복확인 시작====================================================================
	
	@PostMapping(value = "isExistId", produces = "application/json; charset=UTF-8")
	@ResponseBody
	public String isExistId(@RequestBody(required = false) String id) {
		String msg = memberService.isExistId(id);
		return msg;
	}
	
//	아이디 중복확인 도착====================================================================
}

 

IMemberService.java

package com.care.pra.membership.service;

public interface IMemberService {

	//아이디 중복 확인
	public String isExistId(String id);
}

 

MemberServiceImpl.java

package com.care.pra.membership.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.care.pra.membership.dao.IMemberDAO;

@Service
public class MemberServiceImpl implements IMemberService{
@Autowired private IMemberDAO memberDao;

// 아이디 중복 확인 검증 시작========================================

	@Override
	public String isExistId(String id) {
		if(id == null)
		return "아이디를 입력 후 다시 시도해주세요.";
		
		int count = memberDao.isExistId(id);
		if(count == 1)
			return "중복된 아이디 입니다.";
		
		return "사용가능한 아이디 입니다.";
	}
	
// 아이디 중복 확인 검증 도착========================================
}

 

IMemberDAO.java

package com.care.pra.membership.dao;

import org.springframework.stereotype.Repository;

@Repository
public interface IMemberDAO {
	
	//아이디 중복 확인
	int isExistId(String id);
}

 

이와 관련된 예제는 요기!!

2022.10.25 - [3층 - 개발의 장/ajax통신] - ajax - ajax를 이용해 아이디 중복체크 하는 예제 (2022-10-24)

ajax - ajax를 이용해 아이디 중복체크 하는 예제 (2022-10-24)

흐름은 되도록 상세(필자 기준)하게 정리해두었으니 기억 안 난다면 다시 한번 확인해 보는 것도 나쁘지 않을 거 같다.

 

 

이제 결과를 확인해 보도록 하자.

 

회원가입 페이지에 진입했고 여기서 id == null이면?

 

 

메세지가 잘 출력된다.

 

그럼 기존에 있는 아이디일 경우는?

 

 

중복된 아이디라고 잘 출력되는 것을 볼 수 있다.

 

그럼 사용가능할만한 아이디를 타이핑 해보자.

잘 출력된다.

이렇게 첫번째 단계가 완료되었다.

 

3. 결론

 

아이디 중복체크 관해서는 별 거 없다.

다만....ajax에 대한 흐름이 얼마나 이해되었는가? 에 따라 해당 코드를 이해할 수 도 있고, 못 할 수도 있다 정도??