Tutorial Membuat Form Login & Register UKK RPL 2022 PAKET 1 |Aplikasi Catatan Perjalanan Dengan PHP dan MySQLi (Part III)



Setelah pengunjung mempelajari Tutorial Membuat Form Login & Register UKK RPL 2022 PAKET 1 |Aplikasi Catatan Perjalanan Dengan PHP dan MySQLi Part (I) & Part (II) setalah ini akan dilanjutkan dengan (Part III)

  • Membuat file tampilan form register, Simpan file dibawah ini dengan nama register.php
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>WidinatoCoder</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Rubik:400,700'><link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-form">
<form action="tambah_register.php"method="POST">
<h1><img src="logo.png"height="50px"width="50px"><p>REGISTER</h1>
<div class="content">
<div class="input-field">
<input type="number"name="nik" placeholder="Masukkan NIK"required>
</div>
<div class="input-field">
<input type="text"name="nama" placeholder="Masukkan Nama Lengkap" required>
</div>
www.widiantocoder.my.id
</div>
<div class="action">
<button onclick="window.location.href='index.php'" class="btn mr-2">Cancel</button>
<button type="submit"class="btn mr-2">Register</button>
</div>
</form>
</div>
<!-- partial -->
<script src="script.js"></script>
</body>
</html>
  • Membuat file tambah_register.php simpan file dibawah ini dengan nama berikut
<?php
include'koneksi.php';
$nik = $_POST['nik'];
$nama = $_POST['nama'];
$tambah_register = mysqli_query($koneksi, "INSERT INTO login VALUES('','$nik','$nama')");
if($tambah_register){
echo"
<script>
alert('Selamat Registrasi User Telah Ditambahkan');
document.location.href='index.php'
</script>";
}else{
echo"
<script>
alert('Data Register Gagal Ditambahkan');
document.location.href='index.php'
</script>";
}
?>
  • Membuat file css. simpan sintak dibawah ini dengan nama style.css
  • Unduh file css disini link download
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

body {
  background: #d7eff5;
  font-family: 'Rubik', sans-serif;
}

.login-form {
  background: #fff;
  width: 500px;
  margin: 65px auto;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  border-radius: 4px;
  box-shadow: 0 2px 25px rgba(0, 0, 0, 0.2);
}
.login-form h1 {
  padding: 35px 35px 0 35px;
  font-weight: 300;
}
.login-form .content {
  padding: 35px;
  text-align: center;
}
.login-form .input-field {
  padding: 12px 5px;
}
.login-form .input-field input {
  font-size: 16px;
  display: block;
  font-family: 'Rubik', sans-serif;
  width: 100%;
  padding: 10px 1px;
  border: 0;
  border-bottom: 1px solid #747474;
  outline: none;
  -webkit-transition: all .2s;
  transition: all .2s;
}
.login-form .input-field input::-webkit-input-placeholder {
  text-transform: uppercase;
}
.login-form .input-field input::-moz-placeholder {
  text-transform: uppercase;
}
.login-form .input-field input:-ms-input-placeholder {
  text-transform: uppercase;
}
.login-form .input-field input::-ms-input-placeholder {
  text-transform: uppercase;
}
.login-form .input-field input::placeholder {
  text-transform: uppercase;
}
.login-form .input-field input:focus {
  border-color: #222;
}
.login-form a.link {
  text-decoration: none;
  color: #747474;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  display: inline-block;
  margin-top: 20px;
}
.login-form .action {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
}
.login-form .action button {
  width: 100%;
  border: none;
  padding: 18px;
  font-family: 'Rubik', sans-serif;
  cursor: pointer;
  text-transform: uppercase;
  background: #e8e9ec;
  color: #777;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 0;
  letter-spacing: 0.2px;
  outline: 0;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.login-form .action button:hover {
  background: #d8d8d8;
}
.login-form .action button:nth-child(2) {
  background: #2d3b55;
  color: #fff;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 4px;
}
.login-form .action button:nth-child(2):hover {
  background: #3c4d6d;
}
  • Membuat file script.js simpan file dengan nama tersebut.
/*

*/

let form = document.querySelecter('form');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  return false;
});

Membuat menu home atau halaman awal apabila dimana seorang user berhasil login dengan menggunakn nama dan nik yang sudah didaftarkan, untuk tampilan user akan di bahas di pertemuan yang akan datang. sekian dari saya, Terimakasih Semoga Bermanfaat :)

Comments

Post a Comment

Popular posts from this blog

Cara cepat belah layar (Split Screen) windows 10 di laptop atau PC, Terbaru 2021 !!!

Image
  Halo sobat.. pernahkah kamu bertanya-tanya saat melaksanakan sebuah tugas dengan menggunakan Laptop atau computer, Kamu harus membuka beberapa aplikasi sekaligus saat bekerja ? jika benar, Kamu bisa looh menggunakan fitur Split Screen, Oh yaa sob.. fitur tersebut tersedia bagi semua pengguna Windows, baik Windows 8 atau Windows 10.. Bahkan cara penggunaan fitur tersebut sangatlah mudah, silahkan Kamu ikuti pembahasan artikel dibawah ini sampai selesai agar lebih jelas dan kamu bisa mempraktekannya. v    Sobat.. taukah Kamu apa itu Split Screen ( Belah Layar)???? §   Split Screen adalah fitur baru hsusnya pengguna dari windows 10 yang dapat menampilkan dua atau lebih jendela aplikasi sekaligus dalam satu layar monitor. Dengan fitur Split Screen ini, tampilan layar Laptop atau PC Kamu akan terlihat rapih dibandingkan membiarkan jendela aplikasi mengambang diatas tampilan desktop. §   Split Screen dapat dikatakan sebagai salah satu fitur unggulan dari perangkat yang bersistem operas
Read more

Tutorial Membuat Aplikasi Catatan Perjalanan UKK RPL 2022 Paket 1 (Peduli Diri)| Dengan PHP dan MySQLi (Part VII)

Image
Membuat Tampilan Tambah Data Perjalanan Simpan syntax dibawah ini dengan nama ubah .php  di dalam folder  tambah_perjalanan , seperti gambar dibawah ini !! Syntak ubah.php <?php    session_start();   if($_SESSION['status']!="login"){     header("location:../index.php?pesan=belum_login");   }   include'../koneksi.php'; $id = $_GET['id']; $ambil_data = mysqli_query($koneksi,"SELECT * FROM perjalanan WHERE id='$id'"); while($edit_data = mysqli_fetch_array($ambil_data)){ ?> <!DOCTYPE html> <html lang="en"> <head>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">   <title>Widianto</title>   <link rel="stylesheet" href="../css/mdi/css/materialdesignicons.min.css">   <link rel="stylesheet" href="../css/feather/feather.css">   <l
Read more

Cara cepat copy paste data tabel excel ke word tanpa berantakan, Terbaru 2021 !!!

Image
  Sobat kamu tau bagaimanakah cara mensalin data excel tanpa membuat data tersebut berantakan kedalam Ms. Word.? Tentunya data ini bisa kita salin kedalam Ms.Word dengan beberapa cara.. Maka dalam hal ini Pemandu Tutorial akan memberikan beberapa langkah untuk menyalin data excel kedalam ms.word, tentunya dengan cara ini Admin pastikan Kamu akan dengan mudah mengikutinya, soo… baca panduan ini sampai selesai yaah !!! Memakai program Excel tidaklah selalu membahas soal   menghitung angka dan membuat data saja. Sesekali data ini perlu disajikan dalam bentuk laporan yang bisanya dibuat dalam aplikasi lain, salah satunya yaitu Ms.Word, itulah alas an bahwa kita juga harus memahami bagaimanakah cara copy paste Data Tabel Excell kedalam Ms. Word dengan rapih. Sebenarnya cara ini sangatlah mudah untuk kita terapkan, hanya seperti copy paste biasa pada Word, namun kita perlu memilih pada beberapa opsi pengaturan agar hasi copy table Excel di Word bisa menjadi sangat rapih. Pada hal ini Admin
Read more