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

Apache merupakan web server yang harus dijalankan agar website Anda bisa diakses di localhost. Untuk praktek kali ini kita hanya perlu untuk menjalankan apache saja karena belum menggunakan database.

Membuat Folder Project

Agar website localhost XAMPP bisa diakses, Anda perlu menyimpan folder project website Anda di dalam direktori C:\xampp\htdocs. Pada tutorial cara membuat website di localhost ini, kami membuat folder dengan nama CodeJam.

Buka Visual Studio Code

Nyalakan Auto Save Jika Diperlukan
Click Open Folder
Lalu Cari folder yang sudah dibuat tadi

Buat Folder Sesuaikan Nama Folder dan filenya. (Yang Ada Tanda Panah Artinya Folder)
Buat Lagi Folder Di Dalam Folder ASSETS, namai folder FOTO
Isi file foto foto yang akan kamu masukkan nantinya ke dalam folder FOTO secara manual melalui file explorer laptop. Isikan foto dirimu, foto random untuk logo, gambar whatsapp tanpa background, dan gambar instagram tanpa background Lalu Masuk Ke index.html, ketikkan shift dan 1 lalu press enter
Maka Akan Muncul Berikut

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

Ubah title menjadi Biodataku
Lalu di bawah title ketikkan link:favicon lalu tekan enter maka akan muncul berikut

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Hapus isi dari hrefnya, lalu ketikkan ASSETS/FOTO/namafilefotologokalian
Di dalam folder style, buatlah 3 file css seperti ini

Sesuaikan namanya dengan yang ada di gambar atas

<link rel="stylesheet" href="style/styleindex.css">

Lalu buat ini di bawah link favicon tadi
Lalu sesuaikan isi file index dengan code berikut

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Biodataku</title>
  <link rel="shortcut icon" href="ASSETS/FOTO/logo.jpg" type="image/x-icon">
  <link rel="stylesheet" href="style/styleindex.css">
</head>
<body>
  <h1 style="text-align: center">Halaman Biodataku</h1>
    <img src="ASSETS/FOTO/fotoku.jpg" alt="fotoku" class="fotoku" />
    <div class="center">
      <h2>Haloo Semuaa</h2>
      <h3>Perkenalkan Namaku Primavieri Rhesa Ardana</h3>
      <h3>Aku biasa dipanggil Prima</h3>
      <h3>Asalku dari Semarang</h3>
      <h3>Aku Berkuliah Di Udinus</h3>
      <h3>Follow My Social Media:</h3>
      <a href="https://www.instagram.com/prmvri" class="sosmed">
        <img
          src="ASSETS/FOTO/ig.png"
          width="15%"
          height="15%"
          alt="gambarig"
        />
      </a>

      <a href="https://wa.me/+6285740125693" class="sosmed">
        <img
          src="ASSETS/FOTO/wa.png"
          width="15%"
          height="15%"
          alt="gambarwa"
        />
      </a>
     
      <h3>
        <a href="DataDiri.html">Halaman Data Diri</a>
      </h3>
    </div>
</body>
</html>

Untuk instagram dan whatsapp bisa disesuaikan dengan nama instagram serta nomor masing-masing dengan mengubah isi href di bawah tulisan
<div class=”flex”>
Untuk nama file foto kalau bisa disesuaikan juga seperti berikut

Lalu kita masuk ke file styleindex.css yang ada di dalam folder style, tuliskan berikut

.center {
    margin: auto;
    width: 50%;
    padding: 10px;
    text-align: center;
  }
  
  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid black;
  }
  
  .sosmed {
    margin: 0 10px;
  }
  
  .sosmed img {
    width: 50px;
    height: 50px;
  }
  
  body {
      background-color: skyblue;
    }
  
  .fotoku {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    
  }

Sekarang Masuk ke DataDiri.html , lakukan cara yang sama seperti tadi cantumkan link favicon dan link css.
Untuk link css DataDiri.html , rubah pada bagian hrefnya sesuai dengan file css yang sudah kita buat tadi yaitu styledatadiri.css seperti berikut

<link rel="stylesheet" href="style/styledatadiri.css">

Lalu tuliskan sesuai dengan berikut

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Diri</title>
    <link rel="shortcut icon" href="ASSETS/FOTO/logo.jpg" type="image/x-icon">
    <link rel="stylesheet" href="style/styledatadiri.css">
</head>
<body style="background-color: rgb(196, 153, 221);">
    <h1 style="text-align: center;">Data Diri</h1>
    <table>
    <th colspan="2" style="color: white;">Data Diri</th> 

    <form method="post" action="DataDiriDisplay.php">
    <tr> 
        <td>Nama Lengkap</td> <td><input type="text" name="lkp" size="50"></td>
    </tr>
    <tr>    
        <td>Nama Panggilan</td> <td><input type="text" name="pgl" size="50"></td>
    </tr>
    <tr> 
        <td>Agama</td>
    <td>
            <select name="agama">
                <option value="ISLAM"> ISLAM <br>
                <option value="KRISTEN"> KRISTEN <br>
                <option value="KATOLIK"> KATOLIK <br>
                <option value="HINDU"> HINDU <br>
                <option value="BUDHA"> BUDHA <br>
                <option value="KONGHUCHU"> KONGHUCHU <br>
            </select>
       
    </td>
    </tr>
    <tr> 
        <td>Jenis Kelamin</td>
    <td>
           
            <select name="gender">
                <option value="Laki-Laki"> Laki-Laki <br>
                <option value="Perempuan"> Perempuan <br>
            </select>
       
    </td>
    </tr>
    <tr> 
        <td>Alamat</td>
    <td>
            <textarea style="width: 400px; height: 100px;" wrap="physical" name="alamat">
            </textarea> <br>            
       
    </td>
    </tr>
    <tr> 
        <td>Hobi</td>

    <td>
       
            <input type="radio" name="hobi" value="Membaca" > Membaca 
            <input type="radio" name="hobi" value="Menulis"> Menulis 
            <input type="radio" name="hobi" value="Menyanyi"> Menyanyi 
            <input type="radio" name="hobi" value="Ngoding"> Ngoding 
            <input type="radio" name="hobi" value="Makan"> Makan 
            <input type="radio" name="hobi" value="Tidur"> Tidur 
        </td>
    </tr>
    <tr> 
        <td>Makanan Favorit</td>
        <td>
            
            <input type="checkbox" name="makanan[]" value="Soto"> Soto 
            <input type="checkbox" name="makanan[]" value="Bakso"> Bakso 
            <input type="checkbox" name="makanan[]" value="Nasi Goreng"> Nasi Goreng 
            
        </td>
    </tr>   
    <tr>
        
            <td>
                Action
            </td>
            <td>
                <input type="submit" value="Simpan" name="submit">
                <input type="reset" value="Reset" name="reset">
            </td>
        
        
    </tr>
</form>
    
</table>
<h3 style="text-align: center;" ><a href="index.html" style="text-decoration: none; color: black;">Klik Ini Untuk Masuk Ke Laman Biodata</a></h3>
</body>
</html>

Untuk hobi dan makanan favorit boleh dikreasikan jika ingin menambah lagi, sesuaikan antara value dan nama nya
Lalu masuk ke file styledatadiri.css lalu tuliskan berikut

table {
    margin-left: auto; 
    margin-right: auto; 
    border: 1px solid black;
    border-collapse: collapse; 
    background-color:cornflowerblue ;
}

table,th,td {
    border: 3px solid black;
    padding: 10px;
    text-align: center;
}

td{
    color: white;
}

Lalu masuk ke file DataDiriDisplay.php. Lakukan hal seperti tadi shift dan 1, lalu ubah nama titlenya
Jangan lupakan 2 hal ini juga

    <link rel="shortcut icon" href="ASSETS/FOTO/logo.jpg" type="image/x-icon">
    <link rel="stylesheet" href="style/styledisplay.css">

Tuliskan kode berikut

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Database Data Diri</title>
    <link rel="shortcut icon" href="ASSETS/FOTO/logo.jpg" type="image/x-icon">
    <link rel="stylesheet" href="style/styledisplay.css">

</head>

<body style="background-color: cornflowerblue;">
    <h1 style="text-align:center; color: white;"> Display Data Diri</h1>
    <table>


        <tr>
            <th style="padding: 15px;">Nama Lengkap</th>
            <th style="padding: 15px;">Nama Panggilan</th>
            <th style="padding: 15px;">Agama</th>
            <th style="padding: 15px;">Gender</th>
            <th style="padding: 15px;">Alamat</th>
            <th style="padding: 15px;">Hobi</th>
            <th style="padding: 15px;">Makanan Favorit</th>

        </tr>
        <tr>
            <td><?php echo $_POST["lkp"]; ?></td>
            <td><?php echo $_POST["pgl"]; ?></td>
            <td><?php echo $_POST["agama"]; ?></td>
            <td><?php echo $_POST["gender"]; ?></td>
            <td><?php echo $_POST["alamat"]; ?></td>
            <td><?php echo $_POST["hobi"]; ?></td>
            <td>
                <?php
                if (isset($_POST['submit'])) {
                    if (!empty($_POST['makanan'])) {

                        $checked_count = count($_POST['makanan']);
                        echo "Kamu suka " . $checked_count . " makanan : <br/>";

                        foreach ($_POST['makanan'] as $selected) {
                            echo "<p>" . $selected . "</p>";
                        }
                    } else {
                        echo "<b>Tidak memilih <br> makanan</b>";
                    }
                }
                ?>
            </td>

        </tr>


    </table>
    <h3 style="text-align: center;"><a href="DataDiri.html" style="text-decoration: none; color: black;">Klik Untuk
            Kembali Ke Form
            Data Diri</a></h3>
</body>

</html>

Perhatikan benar-benar penulisannya
Masuk ke file styledisplay.css , tuliskan berikut

table,th,td {
    border: 3px solid black;
    padding: 10px;
    text-align: center;
}

td,th {
        text-align: center;
        color: black;
    }

table {
        margin-left: auto;
        margin-right: auto;
        border: 1px solid black;
        border-collapse: collapse;
        background-color: white;
    }