Koneksi Database dengan JavaScript

Secara langsung, JavaScript tidak dapat terhubung ke database seperti MySQL atau PHPMyAdmin. Ini karena JavaScript berjalan di sisi klien (browser), sementara koneksi ke database biasanya memerlukan akses ke server, yang berada di sisi server.


Namun, Anda bisa menggunakan teknologi seperti AJAX (Asynchronous JavaScript and XML) untuk berkomunikasi dengan server dan mengambil data dari database. Dalam konteks web, ini biasanya dilakukan dengan membuat permintaan HTTP ke server yang kemudian diolah oleh server untuk mengambil atau memperbarui data di database.


Jadi, secara singkat, JavaScript bisa digunakan untuk membuat permintaan ke server yang dapat menangani operasi database, seperti memperoleh data dari PHP yang berinteraksi dengan MySQL, misalnya.

Tentu, berikut adalah contoh sederhana menggunakan JavaScript, AJAX, PHP, dan MySQL untuk mengambil data dari database:


1. Buatlah file HTML untuk tampilan:


```html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Contoh Koneksi Database</title>

</head>

<body>

    <h1>Data dari Database</h1>

    <div id="data-container"></div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script src="script.js"></script>

</body>

</html>

```


2. Buatlah file JavaScript (`script.js`) untuk mengambil data menggunakan AJAX:


```javascript

$(document).ready(function(){

    $.ajax({

        url: 'getData.php',

        method: 'GET',

        success: function(response){

            var data = JSON.parse(response);

            var html = '';

            for(var i=0; i<data.length; i++){

                html += '<p>' + data[i].nama + ' - ' + data[i].usia + '</p>';

            }

            $('#data-container').html(html);

        }

    });

});

```


3. Buatlah file PHP (`getData.php`) untuk mengambil data dari database MySQL:


```php

<?php

$servername = "localhost";

$username = "username";

$password = "password";

$dbname = "nama_database";


// Buat koneksi

$conn = new mysqli($servername, $username, $password, $dbname);


// Periksa koneksi

if ($conn->connect_error) {

    die("Koneksi gagal: " . $conn->connect_error);

}


// Query untuk mengambil data

$sql = "SELECT nama, usia FROM tabel_data";

$result = $conn->query($sql);


$data = array();


if ($result->num_rows > 0) {

    // Output data dari setiap baris

    while($row = $result->fetch_assoc()) {

        $data[] = $row;

    }

} else {

    echo "Tidak ada data ditemukan";

}


$conn->close();


// Mengembalikan data dalam format JSON

echo json_encode($data);

?>

```


Pastikan Anda mengganti `"localhost"`, `"username"`, `"password"`, `"nama_database"`, serta menyesuaikan query SQL dengan struktur tabel dan kolom yang ada di database Anda.


Dengan menggunakan AJAX, JavaScript mengirim permintaan ke `getData.php`, PHP kemudian memproses permintaan tersebut dengan mengambil data dari database MySQL, kemudian mengembalikan data dalam format JSON ke JavaScript. JavaScript kemudian menampilkan data tersebut di HTML.

No comments:

Post a Comment