WinRoadのLaravel4初心者講座

次世代PHPフレームワークのLaravel4を初心者向けに解説して参ります。

Winroad徒然草の管理人がお届けします
ログインフォームの作成

ログインフォームの作成

このエントリーをはてなブックマークに追加

1. ログインコントローラを作成して、まず最初にログインフォームを表示するためのgetIndex()メソッドを作成します。

laravel/app/controllers/LoginController.php

<?php
 class LoginController extends BaseController{
 //ログインフォームの表示
 public function getIndex(){
 return View::make('login/index');
 }
 }

2. ログイン用のフォームを作成するのですが、その前にTwitter Bootstrap3.0を使う準備をしたいと思います。

3. 下記のサイトからTwitter Bootstrap3.0をダウンロードして適当な箇所に解凍して下さい。

http://getbootstrap.com/

4. ダウンロードしたTwitter Bootstrap3.0は、かなりのフォルダ数、ファイル数がありますので、Twitter Bootstrap2.0系統を使用していた人でも、戸惑いそうです。

5. distフォルダ内にあるフォルダ(css、js、font)フォルダをpublic/tbsフォルダにコピーします。※tbsフォルダは事前に作成しておきます。

6. そして、今回ログインフォーム用に使用するCSSファイルをexamples/singin/singin.cssから、public/tbs/cssフォルダ内に保存します。

laravel08

7.  signin.cssファイルと同じフォルダ内にあるindex.htmlをindex.blade.php名に変更して、中身を下記のように修正して、viewsフォルダにloginフォルダを作成し、その中に保存します。

laravel/app/views/login/index.blade.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{HTML::style('tbs/css/bootstrap.min.css')}}
{{HTML::style('tbs/css/signin.css')}}
</head>
<body>
<div class="container">
{{Form::open(array('url'=>'login/index','class'=>'form-signin'))}}
 <h2 class="form-signin-heading">会員専用サイト</h2>
{{Form::text('email','',array('class'=>'form-control','placeholder'=>'E-mailアドレス'))}}
{{Form::password('password',array('class'=>'form-control','placeholder'=>'パスワード'))}}
{{Form::checkbox('remember',1,true)}} ログイン状態を保持する<br><br>
{{Form::submit('ログイン',array('class'=>'btn btn-lg btn-primary btn-block'))}}
{{Form::close()}}
</div> <!-- /container -->
</body>
</html>
  • 7行目:HTML::styleメソッドは、CSSファイルをpublicフォルダより読み込みます。ここでは、publicフォルダ内にtbsフォルダ作成し、その中にTwitter Bootstrap3.0のcssフォルダを保存しています。
  • 12行目:Form::openメソッドで、フォームを開始します。’url’でログインコントローラのgetIndexメソッドを指定しています。
  • 14行目:Form::textメソッドで、テキストフィールドを作成します。第1引数にフィールド名、第2引数はデフォルト値、第3引数は、パラメーターを連想配列で指定します。
  • 15行目:Form::passwordメソッドで、パスワードフィールドを作成します。第1引数に、パスワードフィールド名、第2引数にパラメーターを連想配列で指定します。
  • 16行目:Form::checkboxメソッドで、チェックボックスを作成します。第1引数にチェックボックス名、第2引数に値を指定します。第3引数はオプションで、trueを指定すると、初期値がチェック状態になります。
  • 17行目:Form::submitメソッドで、Submitボタンを作成します。第1引数に表示名、第2引数にはパラメーターを連想配列で指定します。

8. ブラウザからアクセスしてみます。下記のようになりました。Twitter Bootstrapはデザインの苦手な人でも簡単にレイアウトが作成できますので、便利ですね。※会員専用サイトの文字の箇所には、サイトのロゴを作成して表示するようにした方が良さそうですね。

laravel009

9. 次回は、フォームから受け取った値を処理する方法をご紹介します。

« »

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です