Saat mulai belajar PHP atau web development menggunakan XAMPP, Anda akan sering mendengar istilah htdocs. Folder ini merupakan salah satu bagian terpenting dalam XAMPP karena menjadi tempat menyimpan seluruh proyek website yang akan dijalankan melalui server lokal (localhost).

Sayangnya, masih banyak pemula yang belum memahami fungsi folder htdocs. Akibatnya, file website sering disimpan di lokasi yang salah sehingga tidak dapat diakses melalui browser. Padahal, memahami struktur folder htdocs merupakan langkah dasar yang akan mempermudah proses pengembangan website.

Pada artikel ini, Anda akan mempelajari struktur folder htdocs pada XAMPP yang wajib dipahami, mulai dari pengertian, fungsi, isi folder, cara menyimpan proyek, hingga tips mengelolanya agar tetap rapi.

Apa Itu Folder htdocs?

Folder htdocs adalah direktori utama (document root) pada XAMPP yang digunakan untuk menyimpan file website. Semua file yang berada di dalam folder ini dapat diakses melalui browser menggunakan alamat localhost.

Secara sederhana, folder htdocs dapat diibaratkan sebagai “lemari penyimpanan” tempat seluruh file website Anda disimpan agar dapat diproses oleh Apache.

Contohnya, jika Anda membuat file:

index.php

dan menyimpannya di dalam folder htdocs, maka file tersebut dapat dijalankan melalui browser.

Lokasi Folder htdocs

Secara default, lokasi folder htdocs berbeda tergantung sistem operasi yang digunakan.

Windows

C:\xampp\htdocs

Linux

/opt/lampp/htdocs

macOS

/Applications/XAMPP/xamppfiles/htdocs

Sebagian besar pengguna Windows akan menggunakan lokasi pertama.

Mengapa Folder htdocs Sangat Penting?

Apache hanya akan membaca file website yang berada di dalam folder htdocs.

Jika Anda menyimpan proyek di luar folder tersebut, misalnya di:

D:\WebsiteSaya

browser tidak akan dapat mengaksesnya melalui localhost.

Karena itu, semua proyek PHP sebaiknya ditempatkan di dalam folder htdocs.

Struktur Folder htdocs

Berikut contoh struktur folder yang baik.

htdocs
│
├── belajar-html
│   ├── index.html
│   ├── style.css
│   └── gambar
│
├── belajar-php
│   ├── index.php
│   ├── login.php
│   └── config.php
│
├── toko-online
│   ├── index.php
│   ├── assets
│   ├── css
│   ├── js
│   └── images
│
└── portfolio
    ├── index.html
    └── assets

Struktur seperti ini membuat setiap proyek tersusun rapi dan mudah dikelola.

Fungsi Folder htdocs

Folder htdocs memiliki beberapa fungsi penting.

Menyimpan Proyek Website

Semua file HTML, CSS, JavaScript, maupun PHP disimpan di sini.

Menjadi Document Root Apache

Apache secara otomatis mencari file website dari dalam folder htdocs.

Menjalankan Website Lokal

Semua website lokal dijalankan melalui folder ini.

Contohnya:

http://localhost/belajar-php

Mempermudah Pengelolaan Proyek

Dengan membuat satu folder untuk setiap proyek, Anda akan lebih mudah mengelola banyak website sekaligus.

Contoh Membuat Proyek Baru

Misalnya Anda ingin membuat proyek bernama:

belajar-php

Buat folder berikut.

htdocs
└── belajar-php

Kemudian buat file:

index.php

Isi dengan kode berikut.

<?php

echo "<h1>Halo, Selamat Datang di Ngoding Daily</h1>";

?>

Simpan file tersebut.

Selanjutnya buka browser.

http://localhost/belajar-php

Jika halaman berhasil tampil, berarti proyek telah tersimpan dengan benar.

Struktur Folder Proyek yang Direkomendasikan

Seiring bertambahnya ukuran proyek, sebaiknya gunakan struktur folder yang lebih terorganisir.

Contoh:

belajar-php
│
├── css
├── js
├── images
├── uploads
├── includes
├── config
├── database
├── assets
├── index.php
└── login.php

Masing-masing folder memiliki fungsi berbeda sehingga proyek menjadi lebih mudah dipelihara.

Penjelasan Setiap Folder

css

Berisi seluruh file CSS.

Contoh:

style.css
responsive.css

js

Berisi file JavaScript.

Contoh:

script.js
main.js

images

Digunakan untuk menyimpan gambar.

Misalnya:

• Logo
• Banner
• Ikon
• Foto produk

uploads

Berisi file yang diunggah oleh pengguna.

Contohnya:

• Foto profil
• Dokumen
• Gambar artikel

includes

Digunakan untuk file yang sering dipanggil berulang.

Misalnya:

• Header
• Footer
• Sidebar

config

Berisi konfigurasi aplikasi.

Contohnya:

• Koneksi database
• Konfigurasi website

database

Digunakan untuk menyimpan file SQL.

Misalnya:

database.sql

assets

Folder umum untuk menyimpan berbagai aset seperti:

• CSS
• JavaScript
• Font
• Ikon

Cara Mengakses Folder htdocs

Misalnya struktur proyek Anda seperti berikut.

htdocs
└── toko-online

Maka alamatnya:

http://localhost/toko-online

Jika menggunakan file:

produk.php

Alamatnya menjadi:

http://localhost/toko-online/produk.php

Kesalahan yang Sering Dilakukan Pemula

Beberapa kesalahan yang sering terjadi adalah:

Menyimpan File di Luar htdocs

Akibatnya browser tidak dapat menemukan proyek.

Menggunakan Nama Folder dengan Spasi

Kurang baik:

Belajar PHP

Lebih baik:

belajar-php

Menyimpan Banyak File Tanpa Folder

Semua proyek bercampur menjadi satu sehingga sulit dikelola.

Tidak Menggunakan index.php

Akibatnya browser tidak langsung membuka halaman utama.

Menghapus Folder Default XAMPP

Beberapa folder bawaan XAMPP sebaiknya tidak dihapus karena digunakan oleh sistem.

Tips Mengelola Folder htdocs

Agar proyek tetap rapi, lakukan beberapa tips berikut.

Buat Satu Folder untuk Satu Proyek

Jangan mencampur file dari beberapa website dalam satu folder.

Gunakan Nama Folder yang Jelas

Contoh:

• belajar-html
• belajar-css
• latihan-php
• toko-online

Pisahkan File Berdasarkan Jenisnya

Gunakan folder khusus untuk CSS, JavaScript, gambar, dan aset lainnya.

Hapus Proyek yang Tidak Digunakan

Membersihkan folder htdocs secara berkala akan memudahkan pencarian proyek yang masih aktif.

Backup Secara Berkala

Simpan salinan proyek di lokasi lain untuk menghindari kehilangan data.

Mengapa Struktur Folder yang Rapi Itu Penting?

Struktur folder yang baik memberikan banyak keuntungan, seperti:

• Mempermudah pencarian file.
• Mengurangi risiko kesalahan.
• Mempercepat proses pengembangan.
• Memudahkan kerja tim.
• Membuat proyek lebih profesional.

Kebiasaan mengelola folder sejak awal akan sangat membantu ketika Anda mengerjakan proyek yang lebih besar.

Langkah Selanjutnya Setelah Memahami Folder htdocs

Setelah memahami struktur folder htdocs, Anda dapat melanjutkan belajar:

• Menjalankan PHP menggunakan XAMPP.
• Membuat koneksi database MySQL.
• Memahami CRUD.
• Menggunakan phpMyAdmin.
• Membangun aplikasi web sederhana.
• Belajar framework seperti Laravel.

Pemahaman tentang htdocs akan menjadi dasar yang kuat sebelum mempelajari materi backend yang lebih kompleks.

Kesimpulan

Struktur folder htdocs pada XAMPP merupakan salah satu konsep dasar yang wajib dipahami oleh setiap pemula yang ingin belajar web development. Folder ini berfungsi sebagai lokasi utama penyimpanan proyek agar dapat dijalankan melalui Apache menggunakan alamat localhost.

Dengan menyusun proyek ke dalam folder yang terorganisir, memisahkan file berdasarkan jenisnya, serta menggunakan penamaan yang konsisten, proses pengembangan website akan menjadi lebih mudah, cepat, dan profesional. Kebiasaan ini juga akan sangat membantu saat Anda mulai mengembangkan aplikasi yang lebih besar di masa depan.