Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ruby

Buat Interfaces Administrasi yang Cantik dengan Active Admin

by
Read Time:13 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Suci Rohini (you can also view the original English article)

Setiap web developer tahu bahwa membuat interface administrasi untuk proyek mereka adalah tugas yang sangat membosankan. Untungnya, ada tool yang membuat tugas ini jauh lebih sederhana. Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana menggunakan Active Admin, framework administrasi yang baru saja diluncurkan untuk aplikasi Ruby on Rails.

Anda dapat menggunakan Active Admin untuk menambahkan interaface administrasi ke proyek Anda saat ini, atau Anda bahkan dapat menggunakannya untuk membuat aplikasi web lengkap dari awal - dengan cepat dan mudah.

Hari ini, kita akan melakukan yang terakhir, dengan menciptakan sistem manajemen proyek yang cukup sederhana. Mungkin kedengarannya agak sulit, tetapi Active Admin akan melakukan sebagian besar pekerjaan untuk kita!


Langkah 1 - Mengatur Lingkungan Pengembangan

Saya akan menganggap Anda memiliki pengetahuan tentang Ruby on Rails sebelumnya, terutama yang melibatkan validasi model, karena sisa interface aplikasi akan diurus oleh Active Admin. Selain itu, Anda harus memiliki lingkungan pengembangan untuk Ruby on Rails 3.1 yang sudah disiapkan, termasuk Ruby 1.9.2.

Mengacu ke artikel ini jika Anda memerlukan bantuan menginstal Ruby dan Rails.

Buat aplikasi yang sedang dikerjakan, dengan menjalankan perintah berikut di Terminal Anda:

Selanjutnya, buka Gemfile Anda dan tambahkan baris berikut:

Permata terakhir diperlukan agar Active Admin dapat bekerja dengan Rails 3.1, jadi jangan lupakan itu. Setelah itu selesai, jalankan perintah bundle install untuk menginstal permata. Sekarang, kita harus selesai menginstal Active Admin, dengan menjalankan perintah berikut:

Ini akan menghasilkan semua inisialisasi dan migrasi yang diperlukan agar Active Admin berfungsi. Ini juga akan membuat model AdminUser untuk otentikasi, jadi jalankan rake db:migrate untuk membuat semua tabel database yang diperlukan. Selain itu, Anda perlu menambahkan satu baris ke file config/environment/development.rb Anda, sehingga mengirim email berfungsi:

Setelah selesai, jalankan server rel dan Arahkan browser Anda ke localhost:3000 / admin. Anda akan disambut dengan form login yang bagus. Cukup ketik "admin@example.com" sebagai email dan "password" sebagai kata sandi, dan tekan "Login". Anda sekarang akan melihat interface administrasi yang bagus.


Langkah 2 - Mengkonfigurasi Model Pengguna Kita

Seperti yang Anda lihat dari halaman web yang baru saja Anda buat, belum banyak yang bisa Anda lakukan. Kita akan membutuhkan cara untuk mengedit pengguna, dan kita dapat melakukannya dengan menggunakan Active Admin. Framework menggunakan apa yang disebutnya "Sumber". Sumber memetakan model ke panel administrasi. Anda perlu membuatnya menggunakan perintah di terminal Anda, sehingga Active Admin dapat mengetahui keberadaannya, jadi teruskan dan jalankan:

Sintaks untuk perintah itu sederhana: cukup tulis nama model basis data di bagian akhir. Ini akan menghasilkan file di dalam folder app/admin, yang disebut admin_users.rb. Sekarang, jika Anda menyegarkan browser, Anda akan melihat tautan baru di atas bar, yang disebut "Admin Users". Mengklik yang akan membawa Anda ke panel administrasi Admin User. Sekarang, itu mungkin akan terlihat agak terlalu berantakan, karena secara default, Active Admin menunjukkan semua kolom model, dan mempertimbangkan bahwa framework menggunakan Rancangan untuk otentikasi, Anda akan melihat banyak kolom yang tidak benar-benar diperlukan. Ini membawa kita ke bagian pertama dari penyesuaian kita: halaman indeks.

Admin UserAdmin UserAdmin User

Menyesuaikan sumber daya Active Admin cukup mudah (dan menyenangkan jika Anda bertanya kepada saya). Buka app/admin/admin_users.rb di editor teks favorit Anda dan buat seperti ini:

Mari kita tinjau kodenya:

  • Baris pertama dibuat oleh Active Admin, dan, seperti yang dikatakannya, ia mendaftarkan sumber daya baru. Ini menciptakan tautan menu di atas bar dan semua tindakan default, seperti tabel yang baru saja Anda lihat.
  • Metode index memungkinkan kita untuk menyesuaikan tampilan index, yaitu tabel yang menunjukkan semua baris.
  • Di dalam blok yang Anda lewati ke metode index, Anda menentukan kolom mana yang ingin Anda tampilkan pada tabel, yaitu. menulis column :email akan membuat Active Admin memperlihatkan kolom itu pada tampilan.
  • default_actions adalah metode kenyamanan yang membuat satu kolom terakhir dengan tautan ke detail, edisi, dan penghapusan baris.

Satu langkah terakhir untuk tampilan ini adalah untuk menyesuaikan formulir. Jika Anda mengeklik tautan "Pengguna Admin Baru" di kanan atas, Anda akan melihat bahwa formulir itu juga berisi semua kolom pada model, yang jelas tidak terlalu berguna. Karena Active Admin menggunakan Rancangan, kita hanya perlu memasukkan alamat email untuk membuat pengguna, dan sisanya harus diurus oleh permata otentikasi. Untuk menyesuaikan formulir yang ditampilkan oleh Active Admin, ada metode yang disebut (Anda dapat menebaknya) form:

Jika kode itu terlihat familier bagi Anda, Anda mungkin pernah menggunakan permata Formtastic sebelumnya. Mari kita lihat kodenya:

  • Anda menentukan tampilan formulir dengan memanggil metode form dan meneruskannya dengan argumen (f dalam kasus ini).
  • f.inputs menciptakan fieldset. Kata nasihat: Anda harus menambahkan setidaknya satu bidang. Bidang di luar satu tidak akan muncul pada tampilan.
  • Untuk membuat bidang, Anda cukup menelepon f.input dan meneruskan simbol dengan nama kolom model, dalam hal ini, "email".
  • f.buttons menciptakan tombol "Submit" dan "Cancel".

Anda dapat lebih lanjut menyesuaikan formulir menggunakan DSL (Domain Specific Language) yang disediakan oleh Formtastic, jadi lihat tutorial tentang permata ini.

Satu langkah terakhir agar formulir ini berfungsi: karena kita tidak memberikan password, Rancangan tidak akan membiarkan kita membuat catatan, jadi kita perlu menambahkan beberapa kode ke model AdminUser:

Callback after_create memastikan Devise mengirimkan tautan kepada pengguna untuk membuat password baru, dan password_required? metode akan memungkinkan kita untuk membuat pengguna tanpa memberikan password.

Cobalah. Buat pengguna, lalu periksa email Anda untuk tautan, yang seharusnya memungkinkan Anda membuat password baru, dan memasukkan Anda ke dalam sistem.


Langkah 3 - Proyek

Kita akan membuat sistem Manajemen Proyek sederhana. Bukan hal yang terlalu rumit, hanya sesuatu yang akan memungkinkan kita mengelola proyek dan tugas untuk proyek, dan menetapkan tugas kepada pengguna tertentu. Hal pertama, adalah membuat model proyek:

Active Admin bergantung pada model Rails untuk validasi, dan kita tidak ingin proyek tanpa judul, jadi mari tambahkan beberapa validasi ke model yang dihasilkan:

Sekarang, kita perlu menghasilkan sumber daya Active Admin, dengan menjalankan:

Untuk saat ini, hanya itu yang dibutuhkan untuk proyek. Setelah memigrasi basis data Anda, lihatlah interface yang baru saja dibuat. Membuat proyek tanpa judul gagal, itulah yang diharapkan. Lihat seberapa banyak Anda berhasil hanya dengan beberapa baris kode?


Langkah 4 - Tugas

Proyek tidak sangat berguna tanpa tugas, kan? Mari kita tambahkan itu:

Ini menciptakan model tugas yang dapat diasosiasikan dengan proyek dan pengguna. Idenya adalah bahwa tugas diberikan kepada seseorang dan milik proyek. Kita perlu mengatur hubungan dan validasi tersebut dalam model:

Ingatlah untuk menambahkan relasi ke model Project dan AdminUser juga:

Migrasikan basis data, dan daftarkan model tugas dengan Active Admin:

Sekarang, pergi dan lihat panel tugas di browser Anda. Anda baru saja membuat sistem manajemen proyek! Kerja bagus.


Langkah 5 - Membuatnya Lebih Baik

Sistem yang baru dibuat tidak terlalu canggih. Untungnya, Active Admin tidak hanya tentang menciptakan sistem perancah yang bagus, itu memberi Anda kekuatan lebih dari itu. Mari kita mulai dengan bagian Proyek. Kita tidak benar-benar membutuhkan id, created dan updated kolom di sana, dan kita tentu tidak perlu dapat mencari menggunakan kolom itu. Mari kita mewujudkannya:

Beberapa catatan di sini:

  • Saat Anda menentukan kolom, Anda dapat menyesuaikan apa yang dicetak pada setiap baris. Cukup lewati satu blok dengan argumen padanya, dan kembalikan apa pun yang Anda inginkan di sana. Dalam hal ini, kita mencetak tautan ke halaman detail proyek, yang lebih mudah daripada mengklik tautan "Lihat" di sebelah kanan.
  • Filter di sebelah kanan juga dapat disesuaikan. Tambahkan saja panggilan untuk filter untuk setiap kolom yang filter yang Anda ingin.

Halaman detail proyek agak membosankan, bukan? Kita tidak memerlukan kolom date dan id di sini, dan dapat menampilkan daftar tugas secara lebih langsung. Menyesuaikan halaman detail dilakukan dengan menggunakan metode show di file app/admin/projects.rb:

Mari kita telusuri kode:

  • show :title => :title menentukan judul yang akan dimiliki halaman. Kedua :title menentukan kolom model yang akan digunakan.
  • Dengan memanggil panel "Tasks" kita membuat panel dengan judul yang diberikan. Di dalamnya, kita membuat tabel khusus untuk tugas-tugas proyek, menggunakan table_for.
  • Kita kemudian menentukan setiap kolom dan konten yang harus dimiliki untuk setiap baris.
    • Kolom "Status" akan berisi "Done" atau "Pending" apakah tugas selesai atau tidak. status_tag adalah metode yang membuat kata yang dikirimkan dengan gaya yang sangat bagus, dan Anda dapat mendefinisikan warna dengan melewati argumen kedua dengan : ok, :warning dan :error untuk warna hijau, oranye dan merah masing-masing.
    • Kolom "Title" akan berisi tautan ke tugas sehingga kita dapat mengeditnya.
    • Kolom “Ditugaskan ke” hanya berisi email dari orang yang bertanggung jawab.
    • "Tanggal Jatuh Tempo" akan berisi tanggal saat tugas jatuh tempo, atau hanya "-" jika tidak ada tanggal yang ditentukan.

Langkah 6 - Beberapa Tweak untuk Tugas

Bagaimana dengan cara mudah untuk memfilter tugas yang jatuh tempo minggu ini? Atau tugas yang terlambat? Itu mudah! Cukup gunakan cakupan. Di file tasks.rb, tambahkan ini:

Mari kita tinjau kode itu:

  • scope: all mendefinisikan scope default, menampilkan semua baris.
  • scope menerima simbol untuk nama, dan Anda bisa melewati blok dengan argumen. Di dalam blok Anda dapat mempersempit pencarian sesuai dengan yang dibutuhkan. Anda juga dapat menentukan ruang lingkup di dalam model dan cukup beri nama sama seperti di file ini.
  • Seperti yang Anda lihat, Anda dapat mengakses objek pengguna yang masuk saat ini menggunakan current_admin_user.
Tasks2Tasks2Tasks2

Coba lihat! Tepat di atas tabel, Anda akan melihat beberapa tautan, yang dengan cepat menunjukkan kepada Anda berapa banyak tugas yang ada per cakupan, dan memungkinkan Anda dengan cepat menyaring daftar. Anda harus menyesuaikan tabel dan filter pencarian lebih lanjut, tetapi saya akan menyerahkan tugas itu kepada Anda.

Kita sekarang akan sedikit mengubah tampilan detail tugas, karena terlihat agak berantakan:

Ini akan menampilkan tabel untuk atribut model (karenanya nama metode, attributes_table_for). Anda menentukan model, dalam task kasus ini, dan di blok berlalu, Anda menentukan baris yang ingin ditampilkan. Ini kira-kira sama dengan yang ditetapkan untuk halaman detail proyek, hanya untuk tugas. Anda mungkin bertanya pada diri sendiri: Untuk apa metode panggilan "active_admin_comments"? Nah, Active Admin menyediakan sistem komentar sederhana untuk setiap model. Saya mengaktifkannya di sini karena mengomentari tugas dapat sangat berguna untuk membahas fungsionalitas, atau yang serupa. Jika Anda tidak memanggil metode itu, komentar akan disembunyikan.

TasksTasksTasks

Ada hal lain yang ingin saya tunjukkan saat melihat detail tugas, dan itulah tugas penerima tugas lainnya untuk proyek itu. Itu mudah dilakukan menggunakan sidebar!

Ini menciptakan panel sidebar, berjudul "Tugas Lain Untuk Pengguna Ini", yang hanya ditampilkan di halaman "tampilkan". Ini akan menampilkan tabel untuk pengguna saat ini, dan semua tugas di mana proyek itu sama dengan proyek yang ditampilkan (Anda lihat, tugas di sini akan merujuk pada task yang ditampilkan, karena ini adalah halaman detail untuk satu tugas). Selebihnya kurang lebih sama dengan sebelumnya: beberapa kolom dengan detail tugas.


Langkah 7 - Dashboard

Anda mungkin telah memperhatikan, ketika pertama kali meluncurkan browser Anda dan masuk ke aplikasi Anda, bahwa ada bagian "Dasbor". Ini adalah halaman yang sepenuhnya dapat disesuaikan dimana Anda dapat menampilkan hampir semua hal: tabel, statistik, apa pun. Kita hanya akan menambahkan daftar tugas pengguna sebagai contoh. Buka file dashboards.rb dan revisi, seperti:

Kode harus cukup akrab bagi Anda. Ini pada dasarnya menciptakan dua bagian (menggunakan metode section dan judul), dengan masing-masing satu tabel, yang masing-masing menampilkan tugas saat ini dan yang terlambat.

DashboardDashboardDashboard

Kesimpulan

Kita telah membuat aplikasi yang luas dalam beberapa langkah. Anda mungkin terkejut mengetahui bahwa ada banyak fitur yang ditawarkan Active Admin, tetapi tentu saja tidak mungkin untuk membahas semuanya hanya dalam satu tutorial. Jika Anda tertarik mempelajari lebih lanjut tentang permata ini, kunjungi activeadmin.info.

Anda juga mungkin ingin memeriksa proyek saya, yang disebut active_invoices di GitHub, yang merupakan aplikasi faktur lengkap yang seluruhnya dibuat dengan Active Admin. Jika Anda memiliki pertanyaan, jangan ragu untuk bertanya di komentar, atau kirim saya tweet.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.