Spring Boot - Sign up member 🐱‍🏍

화이티 ·2024년 1월 9일

Spring boot sign-up

SpringBoot

목록 보기

2/3

Repository

MemberRepository interface

Repository ~ myBatis:scan

이파일이 jpa repository임을 명시, scan되도록 함
repository는 반드시 jpaRepository interface를 상속 받아야함!!
JpaRepository<T,ID>
T: table과 연과된 entity (db)
ID: entity 내 pk(id)의 자료형
jpa 사용하면 sql문 쓰지 말자!

package com.smhrd.repository;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

import com.smhrd.entity.Tbl_Member;


@Repository 
public interface MemberRepository extends JpaRepository<Tbl_Member, String>{
	
}

Entity (DTO)

Tbl_Member.java

DTO: Data Transfer Object

db의 table에서 컬럼이 dto의 필드로 존재해야함 (이름도 같아야함)
반드시 필드들에 대한 Getter/Setter 있어야함
기본생성자가 있어야만함 (Spring, Mybatis)
ORM
Java 객체와db의 table이 연결
java dto 를 설계만 해도 DB에 데이블이 자동으로 생성

package com.smhrd.entity;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Id;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Entity
@AllArgsConstructor  //전체 필드를 초기화하는 생성자
@NoArgsConstructor //기본생성자
@Data // Getter/Setter
public class Tbl_Member {
    @Id
	@Column (length = 50, updatable = false )
	private String email;
	//pw
	@Column (length = 50, nullable = false )
	private String pw;
	//tel
	private String tel;
	//address
	private String address;
}

Controller

MemberController.java

package com.smhrd.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import com.smhrd.entity.Tbl_Member;
import com.smhrd.repository.MemberRepository;

@Controller
@RequestMapping("/guest")
public class MemberController {
		//interface-> 추상메소드 밖에 없음 -> 객체 생성 불가
	@Autowired // Spring 메모리 (spring container)내에서 넣러줄 수 임ㅅ는 객체를 얼아서 찾아
	private MemberRepository repo;
	
	
	//http://localhost:8088/{contextpath}/{mapping}/{URLMapping}
	//http: localhost:8088/boot/main
	//main이라고 요청했을때 ,main.jsp 로 이동
	@RequestMapping ("/main")
	public String goMain() {
		
		return "guest/main";
	}
	@RequestMapping("/join")
	public String join(Tbl_Member member) {
	// 1. 데이터 수집
	//2. 로직 실행
		//수집한 정보를 db에 저장하는 코드
	// 3. View 선택 / 데이터 응답
//jpa 의 save: 
		//1. ID를 기준으로 select
		//2. 있으면 --> update
		//없으면 --> insert
		repo.save(member);
		return "guest/join_success";
	}
	
}

Main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
<!--  Context path값을 받아올 수 있도록 -->
<%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c"  %>
<% String cpath = request.getContextPath(); 
    pageContext.setAttribute("cpath",cpath);
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Forty by HTML5 UP</title>
		<meta charset="UTF-8" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<!--  href나 src 속성안에서 폴더 명으로 시작하는 경우
		>> https://localhost:8088/{ContextPath}/{mapping}/+"href || src"
		>> 잘못된 경로
		/로 시작하는 경유
		>> http: //localhost: 8088/+ "href || src"
		 -->
		<link rel="stylesheet" href="${cpath}/assets/css/main.css" />
	</head>
	<body>

		<!-- Wrapper -->
			<div id="wrapper">

				<!-- Header -->
					<header id="header" class="alt">
						<a href="index.html" class="logo"><strong>Forty</strong> <span>by HTML5 UP</span></a>
						<nav>
								<a href="#menu">로그인</a>
							<!--Ex07. 로그인 한 상태라면 '게시판'버튼과 '개인정보수정', '로그아웃' 버튼을 출력하시오. -->
						</nav>
					</header>

				<!-- Menu -->
					<nav id="menu">	
						<ul class="links">
							<%--Ex07. 로그인 기능 만들기 : 사용자에게 정보를 입력받아 회원인지 아닌지 조회하는 기능을 만들어 봅시다. --%>
							<li><h5>로그인</h5></li>
								<form>
									<li><input type="text"  placeholder="Email을 입력하세요"></li>
									<li><input type="password"  placeholder="PW를 입력하세요"></li>
									<li><input type="submit" value="LogIn" class="button fit"></li>
								</form>
						</ul>
						<ul class="actions vertical">
							<%--Ex06. 회원가입 기능 만들기 : 사용자에게 정보를 입력받아 저장하는 기능을 만들어 봅시다. --%>
							<li><h5>회원가입</h5></li>
							<!--  /boot/guest/join -->
								<form action = "${cpath}/guest/join" method = "post">
									<li><input name = "email" type="text"  placeholder="Email을 입력하세요"></li>
									<li><input name = "pw" type="password"  placeholder="PW를 입력하세요"></li>
									<li><input name = "tel" type="text"  placeholder="전화번호를 입력하세요"></li>
									<li><input name = "address" type="text"  placeholder="집주소를 입력하세요"></li>
									<li><input type="submit" value="JoinUs" class="button fit"></li>
								</form>
						</ul>
					</nav>			
				<!-- Banner -->
					<section id="banner" class="major">
						<div class="inner">
							<header class="major">
								<%--Ex07. 로그인 후 로그인 한 사용자의 세션아이디로 바꾸시오. ex)smart님 환영합니다 --%>
									<h1>로그인 한 세션아이디를 출력해주세요</h1>
							</header>
							<div class="content">
								<p>아래는 지금까지 배운 웹 기술들입니다.<br></p>
								<ul class="actions">
									<li><a href="#one" class="button next scrolly">확인하기</a></li>
								</ul>
							</div>
						</div>
					</section>

				<!-- Main -->
					<div id="main">

						<!-- One -->
							<section id="one" class="tiles">
								<article>
									<span class="image">
										<img src="${cpath}/images/pic01.jpg" alt="" />
									</span>
									<header class="major">
										<h3><a href="#" class="link">HTML</a></h3>
										<p>홈페이지를 만드는 기초 언어</p>
									</header>
								</article>
								<article>
									<span class="image">
										<img src="${cpath}/images/pic02.jpg" alt="" />
									</span>
									<header class="major">
										<h3><a href="#" class="link">CSS</a></h3>
										<p>HTML을 디자인해주는 언어</p>
									</header>
								</article>
								<article>
									<span class="image">
										<img src="${cpath}/images/pic03.jpg" alt="" />
									</span>
									<header class="major">
										<h3><a href="#" class="link">Servlet/JSP</a></h3>
										<p>Java를 기본으로 한 웹 프로그래밍 언어/스크립트 언어</p>
									</header>
								</article>
								<article>
									<span class="image">
										<img src="${cpath}/images/pic04.jpg" alt="" />
									</span>
									<header class="major">
										<h3><a href="#" class="link">JavaScript</a></h3>
										<p>HTML에 기본적인 로직을 정의할 수 있는 언어</p>
									</header>
								</article>
								<article>
									<span class="image">
										<img src="${cpath}/images/pic05.jpg" alt="" />
									</span>
									<header class="major">
										<h3><a href="#" class="link">MVC</a></h3>
										<p>웹 프로젝트 중 가장 많이 사용하는 디자인패턴</p>
									</header>
								</article>
								<article>
									<span class="image">
										<img src="${cpath}/images/pic06.jpg" alt="" />
									</span>
									<header class="major">
										<h3><a href="#" class="link">Web Project</a></h3>
										<p>여러분의 최종프로젝트에 웹 기술을 활용하세요!</p>
									</header>
								</article>
							</section>
					<!-- Two -->
							<section id="two">
								<div class="inner">
									<header class="major">
										<h2>메세지 확인하기</h2>
									</header>
									<%-- chatting 기능을 만들어 봅시다! --%>
									<div class="container chat">
									
										<div class="other">
											<p>보낸사람 이름 :</p>
											<p>다른사람에게서 온 메세지</p>
										</div>
										
										<div class="mychat">
											<p>내가보낸 채팅</p>
										</div>
										
										<div class="other">
											<p>보낸사람 이름2 :</p>
											<p>다른사람에게서 온 메세지2</p>
										</div>
										
										
									</div>
									<%-- 채팅창 끝! --%>
								</div>
							</section>

					</div>

				<!-- Contact -->
					<section id="contact">
						<div class="inner">
							<section>
								<form>
									<div class="field">
										<label for="message">Message</label>
										<textarea  id="message" rows="6"></textarea>
									</div>
									<ul class="actions">
										<li><input type="button" value="Send Message" class="special" /></li>
										<li><input type="reset" value="Clear" /></li>
									</ul>
								</form>
							</section>
							
							<%--Ex07. 로그인 한 사용자의 정보로 변경해 봅시다. --%>
							<section class="split">
								<section>
									<div class="contact-method">
										<span class="icon alt fa-envelope"></span>
										<h3>Email</h3>
										<a href="#">로그인 한 사람의 이메일을 출력</a>
										<!-- 로그인 한 사용자의 이메일을 출력하시오 -->
									</div>
								</section>
								<section>
									<div class="contact-method">
										<span class="icon alt fa-phone"></span>
										<h3>Phone</h3>
										<span>로그인 한 사람의 전화번호를 출력</span>
										<!-- 로그인 한 사용자의 전화번호를 출력하시오 -->
									</div>
								</section>
								<section>
									<div class="contact-method">
										<span class="icon alt fa-home"></span>
										<h3>Address</h3>
										<span>로그인 한 사람의 집주소를 출력</span>
										<!-- 로그인 한 사용자의 집주소를 출력하시오 -->
									</div>
								</section>
							</section>					
						</div>
					</section>

				<!-- Footer -->
					<footer id="footer">
						<div class="inner">
							<ul class="icons">
								<li><a href="#" class="icon alt fa-twitter"><span class="label">Twitter</span></a></li>
								<li><a href="#" class="icon alt fa-facebook"><span class="label">Facebook</span></a></li>
								<li><a href="#" class="icon alt fa-instagram"><span class="label">Instagram</span></a></li>
								<li><a href="#" class="icon alt fa-github"><span class="label">GitHub</span></a></li>
								<li><a href="#" class="icon alt fa-linkedin"><span class="label">LinkedIn</span></a></li>
							</ul>
							<ul class="copyright">
								<li>&copy; Untitled</li><li>Design: <a href="https://html5up.net">HTML5 UP</a></li>
							</ul>
						</div>
					</footer>

			</div>

		<!-- Scripts -->
			<script src="${cpath}/assets/js/jquery.min.js"></script>
			<script src="${cpath}/assets/js/jquery.scrolly.min.js"></script>
			<script src="${cpath}/assets/js/jquery.scrollex.min.js"></script>
			<script src="${cpath}/assets/js/skel.min.js"></script>
			<script src="${cpath}/assets/js/util.js"></script>
			<!--[if lte IE 8]><script src="${cpath}/assets/js/ie/respond.min.js"></script><![endif]-->
			<script src="${cpath}/assets/js/main.js"></script>

	</body>
</html>

화이티

열심히 공부합시다! The best is yet to come! 💜

이전 포스트

Spring Boot - Setting설치

다음 포스트

Spring Boot - Sign up member 🐱‍🏍

SpringBoot

Repository

MemberRepository interface

Entity (DTO)

Tbl_Member.java

Controller

Main.jsp

Spring Boot - Setting설치

Spring Boot - Sign in -Member 👾

0개의 댓글