Bootstrap Example using Spring

How to make Blog with BootStrap in Spring

CRUD: create read update delete

spring boot & bootstrap

1. Search sb-admin2 in google

2. download zip file

3. unzip it and paste it in the project

<resources under webapp>

Now, let’s dig into the example.

I will add the bootstrap format to the simple Blog (CRUD) website I made.

There is a table.html file in the pages folder.

Let’s take a table.html and take a look and practice it with example.

tables.html

created folder as the picture below

make footer and header.jsp in the include folder.

  • copy and paste from tables.html

1. copy the whole tables.html to list.jsp.

2. cut and paste the header part and footer part to header.jsp and footer.jsp

  • find page-wrapper and cut and paste the code till the first page-wrapper to the header.jsp.
  • find page-wrapper and cut and paste from the last page-wrapper to footer.jsp

3. include header and jsp to list.jsp file

<%@ include file="../include/header.jsp" %>

add this code at the very bottom of the list.JSP file.

<%@ include file="../include/footer.jsp" %>

4. adjust the bootstrap path

Now, when you run on the server, you will find the stylesheet is broken.

This is because we did not set the path for bootstrap correctly as we copy and pasted the tables.html.

5. find panel body

erase the content between the panel-body.

6. jquery

  • Annotate the existing jquery.
<!-- jQuery --><!--   <script src="/resources/vendor/jquery/jquery.min.js"></script> -->
  • Add the following code at the bottom of header.jsp
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

7. Add Sidebar (to test JQUERY)

  • add the following code at the bottom of footer.jsp.
$(".sidebar-nav").attr("class","sidebar-nav navbar-collapse collaps").attr("aria-expanded",'false').attr("style","height:1px");

8. edit table in the list.JSP

9. add taglib on the top of list.jsp

<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core"%><%@ taglib prefix="format" uri="http://java.sun.com/jsp/jstl/fmt" %>

now when you run it, the bootstrap style will be applied.

The content is from my project so you will see different content depends on what did you put on the database.

Add RegisterButton and Connect Register page

Add Button

Board List<!--                          pull right means right side of the panel-heading(parent)  --><button id='regBtn' type="button" class="btn btn-xs pull-right">New Board</button>

add script on the bottom

<script type="text/javascript">$(document).ready(function(){@("#regBtn").on("click",function(){self.location="/board/register";});});</script>

create register.jsp under board

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ include file="../include/header.jsp"%><div class="row"><div class="col-lg-12"><h1 class="page-header">Board List</h1></div><!-- /.col-lg-12 --></div><!-- /.row --><div class="row"><div class="col-lg-12"><div class="panel panel-default"><div class="panel-heading">DataTables Advanced Tables</div><!-- /.panel-heading --><div class="panel-body"><form role="form" action="/board/register" method="post"><div class="form-grop"><label>Title</label><input class="form-control" name="title"></div><div class="form-grop"><label>content</label><textarea class="form-control" row="3" name="content"></textarea></div><div class="form-grop"><label>writer</label><input class="form-control" name="writer"></div><button type="submit" class="btn btn-default">submit button</button><button type="reset" class="btn btn-default">reset button</button></form></div><!-- /.panel-body --></div><!-- /.panel --></div><!-- /.col-lg-12 --></div><!-- /.row --><%@ include file="../include/footer.jsp"%>

This is how it looks like.

to view each post in detail

create get.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ include file="../include/header.jsp"%><!-- /.row --><div class="row"><div class="col-lg-12"><div class="panel panel-default"><div class="panel-heading">Board Register</div><!-- /.panel-heading --><div class="panel-body"><!-- <form role="form" action="/board/register" method="post"> --><div class="form-grop"><label>Bno</label><input class="form-control" name="bno" value="${board.bno}" readonly></div><div class="form-grop"><label>Title</label><input class="form-control" name="title" value="${board.bno}" readonly></div><div class="form-grop"><label>content</label><textarea class="form-control" row="3" name="content" readonly>${board.content}</textarea></div><div class="form-grop"><label>writer</label><input class="form-control" name="writer" value="${board.writer}" readonly></div><div class="form-grop"><label>writer</label><input class="form-control" name="regdate" value="${board.regdate}" readonly></div><div class="form-grop"><label>writer</label><input class="form-control" name="update" value="${board.updatedate}" readonly></div><button data-oper='modify' class="btn btn-primay">Modify</button><button data-oper='modify' class="btn btn-danger">Delete</button><button data-oper='modify' class="btn btn-default">List</button><!--  </form> --></div><!-- /.panel-body --></div><!-- /.panel --></div><!-- /.col-lg-12 --></div><!-- /.row --><%@ include file="../include/footer.jsp" %>

When click ‘modify’ ‘remove’ and list’

  1. create a button to get.jsp.
<button data-oper='modify' class="btn btn-primary">Modify</button><button data-oper='remove' class="btn btn-danger">Remove</button><button data-oper='list' class="btn btn-default">List</button>

2. add script and the get.jsp looks like the following.

<script type="text/javascript">$(document).ready(function() {var operForm = $("#operForm");$("button[data-oper='modify']").on("click", function() {operForm.attr("action", "/board/modify");operForm.attr("method0", "get")openForm.submit();});$("button[data-oper='remove']").on("click", function() {operForm.attr("action", "/board/remove");operForm.attr("method0", "get")openForm.submit();});$("button[data-oper='list']").on("click", function() {openForm.find("#bno").remove();operForm.attr("action", "/board/list");operForm.attr("method0", "get")openForm.submit();});});</script>

The list does not need Bno so we can remove bno.

Thanks.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

READ.ME — Amazon Cognito Identity SDK for JavaScript

How to submit forms on a static website with VueJS and Netlify functions

Design Patterns for Javascript — Builder Pattern

13 Things Every Junior Should Learn for a Full-Stack Developer Position

Open-Source GitHub-APIv4 Makes GitHub GraphQL API Exploration Easier

CORS Explained (with example)

Why does MaxRAMPercentage stop working at heaps of ~ 30 GB?

Setting up Test Driven Development(TDD) Environment in Javascript with JEST in 2 minutes

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Naraekang

Naraekang

More from Medium

Fullstack web application using Spring Boot, Angular 8, MongoDB and RestAPIs

JPA Key Notes

Working with Filter in Spring Boot And Angular

Securing your Spring Boot application with JWT