Unique key – Swadesh Programming Blog

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.

Google Plus Style Drag and Drop adding Groups

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

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 { …………………… …………………… ……………………. } ?>

Since a couple of days, i was looking for the same search script as facebook with the feature of autosuggestion user search with jQuery, Ajax and PHP. It’s simple and clean just you need to change the database details.

Facebook like Autosuggestion with jQuery, Ajax and PHP.

Take a look at live demo, search word ” sw ”

Download Script Live Demo

Download the Script. Edit Config.php change the database details.

Database
create database table with name “test_user_data”

CREATE TABLE test_user_data
(
uid INT AUTO_INCREMENT PRIMARY KEY,
fname VARCHAR(25),
lname VARCHAR(25),
country VARCHAR(25),
img VARCHAR(50)
);

Auto.html
contains jquery(javascript) and HTML Code. Take a look at input field class values search

<input type=”text”color: blue;”>search” id=”searchbox” />

<div id=”display”>

</div>

search.php
Contains PHP code. Display search results

<?php
include(‘config.php’);
if($_POST)
{
$q=$_POST[‘searchword’];
$sql_res=
mysql_query(“select * from test_user_data where fname like ‘%$q%’ or lname like ‘%$q%’ order by uid LIMIT 5”);
while($row=mysql_fetch_array($sql_res))
{
$fname=$row[‘fname’];
$lname=$row[‘lname’];
$img=$row[‘img’];
$country=$row[‘country’];
$re_fname='<b>’.$q.'</b>’;
$re_lname='<b>’.$q.'</b>’;
$final_fname = str_ireplace($q, $re_fname, $fname);
$final_lname = str_ireplace($q, $re_lname, $lname);?>
<divcolor: blue;”>display_box” align=”left”>
<img src=”user_img/
<?php echo $img; ?>” />
<?php echo $final_fname; ?> 
<?php echo $final_lname; ?><br/>
<?php echo $country; ?>
</div>
<?php
}
}
else
{}
?>

Using Watermark Input plugin
To show information about the contents of a text field.

CSS
id #diplay overflow : hidden

*{margin:0px}

#searchbox

{
width:250px;
border:solid 1px #000;
padding:3px;
}

#display

{
width:250px;
display:none;
float:right; margin-right:30px;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
overflow:hidden;
}

.display_box

{
padding:4px;
border-top:solid 1px #dedede;
font-size:12px;
height:30px;
}

.display_box:hover

{
background:#3b5998;
color:#FFFFFF;
}

if any queries just post a comment.

Swadesh Programming Blog

Tag: Unique key

Google plus like drag and drop adding groups

Facebook type autosuggestion using jQuery, Ajax and PHP

Share this:

Share this: