CARA BUAT FORM LOGIN GOOGLE SITES

Hai, sobat CaraLain! 👋
Pernahkah kalian berpikir untuk membuat halaman login keren di Google Sites? Nah, kabar baiknya, kalian bisa melakukannya! Di tutorial ini, saya akan memandu kalian langkah demi langkah untuk membuat halaman login yang tampak profesional menggunakan HTML, CSS, dan JavaScript. Jadi, siapkan secangkir kopi dan mari kita mulai!

Langkah 1: Buat Halaman Baru di Google Sites

Pertama, kalian perlu membuat halaman baru di Google Sites.
(1) Buat halaman baru;
(2) Pilih "Sematan halaman penuh";
(3) Ketik nama halaman, misal Login. Kemudian klik "Selesai";
(4) Pilih "Tambahkan sematan";
(5) Kemudian Copy Paste kode HTML nya.

Langkah 2: Siapkan Kode HTML, CSS dan JS

Kode HTML, CSS dan JS akan halaman login kita. Berikut adalah contoh kode HTML yang bisa kalian gunakan:

<!DOCTYPE html>
<html>
  <head>
    <title>Login Form</title>

    <style>
      /* CSS untuk text input */
      .inputtext {
        width: 100%;
        margin-bottom: 15px;
        padding: 10px;
        border: none;
        border-radius: 20px;
        background-color: #f2f2f2;
        font-size: 16px;
        color: #333;
        box-sizing: border-box;
      }

      /* CSS tombol login */
      .tombol {
        width: 100%;
        padding: 10px;
        border: none;
        border-radius: 20px;
        background-color: #3498db;
        color: #fff;
        font-size: 16px;
        cursor: pointer;
        text-transform: uppercase;
      }


      /* CSS kotak login */
      .login-box {
        width: 350px;
        margin: 50px auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 20px;
        background-color: #fff;
        box-sizing: border-box;
      }

      /* CSS untuk logo */
      .logo {
        display: block;
        margin: 0 auto 30px;
        width: 150px;
        height: auto;
      }
    </style>

  </head>
  <body>

    <div class="login-box">
      <img class="logo" src="link logo" alt="Logo">

      <form>
        <input type="text" name="username" placeholder="Username" class="inputtext">
        <input type="password" name="password" placeholder="Password" class="inputtext">
        <input type="button" value="Login" class="tombol" onclick="login()">
      </form>
    </div>

    <script>
      function login() {
        var username = document.getElementsByName("username")[0].value;

        var password = document.getElementsByName("password")[0].value;

        if (username == "username" && password == "password") {
          window.open(" url halaman yang dituju ", "_blank");
        } else {
          alert("Username atau password salah!");
        }
      }
    </script>
  </body>
</html>

Copy dan paste kode di atas pada halaman embed. kemudian edit tiga bagian berikut:
link logo : link gambar logo. Misal : https://cdn-icons-png.flaticon.com/128/3293/3293466.png
username : isi dengan username, misal admin
password : isi password, misal: admin
url halaman yang dituju : url halaman yang ditampilkan saat login berhasil. Misal : https://www.caralain.my.id/2024/05/cara-buat-form-login-google-sites.html

Langkah 3: Uji Halaman Login Kalian

Sekarang, saatnya untuk menguji halaman login yang sudah kita buat. Buka halaman Google Sites kalian dan coba masukkan username dan password. Jika kalian memasukkan , user name dan password yang benar. maka kalian akan diarahkan kehalaman web yang tertera. Jika tidak, kalian akan melihat pesan "Usernam atau password salah".

Contohnya, hasilnya klik disini.
Akses dengan User name : admin. Password : admin.

Selamat mencoba. Jika ada pertanyan, ketik di kolom komentar.