멋쟁이v의 개발일지

[JSP] 회원관리 화면 구현(가짜화면) 본문

0년차/JAVA

[JSP] 회원관리 화면 구현(가짜화면)

멋쟁이v 2023. 4. 23. 16:23
728x90
320x100

[목차]

01. 회원 관리 화면

  • 만들어질 최종 화면

    1️⃣ 초기 레이아웃(상단메뉴 4개, 왼쪽메뉴, index, 하단메뉴)

    2️⃣ 회원조회 클릭 시 회원 리스트 화면

    3️⃣ 회원가입 메뉴 클릭 후 회원가입 화면

    4️⃣ 회원가입 후 회원 리스트 화면

    5️⃣ 수정버튼 클릭 후 수정 화면

    6️⃣ 수정 후 회원 리스트 화면

    7️⃣ 삭제 버튼 클릭 후 회원 리스트 화면

02. 초기 레이아웃 화면

💡
1️⃣ 메뉴 구성을 위한 초기 레이아웃 화면을 만든다. 2️⃣ 상단, 좌측, 우측, 하단 메뉴로 구성이 된 레이아웃 화면을 가져온다.
  • [코드예제] index.jsp
    <%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/css/main2.css" />
</head>

<body>
   <!-- Begin Wrapper -->
 <div id="wrapper">
     <!-- Begin Header -->
     <div id="header">
       상단 메뉴	<br/><br/>
       <a href="#">01 회원 가입</a>		 
       <a href="#">02 회원 조회</a>		 
       <a href="#">03 상품 등록</a>		 
       <a href="#">04 상품 조회</a>		 
		 </div>
		 <!-- End Header -->
		 <!-- Begin Left Column -->
		 <div id="leftcolumn">
		       왼쪽 메뉴	<br/>
		 </div>
		 <!-- End Left Column -->
		 
		 <!-- Begin Right Column -->
		 <div id="rightcolumn">
	          index.jsp 화면입니다.	 
		 </div>
		 <!-- End Right Column -->
		 <!-- Begin Footer -->
		 <div id="footer">
			   한국스마트정보교육원	
	     </div>
		 <!-- End Footer -->
   </div>
   <!-- End Wrapper -->
   
</body>
</html>

03. 회원 조회 화면

💡
1️⃣ 상단 메뉴의 회원 조회 버튼에 경로를 설정해준다. 2️⃣ 클릭 후 테이블 형식의 회원 리스트 화면이 나온다.
👉🏻
기존 화면의 회원조회 a태그 요소에 경로 설정하고, 복사한 후 user_list.jsp 파일을 만들고 붙여넣고, 오른쪽 컬럼 부분에 테이블로 형태로 리스트를 만들어 준다.
// index.jsp 파일에서 회원조회 경로 설정
<div id="header">
 상단 메뉴	<br/><br/>
 <a href="#">01 회원 가입</a>		 
 <a href="<%= request.getContextPath() %>/user/user_list.jsp">02 회원 조회</a>		 
 <a href="#">03 상품 등록</a>		 
 <a href="#">04 상품 조회</a>		 
</div>
  • [코드예제] user_list.jsp
    <%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/css/main.css" />
</head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>

<body>
   <!-- Begin Wrapper -->
   <div id="wrapper">
     <!-- Begin Header -->
     <div id="header">
       상단 메뉴	<br/><br/>
       <a href="#">01 회원 가입</a>		 
       <a href="<%= request.getContextPath() %>/user/user_list.jsp">02 회원 조회</a>		 
       <a href="#">03 상품 등록</a>		 
       <a href="#">04 상품 조회</a>		 
		 </div>
		 <!-- End Header -->
		 <!-- Begin Left Column -->
		 <div id="leftcolumn">
		       왼쪽 메뉴	<br/>
		 </div>
		 <!-- End Left Column -->
		 
		 <!-- Begin Right Column -->
		 <div id="rightcolumn">

			<table style="width:100%">
			  <tr>
			    <th>번호</th>
			    <th>아이디</th> 
			    <th>비밀번호</th>
			    <th>이름</th>
			    <th>전화번호</th>
			    <th>이메일</th>
			    <th>수정</th>
			    <th>삭제</th>
			  </tr>
			  <tr>
			    <td>1</td>
			    <td>id001</td>
			    <td>pw001</td>
			    <td>홍길동</td>
			    <td>010-0001</td>
			    <td>email01@email.com</td>
			    <td>수정버튼</td>
			    <td>삭제버튼</td>
			  </tr>
			</table>

		 </div>
		 <!-- End Right Column -->
		 <!-- Begin Footer -->
		 <div id="footer">
			   한국스마트정보교육원		
	     </div>
		 <!-- End Footer -->
   </div>
   <!-- End Wrapper -->
   
</body>
</html>

04. 회원 가입 화면

💡
1️⃣ 상단 메뉴의 회원 가입 버튼에 경로를 설정해준다. 2️⃣ 클릭 후 회원가입 화면이 나온다.
👉🏻
기존 화면의 회원가입 a태그 요소에 경로 설정하고, 복사한 후 user_insert_form.jsp 파일을 만들고 붙여넣고, 오른쪽 컬럼 부분을 회원가입 폼으로 만들어 준다.
// index.jsp, user_list.jsp 파일에서 회원가입 경로 설정
<div id="header">
 상단 메뉴	<br/><br/>
 <a href="<%= request.getContextPath() %>/user/user_insert_form.jsp">01 회원 가입</a>
 <a href="<%= request.getContextPath() %>/user/user_list.jsp">02 회원 조회</a>		 
 <a href="#">03 상품 등록</a>		 
 <a href="#">04 상품 조회</a>		 
</div>
  • [코드예제] user_insert_form.jsp
    <%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/css/main.css" />
</head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>

<body>
   <!-- Begin Wrapper -->
   <div id="wrapper">
     <!-- Begin Header -->
     <div id="header">
       상단 메뉴	<br/><br/>
       <a href="<%= request.getContextPath() %>/user/user_insert_form.jsp">01 회원 가입</a>
       <a href="<%= request.getContextPath() %>/user/user_list.jsp">02 회원 조회</a>		 
       <a href="#">03 상품 등록</a>		 
       <a href="#">04 상품 조회</a>		 
		 </div>
		 <!-- End Header -->
		 <!-- Begin Left Column -->
		 <div id="leftcolumn">
		       왼쪽 메뉴	<br/>
		 </div>
		 <!-- End Left Column -->
		 
		 <!-- Begin Right Column -->
		 <div id="rightcolumn">

			<h3>회원가입화면</h3>
			<form action="" method="post">
				아이디 : <input type="text" name="uid"> <br/>
				비밀번호 : <input type="text" name="upw"> <br/>
				이름 : <input type="text" name="uname"> <br/>
				전화번호 : <input type="text" name="uphone"> <br/>
				이메일 : <input type="text" name="uemail"> <br/><br/>
				<input type="submit" value="회원가입버튼">	
			
		 </div>
		 <!-- End Right Column -->
		 <!-- Begin Footer -->
		 <div id="footer">
			   한국스마트정보교육원		
	     </div>
		 <!-- End Footer -->
   </div>
   <!-- End Wrapper -->
   
</body>
</html>

05. 회원 가입 후 화면

💡
1️⃣ 회원가입버튼에 경로를 설정해준다. 2️⃣ 클릭 후 회원 한명이 추가된 화면이 나온다.
👉🏻
회원 가입 화면에 폼 태그 요소에 action 속성으로 경로 설정하고, 기존 user_list.jsp 코드를 복사 후 user_list_insert.jsp 파일을 만들고 붙여넣고, 오른쪽 컬럼 부분을 한명이 추가된 리스트로 만들어 준다.
// user_insert_form.jsp 파일에서 경로 설정
<form action="<%= request.getContextPath() %>/user/user_list_insert.jsp" method="post">
	아이디 : <input type="text" name="uid"> <br/>
	비밀번호 : <input type="text" name="upw"> <br/>
	이름 : <input type="text" name="uname"> <br/>
	전화번호 : <input type="text" name="uphone"> <br/>
	이메일 : <input type="text" name="uemail"> <br/><br/>
	<input type="submit" value="회원가입버튼">	
</form>
  • [코드예제] user_list_insert.jsp
    <%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/css/main.css" />
</head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>

<body>
   <!-- Begin Wrapper -->
   <div id="wrapper">
     <!-- Begin Header -->
     <div id="header">
       상단 메뉴	<br/><br/>
       <a href="<%= request.getContextPath() %>/user/user_insert_form.jsp">01 회원 가입</a>
       <a href="<%= request.getContextPath() %>/user/user_list.jsp">02 회원 조회</a>		 
       <a href="#">03 상품 등록</a>		 
       <a href="#">04 상품 조회</a>		 
		 </div>
		 <!-- End Header -->
		 <!-- Begin Left Column -->
		 <div id="leftcolumn">
		       왼쪽 메뉴	<br/>
		 </div>
		 <!-- End Left Column -->
		 
		 <!-- Begin Right Column -->
		 <div id="rightcolumn">

			<table style="width:100%">
			  <tr>
			    <th>번호</th>
			    <th>아이디</th> 
			    <th>비밀번호</th>
			    <th>이름</th>
			    <th>전화번호</th>
			    <th>이메일</th>
			    <th>수정</th>
			    <th>삭제</th>
			  </tr>
			  <tr>
			    <td>1</td>
			    <td>id001</td>
			    <td>pw001</td>
			    <td>홍길동</td>
			    <td>010-0001</td>
			    <td>email01@email.com</td>
			    <td>수정버튼</td>
			    <td>삭제버튼</td>
			  </tr>
			  <tr>
			    <td>2</td>
			    <td>id002</td>
			    <td>pw002</td>
			    <td>이길동</td>
			    <td>010-0002</td>
			    <td>email02@email.com</td>
			    <td>수정버튼</td>
			    <td>삭제버튼</td>
			  </tr>
			</table>

		 </div>
		 <!-- End Right Column -->
		 <!-- Begin Footer -->
		 <div id="footer">
			   한국스마트정보교육원
	     </div>
		 <!-- End Footer -->
   </div>
   <!-- End Wrapper -->
   
</body>
</html>

06. 수정 화면

💡
1️⃣ 수정버튼에 경로를 설정한다. 2️⃣ 클릭 후 회원을 수정하는 화면이 나온다.
👉🏻
한명이 추가된 리스트 화면 수정 버튼에 a태그로 경로 설정하고, 기존 user_insert_form.jsp 코드를 복사 후 user_update_form.jsp 파일을 만들고 붙여넣고, 오른쪽 컬럼 부분을 수정 화면 폼으로 만들어 준다.
// user_list_insert.jsp 파일에서 경로 설정
<td><a href="<%= request.getContextPath()%>/user/user_update_form.jsp">수정버튼</a></td>
  • [코드예제] user_update_form.jsp
    <%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/css/main.css" />
</head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>

<body>
   <!-- Begin Wrapper -->
   <div id="wrapper">
     <!-- Begin Header -->
     <div id="header">
       상단 메뉴	<br/><br/>
       <a href="<%= request.getContextPath() %>/user/user_insert_form.jsp">01 회원 가입</a>
       <a href="<%= request.getContextPath() %>/user/user_list.jsp">02 회원 조회</a>		 
       <a href="#">03 상품 등록</a>		 
       <a href="#">04 상품 조회</a>		 
		 </div>
		 <!-- End Header -->
		 <!-- Begin Left Column -->
		 <div id="leftcolumn">
		       왼쪽 메뉴	<br/>
		 </div>
		 <!-- End Left Column -->
		 
		 <!-- Begin Right Column -->
		 <div id="rightcolumn">

			<h3>수정 화면</h3>
			<form action="" method="post">
				아이디 : <input type="text" name="uid"> <br/>
				비밀번호 : <input type="text" name="upw"> <br/>
				이름 : <input type="text" name="uname"> <br/>
				전화번호 : <input type="text" name="uphone"> <br/>
				이메일 : <input type="text" name="uemail"> <br/><br/>
				<input type="submit" value="수정버튼">	
			</form>
			
		 </div>
		 <!-- End Right Column -->
		 <!-- Begin Footer -->
		 <div id="footer">
			   한국스마트정보교육원	
	     </div>
		 <!-- End Footer -->
   </div>
   <!-- End Wrapper -->
   
</body>
</html>

07. 수정 후 화면

💡
1️⃣ 수정 화면에서 수정버튼에 경로를 설정한다. 2️⃣ 클릭 후 수정된 회원 리스트가 나온다.
👉🏻
수정 화면에서 form태그의 경로 설정하고, 기존 user_list_insert.jsp 코드를 복사 후 user_list_update.jsp 파일을 만들고 붙여넣고, 오른쪽 컬럼 부분을 수정후 회원 리스트로 만들어 준다.
// user_update_form.jsp 파일에서 경로 설정
<form action="<%= request.getContextPath() %>/user/user_list_update.jsp" method="post">
	아이디 : <input type="text" name="uid"> <br/>
	비밀번호 : <input type="text" name="upw"> <br/>
	이름 : <input type="text" name="uname"> <br/>
	전화번호 : <input type="text" name="uphone"> <br/>
	이메일 : <input type="text" name="uemail"> <br/><br/>
	<input type="submit" value="수정버튼">	
</form>
  • [코드예제] user_list_update.jsp
    <%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/css/main.css" />
</head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>

<body>
   <!-- Begin Wrapper -->
   <div id="wrapper">
     <!-- Begin Header -->
     <div id="header">
       상단 메뉴	<br/><br/>
       <a href="<%= request.getContextPath() %>/user/user_insert_form.jsp">01 회원 가입</a>
       <a href="<%= request.getContextPath() %>/user/user_list.jsp">02 회원 조회</a>		 
       <a href="#">03 상품 등록</a>		 
       <a href="#">04 상품 조회</a>		 
		 </div>
		 <!-- End Header -->
		 <!-- Begin Left Column -->
		 <div id="leftcolumn">
		       왼쪽 메뉴	<br/>
		 </div>
		 <!-- End Left Column -->
		 
		 <!-- Begin Right Column -->
		 <div id="rightcolumn">
			<table style="width:100%">
			  <tr>
			    <th>번호</th>
			    <th>아이디</th> 
			    <th>비밀번호</th>
			    <th>이름</th>
			    <th>전화번호</th>
			    <th>이메일</th>
			    <th>수정</th>
			    <th>삭제</th>
			  </tr>
			  <tr>
			    <td>1</td>
			    <td>id001</td>
			    <td>pw001</td>
			    <td>홍길동</td>
			    <td>010-0001</td>
			    <td>email01@email.com</td>
			    <td>수정버튼</td>
			    <td>삭제버튼</td>
			  </tr>
			  <tr>
			    <td>2</td>
			    <td>수정후_id003</td>
			    <td>수정후_pw003</td>
			    <td>수정후_삼길동</td>
			    <td>수정후_010-0003</td>
			    <td>수정후_email03@email.com</td>
			    <td><a href="<%= request.getContextPath()%>/user/user_update_form.jsp">수정버튼</a></td>
			    <td>삭제버튼</td>
			  </tr>
			  
			</table>
		 </div>
		 <!-- End Right Column -->
		 <!-- Begin Footer -->
		 <div id="footer">
			   한국스마트정보교육원	
	     </div>
		 <!-- End Footer -->
   </div>
   <!-- End Wrapper -->
   
</body>
</html>

08. 삭제 후 화면

💡
1️⃣ 삭제버튼에 경로를 설정한다. 2️⃣ 클릭 후 회원이 삭제된 화면이 나온다.
👉🏻
삭제 버튼이 있는 모든 jsp파일의 삭제버튼에 경로 설정을 해주고, user_list.jsp 코드를 복사 후 user_list_delete.jsp 파일을 만들고 붙여주면 삭제 된 한명 회원 리스트가 된다.
// 삭제버튼이 있는 모든 jsp 파일 경로 설정
<td><a href="<%= request.getContextPath()%>/user/user_list_delete.jsp">삭제버튼</a></td>
  • [코드예제] user_list_delete.jsp
    <%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/css/main.css" />
</head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>

<body>
   <!-- Begin Wrapper -->
   <div id="wrapper">
     <!-- Begin Header -->
     <div id="header">
       상단 메뉴	<br/><br/>
       <a href="<%= request.getContextPath() %>/user/user_insert_form.jsp">01 회원 가입</a>
       <a href="<%= request.getContextPath() %>/user/user_list.jsp">02 회원 조회</a>		 
       <a href="#">03 상품 등록</a>		 
       <a href="#">04 상품 조회</a>		 
		 </div>
		 <!-- End Header -->
		 <!-- Begin Left Column -->
		 <div id="leftcolumn">
		       왼쪽 메뉴	<br/>
		 </div>
		 <!-- End Left Column -->
		 
		 <!-- Begin Right Column -->
		 <div id="rightcolumn">
			<table style="width:100%">
			  <tr>
			    <th>번호</th>
			    <th>아이디</th> 
			    <th>비밀번호</th>
			    <th>이름</th>
			    <th>전화번호</th>
			    <th>이메일</th>
			    <th>수정</th>
			    <th>삭제</th>
			  </tr>
			  <tr>
			    <td>1</td>
			    <td>id001</td>
			    <td>pw001</td>
			    <td>홍길동</td>
			    <td>010-0001</td>
			    <td>email01@email.com</td>
			    <td>수정버튼</td>
			    <td>삭제버튼</td>
			  </tr>
			</table>
		 </div>
		 <!-- End Right Column -->
		 <!-- Begin Footer -->
		 <div id="footer">
			   한국스마트정보교육원
	     </div>
		 <!-- End Footer -->
   </div>
   <!-- End Wrapper -->
   
</body>
</html>

tag : #jsp #form #post #get #화면처리 #경로 #레이아웃


Uploaded by N2T

728x90
320x100

'0년차 > JAVA' 카테고리의 다른 글

[JSP] include 화면처리  (0) 2023.04.23
[JSP] post, get 방식으로 회원관리 화면 구현(진짜화면)  (0) 2023.04.23
[JSP] post, get 방식으로 데이터 주고 받는 방법  (0) 2023.04.23
[JSP] jsp와 java 메소드 선언 및 호출, jsp와 java 연결 후 화면 출력  (0) 2023.04.08
[JAVA] 패키지/클래스 생성, 메서드 선언 및 호출  (0) 2023.03.26
'0년차/JAVA' Related Articles more
Comments