Cara Menampilkan Data Dari Database ke Tabel Dengan Javascript

Assalamualaikum Wr. Wb.

Pada kesempata kali ini saya akan membagi ilmu yang saya dapat, yaitu tentang bagaimana cara menampilkan data dari database (mysql) ke dalam sebuah tabel dengan framework JavaScript.

Dengan Framework ini kita di mudahkan karena tidak perlu menulis banyak script tetatpi hasilnya lebih bagus dari pada kita menulis script secara manual.

Persiapan yang kita perlukan
      1. Link Bootstrap online atau bisa link bootstrap online untuk mendapatkan link
      2. Link Jquery online atau bisa klik di sini untuk mendapatkan linknya

Sekian dulu dari intro pada kali ini, langsung kita praktekkan !!.

1. Buat file yang ber ektensi php pada percobaan kali ini saya membuat file bernama (jqload.php).
    seperti biasa kita deklarasikan dulu PHP atau kita buat Tag PHP. Contoh script seperti berikut ini.

    a. Kita tuliskan php Cors. PHP CORS secara singkat adalah  anda bisa transfer data antara domain. Metode ini mirip seperti API (Application Progamming Interface). kalau bingung cek klik disini untuk lebih jelasnya.

        

   b. Lalu kita buat include an dari database anda masing-masing, contoh nya seperti di atas. Saya menggunakan Database MYSQL.

      

   c. Buat perintah SQL untuk mengambil isi dari Database tersebut, jika anda bingung dari mana perintah tersebut anda bisa cek ke PHP Myadmin lalu pilih nama database anda dan cari di atas yang bernama (SQL). Lalu pilih yang (SELECT) karena kita ingin mengambil data dan di tampilkan pada tabel yang akan kita buat nanti.

    

   d. Looping, pada contoh di atas kita menggunakan While untuk looping. dan samakan dengan kolom yang terdapat pada PHP Myadmin.

   

   e. Jika sudah kita tampilkan dengan cara menulis script (echo json_encode($data) )
   f. lalu buka pada Browser, ketik Localhost/javaphp/jqload.php. Cara membacanya adalah, Localhost kemudian nama project dan di ikuti nama file yang kita buat tadi. Jika berhasil maka akan keluar sebuah format JSON. Contoh seperti di bawah ini 

2. Jika Sudah kita lanjut ke proses ke dua yaitu  membuat file yang ber ekstensi HTML untuk membuat tabel tempat data tersebut tampil. Pada percobaan kali ini saya memberi nama (jqload.html).

    a. Masukkan link kedalam kodingan 

     b. Buat tabel yang kita inginkan

      c. Jika sudah kita buat Tag Javascript untuk tempat ngoding kita Javascript. lalu isikan beberapa komponen yang ada pada Javascript untuk membuat sebuah fungsi yang kita inginkan

di dalamnya ada property jqDoc dan Jqjson, Jqeach
- JqDoc berfungsi asal data yang akan kita tampilkan pada tabel
- JqJson berfungsi untuk mengambil atau mendapatkan Sumber data yang berformat JSON
-JqEach adalah fungsi LOOPING yang ada pada Javascript

d. Jika sudah tinggal anda buka hasil nya pada Web Peramban favorit anda. dan tentunya Web Peramban favorit saya adalah besutan dari Google.Inc yaitu Google Chrome. Karena Google Chrome menurut saya memang sangat Compatible untuk para Developer yang masih Newbie maupun Profesional.
     Hasilnya adalah seperti berikut ini :

Demikian pembahasan yang bisa saya sampaikan, kurang lebihnya saya mohon maaf yang se besar-besarnya. Sebagu-bagusnya Karya Pasti Ada Yang Tidak Suka, Se Jelek-jeleknya Karya Pasti Ada Yang Suka. Saya Adhimas PNS See you Next Time !!

     

Assalamualaikum Wr. Wb.