كيفاش تصاوب code captcha ب php


فهاد الدرس البسيط غادي نشوفو كيفاش نقادو code captcha لي كنشوفوه ف les formulaires ملي كتبغي تسجل فشي موقع فغادي نقادو الكود وغادي نديرو عليه des tests الدرس بسيط للمبتدئين.

نظرة سريعة بالفيديو


1- الملف generate.php


أول حاجة زيد مشروع جديد ف xampp/htdocs سميه captcha-code زيد فيه ملف جديد سميه generate.php فيه غادي يكون الكود لي غادي يمكني باش نcréer الصورة لي غادي تكون فيها الارقام ديال الكود فمنبعد مكنسترجع الكود لي غادي يكون ف session سميتها captcha ولي غادي يكون فالملف index.php لي غادي نزيدوه من بعد كنحدد حجم الخط منبعد عرض وطول الصورة منبعد كنcréer الصورة بل fonction imagecreate لي كنعطيها الطول والعرض منبعد كنعطيها لون ل background لي هو بيض بواسطة ل fonction imagecolorallocate منبعد كنحدد اللون ديال الtext ولي هو اسود من بعد كنزيد الtext للصورة بواسطة ل fonction imagettftext من بعد كنزيد الخطوط لي كيبانو مع الكود بواسطة لfonction imageline وفالأخير كن créer l'image ديالي الكود ديال الملف هو :

                                    
                                        <?php
session_start();
header('Content-type:image/jpeg');
$captcha = $_SESSION['captcha'];


$fontsize = 30;

$image_width = 120;
$image_height = 40;


$image = imagecreate($image_width,$image_height);

imagecolorallocate($image,255,255,255);

$text_color = imagecolorallocate($image,0,0,0);

imagettftext($image,$fontsize,0,15,30,$text_color,'AlexBrush-Regular.ttf',$captcha);
//add lines to image background
for($i=1;$i<30;$i++){
    $x = rand(1,80);
    $x1 = rand(1,300);
    $y = rand(1,80);
    $y1 = rand(1,300);
    imageline($image,$x,$y,$x1,$y1,$text_color);
}
imagejpeg($image);

                                    
                                

2- الملف check.php


فالمجلد الرئيسي زيد ملف جديد سميه check.php هادا غادي يكون فيه الكود لي كيمكن من التحقق واش الكود لي دخل المستخدم مطابق للcaptcha code فأولا كنتحقق يلا مكنش الكود معروض كنعرضو منبعد كن tester واش كيطابق القيمة لي دخل المستخدم فالحقل يلا طابقها كنعرض رسالة نجاح مطبقهاش كنعرض رسالة خطأ وكنعاود نعرض كود خور الكود ديال الملف هو :

                                    
                                        <?php 
if(!isset($_POST['code'])){
    $_SESSION['captcha'] = rand(1000,9999);  
}else{
    if($_SESSION['captcha'] == $_POST['code']){
        echo '<div class="alert alert-success">Vérifié</div>';
    }else{
        echo '<div class="alert alert-danger">Erreur veuillez réessayer</div>';
        $_SESSION['captcha'] = rand(1000,9999);
    }
}
?>
                                    
                                

3- الملف index.php


فالمجلد الرئيسي زيد ملف جديد سميه index.php هادا هو الملف لي غادي يكون هو الصفحة الرئيسية ديالنا فيه الفورم لي فيها الحقل لي كيدخل فيه المستخدم الكود وفيه الصورة لي كتاخد الملف generate.php لأن هاد الملف هو براسو عبارة عن صورة الكود ديال الملف هو :

                                      
                                        <?php
session_start(); 
include('includes/header.php');
?>
<div class="container">
    <div class="col-md-6 col-md-offset-3">
       <?php include('check.php');?>
        <div class="panel panel-default">
            <div class="row">
                <div class="col-md-4 col-md-offset-3">
                    <form action="index.php" method="post" style="margin:20px;">
                        <div class="form-group">
                            <img src="generate.php" alt="" class="thumbnail">
                        </div>
                        <div class="form-group">
                            <input type="number" name="code" class="fom-control" required="" placeholder="Entrer le code">
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-success">Valider</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<?php include('includes/footer.php');?>
                                      
                                    

4- الملف header.php


فالمجلد الرئيسي زيد مجلد جديد سميه includes فيه زيد جوج ملفات واحد header.php وآخر footer.php ف header.php كاين القائمة ديالنا الكود ديال الملف هو:

                                        
                                            <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Captcha Code</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Accueil</a>
    </div>
  </div><!-- /.container-fluid -->
</nav>
                                        
                                    

5- الملف footer.php


الكود ديال footer.php هو:

                                        
                                             <footer>
    <div class="text-center">
      <p class="lead text-info">DarijaCoding &copy;2017</p>
    </div>
 </footer>
 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>
                                        
                                    

كلمات مفاتيح :