adonis12 AdonisJs 4.0 Tutorial 본 튜토리얼에서는 대부분의 사이트에 기본적으로 필요한 기능을 익히는데 목적이 있습니다. 예제에서는 관리자로 로그인/로그아웃하고, 관리자를 등록/수정/삭제 등을 할 수 있는 기본적인 기능을 포함하는 예제를 만들어봅니다. 그리고, 비밀번호의 단방향 암호화(SHA-256)를 해보고, 개인정보(이름,전화번호,이메일 등)을 AES-256 로 암호화하여 DBMS에 저장/관리하는 기능도 포함됩니다. 1. 시작 2. 첫페이지 만들어보기 3. 모델 생성 4. 관리자 목록 보여주기 5. 관리자 추가하기 6. 관리자 비밀번호 변경하기 7. 관리자 수정하기 8. 관리자 삭제하기 9. 비밀번호 단방향암호화(SHA256) 하기 10. 개인정보 양방향암호화(AES256) 하기 11. 로그인/로그아웃 처리하기 Programming/Javascript 2017. 10. 26. (AdonisJs 4.0 Tutorial) 로그인/로그아웃 처리하기 명색이 관리자 화면인데, 아무나 들어와서 조작하면 안되겠지요? 이제는 마지막으로 로그인/로그아웃 처리를 해보겠습니다. 로그인/로그아웃은 세션을 이용해서 구현합니다. 로그인 화면을 구성합니다. xyz/resources/views/mgmt/index.edge 을 작성합니다. {{ csrfField() }} 아이디 비밀번호 xyz/app/Controllers/Http/Mgmt/MainController.js 를 생성합니다. 'use strict' class MainController { index ({view}) { return view.render('mgmt/index') } } module.exports = MainController xyz/start/routes.js 다음을 추가합니다. Route.get.. Programming/Javascript 2017. 10. 25. (AdonisJs 4.0 Tutorial) 개인정보 양방향암호화(AES256) 하기 이 예제에는 개인정보 데이터가 없긴 하지만, 별명(Nick)을 개인정보라 간주하고 암호화를 진행해보겠습니다. Adonis 에서는 데이터 암호화를 위해서 Encryption 모듈을 제공하고 있습니다. 데이터를 암호화하고 다시 풀려면, Key 가 있어야 합니다. 이 Key 를 .env 파일에 APP_KEY 로 이미 정의되어 있습니다. xyz/app/Models/Admin.js 에 다음을 추가한다. const Encryption = use('Encryption') ... getNick(nick) { return Encryption.decrypt(nick) } setNick(nick) { return Encryption.encrypt(nick) } ... DB의 내용을 모두 삭제한 후에, 관리자를 추가해봅니다... Programming/Javascript 2017. 10. 24. (AdonisJs 4.0 Tutorial) 비밀번호 단방향암호화(SHA256) 하기 정보통신망법, 개인정보보호법 등에 의하면 비밀번호는 단방향암호화(SHA256 등), 개인정보는 양방향암호화(AES256 등)를 하도록 되어 있습니다. 지금까지 작성한 예제는 이런 법에 맞지 않아서 서비스할 수 없겠네요. 여기에서는 비밀번호의 단방향 암호화를 구현해보도록 하겠습니다. Adonis 에서는 비밀번호 암호화에 더 좋다고 하는 bctypt를 제공하고 있지만, 이것이 법에 명시되어 있지는 않아서, SHA256 을 사용하겠습니다. 먼저, 기존 DB에 들어있던 사용자 정보를 모두 삭제합시다. $ cd database $ sqlite development.sqlite SQLite version 3.15.0 2016-10-14 10:20:30 Enter ".help" for instructions Ente.. Programming/Javascript 2017. 10. 23. (AdonisJs 4.0 Tutorial) 관리자 삭제하기 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 기능을 모두 작성.. Programming/Javascript 2017. 10. 20. (AdonisJs 4.0 Tutorial) 관리자 수정하기 xyz/resources/views/mgmt/admin/update_form.edge 을 작성한다. × 관리자 수정 {{ csrfField() }} 아이디 별명 (필수) 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(.. Programming/Javascript 2017. 10. 19. (AdonisJs 4.0 Tutorial) 관리자 비밀번호 변경하기 뷰 디렉토리에 xyz/resources/views/mgmt/admin/chg_passwd_form.edge 파일을 생성한다. × 관리자 비밀번호 변경 {{ csrfField() }} 아이디 비밀번호 (필수) 비밀번호 확인 (필수) 컨트롤러(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.toJSO.. Programming/Javascript 2017. 10. 18. (AdonisJs 4.0 Tutorial) 관리자 추가하기 우선 xyz/resources/views/mgmt/admin/index.edge 에 다음을 추가한다. ... 관리자 추가 ... ... // Modal Remote Reload $(document).on('hidden.bs.modal', function (e) { $(e.target).removeData('bs.modal'); }) ... http://localhost:3333/mgmt/admin 을 다시 보면, 관리자 추가 버튼이 새로이 나타날 것이다. 관리자 입력 양식을 만들자. xyz/resources/views/mgmt/admin/insert_form.edge × 관리자 추가 {{ csrfField() }} 아이디 (필수) 비밀번호 (필수) 비밀번호 확인 (필수) 별명 (필수) xyz/Contro.. Programming/Javascript 2017. 10. 17. (AdonisJs 4.0 Tutorial) 관리자 목록 보여주기 xyz/app/Controllers/Http/Mgmt/AdminController.js 파일을 생성한다. > cd xyz xyz> adonis make:controller Mgmt\Admin 'use strict' const Admin = use('App/Models/Admin') class AdminController { // 관리자 목록 async index ({view}) { const admins = await Admin.all() return view.render('mgmt.admin.index', { admins: admins.toJSON() }) } } module.exports = AdminController xyz/resources/views/mgmt/base.edge 파일을 생성한다. .. Programming/Javascript 2017. 10. 16. (AdonisJs 4.0 Tutorial) 모델 생성 Admin 모델을 생성한다. $ adonis make:model Admin xyz/app/Models/Admin.js 파일이 생성된다. 마이그레이션 생성하기 $ adonis make:migration admins create: xyz/database\migrations\1507612187061_admins_schema.js xyz/database\migrations\1507612187061_admins_schema.js 파일을 열어서 아래처럼 수정한다. 'use strict' const Schema = use('Schema') class AdminsSchema extends Schema { up () { this.create('admins', (table) => { table.increments() ta.. Programming/Javascript 2017. 10. 13. (AdonisJs 4.0 Tutorial) 첫페이지 만들어보기 프로젝트 디렉토리 구조 xyz ├── app │ └── Models ├── config ├── database │ └── migrations ├── public ├── resources │ └── views └── start 첫페이지를 변경해보자. 우선 xyz/resources/views/welcome.edge 을 삭제하고 xyz/resources/views/index.edge 을 만든다. My First HTML Page My First HTML Page Main 컨트롤러를 생성한다. (Http Request 선택) $ cd xyz $ adonis make:controller Main ? Generating a controller for ? > For Http Request (엔터를 입력한다!!!) F.. Programming/Javascript 2017. 10. 12. (AdonisJs 4.0 Tutorial) 시작 OS는 취향대로 설치하세요. 그런데 왠만하면 Ubuntu Linux 를 설치해주세요. git 와 sqlite3 를 설치합니다. https://git-scm.com/downloads, https://sqlite.org/download.html Node 를 설치합니다. @adonisjs/cli 를 설치합니다. $ npm i -g @adonisjs/cli 새로운 프로젝트를 생성합니다. 프로젝트명은 xyz 로 임시로 정하였습니다. $ adonis new xyz 새로 생성된 프로젝트로 실행해 봅니다. $ cd xyz $ npm i --save sqlite3 $ adonis serve --dev 웹브라우저에서 http://localhost:3333 으로 접속해 봅니다. Programming/Javascript 2017. 10. 11. 이전 1 다음