ログイン機能と投稿機能の作成（PHP+MySQL)

#記事の概要

作成したポートフォリオの解説です。以下をまとめています。

- 背景
- 主な機能
- 開発手順
- 工夫点
- 課題

#背景

ポートフォリオ作成にあたり、「Udemy」というサービスを用いて基礎を勉強しました。
勉強期間1~2週間
https://www.udemy.com/course/completeweb2_jp/

#スペック
<dl>
  <dt>言語</dt>
  <dd>PHP 7.4.2</dd>
  <dd>javascript</dd>
  <dt>DBMS</dt>
  <dd>MySQL 5.7.26 </dd>
  <dt>開発環境</dt>
  <dd>MacOS Catalina 10.15.5 </dd>
  <dd>MAMP 5.7 </dd>
  <dt>ライブラリ</dt>
  <dd>jquery</dd>
  <dt>フレームワーク</dt>
  <dd>Bootstrap 4.2</dd>
  <dt>バージョン管理</dt>
  <dd>Git 2.24.3</dd>
  <dt>本番環境</dt>
  <dd>xserver</dd>
</dl>

#主な機能
###ログイン機能
・サインアップ画面
<img width="300" alt="スクリーンショット 2020-08-10 17.40.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620908/4dfa4223-e990-c675-95a8-7020f982e428.png">
・サインイン画面
<img width="300" alt="スクリーンショット 2020-08-10 17.40.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620908/79efc229-4c6c-6ffc-d11c-60dcf2df9b43.png">
###投稿機能

左のレイヤーで全ユーザーの投稿を表示するか、自分の投稿のみを表示するか切り替えられる。
真ん中のレイヤーでは、ユーザー名と投稿が表示される。
右のレイヤーではつぶやきを投稿できる。
画面サイズが小さくなると右のレイヤーが下に回り込む。
<img width="500" alt="スクリーンショット 2020-08-10 17.50.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620908/003d046a-828c-157e-f9fd-7af337bb0a27.png">

#開発手順
1. 要件定義
2. 環境設定
3. データベース設計
4. コーディング
5. xserverデプロイ

###1.用件定義
今回作成するアプリに必要な機能
・サインアップ
・サインイン
　　・セッション 
・つぶやき投稿

--余裕があれば--
・検索機能

phpとDBを用いた構築を行う。
「udemy」で勉強したBootstrapも活用する。

###2.環境選定
基本的には「Udemy」で習った環境を使う。（上記スペックに記載)
本番環境では知名度の高い「xserver」を使用する。
GitとGitHubは練習として使っていく。

###3.データベース設計
正規化を意識して設計。調べたところTwitterのDBは検索性を高めるために投稿された月ごとにインデックすしてるようです。（今回はスルー）
<img width="150" alt="スクリーンショット 2020-08-10 20.51.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620908/4328e725-9e34-0010-48a0-71c87c3ca2f7.png">

###4.コーディング
コーディングを実施
####4.1データベース作成
MAMPのphpMyAdminを使ってデータベースを作成。

####4.2ログイン画面
画面設計を簡易的にするためにBootstrapを使用。
サインアップとサインイン画面の切り替えはjQueryのtoggleを使用。
PDOを使ってMySQLに接続し、サインアップ及びサインインを行う。
未入力のバリテーションを実装。
ログイン時にセッションを使用。

####4.3メイン画面
Twitterをイメージして画面を3分割にした。
フレキシブルデザインになるようBootstrapを使用。
投稿されたテキストをユーザーネームと共に一覧で表示させる。

<details><summary>サンプルコード</summary><div> 

```php:home.php
    <div class="col-6">
        <h2>つぶやき</h2>
        <?php displayTweets(); ?>
        <?php    function displayTweets(){
            global $pdo;  
 
        $sql = "SELECT * FROM tweet LIMIT 30";
        // SQLステートメントを実行し、結果を変数に格納
        $stmt = $pdo->query($sql);

        // foreach文で配列の中身を一行ずつ出力
        foreach ($stmt as $row) {
        ?>            
        <div class="card">
            <div class="card-header">
<!--                ユーザーネーム表示-->
                <?php showName($row['id']); ?> 
            </div>
            <div class="card-body">
                <h5 class="card-title">
            <?php            
                // データベースのフィールド名で出力
              echo $row['text'];
            ?>
                </h5>
                <p class="card-text"></p>
            </div>
        </div>
        <?php
                }        
            }
        ?>
    </div>
```
</div>

###5.xserverデプロイ

本番環境ではxserverを使用。
xserver上にDBを立て、プログラムもDB接続部分の修正。

#工夫点
・「Udemy」の教材ではDB接続にmysqli関数を用いていた。
時代はオブジェクト指向とのことなので、一から調べ、PDOを実装した。
・フレキシブルデザインを意識し、Bootstrapを用いた開発を行った。


#今後の課題
一通りの動作ができた時点で完成としました。
主な課題は以下の通りです。

- スマホだと見づらい
- パスワードの暗号化をしていない
- ログアウトボタンがない
- デザインがしょぼい
- jqueryとreact.jsの違いや使い方について調べる

#参考文献
[PHP+MySQLでポートフォリオ作成](https://qiita.com/RINYU_DRVO/items/6607a0aa7ca3294f8e47)

#GitHubアカウント
freedog1
https://github.com/freedog1/tsubuyaki_1