Baca Juga


Apa kabar sahabat Blog Techno .. udah lama ni saya ndak memberikan sepatah dua patah kata buat pengunjung setia blogger hehehehe
Dalam tutorial kali ini saya akan membagikan bagaimana caranya membuat form login yang keren dan so pasti mudah deh sob ;)



Oh ya sob kalian udah pada tau kan apa itu Form login ?? kalo belum tau monggo googling dulu ya sob ;)

Dalam tutorial kali ini saya membuat tipe Form Login transparancy atau transparan . Walah udah banyak kali cerita saya .. Langsung aja deh :D

Alat dan bahan :

1. Laptop dan komputer 
2. Xampp -> Kalo belum ada bisa download di sini Xampp 
3. Text editor disini saya menggunakan Sublime Text editor 
4. Browser
5. Secangkir teh hangat ;)

Proses :

1. Download dulu Aplikasi xampp di laptop anda 
2. Setelah anda mendownload xampp langsung install aplkikasinya ya
--------------------------------------------------------------------
Oh ya Xampp adalah Software Pemabangun server Lokal .. Jadi  dengan memakai Aplikasi Xampp kita bisa membuat website hanya dengan menggunakan server lokal atau localhost
--------------------------------------------------------------------
3. Setelah Aplikasinya Terinstall Buka Xampp Control Panel Kalian
--------------------------------------------------------------------
ada beberapa cara untuk membuka Xampp control panel salah satunya dengan menggunakan windows Search Khusus pengguna Windows 8 
--------------------------------------------------------------------
4. Berikut Tampilan Xampp Control Panel














5. Selanjutnya silahkan jalankan service apache dan mysql nya 
 ------------------------------------------------------------------
 dengan cara klik start di samping Apache
 dan klik start juga di bagian Mysql 
 ------------------------------------------------------------------
6. Setelah Apache dan Mysql berjalan mari kita coba apakah Aplikasi  xampp sudah berjalan dengan semestinya di laptop kita
--------------------------------------------------------------------
dengan cara buka browser anda dan ketikkan localhost di pencarian browser  , Seperti gambar berikut 













7. Okeh langsung saja ke step final ;)
8. Buka Aplikasi Text Editor kalian dan Tulis Code Di bawah ini kalo males nulis Copas aja ;)
=====================================================================
<!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 name="username" class="username" action="" method="post" >
  <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>
=====================================================================
9. Simpan code tersebut dengan format .html
10. Sekarang anda buat file baru lagi di Text Editornya dan Tulis Atau Copas Kode di bawah ini lagi 
=====================================================================
@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 Kode diatas dengan format .css
11. Setelah anda memiliki dua buah file di-atas yakni file dengan exstensi .html dan .css pindahkan kedua file tersebut ke folder
---------------------------------------------------------------------
Localdisk C:Xampp/htdocs/Latihan/
---------------------------------------------------------------------
ket : Folder Latihan adalah tempat kita untuk memindahkan kedua file tadi ... Jadi yang harus anda lakukan adalah membuat file baru di dalam folder htdocs , dan Copas kan Kedua File Kita tadi yakni file yang berformat .html dan .css
---------------------------------------------------------------------
12. Jika anda telah selesai memindahkan kedua file tersebut ke dalam folder yang disebutkan di atas sekaranglah saatnya kita melihat hasil dari Coding kita dengan cara 
--------------------------------------------------------------------
buka browser kalian dan ketikkan di pencarian Url Localhost/Latihan/namafilekalian.html => Enter . Contohnya di laptop saya :D

--------------------------------------------------------------------

Oke saya rasa cukup mudah ya ;) kalo ada kritik dan saran monggo komentarnya saya tunggu