記事の概要

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

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

背景

ポートフォリオ作成にあたり、「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

主な機能

ログイン機能

・サインアップ画面

・サインイン画面

投稿機能

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

開発手順

1. 要件定義
2. 環境設定
3. データベース設計
4. コーディング
5. 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

はじめに

個人用のメモです。
業務でほとんどdocker使わないので、忘れてしまいそうなので。。。
また、パーフェクトRuby on Railsを参考にしています。

ファイル構成

/app
|--- docker-compose.yml
|--- Dockerfile
|--- Gemfile
|--- Gemfile.lock
|--- .env

Rails用のイメージを作成

ファイル

Dockerfile

FROM ruby:2.7.1

RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
    && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
    && apt-get update \
    && apt-get install -y build-essential nodejs yarn

RUN gem install bundler
WORKDIR /app
RUN bundle config set path vendor/bundle

CMD ["bash"]

コマンド(コンテナが作れるか確認)

$ docker build .
$ docker images
$ docker volume create app_bundle
$ docker volume create app_node_modules
$ docker colume ls
$ docker run -it -v <現在のディレクトリの絶対パス>:/app \
  -v app_bundle:/app/vendor/bundle \
  -v app_node_modules:/app/node_modules \
  -p 3000:3000 <IMAGE ID>

### コンテナの中 ###
# bundle install
# bundle exec rails new . --force --webpack=vue --skip-turbolinks --skip-test -d mysql
# bin/rails webpacker:install
# bin/rails s -b 0.0.0.0
# エラーになるが繋がったのを確認

コンテナが作れるの確認して作成したコンテナとイメージを削除し、新しくイメージを作成しました。
DockerfileをDockerfile.devに変更しています。

docker-composeの作成

ファイル

docker-compose.dev.yml

version: '3'

services:
  web:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - '3000:3000'
    volumes:
      - .:/app
      - app_bundle:/app/vendor/bundle
      - app_node_modules:/app/node_modules
    tty: true
    stdin_open: true

volumes:
  app_bundle:
    driver: local
  app_node_modules:
    driver: local

.env

COMPOSE_FILE=<docker-compose.dev.ymlのファイルのパス>

Gemfile

### bundle initで作成 railsのバージョンのみ変更###

# frozen_string_literal: true

source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

gem 'rails', '~> 6'

コマンド

$ docker-compose up -d
$ docker-compose ps
$ docker-compose exec web bash

### コンテナ内 ###
# bundle
# bundle exec rails new . --force --webpack=vue --skip-turbolinks --skip-test -d mysql
# bin/rails s -b 0.0.0.0

Mysql用のコンテナ作成

docker-compose.ymlに追記。

ファイル

docker-compose.yml

version: '3'

services:
  web:
    build:
      context: .
      dockerfile: Dockerfile.dev
    environment:
      MYSQL_USERNAME: app_dev_user
      MYSQL_PASSWORD: password
      MYSQL_HOST: mysql
    ports:
      - '3000:3000'
    volumes:
      - .:/app
      - app_bundle:/app/vendor/bundle
      - app_node_modules:/app/node_modules
    tty: true
    stdin_open: true
    depends_on:
      - mysql

  mysql:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: password
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    ports:
      - 3306:3306
    volumes:
      - mysql-data:/var/lib/mysql

volumes:
  app_bundle:
    driver: local
  app_node_modules:
    driver: local
  mysql-data:
    driver: local

コマンド

$ docker-compose up -d mysql
$ docker-compose exec mysql mysql -u root -p

### コンテナ内(mysql) ###
mysql> create user app_dev_user@"%" identified by 'password';
mysql> grant all on app_development.* to app_dev_user@"%";
mysql> grant all on app_test.* to app_dev_user@"%";

RailsとMysqlを繋ぐ

database.ymlの修正

database.yml

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: <%= ENV.fetch("MYSQL_USERNAME") { app_dev_user } %>
  password: <%= ENV.fetch("MYSQL_PASSWORD") { password } %>
  host: <%= ENV.fetch("MYSQL_HOST") { mysql } %>

DBの作成

$ docker-compose exec web bash

### コンテナ内(Rails) ###
# bin/rails db:create
# bin/rails s -b 0.0.0.0

いつもの画面が出れば完成。

Laravelのインストール

Laravelのインストールには専用インストーラを使用する方法とComposerを利用する方法の2つがありますが、今回はComposerでのインストールを行います。
DBはMySQLを使います。
PHPとphpmyadminが使える環境を前提に進めます。

Composerのインストール

ComposerはPHPのパッケージ管理ツールです。
下記のサイトからインストールできます。
Composer

Composerのインストール確認

下記のコマンドを実行してバージョンが表示されればインストールできています。

terminal

 composer --version
 //composer -vでも可

Composerのパッケージインストール時間の短縮

packagist.jpの使用

海外に向いているリポジトリを、日本の有志の方が運用をおこなっているリポジトリ( https://packagist.jp/ )に向ける事でインストールにかかる時間が短縮できます。

リポジトリの追加

terminal

composer config -g repos.packagist composer https://packagist.jp
composer update

リポジトリの削除

terminal

composer config -g --unset repos.packagist

Prestissimoの使用

Prestissimoを導入してダウンロードを並列処理する
Prestissimo

terminal

composer global require hirak/prestissimo

Composerを使ったLaravelのインストール

terminal

  //最新版をインストールする場合
  composer create-project laravel/laravel [プロジェクト名] --prefer-dist

  //バージョンを指定してインストールする場合(x.0の部分がバージョン指定)
  composer create-project laravel/laravel [プロジェクト名] --prefer-dist "x.0.*"

※ --prefer-distはファイル圧縮版を使用するというオプションです。

Laravelの動作確認(簡易サーバー)

プロジェクトのルートに移動して下記コマンドを実行します。

terminal

 php artisan serve

http://localhost:8000/ もしくは　http://127.0.0.1:8000 にアクセスして、Laravelのデフォルトの画面が表示されればOKです。

初期設定

タイムゾーン、言語を日本にする

config/app.php

'timezone' => 'UTC',
//↓
'timezone' => 'Asia/Tokyo',

'locale' => 'en',
//↓
'locale' => 'ja',

DBの文字コードをutf8にする

config/database.php

'mysql' => [
  'charset' => 'utf8mb4',
  //↓
  'charset' => 'utf8',

  'collation' => 'utf8mb4_unicode_ci',
  //↓
  'collation' => 'utf8_unicode_ci',            
]

デバッグバーの使用

インストール

簡易サーバーを立ち上げると下部にデバッグ情報が表示されるようになります。

terminal

composer require barryvdh/laravel-debugbar

非表示

本番環境など表示したくない環境では下記のように値を変更します。

.env

APP_DEBUG=true
//↓
APP_DEBUG=false

DB(MySQL)の設定

phpMyAdminを使ってDB(DB名)とユーザー(ユーザー名、パスワード)を作成して、下記を編集します。

.env

 DB_CONNECTION=mysql
 DB_HOST=127.0.0.1
 DB_PORT=3306
 DB_DATABASE=DB名
 DB_USERNAME=ユーザー名
 DB_PASSWORD=パスワード

Laravel-ui、認証

必要なければ飛ばしても大丈夫です。

terminal

//バージョン指定しない場合
composer require laravel/ui --dev

//バージョン指定する場合
composer require laravel/ui:^1.0 --dev


//スカフォールド生成
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

//スカフォールド生成+ユーザー認証　(認証が必要なときはこちら)
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

npmでのパッケージのインストール

Please run "npm install && npm run dev" to compile your fresh scaffolding.と表示されるので従います。

npmがインストールされていない場合、Node.jsをインストールします。
(Node.jsがインストールされていればnpmも使えるようになります。)
Node.js

Node.js、npmのインストール確認

バージョンが表示されればインストールできています。

terminal

node -v
npm –v

npmによるパッケージインストール

package.jsonの内容に従ってパッケージがインストールされます。

terminal

npm ci

CSSとJavaScriptのビルド

terminal

//一回だけビルド
npm run dev

//ファイルの変更を感知してビルド
npm run watch

ビルド対象のファイル、ビルドして生成されるファイルはwebpack.mix.jsで確認、変更できます。

種類	ビルドの対象ファイル
JavaScript	resources/js/app/js
SCSS	resources/sass/app.scss

種類	ビルドで生成されるファイルが格納されるフォルダ
JavaScript	public/js
CSS	public/css

migration

3つのテーブルが作成されます。
(上で認証機能を追加している場合はusersテーブルを加えた4つのテーブルが作成されます。)

terminal

php artisan migrate

作成されるテーブル

• failed_jobs
• migrations
• password_resets
• (users)

Laravelの動作確認(簡易サーバー)

プロジェクトのルートに移動して下記コマンドを実行します。

terminal

 php artisan serve

http://localhost:8000/ もしくは　http://127.0.0.1:8000 にアクセスして、Laravelのデフォルトの画面の右上にLOGINとREGISTERが追加されていればOKです。

エラーメッセージの日本語化

resources/lang/に下記のjaフォルダをenフォルダと同じ階層に配置します。
https://github.com/minoryorg/laravel-resources-lang-ja

※jaフォルダ内のファイルの編集でさらにメッセージのカスタマイズができます。

resources\lang\ja\validation.php

'attributes' => [],
//↓
'attributes' => ['email'=>'メールアドレス',
'name'=>'名前'
],

GitHubの使用

GitHubへpushする

GitHubでリポジトリ作成

GitHubのマイページにあるRepositoriesタブを開き、Newボタンを押します。
リポジトリ名を入力して、空っぽの新規レポジトリを作成しておきます。

ローカルでのGitのリポジトリ作成

プロジェクトルートに移動してGitのリポジトリを作成します。

terminal

git init

.gitignore

Laravelでは、gitを使う前提で.gitignoreがディレクトリ直下に用意されています。

無視ファイル/フォルダ(一部抜粋)	内容
.env	接続情報などが保存されているので、誤ってGitHubに上がらないように設定されている
/vender	composerでインストールしたファイル (laravel自体もここに入っている)
/node_modules	npmでインストールしたファイルが入っている

push

terminal

git add .
git commit -m "メッセージ"
git remote add origin https://github.com/ユーザー名/リポジトリ名.git
git push -u origin master

GitHubからcloneする

今度はGitHubからファイルを取ってきて使えるようにしていきます。

terminal

git clone https://github.com/ユーザー名/リポジトリ名.git

cloneしただけでは、Laravelの動作に必要なファイルが足りないので、.gitignoreで無視していたファイルを作成します。

.env

DBの接続情報

.env.exampleをコピーして.envにリネームして、接続情報などを記入します。
DBがなければ作成が必要になります。

デバッグバーの使用

使用する場合のみ変更します。

APP_DEBUG=false
//↓
APP_DEBUG=true

アプリケーションキーの作成

terminal

php artisan key:generate

.envのAPP_KEYに値が書き込まれます。

/vender配下のファイル (Composerでのパッケージインストール)

cloneした環境にComposerがインストールがされていない場合はインストールします。
下記コマンドでcomposer.jsonの内容に従ってパッケージがインストールされます。

terminal

composer install

/node_modules配下のファイル (npmでのパッケージインストール)

cloneした環境にnpmがインストールがされていない場合はインストールします。
下記コマンドでpackage.jsonの内容に従ってパッケージがインストールされます。

terminal

npm ci

migration

テーブルを作成します。

terminal

php artisan migrate

Laravelの動作確認(簡易サーバー)

プロジェクトのルートに移動して下記コマンドを実行します。

terminal

 php artisan serve

設定変更が反映されない場合

キャッシュやコンフィグのクリアを試してみてください。

terminal

php artisan cache:clear
php artisan config:clear

はじめに

スクールのカリキュラムやドリルで作成した不要なデータベースを削除する際にいろいろと調べましたので、備忘録として残しました。
(誤って削除したデータベースは元に戻せないと思ったほうがいいので、コマンドの実行は自己責任でお願いします。)

作業手順

MySQLにアクセス

以下のコマンドでMySQLにアクセス。（どのディレクトリでも構いません）

$ mysql -u root -p

パスワードを聞かれるので入力。設定してない場合は「Enterキー」を押して接続。

DB一覧を確認

まずは「SHOW DATABASES」でDBの一覧を確認。

mysql> SHOW DATABASES;

一覧が表示される。

+-----------------------------------+
| Database                          |
+-----------------------------------+
| test_development                  |
| exp-pictweet_development          |
| exp-pictweet_test                 |
| memo_app_development              |
| memo_app_test                     |
+-----------------------------------+

削除したいデータベースを指定して削除

mysql> drop database test_development;

「Query OK」の表示が出れば成功。

Query OK, 3 rows affected (0.17 sec)

再度「SHOW DATABASES」で削除できているか確認。

+-----------------------------------+
| Database                          |
+-----------------------------------+
| exp-pictweet_development          |
| exp-pictweet_test                 |
| memo_app_development              |
| memo_app_test                     |
+-----------------------------------+

削除できない場合

エラーになる場合は以下の内容を確認しましょう。

１． SQL構文のエラー（データベース名に「 - (ハイフン)」を入れているなど）
２． 削除したいＤＢのフォルダの中に、自分で作成したファイルがないか

1.SQL構文のエラー

「exp-pictweet_development」を削除しようとすると以下のエラーで出ます。

mysql> drop database mooovi-exam1_development;
ERROR 1064 (42000): You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '-exam-pictweet_development' at line 1

SQL構文エラーとなる要素（今回は「-」）が含まれている場合は、バッククォート(`)でデータベース名を囲む必要があります。

mysql> drop database `exp-exam-pictweet_development`;
Query OK, 8 rows affected (0.09 sec)

バッククォート(`) = [shiftキー]＋[@]
※シングルクォートではないので注意

２． 削除したいＤＢのフォルダの中に、自分で作成したファイルがないか

DBフォルダ内に自分で作成したファイルがあると削除できません。
取り除くことで、削除できるようになります。

それでもできなければ…

原因がわからない場合、データベース情報が保存されているディレクトリを丸ごと削除する方法もあるみたいです。

データベースが削除できない

参考記事

MySQL データベースの削除