스프링부트! 게시판 만들면서 배우기! 2. 인덱스 페이지만들기
저번글에서 jsp 설정까지 했으니!
이번에는 실직적으로 서버를 실행 시킨후 해당 로컬주소로 들어갔을 시 인덱스 페이지가 나오게 해보도록하겠습니다!
우선 인덱스 페이지는 부트 스트랩을 사용하겠습니다 그 중에서도~! 부트스트랩에서 예제로 주어지는 템플릿을 사용해 보도록 하겠습니다!
이걸 토대로 제작시 저희는 이런식으로 나오게 해보겠습니닷!
자 그럼 bootstrapk.com/examples/jumbotron/
Jumbotron Template for Bootstrap
Heading Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. View details »
bootstrapk.com
로 들어가 F12를 눌러주시고 코드를 복사 해옵니다!
html이고
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="jumbotron.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
<footer>
<p>© Company 2014</p>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
css 입니다!
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
padding-bottom: 20px;
}
자 이걸 이제 index.jsp , index.css를 만들어 바꿔보도록 하겠습니다!
그리고 위에 부트스트랩 부분은 최신 버전으로 바꿔보겠습니다.
<!-- JQuery 불러오기 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>그리고 저는 다른 페이지에서도 부트스트랩을 사용할 것이기 떄문에 이부분은 중복이 되겠죠? 이 중복되는 부분을 따로 빼서 include 하는 식으로 해서 중복을 최소화 해보겠습니다.
우선 폴더 구성은 jsp 폴더 밑에 article 폴더를 두어서 index파일과 게시판 보기,수정 등 jsp를 넣구
member폴더를 만들어 회원가입, 로그인 등 jsp를 두겠습니다.
그리고 part라는 폴더를 만들어 중복된 코드를 모아두겠습니다!
여기서 중요한 개념은 바로 jsp 내에 있는 include 태그와
.jspf 파일입니다 이는 JSP의 일부분(조각)으로 반복 사용되는 것을 JSPF로 뽑아서 JSP 파일에서 Include 할 수 있도록 하겠습니다.
우선 part폴더 밑에 head.jspf라고 만들어 줍니다. 파일명은 하고싶은거 하셔도 무관합니다!
그 후 필수적인 meta부분과 부트스트랩 선언부를 넣어줍니다!
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- JQuery 불러오기 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
그 후 index.jsp를 article 폴더안에 만들어 주시고!
위 예제에서 주어진 html를 복사해주시고!
헤드안에 <%@include file =jspf파일경로"%>를 적어줍니다.
include는 page,file 포함 두 방식이 있는데 저는 jspf파일을 포함시키는 방식으로 하겠습니다.
자 그리고 나머지 영어로 적힌부분을 적~당히 바꿔줍니다 ㅎㅎ 디자인은 원하시는대로 하셔도 무관합니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<%@include file="../part/head.jspf"%>
<link rel="stylesheet" href="/resource/index.css">
<title>Spring boot를 활용한 게시판 </title>
</head>
<body>
<%@include file="../part/nav.jspf" %>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h2>게시판 만들면서 스프링 배우기!</h2>
<p>스프링, 스프링 부트를 익히기 위해 게시판을 만들면서 모르는점을 배우는 식으로 해보겠습니다.</p>
<p><a class="btn btn-primary btn-lg" href="/article/list" role="button">게시판으로 이동하기 »</a></p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>템플릿</h2>
<p>이번 공부 시 템플릿은 JSP를 사용하도록 하겠습니다.</p>
</div>
<div class="col-md-4">
<h2>DB</h2>
<p>db는 친숙한 Mysql를 사용 한후 JPA를 공부해보도록 하겠습니다. </p>
</div>
<div class="col-md-4">
<h2>화면구성</h2>
<p>화면 구성은 부트스트랩를 사용해보도록 하겟습니다!</p>
</div>
</div>
<hr>
<footer>
<p>© Spring study 2021-04</p>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>이젠 jsp파일은 됫구..! css파일을 적용시켜야겠죠?
css파일 위치는
src-main-resourecs-static-resource 식으로 만
들어주시고 안에 넣어주시면 됩니다!
jsp에서는 static 폴더로 접근 가능하기때문에
경로를 /resource/index.css로 해주시면 됩니당!
자 그럼 이제 index.jsp로 접근 할 수 있도록 Controller를 만들어 줘야겠죠!
자바 폴더 밑에 controller 패키지를 하나 만들어서
저는 HomeController.java라고 만들겟습니다! 파일명은 다르게 하셔도 무관합니다!
자 바로 코드를 보겠습니다.
package com.example.starter.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class HomeController {
@RequestMapping("/")
public String showMain() {
return "article/index";
}
}@Controller : 이 클래스를 컨트롤러로 사용하겠다는 의미입니다!
-Controller란 : Model를 통해서 데이터를 가져오고 그 정보를 바탕으로 View를 제어하여 사용자에게 전달하는 부분입니다.
@RequestMapping("/") localhost:8070/ 로 접속하면 해당 컨트롤러가 작동합니다. 서블리에서 @WebServlet 과 비슷합니다.
public String showMain() {
return "article/index"
}이 부분은 String를 반환하죠 여기서 Controller로 만들고 RequestMapping을 하고 String형태로 반환하게 되면 리턴되는스트링의 이름을 가진 View 페이지를 찾아서 사용자에게 보여줍니다.
저희가 application.yml에서 View파일 폴더를 webapp/WEB-INF로 해놧죵? 그게 기본으로 설정되고
거기 밑에있는 article폴더 밑 index 파일을 찾겠다는 의미입니다.
자 그럼 실행시키고 localhost:8070(본인 주소)/로 접속해볼까요?!
쨘! 저희가 설정해놓은 인덱스페이지가 잘 나오는걸 보실 수 있습니다!
자 오늘은 인덱스 페이지까지 만들어 봤구요!
다음은 로그인, 회원가입 뷰와 컨트롤러까지 해보겠습니다!