Tutorial Membuat Form Login yang Responsive | Tutorial Teknom

Tutorial Membuat Form Login Responsive

Halo sahabat Teknom, Kesempatan kali ini Tekno-Media akan membahas/membuatkan tutorial Bagaimana Caranya Membuat Form Login yang Responsive.

Sebelumnya, mari kita kenalan dulu dengan Responsive, responsive disini bahwa Form Login yang kita buat itu sangat UI Friendly (User Interface Friendly) Maksudnya tampilan ini sangat-sangat friendly untuk para penikmatnya... Karena Form Login disini akan sangat friendly dengan device manapun, mau itu PC 15', Lappy 10' , Smartphone 5', Smartphone 4'. Misal tidak friendly, maka form tersebut akan acak-acakan saat dibuka oleh device seperti Smartphone.

Nah ini dia hasil nya dan sudah Friendly

Gimana? keren kan tampilannya untuk Form Sederhana ^_^ :D :D :D

Nah berikut source code/codingan yang sudah jadinya..

{
 padding: 0px;
 margin: 0px;
 font-family: arial;
}

#login {
 width: 100%;
 height: 100vh;
 background-image: url("img/wow.png");
 background-size:  cover;
 background-repeat: no-repeat;
 position:  absolute;
}

.center{
 width: 350px;
 height: auto;
 margin: 0 auto;
 margin-top: 100px;
 background-color: #f0f0f0;
 box-shadow: 2px 2px 16px 0px #757575;
 padding: 40px;
}

.center h2 {
 font-size: 40px;
 text-align: center;
 color: #757575;
 padding-bottom: 40px;
}

.f1{
 width: 100%;
}

.itpw{
 width: 92%;
 padding: 13px 10px;
 margin: 5px 0px;
 background-color: #dbdbdb;
 border: 3px solid #dbdbdb;
 color: #757575;
 transition: all 0.7s;
}

.its{
 width: 99.7%;
 font-size: 19px;
 color: #f5f5f5;
 padding: 12px;
 margin: 5px 0;
 background-color: #379e14;
 border: none;
 transition: all 0.4s;
}

.ipw:focus {
 border-bottom: 3px solid #004d40;
 color: #004d40;
}

.its:hover , its:focus {
 opacity: 0.7s;
 cursor: pointer;
}

.center p {
 margin: 20px 0;
 text-align: center;
 font-size: 14px;
}

.center p a {
 color: #757575;
}

@media screen and (min-width: 1500px){

 .center {
  width: 350px;
 }
}

@media screen and (max-width: 900px){
 #login{
  background-size: 100% 100%;
 }

 .its {
  width: 100%;
 }


 .itpw {
  font-size: 14px;
  width: 90%;
  padding: 13px 3%;
 }

 .center {
  width: 230px;
 }

 .center p {
  font-size: 12px;
 }

}

@media screen and (max-width: 350px) {
 .center{
  padding: 20px;
  width: 75%;
 }
}

Lalu save script ini menjadi style.php

Berikut file script selanjutnya

2. session_start();
4. $_SESSION['username'] = '';
5. unset($_SESSION['username']);
6. session_unset();
7. session_destroy();
8. header("location:index.php");
10. ?>

Lalu save menjadi logout.php

Lalu buat kembali denga nnama file index.php
Silahklan copy code index nya dengan klik https://pastebin.com/Ut9GDzgx. berhubung karena tidak bisa dimasukkan keedalam postingan ini, jadi silahkan buka halaman tesebut.

Lalu save .
Sekarang coba buka XAMPP anda, ohiya file 3 tadi silahkan simpan dalam folder C:/XAMPP/htdocs/(FOLDER ANDA)
Lalu jalankan XAMPP -> buka browser -> masuk ke alamat Localhost/FOLDERANDA
Jika anda ingin langsung di upload di hosting, gunakan aja Hosting Murah , sudah murah + terbaik !

Cukup sekian dari kami, silahkan selanjtnya dipelajari sendiri. Nantikan tutorial selanjutnya dari Tek-Me

• Tweet
• Share
• Share
• Share
• Share