Spring Boot ve Thymeleaf ile MVC Projesi

By Cem Dırman On Jan 15, 2024

Spring Boot ve Thymeleaf kullanarak MVC projesi oluşturacağız. Bu projede dosya yükleme ekranı oluşturacağız.

Spring Boot 3.2.0
Gradle
Java 21
Thymeleaf

Benim HTML, CSS ile aram iyi olmadığı için aşağıdaki Bootstrap temasını kullanıyor olacağım. Siz kendiniz yazabilirsiniz ya da benim gibi ücretsiz temaları ihtiyacınıza göre kullanabilirsiniz.

https://getbootstrap.com/docs/4.0/examples/dashboard/

Aynı şekilde ihtiyacımız olacak olan bootstrap, javascript kütüphanelerini projemize dahil etmemiz gerekiyor. Siz gerekli kütüphaneleri indirip de projenize ekleyebilirsiniz.

Aşağıdaki bağımlılıklarımızı projemize ekleyerek başlıyoruz.



 implementation 'org.springframework.boot:spring-boot-starter-web'

 implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

 implementation 'org.webjars:bootstrap:5.3.0'
 
 implementation 'org.webjars:jquery:3.6.4'
  
 implementation 'org.webjars:webjars-locator-core:0.50'

implementation 'org.springframework.boot:spring-boot-starter-web'

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

implementation 'org.webjars:bootstrap:5.3.0'

implementation 'org.webjars:jquery:3.6.4'

implementation 'org.webjars:webjars-locator-core:0.50'

Controller



@RequiredArgsConstructor
@Controller
public class DocumentController {

    private final DocumentService documentService;

    // Dosya yükleme sayfasını getirir
    @GetMapping("/files/new")
    public String newFile() {
        return "upload_file";
    }

    @PostMapping("/files/upload")
    public String upload(Model model, @RequestParam("file") MultipartFile file) {
        String message = "";

        if (file.isEmpty()) {
            logger.log(Level.INFO, "file is empty");
            message = "Lütfen dosya seçiniz";
            model.addAttribute("message", message);
            return "upload_form";
        }
        try {
            documentService.upload(file);
            message = "Dosya başarıyla yüklendi: " + file.getOriginalFilename();
            model.addAttribute("message", message);
        } catch (Exception exception) {
            message = "Dosya yüklenirken hata gerçekleşti: " + file.getOriginalFilename() + ". Error: " + exception.getMessage();
            model.addAttribute("message", message);
        }
        return "upload_form";
    }

}

@RequiredArgsConstructor

@Controller

public class DocumentController {

private final DocumentService documentService;

// Dosya yükleme sayfasını getirir

@GetMapping("/files/new")

public String newFile() {

return "upload_file";

}

@PostMapping("/files/upload")

public String upload(Model model, @RequestParam("file") MultipartFile file) {

String message = "";

if (file.isEmpty()) {

logger.log(Level.INFO, "file is empty");

message = "Lütfen dosya seçiniz";

model.addAttribute("message", message);

return "upload_form";

}

try {

documentService.upload(file);

message = "Dosya başarıyla yüklendi: " + file.getOriginalFilename();

model.addAttribute("message", message);

} catch (Exception exception) {

message = "Dosya yüklenirken hata gerçekleşti: " + file.getOriginalFilename() + ". Error: " + exception.getMessage();

model.addAttribute("message", message);

}

return "upload_form";

}

HTML

Dosya yükleme formu için resources -> templates -> upload_file.html isminde bir dosya oluşturalım.

upload_file.html



<!doctype html>
<html lang="tr" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Bilisimio / Spring Boot - Thymeleaf</title>

    <link th:href="@{/webjars/bootstrap/5.3.0/css/bootstrap.min.css}" rel="stylesheet">

    <script th:src="@{/webjars/jquery/3.6.4/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/5.3.0/js/bootstrap.min.js}"></script>
</head>

<body>

<div class="container-fluid">
    <div class="row">

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
        
            <div class="container" style="max-width: 500px">

                <form id="uploadForm" method="post" th:action="@{/files/upload}" enctype="multipart/form-data">
                    <input id="input-file" type="file" name="file"/>

                    <button class="btn btn-sm btn-outline-success float-right" type="submit">
                        Dosya Yükle
                    </button>
                </form>

                <div th:if="${message != null}"
                     class="alert alert-secondary alert-dismissible fade show text-center message mt-3"
                     role="alert">
                    [[${message}]]
                    <button type="button" class="close btn-sm" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
            </div>
        </main>
    </div>
</div>

</body>
</html>

<!doctype html>

<head>

<title>Bilisimio / Spring Boot - Thymeleaf</title>

</head>

<body>

Dosya Yükle

</button>

</form>

<div th:if="${message != null}"

class="alert alert-secondary alert-dismissible fade show text-center message mt-3"

role="alert">

[[${message}]]

</button>

</div>

</main>

</div>

</body>

</html>

Not: Öncelikle servis katmanını eklemeyeceğim çünkü önceki yazılarda benzer örnekler yaptık, siz kendi yönteminizle bunu gerçekleştirebilirsiniz.

Ayrıca dikkat etmemiz gereken noktalar ise html dosyası içerisindeki th(thymelaf) ile tag’leri.

Script tag’i içerisinde ilk karşımıza çıkıyor. Burada dosyalarının yolunu doğru verdiğinizden emin yoksa sayfanız beklediğiniz gibi gözükmeyecektir çünkü bu dosyalar yüklenmemiştir.



<link th:href="@{/webjars/bootstrap/5.3.0/css/bootstrap.min.css}" rel="stylesheet"> 

<script th:src="@{/webjars/jquery/3.6.4/jquery.min.js}">

</script> <script th:src="@{/webjars/bootstrap/5.3.0/js/bootstrap.min.js}"></script>

</script> <script th:src="@{/webjars/bootstrap/5.3.0/js/bootstrap.min.js}"></script>

Faydalı olması dileğiyle.