Payne's HTML5 Notes

Back to Payne's HTML5 Notebook

3. Code for HTML5 Tag Search

Link to HTML5 Tag Search.

Brief Instructions:

Code Snip from HTML File
...

<!-- Import JavaScript Code -->
<script type="text/javascript" src="ajax.js"></script>
...

<!-- Display all records -->
<script type="text/javascript">showRecords("");</script>
...

<!-- Input fields -->
<td>
&lt;<input type="text" id="tagName" onkeyup="showRecords(this.value)" style="width: 80px;" />&gt;
</td>
<td>
<input type="text" id="tagDescription" onkeyup="if(event.keyCode == 13){addRecord();}" style="width: 500px;" />
</td>
...
<button type="button" onclick="addRecord()">Add Record to Database</button>
...

<!-- Table of Records -->
<div id="queryResult"></div>
...
ajax.js
// Show records
function showRecords(str) {

// Create XMLHttpRequest object.
if (window.XMLHttpRequest)
{
  xmlhttp = new XMLHttpRequest();
}
else // For old IE.
{
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

// Create callback function to react when the response from the server is ready.
xmlhttp.onreadystatechange = function ()
{
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
  {
    document.getElementById("queryResult").innerHTML = xmlhttp.responseText;
  }
}

// Prepare query for ajax.php
xmlhttp.open("POST", "getTable.php", true);

// Prepare request header.
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

// Send request to ajax.php
xmlhttp.send("tagName=" + str);

}

//=============================================================================
// Add a record
function addRecord()
{

// Tag name
$tagName = document.getElementById("tagName").value;
if ($tagName.length == 0)
{
  document.getElementById("queryResult").innerHTML = "Tag Name is empty!";
  return;
}

// Tag description
$tagDescription = document.getElementById("tagDescription").value;
if ($tagDescription.length == 0)
{
  document.getElementById("queryResult").innerHTML = "Tag description is empty!";
  return;
}

// Create XMLHttpRequest object.
if (window.XMLHttpRequest)
{
  xmlhttp = new XMLHttpRequest();
}
else // For old IE.
{
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

// Create callback function to react when the response from the server is ready.
xmlhttp.onreadystatechange = function ()
{
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
  {
    document.getElementById("queryResult").innerHTML = xmlhttp.responseText;
  }
}

// Prepare query for ajax.php
addRecord.php
", true);

// Prepare request header.
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

// Prepare parameters.
$request = "tagName=" + $tagName + "&tagDescription=" + document.getElementById("tagDescription").value;

// Encode request (Takes care of space)
$request = encodeURI($request);

// Send request
xmlhttp.send($request);

}

//=============================================================================
// Delete one record

function deleteRecord(id)
{
  var response = confirm("Do you want to delete this record (ID = " + id + ")?");

  if (response == true)
  {
    // Tag name in the input field.
    var tagName = document.getElementById("tagName").value;

    // Create XMLHttpRequest object.
    if (window.XMLHttpRequest)
    {
      xmlhttp = new XMLHttpRequest();
    }
    else // For old IE.
    {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // Create callback function to react when the response from the server is ready.
    xmlhttp.onreadystatechange = function ()
    {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
      {
        document.getElementById("queryResult").innerHTML = xmlhttp.responseText;
      }
    }

    // Prepare query for ajax.php
    xmlhttp.open("POST", "deleteRecord.php", true);

    // Prepare request header.
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    // Prepare request
    $request = "id=" + id + "&tagName=" + tagName;

    // Encode request
    $request = encodeURI($request);

    // Send request
    xmlhttp.send($request);
  }
}
getTable.php
<?php
// getTable.php

// For returnTable($result)
include "returnTable.php";

// Retrieve tag name
$tagName = $_POST["tagName"];

// Create a connection to MySQL RDBMS.
$con = mysql_connect("localhost", "paynesn1_guest", "paynesguest");
if(!$con){die("Error Message: " . mysql_error());}

// Select database.
mysql_select_db("html5");
echo mysql_error();

// Prepare query.
$query = "SELECT * FROM tag WHERE tagName LIKE '" . $tagName . "%' ORDER BY tagName";

// Send query and retrieve result.
$result = mysql_query($query);
echo mysql_error();

// Display the result in a table.
returnTable($result);

?>
returnTable.php
<?php
// returnTable.php

// Display the result in a table.
function returnTable($result)
{
  echo "<table><tr><th>ID</th>";
  echo "<th>Tag</th>";
  echo "<th>Tag Description</th>";
  echo "<th>Google</th>";
  echo "<th>Delete</th></tr>";

  while($row = mysql_fetch_array($result))
  {
    echo "<tr>";
    echo "<td>" . $row["id"] . "</td>";
    echo "<td><" . str_replace("<", "<", $row["tagName"]) . "></td>";
    echo "<td>" . $row["tagDescription"] . "</td>";
    echo "<td><a href='http://www.google.com/search?q=html5+" . $row["tagName"] . "+tag' target='_blank'>Search</ab></td>";
    echo "<td><div onclick='deleteRecord(" . $row["id"] . ")' style='color:red;'>Delete</div></td>";
    echo "</tr>";
  }

  echo "</table>";

}
addRecord.php
<?php
// addRecord.php

// For returnTable($result).
include "returnTable.php";

// Retrieve parameters.
$tagName = $_POST["tagName"];
$tagDescription = $_POST["tagDescription"];

// Create a connection to MySQL RDBMS.
$con = mysql_connect("localhost", "paynesn1_guest", "paynesguest");
if(!$con){die("Error Message: " . mysql_error());}

// Select database.
mysql_select_db("html5");
echo mysql_error();

// Prepare query.
$query = "INSERT INTO tag (tagName, tagDescription) VALUES ('" . $tagName . "', '" . $tagDescription . "')";

// Send query and retrieve result.
$result = mysql_query($query);
echo mysql_error();

// Prepare query.
$query = "SELECT * FROM tag WHERE tagName LIKE '" . $tagName . "%' ORDER BY tagName";

// Send query and retrieve result.
$result = mysql_query($query);
echo mysql_error();

// Display the result in a table.
returnTable($result);

?>
deleteRecord.php
<?php
// deleteRecord.php

// For returnTable($result).
include "returnTable.php";

// Retrieve parameters.
$id = $_POST["id"];
$tagName = $_POST["tagName"];

// Create a connection to MySQL RDBMS.
$con = mysql_connect("localhost", "paynesn1_guest", "paynesguest");
if(!$con){die("Error Message: " . mysql_error());}

// Select database.
mysql_select_db("html5");
echo mysql_error();

// Prepare query for deleting the record.
$query = "DELETE FROM tag WHERE id='" . $id . "'";

// Send query and retrieve result.
$result = mysql_query($query);
echo mysql_error();

// Prepare query.
$query = "SELECT * FROM tag WHERE tagName LIKE '" . $tagName . "%' ORDER BY tagName";

// Send query and retrieve result.
$result = mysql_query($query);
echo mysql_error();

// Display the result in a table.
returnTable($result);

?>