第3回鹿児島node.jsの会資料_内村

1,178 views

Published on

鹿児島Node.jsの会第3回資料です。Mysql(sequelize)を使った簡単なフォーム作成ができるないようになっています。

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,178
On SlideShare
0
From Embeds
0
Number of Embeds
417
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

第3回鹿児島node.jsの会資料_内村

  1. 1. 第3回勉強会 MySQLでデータベース操作入門 ~Node.js編~ 内村 康一
  2. 2. 今日の目次 第1章 XAMPP&Sequelizeで環境を整えよう 第2章 Sequelizeを触ってみよう 第3章 会員フォームを作ってみよう
  3. 3. 第1章 第1章  XAMPP&Sequelizeで環境を整えよう
  4. 4. 第1章 XAMPP&Sequelizeで環境を整えよう -前置きXAMPPをインストールするのは・・・ Apacheを使うためではありません。 MySQLの環境を簡単に構築するためです。 せっかくNode.jsを使うのなら実際に公開する ときはApacheでなくNginxを使いましょう!!
  5. 5. XAMPPのインストール1 1.XAMPPのインストール Windowsの方は(http://www.apachefriends.org/jp/xamppwindows.html)から、 Macの方は(http://www.apachefriends.org/jp/xamppmacosx.html)からインストーラをダウンロードして下さい。
  6. 6. XAMPPのインストール2 インストールが完了すると 、右の画面が出ますので MySQLの右側の「Start」を クリックしてMySQLを起動 します。 これでOK
  7. 7. XAMPPのインストール2 http://localhost/xampp/ を開き、メニューの 「セキュリティ」をクリック。 「MySQLユーザルートにパスワードがありません。」 の部分をクリック。 rootのパスワード入力画面が出るので、 パスワードを2回入力。 これで完了です。
  8. 8. Sequelizeのインストール 例によってNPMを使います。コマンドプロンプト( ターミナル)で作業フォルダに移動して、 npm install sequelize これでOK。
  9. 9. app.jsに追記 app.jsに以下の内容を追記していきます。 1.上のほうのrequireが並んでいるところに , Sequelize = require(‘sequelize’) 2.app.configure(‘development’), function(){ … }); の後に var sequelize = new Sequelize(‘kagonode’, ‘root’, ‘password’, { host: “localhost”, port: 3306 さっきXAMPPで指定したパスワード }); を追記します。これで下準備はOK。
  10. 10. 第2章 第2章 Sequelizeを触ってみよう
  11. 11. まずはapp.jsに書いていきます <<app.js>> var User = sequelize.define(‘test’, { id: Sequelize.INTEGER, name: Sequelize.STRING, age: Sequelize.INTEGER, sex: Sequelize.BOOLEAN }); これでデータベースの設定が完了!
  12. 12. 次はMySQLデータベースを作成します コマンドプロンプトを開いて以下を入力。 mysql –u root –p○○(○○はパスワード) 次に create database kagonode これでデータベースが出来ました。次にテーブルを作ります。 create table users ( 複数形になることに注意! id int primary key auto_increment, name varchar(16), age int, sex boolean, この2行は必須です! createdat date, updatedat date );
  13. 13. MySQLにデータを追加します。 insert into users (name, age, sex) values (“kagonma”, “16”, true); もいっちょ insert into users (name,age,sex) values(“kagojo”, “18”, false); これでOK。
  14. 14. 再びapp.jsをいじります。 localhost:3000/usersにアクセスしたときに、 idが1のデータの内容を表示するようにします。 <<app.js>> app.get(‘/users’, function(req, res){ User.find({where: {id:1})).success( function(data){ res.render(‘user.ejs’, { id: data.id, name: data.name, age: data.age, sex: data.sex}); }); }); これでOK
  15. 15. user.ejsを作成 ささっとuser.ejsを作っちゃいます。 <<user.ejs>> <body> <p>ID:<%= id %></p> <p>name:<%= name %></p> <p>age:<%= age %></p> <p>sex:<%= sex %></p> </body>
  16. 16. さあ、アクセスしましょう MySQLは起動してますか?では、 「http://localhost:3000/users」にアクセス! 以下の内容が表示されましたか? ID: 1 name: Kagonma age: 16 sex: true
  17. 17. 第3章 第3章 会員フォームを作ってみよう
  18. 18. アプリの仕様 会員フォームに入力して送信すると、 登録された会員全員のデータテーブルが表示される 簡単なアプリを作ってみます。
  19. 19. これまでの応用で簡単に出来ます。 それでは会員フォームを作ってみましょう。 <<app.js>> var Member = sequelize.define(‘member’, { id: Sequelize.INTEGER, name: Sequelize.STRING, age: Sequelize.INTEGER, address: Sequelize.STRING, phone: Sequelize.STRING }); DBの宣言部分です。
  20. 20. app.jsを加工 <<app.js>> app.post(‘/regist’, function(req, res){ var SourceCode = Member.build({ name : req.body.name, age : req.body.age, address : req.body.address, phone : req.body.phone }); SourceCode.save().success(function(){ console.log(‘DB save success’); res.render(‘success.ejs’, {}); }); }); フォームから送られた データをDBに書き込んでいます。
  21. 21. 更にapp.jsを加工 <<app.js>> app.get(‘/member’, function(req, res){ Members.findAll().success(function (data){ var ids = []; localhost:3000/members var names = []; var ages = []; にアクセスしたときに、 var addresses = []; メンバーの一覧を返します。 var phones = []; data.forEach(function(dat){ ids.push(dat.id); names.push(dat.name); ages.push(dat.age); addresses.push(dat.address); phones.push(dat.phone); }); res.render(‘member.ejs’, {id: ids, name: names, age: ages, address: addresses, phone: phones}); }); });
  22. 22. これも忘れずに! <<app.js>> app.get(‘/regist’, function(req, res){ res.render(‘regist.ejs, {}); }); これでapp.js側の記述は大丈夫です。 後はejsを書いていきます。
  23. 23. regist.ejsを作成します。 <<regist.ejs>> <body> <form method=“post” action=“/regist” > name:<input type=“text” name=“name”><br /> age:<input type =“text” name=“age”><br /> address:<input type=“text” name=“address”><br /> phone:<input type=“text” name=“phone”><br /> <input type=“submit” value=“submit” /> </form> </body>
  24. 24. member.ejsを作成します。 <<member.ejs>> <body> <table> <% for(var I = 0; i<id.length; i++){ %> <tr> <td><%= id[i] %></td> <td><%= name[i] %></td> <td><%= age[i] %></td> <td><%= address[i] %></td> <td><%= phone[i] %></td> </tr> <% } %> </table> </body>
  25. 25. success.ejsを作成します。 <<success.ejs>> <body> <p> データが登録されました。 </p> </body>
  26. 26. 最後にMySQLのテーブルを作成します。 コマンドプロンプト(ターミナル)で、 mysql –u root –p○○を入力。(○○はパスワード) use kagonodeでデータベースを選択した後、以下を記述。 create table members ( id int primary key auto_increment, name varchar(16), age int, address varchar(32), phone varchar(16), createdat date, updatedat date );
  27. 27. さあ、準備が整いました。 「http://localhost:3000/regist」にアクセスして、 必要な情報を入力して送信してみましょう。 「データが登録されました。」と表示されたら、 「 http://localhost:3000/member」に アクセスしてみましょう。 入力したデータが蓄積されていきますね!!
  28. 28. 今後の予定 • 第4回鹿児島Node.jsの会勉強会  今年中にもう一回やりたいと思ってます。 詳細は未定です。  もし希望があればセッション周りを  私が担当したいと思います。
  29. 29. ありがとうございました。 ご清聴ありがとうございました。

×