Daftar dan Belajar Sekarang!

Membuat sortable list seperti Trello

Belajar bagaimana cara membuat sortable list seperti Trello, kita bisa memindahkan daftar urutan atau grupnya dan nyimpen infonya di database langsung

Poin: 90 EXP

❱ Trailer

trailer trello like list

❱ Frontend

Sortable list like trello locked icon group sort locked icon

❱ Backend

mengambil data dari database locked icon persiapan javascript untuk tujuan query akhir locked icon update urutan grup dengan ajax locked icon update urutan per item locked icon memindahkan ke list lain locked icon

❱ Bug

kesalahan pada list locked icon

Detail Kelas

trailer trello like list

Trailer playlist membuat sortable list seperti trello


Sortable list like trello

Kita akan mulai berkenalan dengan library sortable javascript dari rubaxa, untuk membuat sistem drag and drop menjadi lebih mudah


group sort

Sorting group! Selain setiap listnya, kita juga bisa dengan spesifik mengatur element apa yang bisa kita drag, agar tidak semua elemenya terkena efek ini


mengambil data dari database

Sambungkan daftar list dan group yang kita buat dengan database


persiapan javascript untuk tujuan query akhir

Sebelum kita mulai koding, biasakan mencatat apa tujuan akhir yang kita mau untuk mulai step-step kecil yang bisa dilakukan


update urutan grup dengan ajax

Mengupdate urutan grup pada backend yang selalu bisa kita ubah pada frontend


update urutan per item

Setelah grupnya, sekarang kita akan mulai mengupdate itemnya masing-masing


memindahkan ke list lain

Selain sorting list pada setiap grup, kita juga bisa memindahkan satu list ke list lainnya, bagaimana caranya mengatur ini pada sisi backend?


kesalahan pada list

Tugas kita belum selesai, tanpa kita sadari, ternyata potensi bug!


Membuat sortable list seperti Trello

time icon 3 tahun yang lalu
level icon Sulit