Cara membuat Form login responsive di php dengan mysql

Halo teman – teman, dalam kesempatan kali ini penulis akan membagikan tutorial “Cara membuat form login responsive di php dengan database mysql”. Untuk teman – teman yang sudah sering berkecimpung di dunia web developer mungkin hal ini sangat mudah, tapi tidak ada salahnya membagi ilmu yang kita bisa. Langsung saja teman – teman dapat mengikuti langkah – laangkah dibawah ini.

1) Nyalakan web server anda. (Penulis menggunakan XAMPP).

2) Buat database login.

a. Buka CMD dengan shortcut windows + R, kemudian tulis CMD dan enter.

b. Buka direktori xampp anda. Direktori xampp penulis berada di Drive D, maka ketikan perintah seperti berikut :

-> CD.. (enter)

-> D: (enter)

-> CD XAMPP (enter)

-> CD mysql\bin (enter)

-> Mysql –u root (enter)

c. Buat database dan tabelnya pada cmd dengan perintah seperti dibawah ini :

-> Create database login (enter)

-> use login (enter)

-> CREATE TABLE user (

Username varchar(20) not null primary key,

Password varchar(20) not null primary key); (enter)

Lebih jelasnya dapat dilihat pada gambar dibawah ini :

3) Insert data pada table user tersebut dengan perintah dibawah ini :

-> Insert into user (username,password) values (‘admin’,’admin12345’); (enter)

Untuk lebih jelasnya dapat dilihat pada gambar dibawah ini :

4) Buat folder di dalam htdocs anda (D:xampp/htdocs/login) dengan nama login

5) Buka text editor kesayangan anda

6) Buat file style.css ketikan kode sperti dibawah ini :

body {font-family: Arial, Helvetica, sans-serif;}

form {border: 3px solid #f1f1f1;}

input[type=text], input[type=password] {

width: 100%;

padding: 12px 20px;

margin: 8px 0;

display: inline-block;

border: 1px solid #ccc;

box-sizing: border-box;

}

button {

background-color: #4CAF50;

color: white;

padding: 14px 20px;

margin: 8px 0;

border: none;

cursor: pointer;

width: 100%;

}

button:hover {

opacity: 0.8;

}

.cancelbtn {

width: auto;

padding: 10px 18px;

background-color: #f44336;

}

.imgcontainer {

text-align: center;

margin: 24px 0 12px 0;

}

img.avatar {

width: 20%;

border-radius: 50%;

}

.container {

padding: 16px;

}

span.psw {

float: right;

padding-top: 16px;

}

/* Change styles for span and cancel button on extra small screens */

@media screen and (max-width: 300px) {

span.psw {

     display: block;

     float: none;

}

.cancelbtn {

     width: 100%;

}

}

7) Setelah membuat file style.css kemudian buat file koneksi.php di dalam folder login. Ketiklah kode

dibawah ini :

<?php

//memvariabelkan letak server, dimana letak server adalah localhost

        $server = "localhost";

//memvariabelkan nama servernya.. biasanya root adalah nama server deafultnya

        $username = "root";

//memvariabelkan passwor dimana jika server tidak dipasword maka hanya di tambahkan tanda kutip saja

        $pass = "";

//memvariabelkan nama databasenya

        $db = "login";

        mysql_connect($server, $username, $pass) or die("koneksi gagal coy");

        mysql_select_db($db) or die("database tidak ditemukan brooo");

?>

8) Setelah membuat file koneksi.php, kemudian buatlah file index.php dengan kode seperti dibawah ini :

<!DOCTYPE html>

<html>

<head>

            <meta charset="utf-8">

            <meta http-equiv="X-UA-Compatible" content="IE=edge">

            <title>Form Login</title>

            <link rel="stylesheet" href="style.css">

</head>

<body>

            <h2>Login Form</h2>

            <form action="cek.php" method="post" >

                        <div class="imgcontainer">

    <img src="img_avatar2.png" alt="Avatar" class="avatar">

</div>

<div class="container">

    <label for="uname"><b>Username</b></label>

    <input type="text" placeholder="Enter Username" name="uname" required>

    <label for="psw"><b>Password</b></label>

    <input type="password" placeholder="Enter Password" name="psw" required>



    <button type="submit" name="login">Login</button>

    <label>

      <input type="checkbox" checked="checked" name="remember"> Remember me

    </label>

</div>

<div class="container" style="background-color:#f1f1f1">

    <button type="button" class="cancelbtn">Cancel</button>

    <span class="psw">Forgot <a href="#">password?</a></span>

</div>

            </form>

</body>

</html>

9) Setelah membuat file index.php, berikutnya membuat file cek.php dengan kode seperti dibawah ini :

<?php

session_start();

require("koneksi.php");

$user = $_POST['uname'];

$pwd = $_POST['psw'];

$cek = "Select * from user where username='$user' and password='$pwd' ";

$hasil = mysql_query($cek);

$hasil_cek = mysql_num_rows($hasil);

if ($hasil_cek==0){

echo "<script>alert('Anda Gagal Login')

location.replace('index.php')</script>";

//jika nama dan fasswor benar, maka akan masuk ke file index.php

}else{

header("location:berhasil.php");

$_SESSION['nama']=$hasil ['username'];

}

?>

10) Setelah membuat file cek.php, berikutnya membuat file berhasil.php dengan kode seperti dibawah ini :

<h1>Selamat Anda Berhasil Login </h1>

<a href="logout.php">logout ?</a>

11) Kemudian buatlah file logout.php dengan kode seperti berikut ini :

<?php

            session_start();

            session_destroy();



            header("location:index.php");

?>

(Baca Juga : Membuat restfull api dengan codeigniter )

Setelah semuanya telah diketik, kemudian buka browser anda dan tulis localhost/login maka akan tampil hasilnya seperti dibawah ini :

Bagaimana teman – teman, mudah bukan. Tetap semangat dan selalu optimis. Untuk teman – teman yang akan mendownload file source code dari tutorial ini silahkan kunjungi laman ini.

Terimakasih sudah berkunjung di blog ini.

Salam Blogger.

728x90 AdSpace

Followers

Cara membuat Form login responsive di php dengan mysql

Related posts

No comments:

Recent Post

Featured Post

Random Post

Recent Post