Skip to content

Instantly share code, notes, and snippets.

@julianmartinez10
Forked from dev-marisa/HowToSpringData.md
Created April 18, 2021 01:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save julianmartinez10/488e3bb4d30dc31b03c209a6bc609368 to your computer and use it in GitHub Desktop.
Save julianmartinez10/488e3bb4d30dc31b03c209a6bc609368 to your computer and use it in GitHub Desktop.
How to set up a Spring Boot Data Project w/ Bootstrap

Spring Boot Checklist

Step 0 - Starting the project

Inside of Package Explorer right click -> new -> Spring Starter Project

Inside of the Pop-up we need to:

  • Create a unique project name, example Pandas
  • Make sure the type is Maven
  • Set Java Version to 11
  • Set Packaging to War
  • Group name convention... com.username <-- your username here
  • Package name convention... com.username.pandas <-- your project name here!

Once these are set choose Next

Select/Search for the following packages:

  • Spring Boot DevTools
  • Spring Web

Last, click Finish

Step 1 - pom.xml

Add these to the <dependencies></dependencies> tag in the file and save it

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-validation</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <scope>runtime</scope>
</dependency>
<dependency>
    <groupId>org.apache.tomcat.embed</groupId>
    <artifactId>tomcat-embed-jasper</artifactId>
</dependency>
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jstl</artifactId>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>4.5.0</version>
</dependency>
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>jquery</artifactId>
    <version>3.5.1</version>
</dependency>

Step 2 - Create our first View

Create the folder src/main/webapp/WEB-INF Create the file src/main/webapp/WEB-INF/index.jsp

Add this code in index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Pandas</title>
    <link rel="stylesheet" href="/webjars/bootstrap/4.5.0/css/bootstrap.min.css" />
    <script src="/webjars/jquery/3.5.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <h1>Hello World!</h1>
  </div>
</body>
</html>

Next add this line to the src/main/resources/application.properties file

spring.datasource.url=jdbc:mysql://localhost:3306/PandaDB?useUnicode=yes&characterEncoding=UTF-8&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.jpa.hibernate.ddl-auto=update

spring.mvc.view.prefix=/WEB-INF/

Important!

Don't forget to create the PandaDB schema in MySQL.

(if you want to do this from the command line you can access the MySQL shell this way)

mysql -u root -p
# when prompted enter the password: root
CREATE SCHEMA PandaDB;
exit;

Step 3 - Make our Models

Go to /src/main/java/ and add a new package inside your project example com.username.pandas.models

Inside the new ...models package create a new Java Class called Note

In our Note.java file add the following...

package com.username.pandas.models;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
import javax.validation.constraints.NotEmpty;

@Entity
@Table(name="notes")
public class Note {

	@Id
	@GeneratedValue(strategy = GenerationType.IDENTITY)
	private Long id;
	
	@NotEmpty(message="Your note cannot be blank")
	private String text;
	
	public Note() {}

	public Long getId() {
		return id;
	}

	public void setId(Long id) {
		this.id = id;
	}

	public String getText() {
		return text;
	}

	public void setText(String text) {
		this.text = text;
	}
	
}

Step 4 - Make our Repositories

Go to /src/main/java/ and add a new package inside your project example com.username.pandas.repositories

Inside the new ...repositories package create a new Java Interface called NoteRepository

In our NoteRepository.java file add the following...

package com.username.pandas.repositories;

import org.springframework.data.repository.CrudRepository;
import org.springframework.stereotype.Repository;

import com.username.pandas.models.Note;

@Repository
public interface NoteRepository extends CrudRepository<Note, Long> {}

Step 5 - Make our Services

Go to /src/main/java/ and add a new package inside your project example com.username.pandas.services

Inside the new ...services package create a new Java Class called NoteService

In our NoteService.java file add the following...

package com.username.pandas.services;

import java.util.ArrayList;

import org.springframework.stereotype.Service;

import com.username.pandass.models.Note;
import com.username.pandas.repositories.NoteRepository;

@Service
public class NoteService {

	private NoteRepository noteRepo;
	
	public NoteService(NoteRepository noteRepo) {
		this.noteRepo = noteRepo;
	}
	
	public ArrayList<Note> getAll() {
		return (ArrayList<Note>) noteRepo.findAll();
	}
	
	public Note create(Note newNote) {
		return noteRepo.save(newNote);
	}
	
}

Step 6 - Make our Controllers

Go to /src/main/java/ and add a new package inside your project example com.username.pandas.controllers

Inside the new ...controlers package create a new Java Class called HomeController

In our HomeController.java file add the following...

package com.username.pandas.controllers;

import javax.validation.Valid;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;

import com.username.pandas.models.Note;
import com.username.pandas.services.NoteService;

@Controller
public class HomeController {

	private NoteService noteServ;
	
	public HomeController(NoteService noteServ) {
		this.noteServ = noteServ;
	}
	
	@GetMapping("/")
	public String index(Model model) {
		model.addAttribute("newNote", new Note()); // binds to form helper in index.jsp
		model.addAttribute("allNotes", noteServ.getAll()); // displays all notes 
		return "index.jsp";
	}
	
	@PostMapping("/note")
	public String create(@Valid @ModelAttribute("newNote") Note newNote, 
			BindingResult result, Model model) {
		if(result.hasErrors()) {
			// still display notes if validation error
			model.addAttribute("allNotes", noteServ.getAll()); 
			return "index.jsp";
		}
		// otherwise create a note and redirect back
		noteServ.create(newNote);
		return "redirect:/";
	}
	
}

Step 7 - add to index.jsp

Inside of index.jsp add the following...

<ul class="list-group">
  <li class="list-group-item">Notes</li>
  <c:forEach items="${allNotes}" var="note">
    <li class="list-group-item">${note.text}</li>
  </c:forEach>
  <li class="list-group-item">
    <form:form action="/note" method="post" modelAttribute="newNote">
      <form:input path="text" placeholder="Your note here..."/>
      <form:errors path="text" class="text-danger" />
      <input type="submit" value="Add Note" class="btn btn-sm btn-primary" />
    </form:form>
  </li>
</ul>

Step 8 - running the server

Right click on the PandasApplication.java -> run as -> Spring Boot App

Check our server at http://localhost:8080

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment