ご注意！
この記事は学生の勉強備忘録です。
曖昧な表現や、誤りが含まれる可能性があります。
閲覧いただく際は、あくまで参考程度に…
また、修正やご意見などはドシドシいただけると大変うれしいです。
宜しくお願い致します。
ご注意！②
コードの解説記事は後日アップ予定です。
本記事では、設計や 進捗の記録がメインとなります。
ーーーーーーーーーーーーーーーーーーーーーー
完成品 ➡ 勉強のあしあと掲示板
コード ➡ 未アップ
コード解説記事 ➡ 未アップ
ーーーーーーーーーーーーーーーーーーーーーー
はじめに
今回は、超シンプルな掲示板を作ります。
学校も冬休みに入り、同級生たちとLINE通話しながら好きな勉強をすることが多くなりました。
[学習記録] やモチベ維持のための [YouTube] や [おすすめの本] なんかを毎回グループLINEに送るのは憚れる、かつ連絡事項に埋もれるということで、学習記録用の掲示板を作ろうと思い立ちました。
今回は身内用かつ自分の勉強のためというのが一番の目的にはなりますが、ゆくゆくは色々な人に使ってもらえる掲示板を作ってみたいです。
次回は、最後の「今後の展望」にも書いているのですが、もっと機能も増やして、”使ってもらう為”の掲示板を作りたいです。！
目的
目的は、PHPとMySQLの基本を学ぶこと。
（両方とも座学程度の知識と、フォームを作る時などにすこーしだけ触ったくらい）
あとは、大学の授業でDBの設計とかオブジェクト指向方法論とかやったけど、実際どういう風にPHPとデータベースを連結させて、サーバにアップするのかを知りたかった、というところでございます。
〇 追記： 前段階として、SQLの基本操作について記事をあげたので、もしよかったら見てくだすわい。→【XAMPP】MySQLの基本的事項備忘録
● コードはGitHubにアップ
● 完成品は、ポートフォリオに乗せる
画面設計
まずは、この1ページだけで完結する簡単なWebシステムにします。
使用言語： HTML5,CSSSassに慣れてしまうと、純粋なCSSがめちゃくちゃ書きにくく感じました（笑）
備考： PC用（メイン）とスマートフォン用で一応レスポンシブ対応。
※ブレイクポイント834px
機能設計
・ニックネームや内容に空白がある状態で、送信ボタンを押す ➡ エラーメッセージ表示
・SQLインジェクション対策
※追加
・更新ボタン
・投稿完了メッセージ表示
データベース
とはいえ、今回必要になるのは投稿内容を保持するテーブルだけなので、↓だけになります。
下の画像が、実際に作ったものです。（phpMyAdminの今回使用するテーブル構造のスクショ）
制作期間（だいたい）
・目標：5日間
ーーーーーーーーーーーーーーーーーーーーーー
完成品 ➡ 勉強のあしあと掲示板
コード ➡ 未アップ
コード解説記事 ➡ 未アップ
ーーーーーーーーーーーーーーーーーーーーーー
1日ごとの振り返りぼやき
・1日目、フロント側の制作
・2日目、MySQLの基本操作についてQiitaに別記事でまとめた。
・3日目、XAMPPとMySQL、phpMyAdminなどの使い方をよく理解しないまま触っていたせいで
やや痛い目を見る。
深夜、本番環境のDBに接続完了する。やったぜ！と思うのもつかの間、
空白投稿の連撃。あかん。
あとスマホ側でCSSのズレも直したい。
あと、更新ボタンいちいち押すのがめんどくさいと気づく。
・4日目 iosとAndroidそれぞれ異なるCSSのズレがあったため、そちらの修正。
➡ 後日、スマホのCSSズレ対応についての記事を上げます。
投稿完了メッセージ実装完了
「リロードのたびに投稿される問題」解決
➡ プログラムの解説記事(未)に記載予定です。
・5日目 リロードボタンを実装。
その他、細かい調整後、再度本番環境にアップロード。
\\\\ ひとまず終わり！！ ////
※おまけ：サーバについて
今回の掲示板を公開したのは、既に持っていたポートフォリオ内です。
ポートフォリオはロリポップ！レンタルサーバを利用しています。
ロリポップのサービスでデータベースも簡単に使用できるため、こちらを使用しました。
サーバなどに対しての知識があまりないので、また違う環境でも練習できたらなあなんて考えてました。
((色々な場面でロリポップのサービスに助けられがちなので))
まあ、第一段階としてPHPとSQLの接続について学べたのは良かったかなと思います。
今後の展望
今は既によくある掲示板の基本形ですが、機能を追加し、実際に誰かに使ってもらえる掲示板を作ってみたいです。
学習用としてだけでなく、アニメやゲームの路線も面白そうだな、、
ターゲットの方向性によって機能は変わりますが、
どんな掲示板を目指すにしろ、実装していきたい機能を箇条書きにしておきます。↓
【実装したい基本機能】
①不適切な投稿の通報 ＆ 投稿取り消し依頼
②高評価ボタン
③お気に入り投稿保存
④ユーザによる掲示板作成
⑤画像投稿
⑥会員登録
⑦通知機能
⑧スマホアプリ版
（⑨LINEと連携）
さいごに
ここまで読んでくださりありがとうございます。
完成した！で満足せず、今からコード解説記事をきちんと書き上げ、PHPについて学んだことをしっかりまとめておこうと思います。
未熟者ではありますが、今後の記事にも目を通していただけますと幸いです。
コメント、アドバイス等お待ちしております！！
ーーーーーーーーーーーーーーーーーーーーーー
完成品 ➡ 勉強のあしあと掲示板
コード ➡ 未アップ
コード解説記事 ➡ 未アップ
ーーーーーーーーーーーーーーーーーーーーーー