Creating a Simple Photo Album with jQuery Similar to Facebook

For the javascript part, I’ve decided to use jQuery as well as the jquery.cycle and jquery.lightbox plugins.

HTML structure

The HTML code needed for a gallery like this is actually rather simple. All we have to do, is to print the images as plain old linked HTML images and wrap image collections in container elements (DIVs).

<h1>My Photo Collection</h1>

<p id="intro">

  This is my photo album...yaddi-yaddi-ya...

</p>

<div class="album">

  <h2>Wicked Album</h2>

  <a href="photos/image1.jpg">

    <img src="photos/thumb_image1.jpg" alt="Lorem" />

  </a>

  <a href="photos/image2.jpg">

    <img src="photos/thumb_image2.jpg" alt="Ipsum" />

  </a>

  <a href="photos/image3.jpg">

    <img src="photos/thumb_image3.jpg" alt="Lorem" />

  </a>

</div>

<div class="album">

  <h2>Wickier Album</h2>

  <a href="photos/image4.jpg">

    <img src="photos/thumb_image4.jpg" alt="Ipsum" />

  </a>

  <a href="photos/image5.jpg">

    <img src="photos/thumb_image5.jpg" alt="Yadi" />

  </a>

  <a href="photos/image6.jpg">

    <img src="photos/thumb_image6.jpg" alt="Yadi" />

  </a>

  <a href="photos/image7.jpg">

    <img src="photos/thumb_image7.jpg" alt="Ya" />

  </a>

</div>

<div class="album">

  <h2>Wickiestest Album</h2>

  <a href="photos/image8.jpg">

    <img src="photos/thumb_image8.jpg" alt="Lorem" />

  </a>

  <a href="photos/image9.jpg">

    <img src="photos/thumb_image9.jpg" alt="Ipsum" />

  </a>

</div>

The Magic of jQuery Plug-Ins

In order to turn this into something a bit more exciting than a bunch of linked images with a blue border, we add some JavaScript and CSS to the page.

First, make sure to include jQuery, jQuery Cycle and jQuery Lightbox to the page. Then add the following JavaScript code to another .js-file that is loaded into the same page:

$(document).ready( function() {

  // Dynamically add nav buttons as these are not needed in non-JS browsers

  var prevNext = '<div id="album-nav"><button ' +

                   'class="prev">« Previous' +

                   '</button><button>' +

                   'Next &raquo;</button></div>';

  $(prevNext).insertAfter('.album:last');

  // Add a wrapper around all .albums and hook jquery.cycle onto this

  $('.album').wrapAll('<div id="photo-albums"></div>');

  $('#photo-albums').cycle({

    fx:     'turnDown',

    speed:  500,

    timeout: 0,

    next:   '.next',

    prev:   '.prev'

  });

  // Remove the intro on first click -- just for the fun of it

  $('.prev,.next').click(function () {

    $('#intro:visible').slideToggle();

  });

  // Add lightbox to images

  $('.album a').lightBox();

});

You may of course remove the cycling effect.
The only JavaScript you’d then need is $('.album a').lightBox();.

Adding Style Info

Last, we add some style info to make our albums look at least somewhat good.

/** for this example, I don't give a rats (*) about IE */

.album {

  width: 600px !important;

  clear: both;

}

.album h2 {

  clear: both;

}

.album a {

  display: block;

  float: left;

  margin-right: 1em;

  padding: 0.5em;

  border: 1px solid black;

  background-color: #eee;

  text-align: center;

}

.album a:hover {

  border-color: blue;

}

.album img {

  width: 72px;

  height: 100px;

  border: 0;

}

#album-nav {

  margin-top: 1em;

  max-width: 500px;

}

.prev, .next {

  border: 1px outset #ccc;

  color: #000075;

  background-color: white;

  font-weight:bold;

  padding: 0.25em;

}

.prev:hover,.next:hover {

  border-style: inset;

}

.prev {

  float: left;

}

.next {

  float: right;

}

Finish!

Lets see how facebook search is so fast

Some days before i came across a very well known website called facebook. And i was always wondering how can such a heavily loaded website be so seamlessly fast.

After a continuous google search, i found that they use AJAX and JQuery extensively with differnet caching technologies along with the following latest technologies.

1. Bigpipe
2. Comet (programming) or "Reverse Ajax"

I have implemented a simple reverse ajax in my website fb.walletchange.com/profile.php @ the search portion. You can mark a remarkable change in search time after implementing the same.

The trick goes like this

a) Load a static page first

b) Pull the data as soon as the page loads using ajax into a hidden div

c) Use jQuery to organise the data for perfect user interactivity

 

    

 

a) Lets create our page layout div first

<DIV id=main>
<H1>Facebook type instant search engine - super speed
</H1>
Filter friends list : <INPUT id=filter>
<DIV id=container>
<DIV>
<UL>
<?php
while($row=mysql_fetch_array($sql_res))
{
$username=$row['username'];

?>
<LI>
<DIV>
<DIV><?=$username?></DIV></DIV></LI>
<?php
}

?>
</UL></DIV></DIV></DIV>

b) We will proceed now by adding jQuery and instant search script and some style attributes to the page

<SCRIPT src="jquery.js"></SCRIPT>

<SCRIPT src="instant-search.js"></SCRIPT>

<STYLE>BODY {
FONT-WEIGHT: 300; FONT-SIZE: 16px; MARGIN: 0px 10%; COLOR: #333; FONT-STYLE: normal; FONT-FAMILY: 'Helvetica Neue', Helvetica, Arial, sans-serif
}
.name SPAN {
BACKGROUND: #fbffc6
}
UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
UL LI {
BORDER-RIGHT: #ddd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ddd 1px solid; PADDING-LEFT: 5px; FONT-SIZE: 20px; BACKGROUND: #eee; FLOAT: left; PADDING-BOTTOM: 5px; MARGIN: 3px; BORDER-LEFT: #ddd 1px solid; WIDTH: 150px; LINE-HEIGHT: 70px; PADDING-TOP: 5px; BORDER-BOTTOM: #ddd 1px solid; LIST-STYLE-TYPE: none; HEIGHT: 70px; TEXT-ALIGN: center
}
#container {
BORDER-RIGHT: #b9b9b9 1px solid; BORDER-TOP: #b9b9b9 1px solid; MARGIN-TOP: 20px; BORDER-LEFT: #b9b9b9 1px solid; WIDTH: 100%; BORDER-BOTTOM: #b9b9b9 1px solid; HEIGHT: 440px; webkit-box-shadow: 0 0 15px #aaa; moz-box-shadow: 0 0 15px #aaa; box-shadow: 0 0 15px #aaa
}
#container .content {
OVERFLOW: auto; HEIGHT: 440px
}
#main {
MARGIN: 0px auto; WIDTH: 100%;
}
INPUT {
BORDER-RIGHT: #ddd 1px solid; BORDER-TOP: #ddd 1px solid; FONT-SIZE: 20px; BORDER-LEFT: #ddd 1px solid; BORDER-BOTTOM: #ddd 1px solid
}
A {
COLOR: #31499c; TEXT-DECORATION: none
}
H1 {
FONT-WEIGHT: normal; TEXT-ALIGN: center
}
</STYLE>

Facebook loads Web Pages Faster using BigPipe Technology

What is the motivation for this technology?

For an SNS such as Facebook, the major contents must be processed based on personalized data. This means that there is always an inevitable limit to any improvement in performance that is achieved only by improving the speed of the server, such as the cache application and system structure. Facebook found the solution to this limit on performance in a new transfer format, and parallel processing between the server and the client. The solution is particularly focused on reducing the delay in showing the page that is requested.

Problems related to the existing dynamic Web service system

When the Web server is overloaded while generating a page, in most cases the browser becomes idle and does nothing. When the server finishes generating the page and sends it to the browser at once, it cause a bottleneck effect, both in traffic and in performance. Therefore, the server that has already completed transfer cannot be helpful any more. By overlapping the time taken for the server to generate pages and for the browser to render, you can not only reduce the end-to-end latency but also the initial response time for the Web page, consequently reducing overall loading time. The problem in which a single slow query holds back the entire loading process can be addressed as well.

Why BigPipe?

As mentioned earlier, BigPipe is a technology that combines existing Web technologies to allow the parallel processing to generate Web pages and render browsers simultaneously (just as AJAX did). It is named because its mechanism is similar to Pipelining which is common for microprocessors. For this reason, Facebook calls BigPipe technology a Web page pipeline for better performance.

Something you need to know first

In order to understand the BigPipe technology, it is necessary to understand Chunked Encoding, which is supported in version 1.1 of HTTP protocol, and the Script Flush method which is based on Chunked Encoding.

Chunked Encoding

Chunked Encoding is an encoding method of transfer supported in HTTP 1.1 and higher, which allows the server to ignore the header value and divide the response result from HTTP into a series of chunks, and then transfer each chunk of the result. The size of each chunk is transferred along with the content. With this feature, the server can send a response to the Web browser in the middle of a process (Flush transfer) so that the user can see at least partial content.

The figure below shows an example of HTTP responses with a Chunked Encoding format which named Transfer-Encoding from header values as chunked. The sizes of individual chunked text which are transferred sequentially are expressed in hexadecimal instead of the Content-Length header value. You can also see it is ended with 0.

facebook like red notification simple css technique

While developing my current web project, i came across a requirement which has to be lashed with a notification similar style as facebook.

After puting some effort i found out the following implementation.

    

Here is a explanation of the above implementation using CSS and simple javascript.

The css

<style>

.noti_Container {
position:relative;
border:1px solid blue; /* This is just to show you where the container ends */
width:16px;
height:16px;
cursor: pointer;
}
.noti_bubble {
position:absolute;
top: -8px;
right:-6px;
padding-right:2px;
background-color:red;
color:white;
font-weight:bold;
font-size:0.80em;

border-radius:2px;
box-shadow:1px 1px 1px gray;
}

</style>

The HTML code

<div onclick="return f1();">
<img src="friends.png" style="border:none;"/>
<div id="n1">2</div>
</div>

The small javascript code to add some more functionality

<script>
function f1()
{
document.getElementById("n1").style.visibility='hidden';
}
</script>

The final implementation can be found here at http://fb.walletchange.com/profile.php

Cannot send session cache limiter - headers already sent

Use This Php Script at top of the your php page this script start session before dowload include file i hope you will solve this problem.

<?php
if (!isset($_SESSION)) {
session_start();
}
?>

Google plus like drag and drop adding groups

You might have marked a cool feature in google plus, where we add people to groups simply by dragging it to the perticular frame.

Here is a explanation of the above implementation using JQuery and PHP.

Sample database contains three tables and relationship between Members and Groups.

Members
Table contains members(users) data such as member_id, member_image and etc.

CREATE TABLE IF NOT EXISTS `members` (
`member_id` int(9) NOT NULL AUTO_INCREMENT,
`member_name` varchar(220) NOT NULL,
`member_image` text NOT NULL,
`dated` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`member_id`)
);

Groups
Contains groups information.

CREATE TABLE IF NOT EXISTS `groups` (
`group_id` int(9)  AUTO_INCREMENT,
`group_name` varchar(220),
`sort` int(9),
`date` timestamp  DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`group_id`),
KEY `sort` (`sort`)
);

User_group
Members and Groups table relationship table contains user_id(same as memeber_id), group_id, member_id() and sort(ordering)

CREATE TABLE IF NOT EXISTS `user_group` (
`id` int(9) NOT NULL AUTO_INCREMENT,
`user_id` int(9) NOT NULL,
`group_id` int(9) NOT NULL,
`member_id` int(9) NOT NULL,
`sort` int(9) NOT NULL,
PRIMARY KEY (`id`)
);

Javascript
Here draggable applying for two classes .members and .group

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>
<script type="text/javascript" src="jquery.livequery.min.js"></script>
<script type="text/javascript" >
$(function()
{
// Initiate draggable for public and groups
var $gallery = $( ".members, .group" );
$( "img", $gallery ).live("mouseenter", function()
{
var $this = $(this);
if(!$this.is(':data(draggable)'))
{
$this.draggable({
helper: "clone",
containment: $( "#demo-frame" ).length ? "#demo-frame" : "document",
cursor: "move"
});
}
});
// Initiate Droppable for groups
// Adding members into groups
// Removing members from groups
// Shift members one group to another
$(".group").livequery(function(){
var casePublic = false;
$(this).droppable({
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
var m_id = $(ui.draggable).attr('rel');
if(!m_id)
{
casePublic = true;
var m_id = $(ui.draggable).attr("id");
m_id = parseInt(m_id.substring(3));
}
var g_id = $(this).attr('id');
dropPublic(m_id, g_id, casePublic);
$("#mem"+m_id).hide();
$( "<li></li>" ).html( ui.draggable ).appendTo( this );
},
out: function(event, ui) {
var m_id = $(ui.draggable).attr('rel');
var g_id = $(this).attr('id');
$(ui.draggable).hide("explode", 1000);
removeMember(g_id,m_id);
}
});
});
// Add or shift members from groups
function dropPublic(m_id, g_id,caseFrom)
{
$.ajax({
type:"GET",
url:"groups.php?m_id="+m_id+"&g_id="+g_id,
cache:false,
success:function(response){
$.get("groups.php?reload_groups", function(data){
$("#groupsall").html(data);
$("#added"+g_id).animate({"opacity" : "10" },10);
$("#added"+g_id).show();
$("#added"+g_id).animate({"margin-top": "-50px"}, 450);
$("#added"+g_id).animate({"margin-top": "0px","opacity" : "0" }, 450);
});
}
});
}
// Remove memebers from groups
// It will restore into public groups or non grouped members
function removeMember(g_id,m_id)
{
$.ajax({
type:"GET",
url:"groups.php?do=drop&mid="+m_id,
cache:false,
success:function(response){
$("#removed"+g_id).animate({"opacity" : "10" },10);
$("#removed"+g_id).show();
$("#removed"+g_id).animate({"margin-top": "-50px"}, 450);
$("#removed"+g_id).animate({"margin-top": "0px","opacity" : "0" }, 450);
$.get("groups.php?reload", function(data){ $("#public").html(data); });
}
});
}
});
</script>

groups.php

<?php
require_once("multipleDiv.inc.php");
// Initiate Object
$obj = new Multiplediv();
// Add or Update Ajax Call
if(isset($_GET['m_id']) and isset($_GET['g_id']))
{
$obj->addMembers((int)$_GET['m_id'], (int)$_GET['g_id']);
exit;
}
// Remove Memebers from groups Ajax call
if(isset($_GET['do']))
{
$obj->removeMember($_GET['mid']);
exit;
}
// Reload groups each ajax call
if(isset($_GET['reload'])){ echo $obj->getMembers_reload(); exit; }
if(isset($_GET['reload_groups'])){ echo $obj->getmembergroups_reload(); exit; }
// Initiate Groups and members
$members = $obj->public_members();
$groups = $obj->groups();
?>
Friends
<div id="main_portion">
<div id="public">
<!-- Initiate members -->
<?php
if(!isset($members))
$members = $obj->public_members();
if($members)
{
foreach($members as $member)
{
extract($member);
echo "<div class='members' id='mem".$member_id."'>\n";
echo "<img src='images/".$member_image."' rel='".$member_id."'>\n";
echo "<b>".ucwords($member_name)."</b>\n";
echo "</div>";
}
}
else
echo "Members not available";
?>
</div>
<div id="groupsall">
Groups
<!-- Initiate Groups -->
<?php
if(!isset($groups))
$groups = $obj->groups();
if($groups)
{
foreach($groups as $group)
{
extract($group);
echo "<div id='".$group_id."' class='group'>\n";
echo ucwords($group_name);
echo "<div id='added".$group_id."' class='add' style='display:none;' ><img src='images/green.jpg'></div>";
echo "<div id='removed".$group_id."' class='remove' style='display:none;' ><img src='images/red.jpg'></div>";
echo "<ul>\n";
echo $obj->updateGroups($group_id);
echo "</ul></div>";
}
}
?>

multipleDiv.inc.php
Download this and modify database connection credentials.

<?php
// Database declaration's
define("SERVER", "localhost");
define("USER", "username");
define("PASSWORD", "password");
define("DB", "database");class Multiplediv
{
........................
........................
.........................
}
?>

XAMPP Access to the requested directory is only available from the local network.

I searched a lot about this issue and found the simplest solution:

Mark the like "Deny from all" as a comment at the <LocationMatch attribute present at the end of the file (C:\XAMPP\apache\conf\extra\httpd-xampp.conf)

Subsequently i added into my verified list of solutions at http://itswadesh.wordpress.com

Pagination with Jquery, PHP , Ajax and MySQL.

Friends, In my current employment i need to develop huge database driven web application. Which normally deals with millions  of records. I use indexing and cache techniques. Along with that i use jquery to make it handy for end use.

   

Database
MySQL messages table contains two columns msg_id and message

CREATE TABLE messages
(
msg_id INT PRIMARY KEY AUTO_INCREMENT,
message VARCHAR(150)
);

JavaScript Code
This script works like a data controller.

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{function loading_show()
{
$('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');
}function loading_hide()
{
$('#loading').fadeOut();
}

function loadData(page)
{
loading_show();
$.ajax
({
type: "POST",
url: "load_data.php",
data: "page="+page,
success: function(msg)
{
$("#container").ajaxComplete(function(event, request, settings)
{
loading_hide();
$("#container").html(msg);
});
}
});
}
loadData(1); // For first time page load default results
$('#container .pagination li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
});
});

</script>

load_data.php
Contains PHP coding. Displaying data from the messages table.

<?php
if($_POST['page'])
{
$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 15; // Per page records
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;
include"db.php";
$query_pag_data = "SELECT msg_id,
message from messages LIMIT $start, $per_page";
$result_pag_data = mysql_query($query_pag_data) 
or die('MySql Error' . mysql_error());
$msg = "";
while ($row = mysql_fetch_array($result_pag_data))
{
$htmlmsg=htmlentities($row['message']); //HTML entries filter
$msg .= "<li><b>" . $row['msg_id'] . "</b> " . $htmlmsg . "</li>";
}
$msg = "<div class='data'><ul>" . $msg . "</ul></div>"; // Content for Data
/* -----Total count--- */
$query_pag_num = "SELECT COUNT(*) AS count FROM messages"; // Total records
$result_pag_num = mysql_query($query_pag_num);
$row = mysql_fetch_array($result_pag_num);
$count = $row['count'];
$no_of_paginations = ceil($count / $per_page);
/* -----Calculating the starting and endign values for the loop----- *///Some Code. Available in download script }
?>

Upload and Resize an Image with PHP

I had implemented a simple PHP script to re-sizing image into different dimensions. It's very useful to your web projects to save hosting space and bandwidth to reduce the original image to compressed size.




 

PHP Code
This script resize an Image into two 60px and 25px. Take a look at $newwidth you have to modify size values.

<?php 

 define ("MAX_SIZE","400");

 $errors=0;

 if($_SERVER["REQUEST_METHOD"] == "POST")
 {
        $image =$_FILES["file"]["name"];
 $uploadedfile = $_FILES['file']['tmp_name'];

  if ($image)
  {
  $filename = stripslashes($_FILES['file']['name']);
        $extension = getExtension($filename);
  $extension = strtolower($extension);
 if (($extension != "jpg") && ($extension != "jpeg") 
&& ($extension != "png") && ($extension != "gif"))
  {
echo ' Unknown Image extension ';
$errors=1;
  }
 else
{
   $size=filesize($_FILES['file']['tmp_name']);

if ($size > MAX_SIZE*1024)
{
 echo "You have exceeded the size limit";
 $errors=1;
}

if($extension=="jpg" || $extension=="jpeg" )
{
$uploadedfile = $_FILES['file']['tmp_name'];
$src = imagecreatefromjpeg($uploadedfile);
}
else if($extension=="png")
{
$uploadedfile = $_FILES['file']['tmp_name'];
$src = imagecreatefrompng($uploadedfile);
}
else
{
$src = imagecreatefromgif($uploadedfile);
}

list($width,$height)=getimagesize($uploadedfile);

$newwidth=60;
$newheight=($height/$width)*$newwidth;
$tmp=imagecreatetruecolor($newwidth,$newheight);

$newwidth1=25;
$newheight1=($height/$width)*$newwidth1;
$tmp1=imagecreatetruecolor($newwidth1,$newheight1);

imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,
 $width,$height);

imagecopyresampled($tmp1,$src,0,0,0,0,$newwidth1,$newheight1, 
$width,$height);

$filename = "images/". $_FILES['file']['name'];
$filename1 = "images/small". $_FILES['file']['name'];

imagejpeg($tmp,$filename,100);
imagejpeg($tmp1,$filename1,100);

imagedestroy($src);
imagedestroy($tmp);
imagedestroy($tmp1);
}
}
}
//If no errors registred, print the success message

 if(isset($_POST['Submit']) && !$errors)
 {
   // mysql_query("update SQL statement ");
  echo "Image Uploaded Successfully!";

 }
 ?>

Extention PHP funtion
Finds file extensions.

function getExtension($str) {

         $i = strrpos($str,".");
         if (!$i) { return ""; } 
         $l = strlen($str) - $i;
         $ext = substr($str,$i+1,$l);
         return $ext;
 }

configuring php to connect with oracle database using XAMPP server manager

[caption id="" align="alignright" width="190" caption="Image via CrunchBase"]S[/caption]

Today i was searching for "how to configure php to connect with oracle ".  I tried different search words and searched the whole internet. Finally i was successful.

I use the package XAMM for windows to run PHP and MySql.

Step-A

Check whether you have oracle client already installed

1. In your XAMPP Start Page, go to phpinfo, look for string oci8. If string found it indicate that connection to oracle is available and simply execute Step-3.           Otherwise to activate connection do the following steps:


2. Open the currently used php.ini file by looking at the phpinfo, from the XAMPP folder.


3. Find string ;extension=php_oci8.dll. Remove the semicolon (;) from the begining of the string to activate the oracle extension.


4. Save the php.ini file.


5. Download the “Instant Client Package – Basic” for Windows from the OTN Instant Client page. Unzip it to "C:\xampp\php\ext" folder


6. Edit the PATH environment setting and add C:\xampp\php\ext before any other Oracle directories. For example, on Windows XP, follow Start -> Control Panel -> System -> Advanced -> Environment Variables and edit PATH in the System variables list.


7. Set desired Oracle globalization language environment variables such as NLS_LANG. If nothing is set, a default local environment will be assumed. See An Overview on Globalizing Oracle PHP Applications for more details.


8. Unset Oracle variables such as ORACLE_HOME and ORACLE_SID, which are unnecessary with Instant Client (if they are set previously).


9. Restart XAMPP (or Start if its not already started).


10. To make sure that connection to oracle database has successfully activated, go to phpinfo. Find string: oci8. If found, then XAMPP can now communicate with Oracle Database.

Step-B

Now connect to your desired database and execute your query

<?php

define('DB_SERVER', 'yourservername');
define('DB_USERNAME', 'yourUserName');
define('DB_PASSWORD', 'yourPassword');
define('DB_DATABASE', 'yourDatabaseName');
$conn= oci_connect(DB_USERNAME, DB_PASSWORD, DB_SERVER)
or die(oci_error());
echo "success...";
//$database = oci_select_db(DB_DATABASE) or die(oci_error());
$stid = oci_parse($conn, 'SELECT * FROM employees'); oci_execute($stid); echo "<table border='1'>\n"; while ($row = oci_fetch_array($stid, OCI_ASSOC+OCI_RETURN_NULLS)) {     echo "<tr>\n";     foreach ($row as $item) {         echo "    <td>" . ($item !== null ? htmlentities($item, ENT_QUOTES) : "&nbsp;") . "</td>\n";     }     echo "</tr>\n"; } echo "</table>\n";
?>

For further help you can always refer the PHP manual.

Ways to check BSNL Broadband or Dataone internet usage

[caption id="" align="alignright" width="300" caption="Image via Wikipedia"][/caption]

BSNL broadband is still the most popular and widely used broadband service in India. BSNL brought the low cost and high speed broadband service in India (Though we are still far slower than other developed countries). Many people use BSNL‘s fixed traffic plans, we need to keep eyes on our usages in these plans. (Though I am on unlimited plan, I use (love) to track how many GBs I have downloaded till now.)

There are many ways to check the usages. Here I am giving a list of good software, sites, and services to check how much internet you have used.

Official links.

The official links are the most reliable sources to check the usages.
For 5x.xx.xx.xx IP-Address.

• http://10.240.64.195


• http://10.240.89.199


• http://10.240.128.195


• http://10.240.16.195


• http://10.240.144.195

For 117.xx.xx.xx IP-Address

• http://data.bsnl.in/wps/portal

Softwares

There are few unofficial softwares available on net to check the internet usage. ShaPlus Usage Finder is one of the most popular amongst them, You can download it from shaplus.com/dataone/

Awesome tools and services

Now this is the best and important part of this post.

1. SMS Alert:
This is the official service, which sends SMS and E-Mail alerts for usages.
You can register yourself for the service at http://bbusage.bsnl.in/

2. DataFox – Firefox and Chrome Browser Plug-in.
DataFox is nice Mozilla Firefox and Google Chrome plug-in which shows the BrandBand usages in browser itself. Its very nice and handy utility. No need to check any special software or no need to visit any URL for checking the usages. Just give the login credentials to plug-in and the plug-in will automatically fetch and display the usages in browser status bar.
You can download and install DataFox from TheGoan.com/DataFox/


Do you know any other good service / Software ?
Am I missing anything here ??
Let me know. Comment below.

Login with Facebook and Twitter

Facebook and Twitter have become large in the social network world and both networks offering oAuth support. We developed a system to login with Twitter and Facebook. Nowadays web users not interested to filling the big registration forms. This script helps you to avoid registration forms, It’s is very useful and simple to integrate.



   

Database

Sample database users table columns id, email, oauth_uid, oauth_provider
and username.

    CREATE TABLE users
    (
    id INT PRIMARY 
    KEY AUTO_INCREMENT,
    email VARCHAR(70),
    
    oauth_uid VARCHAR(200),
    oauth_provider VARCHAR(200),
    username VARCHAR(100),
    
    twitter_oauth_token VARCHAR(200),
    
    twitter_oauth_token_secret VARCHAR(200)
    
    );

The tutorial contains three folders called facebook,twitter and
config with PHP files.

facebook //Facebook
OAUTH library

twitter //Twitter
OAUTH library

config
-- functions.php 
-- dbconfig.php
//Database connection

-- fbconfig.php
//Facebook API connection
-- twconfig.php
//Twitter API connection
index.php
home.php
login-twitter.php
login-facebook.php
getTwitterData.php

Facebook Setup

You have to create a application. Facebook will provide you app
id and app secret id, just modify following code

fcconfig.php

    <?php
    define('APP_ID', 'Facebook 
    APP ID');
    define('APP_SECRET', 'Facebook 
    Secret ID');
    ?>
 

Twitter Setup

Create a twitter application click here. Some like Facebook Twitter provide you
consumer key amd consumer secret key using these modify following code.

twconfig.php

    <?php
    define('YOUR_CONSUMER_KEY', 'Twitter Key');
    define('YOUR_CONSUMER_SECRET', 'Twitter Secret Key');
    ?>
 

dbconfig.php
Database configuration file.

    <?php
    define('DB_SERVER', 'localhost');
    define('DB_USERNAME', 'User 
    Name');
    define('DB_PASSWORD', 'Password');
    define('DB_DATABASE', 'DATABASE');
    $connection = mysql_connect(DB_SERVER, 
    DB_USERNAME, DB_PASSWORD) or 
    die(mysql_error());
    $database = mysql_select_db(DB_DATABASE) 
    or die(mysql_error());
    ?>
 

login-twitter.php
In root directory find out the below line at i>login-twitter.php code and
replace yourwebsite.

    $request_token = 
    $twitteroauth->getRequestToken('http://yourwebsite.com/getTwitterData.php');
 
 

index.php


If you want to modify your web project existing login or index pages, just use
following code.

    <?php
    session_start();
    if (isset($_SESSION['id'])) {
    // Redirection to login 
    page twitter or facebook
    header("location: home.php");
    }
    if (array_key_exists("login", $_GET))
    
    {
    $oauth_provider = $_GET['oauth_provider'];
    if ($oauth_provider == 'twitter')
    {
    header("Location: login-twitter.php");
    }
    else if ($oauth_provider == 'facebook')
     {
    header("Location: 
    login-facebook.php");
    }
    }
    ?>
    //HTML Code
    <a href="?login&oauth_provider=twitter">Twitter_Login</a>
    <a href="?login&oauth_provider=facebook">Facebook_Login</a>