728x90

 

<c:url>로 var변수를 만들고, value에 해당 url을 넣고

이 var 변수를 다른 button type="button"에서 onclick으로 불러내기

기존 버튼 온클릭에서 url 직접 입력에서 다른 코드로 한번 더 해봄

 

<%@ 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>Insert title here</title>

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

<style>
	#myInfoTable td{text-align:center;}
</style>

</head>
<body>

	<c:import url="..common/menubar.jsp"/>
	
	<h1 align="center">'${ loginUser.name }'님의 정보 보기</h1>
	
	<div class="centerText">
		<table id="myInfoTable">
			<tr>
				<th>아이디</th>
				<td>${loginUser.id }</td>
			</tr>
			<tr>
				<th>이름</th>
				<td>${loginUser.name }</td>
			</tr>
			<tr>
				<th>닉네임</th>
				<td>${loginUser.nickName }</td>
			</tr>
			<tr>
				<th>성별</th>
				<c:if test="${loginUser.gender eq 'M' }">
					<td> 남성 </td>
				</c:if>
				<c:if test="${loginUser.gender eq  'F'}">
					<td> 여성 </td>
				</c:if>
			</tr>
			<tr>
				<th>나이</th>
				<td>${loginUser.age }</td>
			</tr>
			<tr>
				<th>이메일</th>
				<td>${ loginUser.email }</td>
			</tr>
			<tr>
				<th>전화번호</th>
				<td>${loginUser.phone }</td>
			</tr>
			<tr>
				<th>주소</th>
				<td>
					<c:forTokens var="ft" items="${loginUser.address }" delims="/" varStatus="vs">
						<c:if test="${vs.index eq 0 && ft >= '0' && ft <= '99999' }">
							(${ft })
						</c:if>
						<c:if test="${vs.index eq 0 && !(ft >= '0' && ft <= '99999')}">
							${ft }
						</c:if>
						<c:if test="${vs.index eq 1 }">
							${ft }
						</c:if>
						<c:if test="${vs.index eq 2 }">
							${ft }
						</c:if>
					</c:forTokens>
					
				</td>
			</tr>
			
			<tr>
				<td colspan="2"	align="center">
					<c:url var="mpwdUpdateView" value="mpwdUpdateView.me"/>
					<button type="button" onclick="${mpwdUpdateView}">비밀번호 수정</button>
					<button type="button" onclick="location.href='mupdateView.me'">정보수정</button>
					<c:url var="mdelete" value="mdelete.me"/>
					<button type="button" onclick="location.href='${ mdelete }'">회원탈퇴</button>
					<button type="button" onclick="home.do">시작페이지로</button>
				</td>
			</tr>
		</table>
	</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

 

분명 수정 후 게시판 전체조회로 가게끔 url 설정을 해두었는데

수정하고 나서 print찍히는거보면 상세보기로 가게 되어있는 것이다.

url 지정도 제대로 했는데 왜 뜬금없이 상세보기의 print가 찍혔나 봤더니

 

form태그 하나 안에 버튼이 여러개인데 이것들이 충돌되고 이중에서 상세보기 url이 

남아있는 구조가 되어버려서 뜬금없이 일로 튀는 것처럼 보이게된 것

 

<form id="form" name="form" method="post">
    <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>
 </form>

위에 처럼 버튼에 각각 타입 지정해주고 온클릭에 자바스크립트 코드를 넣어서 해결함

이렇게 하면 하나의 폼태그에 버튼 태그 각각에 액션 속성을 주어 따로따로 url 갈 수 있게 된다

728x90
반응형

+ Recent posts