Terkadang saya suka sekali dengan Admin Panel Builder dari Dolphin Community Builder, wow, untuk merubah

tata letak block website bisa hanya dengan drag and drop. Begitu juga untuk mengubah tata letak setiap menu, semuanya dengan easy and user friendly. Jauh lebih mudah untuk end user ketimbang Joomla yang masih menggunakan cara kuno. Drag and Drop builder ini nantinya juga akan kita implementasikan untuk MeTu+ release alpha 10 berikutnya. Dalam versi release alpha 10 nanti kita juga mengkode ulang sebagian besar script codeigniternya. Untuk screenshot Drag and Drop builder ini dapat anda lihat pada screenshot berikut ini:

Disini, kita akan mencoba menggunakan Php Mysql JQueryUI untuk membuat simple Drag and Drop builder. Dalam Drag and Drop ini, kita akan meload halaman sesuai dengan tata letak block yang sudah tersimpan di database. Kemudian dengan drag and drop system dari JQueryUI kita akan mengupdate tata letak di database. Simple but powerfull untuk end user. System ini sedikit berbeda dengan MeTu+, karena pada MeTu+ kita akan memanipulasi file cache dan mengcompile ulang file cache setelah kita mengupdate database :) Screnshot metu:

Tutorial ini juga akan banyak anda temui di internet yaitu Drag and Drop JQueryUI, bahkan JQueryUI sendiri pada dokumentasinya (bisa dilihat saat anda mendownload JQueryUI) juga terdapat banyak sekali sample/contoh drag and drop builder. Tetapi pada tutorial ini akan ada banyak perbedaan dan lebih mudah dimengerti, sangat simple dan tersedia source code yang dapat anda download dan anda coba install di Localhost maupun di server online anda. Oke, mari kita mulai berikut adalah screenshot dari structur folder kita:

Sama seperti pada script kebanyakan, anda bisa melihat structure folder kita seperti diatas. Penjelasan dari gambar diatas adalah sebagai berikut: - Kita membuat sebuah install_sql.sql dalam folder install, ini kita gunakan untuk menginstall table dalam database yang kita buat nanti. - Kita juga membuat sebuah script untuk koneksi ke database tentu dengan password dan username dari database kita, nah file ini adalah connect_to_database.php

- Kita membutuhkan sebuah front end page yang merupakan antarmuka dengan user, file itu adalah index.php - Kita juga membutuhkan sebuah script untuk memproses semua instruksi baik untuk meloading data dari database maupun mengupdate database yaitu process.php - Kita membutuhkan sebuah permak style untuk membuat situs kita jauh lebih bagus dan enak dipandang mata, file itu adalah css/style.css - Nah, yang paling penting, kita menggunakan JQuery dan JQueryUI yang masin masing dapat anda lihat pada screenshot. Versi keduanya dapat anda ganti dengan versi yang baru. Disini saya menggunakan versi lama karena dilihat dari ukuran filenya jauh lebih kecil. Oke, mari terlebih dahulu kita bahas install_sql.sql, script dapat anda lihat pada kode di bawah ini:
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. INSERT INTO `metu_builder` (`ID`, `page`, `column`,`block_title`,`order`) VALUES (1, 'home', '1', 'Promo', '1'), (2, 'home', '1', 'Blogs', '2'), (3, 'home', '2', 'Members', '1'), CREATE TABLE `metu_builder` ( `ID` INT( 10 ) NOT NULL AUTO_INCREMENT PRIMARY KEY , `page` VARCHAR( 30 ) NOT NULL , `column` INT( 10 ) NULL, `block_title` VARCHAR( 30 ) NULL, `order` int ( 10 ) NULL ) ENGINE = MYISAM DEFAULT CHARSET=utf8; SET NAMES 'utf8'; DROP TABLE IF EXISTS `metu_builder`;

(4, 'home', '2', 'Mediatutorial', '2'), (5, 'account', '1', 'Status Text', '1'), (6, 'account', '2', 'Profile Detail', '1');

Anda bisa lihat, pada kode diatas, kita membuat 2 buah halaman yaitu halaman home dan halaman account, masing-masing halaman terdapat 2 kolom, yaitu kolom 1 dan 2, masing masing kolom terdapat beberapa block. Dan setiap block memiliki order atau urutan sendiri sendiri. Then, mari kita buat koneksi dengan database dan table yang telah kita buat connect_to_database.php

1. 2. 3. 4. 5.

<?php mysql_connect("localhost", "root", "") or die ("Can't connect to Host"); mysql_select_db("mediatutorial_db") or die ("No database");

?>

Berikutnya, kita akan membuat front end user yaitu index.php

Inilah tempat dimana semua process kita dihandle, process.php

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. '.$row['column']; 21. 22. $query_item = "SELECT * FROM `metu_builder` WHERE `column` ='$i' AND if($row['column']!= $i) continue; else{ $ret .= '<div id="column_'.$row['column'].'" class="column_builder">Column //function to display blocks //$page - home, account, dst function showBlocks($page){ $ret = ''; $query = "SELECT `column` FROM `metu_builder` WHERE `page` ='$page'"; $result_query = mysql_query($query); $i = 1; while($row = mysql_fetch_array($result_query)){ /* * MediaTutorial.web.id */ require_once 'connect_to_database.php'; <?php

`page`='$page' ORDER BY `order` ASC"; 23. $result_query_item = mysql_query($query_item);

24. 25.

while($row_item = mysql_fetch_array($result_query_item)){ $ret .= '<div id="item_'.$row_item['ID'].'"

class="item"><h2>'.$row_item['block_title'].'</h2></div>'; 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. } ?> //function to show footer html function showFooter(){ --bisa dilihat di source code--} //fuction tow how header html function showHeader(){ --bisa dilihat di source code--} } return 'Saved successfully'; //function to save position function saveBlock(){ $data = $_POST; //print_r($data); foreach($data as $key => $value){ ---bisa dilihat nanti di bawah--} } $ret.= '<div id="process" style="clear: both;"></div>'; return $ret; } $ret .= '</div>'; $i += 1; }

terdapat 4 fungsi dalam process.php diatas, yaitu showBlock(), saveBlock(), showHeader(), dan showFooter(). Untuk dua fungsi terakhir adalah digunakan untuk menampilkan head tag dan script pada html, kita akan membahas ini di akhir nanti. Nah, sekarang mari kita perhatikan showBlock() function di atas bila kita jadikan html maka fungsi ini akan menjadi:
1. 2. 3. 4. 5. 6. 7. 8. </div> </div> <div id="column_2" class="column_builder"> <div id="item_3" class="item"><h2>Members</h2></div> <div id="item_4" class="item"><h2>Mediatutorial</h2></div> <div id="column_1" class="column_builder"> <div id="item_1" class="item"><h2>Promo</h2></div> <div id="item_2" class="item"><h2>Blogs</h2></div>

Ok, sekarang mari kita kembali ke fungsi showBlock(), terlebih dahulu kita akan menyeleksi column, bila column telah terseleksi langsug kita akan menyeleksi item item di database sesuai dengan column. Mungkin anda bertanya, pada fungsi tersebut ada sebuah code seperti di bawah ini:
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. } } $ret .= '</div>'; $i += 1; if($row['column']!= $i) continue; else{ --} $i = 1; while($row = mysql_fetch_array($result_query)){

code di atas digunakan untuk menghindari hasil menyeleksi column yang dobel, mungkin anda punya cara lain dalam mengatasi problem ini???? anda bisa memberikan komentar di bawah artikel ini. :) untuk fungsi saveBlock() akan kita bahas nanti di akhir. Fungsi showHeader() kita adalah seperti pada kode di bawah ini:

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.

//fuction tow how header html function showHeader(){ $url_save = $_SERVER['PHP_SELF'].'?action=save'; $ret =' <html> <head> <title> Drag Drop JQueryUI </title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script src="js/jquery/jquery-1.6.1.min.js" type="text/javascript"

language="javascript"></script> 12. <script src="js/jquery-ui/jquery-ui-1.7.1.custom.min.js"

type="text/javascript" language="javascript"></script> 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. function savePosition(){ var items = []; $(".column_builder").each(function(){ var columnId = $(this).attr("id"); $(".item", this).each(function(i){ //order mulai dari 0 }); } }).disableSelection(); <script type="text/javascript"> $(document).ready(function() { $(\'.column_builder\').sortable({ connectWith: \'.column_builder\', handle: \'h2\', cursor: \'move\', placeholder: \'placeholder\', forcePlaceholderSize: true, opacity: 0.6, stop: function(event, ui){ savePosition();

34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. } return $ret; </script> </head> <body>'; } });

var item = { id: $(this).attr("id"), column: columnId, order: i+1 } items.push(item); });

$("#process").html("saving..."); var shortorder = {items : items}; $.ajax({ url: "'.$url_save.'", async: false, data: shortorder, dataType: "html", type: "POST", success: function(html){ $("#process").html(html); } });

Script diatas akan men-generate salah satu fungsi JQueryUI yang sangat penting untuk system drag and drop kita Dengan fungsi sortable ini, maka kita sudah bisa membuat drag and drop element. Silahkan anda lihat hasil generate dari fungsi showHeader() di atas seperti berikut ini:
1. 2. $(document).ready(function() { $('.column_builder').sortable({

3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. });

connectWith: '.column_builder', handle: 'h2', cursor: 'move', placeholder: 'placeholder', forcePlaceholderSize: true, opacity: 0.6, stop: function(event, ui){ savePosition(); } }).disableSelection();

Untuk anda yang memang sudah familiar dengan JQueryUI pasti bisa dengan sangat mudah memahami kode di atas. Kita akan mengimplementasikan fungsi 'sortable' kepada setiap element yang memiliki class 'column_builder'. connectWith digunakan untuk koneksi antar div yang memiliki class 'column_builder' sehingga antar div yang memiliki class yang sama dapat dilakukan drag and drop. handle adalah element yang bisa kita jadikan sebagai handle dari drag and drop. cursor jelas, yaitu sebuah style untuk mouse saat kita sedang melakukan drag and drop. placeholder merupakan tempat saat kita akan menempatkan element yang kita drag and drop, perhatikan screenshot animasi di atas, saat kita akan menempatkan element maka akan muncul kotak dengan border garis putus putus, itulah placeholder kita. opacity merupakan opacity saat kita melakukan dragging, sehingga terlihat element yang kita drag menjadi transparent. dan yang terakhir, saat drag and drop telah selesai kita lakukan (stop) maka kita akan memanggil fungsi untuk menyimpan posisi dari element yang didrag yaitu savePosition. fungsi savePosition dalam showHeader adalah sebagai berikut:
1. 2. 3. 4. 5. 6. function savePosition(){ var items = []; $(".column_builder").each(function(){ var columnId = $(this).attr("id"); $(".item", this).each(function(i){ //order mulai dari 0 var item = {

7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. } } }); }); }

id: $(this).attr("id"), column: columnId, order: i+1

items.push(item); });

$("#process").html("saving..."); var shortorder = {items : items}; $.ajax({ url: "http://localhost/folder/index.php?action=save", async: false, data: shortorder, dataType: "html", type: "POST", success: function(html){ $("#process").html(html);

dari fungsi JQueryUI di atas kita dapat memahami bahwa saat drag and drop selesai maka kita memanggil fungsi savePosition. Dalam fungsi ini terlebih dahulu kita menampilkan tulisang 'saving...' kemudian kita mengumpulkan data kedalam array items sebelum akhirnya array items kita masukan ke dalam variable shortorder untuk di kirim ke url http://localhost/folder/index.php?action=save. Nah, dari sini bisa dimengerti ya, semua data dalam bentuk array json ini kita kirimkan ke dalam index.php?action=save. Coba anda lihat kembali kode index.php di atas. $_GET['action']== 'save' akan memanggil fungsi saveBlock() seperti pada code dibawah ini:
1. 2. 3. 4. 5. 6. //function to save position function saveBlock(){ $data = $_POST; //print_r($data); foreach($data as $key => $value){ foreach($value as $key2 => $value2){

7. item table id 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.

$item = explode("_",$value2['id']); //split item_3 to get 3 and that is our

$value2['id'] = $item[1];

$col = explode("_", $value2['column']); //split $value2['column'] = $col[1];

///

$new_column = $value2['column']; $new_order = $value2['order']; $id = $value2['id'];

$query = "UPDATE `metu_builder` SET `column`='$new_column',

`order`='$new_order' WHERE `ID`='$id'"; 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. } } return 'Saved successfully'; } } if(mysql_query($query)) continue; else{ echo 'Error query'; exit();

pasti ada yang bingung, kenapa kita memakai: $item = explode("_",$value2['id']); $value2['id'] = $item[1]; $col = explode("_", $value2['column']); //split $value2['column'] = $col[1]; sebetulnya simple saja, fungsi savePosition dalam JQueryUI kita tadi mengirimkan variable 'item_1', 'item_2' serta 'column_1', 'column_2', dalam hal ini kita ingin mendapatkan id dan column, sehingga kita harus hanya mengambil angka saja. Untuk itulah kita bisa menggunakan fungsi explode seperti diatas

untuk men-split ke dalam array. Nah, bila semua telah selesai, kita pun bisa melakukan update query seperti ini: $query = "UPDATE `metu_builder` SET `column`='$new_column', `order`='$new_order' WHERE `ID`='$id'"; Untuk lebih jelasnya, silahkan download source code, untuk installasi anda bisa membaca di folder install/