Perbedaan Relative Path vs Absolute Path

Path adalah alamat atau lokasi sebuah file atau direktori dalam sistem file komputer maupun resource di internet. Dalam pengembangan web, path menunjukkan cara browser menemukan berkas seperti HTML, CSS, JavaScript, gambar, atau dokumen lain yang dibutuhkan untuk merender halaman.

Penggunaan path yang tepat menjamin semua asset di-load dengan benar. Kesalahan menentukan path akan menyebabkan broken link, tampilan halaman tidak lengkap, atau fungsionalitas skrip terganggu. Dengan memahami tipe-tipe path, pengembang dapat mengoptimalkan struktur projek dan memudahkan perawatan kode.

Perbedaan Relative Path dan Absolute Path

Definisi Absolute Path

Absolute path menunjukkan alamat lengkap menuju resource, mulai dari root sistem file (file system path) atau domain utama (URL).

Contoh sistem file: C:\Project\index.html

Contoh URL: https://example.com/assets/css/style.css

Definisi Relative Path

Relative path menunjuk alamat resource relatif terhadap lokasi file saat ini. Misalnya, jika file HTML berada di folder pages, maka ../assets/js/main.js akan naik satu level untuk mencari file main.js di folder assets/js.

Kelebihan dan Kekurangan

Absolute Path:

Kelebihan: Konsisten untuk semua halaman, mudah dipindah domain atau subfolder jika menggunakan URL penuh.

Kekurangan: Panjang, sulit disesuaikan saat struktur folder berubah, bergantung pada domain.

Relative Path:

Kelebihan: Lebih fleksibel, mudah dipindahkan antar lingkungan (development, staging, production), ringkas.

Kekurangan: Sulit dipahami jika struktur folder bercabang dalam, rawan error saat direktori berpindah.

Contoh Penggunaan dalam Pengembangan Web

1. Menghubungkan File CSS dan JavaScript

Pada HTML, penghubung file external sangat penting. Dengan absolute path berupa URL lengkap, asset akan selalu dimuat dari lokasi yang sama tanpa bergantung pada struktur folder:

Contoh absolute path:

Dengan relative path, browser mencari asset berdasarkan lokasi file HTML saat ini. Ini ideal untuk projek yang sering dipindah folder:

Contoh relative path:

2. Memasukkan Gambar dan Media

Gambar dan video juga membutuhkan penentuan path yang tepat. Jika menggunakan absolute path, asset dimuat dari server eksternal atau CDN:

Contoh:

Untuk relative path, pastikan struktur folder konsisten agar referensi tidak rusak:

Contoh: (jika HTML dan folder images berada dalam satu direktori)

3. Link Halaman Internal dan Eksternal

Absolute path cocok untuk link eksternal, memastikan pengguna diarahkan ke situs lain:

Contoh:

Relative path berguna untuk navigasi antar halaman di situs yang sama. Lebih ringkas dan mudah disesuaikan:

Contoh:

Kesimpulan

Pilih jenis path sesuai kebutuhan projek, terapkan struktur folder yang terorganisir, dan rutin verifikasi link untuk menjaga performa dan pengalaman pengguna.