Wednesday 31 July 2013

Implode and Explode the data from database in php

Implode means return a string from the elements of an array that means it converts an array into the srting.Explode split a string by string,it change a string into an array. 

      For example consider a simple driving form,


<form name="aform" method="post" action="conn.php" onsubmit="return validation();">
<table border="0px" cellpadding="10" cellspacing="0" id="tbl">
<tr><td align="center" colspan="2">Sample Driving Form</td></tr>
<tr>
     <td>Vehicle</td>
     <td><input type="checkbox" name="vehicle[]" value="bus" />bus
     <input type="checkbox" name="vehicle[]" value="car" />car
     <input type="checkbox" name="vehicle[]" value="bike" />bike</td>
</tr>
<tr><td colspan="2" align="center"><input type="submit" name="submit" value="submit" /></td></tr>
</table>
</form>

Lets see the output

Sample Driving Form
Vehicle bus car bike

Serialize and Unserialize the datas in php

Serialize is used for storing and passing the values without losing their type and structure in PHP. If we need to store or pass the values without losing their type and structure use the function serialize as serialize() . Serialize() converts an array into the string values.

      For example: serialize(array('codetruster', 'php', 'css')) 
      Then this will be output a:3:{i:0;s:11:"codetruster";i:1;s:3:"php";i:2;s:3:"css";}

Unserialize is used to convert the actual data from the Serialized data. unserialize is used to convert the string datas into an array and display it on the browser. To convert the string datas into an array using the function unserialize().


      For example: 
                           array
  0 => string 'codetruster' (length=11)
  1 => string 'php' (length=3)
  2 => string 'css' (length=3)

Tuesday 30 July 2013

Positioning and overlapping an element using CSS

The CSS positioning properties allow us to position an element.Elements can be positioned using the top, bottom, left, and right properties.There are more types of positioning they are static,fixed,absolute and relative.


<div id="containers">
  
    <div id="child"></div>
  
</div>

Monday 29 July 2013

Simple Layout designing using CSS3(Positioning)



Lets see how we have design the layout using css3.In Normal we fix width and height, background,margin,etc to design a simple layout. lets consider that as container ie outer layer.

<div class="container">
<div class="main1">
</div>
</div>

By fixing width,height,background,margin,and padding we will have the output as shown below:

Saturday 27 July 2013

Date Of Birth in php


DATE OF BIRTH
Date Of Birth
In the date of birth we are going to use for loop condition and these values are inserted into database in the form of  $dob=$date1."-".$month1."-".$year1;  Lets see the example for date of birth in php.

Thursday 25 July 2013

Phone Number Validation Using simple Javascript



Type Your Phone No.and Submit[Validation]

  •  


Here let's see the validation for  the phone number using simple javascript.Here is the script for the validation phoneno = /^\d{10}$/ . Using this script we can validate the phone number.Above is the live demo we can check by entering the alphabets and also numbers. By entering the alphabets we get the alert message as Not a valid Phone Number  and by entering the Number we can get the alert message as Your Phone Number have accepted : you can try another.

Thursday 11 July 2013

Like Button using jQuery

Let's see the example for the like button using jquery. Nowadays we are using this type of function in all the websites.Having a simple jquery function we can design the like button for a image or form.

Like Button using jQuery

Image


Like (0)

Index :


<div class="container">
            <h1>Like Button using jQuery</h1>
            
            <div id="item1" class="well">
                <h2>Image</h2>
                <p><img src="Penguins.jpg" width="500" height="300"></p>
                <p><a href="">Like</a> (<span>0</span>)</p>
            </div>
    
        </div>


Style :


<style type="text/css">

.container
{
    width:550px;margin-left:auto;margin-right:auto;zoom:1;
}
a
{
    color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;
}
a:hover
{
    color:#00438a;text-decoration:underline;
}
p
{
    font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;
}
h1
{
     font-weight:bold;color:#ffffff; text-align:center;}h2{font-weight:bold;color:#404040;
}
.well
{
    background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
        </style>

Script :


<script>
        $( function() {
            $( "a" ).click( function( e ) {
                var thisrecord = $( this ).closest( "div" );
                var likes = parseInt( thisrecord.find( "span" ).html() ) + 1;
                thisrecord.find( "span" ).html( likes );
                var previousrecord = "";
                var prevrecordlikes = "";
                do
                {
                    prevrecord = thisrecord.prev( "div" );
                    prevrecordlikes = parseInt( prevrecord.find( "span" ).html() );
                    if ( likes <= prevrecordlikes ) break;
                    thisrecord.after( prevrecord );
                }
                while ( likes >= prevrecordlikes );
                e.preventDefault();
            }); 
        });        
        </script>

Thursday 4 July 2013

Date Calendar(Date picker) using Simple Jquery

Let's see the date calendar function using simple Jquery.Just create a text box by onclicking the text box the datepicker is shown as a slide below. we have to pick up the date click enter.





<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text"  class="search"id="datepicker" /></p>


Wednesday 3 July 2013

HTML Validation for a simple login form

Here let's see the simple validation for a login form using HTML5. Just add the name called 'Required' for the validation. For example in a input text box just add the field required in the tag.Live demo is shown below refer that one.

Index :


<div class="login">
<form action="" method="post">
<strong>Username &nbsp;&nbsp; </strong>
        <input autocomplete="off" class="search" name="username" placeholder="Enter your username" required="" style="width: 220px;" type="text" />
        <br />
<strong>Password &nbsp;&nbsp; </strong>
        <input autocomplete="off" class="search" name="password" placeholder="Enter your password" required="" style="width: 220px;" type="password" />
        <br />
<span style="margin-left: 120px;"><input id="submit" name="submit" style="margin-left: 50px;" type="submit" value="Login" />
</span>
<span style="margin-left: 120px;"><br /></span>
<span style="margin-left: 120px;"><br /></span>
<span style="margin-left: 120px;"><br /></span></form>
</div>


Style :

<style>
.login
{
    box-shadow: 0 0 2px 2px  #CCC;
    border-radius: 15px 15px 15px 15px; 
    padding: 10px; 
    float:left;
    margin:0 auto;
    width:370px;
}
.search
{
    
    padding: 8px 5px;
    margin: 0 0 10px 0;
    width: 238px;
    border: 1px solid #CCC;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 1px 1px #CCC inset;
    -webkit-box-shadow: 0 1px 1px #CCC inset;
    box-shadow: 0 1px 1px #CCC inset;
  }
  #submit{
    padding: 6px 10px;
    color: #fff;
    border: 1px solid #666666;
    border-top-color: #666666;
    border-bottom-color: #666666;
    background: #666666;
    background: -moz-linear-gradient(top, #999999 0%, #CCC 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#CCC));
    background: -webkit-linear-gradient(top, #999999 0%,#CCC 100%);
    background: -o-linear-gradient(top, #999999 0%,#CCC 100%);
    background: -ms-linear-gradient(top, #999999 0%,#CCC 100%);
    background: linear-gradient(top, #999999 0%,#CCC 100%);
    -moz-border-radius: 3px ;
    -webkit-border-radius: 3px;
    border-radius: 3px ;
  }
</style>


Tuesday 2 July 2013

Edit,update & delete Coding in the database using PHP



On click the edit option in the page , it will be go to edit.php page  and by using  id value in the database the values will be fetched from database.

edit.php:

<?php
$s=$_GET['edit'];
if(isset($_GET['edit']))
{
    $varname=mysql_query("select * from tablename where id='$s'",$conn);
    while($row=mysql_fetch_array($varname))
    {
       $varname1=$row['databasename'];
       echo '$varname1';
    }
}
?>



After by editing the values we have to update the form. For that we will have the following coding.


Update code:


$s=$_GET['edit'];
if(isset($_POST['update'])

{
    $varname=$_POST['fieldname'];
    $update=mysql_query("update tablename set databasename='$varname'where id='$s'");
    if($update)
    {
        echo"<script>alert('updated')</script>";
}
}


On click the delete option in the page , it will automatically delete by using  id value in the database and return to the view page.

delete code:

<?php
s=$_GET['delete'];
if(isset($_GET['delete']))
{
    $delete=mysql_query("delete from upload where id='$s'")or die(mysql_error());
    }
?>

Coding for viewing the values by fetching from the database


Here is the coding for viewing the values in your designing page by fetching the values from the database.

<table border="1px" cellpadding="10" cellspacing="0" width="50">
<tr>
     <th scope="col">S.No</th>
     <th scope="col">Image</th>
     <th scope="col">Edit</th>
     <th scope="col">Delete</th>
</tr>
<tr>
<?php
//include the connection code here
$select=mysql_query("select * from tablename"); 
$x=1;
while($row=mysql_fetch_array($select))
{
    echo "<td>".$x++."</td>";
    echo "<td><img src='foldername/".$row['name']."' width='50px' height='50px' alt=".$row['name']."</td>";
    echo "<td><a href='edit.php?edit=".$row['id']."'>Edit</a></td>";
    echo "<td><a href='delete.php?delete=".$row['id']."'>Delete</a></td>";
    echo "</tr>";
    
}
?>
</table>

Coding to connect to MySQL database using PHP


Before you go to your MySQL database, you must know how to establish a connection to MySQL from inside a PHP script. This blog will help you to how to connect  your database easily.

<?php
//connect to a database
$hostname="localhost";
$username="Type your username";
$pass="Type your password";
$conn=mysql_connect($hostname,$username,$pass)or die (mysql_error());
echo 'connected to database';
?>

Now you have connected to a database, then we have to select a database.Let's assume the database name is called 'codetruster'. To start working in this database, you'll need the mysql_select_db() function:


<?php
//select to a database
$seletc_db=mysql_select_db("codetruster",$conn) or die (mysql_error());
echo 'selected database';
?>


Let's see the example to create 'codetruster' database  on your MySQL server. For that  you have to run the following script:


CREATE DATABASE 'codetruster';
CREATE TABLE 'web'  (
   `id` int UNIQUE NOT NULL,
   `name` varchar(40),
   `design` varchar(50),
   PRIMARY KEY(id)
);
INSERT INTO web VALUES(1,'php','nice');
INSERT INTO web VALUES(2,'js','good');
INSERT INTO web VALUES(3,'ajax','neat');