جلسه بیست سوم PHP : پایگاه داده و Ajax

جلسه بیست سوم PHP : آموزش کامل زبان برنامه نویسی پی اچ پی مقدماتی تا پیشرفته

در این مقاله از کدپز با جلسه بیست سوم PHP که با موضوع  ساخت جستجوی زنده ( Live ) پایگاه داده با استفاده از AJAX می باشد، در خدمت شما هستیم.

در قسمت قبل در جلسه بیست دوم PHP به آموزش AJAX پرداختیم و دستورات آن در PHP را بررسی کردیم.

سیزدهمین جلسه از PHP پیشرفته

در پایان این جلسه:

می آموزید تا یک ویژگی جستجوی پایگاه داده MySQL را با استفاده از PHP و AJAX بسازید.

با ما همراه باشید با جلسه بیست سوم PHP

ساخت جستجوی زنده ( Live ) پایگاه داده با استفاده از AJAX

شما می‌توانید یک پایگاه ‌داده زنده ساده را با استفاده از AJAX و PHP ایجاد کنید، هنگامی که کاربر شروع به تایپ کردن می کند، نتایج جستجو به صورت زنده در جعبه ورودی به نمایش در خواهد آمد.

در این جلسه ما می‌خواهیم یک کادر جستجوی زنده ایجاد کنیم که این جدول، کشورها را جستجو کند و نتایج را نشان دهد. در ابتدا باید این جدول را در MySQL ایجاد کنیم.

مرحله ۱: ایجاد جدول پایگاه‌داده

با استفاده از دستور SQL زیر جدول کشور ها در database ایجاد خواهد شد.

CREATE TABLE countries (
    id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(50) NOT NULL
);

پس از ایجاد جدول بالا از جلسه بیست سوم PHP ، باید آن را با داده‌هایی با استفاده از دستورات SQL وارد کنید.

مرحله ۲: ایجاد فرم جستجو

اکنون، می خواهیم یک رابط وب ساده ایجاد کنیم به گونه ایی که به کاربر اجازه دهد تا نام کشورهایی که در جدول کشورهای ما موجود است را جستجو کند، دقیقا مانند نحوه عملکرد مثال autocomplete که در جلسه قبل بررسی کردیم. یک فایل PHP با نام ” search-form.php ” بسازید و کد زیر از جلسه بیست سوم PHP را در داخل آن قرار دهید.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP Live MySQL Database Search</title>
<style type="text/css">
    body{
    font-family: Arail, sans-serif;
    }
    /* Formatting search box */
    .search-box{
    width: 300px;
        position: relative;
        display: inline-block;
        font-size: 14px;
    }
    .search-box input[type="text"]{
    height: 32px;
        padding: 5px 10px;
        border: 1px solid #CCCCCC;
        font-size: 14px;
    }
    .result{
    position: absolute;
    z-index: 999;
        top: 100%;
        left: 0;
    }
    .search-box input[type="text"], .result{
    width: 100%;
    box-sizing: border-box;
    }
    /* Formatting result items */
    .result p{
    margin: 0;
    padding: 7px 10px;
        border: 1px solid #CCCCCC;
        border-top: none;
        cursor: pointer;
    }
    .result p:hover{
    background: #f2f2f2;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.search-box input[type="text"]').on("keyup input", function(){
            /* Get input value on change */
            var inputVal = $(this).val();
            var resultDropdown = $(this).siblings(".result");
            if(inputVal.length){
                $.get("backend-search.php", {term: inputVal}).done(function(data){
                    // Display the returned data in browser
                    resultDropdown.html(data);
                });
        } else{
                resultDropdown.empty();
            }
        });

        // Set search input value on click of result item
        $(document).on("click", ".result p", function(){
            $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
            $(this).parent(".result").empty();
        });
    });
</script>
</head>
<body>
    <div class="search-box">
        <input type="text" autocomplete="off" placeholder="Search country..." />
        <div class="result"></div>
    </div>
</body>
</html>

هر زمان که محتوای ورودی جستجو تغییر می‌کند یا رویداد keyup در ورودی کد jQuery رخ می‌دهد ( خط شماره ۴۷ تا ۶۷ ) یک درخواست AJAX برای فایل ” backend-search.php ” ارسال می‌کند که رکوردهای جدول کشورها مربوط به عبارت جستجو را بازیابی می‌کند. این رکوردها در داخل یک < div > وارد می‌شوند و روی مرورگر نمایش داده می‌شوند.

مرحله ۳: پردازش موتور جستجو در بکند

در اینجا کد اصلی فایل ” backend-search.php ” وجود دارد. که براساس رشته ارسال شده از طریق AJAX توسط کاربر، پایگاه‌داده را جستجو می کند و سپس نتایج را به مرورگر ارسال می‌کند.

دستور زیر را به سه روش رویه ایی، شی گرایی و PDO بررسی خواهیم کرد.

مثال زیر از جلسه بیست سوم PHP به صورت MySQL رویه ایی نوشته شده است.

<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
$link = mysqli_connect("localhost", "root", "", "demo");
 
// Check connection
if($link === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
}
 
if(isset($_REQUEST["term"])){
    // Prepare a select statement
    $sql = "SELECT * FROM countries WHERE name LIKE ?";
    
    if($stmt = mysqli_prepare($link, $sql)){
        // Bind variables to the prepared statement as parameters
        mysqli_stmt_bind_param($stmt, "s", $param_term);
        
        // Set parameters
        $param_term = $_REQUEST["term"] . '%';
        
        // Attempt to execute the prepared statement
        if(mysqli_stmt_execute($stmt)){
            $result = mysqli_stmt_get_result($stmt);
            
            // Check number of rows in the result set
            if(mysqli_num_rows($result) > 0){
                // Fetch result rows as an associative array
                while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
                    echo "<p>" . $row["name"] . "</p>";
                }
            } else{
                echo "<p>No matches found</p>";
            }
        } else{
            echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
        }
    }
     
    // Close statement
    mysqli_stmt_close($stmt);
}
 
// close connection
mysqli_close($link);
?>

مثال زیر به صورت MySQL شی گرایی نوشته شده است.

<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
$mysqli = new mysqli("localhost", "root", "", "demo");
 
// Check connection
if($mysqli === false){
    die("ERROR: Could not connect. " . $mysqli->connect_error);
}
 
if(isset($_REQUEST["term"])){
    // Prepare a select statement
    $sql = "SELECT * FROM countries WHERE name LIKE ?";
    
    if($stmt = $mysqli->prepare($sql)){
        // Bind variables to the prepared statement as parameters
        $stmt->bind_param("s", $param_term);
        
        // Set parameters
        $param_term = $_REQUEST["term"] . '%';
        
        // Attempt to execute the prepared statement
        if($stmt->execute()){
            $result = $stmt->get_result();
            
            // Check number of rows in the result set
            if($result->num_rows > 0){
                // Fetch result rows as an associative array
                while($row = $result->fetch_array(MYSQLI_ASSOC)){
                    echo "<p>" . $row["name"] . "</p>";
                }
            } else{
                echo "<p>No matches found</p>";
            }
        } else{
            echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
        }
    }
     
    // Close statement
    $stmt->close();
}
 
// Close connection
$mysqli->close();
?>

مثال زیر با روش PDO نوشته شده است.

<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
try{
    $pdo = new PDO("mysql:host=localhost;dbname=demo", "root", "");
    // Set the PDO error mode to exception
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e){
    die("ERROR: Could not connect. " . $e->getMessage());
}
 
// Attempt search query execution
try{
    if(isset($_REQUEST["term"])){
        // create prepared statement
        $sql = "SELECT * FROM countries WHERE name LIKE :term";
        $stmt = $pdo->prepare($sql);
        $term = $_REQUEST["term"] . '%';
        // bind parameters to statement
        $stmt->bindParam(":term", $term);
        // execute the prepared statement
        $stmt->execute();
        if($stmt->rowCount() > 0){
            while($row = $stmt->fetch()){
                echo "<p>" . $row["name"] . "</p>";
            }
        } else{
            echo "<p>No matches found</p>";
        }
    }  
} catch(PDOException $e){
    die("ERROR: Could not able to execute $sql. " . $e->getMessage());
}
 
// Close statement
unset($stmt);
 
// Close connection
unset($pdo);
?>

دستور SELECT برای یافتن رکوردهای تطبیق در جدول پایگاه‌داده کشورها مورد استفاده قرار می‌گیرد. ( خط شماره ۱۶ ) .

نکته مهم: همیشه قبل از این که کاربر اطلاعات را وارد کند، شما بهتر است تا برخی عبارات را فیلتر کنید. همچنین می توانید از تابع ()PHP mysqli_real_escape_string نیز استفاده کنید. در این تابع می توان کلمات دیگری را جایگزین کلمات دیگر کرد.

تبریک میگم شما موفق شدید تا جلسه بیست سوم PHP از کدپز را پشت سر بگذارید. منتظر نقطه نظرات شما عزیزان هستیم.

📝<< افراد موفق مثل تو، در انجام کارهایشان امروز و فردا نمی کنند و زندگی شان را در انتظار رسیدن بهترین زمان برای انجام کاری، از دست نمی دهند!!!  . . . . >> ☑️




مقاله قبلی: جلسه بیست دوم PHP :

مقاله بعدی: جلسه بیست چهارم PHP : تمارین PHP
منبع این نوشته : https://codepaz.com/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-php/
سایر مقالات :

جلسه معرفیرفتن به مطلب
جلسه اول Phpرفتن به مطلب
جلسه دوم Phpرفتن به مطلب
جلسه سوم Phpرفتن به مطلب
جلسه چهارم PHPرفتن به مطلب
جلسه پنجم PHPرفتن به مطلب
جلسه ششم PHPرفتن به مطلب
جلسه هفتم PHPرفتن به مطلب
جلسه هشتم PHPرفتن به مطلب
جلسه نهم PHPرفتن به مطلب
جلسه دهم PHP - یادآوری فرم در html - فرم ها در PHP‌ - آشنایی با متد های GET_$ و POST_$رفتن به مطلب
جلسه یازدهم PHP: شی گرایی - تعریف کلاس - ساخت اشیا فراخوانی تابع عضورفتن به مطلب
جلسه پانزدهم PHP: اتصال PHP به MySQL - (PDO یا MySQL) - بستن اتصالرفتن به مطلب
جلسه هفدهم PHP : وارد کردن اطلاعات در MySQL با دو روش mysqli و PDO - به صورت رویه ای و شی گراییرفتن به مطلب
جلسه هجدهم PHP- دریافت آخرین شناسه در پایگاه داده MySQL - دستورات آماده PHP در MySQL رفتن به مطلب
جلسه نوزدهم PHP: رفتن به مطلب
جلسه بیست یکم PHP : XML - DOM - SimpleXMLرفتن به مطلب
جلسه بیست دوم PHP : رفتن به مطلب
جلسه بیست سوم PHP : پایگاه داده و Ajaxرفتن به مطلب
جلسه بیست چهارم PHP : تمارین PHP رفتن به مطلب
جلسه بیست پنجم PHP رفتن به مطلب

  برنامه نویسی