itLinkedInPocketCopyこちらは、これからプログラミングを学んでいきたいという初心者の方向けの記事です。一緒にPHPで掲示板サイトを作成し、理解を深めてもらえればと思います。言語:PHPDB(データベース):Mysqlです。環境は、「xampp」を使用し、構築します。今回の完成イメージは以下のような感じです。投稿ページと投稿完了ページを行ききし、投稿ページ側に投稿内容が表示されるような仕組みを作成します。2ページに分けた理由は、登録の処理と取得の処理を分けて理解してもらうためです。css(デザイン)がついていない分、見た目がかなり地味ですが、動作部分のコードにのみ着目して欲しいため、あえてつけていません。上記のようなものを作成後、演習課題を用意しています。難易度はそれほど高くないため、挑戦してみましょう。xamppとは読み方は、「ザンプ」と読みます。XAMPPは以下の文字から構成されている。PerlのP元々は対応OSはLinuxのみであり、その頭文字Lを付けLAMPPと称したが、後に複数のOSに対応したためLをXに変えXAMPPとなった。(wikipediaより引用)これらのWEBアプリケーションの開発環境となるソフトウェアを一括でダウンロードできるため、環境構築が容易に行えます。xamppのインストールhttps://www.apachefriends.org/jp/index.html上記のサイトにアクセスします。私は、Windowsで環境を作成するため、「Windows向けXAMPP」を選択します。(選択すると、自動でダウンロードされます)ダウンロードした「xampp-windows-x64-7.4.1-0-VC15-installer.exe」を実行し、PCにインストールします。インストールが完了したら、Cドライブの下にxamppフォルダが作成されていると思います。その中にある「xampp-control.exe」を起動してください。上記の画面が表示されたら、インストールの完了です。XAMPPを起動する「xampp-control.exe」を起動し、xamppコントロールパネルを表示します。この中で「Apache」と「MySQL」を使用します。Startを押下し、起動させます。起動すると、「Admin」というボタンが活性状態になりました。ApacheのAdminボタンを押下してみます。すると、「localhost」というurlのページが開かれます。これは、「C:\xampp\htdocs\index.php」の内容が表示されています。index.phpファイルをテキストエディタで開き、以下の内容を入力します。(エディタの導入方法などは、説明しませんが、エディタを入れておくことで、自動で入力補完をしてくれたり、見やすく色づけをしてくれるため、導入しておくと、良いです。テキストエディタで編集をすると、BOMというものがついてしまうため、そのまま編集するのはお勧めできません。私は、VScodeというエディタを使用しています。world!!';?>もう一度、「localhost」へアクセスします。world!!」という文字が表示されると思います。次は、xamppコントロールパネルからMySQLのAdmimボタンを押下してみます。すると、「http://localhost/phpmyadmin/」というurlのページにアクセスされ、上記のようなページが表示されると思います。こちらからは、DB内の操作をGUIで簡単に行うことができます。基本的に今回はここからは操作しません。DBを作成するまずは、DBを作成します。phpMyAdminから作成しても良いのですが、練習のためコンソールからCUIで作成します。xamppコントロールパネルの右側にある「Shell」というボタンを押下します。すると、上記のような画面が表示されます。MySQLにログインします。rootパスワード:なしの状態のユーザが存在しますので、こちらのユーザを使用します。以下のコマンドを実行してください。聞かれますが、何も入力せず、Enterを押します。[(none)]>と表示されたら、ログインが完了しました。次は、以下を入力して下さい。databases;こちらは、MySQLの中に作成されたDB一覧を表示するコマンドです。sec)初期状態では、上記のような表示のはずです。新たに、「sample」という名前のDBを作成します。utf8;DBが作成されました。sec)問題がなければ、上記の表示です。作成されたか、確認をします。sec)無事作成されていますね。次に、使用するデータベースを選択します。先ほど作成した「sample」DBを選択します。以下を入力してください。sample;入力後、noneとなっていた部分が、sampleに変化しました。これで使用するDBが選択済みの状態となりました。[sample]>次にDB内に存在するtableを確認します。以下を入力してください。sec)と表示されます。最後にテーブルを作成します。以下を入力してください。'投稿情報';問題なく、実行され、テーブルが登録されました。sec)これで準備完了です。投稿処理を記述するまずは、トップページの見た目だけ、作成していきます。「C:\xampp\htdocs\index.php」の内容を編集し、以下を記述します。</form></section>そして、「localhost」というurlにアクセスしてみましょう。このような画面が表示されていると思います。次に、「C:\xampp\htdocs」の中に「send.php」というファイルを作成し、以下を書き込みます。onclick="location.href='index.php'">戻る</button></section>これで、もう一度、動作を確認してみます。「戻る」ボタンを押すと、投稿画面へ遷移という動作を確認することができます。次にDBへ情報を登録するために以下をsend.phpに記述します。H:i:s");//DB接続情報を設定します。`utf8`"));//ここで「DB接続NG」だった場合、接続情報に誤りがあります。"DB接続NG";}//SQLを実行。$day);$regist->execute();//ここで「登録失敗」だった場合、SQL文に誤りがあります。-->少し、難しくなりましたね。先ほどまでは、HTMLのみでの記述でしたが、ここからPHPが登場します。ここまでで、投稿内容がDBに登録される流れが完成しました。一度動かしてみましょう。このままだと、投稿内容はまだ表示されていないです。確認するためには、DBから直接確認を行います。コンソールからMySQLにログインし、DB選択後、以下を実行します。post;postテーブルのすべての値が表示されます。|+----+---------------+---------------+---------------------+日本語を使用していると、文字化けを起こしていますが、登録は確認できました。(設定を行うことで文字化けを起こさないようにもできます。後で設定方法についても記載しています。)DBから投稿内容を取得する「C:\xampp\htdocs\index.php」に以下を記述します。--><?php//DB接続情報を設定します。`utf8`"));//ここで「DB接続NG」だった場合、接続情報に誤りがあります。"DB接続NG";}//SQLを実行。post");$regist->execute();//ここで「登録失敗」だった場合、SQL文に誤りがあります。-->動作確認をすると、投稿内容を登録し、取得するという流れが完成しました。これで、掲示板作成は終了です。コード解説(PHPのみ)登録部分のコード(send.php記載)を使用し、説明していきます。処理を順番に見ていきましょう。いうのはPHPの記述の開始タグです。PHPの処理になります。H:i:s");フォームから送信された情報は、$_POSTに値が格納されているので、それを取り出し、変数に格納しています。いう一文を追加してみると、どんな値が送信されてきたか確認することができます。H:i:s")という部分では、現在の日時を取得しています。//DB接続情報を設定します。`utf8`"));ここでは、DBの接続情報を設定しています。分解してみていきましょう。dbname=sample「sample」というデータベースを使用します。host=localhost接続先はlocalhostです。“root",""ユーザ名「root」、パスワードは設定していません。`utf8`"文字コードは、utf8を使用します。//ここで「DB接続NG」だった場合、接続情報に誤りがあります。"DB接続NG";}もし、先ほどの接続情報に誤りがあった場合は、「DB接続NG」と表示されます。こちらは、接続情報に誤りがないかの確認用の処理のため、動作を確認できたら削除してよいです。$day);$regist->execute();こちらの処理で、SQLを実行しています。第二引数の変数の中身に置き換えています。することで、変数定義した中身で置き換えられ、ユーザの入力値をDBに登録することができます。これかなり面倒な動作をしていますよね。なんで?って思ったからもいるかもしれませんが、これはSQLインジェクションを起こさないための対策として、必要なことなのです。//ここで「登録失敗」だった場合、SQL文に誤りがあります。"登録失敗";}ここも、確認用の処理なので、動作が確認できたら、削除してよいです。DBの文字化けを修正するxamppコントロールパネルからMySQLのConfigをクリックし、「my.ini」を選択します。これは、「C:\xampp\mysql\bin\my.ini」を参照しているようなので、ここから直接編集しても良いです。cp932と書き込み、保存をします。MySQLを再起動し、コンソールから再度取得すると、文字化けが治っていると思います。課題1投稿内容一覧に、投稿時間を表示させましょう。課題2最新の投稿20件までを新しい順に表示するように書き換えましょう。(現在は古い順に全件を表示)課題3投稿送信時の動作を変更します。投稿完了ページをなくして、もう一度、投稿ページに遷移するように変更してみましょう。課題4現在は、フォームの入力値が空でも送信され、DBに登録されてしまいます。フォームの入力値が空だった場合、送信できないようにしましょう。上部にエラーメッセージを表示しましょう。課題5投稿時にajaxでの処理を実装してみましょう。ajaxで調べると色々出てくるはずです。)課題6cssでデザインをつけてみよう。以下は例なので、これと同じでなくても大丈夫です。参考程度に利用してください。演習課題は以上になります。改善すべき点はあると思いますので、他にも改善してみてください。演習課題の答えについては、別記事で投稿を考えています。投稿をしましたら、こちらの記事の最下部にリンクを張り付ける予定です。コメントをキャンセルメールアドレスが公開されることはありません。