Membuat CRUD Expert, Upload & Filter/Pencarian & Pencarian dengan JQuery, Ajax, Bootstrap Modal, SweetAlert dan WYSIHTML5 pada PHP – PART 1 MENAMPILKAN DATA

Hai sobat ketemu lagi dengan saya. .Tidak bosan-bosan saya memposting tentang cara membuat CRUD dengan Ajax. Dan pada kesempatan kali ini saya akan memposting CRUD Expert yang sudah lama sebenarnya ingin saya posting tetapi karena sangat-sangat malas jadi baru sempat posting hehe…

Pada CRUD ini saya BAGI-BAGI menjadi BEBERAPA PART karena sangat panjang ya guys hehe akan butuh waktu seharian atau bahkan lebih kalo saya harus bikin projectnya dan posting artikel seperti ini. Saya sarankan sobat lihat dari part ke part karena di sini juga saya akan membuat beberapa fungsi yang tidak saya bahas lagi di part selanjutnya jika sudah saya bahas di part ini.

Part pertama ini saya akan membuat data tertampil terlabih dahulu. Seperti biasa saya tidak suka berepot-repot ria membuat 100% custom, saya menggunakan beberapa plugin disini karena plugin/librari ini gratis, antara lain

  1. Bootstrap untuk mempercantik tampilan dan juga saya akan menggunakan fitur ‘Modal’.
  2. Datatables untuk membuat lebih rapi karena sudah ada pagination, searching, dll secara otomatis.
  3. JQuery untuk memudahkan fungsi di aplikasi karena sudah banyak fungsi bawaan yang sangat berguna.
  4. SweetAlert untuk mempercantik tampilan pesan ‘Alert’.
  5. CKEditor sebagai WYSIHTML5 dengan fitu yang cukup lengkap.
  6. Animate.css untuk memberikan beberapa animasi.
  7. Font Awesome untuk menampilkan icon-icon pada aplikasi.
  8. dan lain-lain.

Untuk fiturnya kita menambahkan live search atau pencarian langsung seperti pada postingan saya sebelumnya dan karena kita menggunakan Ajax jadi kita bisa membuat pencarian, tambah, edit, hapus data ini TANPA LOADING. Dan tidak seperti tutorial sebelumnya juga yang tidak ada upload datanya, pada kali ini saya contohkan juga bagaimana jika dengan upload gambar/foto.

Langsung saja kita mulai mencoba, untuk koneksi databasenya masih menggunakan MySQLi dengan metode Object Oriented. Jika sobat belum mengetahuinya maka sobat bisa membaca dengan klik link dibawah

Cara Membuat Koneksi dengan Database MySQL menggunakan PHP

Sekali lagi saya sarankan jika sobat sudah terlanjur membuat aplikasi membuat mysql_query maka ubahlah menjadi mysqli_query atau PDO karena cara itu sudahlah tidak aman. Dan untuk langkah untuk mengeksekusi querynya menggunakan prepare statement dan bind param. Seperti apakah itu nanti akan saya jelaskan pada tutorial dibawah.

Membuat Database MySQL

1. Pertama yang WAJIB ada yaitu sobat harus membuat sebuah database. Sobat bisa menggunakan tools bantu seperti navicat, heidi SQL atau lainnya. Sobat juga bisa membuatnya dengan mengakses url localhost/phpmyadmin -> klik tab Database dan tuliskan db_dewankomputer-> Klik tombol Create/Buat.

2. Buat tabel untuk mengetes nantinya apakah benar-benar terkoneksi atau belum dengan mengetikkan query dibawah ini pada tab SQL lalu klik tombol Kirim/Go

 

3. Isikan data untuk sampel di awal pada tbl_mahasiswa_expert dengan mengetikkan query dibawah ini

 

Menampilkan Data dari Database MySQL dengan Ajax

Untuk mempercantik tampilan saya menggunakan bootstrap 4 dan datatables. Langsung saja saya berikan tutorialnya yaitu :

1. Pertama buatlah folder pada htdocs, pada contoh saya beri nama folder dewan-crud-ajax dan didalamnya juga buat folder foto dan dalam folder foto beri gambar dengan nama file noi-image.png yang gunanya untuk menampilkan gambar default jika pengguna tidak memasukkan gambar seperti contoh dibawah

2. Buatlah file koneksi.php pada folder project sobat dan isikan dengan script dibawah

isikan sesuai dengan host, user, password, dan nama database sobat. Untuk contoh di bawah ini saya berinama database dengan nama db_dewankomputer.

Jika sobat ingin tahu cara mengkoneksikan dengan dua database atau lebih dalam satu aplikasi maka sobat bisa kunjungi postingan dibawah ini

Cara Membuat Koneksi dengan Database MySQL bisa Dua atau Lebih Koneksi database/Multiple Connection dalam Satu Host maupun beda Host

 

3. Buat file auth.php untuk membuat otentifikasinya dan untuk keamananya. Isikan dengan kode dibawah

Catatan :

Nama file bisa terserah sobat, jika sobat sudah memiliki file yang mirip dengan ini maka sobat bisa tambahkan saja di file tersebut. Karena pada contoh kali ini tidak ada session loginnya maka tidak ada pengecekan otentifikasi login, namun jika pada aplikasi sesungguhnya maka alangkah baiknya untuk ditambahkan pengecekan sesi login.

 

4. Buatlah file index.php pada folder sobat dan isikan dengan script dibawah ini

Di paling atas atau pada baris pertama diatas tag <html> kita tambahkan baris berikut untuk membuat session csrf_token dan pengecekan login (jika ada)

Pada tag <head>

Karena kita menggunakan Ajax maka kita perlu csrf token untuk membatasi siapa saja yang bisa mengakses url. Ini berfungsi untuk keamanan dalam pertukaran datanya.

Kemudian tambahkan css untuk mempercantik tampilan pada contoh kali ini saya menggunakan bootstrap.

Bootstrap digunakan untuk mempercantik tampilan dan juga tombol. Fontawesome digunakan untuk menampilkan logo pada tombol dan datatable digunakan untuk mempercantik tampilan tabel dan membuat search, pagination, kolom warna warni dll.

Selanjutnya masukkan javascript sebenarnya ini bisa juga diletakkan pada tag <head> namun supaya lebih gampang saya sarankan letakkan pada tag <body> bagian bawah supaya lebih rapi dan lebih mudah dicari jadi pisah antara css dan javascript

Karena ini hanya demo maka saya menggunakan css dan js online. Jika untuk kepentingan development disarankan untuk mendownload terlebih dahulu librarinya atau nanti sobat bisa download project di akhir postingan. Untuk plugin CKEditor juga versi standar ya pada url tersebut. Untuk versi Expertnya bisa di download langsung ke websitenya atau bisa juga di download di bawah nanti.

 

5. Selanjutnya barulah kita membuat tampilan HTML-nya, kurang lebih seperti dibawah ini. Namun sebelum itu saya beri gambarannya dulu untuk tampilannya nanti akan jadi seperti pada gambar.

Untuk navbar sama footer kreasi sendiri ya saya fokus ke modal dan tabelnya. Pertama kita buat tablenya terlebih dahulu yaitu cukup seperti dibawah

Jika sobat bingung kok cuma tabel, mana thead, tbody atau tfootnya??? itu nanti akan kita buat lewat javascriptnya saja.

Selanjutnya kita membuat modalnya, kode ini bisa diletakkan atas script html tabel ataupun dibawahnya tidak masalah seenaknya sobat aja. Disini saya akan membuat 2 modal yaitu modal untuk menambah/mengedit data (kita gabung) dan modal untuk view data. Pertama kita akan membuat modal untuk menambah/mengedit data yang tampilannya adalah sebagai berikut

untuk tampilan WYSIHTML5 saya menggunakan CKEditor, untuk yang masih bingun dengan plugin ini bisa kunjungi juga di postingan saya sebelumnya

Memasang Text Editor CKEditor WYSIHTML5 pada PHP dengan Mudah

untuk penulisan modal ini adalah sebagai berikut

Selanjutnya kita membuat view untuk melihat/preview datanya, kurang lebih tampilannya seperti dibawah

penulisannya cukup seperti dibawah

Catatan :

supaya terlihat lebih menarik saya tambah animasi untuk memunculkan modal seperti dibawah

terlihat dengan kita menambahkan animate.css pada aplikasi kita selanjutnya kita cukup menambahkan class “rollIn animated” untuk animasi lainnya bisa dilihat di sini.

 

6. Pada step sebelumnya kita baru membahas tampilan/HTML saja ya di index.php, selanjutnya kita baru membuat javascriptnya masih di index.php, tentunya kode ini dimasukan dalam tag “<script>…</script>”. Untuk kode/fungsinya saya pisah-pisah ya guys.. biar ngga tinggal copas semua terus kelar akhirnya ngga tau apa yang nanti sobat copas ini

Selain di dalam tag “<script>…</script>”, kita menuliskan kode ini di dalam kode dibawah ya guys baik fungsi maupun action/eventnya

 

 

– Pertama kita membuat ajaxSetup jadi ini seperti masternya, kita cukup sekali saja menuliskannya otomatis akan berlaku setiap kita memanggil ajax, dan jangan lupa DIMASUKKAN DI DALAM TAG DIATAS

 

 

– Kita set CKEditor-nya dengan menuliskan kode dibawah

 

 

– Selanjutnya adalah menuliskan script untuk menampilkan data ke dalam tabel/datatables dan pencariannya tentunya

Penjelasan :

– Fungsi ini adalah fungsi untuk menampilkan data ke tabel sekaligus action dari tombol yang ada di dalam tabel seperti view, edit dan hapus. Jadi jika kita ingin merefresh tabel kita tidak perlu loading seluruh halaman tapi kita cukup memanggil fungsi

– Pada fungsi diatas terdapat url mahasiswa_action.php namun akan kita bahas nanti pada step 7

 

 

– Membuat fungsi custom javascript. Jika sobat lebih teliti tidak hanya copas pasti sobat sadar jika ada fungsi yang asing yaitu potongDeskripsi(), convertDateFromDB() dan decodeHTMLEntities(). Fungsi tersebut adalah fungsi custom yg mempunyai fungsi masing-masing seperti

  • potongDeskripsi() adalah fungsi untuk menampilkan preview biodata/nama supaya tidak terlalu panjang sehingga jika terlalu panjang maka akan menjadi ‘…’
  • convertDateFromDB() adalah fungsi untuk mengkonvert tanggal menjadi format indonesia
  • decodeHTMLEntities() adalah untuk mengkonvert biodata karena pada kolom biodata kita menggunakan CKEditor jadi yang tersimpan adalah kode HTML

– Selanjutnya adalah membuat action tampildata/pencariannya

Sangat gampang bukan dalam membuat loading/live search ini kita tinggal memanggil setDatatable(); pada setiap event sehingga tabel secara otomatis akan merefresh sendiri. Namun cara ini tentunya akan memberatkan database jika terdapat banyak data dan banyak user karena setiap 1 huruf pada kolom keyword ditulis, sistem akan mencari/memanggil query. Jika ini menurut sobat terlalu berat maka sobat bisa menggunakan 1 event saja yaitu even saat #btnCari/tombol cari diklik.

 

 

7. Nah akhirnya javascript sudah selesai, selanjutnya kita membuat file mahasiswa_action.php dan masukkan script dibawah ini

Penjelasan :

– Pada kode diatas terdapat fungsi anti() yang gunanya untuk memfilter semua inputan sehingga dapat menghindari SQL Injection. Dan pastinya bukan hanya anti() saja yang berungsi untuk menghindari SQL Injection, namun penulisan query juga dapat mempengaruhi karena kita menggunakan prepare statement dengan bind param. Hindari penggunakan query 1 baris seperti dibawah

penulisan query diatas sangat tidak dianjurkan karena gampang sekali terkena SQL Injection ya guys mungkin jika ada yang belum tahu. Dan berdasarkan pengalaman saya, penulisan Query tersebut tidak akan lolos security test. Begitu juga jika sobat menggunakan PDO, maka gunakanlah metode dengan prepare statement bukan yang 1 baris. Jangan karena lebih simpel dan lebih mudah penulisannya maka sobat gunakan, karena itu lebih mudah juga dibobol sistem yang sobat bikin nantinya dan akan membuat repot malah diakhirnya.

 

8. Eitss belum selese ya guys, kita buat lagi securitynya. Pada step ini kita buat security Ajaxnya yaitu membaca headernya seperti yang sudah dibahas di atas yang ajaxSetup itu lho…

Seperti yang terlihat di mahasiswa_action.php paling atas kita meng-includekan file csrf.php jadi selanjutnya kita buat file csrf.php dan masukkan script dibawah ini’

Pasti sobat bertanya-tanya untuk apa file ini???

Fungsinya adalah memvalidasi/mengecek apakah sesi csrf pada aplikasi dan sesi yang dikirimkan oleh Ajax sama..

Jika tidak sama maka akan muncul pesan ‘Wrong CSRF token.’ atau jika tidak ada csrfnya maka akan muncul pesan ‘No CSRF token.’

Karena jika tidak ada csrf maka siapapun dapat nge-hit url Ajax sobat misal

url ajax : https://dewankomputer.com/tambah_mahasiswa.php

param : nama_mahasiswa, jenis_kelamin, jurusan, dll

terus buka aplikasi postman dan kita isi url dan parameternya saat kita hit maka setiap hit di postman akan masuk ke aplikasi  atau yang lebih parah orang bisa bikin aplikasi curl yang melooping sampe 1.000.000 kali yang isinya ngehit url tersebut dengan isi parameternya sama semua maka di database kita akan tersimpan juga 1.000.000 kali. Bahaya bukan?

makanya hati-hati jika sobat lihat artikel-artikel di blog lain karena blog lain tidak memperdulikan itu jadi hanya dasarnya saja tanpa memperdulikan securitynya.

Gunakanya header pada Ajax dan csrf itu adalah untuk menghindari itu karena jika orang lain hit url dengan postman apalagi bikin aplikasi curl maka data tidak akan bisa masuk dan langsung gagal/diblok tanpa kita membuang resource untuk query ke database. Karena jika looping 1.000.000 kali apalagi 1.000.000.000.000 kali maka server database kita yang akan down apalagi jika aplikasi kita di shared hosting.

-Sedangkan jika sobat sudah mengirimkan dan masih ERROR yang sama mungkin kasusnya seperti yang pernah saya alami, pada ajaxSetup saya mengirimkan Csrf-Token namun yang terkirim malah csrf-token, sehingga sobat harus mengganti pada kode $headers[‘Csrf-Token’] menjadi $headers[‘csrf-token’].

 

Oke untuk hari ini cukup segitu aja. Harusnya jika sobat mengikuti step by step maka data contoh yang sudah dimasukkan sebelumnya bisa tampil. Jika mungkin ada fungsi yang terlewat saya masukkan pada postingan sobat bisa tinggalkan komentar dibawah.

Ternyata part 1 sangat panjang sekali sampai berjam-jam membuatnya dan karena ini tentang CRUD Expert saya harap yang mengunjungi postingan ini juga sudah expert jadi mungkin bisa 2 Part saja tidak seperti tutorial CRUD yang pertama bisa sampai 4 Part karena untuk pemula agar tidak bingung. Kita selesaikan di Part selanjutnya sampai bertemu di part selanjutnya.

Baca Juga :

Membuat CRUD Expert & Pencarian dengan JQuery, Ajax, Bootstrap Modal, SweetAlert dan WYSIHTML5 pada PHP – PART 2 ACTION SIMPAN, PREVIEW, EDIT, HAPUS

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..

 

26 thoughts on “Membuat CRUD Expert, Upload & Filter/Pencarian & Pencarian dengan JQuery, Ajax, Bootstrap Modal, SweetAlert dan WYSIHTML5 pada PHP – PART 1 MENAMPILKAN DATA

  1. Fatal error: Call to undefined function random_bytes() in C:\xampp\htdocs\crudexpert\auth.php on line 5

    Mengatasinya gimana ya Boss?
    Baru nyoba….
    Newbie.

    1. kayanya pake versi php lama ya jadi ngga ada fungsi random_bytes() tinggal bikin fungsinya aja
      kurang lebih kaya gini
      if( !function_exists(‘random_bytes’) )
      {
      function random_bytes($length = 6)
      {
      $characters = ‘0123456789’;
      $characters_length = strlen($characters);
      $output = ”;
      for ($i = 0; $i < $length; $i++) $output .= $characters[rand(0, $characters_length - 1)]; return $output; } }

  2. Alhamdulillah, saya sudah coba dan berhasil semua, sekarang aplikasi saya konversi menggunakan metode ajax php ini …
    tapi saya ada kendala barangkali om admin bisa bantu,
    di bagian DataTable itu antara Buttons, LengthMenu dan Filter bisa dibikin sejajar apa enggak yak, sebelumnya tanpa pake yg manual seperti ini LengthMenu dan Filter tampil sejajar..

    Tolong Bantuannya

    1. bisa di mainkan di bagian dom di script javascript dalam datatablesnya
      dom: “<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>” +
      “<'row'<'col-sm-12'tr>>” +
      “<'row'<'col-sm-5'i><'col-sm-7'p>>”,

    1. kemungkinan response nya salah,
      coba di ajax bagian dataSrc sebelum if tambah console.log(json) dan liatdi consolenya isinya apa,
      isi yg benar adalah list data dengan format json object

    1. di javascriptnya saat klik edit/detail bisa ditambahin kode untuk membuat readonly
      let role = $(“#role”).val();
      if(role == “admin”){
      $(“#fieldName”).prop(“readonly”, false);
      } else {
      $(“#fieldName”).prop(“readonly”, true);
      }

      atau bisa jg modalnya dipisah jadi ada modalEdit dan modalRead saat role admin yg ditampilkan modalEdit dan sebaliknya

  3. min,cara menggunakan Footer Callback untuk menghitung jumlah pada salah satu kolom di contoh ini gimana ya min?

    1. di dalam .DataTable() ditambah script seperti dibawah bisa dimana aja atau lebih enak dibawah array “aoColumns”:[], jgn lupa tambah koma

      footer
      sori gambar soalnya ada script htmlnya

      1. Thank’s min…work, Cuman ketika Convert to excel difooternya nge repeat Text “Total” sampe ke kolom “dataJumlah” terus hasil “dataJumlah” dari pencarian mengacu pada data jumlah total keseluruhan bukan ke data yang di cari jika melakukan pencarian untuk Convert to excelnya,

        1. dan skrng hasil footernya tidak muncul di convert excel,gmn caranya min biar muncul di convert excelnya sama print datatabelnya.

  4. bang saya coba ganti versi bootstrap ke versi 5.0 , tapi modal nya kok ga jalannya ya?gimana cara supaya jalan modalnya walau ganti versi bootstrapnya

  5. Ndan,,, saya ada query begini… mencoba isi row pass dengan nilai hasil password_hash row nim_id.. tapi query lama bgt dan yg terisi hanya baris terahir.. ( ada 11.684 baris datanya), mohon pencerahan… terima kasih
    =============================
    $q = $db->query(“SELECT nim_id, pass FROM mhs”);
    if($q->rowCount() == 0){
    echo “Error!”;
    $db->CloseConnection();
    }
    else if($q->rowCount() > 0){
    //$str=”INSERT INTO mhs (nim_id,pass) VALUES “;
    foreach($q as $mhs){
    $nim_id = $mhs[‘nim_id’];
    $hash = password_hash($nim_id, PASSWORD_DEFAULT);

    }

    $resultUser = $db->query(“UPDATE mhs SET pass = ‘$hash’ WHERE nim_id = ‘$nim_id'”);

    }

    1. jika data banyak dan tanpa filter gunakan LIMIT di querynya ,
      dan jika menggunakan datatables pakai yg server side ,
      atau jika tidak menggunakan datatables pakai pagination,
      itu untuk sisi aplikasinya

      dan untuk tabel databasenya jgn lupa tambahkan index di kolom yg sering dipakai terutama di where-nya
      ini untuk mempercepat dari sisi query databasenya

      dan untuk yg terisi hanya baris terahir itu karena query updatenya bukan di dalam looping

Leave a Reply

Your email address will not be published. Required fields are marked *

thirteen + 4 =