Tugas PWEB membuat validasi form

Nama: Arini Indah Nur Fuadah
NRP: 05111740007003
Kelas: C

1. HTML

  • Daftar

<!DOCTYPE html>
<html>
<head>
<title>Daftar Kuy</title>
<link rel="stylesheet" type="text/css" href="dftr.css">
</head>
<body>
<div class="header">
<h2>Saat.Com</h2>
</div>
<div class="login">
<form method="post" action="#" onsubmit="return validasi_input(this)">
<div>
<label>Nama:</label>
<input name="username" type="text">
</div>
<div>
<label>Email:</label>
<input type="email" name="email" id="email" />
</div>
<div>
<label>Tanggal Lahir:</label>
<input type="date" name="date"/>
</div>
<div>
<label>Jenis Kelamin :</label>
<input type="radio" name="jk" value="L">
<input type="radio" name="jk" value="P">
</div>
<div>
<label>No Telp:</label>
<input name="telepon" type="tel">
</div>
<div>
<label>Password:</label>
<input name="Password" type="Password">
</div>
<div>
<label>Jenis Kesukaan:</label>
<input name="suka" type="text">
</div>
<div>
<input type="submit" value="Daftar" class="tombol">
</div>
</form>
</form>
</div>
<div class="footer">
<p>Copyright 2018 codebareng all reserved</p>
</div>
<script type="text/javascript" src="dftrjs.js"></script>
</body>
</html>



  • Masuk

<!DOCTYPE html>
<html>
<head>
<title>Masuk Kok</title>
<link rel="stylesheet" type="text/css" href="msk.css">
</head>
<body>
<div class="header">
<h2>Saat.Com</h2>
</div>
<div class="login">
<form name="myForm" action="#" method="POST" onSubmit="validasi()">
<div>
<label>Nama:</label>
<input type="text" name="fname"required  />
</div>
<div>
<label>Email:</label>
<input type="email" name="email" id="email" />
</div>
<div>
<label>Password:</label>
<input type="Password" name="Password"/>
</div>
<div>
<input type="submit" value="Masuk" class="tombol">
<span><a href="_blank">Forgot Password</a></p></span>
</div>
</form>
</form>
</div>
<div class="footer">
<p>Copyright 2018 codebareng all reserved</p>
</div>
</body>
</html>

2. CSS

  • Daftar

body{
background: #99FFCC;
color: #333;
width: 100%;
font-family: sans-serif;
margin: 0 auto;
}
.header{
width: 325px;
margin: auto;
height: 50px;
line-height: 50px;
background: #333e33e6;
color: #74C599;
text-align: center;
}

.login {
  padding: 10px;
  margin: 10px auto;
  width: 300px;
  background: rgba(255,255,255,0.5);
}
label {
  font-size: 10pt;
  color: #2e2e2e;
}
input[type="text"],
input[type="email"],
input[type="Password"],
input[type="date"],
input[type="tel"],
textarea {
  padding: 8px;
  width: 95%;
  background: #efefef;
  border: 0;
  font-size: 10pt;
  margin: 6px 0px;
}
.tombol {
  background: #3498db;
  color: #fff;
  border: 0;
  padding: 5px 8px;
}

.footer{
width: 325px;
margin: auto;
height: 50px;
line-height: 50px;
color: #fff;
text-align: center;
font-size: 10pt;
}

  • Masuk

body{
background: #99FFCC;
color: #333;
width: 100%;
font-family: sans-serif;
margin: 0 auto;
}
.header{
width: 325px;
margin: auto;
height: 50px;
line-height: 50px;
background: #333e33e6;
color: #74C599;
text-align: center;
}

.login {
  padding: 10px;
  margin: 10px auto;
  width: 300px;
  background: rgba(255,255,255,0.5);
  border-radius: 3px;
}
span{
float: right;
font-size: 9pt;
}
label {
  font-size: 10pt;
  color: #2e2e2e;
}
input[type="text"],
input[type="email"],
input[type="Password"],
textarea {
  padding: 8px;
  width: 95%;
  background: #efefef;
  border: 0;
  font-size: 10pt;
  margin: 6px 0px;
}
.tombol {
  background: #3498db;
  color: #fff;
  border: 0;
  padding: 5px 8px;
}
.footer{
width: 325px;
margin: auto;
height: 50px;
line-height: 50px;
color: #fff;
text-align: center;
font-size: 10pt;
}
3. JS


  • Daftar

function validasi_input(form){
  var maxcar = 50;
  var mincar = 1;
  if (form.username.value.length > maxcar|| form.username.value.lenght < mincar){
    alert("Username Tidak Boleh Kosong atau Maksimal 50 Karater!");
    form.username.focus();
    return (false);
  }
   return (true);
}

function validasi_input(form){
  function check_radio(radio)
  {
// memeriksa apakah radio button sudah ada yang dipilih
    for (i = 0; i < radio.length; i++)
    {
      if (radio[i].checked === true)
      {
        return radio[i].value;
      }
    }
   return false;
   }
   var radio_val = check_radio(form.jk);
   if (radio_val === false)
    {
      alert("Anda belum memilih Jenis Kelamin!");
      return false;
    }
   return (true);
}

4. Hasilnya:



Langsung cek di beritasaatini.hirin.online

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 1 APSI - Analisis Sistem Informasi KASKUS

Gambar
Arini Indah Nur Fuadah  05111740007003 Analisis Sistem Informasi KASKUS  1. Didirikan nya Kaskus Kaskus didirikan pada tanggal 6 November 1999 oleh tiga pemuda asal Indonesia yang sedang melanjutkan studi di Seattle, Amerika Serikat. Mulanya Andrew Darwis, Ronald, dan Budi membuat KASKUS untuk memenuhi tugas kuliah mereka. KASKUS sendiri bertujuan untuk mengobati kerinduan mahasiswa Indonesia di luar negeri akan Indonesia melalui berita-berita Indonesia yang diterjemahkan.  2. Analisis Sistem Informasi KASKUS 1.Transaction Processing System (TPS)    PHP proggrammer Membuat database, Memelihara web, Memperbaiki masalah teknis, Pengembangan proyek berbasis PHP.     Web Designer Memperbaiki kesalahan website, Menentukan bagaimana gambar dan materi digital lainnya akan dioptimalkan dan disajikan untuk web, Menghasilkan desain yang akan menarik bagi pengguna target, memiliki sistem navigasi lo...
Baca selengkapnya

Analisa Use Case

Gambar
Kelompok APSI C Shintya Rezky Rahmayanti (05111740000017) Arini Indah Nur Fuadah (05111740007003) Ihdiannaja (05111740007005) Pengertian Analisa Use Case adalah teknik yang digunakan untuk mengidentifikasi kebutuhan sistem perangkat lunak dengan menggambarkan aktor atau user yang akan menggunakan perangkat lunak dan ruang lingkup fitur kegunaan perangkat lunak. Diagram Analisa Use Case pada Penerbitan Kanisius Use Case Description Use Case Mencatat data pegawai Actor Personalia Description Personalia memasukkan data pegawai baru atau mengupdate data pegawai kemudian disimpan oleh sistem. Trigger Personalia mengupdate data pegawai. Pre - Condition Personalia terotentikasi Personalia memiliki hak akses untuk mengupdate data pegawai Normal Course Personalia memasukkan data pegawai. Personalia menyimpan data pegawai yang dimasukkan. Sistem informasi mengecek kelengkapan data dan kevalidan data. Sistem informasi...
Baca selengkapnya

EAS_PWEB

Gambar
Arini Indah Nur Fuadah 05111740007003 PWEB C 1. Login aplikasi dengan user dan password 2. Mengisi formulir pendaftaran 3. Edit profil dan biodata calon pendaftar 4. Memilih sekolah tujuan yang dipilih 5. View formulir pendaftaran yang sudah permanen 6. Download formulir pendaftaran 1. .env DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=rpl_blog DB_USERNAME=root DB_PASSWORD= DB_DATABASE adalah nama database masing-masing APP_NAME=Laravel APP_ENV=local APP_KEY=base64:TNuy/ndNpNl8gtJE0CBEmiK+Vmxq7r09Rff683O3bu0= APP_DEBUG=true APP_URL=http://localhost LOG_CHANNEL=stack DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=rpl_blog DB_USERNAME=root DB_PASSWORD= BROADCAST_DRIVER=log CACHE_DRIVER=file QUEUE_CONNECTION=sync SESSION_DRIVER=file SESSION_LIFETIME=120 REDIS_HOST=127.0.0.1 REDIS_PASSWORD=null REDIS_PORT=6379 MAIL_DRIVER=smtp MAIL_HOST=smtp.mailtrap.io MAIL_PORT=2525 MAIL_USERNAME=null MAIL_PASSWORD=...
Baca selengkapnya