Membuat Form Login Keren Dan Elegan Menggunakan Kode PHP+CSS - Langsung saja ke intinya, bagi anda yang sedang mencari kode php membuat menu login yang elegan bisa menggunakan kode dibawah ini, kode ini dikombinasikan dengan css.
Untuk yang masih awam ataupun baru belajar seperti admin, anda bisa melakukan langkah-langkah dibawah ini.
Untuk kalian yang belum faham apa itu form login bisa melihat gambar diatas, merupakan salah satu contoh form login. Dalam tutorial kali ini admin membuat tipe form login transparancy atau transparan .
Alat dan bahan :
2. Install aplikasi XAMPP pada laptop ( XAMPP adalah software pembangun 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, menu ini biasnya sudah secara default muncul di start menu.
--------------------------------------------------------------------
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. Buka Aplikasi Text Editor kalian dan tulis atau copy paste kode di bawah ini.
8. Simpan code tersebut dengan format .html
9. Sekarang anda buat file baru lagi di Text Editornya dan tulis atau copy paste kode di bawah ini lagi.
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/
Keterangan: Folder Latihan adalah tempat kita untuk memindahkan kedua file tadi, jadi yang harus anda lakukan adalah membuat file baru di dalam folder htdocs , dan copy paste 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 koding kita dengan cara:
Contoh seperti pada gambar
Demikianlah cara mudah dan gampang membuat form login dengan kode php dan css untuk pemula
Untuk kalian yang belum faham apa itu form login bisa melihat gambar diatas, merupakan salah satu contoh form login. Dalam tutorial kali ini admin membuat tipe form login transparancy atau transparan .
Alat dan bahan :
- Laptop dan komputer
- Xampp -> Kalo belum ada bisa download di sini Xampp
- Text editor disini saya menggunakan Sublime Text editor
- Browser
Cara Membuat Form Login Keren Dan Elegan Menggunakan Kode PHP+CSS
1. Download atau copy Aplikasi XAMPP di Laptop atau PC anda2. Install aplikasi XAMPP pada laptop ( XAMPP adalah software pembangun 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, menu ini biasnya sudah secara default muncul di start menu.
--------------------------------------------------------------------
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. Buka Aplikasi Text Editor kalian dan tulis atau copy paste kode di bawah ini.
Membuat Form Login Menggunakan Kode PHP+CSS
=====================================================================<!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> 8. Simpan code tersebut dengan format .html
9. Sekarang anda buat file baru lagi di Text Editornya dan tulis atau copy paste kode di bawah ini lagi.
Kode CSS
@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/
Keterangan: Folder Latihan adalah tempat kita untuk memindahkan kedua file tadi, jadi yang harus anda lakukan adalah membuat file baru di dalam folder htdocs , dan copy paste 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 koding kita dengan cara:
Tes Form Login
Buka browser kalian dan ketikkan di pencarian Url Localhost/Latihan/namafilekalian.html => EnterContoh seperti pada gambar
Demikianlah cara mudah dan gampang membuat form login dengan kode php dan css untuk pemula
EmoticonEmoticon