CodeSlot

Remove deactivated Profiles from your Facebook friend list

noreply@blogger.com (Phoenix Elmasry) — Tue, 02 Oct 2012 12:28:00 +0000

Facebook might be the largest social network in action today, but it isn't without its flaws.
A lot of changes made by Facebook seem to cause problems for the users, especially the ones made in 2012. First, the Timeline, then the ticker and the ability of friends to add you to groups without permission. Then there's this problem regarding deactivated and deleted profiles in your friend list. Since the changes made, people started to notice old profiles (and new) that had been deactivated in their friends list. Now this isn't a problem, but it sure clutters up your list and inflates your number of friends. You can easily find and delete these profiles from your list and clear up things.

Detecting deactivated profiles

So how do you know you have these "Ghost Profiles" in your account? Here is a simple test. Go to your profile, and note down the total number of 'friends' you have. This will show you the total number of people in your friend list, including those who have deleted or deactivated their profiles. This is where the problem is, because it should only display the number of active profiles. Hence, Facebook's metrics are flawed, so to speak.

Now, go to https://www.facebook.com/me/friends, and (if possible), count the total number of profiles displayed there (This is where your school arithmetic lessons might come in useful :D). This number will most likely be lesser than the previous one. I, for one, have 361 friends in my list, but upon counting them, I came up with a count of 349, give or take a couple.

Why does this happen? Suppose you had 100 friends, and Mr. X added you on Facebook. So your total count becomes 101. Sometime later, he decides he's better off without Facebook, so he deactivates his profile. Your count should get back to 100, but it doesn't. It'll be 101, with an added "Ghost Profile".

Removing deactivated profiles

You can easily remove the ghost profiles from your list manually. If you start searching on Facebook with a letter, Facebook will show you your friends that have that letter in their names. For examply, type in 'x' and you will see Mr. X there.

You can recognize the de-activated profiles from the default silhouettes instead of profile pictures. You might also see silhouettes in your friend list. If those silhouettes are active profiles, then you will see a pop-up when hovering over them. Otherwise, they're just deactivated profiles that you can choose to delete. Click on them, and you'll get a message saying that the profile has been deactivated. There's an option to un-friend that profile. Go ahead if you want.

A Simple PHP Upload Progress Bar

noreply@blogger.com (Phoenix Elmasry) — Tue, 28 Aug 2012 02:13:00 +0000

this is a simple upload file form that uses Apc.

it has a lot of features like

Easy to modify with CSS
Simple integration
Uses jQuery for callbacks
No flash

Source files

Upload.php

<?php 
//get unique id
$up_id = uniqid(); 
?>

<?php

//process the forms and upload the files
if ($_POST) {

//specify folder for file upload
$folder = "tmp/"; 

//specify redirect URL
$redirect = "upload.php?success";

//upload the file
move_uploaded_file($_FILES["file"]["tmp_name"], "$folder" . $_FILES["file"]["name"]);

//do whatever else needs to be done (insert information into database, etc...)

//redirect user
header('Location: '.$redirect); die;
}
//

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Upload your file</title>

<!--Progress Bar and iframe Styling-->
<link href="style_progress.css" rel="stylesheet" type="text/css" />

<!--Get jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script>

<!--display bar only if file is chosen-->
<script>

$(document).ready(function() { 
//

//show the progress bar only if a file field was clicked
var show_bar = 0;
    $('input[type="file"]').click(function(){
show_bar = 1;
    });

//show iframe on form submit
$("#form1").submit(function(){

if (show_bar === 1) { 
$('#upload_frame').show();
function set () {
                $('#upload_frame').attr('src','upload_frame.php?up_id=<?php echo $up_id; ?>');
}
setTimeout(set);
 }
    });
//

});

</script>

</head>

<body>
<h1>Upload your file </h1>

<div>
  <?php if (isset($_GET['success'])) { ?>
  <span class="notice">Your file has been uploaded.</span>
  <?php } ?>
  <form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
    Name<br />
    <input name="name" type="text" id="name"/>
    <br />
    <br />
    Your email address <br />
    <input name="email" type="text" id="email" size="35" />
    <br />
    <br />
    Choose a file to upload<br />

<!--APC hidden field-->
    <input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="<?php echo $up_id; ?>"/>
<!---->

    <input name="file" type="file" id="file" size="30"/>

<!--Include the iframe-->
    <br />
    <iframe id="upload_frame" name="upload_frame" frameborder="0" border="0" src="" scrolling="no" scrollbar="no" > </iframe>
    <br />
<!---->

    <input name="Submit" type="submit" id="submit" value="Submit" />
  </form>
  </div>

</body>

</html>

upload_frame.php

<?php

$url = basename($_SERVER['SCRIPT_FILENAME']);

//Get file upload progress information.
if(isset($_GET['progress_key'])) {
    $status = apc_fetch('upload_'.$_GET['progress_key']);
    echo $status['current']/$status['total']*100;
    die;
}
//

?>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script>
<link href="style_progress.css" rel="stylesheet" type="text/css" />

<script>
$(document).ready(function() { 
//

    setInterval(function() 
        {
    $.get("<?php echo $url; ?>?progress_key=<?php echo $_GET['up_id']; ?>&randval="+ Math.random(), { 
        //get request to the current URL (upload_frame.php) which calls the code at the top of the page.  It checks the file's progress based on the file id "progress_key=" and returns the value with the function below:
    },
        function(data)    //return information back from jQuery's get request
            {
                $('#progress_container').fadeIn(100);    //fade in progress bar    
                $('#progress_bar').width(data +"%");    //set width of progress bar based on the $status value (set at the top of this page)
                $('#progress_completed').html(parseInt(data) +"%");    //display the % completed within the progress bar
 }
)},500);    //Interval is set at 500 milliseconds (the progress bar will refresh every .5 seconds)

});


</script>

<body style="margin:0px">
<!--Progress bar divs-->
<div id="progress_container">
<div id="progress_bar">
<div id="progress_completed"></div>
</div>
</div>
<!---->
</body>

Style_Progress.css

/*iframe*/
#upload_frame {
 border:0px;
 height:40px;
 width:400px;
 display:none;
}

#progress_container {
 width: 300px; 
 height: 30px; 
 border: 1px solid #CCCCCC; 
 background-color:#EBEBEB;
 display: block; 
 margin:5px 0px -15px 0px;
}

#progress_bar {
 position: relative; 
 height: 30px; 
 background-color: #F3631C; 
 width: 0%; 
 z-index:10; 
}

#progress_completed {
 font-size:16px; 
 z-index:40; 
 line-height:30px; 
 padding-left:4px; 
 color:#FFFFFF;
}

Server Requirements

PHP 5.2 or greater
APC
Make sure you have APC installed on your server. It won't work without it. It's easy to install, so if you don't have root acces to your server, ask your hosting provider to take care of it for you.
Installation instructions: Linux | Windows

Important: Make sure to include apc.rfc1867 = on in your php.ini file after APC is installed. Your php.ini file should be located at /etc/php.ini.

create a search form with php and mysql

noreply@blogger.com (Phoenix Elmasry) — Sun, 26 Aug 2012 19:43:00 +0000

Having a search feature on your site is very handy for helping users find exactly what they are looking for.

Database Table

CREATE TABLE users (fname VARCHAR(30), lname VARCHAR(30)); 

 INSERT INTO users VALUES ( "Jim", "Jones"), ( "Peggy", "Smith" ),
( "Maggie", "Martin"),( "Tex", "Moncom" )

The Search Form

<h2>Search</h2> 
 <form name="search" method="post" action="<?=$PHP_SELF?>">
 Seach for: <input type="text" name="find" /> in 
 <Select NAME="field">
 <Option VALUE="fname">First Name</option>
 <Option VALUE="lname">Last Name</option>
 <Option VALUE="info">Profile</option>
 </Select>
 <input type="hidden" name="searching" value="yes" />
 <input type="submit" name="search" value="Search" />
 </form>

The above HTML code creates the form your users will use to search. It provides a space to enter what they are looking for, and a drop down menu where they can choose what field they are searching (first name, last name or profile.) The form sends the data back to itself using the PHP_SELF () function. This code does not go inside the <?php and ?> tags, but rather above or below them.

The Search Code

 <? 
 //This is only displayed if they have submitted the form 
 if ($searching =="yes") 
 { 
 echo "<h2>Results</h2><p>"; 
 
 //If they did not enter a search term we give them an error 
 if ($find == "") 
 { 
 echo "<p>You forgot to enter a search term"; 
 exit; 
 } 
 
 // Otherwise we connect to our Database 
 mysql_connect("mysql.yourhost.com", "user_name", "password") or die(mysql_error()); 
 mysql_select_db("database_name") or die(mysql_error()); 
 
 // We preform a bit of filtering 
 $find = strtoupper($find); 
 $find = strip_tags($find); 
 $find = trim ($find); 
 
 //Now we search for our search term, in the field the user specified 
 $data = mysql_query("SELECT * FROM users WHERE upper($field) LIKE'%$find%'"); 
 
 //And we display the results 
 while($result = mysql_fetch_array( $data )) 
 { 
 echo $result['fname']; 
 echo " "; 
 echo $result['lname']; 
 echo "<br>"; 
 echo $result['info']; 
 echo "<br>"; 
 echo "<br>"; 
 } 
 
 //This counts the number or results - and if there wasn't any it gives them a little message explaining that 
 $anymatches=mysql_num_rows($data); 
 if ($anymatches == 0) 
 { 
 echo "Sorry, but we can not find an entry to match your query<br><br>"; 
 } 
 
 //And we remind them what they searched for 
 echo "<b>Searched For:</b> " .$find; 
 } 
 ?>

This is the code that actually does the searching, and can be placed either above or below the HTML form in the file depending on your preference. Although it is explained in the comments, we will explain more about how this works on the next pages.

Youtube Clone Script 2012

noreply@blogger.com (Phoenix Elmasry) — Mon, 13 Aug 2012 03:58:00 +0000

This is a clone script of YouTube..
you can see live demo at http://hiphopdestrada.ro/

Another Download Mirror

Facebook like Expanding Textbox with Jquery.

noreply@blogger.com (Phoenix Elmasry) — Sun, 12 Aug 2012 04:15:00 +0000

How to implement Facebook like expanding textbox with Jquery.Take a look at this.

Javascript Code

It works with Jquery latest version 1.4.2. $('#content').focus(function(){} - content is the ID of the textbox. Using $(this).animate() expanding textbox height and using $("#button_block").slideDown() showing the update button.

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{

$("#content").focus(function()
{
$(this).animate({"height": "85px",}, "fast" );
$("#button_block").slideDown("fast");
return false;
});

$("#cancel").click(function()
{
$("#content").animate({"height": "30px",}, "fast" );
$("#button_block").slideUp("fast");
return false;
});

});
</script>

//HTML Code

<form method="post" action="">
<textarea  id="content"></textarea>
<div id="button_block">
<input type="submit" id="button" value=" Share "/>
<input type="submit" id='cancel' value=" cancel" />
</div>
</form>

CSS Code

#content
{
width:450px; height:30px;
border:solid 2px #006699;
font-size:14px;
}
#button
{
background-color:#006699;
color:#ffffff;
font-size:13px;
font-weight:bold;
padding:4px;
}
#cancel
{
background-color:#dedede;
color:#000;
font-size:13px;
padding:4px;
margin-left:10px;
}
#button_block
{
display:none;
}

Max's AJAX Rating System

noreply@blogger.com (Phoenix Elmasry) — Fri, 10 Aug 2012 04:14:00 +0000

Max's AJAX Rating System is a simple, easy to install script which allows your visitors to rate any item on your page.
You can put as many rating boxes on your page as you want. Vistors can rate only once. No database is required.

Demo:
You can see a working demo of AJAX Rating System as well.

CodeCanyon - jQuery Message Bar

noreply@blogger.com (Phoenix Elmasry) — Fri, 10 Aug 2012 03:53:00 +0000

The jQuery Message Bar is a professional and elegant plugin that adds a message bar to your pages.

You can see the DEMO HERE . Please click on the “Play in HD” button to see it in fullscreen.

Another Download Link

RockeTtheme - RT Hybrid Theme For Drupal 6 ,7

noreply@blogger.com (Phoenix Elmasry) — Fri, 10 Aug 2012 03:36:00 +0000

Hybrid is the February 2012 theme release, featuring a rich, vibrant and adaptable design.
The theme is divided into several independent color zones, for a truly dynamic appearance.

The design has 12 header styles, 12 footer styles, and 5 body color & accent styles, allowing for great diversity in stylistic possibility. Configure these via the Drupal Administrator. Hybrid's beautiful appearance rests on the powerful Drupal CMS and our other standard features such as the 960 Grid System and customizable block classes.

Available for Drupal 6 and Drupal 7!

Click Here

Colorful 404 Error Template

noreply@blogger.com (Phoenix Elmasry) — Thu, 09 Aug 2012 02:51:00 +0000

Features
1. 3 Pre-Defined Colors
2. Grouped Layers
3. Labelled Layers
4. Fully Customizable

Graphics Files Included:

Layered PSD

Font used :

Calibri

The zip file contains :
> .PSD file ; fully layered & editable.

Click Here To Download

Submit Form without Refreshing Page with Jquery

noreply@blogger.com (Phoenix Elmasry) — Mon, 06 Aug 2012 05:05:00 +0000

This post helps you to submit your form without refreshing page.
In this tutorial I will show you how simple it is to do using jQuery form plugin just five lines of JavaScript code, no need to post data string values via ajax. Explained collaboration with validate plugin for implementing form field validations.

JavaScript Code

$("#form").ajaxForm()- form is the ID name of the FORM tag. While submitting FORM ajaxForm() method posting data to submit.php without refreshing page. Result will show in #preview.

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
$('document').ready(function()
{
$('#form').ajaxForm( {
target: '#preview',
success: function() {
$('#formbox').slideUp('fast');
}
});
});
</script>

Contact.html

Simple HTML code. FORM contains three input fields name, email and message.

<div id="preview"> </div>
<div id="formbox">
<form id="form" action="submit.php" method="post">
Name
<input type="text" name="name" />
Email
<input type="text" name="email" />
Message
<textarea name="message"></textarea>
<input type="submit" value="Submit">
</form>
</div>

Contacts

Table contains name, email, message and created data etc.

CREATE TABLE `contact` (
`id` int(11) AUTO_INCREMENT PRIMARY KEY,
`name` varchar(255) UNIQUE KEY,
`email` varchar(100),
`message` text UNIQUE KEY,
`created_date` int(11),
)

submit.php

Contails simple PHP code. Inserting values into contacts table.

<?php
include("db.php");
if($_SERVER["REQUEST_METHOD"] == "POST")
{
$name=mysql_real_escape_string($_POST['name']);
$email=mysql_real_escape_string($_POST['email']);
$message=mysql_real_escape_string($_POST['message']);
if(strlen($name)>0 && strlen($email)>0 && strlen($message)>0)
{
$time=time();
mysql_query("INSERT INTO contact (name,email,message,created_date) VALUES('$name','$email','$message','$time')");
echo "<h2>Thank You !</h2>";
}
}
?>

Validate Plugin

Here the collaboration of jQuery validate and form plug-in.

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$('document').ready(function()
{
$('#form').validate(
{
rules:
{
"name":{
required:true,
maxlength:40
},
"email":{
required:true,
email:true,
maxlength:100
},
"message":{
required:true
}},

messages:
{
"name":{
required:"This field is required"
},
"email":{
required:"This field is required",
email:"Please enter a valid email address"
},
"message":{
required:"This field is required"
}},

submitHandler: function(form){
$(form).ajaxSubmit({
target: '#preview',
success: function() {
$('#formbox').slideUp('fast');
}
});
}

})
});
</script>

db.php

PHP database configuration file

<?php
$mysql_hostname = "Host name";
$mysql_user = "UserName";
$mysql_password = "Password";
$mysql_database = "Database Name";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
mysql_select_db($mysql_database, $bd) or die("Could not select database");
?>

Simple Drop Down Menu with Jquery and CSS

noreply@blogger.com (Phoenix Elmasry) — Mon, 06 Aug 2012 04:46:00 +0000

This post is very basic level Jquery and CSS implementation.

I want to explain how to design simple drop down menu with CSS, HTML and Jquery. This system helps you to minimise the menus list. Just take a quick look at this post very few lines of code, use it and enrich your web projects.

HTML Code

Simple HTML code

<div class="dropdown">
<a class="account" >My Account</a>

<div class="submenu">
<ul class="root">
<li ><a href="#Dashboard" >Dashboard</a></li>
<li ><a href="#Profile" >Profile</a></li>
<li ><a href="#settings">Settings</a></li>
<li ><a href="#feedback">Send Feedback</a></li>
</ul>
</div>

</div>

JavaScript

Contains javascipt code. $(".account").click(function(){}- account is the class name of the My Account anchor tag. Using $(this).attr('id') calling id value of the anchor tag and based on condition showing .submenu div box and the same time $(this).attr('id', '1') adding id value too.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
"></script>;
<script type="text/javascript" >
$(document).ready(function()
{

$(".account").click(function()
{
var X=$(this).attr('id');
if(X==1)
{
$(".submenu").hide();
$(this).attr('id', '0');
}
else
{
$(".submenu").show();
$(this).attr('id', '1');
}

});

//Mouse click on sub menu
$(".submenu").mouseup(function()
{
return false
});

//Mouse click on my account link
$(".account").mouseup(function()
{
return false
});


//Document Click
$(document).mouseup(function()
{
$(".submenu").hide();
$(".account").attr('id', '');
});
});
</script>

Document click on document $(document).mouseup(function() hiding the .submenu

CSS Code

.dropdown
{
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align:left;
}
.submenu
{
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.dropdown li a
{
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}

.dropdown li a:hover
{
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account 
{
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor:pointer;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}

SJ ZOO Slideshow Pro For Joomla 2.5

noreply@blogger.com (Phoenix Elmasry) — Mon, 06 Aug 2012 04:32:00 +0000

SJ ZOO Slideshow Pro For Joomla 2.5

Demo --- Download

RocketTheme Kirigami 1.1 Joomla 2.5 template

noreply@blogger.com (Phoenix Elmasry) — Mon, 06 Aug 2012 04:28:00 +0000

RocketTheme Kirigami 1.1 Joomla 2.5 template

Live Demo -- Download From Turbobit -- Download From Rapidgator

Adf.ly Clone Script Version 1.12 by Amereca

noreply@blogger.com (Phoenix Elmasry) — Mon, 06 Aug 2012 04:17:00 +0000

Adf.ly Clone Script Version 1.12 by Amereca

Demo --- Download Here

Shake Internet Explorer Window

noreply@blogger.com (Phoenix Elmasry) — Fri, 15 Jun 2012 21:55:00 +0000

In this tutorial i will show you how to shake your internet explorer window.this is done using simple javascript code as follow.

Remember : This Only For Internet Explorer

Html And JavaScript Page
Copy The Next code And Save It .Html And run with IE

<html>
<head>
<title>Shaking Internet Explorer</title>
<meta http-equiv="Content-Language" content="en-us">
<SCRIPT language=JavaScript>
<!-- Begin
function shake(n) {
if (parent.moveBy) {
for (i = 10; i > 0; i--) {
for (j = n; j > 0; j--) {

parent.moveBy(-i,0);
parent.moveBy(0,-i);
parent.moveBy(-i,0);
parent.moveBy(0,i);
parent.moveBy(i,0);
parent.moveBy(0,-i);
parent.moveBy(-i,0);
parent.moveBy(0,i);
parent.moveBy(i,0);
parent.moveBy(0,-i);
parent.moveBy(-i,0);
parent.moveBy(0,-i);
parent.moveBy(i,0);
parent.moveBy(0,i);
parent.moveBy(i,0);
parent.moveBy(0,i);
 } } } }
//  End -->
<!--
shake(1);
//-->
</SCRIPT>
</head>
<body >
<a href="www.codeslot.info">Www.CodeSlot.Info</a>
</body>
</html>

Cheers :)

Adjust Page Background Color With MouseOver Effect

noreply@blogger.com (Phoenix Elmasry) — Fri, 15 Jun 2012 21:24:00 +0000

This code allows the user to choose the favorite color of himself/herself and adjust it on the background of the page by moving mouse and choosing the color.

Html And JavaScript Page

This Page Contain Simple Anchor Tags With Mouseover Effect For Each Item that represents colors.

<html>
<head>
<title>Testing Background Color</title>
</head>
<body>
<p>[<a href="/"
onmouseover="document.bgColor='green'">Green</a>]<br>
[<a href="/"
onmouseover="document.bgColor='greem'">Bright Green</a>]<br>
[<a href="/"
onmouseover="document.bgColor='seagreen'">Sea Green</a>]<br>
[<a href="/"
onmouseover="document.bgColor='red'">Red</a>]<BR>
[<a href="/"
onmouseover="document.bgColor='magenta'">Magenta</a>]<br>
[<a href="/"
onmouseover="document.bgColor='fusia'">Fusia</a>]<br>
[<a href="/"
onmouseover="document.bgColor='pink'">Pink</a>]<br>
[<a href="/"
onmouseover="document.bgColor='purple'">Purple</a>]<BR>
[<a href="/"
onmouseover="document.bgColor='navy'">Navy</a>]<br>
[<a href="/"
onmouseover="document.bgColor='blue'">Blue</a>]<br>
[<a href="/"
onmouseover="document.bgColor='royalblue'">Royal Blue</a>]<br>
[<a href="/"
onmouseover="document.bgColor='Skyblue'">Sky Blue</a>]<BR>
[<a href="/"
onmouseover="document.bgColor='yellow'">Yellow</a>]<br>
[<a href="/"
onmouseover="document.bgColor='brown'">Brown</a>]<br>
[<a href="/"
onmouseover="document.bgColor='almond'">Almond</a>]<br>
[<a href="/"
onmouseover="document.bgColor='white'">White</a>]<BR>
[<a href="/"
onmouseover="document.bgColor='black'">Black</a>]<br>
[<a href="/"
onmouseover="document.bgColor='coral'">Coral</a>]<br>
[<a href="/"
onmouseover="document.bgColor='olivedrab'">Olive Drab</a>]<br>
[<a href="/"
onmouseover="document.bgColor='orange'">Orange</a>]<br>
<hr color="#00FFFF">
<font face="Tahoma"><a target="_blank" href="http://www.codeslot.info">
<span style="font-size: 8pt; text-decoration: none">CodeSlot.info Free Web Tutorials</span></a>
</font>
</body>
</html>

PHP Time Stamp Function.

noreply@blogger.com (Phoenix Elmasry) — Fri, 15 Jun 2012 11:30:00 +0000

I had developed a date time stamp function using PHP.It is very important for social media web applications.

I hope it's useful for you.

time_stamp.php

Contains PHP code. You have to use the time_stamp() function to display the date and time.

<?php
function time_stamp($session_time)
{
$time_difference = time() - $session_time ;

$seconds = $time_difference ;
$minutes = round($time_difference / 60 );
$hours = round($time_difference / 3600 );
$days = round($time_difference / 86400 );
$weeks = round($time_difference / 604800 );
$months = round($time_difference / 2419200 );
$years = round($time_difference / 29030400 );
// Seconds
if($seconds <= 60)
{
echo "$seconds seconds ago";
}
//Minutes
else if($minutes <=60)
{

   if($minutes==1)
  {
   echo "one minute ago";
   }
   else
   {
    echo "$minutes minutes ago";
   }

}
//Hours
else if($hours <=24)
{

   if($hours==1)
  {
   echo "one hour ago";
  }
  else
  {
   echo "$hours hours ago";
  }

}
//Days
else if($days <= 7)
{

  if($days==1)
  {
   echo "one day ago";
  }
  else
  {
   echo "$days days ago";
   }

}
//Weeks
else if($weeks <= 4)
{

   if($weeks==1)
  {
   echo "one week ago";
   }
  else
  {
   echo "$weeks weeks ago";
  }

}
//Months
else if($months <=12)
{

   if($months==1)
  {
   echo "one month ago";
   }
  else
  {
   echo "$months months ago";
   }

}
//Years
else
{

   if($years==1)
   {
    echo "one year ago";
   }
   else
  {
    echo "$years years ago";
   }

}

}
$session_time ="1264326122";
//$session_time=time();
echo time_stamp($session_time);
?>

Cheers :)

PHP Login Script with Encryption.

noreply@blogger.com (Phoenix Elmasry) — Tue, 12 Jun 2012 21:10:00 +0000

In this post I want to explain how to insert encrypted password while registration and accessing the same with login time.

Database

MySQL admin table columns id, username, passcode.

CREATE TABLE admin
(
id INT PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(50) UNIQUE,
passcode VARCHAR(50)
);

Encrypted Password

Here database table admin password:test encrypted and storing like this

registration.php

Contains PHP and HTML code. Just inserting form values into database table admin

<?php
include("db.php");
if($_SERVER["REQUEST_METHOD"] == "POST")
{
// username and password sent from Form
$username=mysql_real_escape_string($_POST['username']);
$password=mysql_real_escape_string($_POST['password']);
$password=md5($password); // Encrypted Password
$sql="Insert into admin(username,passcode) values('$username','$password');";
$result=mysql_query($sql);
echo "Registration Successfully";
}
?>
<form action="registration.php" method="post">
<label>UserName :</label>
<input type="text" name="username"/><br />


<label>Password :</label>
<input type="password" name="password"/><br/>
<input type="submit" value=" Registration "/><br />
</form>

login.php

Login Script accessing the encrypted password.

<?php
include("db.php");
session_start();
if($_SERVER["REQUEST_METHOD"] == "POST")
{
// username and password sent from Form
$username=mysql_real_escape_string($_POST['username']);
$password=mysql_real_escape_string($_POST['password']);
$password=md5($password); // Encrypted Password
$sql="SELECT id FROM admin WHERE username='$username' and passcode='$password'";
$result=mysql_query($sql);
$count=mysql_num_rows($result);

// If result matched $username and $password, table row must be 1 row
if($count==1)
{
header("location: welcome.php");
}
else
{
$error="Your Login Name or Password is invalid";
}
}
?>
<form action="login.php" method="post">
<label>UserName :</label>
<input type="text" name="username"/><br />
<label>Password :</label>
<input type="password" name="password"/><br/>
<input type="submit" value=" Login "/><br />
</form>

db.php

Database configuration file.

<?php
$mysql_hostname = "hostname";
$mysql_user = "username";
$mysql_password = "password";
$mysql_database = "database";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password)
or die("Opps some thing went wrong");
mysql_select_db($mysql_database, $bd) or die("Opps some thing went wrong");
?>

You Are Ready Now

Delicious Database Design: create tables and relationships with SQL

noreply@blogger.com (Phoenix Elmasry) — Tue, 12 Jun 2012 20:53:00 +0000

In the previous lesson we have seen how to design the relationship-entities model for a database to be used in a del.icio.us-like web site project.

Our R-E model is:

Now we implement the database using SQL and phpMyAdmin. We crate a new database on phpMyAdmin and select the "SQL" tab. Copy and paste this SQL code into the form and click on execute button:

CREATE TABLE USER

(

user_id_pk INT NOT NULL AUTO_INCREMENT,

user_name VARCHAR(40), email VARCHAR(40),

password VARCHAR(20),

user_date DATE,

PRIMARY KEY (user_id_pk)

) TYPE=INNODB;

CREATE TABLE SITE

(

site_id_pk INT NOT NULL AUTO_INCREMENT,

url VARCHAR(250),

description LONGTEXT,

share_data DATA, PRIMARY KEY

) TYPE=INNODB;

CREATE TABLE SHARE

(

share_id_pk INT NOT NULL AUTO_INCREMENT,

user_id INT NOT NULL,

site_id INT NOT NULL,

submitted_by INT NOT NULL DEFAULT 0,

PRIMARY KEY (share_id_pk),

FOREIGN KEY (user_id) REFERENCES USER(user_id_pk) ON UPDATE CASCADE ON DELETE CASCADE, FOREIGN KEY (site_id) REFERENCES SITE(site_id_pk) ON UPDATE CASCADE ON DELETE CASCADE

) TYPE=INNODB;

Create Relationships
To create relationships between database's table (for example between SHARE table and the other tables) you have to use the SQL code below:

FOREIGN KEY (attribute_name_1) REFERENCES tableOfReference(attribute_name_2)

where attribute_name_1 is the foreign key (generally, a field of type INTEGER)a and attribute_name_2 the primary key of the table of destination.

To force the referencial integrity between the data of database, you have to add this code:

ON UPDATE CASCADE ON DELETE CASCADE

Our database is now ready

Delicious Database Design: relationships

noreply@blogger.com (Phoenix Elmasry) — Mon, 11 Jun 2012 20:29:00 +0000

This lesson explains how to project a typical relationships-entities model for a database to be used in our web projects.
My approach is:

1. Define database entities (tables)
2. Identify attributes for tables
3. Define relationships and cardinality between the instances (records) of tables.

Step 1: define database entities
The first step when you project a database is to identify all entities (tables). For example if we want to project a simplified del.icio.us-like web site, our database will have these entities:

1. - USER (to store data about users, email, password, nickname,...)
2. - SITE (to store data about the sites added by the users)

These are only the main entities required from our project but, take a mind, that we will add other tables to store data about relationships between istances (records) of these tables in case of cardinality (M:M), many to many (see Step 3).

Step 2: define attributes
The next step is to define attributes for the tables USER and SITE. In this semplified example we will have something like this:

USER
-----------
user_id_pk (Primary Key)
user_name
email
password
user_data (user signup date)

SITE
-----------
site_id_pk (Primary Key)
url
description
share_user (total number of users that share a site)

Step 3: define database relationships
Our simple application del.icio.us-like works in this way: an user add a site that can be shared by other users. The relationship's cardinality between USER table and SITE table is:

USER > SITE (M:M) - Many to Many (an user can add many sites).
SITE > USER (M:M) - Many to Many (a site can be shared by many users).

In this case ( cardinality M:M) we have to add a new table (SHARE) that contains all possible combination between all instances of USER table and SITE table . In this new table, SHARE, to identify an user that share a site added by another user or by itself, we will add two Foreign Key:

SHARE
-----------
share_id_pk (Primary Key)
user_id (Foreign Key > USER)
site_id (Foreign Key >SITE)
submitted_by (boolean: flag only if the current user has submitted the site)

Implement your database using SQL
Now, our database is ready to be implement with a DBMS (for example using MySQL). The next lesson will explains how to implement this database using SQL language.

the next lesson is

Delicious Database Design: create tables and relationships with SQL

Creating ZIP File with PHP.

noreply@blogger.com (Phoenix Elmasry) — Mon, 11 Jun 2012 19:00:00 +0000

This post helps you to create a ZIP file using PHP, It is useful for e-commerce web projects

like selling PDFs, Images and Docs etc,use can choose files and download it into compressed format.

HTML Code

Form contains list of files with input type checkbox name files[].

<form name="zips" method="post">

<input type="checkbox" name="files[]" value="flowers.jpg" />
<img src="files/image.png" />
flowers.jpg

<input type="checkbox" name="files[]" value="fun.jpg" />
<img src="files/image.png" />
fun.jpg

<input type="checkbox" name="files[]" value="codeslot.docx" />
<img src="files/doc.png"   />
CodeSlot.docx
........
<input type="submit" name="createpdf" value="Download as ZIP" />&nbsp;
<input type="reset" name="reset"  value="Reset" />
</form>

PHP Code

Contains PHP code covert the selected files into ZIP file format.

<?php
$error = ""; //error holder
if(isset($_POST['createpdf']))
{
$post = $_POST;
$file_folder = "files/"; // folder to load files
if(extension_loaded('zip'))
{
// Checking ZIP extension is available
if(isset($post['files']) and count($post['files']) > 0)
{
// Checking files are selected
$zip = new ZipArchive(); // Load zip library
$zip_name = time().".zip"; // Zip name
if($zip->open($zip_name, ZIPARCHIVE::CREATE)!==TRUE)
{
 // Opening zip file to load files
$error .= "* Sorry ZIP creation failed at this time";
}
foreach($post['files'] as $file)
{
$zip->addFile($file_folder.$file); // Adding files into zip
}
$zip->close();
if(file_exists($zip_name))
{
// push to download the zip
header('Content-type: application/zip');
header('Content-Disposition: attachment; filename="'.$zip_name.'"');
readfile($zip_name);
// remove zip file is exists in temp path
unlink($zip_name);
}

}
else
$error .= "* Please select file to zip ";
}
else
$error .= "* You dont have ZIP extension";
}
?>

How to create an image caption with jQuery

noreply@blogger.com (Phoenix Elmasry) — Fri, 08 Jun 2012 22:05:00 +0000

This image caption is not a plugin – It merely allows you to understand how a jQuery image caption would be created.

The HTML

The markup is very simple:

<p class="caption">
    <img src="images/image1.jpg" alt ="" />
    <span>Rainbow and Tree</span>
</p>

As you can see, all that is needed is a paragraph tag with a class of "caption" that contains an image and a span tag. The span tag would be the caption information. If you would like a heading within the caption, just enclose it within a <big> tag.

`The CSS`

div.clear {
 clear: both;
}
p.caption {
 display: block !important;
 position: relative !important;
}
p.caption img {
 position: absolute !important
}
p.caption span {
 background: #000;
 background: rgba(0,0,0,0.8);
 color: white !important;
 display: none;
 padding: 5px 10px !important;
 text-align: center;
 position: absolute !important;
 bottom: 0 !important;
 left: 0 !important;
}
p.caption span big {
 font-weight: bold;
}

I've thrown quite a few !important's around to make sure other CSS selectors don't interfere with it. There isn't really anything interesting going on within the CSS. The span is set to display none because we only want it to display once we have hovered over the image. So for now, it is display: none.

`The jQuery Javascript`

You Should Include The Jquery Library First

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Then Use This Script

<script type="text/javascript">
$(window).load(function(){ 
// For each instance of p.caption
$("p.caption").each(function(){
$(this)
// Add the following CSS properties and values
.css({
// Height equal to the height of the image
"height" : $(this).children("img").height() + "px",
// Width equal to the width of the image
"width" : $(this).children("img").width() + "px"
})
// Select the child "span" of this p.caption
// Add the following CSS properties and values
.children("span").css(
// Width equal to p.caption
// But subtract 20px to callibrate for the padding
"width", $(this).width() - 20 + "px")
// find the <big> tag if it exists
// And then add the following div to break the line
.find("big").after('<div class="clear"></div>');
// When you hover over p.caption
$("p.caption").hover(function(){
// Fade in the child "span"
$(this).children("span").stop().fadeTo(400, 1);
}, function(){
// Once you mouse off, fade it out
$(this).children("span").stop().delay(600).fadeOut(400);
});
// End $(this)
});
});
</script>

It might look quite confusing but it's all very simple actually. What I've had to do is break up the code so that it is readable, otherwise it would all be on one line. Everything is done on a single $(this) statement.

The p.caption element's width and height are set to the same width and height as the image. That way there is a - {position: relative;} - wrapper and we can make the span tag act as a caption by sticking to the bottom of the image/wrapper.

Note: On the span tag - padding is definitely needed other wise the text sticks right up against the top and sides. This is the reason width: 100% could not be applied to it within the CSS, otherwise the span would start moving outside of the wrapper. Padding has been used on the span, but this is only because the total span-padding-width has been subtracted from the span's total width within the javascript.

//Set the span's width to the width of the image/p.caption, but subtract 20 - This 20 refers to the 10px padding on either side.

"width", $(this).width() - 20 + "px")

Finally

So far, this image caption works with IE 7+, Opera 10, Webkit browsers and Firefox.

I hope you found this useful.

How To Make Page Transitions with CSS3

noreply@blogger.com (Phoenix Elmasry) — Sat, 19 May 2012 20:42:00 +0000

we've seen a lot of single page websites lying around the internet, most of them using JavaScript for some transitions effect.

Well, now I'm gonna teach you how you can have your own, but instead I'll be using CSS Transitions and the :target property to do all the magic.

Markup

The HTML will contain five main divisions: a header and the four content sections. Each of the content sections is going to have an ID and the class panel. Moreover, we will add another division inside which will have the class content. The first content section which is #home will only have the content class and will not require an extra division:

<!-- Home -->
<div id="home" class="content">
 <h2>Home</h2>
 <p>Some content</p>
 <!-- ... -->
</div>
<!-- /Home -->

<!-- Portfolio -->
<div id="portfolio" class="panel">
 <div class="content">
  <h2>Portfolio</h2>
  <p>Some content</p>
  <!-- ... -->
 </div>
</div>
<!-- /Portfolio -->

<!-- About -->
<div id="about" class="panel">
 <div class="content">
  <h2>About</h2>
  <p>Some content</p>
  <!-- ... -->
 </div>
</div>
<!-- /About -->

<!-- Contact -->
<div id="contact" class="panel">
 <div class="content">
  <h2>Contact</h2>
  <p>Some content</p>
  <!-- ... -->
 </div>
</div>
<!-- /Contact -->

In the header we will have the main heading and the navigation:

<!-- Header with Navigation -->
<div id="header">
 <h1>Page Transitions with CSS3</h1>
 <ul id="navigation">
  <li><a id="link-home" href="#home">Home</a></li>
  <li><a id="link-portfolio" href="#portfolio">Portfolio</a></li>
  <li><a id="link-about" href="#about">About Me</a></li>
  <li><a id="link-contact" href="#contact">Contact</a></li>
 </ul>
</div>

The reason for having such an “unordered” structure by adding the header to the end, is that we make the navigation “reachable” using the general sibling selector (~), so that we can color the respective items differently.

Now, the main idea is to use the pseudo-class :target in order to add a transition to the current section. In this example, we will be sliding up and down our sections.

CSS

First we will give style to our header and the navigation. We want to keep these on the same spot at all the time, even though everything else will be moving.

#header{
 position: absolute;
 z-index: 2000;
 width: 235px;
 top: 50px;
}
#header h1{
 font-size: 30px;
 font-weight: 400;
 text-transform: uppercase;
 color: rgba(255,255,255,0.9);
 text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
 padding: 20px;
 background: #000;
}
#navigation {
 margin-top: 20px;
 width: 235px;
 display:block;
 list-style:none;
 z-index:3;
}
#navigation a{
 color: #444;
 display: block;
 background: #fff;
 background: rgba(255,255,255,0.9);
 line-height: 50px;
 padding: 0px 20px;
 text-transform: uppercase;
 margin-bottom: 6px;
 box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 font-size: 14px;
}
#navigation a:hover {
 background: #ddd;
}

All the sections except #home have the panel class. Here we will be using the transition whenever an element with this class gets “targeted”. The trick is to use a negative margin in the “normal” class and no margin at all in the :target pseudo-class. Adding a transitions will make the panel slide from the top whenever one is “selected”:

.panel{
 min-width: 100%;
 height: 98%;
 overflow-y: auto;
 overflow-x: hidden;
 margin-top: -150%;
 position: absolute;
 background: #000;
 box-shadow: 0px 4px 7px rgba(0,0,0,0.6);
 z-index: 2;
 -webkit-transition: all .8s ease-in-out;
 -moz-transition: all .8s ease-in-out;
 -o-transition: all .8s ease-in-out;
 transition: all .8s ease-in-out;
}
.panel:target{
 margin-top: 0%;
 background-color: #ffcb00;
}

Next, let’s style the content class that all our sections have:

.content{
 right: 40px;
 left: 280px;
 top: 0px;
 position: absolute;
 padding-bottom: 30px;
}
.content h2{
 font-size: 110px;
 padding: 10px 0px 20px 0px;
 margin-top: 52px;
 color: #fff;
 color: rgba(255,255,255,0.9);
 text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.content p{
 font-size: 18px;
 padding: 10px;
 line-height: 24px;
 color: #fff;
 display: inline-block;
 background: black;
 padding: 10px;
 margin: 3px 0px;
}

In order to change the color of the current item in the navigation, we’ll use the :target pseudo-class with the general sibling selector to “get to” the respective navigation item:

#home:target ~ #header #navigation #link-home, #portfolio:target ~ #header #navigation #link-portfolio, #about:target ~ #header #navigation #link-about, #contact:target ~ #header #navigation #link-contact{ background: #000; color: #fff;

So The Final Full Code Will Be

Markup

<!-- Home -->
<div id="home" class="content">
 <h2>Home</h2>
 <p>Some content</p>
 <!-- ... -->
</div>
<!-- /Home -->

<!-- Portfolio -->
<div id="portfolio" class="panel">
 <div class="content">
  <h2>Portfolio</h2>
  <p>Some content</p>
  <!-- ... -->
 </div>
</div>
<!-- /Portfolio -->

<!-- About -->
<div id="about" class="panel">
 <div class="content">
  <h2>About</h2>
  <p>Some content</p>
  <!-- ... -->
 </div>
</div>
<!-- /About -->

<!-- Contact -->
<div id="contact" class="panel">
 <div class="content">
  <h2>Contact</h2>
  <p>Some content</p>
  <!-- ... -->
 </div>
</div>
<!-- /Contact -->
<!-- Header with Navigation -->
<div id="header">
<h1>Page Transitions with CSS3</h1>
<ul id="navigation">
<li><a id="link-home" href="#home">Home</a></li>
<li><a id="link-portfolio" href="#portfolio">Portfolio</a></li>
<li><a id="link-about" href="#about">About Me</a></li>
<li><a id="link-contact" href="#contact">Contact</a></li>
</ul>
</div>

Css

#header{
 position: absolute;
 z-index: 2000;
 width: 235px;
 top: 50px;
}
#header h1{
 font-size: 30px;
 font-weight: 400;
 text-transform: uppercase;
 color: rgba(255,255,255,0.9);
 text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
 padding: 20px;
 background: #000;
}
#navigation {
 margin-top: 20px;
 width: 235px;
 display:block;
 list-style:none;
 z-index:3;
}
#navigation a{
 color: #444;
 display: block;
 background: #fff;
 background: rgba(255,255,255,0.9);
 line-height: 50px;
 padding: 0px 20px;
 text-transform: uppercase;
 margin-bottom: 6px;
 box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 font-size: 14px;
}
#navigation a:hover {
 background: #ddd;
}
.panel{
 min-width: 100%;
 height: 98%;
 overflow-y: auto;
 overflow-x: hidden;
 margin-top: -150%;
 position: absolute;
 background: #000;
 box-shadow: 0px 4px 7px rgba(0,0,0,0.6);
 z-index: 2;
 -webkit-transition: all .8s ease-in-out;
 -moz-transition: all .8s ease-in-out;
 -o-transition: all .8s ease-in-out;
 transition: all .8s ease-in-out;
}
.panel:target{
 margin-top: 0%;
 background-color: #ffcb00;
}
.content{
 right: 40px;
 left: 280px;
 top: 0px;
 position: absolute;
 padding-bottom: 30px;
}
.content h2{
 font-size: 110px;
 padding: 10px 0px 20px 0px;
 margin-top: 52px;
 color: #fff;
 color: rgba(255,255,255,0.9);
 text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.content p{
 font-size: 18px;
 padding: 10px;
 line-height: 24px;
 color: #fff;
 display: inline-block;
 background: black;
 padding: 10px;
 margin: 3px 0px;
}

Have Fun :)

Creating A Registration Form with jQuery Like FaceBook

noreply@blogger.com (Phoenix Elmasry) — Fri, 11 May 2012 17:29:00 +0000

Facebook is a showcase of great UI design. And as it has become a major part of our lives, it has also raised the bar for web development, pushing developers to meet higher expectations.

This however has a good side – it challenges web developers and designers to better themselves and constantly improve their work.

In this tutorial, we are going to learn from the best, and create a facebook-like sign up form.

The HTML

We start off by laying down the XHTML backbone

<html><body>
<div id="div-regForm">
<div class="form-title">Sign Up</div>
<div class="form-sub-title">It's free and anyone can join</div>
<form id="regForm" action="submit.php" method="post">
<table>
<tbody>
<tr>
<td><label for="fname">First Name:</label></td>
<td><div class="input-container">
<input name="fname" id="fname" type="text" />
</div></td></tr><tr>
<td><label for="lname">Last Name:</label></td>
<td><div class="input-container">
<input name="lname" id="lname" type="text">
</div></td></tr><tr>
<td><label for="email">Your Email:</label></td>
<td><div class="input-container">
<input name="email" id="email" type="text" >
</div></td></tr><tr>
<td><label for="pass">New Password:</label></td>
<td><div class="input-container">
<input name="pass" id="pass" type="password">
</div></td></tr><tr>
<td><label for="sex-select">I am:</label></td>
<td><div class="input-container">
<select name="sex-select" id="sex-select">
<option value="0">Select Sex:</option>
<option value="1">Female</option>
<option value="2">Male</option>
</select></div>
</td></tr><tr>
<td><label>Birthday:</label></td>
<td><div class="input-container">
<select name="month">
<option value="0">Month:</option>
<?=generate_options(1,12,'callback_month')?>
</select>
<select name="day">
<option value="0">Day:</option>
<?=generate_options(1,31)?>
</select><select name="year">
<option value="0">Year:</option>
<?=generate_options(date('Y'),1900)?>
</select></div>
</td></tr><tr><td>&nbsp;</td>
<td><input type="submit" class="greenButton" value="Sign Up" />
<img id="loading" src="img/ajax-loader.gif" alt="working.." />
</td></tr></tbody>
</table></form><div id="error">
&nbsp;</div></div></body></html>

We begin by creating a div container for the form, to which we assign the id div-regForm. In it we are going to position the various form components.
Later we create the headings of the form, properly styled with CSS, as you’ll see later.
Then we have the form itself. A note here would be to remember that the form does not actually get submitted by its own – its all done via AJAX, which means that it doesn’t really matter what you are going to put in the method and action attributes.
Inside the form, we position a table, which will allow us to easily create a grid layout for the form labels and fields. There’s been a debate on using tables in this manner since div layout came to fashion, but mind you that facebook itself is using the same technique, which automatically wins it for me.
Every input field has a respective label element serving as a, you guessed it – a field label. We are even using the for attribute, which means that by clicking the label, you select the textbox on the right.
Next comes a select box and after this we have 3 very interesting lines, that I’ve highlighted for you. We use a neat little PHP function to generate all the option elements that go into the select boxes comprising the selection of a birth date. We will talk about this in a minute.
Later we have the Sign Up button, and a little gif, which is hidden by default and shown only when AJAX requests are in progress.
The last div element is our error container, also hidden by default.

The CSS

In order to convert our plain HTML coding into something eye-catching and facebook-likey, we need some serious styling.

/* Page styles */

body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
 margin:0px;
 padding:0px;
}

body{
 margin-top:20px;
 font-family:Arial, Helvetica, sans-serif;
 color:#51555C;
 height:100%;

 font-size:11px;
}

/* Form styles */

input,select{
 padding:3px;
 color:#333333;

 border:1px solid #96A6C5;
 margin-top:2px;
 width:200px;
 font-size:11px;
}

select{
 width:auto;
 padding:2px;
}

.formline{
 padding:3px;
}

label{
 font-size:11px;
 text-align:right;
}

table{
 width:300px;
}

td{
 font-size:11px;
}

.input-container{
 padding:1px;
}

#div-regForm,.registered{
 border:3px solid #eeeeee;
 padding:15px;

 background:url(img/bg.jpg) repeat-x #cbd4e4;
 color:#203360;

 margin:30px auto 40px auto;
 width:400px;
}

.form-title,
.form-sub-title{
 font-size:20px;

 font-family:"Lucida Grande",Tahoma,Verdana,Arial,sans-serif;
 font-size:20px;
 font-weight:bold;
}

.form-sub-title{
 font-weight:normal;
 padding:6px 0 15px 0;
}

.greenButton{
 width:auto;
 margin:10px 0 0 2px;
 padding:3px 4px 3px 4px;
 color:white;
 background-color:#589d39;
 outline:none;
 border:1px solid #006600;
 font-weight:bold;
}

.greenButton:active{
 background-color:#006600;
 padding:4px 3px 2px 5px;
}

#loading{
 left:10px;
 position:relative;
 top:3px;
 visibility:hidden;
}

#error{
 background-color:#ffebe8;
 border:1px solid #dd3c10;
 padding:7px 3px;
 text-align:center;
 margin-top:10px;
 visibility:hidden;
}

Lines 1-6 are where we reset some of the XHTML elements, to ensure that they appear the same in all browsers.
We continue with styling the body section and start styling the form elements.
The first elements we style are input and select. Select shares most of its styling with input, but also differs in width and padding, so we put an additional set of styles to cover them.
Its mostly widths and paddings down to line 81, where we style our sign up button. We have styles for both the normal, non-pressed state, and the active, pressed state. What the active state does, is that it moves the text label of the button to the bottom – right with one pixel, while darkening the background, which gives the illusion of the button being pressed.
The last two styles are #loading and #error, which select the respective elements by their ID’s and hide them with visibility:hidden by default. We will only show them with jQuery when it is appropriate.

The PHP code

Remember, when a few minutes ago I mentioned about the generate_options PHP function?Here it is

function generate_options($from,$to,$callback=false)
{
 $reverse=false;

 if($from>$to)
 {
  $tmp=$from;
  $from=$to;
  $to=$tmp;

  $reverse=true;
 }

 $return_string=array();
 for($i=$from;$i<=$to;$i++)
 {
 $return_string[]='
 <option value="'.$i.'">'.($callback?$callback($i):$i).'</option>';
 }

 if($reverse)
 {
  $return_string=array_reverse($return_string);
 }

 return join('',$return_string);
}

function callback_month($month)
{
 return date('M',mktime(0,0,0,$month,1));
}

/* and here is how we use it (taken from our XHTML code above):
generate_options(1,31);    // generate days
generate_options(date('Y'),1900); // generate years, in reverse
generate_options(1,12,'callback_month');  // generate months
*/

The first thing you notice in our generate_options function are the parameters $from and $to for the range of options to be generated (days, months and years in our case), and an optional parameter $callback, which is a callback function (more on that in a moment).
Inside the function, we define $reverse as false. If we use the function in the following manner: generate_options(1,31), we are just generating a series of option elements and outputting them in the same order. If we switch the positions of the parameters the output is in reverse order.
This is exactly what we do in line 5. We check if the range of $from and $to is reversed and setting $reverse to true. But in the same time, we are exchanging their values, so that we use the same for construct as in our normal generation. If we haven’t done this we would have had to write another for to do this job.
Next we fill an array called $return_string with the generated options, reversing it if necessary and outputting it as string by joining the array elements.
Remember the $callback I talked about earlier? Here comes its part. On line 18 we check if a $callback was supplied – as in generate_options(1,12,’callback_month’), and if it was, we execute the function and supplying the current $i counter’s value. In practice, it is the same as if we were doing callback_month($i).
Later we have the callback_month function, which we use as a callback in the month generation. It basically takes an integer parameter (our $i above), and returns the month name as string.

The jQuery source

Ok, now that we have completed the form’s looks, we need to be able to send the data over to the PHP backend where it is processed. For this purpose, we are using jQuery, which you can include in page by putting these lines of code in your page’s head section:

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>

The library is automatically included from Google’s CDN. After that you can use jQuery’s ajax method.

Here is the code located in script.js.

$(document).ready(function(){

 // UPDATE: commented out because the submit() method was added below instead
 //$('.greenButton').click(function(){
 // register();

 //});

 $('#regForm').submit(function(e) {

  register();
  e.preventDefault();

 });

});

function register()
{
 hideshow('loading',1);
 error(0);

 $.ajax({
  type: "POST",
  url: "submit.php",
  data: $('#regForm').serialize(),
  dataType: "json",
  success: function(msg){

   if(parseInt(msg.status)==1)
   {
    window.location=msg.txt;
   }
   else if(parseInt(msg.status)==0)
   {
    error(1,msg.txt);
   }

   hideshow('loading',0);
  }
 });

}

function hideshow(el,act)
{
 if(act) $('#'+el).css('visibility','visible');
 else $('#'+el).css('visibility','hidden');
}

function error(act,txt)
{
 hideshow('error',act);
 if(txt) $('#error').html(txt);
}

The first lines of code in $(document).ready get executed after the page has loaded and bind our register() function with the form’s onsubmit event utilizing the preventDefault() method in order to stop the form from being submitted.
And here is the simplicity of the $.ajax method (line 23) – in a few lines of code we send to submit.php by POST all of regForm‘s fields (regForm is the ID of our registration form). We receive a response in JSON format (for more on that later) which gets processed by the function given in success. In this example (lines 30-37) we process the returned object and decide whether to show an error, or redirect to a registered-user-only page.
Later we have the hideshow() function which hides or shows an element on the page (for example the rotating gif animation on our form) and the error function which manages the displaying of errors on the form.
But how do we decide whether the information in the form is correct, and where to redirect the user if it is?

This is done in submit.php:

// we check if everything is filled in

if(strlen($_POST['fname'])==0 || strlen($_POST['lname'])==0 || strlen($_POST['email'])==0 || strlen($_POST['pass'])==0)
{
 die('{status:0,txt:"All the fields are required"}');
}

// is the sex selected?

if(!(int)$_POST['sex-select'])
{
 die('{status:0,txt:"You have to select your sex"}');
}

// is the birthday selected?

if(!(int)$_POST['day'] || !(int)$_POST['month'] || !(int)$_POST['year'])
{
 die('{status:0,txt:"You have to fill in your birthday"}');
}

// is the email valid?

if(!(preg_match("/^[\.A-z0-9_\-\+]+[@][A-z0-9_\-]+([.][A-z0-9_\-]+)+[A-z]{1,4}$/", $_POST['email'])))
 die('{status:0,txt:"You haven\'t provided a valid email"}');

echo '{status:1,txt:"registered.html"}';

Here we check some of the most typical error situations. Every message, that we output, has to be formatted as a javascript object with status and txt properties. They are accessible in our AJAX as msg.txt and msg.status. The main idea here is that errors return a status with a value of 0 and a successful registration returns a status 1, with txt being a URL of a resource accessible only for registered users.
*Note that you’ll have to add code for inserting new database records, creating sessions and a few more error checks on your own, depending on your needs.
And with that our form is finished.

connect and create mysql database with php

noreply@blogger.com (Phoenix Elmasry) — Tue, 01 May 2012 20:23:00 +0000

this is a simple tutorial of how to connect and create mysql database with php.

it's a very good tutorial for beginners.

Create a Connection to a MySQL Database

Before you can access data in a database, you must create a connection to the database.
In PHP, this is done with the mysql_connect() function.

Syntax

mysql_connect(servername,username,password);

Example

In the following example we store the connection in a variable ($con) for later use in the script. The "die" part will be executed if the connection fails:

<?php
$con = mysql_connect("localhost","hassan","abc123");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

// some code
?>

Closing a Connection

The connection will be closed automatically when the script ends. To close the connection before, use the mysql_close() function:

<?php
$con = mysql_connect("localhost","hassan","abc123");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

// some code

mysql_close($con);
?>

Create a Database

The CREATE DATABASE statement is used to create a database in MySQL.

Syntax

CREATE DATABASE database_name

To get PHP to execute the statement above we must use the mysql_query() function. This function is used to send a query or command to a MySQL connection.

Example

The following example creates a database called "my_db":

<?php
$con = mysql_connect("localhost","hassan","abc123");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

if (mysql_query("CREATE DATABASE my_db",$con))
  {
  echo "Database created";
  }
else
  {
  echo "Error creating database: " . mysql_error();
  }

mysql_close($con);
?>

Create a Table

The CREATE TABLE statement is used to create a table in MySQL.

Syntax

CREATE TABLE table_name
(
column_name1 data_type,
column_name2 data_type,
column_name3 data_type,
....
)

We must add the CREATE TABLE statement to the mysql_query() function to execute the command.

Example

The following example creates a table named "Persons", with three columns. The column names will be "FirstName", "LastName" and "Age":

<?php
$con = mysql_connect("localhost","hassan","abc123");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

// Create database
if (mysql_query("CREATE DATABASE my_db",$con))
  {
  echo "Database created";
  }
else
  {
  echo "Error creating database: " . mysql_error();
  }

// Create table
mysql_select_db("my_db", $con);
$sql = "CREATE TABLE Persons
(
FirstName varchar(15),
LastName varchar(15),
Age int
)";

// Execute query
mysql_query($sql,$con);

mysql_close($con);
?>

Important: A database must be selected before a table can be created. The database is selected with the mysql_select_db() function.
Note: When you create a database field of type varchar, you must specify the maximum length of the field, e.g. varchar(15).

Primary Keys and Auto Increment Fields

Each table should have a primary key field.
A primary key is used to uniquely identify the rows in a table. Each primary key value must be unique within the table. Furthermore, the primary key field cannot be null because the database engine requires a value to locate the record.
The following example sets the personID field as the primary key field. The primary key field is often an ID number, and is often used with the AUTO_INCREMENT setting. AUTO_INCREMENT automatically increases the value of the field by 1 each time a new record is added. To ensure that the primary key field cannot be null, we must add the NOT NULL setting to the field.

Example

$sql = "CREATE TABLE Persons 
(
personID int NOT NULL AUTO_INCREMENT,
PRIMARY KEY(personID),
FirstName varchar(15),
LastName varchar(15),
Age int
)";

mysql_query($sql,$con);

CodeSlot

Remove deactivated Profiles from your Facebook friend list

Detecting deactivated profiles

Removing deactivated profiles

A Simple PHP Upload Progress Bar

Server Requirements

create a search form with php and mysql

Youtube Clone Script 2012

Facebook like Expanding Textbox with Jquery.

Max's AJAX Rating System

CodeCanyon - jQuery Message Bar

RockeTtheme - RT Hybrid Theme For Drupal 6 ,7

Colorful 404 Error Template

Submit Form without Refreshing Page with Jquery

Simple Drop Down Menu with Jquery and CSS

SJ ZOO Slideshow Pro For Joomla 2.5

RocketTheme Kirigami 1.1 Joomla 2.5 template

Adf.ly Clone Script Version 1.12 by Amereca

Shake Internet Explorer Window

Adjust Page Background Color With MouseOver Effect

PHP Time Stamp Function.

PHP Login Script with Encryption.

Delicious Database Design: create tables and relationships with SQL

Delicious Database Design: relationships

Delicious Database Design: create tables and relationships with SQL

Creating ZIP File with PHP.

How to create an image caption with jQuery

The HTML

The CSS

The jQuery Javascript

Finally

How To Make Page Transitions with CSS3

Markup

CSS

Creating A Registration Form with jQuery Like FaceBook

The HTML

The CSS

The PHP code

The jQuery source

connect and create mysql database with php

Create a Connection to a MySQL Database

Syntax

mysql_connect(servername,username,password);

Example

Closing a Connection

Create a Database

Syntax

CREATE DATABASE database_name

Example

Create a Table

Syntax

CREATE TABLE table_name ( column_name1 data_type, column_name2 data_type, column_name3 data_type, .... )

Example

Primary Keys and Auto Increment Fields

Example

`The CSS`

`The jQuery Javascript`

CREATE TABLE table_name
(
column_name1 data_type,
column_name2 data_type,
column_name3 data_type,
....
)