Author Archives: prasad k

About prasad k

i m php developer, web designer.

HTML5 Datalist

Datalist Tag is an input element, which is used as both dropdown and textbox element. The main advantage of datalist is autocomplete option.

Syntax for datalist will looks like the combination of input element textbox and dropdown.

All options have to be inside the datalist and datalist’s ID should be declared as input element list parameter.

 

Datalist HTML Coding

[code type=css]

<input list=”browsers”>
<datalist id=”browsers”>
<option value=”Alpha”>
<option value=”Beta”>
<option value=”Gamma”>
<option value=”Tera”>
<option value=”Hexa”>
</datalist>

[/code]

 

Example for Datalist


HTML5 Progress Bar

HTML5 Progress Bar will be used to minimize the html coding. <progress> tag is used to make progress bar.

Below is the progress bar syntax and example. The parameter max is the maximum value for the progress bar and parameter value is the percentage out of maximum value.

 

 

[code type=html]

<progress value=”40″ max=”100″></progress>

[/code]

Giving appearance of progress[value] as none will able to give css properties to progress bar and progress value.
-webkit-appearance: none; 

CSS Code for Progress Bar

[code type=css]

<style type=”text/css”>

progress[value]
{
width: 600px;
height: 120px;
-webkit-appearance: none;
}
/*** Progress Bar ****/
progress[value]::-webkit-progress-bar
{
background-color: #900;
}
progress[value]::-moz-progress-bar
{
background-color: #900;
}

/*** Progress Value ****/
progress[value]::-webkit-progress-value
{
background-color: #ccc;
}
progress[value]::-moz-progress-value
{
background-color: #ccc;
}

</style>

[/code]

Simple Paypal Payment Integration Tutorial

All of us know that Paypal is an one of the easiest way of electronic payment. Here is the Simple Paypal Payment Integration Tutorial.
Sandbox URL – https://www.sandbox.paypal.com/cgi-bin/webscr
Actual URL – https://www.sandbox.paypal.com/cgi-bin/webscr

 

 

Paypal Payment Code

[code type=html]
<html>
<body>











</body>
</html>
[/code]

<input type=”hidden” name=”item_name” value=”Test Product”>

Specifies the item name of the product, for which are going to pay. If the above line is not specified then item name have to be given by bill payer while payment.

<input type=”hidden” name=”amount” value=”15″>

Specifies the item price. If the above line is not specified then item price have to be given by bill payer while payment.

<input type=”hidden” name=”no_shipping” value=”2″>

Specifies the number of items. If the above line is not specified then number of items have to be given by bill payer while payment.

PAYPAL_ID

Paypal id of the amount receiver.

CANCEL_URL

The URL, which will be redirected to when the user cancels the payment.

RETURN_URL

The URL, which will be redirected to when the payment completed.

Introduction to Google Charts, jQuery Chart

Google has introduced its own jquery charts coding, which is easy to implement and fast loading. Have a look at this Google Chart Options. Google Charts having 20+ Chart type like Area Charts, Bar Charts, Calendar Charts, Column Charts, Geo Charts, Line Charts, Pie Charts, etc. Here in the below coding, three columns are available Year, Sales and Expense.
Below Coding will represent Line Chart, Chart type is mention in this line

var chart = new google.visualization.LineChart(document.getElementById(‘chart_div’));

 

Sample Google Chart Coding.

[code type=html]

<html>
<head>
<script type=”text/javascript” src=”https://www.google.com/jsapi”></script>
<script type=”text/javascript”>
google.load(“visualization”, “1”, {packages:[“corechart”]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[‘Year’, ‘Sales’, ‘Expenses’],
[‘2008’, 130, 590],
[‘2009’, 380, 640],
[‘2010’, 530, 740],
[‘2011’, 430, 840],
[‘2012’, 1230, 940]
]);

var options = {
title: ‘Company Performance’
};

var chart = new google.visualization.LineChart(document.getElementById(‘chart_div’));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id=”chart_div” style=”width: 900px; height: 500px;”></div>
</body>
</html>
[/code]

Best 5 CSS Table Design

Table design will be a primary object, when data are displayed in list (using table). It is easy to list the values from database using HTML Tables. Here is some of the Table design. Table design will be a primary object, when data are displayed in list (using table). It is easy to list the values from database using HTML Tables. Here is some of the Table design.

Table 1

[code type=css]

S No First Name Last Name Email
1 Kavin Kumar kavin@email.com
2 Kavin Kumar kavin@email.com
3 Kavin Kumar kavin@email.com
4 Kavin Kumar kavin@email.com
5 Kavin Kumar kavin@email.com

.table1 thead tr
{
width: 600px;
border-collapse:collapse;
background: #F36;
color: #fff;
border: none;
}
.table1 thead td { padding: 8px 16px; }
.table1 tr { border-bottom: 1px solid #CACACA; }
.table1 td { padding: 5px 20px }
[/code]

S No First Name Last Name Email
1 Kavin Kumar kavin@email.com
2 Kavin Kumar kavin@email.com
3 Kavin Kumar kavin@email.com
4 Kavin Kumar kavin@email.com
5 Kavin Kumar kavin@email.com

Table 2

[code type=css]

S No First Name Last Name Email
1 Kavin Kumar kavin@email.com
2 Kavin Kumar kavin@email.com
3 Kavin Kumar kavin@email.com
4 Kavin Kumar kavin@email.com
5 Kavin Kumar kavin@email.com

.table2 { border: 1px solid #F36; }
.table2 thead tr
{
background: #F36;
color: #fff;
border: none;
}
.table2 thead td { padding: 8px 16px; }
.table2 tr:nth-child(2n) { background: #E4E4E4; }
.table2 td { padding: 5px 20px }
[/code]

S No First Name Last Name Email
1 Kavin Kumar kavin@email.com
2 Kavin Kumar kavin@email.com
3 Kavin Kumar kavin@email.com
4 Kavin Kumar kavin@email.com
5 Kavin Kumar kavin@email.com

Table 3

[code type=css]

S No First Name Last Name Email
1 Kavin Kumar kavin@email.com
2 Kavin Kumar kavin@email.com
3 Kavin Kumar kavin@email.com
4 Kavin Kumar kavin@email.com
5 Kavin Kumar kavin@email.com

.table3 thead tr
{
background: #F36;
color: #fff;
border: none;
}
.table3 thead td { padding: 8px 16px; border:none!important; }
.table3 tr:nth-child(2n) { background: #E4E4E4; }
.table3 tr td:nth-child(2n) { border-left: 1px solid #BEBEBE; border-right: 1px solid #BEBEBE; }
.table3 tr td:last-child { border-right: none; }
.table3 td { padding: 5px 20px; }
[/code]

S No First Name Last Name Email
1 Kavin Kumar kavin@email.com
2 Kavin Kumar kavin@email.com
3 Kavin Kumar kavin@email.com
4 Kavin Kumar kavin@email.com
5 Kavin Kumar kavin@email.com

Table 4

[code type=css]

S No First Name Last Name Email
1 Kavin Kumar kavin@email.com
2 Kavin Kumar kavin@email.com
3 Kavin Kumar kavin@email.com
4 Kavin Kumar kavin@email.com
5 Kavin Kumar kavin@email.com

.table4 thead tr
{
background: #F36!important;
color: #fff;
border: none;
}
.table4 thead td
{
background: #F36!important;
padding: 8px 16px;
border:none!important;
}
.table4 tr { border-bottom: 1px solid #CACACA; }
.table4 tr td:nth-child(2n) { background: #F0F0F0; }
.table4 tr td:last-child { border-right: none; }
.table4 td { padding: 5px 20px; }
[/code]

S No First Name Last Name Email
1 Kavin Kumar kavin@email.com
2 Kavin Kumar kavin@email.com
3 Kavin Kumar kavin@email.com
4 Kavin Kumar kavin@email.com
5 Kavin Kumar kavin@email.com

Table 5

[code type=css]

S No First Name Last Name Email
1 Kavin Kumar kavin@email.com
2 Kavin Kumar kavin@email.com
3 Kavin Kumar kavin@email.com
4 Kavin Kumar kavin@email.com
5 Kavin Kumar kavin@email.com

.table5 thead tr
{
background: #F36!important;
color: #fff;
border: none;
}
.table5 thead td
{
background: #F36!important;
padding: 8px 16px;
border:none!important;
}
.table5 tr { border-bottom: 1px solid #CACACA; }
.table5 tr:hover { border: 2px solid #F36; }
.table5 tr td:nth-child(2n) { background: #F0F0F0; }
.table5 tr td:last-child { border-right: none; }
.table5 td { padding: 5px 20px; }

[/code]

S No First Name Last Name Email
1 Kavin Kumar kavin@email.com
2 Kavin Kumar kavin@email.com
3 Kavin Kumar kavin@email.com
4 Kavin Kumar kavin@email.com
5 Kavin Kumar kavin@email.com
Category: CSS

How to Create Widget in WordPress using PHP Code

Widget in wordpress will be more helpful for non-developer, widget can be create easily with simple steps. Widgets are the important advantage in wordpress, . Here is the tutorial for how to create widget in wordpress using php code.

function freeze_plugin() – this function will create the widget name as “Freeze Widget”

function form() – this function will be used to display the content to Admin area

function widget() – this function will be used to display the content to visitor area

 

Add the below coding into your functions.php

[code type=php]

class freeze_plugin extends WP_Widget
{
function freeze_plugin()
{
parent::WP_Widget(false, $name = __(‘Freeze Widget’, ‘freeze_plugin’) );
}
function form()
{
echo “<b>This is sample widget</b>”;
}
function widget()
{
echo “<b>This is sample widget</b>”;
}
}
add_action(‘widgets_init’, create_function(”, ‘return register_widget(“freeze_plugin”);’));

[/code]

 

Display Previous Next Post link at Bottom of Post in WordPress

Displaying previous and next post link at the bottom of the post will make the user to click on that link and check other posts. It also increases the traffic rate. Here is the tutorial for how to display previous next post link at Bottom of Post in wordpress.
This is done by simple coding to be placed in functions.php and style.css and not by installing plugins

 

WordPress Admin Panel -> Appearance -> Editor -> functions.php
Place the following code inside functions.php file

functions.php

[code type=php]

function next_prev_link($link) {
if(is_single())
{
$prev_post = get_previous_post();
if (!empty( $prev_post ))
{
$link .= ‘<a href=”‘.get_permalink($prev_post->ID).'” class=”prev”><< ‘.$prev_post->post_title.'</a>’;
}

$next_post = get_next_post();
if (!empty( $next_post ))
{
$link .= ‘<a href=”‘.get_permalink( $next_post->ID ).'” class=”next”>’.$next_post->post_title.’ >></a>’;
}
}
return $link;
}
add_filter(‘the_content’, ‘next_prev_link’);

[/code]

 

WordPress Admin Panel -> Appearance -> Editor -> style.css
Place the following code inside style.css file

style.css

[code type=php]
.prev, .next
{
display: block;
}
.prev
{
float: left;
}
.next
{
float: right;
}
[/code]

Enquiry Page with IP and Location Tracker Using PHP

Enquiry page in a website is indeed, enquiry page is the very shortest way for visitor to communicate with the website team. Tracking the location and IP address of the visitor, who send enquiry may help website team, where is the visitor is from?. Here is the tutorial for how to track visitor from enquiry page using php.

 

Enquiry Page with IP and Location Tracker Using PHP jQuery

Enquiry Page with IP and Location Tracker Using PHP jQuery

 

NOTE: Any type of validation is not included in this script

PHP Code

[code type=php]

<html>
<head>
<?php
require_once(“ip.codehelper.io.php”);
require_once(“php_fast_cache.php”);

if(isset($_POST[‘submit’]))
{
$_ip = new ip_codehelper();
$real_client_ip_address = $_ip->getRealIP();
$visitor_location = $_ip->getLocation($real_client_ip_address);

$guest_ip = $visitor_location[‘IP’];
$guest_country = $visitor_location[‘CountryName’];
$guest_city = $visitor_location[‘CityName’];
$guest_state = $visitor_location[‘RegionName’];

$name=mysql_real_escape_string($_POST[‘name’]);
$email=mysql_real_escape_string($_POST[’email’]);
$msg=mysql_real_escape_string($_POST[‘descr’]);

$to=”YOURMAIL@MAIL.COM”;
$subject = “Enquiry Mail”;
$headers .= “MIME-Version: 1.0\r\n”;
$headers .= “Content-Type: text/html; charset=ISO-8859-1\r\n”;

$message = ‘<html><body>’;
$message.='<h1>Enquiry Mail</h1>’;
$message.='<div style=”border: 10px solid #0095DE; padding: 10px;”><br/>’;
$message.='<table><tr><td><b>From</b></td><td>’.$name.'</td></tr>’;
$message.='<tr><td><b>Email</b></td><td>’.$email.'</td></tr>’;
$message.='<tr><td><b>Message</b></td><td>’.$msg.'</td></tr></table>’;
$message.=’__________________________________________________<br/><br/><h2><b>Visitor Details</h2>’;
$message.='<div style=”margin:10px 0;”><b>IP Address</b>&nbsp;&nbsp;&nbsp;&nbsp;’.$guest_ip.'</div>’;
$message.='<div style=”margin:10px 0;”><b>Country</b>&nbsp;&nbsp;&nbsp;&nbsp;’.$guest_country.'</div>’;
$message.='<div style=”margin:10px 0;”><b>State</b>&nbsp;&nbsp;&nbsp;&nbsp;’.$guest_state.'</div>’;
$message.='<div style=”margin:10px 0;”><b>City</b>&nbsp;&nbsp;&nbsp;&nbsp;’.$guest_city.'</div></div>’;
$message.='</body></html>’;

if(mail($to,$subject,$message,$headers))
{
echo “<script type=’text/javascript’>alert(‘Thank you, we have received your enquiry.’);</script>”;
}
}
?>
</head>
<body>
<form method=”post” action=””>

<b>Name</b>
<input type=”text” name=”name” id=”name3″ />

<b>Email</b>
<input type=”text” name=”email” id=”email” />

<textarea></textarea>

<input type=”submit” name=”submit” id=”submit”/>
</form>
</body>
</html>

[/code]

Simple Pagination Using PHP MySQL

Webpage with more number of rowed data will make the page lengthier, pagination makes the long rows into small number of rows and remaining in next pages. Pagination in a webpage will make the webpage structure more crispy. Here is the tutorial about how to make simple pagination using php mysql

  

 

 

PHP Code

[code type=php]

<html>
<body>
<div id=”content”>
<?php
$query1=mysql_connect(“localhost”,”root”,””);
mysql_select_db(“freeze_demo”,$query1);

$start=0;
$limit=10;

if(isset($_GET[‘id’]))
{
$id=$_GET[‘id’];
$start=($id-1)*$limit;
}

$query=mysql_query(“select * from pagination LIMIT $start, $limit”);
echo “<ul>”;
while($query2=mysql_fetch_array($query))
{
echo “<li>”.$query2[‘text1′].”</li>”;
}
echo “</ul>”;
$rows=mysql_num_rows(mysql_query(“select * from pagination”));
$total=ceil($rows/$limit);

if($id>1)
{
echo “<a href=’?id=”.($id-1).”‘ class=’button’>PREVIOUS</a>”;
}
if($id!=$total)
{
echo “<a href=’?id=”.($id+1).”‘ class=’button’>NEXT</a>”;
}

echo “<ul class=’page’>”;
for($i=1;$i<=$total;$i++)
{
if($i==$id) { echo “<li class=’current’>”.$i.”</li>”; }

else { echo “<li><a href=’?id=”.$i.”‘>”.$i.”</a></li>”; }
}
echo “</ul>”;
?>
</div>
</body>
</html>
[/code]

 

 

CSS Code

[code type=css]

#content
{
width: 900px;
margin: 0 auto;
font-family:Arial, Helvetica, sans-serif;
}
.page
{
float: right;
margin: 0;
padding: 0;
}
.page li
{
list-style: none;
display:inline-block;
}
.page li a, .current
{
display: block;
padding: 5px;
text-decoration: none;
color: #8A8A8A;
}
.current
{
font-weight:bold;
color: #000;
}
.button
{
padding: 5px 15px;
text-decoration: none;
background: #333;
color: #F3F3F3;
font-size: 13PX;
border-radius: 2PX;
margin: 0 4PX;
display: block;
float: left;
}

[/code]

 

How to Display Tags in top of the Post WordPress

In wordpress, the single page (i.e., full post/article page) will shown the full detail about the post like date published, comments, author, title, content and some themes will show the tags at the bottom of the post. Displaying the tags at top of the post will reduce the bounce rate and make user to go the tags, which are displayed. Here is the tutorial for how to display tags in top of the post wordpress

 

Display Tags in top of the Post WordPress

Display Tags in top of the Post WordPress

 

PHP Code (post-single.php)

Add the following code into post-single.php

[code type=php]

<?php
if(get_the_tags()) {
?>
<div class=”tags-box”>
<div class=”tags-box-name”>Tagged in</div>
<?php the_tags(‘<ul><li>’, ‘</li><li>’, ‘</li></ul>’); ?>
</div>
<?php
}
?>

[/code]

 

CSS Code (style.css)

Add the following code into style.css

[code type=css]

.tags-box
{
width: 100%;
}
.tags-box-name
{
font-size: 14px;
margin: 0 2px 0 0px;
color: #3D3D3D;
text-decoration: none;
float: left;
display: block;
padding: 2px 2px 2px 0px;
}
.tags-box ul
{
list-style: none;
padding: 0;
margin: 5px 0;
}
.tags-box ul li
{
display: inline-block;
}
.tags-box ul li a
{
display: block;
padding: 1px 13px;
background: #FD6B47;
margin: 0 2px 0 0px;
color: #FFF;
text-decoration: none;
font-size: 14px;
}

[/code]