1. 단순 필터링 구현
/views/biz-simple.hbs
<h1>{{ title }}</h1>
<a href="/biz-adv?section=&floor=&status=&order=">
고급 화면으로 보기 ▶️
</a>
<br><br>
<table>
<thead>
<tr>
<th>업소명</th>
<th>섹션</th>
<th>층</th>
<th>상태</th>
<th>배달</th>
<th></th>
</tr>
</thead>
<tbody>
{{#each businesses}}
<tr>
<td>{{business_name}}</td>
<td>{{section_name}}</td>
<td>{{floor}}</td>
<td>{{status_kor}}</td>
<td>
{{#if can_takeout}}
✔️
{{^}}
❌
{{/if}}
</td>
<td>
<a href="/business/{{ business_id }}">
자세히
</a>
</td>
</tr>
{{/each}}
</tbody>
</table>
<br><br>
<a href="/">
◀️ 섹션 목록으로 돌아가기️
</a>
/database/sql.js 중
getBusinessesJoined : async (query) => {
const sqlQuery = `
SELECT * FROM sections S
LEFT JOIN businesses B
ON S.section_id = B.fk_section_id
WHERE TRUE
${query.section
? ('AND section_id = ' + query.section) : ''}
${query.floor
? ('AND floor = ' + query.floor) : ''}
${query.status
? ("AND status = '" + query.status + "'") : ''}
ORDER BY
${query.order
? query.order : 'business_id'}
`
console.log(sqlQuery)
const [rows] = await promisePool.query(sqlQuery)
return rows
},
/routes/index.js 중
const statusKorMap = {
OPN: '영업중',
CLS: '폐업',
VCT: '휴가중',
RMD: '리모델링'
}
router.get('/biz-simple', async function(req, res, next) {
const businesses = await sql.getBusinessesJoined(req.query)
businesses.map((item) => {
item.status_kor = statusKorMap[item.status]
return item
})
res.render('biz-simple', {
title: '단순 식당 목록',
businesses
});
});
🚀 localhost:3000에서 섹션을 선택해보세요!
2. 고급 필터링 구현
/views/biz-adv.hbs
<h1>{{ title }}</h1>
<a href="/biz-simple?section={{ q.section }}">
단순 화면으로 보기 ▶️
</a>
<br><br>
<form action="/biz-adv">
<select name="section">
<option value="">전체 섹션</option>
<option value="1">한식</option>
<option value="2">분식</option>
<option value="3">중식</option>
<option value="4">일식</option>
<option value="5">양식</option>
<option value="6">카페</option>
<option value="7">카페</option>
</select>
<select name="floor">
<option value="">전체 층</option>
<option value="1">1층</option>
<option value="2">2층</option>
<option value="3">3층</option>
</select>
<select name="status">
<option value="">전체 상태</option>
<option value="OPN">영업중</option>
<option value="VCT">휴가중</option>
<option value="RMD">리모델링</option>
<option value="CLS">폐업</option>
</select>
<select name="order">
<option value="">식당 ID</option>
<option value="section_name">섹션</option>
<option value="floor">층</option>
</select>
<input type="submit" value="검색">
</form>
<br>
<table>
<thead>
<tr>
<th>업소명</th>
<th>섹션</th>
<th>층</th>
<th>상태</th>
<th>배달</th>
<th></th>
</tr>
</thead>
<tbody>
{{#each businesses}}
<tr>
<td>{{business_name}}</td>
<td>{{section_name}}</td>
<td>{{floor}}</td>
<td>{{status_kor}}</td>
<td>
{{#if can_takeout}}
✔️
{{^}}
❌
{{/if}}
</td>
<td>
<a href="/business/{{ business_id }}">
자세히
</a>
</td>
</tr>
{{/each}}
</tbody>
</table>
<br><br>
<a href="/">
◀️ 섹션 목록으로 돌아가기️
</a>
/routes/index.js 중
router.get('/biz-adv', async function(req, res, next) {
const businesses = await sql.getBusinessesJoined(req.query)
businesses.map((item) => {
item.status_kor = statusKorMap[item.status]
return item
})
res.render('biz-adv', {
title: '고급 식당 목록',
q: req.query,
businesses
});
});