Skip to main content

DB Schema, Livewire Component, and Menu

Premium
2:50

Text Version of the Lesson

Let's try to create a simple CRUD for Tasks with two fields (for now): name and is_completed.

In this lesson, we'll manage the Model/Migration, Routes, and Controllers and add a navigation link in the top menu.


Preparing the Database

First, we create the DB structure with factories to create some fake records:

php artisan make:model Task -mf

The table structure is in Migration.

database/migrations/xxxx_create_tasks_table.php:

public function up(): void
{
Schema::create('tasks', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->boolean('is_completed')->default(false);
$table->timestamps();
});
}

In the Model, we just make the fields fillable and cast is_completed to boolean.

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Task extends Model
{
use HasFactory;
 
protected $fillable = [
'name',
'is_completed'
];
 
protected function casts(): array
{
return [
'is_completed' => 'boolean'
];
}
}

Then, the Factory with the rules.

database/factories/TaskFactory.php:

class TaskFactory extends Factory
{
public function definition(): array
{
return [
'name' => fake()->words(asText: true),
'is_completed' => fake()->boolean(),
];
}
}

Finally, that Factory should be used in the main seeder to create 10 fake task records.

database/seeders/DatabaseSeeder.php:

use App\Models\Task;
use App\Models\User;
// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
 
class DatabaseSeeder extends Seeder
{
public function run(): void
{
User::factory()->create([
'name' => 'Test User',
'email' => '[email protected]',
]);
 
Task::factory()->count(10)->create();
}
}

And then we run the command:

php artisan migrate --seed

As a result, we have 10 records in the DB.


Livewire Component and Routes

We will create a Livewire component to manage the tasks with this command:

php artisan make:livewire Tasks/Index

Then, we assign that Component to...

The Full Lesson is Only for Premium Members

Want to access all of our courses? (30 h 09 min)

You also get:

55 courses
Premium tutorials
Access to repositories
Private Discord
Get Premium for $129/year or $29/month

Already a member? Login here

Comments & Discussion

OB
Oscar Boot ✓ Link copied!

After adding navigation items to the the header menu, you have to add them to the hamburger ("mobile") menu too. This is the flux:navlist a bit further down.

PK
Povilas Korop ✓ Link copied!

Good point, missed it somehow, thanks!

We'd Love Your Feedback

Tell us what you like or what we can improve

Feel free to share anything you like or dislike about this page or the platform in general.