Build Airport Application With Spring boot and Thymeleaf

byissamdrmas -
0

Getting Started | Building an Application with Spring Boot



Build an application gyms with Spring boot and Angular use Jpa

Objective:

In this tutorial, we will build an application airport to give information for pilot his flight time, city and plane by code and many information


Used Skills in this project:

Java, SpringBoot, MicroServices, REST WebServices, JPA, Hibernate, MySQL Database, Maven, Thymleaf, GitHub, SpringBoot Embedded Tomcat Server, STS-Eclipse IDE


Tools to be used

° Use any IDE to develop the Spring and Hibernate project. It may be STS/Eclipse/Netbeans. Here, we are using STS (Spring Tool Suite).

° Mysql for the database.

° Use any IDE to develop the Angular project. It may be Visual Studio Code/Sublime. Here, we are using Visual Studio Code.

° Server: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.


Spring MVC

Spring MVC is the primary web framework built on the Servlet API. It is build on the popular MVC design pattern. MVC (Model-View-Controller) is a software architecture pattern, which separates application into three areas: model, view, and controller. The model represents a Java object carrying data. The view represents the visualization of the data that the model contains. The controller controls the data flow into model object and updates the view when the data changes. It separates the view and model.


Spring Boot Architecture



Spring Boot is a module of the Spring Framework. It is used to create stand-alone, production-grade Spring Based Applications with minimum efforts. It is developed on top of the core Spring Framework.


Introduction mysql to database

MySQL is a database management system that allows you to manage relational databases. It is open source software backed by Oracle. It means you can use MySQL without paying a dime. Also, if you want, you can change its source code to suit your needs. MySQL can run on various platforms UNIX, Linux, Windows, etc. You can install it on a server or even in a desktop. Besides, MySQL is reliable, scalable, and fast.



Introduction to the POM

POM A Project Object Model or POM is the fundamental unit of work in Maven. It is an XML file that contains information about the project and configuration details used by Maven to build the project. It contains default values for most projects. Examples for this is the build directory, which is target; the source directory, which is src/main/java; the test source directory, which is src/main/java; and so on. When executing a task or goal, Maven looks for the POM in the current directory. It reads the POM, gets the needed configuration information, then executes the goal.

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.4.1</version>
	<relativePath/> 
  </parent>
    
    <groupId>org.issamdrmas</groupId>
	<artifactId>aeroport</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>aeroport</name>
	<description>Demo project for Spring Boot</description>
    
    <properties>
	 <java.version>1.8</java.version>
    </properties>
    
    <dependencies>
    
    <dependency>
     <groupId>org.junit.vintage</groupId>
     <artifactId>junit-vintage-engine</artifactId>
    </dependency>
    
     <dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-data-jpa</artifactId>
   </dependency>
    
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-security</artifactId>
    </dependency>
     
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-web</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>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
   </dependency>
   
   <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
    </dependency>
    
  </dependencies>
  
  <build>
    <plugins>
	 <plugin>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-maven-plugin</artifactId>
	 </plugin>
	</plugins>
 </build>
 
 </project>

Properties File

Properties files are used to keep ‘N’ number of properties in a single file to run the application in a different environment. In Spring Boot, properties are kept in the application.properties file under the classpath.

The application.properties file is located in the src/main/resources directory. The code for sample application.properties


We need to create database name it airport

src/main/resources/application.properties

    
  
 
spring.datasource.url=jdbc:mysql://localhost:3306/airport?useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC
spring.datasource.username=root
spring.activemq.password=
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL5Dialect
spring.jpa.hibernate.ddl-auto=create-drop
server.port=8080

Class Diagram



Modals / Entities

An entity is a lightweight persistence domain object. Typically, an entity represents a table in a relational database, and each entity instance corresponds to a row in that table. The primary programming artifact of an entity is the entity class, although entities can use helper classes.


We need to create neuf entities

- Flight

- Pilot

- Plane


Here, we are creating an Entity

src/main/java/com/issamdrmas/model/Flight.java):





package com.issamdrmas.model;

import java.io.Serializable;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
public class Flight implements Serializable {
 private static final long serialVersionUID = 1L;

 @Id
 @GeneratedValue(strategy = GenerationType.IDENTITY)
 private Long id;

 private String code;
 
 private String timeArrival;
 private String departureTime;
 private String arrivalSite;
 private String siteDepart;
 private String planeCode;
 private String pilotCode;

 public Flight() {
  super();
 }

 public Long getId() {
   return id;
 }

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

 public String getCode() {
   return code;
 }

 public void setCode(String code) {
   this.code = code;
 }

 public String getTimeArrival() {
   return timeArrival;
 }

 public void setTimeArrival(String timeArrival) {
   this.timeArrival = timeArrival;
 }

 public String getDepartureTime() {
   return departureTime;
 }

 public void setDepartureTime(String departureTime) {
   this.departureTime = departureTime;
 }

 public String getArrivalSite() {
   return arrivalSite;
 }

 public void setArrivalSite(String arrivalSite) {
   this.arrivalSite = arrivalSite;
 }

 public String getSiteDepart() {
   return siteDepart;
 }

 public void setSiteDepart(String siteDepart) {
   this.siteDepart = siteDepart;
 }

 public String getPlaneCode() {
   return planeCode;
 }

 public void setPlaneCode(String planeCode) {
   this.planeCode = planeCode;
 }

 public String getPilotCode() {
   return pilotCode;
 }

 public void setPilotCode(String pilotCode) {
   this.pilotCode = pilotCode;
 }

}

Here, we are creating an Entity

src/main/java/com/issamdrmas/model/Pilot.java):





package com.issamdrmas.model;

import java.io.Serializable;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
public class Pilot implements Serializable {
 private static final long serialVersionUID = 1L;

 @Id
 @GeneratedValue(strategy = GenerationType.IDENTITY)
 private Long id;
 private String code;
 private String name;
 private String site;
 
 public Pilot() {
  super();
 }
 
 public Long getId() {
   return id;
 }

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

 public String getCode() {
   return code;
 }

 public void setCode(String code) {
   this.code = code;
 }

 public String getName() {
   return name;
 }

 public void setName(String name) {
   this.name = name;
 }

 public String getSite() {
   return site;
 }

 public void setSite(String site) {
   this.site = site;
 }

Here, we are creating an Entity

src/main/java/com/issamdrmas/model/Plane.java):





package com.issamdrmas.model;

import java.io.Serializable;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
public class Plane implements Serializable {
 private static final long serialVersionUID = 1L;

 @Id
 @GeneratedValue(strategy = GenerationType.IDENTITY)
 private Long id;
 private String code;
 private String constructor;
 private String model;
 private int capacity;
 private String site;
 
 public Plane() {
  super();
 }

 public Long getId() {
   return id;
 }

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

 public String getCode() {
   return code;
 }

 public void setCode(String code) {
   this.code = code;
 }

 public String getConstructor() {
   return constructor;
 }

 public void setConstructor(String constructor) {
   this.constructor = constructor;
 }

 public String getModel() {
   return model;
 }

 public void setModel(String modal) {
   this.model = model;
 } 

 public int getCapacity() {
   return capacity;
 }

 public void setCapacity(int capacity) {
   this.capacity = capacity;
 } 
 public String getSite() {
   return site;
 }

 public void setSite(String site) {
   this.site = site;
 }

JPA Repositories

The JPA module of Spring Data contains a custom namespace that allows defining repository beans. It also contains certain features and element attributes that are special to JPA. Generally, the JPA repositories can be set up by using the repositories element, as shown in the following example:


Spring Repositories Spring has supported the concept of a repository for some time now. Repository is one of Spring's core stereotypes and you should plan on using them in your data access layer, regardless of your chosen data access layer API and framework.


We need to create these methods

- FlightRepository

- PilotRepository

- PlaneRepository


Here, we are creating an interface

src/main/java/com/issamdrmas/dao/FlightRepository.java):





package com.issamdrmas.repostory;
import  java.util.List;

import  org.springframework.data.jpa.repository.JpaRepository;
import  org.springframework.data.jpa.repository.Query;
import  org.springframework.data.repository.query.Param;
import  org.springframework.stereotype.Repository;
import  com.issamdrmas.model.Flight;

@Repository
public interface FlightRepository extends JpaRepository<Flight, Long> {
    @Query("SELECT p FROM Flight p WHERE p.pilotCode LIKE :c")
	public List<Flight> getPiloteCode(@Param("c")String code);
}

Here, we are creating an interface

src/main/java/com/issamdrmas/dao/PilotRepository.java):





package com.issamdrmas.repostory;

import  org.springframework.data.jpa.repository.JpaRepository;
import  org.springframework.stereotype.Repository;
import  com.issamdrmas.model.Pilot;

@Repository
public interface PilotRepository extends JpaRepository<Pilot, Long> {

}

Here, we are creating an interface

src/main/java/com/issamdrmas/dao/PlaneRepository.java):





package com.issamdrmas.repostory;

import  org.springframework.data.jpa.repository.JpaRepository;
import  org.springframework.data.jpa.repository.Query;
import  org.springframework.stereotype.Repository;
import  com.issamdrmas.model.Plane;

@Repository
public interface PlaneRepository extends JpaRepository<Plane, Long> {
	@Query("SELECT u.id FROM Plane u WHERE u.id LIKE CONCAT('%',:id,'%')")
	String findUsersWithPartOfName(String id);
}

@RestController API

@RestController is a convenience annotation for creating Restful controllers. It is a specialization of @Component and is autodetected through classpath scanning. It adds the @Controller and @ResponseBody annotations. It converts the response to JSON or XML. It does not work with the view technology, so the methods cannot return ModelAndView. It is typically used in combination with annotated handler methods based on the @RequestMapping annotation.


We will create PlaneController class in web controller:

- PlaneController

Here, we are creating an Entity

src/main/java/issamdrmas/issamdrmas/controller/PlaneController.java):





package com.issamdrmas.controller;

import java.util.List;
import java.util.Optional;

import org.springframework.beans.factory.annotation.Autowired;
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.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import com.issamdrmas.model.Plane;
import com.issamdrmas.repostory.FlightRepisotory;
import com.issamdrmas.repostory.PilotRepisotory;
import com.issamdrmas.repostory.PlaneRepisotory;
import com.issamdrmas.model.Pilot;
import com.issamdrmas.model.Flight;

@Controller
public class PlaneController {

 @Autowired
 PilotRepisotory pilotRepisotory;

 @Autowired
 PlaneRepisotory planeRepisotory;

 @Autowired
 FlightRepisotory flightRepisotory;

 @GetMapping(value = ("/admin/form"))
 public String formAvion(Model model) {

  model.addAttribute("pilot", new Pilot());
  List<Pilot> pilots = pilotRepisotory.findAll();
  model.addAttribute("pilots", pilots);

  model.addAttribute("plane", new Plane());
  List<Plane> planes = planeRepisotory.findAll();
  model.addAttribute("planes", planes);

  model.addAttribute("planes", planes);
  model.addAttribute("pilots", pilots);
  model.addAttribute("flight", new Flight());
  return "form";
 }

 @PostMapping(value = "/admin/savePilot")
 public String savePilot(Pilot pilot, BindingResult b) {
 
	if (b.hasErrors())
	 return "form";
	pilotRepisotory.save(pilot);
	return "confirm";
 }

 @PostMapping(value = "/admin/savePlane")
 public String savePlane(Plane plane, BindingResult b) {
  if (b.hasErrors())
	return "form";
  planeRepisotory.save(plane);
  return "confirm";
 }

 @PostMapping(value = "/admin/saveFlight")
 public String saveFlight(Flight flight, BindingResult b) {
  if (b.hasErrors())
	return "form";
  flightRepisotory.save(flight);
  return "confirm";
 }

 @RequestMapping(value = "/admin/editPilot", method = { RequestMethod.GET, RequestMethod.POST, RequestMethod.PUT })
 public String editPilot(Model model, long id) {
	Optional<Pilot> pilot = pilotRepisotory.findById(id);
	 if (pilot.isPresent()) {
			Pilot pilot2 = pilot.get();
			
	long idExists = pilot2.getId();
	String nameString = pilot2.getName();
    String siteString = pilot2.getSite();
	String codeString = pilot2.getCode();

	model.addAttribute("idExists", idExists);
    model.addAttribute("nameString", nameString);
	model.addAttribute("siteString", siteString);
	model.addAttribute("codeString", codeString);
			
  }
  return "editPilot";
 }

 @RequestMapping(value = "/admin/deletePilot", method = { RequestMethod.GET, RequestMethod.POST })
 public String deletePilot(Model model, long id) {
  pilotRepisotory.deleteById(id);
   return "confirmdel";
 }

 @RequestMapping(value = "/admin/editPlane", method = { RequestMethod.GET, RequestMethod.POST, RequestMethod.PUT })
 public String editPlane(Model model, @RequestParam(name = "id", defaultValue = "") long id) {
	Optional<Plane> planeOptional = planeRepisotory.findById(id);
     if (planeOptional.isPresent()) {
	  Plane plane = planeOptional.get();

	  long idExists = plane.getId();
	  String code = plane.getCode();
	  String constructor = plane.getConstructor();
	  String modal = plane.getModel();
	  String site = plane.getSite();
	  int capacity = plane.getCapacity();

	  model.addAttribute("idExists", idExists);
	  model.addAttribute("code", code);
	  model.addAttribute("constructor", constructor);
	  model.addAttribute("modal", modal);
	  model.addAttribute("site", site);
	  model.addAttribute("capacity", capacity);

 }
   return "editPlane";
}

 @RequestMapping(value = "/admin/deleteFlight", method = { RequestMethod.GET, RequestMethod.POST })
 public String deleteFlight(long id) {
   flightRepisotory.deleteById(id);
   return "confirmdel";
 }

 @RequestMapping(value = "/admin/editFlight", method = { RequestMethod.GET, RequestMethod.POST, RequestMethod.PUT })
 public  String editFlight(Model model, Long id) {
   Optional<Flight> flight = flightRepisotory.findById(id);
	 if (flight.isPresent()) {
	 Flight flight2 = flight.get();
	 long idExists = flight2.getId();
	 String code = flight2.getCode();
	 String timeArrival = flight2.getTimeArrival();
	 String departureTime = flight2.getDepartureTime();
	 String arrivalSite = flight2.getArrivalSite();
	 String siteDepart = flight2.getSiteDepart();

	 String pilotCode = flight2.getPilotCode();
	 String planeCode = flight2.getPlaneCode();

	 model.addAttribute("pilotCode", pilotCode);
	 model.addAttribute("planeCode", planeCode);

	 model.addAttribute("idExists", idExists);
	 model.addAttribute("code", code);
	 model.addAttribute("timeArrival", timeArrival);
	 model.addAttribute("departureTime", departureTime);
	 model.addAttribute("arrivalSite", arrivalSite);
	 model.addAttribute("siteDepart", siteDepart);

	 List<Pilot> pilots = pilotRepisotory.findAll();
	 model.addAttribute("pilots", pilots);

	 List<Plane> planes = planeRepisotory.findAll();
	 model.addAttribute("planes", planes);

   }
	model.addAttribute("flight", flight);
	return "editFlight";
 }

 @RequestMapping(value = "/admin/deletePlane", method = { RequestMethod.GET, RequestMethod.POST })
 public String deletePlane(Model model, long id) {
	planeRepisotory.deleteById(id);
	return "confirmdel";
 }

 @RequestMapping(value = "/")
 public String home(Model model) {

   List<Pilot> listPilots = pilotRepisotory.findAll();
   model.addAttribute("listPilots", listPilots);

   List<Plane> listPlanes = planeRepisotory.findAll();
   model.addAttribute("listPlanes", listPlanes);

   List<Flight> listFlights = flightRepisotory.findAll();
   model.addAttribute("listFlights", listFlights);
   return "index";
 }

 @RequestMapping(value = "/pilot")
 public String getMyVol(Model model, @RequestParam(name = "code", defaultValue = "") String code) {

 List<Flight> listFlights = flightRepisotory.getPiloteCode("%" + code + "%");
 model.addAttribute("listFlights", listFlights);
  return "pilot";
 }

 @RequestMapping(value = "/login")
 public String login() {
   return "login";
 }

 @RequestMapping(value = "/404")
 public String accessDneied() {
   return "404";
 }

}

Spring Security with Boot

Suppose that you want to prevent unauthorized users from viewing the greeting page at /home. As it is now, if visitors click the link on the home page, they see the greeting with no barriers to stop them. You need to add a barrier that forces the visitor to sign in before they can see that page.

You do that by configuring Spring Security in the application. If Spring Security is on the classpath, Spring Boot automatically secures all HTTP endpoints with “basic” authentication. However, you can further customize the security settings. The first thing you need to do is add Spring Security to the classpath.

Here, we are creating a SecurityConfig class

src/main/java/issamdrmas/gym/issamdrmas/SecurityConfig.java):





package com.issamdrmas.security;

import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.crypto.factory.PasswordEncoderFactories;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.context.annotation.Configuration;

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
	
 @Override
 protected void configure(AuthenticationManagerBuilder auth) 
	throws Exception {
 PasswordEncoder encoder = PasswordEncoderFactories.createDelegatingPasswordEncoder();
 auth.inMemoryAuthentication()
 .withUser("admin").password(encoder.encode("1234")).roles("USER","ADMIN");
    auth.inMemoryAuthentication()
    .withUser("pilot").password(encoder.encode("1234")).roles("USER");
 }
	 
 @Override
 protected void configure(HttpSecurity http) throws Exception {
  http.formLogin().loginPage("/login");
  http.csrf().disable();
  http.authorizeRequests().antMatchers("/pilot/*").hasRole("USER");
  http.authorizeRequests().antMatchers("/admin/*").hasRole("ADMIN");
  http.exceptionHandling().accessDeniedPage("/404");
 }
}

Static Css and Bootstrap

You cand dwonload its drom Drive Here


Introducing Thymeleaf

Thymeleaf is a Java library. It is an XML/XHTML/HTML5 template engine able to apply a set of transformations to template files in order to display data and/or text produced by your applications.


It is better suited for serving XHTML/HTML5 in web applications, but it can process any XML file, be it in web or in standalone applications.


The main goal of Thymeleaf is to provide an elegant and well-formed way of creating templates. In order to achieve this, it is based on XML tags and attributes that define the execution of predefined logic on the DOM (Document Object Model), instead of explicitly writing that logic as code inside the template.


Its architecture allows a fast processing of templates, relying on intelligent caching of parsed files in order to use the least possible amount of I/O operations during execution.


We need to create these pages HTML

- 404 - confirm - confirmdel - editFlight - editPilot - editPlane - form - index - login - pilot

Here, we are creating a 404 page

src/main/resource/templates/404.html





<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout">
<head>
<meta charset="utf-8" />
<title>404</title>
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css" th:href="@{css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" href="../static/css/style.css" th:href="@{/css/style.css}" />

<link rel="stylesheet" type="text/css" href="../static/css/fontawesome.min.css" th:href="@{css/fontawesome.min.css}" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>
<body>
<body>
 <div layout:fragment="content">
  <div class="container">
	<br/>
	<div class="panel panel-default>
	<div class="panel-heading" id="head-title"
	style="border-radius: 8px; padding: 6px 15px; color: #222f3e;">Page Not Found</div>
	<div class="panel-body">
	<h2 class="red">You are not authorized to access this resource</h2>
    </div>
   </div>
  </div>
 </div>
 
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
	integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
	crossorigin="anonymous"></script>
 <script
	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
	integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
	crossorigin="anonymous"></script>
 <script
	src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
	integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
	crossorigin="anonymous"></script>

</body>
</html>

Here, we are creating a Confirm page

src/main/resource/templates/confirm.html





<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout">
<head>
<meta charset="utf-8"/>
<title>Confirm</title>
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css" th:href="@{css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" href="../static/css/style.css" th:href="@{/css/style.css}" />

<link rel="stylesheet" type="text/css" href="../static/css/fontawesome.min.css" th:href="@{css/fontawesome.min.css}" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>
<body>
 <div layout:fragment="content">
  <div class="container">
   <br/>
  <div class="panel panel-default">
   <div class="panel-heading" id="head-title"></div>
    <div class="panel-body">
	 <h2 class="red" style="margin-top: 10px;">Added Successfully</h2>
	 <div class="col-lg-3">
	 <a style="color: #FFF; border-radius: 10px; background: #0097e6; font-size: 20px !important; font-family: initial;" class="nav-link" th:href="@{/admin/form}">Add new info</a>
     </div>
    <div class="col-lg-3">
   <a style="color: #FFF; margin-top: 10px; border-radius: 10px; background: #e67e22; font-size: 20px !important; font-family: initial;" class="nav-link" th:href="@{/}">Go to home</a>
    </div>
   </div>
  </div>
 </div>
</div>

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
	integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
	crossorigin="anonymous"></script>
 <script
	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
	integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
	crossorigin="anonymous"></script>
 <script
	src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
	integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
	crossorigin="anonymous"></script>

</body>
</html>

Here, we are creating a Confirm Delete page

src/main/resource/templates/confirm.html





<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout">
<head>
<meta charset="utf-8"/>
<title>Confirm Delete</title>
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css" th:href="@{css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" href="../static/css/style.css" th:href="@{/css/style.css}" />

<link rel="stylesheet" type="text/css" href="../static/css/fontawesome.min.css" th:href="@{css/fontawesome.min.css}" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>
<body>
 <div layout:fragment="content">
  <div class="container">
   <br/>
  <div class="panel panel-default">
   <div class="panel-heading" id="head-title"></div>
    <div class="panel-body">
	 <h2 class="red" style="margin-top: 10px;">Deleted Successfully</h2>
	 <div class="col-lg-3">
	 <a style="color: #FFF; border-radius: 10px; background: #0097e6; font-size: 20px !important; font-family: initial;" class="nav-link" th:href="@{/admin/form}">Add new info</a>
     </div>
    <div class="col-lg-3">
   <a style="color: #FFF; margin-top: 10px; border-radius: 10px; background: #e67e22; font-size: 20px !important; font-family: initial;" class="nav-link" th:href="@{/}">Go to home</a>
    </div>
   </div>
  </div>
 </div>
</div>

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
	integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
	crossorigin="anonymous"></script>
 <script
	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
	integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
	crossorigin="anonymous"></script>
 <script
	src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
	integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
	crossorigin="anonymous"></script>

</body>
</html>

Here, we are creating an EditFlight pages

src/main/resource/templates/editFlight.html





<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout">
<head>
<meta charset="utf-8"/>
<title>Edit Flight</title>
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css" th:href="@{css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" href="../static/css/style.css" th:href="@{/css/style.css}" />

<link rel="stylesheet" type="text/css" href="../static/css/fontawesome.min.css" th:href="@{css/fontawesome.min.css}" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body style="background-color: #f5f6fa;">

<nav style="padding: 11px 50px;" class="navbar navbar-expand-lg navbar-light bg-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
</button>
 <div class="collapse navbar-collapse" id="navbarText">
  <ul class="navbar-nav mr-auto">
   <li class="nav-item"><a style="color: #FFF; font-size: 22px !important; font-family: initial;" class="nav-link" th:href="@{/}">Home</a></li>
   <li class="nav-item"><a style="color: #FFF; font-size: 22px !important; font-family: initial;" class="nav-link">|</a></li>
   <li class="nav-item"><a style="color: #FFF; font-size: 20px !important; font-family: initial;" class="nav-link" th:href="@{/admin/form}">Add Pilot <span class="sr-only">(current)</span></a></li>
</ul>
<span class="navbar-text"> <a style="color: #FFF; font-size: 20px !important; font-family: initial;" th:href="@{/login?logout}" th:inline="text"> Logout [[${#httpServletRequest.remoteUser}]] </a> </span>
</div>
</nav>


<div id="addInfo" style="padding: 30px 0; color: #ffffff">
 <div class="container">
  <div class="row">
   <div class="col-lg-6 containers" <div style="border-right: 1px solid #6c6c6c;">
   <h6 style="background: #2980b9; padding: 10px; border-radius: 5px;">Edit Flight</h6>
   <form th:action="@{/admin/saveFlight}" method="post" style="background: #dfe4ea; border: 1px solid #c8c8c8; margin-top: -7px; padding: 16px; border-radius: 5px; color: aliceblue;">

  <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">idExists</label>
   <div class="col-sm-10"> <input class="form-control" type="text" name="id" th:value="${idExists}" placeholder="idExists" readonly disabled /></div>
 </div>

 <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">code</label>
  <div class="col-sm-10"> class="form-control" type="text" name="code" th:value="${code}" placeholder="Code" /></div>
 </div>
						
 <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">Site depart</label>
 <div class="col-sm-10">  <input class="form-control" type="text" name="siteDepart" th:value="${siteDepart}" placeholder="Site Depart"/> </div>
 </div>
						
 <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">Arrival Site</label>
  <div class="col-sm-10"> <input class="form-control" type="text" nameclass="form-control" type="text" name="arrivalSite" th:value="${arrivalSite}" placeholder="Arrival Site"/></div>
 </div>
						
 <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">Departure Time</label>
<div class="col-sm-10"> <input class="form-control" type="text" name="departureTime" th:value="${departureTime}" placeholder="Departure Time" /> </div>
 </div>

 <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">Time Arrival</label>
 <div class="col-sm-10"> <input class="form-control" type="text" name="timeArrival" th:value="${timeArrival}" placeholder="Time Arrival" /> </div>
 </div>

 <div class="form-group"><label for="pilot" style= "color: #57606f; margin-left: 4px;">Choose Pilot</label> 
 <select id="pilot" name="pilotCode">
  <option th:each="pilot : ${pilots}" th:value="${pilot.code}" th:text="${pilot.code}"></option>
 </select>
 </div>

<div class="form-group"><label for="plane" style="color: #57606f; margin-left: 4px;">Choose Plane</label> 
<select id="plane" name="planeCode">
 <option th:each="plane : ${planes}" th:value="${plane.code}" th:text="${plane.code}"></option>
</select>
 </div>

 <button style="color: #f7f1e3; background-color: #2980b9; ! important; color: #FFF; padding: 5px 20px; border-radius: 5px;" type="submit">Save</button>
 </form>
         </div>
      </div>
    </div>
  </div>

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
	integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
	crossorigin="anonymous"></script>
 <script
	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
	integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
	crossorigin="anonymous"></script>
 <script
	src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
	integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
	crossorigin="anonymous"></script>

</body>
</html>

Here, we are creating an Editpilot page

src/main/resource/templates/editPilot.html





<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout">
<head>
<meta charset="utf-8"/>
<title>Edit Flight</title>
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css" th:href="@{css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" href="../static/css/style.css" th:href="@{/css/style.css}" />

<link rel="stylesheet" type="text/css" href="../static/css/fontawesome.min.css" th:href="@{css/fontawesome.min.css}" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body style="background-color: #f5f6fa;">

<nav style="padding: 11px 50px;" class="navbar navbar-expand-lg navbar-light bg-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
</button>
 <div class="collapse navbar-collapse" id="navbarText">
  <ul class="navbar-nav mr-auto">
   <li class="nav-item"><a style="color: #FFF; font-size: 22px !important; font-family: initial;" class="nav-link" th:href="@{/}">Home</a></li>
   <li class="nav-item"><a style="color: #FFF; font-size: 22px !important; font-family: initial;" class="nav-link">|</a></li>
   <li class="nav-item"><a style="color: #FFF; font-size: 20px !important; font-family: initial;" class="nav-link" th:href="@{/admin/form}">Add Pilot <span class="sr-only">(current)</span></a></li>
</ul>
<span class="navbar-text"> <a style="color: #FFF; font-size: 20px !important; font-family: initial;" th:href="@{/login?logout}" th:inline="text"> Logout [[${#httpServletRequest.remoteUser}]] </a> </span>
</div>
</nav>


<div id="addInfo" style="padding: 30px 0; color: #ffffff">
 <div class="container">
  <div class="row">
   <div class="col-lg-6 containers" <div style="border-right: 1px solid #6c6c6c;">
   <h6 style="background: #2980b9; padding: 10px; border-radius: 5px;">Edit Pilot</h6>
           <form th:action="@{/admin/savePilot}" method="Post" style="background: #dfe4ea; border: 1px solid #c8c8c8; margin-top: -7px; padding: 16px; border-radius: 5px; color: aliceblue;">

  <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">idExists</label>
   <div class="col-sm-10"> <input class="form-control" type="text" name="id" th:value="${idExists}" placeholder="idExists" readonly disabled /></div>
 </div>
 
  <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">code</label>
  <div class="col-sm-10"> class="form-control" type="text" name="code" th:value="${code}" placeholder="Code" /></div>
 </div>
 
  <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">name</label>
  <div class="col-sm-10"> class="form-control" type="text" name="name" th:value="${name}" placeholder="Name" /></div>
 </div>
 
  <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">code</label>
  <div class="col-sm-10"> class="form-control" type="text" site="site" th:value="${site}" placeholder="Site" /></div>
 </div>

 <button style="color: #f7f1e3; background-color: #2980b9; ! important; color: #FFF; padding: 5px 20px; border-radius: 5px;" type="submit">Save</button>
 
          </form>
         </div>
      </div>
    </div>
  </div>

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
	integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
	crossorigin="anonymous"></script>
 <script
	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
	integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
	crossorigin="anonymous"></script>
 <script
	src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
	integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
	crossorigin="anonymous"></script>

</body>
</html>

Here, we are creating an Editplane Page

src/main/resource/templates/editPlane.html





<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout">
<head>
<meta charset="utf-8"/>
<title>Edit Flight</title>
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css" th:href="@{css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" href="../static/css/style.css" th:href="@{/css/style.css}" />

<link rel="stylesheet" type="text/css" href="../static/css/fontawesome.min.css" th:href="@{css/fontawesome.min.css}" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body style="background-color: #f5f6fa;">

<nav style="padding: 11px 50px;" class="navbar navbar-expand-lg navbar-light bg-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
</button>
 <div class="collapse navbar-collapse" id="navbarText">
  <ul class="navbar-nav mr-auto">
   <li class="nav-item"><a style="color: #FFF; font-size: 22px !important; font-family: initial;" class="nav-link" th:href="@{/}">Home</a></li>
   <li class="nav-item"><a style="color: #FFF; font-size: 22px !important; font-family: initial;" class="nav-link">|</a></li>
   <li class="nav-item"><a style="color: #FFF; font-size: 20px !important; font-family: initial;" class="nav-link" th:href="@{/admin/form}">Add Pilot <span class="sr-only">(current)</span></a></li>
</ul>
<span class="navbar-text"> <a style="color: #FFF; font-size: 20px !important; font-family: initial;" th:href="@{/login?logout}" th:inline="text"> Logout [[${#httpServletRequest.remoteUser}]] </a> </span>
</div>
</nav>

<div id="addInfo" style="padding: 30px 0; color: #ffffff">
 <div class="container">
  <div class="row">
   <div class="col-lg-6 containers" <div style="border-right: 1px solid #6c6c6c;">
   <h6 style="background: #2980b9; padding: 10px; border-radius: 5px;">Edit Pilot</h6>
           <form th:action="@{/admin/savePlane}" method="Post" style="background: #dfe4ea; border: 1px solid #c8c8c8; margin-top: -7px; padding: 16px; border-radius: 5px; color: aliceblue;">

  <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">idExists</label>
   <div class="col-sm-10"> <input class="form-control" type="text" name="id" th:value="${idExists}" placeholder="idExists" readonly disabled /></div>
 </div>
 
  <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">code</label>
  <div class="col-sm-10"> class="form-control" type="text" name="code" th:value="${code}" placeholder="Code" /></div>
 </div>
 
  <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">constructor</label>
  <div class="col-sm-10"> class="form-control" type="text" name="constructor" th:value="${constructor}" placeholder="Constructor" /></div>
 </div>
 
  <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">model</label>
  <div class="col-sm-10"> class="form-control" type="text" name="model" th:value="${model}" placeholder="Model" /></div>
 </div>
 
   <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">site</label>
  <div class="col-sm-10"> class="form-control" type="text" name="site" th:value="${site}" placeholder="Site" /></div>
 </div>
 
    <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">capacity</label>
  <div class="col-sm-10"> class="form-control" type="number" name="capacity" th:value="${capacity}" placeholder="Capacity" /></div>
 </div>
 
            <button style="color: #f7f1e3; background-color: #2980b9; ! important; color: #FFF; padding: 5px 20px; border-radius: 5px;" type="submit">Save</button>
 
          </form>
         </div>
      </div>
    </div>
  </div>

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
	integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
	crossorigin="anonymous"></script>
 <script
	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
	integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
	crossorigin="anonymous"></script>
 <script
	src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
	integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
	crossorigin="anonymous"></script>

</body>
</html>

Here, we are creating a Form Page

src/main/resource/templates/form.html





<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout">
<head>
<meta charset="utf-8"/>
<title>Form add</title>
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css" th:href="@{css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" href="../static/css/style.css" th:href="@{/css/style.css}" />

<link rel="stylesheet" type="text/css" href="../static/css/fontawesome.min.css" th:href="@{css/fontawesome.min.css}" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>
<body style="background-color: #f5f6fa;">

<nav style="padding: 11px 50px;" class="navbar navbar-expand-lg navbar-light bg-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
</button>
 <div class="collapse navbar-collapse" id="navbarText">
  <ul class="navbar-nav mr-auto">
   <li class="nav-item"><a style="color: #FFF; font-size: 22px !important; font-family: initial;" class="nav-link" th:href="@{/}">Home</a></li>
   <li class="nav-item"><a style="color: #FFF; font-size: 22px !important; font-family: initial;" class="nav-link">|</a></li>
   <li class="nav-item"><a style="color: #FFF; font-size: 20px !important; font-family: initial;" class="nav-link" th:href="@{/admin/form}">Add Flight, Pilot or Plane<span class="sr-only">(current)</span></a></li>
</ul>
<span class="navbar-text"> <a style="color: #FFF; font-size: 20px !important; font-family: initial;" th:href="@{/login?logout}" th:inline="text"> Logout [[${#httpServletRequest.remoteUser}]] </a> </span>
</div>
</nav>

<div id="addInfo" style="padding: 30px 0; color: #ffffff">
 <div class="container">
  <div class="row">
   <div class="col-lg-4 containers" <div style="border-right: 1px solid #6c6c6c;">
   <h6 style="background: #dfe4ea; padding: 10px; border-radius: 5px;">Add Pilot</h6>
           <form th:action="@{/admin/savePilot}" method="Post" style="background: #dfe4ea; border: 1px solid #c8c8c8; margin-top: -7px; padding: 16px; border-radius: 5px; color: aliceblue;">
        
  <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">code</label>
  <div class="col-sm-10"> class="form-control" type="text" name="code" th:value="${pilot.code}" placeholder="Code" /></div>
 </div>
 
  <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">name</label>
  <div class="col-sm-10"> class="form-control" type="text" name="name" th:value="${pilot.name}" placeholder="Name" /></div>
 </div>
 
  <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">code</label>
  <div class="col-sm-10"> class="form-control" type="text" site="site" th:value="${pilot.site}" placeholder="Site" /></div>
 </div>  
</form>
 </div>

 <div class="col-lg-4 containers" <div style="border-right: 1px solid #6c6c6c;">
   <h6 style="background: #dfe4ea; padding: 10px; border-radius: 5px;">Add Pilot</h6>
           <form th:action="@{/admin/savePlane}" method="Post" style="background: #dfe4ea; border: 1px solid #c8c8c8; margin-top: -7px; padding: 16px; border-radius: 5px; color: aliceblue;">
 
  <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">code</label>
  <div class="col-sm-10"> class="form-control" type="text" name="code" th:value="${plane.code}" placeholder="Code" /></div>
 </div>
 
  <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">constructor</label>
  <div class="col-sm-10"> class="form-control" type="text" name="constructor" th:value="${plane.constructor}" placeholder="Constructor" /></div>
 </div>
 
  <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">model</label>
  <div class="col-sm-10"> class="form-control" type="text" name="model" th:value="${plane.model}" placeholder="Model" /></div>
 </div>
 
   <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">site</label>
  <div class="col-sm-10"> class="form-control" type="text" name="site" th:value="${plane.site}" placeholder="Site" /></div>
 </div>
 
    <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">capacity</label>
  <div class="col-sm-10"> class="form-control" type="number" name="capacity" th:value="${plane.capacity}" placeholder="Capacity" /></div>
 </div>
 
 <button style="color: #f7f1e3; background-color: #8e44ad; ! important; color: #FFF; padding: 5px 20px; border-radius: 5px;" type="submit">Save</button>
 </form>
</div>

   <div class="col-lg-6 containers" <div style="border-right: 1px solid #6c6c6c;">
   <h6 style="background: #dfe4ea; padding: 10px; border-radius: 5px;">Add Flight</h6>
   <form th:action="@{/admin/saveFlight}" method="post" style="background: #dfe4ea; border: 1px solid #c8c8c8; margin-top: -7px; padding: 16px; border-radius: 5px; color: aliceblue;">

 <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">code</label>
  <div class="col-sm-10"> class="form-control" type="text" name="code" th:value="${flight.code}" placeholder="Code" /></div>
 </div>
						
 <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">Site depart</label>
 <div class="col-sm-10">  <input class="form-control" type="text" name="siteDepart" th:value="${flight.siteDepart}" placeholder="Site Depart"/> </div>
 </div>
						
 <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">Arrival Site</label>
  <div class="col-sm-10"> <input class="form-control" type="text" nameclass="form-control" type="text" name="arrivalSite" th:value="${flight.arrivalSite}" placeholder="Arrival Site"/></div>
 </div>
						
 <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">Departure Time</label>
<div class="col-sm-10"> <input class="form-control" type="text" name="departureTime" th:value="${flight.departureTime}" placeholder="Departure Time" /> </div>
 </div>

 <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">Time Arrival</label>
 <div class="col-sm-10"> <input class="form-control" type="text" name="timeArrival" th:value="${flight.timeArrival}" placeholder="Time Arrival" /> </div>
 </div>

 <div class="form-group"><label for="pilot" style= "color: #57606f; margin-left: 4px;">Choose Pilot</label> 
 <select id="pilot" name="pilotCode">
  <option th:each="pilot : ${pilots}" th:value="${pilot.code}" th:text="${pilot.code}"></option>
 </select>
 </div>

<div class="form-group"><label for="plane" style="color: #57606f; margin-left: 4px;">Choose Plane</label> 
<select id="plane" name="planeCode">
 <option th:each="plane : ${planes}" th:value="${plane.code}" th:text="${plane.code}"></option>
</select>
 </div>

 <button style="color: #f7f1e3; background-color: #dfe4ea; ! important; color: #FFF; padding: 5px 20px; border-radius: 5px;" type="submit">Save</button>
 </form>
</div>         
         
      </div>
    </div>
  </div>

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
	integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
	crossorigin="anonymous"></script>
 <script
	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
	integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
	crossorigin="anonymous"></script>
 <script
	src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
	integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
	crossorigin="anonymous"></script>

</body>
</html>

Here, we are creating an Index Page

src/main/resource/templates/index.html





<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout">
<head>
<meta charset="utf-8"/>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css" th:href="@{css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" href="../static/css/style.css" th:href="@{/css/style.css}" />

<link rel="stylesheet" type="text/css" href="../static/css/fontawesome.min.css" th:href="@{css/fontawesome.min.css}" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>
<body style="background-color: #f5f6fa;">

<nav style="padding: 11px 50px;" class="navbar navbar-expand-lg navbar-light bg-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
</button>
 <div class="collapse navbar-collapse" id="navbarText">
  <ul class="navbar-nav mr-auto">
   <li class="nav-item"><a style="color: #FFF; font-size: 22px !important; font-family: initial;" class="nav-link" th:href="@{/}">Home</a></li>
   <li class="nav-item"><a style="color: #FFF; font-size: 22px !important; font-family: initial;" class="nav-link">|</a></li>
   <li class="nav-item"><a style="color: #FFF; font-size: 20px !important; font-family: initial;" class="nav-link" th:href="@{/admin/form}">Add Flight, Pilot or Plane<span class="sr-only">(current)</span></a></li>
</ul>
<span class="navbar-text"> <a style="color: #FFF; font-size: 20px !important; font-family: initial;" th:href="@{/login?logout}" th:inline="text"> Logout [[${#httpServletRequest.remoteUser}]] </a> </span>
 <form class="form-inline my-2 my-lg-0" th:action="@{/pilot}" method="get">
   <input  class="form-control mr-sm-3" th:value="${code}" name="code" type="search" placeholder="Find my flights" aria-label="Search">
   <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
 </form>
</div>
</nav>

 <div class="container">    
  <h6 class="h2" style="border-bottom: 1px solid #ccc;">Brief Statement Suite</h6>
</div> 

 <div class="col-lg-4" style="border-right: 1px solid #ccc;">
  <p style="font-size: 16px; padding-left: 10px; color: #1e272e;"> <i class="fas fa-list-ul"></i> The list of pilots: </p>

 <table class="table table-striped" style="background: #ffffff; color: #1e272e; border: 1px solid #d7d7d7; font-size: 12px; font-family: initial;">
  <thead style="background: #2980b9; color: #ffffff;">
   <tr>
	<th scope="col">Code</th>
	<th scope="col">Name</th>
	<th scope="col">Site</th>
	<th scope="col">Edit</th>
	<th scope="col">Delete</th>
  </tr>
 </thead>
 <tbody>
  <tr th:each="p : ${listPilots}">
	<td th:text="${p.code}"></td>
	<td th:text="${p.name}"></td>
	<td th:text="${p.site}"></td>
    <td><a th:href="@{/admin/editPilot(id=${p.id})}">Edit</a></td>
    <td><a onClick="return confirm('Are you sure?')" th:href="@{/admin/deletePilot(id=${p.id})}">Delete</a></td>
  </tr>
 </tbody>
 </table>
</div>

 <div class="col-lg-4" style="border-right: 1px solid #ccc;">
  <p style="font-size: 16px; padding-left: 10px; color: #1e272e;"> <i class="fas fa-list-ul"></i> The list of planes: </p>

 <table class="table table-striped" style="background: #ffffff; color: #1e272e; border: 1px solid #d7d7d7; font-size: 12px; font-family: initial;">
  <thead style="background: #8e44ad; color: #ffffff;">
   <tr>
	<th scope="col">Code</th>
	<th scope="col">Constructor</th>
	<th scope="col">Model</th>
	<th scope="col">Capacity</th>
	<th scope="col">Site</th>
        <th scope="col">Edit</th>
	<th scope="col">Delete</th>
  </tr>
 </thead>
 <tbody>
  <tr th:each="p : ${listPlanes}">
  	<td th:text="${p.code}"></td>
	<td th:text="${p.constructor}"></td>
	<td th:text="${p.model}"></td>
	<td th:text="${p.capacity}"></td>
	<td th:text="${p.site}"></td>
    <td><a th:href="@{/admin/editPlane(id=${p.id})}">Edit</a></td>
    <td><a onClick="return confirm('Are you sure?')" th:href="@{/admin/deletePlane(id=${p.id})}">Delete</a></td>
  </tr>  
   </tbody>
 </table>
</div>

<div class="col-lg-4" style="border-right: 1px solid #ccc;">
  <p style="font-size: 16px; padding-left: 10px; color: #1e272e;"> <i class="fas fa-list-ul"></i> The list of flights: </p>

 <table class="table table-striped" style="background: #ffffff; color: #1e272e; border: 1px solid #d7d7d7; font-size: 12px; font-family: initial;">
  <thead style="background: #d35400; color: #ffffff;">
   <tr>
	<th scope="col">Code</th>
	<th scope="col">Departure site</th>
	<th scope="col">Departure time</th>
	<th scope="col">Arrival Time</th>
	<th scope="col">Pilot</th>
    	<th scope="col">Plane</th>
        <th scope="col">Edit</th>
	<th scope="col">Delete</th>
  </tr>
 </thead>
 <tbody>
  <tr th:each="p : ${listFlights}">
  	<td th:text="${p.code}"></td>
	<td th:text="${p.arrivalSite}"></td>
	<td th:text="${p.departureTime}"></td>
	<td th:text="${p.timeArrival}"></td>
        <td th:text="${p.pilotCode}"></td>
	<td th:text="${p.planeCode}"></td>
    <td><a th:href="@{/admin/editFlight(id=${p.id})}">Edit</a></td>
    <td><a onClick="return confirm('Are you sure?')" th:href="@{/admin/deleteFlight(id=${p.id})}">Delete</a></td>
  </tr>   
  </tbody>
 </table>
</div>

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
	integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
	crossorigin="anonymous"></script>
 <script
	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
	integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
	crossorigin="anonymous"></script>
 <script
	src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
	integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
	crossorigin="anonymous"></script>

</body>
</html>

Here, we are creating a Login Page

src/main/resource/templates/404.html





<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout">
<head>
<meta charset="utf-8"/>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css" th:href="@{css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" href="../static/css/style.css" th:href="@{/css/style.css}" />

<link rel="stylesheet" type="text/css" href="../static/css/fontawesome.min.css" th:href="@{css/fontawesome.min.css}" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
 <div class="col-md-6 col-md-offset-3 col-xs-12"><br/>
  <div class="red" th:if="${param.error}"><span> Incorrect user name or password </span></div>
   <div class="green" th:if="${param.logout}"> <span> You have been logged out </span></div>
    <div class="panel panel-default">
    <div class="panel-heading" id="head-title">Authentication</div>
      <div class="panel-body">
      <form th:action="@{/login}" method="post">
	    <div class="form-group"><label class="form-label">Username:</label> <input class="form-control" type="text" name="username" /></div>
	    <div class="form-group"><label class="form-label">Password:</label> <input class="form-control" type="password" name="password" /></div>
        <button class="btn btn-primary" style="color: #f7f1e3;" type="submit">Login</button>
	</form>
   </div>
  </div>
 </div>
</div>

</head>
<body style="background-color: #f5f6fa;">

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
	integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
	crossorigin="anonymous"></script>
 <script
	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
	integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
	crossorigin="anonymous"></script>
 <script
	src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
	integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
	crossorigin="anonymous"></script>

</body>
</html>

Here, we are creating a Pilot Page

src/main/resource/templates/pilot.html





<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout">
<head>
<meta charset="utf-8"/>
<title>Form add</title>
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css" th:href="@{css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" href="../static/css/style.css" th:href="@{/css/style.css}" />

<link rel="stylesheet" type="text/css" href="../static/css/fontawesome.min.css" th:href="@{css/fontawesome.min.css}" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>
<body style="background-color: #f5f6fa;">

<nav style="padding: 11px 50px;" class="navbar navbar-expand-lg navbar-light bg-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
</button>
 <div class="collapse navbar-collapse" id="navbarText">
  <ul class="navbar-nav mr-auto">
   <li class="nav-item"><a style="color: #FFF; font-size: 22px !important; font-family: initial;" class="nav-link" th:href="@{/}">Home</a></li>
   <li class="nav-item"><a style="color: #FFF; font-size: 22px !important; font-family: initial;" class="nav-link">|</a></li>
   <li class="nav-item"><a style="color: #FFF; font-size: 20px !important; font-family: initial;" class="nav-link" th:href="@{/admin/form}">Add Flight, Pilot or Plane<span class="sr-only">(current)</span></a></li>
</ul>
<span class="navbar-text"> <a style="color: #FFF; font-size: 20px !important; font-family: initial;" th:href="@{/login?logout}" th:inline="text"> Logout [[${#httpServletRequest.remoteUser}]] </a> </span>
</div>
</nav>

 <div class="container" style="border-right: 1px solid #ccc; border-left: 1px solid #ccc;">    
  <h6 class="h2" style="font-size: 16px; padding-left: 10px; color: #1e272e;">My Flight</h6>
  
   <table class="table table-striped" style="background: #ffffff; color: #1e272e; border: 1px solid #d7d7d7; font-size: 12px; font-family: initial;">
  <thead style="background: #2980b9; color: #ffffff;">
   <tr>
	<th scope="col">Code</th>
	<th scope="col">Departure site</th>
	<th scope="col">Departure time</th>
	<th scope="col">Arrival Time</th>
	<th scope="col">Pilot</th>
    	<th scope="col">Plane</th>
        <th scope="col">Edit</th>
	<th scope="col">Delete</th>
  </tr>
 </thead>
 <tbody>
  <tr th:each="p : ${listFlights}">
  	<td th:text="${p.code}"></td>
	<td th:text="${p.arrivalSite}"></td>
	<td th:text="${p.departureTime}"></td>
	<td th:text="${p.timeArrival}"></td>
        <td th:text="${p.pilotCode}"></td>
	<td th:text="${p.planeCode}"></td>
    <td><a th:href="@{/admin/editFlight(id=${p.id})}">Edit</a></td>
    <td><a onClick="return confirm('Are you sure?')" th:href="@{/admin/deleteFlight(id=${p.id})}">Delete</a></td>
  </tr>   
  </tbody>
 </table>
  
  </div>

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
	integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
	crossorigin="anonymous"></script>
 <script
	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
	integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
	crossorigin="anonymous"></script>
 <script
	src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
	integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
	crossorigin="anonymous"></script>

</body>
</html>

AeroportApplication

@AeroportApplication and its use in a simple Spring Boot application. We use the @SpringBootApplication annotation in our Application or Main class to enable a host of features, e.g. Java-based Spring configuration, component scanning, and in particular for enabling Spring


src/main/java/com/issamdrmas/AeroportApplication.java):





package com.shoppingapp;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@ComponentScan
@SpringBootApplication
public class AeroportApplication {

 public static void main(String[] args) {
   SpringApplication.run(AeroportApplication.class, args);		
   System.out.println("App started....");
  }

}

Conclusion

Now we have an overview of Spring Boot example when building a @RestController API.

We also take a look at client-server architecture for REST API using Spring Web MVC & Spring Data JPA, as well, Given the fact that XHTML5 is just XML-formed HTML5 served with the application/xhtml+xml content type, we could also say that Thymeleaf supports XHTML5.




Tags

You may like these posts

Post a Comment

Previous Post Next Post


Follow us on facebook