Book Store Web Serviceeecs.csuohio.edu/~sschung/CIS408/AJAXJqueryBootStrapPHP... · 2016-11-08 · Searching by category with two characters (ajax request is made when the search

Book Store Web Service

Web Page home page:

Searching by category with two characters (ajax request is made when the search field

count reaches 3 characters): (NOTE* I am using ajax request to prevent from page refresh, so

when they user types in a search criteria parameter an ajax request is made to a php script that

builds a query based on the parameter to search the database by category column or title

column.)

(as you can see above, nothing will display when there are less than 3 characters in the search

field)

Searching by category with three characters:

(As you can see 3 books were returned which has CHILDREN as the category)

Searching by title:

(Note the search parameter does not have to be the entire book title, it can be partial book title

or category)

Searching by book title example 2:

Searching by category example 2:

Clearing the search field:

(note clearing the field will remove the previous search results so the user is not confused with

what results belong to what search criteria)

Extracted XML values into database table:

XML Parsing and data extraction Script:

(Note* I have created a pre.php file which is used for auto loading my DB connection and I have

a created a DB.php file which performs the mysql db connection calls)

pre.php file contents:

<?php

date_default_timezone_set('America/New_York');

function my_autoloader($class_name) {

$root = ini_get('doc_root');

strlen($root) < 1 ? $root = $_SERVER['DOCUMENT_ROOT'] : $root = $root;

if(file_exists("$root/class/$class_name.php")) {

include "$root/class/$class_name".'.php';

}

}

spl_autoload_register('my_autoloader');

$INPUT = array();

if(isset($_GET)){

foreach($_GET as $key => $val) {

$INPUT[$key] = $val;

}

}

if(isset($_REQUEST)){

foreach($_REQUEST as $key => $val)

{


}

}

if(isset($_POST)){

foreach($_POST as $key => $val) {


}

}

?>

DB.php file contents:

<?php

class DB extends mysqli {

function __construct($db_name) {

parent::__construct("localhost", "root", "root", $db_name);

if (mysqli_connect_error()) {

die('Connect Error (' . mysqli_connect_errno() . ') '. mysqli_connect_error());

}

}

}

Xml parser file contents:

<?php

include_once 'pre.php';

$db = new DB('bookstore');

$createSql = "CREATE TABLE books (

id INT(11) AUTO_INCREMENT PRIMARY KEY,

category VARCHAR(20) NOT NULL,

title VARCHAR(100) NOT NULL,

author VARCHAR(100) NOT NULL,

year YEAR NOT NULL,

price DOUBLE NOT NULL,

image_link VARCHAR(50) NULL,

image BLOB NULL

)";

if ($db->query("SHOW TABLES LIKE 'books'")->num_rows == 0) {

if ($db->query($createSql) !== TRUE) {

die("Error creating table");

}

}

$xml = simplexml_load_file("bookstore.xml") or die("Error: Cannot create object");

foreach ($xml as $book) {

$fp = fopen($book->image, "rb");

$blobdata = fread($fp, filesize($book->image));

$sql = "INSERT INTO books (`category`,`title`,àuthor`,`year`,`price`,ìmage_link`,ìmage`)

VALUES ('{$book->attributes()[0]}','{$db->real_escape_string($book->title)}','{$db-

>real_escape_string($book->author)}',

$book->year, $book->price, '$book->image', '{$db->real_escape_string($blobdata)}')";

if ($db->query($sql) !== TRUE) {

die("Error Inserting record into table: ".$sql);

}

}

Search Web Page File Content:

<?php

include_once 'pre.php'; ?>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Books-R-Us | Search</title>



<link rel="stylesheet"

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"

integrity="sha384-

1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"

crossorigin="anonymous">



</head>

<body role="document">

<nav class="navbar navbar-inverse navbar-fixed-top">

<div class="container">

<div class="navbar-header">

<a class="navbar-brand" href="#">

Books-R-Us

</a>

</div>

</div>

</nav>

<br><br><br><br>

<div class="container theme-showcase" role="main">

<div class="row">

<div class="jumbotron">

<div class="col-lg-6 col-md-offset-3">

<input type="text" id="search_val" class="form-control" placeholder="Book name

or category...">

</div>

</div>

</div>

<div class="row">

<div id="results"></div>

</div>

</div>





<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"

integrity="sha384-

0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"

crossorigin="anonymous"></script>

<script type="text/javascript">

$("#search_val").keyup(function() {

if ($.trim($("#search_val").val()).length > 2) {

search();

}

});

function search() {

$("#results").html('');

var html = "<div class='row'> <div class='col-lg-10 col-md-offset-1'><h3>Search

Results</h3>";

var searchParameter = $.trim($("#search_val").val());

$.ajax({

type: "GET",

url: "api/",

data: {

task: "search",

param: searchParameter

},

success: function(data){

var results = $.parseJSON(data);

if (results.length == 0) {

$("#results").html("<h2>No results found.</h2>");

return;

}

$.each(results, function( key, book ) {

html += "<div class='col-sm-6 col-md-4'> ";

html += "<div class='thumbnail'>";

html += "<img src='"+book.image_url+"' alt='"+book.title+"' >";

html += "<div class='caption'> <h3 class='text-center'> Book Information

</h3>";

html += "<p class='lead'>Title: "+book.title+"</p>";

html += "<p class='lead'>Author: "+book.author+"</p>";

html += "<p class='lead'>Year: "+book.year+"</p>";

html += "<h2 class='help-block text-center'>$"+book.price+"</h2>";

html += "</div></div></div>";

});

html += "</div></div>";

$("#results").html(html);

}

});

}

</script>

</body>

</html>

Query Processing script (api/index.php - ajax calls this script)

<?php

include_once '../pre.php';

$db = new DB("bookstore");

switch ($INPUT['task']) {

case "search":

$data = array();

$param = $db->real_escape_string(strtoupper($INPUT['param']));

$sql = "SELECT * FROM books WHERE (category like '{$param}%') OR (title like

'{$param}%') order by title asc";

$result = $db->query($sql);

if (!$result) {

echo "no results";

echo json_encode($data);

}

while ($row = $result->fetch_object()) {

$data[] = array('id' => $row->id, 'category' => $row->category,

'title' => $row->title, 'author' => $row->author,

'year' => $row->year, 'price' => $row->price, 'image_url' => $row->image_link);

}

echo json_encode($data);

break;

default:

echo "select a task";

break;

}

Bookstore XML file

<?xml version="1.0"?>

<bookstore>

<book category="COOKING">

<title lang="en">Everyday Italian</title>

<author>Giada De Laurentiis</author>

<year>2005</year>

<price>30.00</price>

<image>img/ItalianCookingBook.jpg</image>

</book>

<book category="CHILDREN">

<title lang="en">Harry Potter and the Chamber Of Secrets</title>

<author>J K. Rowling</author>

<year>2005</year>


<image>img/HarryPotterChamberOfSecretes.jpg</image>

</book>


<title lang="en">Harry Potter and the Cursed Child</title>


<year>2005</year>


<image>img/HarryPotterCursedChild.jpg</image>

</book>


<title lang="en">Harry Potter and the Sorcerer's Stone</title>


<year>2005</year>


<image>img/HarryPotterSorcererStone.jpg</image>

</book>

<book category="WEB">

<title lang="en">Learning XML</title>

<author>Erik T. Ray</author>

<year>2011</year>


<image>img/XMLBook.jpg</image>

</book>

</bookstore>

Book Store Web Serviceeecs.csuohio.edu/~sschung/CIS408/AJAXJqueryBootStrapPHP... · 2016-11-08 · Searching by category with two characters (ajax request is made when the search

Documents