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

Inilah alur pembuatan SIP/SIK Perekam Medis secara online di Kota atau Kabupaten Cirebon tahun 2022 ! bisa lewat HP dan Laptop

Image
  Surat Izin Praktek (SIP) atau Surat Izin Kerja (SIK) sangatlah penting bagi seorang tenaga Kesehatan, termasuk seorang Perekam Medis dan Informasi Kesehatan (PMIK) yang notabenya merupakan seorang tenaga Kesehatan, meskipun seorang PMIK masuk dalam kategori Nakes Teknisi, tidak menuntut juga harus membuat SIK. Untuk dinyatakan sebagai PMIK seseorang harus memiliki Surat Izin Kerja Perekam Medis yang selanjutnya disingkat SIK Perekam Medis sebagai bukti tertulis yang diberikan untuk menjalankan pekerjaan rekam medis dan informasi kesehatan pada fasilitas pelayanan kesehatan. Untuk dapat melaksanakan pekerjaan rekam medis dan informasi kesehatan secara profesional Perekam Medis harus memiliki batasan kemampuan minimal yang harus dikuasai yang disebut Standar Profesi Perekam Medis. Lalu apa Dasar Hukumnya ? Peraturan Menteri Kesehatan Republik Indonesia Nomor 55 Tahun 2013 , Tentang Penyelenggaraan Pekerjaan Perekam Medis.   Adapun menurut Pasal 6 berbunyi sebagai berikut...
Read more

Terobosan Baru !!! Story Instagram kini di geser ke Atas bukan lagi kesamping seperti YouTube Shorts, Semakin menarik.

Image
  Dengan perkembangan interaksi didunia maya semakin diminati banyak halayak, kini Instagram terus berusaha untuk menghadirkan fitur yang lebih menarik dan selalu memperbaharui fitur-fitur yang lama. Nah selain tampilan story yang vertikal, fitur baru yang sedang dikerjakan oleh pihak Instagram adalah Story Instagram yang dapat di geser secara vertikal. Salah satu fitur yang sering banyak digunakan oleh kalangan masyarakat ialah fitur berbagi cerita, baik berupa foto maupun video. Selain itu disaat akan menerbitkan atau membuat Story, pengguna terlebih dahulu bisa mengatur kualitas atau tampilan dari si gambar maupun video tersebut dengan menggunakan filter agar terlihat lebih menarik. Namun penggunaan fitur terbaru ini hanya baru bisa diakses atau masih sedang tahap uji di negara Turki dan belum bisa digunakan secara luas. Fitur ini menggantikan metode Swipe Horizontal Story mirip dengan fitur terbaru platform medsos lainnya seperti TikTok maupun YouTube Shorts. Selain itu dis...
Read more

Apa saja persiapan menjadi seorang blogger di tahun 2022 ini ??? Inilah Tips Jitu dari Pemandu Tutoriall.My.Id

Image
  Kini menjadi seorang penulis semakin diminati banyak hal layak, bahkan dimulai dari umur 18 tahun ke atas, alasannya adalah karena dizaman serba digitalisasi ini orang semakin banyak mencari sebuah kabar, berita, informasi melalui internet, tidak hanya itu, kini banyak orang menjadi seorang penulis untuk menambah penghasilan mereka, salah satunya ialah menjadi seorang blogger. Dikarenakan blogger akan mendapatkan penghasilan dari Google Adsense. Sangat strategis untuk menambah penghasilan disaat masa pandemic ini. Apa itu blogger ? Namun, apakah kalian sendiri faham atau mengerti apa itu Blogger ?, kali ini Admin Pemandu Tutoriall.my.id akan memberikan penjelasan mengenai blogger. Seperti yang kalian kunjungi pada halaman website ini yang menyediakan berbagai materi tutorial, review, dan lain-lain, dan ini merupakan website yang dibuat dari Blogspot atau Blog. Jadi Blogger merupakan sebuah website yang memberikan informasi dalam urutan kronologis terbalik, dengan ciri hasnya ya...
Read more