새싹_커뮤니티_웹_프로젝트 (2)

임정민·2022년 11월 1일
2

프로젝트

목록 보기
2/33
post-thumbnail

Spring boot를 활용한 웹 게시판 CRUD 프로젝트 입니다.

새싹 커뮤니티 웹 프로젝트 (1) 에 이은 요구 사항과 해결 방법(코드)입니다.

1. 요구 사항

1) 회원가입 정보 DB에 저장
2) Httpsession 활용 로그인/로그아웃 판별
3) 게시글 목록,생성,수정,삭제 가능
4) 네이버 뉴스 크롤링
5) MariaDB 연동하여 서버 종료 후에도 DB 개별적 관리 가능

2. 해결 방법(코드)

1) 디렉토리

2) BatisConfig 와 Controller

-BatisConfig

	<MyBatisConfig.java>
package com.example.sessac.first.config;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Configuration;

@Configuration
@MapperScan(basePackages ="com.example.sessac.first.mapper" )
public class MyBatisConfig {

}

-Controller

<HomeController.java>
package com.example.sessac.first.Controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {
    @GetMapping("/")
    public String home(){
        return "home";
    }
}
<UserController.java>
package com.example.sessac.first.Controller;
import javax.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import com.example.sessac.first.mapper.UserMapper;
import com.example.sessac.first.model.User;

// 유저 관련된 요청을 처리하는 컨트롤러
// 회원가입, 로그인, 로그아웃       

@Controller
@RequestMapping("user") // user 의 주소를 의미  http://127.0.0.1:8081/user/
public class UserController {
    
    @Autowired
    UserMapper userMapper;

    // @GetMapping("join") //http://127.0.0.1:8081/user/join
    //     public String join() {
            
    //         return "join";
    //     }

    @GetMapping("join")  // href -> GetMapping -> html -> PostMapping -> redirect
    public String join(){
            return "user/join";
    }

    @PostMapping("join")
    public String join(
        HttpSession session,
        User user){
            // session.setAttribute("joinUser", user);   
            // user 클래스에 멤버 변수에 맞는 정보들 대입됌   
            // session.joinUser에 회원가입 정보 저장

            // 회원가입 정보를 session에 저장했었음
            // 다른 방식으로
           
        userMapper.join(user);
        return "redirect:/";                            
        
    }

    @GetMapping("login")
    public String login(){
        return "user/login";
    }

    @PostMapping("login")
    public String login(
        HttpSession session,
        User user
        ){

            // **세션으로 로그인하기

            // // 세션에 저장된 회원 정보
            // User userData = (User)session.getAttribute("joinUser");            

            // //로그인 시도하는 계정 정보
            // String id = user.getUserId();
            // String pw = user.getUserPw();

            // //로그인 성공했을 경우에만 세션에 유저 정보를 담아준다
            // if(userData.getUserId().equals(id) && userData.getUserPw().equals(pw)){
                
            //  session.setAttribute("user", userData);   
            // 로그인 id,pw 확인되면 session.user에 
            // }                                                   
            // 로그인된 회원 정보 저장
            // else{
            //     session.setAttribute("user", null);
            // }
            

            // **DB로 로그인하기   

            // 로그인 시도하는 정보
            String id = user.getUserId();
            String pw = user.getUserPw();
            
            // 로그인 시도하는 id값으로 해당하는 사용자의 비밀번호를 가져온다.
            String getPw = userMapper.getPw(id);
            if(getPw != null){
                if(getPw.equals(pw)){
                    // DB에서 유저 정보를 가져와서  userData에 저장
                    User userData = userMapper.selectUser(id);
                    session.setAttribute("user", userData);
            }
            else{
                session.setAttribute("user", null);
            }

        }

        return "redirect:/";
    }
    //로그아웃 기능 구현 http://localhost:8080/user/logout
    @GetMapping("logout")
    public String logout(HttpSession session){
        session.removeAttribute("user");  // 로그인 회원 정보(session.user) 내용 지우고
        return "redirect:/";              // home 화면으로 돌아감
    }                        // session.user 비어있기 때문에 로그인링크 다시생김

}
<BoardController.java>

package com.example.sessac.first.Controller;

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.http.HttpSession;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import com.example.sessac.first.mapper.BoardMapper;
import com.example.sessac.first.model.Board;
import com.example.sessac.first.model.User;

@Controller
@RequestMapping("board")
public class BoardController {

  @Autowired
  BoardMapper boardMapper;

  @GetMapping("boardList") //게시글 목록 조회
  public String boardList(HttpSession session, Model model){  	
  // 게시판 목록갔을 때 작성된 
      
  //DB에서 게시글 목록을 전부 가져와서 model에 담고 html로 표현한다.
      ArrayList<Board> boardList = boardMapper.boardList(); 
      model.addAttribute("boardList", boardList);
      return "board/boardList";
  }

  @GetMapping("boardCreate") //게시글 작성 페이지 
  public String boardCreate(){
      return "board/boardCreate";
  }

  @PostMapping("boardCreate") //게시글 작성 요청
  public String boardCreate(HttpSession session, Board board){   
      
// ** boardTitle , boardContent는 자동으로 param의 이름에 맞는 멤버변수에 들어감
      
      User user = (User) session.getAttribute("user");
      board.setBoardWriter(user.getUserId());
      boardMapper.boardCreate(board);
      return "redirect:/board/boardList";
  }

  @GetMapping("boardDetail") //게시글 상세보기
  public String boardDetail(
      HttpSession session, 
      Model model, 
      @RequestParam("boardNo") String boardNo)
      {

       ArrayList<Board> boardList = boardMapper.boardList();

       for(Board board : boardList){
          if(board.getBoardNo().equals(boardNo)){  
              model.addAttribute("board", board);
          }
       }
      return "board/boardDetail";
  }

  @GetMapping("boardUpdate")
  public String boardUpdate(
      Model model,
      @RequestParam("boardNo") String boardNo,
      HttpSession session){

      ArrayList<Board> boardList = boardMapper.boardList();

      for(Board board : boardList){
         if(board.getBoardNo().equals(boardNo)){                     
             model.addAttribute("board", board); 
             // GetMapping 별로 모델 각각 만들어 넣어줘야함
         }
      }

      //수정하고자 하는 페이지의 글정보를 가져온다.
      //boardCreate페이지를 참고 하는데
      //textArear 태그 안에 글정보가 있어야 하겠다.
      return "board/boardUpdate";
  }

  @PostMapping("boardUpdate")
  public String boardUpdate(
      HttpSession session, 
      Board board
      )
      
      {
          boardMapper.boardUpdate(board);
          return "redirect:/board/boardList";

  }

  @GetMapping("boardRemove")
  public String boardRemove(
      @RequestParam("boardNo") String boardNo
  ){
      boardMapper.boardRemove(boardNo);
      return "redirect:/board/boardList";    
  }


  @GetMapping("boardNewshome")
  public String boardNewshome(
      Model model
      // @RequestParam("newsNo") String newsNo
      ){

      String url = "https://sports.news.naver.com/wfootball/index.nhn";
      Document doc = null;
      try {
			doc = Jsoup.connect(url).get();
		} catch (IOException e) {
			e.printStackTrace();
		}
      Elements element = doc.select("div.good_news");
      String title = element.select("h2").text();
      model.addAttribute("title", title);

      ArrayList<String> elArrayList = new ArrayList<>();
      ArrayList<String> elhrefArrayList = new ArrayList<>();
      ArrayList<Map<String,String>> newsList = new ArrayList<>();

      String url_front = url.substring(0, 29);

      for(Element el: element.select("li")){

          elArrayList.add(el.text()); // text() 태그를 제외한 내용을 가져옴
          elhrefArrayList.add(url_front+el.getElementsByAttribute("href").attr("href"));
          Map<String,String> news = new HashMap<>();
          news.put("url", url_front+el.getElementsByAttribute("href").attr("href"));
          news.put("title", el.text());
          newsList.add(news); 
         // ArrayList<Map<String,String> 에 넣어서 객체.url , 객체.title로 가져옴
      }

      System.out.println(title);
      System.out.println(elArrayList);
      System.out.println(elhrefArrayList);
      System.out.println(newsList);

      model.addAttribute("elArrayList", elArrayList);
      model.addAttribute("elhrefArrayList", elhrefArrayList);
      model.addAttribute("newsList", newsList);

      return "board/boardNewshome";
  }
}

3)Mapper

<UserMapper.java>
package com.example.sessac.first.mapper;

import org.apache.ibatis.annotations.Mapper;
import com.example.sessac.first.model.User;

@Mapper
public interface UserMapper {
  
  public void join(User user);

  public String getPw(String id);

  public User selectUser(String id);

}
  <BoardMapper.java>
package com.example.sessac.first.mapper;

import java.util.ArrayList;
import org.apache.ibatis.annotations.Mapper;
import com.example.sessac.first.model.Board;

@Mapper
public interface BoardMapper {
  public ArrayList <Board> boardList();

  public void boardCreate(Board board);

  public void boardUpdate(Board board);

  public void boardRemove(String boardNo);
}

4)model

<User.java>

package com.example.sessac.first.model;

import lombok.Data;

@Data
public class User {
    private String userId;
    private String userPw;
    private String userName;
    private String userAddr;
}
<Board.java>

package com.example.sessac.first.mapper;

import java.util.ArrayList;
import org.apache.ibatis.annotations.Mapper;
import com.example.sessac.first.model.Board;

@Mapper
public interface BoardMapper {
   public ArrayList <Board> boardList();

   public void boardCreate(Board board);

   public void boardUpdate(Board board);

   public void boardRemove(String boardNo);
}

5)FirstApplication

    <FisrtApplication.java>
package com.example.sessac.first;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class FirstApplication {

	public static void main(String[] args) {
		SpringApplication.run(FirstApplication.class, args);
	}
}

6)mapper (resources)

<userMapper.xml>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.sessac.first.mapper.UserMapper">
    <insert id="join" parameterType="com.example.sessac.first.model.User"> <!-- id = 메소드명 -->
        insert into user values(#{userId},#{userPw},#{userName},#{userAddr})
    </insert>

    <select id="getPw" parameterType="String" resultType="String">
        select userPw 
        from user
        where userId = #{userId}
    </select>

    <select id="selectUser" parameterType="String" resultType="com.example.sessac.first.model.User">
        select * 
        from user
        where userId = #{userId}
    </select>
</mapper>
<boardMapper.xml>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.sessac.first.mapper.BoardMapper">
    <select id="boardList" resultType="com.example.sessac.first.model.Board"> <!-- boardList 다 가져오기-->
        select * from board
    </select>

    <insert id="boardCreate" parameterType="com.example.sessac.first.model.Board"> <!-- id = 메소드명 -->
        insert into board values( NULL , #{boardTitle},#{boardContent},#{boardWriter})
    </insert>

    <update id="boardUpdate" parameterType="com.example.sessac.first.model.Board">
        update board
        set boardTitle=#{boardTitle}, boardContent=#{boardContent}
        where boardNo=#{boardNo}
    </update>

    <delete id="boardRemove" parameterType="String">
        delete from board where boardNo = #{boardNo}
    </delete>

</mapper>

7) templates

-home

<home.html>
<html xmlns:th="http://www.thymeleaf.org">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Song+Myung&display=swap" rel="stylesheet">
    <style>
        *{
            font-family: 'Song Myung', serif;
        }
        #loginForm{ 
            text-align: center;
        }
    </style>
<head>
    <p><img src="images/img_sessac1.png"style="margin-left: auto; margin-right: auto; display: block;"width="500" height="250"></p>
    <div style=" font-family: 'Black Han Sans', sans-serif; text-align:center; font-size: 400%; font-weight:1500px; color:rgb(82, 205, 82)">새싹 커뮤니티 Saver</div>
    <div style=" font-family: 'Black Han Sans', sans-serif; text-align:center; font-size: 250%; font-weight:1500px; color:rgb(66, 135, 43)">홈  화면</div>
    <pre>

    
    </pre>
</head>

<body>
    <div id = "loginForm">
        <a href="/user/join;" style="font-size: 250%;">|  회원가입  |</a> 
        <th:block th:if="${session.user} == null">
            <a href="/user/login" style="font-size: 250%;">  로그인  |</a>
        </th:block>
    </div>
    <th:block th:unless="${session.user} == null">
        <div id = "loginForm">
            <a href="/user/logout" style="font-size: 250%;">로그아웃  |</a> 
            <a href="/board/boardList" style="font-size: 250%;">거래 게시판  |</a>
            <a href="/board/boardNewshome" style="font-size: 250%;">스포츠 뉴스  |</a>
            <br>
            <span style="font-size: 250%; color: rgb(66, 135, 43);" >[[${session.user.userName}]] 님 환영합니다.</span> <br/>
        </div>
    </th:block>
</body>

</html>

-user

<join.html>
<html xmlns:th="http://www.thymeleaf.org">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Song+Myung&display=swap" rel="stylesheet">
    <style>
        *{
            font-family: 'Song Myung', serif;
        }
        #loginForm{ 
            text-align: center;
        }
        .newAccount{
            
            font-family: sans-serif;
            width:200px;
            height:50px;
            font-size:200%;
        }
    </style>
<head>
    <p><img src="../images/img_sessac1.png"style="margin-left: auto; margin-right: auto; display: block;"width="500" height="250"></p>
    <div style=" font-family: 'Black Han Sans', sans-serif; text-align:center; font-size: 400%; font-weight:1500px; color:rgb(82, 205, 82)">새싹 마켓</div>
    <div style=" font-family: 'Black Han Sans', sans-serif; text-align:center; font-size: 250%; font-weight:1500px; color:rgb(66, 135, 43)">회원 가입 화면</div>
    <pre>

    
    </pre>
<body>
    <form action="/user/join" method="post">
        <div id="loginForm">
        <input type="text" placeholder="아이디" name="userId" style="text-align: center; font-family: sans-serif;width:200px;height:50px;font-size:200%;"/>
        <br>
        <input type="text" placeholder="비밀번호" name="userPw" style="text-align: center; font-family: sans-serif;width:200px;height:50px;font-size:200%;"/>
        <br>
        <input type="text" placeholder="이름" name="userName" style="text-align: center; font-family: sans-serif;width:200px;height:50px;font-size:200%;"/>
        <br>
        <input type="text" placeholder="주소" name="userAddr" style="text-align: center; font-family: sans-serif;width:200px;height:50px;font-size:200%;"/>
        <br>
        <input type="submit" value="회원가입" style="color: rgb(247, 247, 247); border: none; background-color:rgb(82, 205, 82); text-align: center; font-family: sans-serif;width:200px;height:50px;font-size:200%;"/>
        </div>
    </form>
</body>

</html>
<login.html>
<html xmlns:th="http://www.thymeleaf.org">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Song+Myung&display=swap" rel="stylesheet">
    <style>
        *{
            font-family: 'Song Myung', serif;
        }
        #loginForm{ 
            text-align: center;
        }
        .fontBlack{
            font-family: 'Black Han Sans', sans-serif;
        }
    </style>
    <!-- css 선택자 : #아이디 , .클래스-->
<head>
    <img src="../images/img_sessac1.png" style="margin-left: auto; margin-right: auto; display: block;"width="500" height="250">
    <div class="fontBlack" style="text-align:center; font-size: 400%; font-weight:1500px; color:rgb(82, 205, 82)">새싹 커뮤니티 Saver</div>
    <div class="fontBlack" style="text-align:center; font-size: 250%; font-weight:1500px; color:rgb(66, 135, 43)">로그인  화면</div>
    <pre>

    
    </pre>
<body>
    <form action="/user/login" method="post" id="loginForm">
        <input type="text" placeholder="아이디" name="userId" style="font-family: sans-serif;width:200px;height:50px;text-align:center;font-size:200%;"/>
        <br>
        <input type="text" placeholder="비밀번호" name="userPw" style="font-family: sans-serif;width:200px;height:50px;text-align:center;font-size:200%;"/>
        <br>
        <input type="submit" value="로그인" style="font-family: 'Black Han Sans', sans-serif;width:200px;height:50px;text-align:center;font-size:200%;"/>
    </form>
</body>

</html>

-board

<boardCreate.html>
<html xmlns:th="http://www.thymeleaf.org">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Song+Myung&display=swap" rel="stylesheet">
    <style>
        *{
            font-family: 'Song Myung', serif;
        }
        .boardCreate{
            text-align: center;
            font-size:150%;
        }
    </style>
<head>
    <img src="../images/img_sessac1.png"style="margin-left: auto; margin-right: auto; display: block;"width="500" height="250">
    <div style=" font-family: 'Black Han Sans', sans-serif; text-align:center; font-size: 400%; font-weight:1500px; color:rgb(82, 205, 82)">새싹 마켓 게시판</div>
    <div style=" font-family: 'Black Han Sans', sans-serif; text-align:center; font-size: 250%; font-weight:1500px; color:rgb(66, 135, 43)">게시글 작성</div>
<body>
    <form action="/board/boardCreate" method="post">
        <h3 class="boardCreate">작성자 : [[${session.user.userId}]]</h3>
        <h3>글 제목</h3>
        <textarea name="boardTitle" style="width:100%;"></textarea>
        <h3>글 내용</h3>
        <textarea name="boardContent" style="width:100%; height:200px;"></textarea>
        <div class="boardCreate">
            <input  class="boardCreate" type="submit" value="게시글작성"/>
        </div>
    </form>
</body>
</html>
<boardDetal.html>

<html xmlns:th="http://www.thymeleaf.org">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Song+Myung&display=swap" rel="stylesheet">
    <style>
        *{
            font-family: 'Song Myung', serif;
        }
        .boardList_Revise_Delete{
            text-align: center;
            font-size:300%;
        }
        #boardDetailform{
            text-align: center;
        }
        #boardTextarea{
            font-size:300%;
        }
        textarea {
            width: 300%;
            height: 50px;
            resize: none;
        }
        </style>
<head>
    <img src="../images/img_sessac1.png"style="margin-left: auto; margin-right: auto; display: block;"width="500" height="250">
    <div style=" font-family: 'Black Han Sans', sans-serif; text-align:center; font-size: 400%; font-weight:1500px; color:rgb(82, 205, 82)">새싹 마켓 게시판</div>
    <div style=" font-family: 'Black Han Sans', sans-serif; text-align:center; font-size: 250%; font-weight:1500px; color:rgb(66, 135, 43)">게시판 목록</div>
<body>
    <h3 id = "boardDetailform">작성자 : [[${board.boardWriter}]]</h3>
    <h3>글 제목</h3>
    <textarea name="boardTitle" style="width:100%; font-size:200%;" readonly>[[${board.boardTitle}]]</textarea>
    <h3>글 내용</h3>
    <textarea name="boardContent"style="width:100%; height:120px; font-size:200%;" readonly>[[${board.boardContent}]]</textarea>
    <div class="boardList_Revise_Delete">
        <a href="/board/boardList">목록으로</a>
    </div>
    <br>
    <th:block th:if="${board.boardWriter} == ${session.user.userId}"> <!-- 글 작성자와 사용자의 이름이 같을 경우-->
        <div class="boardList_Revise_Delete">
            <a th:href="@{/board/boardUpdate(boardNo=${board.boardNo})}">글수정</a>
            <a th:href="@{/board/boardRemove(boardNo=${board.boardNo})}">글 삭제</a>
        </div>
    </th:block>
</body>

</html>
<boardList.html>
<html xmlns:th="http://www.thymeleaf.org">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Song+Myung&display=swap" rel="stylesheet">
    <style>
        *{
            font-family: 'Song Myung', serif;
        }
        .boardListform{
            
            text-align: center;
            font-family: sans-serif;
            width:150px;
            height:20px;
            font-size:150%;
        }
        .boardCreate{
            text-align: center;
            font-size:300%;
        }
    </style>
<head>
    <img src="../images/img_sessac1.png"style="margin-left: auto; margin-right: auto; display: block;"width="500" height="250">
    <div style=" font-family: 'Black Han Sans', sans-serif; text-align:center; font-size: 400%; font-weight:1500px; color:rgb(82, 205, 82)">새싹 마켓 게시판</div>
    <div style=" font-family: 'Black Han Sans', sans-serif; text-align:center; font-size: 250%; font-weight:1500px; color:rgb(66, 135, 43)">게시판 목록</div>
<body>

    <table border="1" table style="margin-left:auto; margin-right:auto; width: 1000px; height: 200px; " class="boardListform">
        <tr>
            <td>게시글번호</td>
            <td>게시글제목</td>
            <td>작성자</td>
        </tr>
        <th:block th:if="${boardList} != null">
            <tr th:each="board : ${boardList}">
                <td th:text="${board.boardNo}"></td>
                <td>
                    <a th:href="@{/board/boardDetail(boardNo=${board.boardNo})}">[[${board.boardTitle}]]</a>
                </td>
                <td th:text="${board.boardWriter}"></td>
            </tr>
        </th:block>
        <th:block th:unless="${boardList} != null">
            <tr>
                <td colspan="3">게시글이 존재 하지 않습니다.</td>
            </tr>
        </th:block>
    </table>
    <br><br>
    <div class="boardCreate">
        <a href="/">홈으로</a> | <a href="/board/boardCreate">글쓰기</a>
    </div>
</body>

</html>
<boardNewshome.html>
<html xmlns:th="http://www.thymeleaf.org">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Song+Myung&display=swap" rel="stylesheet">
    <style>
        *{
            font-family: 'Song Myung', serif;
        }
        .boardNewshome{ 
            text-align: center;
            font-size:115%;
        }
        .boardNewshomeGohome{
            text-align: center;
            font-size:300%;
        }
    </style>
<head>
    <p><img src="../images/img_sessac1.png"style="margin-left: auto; margin-right: auto; display: block;"width="500" height="250"></p>
    <div style=" font-family: 'Black Han Sans', sans-serif; text-align:center; font-size: 400%; font-weight:1500px; color:rgb(82, 205, 82)">새싹 커뮤니티 Saver</div>
    <div style=" font-family: 'Black Han Sans', sans-serif; text-align:center; font-size: 250%; font-weight:1500px; color:rgb(66, 135, 43)">스포츠 뉴스</div>
<body>
    <div class="boardNewshome">
        <span>[[${title}]]</span>
        <p>===========================================================================</p>
    </div>
    <th:block  th:each = "news : ${newsList}">
        <div class ="boardNewshome">
            <a th:href="@{${news.url}}" target="_blank">[[${news.title}]]</a>
            <br>                        <!-- target="_blank" 새창에서 열림 -->
            <span th:text="------------------------------------------------------------------------------------"></span>
        </div>
    </th:block>
    <div class="boardNewshomeGohome">
        <a href="/">홈으로</a>
    </div>
</body>
</html>
<boardUpdate.html>
<html xmlns:th="http://www.thymeleaf.org">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Song+Myung&display=swap" rel="stylesheet">
    <style>
        *{
            font-family: 'Song Myung', serif;
        }
        .boardUpdate{
            text-align: center;
            font-size:300%;
        }
    </style>
<head>
    <img src="../images/img_sessac1.png"style="margin-left: auto; margin-right: auto; display: block;"width="500" height="250">
    <div style=" font-family: 'Black Han Sans', sans-serif; text-align:center; font-size: 400%; font-weight:1500px; color:rgb(82, 205, 82)">새싹 마켓 게시판</div>
    <div style=" font-family: 'Black Han Sans', sans-serif; text-align:center; font-size: 250%; font-weight:1500px; color:rgb(66, 135, 43)">게시글 수정</div>
<body>
    <form action="/board/boardUpdate" method="post">
        <div style="width:100%; font-size:200%;">
            <input type = "hidden" name = "boardNo" th:value = "${board.boardNo}"/>
            작성자 : <input  style="width:100%; font-size:150%;" type= "text" name = "boardWriter" th:value = "${board.boardWriter}"/> <!--원작자-->
        </div>
        <h3>글 제목</h3>
        <textarea name="boardTitle" style="width:100%; font-size:200%;">[[${board.boardTitle}]]</textarea>
        <h3>글 내용</h3>
        <textarea name="boardContent" style="width:100%; height:120px; font-size:200%;">[[${board.boardContent}]]</textarea>
        <div class="boardUpdate">
            <input type="submit" style="width:200px;height:50px;font-size:70%; " value="게시글수정"/>
        </div>
    </form>
</body>
</html>

8)application.properties

# application.yml
server.port: 8081

# MyBatis
mybatis.mapper-locations=classpath:mapper/**/*.xml

spring.datasource.url=jdbc:mysql://localhost:3307/sessac?serverTimezone=UTC&characterEncoding=UTF-8
spring.datasource.driverClassName=com.mysql.cj.jdbc.Driver
spring.datasource.username=root
spring.datasource.password=123456

9)pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.6.13</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.example.sessac</groupId>
	<artifactId>first</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>first</name>
	<description>Demo project for Spring Boot</description>
	<properties>
		<java.version>11</java.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<scope>runtime</scope>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>com.h2database</groupId>
			<artifactId>h2</artifactId>
			<scope>runtime</scope>
		</dependency>
		<dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>
		<dependency>
			<groupId>org.mariadb.jdbc</groupId>
			<artifactId>mariadb-java-client</artifactId>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>org.jsoup</groupId>
			<artifactId>jsoup</artifactId>
			<version>1.14.2</version>
	  	</dependency>

		<!-- mybatis설정-->
		<dependency>
			<groupId>org.mybatis.spring.boot</groupId>
			<artifactId>mybatis-spring-boot-starter</artifactId>
			<version>2.2.0</version>
		 </dependency>
	</dependencies>


	

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
				<configuration>
					<excludes>
						<exclude>
							<groupId>org.projectlombok</groupId>
							<artifactId>lombok</artifactId>
						</exclude>
					</excludes>
				</configuration>
			</plugin>
		</plugins>
	</build>

</project>

10) DB 구성

-디렉토리

<user:사용자들의 정보>

<board:게시판 데이터>

3. 홈화면 예시

  • 홈화면

참고

발표 및 PPT는 새싹 커뮤니티 웹 프로젝트 (3)을 참고하시면 되겠습니다.

감사합니다.🥁🥁🥁

profile
https://github.com/min731

0개의 댓글