会社の業務でPHPフレームワークとか触ります。(触るといっても、MVCのViewだけ)例えば、「CakePHP」とか。このCakeみたいなPHPフレームワークって、システムさんとデザイナーが作業箇所を切り分けて作業できる効率性があるし、今後も重宝しそうだなと思いました。そこで「CakePHP」を独自に学んでみようかなーと考えてたら、「最近はララベルが流行ってるよ!」らしいので、ちょっと触ってみた内容を備忘録としてここにメモ
目次
Laravel
ウェブ職人のためのPHPフレームワーク。
Googleトレンドで世界のPHPフレームワーク情勢(検索ボリューム)を見てみると、「ララベル来てる!」ってのが分かる。
ちなみに、日本に絞って確認してみると、「CakePHP」の母数が多い!でもゆるやかに減少しているのに対して、「CodeIgniter」や「FuelPHP」を抜いて「CakePHP」を上回るのも時間の問題?ゆるやか~に「ララベル来てる!」のを感じる。
インストーラー「Composer」のインストール
では、さっそく練習に何か作ってみようと思います。
Composerのインストールは必須
まず「ララベル」を使う前に、ライブラリ管理ツールのComposerを用意しておきます。
公式サイトからダウンロードなど諸々済んだら、コマンドプロンプトを開いて、インストールされたか確認してみる。
composer -v
無事にインストールが出来ていればバージョン情報が表示される。
XAMPP(MAMPでも出来た)に「Laravel」入れる
ここでの開発環境について
ちなみに環境は「Windows」の「XAMPP」の中で作っていきます。「MacOS」に入れた「MAMP」でも試してみたけど、同じ要領で作れた。
システムさん曰く、可能なら「Vegrant」に開発環境を用意するのが好ましいとのこと。
その際のBOXでよく利用されているのが公式リファレンスにもある「Larabel Homestead」。ここでは割愛しますが、ご利用の環境にあった開発手順を調べるのがよさそう。
Composer使ってLaravelをインストール!
Composerをインストールできたので、さっそくコンポーザーコマンドでララベルをインストールしていく
composer create-project laravel/laravel プロジェクト名 --prefer-dist
インストールが始まるので、終わるまでしばらく待つ。
プロジェクトのディレクトリ作成が終了したら、プロジェクトディレクトリに移動してみる。
cd path/プロジェクト名
移動したら、ララベルのビルドサーバを動かしてみる。
php artisan serve
実行してから、http://localhost:8000/
にアクセスするとー
「Laravel」と表示されました。
とりあえず、ララベルの環境構築は問題なくできたみたい。
※ビルドサーバを止めるには、コマンドプロンプト上で「Ctrl」+「C」
因みに使用可能なコマンドとかは以下で確認できる。
php artisan list
試しにLaravelのバージョンを確認してみる
php artisan --version
最新バージョンの5でした。これで進めていきます。
初期設定を済ませておく
config/app.php
'locale' => 'ja',
'timezone' => 'Asia/Tokyo',
'debug' => true,
言語と時刻をそれぞれ日本に変えておく
ローカル開発環境だし、エラーも確認できるようにしておく。
「HelloWorld」を表示させてみる
ルーティング処理を動かしてみる
とりあえずビール!的なノリで、さっそく何かを出力させてみたい。
まずはルーティングの設定から行っていく、次のファイルを開いて設定を追加していく
root/routes/web.php
初期状態ではこんな感じになってた
Route::get('/', function () {
return view('welcome');
});
のを、こんな感じに編集してみる。
Route::get('/', function () {
return 'Hello World';
});
サイトにアクセスする。おなじみ「Hello World」が表示された。
コントローラーを触ってみる
サイトの中身をこの中に入れるのはさすがに冗長的だし面倒。
テンプレファイルを作って、コントローラーで処理してみるよ
先ほどのweb.phpをこんな感じに修正
Route::get('/','SampleController@index');
次に肝心のコントローラーを用意する。
app\Http\Controllers\Controller.php
を複製し同じ階層にSampleController.php
を作成
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;
class SampleController extends Controller
{
public function index(){
return view('sample');
}
}
次は、先ほどのコントローラーに対応して新規テンプレートファイルを作ってみる。
resources\views\sample.blade.php
Hello World
で、もう一度アクセスしてみると、、
サイトにアクセスする。おなじみ「Hello World」が表示された。(2回目)
Bladeでレイアウトを作っていく
先ほども利用したが、ララベルは「Blade」っていうテンプレートエンジンを使うみたい。
継承とかできちゃうから共通したパーツをまとめられるし、まず名前がカッコいい!
レイアウト用のファイルをBlade使って作成する
とりあえずWEBサイトぽくなるように、「layout.blade.php」「header.blade.php」「footer.blade.php」を準備してみる。
/app/views/common/layout.blade.php
@yield('header')
@yield('content')
@yield('footer')
/app/views/common/header.blade.php
@section('header')
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Laravelでサイト作ってるよ</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
@yield('addCss')
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js">
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js">
<![endif]-->
</head>
<body>
@stop
@section('footer')
<!-- SCRIPTS -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
@yield('addJs')
</body>
</html>
@stop
では、先ほどのresources\views\sample.blade.php
もこれに合わせて編集し直す。
@extends('common.layout')
@section('addCSS')
<link href="{{{asset('/assets/css/〇〇.css')}}}" rel="stylesheet">
@stop
@include('common.header')
@section('content')
<h1>HelloWorld</h1>
@stop
@section('addJS')
<script type="text/javascript" src="{{{asset('/assets/js/〇〇.js')}}}"></script>
@stop
@include('common.footer')
では、そう表示されるのか
サイトにアクセスする。おなじみ「Hello World」が表示された。(3回目)
あとはCSSやJS追加したり、必要ものを肉付けしたりマークアップすれば、それらしくWEBサイトが出来そう。
データベースと連携させちゃう
データベースは色々な種類が使えるみたいですが、ここでは「MySQL」を使っていきます。
.envファイルを編集する。
「phpMyAdmin」でサンプル用の新規データベース「sample」を作成する。次に.env
ファイルをこんな感じに修正
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=sample
DB_USERNAME=root
DB_PASSWORD=***
config/database.phpを編集する。
まずはconfig/database.php
を確認する。以下の設定を確認し、「〇〇」の箇所を「mysql」にしておく
'default' => env('DB_CONNECTION', '〇〇'),
続いて「マイグレーションファイル」をコマンドで作成
php artisan make:migration マイグレーション名
これでdatabase/maigrations
フォルダにマイグレーションファイルが生成される。ユーザー情報を入れる「Create_User_Table」を作ってみた。
そして、生成されたファイルを以下のように編集してみた。
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateUserTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('user', function(Blueprint $table)
{
$table->increments('user_id');
$table->string('user_name');
$table->integer('user_age');
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down(){
//
}
}
できたら、コマンドでマイグレーションを実行してみます。
php artisan migrate
次は、ダミーのデータを追加して値を取得できるか確認してみたい。
ダミーデータの追加は「phpMyAdmin」から直接入れました。
user_id | user_name | user_age |
---|---|---|
1 | tom | 22 |
2 | sam | 30 |
3 | ken | 45 |
では、データベースの中にあるダミーデータを取得してみよう
routes\web.php
Route::get('/','SampleController@index',function(){
$user_data = DB::select('select * from user');
});
app\Http\Controllers\SampleController.php
<?php
namespace App\Http\Controllers;
use DB;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;
class SampleController extends Controller
{
public function index(){
// return view('sample');
$user_data = DB::select('select * from user');
return view('sample',['data' => $user_data]);
}
}
resources\views\sample.blade.php
@extends('common.layout')
@section('addCSS')
<link href="{{{asset('/assets/css/〇〇.css')}}}" rel="stylesheet">
@stop
@include('common.header')
@section('content')
<table>
<tr><th>ID</th><th>NAME</th><th>AGE</th></tr>
<?php foreach($data as $val){ ?>
<tr>
<td><?php echo $val->user_id; ?></td>
<td><?php echo $val->user_name; ?></td>
<td><?php echo $val->user_age; ?></td>
</tr>
<?php } ?>
</table>
@stop
@section('addJS')
<script type="text/javascript" src="{{{asset('/assets/js/〇〇.js')}}}">
@stop
@include('common.footer')
これをブラウザで確認すると
さきほど追加したダミーデータが表示された~
あとはCRUD操作の実装とか、それは追々覚えていければいいかなー
さいごに
社会人としてまずは自分で調べたり自助努力が大切ですが、それでも分からないことってあると思います。今回、独学で勉強してわからないことはシステムさんに相談して、問題を解決することができました。互いに情報を共有しあったり、分からないことを聞くこともできるので、向上心があればいろんなことを学んでいける環境ですよ。弊社でスキルアップして自分を磨いていきませんかー?→こちら