클라이언트 유효성 검사 : 부트스트랩 이용 (novalidate, required, class="validated-form")
서버 측 유효성 검사 : Joi (schema.js)
오류 결과
<show.ejs 하단에 추가>
</form>
<% for(let review of campground.reviews) { %>
<div class="mb-3">
<p>Rating: <%=review.rating%></p>
<p>Review: <%=review.body%></p>
</div>
<% } %>
<show.ejs>
<% layout('layouts/boilerplate')%>
<div class="row">
<div class="col-6">
<div class="card mb-3">
<img src="<%=campground.image%>" class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title"><%=campground.title%></h5>
<p class="card-text"><%=campground.description%></p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item text-muted"><%=campground.location%></li>
<li class="list-group-item">$<%= campground.price%>/night</li>
</ul>
<div class="card-body">
<a
class="card-link btn btn-primary"
href="/campgrounds/<%=campground._id%>/edit"
>Edit</a
>
<form
class="d-inline"
action="/campgrounds/<%=campground._id%>?_method=DELETE"
method="POST"
>
<button class="btn btn-danger">Delete</button>
</form>
</div>
</div>
</div>
<div class="col-6">
<h2>Leave a Review </h2>
<form action="/campgrounds/<%=campground._id%>/reviews" method="POST" class="mb-3 validated-form" novalidate>
<div class="mb-3">
<label class="fonm-label" for="rating">Rating</label>
<input class="form-range" type="range" min="1" max="5" id="rating" name="review[rating]">
</div>
<div class="mb-3 ">
<label class="form-label" for="body">Review</label>
<textarea
class="form-control"
name="review[body]"
id="body"
cols="30"
rows="3"
required
></textarea>
<div class="valid-feedback">Looks good!</div>
</div>
<button class="btn btn-success">Submit</button>
</form>
<% for(let review of campground.reviews) { %>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Rating:<%=review.rating%></h5>
<p class="card-text">Review:<%=review.body%></p>
</div>
</div>
<% } %>
</div>
</div>
</div>
<show.ejs> 에 'Delete' 폼 추가하기
<form
action="/campgrounds/<%=campground._id%>/reviews/<%=review._id%>?_method=DELETE"
method="POST"
>
<button class="btn btn-sm btn-danger">Delete</button>
</form>
</div>
</div>
<% } %>
</div>
</div>
리뷰가 남겨진 캠핑장을 삭제했을 경우 남겨진 리뷰들의 데이터 삭제 목적