| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 |
Tags
- clone
- 파이썬
- php
- PHPStorm
- DataGrip
- jupyter
- MySQL
- Visual Studio Code
- database
- 깃 토큰
- 오류
- error
- visualstudio code
- OrCAD 다운로드
- import data
- run sql script
- 따옴표 삭제
- cmd
- Python
- csv
- github token
- console창
- localhost
- vscode
- github clone
- error 해결
- 단축키
- 클론
- 에러
- 데이터베이스
Archives
- Today
- Total
개발 노트
9/21 : MVC 모델1 제작(2/3) 본문
프로젝트 기반 JAVA 응용 SW개발 : 22.07.19~23.01.20/Servlet, JSP
9/21 : MVC 모델1 제작(2/3)
hayoung.dev 2022. 10. 4. 02:38(9/20 내용 이어짐)
4. 회원가입 페이지 제작
webapp > joinForm.jsp
<%@ 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>
<style type="text/css">
table {
background-color: pink;
}
</style>
<script type="text/javascript">
function chk() {
if (frm.passwd.value != frm.passwd2.value) {
alert("암호가 다릅니다");
frm.passwd.focus();
return false;
}
return true;
}
/* 새로 열릴 참의 속성 또는 창의 이름을 지정(target="_blank")
선택적인 값으로 기본값은 "_blank" . 사용 가능한 값을 다음과 같습니다.
- _blank : 새 창에 열립니다. 이것이 기본값입니다.
- _parent : 부모 프레임에 열립니다.
- _self : 현재 페이지를 대체합니다.
- _top : 로드된 프레임셋을 대체합니다.
- name(임의의 이름) : 새 창이 열리고 창의 이름을 지정합니다. 동일한 이름에 다시 open() 을 하면 기존의 열린창의 내용이 바뀝니다.
다른 이름을 사용하면 또다른 새창이 열립니다
var popup = window.open(url, name, option);
var popup = window.open('팝업주소', '팝업창 이름', '팝업창 설정');
*/
function winop() {
if (!frm.id.value) {
alert("id를 입력하고 사용하세요");
frm.id.focus();
return false;
}
/* confirmId.jsp 가 팝업창으로 열린다. (요즈음엔 팝업창보다 aJax를 쓰는 추세이다.)
id는 frm.id.value값. 즉 하단의 form(namedl frm)의 name값을 가지고 간다.*/
window.open("confirmId.jsp?id=" + frm.id.value, "kkk", "width=300 height=300");
}
</script>
</head>
<body>
<h2>회원가입</h2>
<form action="joinPro.jsp" name="frm" onsubmit="return chk()">
<table border="1">
<!-- Member.java에 저장한 필드명 그대로 맞춰놓는다. 그래야 joinPro.jsp에서 한번에 불러올 수 있다.-->
<tr>
<td>아이디</td>
<td><input type="text" name="id" required="required">
<input type="button" value="아이디체크" onclick="winop()"></td>
</tr>
<tr>
<td>암호</td>
<td><input type="password" name="passwd" required="required"></td>
</tr>
<tr>
<td>암호확인</td>
<td><input type="password" name="passwd2" required="required"></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" name="name" required="required"></td>
</tr>
<tr>
<td>주소</td>
<td><input type="text" name="address" required="required"></td>
</tr>
<tr>
<td>전화번호</td>
<!-- pattern : 입력할 패턴 placeholder : 도움말 -->
<td><input type="tel" name="tel" required="required"
pattern="\d{2,3}-\d{3,4}-\d{4}" placeholder="010-xxxx-xxxx"
title="2,3자리-3,4자리-4자리"></td>
</tr>
<tr>
<td><input type="submit" value="확인"></td>
<td><input type="reset" value="취소"></td>
</tr>
</table>
</form>
</body>
</html>webapp > joinPro.jsp
<%@page import="och12.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" errorPage="error.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 값을 html로 가져오는 방법 -->
<jsp:useBean id="member" class="och12.Member"></jsp:useBean>
<!-- 전부 불러옴. -->
<jsp:setProperty property="*" name="member"/>
<%
MemberDao md = MemberDao.getInstance();
int result = md.insert(member);
if (result > 0) {
%>
<script type="text/javascript">
alert("회원가입 축하 !! 이제 고생 좀 해");
location.href="loginForm.jsp";
</script>
<%
} else { %>
<script type="text/javascript">
alert("헐 실패야 똑바로 해 ~");
location.href="joinForm.jsp";
</script>
<% } %>
</body>
</html>
joinPro2.jsp (joinPro의 다른 방식)
<%@page import="och12.Member"%>
<%@page import="och12.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" errorPage="error.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
/* 자바코드로 가져오는 방법. */
Member member = new Member();
member.setId(request.getParameter("id"));
member.setPasswd(request.getParameter("passwd"));
member.setName(request.getParameter("name"));
member.setAddress(request.getParameter("address"));
member.setTel(request.getParameter("tel"));
MemberDao md = MemberDao.getInstance();
int result = md.insert(member);
if (result > 0) {
%>
<script type="text/javascript">
alert("회원가입 축하 !! 이제 고생 좀 해");
location.href="loginForm.jsp";
</script>
<%
} else { %>
<script type="text/javascript">
alert("헐 실패야 똑바로 해 ~");
location.href="joinForm.jsp";
</script>
<% } %>
</body>
</html>
5. 회원명단 페이지 제작
webapp > memberList.jsp
<%@page import="och12.Member"%>
<%@page import="java.util.List"%>
<%@page import="och12.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" errorPage="error.jsp"%>
<%@ include file="memberCheck.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">tr:hover{ background-color: orange; }
td { text-align: center; }
</style>
</head>
<body bgcolor="yellow">
<%
MemberDao md = MemberDao.getInstance();
List<Member> list = md.list();
if (list == null) {
out.println("회원이 없습니다");
}else {
%>
<h2>회원정보</h2>
<table bgcolor="pink" width="100%">
<tr bgcolor="cyan"><th>아이디</th><th>이름</th><th>주소</th>
<th>전화번호</th><th>가입일</th></tr>
<% for(int i = 0; i < list.size(); i++) {
out.println("<tr><td>"+list.get(i).getId()+
"</td><td>"+list.get(i).getName()+
"</td><td>"+list.get(i).getAddress()+
"</td><td>"+list.get(i).getTel()+
"</td><td>"+list.get(i).getReg_date()+"</td></tr>");
} %>
</table>
<% } %>
</body>
</html>
6. 회원정보 수정 페이지 제작
webapp > updateForm.jsp
<%@page import="och12.Member"%>
<%@page import="och12.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" errorPage="error.jsp"%>
<%@ include file="memberCheck.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table {
background-color: pink;
}
</style>
</head>
<body>
<%
/* memberCheck.jsp에서 가져온 id. 나만 수정이 가능하다. */
MemberDao md = MemberDao.getInstance();
/* id를 가지고 MemberDao.java의 select()를 실행한다. */
Member member = md.select(id);
String context = request.getContextPath(); // Tomcat Meta data
%>
<h2>회원정보 수정</h2>
<form action="updatePro.jsp">
<table border="1" id="table">
<tr>
<td>아이디</td>
<!-- value의 ""안에 들어간 값이 그대로 입력되기 때문에 띄어쓰기가 들어가지 않도록 주의한다. -->
<td><%=id%><input type="hidden" class="id" name="id" id="id"
value="<%=member.getId()%>"></td>
</tr>
<tr>
<td>암호</td>
<td><input type="password" name="passwd" id="passwd" required="required"></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" name="name" required="required"
value="<%=member.getName()%>"></td>
</tr>
<tr>
<td>주소</td>
<td><input type="text" name="address" required="required"
value="<%=member.getAddress()%>"></td>
</tr>
<tr>
<td>전화번호</td>
<td><input type="tel" name="tel" required="required"
pattern="\d{2,3}-\d{3,4}-\d{4}" value="<%=member.getTel()%>"></td>
</tr>
<tr>
<td>날짜</td>
<td><%=member.getReg_date()%></td>
</tr>
<tr>
<td><input type="submit" value="확인"></td>
<td><input type="reset" value="취소"></td>
</tr>
</table>
</form>
</body>
</html>webapp > updatePro.jsp
<%@page import="och12.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" errorPage="error.jsp"%>
<%@ include file="memberCheck.jsp" %>
<!-- 오라클과 작업할 것이기 때문에 에러와 로그인 jsp파일을 위처럼 걸어준다. -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<jsp:useBean id="member" class="och12.Member"></jsp:useBean>
<!-- 모든 프로젝트를 가지고 이동 -->
<jsp:setProperty property="*" name="member"/>
<%
MemberDao md = MemberDao.getInstance();
int result = md.update(member); /* MemberDao.java의 update 실행 */
if (result > 0) {
%>
<script type="text/javascript">
alert("사용자 정보 수정 완료");
location.href="main.jsp";
</script>
<% } else { %>
<script type="text/javascript">
alert("오류야");
history.back();
</script>
<% } %>
</body>
</html>
7. 회원탈퇴 페이지 제작
webapp > deleteForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="memberCheck.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>탈퇴하려면 암호를 입력하시오</h2>
<form action="deletePro.jsp">
<fieldset >
<label for="passwd">암호 : </label>
<input type="password" name="passwd" id="passwd"><p>
<input type="submit" value="확인">
</fieldset>
</form>
</body>
</html>webapp > deletePro.jsp (강의 없음)
<%@page import="och12.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" errorPage="error.jsp"%>
<%@ include file="memberCheck.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
String passwd = request.getParameter("passwd");
MemberDao md = MemberDao.getInstance();
System.out.println("DeletePro id->"+id);
int result = md.delete(id, passwd);
if (result == 1) {
session.invalidate();
%>
<script type="text/javascript">
alert("탈퇴되었습니다. 잘 해 보세요 ?");
location.href="main.jsp";
</script>
<% } else if (result==0) { %>
<script type="text/javascript">
alert("암호 똑바로 입력해?");
history.go(-1);
</script>
<% } else { %>
<script type="text/javascript">
alert("유저가 다름?");
history.go(-1);
</script>
<% } %>
</body>
</html>
8. 아이디 중복 확인 페이지 제작
confirmId.jsp
<%@page import="och12.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" errorPage="error.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- id를 직접 가져온다. -->
<% String id = request.getParameter("id"); %>
<script type="text/javascript">
function wincl() {
opener.document.frm.id.value="<%=id%>";
window.close();
}
</script>
</head>
<body>
<%
MemberDao md = MemberDao.getInstance();
int result = md.confirm(id);
// 존재 않는 사용자
if (result == 0) {
%>
<%=id %>는 사용할수 있습니다<p>
<input type="button" value="닫기" onclick="wincl()">
<% } else { // 존재 사용자 --> 1 %>
<%=id %>이미 있는 아이디니 다른 것을 입력하세요<p>
<form >
아이디 : <input type="text" name="id"><p>
<input type="submit" value="확인">
</form>
<% } %>
</body>
</html>[실행 순서]
0. loginForm.jsp 실행
1. 회원가입 누르면 joinForm.jsp 실행
2. confirmid.jsp 하여 사용가능한 아이디인지 확인
9. 회원가입(image를 추가할 수 있는) 페이지 제작
webapp > joinForm3.jsp
<%@ 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>
<style type="text/css">
table {
background-color: pink;
}
</style>
<script type="text/javascript">
function chk() {
if (frm.passwd.value != frm.passwd2.value) {
alert("암호가 다릅니다");
frm.passwd.focus();
return false;
}
return true;
}
/* 새로 열릴 참의 속성 또는 창의 이름을 지정(target="_blank")
선택적인 값으로 기본값은 "_blank" . 사용 가능한 값을 다음과 같습니다.
- _blank : 새 창에 열립니다. 이것이 기본값입니다.
- _parent : 부모 프레임에 열립니다.
- _self : 현재 페이지를 대체합니다.
- _top : 로드된 프레임셋을 대체합니다.
- name(임의의 이름) : 새 창이 열리고 창의 이름을 지정합니다. 동일한 이름에 다시 open() 을 하면 기존의 열린창의 내용이 바뀝니다.
다른 이름을 사용하면 또다른 새창이 열립니다
var popup = window.open(url, name, option);
var popup = window.open('팝업주소', '팝업창 이름', '팝업창 설정');
*/
function winop() {
if (!frm.id.value) {
alert("id를 입력하고 사용하세요");
frm.id.focus();
return false;
}
window.open("confirmId.jsp?id=" + frm.id.value, "kkk", "width=300 height=300");
}
</script>
</head>
<body>
<h2>회원가입(img_path 추가)</h2>
<form action="joinPro3.jsp" name="frm" onsubmit="return chk()" method="post" enctype="multipart/form-data">
<table border="1">
<tr>
<td>아이디</td>
<td><input type="text" name="id" required="required">
<input type="button" value="아이디체크" onclick="winop()"></td>
</tr>
<tr>
<td>암호</td>
<td><input type="password" name="passwd" required="required"></td>
</tr>
<tr>
<td>암호확인</td>
<td><input type="password" name="passwd2" required="required"></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" name="name" required="required"></td>
</tr>
<tr>
<td>주소</td>
<td><input type="text" name="address" required="required"></td>
</tr>
<tr>
<td>전화번호</td>
<td><input type="tel" name="tel" required="required"
pattern="\d{2,3}-\d{3,4}-\d{4}" placeholder="010-xxxx-xxxx"
title="2,3자리-3,4자리-4자리"></td>
</tr>
<tr>
<td>회원Image</td>
<td><input type="file" name="img_path" required="required"></td>
</tr>
<tr>
<td><input type="submit" value="확인"></td>
<td><input type="reset" value="취소"></td>
</tr>
</table>
</form>
</body>
</html>webapp > joinPro3.jsp
<%@page import="och12.Member"%>
<%@page import="java.io.File"%>
<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@page import="java.util.Enumeration"%>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@page import="och12.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" errorPage="error.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<!-- 사진 저장하는 경우의 코드 -->
<body>
<%
request.setCharacterEncoding("utf-8");
// 5M
int maxSize = 5 * 1024 * 1024;
String fileSave = "/fileSave";
// Meta Data
String realPath = getServletContext().getRealPath(fileSave);
System.out.println("realPath->" + realPath);
//MultipartRequest는 cos.jar에 있음.
MultipartRequest multi = new MultipartRequest(request, realPath, maxSize, "utf-8", new DefaultFileRenamePolicy());
Enumeration en = multi.getFileNames();
// 서버에 저장된 파일 이름
String serverSaveFilename = "";
while (en.hasMoreElements()) {
//input 태그의 속성이 file인 태그의 name 속성값 :파라미터이름
String parameterName = (String) en.nextElement();
//서버에 저장된 파일 이름
serverSaveFilename = multi.getFilesystemName(parameterName);
//전송전 원래의 파일 이름
String original = multi.getOriginalFileName(parameterName);
//전송된 파일의 내용 타입
String type = multi.getContentType(parameterName);
//전송된 파일속성이 file인 태그의 name 속성값을 이용해 파일객체생성
File file = multi.getFile(parameterName);
out.println("real Path : " + realPath + "<br>");
out.println("파라메터 이름 : " + parameterName + "<br>");
out.println("실제 파일 이름 : " + original + "<br>");
out.println("저장된 파일 이름 : " + serverSaveFilename + "<br>");
out.println("파일 타입 : " + type + "<br>");
if (file != null) {
out.println("크기 : " + file.length() + "<br>");
}
}
//request가 아니라 multi로 받아야 한다.
String id = multi.getParameter("id");
String name = multi.getParameter("name");
String passwd = multi.getParameter("passwd");
String address = multi.getParameter("address");
String tel = multi.getParameter("tel");
String img_path = serverSaveFilename;
// DTO 작업
Member member = new Member();
member.setId(id);
member.setName(name);
member.setPasswd(passwd);
member.setAddress(address);
member.setTel(tel);
member.setImg_path(img_path);
MemberDao md = MemberDao.getInstance();
int result = md.insert3(member);
if (result > 0) {
%>
<script type="text/javascript">
alert("회원가입(image) 축하 !! 이제 고생 좀 해");
location.href="loginForm.jsp";
</script>
<%
} else { %>
<script type="text/javascript">
alert("헐 실패야 똑바로 해 ~");
location.href="joinForm.jsp";
</script>
<% } %>
</body>
</html>
출력 결과
베포한 서버의 이미지 폴더로 저장된다.
webapp > updateForm3.jsp : 내가 올린 파일을 화면에서 볼 수 있다.
<%@page import="och12.Member"%>
<%@page import="och12.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" errorPage="error.jsp"%>
<%@ include file="memberCheck.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table {
background-color: pink;
}
</style>
</head>
<body>
<%
MemberDao md = MemberDao.getInstance();
Member member = md.select(id);
String context = request.getContextPath(); // Tomcat Meta data 나의 메타파일
%>
<h2>회원정보 수정</h2>
<form action="updatePro.jsp">
<table border="1" id="table">
<tr>
<td>아이디</td>
<td><%=id%><input type="hidden" class="id" name="id" id="id"
value="<%=member.getId()%> "></td>
</tr>
<tr>
<td>암호</td>
<td><input type="password" name="passwd" id="passwd" required="required"></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" name="name" required="required"
value="<%=member.getName()%> "></td>
</tr>
<tr>
<td>주소</td>
<td><input type="text" name="address" required="required"
value="<%=member.getAddress()%>"></td>
</tr>
<tr>
<td>전화번호</td>
<td><input type="tel" name="tel" required="required"
pattern="\d{2,3}-\d{3,4}-\d{4}" value="<%=member.getTel()%>"></td>
</tr>
<tr>
<td>날짜</td>
<td><%=member.getReg_date()%></td>
</tr>
<tr>
<!-- 내가 올린 이미지파일 보기 -->
<td>회원이미지</td>
<td><img alt="회원이미지" src="<%=context%>/fileSave/<%=member.getImg_path()%>"></td>
</tr>
<tr>
<td><input type="submit" value="확인"></td>
<td><input type="reset" value="취소"></td>
</tr>
</table>
</form>
</body>
</html>반응형
'프로젝트 기반 JAVA 응용 SW개발 : 22.07.19~23.01.20 > Servlet, JSP' 카테고리의 다른 글
| 9/23 : MVC 모델2 제작(2/4) (0) | 2022.10.04 |
|---|---|
| 9/22 : MVC 모델1 제작(3/3), MVC 모델2 제작(1/4) (0) | 2022.10.04 |
| 9/20 : MVC 모델1 제작(1/3) (0) | 2022.10.04 |
| 9/19 css 셀렉터, Ajax (0) | 2022.09.24 |
| 9/8 JSTL을 구성하는 작은 라이브러리들, forEach, forTokens (0) | 2022.09.15 |
'프로젝트 기반 JAVA 응용 SW개발 : 22.07.19~23.01.20/Servlet, JSP' Related Articles
more
