0
웹에이전시 전문 프리랜서 개발자 프리터코더입니다.
이번 챕터에서는 웹사이트 개발 과정 중 백오피스 메뉴 목록 기능 만들기를 작업합니다.
<백오피스 메뉴 목록 기능 생성> 글은 웹에이전시의 의뢰를 받아서 프리터코더가 웹사이트를 개발하는 과정을 가상으로 보여주는 웹에이전시의 개발자들은 어떻게 일하나 시리즈 중 하나입니다.
1
백오피스 메뉴 관리 목록 기능을 만듭니다. 기존 사이드바는 샘플로 여러가지 예시가 있는 버전이므로 먼저 사이드바를 정리하겠습니다.
기존 사이드바는 아래처럼 생겼습니다.
2
sidebar.php 파일을 변경해서 메뉴 관리 항목만 남겨둡니다.
3
SB Admin 2 의 테이블 항목을 본문 영역으로 가져옵니다.
<!-- Page Heading -->
<h1 class="h3 mb-2 text-gray-800">Tables</h1>
<p class="mb-4">DataTables is a third party plugin that is used to generate the demo table below.
... 생략 ...
</div>
</div>
</div>4
정상적으로 보이는지 확인합니다.
5
설명 부분은 큰 의미가 없으므로 삭제하고, 메뉴를 생성하는 버튼 링크를 만듭니다.
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">메뉴 목록</h6>
<h6 class="m-0 float-right">
<a href="/backoffice/menu_item/create" class="btn btn-primary">메뉴 생성</a>
</h6>
</div>
6
테이블 데이터를 채웁니다. SB Admin 2 에서 사용하는 테이블은 DataTables 라는 컴포넌트로, 자동으로 페이징과 검색을 지원하는 너무 고마운 자바스크립트 라이브러리입니다.
7
메뉴 관리 목록 화면에 보여질 항목을 추려내야 합니다. 메뉴 항목이 뭐가 있는지 다시 한번 복기해 봅니다.
| 열 이름 | 비고 |
|---|---|
| 이름 | - |
| 설명 | - |
| 대표이미지 | 첨부한 이미지 경로 |
| 카테고리 | 카테고리 정보 |
| 베스트 메뉴 | Y 혹은 N |
8
기획자분께 보여질 항목을 확인한 후 [이름, 대표 이미지, 카테고리, 베스트 메뉴 여부]를 표기하기로 합니다.
<thead>
<tr>
<th>이름</th>
<th>대표이미지</th>
<th>카테고리</th>
<th>베스트 여부?</th>
<th>수정</th>
</tr>
</thead>
<tfoot>
<tr>
<th>이름</th>
<th>대표이미지</th>
<th>카테고리</th>
<th>베스트 여부?</th>
<th>수정</th>
</tr>
</tfoot>기획자 팁
백오피스 목록 화면을 기획하실 때 어떤 정보 항목을 넣어야 하는지 알려주세요.
9
실제 데이터를 바인딩합니다.
<tbody>
<?php
$menu_item_list = query("select * from menu_item order by category_id asc, insert_dt desc");
// for category info
require_once($_SERVER["DOCUMENT_ROOT"] . "/inc/predef.php");
?>
<?php foreach($menu_item_list as $menu_item) : ?>
<tr>
<td><?= $menu_item["name"] ?></td>
<td><?= $menu_item["image_url"] ?></td>
<td><?= category_name($menu_item["category_id"]) ?></td>
<td><?= $menu_item["best_menu_yn"] ?></td>
<td>
<a href="/backoffice/menu_item/edit?id=<?= $menu_item["name"] ?>" class="btn btn-success">수정</a>
</td>
</tr>
<?php endforeach ?>
</tbody>기획자 팁
만약 기본 정렬 순서를 지정하고 싶으시면 말씀해 주세요. 현재는 카테고리 정방향, 입력 시간 역방향으로 지정되어 있습니다.
datatables 는 어차피 헤더를 클릭하면 자동으로 정렬이 가능하기 때문에 큰 의미는 없을 수도 있지만, 다른 컴포넌트를 사용할 경우 정렬을 따로 구현해야 할 수도 있어요.
10
카테고리는 데이터베이스가 아니라 파일에 정의되어 있으므로, 카테고리 이름을 가져오는 함수 category_name 을 predef.php 에 추가합니다.
function category_name($id){
$categories = categories();
$filtered_values = array_filter($categories, function($x) use ($id) {return $x['id'] == $id;});
if (count($filtered_values) == 1){
return $filtered_values[0]["name"];
}
return "";
}11
잘 나오는지 확인해 봅니다.
12
데이터가 전혀 없어서 제대로 값이 나오는 지 확인할 수가 없네요. 아직 데이터 생성 기능을 안만들었으므로 수동으로 데이터를 넣어줍니다.
13
굳이 쿼리로 작성하려면 이렇게 합니다.
INSERT INTO `menu_item` (`id`, `name`, `description`, `image_url`, `category_id`, `best_menu_yn`, `insert_dt`, `update_dt`) VALUES (NULL, '소고기 쌀국수', '진한육수에 숙주와 양파, 담백한 토핑이 어우러진 정통쌀국수', '/upload/image/20220414646257.png', 'C001', 'N', current_timestamp(), NULL);14
다시 한번 확인해 봅니다.
15
대표 이미지 항목이 그림으로 나오는 것이 아니라 글자로 나오네요. 태그를 변경합니다.
<td><img src="<?= $menu_item["image_url"] ?>" /></td>
16
나오기는 나왔는데 이미지가 너무 큽니다. 아 퍼블리셔 분이 계시면 좋겠다.. 라고 생각하면서 이미지 크기를 조정합니다.
<td><img src="<?= $menu_item["image_url"] ?>" style="width:10%;" /></td>숫자를 이리 저리 바꿔보면서 적당히 큰 크기를 찾습니다. 기획자 분이 보시고 크기가 맘에 안드시면 바꿔달라고 하실 꺼라고 믿으면서요. 우선 결과물은 다음과 같아집니다.
기획자 팁
이미지 크기를 확인하시고 변경 요청하셔도 좋아요.
