PHP code to connect multiple MySQL server,multiple database simultaneously

Have you ever tried to connect two different servers and tried to query MySQL database located in each server, to produce a single result from a single query?. If yes, probably you would be disappointed as much as i was. As far as i know, this cannot be achieved in one shot!.
Therefore, i would walk you in this post, on,  how to achieve the same using a different approach.
  • You must always have two step approach for this.
  • open connection to both the servers from PHP script
  • query first server with first connection. close the connection.
  • query second server with second server. close the connection.
  • fetch the resultant rows
  • merge the resultant array using array_merge().
The following php code would help you understand completely how its done.
<?php
  
  $dbh1 = mysql_connect('server1', 'username', 'password')or die("Unable to connect to MySQL1"); 
  $dbh2 = mysql_connect('server2', 'username', 'password') or die("Unable to connect to MySQL2");
  
  mysql_select_db('db1', $dbh1);
  mysql_select_db('db2', $dbh2);
  $ar = array();$ar2 = array();
  
  $qry1 = mysql_query("select * from db1.table1 where db1.table1.id='261' and db1.table1.id=db1.table1.id",$dbh1) or die(mysql_error());
  while($row = mysql_fetch_array($qry1))
  {
        $ar[] = $row;
  }
  
  $qry2 = mysql_query("select * from db2.table1 where db2.table1.id='421' and db2.table1.id=db2.table1.id",$dbh2) or die(mysql_error());
  while($row2 = mysql_fetch_array($qry2))
  {
        $ar2[] = $row2;
  }
  
  $result = array_merge($ar, $ar2);
  
  // using for loop to retrieve data
  for($i=0;$i<count($result);$i++)
  {
         echo $result[$i]['realname'].'<br>';
  } 
  
  // using for each loop to retrieve data
  foreach($result as $k=>$val)
  {
        echo $val['realname']. '<br>'; 
  } 
  
  // using while loop to retrieve data
  while(list($key, $value) = each($result)){
     echo $value['realname']. '<br>';
  }
  
?>
Disadvantage:
  • Of course , if you are using a highly complex query this is not the preferred approach,  since , you need more execution and just because of code complexity itself.
  • The resultant array of result returned would contain duplicate values and you have to sort it with a different approach using array sort etc…

Please subscribe for more cool codes 🙂

Thats all guys feedbacks are welcome.

Check out the my other links for other cool stuffs!! 🙂

swipe detection for android-ipad device using jQuery mobile

Here is the most simple script to detect the browser swipe feature using jquery mobile for android and ipad devices.ofcourse, we can work around the same example in regular browsing as well…

First , you need to download or add jquery mobile cdn , to your current page.

You can use the jquery live method to bind the DOM element, as of jquery 1.7 use on method instead if live, which needs to be swapped for. Here, am using body element itself. Use jquery’s swipeleft  and swiperight event to produce the desired effect, like slide transition etc.. for now i would just alert when a event occurs.

$('body').live('swipeleft swiperight',function(event){
  if (event.type == "swiperight") {
       alert("swipped right side");       
  }
  if (event.type == "swipeleft") {
        alert("swipped left side");
  }
  event.preventDefault();
});

If you would want the page to be moved to left or right like that of ipad, then here is an additional code.

$('body').live('swipeleft swiperight',function(event){
  if (event.type == "swiperight") {
      jQuery.mobile.changePage("#page2",{transition:'slide'});       
  }
  if (event.type == "swipeleft") {
      jQuery.mobile.changePage("#page1", {transition:'slide'});
  }
  event.preventDefault();
});

pretty simple ha? , feedback are welcome..

Please subscribe for more cool code.

check out other links for cool stuff…. 🙂

How to install addons offline in Mozilla firefox

Hi,

  1. First, You need to go the download page of the addons that you want.
  2. rightclick on the download button and save link as in the PC.(of course you need to have Internet for this 🙂 )
  3. The link will be saved as ” .xpi ” format.
  4. while you are at mozilla firefox offline, in browser , simply open Mozilla firefox>Tools>Addons>Extensions, drag and drop the “.xpi” file here.
  5. Restart mozilla and enjoy offline coding!!

That’s it guys feedback’s welcome.!

Page scroll for ipad-android device using javascript-jquery

I am really inspired by ipad page scroll UI, it looks so smooth and elegant. So, i decided to write something for a page scroll for ipad/android device using javascript/jquery.

The logic is quiet simple, really, you will have the inner references for a DIV element (or any DOM element) to which you can scroll your lengthy page into ,just dock the DOM on top of page but with help of smooth transition using jquery, which would mimic ipad like page scroll.

Remember to include jquery plugin , jquery mobile plugin and css.

NOTE: The present code and scripts gives only an idea of the development or logic and does not concentrate on great design and validation

Here is the basic HTML

<!DOCTYPE html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta content="width=device-width, minimum-scale=1 name="viewport"></meta>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="format-detection" content="scroll" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <title>ipad App - framework</title>
  <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />    
  <link type="text/css" href="css/ipad.css" rel="stylesheet" />    
  <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
  <script type="text/javascript" src="js/default.js"></script>
</head>
<body>
  <div id="p_nm" class="pag"></div>
  <div id="wrapper">
    <div id="page1" class="page"></div>
    <div id="page2" class="page"></div>
    <div id="page3" class="page"></div>
    <div id="page4" class="page"></div>
    <div id="page5" class="page"></div>
  </div>
  
  <div id="link_index" class="link">
    <a href="#" onclick="scroll_section('page1')">page1</a>
    <a href="#" onclick="scroll_section('page2')">page2</a>
    <a href="#" onclick="scroll_section('page3')">page3</a>
    <a href="#" onclick="scroll_section('page4')">page4</a>
    <a href="#" onclick="scroll_section('page5')">page5</a>
  </div>

CSS

.page{  
  width:720px; 
  height:1000px;
  margin:5px; 
  border:#CCCCCC solid 1px;
}
@media only screen and (width:device-width) and (orientation:portrait){
  .page{  
    width:720px; 
    height:1000px;
    margin:5px; 
    border:#CCCCCC solid 1px;  
  }
}
@media only screen and (width:device-width) and (orientation:landscape){
  .page{  
    width:950px; 
    height:700px;
    margin:5px; 
    border:#CCCCCC solid 1px; 
  }
}

.pag{ 
  top:0px; 
  width:250px; 
  height:50px; 
  left:45%; 
  position:fixed;
  }

jQuery

function scroll_section(ide) 
{ 
  $('#p_nm').html("Page"+ide).animate({top:"15px"},500); // div to show which page u have scrolled into 
  $('html,body').animate({scrollTop: $("#"+ide).offset().top},500); 
}

thats it!, told you its simple!. 🙂

subscription and comments are welcome!.

simple jquery image gallery script

Hi,

Lets see a jquery image slider code with image titles or jquery carousel slider example.

jquery image slider code features:

  • Supports any number of images.
  • shows animated caption or titles for each image.
  • Thumbnail preview with scroll.
  • Auto scroll back of thumbnails.
  • works fine in many major browsers.
  • Easy to code and maintain.

Ok, lets start…

After you include jQuery file do the following in your index file, create a division named “capsule” , it will hold our entire slider.Create another division named “image_viewer” to hold our image viewer and title. Last, create third division “galleryContainer” that holders our thumbnail images ,left and right navigation arrows.

NOTE: In order to show captions please write the respective image caption in the respective “title” tag for each image.

complete HTML here:

<div id="capsule">
  <div id="image_viewer">
    <!-- To append click images-->
    <img src="" />
    <!-- To append image titles-->
    <span id="img_title" class="img_title">&nbsp;</span>
  </div>
  <div id="galleryContainer">
    <div id="arrow_left"><img src="images/arrow_left.gif"></div>
    <div id="arrow_right"><img src="images/arrow_right.gif"></div>
    <div id="innerscroll">
      <!-- Thumbnails -->
      <img src="images/Blue hills.jpg" title="picture1" class="image">
      <img src="images/Sunset.jpg" title="picture2" class="image">
      <img src="images/Water lilies.jpg" title="long text caption test with this one" class="image">
      <img src="images/Winter.jpg" title="picture 3" class="image">
      <img src="images/Blue hills.jpg" title="picture4" class="image">
      <img src="images/Sunset.jpg" title="picture5" class="image">
      <img src="images/Water lilies.jpg" title="long text caption test with this one" class="image">
      <img src="images/Winter.jpg" title="picture 7" class="image">
      <!-- Thumbnails end -->			
    </div>
  </div>
</div>

Now for the important one, jQuery!

The comments are self explanatory, so am not talking more about it!.

$(document).ready(function() {
  
  <!-- On page load calculate length of thumbnail images -->
  var x = parseInt ($('#innerscroll img').length)- 2; // remove count for 2 images left and right arrow
  var count=1; //set counter to calculate image rotation
  <!-- end of variable declaration -->
  
  <!-- On page load show default first image and title as viewer image -->
  var path = $('#innerscroll>img:first').attr('src');
  var caption = $('#innerscroll>img:first').attr('title');
  $('#image_viewer>img').attr('src', path).animate({"easing": "linear",'opacity': "1.0"}, 500).show();
  $('#image_viewer>span').html("").slideUp('fast');
  $('#image_viewer>span').html(caption).slideDown('slow');
  <!-- end of action -->
  
  <!-- On click of left arrow move thumbnails and animate right arrow with bright image and dull the current arrow -->
      $('#arrow_left').click(function (event){
        $('#arrow_left img').attr('src','images/arrow_left.gif');
        $('#arrow_right img').attr('src','images/arrow_right_over.gif');
         if(count>3){ count=1; $('#innerscroll').animate({left: 0}, 500); $('#arrow_right  img').attr('src','images/arrow_right.gif');}
        else {
      $('#innerscroll').animate({"left": "+=150px",'opacity': "0.5"}, 500).animate({"easing": "easeout",'opacity': "1.0"}, 500);
      count++;
    }
  });
  <!-- end of action -->
  
  <!-- On click of right arrow move thumbnails and animate left arrow with bright image and dull the current arrow -->
  $('#arrow_right').click(function (event){
    $('#arrow_right img').attr('src','images/arrow_right.gif');
    $('#arrow_left img').attr('src','images/arrow_left_over.gif');
    if(x<count){count=1; $('#innerscroll').animate({left: 0}, 500); $('#arrow_left img').attr('src','images/arrow_left.gif'); }
    else {
      $('#innerscroll').animate({"left": "-=150px",'opacity': "0.5"}, 500).animate({"easing": "easeout",'opacity': "1.0"}, 500);
      count++;
    }
  });
  <!-- end of action -->
  
  <!-- On click of thumbnail load or append the current image and title in the image_viewer division -->
  $("#innerscroll img").click(function(){
    var path = $(this).attr('src');
    var caption = $(this).attr('title');
    $('#image_viewer>img').attr('src', path).animate({"easing": "linear",'opacity': "0.5"}, 500).animate({"easing": "linear",'opacity': "1.0"}, 500).show();
    $('#image_viewer>span').html("").slideUp('fast');
    $('#image_viewer>span').html(caption).slideDown('slow');
  });
  <!-- end of action -->
  
});

Finally css :

TIP: Make sure your “#image_viewer” and “#image_viewer img” width are same , to get full image view.

<style type="text/css">

.scrollable{
  position:relative;width:610px; height:150px; overflow:hidden; margin:5px;
}

.image{width:150px; height:100px; float:left; display:block; cursor:pointer; margin:2px;
}

.container{ margin:5px; padding:5px; width:690px; background:#fff;
}

.container_theater{ margin:5px; padding:5px; width:690px; background:#000000;
}

#image_viewer{
  border:#000000 solid 5px; width:685px; height:300px;
}

#image_viewer img{
  width:685px; height:300px;
}

.img_title{
  border:#999999 solid 1px; width:100%; height:25px; text-align:center; margin-top:-25px; float:right; opacity: .8; z-index:15; background:#CCCCCC;font-family:Verdana; font-style:oblique; font-weight:800; display:none;
}

#arrow_left{position:absolute;float:left;z-index:10;background-color: #FFF;padding:0px;margin-top:2px;cursor:pointer;
}

#arrow_right{
  position:absolute;float:left;right:0px;z-index:10;background-color: #FFF;padding:0px;margin-top:2px;cursor:pointer;
}
#innerscroll{position:absolute;height:100px;left:40px;width:10000px;
}

#galleryContainer{height:102px; /* Height of the images + 2 */
  border:1px solid #CCCCCC;
  position:relative;overflow:hidden;padding:0px;width:690px;height: 104px;/* IE 5.x - Added 2 pixels for border left and right */
  height/* */:/**/102px; /* Other browsers */
  height: /**/102px;
}

</style>

Here is how it looks:

Thats all guys, feedbacks are welcome!

help this blog to grow in anyway you can! 🙂