Hi Taha,
Thanks for your patience.
We have created a simple sample based on your requirement. We have rendered the Syncfusion angular Kanban component as front-end and Laravel as back-end.
Prerequisites: Ensure the below software is installed on your machine.
- Laravel
- XAMPP
- Composer
Follow the below steps for running the sample.
Step #1: After installing XAMPP, the XAMPP folder is created on your installed drive. Created a new folder and provided the name as Laravel under the drive:\xampp\htdocs folder.
Step #2: Installed the composer and run the Laravel backend using below commands.
|
composer create-project laravel/laravel example-app
cd example-app
php artisan serve |
Step #3: Created the database table using phpMyAdmin page and enter the database credentials to .env file.
|
DB_DATABASE=laravel_api
DB_USERNAME=root
DB_PASSWORD= |
Step #4: We have created KanbanTask model using below command.
|
php artisan make:model KanbanTask -m |
Step #5: Mentioned the column names and their types in a database table under the database -> migrations -> database table name.
2021_05_05_095951_create_kanban_tasks_table.php
|
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateKanbanTasksTable extends Migration
{
public function up()
{
Schema::create('kanban_tasks', function (Blueprint $table) {
$table->id();
$table->string('title', 500);
$table->string('status', 500);
$table->string('assignee', 500);
$table->string('summary');
$table->timestamps();
});
}
….
}
|
Step #6: Now, migrated using below command.
Step #7: Created KanbanTaskController using below command line.
|
php artisan make:controller KanbanTaskController |
Step #8: Registered the routes inside the routes->api.php file.
|
// Get all Kanban tasks
Route::get('kanban_tasks', 'App\Http\Controllers\KanbanTaskController@getKanbanTask'); |
Step #9: Included the $fillable property to prevent the mass assignment exceptions inside the app-> Models->KanbanTask.php file.
|
class KanbanTask extends Model
{
use HasFactory;
public $timestamps = false;
protected $fillable = ['title', 'status', 'assignee', 'summary'];
}
|
Step #10: Created the getKanbanTask function and written the code for saving the data into the database.
KanbanTaskController.php
|
use App\Models\KanbanTask;
class KanbanTaskController extends Controller
{
public function getKanbanTask() {
return response()->json(KanbanTask::all(), 200);
}
}
|
Step #11: Created the angular application inside the drive/xampp/htdocs folder.
|
npm install -g @angular/cli
ng new syncfusion-app
cd syncfusion-app |
Step #11: Installed the ej2-kanban-angular package through the command prompt.
|
npm install @syncfusion/ej2-angular-kanban –save |
Step #12: Imported the Kanban module in app.module.ts file.
|
import { KanbanAllModule } from '@syncfusion/ej2-angular-kanban';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
KanbanAllModule,
HttpClientModule,
],
})
export class AppModule { }
|
Step #13: Added the below angular Kanban styles in style.css file.
|
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-kanban/styles/material.css'; |
Step #14: Fetch the data from the Laravel backend and load into the Kanban board.
app.component.html
|
<ejs-kanban #kanbanObj cssClass="kanban-swimlane" keyField="status" [dataSource]="KanbanData"
[cardSettings]="cardSettings">
<e-columns>
<e-column headerText="To Do" keyField="Open"></e-column>
<e-column headerText="In Progress" keyField="InProgress"></e-column>
<e-column headerText="Done" keyField="Close"></e-column>
</e-columns>
</ejs-kanban>
|
app.component.ts
|
import { HttpClient } from "@angular/common/http";
import { CardSettingsModel } from "@syncfusion/ej2-angular-kanban";
….
export class AppComponent {
KanbanData: Object;
public cardSettings: CardSettingsModel = {
contentField: "summary",
headerField: "id"
};
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get('http://127.0.0.1:8000/api/kanban_tasks').subscribe(result => {
this.KanbanData = result;
})
}
} |
Please find the below sample for your reference.
Note: Paste above samples folder inside the drive:/xampp/htdocs folder and follow the above commands.
Regards,
Buvana S
