Aşağıdaki gibi bir Login Page sayfası oluşturup, girilen verileri gösteren Spring uygulaması yapacağız.
Önce Gerekli dependency leri https://start.spring.io/ sayfasından alıyoruz:
- Spring Boot Dev Tools
- Spring Web
- Thymeleaf
dizin yapısı şu şekilde olacaktır:
LoginModel.java dosyasını aşağıdaki gibi oluşturuyoruz:
önce değişkenleri oluşturup getter ve setter ları ve sonda da toString() işlemlerini uyguluyoruz.
private String username;
private String password;
— LoginModel.java —
package login3.login3.model;
public class LoginModel {
private String username;
private String password;
@Override
public String toString() {
return "LoginModal{" +
"username='" + username + '\'' +
", password='" + password + '\'' +
'}';
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
— LoginController.java —
package login3.login3.controller;
import login3.login3.model.LoginModel;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/login")
public class LoginController {
@GetMapping("/")
public String displayLoginPage(Model model) {
model.addAttribute("loginModel", new LoginModel());
return "loginform";
}
@PostMapping("/processLogin")
public String processLogin(LoginModel loginModel, Model model) {
model.addAttribute("loginModel", loginModel);
return "loginresults";
}
}— LoginForm.html —
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Login</title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1 style="margin-left:7em">Login Page</h1>
<div class="container">
<div class="row">
<div class="col-md-6"> <!-- This makes it take up half the container width -->
<form action="#" method="post" th:action="@{processLogin}" th:object="${loginModel}">
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input th:field="*{username}" type="text" class="form-control" id="username" aria-describedby="usernameHelp">
<div id="usernameHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input th:field="*{password}" type="password" class="form-control" id="password" max-lengt="25">
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</div>
</div>
</body>
</html>LoginForm.html dosyasındaki Bootstrap dosyalarını(css ve js) https://getbootstrap.com/ sayfasından indiriyoruz. Sonrada Uygulama dosyalarındaki static klasörüne ekliyoruz.
— loginresults.html —
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Login Results</title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container my-5">
<h2>Login Results</h2>
<p>Username: <span th:text="${loginModel.username}"></span></p>
<p>Password: <span th:text="${loginModel.password}"></span></p>
<form th:action="@{/login/}" method="get">
<button type="submit" class="btn btn-primary">Logout</button>
</form>
</div>
</body>
</html>— application.properties —
spring.application.name=login3
server.port=2022
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.enabled=true
Son olarak uygulamadaki “Login3Application.java” dosyasını Run Ettirdiğimizde (Tetiklediğimizde) uygulamamız çalışır. Tarayıcımızın url kısmına “http://localhost:2022/login/ ” yazarak görebiliriz.
Login butonuna basınca:
