前回はHTMLでユーザーからデータを受け取りましたね?
今回からはそのデータをデータベースと呼ばれるデータの塊に登録して、必要に応じて使ったりしていきます。
これはどんなWebアプリでも使う技術なので、まさにキモですね。
ただ、自分で1からデータベースツールを導入するにはとても難しい。
そこでまたしてもCloud9の出番になります。実はCloud9を使う事でブラウザだけでデータベースを使うことができるようになってしまうんです。
今日のレッスンはCloud9でデータベースを使うための準備編になります。
動画解説はコチラ
もしWebアプリの仕組みを見ていない人は事前にWebアプリの仕組みを勉強してもらうとスムーズですね。
復習
データベースとは
まずは少し復習しましょう。データベースとはデータを整理して保存しておく入れ物になります。
こういった表形式でデータを整理しています。
MicroSoftのアクセスも同じくデータベースです。
![スクリーンショット 2017-05-18 12.20.38.png スクリーンショット 2017 05 18 12 20 38](/wp-content/uploads/2017/05/51d55012da4a16d4a03df96a00ef7da5.png)
Cloud9でMySQLを使う
データベースを起動する
いつものCloud9のメイン画面。
オレンジの部分に注目。そして一番左の ~bash ・・・のタブをクリック。
![スクリーンショット 2017-05-18 12.22.57.png スクリーンショット 2017 05 18 12 22 57](/wp-content/uploads/2017/05/c74818f69298ab07d21f045a370e723e.png)
すると
自分で決めたユーザーネーム: ~/ workspace $
となっていますね?ここから2つだけコマンド操作が入りますが、コピペで対応できるのでがんばって付いてきてくださいね。
もし、コマンドで躓いてしまった時は僕のLINE@から遠慮なく質問してもらってOKです。
では$に続いて
mysql-ctl start
をコピペしてください。できたらEnterを押して実行します。
![スクリーンショット 2017-05-18 12.23.18.png スクリーンショット 2017 05 18 12 23 18](/wp-content/uploads/2017/05/9b06f862a0ca007ae8e13081a787e8d1.png)
このコマンドでMySQLが作動しますね。英語でも書いてくれてます。
データベースを操作するツールをインストール
続きまして、MySQLをブラウザ上で操作できる[phpMyAdmin]というツールをインストールします。
phpmyadmin-ctl install
を入力してEnter。
![スクリーンショット 2017-05-18 12.40.24.png スクリーンショット 2017 05 18 12 40 24](/wp-content/uploads/2017/05/dc27ab756942694d670834cbfe83a3e3.png)
この画面になったらインストールOK!
![スクリーンショット 2017-05-18 12.49.52.png スクリーンショット 2017 05 18 12 49 52](/wp-content/uploads/2017/05/dc847c4e5e2e2b062b030a6386b3880d.png)
phpMyAdminをインストールするとMySQLが止まってしまうので、再度
mysql-ctl start
をコピペ → Enterを押して実行します。
ツールを使いデータベースを作成する
さて、ここまでできたらphpMyAdminにアクセスしてデータベースを作っていきましょうね。
![スクリーンショット 2017-05-18 12.54.50.png スクリーンショット 2017 05 18 12 54 50](/wp-content/uploads/2017/05/76f8f216d04ecb38952d56ced358800b.png)
今、こんな状態だと思うので赤い部分をコピペしてブラウザで開きましょう。すると
![スクリーンショット 2017-05-18 12.53.11.png スクリーンショット 2017 05 18 12 53 11](/wp-content/uploads/2017/05/915d7c6fd1e2192869aa27615c3c3a95-1.png)
こんな画面になるので、最初に決めたユーザー名を入力。パスワードは空でOKです。そして実行をクリック。
するとphpMyAdminの管理画面に入れるので、練習用のデータベースを作成していきますよ。
![スクリーンショット 2017-05-18 12.59.35.png スクリーンショット 2017 05 18 12 59 35](/wp-content/uploads/2017/05/1826f18b525ca16675b2f581d7cbf544.png)
管理画面に入ったら「データベース」のタブをクリック。
![スクリーンショット 2017-05-18 13.10.34.png スクリーンショット 2017 05 18 13 10 34](/wp-content/uploads/2017/05/f62dbe439c32eb39cc1868ce019e6002.png)
今回は名前をtestとして、文字コードはutf8_general_ciを選択。
![スクリーンショット 2017-05-18 13.17.35.png スクリーンショット 2017 05 18 13 17 35](/wp-content/uploads/2017/05/cd0a0c403e732e8c3898337c3aff18d2.png)
画面左端に作成したデータベースが出てくるので、クリックで選択します。
そして次はデータベースの中に*テーブルを作成します。
つまりデータベース = テーブルの集まりってことです!
![スクリーンショット 2017-05-18 13.18.34.png スクリーンショット 2017 05 18 13 18 34](/wp-content/uploads/2017/05/d8949d302fb470b03db9395f8bb4ce01.png)
じゃあテーブル名を name にしてカラム(列)の数を2にしましょう。そうすると↓の画面になるかと思います。
![](/wp-content/uploads/2017/05/566f846f3c5cce59830983e0186402c6.jpeg)
まず上段の設定からやりましょう。これは何のために作成するかと言うと登録した順番を記録するためです。
だからここでは名前が登録されると自動的に番号が付くような設定にしていきますよ。
- 名前 = id
- データ型 = int
- A.I = チェックを入れる
では次に名前を入れる部分を設定していきますよ。
- 名前 = uname
- データ型 = varchar
- 長さ = 100
- 照合順序 = utf8_general_ci
といった具合に設定してくださいね。最後に保存をクリックすればOKです。
![スクリーンショット 2017-05-18 19.44.27.png スクリーンショット 2017 05 18 19 44 27](/wp-content/uploads/2017/05/8d19b2cb9977ae8397e65585630d31ef.png)
データベースの準備は以上で終了です!お疲れ様でした。
次回予告
次回は準備したデータベースに名前を登録していきましょう!
次はPHPがメインになるので、お楽しみに!