ilham’s Life Journal

Icon

not another life journal

Tutorial: Add Drupal node in Multiple Row (support ALL CCK) with Ajax save

Saya melihat beberapa Sistem informasi berbasis web (seperti yang digunakan dikantor saya), dengan mudah mengatakan kepada user: Add row, lalu menggunakan jquery dibawahnya akan bertambah row baru (tanpa pindah halaman). Saya ingin Drupal yang saya buat dapat berfungsi sebagai mana hal tersebut.

Saya menemukan module module multi_node_add (http://drupal.org/project/multi_node_add), namun kurang puas karena tidak sesuai dengan keinginan saya .

Setelah 2 hari mencari metode yang tepat akhirnya saya menemukan solusinya. Dalam 2 hari itu ada beberapa metode yang saya coba:

1. Menggunakan multi_node_add (http://drupal.org/project/multi_node_add)

Module ini berjalan dengan sempurna, namun tidak mendukung module workflow (http://drupal.org/project/workflow), sementara saya menggunakannya.

Module ini akan membuat user saya memiliki 2 halaman:

1. untuk mengcreate konten,

2. untuk mengubah konten.

Yang saya inginkan user memiliki 1 halaman saja. Module ini tidak saya gunakan lagi 🙂

2. Menggunakan node_import(http://drupal.org/project/node_import)

Module ini sebenarnya berfungsi mengimport table mysql hingga menjadi node+cck di drupal. Saya bermaksud menggunakan script PHP + jquery yang langsung menulis didatabase  dan table lain sehingga user akan memanggil add row untuk menambah baris. Kemudian module node_import akan menjadikannya node.

Namun hal ini tidak saya lakukan karena:

– Type content yang saya buat menggunakan filefield, dan nodereference, bukan text biasa. Sehingga akan merepotkan saya untuk membuat ulang field tersebut.

-Memakan resource dua kali. Karena pertama konten disimpan di database lain, kemudian diimport ke database drupal.

Alhamdulillah, saya menemukan metode untuk mensupport hal ini, walaupun hasilnya tidak “selembut” jquery, tapi saya lumayan puas karena:

1. metode ini mendukung semua cck field, artinya saya bisa upload gambar, foto, video, atau hanya text biasa. Bandingkan dengan sistem informasi di kantor saya baru bisa add row dengan kolom adalah text atau select value dari database.

2. Sesuai keinginan saya dan saya rasakan user experince dalam menggunakan sistem saya meningkat.

3. Tidak menggunakan Coding php yang ribet (karena saya termasuk orang yang males coding hehe)

Sebelum memuai tutorial ini, ada beberapa hal yang perlu disiapkan:

Module yang dibutuhkan:

1. CCK, download di:  http://drupal.org/project/cck

2. Rules, download di: http://drupal.org/project/rules

3. pathrules,  download di: http://drupal.org/project/pathrules

4. views, download di: http://drupal.org/project/views

5. editablefields, download di http://drupal.org/project/editablefields

6. ajaxload, download di http://drupal.org/project/ajaxload

Install seluruh module ini di halaman admin/build/modules

Kemampuan yang dibutuhkan:

1. Mengerti konsep CCK, RULES, dan VIEWS (kemampuan PHP tidak terlalu dibutuhkan).

Hal ini penting karena yang saya lakukan bergantung kepada module diatas (tidak menggunakan script php)

Lanjut ke tutorialnya:

Langkah pertama:

Buat content type, dan add CCK fields seperti biasa

untuk langkah lengkapnya ikuti: http://drupal.org/node/162242

Langkah Kedua:

Langkah kedua adalah mengkonfigurasi rules. ada baiknya anda memperhatikan http://drupal.org/node/298481.

1. Buat new Rules, pilih Event: “User is going to view a Page”

Jangan lupa untuk Save

2.  Tambahkan kondisi

klik Add New Condition, lalu pilih check path

Klik Next

3.  Isi dengan kondisi path

Ganti typecontent dengan machine name type content-mu. Lalu Save.

Kamu juga dapat menggunakan operator dibawahnya agar sesuai dengan kondisi, baca halaman http://drupal.org/project/pathrules untuk lebih jelasnya.

4. Add Action

Lalu di bawahnya Add Action, pilih add New content:

Klik Next

5. Konfigurasi type content yang dapat digunakan untuk konten baru tersebut:

Pilih type content yg anda inginkan. Title harus diisi, jika anda menginstal module token (http://drupal.org/project/token), maka anda dapat menggunakannya untuk membuat pola title

6. Tambahkan page direct:

Kita memerlukan page direct karena kita ingin setelah user mengklik url node/add/typecontent dia mendapatkan multiple form. karena itu, user akan kita arahkan ke halaman lain (akan dibuat kemudian). Saat ini, klik next saja.

7. Arahkan user ke url yang kita inginkan:

Centang Force redirecting dst… agar user 99% terdirect ke halaman yang kita inginkan.

8. jika anda ingin field CCK memiliki nilai, anda bisa membuat action baru yaitu populate a field (lihat gambar poin 4)

Langkah Ketiga:

Langkah ketiga adalah tentang modules views. Ada baiknya anda  mulai dengan membaca http://drupal.org/node/395064.

1. Add New Views

Klik save.

2. Munculkan cck Field:

Tambahkan CCK Field yang ditampilkan:

Lalu untuk Formatnya klik:

Saya sarankan untuk memilih editable(HTML) jika Field Anda banyak. Karena menggunakan Editable(Ajax) akan mempengaruhi performance (apalagi jika anda menggunakan field image atau file.

Walaupun tipenya Editable(HTML), namun setiap perubahan akan otomatis tersimpan (karena menggunakan ajax load).

3. Pilih Views Style table:

4. Add new page display dan tentukan URL:

Tambahkan display Page untuk view yang kita buat. Display page membutuhkan menu path atau URL. URL-nya kita samakan dengan url yang telah kita set di page direct Rules (lihat langkah Kedua Poin 7)

Hasilnya:

Sekarang, saat user mengklik alamat node/add/typecontent, user akan menuju halaman tambpda/workflow/draft, dimana dihalaman tersebut akan bertambah baris konten yang dapat langsung diisi (otomatis tersimpan via ajax). Agar lebih memudahkan user, tambahkan link tersebut pada menu atau buat block diatas content.

Langkah selanjutnya:

Agar tutorial ini dapat  berfungsi dengan sempurna, pastikan anda telah mengatur permissions tiap role (jika tidak halaman view, atau konten tidak akan dapat dilihat oleh mereka).

Advertisements

Filed under: Daily journal

5 Responses

  1. Tutorial yangs angat menarik. Memberi satu idea baru kepada saya. Bolehkan saya menerbitkan kembali tutorial ini dalam gaya bahasa tersendiri?

  2. kitta2006 says:

    ilhaam… apa kabar!!?

    tutorial bla bla bla
    katakanlah, kabarnya ilham lebih menarik, he
    *secara bukan anak ilkom dink

    showan… apa kabar ilham? keep in touch ya! ^^

  3. milham says:

    @kitta2006: insya allah

  4. metallurgyq says:

    С тех времен, когда человечество научилось изготавливать металл, производительность труда увеличилась (орудия труда стали качественнее, чем те, которые раньше изготавливались из камня и костей). история металлургии

  5. terima kasih mass… tutorialnya bermanfaat sekali …. saya barusan belajar tentang dunia web

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

Dear Reader

Online  Free Image Share Hosting

"Do the Best let's Allah do the rest"
-Muhammad Ilham-

Ini hanya journal kehidupan saya. Saya menulis tentang hal yang menarik dan saya senang menulisnya.

Saya menulis tentang hal-hal yang saya yakini, atau sekedar yang sudah saya alami, TErkadang saya menulis yang saya ingin pelajari Saya suka berdiskusi, namun tidak menyukai perdebatan.

Mari wujudkan hidup yang damai, tentram di bawah naungan iman dan islam.

Lebih dan kurangnya terima kasih sudah berkunjung di journal sederhana ini. Untuk mengetahui saya lebih lanjut, silahkan lihat Profil saya

Atau:

Demi Masa

December 2011
M T W T F S S
« Mar   Jun »
 1234
567891011
12131415161718
19202122232425
262728293031  

RSS Unknown Feed

  • An error has occurred; the feed is probably down. Try again later.
%d bloggers like this: