DIR : /home/kozerus/public_html/ajax2db.html

/home/kozerus/public_html

TYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test AJAX/PHP</title>

<script type="text/javascript">
</script>

</head>
<body>

<h2>Save Movie Info</h2>
<form action="process.php" method="post">
    <input type="text" title="Title" placeholder="Title" name="Title" value="">
    <input type="text" title="Date" placeholder="Date" name="Date" value="">
    <input type="text" title="Link" placeholder="Link" name="Link" value="">
    <input type="submit" name="saveInfo" value="Save">
    <button type="reset" value="Reset">Clear</button>
</forn>
// Step 1: Create object
    var xhttp = new XMLHttpRequest();  // Create the xhttp object
    // Step 2: Setup an onreadystatechange function for the XMLHttpRequest object
    // This is actually run after send is done and the server spits out info.
    xhttp.onreadystatechange = function() {
        // Confirm we have a  successful connection. Then, receive the response info.
        // For PHP it is echo that sends it.
        // Loops seem to cause this to wait which means an array can be traversed
        // and the output could be written as a table, etc.
        if (this.readyState == 4 && this.status == 200) {
            // do something with the returned data
        }
    };
    // Step 3: Open connection
    // More or less, open a connection: @Params POST or GET, path to XML page or php script, set async t/f
    xhttp.open("GET", "process.php", true);
    // Step 4: Send the data and let server process it.
    //         After done processing it, onreadystatechange is triggered.
    xhttp.send();    // Start the process and send GET data


    //      For POST do and add these changes
    //  xhttp.open("POST", "process.php", true);
    // Used in POST to setup data types like JSON, XML, etc... MUST BE DONE AFTER OPEN
    // xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // Example data structure for Sending POST with above RequestHeader. See that this mimics GET 
    // xhttp.send("fname=Henry&lname=Ford");
    // xhttp.sebnd(formData);  // Can use a string variable with formatted data structure instead




<br/><br/>
<h2>Search Movie Info</h2>
<form>
    <input type="text" name="searchField"
           title="Search"
           placeholder="Search..."
           onkeyup="getData(this.value)"/>
</form>


function getData(query) {
    if (query == "") {
        document.getElementById("dynDataField").innerHTML = "<p></p>";
        return;
    } else {
         var xhttp = new XMLHttpRequest();  // Create the xhttp object
         var formData = "dbQuery=" + query; // Our query being setup for processing
         // This is actually run after open and send are done
         xhttp.onreadystatechange = function() {
             if (this.readyState == 4 && this.status == 200) {
                 updatePage(this);  // Send the returned data to further process
             }
         };
         xhttp.open("POST", "process.php", true);  // Open the connection
         xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
         xhttp.send(formData);    // Start the process

    }
}

function updatePage(returnData) {
    // Get the echoed data and insert to div of dynDataField
    document.getElementById("dynDataField").innerHTML = returnData.responseText;
}

OK, so we have two functions here. One is for getting the data and the other inserts the results into our div. Get data checks to see if the input field is empty and if so leaves things as they are. If there is data in the field, it is then inserted into a variable ?formData? and tied in with ?dbQuery=?. This is what PHP will look at and use to insert into a database query. We then setup a statechange listener to wait for the server to finish processing the search and we send the result to the other function.

    After this setup part, we do the standard open process but use POST instead of GET. Then, we tell the server what kind of data this is. Recall, GET defines it for us but is limited and less secure while POST has more data formats and better security but we have to define it using the setrequestheader. We then send the data in its formatted string to the server for processing. This w3schools link has some more info about each part. In this instance, the PHP script transfers a string back to the requester. Note, we can transfer JSON, XML, and other data. But, a string or ?responseText? is good for now.









<br/><br/>


<div id="dynDataField"></div>
</body>
</html>




<?php

// Retrieve data
function searchDB($QUERY) {
}

// Save new entry
function saveInfo($TITLE, $DATE, $INFOLINK) {
}

// Determin action
if(isset($_POST['saveInfo'])) {
    saveInfo($_POST["Title"], $_POST["Date"], $_POST["Link"]);
} elseif (isset($_POST['dbQuery'])) {
    searchDB($_POST['dbQuery']);
} else {
    echo "<h2 style='width:100%;background-color:#ff0000;color:#ffffff;text-align:center;'>Error! Illegal Access Method!</h2>";
}

?>
try {
    $serverPDO = new SQLite3('resources/server.db');
    $query = "SELECT * FROM Movies WHERE title LIKE '%" . $QUERY . "%' OR " .
                                         "date LIKE '%" . $QUERY . "%' OR " .
                                         "link LIKE '%" . $QUERY . "%'";
    $result = $serverPDO->query($query);

    while ($row = $result->fetchArray()) {
        echo "<div style='float: left;margin-left: 1em; margin-right: 1em;'>" .
             "<a href=" . $row["link"] ." target='blank'>" .
             "<img style='width:8em; height:10em;' src='" . $row["link"] . "'/></a><br/>" .
             "Title: " . $row["title"] .
             "<br/>Date: " . $row["date"] . "</div>";
    }

    if ($result->fetchArray() == 0) {
        echo "<div style='float:left;width:100%; background-color:pink;color:#ffffff;text-align:center;'>Nothing Found...</div>";
    } else {
        echo "<div style='float:left;margin-top:2em;width:100%; background-color:lightgreen;color:#ffffff;text-align:center;'>Search Completed...</div>";
    }
} catch (Exception $e) {
    echo "<h2 style='width:100%; background-color:ff0000;color:#ffffff;text-align:center;'>Error!</h2><br/>" . $e;
}



if ($TITLE != "" && $DATE != "" && $INFOLINK != "") {
    try {
        $serverPDO = new SQLite3('resources/server.db');
        $command = "INSERT INTO Movies VALUES('" . $TITLE . "','" . $DATE . "','" . $INFOLINK . "')";
        $serverPDO->exec($command);

        echo "<h2 style='width:100%;background-color:#0000ff;color:#ffffff;text-align:center;'>Inserted to db...</h2><br/>" .
             "Title: " . $TITLE . "<br/>Date: " . $DATE . "<br/>Link: " . $INFOLINK;
    } catch (Exception $e) {
        echo "<h2 style='width:100%; background-color:ff0000;color:#ffffff;text-align:center;'>Error! Database Insert Failed...</h2><br/>" . $e;
    }
} else {
    echo "<h2 style='width:100%; background-color:ff0000;color:#ffffff;text-align:center;'>Error!</h2><br/>" .
         "<h3>A field is empty...</h3>" . $e;
}
//


koh5_pano



Your browser does not support the HTML5 canvas element.
Drag mouse to navigate.

Navigation





17.Aug.2010, Martin Wengenmayer