본 튜토리얼에서는 대부분의 사이트에 기본적으로 필요한 기능을 익히는데 목적이 있습니다. 예제에서는 관리자로 로그인/로그아웃하고, 관리자를 등록/수정/삭제 등을 할 수 있는 기본적인 기능을 포함하는 예제를 만들어봅니다. 그리고, 비밀번호의 단방향 암호화(SHA-256)를 해보고, 개인정보(이름,전화번호,이메일 등)을 AES-256 로 암호화하여 DBMS에 저장/관리하는 기능도 포함됩니다.

1. 시작
2. 첫페이지 만들어보기
3. 모델 생성
4. 관리자 목록 보여주기
5. 관리자 추가하기
6. 관리자 비밀번호 변경하기
7. 관리자 수정하기
8. 관리자 삭제하기
9. 비밀번호 단방향암호화(SHA256) 하기
10. 개인정보 양방향암호화(AES256) 하기
11. 로그인/로그아웃 처리하기

저작자표시 비영리 변경금지

'Framework > AdonisJS' 카테고리의 다른 글

(AdonisJs 4.0 Tutorial) 로그인/로그아웃 처리하기  (0) 2017.10.25
(AdonisJs 4.0 Tutorial) 개인정보 양방향암호화(AES256) 하기  (0) 2017.10.24
(AdonisJs 4.0 Tutorial) 비밀번호 단방향암호화(SHA256) 하기  (0) 2017.10.23
(AdonisJs 4.0 Tutorial) 관리자 삭제하기  (0) 2017.10.20
(AdonisJs 4.0 Tutorial) 관리자 수정하기  (0) 2017.10.19


  • 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 기능을 모두 작성할 수 있게 됩니다. *^^*



저작자표시 비영리 변경금지

'Framework > AdonisJS' 카테고리의 다른 글

(AdonisJs 4.0 Tutorial) 개인정보 양방향암호화(AES256) 하기  (0) 2017.10.24
(AdonisJs 4.0 Tutorial) 비밀번호 단방향암호화(SHA256) 하기  (0) 2017.10.23
(AdonisJs 4.0 Tutorial) 관리자 수정하기  (0) 2017.10.19
(AdonisJs 4.0 Tutorial) 관리자 비밀번호 변경하기  (0) 2017.10.18
(AdonisJs 4.0 Tutorial) 관리자 추가하기  (0) 2017.10.17


  • 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')


저작자표시 비영리 변경금지

'Framework > AdonisJS' 카테고리의 다른 글

(AdonisJs 4.0 Tutorial) 비밀번호 단방향암호화(SHA256) 하기  (0) 2017.10.23
(AdonisJs 4.0 Tutorial) 관리자 삭제하기  (0) 2017.10.20
(AdonisJs 4.0 Tutorial) 관리자 비밀번호 변경하기  (0) 2017.10.18
(AdonisJs 4.0 Tutorial) 관리자 추가하기  (0) 2017.10.17
(AdonisJs 4.0 Tutorial) 관리자 목록 보여주기  (0) 2017.10.16


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


저작자표시 비영리 변경금지

'Framework > AdonisJS' 카테고리의 다른 글

(AdonisJs 4.0 Tutorial) 관리자 수정하기  (0) 2017.10.19
(AdonisJs 4.0 Tutorial) 관리자 비밀번호 변경하기  (0) 2017.10.18
(AdonisJs 4.0 Tutorial) 관리자 목록 보여주기  (0) 2017.10.16
(AdonisJs 4.0 Tutorial) 모델 생성  (0) 2017.10.13
(AdonisJs 4.0 Tutorial) 첫페이지 만들어보기  (0) 2017.10.12

+ Recent posts

티스토리툴바