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()を編集
/**
* 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に以下を追加
Route::get('login', 'LoginsController@action_index');
コントローラを作成
コントローラはどこにおいてもいいらしいがここでは無難にcontrollers以下に作成
app/controllers/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>
<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が効いている状態で表示されたら成功。
次は入力された値をデータベースに登録する処理とバリデーションの処理とかをやってこかと思います。終わり