{"id":517,"date":"2024-01-22T20:00:00","date_gmt":"2024-01-22T20:00:00","guid":{"rendered":"https:\/\/nevacloud.com\/blog\/?p=517"},"modified":"2024-01-26T04:26:41","modified_gmt":"2024-01-26T04:26:41","slug":"localhost-xampp","status":"publish","type":"post","link":"https:\/\/nevacloud.com\/blog\/localhost-xampp\/","title":{"rendered":"Cara Membuat Website dan Database di Localhost Xampp Hingga Online"},"content":{"rendered":"\n<p>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!<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_77 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Daftar Isi<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #444444;color:#444444\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #444444;color:#444444\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nevacloud.com\/blog\/localhost-xampp\/#Apa_itu_XAMPP\" >Apa itu XAMPP?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nevacloud.com\/blog\/localhost-xampp\/#Cara_Membuat_Website_di_Localhost_XAMPP\" >Cara Membuat Website di Localhost XAMPP<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nevacloud.com\/blog\/localhost-xampp\/#Langkah_1_Jalankan_XAMPP\" >Langkah 1: Jalankan XAMPP<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nevacloud.com\/blog\/localhost-xampp\/#Langkah_2_Buat_Folder_di_htdocs\" >Langkah 2: Buat Folder di htdocs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nevacloud.com\/blog\/localhost-xampp\/#Langkah_3_Buat_Database\" >Langkah 3: Buat Database<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nevacloud.com\/blog\/localhost-xampp\/#Langkah_4_Siapkan_File_Website\" >Langkah 4: Siapkan File Website<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nevacloud.com\/blog\/localhost-xampp\/#Cara_Upload_Website_Localhost_XAMPP_ke_Hosting\" >Cara Upload Website Localhost XAMPP ke Hosting<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nevacloud.com\/blog\/localhost-xampp\/#Langkah_1_Login_cPanel\" >Langkah 1: Login cPanel<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nevacloud.com\/blog\/localhost-xampp\/#Langkah_2_Pilih_phpMyAdmin\" >Langkah 2: Pilih phpMyAdmin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nevacloud.com\/blog\/localhost-xampp\/#Langkah_3_Upload_File\" >Langkah 3: Upload File&nbsp;<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nevacloud.com\/blog\/localhost-xampp\/#Tertarik_Untuk_Menggunakan_VPS_dengan_teknologi_terbaik_dari_Nevacloud\" >Tertarik Untuk Menggunakan VPS dengan teknologi terbaik dari Nevacloud?<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Apa_itu_XAMPP\"><\/span>Apa itu XAMPP?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>XAMPP adalah paket perangkat lunak yang memungkinkan Anda membuat lingkungan <a href=\"https:\/\/nevacloud.com\/blog\/server-adalah\/\">server<\/a> web lokal di komputer Anda.<\/p>\n\n\n\n<p>Nama &#8220;XAMPP&#8221; adalah akronim yang merupakan singkatan dari komponen perangkat lunak yang termasuk dalam paket:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>X: Cross-platform (artinya dapat digunakan pada beberapa sistem operasi, termasuk Windows, <a href=\"https:\/\/nevacloud.com\/blog\/distro-linux\/\">Linux<\/a>, dan macOS)<\/li>\n\n\n\n<li>Apache: Apache adalah perangkat lunak server web populer yang digunakan untuk memproses permintaan HTTP dan melayani halaman web ke klien.<\/li>\n\n\n\n<li>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.<\/li>\n\n\n\n<li>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.<\/li>\n<\/ul>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cara_Membuat_Website_di_Localhost_XAMPP\"><\/span>Cara Membuat Website di Localhost XAMPP<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Dua hal yang perlu Anda siapkan sebelum membuat situs web di localhost:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>XAMPP adalah alat yang berfungsi sebagai <a href=\"https:\/\/nevacloud.com\/blog\/web-server-adalah\/\">web server<\/a> di lingkungan lokal. Dia dapat diunduh secara gratis untuk sistem operasi apa pun yang Anda gunakan. Setelah itu, pasang XAMPP di komputer Anda.<\/li>\n\n\n\n<li>Code Editor\u2014Aplikasi yang digunakan untuk menulis kode pemrograman yang berkaitan dengan pengembangan website. Kami menggunakan Visual Studio Code dalam tutorial ini.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Langkah_1_Jalankan_XAMPP\"><\/span>Langkah 1: Jalankan XAMPP<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Langkah pertama adalah menjalankan XAMPP. Untuk melakukan ini, buka aplikasi XAMPP dan klik tombol Start pada modul Apache dan MySQL seperti berikut:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" data-src=\"https:\/\/lh7-us.googleusercontent.com\/pfwM5DHcGPXjidIC0y1GJs-yenW6QKyY2veX2elL6F8pGKdWJdMd71AP08_4fbYEiMkYodidkQDHbHNfgw_RRQB7Sw1LNFqRmHRhTjUwIwjoouw9zz3eL7fCCeOdyk4yt3IO_PKnX15X-8p6aCpkXRw\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<p>Sementara Apache adalah web server yang harus dijalankan agar website Anda dapat diakses di localhost, MySQL diperlukan untuk website yang memiliki <a href=\"https:\/\/nevacloud.com\/fitur\/\">fitur<\/a> manajemen database.\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Langkah_2_Buat_Folder_di_htdocs\"><\/span>Langkah 2: Buat Folder di htdocs<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>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 .<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" data-src=\"https:\/\/lh7-us.googleusercontent.com\/VI-s7zmkGQE-GRqC-sqd6XgOdHj1Amc9I_Kw3CK9gKI4r04cqmYkJHHPPPx23A7vKcFYgieVw43PcxdHNdeO5OmvUxJzlYn0bE0y8b7rR9YE-gXYWH_sJtQwfa0GsEOcf7S44OFyCBAB6PFrFYqO6KI\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Langkah_3_Buat_Database\"><\/span>Langkah 3: Buat Database<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Setelah itu, buka web browser Anda dan masuk ke localhost\/phpmyadmin. Anda akan melihat tampilan seperti ini:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" data-src=\"https:\/\/lh7-us.googleusercontent.com\/NXV0DJzqFwkSYEZnbsJKgEW2g4m7VCOEDvUH6IN5VNOo6N4pzYuaR9OhVhurzaGFf6vHPGIjCkBOiPi0WxfCcs66w7-TpiszO-IOAjO4SWYuj206kkMAwU29tP8DoOQ2ddrEbJPUe1LSLdaF-3lGT1s\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<p>Pada halaman ini, buat database baru untuk proyek web Anda. Caranya adalah klik New, seperti yang ditunjukkan pada kotak berwarna merah.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" data-src=\"https:\/\/lh7-us.googleusercontent.com\/qeOxj25z3Gtt4lQN2V7S_2FORUCWax1kPTosdgFP3htJufh7aaBXDpXX22pTlRcB6r60wZYOAetX5LfR4qfYi-uFUb_OUaAL-7G_iuwjoLrjYjAYtThHyAOipBilbc2-DBttAfDsJaWiH5OxpNp0rfI\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" data-src=\"https:\/\/lh7-us.googleusercontent.com\/kzwb-uY-7JUkhDJDNYauUwCrYifgZDWz4YSZpESyJfGgV48vlKaVPWfBuxHRC_ZKq5pvoX51oK2Xjo6mi0eulVvE1tsLdi8S9vGEI8Fypsn16mUiS5BNrsj3q2tnW21U0xLzEeRQekbj6WtFihG2n2U\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<p>Pada contoh diatas, terdapat tiga atribut yang akan ditampilkan pada tabel data karyawan:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>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.<\/li>\n\n\n\n<li>Nama. atribut ini digunakan untuk menyimpan nama karyawan. Anda dapat memilih tipe database VARCHAR dan masukkan angka 400 pada bagian Length\/Values.<\/li>\n\n\n\n<li>Departemen. Atribut ini digunakan untuk menyimpan nama departemen. Anda dapat memilih tipe database VARCHAR dan masukkan angka 100 pada bagian Length\/Values.&nbsp;<\/li>\n<\/ol>\n\n\n\n<p>Setelah semua telah terisi, anda dapat menekan tombol \u201csave\u201d untuk menyimpan tabel, dan anda telah memiliki sebuah database sederhana untuk menyimpan data karyawan.\\<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Langkah_4_Siapkan_File_Website\"><\/span>Langkah 4: Siapkan File Website<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>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:<\/p>\n\n\n\n<p>&lt;?php<\/p>\n\n\n\n<p>include_once(&#8220;koneksi.php&#8221;);<\/p>\n\n\n\n<p><em>\/\/ Mengambil semua data dari database<\/em><\/p>\n\n\n\n<p>$result = <strong>mysqli_query<\/strong>($mysqli, &#8220;SELECT * FROM data karyawan ORDER BY id DESC&#8221;);<\/p>\n\n\n\n<p>if (<strong>isset<\/strong>($_POST[&#8216;Submit&#8217;])) {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;$nama = $_POST[&#8216;nama&#8217;];<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;$divisi = $_POST[&#8216;departemen&#8217;];<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;<em>\/\/ Insert data ke database<\/em><\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;$add = <strong>mysqli_query<\/strong>($mysqli, &#8220;INSERT INTO data karyawan(nama,departemen) VALUES(&#8216;$nama&#8217;,&#8217;$departemen&#8217;)&#8221;);<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>?&gt;<\/p>\n\n\n\n<p>&lt;html&gt;<\/p>\n\n\n\n<p>&lt;head&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;<em>&lt;!&#8211; Required meta tags &#8211;&gt;<\/em><\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta <em>charset<\/em>=&#8221;utf-8&#8243;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta <em>name<\/em>=&#8221;viewport&#8221; <em>content<\/em>=&#8221;width=device-width, initial-scale=1&#8243;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;<em>&lt;!&#8211; Bootstrap CSS &#8211;&gt;<\/em><\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;link <em>href<\/em>=&#8221;https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.1.3\/dist\/css\/bootstrap.min.css&#8221; <em>rel<\/em>=&#8221;stylesheet&#8221; <em>integrity<\/em>=&#8221;sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3&#8243; <em>crossorigin<\/em>=&#8221;anonymous&#8221;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Tutorial Membuat Web Localhost Nevacloud&lt;\/title&gt;<\/p>\n\n\n\n<p>&lt;\/head&gt;<\/p>\n\n\n\n<p>&lt;body&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;nav <em>class<\/em>=&#8221;navbar navbar-dark bg-dark&#8221;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div <em>class<\/em>=&#8221;container-fluid&#8221;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span <em>class<\/em>=&#8221;navbar-brand mb-0 h1&#8243;&gt;Nevacloud&lt;\/span&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/nav&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div <em>class<\/em>=&#8221;bg-success p-2 text-dark bg-opacity-10&#8243;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1 <em>class<\/em>=&#8221;p-4 text-center&#8221;&gt;Data Karyawan&lt;\/h1&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div <em>class<\/em>=&#8221;container&#8221;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;form <em>action<\/em>=&#8221;&#8221; <em>method<\/em>=&#8221;post&#8221; <em>name<\/em>=&#8221;form_data karyawan&#8221;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div <em>class<\/em>=&#8221;col-md-6 offset-md-3&#8243;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div <em>class<\/em>=&#8221;mb-3&#8243;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label <em>class<\/em>=&#8221;form-label&#8221;&gt;Nama&lt;\/label&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input <em>type<\/em>=&#8221;text&#8221; <em>class<\/em>=&#8221;form-control&#8221; <em>name<\/em>=&#8221;nama&#8221; <em>placeholder<\/em>=&#8221;Masukkan nama Anda&#8221;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div <em>class<\/em>=&#8221;mb-3&#8243;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label <em>for<\/em>=&#8221;exampleInputPassword1&#8243; <em>class<\/em>=&#8221;form-label&#8221;&gt;Departemen&lt;\/label&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;select <em>class<\/em>=&#8221;form-select&#8221; <em>name<\/em>=&#8221;departemen&#8221;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option <em>value<\/em>=&#8221;#&#8221;&gt;&#8211; Pilih Departemen &#8211;&lt;\/option&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option <em>value<\/em>=&#8221;Acquisition&#8221;&gt;Acquisition&lt;\/option&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option <em>value<\/em>=&#8221;Finance&#8221;&gt;Finance&lt;\/option&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option <em>value<\/em>=&#8221;Operation&#8221;&gt;Operation&lt;\/option&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/select&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div <em>class<\/em>=&#8221;text-center&#8221;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button <em>type<\/em>=&#8221;submit&#8221; <em>class<\/em>=&#8221;btn btn-primary&#8221; <em>name<\/em>=&#8221;Submit&#8221;&gt;Hadir&lt;\/button&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/form&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;table <em>class<\/em>=&#8221;my-5 table table-striped&#8221;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr <em>class<\/em>=&#8221;table-dark&#8221;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Nama&lt;\/th&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Departemen&lt;\/th&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;?php<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while ($r = <strong>mysqli_fetch_array<\/strong>($result)) {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;?&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr <em>class<\/em>=&#8221;table-secondary&#8221;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;&lt;?php <strong>echo<\/strong> $r[&#8216;nama&#8217;]; ?&gt;&lt;\/td&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;&lt;?php <strong>echo<\/strong> $r[&#8216;departemen&#8217;]; ?&gt;&lt;\/td&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;?php<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;?&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/table&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;script <em>src<\/em>=&#8221;https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.1.3\/dist\/js\/bootstrap.bundle.min.js&#8221; <em>integrity<\/em>=&#8221;sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p&#8221; <em>crossorigin<\/em>=&#8221;anonymous&#8221;&gt;&lt;\/script&gt;<\/p>\n\n\n\n<p>&lt;\/body&gt;<\/p>\n\n\n\n<p>&lt;\/html&gt;<\/p>\n\n\n\n<p>Untuk melihat preview dari code diatas, anda dapat mengakses localhost\/namafileanda dan tampilannya akan seperti dibawah ini:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" data-src=\"https:\/\/lh7-us.googleusercontent.com\/muikuXUD2JyWubpu32H5OQO6FluRk6n7DNAgse4aUZ_8uqERwCQOAv60pp6Ux9K8b0xqcdO6-_6AlbG9EiJIS-Pyi3yiYx_u5LolrISulifq-4QasfwW88XJFZ04pnCy5qKtKFr3XBRsazHroQuiTTU\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cara_Upload_Website_Localhost_XAMPP_ke_Hosting\"><\/span>Cara Upload Website Localhost XAMPP ke Hosting<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Langkah_1_Login_cPanel\"><\/span>Langkah 1: Login cPanel<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Login ke cPanel dari penyedia hosting yang anda gunakan. Pada tutorial kali ini, kami menggunakan hosting dari DomaiNesia.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" data-src=\"https:\/\/lh7-us.googleusercontent.com\/ER_8PhBLMY3Lo9OocatFTeF2hglNDffZbpIDiQw65f3ZRrSXAaz6bnGbofRhaRARpl4Ufj5Dk-zSK8g8lkR1HWQSI4DaxHg5Jp8AG6JO6SpDj5lTvnM9ICDjQSM15GxrwevK8LYe5t9prNnzUV-tK0s\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Langkah_2_Pilih_phpMyAdmin\"><\/span>Langkah 2: Pilih phpMyAdmin<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" data-src=\"https:\/\/lh7-us.googleusercontent.com\/-5Zyu-eGGooJRXOPi7LuW_pUuvEXWN9KPWi-cCw_S7du8Dw3vfq7iKU6zAlAn8pl1rh924AUQBLmjs8BnylVOSZyg0bWiVavjiCWAtOE2P1t3rnzpaia-A1HBfuhADMghYGY3bf9lG3jqE-9Oah3mng\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Langkah_3_Upload_File\"><\/span>Langkah 3: Upload File&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" data-src=\"https:\/\/lh7-us.googleusercontent.com\/QvSMKc_twmqH_J-IZJo61iyYUqsSzIPlHMHicgHi3ulFR12xtnqk2TYZLLXXz2Z7ZYpUenkNycU1HXB0w267_qLS9CnaMT9W226_LhamokUFOSFWUQhBlfn1qXErBqVoKNEFk2x8opKcfZhmIgmNnWI\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<p>Kemudian pilih folder atau file website yang ingin anda upload. Klik &#8220;Pilih File&#8221; 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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tertarik_Untuk_Menggunakan_VPS_dengan_teknologi_terbaik_dari_Nevacloud\"><\/span>Tertarik Untuk Menggunakan VPS dengan teknologi terbaik dari Nevacloud?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Jika anda sedang mencari VPS murah dengan teknologi terbaik namun tetap ramah dikantong, Nevacloud punya solusinya! Kunjungi <a href=\"https:\/\/nevacloud.com\/\">Nevacloud <\/a>dan temukan penawaran menariknya!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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. [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":519,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-517","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Cara Membuat Website dan Database di Localhost Xampp Hingga Online - Blog Nevacloud<\/title>\n<meta name=\"description\" content=\"Pelajari langkah-langkah membuat website dan database di localhost Xampp. Mulai dari instalasi hingga online dengan panduan praktis ini.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/nevacloud.com\/blog\/localhost-xampp\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cara Membuat Website dan Database di Localhost Xampp Hingga Online\" \/>\n<meta property=\"og:description\" content=\"Pelajari langkah-langkah membuat website dan database di localhost Xampp. Mulai dari instalasi hingga online dengan panduan praktis ini.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/nevacloud.com\/blog\/localhost-xampp\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Nevacloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/nevacloudhq\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-22T20:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-26T04:26:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/nevacloud.com\/blog\/wp-content\/uploads\/2024\/01\/Cara-Membuat-Website-dan-Database-di-Localhost-Xampp-Hingga-Online-scaled.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1704\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Hiqbal Fauzi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Cara Membuat Website dan Database di Localhost Xampp Hingga Online\" \/>\n<meta name=\"twitter:description\" content=\"Pelajari langkah-langkah membuat website dan database di localhost Xampp. Mulai dari instalasi hingga online dengan panduan praktis ini.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/nevacloud.com\/blog\/wp-content\/uploads\/2024\/01\/Cara-Membuat-Website-dan-Database-di-Localhost-Xampp-Hingga-Online-scaled.webp\" \/>\n<meta name=\"twitter:creator\" content=\"@NevacloudHQ\" \/>\n<meta name=\"twitter:site\" content=\"@NevacloudHQ\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hiqbal Fauzi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/localhost-xampp\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/localhost-xampp\\\/\"},\"author\":{\"name\":\"Hiqbal Fauzi\",\"@id\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/#\\\/schema\\\/person\\\/74bed182425c6117419fa7b5caa51319\"},\"headline\":\"Cara Membuat Website dan Database di Localhost Xampp Hingga Online\",\"datePublished\":\"2024-01-22T20:00:00+00:00\",\"dateModified\":\"2024-01-26T04:26:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/localhost-xampp\\\/\"},\"wordCount\":2273,\"publisher\":{\"@id\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/localhost-xampp\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/Cara-Membuat-Website-dan-Database-di-Localhost-Xampp-Hingga-Online-scaled.webp\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"id\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/localhost-xampp\\\/\",\"url\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/localhost-xampp\\\/\",\"name\":\"Cara Membuat Website dan Database di Localhost Xampp Hingga Online - Blog Nevacloud\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/localhost-xampp\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/localhost-xampp\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/Cara-Membuat-Website-dan-Database-di-Localhost-Xampp-Hingga-Online-scaled.webp\",\"datePublished\":\"2024-01-22T20:00:00+00:00\",\"dateModified\":\"2024-01-26T04:26:41+00:00\",\"description\":\"Pelajari langkah-langkah membuat website dan database di localhost Xampp. Mulai dari instalasi hingga online dengan panduan praktis ini.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/localhost-xampp\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/nevacloud.com\\\/blog\\\/localhost-xampp\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/localhost-xampp\\\/#primaryimage\",\"url\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/Cara-Membuat-Website-dan-Database-di-Localhost-Xampp-Hingga-Online-scaled.webp\",\"contentUrl\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/Cara-Membuat-Website-dan-Database-di-Localhost-Xampp-Hingga-Online-scaled.webp\",\"width\":2560,\"height\":1704,\"caption\":\"Cara Membuat Website dan Database di Localhost Xampp Hingga Online\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/localhost-xampp\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cara Membuat Website dan Database di Localhost Xampp Hingga Online\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/\",\"name\":\"Blog Nevacloud\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/#organization\"},\"alternateName\":\"Nevacloud Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/#organization\",\"name\":\"Nevacloud\",\"alternateName\":\"PT Delta Awan Angkasa\",\"url\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/logo.png\",\"width\":577,\"height\":500,\"caption\":\"Nevacloud\"},\"image\":{\"@id\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/nevacloudhq\",\"https:\\\/\\\/x.com\\\/NevacloudHQ\",\"https:\\\/\\\/www.instagram.com\\\/nevacloud\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/nevacloud-id\",\"https:\\\/\\\/www.youtube.com\\\/@nevacloud\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/#\\\/schema\\\/person\\\/74bed182425c6117419fa7b5caa51319\",\"name\":\"Hiqbal Fauzi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8df9e5856c52bc84147aec3930e562bf42265e09affcb49b5be1264db7b4ab55?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8df9e5856c52bc84147aec3930e562bf42265e09affcb49b5be1264db7b4ab55?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8df9e5856c52bc84147aec3930e562bf42265e09affcb49b5be1264db7b4ab55?s=96&d=mm&r=g\",\"caption\":\"Hiqbal Fauzi\"},\"description\":\"Hiqbal Fauzi merupakan seorang SEO Specialist di DomaiNesia dengan pengalaman yang kuat dalam mengelola dan mengoptimalkan performa website melalui strategi Search Engine Optimization (SEO) yang komprehensif. Ia memiliki keahlian dalam berbagai aspek SEO, mulai dari on-page, off-page, hingga technical SEO, serta terbiasa menggunakan berbagai tools profesional seperti Ahrefs, SEMrush, Moz, Ubersuggest, Google Search Console, dan Google Analytics. Dalam perannya saat ini di DomaiNesia, Hiqbal bertanggung jawab dalam mengelola kualitas konten blog perusahaan, termasuk mengoordinasikan penulisan artikel dengan tim freelance writer melalui penyusunan guideline yang terstruktur. Ia juga aktif melakukan riset keyword untuk menghasilkan strategi konten yang relevan dan kompetitif di mesin pencari. Selain itu, ia menjalankan optimasi off-page seperti link building serta berkolaborasi dengan tim developer untuk mengatasi berbagai permasalahan technical SEO, termasuk error pada schema dan performa website. Hiqbal juga memiliki pengalaman sebelumnya sebagai SEO Specialist di PT Lister Teknologi Edukasi, di mana ia memimpin tim kecil dan bertanggung jawab penuh terhadap pertumbuhan traffic organik serta perolehan leads dari website. Ia mengelola strategi SEO secara menyeluruh, mulai dari perencanaan konten hingga analisis performa bulanan. Sebelumnya, ia juga berkarier di Ruangguru sebagai SEO Associate, dengan fokus pada optimasi platform edukasi untuk meningkatkan peringkat di hasil pencarian (SERP) dan mendatangkan traffic organik. Pengalamannya juga mencakup peran di agensi digital seperti iMpulse Digital, yang memperkaya kemampuannya dalam menangani berbagai klien dari beragam industri. Hiqbal merupakan lulusan dari Universitas Gadjah Mada. Dengan pengalaman yang luas, kemampuan analitis yang kuat, serta pendekatan berbasis data, Hiqbal Fauzi adalah profesional SEO yang mampu memberikan dampak nyata dalam meningkatkan visibilitas dan performa digital bisnis.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/hiqbalfauzi\\\/\"],\"url\":\"https:\\\/\\\/nevacloud.com\\\/blog\\\/author\\\/hiqbal\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cara Membuat Website dan Database di Localhost Xampp Hingga Online - Blog Nevacloud","description":"Pelajari langkah-langkah membuat website dan database di localhost Xampp. Mulai dari instalasi hingga online dengan panduan praktis ini.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/nevacloud.com\/blog\/localhost-xampp\/","og_locale":"id_ID","og_type":"article","og_title":"Cara Membuat Website dan Database di Localhost Xampp Hingga Online","og_description":"Pelajari langkah-langkah membuat website dan database di localhost Xampp. Mulai dari instalasi hingga online dengan panduan praktis ini.","og_url":"https:\/\/nevacloud.com\/blog\/localhost-xampp\/","og_site_name":"Blog Nevacloud","article_publisher":"https:\/\/www.facebook.com\/nevacloudhq","article_published_time":"2024-01-22T20:00:00+00:00","article_modified_time":"2024-01-26T04:26:41+00:00","og_image":[{"width":2560,"height":1704,"url":"https:\/\/nevacloud.com\/blog\/wp-content\/uploads\/2024\/01\/Cara-Membuat-Website-dan-Database-di-Localhost-Xampp-Hingga-Online-scaled.webp","type":"image\/webp"}],"author":"Hiqbal Fauzi","twitter_card":"summary_large_image","twitter_title":"Cara Membuat Website dan Database di Localhost Xampp Hingga Online","twitter_description":"Pelajari langkah-langkah membuat website dan database di localhost Xampp. Mulai dari instalasi hingga online dengan panduan praktis ini.","twitter_image":"https:\/\/nevacloud.com\/blog\/wp-content\/uploads\/2024\/01\/Cara-Membuat-Website-dan-Database-di-Localhost-Xampp-Hingga-Online-scaled.webp","twitter_creator":"@NevacloudHQ","twitter_site":"@NevacloudHQ","twitter_misc":{"Ditulis oleh":"Hiqbal Fauzi","Estimasi waktu membaca":"8 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/nevacloud.com\/blog\/localhost-xampp\/#article","isPartOf":{"@id":"https:\/\/nevacloud.com\/blog\/localhost-xampp\/"},"author":{"name":"Hiqbal Fauzi","@id":"https:\/\/nevacloud.com\/blog\/#\/schema\/person\/74bed182425c6117419fa7b5caa51319"},"headline":"Cara Membuat Website dan Database di Localhost Xampp Hingga Online","datePublished":"2024-01-22T20:00:00+00:00","dateModified":"2024-01-26T04:26:41+00:00","mainEntityOfPage":{"@id":"https:\/\/nevacloud.com\/blog\/localhost-xampp\/"},"wordCount":2273,"publisher":{"@id":"https:\/\/nevacloud.com\/blog\/#organization"},"image":{"@id":"https:\/\/nevacloud.com\/blog\/localhost-xampp\/#primaryimage"},"thumbnailUrl":"https:\/\/nevacloud.com\/blog\/wp-content\/uploads\/2024\/01\/Cara-Membuat-Website-dan-Database-di-Localhost-Xampp-Hingga-Online-scaled.webp","articleSection":["Blog"],"inLanguage":"id"},{"@type":"WebPage","@id":"https:\/\/nevacloud.com\/blog\/localhost-xampp\/","url":"https:\/\/nevacloud.com\/blog\/localhost-xampp\/","name":"Cara Membuat Website dan Database di Localhost Xampp Hingga Online - Blog Nevacloud","isPartOf":{"@id":"https:\/\/nevacloud.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/nevacloud.com\/blog\/localhost-xampp\/#primaryimage"},"image":{"@id":"https:\/\/nevacloud.com\/blog\/localhost-xampp\/#primaryimage"},"thumbnailUrl":"https:\/\/nevacloud.com\/blog\/wp-content\/uploads\/2024\/01\/Cara-Membuat-Website-dan-Database-di-Localhost-Xampp-Hingga-Online-scaled.webp","datePublished":"2024-01-22T20:00:00+00:00","dateModified":"2024-01-26T04:26:41+00:00","description":"Pelajari langkah-langkah membuat website dan database di localhost Xampp. Mulai dari instalasi hingga online dengan panduan praktis ini.","breadcrumb":{"@id":"https:\/\/nevacloud.com\/blog\/localhost-xampp\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/nevacloud.com\/blog\/localhost-xampp\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/nevacloud.com\/blog\/localhost-xampp\/#primaryimage","url":"https:\/\/nevacloud.com\/blog\/wp-content\/uploads\/2024\/01\/Cara-Membuat-Website-dan-Database-di-Localhost-Xampp-Hingga-Online-scaled.webp","contentUrl":"https:\/\/nevacloud.com\/blog\/wp-content\/uploads\/2024\/01\/Cara-Membuat-Website-dan-Database-di-Localhost-Xampp-Hingga-Online-scaled.webp","width":2560,"height":1704,"caption":"Cara Membuat Website dan Database di Localhost Xampp Hingga Online"},{"@type":"BreadcrumbList","@id":"https:\/\/nevacloud.com\/blog\/localhost-xampp\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/nevacloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Cara Membuat Website dan Database di Localhost Xampp Hingga Online"}]},{"@type":"WebSite","@id":"https:\/\/nevacloud.com\/blog\/#website","url":"https:\/\/nevacloud.com\/blog\/","name":"Blog Nevacloud","description":"","publisher":{"@id":"https:\/\/nevacloud.com\/blog\/#organization"},"alternateName":"Nevacloud Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/nevacloud.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/nevacloud.com\/blog\/#organization","name":"Nevacloud","alternateName":"PT Delta Awan Angkasa","url":"https:\/\/nevacloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/nevacloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/nevacloud.com\/blog\/wp-content\/uploads\/2024\/02\/logo.png","contentUrl":"https:\/\/nevacloud.com\/blog\/wp-content\/uploads\/2024\/02\/logo.png","width":577,"height":500,"caption":"Nevacloud"},"image":{"@id":"https:\/\/nevacloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/nevacloudhq","https:\/\/x.com\/NevacloudHQ","https:\/\/www.instagram.com\/nevacloud\/","https:\/\/www.linkedin.com\/company\/nevacloud-id","https:\/\/www.youtube.com\/@nevacloud"]},{"@type":"Person","@id":"https:\/\/nevacloud.com\/blog\/#\/schema\/person\/74bed182425c6117419fa7b5caa51319","name":"Hiqbal Fauzi","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/secure.gravatar.com\/avatar\/8df9e5856c52bc84147aec3930e562bf42265e09affcb49b5be1264db7b4ab55?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/8df9e5856c52bc84147aec3930e562bf42265e09affcb49b5be1264db7b4ab55?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8df9e5856c52bc84147aec3930e562bf42265e09affcb49b5be1264db7b4ab55?s=96&d=mm&r=g","caption":"Hiqbal Fauzi"},"description":"Hiqbal Fauzi merupakan seorang SEO Specialist di DomaiNesia dengan pengalaman yang kuat dalam mengelola dan mengoptimalkan performa website melalui strategi Search Engine Optimization (SEO) yang komprehensif. Ia memiliki keahlian dalam berbagai aspek SEO, mulai dari on-page, off-page, hingga technical SEO, serta terbiasa menggunakan berbagai tools profesional seperti Ahrefs, SEMrush, Moz, Ubersuggest, Google Search Console, dan Google Analytics. Dalam perannya saat ini di DomaiNesia, Hiqbal bertanggung jawab dalam mengelola kualitas konten blog perusahaan, termasuk mengoordinasikan penulisan artikel dengan tim freelance writer melalui penyusunan guideline yang terstruktur. Ia juga aktif melakukan riset keyword untuk menghasilkan strategi konten yang relevan dan kompetitif di mesin pencari. Selain itu, ia menjalankan optimasi off-page seperti link building serta berkolaborasi dengan tim developer untuk mengatasi berbagai permasalahan technical SEO, termasuk error pada schema dan performa website. Hiqbal juga memiliki pengalaman sebelumnya sebagai SEO Specialist di PT Lister Teknologi Edukasi, di mana ia memimpin tim kecil dan bertanggung jawab penuh terhadap pertumbuhan traffic organik serta perolehan leads dari website. Ia mengelola strategi SEO secara menyeluruh, mulai dari perencanaan konten hingga analisis performa bulanan. Sebelumnya, ia juga berkarier di Ruangguru sebagai SEO Associate, dengan fokus pada optimasi platform edukasi untuk meningkatkan peringkat di hasil pencarian (SERP) dan mendatangkan traffic organik. Pengalamannya juga mencakup peran di agensi digital seperti iMpulse Digital, yang memperkaya kemampuannya dalam menangani berbagai klien dari beragam industri. Hiqbal merupakan lulusan dari Universitas Gadjah Mada. Dengan pengalaman yang luas, kemampuan analitis yang kuat, serta pendekatan berbasis data, Hiqbal Fauzi adalah profesional SEO yang mampu memberikan dampak nyata dalam meningkatkan visibilitas dan performa digital bisnis.","sameAs":["https:\/\/www.linkedin.com\/in\/hiqbalfauzi\/"],"url":"https:\/\/nevacloud.com\/blog\/author\/hiqbal\/"}]}},"_links":{"self":[{"href":"https:\/\/nevacloud.com\/blog\/wp-json\/wp\/v2\/posts\/517","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nevacloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nevacloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nevacloud.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/nevacloud.com\/blog\/wp-json\/wp\/v2\/comments?post=517"}],"version-history":[{"count":2,"href":"https:\/\/nevacloud.com\/blog\/wp-json\/wp\/v2\/posts\/517\/revisions"}],"predecessor-version":[{"id":549,"href":"https:\/\/nevacloud.com\/blog\/wp-json\/wp\/v2\/posts\/517\/revisions\/549"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nevacloud.com\/blog\/wp-json\/wp\/v2\/media\/519"}],"wp:attachment":[{"href":"https:\/\/nevacloud.com\/blog\/wp-json\/wp\/v2\/media?parent=517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nevacloud.com\/blog\/wp-json\/wp\/v2\/categories?post=517"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nevacloud.com\/blog\/wp-json\/wp\/v2\/tags?post=517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}