子ネコでも出来る！Laravel9とCloud9で作る顧客管理システム 前編 Ver2.0

子ネコでもデキル！初心者向け！Laravel9とCloud9で作る顧客管理システム(超長文) 2.0版 前編

Cloud9でLaravel9を動かす

この記事は初心者向けですが、以下の知識が必要です。

• AWSのアカウントを持っていて、簡単な操作が出来ること
• ターミナルの操作が出来ること
• 基本的なLinuxコマンドが使えて、Linuxの仕組みをある程度わかっていること
• HTMLやPHPの基本的な事がわかっていること
• MySQLなどのデータベースの基本的な知識があり簡単なSQL文を実行出来ること
  これらの事柄は本記事では説明しないので、予め予備知識として身につけておく必要があります。

AWSコンソールでCloud9の環境を作成する

Cloud9でCreate Environmentする。

Environment typeにデフォルトの Create a new EC2 instance for environment (direct access)を選択。

Instance typeにデフォルトのt2.micro (1 GiB RAM + 1 vCPU)を選択。メモリーが１GBしかないのでcomposerでメモリー不足エラーが発生する可能性があるが、そのときはSwap領域を増やして対応。

PlatformをAmazon Linux 2からUbuntu Server 18.04 LTSに変更。Ubuntuの方が使いやすいと私は思う。

Cost-saving settingをデフォルトの[After 30 minutes]のままにしておく。

Next stepをクリックして先に進む。

確認画面が表示されるのでCreate environmentボタンをクリックして環境を作成。

作成中の画面になる。

数分で環境ができあがる。

ターミナルの使い方について

Cloud9で作業をするときにターミナルを使います。
Cloud9のターミナルの使い方を説明します。

ターミナルの開き方。
Cloud9のWindowメニューからNew Terminalをクリックすると、ターミナルが開きます。

ターミナルはLinuxのコマンドを入力することが出来ます。
hostnameコマンドを入力してホスト名が表示されることを確認しましょう。

Laravel9をインストールするためにターミナルでの操作が必要になりますので、基本的なLinuxコマンドを使えるようになっておくことを推奨します。

ターミナルでテキストエディタの基本的な操作方法を覚える

Cloud9はLinuxで動いていいて、Linuxはいろいろな設定ファイルがテキストファイルで記述されています。
テキストファイルを編集することが必須になるので、テキストエディタが使える事が必須です。
Cloud9のIDEでもテキストファイルの編集はできますが、全てのファイルが編集出来るわけでは有りません。
このためターミナル上でテキストファイルを編集するために、テキストエディタの基本操作が出来る必要があります。
Linuxのターミナルで使えるテキストエディタは２種類あります。
vim
nano
です。
vimの方が機能が多く効率よくテキストファイルを編集できますが、操作を覚えるのが少しむずかしいです。
nanoは基本的な操作が簡単に出来るテキストエディタです。

nanoの基本操作

nanoの記事を別に書いたので下記のURLの記事を参照してください。
https://qiita.com/Shiro-neko-kamen/items/82cbdfaeb291164333be

PHPとMySQLをインストールする

Laravel9はPHP8以上必要なのでPHP8をインストールします。

PHP8をインストールする前に、Ubuntuに入っている古いPHPを削除します。

ターミナルで以下のコマンドを実行して、どんなPHPが入っているかを確認します。

 sudo dpkg -l | grep php

ターミナルで以下のコマンドを実行して古いPHPを削除します。

sudo apt-get purge libapache2-mod-php7.2 php php-common php-http php-mysql php-pecl-http php-propro php-raphf php-xdebug php7.2 php7.2-cli php7.2-common php7.2-json php7.2-mysql php7.2-opcache php7.2-readline

以下のエラーが出た場合
Could not get lock /var/lib/dpkg/lock-frontend - open (11: Resource temporarily unavailable)
sudo apt autoremove を実行してみてください。

apt update upgradeします。ターミナルで以下のコマンドを実行。途中で処理を続けるか聞かれたら Y[Enter]を入力して処理を続けます。

sudo apt update
sudo apt upgrade

ondrej PPA(Personal Package Archive)を追加します。
ターミナルで以下のコマンドを実行します。

sudo apt install software-properties-common
sudo add-apt-repository ppa:ondrej/php

もう一度apt update upgradeを実行します。

sudo apt update
sudo apt upgrade

ターミナルで以下のコマンドを実行して、php8.1をインストールします。

sudo apt install php8.1

php -vを実行してバージョンを確認

php -v

PHP 8.1.X (cli) (built: Jan 24 2022 10:42:15) (NTS)
が表示されます。(注Xには実行時の最新のバージョンが表示されます。)

Laravelが使ういろんなモジュールもインストールします。
ターミナルで以下のコマンドを実行します。

sudo apt-get install php8.1-cli  php8.1-common php8.1 php8.1-mbstring php8.1-xml php8.1-dom php8.1-gd php8.1-mysqlnd php8.1-pdo php8.1-zip php8.1-redis php8.1-curl

Yes/Noを聞かれたらY[Enter]で先に進みます。

その他のモジュールもインストールします。以下のコマンドを実行します。

sudo apt autoclean
sudo apt autoremove

sudo apt --purge autoremove

sudo apt install libapache2-mod-php8.1

sudo apt install php8.1-mysql

sudo phpenmod pdo_mysql

sudo apt install php-mysql

php -i

Composerのインストール

以下のコマンドをターミナルで実行してcomposerをインストールします。
composerはPHPのソフトウェアを管理するアプリケーションです。

curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/bin/composer
composer --version

Laravel9のプロジェクトを作る

ターミナルから以下のコマンドを実行してLaravel9のプロジェクトを作成しましょう。
今回プロジェクトフォルダの名前をchibi_crm9としました。

cd environment/

composer create-project laravel/laravel=9.* chibi_crm9

とりあえず動かしてみる

ターミナルから以下のコマンドを実行して、Laravelを動かしてみましょう。

cd chibi_crm9

php artisan serve --port=8080

cd chibi_crm9はカレントディレクトリを変更するLinuxのコマンドです。

php artisan serve --port=8080は簡易Webサーバーを起動するLaravelの命令になります。終了するにはターミナルウィンドウでCtrl + c を入力します。

Preview画面を表示してみる

Webサーバーを起動したので、実際に画面表示を確認してみましょう。

Cloud9のメニューからPreviewをクリックして、Preview Running Applicationをクリックしてみましょう。

Previewウィンドウが表示されます。

Notice Third-party cookies disabled エラーがでたらサファリの設定画面でサイト超えトラッキングを防ぐのチェックを外す。

You can't access preview functionality because your browser blocks third-party cookies (also known as cross-site tracking). To use previews, allow third-party cookies and reload your IDE.

Welcome viewを変更してみる

LaravelのWelcomeページをCloud9のIDEを使って変更します。

①Cloud9のEnvironmentにあるchibi_crm9左の三角▶をクリックします。
②resources左にある小さい三角形▶をクリックします。
③views左にある小さい三角形▶をクリックします。
④welcome.blade.phpをダブルクリックします。
⑤キーボードから <h1> Hello my laravel9</h1> を入力します。
⑥変更内容をを保存します。

⑦○ボタンをクリックしてリロードします。
⑧キーボードから入力した文字が反映されていることを確認します。

新しいページを表示してみる

Laravelのweb.phpを編集して新しいページを表示してみましょう。

Cloud9のIDEからweb.phpをダブルクリックして開きます。下図①②を参照。

web.phpの最後の行に以下の一行を追記します。

php8.1

Route::get('newpage',function() {return'New Page';});

この記述の意味は以下の様になります。

ブラウザにどんな情報が送られているかを確認します。
Previewウィンドウの上で右クリックして「フレームのソースを表示」を選択します。

フレームのソースには"New Page"という文字しか存在しません。
通常ウェブの画面はHTMLで文字の大きさやレイアウトを指定します。
では、次にHTMLを出力させてみましょう。

表示内容を確認しやすいように、ウィンドウを縦に並べます。

Preview Windowのタグをドラッグしてweb.phpウィンドウの下でドロップします。

web.phpウィンドウの下にPreview Windowが表示されます。

routes/web.phpにはどのアドレスで何を表示するかの設定が記述されます。

Route::get('newpage'....の行を以下のように変更してみましょう。

Route::get('newpage',function() {return'<html><head><title>New Page</title></head><body><h1 style="color:hotpink">NEW PAGE</h1><p>This is new page.</p></body></html>';});

web.phpにHTMLを記入することに成功しました。
しかし、Webサイトは複数のページがあって、１ページには数百行のHTML文が存在することになります。それを全部web.phpに書いてしまうと、web.phpが数万行になってあとから変更したり、新しいページを追加するのが困難になります。
この煩雑性を回避するために、１ページの情報は１ファイルに分ける仕組みがあります。
Laravelはbladeという画面表示の機能があります。
new pageの内容を１つのbladeファイルに分離してみましょう。

bladeファイルで表示

Cloud9のIDEのEnvironmentのviewsフォルダアイコンの上で右クリックして、New Fileをクリック。

① ファイル名としてnewpage.blade.phpを入力。
② newpage.blade.phpをダブルクリックしてウィンドウを開く。
③ newpage.blade.phpウィンドウが表示される。web.phpの上にドラッグ。
④ HTML文を入力して。保存。

<html>
<head><title>New Page</title></head>
<body><h1 style="color:skyblue">NEW PAGE</h1>
<p>This is new page.</p></body>
</html>

⑤ Route::get('newpage'...の行を以下のように変更して、変更内容を保存。

Route::get('newpage',function() {return view('newpage');});

⑥ リフレッシュボタンをクリック。bladeファイルに記述した内容が表示されることを確認しましょう。

Controller

Laravelはウェブアプリケーションを作るためのフレームワークです。
検索などの処理をしたりします。
今作ったbladeファイルは表示内容を記述して、複雑な処理は書きません。
ウェブアプリケーションは、ユーザーの登録内容をデータベースに登録したり、検索などの処理をする必要があります。
Laravelなどのフレームワークではウェブの処理を受けてる部分をControllerと呼ぶ部分に記述します。

ではControllerを使ってページ表示をしてきましょう。

Cloud9IDEで新しいターミナルを開きます。
下記コマンドを実行してカレントディレクトリをプロジェクト直下にします。

cd chibi_crm9

下記コマンドを実行してコントローラーを作成します。

php artisan make:controller NewPageController

app\Http\ControllersフォルダにNewPageController.phpが作成されます。

① NewPageController.phpを、ダブルクリックして開く。
② newpage関数を追加

    public function newpage() {
        return view('newpage');
    }

③ web.phpをコントローラを参照するように編集

Route::get('newpage',[\App\Http\Controllers\NewPageController::class, 'newpage']);

④ リフレッシュボタンをクリックして同じページが表示されることを確認。

artisanコマンド

artisanコマンドはLaravelでコマンドラインからデータベースの設定をしたりコントローラーを作ったりするコマンドです。Laravelを使うときに必ず使うので、artisanコマンドに慣れる必要があります。
使い方はプロジェクトルートから

php artisan コマンド オプション

の様に使います。

Cloud9でartisanを実行した例です。

php artisan route:listを実行してみましょう。

php artisan route:list

データベースに接続

アカウントを確認

メニューから Window→New Terminalでターミナルを開きます。

Cloud9は最初からMySQLがインストールされています。

ターミナルで以下のコマンドを実行してデータベース接続情報を確認します。

cd /etc/mysql
ls -1
sudo cat debian.cnf

client部に書いてある user と password を記録
タイプミスしないようにコピーしてテキストエディタ
などに記録すると良いでしょう。

ターミナルから以下のコマンドを実行します。

mysql -u#メモしたuser# -p

このときパスワードを聞かれるので、メモしたパスワード入力します。

MySQLに接続するので、データベースを作成しましょう。

create database chibi_crm9;

データベース作成に成功したらexitコマンドでMySQLを抜ける。

Laravelにデータベース接続設定をする

テキストエディタで.envを編集します。
.envはLaravelの環境設定ファイルです。これにデータベース接続設定をします。
Laravel9では .env がcreate-project時にデフォルトの.envが作られるます。.env存在しない場合は.env.exampleを.envというファイル名でコピーして.envを用意します。

テキストエディタはvimかnanoが良いでしょう。
初心者にはnanoがお薦めです。
.envのDB_DATABASEとDB_USERNAMEとDB_PASSWORDにメモしたMySQL接続情報を記入します。

.envの以下の部分を変更

DB_DATABASE=chibi_crm9
DB_USERNAME=debian-sys-maint
DB_PASSWORD=#PASSWORD_HERE#  ←このパスワードは各自異なるので自分がメモをしたパスワードを設定

.envを編集したら、変更内容を保存してテキストエディタを終了させます。nanoの場合はCtrl+Xで保存終了することが出来ます。

php artisan migrationを実行

コマンドラインから
php artisan migrate
を実行してデータベースにLaravelが使うテーブルを作成します。

php artisan migrate

migrationはLaravelのデータベース設定内容をデータベース反映させます。

ターミナルからmysqlコマンドを実行してデータベースの状態を確認してみましょう。

① mysql -udebian-sys-maint -p を入力してエンターキーをぽん！
② MySQLのパスワードを入力
③ use chibi_crm9 を入力
④ show tables;を入力して実行
⑤ migrationで作成されたテーブル一覧が表示される
⑥ select * from users;で、中身が空なことを確認

-->

テーブル定義を作成

ターミナルから以下のコマンドを実行してcoffeesテーブル定義を作ります。

php artisan make:migration create_coffees_table

Laravelプロジェクトのdatabase/migrationsディレクトリに ・・・create_coffees_table.phpファイルが作成されます。

次にCLoud9のIDEから・・・create_coffees_table.phpファイルをダブルクリックして内容を編集していきましょう。

① …create_coffees_table.phpファイルをダブルクリック。
② 以下の２行を入力して、保存。

$table->string('name');
$table->integer('price');

再度 php artisan migrate:fresh を実行

ターミナルで実行。

php artisan migrate:fresh

今回からmigrateに:freshを指定します。:freshを指定すると既存のデータベース定義を一度削除して、最初から再度作成します。

coffeesテーブルがデータベースに作成されます。

テーブルにアクセスするクラスを作成

ターミナルで実行

php artisan make:model Coffee

② app/Models/Coffee.phpが作られます。

このCoffee.phpの中身を確認しましょう。

Cloud9のIDEからCoffee.phpをダブルクリックします。

tinkerでデータベースにアクセスしてみる

tinkerを使ってcoffeesテーブルにアクセスしてみましょう。

ターミナルから以下のコマンドを実行。

php artisan tinker

Tinkerが起動したら

$coffees = \App\Models\Coffee::get();

を実行します。

まだcoffeesテーブルに何もデータが入っていないので、データは表示されません。

Tinkerから以下のコマンドを実行してデータを作成します。

\App\Models\Coffee::create(['name'=>'Moca','price'=>320,]);

実行するとエラーが出ます。

エラーメッセージを読みましょう。今後必ずエラーが発生します。このときにエラーメッセージを読むことはすごく重要です。エラーメッセージで検索してみると良いヒントが見つかることもあります。
'Add [name] to fillable property to allow mass assignment on [App\Models\Coffee].'
nameをCoffeeクラスのfillableプロパティに追加しろ。というような意味です。
LaravelではCoffeeクラスのようなデータをアクセスするクラスには、セキュリティ維持のためfillableプロパティとして項目名を予め定義している必要があります。
公式ドキュメント https://readouble.com/laravel/8.x/ja/eloquent.html

Cloud9のIDEを使ってCoffee.phpにfillableを追加しましょう。

Coffee.phpの11行目あたりに下記の定義を追加して、保存します。

protected $fillable = ['name','price'];

もう一度ターミナルからtinkerを再実行します。
先程エラーになったtinkerは古い設定のまま動いているので、いちどCtrl+Cで停止するか、新しいターミナルを開いてtinkerを呼び出します。

以下のコマンドでtinker起動

 php artisan tinker

tinkerが起動したら以下のコマンドでデータ作成

\App\Models\Coffee::create(['name'=>'Moca','price'=>320,]);

Coffee::createで新しくデータが１件登録されて、登録したCoffeeオブジェクトが返ってきます。

coffeesテーブルの内容を取得てみましょう。

tinkerの画面で以下のコマンドを実行します。

\App\Models\Coffee::get();

データベースに格納されたcoffeesテーブルのデータを取得できました。

mycliコマンドをインストール

mycliとは

データベースの操作をして中身を書き換えたときに、確認する手段が必要になります。
データベースの中身を確認する手段はいくつかありますが、ここではmycliコマンドを利用します。

本家サイト https://www.mycli.net/

mycliのインストール

CLoud9のターミナルから以下のコマンドを実行してmycliコマンドをインストールします。

sudo apt-get install mycli

mycliの起動

Cloud9のターミナルから以下のコマンドを入力してEnterキーで実行します。

mycli -udebian-sys-maint -p#MySQLのパスワード#

mycliの基本的な使い方

以下のコマンドを mycliで実行するとデータベース一覧が表示されます。

show databases

以下のコマンドをmycliで実行して利用するデータベースを選択します。

use chibi_crm9

以下のコマンドをmycliで実行するとテーブル一覧が表示されます。

show tables

以下のコマンドをmycliで実行してテーブルの内容を表示します。

select * from coffees

MEMO

ストレージ不足になったとき

以下のコマンドを実行してどこが容量を使っているかを調べる。

sudo du / > /tmp/du
cat /tmp/du | sort -n > /tmp/du.s
tail /tmp/du.s

/var/lib/docker/overlay2
が、肥大化している場合。

:/tmp $ tail /tmp/du.s
958720	/opt/c9
958736	/opt
1367116	/usr/lib
1578008	/snap
2413760	/var/lib/docker/overlay2
2419748	/var/lib/docker
3419264	/var/lib
3525800	/usr
4422356	/var
11582716	/
:/tmp $

docker container prune