오늘 한 일
- 투표 프론트앤드 부트스트렙 템플렛 찾기
- 프론트앤드에 투표 백엔드 DB 가져오기
[투표 프론트앤드 부트스트렙 템플렛 찾기]
사용한 투표 프론트앤드 부트스트렙 템플렛
https://www.bootdey.com/snippets/view/vs-voting-system
Bootstrap html snippet. vs voting system
Bootstrap snippet and html example. vs voting system, this UI example was created for web development using HTML, Javascript and CSS by Bootdey Admin
www.bootdey.com
템플렛으로 제공되는 파일은 html과 css.
**여기서 html은 intellij 내에 template 폴더에 그대로 복사 붙여 넣기 한다. css 파일도 붙여 넣어야 한다.
나는 이미 연습하고 있던 html이 따로 있었고, 템플렛 홈페이지에서 제공되는 html을 누르면 웹페이지로 연결되었던 터라 html 양식을 제공하고 있지 않는다고 생각하였다. 즉, 제공하고 있는 파일을 에디터(intellij)에 넣을 생각을 전-혀 하지 않았던 것이다.
덕분에 너무 많은 시간을------날려버렸다. 다음부터는 제공되는 템플렛은 에디터에 고대로 옮기자.
[프론트앤드에 투표 백엔드 DB 가져오기]
투표 백엔드를 가져오려면 우선 투표가 담겨있는 흐름을 이해해야 했다. 투표는 게시판(post)에 담겨있으니 post를 가져와야 했다. 이 post는 table에 넣어놨고 각각 id가 제공되어서 결국 게시물을 가져오기 위해서는 Long id를 반환해야 했다.
PostController
@GetMapping("/vs-page/{id}")
public String bringPost(@PathVariable Long id,
Model model) {
PostResponseDto result = postService.bringPost(id);
model.addAttribute("post", result);
// model.addAttribute("commentList", responseDto.getCommentResponseDtoList());
return "vs_voting_system";
}컨트롤러에서 id에 따른 post를 반환하도록 한다.
참고로 html 이름은 vs_voting_system
PostService
public PostResponseDto bringPost(Long id) {
Post post = findPost(id);
return new PostResponseDto(post);
}
private Post findPost(Long id) {
return postRepository.findById(id).orElseThrow(() -> new IllegalArgumentException("선택한 게시물은 존재하지 않습니다."));
}
}서비스에서는 반환할 post를 찾을 수 있도록 findPost를 사용하였다.
findById는 인터페이스인 Repository에 자동으로 저장된 함수(?)이므로 Repository에 별다른 작성을 하지는 않았다.
Entity Post
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String title;
private String content;
@Column(name = "opiniona")
private String opinionA;
@Column(name = "opinionb")
private String opinionB;
@ColumnDefault("0")
@Column(name = "opinion_a_Cnt")
private Long opinionACnt;
@ColumnDefault("0")
@Column(name = "opinionb_Cnt")
private Long opinionBCnt;
@ManyToOne
@JoinColumn(name = "user_id", nullable = false)
private User user;
@OneToMany( mappedBy = "post", cascade = CascadeType.ALL)
private List<Comment> commentList = new ArrayList<>();html에서는 title, content, opinionA, opinionb, ...Cnt가 필요했으므로 Post 엔티티도 필요했기에 참고용으로 가져왔다.
대망의 html!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>
<title>vs voting system - Bootdey.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
a.list-group-item {
height: auto;
min-height: 220px;
}
a.list-group-item.active small {
color: #fff;
}
a.list-group-item .vs-title {
font-size: 110px;
}
.fa {
font-size: 100px;
color: #ffffff;
}
.social a {
text-decoration: none;
}
.twitter {
background-color: #00acee;
border-radius: 4px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.facebook-like {
background-color: #3b5998;
border-radius: 4px;
margin-top: -3px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.media {
padding:10px;
}
</style>
</head>
<body>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<div class="container bootstrap snippets bootdey">
<div class="row">
<div class="well">
<h1 class="text-center text-primary">
<b><span th:text="${post.title}"></span></b>
</h1>
<div class="list-group">
<a href="#" class="list-group-item">
<div class="col-md-3">
<div class="media col-md-12 twitter">
<figure class="pull-left">
<i class="fa fa-twitter"></i>
</figure>
</div>
<div class="media col-md-12">
<button type="button" class="btn btn-default btn-lg btn-block"><span th:text="${post.opinionA}"></span></button>
<button type="button" class="btn btn-default btn-lg btn-block"><span th:text="${post.opinionACnt}"></span></button>
<!--<div class="stars text-center text-warning">-->
<!--<span class="glyphicon glyphicon-star"></span>-->
<!--<span class="glyphicon glyphicon-star"></span>-->
<!--<span class="glyphicon glyphicon-star"></span>-->
<!--<span class="glyphicon glyphicon-star"></span>-->
<!--<span class="glyphicon glyphicon-star-empty"></span>-->
<!--</div>-->
</div>
</div>
<div class="col-md-6 text-center">
<h1 class="vs-title">VS</h1>
</div>
<div class="col-md-3">
<div class="media col-md-12 facebook-like">
<figure class="pull-left">
<i class="fa fa-facebook"></i>
</figure>
</div>
<div class="media col-md-12">
<button type="button" class="btn btn-default btn-lg btn-block"><span th:text="${post.opinionB}"></span></button>
<button type="button" class="btn btn-default btn-lg btn-block"><span th:text="${post.opinionBCnt}"></span></button>
<!--<div class="stars text-center text-warning">-->
<!--<span class="glyphicon glyphicon-star"></span>-->
<!--<span class="glyphicon glyphicon-star"></span>-->
<!--<span class="glyphicon glyphicon-star"></span>-->
<!--<span class="glyphicon glyphicon-star"></span>-->
<!--<span class="glyphicon glyphicon-star-empty"></span>-->
<!--</div>-->
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
오늘!! 스스로 백엔드를 수정할 수 있었다. 그 이유는 코드에 대한 이해가 어느 정도 있었기 때문!! 쫌 뿌듯했다!
'TIL (Today I Learned)' 카테고리의 다른 글
| WIL) 절제가 부족한 개발자 (0) | 2023.07.30 |
|---|---|
| TIL) 자바의 정석 기초편 chapter 3 연습문제 - 연산자 (0) | 2023.07.27 |
| TIL) Spring Security의 Authentication Configuration 라이브러리는 무엇일까? (0) | 2023.07.18 |
| TIL) Github에서 Git Clone을 해보자! (0) | 2023.07.17 |
| WIL) Springboot, Spring 문법 (1) | 2023.07.16 |
