Di artikel ini, kami akan memberikan contohnya dengan membuat website presensi sederhana menggunakan PHP. Setelah semuanya siap, langsung mulai langkah-langkah membuat website localhost XAMPP di bawah ini yuk!<\/p>
1. Jalankan XAMPP<\/h3>
Pertama, Anda perlu memulai Apache<\/strong> dan MySQL<\/strong> dulu di aplikasi XAMPP.<\/p> Apache<\/a> bertindak sebagai web server untuk mengatur permintaan HTTP dan memproses halaman website, sedangkan MySQL<\/a> adalah server database yang menyimpan data untuk website yang membutuhkan pengelolaan data.<\/p> Klik tombol Start<\/strong> pada modul masing-masing untuk mengaktifkannya. Kedua layanan ini diperlukan agar website di localhost bisa dijalankan dan Anda bisa membuat database MySQL.<\/p> Setelah Apache dan MySQL aktif, mari lanjutkan ke langkah berikutnya.<\/p> Semua file website Anda harus diletakkan di dalam folder htdocs<\/strong> pada direktori C:\\xampp\\htdocs<\/strong>. Folder ini akan menjadi tempat penyimpanan proyek Anda sehingga website bisa diakses melalui browser di localhost.<\/p> Dalam contoh ini, kami akan membuat folder bernama webproject<\/strong> di dalam htdocs<\/strong>.<\/p> Nantinya, path folder ini akan menjadi alamat untuk mengakses website di localhost.<\/p> Anda bisa membuat database menggunakan phpMyAdmin. Buka browser Anda, lalu akses localhost\/phpmyadmin<\/strong>. Di halaman yang terbuka, Anda bisa membuat database untuk menyimpan data website dengan langkah-langkah berikut:<\/p> Sekarang, Anda sudah punya database baru untuk menyimpan data kehadiran di website localhost Anda.<\/p> Setelah membuat database, selanjutnya siapkan file project website Anda di code editor.<\/p> Caranya, buka folder webproject<\/strong> di htdocs<\/strong> menggunakan aplikasi code editor Anda, lalu buat file baru bernama index.php<\/strong>. Buka file tersebut, lalu masukkan kode di bawah ini:<\/p> Pada contoh ini, kami menggunakan CSS dari framework Bootstrap<\/a> agar tampilan website lebih rapi. Anda juga bisa menggunakan file CSS lokal kalau ingin mengaksesnya secara offline.<\/p> Setelah file website selesai, Anda perlu menghubungkan database dengannya. Kalau tidak, Anda akan menjumpai error database ketika mencoba mengakses website.<\/p> Untuk membuat koneksi PHP dengan MySQL<\/a>, buat file baru bernama koneksi.php<\/strong> lalu masukkan kode berikut ini:<\/p> Jangan lupa, ubah $dbName<\/strong> sesuai nama database yang Anda buat sebelumnya. Setelah itu, simpan file ini di folder project website Anda, yang dalam contoh ini adalah webproject<\/strong> di direktori htdocs<\/strong>.<\/p> Setelah semua pengaturannya selesai, Anda sudah bisa mengakses website di web browser dengan menggunakan path folder tempat project website Anda berada.<\/p> Untuk contoh ini, URL akses kami adalah localhost\/webproject<\/strong>. Apabila semua langkah-langkahnya diikuti dengan benar, website Anda pun bisa ditampilkan di localhost.<\/p> Berikut hasil dari contoh kami:<\/p> Kalau website berhasil diakses melalui browser, artinya Anda berhasil membuat website di localhost menggunakan XAMPP.<\/p> Namun, saat ini website tersebut hanya bisa diakses secara lokal di komputer Anda. Apabila ingin mengonlinekan website agar bisa diakses oleh orang lain di internet, Anda perlu menguploadnya ke layanan hosting.<\/p> Setelah selesai membuat dan menguji website di localhost, selanjutnya Anda bisa mengupload website ke layanan hosting<\/a> agar bisa diakses secara online.<\/p> Untuk langkah ini, Anda membutuhkan hosting dan domain<\/a>. Kalau belum memilikinya, Anda bisa membeli paket hosting dulu dari provider yang tepercaya. Apabila belum tahu caranya, silakan simak panduan kami tentang cara memilih paket hosting yang tepat<\/a>. <\/p> Setelah menyiapkan keduanya, Anda bisa mengikuti panduan lengkap untuk mengonlinekan website localhost<\/a> di bawah ini.<\/p> Dalam contoh ini, kami akan menggunakan hPanel<\/a>, control panel hosting dari Hostinger. Langkah-langkahnya seharusnya tidak akan terlalu berbeda menggunakan control panel lainnya.<\/p> 1. Kompres File Website Menjadi .zip<\/strong><\/p> Anda perlu mengompres folder project website agar mudah diupload ke hosting. Caranya, klik kanan folder website di komputer Anda, lalu pilih opsi Send to<\/strong> → Compressed (zipped) folder<\/strong> untuk membuat file .zip<\/a> dari folder website.<\/p> Hasilnya akan berupa file dengan ekstensi .zip<\/strong> seperti di bawah ini.<\/p> 2. Ekspor Database dari phpMyAdmin<\/strong><\/p> Setelah itu, Anda perlu mengekspor database dari localhost\/phpmyadmin<\/strong>:<\/p> Simpan file .sql<\/strong> ini di komputer karena akan diimpor ke database hosting Anda nanti.<\/p> 3. Akses Control Panel dan File Manager Hosting<\/strong><\/p> Login ke control panel hosting untuk mengakses file di akun hosting Anda. Untuk mengakses dashboard hPanel, Anda bisa mengakses hpanel.hostinger.com<\/strong> lalu login menggunakan akun yang terdaftar.<\/p> Apabila akun hPanel Anda masih benar-benar baru, Anda akan menjumpai opsi untuk membuat website pada saat onboarding. Pilih Situs web PHP\/HTML<\/strong> kosong, lalu ikuti langkah-langkahnya.<\/p> Setelah itu, buka File Manager<\/a> di control panel hosting Anda. Di hPanel, Anda bisa mengaksesnya melalui Website<\/strong> → Dashboard<\/strong> di samping nama domain Anda. Kemudian, pilih File Manager<\/strong> di dashboard.<\/p> Kalau sudah berhasil masuk ke file manager, lanjutkan ke langkah berikutnya di bawah ini.<\/p> 4. Upload dan Ekstrak .zip ke Folder public_html<\/strong><\/p> Di File Manager, buka folder public_html<\/strong>, yang merupakan direktori utama untuk file website Anda.<\/p> Klik Upload<\/strong> di bagian atas layar, pilih file .zip<\/strong> yang tadi Anda buat, lalu tunggu hingga prosesnya selesai.<\/p> Ekstrak file ZIP tersebut di dalam folder public_html<\/strong> dengan mengklik kanan file lalu memilih Buka Arsip<\/strong>. Pastikan Anda mengekstraknya ke dalam folder utama public_html<\/strong>.<\/p> Pastikan file-file yang tadi ada di folder .zip<\/strong> sudah berada di dalam direktori public_html<\/strong>. Setelah itu, Anda bisa lanjut ke langkah berikutnya.<\/p> 5. Buat Database di Hosting<\/strong><\/p> Sekarang, buat database MySQL di control panel hosting untuk menyimpan data website Anda.<\/p> Di hPanel, buka menu Database<\/strong> → Pengelolaan<\/strong>. Masukkan nama, username, dan password database Anda, lalu klik Buat<\/strong> untuk membuat database baru.<\/p> Pastikan Anda mencatat nama database, username, dan password yang dibuat karena akan digunakan nanti untuk membuat koneksi database dengan website.<\/p> 6. Impor Database ke phpMyAdmin<\/strong><\/p> Selanjutnya, Anda perlu mengimpor file .sql<\/strong> yang tadi sudah diekspor dari localhost:<\/p> Setelah selesai, tabel-tabel database Anda akan muncul di phpMyAdmin.<\/p> 7. Edit File koneksi.php<\/strong><\/p> Kembali ke File Manager<\/strong> dan temukan file koneksi.php<\/strong> di dalam folder public_html<\/strong>. Klik kanan file, lalu pilih edit untuk menyesuaikan pengaturan koneksi database sesuai database baru Anda:<\/p> 8. Akses Website secara Online<\/strong><\/p> Sekarang saatnya mengakses website Anda secara online. Buka web browser, lalu masukkan nama domain yang Anda gunakan. Apabila semua langkah di atas sudah dilakukan dengan benar, website Anda seharusnya bisa diakses secara online.<\/p> Membangun website di localhost menggunakan XAMPP bisa membantu meningkatkan proses pembuatan website sebelum mengonlinekannya. Dengan website lokal, developer bisa melakukan pengujian yang lebih ekstensif tanpa takut downtime.<\/p> Setelah selesai merancang dan menyempurnakan website, jangan lupa untuk menguploadnya ke hosting agar bisa diakses secara online melalui nama domain.<\/p> Dengan menggunakan layanan hosting Hostinger<\/strong>, proses upload website pun menjadi lebih mudah. Hostinger menyediakan hPanel<\/strong> yang praktis dan user-friendly, yang memudahkan pengelolaan file, pengaturan database, dan pengoptimalan server.<\/p> Yuk, onlinekankan website localhost Anda sekarang juga dengan Hostinger, dan nikmati keunggulan hosting yang cepat, aman, dan terjangkau!<\/p> Banyak pengguna dan web developer yang lebih suka membuat website localhost dulu sebelum menguploadnya ke hosting. Sebab, dengan versi lokal, proses pengembangan dan pengujian website bisa lebih bebas tanpa risiko downtime. Nah, untuk menjalankan website di localhost, Anda bisa menggunakan XAMPP. Nantinya, website yang sudah selesai disiapkan di localhost bisa diupload ke hosting agar bisa […]<\/p>\n![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/apache-mysql-xampp.png\/public\")
<\/figure><\/div>2. Buat Folder di htdocs<\/h3>
![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/membuat-folder-di-htdocs-1.png\/public\")
<\/figure><\/div>3. Mulai Buat Database Website<\/h3>
\n
![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/buat-baru-phpmyadmin-1.png\/public\")
<\/figure><\/div>\n
![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/membuat-database-localhost-phpmyadmin.png\/public\")
<\/figure><\/div>\n
![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/membuat-tabel-di-database-localhost-2.png\/public\")
<\/figure><\/div>\n
\n
![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/masukkan-atribut-tabel.png\/public\")
<\/figure><\/div>\n
4. Buat dan Siapkan File Website<\/h3>
<?php\ninclude_once(\"koneksi.php\");\n\n\/\/ Mengambil semua data dari database\n$result = mysqli_query($mysqli, \"SELECT * FROM absensi ORDER BY id DESC\");\n\nif (isset($_POST)) {\n $nama = $_POST;\n $divisi = $_POST;\n\n \/\/ Insert data ke database\n $add = mysqli_query($mysqli, \"INSERT INTO absensi(nama,divisi,waktu_kehadiran) VALUES('$nama','$divisi', NOW())\");\n}\n?>\n\n<html>\n\n<head>\n <!-- Required meta tags -->\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n <!-- Bootstrap CSS -->\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.1.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3\" crossorigin=\"anonymous\">\n\n <title>Tutorial Hostinger<\/title>\n<\/head>\n\n<body>\n <nav class=\"navbar navbar-dark bg-dark\">\n <div class=\"container-fluid\">\n <span class=\"navbar-brand mb-0 h1\">Tutorial Hostinger<\/span>\n <\/div>\n <\/nav>\n\n <div class=\"bg-success p-2 text-dark bg-opacity-10\">\n <h1 class=\"p-4 text-center\">Catatan Kehadiran<\/h1>\n <div class=\"container\">\n <form action=\"\" method=\"post\" name=\"form_absen\">\n <div class=\"col-md-6 offset-md-3\">\n <div class=\"mb-3\">\n <label class=\"form-label\">Nama<\/label>\n <input type=\"text\" class=\"form-control\" name=\"nama\" placeholder=\"Masukkan nama Anda\">\n <\/div>\n <div class=\"mb-3\">\n <label for=\"exampleInputPassword1\" class=\"form-label\">Divisi\/Departemen<\/label>\n <select class=\"form-select\" name=\"divisi\">\n <option value=\"#\">-- Pilih Departemen --<\/option>\n <option value=\"Acquisition\">Acquisition<\/option>\n <option value=\"Finance\">Finance<\/option>\n <option value=\"Operation\">Operation<\/option>\n <\/select>\n <\/div>\n <\/div>\n <div class=\"text-center\">\n <button type=\"submit\" class=\"btn btn-primary\" name=\"Submit\">Hadir<\/button>\n <\/div>\n <\/form>\n\n <table class=\"my-5 table table-striped\">\n <tr class=\"table-dark\">\n <th>Nama<\/th>\n <th>Divisi\/Departemen<\/th>\n <th>Waktu Kehadiran<\/th>\n <\/tr>\n\n <?php\n while ($r = mysqli_fetch_array($result)) {\n ?>\n <tr class=\"table-secondary\">\n <td><?php echo $r; ?><\/td>\n <td><?php echo $r; ?><\/td>\n <td><?php echo $r; ?><\/td>\n <\/tr>\n <?php\n }\n ?>\n <\/table>\n <\/div>\n <\/div>\n\n <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>\n<\/body>\n<\/html><\/pre>5. Hubungkan Database dengan Website<\/h3>
<?php\n$dbHost = 'localhost';\n$dbName = 'db_webproject'; \/\/ubah dengan nama database Anda\n$dbUsername = 'root';\n$dbPassword = '';\n$mysqli = mysqli_connect($dbHost, $dbUsername, $dbPassword, $dbName);\n?><\/pre>
6. Akses Website Localhost<\/h3>
![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/mengakses-website-di-localhost-xampp.png\/public\")
<\/figure><\/div>Cara Upload Website Localhost XAMPP ke Hosting<\/h2>
![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/public\")
<\/a><\/figure>![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/compress-file-website-menjadi-zip.png\/public\")
<\/figure><\/div>![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/file-website-localhost-xampp-zip.png\/public\")
<\/figure><\/div>\n
![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/export-database-localhost-phpmyadmin.png\/public\")
<\/figure><\/div>![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/website-kosong-onboarding-hpanel.png\/public\")
<\/figure><\/div>![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/file-manager-dashboard-hpanel.png\/public\")
<\/figure><\/div>![\"folder](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/11\/folder-public-html-di-file-manager-hostinger.png\/public\")
<\/figure><\/div>![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/buka-arsip-public-html.png\/public\")
<\/figure><\/div>![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/membuat-database-baru-hpanel.png\/public\")
<\/figure><\/div>\n
![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/masuk-phpmyadmin-hpanel.png\/public\")
<\/figure><\/div>\n
![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/import-database-di-phpyadmin-hosting.png\/public\")
<\/figure><\/div><?php\n$dbHost = 'localhost';\n$dbName = 'nama_database'; \/\/ Sesuaikan dengan nama database Anda\n$dbUsername = 'username_database'; \/\/ Sesuaikan dengan username database Anda\n$dbPassword = 'password_database'; \/\/ Sesuaikan dengan password database Anda\n$mysqli = mysqli_connect($dbHost, $dbUsername, $dbPassword, $dbName);\n?><\/pre>
![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/berhasil-mengakses-website-di-hosting-1.png\/public\")
<\/figure><\/div>Kesimpulan<\/h2>
<\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"