instalasi xampp sublime text

💻🚀

Siapkan Dapur Coding: Instalasi XAMPP, Apache, PHP, phpMyAdmin, dan Setup Sublime Text di Windows

Artikel 2 dari 16 — Seri Pemrograman Web D4 MIK

XAMPP Apache phpMyAdmin Sublime Text

⏱️ ±8 menit baca  |  🎯 Level Pemula  |  📅 2026

Bayangkan kamu diminta membuat sistem pendaftaran pasien untuk poli klinik, tapi komputermu belum punya "dapur" untuk memasaknya. Tenang, instalasi XAMPP adalah jawabannya: satu paket yang membuat laptop Windows-mu menjadi server mini lengkap dengan Apache, PHP, dan database. Artikel ini adalah bagian dari seri Pemrograman Web D4 MIK, ditulis untuk kamu yang baru pertama kali koding. Di akhir, kamu punya lingkungan kerja siap pakai dan halaman web pertamamu bertema data pasien fiktif. Siap masak? 🍳

Kenapa Instalasi XAMPP Jadi Langkah Pertama?

Di Artikel 1 kamu sudah tahu bahwa web bekerja dengan model client-server. Nah, supaya bisa belajar tanpa menyewa server, kita membuat server di laptop sendiri. Analogi gampangnya: XAMPP itu seperti dapur klinik mini. Apache pelayan yang mengantar pesanan, PHP kokinya, dan database penyimpan resep (data pasien).

📐 Rumus Konsep

XAMPP = X (lintas OS) + Apache + MariaDB/MySQL + PHP + Perl

Browser (client) → localhost → Apache (server) → PHP memproses → Database menyimpan data.

Komponen	Peran	Analogi Klinik
Apache	Web server, melayani permintaan browser	Petugas loket pendaftaran
PHP	Bahasa pemrograman sisi server	Perawat yang mengolah berkas
MySQL/MariaDB	Basis data	Lemari rekam medis
phpMyAdmin	Antarmuka web untuk mengelola database	Kunci dan katalog lemari

💡 Tips: Di lab, tanyakan dulu apakah XAMPP sudah terpasang. Kalau sudah, kamu bisa langsung lompat ke langkah pengujian.

🔥 Fakta Menarik: Versi XAMPP terbaru memakai MariaDB sebagai pengganti MySQL. Perintah SQL-nya hampir identik, jadi kamu tetap belajar "MySQL" seperti biasa.

Langkah Instalasi XAMPP di Windows

Ikuti urutan ini persis. Setiap langkah punya hasil yang bisa kamu cek.

1

Unduh installer dari situs resmi apachefriends.org. Pilih versi Windows. Hasil: file berakhiran .exe tersimpan di komputer.

2

Jalankan installer (klik kanan → Run as administrator). Jika muncul peringatan antivirus atau UAC, lanjutkan saja.

3

Pilih komponen: centang Apache, MySQL, PHP, dan phpMyAdmin. Komponen lain boleh dilepas supaya ringan.

4

Tentukan folder: biarkan default C:\xampp. Hindari Program Files agar tidak bentrok izin akses.

5

Selesaikan instalasi, lalu buka XAMPP Control Panel. Klik Start pada Apache dan MySQL. Hasil: kedua modul berlatar hijau dengan nomor port.

⚡ Insight Penting: Semua file web harus berada di C:\xampp\htdocs. Folder ini adalah "meja loket" Apache: di luar folder ini, browser tidak bisa menemukan filemu.

Uji Hasil Instalasi XAMPP: Apache, PHP, dan phpMyAdmin

Cek Apache. Buka browser, ketik http://localhost/. Jika muncul dashboard XAMPP, Apache hidup.

Cek PHP. Buat folder C:\xampp\htdocs\klinik, lalu simpan file berikut sebagai index.php:

index.php 📋 Salin

<?php
$pasien = "Budi Santoso (fiktif)";
$poli   = "Poli Umum";
echo "<h2>Selamat datang di Klinik Sehat</h2>";
echo "Pasien: $pasien | Tujuan: $poli";
?>

Buka http://localhost/klinik/. Hasil yang diharapkan: tulisan sambutan dan nama pasien fiktif muncul di browser.

Cek phpMyAdmin. Buka http://localhost/phpmyadmin, klik tab SQL, lalu jalankan:

query.sql 📋 Salin

CREATE DATABASE klinik_db;
USE klinik_db;
CREATE TABLE pasien (
  id INT AUTO_INCREMENT PRIMARY KEY,
  no_rm VARCHAR(10),
  nama VARCHAR(50),
  poli VARCHAR(30)
);
INSERT INTO pasien (no_rm, nama, poli)
VALUES ('RM001', 'Budi Santoso', 'Poli Umum'),
       ('RM002', 'Siti Aminah', 'Poli Gigi');

Hasil: database klinik_db muncul di panel kiri, dan tabel pasien berisi 2 baris data fiktif.

⚠️ Perhatian: Gunakan hanya data fiktif. Data pasien asli adalah data sensitif yang dilindungi, jangan pernah dipakai untuk latihan.

Setup Sublime Text Setelah Instalasi XAMPP

Kamu bisa menulis kode di Notepad, tapi itu seperti menulis resep di tisu. Sublime Text memberi warna sintaks dan penomoran baris.

1

Unduh dari sublimetext.com, lalu pasang seperti aplikasi biasa.

2

Buka menu File → Open Folder, pilih C:\xampp\htdocs\klinik. Seluruh proyek tampil di sidebar.

3

Ubah index.php, tekan Ctrl+S, lalu muat ulang browser dengan F5. Perubahan langsung terlihat.

🔍 Analisis: Notepad vs Sublime Text

📝 Notepad: tanpa warna sintaks, sulit menemukan salah ketik.
✨ Sublime Text: kode berwarna, ada multi-tab, dan pencarian cepat (Ctrl+F).
👉 Kesimpulan: untuk ratusan baris PHP, editor khusus menghemat waktu debugging.

Error yang Sering Muncul & Cara Mengatasinya

Gejala	Penyebab	Solusi
Apache gagal start (port 80 used)	Port bentrok dengan Skype/IIS/aplikasi lain	Klik Config → httpd.conf, ubah Listen 80 jadi 8080; akses localhost:8080
MySQL langsung mati	Port 3306 dipakai MySQL lain	Hentikan layanan MySQL lain di Services Windows
Kode PHP tampil mentah	File dibuka via path (file://) atau berakhiran .html	Simpan sebagai .php di htdocs, akses lewat http://localhost/
404 Not Found	Nama folder atau file salah ketik	Cocokkan nama folder dan file di htdocs

✍️ Latihan Mandiri

1. Buat file profil.php di folder klinik yang menampilkan nama, no. RM, dan poli satu pasien fiktif.
2. Tambahkan 3 data kunjungan fiktif ke tabel baru kunjungan lewat phpMyAdmin.
3. Tulis daftar 3 kebutuhan aplikasi pendaftaran pasien sederhana (misalnya input pasien, daftar poli, riwayat kunjungan), lalu tentukan tabel database yang diperlukan.

🏆

Dapur Codingmu Sudah Siap

Kamu sudah menyelesaikan instalasi XAMPP, menyalakan Apache dan MySQL, menguji PHP lewat localhost, membuat tabel pasien di phpMyAdmin, dan menyiapkan Sublime Text. Fondasi ini dipakai di seluruh 14 artikel berikutnya. Sudah berhasil? Tulis di kolom komentar error apa yang kamu temui, dan bagikan artikel ini ke temanmu yang masih bingung. 🙌

💬 Komentar & Bagikan

Referensi: Apache Friends, XAMPP (apachefriends.org); PHP Manual (php.net/manual); Sublime Text Documentation (sublimetext.com/docs).

#PemrogramanWeb #D4MIK #XAMPP #Apache #SublimeText

Instalasi XAMPP Setup Sublime Text phpMyAdmin Windows

📚

Pemrograman Web D4 MIK

Lihat seluruh 16 artikel dalam seri ini.

Buka Daftar Isi →

← ARTIKEL SEBELUMNYA

Artikel 1: Kenalan dengan Web di Dunia MIK: Identifikasi Kebutuhan Aplikasi dan Cara Kerja Client-Server

ARTIKEL SELANJUTNYA →

Artikel 3: Bangun Kerangka Halaman Pasien: Struktur HTML (Heading, Tabel, List, Link) untuk Informasi Kesehatan