子ネコでもデキル!初心者向け!Laravel9とCloud9で作る顧客管理システム(超長文) 2.0版 前編
Cloud9でLaravel9を動かす
この記事は初心者向けですが、以下の知識が必要です。
- AWSのアカウントを持っていて、簡単な操作が出来ること
- ターミナルの操作が出来ること
- 基本的なLinuxコマンドが使えて、Linuxの仕組みをある程度わかっていること
- HTMLやPHPの基本的な事がわかっていること
- MySQLなどのデータベースの基本的な知識があり簡単なSQL文を実行出来ること
これらの事柄は本記事では説明しないので、予め予備知識として身につけておく必要があります。
AWSコンソールでCloud9の環境を作成する
Environment typeにデフォルトの Create a new EC2 instance for environment (direct access)を選択。
Instance typeにデフォルトのt2.micro (1 GiB RAM + 1 vCPU)を選択。メモリーが1GBしかないので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のターミナルで使えるテキストエディタは2種類あります。
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の最後の行に以下の一行を追記します。
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サイトは複数のページがあって、1ページには数百行のHTML文が存在することになります。それを全部web.phpに書いてしまうと、web.phpが数万行になってあとから変更したり、新しいページを追加するのが困難になります。
この煩雑性を回避するために、1ページの情報は1ファイルに分ける仕組みがあります。
Laravelはbladeという画面表示の機能があります。
new pageの内容を1つの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ファイルをダブルクリック。
② 以下の2行を入力して、保存。
$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で新しくデータが1件登録されて、登録した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