728x90

 

내정보 수정페이지

 

<c:forTokens> 구분자

 

<%@ 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>
<head>
<meta charset="UTF-8">

<title>prac</title>

<link rel="stylesheet" type="text/css" 
href="${ pageContext.servletContext.contextPath }/resources/css/member-style.css">


</head>
<body>

	<c:import url="../common/menubar.jsp"/>
	
	<h1 align="center">${ loginUser.name }님의 정보 수정</h1>
	
	<div class="centerText">
		<form action="mupdate.me" method="post">
			<table>
				<tr>
					<th>아이디</th>
					<td>${loginUser.id }
					<input type="hidden" name="id" value="${loginUser.id }">
					</td>
				</tr>
				<tr>
					<th>이름</th>
					<td>
						<input type="text" name="name" value="${ loginUser.name }"></td> <!-- input text박스 안에 value값이 들어가있는 상태가 됨 -->
					</td>
				</tr>
				<tr>
					<th>닉네임</th>
					<td><input type="text" name="nickName" value="${loginUser.nickName }"></td>
				</tr>
				<tr>
					<th>성별</th>
					<c:if test="${loginUser.gender == 'M' }">
						<td>
							<input type="radio" name="gender" value="M" checked readonly>남
							<input type="radio" name="gender" value="F" readonly>여
						</td>
					</c:if>
					<c:if test="${loginUser.gender == 'F' }">
						<td>
							<input type="radio" name="gender" value="M" readonly>남
							<input type="radio" name="gender" value="F" checked readonly>여
						</td>
					</c:if>
				</tr>
				<tr>
					<th>나이</th>
					<td><input type="number" min="20" max="100" name="age" value="${ loginUser.age }"></td>
					<!-- input 타입넘버도 value로 안에 값을 넣어서 보여줄 수 있음 -->	
				</tr>
				<tr>
					<th>이메일</th>
					<td><input type="email" name="email" value="${loginUser.email }"></td>
				</tr>
				<tr>
					<th>전화번호</th>
					<td><input type="tel" name="phone" value="${loginUser.phone }"></td>
				</tr>
				
				
				<c:forTokens var="addr" items="${loginUser.address }" delims="/" varStatus="vs">
					<c:if test="${ status.index eq 0 && addr >= '0' && addr <= '99999' }">
						<c:set var="post" value="${ addr }"/>
					</c:if>
					<c:if test="${ status.index eq 0 && !(addr >= '0' && addr <= '99999') }">
						<c:set var="address1" value="${ addr }"/>
					</c:if>
					<c:if test="${ status.index eq 1 }">
						<c:set var="address1" value="${ addr }"/>
					</c:if>
					<c:if test="${ status.index eq 2 }">
						<c:set var="address2" value="${ addr }"/>
					</c:if>
				</c:forTokens>
				
				
				<tr>
					<th>우편번호</th>
					<td>
						<input type="text" name="post" class="postcodify_postcode5" value="${ post }" size="6">
						<button type="button" id="postcodify_search_button">검색</button>
					</td>	
				</tr>
				<tr>
					<th>도로명 주소</th>
					<td><input type="text" name="address1" class="postcodify_address" value="${ address1 }" size="30"></td>
				</tr>
				<tr>
					<th>상세주소</th>
					<td><input type="text" name="address2" class="postcodify_extra_info" value="${ address2 }" size="30"></td>
				</tr>
				
				
				<!-- jQuery와 Postcodify를 로딩한다. -->
				<script src="//d1p7wdleee1q2z.cloudfront.net/post/search.min.js"></script>
				<script>
					// 검색 단추를 누르면 팝업 레이어가 열리도록 설정한다.
					$(function(){
						$("#postcodify_search_button").postcodifyPopUp();
					});	
				</script>
					
				<tr>
					<td colspan="2" align="center">
						<input type="submit" value="수정하기"> <!-- value값이 버튼이 되서 나옴 -->
						<c:url var="mdelete" value="mdelete.me">
							<c:param name="id" value="${ loginUser.id }"/>
						</c:url>	
						<button type="button" onclick="location.href='${mdelete}'">탈퇴하기</button>
						<button type="button" onclick="location.href='home.do'">시작 페이지로</button>
					</td>
				</tr>
			</table>		
		</form>
	</div>


</body>
</html>
728x90
반응형
728x90

 

<목표>

따라치되 최대한 안보고 코딩하기

코딩 익숙해지기

구조 분석

세부코드 안보고 쓸 수 있게 되기

 

반복이 살 길이다!!!!!!!

 

<%@ 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>
<head>
<meta charset="UTF-8">

<script src="${ contextPath }/resources/js/jquery-3.6.0.min.js"></script> 

<style>
	.nav{margin-left:auto; margin-right:auto; text-align:center;}
	.menu{
		display:inline-block; background:#e4fc41; text-align:center;
		line-height:50px; width:150px; height:50px; border-radius:20px;
		margin-left:5%; margin-right:5%;
	}
	.menu:hover{background:#b0c903; font-weight:bolder; cursor:pointer;}
	a:link{color:black; text-decoration:none;}
	a:visited{color:black; text-decoration:none;}
</style>

</head>
<body>

	<c:set var="contextPath" value="${ pageContext.servletContext.contextPath }" scope="application"/>
	
	<h1 align="center">first page & Spring</h1>
	<br>
	
	
	<div class="loginArea" align="right">
		<c:if test="${ empty sessionScope.loginUser }">	<!-- user가 로그인 안했으면 로그인하게 id,pw 보여주는 창 보여줌-->
			<form action="login.me" method="post">
				<table id="loginTable" style="text-align:center;">
					<tr>
						<td>아이디</td>
						<td><input type="text" name="id"></td>
						<td rowspan="2">
							<button id="loginBtn">로그인</button>
						</td>
					</tr>
					<tr>
						<td>비밀번호</td>
						<td><input type="password" name="pwd"></td>
					</tr>
					<tr>
						<td colspan="3">
							<button type="button" onclick="location.href='enrollView.me'">회원가입</button>
							<button type="button">아이디/비밀번호 찾기</button>"
						</td>					
					</tr>
				</table>
			</form>
		</c:if>
	
		<c:if test="${ empty sessionScope.loginUser }"> <!-- user가 로그인했으면 정보 변경, 로그아웃 등 보여줌 -->
			<h3 align="right"> <!-- h3태그 안에 c core와 button태그를 넣은게 신기 -->
				<c:out value="${ loginUser.name }님 환영합니다."/>
				<br>
				<c:url var="myinfo" value="myinfo.me"/>
				<c:url var="logout" value="logout.me"/>
				<button onclick="location.href='${myinfo}'">정보보기</button>
				<button onclick="location.href='${logout}'"	>로그아웃</button>
							<!-- c:url에서 var변수로 지정한 것을 버튼클릭하면 이동하게만듬 -->
			</h3>		
		</c:if>
	</div>
	

<!-- 위처럼 c:url을 통해서 지정할 수도 있지만 지금까지 해왔던 것처럼 바로 href에 url을 넣어도 상관없음 -->
	<div class="menubar">
		<div class="nav">
			<div class="menu"><a href="home.do">Home</a></div>
			<div class="menu"><a href="blist.bo">게시판</a></div>		
		</div>
	</div>


</body>
</html>

 

 

728x90
반응형
728x90

 

비밀번호 수정 폼

클론 코딩 & 구조 파악

손코딩으로 하나씩 익히기

 

<%@ 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>
<head>
<meta charset="UTF-8">
<title> prac</title>

<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath }/resources/css/member-style.css"> 

</head>
<body>

	<c:import url="../common/menubar.jsp"/>

	<h1 align="center">비밀번호 수정</h1>
	
	<div class="centerText">
		<form action="mPwdUpdate" method="post">
			<table>
				<tr>
					<th>현재 비밀번호</th>
					<td><input type="password" name="pwd"></td>
				</tr>
				<tr>
					<th>새 비밀번호</th>
					<td><input type="password" name="newPwd1"></td>
				</tr>
				<tr>
					<th>새 비밀번호 확인</th>
					<td><input type="password" name="newPwd2"></td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="submit" value="수정하기">
						<button type="button" onclick="location.href='home.do'">시작화면으로</button>
					</td>
				</tr>
				
			</table>
		</form>	
	</div>

</body>
</html>
728x90
반응형
728x90

 

관리자 페이지에서 공지사항 작성할 수 있게 쓰기 페이지 제작

인풋태그로 짧은 글 받고

텍스트 애어리어로 내용 부분 받아서 컨트롤러로 전달

쓰기 폼하나 새로 만들고 이를 작성완료하면 db쪽과 왔다갔다 하도록 구성

 

HTML

<%@ 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 rel="stylesheet" type="text/css" href="${ pageContext.servletContext.contextPath }/resources/css/admin/adminNoticeWriteView.css">



</head>
<body>

	<c:import url="adminMenubar.jsp" />



    <div class="title">
        <h2>공지사항</h2>   
    </div>    
    
	<form id="form" name="form" method="post">
	    <table class="tableWhole">
	            <thead>
	                <tr>
	                    <th>제목</th>
	                        <td style="width: 1050px;">
	                        	<input type="text" placeholder="제목을 입력하세요">
	                        </td>
	                </tr>
	                <tr>
	                    <th>작성자</th>
	                    <td>${board.adminId}</td>
	                </tr>
	                <tr>
	                    <th>작성일</th>
	                    <td>${board.boardCreateDate}</td>
	                    <th>조회수</th>
	                    <td style="width:100px" align="center">
	                    	${board.boardCount}
	                    </td>
	                </tr>
	            </thead>
	    </table>
    

	    <div class="content">
	        <textarea class="textarea_field" placeholder="   내용을 입력해주세요."></textarea>
	    </div>
			<input type="hidden" id="boardId" name="boardId" value="${board.boardId }" > <!-- qnaNo를 컨트롤러로 보내서 어느 게시물이 수정되는지 알려 줘야함  -->
	    <div class="listButton">
	    	<c:url var="blist" value="adminNoticeList.ad">
				<c:param name="page" value="${ page }"/>
			</c:url>
	        <button type="submit" onclick="javascript:form.action='adminNoticeWriteForm.ad'">작성 완료</button> 
	        <button type="submit" onclick="javascript:form.action='adminNoticeList.ad'">목 록</button> 
	    </div>
	 </form> 
    




<!-- ############ PAGE END 끝~ -->

<!-- / -->

<!-- theme switcher -->

<!-- ############ LAYOUT END-->

<!-- build:js scripts/app.html.js -->
<!-- jQuery -->
<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/jquery/dist/jquery.js"></script>
<!-- Bootstrap -->
<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/tether/dist/js/tether.min.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/bootstrap/dist/js/bootstrap.js"></script>
<!-- core -->
<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/underscore/underscore-min.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/jQuery-Storage-API/jquery.storageapi.min.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/PACE/pace.min.js"></script>

<script src="${ pageContext.servletContext.contextPath }/resources/scripts/config.lazyload.js"></script>

<script src="${ pageContext.servletContext.contextPath }/resources/scripts/palette.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-load.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-jp.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-include.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-device.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-form.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-nav.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-screenfull.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-scroll-to.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-toggle-class.js"></script>

<script src="${ pageContext.servletContext.contextPath }/resources/scripts/app.js"></script>

<!-- ajax -->
<%-- 	<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/jquery-pjax/jquery.pjax.js"></script> --%>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ajax.js"></script>
<!-- endbuild -->
    


</body>
</html>

 

CSS




th{
    width: 130px;
    background-color: #f7f5f8;
    font-weight: 600;
    line-height: 200%;
}

input{
	border:none;
}

.title{
    width: 890px;
    text-align: center;
    margin: 0 auto;
}
.title > p{
    color:rgb(149, 146, 146);
    margin-bottom: 3%;
}
thead{
    border-bottom: rgb(149, 146, 146);
}

.tableWhole{
    width:100%;
    max-width: 890px;
    border-top : 2px solid black;  
    border-bottom: 1px solid lightgray;
    line-height: 180%;
    margin: 0 auto;
}
.tableWhole > thead > tr > td{
	padding-left:10px;	
	padding-top:5px;
	padding-bottom:5px;
	
}
thead > tr{
    border-bottom : 1px solid rgb(149, 146, 146);  
}
.tableTop td{
    width:450px;
}

    
.content{
    width:890px;
    margin: 0 auto;
    word-break: break-all;
}
.content > p{
    padding: 2%;
    padding-bottom: 5%;
    border-bottom: 1px solid  lightgray;
}

.listButton{
    width:890px;
    text-align: right;
    margin:2% auto;
    padding-right: 3%;
    
}
.listButton > button:hover{
    background-color:#f7b7b5;
    color:#fff;
    border:1px solid #FE8F8F;
    
}
.listButton > button{
    width:100px;
    height:35px;
    background-color: #FE8F8F;
    border: 1px solid #FF5C58;
    color:#fff;
}

/**************************/

.content{
    text-align: center;
}
.content textarea{
    width:890px;
    min-height: 150px;
    padding:1% 0;
    margin: 0 auto;
    resize: none;
    border:none;
    border-bottom: 1px solid lightgray;
}

 

 

728x90
반응형
728x90

 

 

 

form태그 안에 여러개의 버튼과 submit이 필요한데

삭제할 때는 정말 지울껀지 확인 메세지까지 던져줘야해서

어떻게 할지 막혀있던 상태

 

삭제 버튼만 type="button"으로 바꿔주고 삭제 메세지가 뜰 수 있게 js함수로 만들어서

밖으로 빼두었다

 

<form id="form" name="form" method="post">
	<div class="listButton">
    	<c:url var="blist" value="adminNoticeList.ad">
			<c:param name="page" value="${ page }"/>
		</c:url>
        <button type="submit" onclick="javascript:form.action='adminNoticeUpdateForm.ad'">수정</button> 
        <button type="button" onclick="ConfirmDelete()">삭제</button> 
        <button type="submit" onclick="javascript:form.action='adminNoticeList.ad'">목록</button> 
 
    </div>
 </form>

 

정말 지울껀지 confirm()을 이용해서 확인절차 거치고

어느 게시판을 삭제할지 해당 게시판 번호를 알아야해서 boardId를 컨트롤러로 보내주고

form태그에 id속성을 줘서 밖에서도 form를 쓸 수 있게 getElementById를 사용해서 submit 시키고

location.href로 url과 동시에 boardId도 같이 보내준다

 (참고로 location.href는 get방식)

<script>
	function ConfirmDelete(){
		var ask = confirm("정말로 삭제하시겠습니까?");
		if(ask){
			var boardId = $('#boardId').val();
			document.getElementById('form').submit();
			location.href='adminNoticeDelete.ad?boardId='+boardId;
		}
	};
</script>
728x90
반응형
728x90

 

<input>나 <textarea> 같은 것들에 placeholder로 안내문구 주려는데

placeholder가 안먹힐 때가 있다. 왜그럴까?

 

placeholder 플레이스홀더는 글씨가 써지면 지워지기 때문에 input,textarea에 글씨가 들어가 있으면

글씨가 들어간 걸로 인식되서 애초에 placeholder가 안나오게 되므로 작동안하는게 아니니 주의!

 

아래처럼 오픈태그와 클로즈 태그 사이에 내용이 안들어가야 있어야 정상적으로 나옴

 

문자 뿐 아니라 엔터로 줄바꿈되도 데이터가 들어간 걸로 인식되서 placeholder가 사라지게 된다

 

728x90
반응형
728x90

문제

 

<풀이과정>

 

728x90
반응형
728x90

정올 Language_Coder 516 : 입력 - 자가진단8

문제

 

 

<풀이과정>

 

 

f-string 적용

 

 

728x90
반응형

+ Recent posts