Spring으로 Web프로젝트 만들기(2)

Seok_IN 2022. 4. 17. 18:31

회원가입 처리하기

1. index.html 에 회원가입 링크 만들어주기

<a class="nav-link" href="#" onclick="window.open('html/memberInsertForm.html', '_blank', 
			'toolbar=yes,scrollbars=yes,resizable=yes,top=50,left=500,width=400,height=750');">회원가입</a>

2. webapp/html/memberInsertForm.html 만들어주기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<script type="text/javascript" src="../js/my.js"></script>

</head>
<body>
	<article class="container">
            <div class="page-header">
                <div class="col-md-6 col-md-offset-3">
                <h3>회원가입 Form</h3>
                </div>
            </div>
            <div class="col-sm-6 col-md-offset-3">
                <form role="form">
                    <div class="form-group">
                        <label for="inputName">성명</label>
                        <input type="text" class="form-control" id="name" placeholder="이름을 입력해 주세요">
                    </div>
                    <div class="form-group">
                        <label for="InputEmail">ID</label>
                        <input type="text" class="form-control" id="id" placeholder="ID를 입력해주세요">
                    </div>
                    <div class="form-group">
                        <label for="inputPassword">비밀번호</label>
                        <input type="password" class="form-control" id="pw" placeholder="비밀번호를 입력해주세요">
                    </div>
                    <div class="form-group">
                        <label for="inputPasswordCheck">비밀번호 확인</label>
                        <input type="password" class="form-control" id="inputPasswordCheck" placeholder="비밀번호 확인을 위해 다시한번 입력 해 주세요">
                    </div>
                    <div class="form-group">
                        <label for="inputMobile">휴대폰 번호</label>
                        <input type="tel" class="form-control" id="inputMobile" placeholder="휴대폰번호를 입력해 주세요">
                    </div>
                    <div class="form-group">
                        <label for="inputtelNO">사무실 번호</label>
                        <input type="tel" class="form-control" id="inputtelNO" placeholder="사무실번호를 입력해 주세요">
                    </div>

                    <div class="form-group">

3. 화면확인하기

4. 회원가입 처리를 위한 my.js 만들기

$(document).ready(function(){
	$("#memberInsertBtn").click(function(){//회원 가입 처리
	
		var name=$("#name").val();
		var id=$("#id").val();
		var pw=$("#pw").val();
		
		//alert(name+":"+id+":"+pw);
		
		$.post("../memberInsert.jes",
			  {
			    name:name,
			    id:id,
			    pw:pw
			  },
			  function(data, status){
			    alert( data);
			  });
		
	});

});

5. HomeController 수정

@Controller
public class HomeController {
	
	@RequestMapping(value = "memberInsert.jes", 
			method= {RequestMethod.POST},
			produces = "application/text; charset=utf8")
			
	@ResponseBody
	public String memberInsert(HttpServletRequest request,
			HttpServletResponse response)throws Exception{
		String id=request.getParameter("id");
		String pw=request.getParameter("pw");
		String name=request.getParameter("name");
		System.out.println("memberInsert:"+id+"\t"+pw+"\t"+name);
	
		return name;
		
	}		
}

6. alert가 정확히 뜨는지 확인하기

7. myBatis 사용을 위해 pom.xml에 의존성 추가

<!-- https://mvnrepository.com/artifact/commons-beanutils/commons-beanutils -->
<dependency>
    <groupId>commons-beanutils</groupId>
    <artifactId>commons-beanutils</artifactId>
    <version>1.8.0</version>
</dependency>

<!-- https://mvnrepository.com/artifact/commons-dbcp/commons-dbcp -->
<dependency>
    <groupId>commons-dbcp</groupId>
    <artifactId>commons-dbcp</artifactId>
    <version>1.2.2</version>
</dependency>

<!-- https://mvnrepository.com/artifact/cglib/cglib -->
<dependency>
    <groupId>cglib</groupId>
    <artifactId>cglib</artifactId>
    <version>2.2</version>
</dependency>


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

8. WEB-INF/spring/action-mybatis.xml 생성

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.0.xsd
http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-2.0.xsd
http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-2.0.xsd">

	<bean id="propertyPlaceholderConfigurer"
		class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer"
	>
		<property name="locations">
			<list>
				<value>/WEB-INF/config/jdbc/jdbc.properties</value>
			</list>
		</property>
	</bean>
	
	<bean id="dataSource" class="org.apache.ibatis.datasource.pooled.PooledDataSource">
		<property name="driver" value="${jdbc.driverClassName}"></property>
		<property name="url" value="${jdbc.url}"></property>
		<property name="username" value="${jdbc.username}"></property>
		<property name="password" value="${jdbc.password}"></property>
	</bean>
	
	<bean id="sqlSessionFactoryBean" class="org.mybatis.spring.SqlSessionFactoryBean">
		<property name="dataSource" ref="dataSource"></property>
		<property name="configLocation" value="classpath:mybatis/model/modelConfig.xml"></property>
		<property name="mapperLocations" value="classpath:mybatis/mappers/*.xml"></property>
	</bean>
	
	<bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate">
		<constructor-arg index="0" ref="sqlSessionFactoryBean"></constructor-arg>
	</bean>
	

	
	<bean id="txManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
		<property name="dataSource" ref="dataSource"></property>		
	</bean>
	
	<tx:annotation-driven transaction-manager="txManager" />
</beans>

9. WEB-INF/web.xml에서 context-param 수정

<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>/WEB-INF/spring/action-mybatis.xml</param-value>
	</context-param>

10. WEB-INF/config/jdbc/jdbc.properties 생성

jdbc.driverClassName=oracle.jdbc.driver.OracleDriver
jdbc.url=jdbc:oracle:thin:@localhost:1521:XE
jdbc.username=cafe
jdbc.password=1234

11. src/main/resources/mybatis/model/modelConfig.xml 만들기

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

<configuration>

	<typeAliases>
		<typeAlias type="my.jes.web.vo.MemberVO" alias="memberVO"/>
	</typeAliases>

</configuration>

12. src/main/resources/mybatis/mappers/member.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="mapper.member">
	<resultMap type="memberVO" id="memResult">
		<result property="id" column="memid" />
		<result property="pw" column="pw" />
		<result property="name" column="memname" />
		<result property="date" column="memdate" />
	</resultMap>
	
	<select id="selectAllMemberList" resultMap="memResult">
		<![CDATA[
			select * from member order by memdate desc
		]]>
	</select>
	
	<select id="login" resultType="String" parameterType="memberVO">
		<![CDATA[
			select memname from member where memid=#{id} and pw=#{pw}
		]]>
	</select>
	
	<select id="selectMemberById" resultMap="memResult" parameterType="String">
		<![CDATA[
			select * from member where memid=#{id}
		]]>
	</select>
	
	<select id="selectMemberByPw"  resultMap="memResult" parameterType="String">
		<![CDATA[
			select * from member where pw=#{pw}
		]]>
	</select>
	
	<insert id="memberInsert"   parameterType="memberVO" >
		<![CDATA[
			insert into member(memid,pw,memname) 
			values(#{id},#{pw},#{name})
		]]>
	</insert>
	
	<update  id="updateMember"  parameterType="memberVO" >
		<![CDATA[
			update member
			set pw=#{pw}, memname=#{name}
			where memid=#{id}
		]]>
	</update>
	
	<delete id="deleteMember" parameterType="String">
		<![CDATA[
			delete from member where memid=#{id}
		]]>
	
	</delete>
	

</mapper>

14. 에러 처리를 위한 MyException 작성

package my.jes.web.util;

public class MyException extends Exception {

	public MyException(String message) {
		super(message);
		
	}
}

15. MemberVO 만들기

package my.jes.web.vo;

import my.jes.web.util.MyException;

public class MemberVO {
	
	private String id,pw,name;
	
	

	public MemberVO(String id, String pw, String name) throws MyException {
		
		this(id,pw);
		setName(name);
	}

	public MemberVO(String id, String pw) throws MyException {
		super();
		setId(id);
		setPw(pw);
	}

	public MemberVO() {
		super();
		// TODO Auto-generated constructor stub
	}

	public String getId() {
		return id;
	}

	public void setId(String id) throws MyException {
		if(id!=null) {
			this.id = id;
		}else {
			throw new MyException("id가 입력되지 않았습니다");
		}
	}

	public String getPw() {
		return pw;
	}

	public void setPw(String pw) throws MyException {
		if(pw!=null) {
			this.pw = pw;
		}else {
			throw new MyException("pw가 입력되지 않았습니다");
		}
	}

	public String getName() {
		return name;
	}

	public void setName(String name) throws MyException {
		if(name!=null) {
			this.name = name;
		}else {
			throw new MyException("name가 입력되지 않았습니다");
		}
	}

	@Override
	public String toString() {
		return "MemberVO [id=" + id + ", pw=" + pw + ", name=" + name + "]";
	}	

}

16. MemberDAO 만들기

package my.jes.web.dao;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import my.jes.web.vo.MemberVO;

@Repository
public class MemberDAO {
	@Autowired
	SqlSession sqlSession;
	
	public void memberInsert(MemberVO m) {
		sqlSession.insert("mapper.member.memberInsert",m);
	}
	
}

17. MemberService 만들기

package my.jes.web.service;

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

import my.jes.web.dao.MemberDAO;
import my.jes.web.vo.MemberVO;

@Service
public class MemberService {
	@Autowired
	MemberDAO memberDAO;
	
	public void memberInsert(MemberVO m) throws Exception{
		memberDAO.memberInsert(m);
	}
}

18. Home Controller 수정

package my.jes.web;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import my.jes.web.service.MemberService;
import my.jes.web.vo.MemberVO;

@Controller
public class HomeController {
	
	
	@Autowired MemberService memberService;
	 
	@RequestMapping(value = "memberInsert.jes", 
			method= {RequestMethod.POST},
			produces = "application/text; charset=utf8")			
	@ResponseBody
	public String memberInsert(HttpServletRequest request,
			HttpServletResponse response){
		String id=request.getParameter("id");
		String pw=request.getParameter("pw");
		String name=request.getParameter("name");
		System.out.println("memberInsert:"+id+"\t"+pw+"\t"+name);
		
		try {
			MemberVO m=new MemberVO(id,pw,name); 
			memberService.memberInsert(m);
			return name+"님 회원가입 되셨습니다";
		}catch(Exception e) {
			return e.getMessage();
		}		
	}
}

19. my. js 수정

$(document).ready(function(){
	$("#memberInsertBtn").click(function(){//회원 가입 처리
	
		var name=$("#name").val();
		var id=$("#id").val();
		var pw=$("#pw").val();
		
		//alert(name+":"+id+":"+pw);
		
		$.post("../memberInsert.jes",
			  {
			    name:name,
			    id:id,
			    pw:pw
			  },
			  function(data, status){	
			  	alert(data);		    
				window.close();
			   
			  });
		
	});

});

DB 만들기

MySQL WorkBench 이용

1. 스키마 생성

create database cafe;

2. 테이블 생성

create table member(
no int primary key auto_increment,
name varchar(20),
id varchar(20),
pw varchar(500),
email varchar(45)
);

20. 결과확인하기

저작자표시 (새창열림)