DeseoDeSeo
[Spring] 회원정보 수정 및 메인 페이지에 탭 추가 본문
https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp
Bootstrap Tabs and Pills
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
아래의 탭을 상단의 링크에서 가져옴.
index.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 ="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!-- context-path값(=controller)을 내장객체 변수로 저장 -->
<c:set var="contextPath" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html lang="en">
<head>
<title>뇽뇽이</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<jsp:include page="common/header.jsp"></jsp:include> <!-- include는 import랑 비슷한 것! -->
<h1><b>springMVC03 </b></h1>
<div class="panel panel-default">
<div>
<img style="width:100%; height:400px;" src="${contextPath}/resources/images/main.jpg">
</div>
<div class="panel-body">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">게시판</a></li>
<li><a data-toggle="tab" href="#menu2">공지사항</a></li>
<li><a data-toggle="tab" href="#menu3">menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>게시판</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>공지사항</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
<div class="panel-footer">
스프링-뇽뇽이
</div>
</div>
</div>
<!-- Modal, 회원 가입 실패시 출력 됨. -->
<div class="modal fade" id="myMessage" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div id="messageType" class="modal-content">
<div class="modal-header panel-heading">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">${msgType}</h4>
</div>
<div class="modal-body">
<p id="">${msg}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
if(${not empty msgType}){
if(${msgType eq "성공메세지"}){
$("#messageType").attr("class","modal-content panel-warning");
}
$("#myMessage").modal("show");
}
});
</script>
</body>
</html>https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp
Bootstrap Glyphicon Components
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
하단의 아이콘들은 상단의 링크에서 가져옴.
사용하고 싶은 아이콘을 선택 한 후, 노란 부분의 글씨를 복사해서
span태그를 추가하고 class를 추가해서 넣어준다.
<li><a href="#"><span class="glyphicon glyphicon-picture">프로필사진등록 </span> </a></li>
header.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 ="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!-- context-path값(=controller)을 내장객체 변수로 저장 -->
<c:set var="contextPath" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="${contextPath}/">사과바나나딸기</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="${contextPath}/"> 메인 </a></li>
<li><a href="boardMain.do">게시판</a></li> <!--앞에 /없으면 /controller가 생략되어있음. 이건 contextPath임. -->
</ul>
<!-- mvo가 비어있을 때만 보여줌.-->
<c:if test="${empty mvo}">
<ul class="nav navbar-nav navbar-right">
<li><a href="${contextPath}/loginForm.do"><span class="glyphicon glyphicon-globe"> 로그인</span> </a></li>
<li><a href="${contextPath}/joinForm.do"> 회원가입 </a></li>
</ul>
</c:if>
<c:if test="${not empty mvo}">
<ul class="nav navbar-nav navbar-right">
<li><a href="${contextPath}/updateForm.do"> <span class="glyphicon glyphicon-heart ">회원정보수정</span> </a></li>
<li><a href="#"><span class="glyphicon glyphicon-picture">프로필사진등록 </span> </a></li>
<li><a href="${contextPath}/logout.do"> <span class="glyphicon glyphicon-log-out">로그아웃</span> </a></li>
</ul>
</c:if>
</div>
</div>
</nav>
</body>
</html>
회원정보수정
Membercontroller.java
package kr.spring.controller;
import javax.servlet.http.HttpSession;
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.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import kr.spring.entity.Member;
import kr.spring.mapper.MemberMapper;
@Controller
public class MemberController {
// mapper만드는 법 기억해야됨.
@Autowired
private MemberMapper mapper;
@RequestMapping("/joinForm.do")
public String joinForm() {
return "member/joinForm";
}
@RequestMapping("/registerCheck.do")
public @ResponseBody int registerCheck(@RequestParam("memID") String memID) {
//registercheck로 memid넘어옴.
Member m = mapper.registerCheck(memID);
// 여기서 membermapper.java로 이동함.
// m == null -> 아이디 중복 사용 가능함.
// m != null -> 아이디 사용 불가능
if(m != null || memID.equals("")) {
return 0;
}else {
return 1;
}
}
@RequestMapping("/join.do")
public String join(Member m, RedirectAttributes rttr, HttpSession session) {
System.out.println("회원가입 기능요청");
//유효성 검사
if(m.getMemID() ==null || m.getMemID().equals("")|| m.getMemPassword()==null || m.getMemPassword().equals("")||
m.getMemName()==null || m.getMemName().equals("")|| m.getMemAge() ==0 || m.getMemEmail() == null ||
m.getMemEmail().equals("")) {
//회원 가입을 할 수 없다 하나라도 누락되어 있기 때문에
//실패시 joinForm.do로 msgType과 msg내용을 보내야함.
rttr.addFlashAttribute("msgType", "실패메세지");
rttr.addFlashAttribute("msg", "모든 내용을 입력하세요.");
return "redirect:/joinForm.do";
//redirect방식에서는 model에 데이터 저장 불가.
//forward방식에서만 model에 데이터저장 가능.
//RedirectAttributes - 리다이렉트 방식으로 이동할 때 보낼 데이터를 저장하는 객체
}else {
//회원 가입 가능
//null값 대신 넣으려구.
m.setMemProfile("");
int cnt = mapper.join(m);
//회원가입 후 index.jsp로 이동시키시오.
if(cnt==1) {
System.out.println("회원가입 성공");
rttr.addFlashAttribute("msgType", "성공메세지");
rttr.addFlashAttribute("msg", "회원가입에 성공했습니다.");
//회원가입 성공 시 로그인 처리까지 시키기
session.setAttribute("mvo", m);
//mvo라는 이름으로 m을 넣겠다.
//성공시 main으로 이동함,
return "redirect:/";
}else {
System.out.println("회원가입 실패.");
rttr.addFlashAttribute("msgType", "실패메세지");
rttr.addFlashAttribute("msg", "회원가입에 실패했습니다.");
return "redirect:/joinForm.do" ;
}
}
}
@RequestMapping("/logout.do")
public String logout(HttpSession session) {
//session을 사용하고 싶으면 매개변수에 적으면 된다.
session.invalidate();
//로그아웃 기능
return "redirect:/";
}
@RequestMapping("/loginForm.do")
public String loginForm() {
return "member/loginForm";
}
@RequestMapping("/Login.do")
public String login(RedirectAttributes rttr, Member m, HttpSession session) {
//문제
// mapper에 login이라는 메소드 이름으로 로그인 기능을 수행하시오.
// 로그인 성공 시 -> index.jsp 이동 후, 로그인에 성공했습니다 modal창 띄우기
// 로그인 실패 시 -> login.jsp 이동 후, 로그인에 실패했습니다 modal 창 띄우기
Member mvo =mapper.login(m);
//mvo는 실패하면 null이 들어감.
//mvo가 실패하지 않는다면
if(mvo != null ) {
rttr.addFlashAttribute("msgType", "성공메세지");
rttr.addFlashAttribute("msg", "로그인에 성공했습니다.");
session.setAttribute("mvo", mvo);
return "redirect:/";
}else {
rttr.addFlashAttribute("msgType", "실패메세지");
rttr.addFlashAttribute("msg", "로그인에 실패했습니다.");
return "redirect:/loginForm.do";
}
}
@RequestMapping("/updateForm.do")
public String updateForm() {
return "member/updateForm";
}
@RequestMapping("/update.do")
public String update(Member m, RedirectAttributes rttr, HttpSession session) {
//문제
//mapper의 update메서드를 통해 해당 회원의 정보를 수정하시오.
// 조건1 : 하나라도 입력안한 데이터가 있으면 updateForm.jsp로 다시 돌려보내면서
// updateForm.jsp에서는 "모든 내용을 입력하세요"라는 모달창을 띄우세요.
// 조건 2: 회원 수정에 실패 했을 때는 joinForm.jsp로 다시 돌려보내면서
// joinForm.jsp에서는 "회원 수정이 실패했습니다."라는 모달창을 띄우세요.
// 조건 3 : 회원수정에 성공했을 떄는 index.jsp로 다시 돌려보내면서
// index.jsp에서는 "회원 정보 수정에 성공했습니다."라는 모달창을 띄우세요.
if(m.getMemID() ==null || m.getMemID().equals("")|| m.getMemPassword()==null || m.getMemPassword().equals("")||
m.getMemName()==null || m.getMemName().equals("")|| m.getMemAge() ==0 || m.getMemEmail() == null ||
m.getMemEmail().equals("")) {
rttr.addFlashAttribute("msgType", "실패메세지");
rttr.addFlashAttribute("msg", "모든 내용을 입력하세요.");
return "redirect:/updateForm.do";
}else {
m.setMemProfile("");
int cnt =mapper.update(m);
if(cnt ==1) {
rttr.addFlashAttribute("msgType", "성공메세지");
rttr.addFlashAttribute("msg", "회원 정보 수정에 성공했습니다.");
session.setAttribute("mvo", m);
return "redirect:/";
}else {
rttr.addFlashAttribute("msgType", "실패메세지");
rttr.addFlashAttribute("msg", "회원 정보 수정에 실패했습니다.");
return "redirect:/joinForm.do";
}
}
}
}
MemberMapper.java
public int update(Member m);
MemberMapper.xml
<update id ="update" parameterType="kr.spring.entity.Member">
UPDATE MEMBER SET MEMPASSWORD=#{memPassword}, MEMNAME=#{memName} , MEMAGE=#{memAge} ,MEMGENDER=#{memGender} ,MEMEMAIL=#{memEmail} WHERE MEMID=#{memID}
</update>
updateForm.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 ="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="contextPath" value ="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<jsp:include page="../common/header.jsp"></jsp:include>
<h2>Spring MVC03</h2>
<div class="panel panel-default">
<div class="panel-heading">Board</div>
<div class="panel-body">
<form action="${contextPath}/update.do" method="post">
<input type="hidden" name="memPassword" id="memPassword" value="">
<input type="hidden" name="memID" id="memID" value="${mvo.memID}">
<table style ="text-align:center; border: 1px solid #dddddd " class="table table-borded">
<tr>
<td style="width:110px; vertical-align:middle;">아이디</td>
<td>${mvo.memID}</td>
</tr>
<tr>
<td style="width:110px; vertical-align:middle;">비밀번호</td>
<td colspan="2"><input type="password" onkeyup="passwordCheck()" name ="memPassword1" id="memPassword1" class="form-control" maxlength="20" placeholder="비밀번호를 입력하세요."></td>
</tr>
<tr>
<td style="width:110px; vertical-align:middle;">비밀번호 확인</td>
<td colspan="2"><input type="password" onkeyup="passwordCheck()" name ="memPassword2" id="memPassword2" class="form-control" maxlength="20" placeholder="비밀번호를 확인하세요."></td>
</tr>
<tr>
<td style="width:110px; vertical-align:middle;">사용자 이름</td>
<td colspan="2"><input value="${mvo.memName}" type="text" id="memName" name ="memName" class="form-control" maxlength="20" placeholder="이름을 입력하세요."></td>
</tr>
<tr>
<td style="width:110px; vertical-align:middle;">나이</td>
<td colspan="2"><input required="required" value="${mvo.memAge}"type="number" name ="memAge" id="memAge" class="form-control" maxlength="20" placeholder="나이를 입력하세요."></td>
</tr>
<tr>
<td style="width:110px; vertical-align:middle;">성별</td>
<td colspan="2">
<div class="form-group" style ="text-align:center; margin:0 auto;">
<div class="btn-group" data-toggle="buttons">
<c:if test="${mvo.memGender eq '남자' }">
<label class="btn btn-primary active">
<input type="radio" id="memGender" name="memGender" autocomplete="off" value="남자" checked="checked"> 남자
</label>
<label class="btn btn-primary">
<input type="radio" id="memGender" name="memGender" autocomplete="off" value="여자" > 여자
</label>
</c:if>
<c:if test="${mvo.memGender eq '여자' }">
<label class="btn btn-primary">
<input type="radio" id="memGender" name="memGender" autocomplete="off" value="남자" > 남자
</label>
<label class="btn btn-primary active">
<input type="radio" id="memGender" name="memGender" autocomplete="off" value="여자" checked="checked" > 여자
</label>
</c:if>
</div>
</div>
</td>
</tr> <!-- 성별 끝 -->
<tr>
<td style="width:110px; vertical-align:middle;">이메일</td>
<td colspan="2"><input value="${mvo.memEmail}" type="email" name ="memEmail" id="memEmail"class="form-control" maxlength="50" placeholder="이메일을 입력하세요."></td>
</tr>
<tr>
<td colspan ="3">
<span id="passMessage" style="color:red;"></span>
<input type="submit" class="btn btn-primary btn-sm pull-right" value="회원정보 수정">
<input type="reset" class="btn btn-warning btn-sm pull-right" value="취소">
</td>
</tr>
</table>
</form>
</div>
<div class="panel-footer">스프링게시판-뇽뇽이</div>
</div>
</div>
<!-- Modal, 아이디 중복체크용 모달 -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div id="checkType" class="modal-content">
<div class="modal-header panel-heading">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"> 메세지 확인 </h4>
</div>
<div class="modal-body">
<p id="checkMessage"> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal, 회원 가입 실패시 출력 됨. -->
<div class="modal fade" id="myMessage" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div id="messageType" class="modal-content">
<div class="modal-header panel-heading">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">${msgType}</h4>
</div>
<div class="modal-body">
<p id="">${msg}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function passwordCheck(){
var memPassword1 = $("#memPassword1").val();
var memPassword2 = $("#memPassword2").val();
if(memPassword1 != memPassword2){
$("#passMessage").html("비밀번호가 서로 일치하지 않습니다.");
} else{
/* pw1과 pw2의 값이 같을 때만 pw가 넘어감. */
$("#memPassword").val(memPassword1);
$("#passMessage").html(" ");
}
}
//html을 다 로딩할때 까지 기다리겠다.
$(document).ready(function(){
if(${not empty msgType}){
if(${msgType eq "실패메세지"}){
$("#messageType").attr("class","modal-content panel-warning");
}
$("#myMessage").modal("show");
}
});
</script>
</body>
</html>'spring' 카테고리의 다른 글
| [Spring] 해당 글 작성자만 수정, 삭제 가능 기능 (0) | 2023.09.21 |
|---|---|
| [Spring] 파일 업로드 및 프로필 사진 출력하기 (0) | 2023.09.20 |
| [Spring] 회원 가입 기능 마무리 및 로그인 기능 (1) | 2023.09.18 |
| [Spring] SpringMVC03_회원가입 폼, 아이디 중복 여부, 비밀번호 일치여부 (0) | 2023.09.15 |
| [Spring] springMVC03 실습 (0) | 2023.09.15 |
'spring' Related Articles
more
