docs: bootcamp style quick starter

Author: yajra

quick-starter.md

@@ -1,66 +1,62 @@
-# DataTables Quick Starter
+# Quick Starter
 
-## Create a new Laravel project
+<a name="installation"></a>
+## <b>01.</b> Installing Laravel & DataTables
 
-```
+### Quick Installation
+
+If you have already installed [Laravel Installer](https://laravel.com/docs#your-first-laravel-project) on your local machine, you may create a new project via laravel command:
+
+```shell
 laravel new datatables
-cd datatables
 ```
 
-## Setup Laravel UI
+After the project has been created, we will then install [Laravel UI](https://github.com/laravel/ui) and [Yajra DataTables](https://github.com/yajra/laravel-datatables)
 
 ```shell
+cd datatables
+ 
 composer require laravel/ui --dev
 php artisan ui bootstrap --auth
-```
-
-## Install Laravel DataTables
 
-```shell
 composer require yajra/laravel-datatables:^9.0
 ```
 
-## Setup database and ENV configuration
-
-Create a new database and update `.env` file and set the database credentials.
+For simplicity, you may use SQLite to store your application's data. To instruct Laravel to use SQLite instead of MySQL, update your new application's `.env` file and remove all of the `DB_*` environment variables except for the `DB_CONNECTION` variable, which should be set to `sqlite`:
 
 ```shell
 touch database/database.sqlite
 ```
 
-```dotenv
+```dotenv filename=.env
 DB_CONNECTION=sqlite
-DB_DATABASE=/absolute/path/to/database/database.sqlite
 ```
 
-```shell
-php artisan migrate
-```
+<a name="datatables-with-vite"></a>
+## <b>02.</b> Install Laravel DataTables Vite
 
-## Install Laravel DataTables Vite Assets
+Next, we will install [Laravel DataTables Vite](https://github.com/yajra/laravel-datatables-vite) to simplify our frontend setup.
 
 ```shell
 npm i laravel-datatables-vite --save-dev
 ```
 
 This will install the following packages:
 
-1. Bootstrap Icons
-2. DataTables with Buttons and Select plugins for Bootstrap 5
-3. Laravel DataTables custom scripts
-
-## Register the package js and css
+```
+  - Bootstrap Icons
+  - DataTables with Buttons and Select plugins for Bootstrap 5
+  - Laravel DataTables custom scripts
+```
 
-Edit `resources/js/app.js` and add the following:
+Once installed, we can now configure our scripts and css needed for our application.
 
-```js
+```js filename=resources/js/app.js
 import './bootstrap';
 import 'laravel-datatables-vite';
 ```
 
-Edit `resources/sass/app.scss` and add the following:
-
-```postcss
+```postcss filename=resources/sass/app.scss
 // Fonts
 @import url('https://fonts.bunny.net/css?family=Nunito');
 
@@ -77,23 +73,24 @@ Edit `resources/sass/app.scss` and add the following:
 @import 'datatables.net-select-bs5/css/select.bootstrap5.css';
 ```
 
-## Compile the assets
+We just need to start the Vite development server to automatically recompile our JS, CSS and refresh the browser when we make changes to our Blade templates:
 
-```
+```shell
 npm run dev
 ```
 
-## Create and update UsersDataTable
+<a name="setup-users-datatable"></a>
+## <b>03.</b> Setup a Users DataTable
 
-Create a new DataTable class:
+Open a new terminal in your `datatables` project directory and run the following command:
 
 ```shell
 php artisan datatables:make Users
 ```
 
-Then, update the `getColumns()` with the users fields:
+Next, we will configure our `UsersDataTable` and add the columns that we want to display.
 
-```php
+```php filename=app/DataTables/UsersDataTable.php
 namespace App\DataTables;
 
 use App\Models\User;
@@ -135,7 +132,7 @@ class UsersDataTable extends DataTable
                     ]);
     }
 
-    protected function getColumns(): array
+    public function getColumns(): array
     {
         return [
             Column::make('id'),
@@ -153,15 +150,14 @@ class UsersDataTable extends DataTable
 }
 ```
 
-## Create and update the users controller
-
-Create a new controller and add the following:
+<a name="setup-users-controller"></a>
+## <b>04.</b> Setup a Users Controller, View & Route
 
 ```shell
 php artisan make:controller UsersController
 ```
 
-```php
+```php filename=app/Http/Controllers/UsersController.php
 namespace App\Http\Controllers;
 
 use App\DataTables\UsersDataTable;
@@ -175,26 +171,7 @@ class UsersController extends Controller
 }
 ```
 
-## Update the default app layout
-
-Add `@stack('scripts')` before the body end tag of `resources/views/layouts/app.blade.php`
-
-```
-....
-        <main class="py-4">
-            @yield('content')
-        </main>
-    </div>
-    @stack('scripts')
-</body>
-</html>
-```
-
-## Create users index file
-
-Create new file: `resources/views/users/index.blade.php`.
-
-```php
+```blade filename=resources/views/users/index.blade.php
 @extends('layouts.app')
 
 @section('content')
@@ -213,26 +190,49 @@ Create new file: `resources/views/users/index.blade.php`.
 @endpush
 ```
 
-## Register users route
-
-Update `routes/web.php`.
-
-```php
+```php filename=routes/web.php
 use App\Http\Controllers\UsersController;
 
 Route::get('/users', [UsersController::class, 'index'])->name('users.index');
 ```
 
-## Create dummy data using tinker
+<a name="update-default-layout"></a>
+## <b>05.</b> Update the default app layout
 
-```php
+To be able to load our custom scripts, we need to add `@stack('scripts')` before the end of `body` tag in our `app.blade.php` layout.
+
+```blade filename=resources/views/layouts/app.blade.php
+....
+        <main class="py-4">
+            @yield('content')
+        </main>
+    </div>
+    @stack('scripts')
+</body>
+</html>
+```
+
+<a name="migrate-and-seed"></a>
+## <b>06.</b> Migrate and Seed Test Data
+
+```shell
+php artisan migrate
 php artisan tinker
+```
 
+```php
 Psy Shell v0.9.9 (PHP 7.2.22 — cli) by Justin Hileman
 >>> User::factory(100)->create()
 ```
 
-## Access Users DataTables
+Our application should now be ready to run.
+
+```shell
+php artisan serve
+```
+
+Once you have started the Artisan development server, your application will be accessible in your web browser at [http://localhost:8000]([http://localhost:8000).
 
-http://datatables.test/users
+We can now visit our [`/users`](http://localhost:8000/users) via route and see our users table.
 
+<img src="/img/screenshots/quick-starter.png" alt="Laravel DataTables Users" class="rounded-lg border dark:border-none shadow-lg" />