この記事は約4分で読めます。

【挫折させないWebアプリ講座⑦】Webアプリのキモ。Cloud9のデータベースを準備しよう!

前回はHTMLでユーザーからデータを受け取りましたね?

今回からはそのデータをデータベースと呼ばれるデータの塊に登録して、必要に応じて使ったりしていきます。

これはどんなWebアプリでも使う技術なので、まさにキモですね。

ただ、自分で1からデータベースツールを導入するにはとても難しい。

そこでまたしてもCloud9の出番になります。実はCloud9を使う事でブラウザだけでデータベースを使うことができるようになってしまうんです。

今日のレッスンはCloud9でデータベースを使うための準備編になります。

動画解説はコチラ

もしWebアプリの仕組みを見ていない人は事前にWebアプリの仕組みを勉強してもらうとスムーズですね。

復習

【挫折させないWebアプリ講座①】プログラミング初心者必見!Facebookで学ぶWebアプリの仕組み

2017.05.05

データベースとは

まずは少し復習しましょう。データベースとはデータを整理して保存しておく入れ物になります。

こういった表形式でデータを整理しています。

MicroSoftのアクセスも同じくデータベースです。

スクリーンショット 2017 05 18 12 20 38

Cloud9でMySQLを使う

データベースを起動する

いつものCloud9のメイン画面。

スクリーンショット 2017 05 18 12 12 08
オレンジの部分に注目。そして一番左の ~bash ・・・のタブをクリック。

スクリーンショット 2017 05 18 12 22 57

すると

自分で決めたユーザーネーム: ~/ workspace $

となっていますね?ここから2つだけコマンド操作が入りますが、コピペで対応できるのでがんばって付いてきてくださいね。

もし、コマンドで躓いてしまった時は僕のLINE@から遠慮なく質問してもらってOKです。

では$に続いて

mysql-ctl start

をコピペしてください。できたらEnterを押して実行します。

スクリーンショット 2017 05 18 12 23 18

このコマンドでMySQLが作動しますね。英語でも書いてくれてます。

データベースを操作するツールをインストール

続きまして、MySQLをブラウザ上で操作できる[phpMyAdmin]というツールをインストールします。

phpmyadmin-ctl install

を入力してEnter。

スクリーンショット 2017 05 18 12 40 24

この画面になったらインストールOK!

スクリーンショット 2017 05 18 12 49 52

phpMyAdminをインストールするとMySQLが止まってしまうので、再度

mysql-ctl start

をコピペ → Enterを押して実行します。

ツールを使いデータベースを作成する

さて、ここまでできたらphpMyAdminにアクセスしてデータベースを作っていきましょうね。

スクリーンショット 2017 05 18 12 54 50

今、こんな状態だと思うので赤い部分をコピペしてブラウザで開きましょう。すると

スクリーンショット 2017 05 18 12 53 11

こんな画面になるので、最初に決めたユーザー名を入力。パスワードは空でOKです。そして実行をクリック。

するとphpMyAdminの管理画面に入れるので、練習用のデータベースを作成していきますよ。

スクリーンショット 2017 05 18 12 59 35

管理画面に入ったら「データベース」のタブをクリック。

スクリーンショット 2017 05 18 13 10 34

今回は名前をtestとして、文字コードはutf8_general_ciを選択。

文字コードとはパソコン語を各言語に変換する方法だと思ってください。なお、日本語はutf8_general_ciを選んでおけば文字化けする心配はないです。
スクリーンショット 2017 05 18 13 17 35

画面左端に作成したデータベースが出てくるので、クリックで選択します。

そして次はデータベースの中に*テーブルを作成します。

テーブルとは表のことで、この記事の最初にあった表がまさにテーブルになります。

つまりデータベース = テーブルの集まりってことです!

スクリーンショット 2017 05 18 13 18 34

じゃあテーブル名を name にしてカラム(列)の数を2にしましょう。そうすると↓の画面になるかと思います。

まず上段の設定からやりましょう。これは何のために作成するかと言うと登録した順番を記録するためです。

だからここでは名前が登録されると自動的に番号が付くような設定にしていきますよ。

  • 名前 = id
  • データ型 = int
  • A.I = チェックを入れる

では次に名前を入れる部分を設定していきますよ。

  • 名前 = uname
  • データ型 = varchar
  • 長さ = 100
  • 照合順序 = utf8_general_ci

といった具合に設定してくださいね。最後に保存をクリックすればOKです。

idでチェックを入れたA.Iとはオートインクリメントの事で、データベースに名前を登録しなくても自動的に通し番号を付けてくれる非常に便利な機能なので、頭の片隅に入れておきましょう。
スクリーンショット 2017 05 18 19 44 27

データベースの準備は以上で終了です!お疲れ様でした。

次回予告

次回は準備したデータベースに名前を登録していきましょう!

次はPHPがメインになるので、お楽しみに!

この記事をシェアする