2023-03-17
์ ์๋์ด ์ค๋ช
ํด์ฃผ์ ์ฝ๋๋ ๋ค ์ฌ๊ธฐ์ ์์ด์
์ Git์ ์ฌ๋ฆด๊น ํ๋๋ฐ ๊ตณ์ด ์ถ์ด์์
GitHub - bitcocom/springgsm
Contribute to bitcocom/springgsm development by creating an account on GitHub.
github.com
Project Start!!
์ ํฌ๋ ์ธํ์ Bootstrap ์ฌ์ฉํ ๊ฑฐ๋๊น..
W3Schools Free Online Web Tutorials
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
ํด๋น ๊ต์ก์๋ฃ๋ฅผ ํตํด์ ๊ณต๋ถํ๋ฉด์ ํด๋ด ์๋ค.
๊ทธ์ ์ View Logic์ ๋ดค๋ ๊ทธ๋๋ก ๋ง๋ค ๋ฏ ํฉ๋๋ค.
๐์๋ค์ ์ก
์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ(CDN)๋ ๋ฐ์ดํฐ ์ฌ์ฉ๋์ด ๋ง์ ์ ํ๋ฆฌ์ผ์ด์ ์ ์น ํ์ด์ง ๋ก๋ ์๋๋ฅผ ๋์ด๋ ์ํธ ์ฐ๊ฒฐ๋ ์๋ฒ ๋คํธ์ํฌ์ ๋๋ค.
Bootstrap Using Hearder
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
</body>
</html>์๊น ๋ดค๋ ์ฝ๋๋ฅผ ๊ทธ๋๋ก ๋ณต์ฌํด์ template.jsp์ ๋ถ์ฌ์ค ๋ชจ์ต์ ๋๋ค.
๋ค์์ผ๋ก Hearder์ ํ๊ดํ์ฒ๋ผ ํ๋ jumbotron์ ์ฌ์ฉํฉ์๋ค.
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1>Spring Framework~</h1>
<p>Spring WEB MVC, JQuery(Ajax, JSON), MySQL</p>
</div>
</div>
Bootstrap Using Content
์ ๋ ๋ญ ํ๋ก ํธ๋ ์๋๊ณ ๋์์ธ๋ ์๋๊ณ ์ ์ ๋ฐฐ์ ์ด๋ ์ด๋ฐ ์๊ฐ ๋นผ๊ณค ์ ์ฐ๊ธฐ๋ ํ๊ณ
๊ทธ๋ฌ๋๊น ์ด๋ฐ ์ค๋ช
์ ๊ทธ๋ฅ ๋์ด๊ฐ๊ป์
<div class="row">
<div class="col-3">
<jsp:include page="left.jsp" />
</div>
<div class="col-6">
col-6
</div>
<div class="col-3">
<jsp:include page="right.jsp" />
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">BOARD</h4>
<p class="card-text">????</p>
//content
</div>
</div>์๊ฐํด๋ณด๋๊น ์ค๋ช ํ๊ธด ๊ท์ฐฎ์ผ๋๊น ๊ทธ๋ฅ ์ฝ๋๋ง ์ฌ๋ฆด๊ป์
tamplate.jsp ์ด์ ๋ฆฌ
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card">
<div class="card-header">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1>Spring Framework~</h1>
<p>Spring WEB MVC, JQuery(Ajax, JSON), MySQL</p>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-3">
<jsp:include page="left.jsp" />
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">BOARD</h4>
<p class="card-text">????</p>
//content
</div>
</div>
</div>
<div class="col-3">
<jsp:include page="right.jsp" />
</div>
</div>
</div>
<div class="card-footer">
๊ด์ฃผ์ํํธ๋ง์ด์คํฐ๊ณ ๋ฑํ๊ต(3-3: ์ต์ค์ฑ)
</div>
</div>
</body>
</html>list.jsp ์ ๋ฆฌ
์ด์ ์ ๋ง๋ template.jsp๋ฅผ ๋ณต์ ํด์ ๋ง๋ค์ด๋๊ณ ,
...
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card">
<div class="card-header">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1>Spring Framework~</h1>
<p>Spring WEB MVC, JQuery(Ajax, JSON), MySQL</p>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-3">
<jsp:include page="left.jsp" />
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">BOARD</h4>
<p class="card-text">๊ฒ์ํ ๋ฆฌ์คํธ</p>
<table class="table table-bordered table-hover">
<thead>
<tr>
<td>๋ฒํธ</td>
<td>์ ๋ชฉ</td>
<td>์์ฑ์</td>
<td>์์ฑ์ผ</td>
<td>์กฐํ์</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>์คํ๋ง๊ฒ์ํ ์ฐ์ต</td>
<td>๊ด๋ฆฌ์</td>
<td>2023-03-07</td>
<td>0</td>
</tr>
<tr>
<td>2</td>
<td>์คํ๋ง๊ฒ์ํ ์ฐ์ต</td>
<td>์ต์ค์ฑ</td>
<td>2023-03-07</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-3">
<jsp:include page="right.jsp" />
</div>
</div>
</div>
<div class="card-footer">
๊ด์ฃผ์ํํธ๋ง์ด์คํฐ๊ณ ๋ฑํ๊ต(3-3: ์ต์ค์ฑ)
</div>
</div>
</body>
</html>
Controller ์กฐ์
MVC ํน์ง์ธ๋ฐ ์ด์ ์ ์ค๋ช ํ์ผ๋๊น ๋์ด๊ฐ๊ณ
BoardController์ class๊ฐ ์ปจํธ๋กค๋ฌ๋ก ๋์ํ ๋ ค๋ฉด ์์ ์ด๋ ธํ ์ด์ @Controller)๊ฐ ํ์!
๋์ํ ๋ ค๋ฉด V๋จ์ C์ ์์ฒญ → C๊ฐ V๋จ์ ํฌํธํฌ์๋ฉ์ ํด์ค์ผ ์คํ๋จ
๊ท์ฐฎ์ฃ .. ์์ ์ด๋
ธํ
์ด์
@Req..์ด๊ฑด ์์ฒญ์ ํด์ผํ๋ฉฐ, ์ฃผ์์ ์ ๋ณด์
ViewResolver๋ ๋ทฐ ์ด๋ฆ๊ณผ ์ง์ญํ๋ฅผ ์ํ Locale์ ํ๋ผ๋ฏธํฐ๋ก ์ ๋ฌ๋ฐ์ผ๋ฉฐ,
๋งคํ๋๋ View ๊ฐ์ฒด๋ฅผ ๋ฆฌํดํ๋ฉฐ,๋ง์ฝ, ๋งคํ๋๋ View ๊ฐ์ฒด๊ฐ ์กด์ฌํ์ง ์์ผ๋ฉด null์ ๋ฆฌํดํจ
๋ญ ๋ง์ธ๊ฐ ์ถ์ฃ .. MVC์ ๋ํด ์์์ผ ์ดํด๊ฐ ๋ ๊ฑฐ ๊ฐ๊ธดํด์;;
์๋ฒ๋ฅผ ์คํ์ํค๊ณ ..
์ด๊ฑฐ ๋ณด๊ณ ์ฐธ๊ณ ํ์๋ฉด ๋ฉ๋๋ค.
Ex) http://127.0.0.1:8081/controller/list.do
์ด๋ฐ๋ง ํ๋ฉด ์ข ๊ทธ๋ฐ๋ฐ ์ ๋ ์ค๋ฅ๊ฐ ์ข ์์ด์ ์์ ํ๋๋ฐ
์ค๋ช
์ํด๋ ๊ธ๋ฐฉ ๊ณ ์น ์ ์์๊ฑฐ์์
DB Connection
๋๋ฏธ ๋ฐ์ดํฐ๋ก ๊ฐ๋จํ๊ฒ ์ค๋์ ํ์ธ
MVC ํน์ง์ ๋๋ค.
BoardController.java
package kr.board.controller;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import kr.board.entity.Board;
@Controller
public class BoardController {
//list.do ์์ฒญ์ด ์ค๋ฉด ์ฒ๋ฆฌํ๋ ๋ฉ์๋ ์ ์(Mapping)
@RequestMapping("/list.do")
public String list(Model model) {
// ๊ฒ์ํ๋ฆฌ์คํธ๋ฅผ DB์์ ๊ฐ์ ธ์ค๊ธฐ..
// Controller์์ View๋ก ๋ฐ์ดํฐ๋ฅผ ๋๊ธฐ๋ ๋ฐฉ๋ฒ
//Sample data
Board vo = new Board();
vo.setNum(1);
vo.setTitle("๊ฒ์ํ ์ถ๋ ฅํ๊ธฐ");
vo.setWriter("์ต์ค์ฑ");
vo.setIndate(new Date());
vo.setCount(0);
List<Board> list = new ArrayList<>();
list.add(vo);
list.add(vo);
list.add(vo);
model.addAttribute("list", list);
return "board/list"; // /WEB-INT/views/board/list.jsp:ViewResolver
}
@RequestMapping("/register.do")
public String register() {
return "";
}
}list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!-- tag using java -->
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card">
<div class="card-header">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1>Spring Framework~</h1>
<p>Spring WEB MVC, JQuery(Ajax, JSON), MySQL</p>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-3">
<jsp:include page="left.jsp" />
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">BOARD</h4>
<p class="card-text">๊ฒ์ํ ๋ฆฌ์คํธ</p>
<table class="table table-bordered table-hover">
<thead>
<tr>
<td>๋ฒํธ</td>
<td>์ ๋ชฉ</td>
<td>์์ฑ์</td>
<td>์์ฑ์ผ</td>
<td>์กฐํ์</td>
</tr>
</thead>
<tbody>
<c:forEach var="vo" items="${list}">
<tr>
<td>${vo.num}</td>
<td>${vo.title }</td>
<td>${vo.writer }</td>
<td>${vo.indate }</td>
<td>${vo.count }</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-3">
<jsp:include page="right.jsp" />
</div>
</div>
</div>
<div class="card-footer">
๊ด์ฃผ์ํํธ๋ง์ด์คํฐ๊ณ ๋ฑํ๊ต(3-3: ์ต์ค์ฑ)
</div>
</div>
</body>
</html>์ถํ ํด๋น ๋์์๋ฆฌ๋ฅผ ์ ๋ฆฌํ๊ฒ ์ต๋๋ค.
์ฐธ๊ณ ์๋ฃ
#์ฐธ๊ณ ์๋ฃ
...
#์ฐธ๊ณ ์๋ฃ
์ฐธ๊ณ ์ด๋ฏธ์ง
'๐ปโIT_Study > ๐ซโWeb_Study' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| ์ํํธ์จ์ด๊ณตํ ์ค๋ฌด - 2 (0) | 2023.03.13 |
|---|---|
| ์ํํธ์จ์ด๊ณตํ ์ค๋ฌด - 1 (0) | 2023.03.04 |
| Proxy meaning (0) | 2023.02.02 |
| ํด๋ผ์ฐ๋๋? (2) | 2023.01.26 |
| TCP vs UDP (0) | 2022.05.25 |
