Laravel

Laravelでユーザー管理アプリの作成（その1）

更新日：

今日から、少しずつですが、Laravelで実際にユーザー管理のアプリを作成していきたいと思います。作成するユーザー管理のアプリは私の会社の内容に合わせて作成していきますので、若干特殊な状況もあると思いますが、ご勘弁ください。

基本設定

1.　まず、使用するバンドルを選定します。メール送信用にはMessageバンドル、ユーザー認証用には、Verifyバンドルを使用したいと思います。以降、追加のバンドルがあった場合はその都度インストールします。

2.　各バンドルのインストール方法は、『Messageバンドルでメール送信』、『Verifyバンドルで認証設定』を参照ください。

3.　それでは、認証には、usersテーブルを使用しますので、ルーターにUserコントローラを登録します。

laravel/application/routes.php

//ルートの追加
 Route::controller(array('user'));

4.　Userコントローラーを作成します。

laravel/application/contorollers/user.php

<?php
Class User_Controller extends Base_Controller{
 //トップページ
 public function action_index(){
 //EloquentORMでページネーションの降順データを取得
 $page=User::order_by('created_at','desc')->paginate(10);
 //ビューファイルの取得
 $view=View::make('user.index');
 //ビューにページネーションデータを渡す
 $view->users=$page->results;
 //ビューにページネーションリンクを渡す
 $view->links=$page->links();
 //ビューに前ページリンクを渡す
 $view->previous=$page->previous();
 //ビューに次ページリンクを渡す
 $view->next=$page->next();
 //ビューを開く
 return $view;
 }

 //明細ページ
 public function action_detail($id){
 //EloquentORMでデータ選択
 $data['user']=User::find($id);
 //データを渡してビューを開く
 return View::make('user.detail',$data);
 }

 //ユーザーの新規作成
 public function action_create(){
 //データ送信されたら
 if($input=Input::all()){
 //バリデーションルールの定義
 $rules=array(
 'username'=>'required|between:4,50',
 'email'=>'required|email|unique:users,email',
 'password'=>'required|alpha_num|between:4,16',
 );
 //バリデーションをインスタンス化
 $val=Validator::make($input,$rules);
 //バリデーションNGなら
 if($val->fails()){
 //エラーと入力値をセットしてリダイレクト
 return Redirect::to('user/create')
 ->with_errors($val)
 ->with_input();
 }else{
 //データのセット
 $data=Input::only(array('username','email','password'));
 //Verifyバンドルでデータの新規作成
 $create=\Verify\Models\User::create($data);
 //トップページへリダイレクト
 return Redirect::to('user/index');
 }
 }
 return View::make('user/create');
 }
}
  • 3-19行目：トップページにはユーザーの一覧を表示することにします。
  • 6行目：ページネーションで、10件ずつのデータを取得します。
  • 7-18行目：ページネーションデータ、ページネーションリンク、前ページへのリンク、次ページへのリンクを渡して、ビューを開きます。
  • 21-27行目：ユーザーの明細ページを開きます。
  • 29-57行目：ユーザーを新規作成します。
  • 33-46行目：バリデーションチェックをして、NGならエラーを表示します。
  • 48-51行目：バリデーションOKなら、Verifyバンドルを利用してユーザー登録を行います。

5.　Userモデルを作成します。

laravel/application/models/user.php

<?php
 class User extends Eloquet{
 }

6.　社内専用サイトはスマートフォンが主流ですので、jQueryMobileを使用して作成します。

7.　それでは、下記のようにユーザー管理用のBladeテンプレート（jQueryMobile用のテンプレート）を作成します。

laravel/application/views/layouts/jqm.blade.php

<!DOCTYPE html>
 <html>
 <head>
 <title>User管理</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
 <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
 <script type="text/javascript">
 /* ajaxを無効にするための設定　*/
 $(document).bind("mobileinit",function(){
 $.mobile.ajaxEnabled=false;
 $.mobile.pushStateEnabled=false;
 });
 </script>
 </head>
<body>
<div data-role="page" id="page1">
<div data-role="header" data-theme="b">
 @yield('title')
 <div data-role="navbar">
 <ul>
 @section('navigation')
 <li>{{ HTML::link_to_action('user','TOP') }}</li>
 @yield_section
 </ul>
 </div><!-- /navbar -->
 </div><!-- /header -->
<div data-role="content">
 @yield('content')
 </div><!-- /content -->
<div data-role="footer" style="text-align:center" data-theme="b">
 Builwing
 </div><!-- /footer -->
</div><!-- /page -->
</body>
 </html>
  • 6-8行目：jQueryMobileを利用するための手続きです。最新のjQueryMobileは1.3.0ですね。
  • 9-15行目：リンク間の移動でajaxが働くと挙動不審を起こす可能性がありますので、ajaxは無効にしてあります。
  • 21-27行目：ナビゲーションには、トップページへ戻るためにリンクのみを作成しておきます。それ以外のリンクは、各ビューで作成します。
  • 25行目：@yield_sectionは後で、navigationを変更したり、追加したりすることが出来るように事前に作成しておきます。
  • 30行目：@yield('content')にコンテンツが挿入されます。

8.  トップページのビューファイルを作成します。

laravel/application/views/user/index.blade.php

@layout('layouts.jqm')
@section('title')
<h1>ユーザーリスト</h1>
@endsection
@section('navigation')
 @parent
 <li>{{ HTML::link_to_action('user.create','新規') }}</li>
@endsection
@section('content')
 <ul data-role="listview">
<?php foreach($users as $user):?>
 <li><a href={{ URL::to_action('user.detail',array($user->id)) }}>
 <h3>{{ $user->username }}</h3>
 <p>{{ $user->email }}</p>
 <span class="ui-li-count">{{ $user->id }}</span></a>
 </li>
<?php endforeach;?>
@if(User::per_page() < User::count())
<div data-role="navbar">
<ul>
 {{ $previous }}
 {{ $next }}
</ul>
</div>
@endif
 </ul>
@endsection
  • 1行目：一番最初に@layoutで、テンプレートファイルを指定します。この@layoutの前には、スペースや改行を挿入してはいけません。
  • 2-4行目：@section('title')から@endsectionまでの間のデータが指定したテンプレートファイルの@yield('title')の中に代入されます。つまりタイトル名をビューファイルで指定することが出来ます。
  • 5-9行目：ナビゲーションに新規作成用のリンクを追加します。@parentは、元のナビゲーションを引き継ぎます。つまり元のナビゲーション（TOP）に新しいナビゲーション（新規、修正）が追加されます。@parentが無ければ、TOPは表示されません。
  • 9-27行目：@section('content')から、@endsectionまでの間のデータがテンプレートの@yield('content')の中に代入されます。
  • 12行目：URLクラスのto_actionメソッドで、コントローラアクションへのURLを生成します。第2引数にはワイルドカード値を指定することが出来ます。つまりここでは、IDをワイルドカード値として、userコントローラのdetailアクションへのURLを生成します。
  • リンクを生成するだけならHTMLクラスのlink_to_actionの方が簡単なのですが、今回は、アンカーリンク内にいろいろなタグを挿入していますので、URL::to_acitonメソッドを使用しています。
  • 18-25行目：件数がページネーションの指定件数（$per_page）より、多くなったときに、前ページ、次ページのリンクが表示されるように作成しています。もっと簡単なメソッドがあるのかもしれませんが、見当たりませんでしたので条件分岐で作成しました。尚、$linksを使用するとjQueryMobileではレイアウトが崩れますので、使用しませんでした。レイアウトを崩さずに$links(ページ指定のリンク表示）を作成する方法が分かる方はご教授くだされば助かります。

9.　明細ページ用のビューファイルを作成します。

laravel/application/views/user/detail.blade.php

@layout('layouts.jqm')
@section('title')
<h1>ユーザー明細</h1>
@endsection
@section('navigation')
 @parent
 <li>{{ HTML::link_to_action('user.create','新規') }}</li>
 <li>{{ HTML::link_to_action('#','修正') }}</li>
@endsection
@section('content')
 <p style="border-bottom:#CCC solid 2px">■　ID<br>
 <?php echo $user->id?></p>
 <p style="border-bottom:#CCC solid 2px">■　ユーザー名<br>
 {{ $user->username }}</p>
 <p style="border-bottom:#CCC solid 2px">■　パスワード<br>
 {{ $user->password }}</p>
 <p style="border-bottom:#CCC solid 2px">■　Eメール<br>
 {{ $user->email }}</p>
 <p style="border-bottom:#CCC solid 2px">■　認証<br>
 {{ $user->verified }}</p>
 <p style="border-bottom:#CCC solid 2px">■　disable<br>
 {{ $user->disable }}</p>
 <p style="border-bottom:#CCC solid 2px">■　deleted<br>
 {{ $user->deleted }}</p>
 <p style="border-bottom:#CCC solid 2px">■　作成日<br>
 {{ $user->created_at }}</p>
 <p style="border-bottom:#CCC solid 2px">■　更新日<br>
 {{ $user->updated_at }}</p>
@endsection
  • 1行目:indexファイルと同様に1行目にBladeテンプレートを指定しています。
  • 2-4行目：@section('title')にタイトルを記述します。
  • 5-8行目：@section('navigation')がテンプレートファイルのsection('navigation')に取って代わります。
  • 6行目:@parentがテンプレートファイルのsection('navigation')の内容を引っ張ってきます。つまり、テンプレートファイルのsection('navigation')の後に、7行目が挿入されます。この@parentが無いと6行目のみの表示になります。
  • 10-29行目：@section('content')から@endsecitonまでの内容が、Bladeテンプレートの@yield('content')に代入されます。
  • 12行目は間違いではありません。わざと<?php echo...?>で表示しています。13行目以降と同じように表示されるのを確認するために残しています。

8.　それでは表示してみましょう。現在adminだけが登録されています。

http://localhost/laravel/public/user.php

laravel008

9.　リンクボタンをクリックしてみます。下記のようになりました。

laravel009

新規ユーザー登録

10.　新規ユーザー作成のためのビューファイルを作成します。

laravel/application/views/user/create.blade.php

@layout('layouts.jqm')
 @section('content')
 @if(Session::has('warning'))
 {{ Session::get('warning') }}
 @endif
 @section('title')
 <h1>ユーザー登録</h1>
 @endsection
 {{ Form::open() }}
 <p>
 {{ Form::label('username', 'ユーザー名：') }}
 {{ Form::text('username', Input::old('username', '')) }}
 {{ $errors->has('username') ? $errors->first('username') : '' }}
 </p>
 <p>
 {{ Form::label('email', 'メールアドレス：') }}
 {{ Form::text('email', Input::old('email', '')) }}
 {{ $errors->has('email') ? $errors->first('email') : '' }}
 </p>
 <p>
 {{ Form::label('password', 'パスワード：') }}
 {{ Form::password('password') }}
 {{ $errors->has('password') ? $errors->first('password') : '' }}
 </p>
 {{ Form::submit('新規登録',array('rel'=>'external')) }}
 {{ Form::token() }}
 {{ Form::close() }}
 @endsection

11.　新規ユーザーを追加してみます。

http://localhost/laravel/public/user/create

laravel011

12.　明細を確認してみると、パスワードが暗号化（ハッシュ値変換）されているのが確認できます。

laravel012

13.　修正用のビューページとコントローラは皆さんで作成してみてください。

今日は、ユーザー管理をする上で基本となるページ（一覧ページ、明細ページ、新規作成ページ）を作成しました。

次回は、ログインページを作成したいと思います。

-Laravel

Copyright© WinRoad徒然草 , 2018 All Rights Reserved Powered by AFFINGER5.