Baca Juga


Halo Sahabat Sejati dan setia blog Techno ... Malem Ini saya admin Blog Techno akan share cara membuat Form login Dengan HTML + Css + Php . Pada Postingan Sebelumnya saya sudah share cara membuat form login hanya dengan Elemen Html dan Css nya saja . Namun kali ini kita akan coba memproses form login kita dengan Php ;)


Sebelum kita memulai tutorialnya saya akan sedikit mengupas mengapa kita memerlukan Php dalam Form login ??? Jawabannya sangan simple .. ya untuk menyimpan inputan data yang dimasukkan oleh user . Oh ya sahabat Techno dalam Tutorial ini kita akan coba melakukan penyimpanan data oleh user dengan Php yang masih sangat sederhana , Jadi cocok deh buat kalian yang belum paham paham kali Pemrograman Web :).

Okelah langsung saja kita mulai pembelajaran kita ;)

Alat dan bahan :

1. Laptop atau komputer yang masi sehat wal afiat
2. Xampp -> apa ?? belum punya ?? kasian akakak :v
---------------------------------------------------
nih download aja di mari Xampp 
---------------------------------------------------
3. Text editor -> Terserah mau pake apa yang jangan pake Tahu sama Tempe .. Lah apa hubungannya :/ . Skip aja deh

4.Browser
5.Suasana hati yang mendukung :v

Proses :

1. Pastikan bahwa Apache dan Mysql sudah berjalan pada Xampp Control Panel 
2. Untuk memastikannya ... Buka Browser dan ketikkan Localhost Pada Colom Pencarian dan enter

  












3. Setelah Anda pasti localhost sudah berjalan , Waktunya kita Copas Mengopas Codenya satu Persatu ... Untuk Form Login nya anda bisa menggunakan Form Login Pada Tutorial Sebelumnya ... 

4. Bagi anda yang belum punya ??? Tenang saya sediakan codenya 
--------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Daftar</title>
<link href="daftar-style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
</div>
<p>Daftar-Gratis</p>
<div class="kotak">
<form  class="username" action="proses.php" method="GET" >
  <input type="text" name="username" class="button" placeholder="Username" />
  <div style="margin-top:10px;"></div>
  <input type="password" name="password" class="button" placeholder="Password" />
  <input type="submit" name="Login" class="Login" value="Login" />
  <input type="reset" name="Reset" class="reset" value="Reset" />
</form>
</div>
<h3>Coding-By-Eki-Akmarullah-2016</h3>
<h4>Image Url From : http://wallpapercave.com/wp/fq1Maf5.jpg</h4>
</body>
</html>
---------------------------------------------------------------------








Simpan code diatas dengan nama Form.html
----------------------------------------







5. Next buat file baru di text editor kalian dan masukkan codenya
---------------------------------------------------------------------
@charset "utf-8";
/* CSS Document */
body {
    background:url('http://wallpapercave.com/wp/fq1Maf5.jpg');
    margin:0;
    padding:0;
    background-position:top;
}
h4 {
    font-size: 15px;
    position: fixed;
    top: 600px;
    color: #00f;
}
#wrapper {
    margin:0 auto;
    width:600px;
    min-height:300px;
    background:#462300;
    box-shadow:2px 2px 8px #000;
    opacity:0.2;
    filter:alpha(opacity=100);
    position:fixed;
    top:100px;
    left:400px;
    border-left:4px solid #000;
    border-right:3px solid #000;
    border-top:5px solid #000;
    border-bottom:8px solid #000;
}
p {
    font-family:"Comic Sans MS", cursive;
    font-size:26px;
    color:#fff;
    position:fixed;
    top:75px;
    left:627px;
    line-height:50px;
    border-bottom:1px solid #fff;
}
.kotak {
    position:fixed;
    top:200px;
    left:588px;
}
.button {
    padding:3px;
    height:30px;
    width:250px;
    text-align:center;
    font-family:"Comic Sans MS", cursive;
}
.Login {
    position:fixed;
    top:300px;
    left:588px;
    padding:3px;
    height:30px;
    width:260px;
    background:#7D3F00;
    color:#fff;
    cursor:pointer;
}
.reset {
    position:fixed;
    top:320px;
    left:588px;
    padding:3px;
    height:30px;
    width:260px;
    margin-top:20px;
    color:#fff;
    background:#7D3F00;
    cursor:pointer;
}
.Login:hover {
    background:#5C5C5C;
    color:#fff;
}
.reset:Hover {
    background:#5C5C5C;
    color:#fff;
}
h3 {
    position:fixed;
    top:365px;
    left:615px;
    font-family:"Comic Sans MS", cursive;
    font-size:13px;
    color:#fff;
}
---------------------------------------------------------------------


Simpan code diatas dengan nama style.css dan jangan lupa letakkan di folder Localdisk C:Xampp/htdocs/Latihan/

-----------------------------------------
ket : folder Latihan Adalah folder yang harus anda buat terlebih dahulu di dalam folder htdocs , dan simpan kedua file diatas kedalam foder Latihan
---------------------------------------------------------------------

6. Buat lagi file baru di text editor kalian dan masukkan lagi code berikut ini 
---------------------------------------------------------------------
<?php



echo "<center>";
echo "---------------------------------------";
echo "<br>";
echo "Username -->" .$_GET['username'];
echo "<br/>";
echo "Password -->" .$_GET['password'];
echo "<br>";
echo "---------------------------------------";
echo "</center>";
 ?>
---------------------------------------------------------------------
Simpan lagi code diatas dengan nama proses.php . Setelah 3 file selesai jangan lupa untuk menempatkannya di dalam Folder Latihan

---------------------------------------------------------------------
Untuk melihat hasilnya anda tinggal buka Browser dan Ketikkan Localhost/Latihan/Form.html => Enter
----------------------------------------------------------------------
Tampilan file Form Html . Coba anda masukkan data dan klik Register
Maka Akan Tampil Halaman Php nya



Tampilan File Php Yang Menyimpan Hasil Input dari User

------------------------------------------------------
Oke saya rasa cukup mudah ya ;) Untuk kritik dan saran monggo saya menunggu di Komentar ya ;)