[웹에이전시 개발] 백오피스 메뉴 생성 화면

프리터코더·2023년 7월 24일

메뉴 백오피스 생성 웹에이전시

웹에이전시의 개발자들은 어떻게 일하나

목록 보기

32/52

0

웹에이전시 전문 프리랜서 개발자 프리터코더입니다.

이번 챕터에서는 웹사이트 개발 과정 중 백오피스 메뉴 생성 화면을 작업합니다.

<백오피스 메뉴 생성 화면> 글은 웹에이전시의 의뢰를 받아서 프리터코더가 웹사이트를 개발하는 과정을 가상으로 보여주는 웹에이전시의 개발자들은 어떻게 일하나 시리즈 중 하나입니다.

1

백오피스 메뉴 생성 화면을 만들 차례입니다. 아쉽게도 SB Admin 2 에는 상세 항목 관리 화면은 미리 준비되어 있지 않으므로, 직접 만들어야 합니다.

2

/backoffice/menu_item 폴더를 복사해서 /backoffice/menu_item/create 폴더로 만들고 /backoffice/menu_item/create/_body.php 파일 내용을 간단하게 바꿉니다.

113

3

제대로 적용되었는지 로컬에서 확인해 봅니다.
114

4

이런.. css 가 하나도 적용이 안된 것 같습니다. 네트워크 탭을 확인해 봅니다.

115

css 경로가 /backoffice/menu_item/vendor/datatables/dataTables.bootstrap4.min.css 네요. 원칙대로라면 /backoffice/vendor/datatables/dataTables.bootstrap4.min.css 가 되어야 합니다. 즉 URL 깊이가 달라짐으로써 css 가 상대경로로 인식되었기 때문에 오류가 발생한 것입니다.

5

원인을 알았으니 수정해 봅니다.
116
117
118

6

네트워크 탭에서 404 오류 없이 모든 리소스가 200 정상 로드되었음을 확인합니다.

119

7

form 을 변경합니다. 일반적인 텍스트 데이터는 <form> 태그만으로 충분합니다만, 첨부 파일을 올리기 위해서는 <form> 태그의 특성으로 enctype="multipart/form-data" 을 지정해 줘야 합니다.

<form role="form" method="post" enctype="multipart/form-data">

8

생성 화면 컨텐츠를 채울께요. 메뉴 이름 입력 란을 만듭니다.

<div class="form-group">
    <label>이름</label> 
    <input type="text" class="form-control" name='name'>
</div>

9

대표 이미지 업로드 폼을 만듭니다.

<div class="form-group">
    <label>대표이미지</label> 
    <input type="file" class="form-control" name='upload_image'>
</div>

10

카테고리를 선택할 수 있습니다.

<div class="form-group">
    <label>카테고리</label>
    <select class="form-control">
        <?php require_once($_SERVER["DOCUMENT_ROOT"] . "/inc/predef.php"); ?>                                        
        <?php foreach(categories() as $category) : ?>
            <option value="<?= $category["id"] ?>"><?= $category["name"] ?></option>
        <?php endforeach ?>
    </select>
</div>

11

베스트 여부를 체크할 수 있게 합니다.

<div class ="form-group">
    <label>베스트 여부</label>
    <div class="form-check">
        <input class="form-check-input" type="radio" id="best_menu_yn_y" name="best_menu_yn" value="Y">
        <label class="form-check-label" for="best_menu_yn_y">Y</label>                            
    </div>
</div>

12

저장 버튼을 만듭니다.

<div class ="form-group">
    <div class="form-check">
        <input class="form-check-input" type="radio" id="best_menu_yn_n" name="best_menu_yn" value="N" checked>
        <label class="form-check-label" for="best_menu_yn_n">N</label>                            
    </div>
</div>