In this tutorial, we will be using the Laravel PHP framework 5.2 and jQuery to build a to-do list with Ajax. we have updated this tutorial to laravel 5.2 ! It will also work with laravel 5 , laravel 5.1 ,& laravel 5.2 too .

Through out this tutorial, we’ll show you the basics of RESTful controllers, RESTful routing, and Request types. The list of topics covered in this chapter is as follows:

  • Creating and migrating our to-do list’s database
  • Creating a to-do list’s model
  • Creating the template
  • Inserting data to the database with Ajax
  • Retrieving the list from the database
  • How to allow only Ajax requests

Creating and migrating our to-do list’s database

As you know from the previous tutorials, migrations are very helpful to control development steps. We’ll use migrations again in this chapter.

To create our first migration, type the following command:

php artisan make:migration create_todos_table --table=todos --create

When you run this command, Artisan will generate a migration to generate a database table named todos.

Now we should edit the migration file for the necessary database table columns. When you open the folder migration in database with a file manager, you will see the migration file under it.

Let’s open and edit the file as follows:

<?php
use Illuminate\Database\Migrations\Migration;
class CreateTodosTable extends Migration {

    /**
    * Run the migrations.
    *
    * @return void
    */
    public function up()
    {
        
        Schema::create('todos', function(Blueprint $table){
            $table->create();
            $table->increments("id");
            $table->string("title", 255);
            $table->enum('status', array('0', '1'))->default('0');
            $table->timestamps();
        });

    }

    /**
    * Reverse the migrations.
    *
    * @return void
    */
    public function down()
    {
        Schema::drop("todos");
    }

}

To build a simple to-do list, we need five columns:

  • The id column will store ID numbers of to-do tasks
  • The title column will store a to-do task’s title
  • The status column will store the status of each task
  • The created_at and updated_at columns will store the created and updated dates of tasks

If you write $table->timestamps() in the migration file, Laravel’s migration

class automatically creates created_at and updated_at columns. As you know from this article , Building a URL Shortener Website, to apply migrations, we should run the following command:

php artisan migrate

After the command is run, if you check your database, you will see that our todos table and columns have been created. Now we need to write our model.

 

Creating a todos model

To create a model, you should open the app directory with your file manager. Create a file named Todo.php under the directory and write the following code:

<?php
class Todo extends Eloquent
{
  protected $table = 'todos';
  
}

Let’s examine the Todo.php file.

As you see, our Todo class extends an Eloquent model, which is the ORM (Object Relational Mapper) database class of Laravel.

The protected $table = 'todos'; code tells Eloquent about our model’s table name. If we don’t set the table variable, Eloquent accepts the plural version of the lower case model name as the table name. So this isn’t required technically.

Now, our application needs a template file, so let’s create it

 

Advertisements