Laravel + twitterbootstrapでログイン画面を作ってみる

Laravelの勉強兼ねてサクッと()作ってみる

まずはtwitterbootstrapをインストール。
公式サイト
http://getbootstrap.com/
からzipファイルをダウンロードして解凍
フォルダ名をbootstrapにしてpublic直下に追加
作業ディレクトリ/public/bootstrap
余談だけどbootstrapperっていうのもあるらしい。いつか使ってみたい(使わないパターン)

次にdbテーブルを作成。せっかくなのでartisanのマイグレーションを使ってみる。

下記コマンドを入力

```
php artisan migrate:make create_users_table
```

作業ディレクトリ/app/database/migrations/

以下にcreate_users_table.phpができてるので
function up() と down()を編集

```php:create_users_table.php

	/**
         * Run the migrations.
         *
         * @return void
         */
        public function up()
        {
            Schema::create('users', function($table)
            {
                $table->increments('id');
                $table->string('email')->unique();
                $table->string('name');
                $table->string('password');
                $table->timestamps();
            });
        }

        /**
         * Reverse the migrations.
         *
         * @return void
         */
        public function down()
        {
                Schema::drop('users');
        }

```

編集したら以下のコマンドを実行

```
php artisan migrate
```

これでとりあえず準備完了。
続いて、ログイン画面をコントローラ経由で表示させる

app/routes.phpに以下を追加

```php:routes.php

Route::get('login', 'LoginsController@action_index');

```

コントローラを作成

コントローラはどこにおいてもいいらしいがここでは無難にcontrollers以下に作成

app/controllers/LoginsController.php

でクラスを定義

```php:LoginsController.php

<?php
Class LoginsController extends BaseController{
        public function action_index() {
                return View::make('logins.index');
        }
}
?>

```

ファイル名とクラス名は統一しておく。

続いてviewを作成。
views以下にloginsフォルダを新規作成し、index.blade.phpを追加

```

mkdir app/views/logins

```

app/views/logins/index.blade.php

Laravelではviewも.phpで作るらしい。

index.blade.phpに必要な要素はログイン画面なので
ユーザ名(メール)と
パスワードのフォーム。

bootstrapの使い方は割愛。

ソースだけ貼っときます

```html:index.blade.php

<html>
<head>
        <meta charset="utf-8">
        <title>ログイン画面</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
        <div class="container" style="padding:20px 0">
                <form class="form-horizontal" style="margin-bottom:15px">
                        <div class="form-group">
                                <label class="col-sm-2 control-label" for="email">Email</label>
                                <div class="col-sm-4">
                                        <input type="text" id="email" class="form-control" placeholder="email">
                                </div>
                        </div>
                        <div class="form-group">
                                <label class="col-sm-2 control-label" for="password">Password</label>
                                <div class="col-sm-4">
                                        <input type="password" id="password" class="form-control" placeholder="password">
                                </div>
                        </div>
                        <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-4">
                                <input type="submit" value="submit" class="btn btn-primary">
                        </div>
                </form>
        </div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

```

ここまでできたらlogin/ディレクトリにブラウザからアクセスしてみる。無事BootstrapのCSSが効いている状態で表示されたら成功。

次は入力された値をデータベースに登録する処理とバリデーションの処理とかをやってこかと思います。終わり