(AdonisJs 4.0 Tutorial) 관리자 추가하기

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

  ...
   
  <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.edge

  <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/Controllers/Http/Mgmt/AdminController.js 에 다음 코드를 추가한다.

  ...
   
    // 관리자 추가 폼
    insert_form ({view}) {
      return view.render('mgmt.admin.insert_form')
    }
   
  ...

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

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

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

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

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

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

  ...
   
    // 관리자 추가
    async 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) {
        return response.redirect('/mgmt/admin')
      }
      await Admin.insert(userid, passwd1, nick)
      // return response.redirect('/mgmt/admin')
      return response.route('mgmt_admin')
    }
   
  ...

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

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

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