#20 Intermediate Web | Web Programming Tutorial ~ Angga Gemilang Blog

Assalamualaikum wr, wb

Pada kesempatan ini saya Angga Gemilang dari kelas XI - RPL 1 akan menjelaskan seluk beluk tentang materi PHP, kita akan mulai dari 0, pada postingan ini mimin akan mengajarkan tentang bagaimana cara membuat form, perbedaan dari metode get dan juga post pada pembuatan form, dan lain sebagainya. oleh karena itu mudah-mudahan kalian bisa dan mudah mengerti dengan penjelasan - penjelasan yang saya sampaikan. Pokoknya pantengin terus, Check This Out...

DIbawah ini ada 4 bab yang akan kita pelajari, yaitu:

Post dan Get
Contoh Penggunaan Form Dengan GET
Contoh Penggunaan Form Dengan POST
Quiz

Tanpa langsung berlama-lama. silahkan disimak penjelasan-penjelasan saya dibawah ini :

Post dan Get
Penjelasannya...

Perbedaan POST dan GET

POST
Mempunyai pengertian bahwa metode ini digunakan untuk memparsing hasil inputan form untuk diolah lebih lanjut, tetapi tidak menampilkan query string pada address bar, sehingga lebih aman dibandingkan method GET yang akan terlihat pada address bar. Method POST akan sangat berguna penggunaannya untuk halaman-halaman yang membutuhkan keamanan lebih, karena data inputan kita tidak akan tampil pada address bar browser (disini kelebihan menggunakan Metode POST).

?> Pada contoh file form diatas nilai parsing tidak ditampilkan dalam address bar dan langsung di proses ketempat yang sudah dibuat. Sebenarnya nilai dari parshingan tetap ada tetapi tidak tampak didalam address bar karena valuenya bekerja dibelakang layar (backand). Disinilah keunggulan mengguanakan Method POST.

Perbedaan yang lain dari method POST (Difference of POST Method) adalah:

1. Method POST tidak pernah ter Cache dalam browser
2. Method POST tidak dapat di Bookmark
3. Method POST tidak mempunyai batasan jumlah panjang data

Get
Adalah metode pengiriman data mengguanakan query string atau menampilkan nilainya pada address bar. Jadi semua nilai pada form akan dikirim kesisi server yang kemudian diterima oleh file tertentu dengan ketentuan nilai form tersebut akan tampil didalam address bar browser/URL browser. Untuk suatu keamanan method POST lebih aman dari method GET.

Perbedaan yang lain dari method GET (Difference of GET Method) adalah:
1. Method GET dapat di cache dalam browser
2. Method GET dapat di bookmark
3. Method GET mempunyai batasan jumlah panjang data yaitu maksimal 2048 karakter
Nah untuk lebih jelasnya bisa dilihat di bawah ini :

Contoh Form Dengan Method GET
Penjelasannya...

CSS

 <style type="text/css"> 
  body
  {
   background: url('bg.jpg');
   background-size: cover;
   font-family: arial;
  }
  label
  {
   width: 30%;
   float: left;
  }
  input[type="text"]
  {
   border: none;
   border-bottom: 1px solid #000;
   width: 60%;
   font-size: 15pt;
   text-align: center;
   margin-bottom : 10px;
  }
  .container
  {
   width: 14.3%;
   height: 10%;
   background: #fff;
   position: absolute;
   top: 44%;
   z-index: 1;
   padding: 20px 30px;
   left: 51%;
   transform: translate(-50%, -50%);
   border-radius: 10px;
   box-shadow: 0 10px 40px #000;
  }
  .cont
  {
   position: absolute;
   transform: translate(-50%, -50%);
   top: 60%;
   z-index: 1;
   left: 51%;
   font-family: arial;
   font-weight: bold;
   background: #000;
   color: #fff;
   padding: 20px 50px;
  }
  input[type='submit']
  {
   position: relative;
   bottom: -20px;
   left: 50%;
   transition: .5s;
   transform: translate(-50%, -50%);
   border: none;
   padding: 10px 20px;
   background-color: salmon;
   cursor: pointer;
   font-weight: bold;
   color: #fff;
   text-transform: uppercase;
  }
  input[type="submit"]:hover
  {
   box-shadow: 0 5px 15px rgba(0,0,0,.5);
  }
 </style>

menentukan hari.php

<!DOCTYPE html>
<html>
<head>
 <title></title></head>
<body>
 <div class="container">
 <form method="get" name="form input">
  <label>Hari</label>
  : <input type="text" name="hari" id="hari"><br>

  <label>Tanggal</label>
  : <input type="text" name="tanggal" id="tanggal"><br>

  <input type="submit" name="submit" value="Submit">
 </form>
 </div>

 <?php

if (isset($_GET['hari']) AND isset($_GET['tanggal']))
{

 $hari=$_GET['hari'];
    $tanggal=$_GET['tanggal'];

    echo "<div class='cont'>";
    if (!empty($tanggal) || !empty($hari))
 {
    if($hari == "minggu" || $hari == "sabtu"){
  if($tanggal<=10){
   echo "Sekarang anda berada pada tanggal $tanggal hari $hari <br /> Selamat berakhir pekan pada tanggal muda ";
  } else{
   echo "Sekarang anda berada pada tanggal $tanggal hari $hari <br /> Selamat berakhir pekan pada tanggal tua dan tetap semangat";
  }
 } else {
  echo "Sekarang anda berada pada tanggal $tanggal hari $hari <br /> Semoga hari anda menyenangkan <br />";
  echo "sampai jumpa diakhir pekan";
 }

 }

 else
 {
    die("Maaf, anda harus mengisi terlebih dahulu form di atas");
 }
 echo "</div>";
}

 ?>
 <body>
<html>

Hasil Dari Pengerjaan Form Dengan Method GET:

Contoh Form Dengan Method POST
Penjelasannya...

CSS

 <style type="text/css">
  body
  {
   background: url('bg.jpg');
   background-size: cover;
  }
  .container
  {
   position: absolute;
   top: 45%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: #fff;
   padding: 20px 40px;
   box-shadow: 0 10px 30px rgba(0,0,0,.5);
  }
  label{
   float: left;
   width: 30%;
   font-size: 13pt;
   text-transform: uppercase;
  }
  input[type='number']
  {
   margin-bottom: 20px;
   border: none;
   font-size: 15pt;
   text-align: center;
   width: 65%;
   border-bottom: 1px solid grey;
  }
  input[type='number']:focus
  {
   border-bottom: 1px solid #000;
   border: none;
  }
  input[type='submit']
  {
   position: relative;
   bottom: -5px;
   left: 35%;
   border: none;
   transition: .5s;
   padding: 10px 20px;
   background-color: salmon;
   cursor: pointer;
   font-weight: bold;
   color: #fff;
   text-transform: uppercase;
  }
  input[type="submit"]:hover
  {
   box-shadow: 0 5px 15px rgba(0,0,0,.5);
  }
  .cont
  {
   position: absolute;
   background: #000;
   top: 65%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: #fff;
   font-weight: bold;
   font-family: arial;
   padding: 30px 50px;
  }
 </style>

menghitungjumlahhari.php

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
 <div class="container">
 <h1>Menghitung Jumlah Hari</h1>
 <form method="post" name="form nilai">
 <label>Bulan</label>
 : <input type="number" name="bulan" id="bulan"><br>

 <label>Tahun</label>
 : <input type="number" name="tahun" id="tahun"><br>

 <input type="submit" name="submit" value="Hitung">
 </form>
 </div>

 <?php 

 if (isset($_POST['bulan']) && isset($_POST['tahun'])) {

  $bulan = $_POST['bulan'];
  $tahun = $_POST['tahun'];

  echo "<div class='cont'>";
  if (!empty($bulan) || !empty($tahun)) {
  $hasil = 30 * $bulan + 365 * $tahun;
  echo "$bulan bulan ditambah $tahun tahun menjadi, $hasil hari";

  }else{
   die("Mohon Isi lengkap terlebih dahulu form diatas");
  }
  echo "</div>";
 }
 ?>
 <body>
<html>

Hasil Dari Pengerjaan Form dengan POST :

Perbedaaan Antara Penggunaan Method - Method :

Form Dengan Method GET

Form Dengan Method POST

QUIZ
Penjelasannya...

CSS

 <style type="text/css">
  body
  {
   background: url('bg.jpg');
   background-size: cover;
  }
  .container
  {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: #fff;
   width: 30%;
   padding: 30px 30px;
   box-shadow: 0 10px 30px rgba(0,0,0,.5);
  }
  label{
   float: left;
   width: 45%;
   font-size: 13pt;
   text-transform: uppercase;
  }
  input[type='text']
  {
   margin-bottom: 20px;
   height: 25px;
   font-size: 15pt;
   text-align: center;
   border: none;
   border-bottom: 1px solid grey;
   width: 43%;
  }
  input[type='text']:focus
  {
   border-bottom: 1px solid #000;
   border: none;
  }
  input[type='submit']
  {
   position: relative;
   bottom: -20px;
   left: 50%;
   transition: .5s;
   transform: translate(-50%, -50%);
   border: none;
   padding: 10px 20px;
   background-color: salmon;
   cursor: pointer;
   font-weight: bold;
   color: #fff;
   text-transform: uppercase;
  }
  input[type="radio"]
  {
   margin-bottom: 20px;
   font-size: 15pt;
  }
  input[type="submit"]:hover
  {
   box-shadow: 0 5px 15px rgba(0,0,0,.5);
  }
  h1
  {
   text-transform: uppercase;
   font-weight: bold;
   text-align: center;
   margin-top: -5px;
   font-family: arial;
  }
 </style>

registrasi.php

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
 <div class="container">
 <h1>BIODATA</h1>
 <form method="post" name="form nilai" action="lihat.php">
 <label>Nama Depan</label>
 : <input type="text" name="nd" id="nd"><br>

 <label>Nama Belakang</label>
 : <input type="text" name="nb" id="nb"><br>

 <label>Alamat</label>
 : <input type="text" name="alamat" id="alamat"><br>

 <label>Jenis Kelamin</label>
 : <input type="radio" name="jk" id="jk" value="1"> <span style="font-size: 15pt;">Laki - Laki</span>  <input type="radio" name="jk" id="jk" value="2">  <span style="font-size: 15pt";>Perempuan</span><br>

 <label>Agama</label>
 : <input type="text" name="agama" id="agama"><br>

 <input type="submit" name="submit" value="Hitung">
</form>
</div>
 <body>
<html>

Hasil Dari Pengerjaan Quiz:

Mungkin sekian saja yang dapat kami sampaikan pada kesempatan kali ini dalam post yang berjudul #20 Intermediate Web | Web Programming Tutorial karena postingan juga sudah sangat panjang, pinggang kami juga kayaknya sudah encok, mata udah sangat lelah melihat codingan yang begitu panjang dan acak-acakan. saya cukupkan saja.

Wassalamualaikum wr, wb

Angga Gemilang Blog

Sabtu, 13 Oktober 2018

#20 Intermediate Web | Web Programming Tutorial

Assalamualaikum wr, wb

CSS

menentukan hari.php

CSS

menghitungjumlahhari.php

Perbedaaan Antara Penggunaan Method - Method :

Form Dengan Method GET

Form Dengan Method POST

CSS

registrasi.php

0 komentar:

Posting Komentar

Follow Me

Clock

Calendar

Popular Posts

Blog Archive

About Me

Sent Quick Message

Translate

Translator's Flag

SMK Negeri 4 Bandung

Pesan Dari Admin

About