310. YelpCamp: Campground Show Page Part 2

2020. 9. 30. 18:02

<%- include("partials/header") %>

<h1><%= campground.name%></h1>

<img src="<%=campground.image%>">
<p> <%= campground.description %> </p>


<%- include("partials/footer") %>

309에서 각 RESTFUL Route 시 사용한 페이지별 ejs 파일을 다시 한번 정리한다.

309의 app.js에 작성된 RESTFUL Route에서 사용되는 페이지의 정보는 각각 아래와 같다.

name	url	verb	description
INDEX	/campgrounds	GET	Display a list of all dog
NEW	/campgrounds/new	POST	Display form to make a new dog
CREATE	/campgrounds	POST	Add new dog to DB
SHOW	/campgrounds/:id	GET	Show info about one dog

render에 사용되는 각각의 페이지는 DRY(Don't Repeate Yourself)를 적용하기 위해 [그림 1]과 같이 공통되는 부분을 header와 footer를 붙여 사용한다. 페이지가 복잡하여 메뉴가 많아지거나 디자인 할 요소가 많아질 경우 소스를 일일이 복사하여 사용하는 것보다 header와 foot에 디자인을 적용시킨 후 해당 파일만 불러와 사용할 경우 유지보수나 스크립트 작성 시 많은 시간을 절약할 수 있다.

[그림 2] 모든 페이지에서 적용된 header와 footer

[그림 3] 실제로 사용한 header의 내용, title, bootstrap호출, 상단 메뉴바 및 개별 메뉴 등이 설정되어 있다.

[그림 4] 실제 사용한 footer의 모습. 페이지 기준으로 하단에 사이트 정보, 회사 전화번호, 로고 등이 포함 될 경우 header처럼 디자인 적용 후 단순히 호출하여 사용 가능하다.

[그림 5] 실제 네이버 footer의 모습. 만약 footer를 사용하지 않을 경우 페이지 하단의 메뉴, 정책, 디자인 등이 바뀔 경우 몇 백만의 페이지를 일일히 수정해야만 하지만 footer를 사용할 경우 파일 하나를 수정하여 모든 페이지에 적용/수정이 가능하다.

1. header 및 footer 생성

1-1. header 생성

목적은 모든 페이지에 적용될 상단 메뉴를 디자인 한 후 개별 페이지에서 호출하기 위함이다.

경로 : views/partials/header.ejs

<!DOCTYPE html>
<html>
  <head>
	<title>Yelpcamp</title> <!-- 브라우저 상단의 페이지 타이틀 이름-->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- bootsrapt CDN --> 
  </head>

  <body>
	<nav class="navbar navbar-default"> <!-- 페이지 상단에 메뉴바를 디자인을 위한 공간 할당(full witdth) -->
	  <div class=container-fluid"> <!-- navbar-default에서 좌우 각 15px 씩 padding을 준 container-->
		<div class="navbar-header">
		   <a class="navbar-brand" href="/">YelpCamp</a>
		</div>

		<div class="collapse navbar-collapse">
		   <ul class="nav navbar-nav navbar-right"> <!-- 페이지 우측 및 수평 배치를 위해 <ul><li>태그 사용-->
			<li><a href="/">Login</a></li>	
			<li><a href="/">Sign Up</a></li>
			<li><a href="/">Logout</a></li>
		   </ul>
		</div>
	  </div>
	</nav>

1-2. footer 생성

: 현재 레슨에서는 따로 페이지 하단 메뉴 및 디자인이 없으므로 단순히 <body>태그 및 <html> 태그를 마무리하는 소스만 입력한다.

경로 : views/partials/header.ejs

	</body>

</html>

2. INDEX 생성

해당 프로젝트에서 index 페이지는 db에 저장되어 있는 각각의 name, image를 화면에 출력해주는 역할을 한다. 작성된 index.ejs는 express를 통해 request를 요청한 client로 response 되며, 서버로부터 response를 받은 브라우저를 이를 해석하여 user가 볼 수 있도록 페이지를 출력한다.

[그림 6] 해당 프로젝트의 index 페이지(좌). 각 캐릭터는 db에 저장된 name, imageUrl을 이용하여 화면에 출력한다(우)

2-1. index.ejs 생성

<!-- partials/header.ejs를 불러온다-->
<%- include("partials/header") %>

<div class="container"> <!-- 해당 container는 모든 contents를 페이지 중앙에 위치시키기 위해 사용-->
	<header class="jumbotron"> <!-- 기능적으로 div와 동일하게 컨텐츠를 분할함. 하지만  semantic web에서는 해당 class의 내용은 강조된 내용으로 인식-->
		<div class="container"> <!-- <header> 태그 내의 컨텐츠만 따로 디자인하기 위해 추가적인 div 사용
			<h1>Welcome To YelpCamp!</h1>
			<p> View our hand-picked campgrounds from all over the world</p>
			<p>
                <!-- 강조되며 큰 사이즈 버튼 생성, 클릭 시 "/campgrounds/new"로 링크됨-->
                <a class="btn btn-primary btn-lg" href="/campgrounds/new">Add New Campground</a>
			</p>
		</div>
	</header>

	
	<div class="row text-center" style="display:flex; flex-wrap: wrap;"> <!-- 개별 데이터를 보여주는 컬럼의 텍스트 위치, 반응형 여부 설정 -->
    	<% campgrounds.forEacher((campground) => { %> <!-- 스크립트에서 돌아가므로 선언문 사용. app.js에서 allCampgrounds가 할당된 campgrounds를 forEach문으로 돌려 모든 데이터를 출력 --> 
        	<div class="col-lg-6 col-md-4 col-sm-3"> <!-- 페이지를 12등분 했을 때 각 1200px 이상= 6/12칸, 992px 이상 = 4/12칸, 768px 이상에 해당하는 grid 사이즈로 컬럼을 출력 -->
				<div class="thumbnail"> <!-- thumnail 사용-->
					<img src="<%=campground.image%>"> <!-- campground의 image value를 추출하여 이미지 출력-->
					<div class="caption"> <!-- <h4>에 출력된 이름을 사용-->
						<h4><%= campground.name %></h4>
					</div>
						<p>	<!-- campground에 추출한 id값을 이용하여 각 데이터의 상세페이지로 링크하는 버튼 추가-->x
							<a href="/campgrounds/<%= campground._id %>" class="btn btn-primary">More Info</a>
						</p>
				</div>
        	</div>
    	});%>
	</div>
</div>

3. NEW 생성

: name, imageURL, Descriptio을 전달받는 페이지를 생성한다.

3-1. new.ejs 생성

<%- include("partials/header")%>
<div class="container">
	<div class="row">
		<h1 style="text-align: center;">Create a New Campground</h1>
		<div style="width: 90%; margin: 125px auto;">
			
			<form action="/campgrounds" method="POST"> <!-- Submit 버튼 클릭 시 input 태그 내의 데이터들을 /campgrounds route로 POST method-형식으로 전달한다-->
				<div class="form-group">
					<input class="form-control" type="text" name="name" placeholder="name">
				</div>				
				<div class="form-group">
					<input class="form-control" type="text" name="image" placeholder="image">	
				</div>
				<div class="form-group">
					<input class="form-control" type="text" name="description" placeholder="description">	
				</div>
				<div class="form-group">				
					<button class="btn btn-lg btn-primary btn-block">Submit!</button>
				</div>
			</form>
			<a href="/campgrounds">Go back</a>
		</div>
	</div>

</div>
<%- include("partials/footer")%>

4. SHOW 생성

: index에서 특정 데이터에 대한 자세한 정보 및 원본 이미지를 출력한다.

[그림 8] 상단 URL에서 /campgrounds/에 있는 의미 숫자들은 mongodb에 저장된 하워드 왈로위치의 id 값이다(그림 6 우측 참조). id값은 자동으로 생성되며, 최소 개별 db에서 unique를 보장한다.

상세보기 페이지는 간단하게 개별 인물의 이름, 이미지, 설명만 추가한다.

<%- include("partials/header") %>
<h1><%= campground.name%></h1>

<img src="<%= campground.image%>">

<p><%= campground.description %> </p>

<%- include("partials/footer") %>

저작자표시 비영리 변경금지

'Full stack development > The Web Developer Bootcamp(2020)' 카테고리의 다른 글

313. Note about Blog App: Layout (0)	2020.10.01
312. RESTful Blog App: INDEX (0)	2020.10.01
309. YelpCamp: Campground Show Page Part 1 (0)	2020.09.30
308. How to Avoid Potential Issues with Mongoose (0)	2020.09.29
306. Introduction to Mongoose Pt. 2 (0)	2020.09.27

Think before you type