記事の概要

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

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

背景

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

スペック

言語: PHP 7.4.2; javascript
DBMS: MySQL 5.7.26
開発環境: MacOS Catalina 10.15.5; MAMP 5.7
ライブラリ: jquery
フレームワーク: Bootstrap 4.2
バージョン管理: Git 2.24.3
本番環境: xserver

主な機能

ログイン機能

・サインアップ画面

・サインイン画面

投稿機能

左のレイヤーで全ユーザーの投稿を表示するか、自分の投稿のみを表示するか切り替えられる。
真ん中のレイヤーでは、ユーザー名と投稿が表示される。
右のレイヤーではつぶやきを投稿できる。
画面サイズが小さくなると右のレイヤーが下に回り込む。

開発手順

要件定義
環境設定
データベース設計
コーディング
xserverデプロイ

1.用件定義

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

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

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

2.環境選定

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

3.データベース設計

正規化を意識して設計。調べたところTwitterのDBは検索性を高めるために投稿された月ごとにインデックすしてるようです。（今回はスルー）

4.コーディング

コーディングを実施

4.1データベース作成

MAMPのphpMyAdminを使ってデータベースを作成。

4.2ログイン画面

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

4.3メイン画面

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

サンプルコード

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>

5.xserverデプロイ

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

工夫点

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

今後の課題

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

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

参考文献

PHP+MySQLでポートフォリオ作成

GitHubアカウント

freedog1
https://github.com/freedog1/tsubuyaki_1