WinRoadのLaravel4初心者講座

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

Winroad徒然草の管理人がお届けします
ログイン用ページの作成

ログイン用ページの作成

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

Bootstrapを使ってログイン用のページを作成してみたいと思います。

  1. Bootstrap3には、簡単にページを作成できるようにレイアウト例がいくつかあります。
  2. その中のSign-in Pageを使用する方法を調べてみます。
  3. 下記のページの真ん中あたりにあるSign-in Pageの画像をクリックします。
    http://getbootstrap.com/getting-started/
  4. Sign-in Pageを開いたら、右クリック→ソースの表示とクリックします。
  5. ページソースの中の17行目にあるsignin.cssリンク文字をクリックします。
    laravel024
  6. スタイルシートが表示されますので、右クリック→名前を付けて保存で、signin.css名でpublic/tbs/cssフォルダ内に保存します。
  7. つぎにapp/viewsフォルダ内に、login.blade.phpファイルを作成して、上記のSign-in Pageを下記のように修正します。
    • <!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'=>'user/login','method'=>'post','class'=>'form-signin'))}}
       <h2 class="form-signin-heading">会員専用サイト</h2>
       {{Form::text('name','',array('class'=>'form-control','placeholder'=>'ユーザー名'))}}
       {{Form::password('password',array('class'=>'form-control','placeholder'=>'パスワード'))}}
       @if($errors->has('name'))
       <div class="alert alert-danger">
       {{$errors->first('name')}}
       </div>
       @endif
       {{Form::checkbox('remember',1,true)}} ログイン状態を保持する<br><br>
       {{Form::submit('ログイン',array('class'=>'btn btn-lg btn-primary btn-block'))}}
       <br>
       {{ HTML::link('/reminders/remind','パスワードの再発行')}}
       {{Form::close()}}
       </div> <!-- /container -->
       </body>
       </html>
    • 8行目:先ほどコピーしたsingnin.cssを読み込んでいます。
  8. このように必要な部分だけをコピーして、残りを書き換えることで簡単にBootstrapのレイアウトページが作成することが出来ます。
    laravel025
  9. こんなに簡単にログインページが作成できました。

« »

コメントを残す

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