WinRoadのLaravel4初心者講座

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

Winroad徒然草の管理人がお届けします
ビューの作成

ビューの作成

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

パスワードリマインダーのテーブルとコントローラを作成したので、次はビューを作成します。

  1. views/passwordフォルダを作成して、remind.blade.phpを下記のように作成します。
    <!DOCTYPE html>
    <html lang="ja">
     <head>
     <title>パスワードリマインダー</title>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- Bootstrap -->
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
     <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
     <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
     <![endif]-->
     </head>
     <body>
     <div class="container">
     <h2>パスワードの再発行</h2>
     <p>パスワードを再発行しますので、あなたのE-mailアドレスを入力して下さい</p>
     <div class="row">
     {{ Form::open(['url'=>'/reminders/remind','method'=>'post'])}}
     <div class="col-xs-6">
     {{ Form::text('email','',['class'=>'form-control','placeholder'=>'あなたのE-mailアドレス'])}}
     </div>
     {{ Form::submit('送信',['class'=>'btn btn-primary col-xs-2']) }}
     {{ Form::close() }}
     </div><!--/row-->
     </div><!--/container-->
     <script src="https://code.jquery.com/jquery.js"></script>
     <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
     </body>
    </html>
    • 8-9行目:BootstrapのCDNを使用してスタイルシートを読み込んでいます。public/tbsフォルダの中にダウンロードしたBootstrapを保存している場合は、下記のように記述します。
      {{HTML::style(‘/tbs/css/bootstrap.min.css)}}
      {{HTML::style(‘/tbs/css/bootstrap-theme.min.css)}}
    • 30-31行目:上記と同様CDNを使用しています。publicフォルダ内に保存している場合は、そこから読み込んでください。
  2. 作成したビューからメールアドレスを入力して送信してみます。
    laravel020
  3. 指定したメールアドレスに下記のようなメールが送信されます。
    laravel021
  4. 現状では、resetビューが作成されていませんので、リンク先をクリックするとエラーになります。
  5. 又、パスワードリセットのリンク先が『localhost/password/reset』になっていますので、まず、これを『localhost/reminders/rest』に変更するために、views/emails/authフォルダのreminder.blade.phpを下記のように修正します。
    <!DOCTYPE html>
     <html lang="ja">
     <head>
     <meta charset="utf-8">
     </head>
     <body>
     <h2>パスワードリセット</h2><div>
     パスワードをリセットするには、リンク先のフォームを入力してください。: {{ URL::to('/reminders/reset', array($token)) }}.
     </div>
     </body>
     </html>
  6. そして、views/passwordフォルダにreset.blade.phpを作成し、下記のように記述します。
    <!DOCTYPE html>
     <html lang="ja">
     <head>
     <title>パスワードリセット</title>
     <meta charset="UTF-8" />
     <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">
     <div class="row">
     {{ Form::open(['url'=>'/reminders/reset','method'=>'post','class'=>'form-signin'])}}
     <h2>パスワードの再発行</h2>
     <p>パスワードを再発行しますので、あなたのE-mailアドレスと新しいパスワードを2回入力して下さい</p>
     {{ Form::text('email','',['class'=>'form-control','placeholder'=>'あなたのE-mailアドレス'])}}
     {{ Form::password('password',['class'=>'form-control','placeholder'=>'新しいパスワード'])}}
     {{ Form::password('password_confirmation',['class'=>'form-control','placeholder'=>'新しいパスワード(確認用)'])}}
     {{ Form::hidden('token',$token) }}
     <br>
     {{ Form::submit('パスワードのリセット',['class'=>'btn btn-primary']) }}
     {{ Form::close() }}
     </div><!--/row-->
     </div><!--/container-->
     <script src="https://code.jquery.com/jquery.js"></script>
     <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
     </body>
     </html>
    • 7-8行目:public/tbsフォルダにtwitter bootstrap3をダウンロードして保存し、そこに保存されたスタイルシートを使用しています。
    • 25行目:jqueryのCDNから、jquery.jsを読み込んで使用しています。
    • 26行目:bootstrapのCDNを読み込んで使用していますが、public/tbs/jsフォルダにjsファイルを保存している場合は、下記のように記述してもOKです。
      {{HTML::script(‘/tbs/js/bootstrap.min.js’)}}
  7. これで、送られてきたメールのURLリンクをクリックすると、パスワードリセット用のブラウザが立ち上がります。
    laravel022
  8. データベースに登録されているメールアドレスと新しいパスワードを入力すると、パスワードがリセットされます。

« »

コメントを残す

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