webデザインでは高品質なWEBサイトをご提供いたします。ホームページ・ランディングページ(LP)制作、サイトリニューアルなど、WEB制作のことならお任せください。第1回2020年01月25日WEBコーディングふらこめfacebookでシェアTwitterでシェアLINEでシェアはてブでシェアこの記事は約31分で読めます。唐突ですがWordPressって便利ですよね。サイト運営が簡単に行えて、プラグインを使えば機能を拡張できるというのも素晴らしい。ブログ機能もあり、訪問者がコメントを投稿できるというのもグッド。今やWordPressは市場の6割近くを占めるCMSとなりました。そこでふと思ったのですが、WordPressのようなコメント機能を作ってみたい!コメントを受け付けたら管理画面で承認したり、削除したり、返信もできたら最高ですね。system)』なるものを作っていこうと思います。WordPressのコメント管理機能をイメージしてくれるとありがたいです。実装する機能は以下の通り。新規管理アカウント取得機能ざっとこんな感じです!コメント欄からコメントを受け付けられるのはもちろんのこと、コメントの管理画面も欲しいところですね。見る人全員が好き勝手管理できたら大変なので、ログイン機能も設置。ついでに新規管理アカウント取得(サインアップ)機能も作ってしまいましょう。最終的には下記のようなファイル構造になります。記念すべき1回目では『コメント投稿機能』を作っていくよ。今回作っていくのは『コメント機能』です。フォームにコメントを入力して送信ボタンを押すと、入力した値をデータベースに保存するプログラムです。第1回目ということで、データベースの作成から見ていきましょう。phpMyAdminでデータベースとテーブルの準備プログラムを制作し始める前に、まずは『ふらこめ』のデータベースとテーブルを用意しよう。ちなみに今回はMAMPを使ってローカル環境で開発しているよ。phpMyAdminにログインして、hurakomeデータベースを作ります。hurakomeデータベースが作成できたら、次に、投稿されたコメントを格納するcom_tableテーブルを作成します。下記の画像を参考に6つのカラムを作成してください。AUTO_INCREMENT,AUTO_INCREMENT=7;各カラムの役割はプログラムを作成する中で説明していきます。phpMyAdminの操作はこれで終了。全体のコード今回のプログラムではデータベースへアクセスすることになるので、プログラムを書き始める前に、接続に必要な情報をこのファイルにまとめておきます。'hurakome';このファイルではデータベースに接続する際に必要となる情報を、変数にまとめています。データベースの情報を変数に格納することで、もし情報が変わったとしても簡単に対処できるようになります。データベース接続時に必要になるのが『ホスト名』『ユーザー名』『パスワード』『データベース名』の4つです。プログラムを設置する環境によって、これらの情報は変わってしまうので、最初に専用のファイルを準備して変数に格納してしまいましょう。環境が変わったとしても、このファイルを修正するだけでいいので管理が非常に楽になります。ファイルの配置db_info.phpが作成できたら、以下のツリー構造のようにディレクトリに配置してください。全体のコードsave_comment.phpを、実際にブラウザで出力するとこのようになります。コメント・お名前・メールアドレスに必要事項を記入して投稿ボタンを押すと、入力した内容がhurakomeデータベースのcom_tableテーブルに保存されます。全体のソースコードを見てみましょう。class="server_error">現在サーバーエラーが発生しています。'入力されていない項目があります。'コメントは1000文字以内でご記入ください。'お名前は15文字以内でご入力ください。'メールアドレスは100文字以内でご入力ください。'コメントを投稿しました。承認をお待ちください。class="server_error">現在サーバーエラーが発生しています。</section></body></html>save_comment.phpは下記のように配置してください。save_comment.phpではコードを細分化して詳しく説明していきます。</section></body></html>まずはHTMLを準備します。書いていますが、重要なのはform部分です。value="投稿"></form>同一ファイル内で処理を行うので、データの受け渡し先はsave_comment.phpです。method属性にはpostを指定しましょう。コメント入力欄にはcomment、名前の入力欄にはname、メールアドレスの入力欄にはemailと、name属性を与えます。db_info.phpの呼び出しHTMLが書けたら、次はPHPです。'db_info/db_info.php';データベースに接続するためには、先ほど作成したdb_info.phpを呼び出す必要があります。ここではrequireを使って呼び出しています。ファイルを呼び出すときはパスに気をつけないといけないね。パスを間違ってしまうとファイルが呼び出せなくなるから、エラーが発生してしまうんだ。ファイル構造には注意を払わなくちゃいけないってことだね。class="server_error">現在サーバーエラーが発生しています。</div>';}次にデータベースへの接続を行います。データベースに接続するときはtry~catch文を使って、例外処理も定義しておきましょう。ここではPODクラスを使用してデータベースへ接続しています。見るとdb_info.phpで定義した変数がありますね。ホスト名・データベース名・ユーザー名・パスワードは、このようにデータベースに接続する時に使われます。接続がうまくいかなかったら、例外処理としてエラーメッセージを表示させてあげよう。tryが通常処理で、エラーが出たらcatch部分の処理が実行されます。'';if文を使い、POSTでデータが送られてきたら(つまりフォームのボタンが押されたら)処理を実行します。$errorと$successの2つの変数を準備します。$errorはエラーメッセージ、$successは『投稿が完了しました』という処理完了メッセージを格納する変数だよ。詳しくは次の項目で説明するよ。'入力されていない項目があります。'コメントは1000文字以内でご記入ください。'お名前は15文字以内でご入力ください。'メールアドレスは100文字以内でご入力ください。'UTF-8');投稿ボタンが押されたからといって、何でもかんでもデータベースに保存するわけにはいきません。フォームに何も記述しないまま投稿ボタンを押してしまったら、NULLがデータベースに保存されてしまいます。入力された値がデータベースに保存していいものかどうか、まずはチェックしなければなりません。名前が15文字を超えたらエラー処理メースアドレスが100文字以上ならエラー処理このチェックに引っかかった場合、先ほど定義した$error変数にエラーメッセージが格納されるんだ。ここで先ほどのHTMLの一文を見てみよう。}?>HTMLの中に上記のPHPが埋め込まれています。これは「もし変数errorに何かしらの値があれば、変数errorを出力する」「もし変数successに何かしらの値があれば、変数successを出力する」というものです。入力値に誤りがあれば、それに対応したエラーメッセージがここに表示されます。上記の条件に当てはまらなかった、つまりエラーが発生しなかった場合は、入力された値をhtmlspecialcharsでエスケープ処理し、それぞれ変数に格納します。'コメントを投稿しました。承認をお待ちください。class="server_error">現在サーバーエラーが発生しています。</div>';}入力した値に問題がなければ、SQL文を使ってデータを保存します。この時もtry~catch文を使って、例外処理も定義しておきましょう。INSERTは対象のテーブルにデータを追加する構文だよ。INSERTで各種データを追加できたら、$successにメッセージを代入して、処理は終了です。$successに値が入ったため、変数errorのように成功メッセージが表示されます。以上でsave_comment.phpの作成は完了です。スタイルシートで外観を調整おまけですが、外観の見栄えをよくするために、CSSのコードも貼り付けておきます(スタイルの解説は割愛)。よければお使いください。center;}style.cssを準備できたら、下記のように配置してください。save_comment.php実際にコメントを投稿してみようここまでできたら、実際にコメントを投稿できるか試してみよう!投稿できましたか?今回入力したコメント・名前・メールアドレスはcom_tableテーブルのcomment・name・emailカラムに保存されるのがわかりますね。コメント投稿フォームで入力した値は、com_tableテーブルのcomment・name・emailカラムに保存されます。idはAUTO_INCREMENTにチェックを入れたので、自動的に番号が割り振られています。まとめ今回制作したのは、db_info.phpとsave_comment.phpです。style.cssもおまけで掲載していますので、よければ使ってください。ここまで制作したら、下記のようなツリー構造になっていると思います。save_comment.php次回は管理画面にアクセスするためのログイン機能を作成します。ウェブデザイン)徳島県在住のフリーランスWEBデザイナー。徳島市内のデザイン事務所でWEBデザイナーとしての就職。以降、ホームページ制作・LP制作などの案件に携わり、2019年1月よりフリーランスとして活動開始。コメントをキャンセルメールアドレスが公開されることはありません。項目は必須項目となります。ウェブデザイン)徳島県在住のフリーランスWEBデザイナー。徳島市内のデザイン事務所でWEBデザイナーとしての就職。以降、ホームページ制作・LP制作などの案件に携わり、2019年1月よりフリーランスとして活動開始。ウェブデザイン)徳島県在住のフリーランスWEBデザイナー。徳島市内のデザイン事務所でWEBデザイナーとしての就職。以降、ホームページ制作・LP制作などの案件に携わり、2019年1月よりフリーランスとして活動開始。