Program Isenk CRUD pake KENDOUI part 2

Lanjutan dari yang sebelumnya.. kita coba membuat CRUD.. Yang pertama kita dapatkan adalah begini

masih belum ada isinya khan!! Mari kita lanjut ketik codingnya.. Berikut inilah coding saat ini
http://pastebin.com/qJHs2dfx

Klik dahulu link tersebut, berikut akan saya jelaskan.. Pertama kita perlu perhatikan bahwa coding ini terdiri dari 4 area yaitu

1. memanggil file luar
   
   
   
   
   
2. kontent yang berisi div dan link2 yang biasa ditaro di atas 
   
   
   
3. template
   
   
   
4. javascriptnya 
   
   
   

tentu anda bertanya-tanya.. kok template pake script?
di dalam kendoui, script tersebut adalah templatenya. saya mencoba bikin langsung pake html dan ternyata gagal! Untuk nomor 1 kamu bisa ambil dari file jadinya dibawah, namun tetap baca tutorial saya ya. Saya anggap no 1 di atas dah jelas, sesuaikan kebutuhan kamu.. kebetulan bila yang saya pake templatenya tak sesuai.. download kendoui dan download lalu pake yang sesuai keinginan anda.

No 2 juga sudah jelas ya.. itu cuma buat naro gridnya.. sisanya terserah anda sesuai kebutuhan

no 3 adalah yang paling pokok.. mari kita asumsikan bahwa kita ingin menampilkan nama, pesan dan lain-lain. Data-data itu akan dikirim via json nantinya.. tetapi mari kita asumsikan bahwa yang diperlukan adalah

• nama
• pesan
• email
• status

sejalan dengan script, anda akan sadar kalau perlu id. Jadi tambahkan dalam list di atas. Dan mari pelajari templatenya

TEMPLATE

Karena kita akan membuat template table dibawahnya. Maka usahakan memulai semuanya dari <TR></TR> lalu kita akan masuk kedalamnya. Pada field pertama adalah menulis nama, jadi buatlah <TD></TD> terlebih dahulu. Berikan tulisan nama didalamnya

<TD>name</TD>

perlu di ingat name disini adalah nama field dari json yang akan dikirim dan ingat CASE sensitive. Dalam template ini untuk memakai name harus dengan format

#:{spasi}name{spasi}#

sehingga hasilnya

<td class='no'>
#: name #
</td>

buatlah buat lainnya. Dan perhatikan penulisannya. Untuk TD terakhir, itu digunakan untuk javascript edit dan delete. Akan di buka pada tutorial berikutnya.

JAVASCRIPT

ini sangat sulit. Gw terpaksa minta anda menerima apa yang tertulis. Intinya saya cuma membuat grid sederhana.. Edit aja beberapa yang ada merasa kurang sreg. Berikut ini adalah penjelasan beberapa script yang mungkin anda pertanyakan

KENAPA TIDAK MEMBUAT PERINTAH GRID LANGSUNG

di script saya, saya membuat dalam fungsi. Awalnya ngak kepikiran bikin pake fungsi sampe saya menyadari bahwa suatu saat nanti saya perlu perintah RELOAD yang sayangnya belum saya temukan dalam kendoui.. namun kurasa tidak perlu dicari karena cukup lama dan bisa-bisa ilmu ngak sampai

GIMANA CARA PAKE JSON

itulah yang pertama kali kucari, hingga kutemukan begini

dataSource: {

          transport: {

read: {

            dataType: "json",

            url: "?act=json",

            }

           },

         pageSize: 10

     }

awalnya seh nemunya pake yang jsonp.. tapi isenk aja gw ganti json lalu edit sana-sini dan.. walah jadilah seperti di atas..

lalu ada pertanyaan.. gimana biar listnya gk keluar 10,20,30 tetapi 10,30,50 (ngasal).. ternyata cukup edit

pageable: {
         refresh: true,
         pageSizes: [10, 30, 50]
     },

Untuk meminta pake template, gunakan ini

rowTemplate: kendo.template($("#rowTemplate").html()),

tetapi itu belum selese, kamu harus punya header. Jadi cobalah bikin headernya dengan column

JSON DATANYA

Saya tidak menulis scriptnya.. Tetapi cuma mau share formatnya saja. format ini yang biasa saya pakai, walau sebenarnya bukan final

• Pertama panggil querynya dahulu (point awal)..
• periksa apakah error. sebenarnya setelah ini ada check apakah data kosong dan lain-lain, namun mari lewati itu karena saat menulis ini gw belum nemui manfaatnya.
• buat variable datanya (disarankan)
• panggil semua data (while)
• hadirkan data-data yang akan dipakai. Dalam hal ini yang lebih cocok status karena status hanya bertulis 0 dan 1 bukan tulisan. disini status dibuat jadi tulisan
• masukkan semua data yang akan di input ke var sementara (a)
• lalu masukkan ke data ( $data[]=$a)
• setelah selesai lakukan json
• dan lakukan stop

kenapa pake die.. karena 

MENCOBA MELIHAT DATA

Apa gunanya kalau melihat cuma kosong. Mari isenk kita masukkan data kedalamnya. Pertama masukkan query ini

INSERT INTO `bukutamu` (`id`, `detail`, `pesan`, `tanggal`, `stat`) VALUES
(1, '{"name":"gunawan","email":"gundambison@gmail.com"}', 'blaaaa', '2013-10-05 14:11:34', 0);

Dan coba jalankan.. maka kamu akan mendapatkan

Berikutnya kita akan membuat form untuk mengisi. Nah disini kita memakai dialog/window buat edit2.

nb:
beberapa script mengalami perubahan, tetapi itu minor saja.. disesuaikan dengan tampilan

SCRIPT DOWNLOAD