Create a room booking system with Laravel and FullCalendar

You may need to update the info accordingly:

DB_HOST=localhost
DB_DATABASE=your_db_name
DB_USERNAME=your_user_name
DB_PASSWORD=your_pwd

If you look into the file, there are other default setting and for now I will leave it as it is. We may edit this in the future when the system is deployed into live server. In the live environment, you may want to change the debug setting to FALSE so that no “weird error” will appear to the user.

Step 3: Create a migration file

Migration is one of the cool features supported by Laravel. Via migration, we will create a migration file which is to create a table name called events. This table will have column such as title, start time, and end time of the events.

We create a migration file by running the code below in a console;

php artisan make:migration create_events_table --create=events

This will create a new file under database > migrations folder. You may want to relocate the default migration files to other save place as at the moment we don’t need those files.

Open up create_events_table file and add few lines to create columns for title, start time, and end time as follows:

Schema::create('events', function (Blueprint $table) {
 $table->increments('id');
 $table->string('name', 15);
 $table->string('title', 100);
 $table->timestamp('start_time');
 $table->timestamp('end_time')->nullable();
 $table->timestamps();
 });

You may refer to migration docs for how to create other time of column via migrations. Basically Laravel support all types of column if I’m not mistaken. Then, you may run migration by executing the command via console as follows:

php artisan migrate

You may verify the table created in database via phpMyAdmin. So you should have 7 columns;

1. id
2. name
3. title
4. start_time
5. end_time
6. created_at
7. updated_at

The name column will be storing the booker name, title column is for event’s title, start_time and end_time are for the duration of the events. These were created using timestamp datatype so that we can compare the dates and times easily later.

The created_at and updated_at is a default column in Laravel. You may discard this two columns but just make sure you disable $timestamps property setting in event model which I will explain to you in the next step.

In the next step, we will create a model which is to interact with database for anything e.g. select records, save records update records and etc.

Step 4: Create a model

php artisan make:model Event

Execute the above code in your console and a new model, Event.php file will be created under app folder. The model will automatically search for table which has its plural name in the database to connect with, unless you specify otherwise.

That’s why we created a table named events, and the model name is event. You may refer to the snippet below on how it recognize the primary key and timestamps.

protected $table = 'my_events'; // you may change this to your name table
public $timestamps = false; // set true if you are using created_at and updated_at
protected $primaryKey = 'my_id'; // the default is id

For our simple room booking system, I think that’s all. You may update the model as and when you need later.

Step 5: Create a Controller

Laravel support several type of controllers and for this tutorial, I will create a RESTful controller as it is easy and our app is quite simple. Run the code as follows:

php artisan make:controller EventController

You may find the EventController.php file in app > Http > Controllers folder. Open up the file and you will see it already defined the functions such as index, create, store, show, edit, update, and delete.

These functions are already cover all of the basic CRUD in our room booking system. We only need to add some logics and the related view files for each of the functions. For index function, we will return the list of all events and the view file name is “list”.

Create function will display a form to book the room. Store function will received inputs from create function. Show function is for displaying an event based on the provided id. Edit function will show the edit form and update function will received the inputs.