Skip to content

Commit 1113f55

Browse files
tabacitutabacitu
authored
Merge pull request #4577 from Laravel-Backpack/show-getting-started-on-dashboard
Show getting started widget on dashboard (on localhost)
2 parents 0df83d4 + 2bef4d7 commit 1113f55

File tree

3 files changed

+140
-8
lines changed

3 files changed

+140
-8
lines changed

‎src/config/backpack/base.php‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,13 @@
3636
// Content of the HTML meta robots tag to prevent indexing and link following
3737
'meta_robots_content' => 'noindex, nofollow',
3838

39+
// ---------
40+
// DASHBOARD
41+
// ---------
42+
43+
// Show "Getting Started with Backpack" info block?
44+
'show_getting_started' => (app()->env == 'local'),
45+
3946
// ------
4047
// STYLES
4148
// ------

‎src/resources/views/base/dashboard.blade.php‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
11
@extends(backpack_view('blank'))
22

33
@php
4-
$widgets['before_content'][] = [
5-
'type' => 'jumbotron',
6-
'heading' => trans('backpack::base.welcome'),
7-
'content' => trans('backpack::base.use_sidebar'),
8-
'button_link' => backpack_url('logout'),
9-
'button_text' => trans('backpack::base.logout'),
10-
];
4+
if (config('backpack.base.show_getting_started')) {
5+
$widgets['before_content'][] = [
6+
'type' => 'view',
7+
'view' => 'backpack::inc.getting_started',
8+
];
9+
} else {
10+
$widgets['before_content'][] = [
11+
'type' => 'jumbotron',
12+
'heading' => trans('backpack::base.welcome'),
13+
'content' => trans('backpack::base.use_sidebar'),
14+
'button_link' => backpack_url('logout'),
15+
'button_text' => trans('backpack::base.logout'),
16+
];
17+
}
1118
@endphp
1219

1320
@section('content')
14-
@endsection
21+
@endsection

‎src/resources/views/base/inc/getting_started.blade.php‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<div class="card">
2+
<div class="card-body">
3+
4+
<h3>Getting Started</h3>
5+
<p>If it's your first time using Backpack, we heavily recommend you follow the steps below:</p>
6+
7+
<div id="accordion" role="tablist">
8+
<div class="card mb-1">
9+
<div class="card-header bg-light" id="headingOne" role="tab">
10+
<h5 class="mb-0"><a data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" class="collapsed text-dark"><span class="badge badge-warning mr-2 mt-n2">1</span>Create your first CRUD <small class="float-right mt-2">1-5 min</small></a></h5>
11+
</div>
12+
<div class="collapse" id="collapseOne" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion" style="">
13+
<div class="card-body">
14+
<p>You've already got a model, <code class="text-primary bg-light p-1 rounded">App\Models\User</code>... all Laravel projects do. So <strong>let's create a page to administer users</strong>. We want the admin to Create, Read, Update and Delete them. In Backpack, we call that a <a href="https://backpackforlaravel.com/docs/5.x/crud-basics" target="blank">CRUD</a>. And you can easily generate one for an existing Eloquent model, by running:</p>
15+
<p>
16+
<code class="text-primary bg-light p-1 rounded">php artisan backpack:crud user</code>
17+
</p>
18+
<p>Go ahead, run it in your terminal. You'll notice it has:</p>
19+
<ul>
20+
<li>added an item to the sidebar, in <code class="text-primary bg-light p-1 rounded">resources/views/vendor/backpack/base/inc/sidebar_content.blade.php</code></li>
21+
<li>added a route, inside <code class="text-primary bg-light p-1 rounded">routes/backpack/custom.php</code></li>
22+
<li>created <code class="text-primary bg-light p-1 rounded">app/Http/Controllers/Admin/UserCrudController.php</code></li>
23+
<li>created <code class="text-primary bg-light p-1 rounded">app/Http/Requests/UserRequest.php</code></li>
24+
</ul>
25+
<p>You can now click on the new sidebar item (or <a href="{{ backpack_url('user') }}">here</a>) and you'll be able to see the entries in the <code class="text-primary bg-light p-1 rounded">users</code> table. Even though generated CRUDs work out-of-the-box, they might not be <i>exactly</i> what you need. But that's where Backpack shines, in how easy it is to customize.</p>
26+
27+
<p>To dig a little deeper, <a href="#" data-toggle="collapse" data-target="#customizeUsersCRUD" aria-expanded="true" aria-controls="customizeUsersCRUD">let's make a few changes to the Users CRUD</a>.</p>
28+
29+
<div class="collapse" id="customizeUsersCRUD">
30+
<p><strong>1. Let's remove the "password" column</strong> - no point in showing it. To do that, go to <code class="text-primary bg-light p-1 rounded">UserCrudController::setupListOperation()</code> and remove the line saying <code class="text-primary bg-light p-1 rounded">CRUD::column('password');</code>. Easy-peasy, right?</p>
31+
<p><strong>2. On Create & Update, let's add validation to forms</strong>. There are <a href="https://backpackforlaravel.com/docs/5.x/crud-operation-create#validation" target="_blank">multiple ways to add validation (A, B, C)</a>. Let's change the standard <a href="https://backpackforlaravel.com/docs/5.x/crud-operation-create#validating-fields-using-formrequests" target="_blank">validation using FormRequests</a> (A), to a simpler validation using <a href="https://backpackforlaravel.com/docs/5.x/crud-operation-create#validating-fields-using-field-attributes" target="_blank">field attributes</a> (C):</p>
32+
<ul>
33+
<li>to remove the current validation:<br>
34+
<ul>
35+
<li>inside <code class="text-primary bg-light p-1 rounded">UserCrudController</code>, remove <code class="text-primary bg-light p-1 rounded">use App\Http\Requests\UserRequest;</code> from the top;</li>
36+
<li>inside <code class="text-primary bg-light p-1 rounded">UserCrudController</code>, remove <code class="text-primary bg-light p-1 rounded">CRUD::setValidation(UserRequest::class);</code> from <code class="text-primary bg-light p-1 rounded">setupCreateOperation()</code>;</li>
37+
<li>delete the <code class="text-primary bg-light p-1 rounded">App\Http\Requests\UserRequest;</code> file;</li>
38+
</ul>
39+
</li>
40+
<li>a quick way to add validation is to go to <code class="text-primary bg-light p-1 rounded">setupCreateOperation()</code> and specify validation rules directly on the fields:
41+
<p>
42+
<pre class="text-primary bg-light p-1 rounded">
43+
CRUD::field('name')->validationRules('required|min:5');
44+
CRUD::field('email')->validationRules('required|email|unique:users,email');
45+
CRUD::field('password')->validationRules('required');
46+
</pre>
47+
</p>
48+
</li>
49+
</ul>
50+
<p><strong>3. On Create, let's hash the password.</strong> Currently, if we create a new User, it'll work. But if you look in the database... you'll notice the password is stored in plain text. We don't want that - we want it hashed. There are <a href="https://backpackforlaravel.com/docs/5.x/crud-operation-create#use-events-in-your-setup-method" target="_blank">multiple ways to achieve this too</a>. Let's use Model Events inside <code class="text-primary bg-light p-1 rounded">setupCreateOperation()</code>. Here's how our method could look, when we also tap into the <code class="text-primary bg-light p-1 rounded">creating</code> event, to hash the password:</p>
51+
<p>
52+
<pre class="text-primary bg-light p-1 rounded">
53+
protected function setupCreateOperation()
54+
{
55+
CRUD::field('name')->validationRules('required|min:5');
56+
CRUD::field('email')->validationRules('required|email|unique:users,email');
57+
CRUD::field('password')->validationRules('required');
58+
59+
\App\Models\User::creating(function ($entry) {
60+
$entry->password = \Hash::make($entry->password);
61+
});
62+
}
63+
</pre>
64+
</p>
65+
<p><strong>4. On Update, let's not require the password</strong>. It should only be needed if an admin wants to change it, right? That means the validation rules will be different for "password". But then again... the rules will also be different for "email", right? On Update, we need to pass the ID to the unique rule in Laravel. Since 2/3 rules are different, let's just delete what was inside <code class="text-primary bg-light p-1 rounded">setupUpdateOperation()</code> and code it from scratch:</p>
66+
<p>
67+
<pre class="text-primary bg-light p-1 rounded">
68+
protected function setupUpdateOperation()
69+
{
70+
CRUD::field('name')->validationRules('required|min:5');
71+
CRUD::field('email')->validationRules('required|email|unique:users,email,'.CRUD::getCurrentEntryId());
72+
CRUD::field('password')->hint('Type a password to change it.');
73+
74+
\App\Models\User::updating(function ($entry) {
75+
if (request('password') == null) {
76+
$entry->password = $entry->getOriginal('password');
77+
} else {
78+
$entry->password = \Hash::make(request('password'));
79+
}
80+
});
81+
}
82+
</pre>
83+
</p>
84+
<p>
85+
That's it. You have a working Users CRUD. Plus, you've already learned some advanced techniques, like <a href="https://backpackforlaravel.com/docs/5.x/crud-operation-create#use-events-in-your-setup-method" target="_blank">using Model events inside CrudController</a> and <a href="https://backpackforlaravel.com/docs/5.x/crud-operation-create#b-validating-fields-using-a-rules-array" target="_blank">using field-attribute-validation instead of form-request-validation</a>. Of course, this only scratches the surface of what Backpack can do. To really understand how it works, and how you can best use Backpack's features, <strong>we heavily recommend you move on to the next step, and learn the basics.</strong>
86+
</p>
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
<div class="card mb-1">
92+
<div class="card-header bg-light" id="headingTwo" role="tab">
93+
<h5 class="mb-0"><a class="collapsed text-dark" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><span class="badge badge-warning mr-2 mt-n2">2</span>Learn the basics <small class="float-right mt-2">20-30 min</small></a></h5>
94+
</div>
95+
<div class="collapse" id="collapseTwo" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion" style="">
96+
<div class="card-body">
97+
<p>So you've created your first CRUD? Excellent. Now it's time to understand <i>how it works</i> and <i>what else you can do</i>. Time to learn the basics - how to build and customize admin panels using Backpack. Please follow one of the courses below, depending on how you prefer to learn:</p>
98+
<ul>
99+
<li><strong><a target="_blank" href="https://backpackforlaravel.com/docs/5.x/getting-started-videos">Video Course</a></strong> - 31 minutes</li>
100+
<li><strong><a target="_blank" href="https://backpackforlaravel.com/docs/5.x/getting-started-basics">Text Course</a></strong> - 20 minutes</li>
101+
<li><strong><a target="_blank" href="https://backpackforlaravel.com/getting-started-emails">Email Course</a></strong> - 1 email per day, for 4 days, 5 minutes each</li>
102+
</ul>
103+
</div>
104+
</div>
105+
</div>
106+
<div class="card mb-1">
107+
<div class="card-header bg-light" id="headingThree" role="tab">
108+
<h5 class="mb-0"><a class="collapsed text-dark" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><span class="badge badge-warning mr-2 mt-n2">3</span>Hide this notice <small class="float-right mt-2">1 min</small></a></h5>
109+
</div>
110+
<div class="collapse" id="collapseThree" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion" style="">
111+
<div class="card-body">Go to your <code class="text-primary bg-light p-1 rounded">config/backpack/base.php</code> and change <code class="text-primary bg-light p-1 rounded">show_getting_started</code> to <code class="text-primary bg-light p-1 rounded">false</code>.</div>
112+
</div>
113+
</div>
114+
</div>
115+
116+
<p class="mt-3 mb-0"><small>* this card is only visible on <i>localhost</i>. Follow the last step to hide it from <i>localhost</i> too.</small></p>
117+
</div>
118+
</div>

0 commit comments

Comments
 (0)