CRI BOOT CAMP
作成日：2021/04/12 更新日：2023/12/12
#4 Laravelでアプリケーション作成の準備
以前作ったアプリケーションをLaravelに移植する
応用1で作ったドラッグ&ドロップアプリをLaravelに移植して、Laravelでどのようにしてアプリケーションを作るのかを体感してみましょう。migrationでテーブル定義する
まずはデータベースの整備をしていきましょう。応用1 #9で「cri_sortable」テーブルを作成したように、 Laravelでもテーブルを作りカラムやデータを追加していきます。
その際、応用編の時のように手動でカラムを設定しても良いのですが、せっかくなのでここでLaravelの便利な機能を使ってみたいと思います。
Laravelにはマイグレーションという機能が予め備わっています。
簡単にいえば「テーブル定義を作成/管理」してくれる仕組みです。
テーブル定義とは、テーブル名やカラム等のテーブルを構成する要素を定義することです。
応用編の時もカラムを作成する際に、色々と条件をつけたと思います。例えば、
「id」カラムはint(整数)型で、Auto Increment属性を付与する。
「name」カラムはtext型で、照合順序は「utf8_generral_ci」
などなど...
これらの設定を予めphpファイルにまとめて記述しておき、実行することによってテーブル定義を自動で設定してくれる機能です。
早速、マイグレーションしてみましょう。まずはマイグレーション設定ファイルの作成からです。
①migrationファイル作成
下図の様な流れでコマンドを実行していきましょう。
$ cd ~/job/stg/8026-laravel/CBC_Laravel/
$ php artisan make:migration create_sortables_table --create=sortables
↓上記のコマンドを実行するとこのように表示されます。
⇨Created Migration: 2020_01_28_070250_create_sortables_table
「php artisan make:migration」でmigrationファイル作成の指示。
create_****_tableは **** = テーブル名 となっておりテーブル名を指定します。
オプションの--create=****は **** = テーブル名 となっており同じくテーブル名を指定します。
※後ほど使うのでターミナルはこのまま閉じないでください。
②作成したmigrationファイルの編集
中身の編集を行います。作成したmigrationファイルをエディタで開いてください。ファイルパス：8026-laravel/CBC_Laravel/database/migrations/2020_01_28_070250_create_sortables_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateSortablesTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('sortables', function (Blueprint $table) {
$table->bigIncrements('id');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('sortables');
}
}
upメソッド内を下図の様に修正してみてください。
public function up()
{
Schema::create('sortables', function (Blueprint $table) {
$table->integer('id')->autoIncrement();
$table->text('name')->nullable(false);
$table->integer('left_x')->nullable();
$table->integer('top_y')->nullable();
});
}
「cri_sortable」テーブルには四つのカラム「id」「name」「left_x」「top_y」が設定されていました。
マイグレーションでの設定方法を見てみましょう。
$table->integer('id')->autoIncrement();
「->（アロー演算子）」を使って、後に$table内に設定するカラムを設定しておきます。
「integer('id')」は「Integer型のidカラム」という意味です。
「autoIncrement()」で、そのカラムにAutoIncrement属性を付与することができます。
ここまで分かれば下の3行も何が書かれているのかは分かると思います。「name」「left_x」「top_y」カラムに関する設定を記述しています。
ちなみに、「nullable()」はそのカラムに値「null」が入って来ることを許容するかどうかの設定です。 ()の中に引数を指定しなければnullを許容し、「false」を指定すればnullを拒絶するようになります。
③migration実行
マイグレーションファイルの修正が完了したら、早速マイグレーションを実行してみましょう。※実行する前に、デフォルトで作成されているマイグレーションファイルは全て削除しておいてください。
アプリケーションディレクトリまでcdコマンドで移動てあることを確認して下図のコマンドを実行してください。
$ php artisan migrate
//↓ 実行するとこのように表示されます
Migration table created successfully.
Migrating: 2020_01_28_081102_create_sortables_table
Migrated: 2020_01_28_081102_create_sortables_table (0.03 seconds)
④migration結果の確認
指定した設定が反映されているか、データベースを見てみましょう。
データベース「cbc_laravel」にテーブル「sortables」が作成され、テーブルの中には4つのカラムが設定されているはずです。
多人数でのアプリ開発において非常に有効な機能ですので、こういった機能があることは覚えておきましょう。
artisanコマンドについて
今までに何度か登場しているartisanコマンドですが、これはLarevel専用の作業指示コマンドです。Laravelには、アプリケーション開発において発生する、様々な作業を簡単に実行できる機能が備わっていて、それらを呼び出し実行させる際にこの「artisan」コマンドを実行します。
今回の「artisan make」はファイル等を作成してくれるコマンドで、オプションを設定することで設定通りのファイルを作成します。 artisanコマンドは他にも沢山便利機能を持っています(全68種類)。$ artisan list で確認できます。
artisanはフランス語で「職人・匠」という意味があります。あなたの代わりに職人のように動作をしてくれます。
#5 Laravelでブラウザに表示されるかを確認する
公開用フォルダにデータを入れる
実行環境やデータベースの設定が済んだら、今度はブラウザに表示する画面周りの整備を行います。応用2 #7で使用した「index.php」と「style.css」を用意してください。
データがない場合はこちらをダウンロード
①publicフォルダにcss、jsファイルを入れる
index.phpはのちほど中身だけ使うので、publicフォルダにはコピーしないようにしてください。最初に入っているindex.phpを書き換えないでください。
cssファイルはcssフォルダごとpublicフォルダに入れておきます。
jsファイルを別にしておきます。ファイル名はmain.jsにします。
テンプレートエンジンで画面の骨組みを作る 〜View〜
次に、ブラウザでアプリを表示する際にメインで動くことになるsortable.blade.phpを作成します。ファイル名に記載されているbladeは、 Laravelに導入されている「テンプレートエンジン」のことです。
テンプレートエンジンとは、簡潔に言うと、「データ」と「テンプレート」を合体させ、文字列を作る仕組みで、 あらかじめ固定で出力したい内容を「テンプレート」として保持しておき、 データベースから取得したデータを適用させたい箇所に配置し、動的な画面を出力することができます。
応用編 #2で作成した「index.php」をもとに、新規ファイルとして「sortable.blade.php」を作成し、 ファイルパス：CBC_Laravel/resources/views/ に入れます。
その際、css読み込み箇所とjs読み込み方法と記述場所は以下のとおりに記述してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>8001-cri-sortable</title>
<link href="{{ asset('css/style.css')}}" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<div id="input_form">
</div>
<div id="drag-area">
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="{{ asset('js/main.js')}}"></script>
</body>
</html>
ルーティングでURLを設定する 〜routing〜
最後に、ルーティングを管理している「web.php」の編集を行います。ファイルパス：CBC_Laravel/routes/web.php を開きます。
<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
/*return view('welcome');*/
return view('sortable'); /* welcomeとなっている部分をsortableに変更します */
});
web.phpは、とあるURLがリクエストされた際に、アプリケーション側がどういったアクションを起こすのかを設定するファイルです。
Route::get('/' は、リクエストされたURLが / だった場合{ }内の処理を実行する、といった意味になります。
この「/」はルートのURLを指します。環境構築の際に確認した「http://localhost:8026/」のことです。
return は実際の処理内容になります。
view()メソッドはブラウザに表示させるためのメソッドで、引数に指定されているphpを呼び出し、演算してブラウザ上に表示させます。
引数は「sortable」となっています。こう指定することで、「resources」フォルダ配下に置かれている「sortable.blade.php」を呼び出すことが出来ます。
実際にブラウザ上でURLを実行し、画面表示させてみましょう。環境構築の際に確認したURL http://localhost:8026/ このURLを実行してみてください。スタートアップページではなく、下図の様なページが表示されるはずです。
入門
基礎
応用
実践フロントエンド
実践バックエンド
デザイン
キッズ