Tutorial Menampilkan Datatables Responsif Dengan PHP Object dan MySQL

Initekno.com – Tampilan yang responsif memang sangat wajib di era 2019, mengingat sekarang para penggunjung website mengakses dengan perangkat smartphone mereka. Tak heran si, sebab sekarang ukuran smartphone rata rata yaitu 6 inci keatas. Jadi sudah enak banget untuk mengakses halaman website yang responsif. Cuman ada beberapa kendala yang harus di hadapi oleh programmer website, yaitu yang di maksud dengan responsif adalah semua ukuran device, berarti device yang berukuran 5 inci kebawah harusnya bisa di gunakan untuk membuka halaman website responsif tersebut.

Nah kali ini yang biasanya kurang ramah terhadap responsif adalah data yang mengandung tabel. Karena biasanya tabel cendrung menampilkan data memanjang secara horizontal. Kali ini kita akan membuat tabel yang super responsif, artinya bisa di jalankan di semua device ukuran berapapun, apa lagi kalau bukan datatables. ya.. datatables sekarang memiliki fitur keren yaitu responsive design.

Untuk memulai pembahasan ini telebih dahulu buatlah tabel induk seperti ini. beri nama dengan trx_induk dan komponennya seperti berikut ini :

dari tabel trx_induk ini terdapat atribut bernama trx_id_kelas, ini akan digunakan untuk melakukan hubungan atau relasi dengan tabel trx_kelas.

dan sekarang berikut adalah tabel trx_kelas, silahkan buat seperti pada gambar berikut ini dan jangan lupa berikan auto_increment di semua tabel yang mengandung primary key. agar id dari data yang kita masukkan akan secara otomatis.

Setelah semua tabel dibuat dengan benar, selanjutnya kita akan mulai melakukan koding pada program. disini menggunakan php object. Pertama tulis kode untuk menghubungkan database mysql dengan kode kita.

dbconfig.php jangan lupa untuk menyimpannya pada folder config pada folder didalam website kamu.

Baca juga membuat multiple login dengan php object dan mysql sebagai databasenya, karena materi ini sangat penting untuk melindungi data kamu dari user gelap, artinya user yang tidak terdaftar pada sistem database kamu.

Tutorial Login Multiple Dengan PHP Object Dan MySql

index.php simpan file index.php pada folder induk, karena kita akan menampilkan data induk siswa. hal ini di lakukan agar file yang kita buat tertata dengan rapih sesuai modulnya masing-masing.

Perhatikan pada query berikut ini :

query diatas adalah stuktur query join antara tabel trx_induk dan trx_kelas. yang menggunakan klausa WHERE dengan acuan $_SESSION[unit] , dengan artian anda harus membuat fitur login terlebih dahulu untuk menciptakan session tersebut. sehingga data induk siswa akan tampil sesuai dengan user yang login. dan itu sudah ditentukan pada tabel trx_induk pada atribut code_devisi.

Kemudian menggunakan fitur ORDER BY, artinya data akan diurutkan berdasarkan ASC, yaitu dari kecil ke besar. sedangkan DESC adalah dari besar ke kecil, kebalikan dari ASC.

Selanjutnya buat file header dan footernya

header.php

footer.php

Silahkan untuk menjalankan kode diatas. Maka lihat hasilnya dengan browser menggunakan mode smartphone, dan hasilnya kurang lebih akan seperti ini:

Itu semua berjalan berkat kode dari javascript berikut ini :

Karena intin dari kode diatas adalah akan menciptakan datatables yang responsif disegala ukuran device. Semoga artikel ini menjadi tujuan awal kamu untuk membuat website yang fokus pada market akses smartphone. Dan jika di buka didalam mode normal, maka tampilan diatas sangatlah baik dan bisa di andalkan. silahkan tinggalkan komentar jika terdapat error pada kode kamu.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *