반응형

# MVC06_08 마무리_개선작업

## 상세보기 페이지 개선 작업

  • memberContent.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="kr.bit.model.*" %>    
<%
  // MemberVO vo=(MemberVO)request.getAttribute("vo");
%>    
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<script type="text/javascript">
	function update() {
		document.form1.action="<c:url value='/memberUpdate.do'/>";
		document.form1.submit();
	}
	
	function frmreset() {
		document.form1.reset();
	}
</script>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<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.5.1/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>
</head>
<body>

<div class="container">
	<h2>상세 화면</h2>
	<div class="panel panel-default">
		<div class="panel-heading">
			<c:if test="${sessionScope.userId != null && sessionScope != '' }">
				<label>${sessionScope.userName}님이 로그인 하셨습니다.</label>
			</c:if>
			<c:if test="${sessionScope.userId == null || sessionScope == '' }">
				<label>안녕하세요.</label>
			</c:if>	
		</div>
		<div class="panel-body">
		<form id="form1" name="form1" class="form-horizontal" method="post">
		<input type="hidden" name="num" value="${vo.num}"/>
			<div class="form-group">
				<label class="control-Label col-sm-2">번호 :</label>
				<div class="col-sm-10">
					<c:out value="${vo.num}"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-Label col-sm-2">아이디 :</label>
				<div class="col-sm-10">
					<c:out value="${vo.id}"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-Label col-sm-2">비밀번호 :</label>
				<div class="col-sm-10">
					<c:out value="${vo.pass}"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-Label col-sm-2">이름 :</label>
				<div class="col-sm-10">
					<c:out value="${vo.name}"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-Label col-sm-2">나이 :</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="age" name="age" value="${vo.age}" style="width:10%;"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-Label col-sm-2">이메일 :</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="email" name="email" value="${vo.email}" style="width:30%;"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-Label col-sm-2">전화번호 :</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="phone" name="phone" value="${vo.phone}" style="width:30%;"/>
				</div>
			</div>
		</form>
		</div>
		<div class="panel-footer" style="text-align: center;">
			<c:if test="${!empty sessionScope.userId}">
				<c:if test="${sessionScope.userId == vo.id}">
					<input type="button" value="수정하기" class='btn btn-primary' onclick="update()"/>
				</c:if>
				<c:if test="${sessionScope.userId != vo.id}">
					<input type="button" value="수정하기" class='btn btn-primary' onclick="update()" disabled="disabled"/>
				</c:if>
			</c:if>
			<input type="button" value="취소" class='btn btn-warning' onclick="frmreset()"/>
			<input type="button" value="리스트" onclick="location.href='${ctx}/memberList.do'" class='btn'/>
		</div>
	</div>
</div>
</body>
</html>

## 회원가입 페이지 개선 작업

<div class="container">
	<h2>회원가입 화면</h2>
	<div class="panel panel-default">
	<div class="panel-heading">Panel Heading</div>
	<div class="panel-body">Panel Content</div>
	<div class="panel-footer">Panel Footer</div>
	</div>
</div>
  • 부트 스트랩 > BS Forms > Bootstrap Horizontal Form
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>      
<c:set var="ctx" value="${pageContext.request.contextPath}"/>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
  <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.5.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		function add() {
			// form의 데이터 유효성 체크
			
			
			document.form1.action="<c:url value='/memberInsert.do'/>";
			document.form1.submit();
		}
		
		function frmreset() {
			document.form1.reset();
		}
	</script>
</head>
<body>
<div class="container">
	<h2>회원가입 화면</h2>
	<div class="panel panel-default">
	<div class="panel-heading">
		<c:if test="${sessionScope.userId != null && sessionScope != '' }">
			<label>${sessionScope.userName}님이 로그인 하셨습니다.</label>
		</c:if>
		<c:if test="${sessionScope.userId == null || sessionScope == '' }">
			<label>안녕하세요.</label>
		</c:if>	
	</div>
	<div class="panel-body">
	<form id="form1" name="form1" class="form-horizontal" method="post">
		<div class="form-group">
			<label class="control-label col-sm-2" for="id">아이디:</label>
			<div class="col-sm-10">
				<input type="text" class="form-control" id="id" name="id" placeholder="아이디를 입력하세요." style="width:30%;">
			</div>
		</div>
		<div class="form-group">
			<label class="control-label col-sm-2" for="pass">패스워드:</label>
			<div class="col-sm-10">
				<input type="password" class="form-control" id="pass" name="pass" placeholder="비밀번호를 입력하세요." style="width:30%;">
			</div>
		</div>
		<div class="form-group">
			<label class="control-label col-sm-2" for="name">이름:</label>
			<div class="col-sm-10">
				<input type="text" class="form-control" id="name" name="name" placeholder="이름을 입력하세요." style="width:30%;">
			</div>
		</div>
		<div class="form-group">
			<label class="control-label col-sm-2" for="age">나이:</label>
			<div class="col-sm-10">
				<input type="text" class="form-control" id="age" name="age" placeholder="나이입력" style="width:12%;">
			</div>
		</div>
		<div class="form-group">
			<label class="control-label col-sm-2" for="email">이메일:</label>
			<div class="col-sm-10">
				<input type="email" class="form-control" id="email" name="email" placeholder="이메일을 입력하세요." style="width:30%;">
			</div>
		</div>
		<div class="form-group">
			<label class="control-label col-sm-2" for="phone">전화번호:</label>
			<div class="col-sm-10">
				<input type="text" class="form-control" id="phone" name="phone" placeholder="전화번호를 입력하세요." style="width:30%;">
			</div>
		</div>
	</form>
	</div>
	<div class="panel-footer" style="text-align: center;">
		
		<c:if test="${sessionScope.userId == null || sessionScope.userId == ''}">
			<input type="button" value="등록" class='btn btn-primary' onclick="add()"/>
		</c:if>
		<c:if test="${sessionScope.userId != null && sessionScope.userId != ''}">
			<input type="button" value="등록" class='btn btn-primary' onclick="add()" disabled="disabled"/>
		</c:if>
		<input type="button" value="취소" class='btn btn-warning' onclick="frmreset()"/>
		<input type="button" value="리스트" onclick="location.href='${ctx}/memberList.do'" class='btn'/>
	</div>
</div>
</div>
</body>
</html>
반응형
저작자표시

'인프런 강의 학습 > MVC 프레임워크_나프2탄' 카테고리의 다른 글

인프런 나프_2탄 11일차 : MVC07_03 Ajax 기술  (0) 2021.06.27
인프런 나프_2탄 10일차 : MVC07_01~02 Ajax 기능을 이용한 아이디 중복체크  (0) 2021.06.27
인프런 나프_2탄 8일차 : MVC06_08 회원 로그인 후 상세보기 페이지  (0) 2021.06.26
인프런 나프_2탄 7일차 : MVC06_06~07 회원 로그인 화면처리, 로그인에 따른 버튼 활성화, 로그아웃  (0) 2021.06.26
인프런 나프_2탄 6일차 : MVC06_03~05 세션  (0) 2021.06.26

+ Recent posts

티스토리툴바