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:
https://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.

Screen Shot 05-18-14 at 01.36 PM

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.
Screen Shot 05-18-14 at 01.51 PM
5-      “dataprocess.php” will send or receive, this means it is the “hearth” of the site. Let’s put a “switch” to detect what is coming:

<?phpinclude(“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. Let’s 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”);

Screen Shot 05-18-14 at 02.13 PM

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 Bootstrap’s 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. Let’s fix it.

9-      So we don’t 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.

Screen Shot 05-18-14 at 02.19 PM

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);

}

});

Screen Shot 05-18-14 at 02.52 PM

Screen Shot 05-18-14 at 02.56 PM

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

Screen Shot 05-18-14 at 04.30 PM

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!

Test Address: http://yunus.sourceforge.net/asite/