Setelah berhasil menampilkan data dari database pada artikel sebelumnya, pada artikel ini akan saya tunjukkan bagaimana menambah halaman Insert / Input data Serta Edit dan Delete. Rencananya sih mau saya buat dalam 3 artikel, tapi ko waktunya sulit. Daripada nanti ga jadi / ga sempet akhirnya saya tulis dalam 1 artikel saja.

Link Halaman

Agar aplikasi menjadi mudah digunakan, tambahakan navigasi / tautan ke halaman yang akan dibuat. Yaitr new, edit dan delete. Edit halaman read.tpl sehingga menjadi seperti berikut

[php]
{% extends "layout.tpl" %}
{% block content %}
<div class="row">
<h2># Tasks</h2>
<table class="table table-striped table-bordered table-condensed" id="response">
<thead>
<tr><th>id</th><th>name</th><th>Done</th><th>Action</th></tr>
</thead>
<tbody >
{% for task in tasks %}
<tr id="{{task.id}}">
<td>{{task.id}}</td>
<td>{{ task.name }}</td>
<td>{% if task.done == 0 %} Not Yet {% else %} Done {% endif%}</td>
<td>
<a href="{{task.id}}/edit" id="{{task.id}}" class="link-edit"><i class="icon-edit" ></i></a>
<a href="/delete" id="{{task.id}}" class="link-delete"><i class="icon-trash"></i></a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<a href="new" id="btn_new" class="btn btn-primary">New task</a>
</div>

{% endblock %}
[/php]

Form Insert Data

Insert data intinya adalah menampilkan form input kemudian diarahkan ke proses input. Setelah proses berhasil diarahkan kembali ke halaman awal, bisa menuju tampil data atau kembali ke form input lagi.

Pada SLIM kita dapat membuat aplikasi REST dengan sangat mudah, proses routingnya sangat sederhana da dituliskan di file index.php. Misalnya dalam contoh ini saya akan membuat form input dengan alamat di “/new”, dan isi dari halaman tersebut akan dituliskan pada “new.tpl” yang ada pada direktori task. Maka tambahkan code berikut pada index.php

[php]
$app->get(‘/new’,function() use($app){
$app->render(‘task/new.tpl’);
});
[/php]

Selanjutnya buat file new.tpl pada direktori templates/task, yang isinya adalah seperti berikut. Dan style dari form menggunakan bootstrap framework

[php]
{% extends "layout.tpl" %}
{% block content %}
<form class="form-horizontal" action="create" method="POST">
<div class="control-group">
<label class="control-label" for="taskName">Task Name</label>
<div class="controls">
<input type="text" id="taskName" placeholder="Task Name" name="name" value="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="taskStatus">Status</label>
<div class="controls">
<input type="checkbox" name="done" value=1 > Done<br>
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" value="Submit" class="btn btn-primary">
</div>
</div>
</form>
{% endblock %}
[/php]

Simpan file tersebut dan akses pada halaman http://localhost/slim/new.

Proses Simpan

Dari code form input, proses submit akan menuju halaman “/create”. Untuk itu kita buat code untuk halaman create pada index.php seperti berikut. Prosesnya adalah setelah berhasil menyimpan maka diredirect ke halaman (‘/’) yaitu halaman awal untuk menampilkan data.

[php]
## Create
$app->post(‘/create’, function () use ($app) {
$task = new Task();
$task->name = $app->request()->post(‘name’);
$task->done = $app->request()->post(‘done’) === ‘1’ ? 1 : 0;
$task->save();
if($task->save()) {
$app->redirect(‘/’);
}
});
[/php]

Edit dan Update Data

Dari tautan yang terdapat pada halaman utama, maka proses edit diarahkan ke halaman id/edit, dimana id menunjukkan field id dari masing-masing baris. Misalnya akan menampilkan data dengan id 1, maka tautan menjadi “1/edit”, dan selanjutnya sesuai id masing-masing. Kemudian dicari pada table record sesuai id tersebut dan ditampilkan pada form. Setelah di edit oleh pengguna maka diarahkan ke proses update untuk disimpan.

Code untuk menghasilkan halaman tersebut pada index.php adalah sebagai berikut
[/php]
## Read
$app->get(‘/:id/edit/’, function ($id) use ($app) {
$data[‘task’] = Task::find($id);
$app->render(‘task/edit.tpl’, $data);
});

## Update
$app->post(‘/:id/edit’, function ($id) use ($app) {
$task = Task::find($id);
$task->name = $app->request()->post(‘name’);
$task->done = $app->request()->post(‘done’) === ‘1’ ? 1 : 0;
$task->save();
if($task->id > 0) {
$app->redirect(‘/’);
}
});
[/php]

Form untuk menampilkan data yang akan diedit adalah edit.tpl. Buat file tersebut pada direktori templates/task dengan isi kodenya adalahs ebagai berikut

[php]
{% extends "layout.tpl" %}
{% block content %}
<form class="form-horizontal" action="/{{task.id}}/edit" method="POST">
<div class="control-group">
<label class="control-label" for="taskName">Task Name</label>
<div class="controls">
<input type="text" id="taskName" placeholder="Task Name" name="name" value="{{task.name}}">
</div>
</div>
<div class="control-group">
<label class="control-label" for="taskStatus">Status</label>
<div class="controls">
{% if (task.done==1) %}
<label class="checkbox inline"><input type="checkbox" name="done" value=1 checked="true">Done</label>
{% else %}
<label class="checkbox inline"><input type="checkbox" name="done" value=1 > Done</label>
{% endif %}
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" value="Submit" class="btn btn-primary">
</div>
</div>
</form>
{% endblock %}
[/php]

Cobalah untuk menampilkan sebuah data dan ubah isinya kemudian simpan. Jika tidak ada kesalahan maka data akan dapat di update.

Delete / Hapus Data

Untuk hapus data, tidak memerlukan halaman / template khusus, kita tinggal panggil fungsinya pada index.php seperti ini

[php]
$app->get(‘/:id/delete/’, function ($id) use ($app) {
$task = Task::find($id);
$task->delete();
$app->redirect(‘/’);
});
[/php]

Cobalah untuk menghapus datanya.

Untuk script lengkap hasil dari artikel ini dapat diunduh pada link berikut

Semoga bermanfaat.