ECE366 - Lesson 6
Intro to Javascript and React
Instructor: Professor Hong
## What is HTML?
- HyperText Markup Language (not a programming language)
- Standard markup language for website creation
- Maintained World Wide Web Consortium (W3C)
- Parts - opening tag, content, closing tag
## New pom.xml Dependency
- Building upon last week's JPA example
```
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
```
- Thymeleaf templates allow you to create basic web applications
## Web Controller
web/PlayerController.java
```
package com.ece366.rpsjpa.web;
import com.ece366.rpsjpa.business.PlayerService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
@RequestMapping("/players")
public class PlayerController {
private final PlayerService playerService;
public PlayerController(PlayerService userService) {
this.playerService = userService;
}
@GetMapping("/getAllPlayers")
public String getPlayers(Model model){
model.addAttribute("players", this.playerService.getPlayers());
return "rps-players";
}
}
```
## Webservice API
webservice/WebserviceController
```java
import com.ece366.rpsjpa.business.PlayerService;
import com.ece366.rpsjpa.data.Player;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/api")
public class WebserviceController {
private final PlayerService playerService;
public WebserviceController(PlayerService playerService) {
this.playerService = playerService;
}
@GetMapping("/testPlayer")
public String getTestPlayer() {
return "TEST PLAYER";
}
@GetMapping("/players")
public List<Player> getPlayers(){
System.out.println("getPlayers");
return this.playerService.getPlayers();
}
}
```
Add `@RequestMapping("/api")` annotation
## Index.html
resources/static/index.html
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RPS</title>
</head>
<body>
<h1>Welcome to RPS</h1>
<p><a href="/players/getAllPlayers">Players</a></p>
</body>
</html>
```
## rps-users.html
resources/templates/rps-users.html
```
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>RPS: Players</title>
</head>
<body>
<h1>RPS Players</h1>
<table>
<tr>
<td>Player ID</td>
<td>Player Name</td>
<td>Password</td>
<td>Total Wins</td>
</tr>
<tr th:each="player: ${players}">
<td th:text="${player.playerId}">PlayerId</td>
<td th:text="${player.userName}">UserName</td>
<td th:text="${player.password}">Password</td>
<td th:text="${player.totalGames}">TotalGames</td>
</tr>
</table>
</body>
</html>
```
## Running the Site
```
localhost:8080
localhost:8080/players/getAllPlayers
localhost:8080/api/players
```
You can read more here: [https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html](https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html)
## Deleting a Player - rps-players.html
```
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>RPS: Players</title>
</head>
<body>
<h1>RPS Players</h1>
<table>
<tr>
<td>Player ID</td>
<td>Player Name</td>
<td>Password</td>
<td>Total Wins</td>
<th>Actions</th>
</tr>
<tr th:each="player: ${players}">
<td th:text="${player.playerId}">PlayerId</td>
<td th:text="${player.userName}">UserName</td>
<td th:text="${player.password}">Password</td>
<td th:text="${player.totalGames}">TotalGames</td>
<td>
<form th:action="@{/players/delete/{id}(id=${player.playerId})}" method="post">
<button type="submit">Delete</button>
</form>
</td>
</tr>