Nida Regita F SEO Technical Writer at Niagahoster. An aquarius girl who loves music, watching movies and of course writing.

Membuat Website di Localhost Menggunakan XAMPP Hingga Online

7 min read

Bagaimana Cara Membuat Website dengan HTML dan CSS

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:

  1. Menjalankan XAMPP
  2. Membuat Database 
  3. Membuat Folder di htdocs
  4. Menyiapkan File Website
  5. Menghubungkan Database dengan Website
  6. 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:

menjalankan xampp

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.

membuat folder project website di htdocs

3. Membuat Database

Selanjutnya, bukalah web browser Anda, dan akses localhost/phpmyadmin. Nantinya, Anda akan melihat tampilan seperti ini:

tampilan-awal-phpmyadmin

Pada halaman tersebut, buatlah database baru yang digunakan untuk projek website Anda. Caranya, klik New seperti terlihat pada gambar berikut:

membuat new database phpmyadmin

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.

membuat database baru di localhost phpmyadmin

Anda akan diarahkan ke halaman untuk membuat tabel pada database baru. Kami membuat tabel bernama absensi yang memiliki 4 kolom. 

membuat tabel di database phpmyadmin

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.
measukkan atribut pada tabel 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:

mengakses website di localhost xampp

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:

  1. Compress File Website menjadi .zip
  2. Mengekspor Database dari phpMyAdmin Localhost
  3. Login ke cPanel Hosting
  4. Mengakses Menu File Manager
  5. Mengupload File .zip ke Hosting
  6. Mengekstrak File .zip
  7. Membuat Database di Hosting
  8. Mengimpor Database ke phpMyAdmin Hosting
  9. Mengedit File koneksi.php
  10. 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.

compress file website menjadi zip

Proses kompres tersebut akan menghasilkan output namafolderwebsite.zip seperti berikut ini:

file zip website hasil compress

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.

export database dari phpmyadmin localhost

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.

login cpanel

Bagi pengguna layanan hosting Niagahoster, Anda juga bisa login ke cPanel hosting melalui Member Area Niagahoster. Caranya, pilih akun website dan klik Kelola Layanan.

akses cPanel melalui Member Area Niagahoster

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.

pilih file manager

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.

fitur upload file website di menu file manager

Anda akan diarahkan ke halaman upload seperti ini:

memilih file website yang akan diupload ke hosting

Klik tombol Select File, lalu pilih folderwebsite.zip yang Anda miliki. Tunggulah hingga proses upload selesai dengan sempurna, lalu kembalilah ke folder public_html.

berhasil mengupload file website ke hosting

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.

ekstrak file website localhost xampp di hosting

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.

memilih direktori hasil ekstraksi file website

Selanjutnya, masuklah ke folder hasil ekstraksi. Klik Select All, lalu klik kanan dan pilih Move untuk memindahkan semua file ke folder root public_html.

pindahkan file website

Tuliskan path /public_html untuk memindahkan file ke folder public_html. Kemudian, klik tombol Move Files.

memindahkan file website ke direktori utama

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.

menu mysql di cpanel

Tuliskan nama database yang akan Anda buat pada bagian Create New Databases seperti ini:

membuat database di hosting

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.

membuat user untuk database

Nah, sekarang Anda perlu menambahkan user ke database di bagian Add User To Database. Jangan lupa, klik tombol Add.

menambahkan user ke database

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.

mengatur hak akses user pada database

8. Import Database ke phpMyadmin Hosting

Setelah membuat database, Anda perlu mengimport database melalui menu phpMyAdmin.

Menu PHPMyAdmin di cPanel

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.

import database ke phpMyAdmin hosting

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.

mengedit file konfigurasi database

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.

menyesuaikan pengaturan database dengan db di 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:

berhasil upload website localhost ke hosting

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!

Nida Regita F SEO Technical Writer at Niagahoster. An aquarius girl who loves music, watching movies and of course writing.

Leave a Reply

Your email address will not be published. Required fields are marked *