createmodule.md

Create Module

Create your fist module easily, in this example create us the Events module.

Backend

Create Migration

To create a migration, use the make:migration Artisan command:

~/modulr-laravel$ php artisan make:migration create_events_table

Migration Structure

// database/migrations/create_events_table.php

...
public function up()
{
    Schema::create('events', function (Blueprint $table) {
        $table->increments('id');
        $table->string('title');
        $table->text('description')->nullable();
        $table->date('date')->nullable();
        $table->text('place')->nullable();
        $table->time('start_time')->nullable();
        $table->time('end_time')->nullable();
        $table->json('attendees');
        $table->integer('user_id')->unsigned();
        $table->foreign('user_id')->references('id')->on('users');
        $table->timestamps();
        $table->softDeletes();
    });
}

public function down()
{
    Schema::dropIfExists('events');
}

Running Migrations

To run all of your outstanding migrations, execute the migrate Artisan command:

~/modulr-laravel$ php artisan migrate

Create Factory optional

When testing, you may need to insert a few records into your database, for example, let's create 3 events per user and attach a relationship to each user:

To create a factory, use the touch command:

~/modulr-laravel$ touch database/factories/EventFactory.php

Factory Structure

// database/factories/EventsFactory.php

$factory->define(App\Models\Events\Event::class, function (Faker\Generator $faker) {

    return [
        'title' => $faker->text($maxNbChars = 50),
        'description' => $faker->text,
        'place' => $faker->text(70),
        'date' => $faker->date($format = 'Y-m-d', $max = 'now'),
        'start_time' => $faker->time($format = 'H:i:s', $max = 'now'),
        'end_time' => $faker->time($format = 'H:i:s', $max = 'now'),
        'attendee' => [],
    ];

});

Faker Generator documentation

Using Factory to Faker Seeder

// database/seeds/FakerDataFactory.php

factory(App\User::class, 10)
            ->create()
            ->each(function ($u) {
                ...
                $u->events()->saveMany(factory(App\Models\Events\Event::class, 3)->make());
            });

Running Seeder

~/modulr-laravel$ php artisan db:seed --class=FakerDataSeeder

Create Model

The easiest way to create a model instance is using the make:model Artisan command:

~/modulr-laravel$ php artisan make:model Models/Events/Event

Model Structure

// app/Models/Events/Event.php

use Illuminate\Database\Eloquent\SoftDeletes;
use Illuminate\Support\Facades\Auth;

class Event extends Model
{
    use SoftDeletes;

    protected $dates = ['deleted_at'];

    protected $guarded = ['id'];

    public function user()
    {
      return $this->belongsTo(\App\User::class);
    }
}

Add Relation to User Model

// app/User.php

class User extends Authenticatable
{
    ...
    public function events()
    {
        return $this->hasMany(\App\Models\Events\Event::class);
    }
}

Create Routes

To add routes

// routes/web.php

Route::middleware('auth')->group(function () {
    ...
    Route::group(['namespace' => 'Events'], function() {
        Route::get('/events', 'EventController@index');
        Route::group(['prefix' => 'event'], function() {
            Route::get('/all', 'EventController@all');
            Route::post('/store', 'EventController@store');
            Route::put('/update/{id}', 'EventController@update');
            Route::delete('/destroy/{id}', 'EventController@destroy');
        });
    });
});

Blade documentation

Create Controller

To create a controller, execute the make:controller Artisan command:

~/modulr-laravel$ php artisan make:controller Events/EventController

Controller Structure

// app/Http/Controllesr/Events/EventController.php

...
use App\Models\Events\Event;

class EventController extends Controller
{
    public function index() {}
    public function all() {}
    public function store(Request $request) {}
    public function update(Request $request, $id) {}
    public function destroy($id) {}
}

Create View

To create a view, use the mkdir and touch commands:

~/modulr-laravel$ mkdir resources/views/events && touch resources/views/events/events.blade.php

View Structure

// resources/views/events/events.blade.php

@extends('layouts.app')

@section('content')
    <events></events> // Events Vue component
@endsection

Frontend

Create Vue Component

To create a vue component, use the mkdir and touch commands:

~/modulr-laravel$ mkdir resources/assets/js/components/events && touch resources/assets/js/components/events/Events.vue

Vue Component Structure

// resources/assets/js/components/events/Events.vue

<template>
    <div class="events">
        <!-- Header -->
        <div class="container-fluid header"></div>
        <!-- Container -->
        <div class="container-fluid">
            <!-- List -->
            <div class="panel panel-default"></div>
            <!-- Init Message -->
            <div class="init-message"></div>
        </div>
        <!-- Modal New Event -->
        <div class="modal right fade" id="modalNewEvent"></div>
        <!-- Modal Edit Event -->
        <div class="modal right fade" data-backdrop="false" id="modalEditEvent"></div>
    </div>
</template>

<script>
    data() {
        return {
            error: {},
            events: [],
            newEvent: {},
            Editevent: {},
        }
    },
    mounted() {
        this.getEvents();
    },
    methods: {
        getEvents: function () {},
        storeEvent: function (e) {},
        editEvent: function (item, index) {},
        updateEvent: function (e) {},
        destroyEvent: function () {},
    }
</script>

Register Vue Component

// resources/assets/js/app.js

Vue.component('events', require('./components/events/Events.vue'));

Add Vue Component into View

// resources/views/events/events.blade.php

@extends('layouts.app')

@section('content')
    <events></events>
@endsection

Add Module to Navbar

Add module easily, in this example add us the Events module in Navbar.

// resources/assets/js/layout/Navbar.vue

<!-- Menu -->
<li class="dropdown menu">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
        <i class="fa fa-th fa-lg" aria-hidden="true"></i>
    </a>
    <ul class="dropdown-menu dropdown-menu-right list-inline">
        ...
        <li :class="{'active': activeLink == 'events'}">
            <a href="/events">
                <i class="mdi mdi-event mdi-3x"></i>
                <br>
                <span>Events</span>
            </a>
        </li>
    </ul>
</li>

?> Now you are ready to Create CRUD start here.