회고록
[회고록] 웹 개발 프로젝트하고 공부한 흔적 남기기 (2편)
경험을 기록하다.
2023. 12. 1. 18:00
[회고록] 웹 개발 프로젝트하고 공부한 흔적 남기기 (1편)
HTML + CSS + JavaScript + Node + MongoDB 기반 프로젝트 시작 1. 파일 생성한다. 2. npm init -y 패키지 설치한다. 3. npm i express 설치 4. npm i ejs 템플릿 엔진 모듈 설치 5. npm i mongoose --save 몽구스 설치 3번, 4번, 5
kimseunggu93.tistory.com
위의 링크는 1편이다. 1편하고 보니까 백엔드쪽은 많이 다뤄보지 않아서 어려웠지만 관심을 갖고 이해하기 위해 많은 노력을 했다. 2편에서 더 해보자
1. 부트스트랩 사용하여 코드 재사용하고 기본 레이아웃
<%- include('../partial/navbar.ejs') %>
<main class="container mt-5"><%- body %></main>
<%- include('../partial/footer.ejs') %>
2. 스타일 작업
<div class="row">
<h1 class="text-center">Edit Campground</h1>
<div class="col-6 offset-3">
<form action="/campgrounds/<%= campground._id %>?_method=PUT" method="post">
<div class="mb-3">
<label for="title" class="form-label">title</label>
<input
type="text"
id="title"
class="form-control"
name="campground[title]"
value="<%= campground.title %>"
/>
</div>
<div class="mb-3">
<label for="location" class="form-label">location</label>
<input
type="text"
id="location"
class="form-control"
name="campground[location]"
value="<%= campground.location %>"
/>
</div>
<div class="mb-3">
<label for="image" class="form-label">image url</label>
<input
type="text"
id="image"
class="form-control"
name="campground[image]"
value="<%= campground.image %>"
/>
</div>
<div class="mb-3">
<label for="price" class="form-label">campground price</label>
<div class="input-group">
<span id="price-label" class="input-group-text">$</span>
<input
type="text"
class="form-control"
id="price"
placeholder="0.00"
aria-label="price"
aria-describedby="price-label"
name="campground[price]"
value="<%= campground.price %>"
/>
</div>
</div>
<div class="mb-3">
<label for="description" class="form-label">description url</label>
<textarea type="text" id="description" class="form-control" name="campground[description]"><%= campground.description %>"</textarea>
</div>
<div class="mb-3">
<button class="btn btn-info">update campground</button>
</div>
</form>
<a href="/campgrounds/<%= campground._id %>">back to campground</a>
</div>
</div>
<div class="row">
<div class="col-6 offset-3">
<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
href="/campgrounds/<%= campground._id %>/edit"
class="card-link btn btn-info"
>edit</a
>
<form
action="/campgrounds/<%= campground._id %>?_method=DELETE"
method="post"
class="d-inline"
>
<button class="btn btn-danger">delete</button>
</form>
</div>
<div class="card-footer text-muted">
<a href="/campgrounds">all campground</a>
</div>
</div>
</div>
</div>