Selasa, 16 Maret 2021

Seri Belajar Ruby on Rails Bagian 11 - Membuat Aplikasi Manajemen Tugas (Homework Management)

Hai, semangattt! ini bagian terakhir dari Seri Belajar Ruby on Rails loh, kali ini kita akan belajar membuat aplikasinya langsung. Aplikasi nya yang simple-simple aja ya kalian pasti bisa kok, apalagi kalo kalian udah baca bagian yang lain. So kita yang langsung aja ya.

Kali ini kita akan membuat aplikasi yang namanya Homework Management dengan Rails versi 6 yaitu aplikasi yang bisa kalian gunakan untuk mengatur jadwal perkerjaan rumah guys. Berikut step-step cara pengerjaan nya :


Buat Project Baru


Buka terminal, dan jalankan code berikut:
$ rails new homework_management
$ bundle install
$ rake db:create
Setting devise untuk authentikasi (jika diperlukan)
Note: untuk setting device kalian bisa belajar disini [Link]
Contoh tampilan untuk devise


Membuat Table, Models, Views, dan Controllers

Contoh struktur table

Kita akan menggunakan 2 (dua) tabel untuk membuat aplikasi ini yaitu tabel Category dan Homework, kita akan menggunakan metode scaffold untuk mengenerate table, models, views serta controllers-nya. Berikut cara membuat schema nya :

$ rails g scaffold Category name:string
$ rails g scaffold Homework homework_name:text category:string deadline:date description:text category_id:integer
Setelah berhasil di generate jalankan migration :
$ rake db:migrate


Relasi dan Validasi

Di section ini kita akan membuat relasi dan validasi untuk tabel, relasi dan validasi ini biasa nya di simpan pada models, berikut contoh nya :





Custom Views


Karena kita telah membuat relasi otomatis kita perlu merubah tampilan CRUD yang telah tergenerate oleh scaffold tadi agar lebih optimal, seperti merubah field text menjadi select agar ada suggestion ketika membuat record yang telah terelasi.

Ubah pada bagian app/views/homeworks/_form.html.erb menjadi :


Setelah semua step sudah dikerjaan, buka terminal dan nyalakan rails server
$ rails s

Buka pada browser localhost:3000/categories untuk mengakses CRUD tabel Category dan  localhost:3000/homeworks untuk mengakses CRUD tabel Homework

Contoh tampilan Homeworks (localhost:3000/homeworks)
Contoh tampilan Categories (localhost:3000/categories)



Nah akhirnya selesai juga seri belajar kali ini, semoga bermanfaat bagi kamu yang telah mengikuti pelajaran ini dari bagian awal, sampai jumpa di seri-seri belajar yang akan datang, coming soon yaaa last but not least. Keep Shining Like Ruby :)

Download contoh aplikasi disini [Download]

1 komentar:

  1. Mas.. di saya untuk homeworks nya kok error ya pada baris select tag setelah else, mohon bantuan nya
    Terima kasih

    BalasHapus