Open the command prompt / terminal
browse to C:\xampp\htdocs
Run the following command to create a new project.
C:\xampp\htdocs>composer create-project laravel/laravel todoapplaravel
The above command create a directory todoapplaravel in the htdocs directory and install Laravel
After the above command has run successfully, run the following command to browse to the new project directory
C:\xampp\htdocs>cd todoapplaravel
Let’s now test the installation. We will work with the built in server.
Run the following command
C:\xampp\htdocs>php artisan serve
Open the following URL in your web browser
http://localhost:8000/
You will see the welcome page for Laravel
Open the command prompt / terminal and browse to the project root.
Run the following command to create a model and migration file at the same time.
C:\xampp\htdocs>php artisan make:model Task --migration
The above command creates a model task and its migration file
Open the model Task in /app/Task.php
Update the code to the following
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Task extends Model
{
protected $fillable = ['task', 'description','done'];
}
protected $fillable = ['task', 'description','done']; specifies the fields that can be mass assigned.Open the migration file in /database/migrations/xxxx_xx_xx_xxxxxx_create_tasks_table.php
Update the code to the following
<?php
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
use App\Task;
class CreateTasksTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('tasks', function (Blueprint $table) {
$table->increments('id');
$table->string('task');
$table->string('description');
$table->boolean('done');
$table->timestamps();
});
Task::create([
'task' => 'Weekend hookup',
'description' => 'Call Helga in the afternoon',
'done' => false,
]);
Task::create([
'task' => 'Late night coding',
'description' => 'Finishing coding POS API',
'done' => false,
]);
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::drop('tasks');
}
}
Create Database: dblaravelOpen .envfile in the project root.
Set the configurations as shown below
DB_HOST=localhost
DB_DATABASE=dblarave
DB_USERNAME=root
DB_PASSWORD=xxx
Execute the following command to run the migrations
C:\xampp\htdocs>php artisan migrate
Check the database after running the migration files. You should be able to see the tasks table with two records that we seeded in the migration file.
Open /resources/views/welcome.blade.php
Replace the default HTML code with the following
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Laravel Ajax ToDo App</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-narrow">
<h2>Laravel Ajax ToDo App</h2>
<button id="btn-add" name="btn-add" class="btn btn-primary btn-xs">Add New Task</button>
<div>
<!-- Table-to-load-the-data Part -->
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Task</th>
<th>Description</th>
<th>Date Created</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="tasks-list" name="tasks-list">
@foreach ($tasks as $task)
<tr id="task{{$task->id}}">
<td>{{$task->id}}</td>
<td>{{$task->task}}</td>
<td>{{$task->description}}</td>
<td>{{$task->created_at}}</td>
<td>
<button class="btn btn-warning btn-xs btn-detail open-modal" value="{{$task->id}}">Edit</button>
<button class="btn btn-danger btn-xs btn-delete delete-task" value="{{$task->id}}">Delete</button>
</td>
</tr>
@endforeach
</tbody>
</table>
<!-- End of Table-to-load-the-data Part -->
<!-- Modal (Pop up when detail button clicked) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Task Editor</h4>
</div>
<div class="modal-body">
<form id="frmTasks" name="frmTasks" class="form-horizontal" novalidate="">
<div class="form-group error">
<label for="inputTask" class="col-sm-3 control-label">Task</label>
<div class="col-sm-9">
<input type="text" class="form-control has-error" id="task" name="task" placeholder="Task" value="">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Description</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="description" name="description" placeholder="Description" value="">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btn-save" value="add">Save changes</button>
<input type="hidden" id="task_id" name="task_id" value="0">
</div>
</div>
</div>
</div>
</div>
</div>
<meta name="_token" content="{!! csrf_token() !!}" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="{{asset('js/script.js')}}"></script>
</body>
</html>
Next create the file script.js in the directory /public/js/script.jsAdd the following code
$(document).ready(function(){
var url = "tasks";
//display modal form for task editing
$('.open-modal').click(function(){
var task_id = $(this).val();
$.get(url + '/' + task_id, function (data) {
//success data
console.log(data);
$('#task_id').val(data.id);
$('#task').val(data.task);
$('#description').val(data.description);
$('#btn-save').val("update");
$('#myModal').modal('show');
})
});
//display modal form for creating new task
$('#btn-add').click(function(){
$('#btn-save').val("add");
$('#frmTasks').trigger("reset");
$('#myModal').modal('show');
});
//delete task and remove it from list
$('.delete-task').click(function(){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
})
var task_id = $(this).val();
$.ajax({
type: "DELETE",
url: url + '/' + task_id,
success: function (data) {
console.log(data);
$("#task" + task_id).remove();
},
error: function (data) {
console.log('Error:', data);
}
});
});
//create new task / update existing task
$("#btn-save").click(function (e) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
})
e.preventDefault();
var formData = {
task: $('#task').val(),
description: $('#description').val(),
}
//used to determine the http verb to use [add=POST], [update=PUT]
var state = $('#btn-save').val();
var type = "POST"; //for creating new resource
var task_id = $('#task_id').val();;
var my_url = url;
if (state == "update"){
type = "PUT"; //for updating existing resource
my_url += '/' + task_id;
}
console.log(formData);
$.ajax({
type: type,
url: my_url,
data: formData,
dataType: 'json',
success: function (data) {
console.log(data);
var task = '<tr id="task' + data.id + '"><td>' + data.id + '</td><td>' + data.task + '</td><td>' + data.description + '</td><td>' + data.created_at + '</td>';
task += '<td><button class="btn btn-warning btn-xs btn-detail open-modal" value="' + data.id + '">Edit</button>';
task += '<button class="btn btn-danger btn-xs btn-delete delete-task" value="' + data.id + '">Delete</button></td></tr>';
if (state == "add"){ //if user added a new record
$('#tasks-list').append(task);
}else{ //if user updated an existing record
$("#task" + task_id).replaceWith( task );
}
$('#frmTasks').trigger("reset");
$('#myModal').modal('hide')
},
error: function (data) {
console.log('Error:', data);
}
});
});
});
Open /app/Http/routes.phpAdd the following routes
<?php
use App\Task;
use Illuminate\Http\Request;
Route::get('/', function () {
$tasks = Task::all();
return View::make('welcome')->with('tasks',$tasks);
});
Route::get('/tasks/{task_id?}',function($task_id){
$task = Task::find($task_id);
return Response::json($task);
});
Route::post('/tasks',function(Request $request){
$task = Task::create($request->all());
return Response::json($task);
});
Route::put('/tasks/{task_id?}',function(Request $request,$task_id){
$task = Task::find($task_id);
$task->task = $request->task;
$task->description = $request->description;
$task->save();
return Response::json($task);
});
Route::delete('/tasks/{task_id?}',function($task_id){
$task = Task::destroy($task_id);
return Response::json($task);
});
Load the following URL in your web browserhttp://localhost/todoapplaravel/public/
