【プログラミング】PHPとMySQLで作るメモアプリ
今回は、PHPとMySQLを使ったメモアプリの解説をしていきます。
※技術的な話はあまりしないので、PHPとMySQLに関する基礎知識がある前提で解説します。
PHPの基礎を学びたい方は、Udemy PHP おすすめコースを参考にしてみてください。
メモアプリがどのような感じなのかを動画で載せておきますね。
(html,cssは適当なんで、そこはご了承ください、、)
今回は、システム等の説明なので、動画のメモアプリと全く同じにはなりません。
以下では、メモアプリの仕組みや実際のコーディングなどについてを説明します。
では、いってみましょう。
実装手順
必要な機能
まず、メモアプリを作る上で、どのような機能が必要になるのかを書き出してみます。
- 新規のメモを入力する機能
- メモの一覧を表示する機能
- メモを編集する機能
- メモを削除する機能
このような機能が必要そうですね。
では、次の章で、これらの機能をどうのように実装するのかを説明します。
準備
よし、じゃあ機能を実装しよう!となる前に、簡単にでいいので、各ページがどのようにつながるのかをイメージしていきます。
最初のうちにページごとのつながりをイメージしていたほうが効率よくコーディングできます。
今回は、下の図のような感じで各ページを作っていきます。
こんな感じでイメージできたので、次の章でいよいよ各機能を実装していきます。
MySQL
今回は、new_dbというデータベースを作成し、その中で、memosというテーブルを作成、使用します。
また、今回はデータベースに、下の3つを保管します。
- メモのID
- メモの内容
- メモを作成した日時
つまり、memosテーブルの中に、id, memo, created_atという3つのカラムを作成します。
自分が区別できるのであればカラムの名前は自由に決めてもらって大丈夫です。
また、idカラムはオートインクリメントを設定しておきます。
データ型とかはこんな感じです。
メモの入力&保管
まず、入力画面をつくるところから始めます。
ここはで適当にinput.htmlという名前でHTMLファイルを作成して、formタグの中にtextareaタグを作り、その内容を次のページに送ります。
1 2 3 4 5 |
<form action="input_do.php" method="POST"> <textarea name="newText" cols="50" rows="15" placeholder="メモを入力してください"></textarea> <br> <input type="submit" value="登録する"> </form> |
このようにコードを書くことで、メモの内容を次のページに送ることができます。
では、メモの内容を受け取るページをinput_do.phpという名前で作ります。
input_do.phpでは、メモの内容を受け取った後、これをデータベースに保管するところまでやります。
まず、下のようなコードを打ち込みます。
1 2 3 4 5 6 |
<?php $db = new PDO('mysql:dbname=new_db;host=127.0.0.1;charset=utf8', 'root', '12345'); $statement = $db->prepare('INSERT INTO memos SET memo=?, created_at=NOW()'); $statement->execute(array($_POST['newText'])); header('Location: view.php'); ?> |
では、こちらのコードを解説していきますね。
最初にある、$dbでは、PHPとMySQLを接続をしています。
どのように引数を設定しているのかは割愛します。
(過去にぼくが簡単にメモを取っているので、ツイッターで #PHPSQLめもめも とタグを検索してもらえると見れると思います。)
その下にある2行でSQLを実行しています。
実行したSQL文を見てみると、 INSERT INTO memos SET memo=?, created_at=NOW(); となっており、 ? には、 $_POST{'newText'] の値が代入されていますね。
この、 $_POST['newText'] は前のページのformタグから送られてきたメモの内容を示しています。
つまり、送られてきたメモの内容をデータベースのmemoカラムに保管しているということですね。
ちなみに、created_at に代入しているNOW()は、SQLを実行したそのときの時間を出力する関数です。
ここまででメモの内容をデータベースに保管することができたので、次は一覧ページを作成します。
(input_do.phpの最後の方では、一覧ページを作成したことを前提としてheader関数でそのページにジャンプさせています。)
メモ一覧を表示
メモの一覧を表示するページを、view.phpという名前で作成します。
コードは下のようになります。
1 2 3 4 5 6 7 8 9 10 11 |
<?php $db = new PDO('mysql:dbname=new_db;host=127.0.0.1;charset=utf8', 'root', '12345'); $memos = $db->query('SELECT * FROM memos ORDER BY id DESC'); while ($memo = $memos->fetch() ): ?> <pre> <h2><a href="view_more.php?id=<?php echo $memo['id'] ?>"><?php echo $memo['memo']; ?></a></h2> <time><strong><?php echo '登録日 : '. $memo['created_at']; ?></strong></time> </pre> <hr> <?php endwhile ?> |
最初のphpタグの中では、データベースに接続してSQL文でIDを降順に並べた後、すべてのカラムを取り出しています。
while ($memo = $memos->fetch()):
を使って、カラムの中から1行ずつレコードを取り出すということをループさせています。
レコードがなくなったらfalseを返すので、ループを抜け出します。
ここで、memoの中身を出力している部分に注目してほしいのですが、
1 |
<h2><a href="view_more.php?id=<?php echo $memo['id'] ?>"><?php echo $memo['memo']; ?></a></h2> |
これは、aタグで囲んでいるので、リンクが貼られていますね。
これを使うことでメモの詳細を見ることができます。
詳細ページでは、そのメモの編集や削除を行います。
href属性をみてもらえればわかるように、クリックしたメモのidをURLパラメーターにしてそのページにジャンプしていますね。
こうすることで、どのメモをクリックしたのか、という情報を次のページに引き継ぐことができます。
メモ詳細を表示
その詳細ページにview_more.phpという名前をつけているので、次はこちらのページのコードを見ていきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php $db = new PDO('mysql:dbname=new_db;host=127.0.0.1;charset=utf8', 'root', '12345'); $id = $_GET['id']; $memos = $db->prepare('SELECT * FROM memos WHERE id=?'); $memos->bindParam(1, $id, PDO::PARAM_INT); $memos->execute(); $memo = $memos->fetch(); ?> <pre> <h3><?php echo $memo['memo']; ?></h3> <time><strong><?php echo '登録日 : '. $memo['created_at']; ?></strong></time> </pre> <p><a href="edit.php?id=<?php echo $id ?>">編集する</a> | <a href="delete.php?id=<?php echo $id ?>">削除する</a> | <a href="view.php">戻る</a></p> |
まず、頭の部分ではview.phpでからURLパラメータとして送られてきたメモのID情報を受け取っています。
次に、受け取ったID情報をもとに、データベースからそのIDのレコードを取ってきていますね。
真ん中あたりのpreタグの中で、さきほど取ってきたレコードのmemoカラムとcreated_atカラムの値を出力していることがわかると思います。
ここまでで、view.phpでクリックしたメモの詳細を表示することができましたので、次はメモの編集と削除をしていきます。
メモの編集&削除
メモの編集に関しては、新規でメモを作成したときのように、編集内容を書くページとその内容をデータベースに送るページをそれぞれ別々に作っていきます。
まず、編集ページは以下のようなコードになります。
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php $db = new PDO('mysql:dbname=new_db;host=127.0.0.1;charset=utf8', 'root', '12345'); $memos = $db->prepare('SELECT * FROM memos WHERE id=?'); $memos->bindParam(1, $_GET['id'], PDO::PARAM_INT); $memos->execute(); $memo = $memos->fetch(); ?> <form action="edit_do.php" method="POST"> <input type="hidden" name="id" value="<?php echo $_GET['id'] ?>"> <textarea cols='50' rows="10" name="memo"><?php echo $memo['memo'] ?></textarea> <p><input type="submit" value="登録する"></p> </form> |
ここでも、前の方で話したことと同じように、編集したいメモのID情報をURLパラメータとしてedit.phpに送っています。
メモの情報を引っ張ってくることで、編集するときに編集するメモの内容をformタグの中に表示させることができます。
実際にSQLを操作するページは、edeit_do.phpという名前にして、そこに新しいメモの内容とそのメモのIDを送っています。
1 2 3 4 5 6 7 8 9 10 11 |
<?php $db = new PDO('mysql:dbname=new_db;host=127.0.0.1;charset=utf8', 'root', '12345'); if (isset($_POST['id']) && is_numeric($_POST['id'])) { $value = $_POST['memo']; $id = $_POST['id']; $statement = $db->prepare('UPDATE memos SET memo=? WHERE id=?'); $statement->execute(array($value, $id)); } ?> <p>編集しました。</p> <p><a href="view.php">戻る</a></p> |
上のように、SQLを
UPDATE memos SET memo=? WHERE id=?;として、それぞれの?に新しいメモの内容とそのメモのIDを指定してあげればメモを編集することができます。
では、最後にメモの削除をしていきます。
削除するページのコードはこのようになります。
1 2 3 4 5 6 7 8 9 10 11 |
<?php $db = new PDO('mysql:dbname=new_db;host=127.0.0.1;charset=utf8', 'root', '12345'); if (isset($_GET['id']) && is_numeric($_GET['id'])) { $id = $_GET['id']; $memos = $db->prepare('DELETE FROM memos WHERE id=?'); $memos->bindParam(1, $id, PDO::PARAM_INT); $memos->execute(); echo '削除しました。'; } ?> <a href="view.php">戻る</a></p> |
このようにして、view_more.phpから、URLパラメータで送られてきたメモのIDを指定してデータベースからそのIDのレコードごと削除しています。
これで削除は完了です。
おわりに
アウトプットのつもりでこの記事を書いていたのですが、文面でコード等を説明することってめちゃくちゃ難しいですね、、、
まあ、一応は活動記として書いているので大目に見てほしいです、、
ただ、メモアプリ自体は難しいことではなく、PHPとSQLの基礎事項を学習した後に軽いアウトプットとしては最適だと思います。
私自身は、このメモアプリ等はUdemyのPHPとDBの講義をみて学習しましたので、興味がある方はそちらの方を見て学習することもありだと思います。
では、今回はここまでとします。
お疲れさまでした。