728x90
📌 마이페이지 내 정보 HTML 만들기
<!-- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
<link rel="stylesheet" href="../resources/css/main-style.css">
<link rel="stylesheet" href="../resources/css/myPage-style.css">
<script src="https://kit.fontawesome.com/7bc7245179.js" crossorigin="anonymous"></script>
</head>
<body>
<main>
<header>
<!-- 로고 : 클릭 시 메인페이지로 이동 -->
<section>
<a href="#"> <img src="resources/images/khlogo.jpg" id="home-logo">
</a>
</section>
<!-- header의 두번째 자식 div -->
<section>
<article class="search-area">
<!-- form내부 input 태그 값을 서버 또는 페이지로 전달 -->
<form action="#" name="search-form">
<!-- fielset : form 내부에서 input을 종료별로 묶는 용도로 많이 사용 -->
<fieldset>
<!-- query : 검색한값 -->
<input type="search" id="query" name="query" placeholder="검색어를 입력 해주세요."
autocapitalize="off">
<!-- 검색버튼 -->
<button type="submit" id="serach-btn" i class="fa-solid fa-magnifying-glass"></button>
</fieldset>
</form>
</article>
</section>
<section></section>
</header>
<nav>
<ul>
<li><a href="#">공지사항</a></li>
<li><a href="#">자유 게시판</a></li>
<li><a href="#">질문 게시판</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">1:1 문의</a></li>
</ul>
</nav>
<!-- 마이페이지 - 내정보 -->
<section class="myPage-content">
<!-- 왼쪽 사이드 메뉴 -->
<section class="left-side">
사이드메뉴
<ul class="list-group">
<li><a href="#">프로필</a></li>
<li><a href="#">내정보</a></li>
<li><a href="#">비밀번호 변경</a></li>
<li><a href="#">회원 탈퇴</a></li>
</ul>
</section>
<!-- 오른쪽 마이페이지 주요 내용 부분 -->
<section class="myPage-main">
<h1 class="mypage-title">내정보</h1>
<span class="myPage-explnation">원하는 회원 정보를 수정할 수 있습니다. </span>
<form action="#" method="POST" name="myPage-form">
<div class="myPage-row">
<label>닉네임</label>
<input type="text" name="memberNickname" value="로그인한 회원 별명" maxlength="10">
</div>
<div class="myPage-row">
<label>전화번호</label>
<input type="text" name="memberTel" value="01012341234" maxlength="11">
</div>
<!-- 주소 -->
<div class="myPage-row info-title">
<span>주소</span>
</div>
<div class="myPage-row info-address">
<input type="text" name="memberAddress" value="우편번호" maxlength="6">
<button type="button" id="info-address-btn">검색</button>
</div>
<div class="myPage-row info-address">
<input type="text" name="memberAddress" value="도로명주소" >
</div>
<div class="myPage-row info-address">
<input type="text" name="memberAddress" value="상세주소" >
</div>
<button id="info-update-btn">수정하기</button>
</form>
</section>
</section>
</main>
<footer>
<p>Copyright ©KH Information Educational Institue M-Class</p>
<article>
<a href="">프로젝트 소개</a> <span> | </span> <a href="">이용약관</a> <span>
| </span> <a href="">개인정보처리방침</a> <span> | </span> <a href="">고객센터</a>
</article>
</footer>
</body>
</html>
📌 마이페이지 내 정보 CSS만들기
/* 마이페이지 영역 */
.myPage-content{
width: 1000px;
height: 800px;
margin: 50px auto;
display: flex;
}
/* 왼쪽 사이드 메뉴 */
.left-side{
width: 25%;
border-right: 2px solid #ddd;
}
.list-group{
width: 100%;
padding: 0 20px 0 0;
/* 상 우 하 좌 */
}
.list-group>li{
list-style: none;
height: 50px;
font-size: 18px;
}
.list-group>li>a{
text-decoration: none;
color: black;
height: 100%;
border-bottom: 2px solid #ddd;
display: flex;
justify-content: center;
align-items: center;
}
.list-group>li:hover{
background-color: #f2f2f2;
}
/* 마이페이지 공통부분 */
.myPage-main{
width: 75%;
padding: 0 50px;
}
.mypage-title {
margin: 0 0 10px 0;
font-size: 30px;
}
.myPage-explnation{
display: block;
font-size: 14px;
margin-bottom: 30px;
letter-spacing: -1px;
}
.myPage-row{
width: 500px;
height: 50px;
margin-top: 20px;
display: flex;
align-items: center;
border-bottom: 2px solid #ddd;
}
.myPage-row *{
font-size: 18px;
font-weight: bold;
}
.myPage-row>label{
width: 30%;
color: #455ba8;
}
.myPage-row>span{
width: 70%;
}
.myPage-row>input{
width: 100%;
height: 100%;
border: 0;
outline: 0;
font-weight: normal;
}
.myPage-row:focus-within{
border-bottom: 2px solid #455ba8;
}
form[name="myPage-form"]{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* 내정보 */
.info-title{
color: #455ba8;
border: 0;
}
.info-address{
margin: 0;
}
/* 검색버튼 */
#info-address-btn{
width: 30%;
height: 70%;
font-size: 14px;
font-weight: normal;
background-color: white;
border: 1px solid gray;
cursor: pointer;
}
#info-update-btn{
width: 100%;
padding: 10px;
margin: 50px 0;
border: none;
font-size: 20px;
font-weight: bold;
background-color: #455ba8;
cursor: pointer;
color: white;
}📌 JSP 만들기
- 만들었던, HTML 붙이고 header / footer 중복이 되니까
<jsp:include page="/WEB-INF/views/common/header.jsp"></jsp:include>
<jsp:include page="/WEB-INF/views/common/footer.jsp"></jsp:include>📌 servelt 만들기
: jsp 경로 작성
package edu.kh.community.member.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/member/myPage/info")
public class MyPageInfoServlet extends HttpServlet{
//메인페이지 - 별명 클릭시 요청(GET)
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String path = "/WEB-INF/views/member/myPage-info.jsp";
req.getRequestDispatcher(path).forward(req, resp);
}
}📌 JSP 에 정보 넣기
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!-- 문자열 관련함수(메소드) 제공 JSTL (EL 형식으로 작성) -->
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
<link rel="stylesheet" href="${contextPath}/resources/css/main-style.css">
<link rel="stylesheet" href="${contextPath}/resources/css/myPage-style.css">
<script src="https://kit.fontawesome.com/7bc7245179.js"crossorigin="anonymous"></script>
</head>
<body>
<main>
<jsp:include page="/WEB-INF/views/common/header.jsp"></jsp:include>
<!-- 마이페이지 - 내정보 -->
<section class="myPage-content">
<!-- 왼쪽 사이드 메뉴 -->
<section class="left-side">
사이드메뉴
<ul class="list-group">
<li><a href="#">프로필</a></li>
<li><a href="#">내정보</a></li>
<li><a href="#">비밀번호 변경</a></li>
<li><a href="#">회원 탈퇴</a></li>
</ul>
</section>
<!-- 오른쪽 마이페이지 주요 내용 부분 -->
<section class="myPage-main">
<h1 class="mypage-title">내정보</h1>
<span class="myPage-explnation">원하는 회원 정보를 수정할 수 있습니다. </span>
<form action="#" method="POST" name="myPage-form">
<div class="myPage-row">
<label>닉네임</label> <input type="text" name="memberNickname"
value="${loginMember.memberNickname}" maxlength="10">
</div>
<div class="myPage-row">
<label>전화번호</label> <input type="text" name="memberTel"
value="${loginMember.memberTel}" maxlength="11">
</div>
<!-- 주소 --> <!-- fn:splite(문자열,'구분자') 문자열을 구분자를 통해 쪼갤거야! -->
<c:set var="addr" value="${fn:split(loginMember.memberAddress,',,')}"/>
<div class="myPage-row info-title">
<span>주소</span>
</div>
<div class="myPage-row info-address">
<input type="text" name="memberAddress" value="${addr[0]}" maxlength="6">
<button type="button" id="info-address-btn">검색</button>
</div>
<div class="myPage-row info-address">
<input type="text" name="memberAddress" value="${addr[1]}">
</div>
<div class="myPage-row info-address">
<input type="text" name="memberAddress" value="${addr[2]}">
</div>
<button id="info-update-btn">수정하기</button>
</form>
</section>
</section>
</main>
<jsp:include page="/WEB-INF/views/common/footer.jsp"></jsp:include>
</body>
</html>
💡 address 값에 대해서 배열로 받았기에, 불러올 수 잇는 방법
value="${fn:split(loginMember.memberAddress,',,')}
fn:splite(문자열,'구분자') 문자열을 구분자를 통해 쪼갤거야!
728x90
'ON > Servlet' 카테고리의 다른 글
| 유효성 일치 여부 (0) | 2023.07.12 |
|---|---|
| 내 정보 수정하기 (0) | 2023.07.11 |
| 비밀번호 암호화 하기 (0) | 2023.07.10 |
| Cookie / forward / Redirect 정리 (0) | 2023.07.10 |
| [Servlet] 회원가입 만들기 (0) | 2023.07.09 |
