Meta Panel API - Dokumentasi Resmi

1 Pengenalan Meta Panel API

Skrip web.js berfungsi sebagai server lokal (REST API) di Windows Anda. Karena kebijakan keamanan Browser (CORS/Sandbox) tidak mengizinkan website untuk langsung mengeksekusi file .bat di komputer Anda, Node.js hadir sebagai eksekutornya.

Auto-Start & Taskkill (Force Stop)

Pada versi terbaru ini, file .bat XAMPP tidak lagi digunakan untuk mematikan server karena sering gagal meninggalkan zombie process di background. Skrip ini sekarang secara natif menggunakan perintah taskkill /F milik Windows agar service benar-benar di-kill secara akurat.

Penjelasan Arsitektur: Secara teknis, browser Anda berjalan di lingkungan sandbox yang ketat. Ketika Anda menekan tombol "Start Apache" di UI web, browser tidak bisa langsung menyentuh sistem operasi. Skrip web.js bertindak sebagai jembatan (bridge). Browser mengirim permintaan HTTP GET ke localhost:8080, lalu Node.js (yang memiliki akses langsung ke sistem Windows) mengeksekusi perintah .bat atau taskkill melalui modul child_process.

2 Persiapan & Kode Source

Kode Source `web.js`

Buat file web.js di PC Anda (sebaiknya di dalam folder XAMPP atau folder panel), lalu paste kode server ini ke dalamnya.

const { exec } = require('child_process');
const http = require('http');
const XAMPP_PATH = 'C:\\xampp';

// Fungsi eksekusi background (Auto-Start)
const runCommand = (command, msg) => {
    exec(`cmd /c "${command}"`, (err) => {
        if (err) console.error(`\x1b[31m[ERROR]\x1b[0m ${err.message}`);
        else console.log(`\x1b[32m[OK]\x1b[0m ${msg}`);
    });
};

const server = http.createServer((req, res) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Content-Type', 'application/json');

    const executeStart = (command, msg) => {
        exec(`cmd /c "${command}"`, (err) => {
            if (err) res.end(JSON.stringify({ success: false, message: err.message }));
            else res.end(JSON.stringify({ success: true, message: msg }));
        });
    };

    const executeStop = (command, msg) => {
        exec(command, () => {
            res.end(JSON.stringify({ success: true, message: msg }));
        });
    };

    if (req.url === '/api/start-apache') executeStart(`${XAMPP_PATH}\\apache_start.bat`, "Apache Started");
    else if (req.url === '/api/stop-apache') executeStop(`taskkill /F /IM httpd.exe /T`, "Apache Force Stopped");
    else if (req.url === '/api/start-mysql') executeStart(`${XAMPP_PATH}\\mysql_start.bat`, "MySQL Started");
    else if (req.url === '/api/stop-mysql') executeStop(`taskkill /F /IM mysqld.exe /T`, "MySQL Force Stopped");
    else res.end(JSON.stringify({ error: "Not Found" }));
});

const PORT = 8080;

server.listen(PORT, () => {
    console.log(`\x1b[36m%s\x1b[0m`, `=================================================`);
    console.log(`\x1b[36m%s\x1b[0m`, `Meta Panel API running on http://localhost:${PORT}`);
    console.log(`\x1b[36m%s\x1b[0m`, `To FORCE STOP XAMPP and quit, press Ctrl+C`);
    console.log(`\x1b[36m%s\x1b[0m`, `=================================================`);

    console.log(`\n\x1b[33m[INFO]\x1b[0m Memulai Apache & MariaDB secara otomatis...`);
    runCommand(`${XAMPP_PATH}\\apache_start.bat`, "Apache berhasil dihidupkan");
    runCommand(`${XAMPP_PATH}\\mysql_start.bat`, "MariaDB berhasil dihidupkan");
});

const shutdown = () => {
    console.log(`\n\n\x1b[33m[INFO]\x1b[0m Mematikan Apache & MariaDB (Force Kill)...`);
    exec(`taskkill /F /IM httpd.exe /T`, () => {
        console.log(`\x1b[31m[STOP]\x1b[0m Proses Apache (httpd.exe) dibunuh.`);
        exec(`taskkill /F /IM mysqld.exe /T`, () => {
            console.log(`\x1b[31m[STOP]\x1b[0m Proses MariaDB (mysqld.exe) dibunuh.`);
            process.exit(0);
        });
    });
};

process.on('SIGINT', shutdown);  
process.on('SIGTERM', shutdown);

Struktur Logika Kode: Kode di atas terdiri dari 3 bagian utama:
1. Inisialisasi & Variabel: Memuat modul child_process untuk menjalankan perintah terminal Windows dan http untuk membuat server.
2. Routing Endpoint: Skrip menganalisis URL yang diminta (req.url) dan mengarahkannya ke fungsi executeStart atau executeStop.
3. Lifecycle Events: Saat server pertama kali dijalankan (listen), ia langsung menjalankan Apache dan MySQL di background. Saat dihentikan (SIGINT/Ctrl+C), ia menjalankan fungsi shutdown() untuk memastikan tidak ada proses zombie tertinggal.

3 Tata Cara Menjalankan Server

1

Eksekusi Skrip

Arahkan terminal Anda ke folder tempat file disimpan, lalu jalankan node:

> node web.js

Mematikan Server (Force-Stop)

Klik di dalam jendela terminal, lalu tekan kombinasi keyboard Ctrl + C. Skrip akan mengirim perintah Taskkill untuk membunuh semua proses XAMPP secara instan sebelum keluar.

Mengapa Harus Ctrl+C? Jika Anda langsung menutup jendela terminal dengan mengklik tombol 'X', event SIGINT tidak akan tertangkap oleh Node.js. Akibatnya, fungsi shutdown() tidak terpicu, dan proses Apache/MariaDB akan tetap berjalan di background sebagai zombie process. Selalu gunakan Ctrl+C untuk memastikan pembersihan proses yang aman.

4 Referensi API (Endpoints)

Method	Endpoint	Aksi Eksekusi
GET	`/api/start-apache`	`apache_start.bat`
GET	`/api/stop-apache`	`taskkill /F /IM httpd.exe`
GET	`/api/start-mysql`	`mysql_start.bat`
GET	`/api/stop-mysql`	`taskkill /F /IM mysqld.exe`

Spesifikasi Respon JSON: Setiap endpoint mengembalikan format data yang konsisten. Jika berhasil, server merespons dengan: { "success": true, "message": "Apache Started" }. Jika gagal (misal file .bat tidak ditemukan karena path salah), server merespons: { "success": false, "message": "[pesan error sistem]" }. Header Access-Control-Allow-Origin: * ditambahkan untuk mengizinkan akses dari domain mana pun (termasuk file://).

5 Contoh Implementasi Fetch

function stopApache() {
  fetch('http://localhost:8080/api/stop-apache')
    .then(res => res.json())
    .then(data => {
      console.log(data.message); // Mengembalikan: Apache Force Stopped
    });
}

Cara Integrasikan: Salin fungsi di atas ke dalam file JavaScript milik UI Panel Anda (misalnya script.js atau langsung di dalam tag <script> pada HTML). Pasangkan fungsi tersebut ke event onclick pada tombol Start/Stop di UI Anda. Karena menggunakan fetch, eksekusi bersifat asinkron sehingga tidak akan membekukan (freeze) antarmuka web saat menunggu server XAMPP merespons.

6 Troubleshooting

XAMPP Tidak Berjalan Saat Script Dinyalakan?

Penyebab: Direktori instalasi XAMPP Anda bukan berada di disk C.
Solusi: Pada skrip web.js, ubah const XAMPP_PATH = 'C:\\xampp'; menjadi lokasi instalasi Anda.

Error "Port 8080 sudah digunakan"?

Penyebab: Aplikasi lain sudah menggunakan port 8080.
Solusi: Ubah nilai const PORT = 8080; menjadi port lain yang kosong (misalnya 3000 atau 9000). Jangan lupa ubah juga URL pada fungsi fetch di UI Anda.

Tips Debugging: Jika Anda mendapat error "ERR_CONNECTION_REFUSED" di browser, itu berarti skrip web.js tidak sedang berjalan. Buka terminal dan pastikan tidak ada pesan error merah saat menjalankan node web.js. Jika muncul error modul tidak ditemukan, pastikan Anda sudah menginstal Node.js dengan benar dari website resminya.

7. Live Demo & Deteksi Status

Tekan tombol di bawah untuk mengontrol XAMPP Anda. Kartu akan mendeteksi respons API dan berubah status secara visual saat berhasil dijalankan atau dimatikan.

Apache

Web Server

Idle

MariaDB

Database Engine

Idle

Database Manager

Akses panel phpMyAdmin (Syarat: Apache & MariaDB wajib Running).

Buka phpMyAdmin

Console Output

> System Ready. Menunggu instruksi...

Cara Kerja Live Demo: Tombol Start/Stop di atas akan mengirimkan permintaan HTTP secara langsung dari browser Anda ke http://localhost:8080. Jika koneksi berhasil, server akan mengeksekusi perintah dan kartu akan berubah warna menjadi hijau (Running) atau kembali abu-abu/merah (Stopped). Jika Anda melihat pesan "ERROR TIMEOUT" di console, berarti skrip Node.js belum dinyalakan di terminal Anda.