Halo semua! kita lanjut ke bagian ke 2 dari Tutorial Laravel 11, jika belum membaca tutorial bagian pertama bisa dibaca disini Tutorial Laravel 11 Membuat Aplikasi Todo List Sederhana : Bagian 1 – Install Laravel. Bagian ini berisi pembuatan User Interface (UI) dari aplikasi Todo List yang akan kita buat.
Baik langsung saja kita mulai tutorialnya. Setelah sebelumnya kita sudah menginstall dan melakukan konfigurasi file .env Laravel dan memastikan bahwa tanggal dan jam sudah sesuai dengan zona waktu WIB, selanjutnya adalah membuat tampilan dari Todo List yang akan kita buat.
Daftar Isi
Buat file blade
Pertama buat terlebih dahulu file blade pada resources/views/todo-list.blade.php beri nama sesuai dengan keinginan, disini saya beri nama file tersebut dengan nama todo-list.blade.php
Kemudian kita buka dengan tag html dan import css serta js bootstrap, bisa gunakan CDN maupun download resource ke folder laravel yang kita miliki. Pada tutorial ini saya akan menggunakan CDN, dilain kesempatan saya akan buatkan tutorial menggunakan resource dari bootstrap dan melakukan compile menggunakan webpack maupun vite.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Todo List App</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>Tambahkan route ke view
Setelah membuat view, selanjutnya adalah buat routenya agar view yang tadi kita buat dapat diakses dengan cara buka file web.php didalam folder routes kemudian ubah kode yang sebelumnya kita buat untuk test konfigurasi tanggal menjadi seperti berikut:
Route::get('/', function () {
return view("todo-list");
});Setelah route dibuat selanjutnya uji coba route tersebut dengan cara jalankan server seperti pada tutorial sebelumnya dengan menggunakan php artisan serve kemudian buka pada browser web, jika berhasil maka akan muncul “Hello World” seperti dibawah ini.
Buat Tampilan Aplikasi
Selanjutnya buat tampilan aplikasi todo list yaitu dengan menggunakan form input untuk memasukkan data “todo” dan gunakan bootstrap list untuk menampilkan todo yang telah diinput. Ganti <h1>Hello, World!</h1> dengan kode dibawah ini:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Todo List App</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1 class="text-center mt-5">Todo List App</h1>
<form action="#">
<div class="input-group mb-3 mt-3">
<input type="text" class="form-control" placeholder="Add new todo" aria-label="Add new todo"
aria-describedby="button-addon2">
<button class="btn btn-primary" type="submit" id="button-addon2">Add</button>
</div>
</form>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Todo 1
<div>
<button class="btn btn-danger btn-sm">Delete</button>
<button class="btn btn-primary btn-sm">Done</button>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Todo 2
<div>
<button class="btn btn-danger btn-sm">Delete</button>
<button class="btn btn-primary btn-sm">Done</button>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Todo 3
<div>
<button class="btn btn-danger btn-sm">Delete</button>
<button class="btn btn-primary btn-sm">Done</button>
</div>
</li>
</ul>
<h4 class="mt-5">Done</h4>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Todo 4
<div>
<button class="btn btn-danger btn-sm">Delete</button>
<button class="btn btn-primary btn-sm">Undone</button>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Todo 5
<div>
<button class="btn btn-danger btn-sm">Delete</button>
<button class="btn btn-primary btn-sm">Undone</button>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Todo 6
<div>
<button class="btn btn-danger btn-sm">Delete</button>
<button class="btn btn-primary btn-sm">Undone</button>
</div>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
</script>
</body>
</html>Setelah kode tersebut ditambahkan silahkan refresh halaman untuk melihat hasilnya hingga menjadi seperti gambar dibawah ini:
Buat Fitur Aplikasi
Setelah tampilan berhasil dibuat, selanjutnya kita akan mulai membuat fitur untuk menyimpan, mengubah, dan menghapus todo list. Pertama kita harus membuat table untuk menyimpan data todo menggunakan migration yaitu dengan perintah php artisan make:migration create_todos_table. Setelah itu tambahkan field yang dibutuhkan pada file migration yang telah dibuat, kemudian jalankan migration dengan php artisan migrate.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('todos', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->boolean('completed')->default(false);
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('todos');
}
};
Baca juga:
- Gampang Banget! Cara Upload Form Dengan jQuery Ajax Pada Laravel 10
- Cara Mendownload Seluruh Isi Google Drive Dengan Google Takeout 2023
- Cara Membuat Website Shortenlink Sendiri Menggunakan Laravel 9
- Cara Mengatasi Spam Telepon 188 Telkomsel
- Mengenal Perbedaan HTTP dan HTTPS
Selanjutnya buat model Todos dengan perintah php artisan make:model Todos, dan tambahkan $protected nya dengan field “title” dan “completed”
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Todos extends Model
{
use HasFactory;
protected $fillable = ['title', 'completed'];
}Setelah model dibuat selanjutnya buat controller dengan perintah php artisan make:controller TodosController kemudian tambahkan function untuk menambahkan, mengedit (done / not done), dan menghapus todo list.
<?php
namespace App\Http\Controllers;
use App\Models\Todos;
use Illuminate\Http\Request;
class TodosController extends Controller
{
public function index()
{
$todos_completed = Todos::where('completed', true)->get();
$todos_not_completed = Todos::where('completed', false)->get();
return view('todo-list', compact('todos_completed', 'todos_not_completed'));
}
public function store(Request $request)
{
Todos::create($request->all());
return redirect()->back()->with('message', 'Todo created successfully');
}
public function update(Request $request, $id)
{
$todo = Todos::find($id);
if ($todo->completed) {
$todo->completed = false;
} else {
$todo->completed = true;
}
$todo->save();
return redirect()->back()->with('message', 'Todo updated successfully');
}
public function destroy($id)
{
Todos::destroy($id);
return redirect()->back()->with('message', 'Todo deleted successfully');
}
}Jangan lupa untuk memperbarui route yang kita miliki, arahkan masing-masing route ke function yang telah dibuat pada controller
<?php
use App\Http\Controllers\TodosController;
use Illuminate\Support\Facades\Artisan;
use Illuminate\Support\Facades\Route;
Route::get('/', [TodosController::class, 'index']);
Route::post('/store', [TodosController::class, 'store'])->name('todos.store');
Route::get('/update/{id}', [TodosController::class, 'update'])->name('todos.update');
Route::get('/delete/{id}', [TodosController::class, 'destroy'])->name('todos.destroy');Jangan lupa untuk memperbarui todo-list.blade.php yang telah dibuat sehingga aplikasi kita dapat berfungsi sebagaimana mestinya
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Todo List App</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1 class="text-center mt-5">Todo List App</h1>
<form action="{{route('todos.store')}}" method="POST">
@csrf
<div class="input-group mb-3 mt-3">
<input type="text" name="title" class="form-control" placeholder="Add new todo" aria-label="Add new todo"
aria-describedby="button-addon2">
<button class="btn btn-primary" type="submit" id="button-addon2">Add</button>
</div>
</form>
<ul class="list-group">
@foreach ($todos_not_completed as $item)
<li class="list-group-item d-flex justify-content-between align-items-center">
{{ $item->title }}
<div>
<a href="{{ route('todos.destroy', ['id' => $item->id]) }}"
class="btn btn-danger btn-sm">Delete</a>
<a href="{{ route('todos.update', ['id' => $item->id]) }}"
class="btn btn-primary btn-sm">Done</a>
</div>
</li>
@endforeach
</ul>
<h4 class="mt-5">Done</h4>
<ul class="list-group">
@foreach ($todos_completed as $item)
<li class="list-group-item d-flex justify-content-between align-items-center">
{{ $item->title }}
<div>
<a href="{{ route('todos.destroy', ['id' => $item->id]) }}"
class="btn btn-danger btn-sm">Delete</a>
<a href="{{ route('todos.update', ['id' => $item->id]) }}"
class="btn btn-primary btn-sm">Not Done</a>
</div>
</li>
@endforeach
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
</script>
</body>
</html>Selesai, aplikasi sudah siap digunakan. Hasil akhirnya dapat dilihat dibawah ini, jika ada pertanyaan, kritik & saran, maupun request tutorial bisa komentar dibawah yaa. Jika membutuhkan dokumentasi lebih lanjut dari Laravel/Bootstrap kalian dapat akses disini laravel.com/getbootstrap.com Terima kasih!
Leave a Reply