【WordPress】phpで自作の掲示板を作成してみよう！
みなさんはTwitterやInstagramなどを利用したことがありますか？
TwitterやInstagramはSNSとして若者の間では人気なアプリとなっています。
自分が今何しているのかを投稿できたり、友達や有名人が今にをしているのかの情報を取得できたりするオシャレなアプリですよね。
実は、SNSアプリの機能は掲示板と少し似ています。
例えば、投稿した画面を画面に表示したり、今まで投稿した内容を画面に表示する内容は掲示板とほとんど同じです。
その為、今回はTwitterやInstagramの土台ともなっている掲示板を自作で作成していきます。
目次
入力した内容を投稿する
掲示板の画面を作成する
まずは掲示板の画面のデザインを作成します。
掲示板のphpファイル(page-keijiban.php)を作成し、コードは下記のようになります。
page-keijiban.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head><title>掲示板</title></head> <body> <p>掲示板</p> <form action="" method="post"> <p>件名:</p><br> <input type="text" name="subject"><br><br> <p>内容:</p><br> <textarea name="contents" rows="8" cols="40"> </textarea><br><br> <input type="submit" name="btn1" value="投稿する"/> </form> <p>投稿結果</p><br> </body> </html> |
出力結果
掲示板の画面の作成は完了しました。
入力した内容を画面に表示する
続いて入力した内容を画面に表示するようコードを修正していきます。
掲示板のphpファイル(page-keijiban.php)を下記のように修正します。
page-keijiban.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<html> <head><title>掲示板</title></head> <body> <p>掲示板</p> <form method="POST" action=""> <input type="text" name="subject"><br><br> <textarea name="contents" rows="8" cols="40"> </textarea><br><br> <input type="submit" name="btn1" value="投稿する"> </form> <p>投稿結果</p><br> <?php $subject = $_POST['subject']; $contents = $_POST['contents']; print('<p>投稿者:'.$subject.'</p>'); print('<p>内容:</p>'); print('<p>'.$contents.'</p>'); ?> </body> </html> |
出力結果
投稿ボタンを押下すると、入力した内容が投稿結果に反映されます。
これで画面に入力した内容を投稿することができました。
phpmyadminでテーブルを作成する
続いて入力した内容をデータベースに格納できるようにテーブルを作成します。
phpMyAdminをインストールする
まずはphpmyadminをインストールしましょう。
WordPressの場合はレンタルサーバーにphpMyAdminがありますのでそれぞれのサーバーの設定画面を確認してみてください。
phpMyAdminでテーブルを作成する
phpMyAdminをインストールできましたら、phpMyAdminにログインし、newボタンを押します。
phpMyAdminログイン後
左にあるNewボタン押下
newボタンを押したら下記のようにテーブルを設定して作成し、「保存する」を押下するとテーブルが作成されます。
入力した内容をSQLで操作する
入力した内容をデータベースへ保存する
入力した内容をデータベースへ保存するには＄wpdbのinsertを使用します。
掲示板のphpファイル(page-keijiban.php)を下記のように修正していきます。
page-keijiban.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<html> <head><title>掲示板</title></head> <body> <p>掲示板</p> <form action="" method="post"> <p>件名:</p><br> <input type="text" name="subject"><br><br> <p>内容:</p><br> <textarea name="contents" rows="8" cols="40"> </textarea><br><br> <input type="submit" name="btn1" value="投稿する"/> </form> <p>投稿結果</p><br> </body> </html> <?php $no = 0; $subject = $_POST["subject"]; $contents = $_POST["contents"]; if ($_POST["subject"]!="" && $_POST["contents"]!="") { $res = $wpdb->insert('keijiban', array('subject' => $subject, 'content' => $contents), array('%s', '%s')); echo('<p>投稿者:'.$subject.'</p>'); echo('<p>内容:</p>'); echo('<p>'.$contents.'</p>'); } ?> |
inserすることで入力した内容をkeijibanのテーブルの中に保存していくようになります。
また、他のアプリでデータベースをつなげるにはアドレスとユーザー名、パスワードなどを入力する必要がありますが、WordPressの場合は既にデータベースと繋がっているので接続するためのアドレス等をコードに記載する必要はありません。
データベースで保存した値を取得する
データベースで保存した値を取得するには＄wpdbのget_result()の中にselect文を使用します。
掲示板のphpファイル(page-keijiban.php)を下記のように修正していきます。
page-keijiban.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<html> <head><title>掲示板</title></head> <body> <p>掲示板</p> <form action="" method="post"> <p>件名:</p><br> <input type="text" name="subject"><br><br> <p>内容:</p><br> <textarea name="contents" rows="8" cols="40"> </textarea><br><br> <input type="submit" name="btn1" value="投稿する"/> </form> <p>投稿結果</p><br> </body> </html> <?php $no = 0; $subject = $_POST["subject"]; $contents = $_POST["contents"]; if ($_POST["subject"]!="" && $_POST["contents"]!="") { $res = $wpdb->insert('keijiban', array('subject' => $subject, 'content' => $contents), array('%s', '%s')); } $results = $wpdb->get_results("SELECT subject, content FROM keijiban"); foreach ($results as $row) { if ($no == 0) { $no_start = 1; $no = $no_start; } echo $no; echo '<br>'; echo "件名：".$row->subject; echo '<br>'; echo "内容：".$row->content; echo '<br>'; echo '<br>'; $no = $no + 1; } ?> |
出力結果
データベース結果
$wpdbのget_result()のselect文を使うことでkeijibanというテーブルの中にあるsubjectとcontentに保存されてる値を取得しています。
また、foreachを使ってselect文で取得した値を繰り返して取り出して表示しています。
これで自作の掲示板が完成しました。
ST
株式会社flyhawkのSTです。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語：swift、JS系(Node.js等)。好きなサーバー：AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。
