반응형
JavaBoardEx/2024_0627_PhotoGallery at main · chaSunil/JavaBoardEx
게시판연습. Contribute to chaSunil/JavaBoardEx development by creating an account on GitHub.
github.com
자바스크립트에서 객체를 JSON으로 Ajax로 받아서 처리한다.
객체를 일일이 하드코딩해서 받아주려면, 고생한다. 라이브러리를 오늘 활용해보자.
<c:forEach var="vo" items="${list}">
<div class="photo" onclick="showPhoto('${vo.p_idx}');">
<img src="../images/${vo.p_filename}">
<div class="title">${vo.p_title}</div>
</div>
</c:forEach>
모달 만들기
<%@ 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>
<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.7.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
.mycommon {
text-align: center;
border: 1px solid gray;
margin-bottom: 10px;
padding: 5px;
}
#pop_image{
width: 300px;
height: 300px;
border: 2px solid gray;
outline: 2px solid black;
}
#pop_content {
min-height: 50px;
}
</style>
</head>
<body>
<div class="modal fade" id="photoModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="pop_mem_name"></h4>
</div>
<!-- 본문 -->
<div class="modal-body">
<!-- 이미지 -->
<div class="mycommon" style="text-align: center; height: 310px;">
<img id="pop_image" src="">
</div>
<div class="mycommon" id="pop_title">사진제목</div>
<div class="mycommon" id="pop_content">사진내용</div>
<div class="mycommon" id="pop_regdate">올린날짜</div>
<div id="pop_jop" style="text-align: center;">
<input style="display: none;" class="btn btn-info" type="button" value="수정"> <input
style="display: none;" class="btn btn-danger" type="button" value="삭제"> <input
style="display: none;" class="btn btn-success" type="button" value="다운">
<button style="display: none;" class="btn btn-primary" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div> -->
</div>
</div>
</div>
</body>
</html>
ajax 사용
<%@ 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" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
@font-face {
font-family: 'MabinogiClassicR';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2207-01@1.0/MabinogiClassicR.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
* {
font-family: 'MabinogiClassicR';
}
#background {
background: url(../images/maul.png) no-repeat 100% 0 fixed;
background-size: cover;
}
#box {
width: 800px;
height: 1200px;
margin: auto;
}
#title {
display: block;
margin: auto;
margin-bottom: 50px;
width: 250px;
}
#photo-box {
height: 700px;
background-color: white;
border: 2px solid black;
margin-top: 10px;
/* 상하스크롤 */
overflow-y: scroll;
}
.photo {
width: 140px;
height: 160px;
border: 1px solid gray;
overflow: hidden;
margin-left: 45px;
margin-top: 50px;
padding: 10px;
float: left;
}
.photo:hover {
border-color: green;
}
.photo > img {
height: 110px;
width: 120px;
object-fit : cover;
border: 1px solid black;
}
.title {
border: 1px solid gray;
padding: 1px;
margin-top: 5px;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
}
</style>
<script type="text/javascript">
function photo_insert() {
// 로그인 체크(로그인이 안된 경우)
if("${ empty user }"=="true") {
if (confirm("사진올리기는 로그인 하신 후 이용이 가능합니다.\n로그인 하시겠습니까?")==false) {
return;
} else {
location.href="../member/login_form.do";
return;
}
}
// 로그인이 된 경우 => 사진등록폼으로 이동
location.href="insert_form.do"; // PhotoInsertFromAction
}
function showPhoto(p_idx){
alert(p_idx + "번 그림정보 조회");
$("#photoModal").modal({backdrop: "static"});
// p_idx에 대한 사진정보 가져오기(Ajax이용 JSON 형식)
// 팝업화면에서 백그라운드 형식으로 ajax가 데이터를 요청해서 가져온다.
$.ajax({
url : "photo_one.do", // PhotoOneAction
data : {"p_idx": p_idx}, // parameter => photo_one.do?p_idx=5
dataType: "json",
success : function(res_data){
// res_data = {"p_idx":5, "p_title":"제목", "p_content":"내용", "p_filename":"a.jpg"...}
console.log(res_data);
$("#pop_image").prop("src","../images/" + res_data.p_filename);
},
error : function(err){
alert(err.responseText);
}
});
$("#pop_title").html("내가 부여한 제목");
}
</script>
</head>
<body>
<!-- popup:Modal -->
<%@include file="popup.jsp" %>
<div id="background">
<div id="box">
<img id="title" alt="" src="../images/maplelogo.png">
<div class="row">
<div class="col-sm-6">
<input class="btn btn-primary" type="button" value="사진올리기" onclick="photo_insert();">
</div>
<div class="col-sm-6" style="text-align: right;">
<!-- 로그인이 안된 경우 -->
<c:if test="${empty user}">
<input class="btn btn-info" type="button" value="회원가입" onclick="location.href='../member/insert_form.do'">
<input class="btn btn-primary" type="button" value="로그인" onclick="location.href='../member/login_form.do'">
</c:if>
<!-- 로그인이 된 경우 -->
<c:if test="${not empty user}">
<b>${user.mem_name}</b>님 환영합니다.
<input class="btn btn-primary" type="button" value="로그아웃" onclick="location.href='../member/logout.do'">
</c:if>
</div>
</div>
<div id="photo-box">
<c:forEach var="vo" items="${list}">
<div class="photo" onclick="showPhoto('${vo.p_idx}');">
<img src="../images/${vo.p_filename}">
<div class="title">${vo.p_title}</div>
</div>
</c:forEach>
</div>
</div>
</div>
</body>
</html>
include 되면 두페이지가 하나의 페이지로 합쳐졌다고 생각하면 된다.
이제 라이브러리를 사용해보자
json-20240303.jar설치
Photo에 대한 정보를 서버를 통해서, 전달해주자
package action.photo;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONObject;
import dao.PhotoDao;
import db.vo.PhotoVo;
/**
* Servlet implementation class PhotoOneAction
*/
@WebServlet("/photo/photo_one.do")
public class PhotoOneAction extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
*/
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// photo/photo_one.do?p_idx=5
// 1. parameter 받기
int p_idx = Integer.parseInt(request.getParameter("p_idx"));
// 2. p_idx에 해당하는 포토 Vo 데이터 얻어오기
PhotoVo vo = PhotoDao.getInstance().selectOne(p_idx);
// String format 사용안하고 json 라이브러리를 사용한다.
// 응답처리
response.setContentType("application/json; charset=utf-8;");
// VO -> JSON 객체 생성해주기
JSONObject json = new JSONObject();
json.put("p_idx",vo.getP_idx());
json.put("p_title",vo.getP_title());
json.put("p_content", vo.getP_content());
json.put("p_filename", vo.getP_filename());
json.put("p_regdate",vo.getP_regdate());
json.put("p_ip",vo.getP_ip());
json.put("mem_idx",vo.getMem_idx());
json.put("mem_name",vo.getMem_name());
response.getWriter().print(json.toString());
}
} public PhotoVo selectOne(int p_idx) {
PhotoVo vo = null;
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
String sql = "select * from photo where p_idx=?";
try {
// 1. Connection 얻어오기
conn = DBService.getInstance().getConnection();
// 2. PreparedStatement
pstmt = conn.prepareStatement(sql);
// 3. pstmt parameter index 채우기
pstmt.setInt(1, p_idx);
// 4. ResultSet 얻어오기(킵해놨던 sql문 출력하기)
rs = pstmt.executeQuery();
// while문을 사용해도 되지만, 공회전이 1회더 발생한다.
if (rs.next()) {
// 1. rs가 가리키는 레코드의 값을 읽어온다
vo = new PhotoVo();
vo.setP_idx(rs.getInt("p_idx"));
vo.setP_title(rs.getString("p_title"));
vo.setP_content(rs.getString("p_content"));
vo.setP_filename(rs.getString("p_filename"));
vo.setP_ip(rs.getString("p_ip"));
vo.setP_regdate(rs.getString("p_regdate"));
vo.setMem_idx(rs.getInt("mem_idx"));
vo.setMem_name(rs.getString("mem_name"));
}
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
} finally {
// 예외 처리에서 무조건 실행되는 부분
// 마무리 작업(열린역순으로 닫기)
// 한 번에 잡아서 try catch 하기 : alt + shift + s
try {
if (rs != null)
rs.close();
if (pstmt != null)
pstmt.close();
if (conn != null)
conn.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
return vo;
}<%@ 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" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
@font-face {
font-family: 'MabinogiClassicR';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2207-01@1.0/MabinogiClassicR.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
* {
font-family: 'MabinogiClassicR';
}
#background {
background: url(../images/maul.png) no-repeat 100% 0 fixed;
background-size: cover;
}
#box {
width: 800px;
height: 1200px;
margin: auto;
}
#title {
display: block;
margin: auto;
margin-bottom: 50px;
width: 250px;
}
#photo-box {
height: 700px;
background-color: white;
border: 2px solid black;
margin-top: 10px;
/* 상하스크롤 */
overflow-y: scroll;
}
.photo {
width: 140px;
height: 160px;
border: 1px solid gray;
overflow: hidden;
margin-left: 45px;
margin-top: 50px;
padding: 10px;
float: left;
}
.photo:hover {
border-color: green;
}
.photo > img {
height: 110px;
width: 120px;
object-fit : cover;
border: 1px solid black;
}
.title {
border: 1px solid gray;
padding: 1px;
margin-top: 5px;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
}
</style>
<script type="text/javascript">
function photo_insert() {
// 로그인 체크(로그인이 안된 경우)
if("${ empty user }"=="true") {
if (confirm("사진올리기는 로그인 하신 후 이용이 가능합니다.\n로그인 하시겠습니까?")==false) {
return;
} else {
location.href="../member/login_form.do";
return;
}
}
// 로그인이 된 경우 => 사진등록폼으로 이동
location.href="insert_form.do"; // PhotoInsertFromAction
}
function showPhoto(p_idx){
alert(p_idx + "번 그림정보 조회");
$("#photoModal").modal({backdrop: "static"});
// p_idx에 대한 사진정보 가져오기(Ajax이용 JSON 형식)
// 팝업화면에서 백그라운드 형식으로 ajax가 데이터를 요청해서 가져온다.
$.ajax({
url : "photo_one.do", // PhotoOneAction
data : {"p_idx": p_idx}, // parameter => photo_one.do?p_idx=5
dataType: "json",
success : function(res_data){
// res_data = {"p_idx":5, "p_title":"제목", "p_content":"내용", "p_filename":"a.jpg"...}
console.log(res_data);
$("#pop_mem_name").html("올린이 : " + res_data.mem_name);
$("#pop_image").prop("src","../images/" + res_data.p_filename);
$("#pop_title").html(res_data.p_title);
$("#pop_content").html(res_data.p_content);
$("#pop_regdate").html(res_data.p_regdate);
// 버튼 보여지기 유/무(기본적으로 숨겨놓음)
$("#btn_popup_download").hide();
$("#btn_popup_update").hide();
$("#btn_popup_delete").hide();
// 로그인된 상태에는 다운로드 가능
if("${not empty user}" == "true") {
$("#btn_popup_download").show();
}
// 현재 사진을 올린 유저가 로그인한 유저면(수정/삭제)
if("${user.mem_idx}" == res_data.mem_idx) {
$("#btn_popup_update").show();
$("#btn_popup_delete").show();
}
},
error : function(err){
alert(err.responseText);
}
});
$("#pop_title").html("내가 부여한 제목");
}
</script>
</head>
<body>
<!-- popup:Modal -->
<%@include file="popup.jsp" %>
<div id="background">
<div id="box">
<img id="title" alt="" src="../images/maplelogo.png">
<div class="row">
<div class="col-sm-6">
<input class="btn btn-primary" type="button" value="사진올리기" onclick="photo_insert();">
</div>
<div class="col-sm-6" style="text-align: right;">
<!-- 로그인이 안된 경우 -->
<c:if test="${empty user}">
<input class="btn btn-info" type="button" value="회원가입" onclick="location.href='../member/insert_form.do'">
<input class="btn btn-primary" type="button" value="로그인" onclick="location.href='../member/login_form.do'">
</c:if>
<!-- 로그인이 된 경우 -->
<c:if test="${not empty user}">
<b>${user.mem_name}</b>님 환영합니다.
<input class="btn btn-primary" type="button" value="로그아웃" onclick="location.href='../member/logout.do'">
</c:if>
</div>
</div>
<div id="photo-box">
<c:forEach var="vo" items="${list}">
<div class="photo" onclick="showPhoto('${vo.p_idx}');">
<img src="../images/${vo.p_filename}">
<div class="title">${vo.p_title}</div>
</div>
</c:forEach>
</div>
</div>
</div>
</body>
</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>
<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.7.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
.mycommon {
text-align: center;
width: 300px;
margin: auto;
border: 1px solid gray;
margin-bottom: 10px;
padding: 5px;
}
#pop_image{
width: 100%;
height: 300px;
border: 2px solid gray;
outline: 2px solid black;
}
#pop_content {
min-height: 50px;
}
</style>
</head>
<body>
<div class="modal fade" id="photoModal" role="dialog">
<div class="modal-dialog" style="width: 360px">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="pop_mem_name"></h4>
</div>
<!-- 본문 -->
<div class="modal-body">
<!-- 이미지 -->
<div class="mycommon" style="text-align: center; height: 310px;">
<img id="pop_image" src="">
</div>
<div class="mycommon" id="pop_title">사진제목</div>
<div class="mycommon" id="pop_content">사진내용</div>
<div class="mycommon" id="pop_regdate">올린날짜</div>
<div id="pop_jop" style="text-align: center;">
<input style="display: none;" class="btn btn-info" type="button" value="수정" id="btn_popup_update"> <input
style="display: none;" class="btn btn-danger" type="button" value="삭제" id="btn_popup_delete"> <input
style="display: none;" class="btn btn-success" type="button" value="다운" id="btn_popup_download">
<button class="btn btn-primary" type="button" class="btn btn-default" data-dismiss="modal">닫기</button>
</div>
</div>
<!-- <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div> -->
</div>
</div>
</div>
</body>
</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>
<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.7.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
.mycommon {
text-align: center;
width: 300px;
margin: auto;
border: 1px solid gray;
margin-bottom: 10px;
padding: 5px;
}
#pop_image{
width: 100%;
height: 300px;
border: 2px solid gray;
outline: 2px solid black;
}
#pop_content {
min-height: 50px;
}
</style>
<script type="text/javascript">
// 전역변수
var g_p_filename;
function download() {
}
</script>
</head>
<body>
<div class="modal fade" id="photoModal" role="dialog">
<div class="modal-dialog" style="width: 360px">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="pop_mem_name"></h4>
</div>
<!-- 본문 -->
<div class="modal-body">
<!-- 이미지 -->
<div class="mycommon" style="text-align: center; height: 310px;">
<img id="pop_image" src="">
</div>
<div class="mycommon" id="pop_title">사진제목</div>
<div class="mycommon" id="pop_content">사진내용</div>
<div class="mycommon" id="pop_regdate">올린날짜</div>
<div id="pop_jop" style="text-align: center;">
<input style="display: none;" class="btn btn-info" type="button" value="수정" id="btn_popup_update"> <input
style="display: none;" class="btn btn-danger" type="button" value="삭제" id="btn_popup_delete"> <input
style="display: none;" class="btn btn-success" type="button" value="다운"
onclick="download();" id="btn_popup_download">
<button class="btn btn-primary" type="button" class="btn btn-default" data-dismiss="modal">닫기</button>
</div>
</div>
<!-- <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div> -->
</div>
</div>
</div>
</body>
</html>
javascript hoisting을 사용하면, var타입으로 선언된 변수가 밑에서 초기화 되었어도, 초기화된 곳보다
위에서 그 변수를 사용이 가능하다.
<%@ 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" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
@font-face {
font-family: 'MabinogiClassicR';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2207-01@1.0/MabinogiClassicR.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
* {
font-family: 'MabinogiClassicR';
}
#background {
background: url(../images/maul.png) no-repeat 100% 0 fixed;
background-size: cover;
}
#box {
width: 800px;
height: 1200px;
margin: auto;
}
#title {
display: block;
margin: auto;
margin-bottom: 50px;
width: 250px;
}
#photo-box {
height: 700px;
background-color: white;
border: 2px solid black;
margin-top: 10px;
/* 상하스크롤 */
overflow-y: scroll;
}
.photo {
width: 140px;
height: 160px;
border: 1px solid gray;
overflow: hidden;
margin-left: 45px;
margin-top: 50px;
padding: 10px;
float: left;
}
.photo:hover {
border-color: green;
}
.photo > img {
height: 110px;
width: 120px;
object-fit : cover;
border: 1px solid black;
}
.title {
border: 1px solid gray;
padding: 1px;
margin-top: 5px;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
}
</style>
<script type="text/javascript">
function photo_insert() {
// 로그인 체크(로그인이 안된 경우)
if("${ empty user }"=="true") {
if (confirm("사진올리기는 로그인 하신 후 이용이 가능합니다.\n로그인 하시겠습니까?")==false) {
return;
} else {
location.href="../member/login_form.do";
return;
}
}
// 로그인이 된 경우 => 사진등록폼으로 이동
location.href="insert_form.do"; // PhotoInsertFromAction
}
function showPhoto(p_idx){
alert(p_idx + "번 그림정보 조회");
$("#photoModal").modal({backdrop: "static"});
// p_idx에 대한 사진정보 가져오기(Ajax이용 JSON 형식)
// 팝업화면에서 백그라운드 형식으로 ajax가 데이터를 요청해서 가져온다.
$.ajax({
url : "photo_one.do", // PhotoOneAction
data : {"p_idx": p_idx}, // parameter => photo_one.do?p_idx=5
dataType: "json",
success : function(res_data){
// res_data = {"p_idx":5, "p_title":"제목", "p_content":"내용", "p_filename":"a.jpg"...}
console.log(res_data);
// 다운로드 받을 filename을 popup.jsp 전역변수에다가 전달해주었다.
g_p_filename = res_data.p_filename;
$("#pop_mem_name").html("올린이 : " + res_data.mem_name);
$("#pop_image").prop("src","../images/" + res_data.p_filename);
$("#pop_title").html(res_data.p_title);
$("#pop_content").html(res_data.p_content);
$("#pop_regdate").html(res_data.p_regdate);
// 버튼 보여지기 유/무(기본적으로 숨겨놓음)
$("#btn_popup_download").hide();
$("#btn_popup_update").hide();
$("#btn_popup_delete").hide();
// 로그인된 상태에는 다운로드 가능
if("${not empty user}" == "true") {
$("#btn_popup_download").show();
}
// 현재 사진을 올린 유저가 로그인한 유저면(수정/삭제)
if("${user.mem_idx}" == res_data.mem_idx) {
$("#btn_popup_update").show();
$("#btn_popup_delete").show();
}
},
error : function(err){
alert(err.responseText);
}
});
$("#pop_title").html("내가 부여한 제목");
}
</script>
</head>
<body>
<!-- popup:Modal -->
<%@include file="popup.jsp" %>
<div id="background">
<div id="box">
<img id="title" alt="" src="../images/maplelogo.png">
<div class="row">
<div class="col-sm-6">
<input class="btn btn-primary" type="button" value="사진올리기" onclick="photo_insert();">
</div>
<div class="col-sm-6" style="text-align: right;">
<!-- 로그인이 안된 경우 -->
<c:if test="${empty user}">
<input class="btn btn-info" type="button" value="회원가입" onclick="location.href='../member/insert_form.do'">
<input class="btn btn-primary" type="button" value="로그인" onclick="location.href='../member/login_form.do'">
</c:if>
<!-- 로그인이 된 경우 -->
<c:if test="${not empty user}">
<b>${user.mem_name}</b>님 환영합니다.
<input class="btn btn-primary" type="button" value="로그아웃" onclick="location.href='../member/logout.do'">
</c:if>
</div>
</div>
<div id="photo-box">
<c:forEach var="vo" items="${list}">
<div class="photo" onclick="showPhoto('${vo.p_idx}');">
<img src="../images/${vo.p_filename}">
<div class="title">${vo.p_title}</div>
</div>
</c:forEach>
</div>
</div>
</div>
</body>
</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>
<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.7.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
.mycommon {
text-align: center;
width: 300px;
margin: auto;
border: 1px solid gray;
margin-bottom: 10px;
padding: 5px;
}
#pop_image{
width: 100%;
height: 300px;
border: 2px solid gray;
outline: 2px solid black;
}
#pop_content {
min-height: 50px;
}
</style>
<script type="text/javascript">
// 전역변수
var g_p_filename; // javascript hoisting
// 자바스크립트는 변수 초기화가 밑에 선언 되어있어도, 변수의 사용이 위에서 가능하다.
// 이것을 hoisting이라고 한다. var 형태가 그렇게 사용가능하다.
function download() {
// 현재경로 /photo/list.do
location.href = "../FileDownload.do?dir=/images/&filename=" + g_p_filename;
}
</script>
</head>
<body>
<div class="modal fade" id="photoModal" role="dialog">
<div class="modal-dialog" style="width: 360px">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="pop_mem_name"></h4>
</div>
<!-- 본문 -->
<div class="modal-body">
<!-- 이미지 -->
<div class="mycommon" style="text-align: center; height: 310px;">
<img id="pop_image" src="">
</div>
<div class="mycommon" id="pop_title">사진제목</div>
<div class="mycommon" id="pop_content">사진내용</div>
<div class="mycommon" id="pop_regdate">올린날짜</div>
<div id="pop_jop" style="text-align: center;">
<input style="display: none;" class="btn btn-info" type="button" value="수정" id="btn_popup_update"> <input
style="display: none;" class="btn btn-danger" type="button" value="삭제" id="btn_popup_delete"> <input
style="display: none;" class="btn btn-success" type="button" value="다운"
onclick="download();" id="btn_popup_download">
<button class="btn btn-primary" type="button" class="btn btn-default" data-dismiss="modal">닫기</button>
</div>
</div>
<!-- <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div> -->
</div>
</div>
</div>
</body>
</html>
브라우저 별로 인코딩이 맞지 않으면, 파일명이 한글일때 에러가 발생한다.
아래 코드를 사용하면 자바스크립트 자체에서 인코딩이 되어서 들어간다.
function download() {
// 현재경로 /photo/list.do
location.href = "../FileDownload.do?dir=/images/&filename="
+ encodeURIComponent(g_p_filename,"utf-8");
}
파일 삭제하기
<%@ 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" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
@font-face {
font-family: 'MabinogiClassicR';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2207-01@1.0/MabinogiClassicR.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
* {
font-family: 'MabinogiClassicR';
}
#background {
background: url(../images/maul.png) no-repeat 100% 0 fixed;
background-size: cover;
}
#box {
width: 800px;
height: 1200px;
margin: auto;
}
#title {
display: block;
margin: auto;
margin-bottom: 50px;
width: 250px;
}
#photo-box {
height: 700px;
background-color: white;
border: 2px solid black;
margin-top: 10px;
/* 상하스크롤 */
overflow-y: scroll;
}
.photo {
width: 140px;
height: 160px;
border: 1px solid gray;
overflow: hidden;
margin-left: 45px;
margin-top: 50px;
padding: 10px;
float: left;
}
.photo:hover {
border-color: green;
}
.photo > img {
height: 110px;
width: 120px;
object-fit : cover;
border: 1px solid black;
}
.title {
border: 1px solid gray;
padding: 1px;
margin-top: 5px;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
}
</style>
<script type="text/javascript">
function photo_insert() {
// 로그인 체크(로그인이 안된 경우)
if("${ empty user }"=="true") {
if (confirm("사진올리기는 로그인 하신 후 이용이 가능합니다.\n로그인 하시겠습니까?")==false) {
return;
} else {
location.href="../member/login_form.do";
return;
}
}
// 로그인이 된 경우 => 사진등록폼으로 이동
location.href="insert_form.do"; // PhotoInsertFromAction
}
function showPhoto(p_idx){
alert(p_idx + "번 그림정보 조회");
$("#photoModal").modal({backdrop: "static"});
// p_idx에 대한 사진정보 가져오기(Ajax이용 JSON 형식)
// 팝업화면에서 백그라운드 형식으로 ajax가 데이터를 요청해서 가져온다.
$.ajax({
url : "photo_one.do", // PhotoOneAction
data : {"p_idx": p_idx}, // parameter => photo_one.do?p_idx=5
dataType: "json",
success : function(res_data){
// res_data = {"p_idx":5, "p_title":"제목", "p_content":"내용", "p_filename":"a.jpg"...}
console.log(res_data);
// 다운로드 받을 filename을 popup.jsp 전역변수에다가 전달해주었다.
g_p_filename = res_data.p_filename;
g_p_idx = res_data.p_idx;
$("#pop_mem_name").html("올린이 : " + res_data.mem_name);
$("#pop_image").prop("src","../images/" + res_data.p_filename);
$("#pop_title").html(res_data.p_title);
$("#pop_content").html(res_data.p_content);
$("#pop_regdate").html(res_data.p_regdate);
// 버튼 보여지기 유/무(기본적으로 숨겨놓음)
$("#btn_popup_download").hide();
$("#btn_popup_update").hide();
$("#btn_popup_delete").hide();
// 로그인된 상태에는 다운로드 가능
if("${not empty user}" == "true") {
$("#btn_popup_download").show();
}
// 현재 사진을 올린 유저가 로그인한 유저면(수정/삭제)
if("${user.mem_idx}" == res_data.mem_idx) {
$("#btn_popup_update").show();
$("#btn_popup_delete").show();
}
},
error : function(err){
alert(err.responseText);
}
});
$("#pop_title").html("내가 부여한 제목");
}
</script>
</head>
<body>
<!-- popup:Modal -->
<%@include file="popup.jsp" %>
<div id="background">
<div id="box">
<img id="title" alt="" src="../images/maplelogo.png">
<div class="row">
<div class="col-sm-6">
<input class="btn btn-primary" type="button" value="사진올리기" onclick="photo_insert();">
</div>
<div class="col-sm-6" style="text-align: right;">
<!-- 로그인이 안된 경우 -->
<c:if test="${empty user}">
<input class="btn btn-info" type="button" value="회원가입" onclick="location.href='../member/insert_form.do'">
<input class="btn btn-primary" type="button" value="로그인" onclick="location.href='../member/login_form.do'">
</c:if>
<!-- 로그인이 된 경우 -->
<c:if test="${not empty user}">
<b>${user.mem_name}</b>님 환영합니다.
<input class="btn btn-primary" type="button" value="로그아웃" onclick="location.href='../member/logout.do'">
</c:if>
</div>
</div>
<div id="photo-box">
<c:forEach var="vo" items="${list}">
<div class="photo" onclick="showPhoto('${vo.p_idx}');">
<img src="../images/${vo.p_filename}">
<div class="title">${vo.p_title}</div>
</div>
</c:forEach>
</div>
</div>
</div>
</body>
</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>
<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.7.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
.mycommon {
text-align: center;
width: 300px;
margin: auto;
border: 1px solid gray;
margin-bottom: 10px;
padding: 5px;
}
#pop_image{
width: 100%;
height: 300px;
border: 2px solid gray;
outline: 2px solid black;
}
#pop_content {
min-height: 50px;
}
</style>
<script type="text/javascript">
// 전역변수
var g_p_filename; // javascript hoisting
// 자바스크립트는 변수 초기화가 밑에 선언 되어있어도, 변수의 사용이 위에서 가능하다.
// 이것을 hoisting이라고 한다. var 형태가 그렇게 사용가능하다.
var g_p_idx;
function download() {
// 현재경로 /photo/list.do
// alert("홍길동/" + encodeURIComponent("홍길동","utf-8"));
location.href = "../FileDownload.do?dir=/images/&filename="
+ encodeURIComponent(g_p_filename,"utf-8");
}
function delete_photo() {
if(confirm("정말 삭제하시겠습니까?\n삭제하면 복구 할 수 없습니다.")==false) {
return;
}
location.href="delete.do?p_idx=" + g_p_idx;
}
</script>
</head>
<body>
<div class="modal fade" id="photoModal" role="dialog">
<div class="modal-dialog" style="width: 360px">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="pop_mem_name"></h4>
</div>
<!-- 본문 -->
<div class="modal-body">
<!-- 이미지 -->
<div class="mycommon" style="text-align: center; height: 310px;">
<img id="pop_image" src="">
</div>
<div class="mycommon" id="pop_title">사진제목</div>
<div class="mycommon" id="pop_content">사진내용</div>
<div class="mycommon" id="pop_regdate">올린날짜</div>
<div id="pop_jop" style="text-align: center;">
<input style="display: none;" class="btn btn-info" type="button" value="수정" id="btn_popup_update"> <input
style="display: none;" class="btn btn-danger" type="button" value="삭제"
onclick="delete_photo();" id="btn_popup_delete"> <input
style="display: none;" class="btn btn-success" type="button" value="다운"
onclick="download();" id="btn_popup_download">
<button class="btn btn-primary" type="button" class="btn btn-default" data-dismiss="modal">닫기</button>
</div>
</div>
<!-- <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div> -->
</div>
</div>
</div>
</body>
</html>package action.photo;
import java.io.File;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import dao.PhotoDao;
import db.vo.PhotoVo;
/**
* Servlet implementation class PhotoDeleteAction
*/
@WebServlet("/photo/delete.do")
public class PhotoDeleteAction extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
*/
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// /photo/delete.do?p_idx=5
// 1. parameter 받기
int p_idx = Integer.parseInt(request.getParameter("p_idx"));
// 현재 p_idx가 사용하고 있는 파일도 삭제
// 2. PhotoVo 정보를 얻어온다.
PhotoVo vo = PhotoDao.getInstance().selectOne(p_idx);
// /images/의 절대경로
String absPath = request.getServletContext().getRealPath("/images/");
// 절대경로 파일명
File deleteFile = new File(absPath, vo.getP_filename());
deleteFile.delete();
// DB delete
int res = PhotoDao.getInstance().delete(p_idx);
// 메인화면으로 이동
response.sendRedirect("list4636.do");
}
}
package action.photo;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import dao.PhotoDao;
import db.vo.PhotoVo;
/**
* Servlet implementation class PhotoModifyFormAction
*/
@WebServlet("/photo/modify_form.do")
public class PhotoModifyFormAction extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
*/
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 1. parameter 받기
int p_idx = Integer.parseInt(request.getParameter("p_idx"));
// 2. p_idx -> PhotoVo 얻기
PhotoVo vo = PhotoDao.getInstance().selectOne(p_idx);
// <br> -> \n
String p_content = vo.getP_content().replaceAll("<br>", "\n");
vo.setP_content(p_content);
// 3. request binding
request.setAttribute("vo", vo);
// Dispatcher형식으로 호출
String forward_page = "photo_modify_form.jsp";
RequestDispatcher disp = request.getRequestDispatcher(forward_page);
disp.forward(request, response);
}
}
<%@ 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>
<!-- bootstrap 3 -->
<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>
<!-- SweetAlert2사용설정 -->
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style type="text/css">
#box{
width: 600px;
margin: auto;
margin-top: 50px;
}
textarea {
width: 100%;
resize: none;
}
input[type='button']{
width: 100px;
}
img{
width: 200px;
}
</style>
<script type="text/javascript">
function send(f){
//입력값 체크....
var p_title = f.p_title.value.trim();
var p_content = f.p_content.value.trim();
if(p_title==''){
alert('제목을 입력하세요');
f.p_title.value='';
f.p_title.focus();
return;
}
if(p_content==''){
alert('내용을 입력하세요');
f.p_content.value='';
f.p_content.focus();
return;
}
f.action = "modify.do"; //PhotoModifyAction
f.submit();
}
//----------- Ajax 이용한 이미지 수정 ----------------------
function ajaxFileUpload() {
// 업로드 버튼이 클릭되면 파일 찾기 창을 띄운다.
$("#ajaxFile").click();
}
function ajaxFileChange() {
// 파일이 선택되면 업로드를 진행한다.
photo_upload();
}
function photo_upload() {
//파일선택->취소시 [0]은 인덱스를 나타낸것임
if( $("#ajaxFile")[0].files[0]==undefined)return;
var form = $("#ajaxForm")[0];
var formData = new FormData(form);
formData.append("p_idx", '${ vo.p_idx }'); // p_idx=5
formData.append("photo", $("#ajaxFile")[0].files[0]); // photo=bmi.png
$.ajax({
url : "photo_upload.do", //PhotoUploadAction
type : "POST",
data : formData,
// 파일 보낼때는 binarydata로 false를 고정적으로 써줘야 한다.
processData : false,
contentType : false,
dataType : 'json',
success:function(res_data) {
//result_data = {"p_filename":"aaa.jpg"}
//location.href=''; //자신의 페이지를 리로드(refresh)
//$("#my_img").attr("src","../images/" + res_data.p_filename);
$("#my_img").prop("src","../images/" + res_data.p_filename);
},
error : function(err){
alert(err.responseText);
}
});
}
</script>
</head>
<body>
<!--화일업로드용 폼 -->
<form enctype="multipart/form-data" id="ajaxForm" method="post">
<input id="ajaxFile" type="file" style="display:none;" onChange="ajaxFileChange();" >
</form>
<form>
<input type="hidden" name="p_idx" value="${ vo.p_idx }">
<div id="box">
<div class="panel panel-primary">
<div class="panel-heading"><h4>수정화면</h4></div>
<div class="panel-body">
<table class="table table-striped">
<tr>
<td colspan="2" align="center">
<img src="../images/${ vo.p_filename }" id="my_img">
<br>
<input class="btn btn-info" type="button" value="이미지편집" onclick="ajaxFileUpload();">
</td>
</tr>
<tr>
<th>제목</th>
<td><input name="p_title" value="${ vo.p_title }"></td>
</tr>
<tr>
<th>내용</th>
<td>
<textarea name="p_content" rows="5" cols="">${ vo.p_content }</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input class="btn btn-primary" type="button" value="수정하기"
onclick="send(this.form);">
<input class="btn btn-success" type="button" value="메인으로"
onclick="location.href='list.do'">
</td>
</tr>
</table>
</div>
</div>
</div>
</form>
</body>
</html>
package action.photo;
import java.io.File;
import java.io.IOException;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import com.oreilly.servlet.MultipartRequest;
import com.oreilly.servlet.multipart.DefaultFileRenamePolicy;
import dao.PhotoDao;
import db.vo.MemberVo;
import db.vo.PhotoVo;
/**
* Servlet implementation class PhotoUploadAction
*/
@WebServlet("/photo/photo_upload.do")
public class PhotoUploadAction extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
*/
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// /photo/photo_upload.do?p_idx=5&photo=aaa.jpg
HttpSession session = request.getSession();
MemberVo user = (MemberVo) session.getAttribute("user");
// session timeout
if(user==null) {
response.sendRedirect("../member/login_form.do?reason=session_timeout");
return;
}
// 유저정보 얻어오기
int mem_idx = user.getMem_idx();
String mem_name = user.getMem_name();
// 파일업로드 처리
String webPath = "/images/"; // 웹(url)경로
// 현재 웹어플리케이션의 전역관리객체(상대경로->절대경로)
ServletContext application = request.getServletContext();
// 웹(상대경로)->절대경로
String saveDir = application.getRealPath(webPath);
int maxSize = 1024 * 1024 * 100; // 최대업로드크기(100MB)
//FileUpload 객체 => MultipartRequest
MultipartRequest mr = new MultipartRequest(
request, // request 위임
saveDir, // 저장위치
maxSize, // 최대업로드크기
"utf-8", // 수신인코딩
// 파일이름이 동일할 경우 다른이름으로 변경
new DefaultFileRenamePolicy()
);
// 업로드 파일명을 얻어온다.
String p_filename = "no_file";
// mr에 의해서 업로드된 파일정보 얻어온다.
File f = mr.getFile("photo");
if(f!=null) { // 업로드 파일이 존재하면
p_filename = f.getName();
}
int p_idx = Integer.parseInt(mr.getParameter("p_idx"));
// p_idx에 저장된 이전 파일 삭제
PhotoVo vo = PhotoDao.getInstance().selectOne(p_idx);
File delFile = new File(saveDir, vo.getP_filename());
delFile.delete();
// update된 파일이름 수정
vo.setP_filename(p_filename);
int res = PhotoDao.getInstance().update_filename(vo);
}
}
public int update_filename(PhotoVo vo) {
// TODO Auto-generated method stub
int res = 0;
Connection conn = null;
PreparedStatement pstmt = null;
String sql = "update photo set p_filename=? where p_idx=? ";
try {
// 1. Connection 얻어오기
conn = DBService.getInstance().getConnection();
// 2. PreparedStatement
pstmt = conn.prepareStatement(sql);
// 3. pstmt parameter index 채우기
pstmt.setString(1, vo.getP_filename());
pstmt.setInt(2, vo.getP_idx());
// 4. DB update
res = pstmt.executeUpdate();
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
} finally {
// 예외 처리에서 무조건 실행되는 부분
// 마무리 작업(열린역순으로 닫기)
// 한 번에 잡아서 try catch 하기 : alt + shift + s
try {
if (pstmt != null)
pstmt.close();
if (conn != null)
conn.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
return res;
}// end:update()
package action.photo;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import dao.PhotoDao;
import db.vo.PhotoVo;
/**
* Servlet implementation class PhotoModifyAction
*/
@WebServlet("/photo/modify.do")
public class PhotoModifyAction extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
*/
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
int p_idx = Integer.parseInt(request.getParameter("p_idx"));
String p_title = request.getParameter("p_title");
String p_content = request.getParameter("p_content");
PhotoVo vo = new PhotoVo(p_idx, p_title, p_content);
int res = PhotoDao.getInstance().update(vo);
response.sendRedirect("list4636.do");
}
}
public int update(PhotoVo vo) {
// TODO Auto-generated method stub
int res = 0;
Connection conn = null;
PreparedStatement pstmt = null;
String sql = "update photo set p_title=?,p_content=? where p_idx=? ";
try {
// 1. Connection 얻어오기
conn = DBService.getInstance().getConnection();
// 2. PreparedStatement
pstmt = conn.prepareStatement(sql);
// 3. pstmt parameter index 채우기
pstmt.setString(1, vo.getP_title());
pstmt.setString(2, vo.getP_content());
pstmt.setInt(3, vo.getP_idx());
// 4. DB update
res = pstmt.executeUpdate();
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
} finally {
// 예외 처리에서 무조건 실행되는 부분
// 마무리 작업(열린역순으로 닫기)
// 한 번에 잡아서 try catch 하기 : alt + shift + s
try {
if (pstmt != null)
pstmt.close();
if (conn != null)
conn.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
return res;
}// end:update()
https://inpa.tistory.com/entry/SweetAlert2-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9
🎨 SweetAlert2 - 이쁜 alert 모달창 설치 & 사용법
SweetAlert2 자바스크립트로 웹 프로그래밍을 하다 보면 자주 Alert 함수를 사용하게 됩니다. Alert는 사용자에게 알림을 주고자 할 때 정말 자구 사용하는 컴포넌트 입니다. 다음과 같이 자바스크립
inpa.tistory.com
반응형
'javaScript↗' 카테고리의 다른 글
| javaScript 로그인 실행 후 다시, 그 페이지로 돌아가는 방법 (0) | 2024.07.24 |
|---|---|
| 웹 파일 업로드 (0) | 2024.06.27 |
| 웹페이지 로그인 로직(Session 활용) (0) | 2024.06.26 |
| Ajax를 이용한 회원관리 예제 (0) | 2024.06.25 |
| [오류해결]프로젝트 xar 파일로 import시, 오류날 때 (0) | 2024.06.24 |