프로그래밍/Java

[Spring] 스프링 삽질일지 4일차 - 게시판 작성 기능 구현(2)

Be개발자 2021. 5. 3. 00:46

 

지난번에 게시판 작성 기능 구현을 위한 기본 뼈대들을 만들고, writeView.jsp에 간단한 코드만 적은 후, 제대로 출력되는지 확인해봤다. 이제 본격적으로 화면 구성 및 데이터들이 제대로 데이터베이스에 저장되는지 확인해보고자 한다.

아마 오늘 만들면서 기존에 만든 데이터베이스 스키마들이 꽤 변경되지 않을까 싶다 ㅎㅎ...

처음부터 완벽하게 만들고 싶어도 만들다 보면 자꾸 수정되는 코딩의 세계...*

 

오늘 목표는

 

1. writeView.jsp 화면 구성 (카테고리, 선택형 필드 추가)

2. 데이터 베이스에 제대로 들어가는지 확인

3. 게시판 목록 구현(1)

 

1. writeView.jsp 화면 구성

 

게시물 작성 화면에서 구현해야 할 것은 다음과 같다.

WRITER 닉네임(작성자) 
PASSWORD 비밀번호
CATEGORY 카테고리
CONTENT 내용
COST 가격
IMAGE 이미지
STATE 상태

 

그리하여 데이터베이스를 조금 수정하고자 한다.

기존의 테이블을 삭제하고 다시 만들었다.

CREATE TABLE `BOARD_TABLE` (

	`ID` INT(11) AUTO_INCREMENT,
	`WRITER` VARCHAR(30) NOT NULL,
	`USERPASS` VARCHAR(30) NOT NULL,
	`CATEGORY` VARCHAR(30) NOT NULL,
	`CONTENT` VARCHAR(1000) NOT NULL,
	`COST` INT(11) NOT NULL,
	`IMAGE` VARCHAR(1000) NULL,
	`CLICK_CNT` INT DEFAULT 0,
	`CREATE_DATE` TIMESTAMP DEFAULT NOW(),
	`STATE` VARCHAR(10) NOT NULL,
	PRIMARY KEY (`ID`)
);

 

비밀번호인 USERPASS와 이미지인 IMAGE를 추가하였다.

 

 

데이터 베이스를 수정하였으니 BoardVO.java도 수정해줘야 한다.

 

getter와 setter는 사진 크기 상 생략하겠다...

테이블에 insert되는 파라미터 값들이 달라졌으니 boardMapper.xml 부분도 수정해줘야 한다.

	<!-- 게시판 글 작성 -->
    <insert id="insert">
    	INSERT INTO board_table (WRITER, USERPASS, CATEGORY, CONTENT, COST, STATE)
				VALUE(#{writer}, #{userpass}, #{category}, #{content},#{cost}, #{state});
	</insert>

 

자 이제 데이터 베이스 스키마가 변경되면서 같이 수정해줘야 할 것들의 처리가 끝났다.

 

이제 데이터가 서버 페이지에서 제대로 삽입이 되는지 확인하기 위한 페이지를 만들고자 한다.

지난 게시글에선 writeView.jsp를 writeView 글자만 출력되게 만들었었다. 

 

 

하지만 이제 화면 구성을 해줘야지 하하하.....

 

화면 구성은 holy grail layout 형식을 따를 것이다.

holy grail layout은 다음과 같이 생겼다.

 

출처: https://opentutorials.org/module/2398/13570

 

 

html코드를 하나하나 치기엔 너무 힘들기에 기본 틀을 갖고와 필요한 부분만 수정하자...

opentutorials.org/module/2398/13570

위 링크에 접속하여 하단의 holy_grail_layout_legacy.html 코드를 참고하여 구성하였다

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
 
<head>
  <style>
    .container{
       
    }
     
    *{
      box-sizing: border-box;
    }
    .container{
      border:1px solid black;
    }
    .container>*{
      border:1px solid red;
    }
    .container>.content>*{
      border:1px solid green;
    }
    .container .content{
      padding-left:200px;
      padding-right:150px;
      overflow: hidden;
    }
    .container .content>*{
      float:left;
      padding-bottom:2500px;
      margin-bottom:-2500px;
    }
    .container .content main{
      width:100%;
    }
    .container .content nav{
      width:200px;
      margin-left: -100%;
      left:-200px;
      position: relative;
    }
    .container .content aside{
      width:150px;
      margin-right:-150px; 
    }
    .container footer{
      clear: both;
    }
     
    @media (max-width:599px){
      .container .content{
        padding-left:0;
        padding-right:0;
        overflow: visible;
      }
      .container .content>*{
        float:none;
        padding-bottom:0;
        margin-bottom:0;
      }
      .container .content main{
        width:100%;
      }
      .container .content nav{
        width:auto;
        margin-left: 0;
        left:0;
        position: relative;
      }
      .container .content aside{
        width:auto;
        margin-right:0; 
      }
    }
    
    ul{
   list-style:none;
   }
  </style>
</head>
 
<body>
  <div class="container">
    <header>
      <a href="http://localhost:8080"><h1>천둥 마켓</h1></a>
      
    </header>
    <section class="content">
      <main>
      

			  <h3>게시글 작성</h3>
			<hr>
			</hr>
	  	
      		<section id="insert">
				<form role="form" method="post" action="/board/write">
					<table>
						<tbody>
						
							<tr>
								<td>
									<label for="writer">닉네임 </label><input type="text" id="writer" name="writer" />
								</td>
							</tr>	
							<tr>
								<td>
									<label for="userpass">비밀번호 </label><input type="text" id="userpass" name="userpass" />
								</td>
								
								<td>
									
									<select name="category">				
									    <option value="Toys">Toys</option>
									    <option value="Clothes">Clothes</option>
									    <option value="Fruits">Fruits</option>
									    <option value="Electronics">Electronics</option>
									</select>
								
								</td>
							</tr>	
							
							
							
							<tr>
								<td>
									<label for="content">내용 </label><textarea id="content" name="content" ></textarea>
								</td>
							</tr>
							
							<tr>
								<td>
									<label for="cost">가격</label><input type="text" id="cost" name="cost" /> &#8361;
								</td>
							</tr>	
							
							
							<tr>
								<td>
									판매중<input type="radio" name="state" value="판매중" checked>
									예약중<input type="radio" name="state" value="예약중" checked>
									판매완료<input type="radio" name="state" value="판매완료" checked>
								</td>
							</tr>	
							<tr>
								<td>						
									<button type="submit">등록</button>
								</td>
							</tr>	
						</tbody>			
					</table>
				</form>
			</section>
      </main>
      <nav>
 
		<h4>카테고리</h4>
	        <hr>

        <ul>
	        
	          <li>- ALL</li>
	          <li>- Toys</li>
	          <li>- Clothes</li>
	          <li>- Fruits</li>
	          <li>- Electronics</li>
	          <br>
	          <br>
	          <br>
	          <a href ="http://localhost:8080/board/writeView"><input type='button', value='글쓰기'/></a>
        </ul>
        
         
   
      </nav>
      <aside>
        여기는 광고자리입니당
      </aside>
    </section>
    <footer>
      FOOTER
    </footer>
  </div>
</body>
 
</html>

 

위의 코드를 writeView.jsp에 작성하고 서버를 실행하여 http://localhost:8080/board/writeView 에 접속하면 아래와 같은 화면이 뜬다.

 

이제 이미지 업로드 부분을 마저 구현해야 한다. 파일 업로드 방식은 크게 <form> 태그를 이용해 업로드하는 방식과 Ajax를 이용하는 방식으로 나눠볼 수 있다. 이번에 Ajax 방식을 이용하여 구현해보자.

 

우선 writeView.jsp 파일의 <head> 태그 아래에 다음 내용을 추가한다.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

 

그 후, 비용 아래에 파일 첨부 기능을 넣을 예정으로 다음과 같이 작성해준다.

 

<tr>
	<td>									
		<input type='file', name = 'image' multiple/>  
	</td>
</tr>

 

 

그 후, 서버를 실행해준 뒤 다음과 같이 내용을 입력 후, 등록 버튼을 눌러준다.

그러면 아래와 같이 다시 메인화면으로 리다이렉트될 것이다. 

 

 

 

이제 데이터베이스에 잘 저장되었는지 HeidiSQL을 통해 확인해보자.

잘 저장된 것을 확인할 수 있다.

 

 

데이터베이스에 저장된 것을 확인하긴 했지만 사진이 제대로 저장이 되었는지 좀 찝찝하다... 파일명만 저장된게 아닐까 싶다가도.... 하하하

 

이제 게시글 작성 기능은 예외처리를 제외하곤 다 구현했으니 게시판 목록 기능을 구현할 예정이다.

그때 저 이미지 파일을 제대로 불러올지 잘 모르겠다.

AJAX에 대해서도 인터넷에서 찾아서 무언가 했으나 사실 뭘 했는지 잘 모르겠다... ㄸㄹㄹ...

다음에 해보고 제대로 안 불러와지면 이 게시글도 수정될 예정!! ^_^

 

여태까지 구현한 기능은 다음과 같다.

  • 천둥 마켓 로고 클릭 시 메인 화면으로 이동 (메인 화면은 아직 작업 안함)
  • 좌측 하단의 글쓰기 버튼 클릭시 게시글 작성 홈페이지로 이동
  • 게시글 작성에서 정보를 입력 후, 등록 버튼을 누르면 mariaDB에 저장

앞으로 구현해야 할 기능(필수)

  • 메인 화면
  • 카테고리의 ALL, Toys, Clothes, Fruits, Electronics 클릭 시, 해당 카테고리에 해당하는 상품 보여주는 페이지 생성
  • 게시글 작성에서 이미지 첨부 제대로 되었는지 체크
  • 게시글 수정 및 삭제

물론 해야 할 기능이 더 있긴 하지만, 지금 당장 생각나는 것들은 이정도이다... 하나하나 도장깨기 해나가자 ㅎㅎㅎ

 

 

 

url.kr/9uhoxc (No suitable driver found for jdbc:log4jdbc:mariadb 에러 해결)

coding-factory.tistory.com/625?category=758274(AJAX 파일 업로드)

melonpeach.tistory.com/12?category=806570(게시판 작성 기능 구현)

 

'프로그래밍 > Java' 카테고리의 다른 글

[Spring] 스프링 삽질일지 6일차 - 내용 부족 시 경고창 팝업, 페이징 기능 구현(데모)  (0) 2021.05.12
[Spring] 스프링 삽질일지 5일차 - 게시판 목록, 게시판 조회, 게시판 수정 및 삭제 기능 구현(미완성)  (0) 2021.05.04
[Spring] 스프링 삽질일지 3일차 - 게시판 작성 기능 구현(1)  (0) 2021.05.02
[Spring] 스프링 삽질일지 2일차 - 한글 깨짐 문제 해결, mariaDB 설치, 스프링과 데이터베이스 연동  (0) 2021.04.30
[Spring] 스프링 삽질일지 1일차 - STS3 설치 및 pivotal 4 서버 설정  (0) 2021.04.29

'프로그래밍/Java'의 다른글

  • 현재글[Spring] 스프링 삽질일지 4일차 - 게시판 작성 기능 구현(2)

관련글

티스토리툴바