Keep Coding!

A fearless adventure in knowing what to do when no one’s there telling you what to do.

laravel5.3のチュートリアルしてみた話。

PlayStation 4 ジェット・ブラック 500GB(CUH-2000AB01)

PlayStation 4 ジェット・ブラック 500GB(CUH-2000AB01)

買いました。

FIFA 17

FIFA 17

そして買いました。

そして、laravel入門しました(実は入門が約3ヶ月前で、気づいたら5.3がリリースされててチュートリアルやり直したのは内緒)。

チュートリアルをしたので、その手順です。

基本のタスクリスト 5.2 Laravel

composerのインストール

なにはなくともcomposerということで、導入します。

getcomposer.org

kohkimakimoto.github.io ページの通りにインストールします。

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

Laravelのインストール

ここは基本のタスクリストの通りに。

$ composer create-project laravel/laravel quickstart
$ ls quickstart
app      bootstrap      composer.lock  database     package.json  public     resources  server.php  tests
artisan  composer.json  config         gulpfile.js  phpunit.xml   readme.md  routes     storage     vendor

ぱっと見の5.2との違いは、routesが一番上にきていること。。。か?

DBの準備

DBを準備します。
今回は楽に、sqliteを使います。

## 初期設定で呼ばれる場所にファイルを作っておきます
$ touch database/database.sqlite
## 権限も変更しておきます。チュートリアルなのでフルオープンで。
$ chmod 777 database 
$ chmod 777 database/database.sqlite
## あわせてlogなどが書き込まれる storageの権限もかえておきます
$ chmod -R 777 storage 

## .envの設定をします。環境設定ファイルですね。
$ vim .env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

↓

DB_CONNECTION=sqlite
#DB_HOST=127.0.0.1
#DB_PORT=3306
#DB_DATABASE=homestead
#DB_USERNAME=homestead
#DB_PASSWORD=secret

データベースマイグレーションの実行

雑に言うと、phpでテーブルの定義作って実行すると、DBにテーブル作ってくれるやつ。

# artisanを使ってマイグレーションファイルを生成します
$ php artisan make:migration create_tasks_table
# database/migrationsの下に2016_09_28_034952_create_tasks_table.phpみたいな形式で生成されるので開きます
$ vim database/migrations/2016_09_28_034952_create_tasks_table.php

# 初期状態だとidとtimestampぐらいしかないので、nameを追加します。
### database/migrations/2016_09_28_034952_create_tasks_table.php
<?php

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateTasksTable extends Migration
{
    /**
     * マイグレーション実行
     *
     * @return void
     */
    public function up()
    {
        Schema::create('tasks', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
    }

    /**
     * マイグレーション巻き戻し
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('tasks');
    }
}
### database/migrations/2016_09_28_034952_create_tasks_table.php
# ちなみに僕は、:x で閉じてます。

## migrate実行します
$ php artisan migrate

## DBの中を見ると、taskテーブルが生成されているはずです。
$ sqlite3 database/database.sqlite
SQLite version 3.7.17 2013-05-20 00:56:22
Enter ".help" for instructions
Enter SQL statements terminated with a ";"

## テーブルを確認
sqlite> .tables
migrations       password_resets  tasks            users

## create tableされてる
sqlite> .schema
CREATE TABLE "migrations" ("migration" varchar not null, "batch" integer not null);
CREATE TABLE "users" ("id" integer not null primary key autoincrement, "name" varchar not null, "email" varchar not null, "password" varchar not null, "remember_token" varchar null, "created_at" datetime null, "updated_at" datetime null);
CREATE UNIQUE INDEX "users_email_unique" on "users" ("email");
CREATE TABLE "password_resets" ("email" varchar not null, "token" varchar not null, "created_at" datetime null);
CREATE INDEX "password_resets_email_index" on "password_resets" ("email");
CREATE INDEX "password_resets_token_index" on "password_resets" ("token");
CREATE TABLE "tasks" ("id" integer not null primary key autoincrement, "name" varchar not null, "created_at" datetime null, "updated_at" datetime null);

ORMの生成

Laravelでは、Eloquentモデルと言われています。

# aritisanで作ります
$ php artisan make:model Task
# 生成されたものを確認します
$ vim app/Task.php

## app/Task.php
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Task extends Model
{
    //
}
## app/Task.php

中身は空ですが、DBのテーブル名(tasks)が、モデル(Task.php)の複数形であるという規則に通りであれば対応をとって解釈してくれます。

ルーティングの定義

雑に言うと、どのURLへのアクセスでどの処理を行うかの定義みたいです。

## laravel5.3 では routes/web.phpの下にあります。5.2とかは、app/Http/routes.phpでしたよね?
$ vim routes/web.php
を記入
<?php
use App\Task;
use Illuminate\Http\Request;

Route::get('/', function () {
  return view('tasks', [
    'tasks' => Task::orderBy('created_at', 'asc')->get()
  ]);
});

Route::post('/task', function (Request $request) {
  $validator = Validator::make($request->all(), [
    'name' => 'required|max:255',
  ]);
  if ($validator->fails()) {
    return redirect('/')
      ->withInput()
      ->withErrors($validator);
  }
  $task = new Task;
  $task->name = $request->name;
  $task->save();
  return redirect('/');
});

Route::delete('/task/{id}', function ($id) {
  Task::findOrFail($id)->delete();
  return redirect('/');
});

今回は3つ定義しています。

"/" 一覧表示画面 "/task" タスク追加 "/task/{id}" タスクの削除

チュートリアルなので実行する処理を全部routes/web.phpに書いていますが、実際は分けるべき。。。か。。。?

Viewの作成

実際に見える部分のViewを作っていきます。

laravelではbladeが使われているみたいです。(bladeってなんだろう。。。?)

ちなみにviewは、resources/views/以下にあります。

laravel.com

## まずは、レイアウトの部分を作ります。
$ vim resources/views/layouts/app.blade.php

### resources/views/layouts/app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel Quickstart - Basic</title>

    <!-- Fonts -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>

    <!-- Styles -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    {{-- <link href="{{ elixir('css/app.css') }}" rel="stylesheet"> --}}

    <style>
        body {
            font-family: 'Lato';
        }
        .fa-btn {
            margin-right: 6px;
        }
    </style>
</head>
<body id="app-layout">
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">

                <!-- Branding Image -->
                <a class="navbar-brand" href="{{ url('/') }}">
                    Task List
                </a>
            </div>

        </div>
    </nav>

    @yield('content')

    <!-- JavaScripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    {{-- <script src="{{ elixir('js/app.js') }}"></script> --}}
</body>
</html>
### resources/views/layouts/app.blade.php

## @yield('content')の部分に実際のページが入って行くわけですね

## では、その中身となるresources/views/tasks.blade.phpをみていきます。
$ vim resources/views/tasks.blade.php

### resources/views/tasks.blade.php
@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="col-sm-offset-2 col-sm-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    New Task
                </div>

                <div class="panel-body">
                    <!-- Display Validation Errors -->
                    @include('common.errors')

                    <!-- New Task Form -->
                    <form action="{{ url('task')}}" method="POST" class="form-horizontal">
                        {{ csrf_field() }}

                        <!-- Task Name -->
                        <div class="form-group">
                            <label for="task-name" class="col-sm-3 control-label">Task</label>

                            <div class="col-sm-6">
                                <input type="text" name="name" id="task-name" class="form-control" value="{{ old('task') }}">
                            </div>
                        </div>

                        <!-- Add Task Button -->
                        <div class="form-group">
                            <div class="col-sm-offset-3 col-sm-6">
                                <button type="submit" class="btn btn-default">
                                    <i class="fa fa-btn fa-plus"></i>Add Task
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Current Tasks -->
            @if (count($tasks) > 0)
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Current Tasks
                    </div>

                    <div class="panel-body">
                        <table class="table table-striped task-table">
                            <thead>
                                <th>Task</th>
                                <th>&nbsp;</th>
                            </thead>
                            <tbody>
                                @foreach ($tasks as $task)
                                    <tr>
                                        <td class="table-text"><div>{{ $task->name }}</div></td>

                                        <!-- Task Delete Button -->
                                        <td>
                                            <form action="{{ url('task/'.$task->id) }}" method="POST">
                                                {{ csrf_field() }}
                                                {{ method_field('DELETE') }}

                                                <button type="submit" class="btn btn-danger">
                                                    <i class="fa fa-btn fa-trash"></i>Delete
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection
### resources/views/tasks.blade.php

## @extends('layouts.app')で、対象のレイアウトを指定して、@section('content')から@endsectionまでを@yield('content')に入れて行く感じですね

## 蛇足ですが、エラーページなんかも準備してみます。
$ vim resources/views/common/errors.blade.php

### resources/views/common/errors.blade.php
<!-- resources/views/common/errors.blade.php -->

@if (count($errors) > 0)
    <!-- Form Error List -->
    <div class="alert alert-danger">
        <strong>おや?何かがおかしいようです!</strong>

        <br><br>

        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
### resources/views/common/errors.blade.php

## レスポンスコードごとにページを作ったりもできます
$ ls resources/views/errors/
400.blade.php  404.blade.php  405.blade.php  500.blade.php  503.blade.php

実際の画面

こんな感じ。 f:id:her0m31:20161016115222p:plain

空で投稿しようとすると、、、、 f:id:her0m31:20161016115230p:plain

おうふ。

おわり

laravel公式のチュートリアルと同じじゃねえか!

🐳 (Docker)入門した話。

フリー素材のゆかちぃがアメブロはじめたってさ。

 
 

 
 
 
そして私は、docker for macで 🐳 入門しました。

参考ページ:

b.hatena.ne.jp

d.hatena.ne.jp

docker for macのインストール

docs.docker.com

ダウンロードしてインストールします。

確認

# mac側
$ docker -v
Docker version 1.12.0, build 8eab29e
$ docker-compose -v
docker-compose version 1.8.0, build f3628c7

なんか動かしてみる

# mac側
## remoteからdockerの公式image?をとってくる
$ docker pull centos:latest
latest: Pulling from library/centos
Digest: sha256:a66ffcb73930584413de83311ca11a4cb4938c9b2521d331026dad970c19adf4
Status: Image is up to date for centos:latest

$ docker run -i -t centos /bin/bash
### -i:コンテナの標準入力を開く
### -t:tty(端末デバイス)を確保
### http://d.hatena.ne.jp/kt_hiro/20140809/1407545821

# docker側
[root@2f67813749f8 /]#  ls
anaconda-post.log  bin  dev  etc  home  lib  lib64  lost+found  media  mnt  opt  proc  root  run  sbin  srv  sys  tmp  usr  var

なんか動いてそう。

apacheをインストールしてみる

# docker側
[root@2f67813749f8 /]# yum install httpd
~
[root@2f67813749f8 /]# httpd -v
Server version: Apache/2.4.6 (CentOS)
Server built:   Jul 18 2016 15:30:14
[root@8d0981a3cf4c /]# exit

# mac側
## apacheをインストールしたコンテナを保存
$ docker commit 2f67813749f8 her0m/httpd
sha256:9b4a03682c37f46e2016eb6b1e290a61960b0a3fee6039f6c33d014de961c43c

## imagesで保存されているか確認
$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
her0m/httpd         latest              9b4a03682c37        4 minutes ago       325.8 MB
centos              latest              970633036444        4 weeks ago         196.7 MB
hello-world         latest              c54a2cc56cbb        8 weeks ago         1.848 kB

## 起動して確認
$ docker run -p 80:80 -i -t -d her0m/httpd /usr/sbin/httpd -D FOREGROUND
de1673aa08787a6d4eb4cfdd7875370481905cd1898b68245e2830110cf06579
### -d:バックグラウンドで実行
### http://d.hatena.ne.jp/kt_hiro/20140809/1407545821

$ docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                NAMES
de1673aa0878        her0m/httpd         "/usr/sbin/httpd -D F"   36 seconds ago      Up 35 seconds       0.0.0.0:80->80/tcp   gigantic_varahamihira

## 起動中のコンテナに入って、index.htmlを作ってみる
$ docker exec -it de1673aa0878 bash

# docker側
[root@de1673aa0878 /]# echo "Whale Watching." >> /var/www/html/index.html
[root@de1673aa0878 /]# exit

# mac側
$ curl localhost
Whale Watching.

f:id:her0m31:20160828152645p:plain

apacheも動いてるみたい。

おわり

何となく再起動させてみたけど大丈夫だった。

$ docker stop de1673aa0878
de1673aa0878
$ docker start de1673aa0878
de1673aa0878
$ curl localhost
Whale Watching.

配属されて一月たったので良く使うコマンドの話。

東京暑いですね。(東北比較)

ぼくは、さいきん浴衣の女の子の良さに目覚めました。

(๑˃̵ᴗ˂̵)و

続きを読む

CentOS 7.2 Firewallの設定をした話。

アイキャッチ画像をゆかちぃにしました。

twitter.com

her0m31.hatenadiary.jp

続きです。

firewallの設定です。 ちなみに、CentOS7から、ファイアウォールの設定がiptablesからfirewalldに変わったそうです。

続きを読む

CentOS 7.2 にapache, mysql, php導入した話。

さいきん、L字型デスク導入しました。

部屋が、机だけになりました。


そして、いままで使っていたServersMan@VPSをConoHa VPSに乗り換えました。

her0m31.hatenadiary.jp

her0m31.hatenadiary.jp


その初期設定とLAMP環境の構築手順です。

続きを読む