• xyz/Controllers/Http/Mgmt/AdminController.js 에 다음을 추가한다.
    ...
     
      // 관리자 삭제
      // /mgmt/admin/delete/:id
      async delete ({params, response}) {
        const admin = await Admin.find(params.id)
        await admin.delete()
        return response.route('mgmt_admin')
      }
     
    ...
  • xyz/start/routes.js 에 다음을 추가하고, 관리자 삭제를 해봅니다.
      Route.get('/admin/delete/:id', 'Mgmt/AdminController.delete').as('mgmt_admin_delete')
  • 여기까지 하면, 기본적인 CRUD 기능을 모두 작성할 수 있게 됩니다. *^^*




  • xyz/resources/views/mgmt/admin/update_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="update_form" action="/mgmt/admin/update" method="post">
        {{ csrfField() }}
        <div class="form-group">
          <label>아이디</label>
          <input type="text" name="userid" class="form-control" readonly required pattern="[a-zA-Z0-9]+" value="{{ admin.userid }}"/>
          <input type="hidden" name="id" class="form-control" value="{{ admin.id }}" />
        </div>
        <div class="form-group">
          <label>별명 <small>(필수)</small></label>
          <input type="text" name="nick" class="form-control" required value="{{ admin.nick }}"/>
        </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 에 다음을 추가한다.
    ...
     
      // 관리자 수정 폼
      // /mgnt/admin/update_form/:id
      async update_form ({params, view}) {
        const admin = await Admin.find(params.id)
        return view.render('mgmt/admin/update_form', { admin: admin.toJSON() })
      }
     
    ...
  • xyz/start/routes.js 에 다음을 추가한다.
      Route.get('/admin/update_form/:id', 'Mgmt/AdminController.update_form').as('mgmt_admin_update_form')
  • 이제, 수정 버튼을 클릭하면 수정할 수 있는 폼이 나타나게 될 것이다. 마지막으로 실제로 수정을 처리하는 루틴을 작성하고 라우터에 등록하자.
  • xyz/app/Models/Admin.js 에 다음을 추가한다.
    ...
     
      static async update (id, nick) {
        let admin = await this.find(id)
        admin.nick = nick
        await admin.save()
      }
     
    ...
  • xyz/Controllers/Http/Mgmt/AdminController.js 에 다음을 추가한다.
    ...
     
      // 관리자 수정
      // /mgmt/admin/update
      async update ({request, response}) {
        let id   = request.input('id')
        let nick = request.input('nick')
     
        await Admin.update(id, nick)
        return response.route('mgmt_admin')
      }
     
    ...
  • xyz/start/routes.js 에 다음을 추가하고, 수정 작업을 진행해보자.
      Route.post('/admin/update', 'Mgmt/AdminController.update').as('mgmt_admin_update')



  • 뷰 디렉토리에 xyz/resources/views/mgmt/admin/chg_passwd_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="chg_passwd_form" action="/mgmt/admin/chg_passwd" method="post">
        {{ csrfField() }}
        <div class="form-group">
          <label>아이디</label>
          <input type="text" name="userid" class="form-control" readonly required value="{{ admin.userid }}"/>
          <input type="hidden" name="id" value="{{ admin.id }}" />
        </div>
        <div class="form-group">
          <label>비밀번호 <small>(필수)</small></label>
          <input type="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" style="text-align: right">
          <input class="btn btn-primary" type="submit" value="관리자 비밀번호 변경" />
        </div>
      </form>
    </div>
  • 컨트롤러(xyz/Controllers/Http/Mgmt/AdminController.js)에 다음을 추가한다.
    ...
     
      // 관리자 비밀번호변경 폼
      // /mgnt/admin/chg_passwd_form/:id
      async chg_passwd_form ({params, view}) {
        const admin = await Admin.find(params.id)
        return view.render('mgmt/admin/chg_passwd_form', { admin: admin.toJSON() })
      }
     
    ...
  • 라우터(xyz/start/routes.js)에 다음을 추가한다.
      Route.get('/admin/chg_passwd_form/:id', 'Mgmt/AdminController.chg_passwd_form').as('mgmt_admin_chg_passwd_form')
  • 이제, 비밀번호변경 버튼을 클릭하면 비밀번호변경을 위한 모달 다이얼로그박스가 나타날 것이다.
  • 실제로 비밀번호를 변경하는 작업을 해보자. 우선 모델(xyz/app/Models/Admin.js)에 다음을 추가한다.
      static async change_password (id, passwd) {
        let admin = await this.find(id)
        admin.password = passwd
        await admin.save()
      }
  • 그리고, 컨트롤러(xyz/Controllers/Http/Mgmt/AdminController.js)에 다음을 추가한다.
      // 관리자 비밀번호변경
      // /mgmt/admin/chg_passwd
      async chg_passwd ({request, response}) {
        let id      = request.input('id')
        let passwd1 = request.input('passwd1')
        let passwd2 = request.input('passwd2')
     
        if (passwd1 != passwd2) {
          return response.route('mgmt_admin')
        }
        await Admin.change_password(id, passwd1)
        return response.route('mgmt_admin')
      }
  • 라우터(xyz/start/routes.js)에는 다음을 추가한다.
      Route.post('/admin/chg_passwd', 'Mgmt/AdminController.chg_passwd').as('mgmt_admin_chg_passwd')
  • 비밀번호를 변경해보고, DB의 내용이 잘 반영되었는지 확인해보자.
    $ cd xyz/database
    $ sqlite3 development.sqlite
    sqlite> select * from admins;
    1|testid1|passwd1|nick1
    2|testid2|passwd2|nick2
    3|testid3|passwd3|nick3
    4|testid4|passwd4|nick4
    5|testid5|passwd5|nick5
    6|admin|newpassword|Admin
    sqlite>



  • 우선 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>
     
    ...
  • 관리자 입력 양식을 만들자. 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')
  • 코드 작성은 완료되었으니, 실제 화면에서 관리자를 등록해보면 목록에 표시되는 것을 볼 수 있을 것이다.


+ Recent posts