Nowadays, you’d be hard-pressed to find a PHP developer who doesn’t know about Laravel. If you are one of these people, visit the Laravel site
ASAP! The framework is insanely popular in the PHP community these
days because of the thought that has gone into it to make it easy to use
and robust as hell! We will demonstrate its easy-of-use by building an
admin interface that we can use to manage our users in some fake
application we have already built. Let’s do it!
This will create a directory called
EDIT: Thanks to Triggvy Gunderson for pointing out the following two extra steps to take. You should change the
Now that all that initial setup is done, let’s create and seed our database.
If you go to
This is all we need to create our database table! Piece of cake. Now
let’s seed the table to give us some fake data to play with later.
Make sure to uncomment the line in
That line creates a “controller” route in our application. This
means we can create a route by editing our controller, not our routes
file. For example, in our HomeController, we could set up a route that
is picked up when we send a PUT request to the url
Here we are setting up the login routes to display the login form and process it. The
Now that we have the routes created, let’s create the views. We only need one view for this controller. We need to put it in the
Nothing crazy happening here. We are creating a form that will
submit to our route. By default, Laravel forms submit a POST request to
the same URL we are on. This is perfect for the way we set up our
login routes. At the top, you can see we are extending a layout. Let’s
create that too. This is a good practice for making extendable routes
in your applications. Use the layouts to create basic templates for
your views so your main view files need the least amount of code in
them. Layouts usually include the CSS and JavaScript files that are
used in all views. Below is the layout I used. It should be in
This is a basic layout. It brings in Twitter Bootstrap and Font Awesome just to make our views look pretty. I’m not much of a designer. Bootstrap is my savior!
In your browser, navigate to your project. I set up a virtual host for mine. So, I go to
This is a method to return a user’s full name. This is just a
convenience. I use this in all my projects. Now that we have this,
let’s add a route to our routes file to expose our the user controller
we will create to our application. Make your
We added a resource route. This allows us to interact with our controller in a RESTful way. If you don’t know REST, then read up here!
It just standardizes the way we interact with our application. Now,
let’s create our controller. Let’s utilize Laravel’s command line
utility Artisan and have it create some boilerplate code for us. Run
the following command.
This creates a RESTful controller for us. It can be found in
Let’s populate our controller with our functionality. Make it look like the below code.
That’s alot. I’ll walk through this kind of quickly for the sake of
brevity. At the top, I create a construct method for our controller.
This will be fired each time or controller is created. I used the
In the
The only thing left is to make our views. Let’s do it. The first one should be our main index page. Let’s put it in
Again, we are extending our master layout. We are creating a table
and using a foreach loop to iterate over each user that was passed into
the view from the controller. We are outputting each of the attributes
we keep in the database minus the password. We are also outputting two
buttons – one to edit the user and one to delete them. Notice the edit
button is just a link but the delete button is actually a form. This is
because we need to send a delete request to our controller. This will
ensure the
Now, let’s build our new user form. This is simple.
The code in this file should look very familiar. It looks just like
our login form except there are more fields in it. Also, we had to
overwrite the URL our form submits to. To stick with the RESTful
interface, we need to submit a POST request to
Lastly, let’s make the form to edit a user.
This form is almost exactly the same as the add user form. On this
form, we have to overwrite the URL is submits to and also the method it
uses. We want this one to submit a PUT request. We also use the model
form method instead of the open method. This method does the same thing
as the open method except we supply it with a user and it fills in the
fields for us by default. This is perfect for an edit form. Thanks
Laravel!
The Files
We need to download the files locally and get our project configs set up. Let’s do this really quick. Run the following command to download the files and all its dependencies. I’m assuming you have composer downloaded globally on your machine.
1
| composer create-project laravel/laravel useradmin |
useradmin, put all
of Laravel’s files in it, and then download all of Laravel’s
dependencies. Next, we need to fill in our configs. Go into the config
files and fill in what’s necessary. I always fill in URL and timezone
in app.php and the MySQL info in database.php.EDIT: Thanks to Triggvy Gunderson for pointing out the following two extra steps to take. You should change the
debug option to true when in development to make sure you can see a helpful error screen. Also, make sure to make the app/storage directory writable by executing the following from the root of your project:
1
| chmod -R 777 app/storage |
The Database
We need to create our database table to hold our users in, and then we will seed it with some data for us to play with. Run the following command to get some boilerplate code written for us to make our table.
1
| php artisan migrate:make create_users_table --create=users |
/app/database/migrations, there will be a new migration file waiting for you. Let’s fill it out.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <?phpuse Illuminate\Database\Schema\Blueprint;use Illuminate\Database\Migrations\Migration;class CreateUsersTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('users', function(Blueprint $table) { $table->increments('id'); $table->string('username'); $table->string('email'); $table->string('password'); $table->string('first_name'); $table->string('last_name'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::drop('users'); }} |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| <?phpclass UserTableSeeder extends Seeder { /** * Run the database seeds. * * @return void */ public function run() { $vader = DB::table('users')->insert([ 'username' => 'doctorv', 'email' => 'darthv@deathstar.com', 'password' => Hash::make('thedarkside'), 'first_name' => 'Darth', 'last_name' => 'Vader', 'created_at' => new DateTime(), 'updated_at' => new DateTime() ]); DB::table('users')->insert([ 'username' => 'goodsidesoldier', 'email' => 'lightwalker@rebels.com', 'password' => Hash::make('hesnotmydad'), 'first_name' => 'Luke', 'last_name' => 'Skywalker', 'created_at' => new DateTime(), 'updated_at' => new DateTime() ]); DB::table('users')->insert([ 'username' => 'greendemon', 'email' => 'dancingsmallman@rebels.com', 'password' => Hash::make('yodaIam'), 'first_name' => 'Yoda', 'last_name' => 'Unknown', 'created_at' => new DateTime(), 'updated_at' => new DateTime() ]); }} |
DatabaseSeeder.php so
that our seed file will actually be called. Lastly, run the following
command to run the migrations and then seed the database.
1
| php artisan migrate --seed |
The Login Page
Now, we should try to block off the admin area from people who shouldn’t be able to have access. Let’s add the logic for this into our application. Make yourroutes.php look like the below:
1
2
3
| <?phpRoute::controller('/', 'HomeController'); |
/example by making a method called putExample. Let’s get into it. Make your HomeController look like the following:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <?phpclass HomeController extends BaseController { public function getIndex() { return View::make('home.index'); } public function postIndex() { $username = Input::get('username'); $password = Input::get('password'); if (Auth::attempt(['username' => $username, 'password' => $password])) { return Redirect::intended('/user'); } return Redirect::back() ->withInput() ->withErrors('That username/password combo does not exist.'); } public function getLogin() { return Redirect::to('/'); } public function getLogout() { Auth::logout(); return Redirect::to('/'); }} |
getIndex
route simply returns a view to display, which we will make in a moment.
We then set up a route to handle the input we receive from the login
form. It uses the Auth::attempt to login the user. This
method is another example of Laravel making our job easier! It tests
the given credentials against credentials in the database. The table to
use is stated in the auth.php config file. It will
automatically log the user in and return true if the user credentials
check out. If not, we are redirecting back to the previous page (our
login page) with the given input and with an error message to let the
user know what’s up. We also create a login route that redirects back
to our home page. Lastly, we create a logout route that will log a user
out using Laravel’s Auth::logout function and then redirect to our home page.Now that we have the routes created, let’s create the views. We only need one view for this controller. We need to put it in the
app/views/home/ directory. We will call it index.blade.php. Laravel uses the blade template engine, which allows us to keep our views readable but powerful. Put the following code in app/views/home/index.blade.php.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| @extends('layouts.master')@section('title') Login @stop@section('content')<div class='col-lg-4 col-lg-offset-4'> @if ($errors->has()) @foreach ($errors->all() as $error) <div class='bg-danger alert'>{{ $error }}</div> @endforeach @endif <h1><i class='fa fa-lock'></i> Login</h1> {{ Form::open(['role' => 'form']) }} <div class='form-group'> {{ Form::label('username', 'Username') }} {{ Form::text('username', null, ['placeholder' => 'Username', 'class' => 'form-control']) }} </div> <div class='form-group'> {{ Form::label('password', 'Password') }} {{ Form::password('password', ['placeholder' => 'Password', 'class' => 'form-control']) }} </div> <div class='form-group'> {{ Form::submit('Login', ['class' => 'btn btn-primary']) }} </div> {{ Form::close() }}</div>@stop |
app/views/layouts/master.blade.php.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html><html lang='en'> <head> <meta name='viewport' content='width=device-width, initial-scale=1'> <title>@yield('title') | User Admin</title> <link rel='stylesheet' href='//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <style> body { margin-top: 5%; } </style> </head> <body> <div class='container-fluid'> <div class='row'> @yield('content') </div> </div> </body></html> |
In your browser, navigate to your project. I set up a virtual host for mine. So, I go to
http://local.useradmin.com.
This loads up the login screen we created. Going great so far. Let’s
test that we get an error if we don’t enter valid credentials. Enter
anything crazy in the username and password fields and hit enter. You
should be taken back to the same page with an error at the top and the
username already filled in. Awesome-sauce. Now let’s make sure we can
get logged in. Log in with one of the credentials we seeded our
database with. I like the Darth Vader one, personally. Hit enter
and…wait. What the hell? What’s this error? Well, we haven’t created
that route yet. Laravel is kind enough to let us know what we did
wrong. So let’s make that now!The User Management
Now, we need to make the user management functionality. First, let’s add a convenience method to our User model that we will user in our admin view. Add the following method to your User model.
1
2
3
4
5
6
7
8
9
| /** * Get the user's full name by concatenating the first and last names * * @return string */ public function getFullName() { return $this->first_name . ' ' . $this->last_name; } |
routes.php file look like the below.
1
2
3
4
| <?phpRoute::resource('/user', 'UserController');Route::controller('/', 'HomeController'); |
1
| php artisan controller:make UserController --except=show |
app/controllers.
It has all the methods in it we will use. Notice I passed the except
option with a value of show. This tells Artisan that we want all the
methods in our code except the show method. For our particular use, we
don’t need a page just one user. For a better explanation of each of
these methods, see the Laravel docs.Let’s populate our controller with our functionality. Make it look like the below code.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
| <?phpclass UserController extends \BaseController { public function __construct() { $this->beforeFilter('auth'); } /** * Display a listing of the user. * * @return Response */ public function index() { $users = User::all(); return View::make('user.index', ['users' => $users]); } /** * Show the form for creating a new user. * * @return Response */ public function create() { return View::make('user.create'); } /** * Store a newly created user in storage. * * @return Response */ public function store() { $user = new User; $user->first_name = Input::get('first_name'); $user->last_name = Input::get('last_name'); $user->username = Input::get('username'); $user->email = Input::get('email'); $user->password = Hash::make(Input::get('password')); $user->save(); return Redirect::to('/user'); } /** * Show the form for editing the specified user. * * @param int $id * @return Response */ public function edit($id) { $user = User::find($id); return View::make('user.edit', [ 'user' => $user ]); } /** * Update the specified user in storage. * * @param int $id * @return Response */ public function update($id) { $user = User::find($id); $user->first_name = Input::get('first_name'); $user->last_name = Input::get('last_name'); $user->username = Input::get('username'); $user->email = Input::get('email'); $user->password = Hash::make(Input::get('password')); $user->save(); return Redirect::to('/user'); } /** * Remove the specified user from storage. * * @param int $id * @return Response */ public function destroy($id) { User::destroy($id); return Redirect::to('/user'); }} |
beforeFilter
method in it. This will fire the given filter whenever this controller
is created. For this particular case, I only want to make sure the
user is logged in. This filter is supplied to us by Laravel out of the
box. If a user is not logged in, it will send them to the /login
page. This is why we created the login route in our HomeController
that redirects to our homepage. Otherwise we would get an error.In the
index, we get all our users and pass them to our main view. The create method displays the form to add a new user. The store method grabs the input given in the request and saves the user to the database. The edit method grabs the user specified in the URL and sends that user to the view to be edited. The update
method grabs the user and updates its attributes. Then saves the
changes and redirects back to the main user screen. Lastly, the destroy method destroys the user specified in the URL and then redirects to the main user screen.The only thing left is to make our views. Let’s do it. The first one should be our main index page. Let’s put it in
app/views/user/index.blade.php.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| @extends('layouts.master')@section('title') Users @stop@section('content')<div class="col-lg-10 col-lg-offset-1"> <h1><i class="fa fa-users"></i> User Administration <a href="/logout" class="btn btn-default pull-right">Logout</a></h1> <div class="table-responsive"> <table class="table table-bordered table-striped"> <thead> <tr> <th>Name</th> <th>Username</th> <th>Email</th> <th>Date/Time Added</th> <th></th> </tr> </thead> <tbody> @foreach ($users as $user) <tr> <td>{{ $user->getFullName() }}</td> <td>{{ $user->username }}</td> <td>{{ $user->email }}</td> <td>{{ $user->created_at->format('F d, Y h:ia') }}</td> <td> <a href="/user/{{ $user->id }}/edit" class="btn btn-info pull-left" style="margin-right: 3px;">Edit</a> {{ Form::open(['url' => '/user/' . $user->id, 'method' => 'DELETE']) }} {{ Form::submit('Delete', ['class' => 'btn btn-danger'])}} {{ Form::close() }} </td> </tr> @endforeach </tbody> </table> </div> <a href="/user/create" class="btn btn-success">Add User</a></div>@stop |
destroy method is called. Because browsers
don’t support the PUT or DELETE methods of forms, Laravel adds a hidden
attribute to the form that lets the application know we are wanting to
use the DELETE method. Also, notice we are using our helper method to
output the user’s full name. We output a button after the table to add a
new user. Lastly, we put a table at the top to logout. Alot of
functionality for such a small file, huh?Now, let’s build our new user form. This is simple.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
| @extends('layouts.master')@section('title') Create User @stop@section('content')<div class='col-lg-4 col-lg-offset-4'> @if ($errors->has()) @foreach ($errors->all() as $error) <div class='bg-danger alert'>{{ $error }}</div> @endforeach @endif <h1><i class='fa fa-user'></i> Add User</h1> {{ Form::open(['role' => 'form', 'url' => '/user']) }} <div class='form-group'> {{ Form::label('first_name', 'First Name') }} {{ Form::text('first_name', null, ['placeholder' => 'First Name', 'class' => 'form-control']) }} </div> <div class='form-group'> {{ Form::label('last_name', 'Last Name') }} {{ Form::text('last_name', null, ['placeholder' => 'Last Name', 'class' => 'form-control']) }} </div> <div class='form-group'> {{ Form::label('username', 'Username') }} {{ Form::text('username', null, ['placeholder' => 'Username', 'class' => 'form-control']) }} </div> <div class='form-group'> {{ Form::label('email', 'Email') }} {{ Form::email('email', null, ['placeholder' => 'Email', 'class' => 'form-control']) }} </div> <div class='form-group'> {{ Form::label('password', 'Password') }} {{ Form::password('password', ['placeholder' => 'Password', 'class' => 'form-control']) }} </div> <div class='form-group'> {{ Form::label('password_confirmation', 'Confirm Password') }} {{ Form::password('password_confirmation', ['placeholder' => 'Confirm Password', 'class' => 'form-control']) }} </div> <div class='form-group'> {{ Form::submit('Login', ['class' => 'btn btn-primary']) }} </div> {{ Form::close() }}</div>@stop |
/user.
Lastly, let’s make the form to edit a user.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
| @extends('layouts.master')@section('title') Create User @stop@section('content')<div class='col-lg-4 col-lg-offset-4'> @if ($errors->has()) @foreach ($errors->all() as $error) <div class='bg-danger alert'>{{ $error }}</div> @endforeach @endif <h1><i class='fa fa-user'></i> Edit User</h1> {{ Form::model($user, ['role' => 'form', 'url' => '/user/' . $user->id, 'method' => 'PUT']) }} <div class='form-group'> {{ Form::label('first_name', 'First Name') }} {{ Form::text('first_name', null, ['placeholder' => 'First Name', 'class' => 'form-control']) }} </div> <div class='form-group'> {{ Form::label('last_name', 'Last Name') }} {{ Form::text('last_name', null, ['placeholder' => 'Last Name', 'class' => 'form-control']) }} </div> <div class='form-group'> {{ Form::label('username', 'Username') }} {{ Form::text('username', null, ['placeholder' => 'Username', 'class' => 'form-control']) }} </div> <div class='form-group'> {{ Form::label('email', 'Email') }} {{ Form::email('email', null, ['placeholder' => 'Email', 'class' => 'form-control']) }} </div> <div class='form-group'> {{ Form::label('password', 'Password') }} {{ Form::password('password', ['placeholder' => 'Password', 'class' => 'form-control']) }} </div> <div class='form-group'> {{ Form::label('password_confirmation', 'Confirm Password') }} {{ Form::password('password_confirmation', ['placeholder' => 'Confirm Password', 'class' => 'form-control']) }} </div> <div class='form-group'> {{ Form::submit('Login', ['class' => 'btn btn-primary']) }} </div> {{ Form::close() }}</div>@stop |
