Kursus Web Programming
  • Home
  • Blog
  • PHP
  • MySQL
  • Framework
  • Javascript
  • Tips dan Trik
Select Page

Membuat Material Design Form Login dengan PHP dan jQuery

by DUMET School | Sep 4, 2018 | Javascript, MySQL, PHP | 0 comments

Hallo sahabat Dumenity berjumpa lagi dalam tutorial kursuswebprogramming, pada tutorial kali ini kita akan belajar tentang Membuat Material Design Form Login dengan PHP dan jQuery. Keistimewaan dengan desain material Google adalah terinspirasi oleh metrik, gerakan, dan efek cahaya dunia nyata. Jadi, ini akan memberikan tampilan yang bagus untuk halaman web Anda dengan desain material. Sangat mudah untuk mengikuti prinsip desain material untuk menciptakan desain web modern yang trendi. Juga, ada kerangka seperti Materialize, Material Design Lite. Saya menggunakan perpustakaan Materialize untuk membuat Templat form Login dengan desain material. Ditambahkan ke integrasi desain material, contoh ini juga akan menangani otentikasi login menggunakan sesi PHP di script sisi server pada pengiriman form.
Form login Desain Material

Dalam template form login desain material, versi CDN perpustakaan Materialize digunakan untuk mengimpor skrip yang diperlukan dan CSS. Dalam form ini, nama pengguna dan bidang kata sandi digunakan untuk otentikasi. Bidang-bidang ini ditampilkan dengan placeholder yang tidak akan kehilangan visibilitas bahkan pada fokus bidang. Berikut template form login;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<html>
<head>
<title>Creating Material Design Login Form with PHP and jQuery</title>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
    <h5>Material Design Login Form</h5>
    <div id="user-login" class="row">
        <div class="col s12 z-depth-6 card-panel">
            <form class="login-form" name="login-form" method="POST"
                action="">
                <div class="row margin">
                    <div class="input-field col s12">
                        <i class="mdi-social-person-outline prefix"></i>
                        <input class="validate" id="username"
                            name="username" type="text" required>
                        <div class=usererr><?php if (! empty($username_error)) { echo $username_error; } ?></div>
                        <label for="username" data-error="wrong"
                            data-success="right" class="center-align">Username</label>
                    </div>
                </div>
 
                <div class="row margin">
                    <div class="input-field col s12">
                        <i class="mdi-action-lock-outline prefix"></i> <input
                            id="user_pass" name="user_pass"
                            type="password" required>
                        <div class=pwderr><?php if (! empty($password_error)) { echo $password_error; } ?></div>
                        <label for="password">Password</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12 m12 l12  login-text">
                        <input type="checkbox" id="remember-me"> <label
                            for="remember-me">Remember me</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
 
                        <input type="submit"
                            class="btn waves-effect waves-light col s12"
                            id="btnsubmit" name="submit" value="Login" />
                    </div>
                </div>
 
            </form>
 
        </div>
    </div>
</div>
</body>
</html>

HTML5 Validasi Form dan Kesalahan Display

Validasi form sisi klien dilakukan dengan validasi form HTML5 default.  Setelah saya memasukkan nama pengguna atau kata sandi yang salah, maka itu akan divalidasi dalam kode PHP setelah pengiriman form. Setelah membandingkan kredensial login dengan database, pesan validasi akan ditampilkan di template login desain material. Setelah pertandingan ditemukan maka pengguna akan dialihkan ke dasbor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
include 'Authentication.php';
if (isset($_POST['submit'])) {
    $authentication = new Authentication();
    $memberResult = $authentication->isMemberExists($_POST["username"]);
    if (empty($memberResult)) {
        $username_error = 'Incorrect Username';
    }
    else {
        if(!password_verify($_POST['user_pass'], $memberResult[0]["member_password"])) {
            $password_error = 'Incorrect Password';
        }
        if(empty($username_error) && empty($password_error)) {
            $_SESSION['username'] = $memberResult[0]["member_name"];
            header('location:dashboard.php');
        }
    }
}
?>

 

Di file dashboard.php, sesi PHP dimulai dan nama anggota yang sudah login dialamatkan pada pesan selamat datang. Halaman ini akan berisi tautan logout diikuti dengan pesan selamat datang. Dengan mengklik tautan logout, sesi yang sedang masuk ini akan dihapus dan pengguna akan dialihkan ke template login desain material.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
session_start();
?>
<style>
.member-dashboard {
    padding: 40px;
    background: #D2EDD5;
    color: #555;
    border-radius: 4px;
    display: inline-block;
}
 
.member-dashboard a {
    color: #09F;
    text-decoration: none;
}
</style>
<div class="member-dashboard">
    Hi <?php echo $_SESSION['username']; ?>, You have Successfully logged in!. <a href="logout.php">Logout</a>
</div>

skrip PHP untuk logout,

1
2
3
4
5
<?php    
     session_start();
     session_destroy();
     header('location: index.php');
?>

Otentikasi dan File DBController PHP

File kelas PHP Authentication berisi fungsi isMemberExists () untuk memeriksa database jika ada kecocokan ditemukan untuk nama anggota yang ditentukan. Ini menciptakan pernyataan SELECT dan mengirimkannya ke fungsi DBController dengan parameter queri. Di kelas DBController, pernyataan Query disiapkan dan parameter terikat untuk pernyataan menggunakan fungsi PHP call_user_func_array (). Berdasarkan hasil yang dikembalikan oleh isMemberExists () fungsi alur login PHP akan dikembangkan.

Authentication.php

1
2
3
4
5
6
7
8
9
10
11
<?php
require "DBController.php";
class Authentication {
    function isMemberExists($userName) {
        $db_handle = new DBController();
        $query = "SELECT * FROM members WHERE member_name = ?";
        $result = $db_handle->runQuery($query, 's', array($userName));
        return $result;
    }
}
?>

DBController.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<?php
class DBController {
private $host = "localhost";
private $user = "root";
private $password = "test";
private $database = "db_auth";
private $conn;
    function __construct() {
        $this->conn = $this->connectDB();
}
function connectDB() {
$conn = mysqli_connect($this->host,$this->user,$this->password,$this->database);
return $conn;
}
    function runBaseQuery($query) {
        $result = $this->conn->query($query);
        if ($result->num_rows > 0) {
            while($row = $result->fetch_assoc()) {
                $resultset[] = $row;
            }
        }
        return $resultset;
    }
    
    
    
    function runQuery($query, $param_type, $param_value_array) {
        $sql = $this->conn->prepare($query);
        $this->bindQueryParams($sql, $param_type, $param_value_array);
        $sql->execute();
        $result = $sql->get_result();
        
        if ($result->num_rows > 0) {
            while($row = $result->fetch_assoc()) {
                $resultset[] = $row;
            }
        }
        
        if(!empty($resultset)) {
            return $resultset;
        }
    }
    
    function bindQueryParams($sql, $param_type, $param_value_array) {
        $param_value_reference[] = & $param_type;
        for($i=0; $i<count($param_value_array); $i++) {
            $param_value_reference[] = & $param_value_array[$i];
        }
        call_user_func_array(array(
            $sql,
            'bind_param'
        ), $param_value_reference);
    }
    
    function insert($query, $param_type, $param_value_array) {
        $sql = $this->conn->prepare($query);
        $this->bindQueryParams($sql, $param_type, $param_value_array);
        $sql->execute();
    }
    
    function update($query, $param_type, $param_value_array) {
        $sql = $this->conn->prepare($query);
        $this->bindQueryParams($sql, $param_type, $param_value_array);
        $sql->execute();
    }
}
?>

Formulir Login Desain Material Menggunakan jQuery Dan CSS dengan PHP – Output

Template Login dengan desain material

 

Membuat Material Design Form Login dengan PHP dan jQuery

 

Oke itulah tadi pembahasan saya tentang Membuat Material Design Form Login dengan PHP dan jQuery semoga bermanfaat.

Facebook DUMET School

Konsultasi Gratis

Phone/WA/SMS : 0812-9933-3913
E-mail : info@dumetschool.com
Website : dumetschool.com

Categories

  • Aplikasi
  • Backend
  • C
  • Database
  • Framework
  • Golang
  • Javascript
  • Kursus Web Programming
  • Laravel
  • Mobile App
  • MySQL
  • PC
  • PHP
  • PostgreSQL
  • Programming
  • Python
  • Tips dan Trik
  • Website

Video E-Learning Web Programming

  • Tutorial PHP MySQL
  • Tutorial Framework

Testimoni Murid Web Programming

Testimoni Murid Web Programming
  • Facebook
  • X
  • RSS
© DUMET School

WhatsApp us