Minimal, Responsive, Asynchronous Site Day 2

We are continuing to make a simple site with modern (for now) technologies:
HTML5, CSS3, jQuery1.11, Bootstrap 3.1 and PHP5
* Previous lesson is here:
http://tbagriyanik.wordpress.com/2014/05/17/minimal-responsive-asynchronous-site-day-1/
1- We have a synchronous responsive PHP site now, but we want to use jQuery or Ajax power for
loading/sending information without full page refresh and secondly we need some nice animations
with jQuery!
* From now on, javascript disabled browsers will not read or send data anymore
2- I will use a tutorial here: http://www.tutorialspoint.com/jquery/jquery-ajax.htm. You can find a lot of
tutorial sites in the internet, this is good news.
3- First I will remove mysql_connect to another php file.

4- We need another empty php file for data processing. In this file we will do all database works, so you
need to add connection.php here.

5- dataprocess.php will send or receive, this means it is the hearth of the site. Lets put a switch to
detect what is coming:
<?php
include("connection.php");
if(isset($_GET["process"])){
switch($_GET["process"]){
case "select":
break;
case "delete":
break;
case "insert":
break;
case "update":
break;
default:
echo "error 1 no selected process";
}
}else
echo "error 2 no incoming request";
?>

6- We have something at PHP (server) side, so how will we use it in the client side? Answer is Ajax. Lets
go to our index.php and add some jQuery lines to the head:
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">

$(document).ready(function() {

$.ajax({
type: "GET",
url: "dataprocess.php",
dataType: "html",
success: function(response){
$("#ourcontent").html(response);
}

});
});

</script>
</head>

7- Looks weird $ signs and commas I know, but we need to go on. How about the ourcontent id?
Where is it? It is here, you might guess:
<div class="col-xs-12 col-sm-10" id="ourcontent">
<?php
$selectQuery = mysql_query("SELECT * FROM asite_db.asite_table LIMIT 0,5");

When we run, we see this error. Did we do something wrong? No, it is working properly.
8- Errors or warnings can look better, thanks to the Bootstraps well organized CSS:
default:
echo "<div class=\"alert alert-warning\">
<strong>Error 1</strong> No selected process.
</div>";
}
}else
echo "<div class=\"alert alert-danger\">
<strong>Error 2</strong> No incoming request.
</div>";
?>

First we see for a little while MySQL error, then we see this red error message. Lets fix it.
9- So we dont need any mysql_query at index.php too. Move it to the dataprocess.php:
<div class="col-xs-12 col-sm-10" id="ourcontent"></div>
Change index.php
switch($_GET["process"]){
case "select":
$selectQuery = mysql_query("SELECT * FROM asite_db.asite_table LIMIT 0,5");
while($row=mysql_fetch_array($selectQuery)):
?>
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Item <?php echo $row["id"]?></h3>
</div>
<div class="panel-body"><?php echo $row["name"]?></div>
<div class="panel-footer"><a class="btn btn-primary" href="#" role="button">View
details </a></div>
</div>
</div>
<?php endwhile;
break;
Insert like this. If we send select then we will get out content.
10- Hard part is finished. Change the request to select in the index.php:
$.ajax({
type: "GET",
url: "dataprocess.php?process=select",
dataType: "html",
success: function(response){
$("#ourcontent").html(response);
}
});


For the sign, I changed the encoding to UTF-8 for dataprocess.php.
11- We are done, mostly. This is not perfect, you always need to be carefull about security. Anyone can
send or receive data from dataprocess.php. You need to tweak for unwanted inputs and errors too.
12- I will give an example for the animation (effects) now. Whenever I hover a panel, I want to see the
number field to use as a product price.
13- Where can we put the price information? I chose "span" tag absolutely positioned:
?>
<div class="ourdata col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><span class="price">$<?php echo $row["number"]?></span>
Item <?php echo $row["id"]?></h3>
</div>
Add the red properties to dataprocess.php.
success: function(response){
$("#ourcontent").html(response);

$(".ourdata").on("mouseenter",function(){
$(this).find(".price").animate({"top": "-10px","opacity": "1"},
"fast");
});
$(".ourdata").on("mouseleave",function(){
$(this).find(".price").animate({"top": "0px","opacity": "0"},
"fast");
});
}
});


});

</script>
<style type="text/css">
.price {
top: 0px;
right:20px;
opacity: 0;
font-weight: 700;
font-size: 16px;
text-align:right;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
position: absolute;
}
</style>
We are in index.php. This nice idea is taken from: http://try.jquery.com/levels/5/sections/11

14- We can detect the price and see it animating.
Now I know you have a lot of ideas flying in your head! Please go on developing!