Spring Boot Project
index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Blog Posts</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2 class="text-center mb-4">All Blog Posts</h2>
<!-- New Post Button -->
<div class="d-flex justify-content-end mb-3">
<a href="/new" class="btn btn-success">+ New Post</a>
</div>
<!-- Input Field for Post ID and Action Buttons -->
<div class="card p-3 mb-4">
<h5>Update or Delete a Post by ID</h5>
<div class="row g-2">
<div class="col-md-4">
<input type="number" id="postIdInput" class="form-control" placeholder="Enter Post ID">
</div>
<div class="col-md-2">
<button onclick="editPost()" class="btn btn-primary w-100">Edit Post</button>
</div>
<div class="col-md-2">
<button onclick="deletePost()" class="btn btn-danger w-100">Delete Post</button>
</div>
</div>
</div>
<!-- Post Table -->
<table class="table table-bordered table-striped">
<thead class="table-dark">
<tr>
<th>Title</th>
<th>Author</th>
<th>Content</th>
</tr>
</thead>
<tbody>
<tr th:each="post : ${listPosts}">
<td th:text="${post.title}">Post Title</td>
<td th:text="${post.author}">Author</td>
<td th:text="${post.content}">Content</td>
</tr>
</tbody>
</table>
</div>
<!-- JavaScript to Handle Edit/Delete -->
<script>
function editPost() {
const id = document.getElementById("postIdInput").value;
if (id) {
window.location.href = "/edit/" + id;
} else {
alert("Please enter a valid Post ID.");
}
}
function deletePost() {
const id = document.getElementById("postIdInput").value;
if (id && confirm("Are you sure you want to delete post ID " + id + "?")) {
window.location.href = "/delete/" + id;
} else {
alert("Please enter a valid Post ID.");
}
}
</script>
</body>
</html>
new_post.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Create New Post</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2 class="text-center mb-4">Create New Blog Post</h2>
<form th:action="@{/save}" th:object="${post}" method="post" class="card p-4 shadow-sm">
<div class="mb-3">
<label class="form-label">Title</label>
<input type="text" th:field="*{title}" class="form-control" placeholder="Enter post title" required>
</div>
<div class="mb-3">
<label class="form-label">Author</label>
<input type="text" th:field="*{author}" class="form-control" placeholder="Enter author name" required>
</div>
<div class="mb-3">
<label class="form-label">Content</label>
<textarea th:field="*{content}" class="form-control" rows="6" placeholder="Write your post content here..." required></textarea>
</div>
<div class="d-flex justify-content-between">
<a href="/" class="btn btn-secondary">Cancel</a>
<button type="submit" class="btn btn-success">Publish Post</button>
</div>
</form>
</div>
</body>
</html>
edit_post.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Edit Post</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2 class="text-center mb-4">Edit Blog Post</h2>
<form th:action="@{/update}" th:object="${post}" method="post" class="card p-4 shadow-sm">
<input type="hidden" th:field="*{id}" />
<div class="mb-3">
<label class="form-label">Title</label>
<input type="text" th:field="*{title}" class="form-control" placeholder="Update post title" required>
</div>
<div class="mb-3">
<label class="form-label">Author</label>
<input type="text" th:field="*{author}" class="form-control" placeholder="Update author name" required>
</div>
<div class="mb-3">
<label class="form-label">Content</label>
<textarea th:field="*{content}" class="form-control" rows="6" placeholder="Update post content..." required></textarea>
</div>
<div class="d-flex justify-content-between">
<a href="/" class="btn btn-secondary">Back</a>
<button type="submit" class="btn btn-primary">Update Post</button>
</div>
</form>
</div>
</body>
</html>