Cara Membuat Form Login Responsive Menggunakan PHP , MySQL , dan CSS



Seperti judul diatas saya disini akan membuat sebuah Form login secara responsive >_<



A. Tujuan :
                Mempelajari cara membuat sebuah web yang responsivemenggunakan PHP , MySQL, dan CSS.

B. Konsep dasar :
.Jadi kita akan menanamkan syntax CSS agar halaman login yang kita buat ini memiliki kesan bagus, keren dan enak dipandang , Dan juga membuat web tersebut lebih Responsive agar sesuai dengan device setiap user. Saya harapkan kalian sudah mengikuti Tutorial PHP sebelumnya dan juga kalian juga harus memiliki dasar - dasar PHP dan CSS . Disini juga kita akan menyisipkan MySQL pada bagian PHP tersebut.

C. Langkah Kerja :



  1.    Buka program untuk membuat coding PHP kalian --- > Lalu copas codingan dibawah ini dan save dengan nama index.php

  <?php
session_start();
if(isset($_SESSION['username']) || !empty($_SESSION['username'])){
    header("location:blog.php");
}
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <title>LOGIN</title>
        <link rel="stylesheet" href="style.css">
        <meta name="viewport" content="width=device-width , initial-scale=1">

    </head>
    <body>

        <div id="login">
            <div class="center">
                <h2>Login</h2>

                    <form class="f1" action="" method="post">
                        <input class="itpw" type="text" name="username" placeholder="Username or Email" required><br>
                        <input class="itpw" type="password" name="password" placeholder="Password" required><br>
                        <input class="its" type="submit" name="login" value="LOGIN">

                    <!-- PROSES LOGIN -->
                    <?php
                        if (isset($_POST['login'])) {
                            $username = $_POST['username'];
                            $filter = mysql_real_escape_string(stripcslashes(strip_tags(htmlspecialchars([$username],ENT_QUOTES))));
                            $password = md5($_POST['password']);
                            $user = 'zaqi';
                            $key = md5('zaqi');

                            if ((!empty($username) && !empty($password))) {
                                if($username == $user && $password == $key){
                                    $_SESSION['username'] = $username;
                                    $_SESSION['password'] = $password;
                                    //dialihkan ke halaman utama
                                    header("location:blog.php");
                                }else{
                                    echo "<p style='color:red;font-size:13px;margin:2px auto;'>(*) Usernanme atau Password Salah. </p>";
                                }
                                }else {
                                    echo "<p style='color:red:font-size:13px;margin:2px auto;'>(*) Silahkan isi Form yang telah tersedia </p>";   
                                }
                            }
                       
                        ?>
                    </form>
                    <p><a href="#">Forget Your Password? </a> | <a href="#">Created an account</a> </p>
            </div>
        </div>
    </body>
</html>
    

2 . Setelah itu silahkan kalian buat file baru dengan nama logout.php (agar kalian bisa logout)


<?php

session_start();

$_SESSION ['username'] = '';
unset ($_SESSION['username']);
session_unset();
session_destroy();
header ("location:index.php");
?>


3.  Jika sudah, silahkan kalian buat sebuah page baru (bebas) --- > lalu save dengan nama blog.php



4.   Page baru tersebut bertujuan jika kalian sudah login , kalian akan langsung ke direct ke page tersebut



5.   Sekarang saatnya membuat CSS



6.  Silahkan copas codingan dibawah --- > lalu save dengan nama style.css


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

#login {
    width: 100%;
    height: 100vh;
    background-image:url(images/#.jpg);
    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: #004d40;
    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%;
    }
}



table
    {border-collapse:colapse;
    border:1px solid white;
    }
    #menu {
            height:40px;
            width:100%
            background:url(bg-nav.jpg)repeat-x;
            }
    #menu table {
        border-color: none;
        background-color: black;
    }
    #menu {
        height:40px;
        text-align: center;
        vertical-align:center;
        color:#fff;
        font: DFPOP1-W9;
    }
    isi {
        padding:10 10 10;
    }
    #isi p{
        color:black;
        font:11 px candara,arial,tahoma;
      
        padding-bottom: 5px;
    }
    #isi img{
        border:1px , solid black;
        width :80px;
        height: 100px;
    }
    .table-menu{
        vertical-align: top;
        border-collapse: :colapse;
        border:1px solid black;
        background-color: #0066cc;
    }
    .footer{
        background-color: yellow;
    }new table{
        border-color: none;
    }
 
}
  
   




7.  Jangan lupa file – file yang telah dibuat masukan kedalam 1 folder yang sama



8.  Selesai

  

Jika kalian sudah selesai kalian bisa coba di Localhost masing - masing. Mungkin sekian yang bisa saya sampaikan mohon maaf bila ada kesalahan . Jika masih belum mengerti silahkan comment. Untuk kali ini saya cukupkan dulu terimakasih telah berkunjung ke blog saya.

D. Kesimpulan
       Kita telah membuat sebuah form login yang responsive , dan juga kita telah menyisipkan MySQL pada bagian index.php yang bertujuan agar menaruh user dan password kita ke dalama database

Komentar

Posting Komentar

Postingan populer dari blog ini

Percobaan Form dengan HTML ,PHP , dan CSS

Hi , disini saya akan mempraktekan cara membuat Form dengan HTML , PHP , dan Css secara sederhana >_<   A. Tujuan :                      Kita dapat memahami dan mengetahui fungsi dari CSS (Cascading Style Sheet) sebagai bahasa pemrograman guna mengatur desain dan layout web. B. Konsep Dasar  :        Cascading Style Sheet ( CSS ) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.          CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over , spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen....
Baca selengkapnya
Gambar
Simbol Cheat Sheet UML Diagram : Use Case, Activity, Sequence, Class, State Chart, Kolaborasi. Nama : Zaqi Salman Alexa Kelas : XI - RPL 1 Unified Modeling Language adalah sebuah bahasa yang berdasarkan grafik / gambar untuk visualisasi, menspesifikasikan, membangun, dan pendokumentasian dari sebuah sistem pengembangan perangkat lunak berbasis OOP (Object-Oriented Programming). Dalam hal ini, Unified Modeling Language (UML) bukanlah merupakan bahasa pemprograman tetapi model-model yang tercipta berhubungan langsung dengan berbagai macam bahasa pemrograman, sehingga memungkinkan melakukan pemetaan (mapping) langsung dari model-model yang dibuat dengan Unified Modeling Language (UML) dengan bahasa-bahasa pemprograman berorientasi objek seperti Java, Borland Delphi, Visual Basic, C++, dan lain-lain. Dibawah ini terdapat penjelasan mengenai simbol-simbol UML. 1. Use Case Diagram  2. Activity Diagram     3. Sequence Diagram...
Baca selengkapnya