Skip to content

Commit 63eba2b

Browse files
tabacitutabacitu
committed
added syntax highlighting to getting_started widget
1 parent b4cea00 commit 63eba2b

File tree

1 file changed

+19
-17
lines changed

1 file changed

+19
-17
lines changed

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

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,12 @@
1515
<p>
1616
<code class="text-primary bg-light p-1 rounded">php artisan backpack:crud user</code>
1717
</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>
18+
<p>Go ahead, run it in your terminal. 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>
2619

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>
20+
<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 <i class="la la-angle-double-right"></i></a></p>
2821

2922
<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>
23+
<p><strong>1. When Listing, let's remove the "password" column</strong> - no point in showing the hash. 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>
3124
<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>
3225
<ul>
3326
<li>to remove the current validation:<br>
@@ -39,17 +32,17 @@
3932
</li>
4033
<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:
4134
<p>
42-
<pre class="text-primary bg-light p-1 rounded">
35+
<pre class="language-php rounded"><code class="language-php p-1">
4336
CRUD::field('name')->validationRules('required|min:5');
4437
CRUD::field('email')->validationRules('required|email|unique:users,email');
4538
CRUD::field('password')->validationRules('required');
46-
</pre>
39+
</code></pre>
4740
</p>
4841
</li>
4942
</ul>
5043
<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>
5144
<p>
52-
<pre class="text-primary bg-light p-1 rounded">
45+
<pre class="language-php rounded"><code class="language-php p-1">
5346
protected function setupCreateOperation()
5447
{
5548
CRUD::field('name')->validationRules('required|min:5');
@@ -60,11 +53,11 @@ protected function setupCreateOperation()
6053
$entry->password = \Hash::make($entry->password);
6154
});
6255
}
63-
</pre>
56+
</code></pre>
6457
</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>
58+
<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" (because 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>
6659
<p>
67-
<pre class="text-primary bg-light p-1 rounded">
60+
<pre class="language-php rounded"><code class="language-php p-1">
6861
protected function setupUpdateOperation()
6962
{
7063
CRUD::field('name')->validationRules('required|min:5');
@@ -79,7 +72,7 @@ protected function setupUpdateOperation()
7972
}
8073
});
8174
}
82-
</pre>
75+
</code></pre>
8376
</p>
8477
<p>
8578
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>
@@ -116,3 +109,12 @@ protected function setupUpdateOperation()
116109
<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>
117110
</div>
118111
</div>
112+
113+
@push('after_styles')
114+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/base16/dracula.min.css">
115+
@endpush
116+
117+
@push('after_scripts')
118+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
119+
<script>hljs.highlightAll();</script>
120+
@endpush

0 commit comments

Comments
 (0)