지금까지는 게시판 하나에 글이 전부 올라가는 방식이었는데 이번에는 게시판을 여러 카테고리로 나누어서 만들 것이다.
category: {
type: DataTypes.STRING,
allowNull: false
}우선 posts 테이블에 category라는 속성을 추가해준다.
board.js 파일에
const categories = ['자유', '만화', '공부'];이런 식으로 카테고리 배열을 만들고, write 링크로 갈 때 categories 배열을 보내준다.
<div>
<label for="category">카테고리:</label>
<select id="category" name="category">
<% categories.forEach(c => { %>
<option value="<%= c %>"><%= c %></option>
<% }) %>
</select><br>
</div>글을 쓸 때 categories 안에 있는 값들을 이용해 선택하는 부분을 만든다. 그리고 write로 post 요청을 보낼 때
db.posts.create({
title: title,
content: content,
writer: req.session.user.username,
secret: secret === 'on',
password: hashedPassword,
category: category이렇게 category를 테이블에 같이 넣어준다.
router.get('/main/:category',async (req, res) => {
const category = req.params.category;
const posts = await db.posts.findAll({ where: { category } });
if (!categories.includes(category)) {
return res.redirect('/');
}
res.render('board/main',{posts: posts, category: category});
});메인 부분도 바뀌었는데, category를 파라미터로 받아서 where을 이용해 해당 카테고리에 맞는 게시글들만 찾았다.
그리고 categories 배열에 없는 카테고리가 링크로 들어오면 다시 원래 페이지로 돌아가게 했다.
<% categories.forEach(c => { %>
<a href="/board/main/<%= c %>"><%= c %>게시판</button> <br>
<% }) %>index.ejs 파일을 수정해서 게시판의 카테고리들이 보이게 했다.
<게시글 검색>
<form action="/board/search" method="get">
<select id="category" name="category">
<% categories.forEach(c => { %>
<option value="<%= c %>"><%= c %></option>
<% }) %>
<option value="all">전체</option>
</select>
<select name="type">
<option value="title">제목</option>
<option value="content">내용</option>
</select>
<input type="text" name="query" required>
<button type="submit">검색</button>
</form>검색할 게시판의 카테고리를 선택하거나 전체를 선택하고, 제목으로 검색할지 내용으로 검색할지를 선택하고
검색 내용을 입력하는 form을 main.ejs 파일에 작성하였다.
const Sequelize = require('sequelize');
const seq = Sequelize.Op;router.get('/search', async (req, res) => {
const { query, category, type } = req.query;
const whereClause = {
[type]: {
[seq.like]: '%' + query + '%'
}
};
if(category !== "all"){
whereClause.category = category;
}
const post = await db.posts.findAll({ where: whereClause });
res.render('board/search', { post });
});라우터에서 search 링크를 만들어서 sequelize의 like 구문을 가져와서 where 구문을 완성하였다.
category가 all일 때는 category는 지정하지 않고 전체 게시글을 검색해온다.
검색으로 post 변수에 게시글을 담고 search.ejs 파일을 렌더링한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= post.title %></title>
<link href="/public/main.css" rel="stylesheet" />
</head>
<body>
<h1>검색 결과</h1>
<ul>
<% post.forEach(post => { %>
<li><a href="/board/read/<%= post.idx %>"><%= post.title %></a></li>
<% }) %>
</ul>
</body>
</html>search.ejs 파일은 main 파일과 같은 형식이다.
'웹개발' 카테고리의 다른 글
| 게시판-비밀번호 유효성 검사, 관리자 글 삭제 권한 기능 추가 (0) | 2023.10.29 |
|---|---|
| 게시판-파일 업로드, 다운로드 (0) | 2023.10.29 |
| 게시판-추천 (0) | 2023.10.26 |
| 게시판-댓글 (0) | 2023.10.26 |
| 게시판-자기 글 수정, 삭제, 비밀글 (0) | 2023.10.25 |