xampp, slq, and vue - playmakermz/warkop-website GitHub Wiki

xampp, slq, and vue

  1. Install Node Js
sudo apt install nodejs npm
sudo npm install n -g
sudo n stable # untuk install versi stable
  1. Install Xampp : https://github.com/playmakermz/warkop-website/wiki/xampp-install,-acces-mysql
  2. Masuk Mysql : https://github.com/playmakermz/warkop-website/wiki/xampp-install,-acces-mysql#to-acces-mysql
  3. masuk dengan cara sudo mysql -u root -p
  4. Buat database dan tabel : https://github.com/playmakermz/warkop-website/blob/main/document/sql.md
  5. buat user baru dan beri ijin akses ke database sebelumnya.
CREATE USER 'appuser'@'localhost' IDENTIFIED BY '';
GRANT SELECT ON nama_database.* TO 'appuser'@'localhost';
FLUSH PRIVILEGES;
  1. buat file php sebagai API yang akan menghubungkan database dan vue: https://www.w3schools.com/php/php_mysql_select.asp
  2. simpan file tersebut didalam /opt/lampp/htdocs/ - harus dengan format php
  3. buat aplikasi vue
  4. install axios, untuk menghubungkkan dengan PHP. https://axios-http.com/docs/intro | https://github.com/playmakermz/warkop-website/blob/main/document/project-react/Api-Axios.md
  5. atur compponent agar bisa sesuai dengan file PHP
  6. pastikan xampp jalan dengan sudo /opt/lampp/lampp start
  7. npm run serve

Api php

Ini adalah code api.php yang tersimpan pada /opt/lampp/htdocs/

<?php
header("Access-Control-Allow-Origin: *"); // Izinkan semua aksess domain alamat

error_reporting(E_ALL); // Tampilkan semua error jika ada 
ini_set('display_errors', 1); // Aktifkan display error

$servername = "127.0.0.1"; // Untuk linux disarankan ini daripada 'localhost'
$username = "appuser"; // jangan pakai 'root' 
$password = "";
$dbname = "school";

// Buat basis koneksi mysql
$conn = new mysqli($servername, $username, $password, $dbname);
// check koneksi
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT * FROM student"; // ambil tabel yang dibutuhkan
$result = $conn->query($sql); // masukkan query ke sql

if ($result->num_rows > 0) { // Jika terdapat lebih dari dari 0 baris
    while($row = $result->fetch_assoc()) {
        $data[] = $row; // simpan data
    }
}


$conn->close(); // tutup koneksi database

// Output dikonversi menjadi data JSON, agar bisa dabaca js
echo json_encode($data);

?>

App vue

Ini adalah code pada App vue pada folder src

<template>
<div>
    <h2>Pengambilan data dari Database</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Major</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in this.items" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.major }}</td>
        </tr>
      </tbody>
    </table>
    
  </div>
</template>

<script>
import axios from 'axios';


export default {
  data() { // Persiapkan wadah
    return {
      items: []
    };
  },
  mounted() {
    this.fetchData(); // Proses pengambilan data
  },
  methods: {
    async fetchData() { // Oleh data yang diterima dengan conditional if
      try {
        const response = await axios.get('http://localhost/api.php');
        this.items = response.data;
        // alert(this.items)
      } catch (error) {
        console.error('Error fetching data:', error);
        alert('Error DATABASE');
      }
    }
  }
};
</script>

<style>
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
}
th {
  background-color: #f2f2f2;
}
</style>
⚠️ **GitHub.com Fallback** ⚠️