⭐Back-end

JSP

아래 기능들을 구현하기 위해 전체 코드 중 주요하게 바뀌는 부분만 작성해보겠다

수정 페이지 만들기

detail.jsp

<div>
	<a href="list.jsp">목록</a>
	<a href="edit.jsp?id=<%=id%>">수정</a> <!--
</div>

edit.jsp

<form action="edit" method="post"> <!-- 사용자가 수정한 내용을 저장할 수 있게 서블릿을 처리기로 해서 서버에 post로 보내고, 다시 redirect해서 수정 내용이 반영된 detail.jsp 보여주게 하기 -->
       <table border="1">
             <tr>
                   <th>제목</th>  <!-- 컬럼 내에서의 제목: th -->
                   <td colspan="3"><input type="text" value="<%=notice.getTitle() %>"></td> <!-- notice.getTitle()에 해당되는 내용 나오게 하기 -->
             </tr>
             <tr>
                   <th>작성일</th>
                   <td colspan="3"><%=notice.getRegDate() %></td>
             </tr>
             <tr>
                   <th>작성자</th>
                   <td><%=notice.getWriterId() %></td>
                   <th>조회수</th>
                   <td><%=notice.getHit() %></td>
             </tr>
             <tr>
                   <th>첨부파일</th>
                   <td colspan="3"><%=notice.getFiles() %></td>
             </tr>
             <tr>
                   <td colspan="4">
                     <textarea rows="20" cols="80">
                       <%=notice.getContent() %>
                     </textarea>
                   </td>
             </tr>
       </table>
       <div>
             <input type="submit" value="저장">
             <a href="detail.jsp?id=<%=notice.getId()%>">취소</a> <!-- 해당 id의 detail 페이지와 연결 -->
       </div>
</form>

수정한 내용을 POST로 보내기

edit.jsp

<div>
    <!-- id를 hidden으로 해서 심기 -->
    <input type="hidden" name="id" value=<%=id %>">
    <input type="submit" value="저장">
    <a href="detail.jsp?id=<%=notice.getId()%>">취소</a> <!-- notice.getId() 대신 id를 바로 써줘도 됨 -->
</div>

EditController.java

@WebServlet("/notice/edit")
public class EditController extends HttpServlet {
	
	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		// hidden으로 심은 name 값에서 가져온 id(post로 제출했으므로 url에는 나타나지 않음)
		int id = Integer.parseInt(request.getParameter("id")); 
		String title = request.getParameter("title");
		String content = request.getParameter("content");
		
		// title, content를 바꾸려 할 때는 바꾸고자 하는 특정 id가 필요
		NoticeService service = new NoticeService();
		
//		service.update(id, title, content);
		
		Notice notice;
		try {
			
            		// 받아온 id 값에 해당하는 notice 객체 생성
			notice = service.get(id);
			notice.setTitle(title); // update할 내용만 set 메서드로 바꾸기
			notice.setContent(content); // update할 내용만 set 메서드로 바꾸기
			service.update(notice); // 수정한 내용 반영시키기
			
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		
		response.sendRedirect("detail.jsp?id="+id);
		
	}
}

⭐Front-end

CSS

text-decoration

text-decoration 속성의 line-through를 이용해 글자 중간에 선을 만들 수 있다.

HTML

<span class="price">
    <span class="price-deprecated"><span>99000</span>원</span>
    <span class="price-event"><span>10000</span>원</span>
</span>

CSS

.price-deprecated>span:first-child {
    text-decoration: line-through;
}

결과 화면

align-items

align-items 속성의 center를 이용해 그리드 아이템(Items)들을 수직 정렬할 수 있다.

HTML

<li class="new">
    <a class="title" href="">오라클 프로그래밍</a> <!--제목이 먼저 오게 하기 -->
    <img src="../images/lecture/img-oracle-sm.png">
    <span class="price">
        <span class="price-deprecated"><span>99000</span>원</span>
        <span class="price-event"><span>10000</span>원</span>
    </span>
    <span class="info">
        <span>newlec</span>
        <span>수정일: 2017-01-01</span>
    </span>
</li>

CSS

li {
    display: grid;
    height: 90px;
    /*width: 100%; /*default*/
    grid-template-columns: 90px 1fr;
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
    "img title"
    "img price"
    "img info";
    align-items: center; /*grid item 수직 정렬*/
    
    border-bottom: 1px solid var(--bd-color-basic);
    padding: 5px;
    box-sizing: border-box;
}

결과 화면

AJAX

서버의 데이터를 가져와 프론트로 출력하는 공통 부분 함수로 묶기

JavaScript

function bind(url) { // bind 함수로 묶기
      var request = new /*window.*/XMLHttpRequest(); 

      request.onload = function() { // 바뀐 버전

          // tbody의 자식들을 모두 지우기
          tbody.innerHTML = "";

          // 새로운 목록으로 tbody를 채우기
          var list = JSON.parse(request.responseText); 

          // 여러 라인, 내려쓰기, 꽂아쓰기를 지원하는 새로운 문자열 등장: ``(템플릿 문자열)
          for(var i=0; i<list.length; i++) {
              var tr =  `<tr>
                  <td>${list[i].id}</td>
                  <td>${list[i].title}</td>
                  </tr>`;				
            tbody.insertAdjacentHTML("beforeend", tr);
          }			
      }

      request.open("GET", url, true); 
      request.send(null);

}

검색 시 검색 결과 출력하기

ex1.html

 <section class="search-form"> <!-- 페이지 전체가 아닌 필요한 데이터만 서버에서 가져오기 -->
     <h1>검색 폼</h1>
     <form action="list.jsp" method="get"> 
         <label class="d-none">검색 분류</label> 
         <select name="f">
             <option value="">분류 선택</option>
             <option value="title">제목</option>
             <option value="writer_id">작성자</option>
         </select> 
         <label class="d-none">검색어</label> 
         <input type="text" name="q" value="">
         <input type="submit" value="검색">
     </form>
</section>

ex1.js

window.addEventListener("load", function() {
    var section = document.querySelector("#ex10");
    var fieldInput = section.querySelector(".search-form select");
    var queryInput = section.querySelector(".search-form input[type=text]");
    var submitButton = section.querySelector(".search-form input[type=submit]");
	
    submitButton.onclick = function(e) {
        e.preventDefault();

        var field = fieldInput.value;
        var query = queryInput.value;

        bind(`../api/notice/list?f=${field}&q=${query}`); // 검색 결과를 얻기 위해 사용자가 입력한 field, query 값을 url 주소에 전달해주기
    };
});

NoticeList.java

@WebServlet("/api/notice/list")
public class NoticeList extends HttpServlet {
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		PrintWriter out = resp.getWriter();
		
		try {
			
			String p = req.getParameter("p");
			String f = req.getParameter("f");
			String q = req.getParameter("q");
			
			int page = 1;
			String field = "title";
			String query = "";
			
			if(p != null && !p.equals(""))
				page = Integer.parseInt(p);
			
			if(f != null && !f.equals(""))
				field = f;
			
			if(q != null && !q.equals(""))
				query = q;
				
			NoticeService noticeService = new NoticeService();
			List<Notice> list = noticeService.getList(page, field, query);
			
			out.println(list); // println이 알아서 toString()으로 변환해서 출력해줌
			
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		
	}
	
}

🐥마무리

오늘 오전 시간에는 JSP를 이용해 사용자가 내용을 수정할 수 있도록 하는 수정 페이지를 만들고, 수정한 내용을 POST로 보내는 방법까지 알아보았다. 오후 시간에는 역시 AJAX를 이용해 페이지를 새로 갱신하는 것이 아닌 데이터만을 이용해 결과를 화면에 출력하는 연습을 해보았다.

아직은 헷갈리는 부분도 많고 더 자세히 공부해야할 것도 많지만, 그래도 지금 배우고 있는 CRUD 패턴을 반복 숙달시켜서! 이 코드와 코드의 흐름을 다 내 것으로 만들 수 있게 계속해서 노력해야겠다.