2018.03.02
WEB

Laravel 入門したばかりのデザイナーが、ページ作って表示させたり、基本的な機能を使ったこととか備忘録。

うデザインちーむ

会社の業務でPHPフレームワークとか触ります。（触るといっても、MVCのViewだけ）例えば、「CakePHP」とか。このCakeみたいなPHPフレームワークって、システムさんとデザイナーが作業箇所を切り分けて作業できる効率性があるし、今後も重宝しそうだなと思いました。そこで「CakePHP」を独自に学んでみようかなーと考えてたら、「最近はララベルが流行ってるよ！」らしいので、ちょっと触ってみた内容を備忘録としてここにメモ

1 Laravel
- 1.1 ウェブ職人のためのPHPフレームワーク。
2 インストーラー「Composer」のインストール
- 2.1 Composerのインストールは必須
3 XAMPP（MAMPでも出来た）に「Laravel」入れる
- 3.1 ここでの開発環境について
- 3.2 Composer使ってLaravelをインストール！
4 初期設定を済ませておく
- 4.1 config/app.php
5 「HelloWorld」を表示させてみる
- 5.1 ルーティング処理を動かしてみる
6 コントローラーを触ってみる
7 Bladeでレイアウトを作っていく
- 7.1 レイアウト用のファイルをBlade使って作成する
8 データベースと連携させちゃう
9 さいごに

Laravel

Laravel公式サイト
公式サイト

ウェブ職人のためのPHPフレームワーク。

Googleトレンドで世界のPHPフレームワーク情勢（検索ボリューム）を見てみると、「ララベル来てる！」ってのが分かる。

ちなみに、日本に絞って確認してみると、「CakePHP」の母数が多い！でもゆるやかに減少しているのに対して、「CodeIgniter」や「FuelPHP」を抜いて「CakePHP」を上回るのも時間の問題？ゆるやか～に「ララベル来てる！」のを感じる。

インストーラー「Composer」のインストール

composer

では、さっそく練習に何か作ってみようと思います。

Composerのインストールは必須

まず「ララベル」を使う前に、ライブラリ管理ツールのComposerを用意しておきます。
公式サイトからダウンロードなど諸々済んだら、コマンドプロンプトを開いて、インストールされたか確認してみる。


composer -v

composerのVer確認

無事にインストールが出来ていればバージョン情報が表示される。

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起動

「Laravel」と表示されました。
とりあえず、ララベルの環境構築は問題なくできたみたい。
※ビルドサーバを止めるには、コマンドプロンプト上で「Ctrl」+「C」
因みに使用可能なコマンドとかは以下で確認できる。


php artisan list

試しにLaravelのバージョンを確認してみる


php artisan --version

最新バージョンの５でした。これで進めていきます。

初期設定を済ませておく

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

/app/views/common/footer.blade.php


@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')

では、そう表示されるのか
bladeファイルの表示確認
サイトにアクセスする。おなじみ「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操作の実装とか、それは追々覚えていければいいかなー

さいごに

社会人としてまずは自分で調べたり自助努力が大切ですが、それでも分からないことってあると思います。今回、独学で勉強してわからないことはシステムさんに相談して、問題を解決することができました。互いに情報を共有しあったり、分からないことを聞くこともできるので、向上心があればいろんなことを学んでいける環境ですよ。弊社でスキルアップして自分を磨いていきませんかー？→こちら