CHAPTER 6. Sebelum membuat starter data, kita perlu meng-create collections terlebih dahulu. Buat folder lib pada folder aplikasi.

Transkripsi

1 CHAPTER 6 Untuk membuat collections, hal pertama yang dilakukan adalah menambahkan baris baru ke dalam file Javascript yang memungkinkan user untuk membuat collections. Sebelumnya, image tersimpan dalam hardcode yang ada di file javascript dalam tipe data array. Kita buat collections baru dengan nama Images. Sebelum membuat starter data, kita perlu meng-create collections terlebih dahulu. Buat folder lib pada folder aplikasi. File collections.js yang ada di folder lib akan membuat collections dengan nama images.

2 Jika collections masih, perintah ini akan meng-insert tiga image kedalam collection images sebagai starter data. Edit main.js yang adadi folder server seperti yang tampak pada gambar diatas. Jika sebelumnya data dikirimkan dari file java script yang ada di folder client ke file html dalam bentuk obyek array data, sekarang akan diubah ke dalam isi dari collections. Dengan perintah : Template.images.helpers({images:Images.find()});.

3 Jalankan Command Prompt. Hasilnya akan seperti yang tampak pada gambar diatas.

4 CHAPTER 7 Sekarang, kita punya banyak image untuk ditampilkan dalam folder public. Semua image yang akan ditampilkan memiliki format : img + nomerimage +.jpg. Untuk membuat starter data yang efisien untuk menambahkan semua image dalam folder public ke dalam database, maka ubah file main.js yang ada di folder server.

5 Untuk membuat ulang starter data, maka perlu dilakukan penghapusan data dalam collections. Untuk menghapus semua data dalam database (wipe data), digunakan perintah : meteor reset. Sebaiknya diperiksa dulu apakah ada data yang penting, karena perintah wipe ini akan menghapus semua data yang ada pada semua collections (tabel) dalam database. Sedangkan struktur dari collections (table) masih ada dan tidak terhapus. Jika diperhatikan tampilan image pada browser, maka perhatikan bahwa setiap image tidak selalu memiliki ukuran (height) yang sama. Untuk menyeragamkan ukuran (height) semua image, maka lakukan perubahan css pada file main.css yang ada di folder client. Maka akan terlihat tampilan seperti gambar diatas dengan ukuran yang sama tiap thumbnailnya.

6 CHAPTER 8 Tambahkan tombol delete pada file html yang ada pada folder client. Kita set nama class-nya = js-delimage. Kemudian, buttonnya adalah warning button, karena nanti akan diberi warna yang berbeda yaitu warna orange, karena itu pada bootstrap kodenya adalah btn-warning. Kita ubah kode di main.js yang ada di folder client. Kita tambahkan event-listener yang baru. Ingat, nama class-nya adalah js-del-image. Jika js-del-image di click, maka ada sesuatu yang akan dilakukan. Kita akan mengambil id dari image (perintah : varimage_id= ), karena kita akan melakukan click pada image tertentu.

7 Kita sudah membuat listener yang kemudian digunakan untuk mencetak ID dari image. Dan sekarang, kita perlu untuk mengeksekusi ID image tadi agar bisa di-delete dari collections. Dan untuk melakukannya, kita perlu menggunakan perintah remove. Hapus data image yang memiliki ID yang matching dengan variable image_id.

8 Jalankan Localhost:3000 pada browser. Lalu, coba fungsi button delete. Gambar diatas merupakan tampilan sebelum dan sesudah button delete dijalankan.

9 Kita sudah membuat tombol delete dan telah memfungsikannya dengan baik dan sudah diuji untuk menghapus data image. Pada saat image dihapus, secara cepat dilakukan rendering otomatis. Kita akan menggunakan animasi jquery untuk melakukannya. Pertama, yang harus kita lakukan adalah mencari tahu bit mana dari DOM yang akan beroperasi. Kembali ke template html, kita tambahkan ID sehingga kita bisa mengidentifikasikannya. Kita akan meng-hide keseluruhan div yang berisi image.