<div class="description">
<p><%- blog.body.substring(0, 100) %>...</p> <!-- This only shows 100 character of the body-->
</div>#SHOW time
* Add Show route
* Add show template
* Add links to show page
* Style show template
1. Add /blogs/:id route to the app.js
app.get("/blogs/:id", (req, res) => {
// 1) connection test
// res.send("SHOW PAGE!");
// 2) get Id of a particular item and respose, render "show" page for showing detail info of the item
Blog.findById(req.params.id, (err, foundBlog) =>{
if(err){
console.log(err)
res.redirect("/blogs");
} else {
res.render("show", {blog: foundBlog}) // send the particular item's info(name, body, id etc) to show page as name of the blog
}
}) // take 2 arguments(id, callBack)
})2. Add "More info" button on the index.ejs
: checkout lesson 322
3. Add getting Id info function to the app.get("blogs/:id")
: checkout 1
4. Create show page for showing more info for particular data and design
<%- include("./partials/header")%>
<div class="ui main text container segment">
<div class="ui huge header"><%= blog.title %></div>
<div class="ui top attached">
<div class="item">
<img class="ui centered rounded image" src="<%= blog.image %>">
<div class="content">
<span><%= blog.created.toDateString() %></span>
</div>
<div class="description">
<p><%- blog.body %></p>
</div>
<a class="ui orange basic button" href="/blogs/<%= blog._id%>/edit">EDITE</a> <!-- <a> tag and <form> tag aren't inline block-->
<form id="delete" action="/blogs/<%= blog._id %>?_method=DELETE" method="POST">
<button class="ui red basic button">DELETE</button>
</form>
</div>
</div>
</div>
<%- include("./partials/footer")%>
5. change index for showing only small preview as other websites do
<%= blog.body.substring(0, 100) %>...
<!-- DB에 저장된 blog.body의 일부(0~100번째 글자) 만 출력한다.
미리보기 개념으로 사용하여 사용자에게 일부 내용을 보여준다.-->6. <html> 태그가 blog.body(text content)에 사용될 수 있도록 하여 모든 글이 하나의 문단으로 출력되는 것을 방지
1) tag change this code
<p><%- blog.body.substring(0, 100) %>...</p> <!-- This only shows 100 character of the body-->2) Issue of the allow to use <%- %>
<script>alert("I HACKED YOU")</script>
<!--
<html>태그를 사용할 수 있도록 하여 텍스트의 가독성을 높였지만, 반대로 <script>태그가
이용가능해짐에 따라 보안에 문제가 생긴다. 이는 expressSanitizer를 이용하여 방지한다(322강 참조)
-->
'Full stack development > The Web Developer Bootcamp(2020)' 카테고리의 다른 글
| 320. RESTful Blog App: DESTROY (0) | 2020.10.01 |
|---|---|
| 319. RESTful Blog App : EDIT AND UPDATE (0) | 2020.10.01 |
| 317. Note about RESTful Blog App: SHOW (0) | 2020.10.01 |
| 316. RESTful Blog App: NEW and CREATE (0) | 2020.10.01 |
| 315. Note about RESTful Blog App : New and Create (0) | 2020.10.01 |