جلسه بیست سوم PHP : آموزش کامل زبان برنامه نویسی پی اچ پی مقدماتی تا پیشرفته
در این مقاله از کدپز با جلسه بیست سوم PHP که با موضوع ساخت جستجوی زنده ( Live ) پایگاه داده با استفاده از AJAX می باشد، در خدمت شما هستیم.
در قسمت قبل در جلسه بیست دوم PHP به آموزش AJAX پرداختیم و دستورات آن در PHP را بررسی کردیم.
در پایان این جلسه:
می آموزید تا یک ویژگی جستجوی پایگاه داده MySQL را با استفاده از PHP و AJAX بسازید.
با ما همراه باشید با جلسه بیست سوم PHP
ساخت جستجوی زنده ( Live ) پایگاه داده با استفاده از AJAX
شما می‌توانید یک پایگاه داده زنده ساده را با استفاده از AJAX و PHP ایجاد کنید، هنگامی که کاربر شروع به تایپ کردن می کند، نتایج جستجو به صورت زنده در جعبه ورودی به نمایش در خواهد آمد.
در این جلسه ما می‌خواهیم یک کادر جستجوی زنده ایجاد کنیم که این جدول، کشورها را جستجو کند و نتایج را نشان دهد. در ابتدا باید این جدول را در MySQL ایجاد کنیم.
مرحله ۱: ایجاد جدول پایگاه‌داده
با استفاده از دستور SQL زیر جدول کشور ها در database ایجاد خواهد شد.
|
1 2 3 4 5 |
CREATE TABLE countries ( id INT NOT NULL PRIMARY KEY AUTO_INCREMENT, name VARCHAR(50) NOT NULL ); |
پس از ایجاد جدول بالا از جلسه بیست سوم PHP ، باید آن را با داده‌هایی با استفاده از دستورات SQL وارد کنید.
مرحله 2: ایجاد فرم جستجو
اکنون، می خواهیم یک رابط وب ساده ایجاد کنیم به گونه ایی که به کاربر اجازه دهد تا نام کشورهایی که در جدول کشورهای ما موجود است را جستجو کند، دقیقا مانند نحوه عملکرد مثال autocomplete که در جلسه قبل بررسی کردیم. یک فایل PHP با نام ” search-form.php ” بسازید و کد زیر از جلسه بیست سوم 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 71 72 73 74 75 76 |
<!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 رخ می‌دهد ( خط شماره 47 تا 67 ) یک درخواست AJAX برای فایل ” backend-search.php ” ارسال می‌کند که رکوردهای جدول کشورها مربوط به عبارت جستجو را بازیابی می‌کند. این رکوردها در داخل یک < div > وارد می‌شوند و روی مرورگر نمایش داده می‌شوند.
مرحله 3: پردازش موتور جستجو در بکند
در اینجا کد اصلی فایل ” backend-search.php ” وجود دارد. که براساس رشته ارسال شده از طریق AJAX توسط کاربر، پایگاه‌داده را جستجو می کند و سپس نتایج را به مرورگر ارسال می‌کند.
دستور زیر را به سه روش رویه ایی، شی گرایی و PDO بررسی خواهیم کرد.
مثال زیر از جلسه بیست سوم PHP به صورت MySQL رویه ایی نوشته شده است.
|
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 |
<?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 شی گرایی نوشته شده است.
|
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 |
<?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 نوشته شده است.
|
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 |
<?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 برای یافتن رکوردهای تطبیق در جدول پایگاه‌داده کشورها مورد استفاده قرار می‌گیرد. ( خط شماره 16 ) .
نکته مهم: همیشه قبل از این که کاربر اطلاعات را وارد کند، شما بهتر است تا برخی عبارات را فیلتر کنید. همچنین می توانید از تابع ()PHP mysqli_real_escape_string نیز استفاده کنید. در این تابع می توان کلمات دیگری را جایگزین کلمات دیگر کرد.
تبریک میگم شما موفق شدید تا جلسه بیست سوم PHP از کدپز را پشت سر بگذارید. منتظر نقطه نظرات شما عزیزان هستیم.
📝<< افراد موفق مثل تو، در انجام کارهایشان امروز و فردا نمی کنند و زندگی شان را در انتظار رسیدن بهترین زمان برای انجام کاری، از دست نمی دهند!!! . . . . >> ☑️
1 Comment
Join the discussion and tell us your opinion.
سلام وقت بخیر ببخشین چرا فقط کلمات انگلیسی رو فقط از دیتابیس واکشی میکنه؟