Sebelum website di-online-kan, tak jarang developer membuat website di localhost terlebih dulu. Tujuannya, agar proses pengembangan website menjadi lebih mudah.
Salah satu cara untuk membuat localhost website adalah menggunakan web server seperti XAMPP. Nantinya, website localhost XAMPP itu akan diupload ke hosting agar bisa diakses online.
Nah, bagaimana cara menggunakan XAMPP untuk membuat website?
Tenang, di artikel kali ini, kami akan menjelaskan bagaimana cara membuat website di localhost hingga bisa diakses online. Tak perlu berlama-lama lagi, yuk langsung saja simak panduan lengkapnya di bawah ini!
Cara Membuat Website di Localhost
Sebelum membuat localhost website, ada dua hal yang perlu Anda siapkan, yaitu:
- XAMPP – Tools yang berfungsi sebagai web server pada local environment. Anda bisa mendownloadnya secara gratis sesuai sistem operasi yang Anda gunakan. Kemudian, install XAMPP di komputer Anda.
- Code Editor – Aplikasi untuk menulis kode pemrograman dalam pengembangan website. Di tutorial ini, kami menggunakan Visual Studio Code.
Kemudian, Anda bisa mulai mengikuti cara membuat website di localhost dengan 6 langkah berikut:
- Menjalankan XAMPP
- Membuat Database
- Membuat Folder di htdocs
- Menyiapkan File Website
- Menghubungkan Database dengan Website
- Mengakses Localhost Website
Pada tutorial ini, kami akan membuat website absensi sederhana menggunakan bahasa pemrograman PHP:
1. Menjalankan XAMPP
Untuk membuat website di localhost, langkah pertama yang harus Anda lakukan adalah menjalankan XAMPP. Caranya, buka aplikasi XAMPP, kemudian klik tombol Start pada module Apache dan MySQL sebagai berikut:
Apache merupakan web server yang harus dijalankan agar website Anda bisa diakses di localhost. Sedangkan MySQL diperlukan bagi website yang memiliki fitur manajemen database di dalamnya.
Dengan mengaktifkannya, Anda akan diberikan akses untuk bisa mempraktikkan cara membuat database MySQL.
2. Membuat Folder di htdocs
Agar website localhost XAMPP bisa diakses, Anda perlu menyimpan folder project website Anda di direktori C:\xampp\htdocs. Pada tutorial cara membuat website di localhost ini, kami membuat folder dengan nama webproject.
3. Membuat Database
Selanjutnya, bukalah web browser Anda, dan akses localhost/phpmyadmin. Nantinya, Anda akan melihat tampilan seperti ini:
Pada halaman tersebut, buatlah database baru yang digunakan untuk projek website Anda. Caranya, klik New seperti terlihat pada gambar berikut:
Kemudian, masukkan nama database pada kolom yang tersedia. Pada tutorial ini, kami menggunakan nama db_webproject. Jika Anda sudah memutuskan nama database yang akan dibuat, klik tombol Create.
Anda akan diarahkan ke halaman untuk membuat tabel pada database baru. Kami membuat tabel bernama absensi yang memiliki 4 kolom.
Selanjutnya, masukkanlah empat atribut berikut ini pada tabel absensi:
- id – Untuk menyimpan id database yang diinput. Pilih INT sebagai type database, beri tanda ceklis pada bagian A_I (Auto Increment).
- nama – Untuk menyimpan nama. Pilih VARCHAR sebagai type database, masukkan angka 500 pada Length/Values.
- divisi – Untuk menyimpan nama divisi. Pilih VARCHAR sebagai type database, masukkan angka 100 pada Length/Values.
- waktu_kehadiran – Untuk menyimpan data waktu user melakukan absensi. Pilih TIMESTAMP sebagai type database.
Setelah menentukan atribut tersebut, klik tombol Save untuk membuat tabel.
Nah, sekarang Anda sudah memiliki database baru yang berfungsi untuk menyimpan data catatan kehadiran untuk website absensi sederhana.
4. Menyiapkan File Website
Pada langkah sebelumnya, Anda sudah membuat database. Sekarang, Anda perlu menyiapkan file project website Anda.
Caranya, bukalah folder yang telah Anda buat di htdocs sebelumnya dengan menggunakan code editor. Kemudian, buat file dengan nama index.php di folder tersebut dan salinlah kode berikut ini:
<?php
include_once("koneksi.php");
// Mengambil semua data dari database
$result = mysqli_query($mysqli, "SELECT * FROM absensi ORDER BY id DESC");
if (isset($_POST['Submit'])) {
$nama = $_POST['nama'];
$divisi = $_POST['divisi'];
// Insert data ke database
$add = mysqli_query($mysqli, "INSERT INTO absensi(nama,divisi,waktu_kehadiran) VALUES('$nama','$divisi', NOW())");
}
?>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Niagahoster Tutorial</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Niagahoster Tutorial</span>
</div>
</nav>
<div class="bg-success p-2 text-dark bg-opacity-10">
<h1 class="p-4 text-center">Catatan Kehadiran</h1>
<div class="container">
<form action="" method="post" name="form_absen">
<div class="col-md-6 offset-md-3">
<div class="mb-3">
<label class="form-label">Nama</label>
<input type="text" class="form-control" name="nama" placeholder="Masukkan nama Anda">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Divisi/Departemen</label>
<select class="form-select" name="divisi">
<option value="#">-- Pilih Departemen --</option>
<option value="Acquisition">Acquisition</option>
<option value="Finance">Finance</option>
<option value="Operation">Operation</option>
</select>
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary" name="Submit">Hadir</button>
</div>
</form>
<table class="my-5 table table-striped">
<tr class="table-dark">
<th>Nama</th>
<th>Divisi/Departemen</th>
<th>Waktu Kehadiran</th>
</tr>
<?php
while ($r = mysqli_fetch_array($result)) {
?>
<tr class="table-secondary">
<td><?php echo $r['nama']; ?></td>
<td><?php echo $r['divisi']; ?></td>
<td><?php echo $r['waktu_kehadiran']; ?></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Pada kode di atas, kami memakai salah satu framework CSS yaitu Bootstrap secara online. Sehingga, tampilan kode tersebut hanya akan berjalan jika terhubung dengan koneksi internet. Namun, Anda juga bisa menggunakan Bootstrap secara offline, kok.
6. Menghubungkan Database dengan Website
Meski file website Anda sudah siap, masih akan ada pesan error terkait dengan database. Sebab, website belum dihubungkan dengan database yang Anda buat di localhost/phpmyadmin.
Untuk membuat koneksi database dengan website, buatlah file baru bernama koneksi.php. Kemudian, salinlah kode berikut ini:
<?php
$dbHost = 'localhost';
$dbName = 'db_webproject'; //ubah dengan nama database Anda
$dbUsername = 'root';
$dbPassword = '';
$mysqli = mysqli_connect($dbHost, $dbUsername, $dbPassword, $dbName);
?>
Silakan ubah nilai dari baris kode $dbName dengan nama database yang Anda miliki. Jangan lupa, simpan perubahan file dengan klik tombol CTRL + S pada keyboard.
7. Mengakses Localhost Website
Nah, untuk melihat website absensi yang telah dibuat, Anda hanya perlu mengakses localhost/namafolder di browser.
Sesuaikan dengan nama folder yang Anda buat, ya. Di tutorial ini, website bisa diakses pada URL localhost/webproject.
Cobalah untuk melakukan input data pada form yang tersedia. Maka, Anda akan melihat tampilan halaman website seperti ini:
Sekarang, Anda sudah berhasil menggunakan XAMPP untuk membuat website di localhost. Namun, saat ini website masih belum bisa diakses oleh banyak orang karena belum online.
Jadi, Anda perlu meng-upload website localhost XAMPP Anda ke layanan hosting. Ingin tahu caranya? Yuk, baca lebih lanjut!
Cara Upload Website Localhost XAMPP ke Hosting
Untuk melakukan upload website localhost XAMPP ke hosting, Anda perlu membeli layanan web hosting dan domain murah terlebih dulu.
Kemudian, ikuti sepuluh langkah cara upload website ke hosting berikut ini:
- Compress File Website menjadi .zip
- Mengekspor Database dari phpMyAdmin Localhost
- Login ke cPanel Hosting
- Mengakses Menu File Manager
- Mengupload File .zip ke Hosting
- Mengekstrak File .zip
- Membuat Database di Hosting
- Mengimpor Database ke phpMyAdmin Hosting
- Mengedit File koneksi.php
- Mengakses Website Online
Ini dia panduan lengkapnya:
1. Compress File Website menjadi .zip
Langkah pertama untuk meng-upload website ke hosting adalah melakukan kompres folder project website Anda menjadi file dengan ekstensi .zip.
Caranya, klik kanan pada folder website dan pilih Send to. Kemudian, klik Compressed (zipped) folder.
Proses kompres tersebut akan menghasilkan output namafolderwebsite.zip seperti berikut ini:
2. Export Database dari phpMyAdmin Localhost
Selanjutnya, lakukanlah export database dari localhost/phpmyadmin dengan cara masuk ke tab Export. Kemudian, klik tombol Go untuk langsung mendownload file database .sql.
Simpanlah dulu file database hasil download di komputer Anda. Database tersebut nantinya akan digunakan pada langkah import database ke phpMyAdmin di hosting.
3. Login ke cPanel Hosting
Nah, kalau file website dan file database sudah Anda siapkan, masuk ke cPanel hosting Anda dengan mengakses namadomain/cpanel. Masukkan username dan password cPanel Anda, lalu klik Log in.
Bagi pengguna layanan hosting Niagahoster, Anda juga bisa login ke cPanel hosting melalui Member Area Niagahoster. Caranya, pilih akun website dan klik Kelola Layanan.
4. Mengakses Menu File Manager
Di halaman berikutnya, scroll ke bawah dan temukan menu Quick Shortcut ke cPanel. Lalu, klik menu File Manager. Di menu inilah file website Anda akan di upload dan tersimpan di hosting agar bisa diakses online.
5. Upload File .zip ke Hosting
Jika di localhost XAMPP Anda harus menyimpan file di htdocs, maka di hosting Anda harus menyimpan file website di folder public_html.
Jadi, masuklah ke direktori public_html, lalu klik pada fitur Upload untuk mengupload website ke hosting.
Anda akan diarahkan ke halaman upload seperti ini:
Klik tombol Select File, lalu pilih folderwebsite.zip yang Anda miliki. Tunggulah hingga proses upload selesai dengan sempurna, lalu kembalilah ke folder public_html.
6. Mengekstrak File .zip
Seharusnya Anda bisa melihat file website Anda sudah berada di dalam folder public_html. Namun, Anda masih harus mengekstrak file tersebut. Caranya mudah, klik kanan pada file .zip lalu pilih Extract.
Kemudian, masukkan path lokasi tempat Anda ingin menyimpan folder website. Dalam hal ini, tempatkanlah website Anda di direktori /public_html. Artinya, folder hasil ekstraksi akan terbentuk di direktori /public_html. Jangan lupa, klik tombol Extract Files.
Selanjutnya, masuklah ke folder hasil ekstraksi. Klik Select All, lalu klik kanan dan pilih Move untuk memindahkan semua file ke folder root public_html.
Tuliskan path /public_html untuk memindahkan file ke folder public_html. Kemudian, klik tombol Move Files.
7. Membuat Database di Hosting
Meskipun file website sudah di upload ke hosting, website Anda masih belum bisa diakses. Sebab, Anda belum membuat database di hosting Anda.
Untuk itu, masuklah ke menu MySQL Databases di dashboard cPanel.
Tuliskan nama database yang akan Anda buat pada bagian Create New Databases seperti ini:
Kemudian, klik Create Database.
Berikutnya, buatlah user baru pada bagian Add New User. Masukkan username dan password yang akan digunakan untuk mengakses database Anda nantinya. Lalu, klik tombol Create User.
Nah, sekarang Anda perlu menambahkan user ke database di bagian Add User To Database. Jangan lupa, klik tombol Add.
Anda akan diarahkan ke halaman Manage User Privileges. Beri tanda ceklis pada pilihan ALL PRIVILEGES untuk memberikan user semua hak akses pada database Anda. Kemudian, klik tombol Make Changes.
8. Import Database ke phpMyadmin Hosting
Setelah membuat database, Anda perlu mengimport database melalui menu phpMyAdmin.
Di halaman phpMyAdmin, pilih nama database di bagian kiri halaman. Kemudian, pilih tab Import dan klik tombol Choose File untuk memilih file database .sql yang akan diimport.
Setelah itu, klik tombol Go untuk memulai proses import database. Jika berhasil, Anda akan melihat tabel absensi sesuai dengan yang Anda buat di localhost/phpmyadmin.
9. Mengedit File koneksi.php
Setelah import database, kembalilah ke direktori public_html tempat Anda menyimpan file website. Klik kanan pada file koneksi.php, lalu pilih Edit.
Pada file ini, Anda perlu mengubah konfigurasi database. Silakan ubah $dbName, $dbUsername dan $dbPassword dengan nama database, nama user dan password yang Anda buat di menu database hosting.
Pastikan Anda memasukkannya dengan benar, ya. Kalau sudah, klik tombol Save Changes untuk menyimpan perubahan.
10. Mengakses Website Online
Nah, sekarang saatnya mengakses website online Anda. Jika langkah pengaturan sesuai, akan terlihat seperti gambar berikut:
Yuk, Online-kan Website Localhost Anda Sekarang!
Untuk membuat website di localhost, Anda bisa menggunakan bantuan XAMPP sebagai web server. Proses pengembangan website bisa dilakukan di local environment dengan mudah.
Nantinya, agar website bisa diakses online, Anda bisa membeli domain dan mengupload file website localhost XAMPP tersebut ke layanan hosting.
Sebaiknya, jangan asal pilih layanan web hosting, ya. Gunakan hosting yang memberikan performa yang optimal, baik dari kecepatan, keamanan dan kemudahan aksesnya.
Nah, Layanan Unlimited Hosting Niagahoster bisa menjadi pilihan yang tepat.
Dengan uptime hingga 99,98%, hosting Niagahoster menjamin website Anda akan selalu bisa diakses selama 24 jam penuh. Jadi, Anda tidak perlu khawatir lagi soal downtime.
Hosting Niagahoster juga memiliki performa server yang luar biasa berkat dukungan LiteSpeed web server dan fitur keamanan andal, Imunify360.
Selain itu, paket hosting unlimited Niagahoster juga menawarkan domain gratis dengan harga mulai dari Rp27rb/bulan saja!
Jadi, tunggu apa lagi? Yuk, onlinekan localhost website Anda sekarang juga dengan biaya hosting dan domain super terjangkau dari Niagahoster!
