[TIL] 23.04.19 스프링

어제한 tiles 미니 프로젝트 이어서

오시는길

web inf 에 load폴더에 map.jsp

ipgocontroller.class는

오시는길로 가기 .... 쌍용교육센터..sub레이아웃으로 나오기.

<iframe src=" https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3165.3658219668437!2d127.03062587647582!3d37.499289227980356!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca1c32408f9b7%3A0x4e3761a4f356d1eb!2z7IyN7Jqp6rWQ7Jyh7IS87YSw!5e0!3m2!1sko!2skr!4v1681864044308!5m2!1sko!2skr " width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

 

구글 맵의 지도 퍼가기를 이용해서 iframe 태그를 가져온다.그걸 오시는길 누르면 sub에 보이게 한다.

 

sub로(레이아웃2) 안나타나게 하려면 sub를 지운다.

 

그후 회원가입

테이블먼저만드는데 member가 이미 있어서 bootmember로 만듬

create table bootmember (num smallint auto_increment primary key,
name varchar(20),
id varchar(20),
pass varchar(20),
photo varchar(100),
hp varchar(30),
addr varchar(30),
email varchar(100),
gaipday datetime)

 

MemberDto만들어준다. boot.data.dto에

package boot.data.dto;

import java.sql.Timestamp;
import org.apache.ibatis.type.Alias;
import lombok.Data;

@Data
@Alias("MemberDto")
public class MemberDto {
	public String num;
	public String id;
	public String name;
	public String pass;
	public String photo;
	public String hp;
	public String addr;
	public String email;
	public Timestamp gaipday;
}

src/main/java의 boot.data.mapper에 MemberMapperInter도 만들어준다.(처음만들때는 빈인터페이스 나중에 sql.xml 적고 적어준다)

package boot.data.mapper;

import java.util.List;
import org.apache.ibatis.annotations.Mapper;
import boot.data.dto.MemberDto;

@Mapper
public interface MemberMapperInter {
	public List<MemberDto> getAllMembers();
	public void insertMember();
	public int getSearchId(String id);
}

 

 

src/main/java에 boot.data.service 패키지도 만들어준다.

그 안에 인터페이스와 클래스를 만든다. MemberServiceInter, MemberService(class) 둘이 상속관계로 만든다.(처음에는 빈인터페이스 , 빈클래스임 나중에 sql하고 적는다)

package boot.data.service;

import java.util.List;

import boot.data.dto.MemberDto;

public interface MemberServiceInter {
	public List<MemberDto> getAllMembers();
	public void insertMember();
	public int getSearchId(String id);
}

 

package boot.data.service;

import java.util.List;

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

import boot.data.dto.MemberDto;
import boot.data.mapper.MemberMapperInter;

@Service
public class MemberService implements MemberServiceInter {
	
	@Autowired
	MemberMapperInter mapper;
	
	@Override
	public List<MemberDto> getAllMembers() {
		// TODO Auto-generated method stub
		return mapper.getAllMembers();
	}

	@Override
	public void insertMember() {
		// TODO Auto-generated method stub
		mapper.insertMember();
	}

	@Override
	public int getSearchId(String id) {
		// TODO Auto-generated method stub
		return mapper.getSearchId(id);
	}
	
}

 

src/main/resources에 mapper폴더에 MemberSql.xml도 만들어준다.

namespace도 수정해준다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTDMapper3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="boot.data.mapper.MemberMapperInter">
	<select id="getAllMembers" resultType="MemberDto"><!-- 인터페이스명과 같아야함 -->
		select * from bootmember order by id asc
	</select>
	
	<insert id="insertMember" parameterType="MemberDto">
		insert into bootmember (name,id,pass,photo,hp,addr,email,gaipday) values(#{name},#{id},#{pass},#{photo},#{hp},#{addr},#{email},now)
	</insert>
	
	<!-- id중복체크 -->
	<select id="getSearchId" parameterType="String" resultType="int">
		select count(*) from bootmember where id = #{id}
	</select>
</mapper>

 

 

 

방금 MemberSql.xml에 적은 내용을 MemberMapperInter에 적는다. 위의 코드에는 미리적어둠.

 

그걸 MemberServiceInter에 적는다.이것도 위의 코드에는 미리적어둠

그후 MemberService에 MemberServiceInter를 autowired해주고 MemberServiceInter에 적힌것을 적는다.(영상참고)

 

멤버 컨트롤러로 가서

멤버리스트(회원목록)뜨게 해준다.

@GetMapping("/member/list")
public String list(Model model) {

    //전체 조회 불러오기
    List<MemberDto> list = service.getAllMembers();
    model.addAttribute("list", list);
    model.addAttribute("count", list.size());

    return "/member/memberlist";
}

메서드 타입을String으로 만들어서 파라미터로 Model을 받아 model.addattribute로 넘긴다.

 

 

 

멤버컨트롤러에 이전에 만든 서비스를 autowired해준다. dao가 서비스로 변한것같음.

@Autowired
MemberService service;

 

 

멤버폼도만든다. webinf아래에 member에 memberform.jsp 전체코드

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ 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>
	<link href="https://fonts.googleapis.com/css2?family=Anton&family=Edu+VIC+WA+NT+Beginner:wght@600&family=Gamja+Flower&family=Single+Day&family=Jua&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
	<style type="text/css">
		#showimg {
			border: 1px solid gray;
			width:130px;
			height: 160px;
		}
	</style>
	<script type="text/javascript">
		$(function(){
			//버튼클릭시 사진불러오는 이벤트 추가
			$("#btnphoto").click(function() {
				$("#myphoto").trigger("click");
				
			});
			
			//사진 불러오면 미리보기하기
			$("#myphoto").change(function(){
				if($(this)[0].files[0]) {
					var reader=new FileReader();
				  	reader.onload=function(e){
				   		$("#showimg").attr("src",e.target.result);
					}
					reader.readAsDataURL($(this)[0].files[0]);
				}
			});
			
			//아이디 입력시 idsuccess값 지원
			$("#loginid").keydown(function() {
				$("span.idsuccess").text("");
			});
			
			
			//중복체크 버튼 출력시 아이디체크 ajax로
			$("#btnidcheck").click(function() {
				$.ajax({
		            type: "get",
		            url:"idcheck",//넘어가는위치
		            data:{"id":$("#loginid").val()},//넘길 값
		            dataType:"json", 
		            success : function(res){ //res == {count:1}
		                if(res.count == 0) {//컨트롤러에서 map에 키값을 count로 설정함.
		                	
		                    $("span.idsuccess").text("ok");
		                    $("span.idsuccess").css("color","green");
		                } else {
		                	$("span.idsuccess").css("color","red");
		                	$("span.idsuccess").text("중복있음");
		                }
		            }
		        });
			})
			
			//2번째 비밀번호 입력시 체크
			$("#pass2").keyup(function() {
				var p1 = $("#pass").val();
				var p2 = $(this).val();
				
				if(p1 == p2) {
					$("span.passsuccess").text("ok");
				} else {
					$("span.passsuccess").text("fail");
				}
			});
			
		});
		
		//submit 전에 호출
		function check(){
			//사진
			if($("#myphoto").val()==''){
				alert("사진을 넣어주세요");
				return false;
			}
			
			//아이디 중복체크
			if($("span.idsuccess").text() != 'ok') {
				alert("아이디 중복체크를 해주세요");
				return false;
			}
			
			//비밀번호
			if($("span.passsuccess").text() != 'ok') {
				alert("비밀번호가 서로다릅니다.");
				return false;
			}
		}
	</script>
</head>
<body>
<button type="button" class="btn btn-info" onclick="location.href='list'">전체 회원 목록</button>
<form action="insert" method="post" enctype="multipart/form-data" onsubmit="return check()">
	<table class="table table-bordered" style="width: 600px;">
		<caption><b>회원가입</b></caption>
		<tr>
			<td style="width:200px;" rowspan="4" align="center">
				<input type="file" id="myphoto" name="myphoto" style="display: none;">
				<button type="button" id="btnphoto" class="btn btn-success" >사진선택</button>
				<br>
				<img id="showimg">
			</td>
			
			<td>
				<div class="form-inline">
					<input type="text" placeholder="아이디입력:" id="loginid" name="id" class="form-control" style="width:120px;" required="required">
					<button type="button" class="btn btn-danger" id="btnidcheck">중복체크</button>
					&nbsp;<span class="idsuccess" style="width: 60px; color: green;"></span>
				</div>
			</td>
		</tr>
		
		<tr>
			<td>
				<div class="form-inline">
					<input type="password" style="width:120px" class="forn-control" name="pass" id="pass" placeholder="숫자4자리" required="required">
					<input type="password" style="width:120px" class="forn-control" name="pass2" id="pass2" placeholder="비밀번호확인" required="required">
					
					&nbsp;<span class="passsuccess" style="width:60px;"></span>
				</div>
			</td>
		</tr>
		
		<tr>
			<td>
				<input type="text" name="name" class="form-control" style="width:130px;" placeholder="이름을 입력" required="required">
			</td>
		</tr>
		
		<tr>
			<td>
				<input type="email" name="email" class="form-control" style="width:130px;" placeholder="이메일을을 입력" required="required">
			</td>
		</tr>
		
		<tr>
			<td colspan="2">
				<div class="form-inline">
					<input type="text" name="hp" class="form-control" style="width:200px;" placeholder="(-)없이 hp숫자만 입력" required="required">
					<input type="text" name="addr" class="form-control" style="width: 200px;" placeholder="간단주소입력" required="required">
				</div>
			</td>
		</tr>
		
		<tr>
			<td colspan="2" align="center">
				<button type="submit" class="btn btn-info">회원가입</button>
			</td>
		</tr>
		
	</table>
</form>

</body>
</html>

 

 

onsubmit도 해준다 submit으로 넘어가기전에 다시한번 체크해준다는 의미

그 안에jquery 이벤트 코드 짠다

사진선택 버튼 눌렀을때 사진선택하는 창과 선택했을때 이미지가 뜨게하는것들.

 

멤버 컨트롤러(MemberController.java)에서 중복체크에 관한 메서드를 만들어준다.

//중복체크에 관한 메서드 만들기
@GetMapping("/member/idcheck")
@ResponseBody //json 반환 파싱
public Map<String, Integer> idCheckPass(@RequestParam String id) {
    Map<String , Integer> map = new HashMap<>();

    //id
    int n = service.getSearchId(id);
    map.put("count", n); // 0 or 1 ("count": 0)

    return map; 
}

 

 

 

jsp 페이지의 아이디를 중복체크하는 jquery(ajax)의 로직 코드는 아래와같다.

//<!-- $function 안에-->
//중복체크 버튼 출력시 아이디체크 ajax로
$("#btnidcheck").click(function() {
    $.ajax({
        type: "get",
        url:"idcheck",//넘어가는위치
        data:{"id":$("#loginid").val()},//넘길 값
        dataType:"json", 
        success : function(res){ //res == {check:1}
            if(res.count == 0) {

                $(".idsuccess").text("ok");
                //location.reload();//새로고침
            } else {
                $("span.idsuccess").css("color","red");
                $("span.idsuccess").text("중복있음");
            }
        }
    });
})

 

1. 사진 버튼 눌렀을때 사진선택창 나오게하고,
2. 사진선택 하면 이미지 태그에 사진 뜨게하는 jquery코드($functoin안에)

3. 아이디를 입력 중이면 "중복있음", "ok" 글씨 지우기.

//버튼클릭시 사진불러오는 이벤트 추가
$("#btnphoto").click(function() {
    $("#myphoto").trigger("click");

});

//사진 불러오면 미리보기하기
$("#myphoto").change(function(){
    if($(this)[0].files[0]) {
        var reader=new FileReader();
        reader.onload=function(e){
            $("#showimg").attr("src",e.target.result);
        }
        reader.readAsDataURL($(this)[0].files[0]);
    }
});

//아이디 입력시 기존의 중복 메세지 지워주기
$("#loginid").keydown(function() {
    $("span.idsuccess").text("");
});

 

 

비밀번호 입력 창 두개 비교해서 같은지 다른지 판별

//2번째 비밀번호 입력시 체크
$("#pass2").keyup(function() {
    var p1 = $("#pass").val();
    var p2 = $(this).val();

    if(p1 == p2) {
        $("span.passsuccess").text("ok");
    } else {
        $("span.passsuccess").text("fail");
    }
});

 

form에서 submit 하기전에 호출되는 함수

//submit 전에 호출
function check(){
    //사진
    if($("#myphoto").val()==''){
        alert("사진을 넣어주세요");
        return false;
    }

    //아이디 중복체크
    if($("span.idsuccess").text() != 'ok') {
        alert("아이디 중복체크를 해주세요");
        return false;
    }

    //비밀번호
    if($("span.passsuccess").text() != 'ok') {
        alert("비밀번호가 서로다릅니다.");
        return false;
    }
}

 

 

 

 

 

회원목록 리스트로 구현(삭제버튼도)