अध्याय 19: PHP, Ajax और डेटाबेस (PHP, Ajax and Database)

अध्याय 19: PHP, Ajax और डेटाबेस (PHP, Ajax and Database)

    इस अध्याय में, हम PHP, Ajax और डेटाबेस के साथ काम करने के तरीकों पर चर्चा करेंगे। इन तीन तकनीकों को मिलाकर, हम अधिक इंटरएक्टिव और प्रतिक्रियाशील वेब एप्लिकेशन्स बना सकते हैं। PHP सर्वर-साइड स्क्रिप्टिंग भाषा है, Ajax एक तकनीक है जो वेब पेज को बिना रीफ्रेश किए सर्वर से डेटा प्राप्त करने और भेजने की अनुमति देती है, और डेटाबेस डेटा को संग्रहीत और प्रबंधित करने के लिए उपयोग होता है। इस अध्याय में, हम डेटाबेस सेटअप से लेकर डेटा फेच, जोड़ना, अपडेट करना और हटाने तक के विभिन्न चरणों को कवर करेंगे। साथ ही, हम JSON के उपयोग और सुरक्षा उपायों पर भी चर्चा करेंगे। प्रैक्टिकल उदाहरणों के माध्यम से, आप सीखेंगे कि कैसे इन तकनीकों का उपयोग करके अधिक प्रभावी वेब एप्लिकेशन्स बनाई जा सके।

    डेटाबेस सेटअप (Database Setup)

    इस सेक्शन में, हम MySQL डेटाबेस सेटअप करेंगे और डेटाबेस टेबल्स बनाएंगे। उदाहरण के लिए, हम एक साधारण यूज़र मैनेजमेंट सिस्टम बनाएंगे जिसमें उपयोगकर्ता की जानकारी संग्रहीत की जाएगी। इस उदाहरण में, हम phpMyAdmin का उपयोग करेंगे।

    phpMyAdmin का उपयोग करके डेटाबेस सेटअप (Setting Up Database Using phpMyAdmin)

    phpMyAdmin में लॉगिन करना (Logging into phpMyAdmin)
    1. अपने ब्राउज़र में phpMyAdmin खोलें (आमतौर पर URL: http://localhost/phpmyadmin)।
    2. अपने MySQL उपयोगकर्ता नाम और पासवर्ड से लॉगिन करें।
    डेटाबेस बनाना (Creating a Database)
    1. phpMyAdmin के इंटरफेस में, बाएं साइडबार में “New” पर क्लिक करें।
    2. “Database name” फील्ड में डेटाबेस का नाम दर्ज करें, जैसे user_management।
    3. “Create” बटन पर क्लिक करें।
    डेटाबेस टेबल बनाना (Creating a Database Table)
    1. “user_management” डेटाबेस पर क्लिक करें।
    2. “Create table” फॉर्म में टेबल का नाम दर्ज करें, जैसे users।
    3. “Number of columns” को 4 पर सेट करें और “Go” बटन पर क्लिक करें।
    टेबल के कॉलम्स सेट करना (Setting Up Table Columns)
    1. कॉलम नाम, प्रकार और अन्य गुण भरें:
      • id – INT, AUTO_INCREMENT, PRIMARY KEY
      • name – VARCHAR(50), NOT NULL
      • email – VARCHAR(50), NOT NULL, UNIQUE
      • created_at – TIMESTAMP, DEFAULT CURRENT_TIMESTAMP
    2. “Save” बटन पर क्लिक करें।

    PHP और MySQL कनेक्शन (Connecting PHP with MySQL)

    अब, हम PHP का उपयोग करके MySQL डेटाबेस से कनेक्ट करेंगे। इसके लिए, हम mysqli एक्सटेंशन का उपयोग करेंगे।

    db_connect.php:

    <?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "user_management";

// कनेक्शन स्थापित करना
$conn = new mysqli($servername, $username, $password, $dbname);

// कनेक्शन की जाँच करना
if ($conn->connect_error) {
    die("कनेक्शन विफल: " . $conn->connect_error);
}
?>

    इस स्क्रिप्ट में:

    • $servername: डेटाबेस सर्वर का नाम (आमतौर पर ‘localhost’)।
    • $username: डेटाबेस उपयोगकर्ता का नाम।
    • $password: डेटाबेस उपयोगकर्ता का पासवर्ड।
    • $dbname: डेटाबेस का नाम जिसे आप उपयोग करना चाहते हैं।

    डेटाबेस कनेक्शन की जाँच (Testing Database Connection)

    हम यह सुनिश्चित करने के लिए एक साधारण स्क्रिप्ट बना सकते हैं कि डेटाबेस कनेक्शन सफलतापूर्वक स्थापित हो गया है।

    test_connection.php:

    <?php
include 'db_connect.php';

echo "कनेक्शन सफल रहा!";
?>

    जब आप इस स्क्रिप्ट को ब्राउज़र में खोलते हैं, तो “कनेक्शन सफल रहा!” संदेश दिखाई देना चाहिए, यह दर्शाता है कि कनेक्शन सफलतापूर्वक स्थापित हो गया है।

    डेटा सम्मिलित करना (Inserting Data)

    डेटाबेस में डेटा सम्मिलित करने के लिए, हम एक PHP स्क्रिप्ट बनाएंगे जो उपयोगकर्ता का नाम और ईमेल पता डेटाबेस में जोड़ देगा।

    insert_user.php:

    <?php
include 'db_connect.php';

$name = "John Doe";
$email = "john.doe@example.com";

$sql = "INSERT INTO users (name, email) VALUES ('$name', '$email')";

if ($conn->query($sql) === TRUE) {
    echo "नया रिकॉर्ड सफलतापूर्वक जोड़ा गया है।";
} else {
    echo "त्रुटि: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>

    इस स्क्रिप्ट में:

    • हम उपयोगकर्ता का नाम और ईमेल पता सेट करते हैं।
    • INSERT SQL क्वेरी का उपयोग करके डेटा को डेटाबेस में सम्मिलित करते हैं।
    • यदि क्वेरी सफल होती है, तो एक संदेश प्रदर्शित होता है, अन्यथा एक त्रुटि संदेश प्रदर्शित होता है।

    इस सेक्शन में, हमने phpMyAdmin का उपयोग करके MySQL डेटाबेस सेटअप किया, एक users टेबल बनाई, और PHP का उपयोग करके डेटाबेस से कनेक्ट किया। हमने डेटाबेस में डेटा सम्मिलित करने का भी तरीका सीखा। अगले सेक्शन में, हम देखेंगे कि कैसे PHP और Ajax का उपयोग करके डेटाबेस से डेटा प्राप्त किया जा सकता है और उसे HTML में प्रदर्शित किया जा सकता है।

    डेटा फेच करना (Fetching Data)

    इस सेक्शन में, हम PHP और Ajax का उपयोग करके MySQL डेटाबेस से डेटा प्राप्त करने का तरीका सीखेंगे। हम एक HTML पेज बनाएंगे जिसमें बटन क्लिक पर डेटा फेच होगा और उसे HTML तालिका में प्रदर्शित किया जाएगा।

    HTML और JavaScript बनाना (Creating HTML and JavaScript)

    सबसे पहले, हमें एक HTML पेज बनाना होगा जिसमें एक बटन और एक खाली div होगा जहाँ हम डेटाबेस से प्राप्त डेटा को प्रदर्शित करेंगे।

    index.html:

    <!DOCTYPE html>
<html>
<head>
    <title>डेटा फेच करना</title>
    <script>
        function fetchData() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("result").innerHTML = this.responseText;
                }
            };
            xhttp.open("GET", "fetch_data.php", true);
            xhttp.send();
        }
    </script>
</head>
<body>
    <h1>डेटाबेस से डेटा फेच करना</h1>
    <button type="button" onclick="fetchData()">डेटा लोड करें</button>
    <div id="result"></div>
</body>
</html>

    PHP स्क्रिप्ट बनाना (Creating the PHP Script)

    अब, हमें एक PHP स्क्रिप्ट बनानी होगी जो डेटाबेस से डेटा प्राप्त करेगी और उसे HTML तालिका के रूप में वापस भेजेगी।

    fetch_data.php:

    <?php
include 'db_connect.php';

$sql = "SELECT id, name, email, created_at FROM users";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    echo "<table border='1'>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Created At</th>
            </tr>";
    while($row = $result->fetch_assoc()) {
        echo "<tr>
                <td>" . $row["id"] . "</td>
                <td>" . $row["name"] . "</td>
                <td>" . $row["email"] . "</td>
                <td>" . $row["created_at"] . "</td>
              </tr>";
    }
    echo "</table>";
} else {
    echo "कोई डेटा नहीं मिला।";
}

$conn->close();
?>

    कोड का काम करने का तरीका (How the Code Works)

    1. HTML फाइल: इसमें एक बटन और एक div तत्व होते हैं। जब बटन पर क्लिक किया जाता है, तो fetchData() फंक्शन कॉल होता है।
    2. JavaScript कोड: fetchData() फंक्शन एक XMLHttpRequest ऑब्जेक्ट बनाता है और fetch_data.php से डेटा प्राप्त करने के लिए एक GET अनुरोध भेजता है। जब सर्वर से प्रतिक्रिया मिलती है, तो प्राप्त डेटा को “result” div में प्रदर्शित किया जाता है।
    3. PHP स्क्रिप्ट: fetch_data.php स्क्रिप्ट डेटाबेस से डेटा प्राप्त करती है और उसे HTML तालिका के रूप में वापस भेजती है। यदि डेटा उपलब्ध होता है, तो उसे तालिका में प्रदर्शित किया जाता है, अन्यथा “कोई डेटा नहीं मिला” संदेश प्रदर्शित होता है।

    परिणाम (Result)

    जब आप HTML पेज को ब्राउज़र में खोलते हैं और “डेटा लोड करें” बटन पर क्लिक करते हैं, तो डेटाबेस से डेटा लोड होता है और HTML तालिका के रूप में “result” div में प्रदर्शित होता है। यह प्रक्रिया बिना पेज को रीलोड किए होती है, जिससे उपयोगकर्ता अनुभव बेहतर होता है।

    index.html:

    <!DOCTYPE html>
<html>
<head>
    <title>डेटा फेच करना</title>
    <script>
        function fetchData() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("result").innerHTML = this.responseText;
                }
            };
            xhttp.open("GET", "fetch_data.php", true);
            xhttp.send();
        }
    </script>
</head>
<body>
    <h1>डेटाबेस से डेटा फेच करना</h1>
    <button type="button" onclick="fetchData()">डेटा लोड करें</button>
    <div id="result"></div>
</body>
</html>

    fetch_data.php:

    <?php
include 'db_connect.php';

$sql = "SELECT id, name, email, created_at FROM users";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    echo "<table border='1'>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Created At</th>
            </tr>";
    while($row = $result->fetch_assoc()) {
        echo "<tr>
                <td>" . $row["id"] . "</td>
                <td>" . $row["name"] . "</td>
                <td>" . $row["email"] . "</td>
                <td>" . $row["created_at"] . "</td>
              </tr>";
    }
    echo "</table>";
} else {
    echo "कोई डेटा नहीं मिला।";
}

$conn->close();
?>

    इस प्रकार, हमने देखा कि कैसे PHP और Ajax का उपयोग करके डेटाबेस से डेटा प्राप्त किया जा सकता है और उसे HTML तालिका में प्रदर्शित किया जा सकता है। अगले सेक्शन में, हम देखेंगे कि कैसे PHP और Ajax का उपयोग करके डेटाबेस में नया डेटा जोड़ा जा सकता है।

    JSON और डेटाबेस (JSON and Database)

    JSON (JavaScript Object Notation) एक लोकप्रिय डेटा फॉर्मेट है जो Ajax अनुरोधों के साथ अक्सर उपयोग किया जाता है। JSON डेटा को पढ़ना और लिखना आसान होता है, और यह वेब एप्लिकेशन्स में डेटा के आदान-प्रदान के लिए बहुत उपयुक्त है। इस सेक्शन में, हम देखेंगे कि कैसे JSON का उपयोग करके डेटाबेस के साथ डेटा का आदान-प्रदान किया जा सकता है।

    JSON का परिचय (Introduction to JSON)

    JSON एक हल्का डेटा इंटरचेंज फॉर्मेट है जो मानव-पढ़ने योग्य टेक्स्ट को उपयोग करता है। यह मुख्य रूप से JavaScript में उपयोग किया जाता है, लेकिन अधिकांश प्रोग्रामिंग भाषाएं JSON को पार्स और जेनरेट कर सकती हैं।

    JSON डेटा फॉर्मेट (JSON Data Format)

    {
    "name": "John Doe",
    "email": "john.doe@example.com"
}

    JSON के साथ डेटाबेस से डेटा प्राप्त करना (Fetching Data from Database with JSON)

    इस उदाहरण में, हम एक PHP स्क्रिप्ट बनाएंगे जो डेटाबेस से डेटा प्राप्त करेगी और उसे JSON फॉर्मेट में वापस भेजेगी। फिर, हम HTML और JavaScript का उपयोग करके JSON डेटा को प्रदर्शित करेंगे।

    fetch_data_json.php:

    <?php
include 'db_connect.php';

$sql = "SELECT id, name, email, created_at FROM users";
$result = $conn->query($sql);

$data = array();

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}

header('Content-Type: application/json');
echo json_encode($data);

$conn->close();
?>

    HTML और JavaScript बनाना (Creating HTML and JavaScript)

    अब, हम एक HTML पेज बनाएंगे जो JSON डेटा को सर्वर से प्राप्त करेगा और उसे HTML तालिका में प्रदर्शित करेगा।

    index.html:

    <!DOCTYPE html>
<html>
<head>
    <title>JSON और डेटाबेस</title>
    <script>
        function fetchData() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var response = JSON.parse(this.responseText);
                    var table = "<table border='1'><tr><th>ID</th><th>Name</th><th>Email</th><th>Created At</th></tr>";
                    for (var i = 0; i < response.length; i++) {
                        table += "<tr><td>" + response[i].id + "</td><td>" + response[i].name + "</td><td>" + response[i].email + "</td><td>" + response[i].created_at + "</td></tr>";
                    }
                    table += "</table>";
                    document.getElementById("result").innerHTML = table;
                }
            };
            xhttp.open("GET", "fetch_data_json.php", true);
            xhttp.send();
        }
    </script>
</head>
<body>
    <h1>JSON और डेटाबेस</h1>
    <button type="button" onclick="fetchData()">डेटा लोड करें</button>
    <div id="result"></div>
</body>
</html>

    JSON का उपयोग करके डेटाबेस में डेटा जोड़ना (Inserting Data into Database with JSON)

    अब, हम देखेंगे कि कैसे JSON का उपयोग करके डेटाबेस में डेटा जोड़ा जा सकता है। हम एक HTML फॉर्म बनाएंगे जो उपयोगकर्ता का नाम और ईमेल पता JSON फॉर्मेट में सर्वर पर भेजेगा।

    insert_data_json.html:

    <!DOCTYPE html>
<html>
<head>
    <title>डेटाबेस में डेटा जोड़ें</title>
    <script>
        function insertData() {
            var name = document.getElementById("name").value;
            var email = document.getElementById("email").value;
            var data = JSON.stringify({ "name": name, "email": email });

            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("response").innerHTML = this.responseText;
                }
            };
            xhttp.open("POST", "insert_data_json.php", true);
            xhttp.setRequestHeader("Content-Type", "application/json");
            xhttp.send(data);
        }
    </script>
</head>
<body>
    <h1>डेटाबेस में डेटा जोड़ें</h1>
    <form onsubmit="event.preventDefault(); insertData();">
        <label for="name">नाम:</label><br>
        <input type="text" id="name" name="name" required><br><br>
        <label for="email">ईमेल:</label><br>
        <input type="email" id="email" name="email" required><br><br>
        <input type="submit" value="जोड़ें">
    </form>
    <div id="response"></div>
</body>
</html>

    insert_data_json.php:

    <?php
include 'db_connect.php';

$data = json_decode(file_get_contents("php://input"), true);

$name = $data['name'];
$email = $data['email'];

$sql = "INSERT INTO users (name, email) VALUES ('$name', '$email')";

if ($conn->query($sql) === TRUE) {
    echo "नया रिकॉर्ड सफलतापूर्वक जोड़ा गया है।";
} else {
    echo "त्रुटि: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>

    परिणाम (Result)

    डेटा फेच करना: जब आप index.html पेज को ब्राउज़र में खोलते हैं और “डेटा लोड करें” बटन पर क्लिक करते हैं, तो JSON डेटा सर्वर से लोड होता है और HTML तालिका के रूप में “result” div में प्रदर्शित होता है।

    डेटा जोड़ना: जब आप insert_data_json.html पेज को ब्राउज़र में खोलते हैं और फॉर्म को सबमिट करते हैं, तो JSON डेटा सर्वर पर भेजा जाता है और डेटाबेस में नया रिकॉर्ड जोड़ दिया जाता है। प्रतिक्रिया “response” div में प्रदर्शित होती है।

    index.html:

    <!DOCTYPE html>
<html>
<head>
    <title>JSON और डेटाबेस</title>
    <script>
        function fetchData() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var response = JSON.parse(this.responseText);
                    var table = "<table border='1'><tr><th>ID</th><th>Name</th><th>Email</th><th>Created At</th></tr>";
                    for (var i = 0; i < response.length; i++) {
                        table += "<tr><td>" + response[i].id + "</td><td>" + response[i].name + "</td><td>" + response[i].email + "</td><td>" + response[i].created_at + "</td></tr>";
                    }
                    table += "</table>";
                    document.getElementById("result").innerHTML = table;
                }
            };
            xhttp.open("GET", "fetch_data_json.php", true);
            xhttp.send();
        }
    </script>
</head>
<body>
    <h1>JSON और डेटाबेस</h1>
    <button type="button" onclick="fetchData()">डेटा लोड करें</button>
    <div id="result"></div>
</body>
</html>

    fetch_data_json.php:

    <?php
include 'db_connect.php';

$sql = "SELECT id, name, email, created_at FROM users";
$result = $conn->query($sql);

$data = array();

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}

header('Content-Type: application/json');
echo json_encode($data);

$conn->close();
?>


    <!DOCTYPE html>
<html>
<head>
    <title>डेटाबेस में डेटा जोड़ें</title>
    <script>
        function insertData() {
            var name = document.getElementById("name").value;
            var email = document.getElementById("email").value;
            var data = JSON.stringify({ "name": name, "email": email });

            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("response").innerHTML = this.responseText;
                }
            };
            xhttp.open("POST", "insert_data_json.php", true);
            xhttp.setRequestHeader("Content-Type", "application/json");
            xhttp.send(data);
        }
    </script>
</head>
<body>
    <h1>डेटाबेस में डेटा जोड़ें</h1>
    <form onsubmit="event.preventDefault(); insertData();">
        <label for="name">नाम:</label><br>
        <input type="text" id="name" name="name" required><br><br>
        <label for="email
       <label for="email">ईमेल:</label><br>
        <input type="email" id="email" name="email" required><br><br>
        <input type="submit" value="जोड़ें">
    </form>
    <div id="response"></div>
</body>
</html>

    insert_data_json.php:

    <?php
include 'db_connect.php';

$data = json_decode(file_get_contents("php://input"), true);

$name = $data['name'];
$email = $data['email'];

$sql = "INSERT INTO users (name, email) VALUES ('$name', '$email')";

if ($conn->query($sql) === TRUE) {
    echo "नया रिकॉर्ड सफलतापूर्वक जोड़ा गया है।";
} else {
    echo "त्रुटि: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>

    संक्षेप (Summary)

    इस सेक्शन में, हमने देखा कि कैसे JSON का उपयोग करके डेटाबेस से डेटा प्राप्त किया जा सकता है और उसे HTML में प्रदर्शित किया जा सकता है। साथ ही, हमने देखा कि कैसे JSON का उपयोग करके डेटाबेस में नया डेटा जोड़ा जा सकता है। JSON का उपयोग Ajax अनुरोधों में डेटा के आदान-प्रदान को सरल और प्रभावी बनाता है। अगले सेक्शन में, हम PHP, Ajax, और डेटाबेस के साथ काम करते समय आवश्यक सुरक्षा उपायों पर चर्चा करेंगे।

    यह भी जानें

    chapter 11 error handling in file operations in php Good Vibes Only

    अध्याय 11: PHP में फ़ाइल आई/ओ ऑपरेशन्स में एरर हैंडलिंग (Error Handling in File I/O Operations in PHP)

    chapter 8 php functions Good Vibes Only

    अध्याय 8: PHP फंक्शन्स (PHP Functions)

    chapter 16 php and database connection part 2 Good Vibes Only

    अध्याय 16: PHP और डेटाबेस कनेक्शन – भाग 2 (PHP and Database Connection – Part 2)

    chapter 1 introduction to php Good Vibes Only

    अध्याय 1: PHP का परिचय (Introduction to PHP)



    Table of Contents

    → Index