スクリーンショット_2020-01-17_19

Laravel6.0(PHP7.3)+MySQL+Laradockで簡易的なECサイトを作る①

mukae

この記事はLaravel6の話をしています。最新のLaravel10に対応した記事はこちらです！
↓
https://note.com/mukae9/n/n48cbf8f2fd9f

こんにちは。
大阪でエンジニア＆プログラミング講師をやっている向江と言います。

この記事ではPHPのフレームワークの中でも人気のあるLaravelを使って
簡単なECサイトを作ることを目的とします。

対象者はLaravelを初めて触ったり、プログラミング自体もそこまで長くない方向けです。
つまり、複雑な部分をなるべくなるべく省いたりしています。

記事で正解を書きすぎて複雑になって挫折するよりは、他のネット記事で挫折しかけた方でも、簡単を極めて初心者でもLaravelをやりきって欲しい。これを土台に徐々にLaravelに慣れていって欲しいという思いの記事ですので、ところどころのは不合理は許してください。（てか不合理な部分がわかる君向けの記事ではない！）

なんかいきなり怒り始めたやばい人みたいになりましたが、気にしないでいきましょう！

さて、サイトはこんな感じです↓

スクリーンショット 2020-01-17 19.13.29
スクリーンショット 2020-01-17 19.18.18

作る機能
■商品一覧（ペジネーション利用）
■会員登録
■ログイン
■カート機能（追加・削除・合計金額）
■購入したらメール送付

０、色々準備


開発環境
■Laravel6(PHP7.3以上) 
■MySQL8.0
■Laradock(Docker)
■Vscode

※お手持ちの環境がすでにある方はそちらで大丈夫ですが、
Laravel5.8以前の場合だと認証機能をコマンドで作る部分が若干違いますんで、そこだけお気をつけください！

環境構築
Laravelを動かす環境の構築がまだの方は、
こちらの記事を参考にしてください。

windowsの場合（10pro以上である事が条件）
↓
https://qiita.com/mukae_tech/items/89075e7caf7d6506e0b3

Macの場合
↓
https://qiita.com/mukae_tech/items/24709085948a6d707da3

※初学者の場合だと一番この環境構築で詰まりやすいので、
周りに質問しつつ頑張ってみてください。今の所特殊条件でなければ上の記事でエラー無しで行ける人が多いです！


〜開発開始〜



１、まずは認証機能を作成します。


上記のURLで環境構築をした場合は
laravelApp
    -app
    -laradock
といったフォルダ構成になっているかと思います。
このappフォルダ上でターミナル（コマンドプロンプト）を開きます。
（別環境の方は中にappとかresousesとかが入ってるlaravel自体のフォルダです。）
ターミナルの操作方法はこちらの記事では割愛しますので、progateや書籍などで学んでおくといいかと思います。（今後絶対必須）

またこの記事ではコマンドの操作をmac前提で行っていますので、windowsの方はls→dirに置き換えるなど一部脳内変換して見ていただければと思います。

話を戻してappフォルダをターミナルで開いたら、

Laravel5.8以前の方は、

php artisan make:auth


Laravel6.0以降の方は、

composer require laravel/ui "^1.2"


 を入力してください。
PHPのバージョンが低いとこの時点でエラー発生します。
バージョンを7.3にあげておきましょう！（ググる）

Laravel5.8以前の方はこれだけでログイン〜会員登録などの機能が自動的に生成されます。
このまま２、に進んでください。

Laravel6.0以降の方はもう少し処理が必要です。
「え、だったら5.8の方がいいじゃん」とは思わずに頑張りましょう。
（その分処理速度などの改善があるからバージョンは上がっているのです！）
※もしcomposer command not found的なのが出た場合はcomposerが入っていません！

上記環境構築のurlなどを参考に入れてください！
（PHPやるなら入ってないとすごいめんどくさいことなります。）

一気に打っていきます。

php artisan ui vue --auth
npm install
npm run dev

ここでnpmがないよ！ってエラーが出る方はインストールがまだかも！
こちらもよく使うやつなのでインストールしておきましょう！
↓


mac
↓
https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09

・nodebrewのインストールってとこから

・新しいmacのかたはターミナルがzshなのでbashではなくzshの方の処理！（見たら分かる！自分がbashなのかzshなのか分からん方はググろう！）

・nodeを落とすところでlatestとかだとそんなバージョンないって言われちゃうので、

nodebrew install-binary v１４.５.0

ってバージョン指定してあげてください！


windowsはこっち
https://qiita.com/kumapeta/items/0069536644b626b61ecc


npmのインストールが終わったら、
改めて

npm install
npm run dev

6.0以降の方もこれだけでOKです。

もしここでsass-loaderでエラーが出た場合は、

nodeのバージョンとの兼ね合いなので、

npm uninstall sass-loader

で一 旦既存のsass-loaderを消して
新しくちょっとバージョンの古いsass-loaderを入れてあげます。

npm install sass-loader@7.3.1 --save-dev

これでも動かない時は先ほどのnodebrewでnodeを落とした記事で、
nodeをv12とかちょっと古めのを落としてやってみましょう。



２、認証機能の確認

Laravelのメインページ（上のURLならhttp://localhost）を見てみると右上にLoginとregisterの文字があるかと思います。

スクリーンショット 2020-01-17 14.55.23

これで認証機能（ログイン/会員登録/パスワードリセット等）が一気に追加されています。
この機能の全容をこの記事で紹介すると膨大ですので
ドキュメントに託します。
https://readouble.com/laravel/6.x/ja/authentication.html
※今回の機能で必要箇所は随時説明します。

ここで生PHPなどでこういったログイン機能を実装していた方は分かると思いますが、代弁すると

「Laravelどんだけ楽やねん」

です。

パスワードリセットとかまで付いてるんです。
セキュリティもある程度よしなにやってくれるし
これを生PHPで実装するとなると、何十時間かかるんだろう。

だからちゃんとLaravelのエラーでブチギレる前に、
「使わせて頂いてありがとうございます」の気持ちを持ってLaravel開発者達にお礼を言いながら今後は使っていきましょうね。（自戒）

３、商品の一覧画面を作る

ここからは実際にECショップサイトを作っていきます。

まずは「商品一覧画面を作る」を目標にします。

①データベースの設計と構築(マイグレーションとか)
②商品情報を入れる（シーダーとか）
③商品一覧画面を表示（ペジネーション）

です。
それではやっていきましょう。

①データベースの設計と構築(マイグレーションとか)

とにもかくにも、サイトに表示させる商品の情報をデータベースに保存する必要があります。
Laravelにはマイグレーションというデータベースをartisanコマンドを使って管理する便利な機能があります。

migrationファイルは
appフォルダ（laravel自体フォルダ）直下の
databaseフォルダの中の
migrationsフォルダの中に存在してます。

2014_3~~~~こんなのがいつの間にか存在していると思いますが、これがマイグレーションファイルです。
先ほど認証機能を生成した際にここに必要なテーブルを作るためのファイルが自動で追加されているためすでにいくつかのファイルは出来上がっていますね。

ここに今回は商品の一覧を格納するStocksテーブルを作るためのファイルを作りたいと思います。
今存在するファイルをコピペして、、、なんてのは考えずにスマートにコマンドで作っていきます！

appフォルダ（laravel自体フォルダ）でターミナルを開いて

php artisan make:migration create_stocks_table

を実行すると、

Created Migration: 2020_01_12_053205_create_stocks_table

となります。

もう一度migrationsフォルダを確認してみると上記の名前のファイルが作成されているはずです。
※ちなみにこのコマンドでテーブルが作られる訳ではありません！
テーブルを作るための構成が書いてあるファイルのテンプレが作られます。
今DBを見てもな〜んにも変化はないですからね！

このファイルを表示すると、

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateStocksTable extends Migration
{
   /**
    * Run the migrations.
    *
    * @return void
    */
   public function up()
   {
       Schema::create('stocks', function (Blueprint $table) {
           $table->bigIncrements('id');
           $table->timestamps();
       });
   }

   /**
    * Reverse the migrations.
    *
    * @return void
    */
   public function down()
   {
       Schema::dropIfExists('stocks');
   }
}

という状態になっているかと思います。
最初のuseを使ってMigration/Blueprint/Schemaを使えるようにし、
さらにMigrationクラスを継承しています。

この部分を説明すると、また一つの記事ができちゃいそうですので割愛しますが、ここら辺の中身はvenderフォルダ内に存在していますので動きを追ってみるのもLaravelを深く理解する手助けになるかと思います。

さて、説明するのは上記コードの中のここです。

   public function up()
   {
       Schema::create('stocks', function (Blueprint $table) {
           $table->bigIncrements('id');
           $table->timestamps();
       });
   }

public function up(){　}
メソッドでは名前でも連想できますが、
migrationを実行した際にどんなテーブルを立ち上げるのか（up）が書かれています。

このメソッドの

Schema::createがテーブルの作成を意味します。
ちなみに第一引数のstocksがテーブル名になり、
第二引数の無名関数を使って、テーブルのカラム設定を記入していきます。

カラムを実際に指定しているのはここですね↓

$table->bigIncrements('id');
$table->timestamps();

この設定では
stocksというテーブル名で、
idとcreated_at, updated_atという３つのカラムをもつテーブルが出来上がります。

$table->bigIncrements('id')の方はより具体的にいうと
idというカラム名でBIGINTを使用した自動増分ID（主キー）

$table->timestamps()はdate型を入れるcreated_at, updated_atを作ってくれます。

「意味わからん」って方はとりあえずこのまま先に進んで実際にテーブルを作ったら分かりやすいかと思います。

初期設定のままだとカラムが全然足りないのでさらに追加していきます。
今回は、
商品名:name
商品詳細:detail
値段:fee
商品の画像パス:imgpath
を追加しようと思います。
すると、

$table->bigIncrements('id');
$table->timestamps();

〜以下追加〜

$table->string('name','100');
$table->string('detail','500');
$table->integer('fee');
$table->string('imgpath','200');

こういうことになります。
■string(DB上ではverchar)で100文字以内のnameカラム
■stringで500文字以内のdetailカラム
■integer(DB上ではint)のfeeカラム
■stringで200文字以内のimgpathカラム
が追加されることになります。

これでファイルを保存したら準備完了です。
ここまでで、
「テーブルを作るための構成ファイル」が出来上がりました。
それでは次はこの構成ファイルを使って実際にテーブルを作ります。

php artisan migrate

このコマンドだけです、、、、が！
XAMMPとかですと気にしなくていいですが、
Dockerなど仮想環境で作ってる方はMySQLを操作するので、どこでこのコマンドを打つべきか、、、分かりますでしょうか？

そうですねコンテナ（仮想環境）内ですね。

ここを省いてる記事が多すぎてmigrate出来ない系迷い子が世に大量発生している気がします。

上記記事で作ってくれた方はlaravelappフォルダ内のlaradockフォルダ上で

docker-compose exec workspace bash

です！

するとコンテナ内に入れますので、

cd app


でコンテナの中のappフォルダに移動してから

php artisan migrate

です。

するとマイグレーションに成功するかと思いますので、
実際にphpMyadminなどでテーブルを見に行くと、
上記構成通りのテーブルが作られているはずです。

※vagrantなどで構築されている方も同じく仮想環境内で行ってください。
※ここでmigrateが成功しない場合はmysql辺りの環境構築でつまづいているかと思います。エラー検索してもわからない場合は上記環境構築のURLを参考に一からやり始めた方が無難かもです。

テーブル完成していましたでしょうか？
記事が長くなりすぎたのでシーダーの利用などは次に回したいと思いますが、課題を出しておきますので次の記事に行く前に頑張ってみてください。

次の記事に行く前の課題

課題：cartsテーブルをmigrationファイルを使って作成してください。
カラムは
id (int)
stock_id (int)
user_id (int)
created_at
updated_at
です。

それではまた次の記事でお会いしましょう！

次回の記事出したらすぐに
お知らせするので
Twitterやnoteのフォローもよろしくね！
↓
https://twitter.com/Mukae9

プログラミング初心者の方にはこんな記事書いてるよ。
↓
https://note.com/mukae9/n/n0969ed03300a

次の記事
⇩
https://note.com/mukae9/n/naf7dff31b4db



この記事が気に入ったらサポートをしてみませんか？