Cara Membuat Website dan Database di Localhost Xampp Hingga Online

Bagaimana cara menggunakan XAMPP untuk membangun situs web? Jangan khawatir; artikel ini akan menjelaskan bagaimana membuat situs web di localhost sehingga dapat diakses melalui internet. Tak perlu berlama-lama lagi; langsung ikuti instruksi lengkap di bawah ini!

Apa itu XAMPP?

XAMPP adalah paket perangkat lunak yang memungkinkan Anda membuat lingkungan server web lokal di komputer Anda.

Nama “XAMPP” adalah akronim yang merupakan singkatan dari komponen perangkat lunak yang termasuk dalam paket:

• X: Cross-platform (artinya dapat digunakan pada beberapa sistem operasi, termasuk Windows, Linux, dan macOS)
• Apache: Apache adalah perangkat lunak server web populer yang digunakan untuk memproses permintaan HTTP dan melayani halaman web ke klien.
• MySQL: MySQL adalah sistem manajemen basis data sumber terbuka populer yang digunakan untuk menyimpan dan mengelola data untuk aplikasi web. Ini adalah pilihan umum bagi pengembang web karena keandalan, skalabilitas, dan kemudahan penggunaannya.
• PHP: bahasa pemrograman populer yang digunakan untuk membuat konten web dinamis. Hal ini biasanya digunakan dalam kombinasi dengan Apache dan MySQL untuk membuat aplikasi web.

Selain komponen inti ini, XAMPP juga menyertakan alat dan utilitas lain seperti Perl, phpMyAdmin, dan FileZilla. XAMPP dirancang agar mudah dipasang dan dikonfigurasi, menjadikannya pilihan populer bagi pengembang yang ingin membuat dan menguji situs web secara lokal sebelum mengunggahnya ke server jarak jauh. Ini gratis untuk diunduh dan digunakan.

XAMPP memungkinkan host atau server lokal untuk memvalidasinya di komputer dan laptop. Ini adalah kerangka kerja yang menyediakan lingkungan yang cocok untuk menguji dan memverifikasi fungsionalitas proyek berdasarkan Apache, Perl, MySQL, dan PHP menggunakan kerangka kerja host. Perl adalah bahasa pemrograman pembuatan web, PHP adalah bahasa scripting backend, dan MariaDB adalah database MySQL yang paling banyak digunakan. Berikut ini adalah gambaran singkat dari elemen-elemen tersebut.

Prosedur instalasi XAMPP sangat mudah dan cepat. XAMPP berfungsi sebagai server lokal atau localhost sampai diinstal pada komputer lokal. Sebelum menambahkan situs web ke server web jarak jauh, Anda harus memverifikasi nya. Pada mesin lokal, program server XAMPP menyediakan platform yang sesuai untuk memeriksa program MYSQL, PHP, Apache, dan Perl.

Cara Membuat Website di Localhost XAMPP

Dua hal yang perlu Anda siapkan sebelum membuat situs web di localhost:

1. XAMPP adalah alat yang berfungsi sebagai web server di lingkungan lokal. Dia dapat diunduh secara gratis untuk sistem operasi apa pun yang Anda gunakan. Setelah itu, pasang XAMPP di komputer Anda.
2. Code Editor—Aplikasi yang digunakan untuk menulis kode pemrograman yang berkaitan dengan pengembangan website. Kami menggunakan Visual Studio Code dalam tutorial ini.

Langkah 1: Jalankan XAMPP

Langkah pertama adalah menjalankan XAMPP. Untuk melakukan ini, buka aplikasi XAMPP dan klik tombol Start pada modul Apache dan MySQL seperti berikut:

Sementara Apache adalah web server yang harus dijalankan agar website Anda dapat diakses di localhost, MySQL diperlukan untuk website yang memiliki fitur manajemen database. 

Langkah 2: Buat Folder di htdocs

Anda harus menyimpan folder project website Anda di direktori C:\xampp\htdocs sebelum Anda dapat mengakses website localhost XAMPP. Dalam tutorial cara membuat website di localhost ini, kami menggunakan nama folder .

Langkah 3: Buat Database

Setelah itu, buka web browser Anda dan masuk ke localhost/phpmyadmin. Anda akan melihat tampilan seperti ini:

Pada halaman ini, buat database baru untuk proyek web Anda. Caranya adalah klik New, seperti yang ditunjukkan pada kotak berwarna merah.

Selanjutnya, masukkan nama database pada kolom yang tersedia; dalam tutorial ini, kami menggunakan nama db_webproject. Jika Anda sudah memilih nama database yang akan digunakan, klik tombol Create.

Anda akan dibawa ke halaman di mana Anda dapat membuat tabel untuk database baru Anda. Kami membuat tabel daftar karyawan, yang memiliki tiga kolom. Setelah itu, anda dapat mulai mengisi tiga atribut untuk ketiga kolom data karyawan.

Pada contoh diatas, terdapat tiga atribut yang akan ditampilkan pada tabel data karyawan:

1. Id. atribut ini digunakan untuk menyimpan id karyawan. Anda dapat memilih tipe database INT dan jangan lupa untuk menekan tombol centang pada bagian A_I (Auto Increment.
2. Nama. atribut ini digunakan untuk menyimpan nama karyawan. Anda dapat memilih tipe database VARCHAR dan masukkan angka 400 pada bagian Length/Values.
3. Departemen. Atribut ini digunakan untuk menyimpan nama departemen. Anda dapat memilih tipe database VARCHAR dan masukkan angka 100 pada bagian Length/Values. 

Setelah semua telah terisi, anda dapat menekan tombol “save” untuk menyimpan tabel, dan anda telah memiliki sebuah database sederhana untuk menyimpan data karyawan.\

Langkah 4: Siapkan File Website

Sekarang saatnya untuk membuat file website. Langkah pertama yakni membuka code editor dan buatlah file dengan nama index.php. Simpan file pada folder yang telah anda buat di folder htdocs. Setelah itu, coba salin code dibawah ini:

<?php

include_once(“koneksi.php”);

// Mengambil semua data dari database

$result = mysqli_query($mysqli, “SELECT * FROM data karyawan ORDER BY id DESC”);

if (isset($_POST[‘Submit’])) {

    $nama = $_POST[‘nama’];

    $divisi = $_POST[‘departemen’];

    // Insert data ke database

    $add = mysqli_query($mysqli, “INSERT INTO data karyawan(nama,departemen) VALUES(‘$nama’,’$departemen’)”);

}

?>

<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/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3″ crossorigin=”anonymous”>

    <title>Tutorial Membuat Web Localhost Nevacloud</title>

</head>

<body>

    <nav class=”navbar navbar-dark bg-dark”>

        <div class=”container-fluid”>

            <span class=”navbar-brand mb-0 h1″>Nevacloud</span>

        </div>

    </nav>

    <div class=”bg-success p-2 text-dark bg-opacity-10″>

        <h1 class=”p-4 text-center”>Data Karyawan</h1>

        <div class=”container”>

            <form action=”” method=”post” name=”form_data karyawan”>

                <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”>Departemen</label>

                        <select class=”form-select” name=”departemen”>

                            <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>Departemen</th>

                </tr>

                <?php

                while ($r = mysqli_fetch_array($result)) {

                ?>

                    <tr class=”table-secondary”>

                        <td><?php echo $r[‘nama’]; ?></td>

                        <td><?php echo $r[‘departemen’]; ?></td>

                    </tr>

                <?php

                }

                ?>

            </table>

        </div>

    </div>

    <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js” integrity=”sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p” crossorigin=”anonymous”></script>

</body>

</html>

Untuk melihat preview dari code diatas, anda dapat mengakses localhost/namafileanda dan tampilannya akan seperti dibawah ini: 

Cara Upload Website Localhost XAMPP ke Hosting

Langkah 1: Login cPanel

Login ke cPanel dari penyedia hosting yang anda gunakan. Pada tutorial kali ini, kami menggunakan hosting dari DomaiNesia.

Langkah 2: Pilih phpMyAdmin

Setelah berhasil, pilih menu Databases dan klik submenu phpMyAdmin. Anda akan dibawa ke halaman phpMyAdmin, di mana Anda harus memilih database yang telah Anda buat sebelumnya. Kemudian, pilih tab Import. Pada bagian File to Import, pilih file sql yang telah Anda pilih dari server lokal atau localhost. Kemudian, pilih Go dan tunggu hingga proses upload selesai.

Langkah 3: Upload File 

Kembali ke menu awal cPanel, pilih menu Files dan submenu File Manager. Anda akan dibawa ke halaman manajemen file, di mana Anda harus memilih public_html. Dalam public_html terdapat beberapa folder, yang masing-masing merupakan anak folder atau subdomain dari domain utama. Jika Anda ingin file website ini berada di domain utama, maka Anda harus menguploadnya tepat pada direktori public_html. Jika Anda ingin mengupload file website localhost ke hosting, pilih Upload.

Kemudian pilih folder atau file website yang ingin anda upload. Klik “Pilih File” dan pilih file folder yang akan diupload. Anda juga bisa menggunakan drag and drop, menggerakkan folder website dari lokasi ke halaman ini. Pastikan folder yang Anda ingin upload berformat.zip terlebih dahulu. Setelah selesai, maka website anda telah siap untuk digunakan.

Tertarik Untuk Menggunakan VPS dengan teknologi terbaik dari Nevacloud?

Jika anda sedang mencari VPS murah dengan teknologi terbaik namun tetap ramah dikantong, Nevacloud punya solusinya! Kunjungi Nevacloud dan temukan penawaran menariknya!