|
|
| Zeile 1: |
Zeile 1: |
| Kontaktformular erstellen mit Spring boot mvc
| |
|
| |
|
| In diesem Tutorial werden wir ein Kontaktformular erstellen, das die Eingabe von Benutzern entgegennimmt und die Daten in der Datenbank speichert. Wir werden auch die Validierung der Benutzereingaben implementieren.
| |
|
| |
| == Schritt 1: Erstellen Sie ein neues Spring Boot-Projekt==
| |
|
| |
| Erstellen Sie ein neues Spring Boot-Projekt mit dem Spring Initializr. Fügen Sie die folgenden Abhängigkeiten hinzu:
| |
|
| |
| * Spring Web
| |
| * Thymeleaf
| |
| * Spring Data JPA
| |
| * H2 Database
| |
|
| |
| == Schritt 2: Erstellen Sie das Kontaktformular==
| |
|
| |
| Erstellen Sie eine neue HTML-Datei namens `contact.html` im `src/main/resources/templates` Verzeichnis. Fügen Sie den folgenden Code hinzu:
| |
|
| |
| <pre>
| |
| <!DOCTYPE html>
| |
| <html xmlns:th="http://www.thymeleaf.org">
| |
| <head>
| |
| <title>Kontaktformular</title>
| |
| </head>
| |
| <body>
| |
| <h1>Kontaktformular</h1>
| |
| <form action="#" th:action="@{/submit}" th:object="${contact}" method="post">
| |
| <label for="name">Name:</label>
| |
| <input type="text" id="name" th:field="*{name}" />
| |
| <br/>
| |
| <label for="email">Email:</label>
| |
| <input type="email" id="email" th:field="*{email}" />
| |
| <br/>
| |
| <label for="message">Nachricht:</label>
| |
| <textarea id="message" th:field="*{message}"></textarea>
| |
| <br/>
| |
| <button type="submit">Absenden</button>
| |
| </form>
| |
| </body>
| |
| </html>
| |
|
| |
| </pre>
| |
|
| |
| == Schritt 3: Erstellen Sie das Kontaktformular-Modell==
| |
| Erstellen Sie eine neue Java-Klasse namens `Contact` im `src/main/java/com/example/demo` Verzeichnis. Fügen Sie den folgenden Code hinzu:
| |
|
| |
| <pre>
| |
| package city.ahrensburg.demo;
| |
|
| |
| import jakarta.persistence.Entity;
| |
| import jakarta.persistence.GeneratedValue;
| |
| import jakarta.persistence.GenerationType;
| |
| import jakarta.persistence.Id;
| |
|
| |
| @Entity
| |
| public class Kontaktmodel {
| |
| @Id
| |
| @GeneratedValue(strategy = GenerationType.AUTO)
| |
| private Long id;
| |
| private String name;
| |
|
| |
| // Getter und Setter für id
| |
| public Long getId() {
| |
| return id;
| |
| }
| |
|
| |
| public void setId(Long id) {
| |
| this.id = id;
| |
| }
| |
|
| |
| // Getter und Setter für name
| |
| public String getName() {
| |
| return name;
| |
| }
| |
|
| |
| public void setName(String name) {
| |
| this.name = name;
| |
| }
| |
| }
| |
| </pre>
| |
|
| |
| == Schritt 4: Erstellen Sie den Kontaktformular-Controller==
| |
| Erstellen Sie eine neue Java-Klasse namens `ContactController` im `src/main/java/com/example/demo` Verzeichnis. Fügen Sie den folgenden Code hinzu:
| |
|
| |
| <pre>
| |
| package city.ahrensburg.demo;
| |
|
| |
| import org.springframework.stereotype.Controller;
| |
| import org.springframework.ui.Model;
| |
| import org.springframework.web.bind.annotation.GetMapping;
| |
| import org.springframework.web.bind.annotation.PostMapping;
| |
|
| |
| @Controller
| |
| public class Kontaktcontroller {
| |
|
| |
| @GetMapping("/kontakt")
| |
| public String kontaktformular(Model model) {
| |
| model.addAttribute("contact", new Kontaktmodel());
| |
| return "contact";
| |
| }
| |
|
| |
| @PostMapping("/submit")
| |
| public String submitForm(Kontaktmodel contact) {
| |
| // Speichern Sie die Kontaktformulardaten in der Datenbank
| |
| return "redirect:/kontakt";
| |
| }
| |
| }
| |
| </pre>
| |
|
| |
| == Schritt 5: Konfigurieren Sie die Datenbank==
| |
| Öffnen Sie die `application.properties` Datei im `src/main/resources` Verzeichnis und fügen Sie die folgenden Einstellungen hinzu:
| |
|
| |
| <pre>
| |
| spring.datasource.url=jdbc:h2:mem:testdb
| |
| spring.datasource.driverClassName=org.h2.Driver
| |
| spring.datasource.username=sa
| |
| spring.datasource.password=password
| |
| spring.jpa.database-platform=org.hibernate.dialect.H2Dialect
| |
| spring.h2.console.enabled=true
| |
| </pre>
| |
|
| |
| == Schritt 6: Starten Sie die Anwendung==
| |
|
| |
| Starten Sie die Anwendung und navigieren Sie zu `http://localhost:8080/kontakt`, um das Kontaktformular anzuzeigen. Füllen Sie das Formular aus und klicken Sie auf "Absenden". Die eingegebenen Daten werden in der Datenbank gespeichert.
| |
|
| |
| Das ist alles! Sie haben erfolgreich ein Kontaktformular mit Spring Boot MVC erstellt. Viel Spaß beim Codieren!
| |
|
| |
| == Zusammenfassung==
| |
|
| |
| In diesem Tutorial haben wir ein Kontaktformular erstellt, das die Eingabe von Benutzern entgegennimmt und die Daten in der Datenbank speichert. Wir haben auch die Validierung der Benutzereingaben implementiert. Sie können dieses Beispiel als Ausgangspunkt für die Entwicklung von komplexeren Formularen verwenden. Viel Spaß beim Codieren!
| |