Hallo sahabat, bertemu kembali pada website Dumet School. Dalam kesempatan kali ini saya akan membagikan tutorial tentang Cara Membuat Custom Kode Captcha di PHP. Code captcha sering ditemukan saat akan melakukan registrasi maupun melakukan input yang membutuhkan suatu validasi.
Dalam kasus kali ini kita akan belajar Cara Membuat Custom Kode Captcha di PHP. Oke ikutin yuk cara pembuatannya seperti langkah-langkah berikut ini:
Langkah pertama
Buat file dengan struktur html untuk tampilan sebuah form seperti code dibawah ini:
index.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 |
<html> <head> <title>Bagaimana Cara Membuat Custom Kode Captcha di PHP</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <div class="container"> <h3 class="text-center my-3">Bagaimana Cara Membuat Custom Kode Captcha di PHP</a></h3> <div class="row"> <div class="col-md-6 offset-md-3"> <div class="card"> <div class="card-header"> Form Register </div> <div class="card-body"> <form method="post" id="form_captch"> <div class="form-row"> <div class="form-group col-md-6"> <label for="inputFirstName">First Name</label> <input type="text" class="form-control form-control-lg" id="inputFirstName" placeholder="First Name"> </div> <div class="form-group col-md-6"> <label for="inputLastName">Last Name</label> <input type="text" class="form-control form-control-lg" id="inputLastName" placeholder="Last Name"> </div> </div> <div class="form-group"> <label for="inputEmail">Email Address</label> <input type="text" class="form-control form-control-lg" id="inputEmail" placeholder="Email Address"> </div> <div class="form-group"> <label for="inputPassword">Password</label> <input type="password" class="form-control form-control-lg" id="inputPassword" placeholder="Password"> </div> <div class="form-group"> <label for="inputCode">Code</label> <div class="input-group mb-3"> <input type="text" class="form-control form-control-lg" name="captcha_code" id="captcha_code" placeholder="Input Code"> <div class="input-group-append"> <span class="input-group-text" id="basic-addon2"><img src="image.php" id="captcha_image" style="height:22px;width:125px;"/></span> </div> </div> </div> <button type="submit" name="register" id="register" class="btn btn-primary">Register</button> </form> </div> </div> </div> </div> </div> </body> </html> |
Jika sudah perhatikan pada tag title terdapat beberapa library dari jquery dan bootstrap yang saya pakai dalam membuat custom captcha kali ini.
Langkah kedua
Buat script yang berisi beberapa fungsi serta perintah ajax untuk melakukan request ke file lainnya, silahkan ketikkan code dibawah ini:
|
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 |
<script> $(document).ready(function(){ $('#form_captch').on('submit', function(event){ event.preventDefault(); if($('#captcha_code').val() == '') { alert('Please Enter Captcha Code'); $('#register').attr('disabled', 'disabled'); return false; } else { alert('Registration form successfully validated - Captcha Code'); $('#form_captch')[0].reset(); $('#captcha_image').attr('src', 'image.php'); } }); $('#captcha_code').on('blur', function(){ var code = $('#captcha_code').val(); if(code == '') { alert('Enter Captcha Code'); $('#register').attr('disabled', 'disabled'); } else { $.ajax({ url:"check_code.php", method:"POST", data:{code:code}, success:function(data) { if(data == 'success') { $('#register').attr('disabled', false); } else { $('#register').attr('disabled', 'disabled'); alert('Invalid Code'); } } }); } }); }); </script> |
Baiklah pada script diatas terdapat fungsi event dimana saat button di klik form input tidak ada isi maka akan menampilkan error. Jika terisi semua form terutama pada input code captcha akan ada perintah ajax untuk melakukan pengecekan atau request ke file check_code.php
Saya kira cukup dalam pembahasan kali ini ,dan akan dilanjutkan pada artikel berikutnya.
terima kasih