반응형

아까 작성하였던 contentView.jsp에서 수정하기와 삭제하기를 활성화해보겠다.

 

1. 뷰페이지 경로 설정

 

contentView.jsp를 수정해준다.

수정하기를 클릭하면 submit이 되고 삭제버튼을 누르면, /delete?bNO=1처럼 url이 변경된다.

이를 컨트롤러에서 조정해주면 된다.

또한 글번호는 input hidden으로 해줘서 submit이 되었을 때 글번호를 HttpServletRequest에 잘 저장되도록 한다.

 

contentView.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>글내용 보기</title>
</head>
<body>
		<div align="center">
			<h2>글내용 확인</h2>
			<hr width="500" color="green" />
			<table width="500" cellpadding="0" cellspacing="0" border="1">
			<form action="modify" method="post">
			<!-- 값을 보내기 위해 No.는 히든값으로 숨겨둠 -->
			<input type="hidden" name="bNo" value="${contentView.bNo }" />
		
			<tr>
				<td>번호</td>
				<td>${contentView.bNo}</td>
			</tr>
			<tr>
				<td>조회수</td>
				<td>${contentView.bHit}</td>
			</tr>
						<tr>
				<td>작성자</td>
				<td><input type="text" name="bName" value="${contentView.bName }"></td>
			</tr>
						<tr>
				<td>제목</td>
				<td><input type="text" name="bSubject" value="${contentView.bSubject}"></td>
			</tr>
						<tr>
				<td>내용</td>
				<td><textarea rows = "10" name="bContent">${contentView.bContent}</textarea></td>
			</tr>
			<tr>
				<td colspan="2" align="center"><input type="submit" value="수정하기" />
								&nbsp;&nbsp;&nbsp;<a href="list">목록보기</a>
								&nbsp;&nbsp;&nbsp;<a href="delete?bNo=${contentView.bNo}">삭제</a>
								&nbsp;&nbsp;&nbsp;<a href="#">답변</a>
				</td>
			</tr>
			
			
			</form>
			
			
			</table>
			
			
		</div>
		</body>
</html>

 

2. 컨트롤러 설정

BController.java에 리퀘스트맵핑 modify와 delete를 추가한다.

둘다 리턴은 리다이렉트 list로 해준다.

 

BController.java

@RequestMapping(value="/modify", method=RequestMethod.POST)
	//@RequestMapping("/modify")
	public String modify(HttpServletRequest request, Model model) {
		System.out.println("-----modify() 호출");
		
		model.addAttribute("request", request);//model에 글제목, 글내용 들의 정보 주입
		//System.out.println(request);
		
		cmd = new ModifyCmd();
		cmd.service(model);
		
		return "redirect:list";
	}
	
	
	@RequestMapping("/delete")
	public String delete(HttpServletRequest request, Model model) {
		System.out.println("------delete() 호출------");
		
		model.addAttribute("request", request);//model에 글제목, 글내용 들의 정보 주입
		cmd = new DeleteCmd();
		cmd.service(model);
		
		
		return "redirect:list";
	}

 

3. command 클래스 설정

위 컨트롤러에서 메소드를 정의 해줬으므로 bbsCommand패키지에 ModifyCmd.java와 DeleteCmd.java 두 파일을 생성한다.

자바파일은 앞이 대문자로 시작해주는 것에 주의한다.

 

modify와 delete 모두 비슷하다.

받아온 모델을 맵으로 바꾸고 그맵을 HttpServletRequest로 형변환 한뒤 그 안의 bName, bContent 같은 정보를 꺼내어 String으로 저장해준다.

 

그리고 그 객체들을 파라미터로 하여 bDAO의 메소드를 실행시킨다.

bDAO의 메소드는 Cmd 코드를 작성한 뒤 작성해준다.

 

아래 코드를 복사붙여넣기 하자.

 

ModifyCmd.java

package com.spring.bbsCommand;

import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.springframework.ui.Model;

import com.spring.bbsDAO.BDAO;

public class ModifyCmd implements Bcmd {

	@Override
	public void service(Model model) {
		Map<String, Object> map = model.asMap(); //model을 맵형태로 변환
		HttpServletRequest request = (HttpServletRequest) map.get("request");
		//HttpServeltRequest 작동원리
		//사용자가 input에 값을 입력하고 submit을 한다. -> input값의 내용들이 HttpServletRequest에 저장이 된다.
		//서블릿리퀘스트에 저장된 내용을 request.getParameter()와 model.addAttribute()로 view에 뿌려줄 수 있다.
		
		//
		String bNo = request.getParameter("bNo");
		String bName = request.getParameter("bName");
		String bSubject = request.getParameter("bSubject");
		String bContent = request.getParameter("bContent");
		
		BDAO bDAO = new BDAO();
		bDAO.modify(bNo, bName, bSubject, bContent); //위에서 정의한 파라미터를 넣어줌
		
	}
}

 

 

DeleteCmd.java

package com.spring.bbsCommand;

import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.springframework.ui.Model;

import com.spring.bbsDAO.BDAO;

public class DeleteCmd implements Bcmd {

	@Override
	public void service(Model model) {
		
		Map<String, Object> map = model.asMap();
		HttpServletRequest request = (HttpServletRequest)map.get("request");
		
		String bNo = request.getParameter("bNo");
		BDAO bDAO = new BDAO();
		bDAO.delete(bNo);
	}
	
}

 

4. DAO 설정

이번 챕터의 하이라이트이다.

 

BDAO에서 쿼리문을 실행시켜주는 메소드를 만든다. 다행히도 이번포스팅에서는 VO 패키지는 건들지 않는다.

DAO 설정 또한 전 챕터처럼 connection과 preparedStatement를 사용한다.

 

매우 많은 오타를 유발하므로 복사 붙여넣기 또는 crtl+T를 활용하는 것을 추천한다.

 

아래 코드를 BDAO.java에 추가한다.

 

//modify 메소드
	public void modify(String bNo, String bName, String bSubject, String bContent) {
		
		//커넥션과 프리페어드스테이트먼트를 초기에 null로 설정
		Connection connection = null;
		PreparedStatement preparedStatement = null;
		
		try {
			connection = dataSource.getConnection();
			System.out.println("커넥션 확보!! -----------");
			
			String sql = "update mvc_bbs set bName=?, bSubject=?, bContent=? where bNo=?";
			preparedStatement = connection.prepareStatement(sql);//프리페어드스테이트먼트에 접속
			
			//물음표가 4개이므로 1에서 4까지 setString 해줌
			preparedStatement.setString(1, bName);
			preparedStatement.setString(2, bSubject);
			preparedStatement.setString(3, bContent);
			preparedStatement.setInt(4, Integer.parseInt(bNo));
			
			int n = preparedStatement.executeUpdate();//추후 사용
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			try {
				//자원반납
				if(preparedStatement != null) preparedStatement.close();
				if(connection != null) connection.close();
				
			} catch (Exception e2){
				e2.printStackTrace();
			}
		}
	}//modify()
	
	
	//delete 메소드
	public void delete(String bNo) {
		Connection connection  = null;
		PreparedStatement preparedStatement = null;
		try {
			connection = dataSource.getConnection();
			
			String sql = "delete from mvc_bbs where bNo = ?";
			System.out.println("asdasd");
			preparedStatement = connection.prepareStatement(sql);
			preparedStatement.setInt(1, Integer.parseInt(bNo));
			
			int n = preparedStatement.executeUpdate();//추후 사용
			
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			try {
				if(preparedStatement != null) preparedStatement.close();
				if(connection != null) connection.close();				
			} catch (Exception e2) {
				e2.printStackTrace();
			}
		}
	}

 

 

코딩은 이제 끝났다.

내용보기에서 삭제 버튼을 누르면 삭제된 뒤 list페이지로 리다이렉트 된다.

참고 이 delete query문은 현업에선 거의 안쓰이고, 대신에 안보이게 숨긴다. 

 

예를 들어 1번글을 삭제한다고 할 때, delete from mvc_bbs where bNo=1 << 이렇게 쓰지 않고,

use 열 하나를 추가한다.

그리고 update mvc_bbs set use='N' where bNo=1 로 지정하여 리스트에는 use가 N인 행은 보이지 않게 한다.

 

다음으로 수정을 해보자.

아래는 1번 글이다.

 

 

저 내용 부분에 '11111111111111'을 적은 뒤 수정하기 버튼을 누르면 리스트페이지로 나가지고,

다시 들어오면 아래와 같이 수정되어 있는 것을 볼 수 있다.

 

하지만 실제 게시판에는 저런 식으로 수정되는 것이 아니라 처음에는 read만 되게끔했다가 수정버튼을 누르면 수정할 수 있게 바뀐다.

 

그리고 수정 확인을 누르면 반영되면서 다시 read only상태로 바뀐다. 이것은 jquery나 자바스크립트로 textarea 속성을 클릭할 때 바꿔주게 만들면 된다.

 

예를 들어 수정하기를 누르면 readonly="true", 수정이 끝난 뒤 확인버튼을 누르면 readonly="false"가 되는 식으로 하면 된다.

 

 

수정, 삭제까지 한 부분은 아래 파일에 올려 놓았다.

springBBS 수정과 삭제까지.zip
0.07MB

 

 

 

이로써 기본적인 CRUD 기능은 끝났다.

 

다음 챕터에서는 댓글달기 기능을 해본다.

 

 

 

반응형
반응형

리스트 페이지가 보여지지만 현재 클릭했을 때 아무 것도 보이지 않는다.

 

클릭하면 제목, 내용, 작성자, 조회수 등이 뜨게끔 수정해보겠다.

 

수정 후 리스트 페이지는 이렇게 떠야 한다.

 

1.  컨트롤러작성

아래 코드를 BController.java에 삽입해 준다.

	@RequestMapping("/contentView")
	public String contentView(HttpServletRequest request, Model model) {
		
		System.out.println("-------- contentView() 호출 ----------");
		
		model.addAttribute("request", request);
		//HttpServletRequest로 전 전 페이지 정보를 가져와 request에 저장함.
		
		cmd = new ContentCmd(); //bbsCommand에 ContentCmd를 불러와 cmd에 저장
		
		cmd.service(model);//model 파라미터를 service메소드에 넣어서 동작
		
		return "contentView";
	}

 

2. list.jsp 파일 수정

위의 ContentCmd.java를 만들어 주기 전에 리스트 페이지를 수정한다.

 

테이블 안에서 내용을 보여주는 td태그 안의 내용만 수정한다.

<table border="1" cellpadding="0" cellspacing="0" width="500">
		<tr>
			<td>번호</td>
			<td>제목</td>
			<td>작성자</td>
			<td>날짜</td>
			<td>조회수</td>
		</tr>
				<!-- 게시글 목록 가져오기 -->
		<c:forEach items="${list}" var="vo">	
		<!-- ListCmd에서 만들었던 모델 list를 컨트롤러를 통해 받아온다.-->
		<tr>
			<td>${vo.bNo}</td>
			<!-- 제목을 클릭하면 페이지가 넘어가면서 번호 정보를 가져온다. -->
			<td><a href="contentView?bNo=${vo.bNo}">${vo.bSubject}</a></td>
			<td>${vo.bName}</td>
			<td>${vo.bDate}</td>
			<td>${vo.bHit}</td>
		</tr>
		</c:forEach>
		<tr>
			<td colspan="5" align="center"><a href="writeForm">글쓰기</a></td>
		</tr>
		
	</table>

 

3. Cmd 작성

bbsCommand 패키지에 ContentCmd.java 파일을 생성

 

그 뒤 아래의 코드를 입력

 

ContentCmd.java

package com.spring.bbsCommand;

import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.springframework.ui.Model;

import com.spring.bbsDAO.BDAO;
import com.spring.bbsVO.BVO;

public class ContentCmd implements Bcmd {

	@Override
	public void service(Model model) {
		//모델을 받아 맵형태로 바꿔줌.
		Map<String, Object> map = model.asMap();
		
		//1번글을 클릭하면 1번, 2번글을 클릭하면 2번을 전달받아야 함. 컨트롤러의 리퀘스트가 맵안에 있다. 이것을  HttpServletRequest로 저장
		HttpServletRequest request = (HttpServletRequest)map.get("request");
		
		String bNo = request.getParameter("bNo");
		
		//dao 불러오기
		BDAO dao = new BDAO();
		
		//조회수증가와 내용가져옴
		BVO bVo = dao.contentView(bNo);
		
		//모델에 추가
		model.addAttribute("contentView", bVo);
	}

}

 

4. BDAO에 contentView 추가

위에서 dao의 contentview() 메소드를 사용하였으므로 BDAO에 그 메소드를 정의해줘야한다.

 

BDAO.java에 contentView메소드를 추가

public BVO contentView(String bbsNo) {
	//return하는 bVo가 VO에서 가져온 것이므로 BVO를 타입으로 사용함
	//String bbsNo가 	bNo임
	
		//조회수 로직으로
		addHit(bbsNo);
		
		BVO bVo = null;
		
		//많이 보던 형식 커넥션, 프리페어드, 리절트셋.  데이타소스  >> 그뒤 sql
		Connection connection = null;
		PreparedStatement preparedStatement = null;
		ResultSet resultSet = null;
		
		try {
			connection = dataSource.getConnection();
			
			String sql = "select * from mvc_bbs where bNo = ?";
			preparedStatement = connection.prepareStatement(sql);
			preparedStatement.setInt(1, Integer.parseInt(bbsNo));
			resultSet = preparedStatement.executeQuery();
			
			if(resultSet.next()) {
				int bNo = resultSet.getInt("bNo");
				String bName = resultSet.getString("bName");
				String bSubject = resultSet.getString("bSubject");
				String bContent = resultSet.getString("bContent");
				Timestamp bDate = resultSet.getTimestamp("bDate");
				
				int bHit = resultSet.getInt("bHit");
				int bGroup = resultSet.getInt("bGroup");
				int bStep = resultSet.getInt("bStep");
				int bIndent = resultSet.getInt("bIndent");
				
				//값을 가져왔으니 bVo에
				
				bVo = new BVO(bNo, bName, bSubject, bContent, bDate, bHit, bGroup, bStep, bIndent);
			}
			
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			//finally에 클로즈 처리
			
			try {
				if(resultSet != null) resultSet.close();
				if(preparedStatement != null) preparedStatement.close();
				if(connection != null) connection.close();
				
				
			} catch (Exception e2) {
				e2.printStackTrace();
			}
			
			
		}
		
		return bVo;
	}//contentView()

 

5. BDAO에 클릭하면 조회수가 증가 하는 메소드를 만든다.

 

BDAO.java에 아래 코드 입력

//조회수 늘어나는 로직
	private void addHit(String bNo) {
		Connection connection = null;
		PreparedStatement preparedStatement = null;
		
		try {
			connection = dataSource.getConnection();
			String sql = "update mvc_bbs set bHit = bHit + 1 where bNo = ?";
			preparedStatement = connection.prepareStatement(sql);
			preparedStatement.setString(1, bNo); //1은 첫번째 물음표 값을 입력
			
			int n = preparedStatement.executeUpdate();
			
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			try {
				if(preparedStatement != null) preparedStatement.close();
				if(connection != null) connection.close();
				
			} catch (Exception e2) {
				e2.printStackTrace();
			}
		}
	}//addHit()

 

6. contentView.jsp 생성

그 뒤 view폴더에 contentView.jsp를 만들어 아래코드를 입력

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>글내용 보기</title>
</head>
<body>
		<div align="center">
			<h2>글내용 확인</h2>
			<hr width="500" color="green" />
			<table width="500" cellpadding="0" cellspacing="0" border="1">
			<form action="" method="post">
			<tr>
				<td>번호</td>
				<td>${contentView.bNo}</td>
			</tr>
			<tr>
				<td>조회수</td>
				<td>${contentView.bHit}</td>
			</tr>
						<tr>
				<td>작성자</td>
				<td><input type="text" name="bName" value="${contentView.bName }"></td>
			</tr>
						<tr>
				<td>제목</td>
				<td><input type="text" name="bSubject" value="${contentView.bSubject}"></td>
			</tr>
						<tr>
				<td>내용</td>
				<td><textarea rows = "10" name="bContent">${contenctView.bContent}</textarea></td>
			</tr>
			<tr>
				<td colspan="2" align="center"><input type="submit" value="수정하기" />
								&nbsp;&nbsp;&nbsp;<a href="list">목록보기</a>
								&nbsp;&nbsp;&nbsp;<a href="#">삭제</a>
								&nbsp;&nbsp;&nbsp;<a href="#">답변</a>
				</td>
			</tr>
			
			
			</form>
			
			
			</table>
			
			
		</div>
		</body>
</html>

 

수정하기는 아직 만들지 않았다.

클릭하면 조회수가 1씩 증가하는 것을 볼 수 있다.

 

내용 보여주는 곳 까지 파일로 저장해놨으니 아래 참조

 

springBBS 내용보여주는 곳 까지.zip
0.06MB

반응형
반응형

아래 코드를 ajaxtest.json 파일에 저장한다.

참고로 확장자명이 json이 아닌 js로 해도 무방하다.

 

{
    "aaa": [
        {
            "aab1": "이정수",
            "aab2": "이한수",
            "2ban": "정수향"
        }
    ],


    "bbb": [
        {
            "bbc1": "이선태",
            "bbc2": "이한아"
        }
    ],
    
    
    
    "아하": [
        {
            "aab1": "이정수",
            "aab2": "이한수",
            "2ban": "정수향"
        }
    ],



    "1아하": [
        {
            "aab1": "이정수",
            "aab2": "이한수",
            "하타루": "정수향",
            "1하타루": "1정수향"
        }
    ]
}

 

 

JSON의 형태는 우선 중괄호 {}를 써주고 그안에 카테고리 명을 쓴 뒤 :를 써주고 중괄호를 다시 써서 그안에 키, 밸류값을 넣어준다.

 

아래형태 처럼

{
    "1하하": [
        {
            "aab1": "이정수",
            "aab2": "이한수",
            "2ban": "정수향"
        }
    ]
}

 

그 다음, 아래 코드를 ajaxtest.html 에 넣어준다.

<html>

<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body>
    <script>
        $(function() {
            
 
            $.ajax({ type: 'get' , 
                    url: 'ajaxtest.json' , 
                    dataType : 'json' , 
                    success: function(data) {
                console.log("접속 성공");
                 
                    } 
                   });
       
        });

    </script>
</body>


</html>

 

위 코드를 실했을 때, 제대로  json 파일을 가져온다면 

아래와 같이 뜬다.

 

 

이제 json의 파일을 가져오는 예제를 해보겠다.

 

 

1. 최상위의 키들을 가져오고 싶을 때 (예:   [aaa, bbb, 아하, 1아하])

 

   console.log("접속 성공"); 아래에 아래와 같이 써준다.

 console.log(Object.keys(data));  

 

 

성공한다면 아래와 같이 나온다.

여기서 aaa만 선택하고 싶을 경우, 첫번째 배열에 있으므로 배열을 선택해준다.

  console.log(Object.keys(data)[0]);  

 

그러면 결과는 aa가 나온다. 

2. "1아하" 같이 최상위 키의 밸류들을 가져오고 싶을 때 

 

아래처럼 입력해준다.

 

console.log(data["1아하"]);

하지만

배열형태로 뜬다.

크롬 console에서는 클릭하면 보이지만, undefined 상태이다. 왜냐하면 1아하 아래는 배열인데 정확한 배열명을 입력해주지 않았기 때문이다.

 

따라서 첫번째 배열을 [0]으로 지정해주면 정상적으로 뜬다.

console.log(data["1아하"][0]);

 

 

여기서 맨마지막 1정수향이 나오도록 해보자

 

  console.log(data["1아하"][0].1하타루);

 

원칙적으로 위코드를 넣어주면 되지만 에러가 뜰것이다.

왜냐면 첫번째 문자가 숫자라서 그렇다.

 

첫번째 문자가 한글이어도 상관없지만 숫자면 제대로 읽어오지 않는다.

 

그럼 1을 빼고 그냥 "하타루"를 입력해본다.

 

console.log(data["1아하"][0].하타루);  

 

 

 

정상적으로 값을 반환해줌을 알 수 있다.

 

 

 

 

 

 

 

 

반응형

+ Recent posts