Menggunakan XAMPP untuk Membuat Website Localhost

XAMPP

Ada beberapa opsi untuk menghosting website secara lokal. Salah satunya adalah menggunakan local web stack untuk membangun website, seperti XAMPP. Keuntungan terbesar dari strategi ini adalah memungkinkan Kamu untuk memiliki kendali penuh atas website Kamu.

Selanjutnya, XAMPP memastikan bahwa situs lokal Kamu tetap sepenuhnya pribadi dan tidak dapat diakses oleh orang lain. Kekurangannya agak ribet settingnya. Untuk menjalankannya, Kamu harus menginstal XAMPP dan menginstal WordPress secara manual.

Berikut adalah tutorialnya;

1.    Menjalankan XAMPP

Langkah pertama dalam membuat website di localhost adalah menginstal XAMPP. Untuk melakukannya, buka aplikasi XAMPP lalu klik tombol Start di sebelah modul Apache dan MySQL, seperti yang terlihat di bawah ini:

Apache adalah web server yang harus diinstal dan dijalankan agar website Kamu dapat diakses di localhost. Kamu memerlukan MySQL untuk membuat website dengan kemampuan manajemen basis data.

Kamu akan diberikan akses untuk membuat database di localhost/phpmyadmin setelah mengaktifkannya.

2.    Membuat Folder di htdocs

Kamu harus menyimpan folder proyek website Kamu di direktori C:\xampp\htdocs agar websitelocalhost XAMPP dapat diakses. Tutorial ini akan menggunakan folder webproject sebagai contoh.

3.    Membuat Database

Selanjutnya, buka localhost/phpmyadmin di browser web Kamu. Kamu akan melihat sesuatu seperti berikut:

Buat database baru yang akan digunakan untuk proyek website Kamu di halaman tersebut. Untuk melakukannya, klik New.

Kemudian, di bidang yang diberikan, ketik nama database. Contoh kali ini adalah db_webproject. Klik tombol Create jika Kamu sudah memutuskan nama untuk database yang akan Kamu buat.

Kamu akan dibawa ke halaman di mana Kamu bisa membuat tabel di database baru. Sebagai contoh, buat tabel absensi dengan empat kolom.

Kemudian, pada tabel tersebut, tambahkan empat atribut berikut:

  • id – Untuk menyimpan id database yang dimasukkan. Pilih INT sebagai tipe database, dan centang kotak di bagian A_I (Auto Increment).
  • nama – Untuk menyimpan nama. Pilih VARCHAR sebagai tipe database, lalu atur Length/Values menjadi 500.
  • divisi – Untuk menyimpan nama divisi. Pilih VARCHAR sebagai tipe database, lalu atur Length/Values menjadi 100.
  • waktu_kehadiran – Untuk melacak data saat pengguna melakukan absensi. Sebagai tipe database, pilih TIMESTAMP.

Untuk membuat tabel, klik tombol Simpan setelah menentukan atribut di atas. Jadi sekarang, Kamu memiliki database baru untuk menyimpan data kehadiran untuk website absensi sederhana.

4.    Menyiapkan File Website

Kamu membangun database di tahap sebelumnya. Sekarang Kamu harus menyiapkan file untuk proyek website Kamu.

Caranya adalah dengan menggunakan editor kode untuk membuka folder htdocs yang Kamu buat sebelumnya. Kemudian, di folder itu, buat file bernama index.php dan salin kode berikut:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73 74 75 76 77 78 79 80 81 82 83 84
























<?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 Kamu”>                    
</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>













Contoh kode diatas menggunakan salah satu kerangka kerja CSS, Bootstrap online. Oleh karena itu, kode tampilan hanya akan berfungsi jika terhubung ke internet. Tetapi, Bootstrap juga dapat digunakan secara offline.

5.    Menghubungkan Database dengan Website

Sekalipun file website Kamu sudah lengkap, akan ada pesan error terkait database. Ini karena website tidak ditautkan ke database yang Kamu buat di localhost/phpmyadmin.

Buat file baru bernama connection.php untuk menautkan website ke database. Kemudian salin kode di bawah ini:

1
2
3
4
5
6
7
8
9


<?php   

$dbHost = ‘localhost’;
$dbName = ‘db_webproject’; //ubah dengan nama database Kamu
$dbUsername = ‘root’;
$dbPassword = ”;   

$mysqli = mysqli_connect($dbHost, $dbUsername, $dbPassword, $dbName);
?>


Ganti nilai baris kode $dbName dengan nama database yang sedang Kamu kerjakan. Jangan lupa simpan hasil modifikasi file tersebut dengan menekan CTRL+S pada keyboard.

6.    Mengakses Localhost Website

 Untuk mengunjungi website yang baru dibuat, cukup navigasikan ke localhost/nama folder di browser Kamu. Dalam tutorial ini adalah localhost/webproject.

Cobalah untuk mengisi formulir dengan informasi. Kemudian Kamu akan melihat sesuatu seperti berikut ini:

Kamu sekarang telah berhasil membuat website di localhost menggunakan XAMPP.

Temukan informasi seputar teknologi lainnya di blog Cloud Raya. Anda juga bisa mengunjungi Knowledge Base Cloud Raya untuk mendapatkan tutorial bermanfaat seputar teknologi dan Cloud Raya.

Facebook
Twitter
LinkedIn

Ready, Set, Cloud

Ready, Set, Cloud

SIGN UP NOW