Langsung ke konten utama

lanjutan projek situs web LOGIN PAGE

 Mendesain Login Page yang Simple & Elegan

( institut sains dan teknolohi nasional )


    halo para pembaca dan teman-teman bagimana kabar kalian?semoga sehat selalu yaa, oke baik pada pembahasan sebelumnya kita sudah membahas hal yang lucu dan juga kocak tentang membuat animasi gambar dengan metademolab, nah pada pembahasan lanjutan ini kita akan membahas projek lanjutan situs web yang sebelumnya sudah dibuat, wahh mau tau kelanjutannya?makanya ikuti terus pembahasannya di postingan kali ini yukk..

Mau tau cerita pkl di hari ke-32?

Cerita PKL Hari ke-32

Pagi itu aku terbangun lebih awal dari biasanya. Setelah membuka mata dan meregangkan badan sebentar, aku segera beranjak untuk melaksanakan sholat Subuh. Suasana masih tenang dan udara pagi yang sejuk membuat hati terasa damai. Selesai sholat, aku duduk sejenak sambil merencanakan kegiatan hari ini.

Tak lama kemudian, aku menuju kamar mandi untuk mandi pagi. Air dingin menyegarkan tubuh dan membuat rasa kantuk hilang sepenuhnya. Setelah itu, aku mengenakan seragam rapi khas PKL, memastikan semuanya siap agar tampak sopan dan rapih.

Setelah semua siap, aku mengambil kunci motor, lalu berangkat menuju kampus. Perjalanan pagi terasa menyenangkan, jalanan belum terlalu ramai dan angin pagi menemani sepanjang jalan. Sesampainya di kampus, aku langsung memarkirkan motor di area parkiran yang sudah disediakan.

Dengan langkah mantap, aku berjalan menuju laboratorium komputer, tempat utama kegiatan PKL kami berlangsung. Sesampainya di sana, beberapa teman sudah terlihat hadir. Kami saling menyapa dengan senyum hangat.

Kegiatan pagi dimulai dengan piket bersama rekan-rekan PKL lainnya. Ada yang menyapu, ada yang merapikan meja, dan ada pula yang membersihkan komputer serta peralatan lain. Suasana kerja sama terasa begitu kental, semua bergotong royong agar laboratorium tetap bersih dan nyaman digunakan.

Hari ke-32 PKL ini pun dimulai dengan penuh semangat, kebersamaan, dan rasa tanggung jawab bersama.


Dari Login Page, Form Data Pribadi, hingga Tabel Interaktif

1. Membuat Login Page

a. HTML Login Page

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Login Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="login-container">
    <h2>Login</h2>
    <form>
      <label for="username">Username</label>
      <input type="text" id="username" name="username" required>

      <label for="password">Password</label>
      <input type="password" id="password" name="password" required>

      <button type="submit">Login</button>
    </form>
  </div>
</body>
</html>

b. CSS Login Page (modern)

body {
  font-family: Arial, sans-serif;
  background: linear-gradient(to right, #6a11cb, #2575fc);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.login-container {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  width: 300px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

input, button {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border-radius: 6px;
  border: 1px solid #ccc;
}

input:focus {
  border-color: #2575fc;
  box-shadow: 0 0 6px #6a11cb;
  outline: none;
}

button {
  background: #2575fc;
  color: #fff;
  border: none;
  cursor: pointer;
}

button:hover {
  background: #6a11cb;
  transition: 0.3s;
}

2. Form Data Pribadi

a. HTML Form

<form id="formWarga">
  <fieldset>
    <legend>Data Pribadi</legend>

    <label for="nama">Nama Lengkap</label><br>
    <input id="nama" name="nama" type="text" placeholder="Nama lengkap" required><br><br>

    <label for="nik">NIK (16 digit)</label><br>
    <input id="nik" name="nik" type="text" inputmode="numeric" pattern="\d{16}" placeholder="3201010101010101" required><br><br>

    <label>Jenis Kelamin</label><br>
    <input type="radio" name="jk" value="Laki-laki" required> Laki-laki
    <input type="radio" name="jk" value="Perempuan"> Perempuan<br><br>

    <label for="tmplahir">Tempat Lahir</label><br>
    <input id="tmplahir" name="tmplahir" type="text"><br><br>

    <label for="tgllahir">Tanggal Lahir</label><br>
    <input id="tgllahir" name="tgllahir" type="date" required><br><br>

    <label for="agama">Agama</label><br>
    <select id="agama" name="agama" required>
      <option value="">-- pilih --</option>
      <option>Islam</option>
      <option>Kristen</option>
      <option>Katolik</option>
      <option>Hindu</option>
      <option>Buddha</option>
      <option>Konghucu</option>
    </select><br><br>

    <label for="alamat">Alamat</label><br>
    <textarea id="alamat" name="alamat" rows="3" required></textarea><br><br>

    <label for="waktuDaftar">Waktu Pendaftaran</label><br>
    <input id="waktuDaftar" name="waktuDaftar" type="time"><br><br>
  </fieldset>

  <fieldset>
    <legend>Keamanan Akun (opsional)</legend>
    <label for="username">Username</label><br>
    <input id="username" name="username" type="text"><br><br>

    <label for="password">Password</label><br>
    <input id="password" name="password" type="password"><br><br>
  </fieldset>

  <button type="submit">Daftar</button>
  <button type="reset">Reset</button>
</form>

📌 Di sini sesuai persis dengan form yang kamu buat dari pertanyaan awal.

3. CSS untuk Form (warna + hover + fokus)

form {
  width: 500px;
  margin: 40px auto;
  background: #f9f9f9;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

fieldset {
  border: 2px solid #2575fc;
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 15px;
}

legend {
  font-weight: bold;
  color: #2575fc;
}

input, textarea, select {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border-radius: 6px;
  border: 1px solid #ccc;
}

input:focus, textarea:focus, select:focus {
  border-color: #2575fc;
  box-shadow: 0 0 6px #6a11cb;
  outline: none;
  transition: 0.3s;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  background: #2575fc;
  color: #fff;
  cursor: pointer;
}

button:hover {
  background: #6a11cb;
  transition: 0.3s;
}

📌 Form terlihat rapi, warna biru elegan, dengan efek hover & fokus halus.

4. Membuat Tabel Interaktif

a. HTML Tabel

<table border="1" cellspacing="0" cellpadding="10">
  <tr>
    <th>No</th>
    <th>Gambar</th>
    <th>Embed Google Maps</th>
    <th>Embed YouTube</th>
    <th>Link ke WhatsApp</th>
    <th>Link ke Email</th>
  </tr>
  <tr>
    <td>1</td>
    <td><img src="mobil.jpg" width="150"></td>
    <td>
      <iframe src="URL_MAPS" width="300" height="200"></iframe><br>
      <a href="https://maps.google.com">Buka di Google Maps</a>
    </td>
    <td>
      <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="300" height="200"></iframe><br>
      <a href="https://youtu.be/dQw4w9WgXcQ">Tonton di YouTube</a>
    </td>
    <td>
      <a href="https://wa.me/6281234567890" target="_blank">Chat WhatsApp</a>
    </td>
    <td>
      <a href="mailto:contoh@gmail.com">Kirim via Gmail</a>
    </td>
  </tr>
</table>

b. CSS Tabel

table {
  border-collapse: collapse;
  width: 100%;
  margin: 30px auto;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

th {
  background: #2575fc;
  color: white;
  padding: 12px;
}

td {
  border: 1px solid #ddd;
  padding: 15px;
  text-align: center;
}

tr:hover {
  background: #f0f8ff;
  transition: 0.3s;
}

img:hover {
  transform: scale(1.05);
  transition: 0.3s;
}

📌 Tabel jadi lebih elegan, dengan bayangan, hover, dan gambar interaktif.

5. Kesimpulan

Dari rangkaian ini kita belajar:

  1. Membuat Login Page sederhana dengan HTML & CSS modern.

  2. Membuat Form Data Pribadi lengkap (Nama, NIK, JK, Alamat, Agama, Username/Password).

  3. Mendesain dengan CSS modern (warna, hover, fokus).

  4. Membuat Tabel interaktif berisi gambar, peta Google Maps, YouTube, WhatsApp, dan Email.

Komentar

Posting Komentar

Postingan populer dari blog ini

Penggunaan Tools AI Emergent.sh dalam Pembuatan Situs Web

 Penggunaan Tools AI Emergent.sh dalam Pembuatan Situs Web ( institut sains dan teknologi nasional )      Perkembangan teknologi kecerdasan buatan (Artificial Intelligence/AI) telah membawa perubahan signifikan dalam berbagai bidang, termasuk dalam pengembangan situs web. Salah satu inovasi yang menarik perhatian dalam beberapa tahun terakhir adalah hadirnya platform Emergent.sh , sebuah layanan berbasis AI yang memungkinkan pengguna membuat situs web atau aplikasi secara otomatis hanya dengan memberikan instruksi dalam bentuk teks. Platform ini menjadi contoh nyata bagaimana teknologi AI dapat berfungsi sebagai asisten digital yang menggantikan sebagian besar proses teknis yang sebelumnya harus dilakukan secara manual oleh seorang pengembang web. Secara konseptual, Emergent.sh bekerja berdasarkan pendekatan multi-agent system , yaitu sistem yang terdiri dari beberapa agen kecerdasan buatan yang memiliki peran dan tanggung jawab berbeda. Setiap agen berfungsi sepert...
Posting Komentar
Baca selengkapnya

Hari Pertama PKL di ISTN: Awal Perjalanan Seru!

         cerita hari pertama pkl di (ISTN)  institut sains dan teknologi nasional  Cerita Hari Pertama PKL      Hari pertama PKL akhirnya tiba. Sejak malam sebelumnya, perasaan gugup dan antusias bercampur jadi satu. saya bangun lebih awal dari biasanya, mempersiapkan pakaian rapi dan segala perlengkapan yang diperlukan. Tepat pukul 07.00, saya sudah berangkat menuju tempat PKL: (ISTN) institut sains dan teknologi nasional , sebuah kampus universitas yang bergerak di bidang pengajaran berbasis sains dan teknologi.      Sesampainya di sana, suasana kampus masih cukup tenang. saya disambut oleh satpam dengan ramah dan kami langsung diarahkan ke ruang administrasi. Tak lama kemudian, pembimbing lapangan kami, Pak Ariadi , datang dan mengajak kami ke lab komputer. Ia memperkenalkan saya pada tempat saya akan melakukan pkl  serta  beliau memberikan kesempatan untuk memperkenalkan diri kami masing-masing. Kegiatan dila...
Posting Komentar
Baca selengkapnya

Level Up! Keseruan Hari Kedua PKL di ISTN

  cerita aktifitas pkl di hari kedua ISTN  (institut sains dan teknologi nasional) cerita di hari kedua pkl dan aktivitasnya Cerita Hari Kedua PKL Hari kedua PKL terasa lebih sibuk dibandingkan hari pertama, tapi tetap penuh pengalaman baru. Pagi-pagi, saya sudah datang lebih awal untuk memastikan tidak ada yang terlewat. Begitu sampai, saya langsung bertegur sapa dan bertemu dengan rekan-rekan teman saya dan pembimbing. Kegiatan dimulai dengan melanjutkan pekerjaan yang sudah diberikan, tetapi kali ini saya mulai lebih paham alurnya. Pembimbing kami PAK ARIADI   memberikan arahan tambahan dan tips agar pekerjaan lebih cepat selesai tanpa mengurangi kualitas. Saya juga diberi kesempatan mencoba tugas baru yang diberikan, sehingga bisa menambah keterampilan. Di sela-sela pekerjaan, saya sempat berbincang dengan teman-teman PKL lainnya. Kami saling bertukar cerita tentang tugas masing-masing yang sudah diberikan, dan ternyata cukup banyak hal yang bisa dipelajari dari penge...
Posting Komentar
Baca selengkapnya