Adonis Tutorial : 관리자 추가하기

• 우선 xyz/resources/views/mgmt/admin/index.njk 에 다음을 추가한다.

  ...
   
  <div style="text-align: right; padding-bottom: 10px">
    <a href="/mgmt/admin/insert_form" class="btn btn-default" data-toggle="modal" data-target="#myModal">관리자 추가</a>
  </div>
   
  ...
   
  <div id="myModal" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
      </div>
    </div>
  </div>
   
  ...
   
  <script>
  // Modal Remote Reload
  $(document).on('hidden.bs.modal', function (e) {
      $(e.target).removeData('bs.modal');
  })
  </script>
   
  ...

• http://localhost:3333/mgmt/admin 을 다시 보면, 관리자 추가 버튼이 새로이 나타날 것이다.

• 관리자 입력 양식을 만들자. xyz/resources/views/mgmt/admin/insert_form.njk

  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title">관리자 추가</h4>
  </div>
  <div class="modal-body">
    <form name="insert_form" action="/mgmt/admin/insert" method="post">
      {{ csrfField }}
      <div class="form-group">
        <label>아이디 <small>(필수)</small></label>
        <input type="text" name="userid" class="form-control" required>
      </div>
      <div class="form-group">
        <label>비밀번호 <small>(필수)</small></label>
        <input type="password" id="password" name="passwd1" class="form-control" required>
      </div>
      <div class="form-group">
        <label>비밀번호 확인 <small>(필수)</small></label>
        <input type="password" name="passwd2" class="form-control" required>
      </div>
      <div class="form-group">
        <label>별명 <small>(필수)</small></label>
        <input type="text" name="nick" class="form-control" required>
      </div>
      <div class="form-group" style="text-align: right">
        <input class="btn btn-primary" type="submit" value="관리자 추가" />
      </div>
    </form>
  </div>

• xyz/Http/Controllers/Mgmt/AdminController.js 에 다음 코드를 추가한다.

  ...
   
    // 관리자 추가 폼
    * insert_form (request, response) {
      yield response.sendView('mgmt/admin/insert_form')
    }
   
  ...

• xyz/app/Http/routes.js 에서 mgmt 그룹안에 다음을 추가한다.

    Route.get('/admin/insert_form', 'Mgmt/AdminController.insert_form').as('mgmt_admin_insert_form')

• 관리자 추가 버튼을 클릭하면 모달 다이얼로그 박스 형식의 입력 양식이 나올 것이다.

• 이제, 실제로 DB에 관리자를 추가해보자. 우선, xyz/app/Model/Admin.js 에 다음을 추가한다.

  ...
   
    // created_at, updated_at 컬럼을 쓰지는 안는 경우에 설정
    // 이 예제에서는 created_at, updated_at 컬럼을 사용하지 않지만,
    // 실제 프로젝트에서 Admin 모델에는 사용하는 것이 더 나을것으로 보인다.
    static get createTimestamp() { return null; }
    static get updateTimestamp() { return null; }
   
    static * insert (userid, password, nick) {
      yield this.create({
        userid: userid,
        password: password,
        nick: nick
      })
    }
   
  ...

• 그리고, xyz/app/Http/Controllers/Mgmt/AdminController.js 에 다음을 추가한다.

  ...
   
    // 관리자 추가
    * insert (request, response) {
      let userid = request.input('userid')
      let passwd1 = request.input('passwd1')
      let passwd2 = request.input('passwd2')
      let nick = request.input('nick')
   
      if (passwd1 != passwd2) {
        response.redirect('/mgmt/admin')
        return
      }
      yield Admin.insert(userid, passwd1, nick)
      // response.redirect('/mgmt/admin')
      response.route('mgmt_admin')
    }
   
  ...

• xyz/app/Http/routes.js 에서 mgmt 그룹안에 다음을 추가한다.

    Route.post('/admin/insert', 'Mgmt/AdminController.insert').as('mgmt_admin_insert')

• 코드 작성은 완료되었으니, 실제 화면에서 관리자를 등록해보면 목록에 표시되는 것을 볼 수 있을 것이다.