Tutorials for developers

Tuesday 26 July 2016

Multiple Files uploading using drag and drop

Step 1:- Create a php project.

Step 2:- Put this code in to your index file or any other file.

<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/plupload/plupload.full.min.js"></script>
<style type="text/css">
.uploadVedioDiv {
border: 1px dashed rgba(0, 0, 0, 0.3);
background: #f5f5f5;
width: 16%;
text-align: center;
margin: auto;
height: 110px;
cursor: pointer;
padding: 46px;
margin-top: 20px;
}
.title{
font-size: 25px;
font-weight: bold;
margin-top: 50px;
text-align: center;
position: relative;
}
</style>
</head>
<body>
<div class="title">Please select or drop a file for start uploading</div>
<div class="uploadVedioDiv" id="uploadVedioDiv">
<h5>Drop file or click here to upload file</h5>

</div>
<div id="upload_container">

</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
uploading("upload.php","uploadVedioDiv","uploadVedioDiv");
});
var uploader;
function uploading(url,btnid,dropableid){
uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : btnid, // you can pass an id...
drop_element : dropableid,
container: document.getElementById('upload_container'), // ... or DOM Element itself
url : url,
flash_swf_url : '../js/Moxie.swf',
silverlight_xap_url : '../js/Moxie.xap',
filters : {
max_file_size : '10mb',
mime_types: [
{title : "Image files", extensions : "pdf,jpg,png"}
]
},
init: {
PostInit: function() {
//document.getElementById('filelist').innerHTML = '';
// document.getElementById('startupload').onclick = function() {
// alert(1)
// uploader.start();
// return false;
// };
},
BeforeUpload: function(up, file) {

},
FilesAdded: function(up, files) {
uploader.start();
},
FileUploaded: function(up, file,object) {

},
UploadProgress: function(up, file) {
//document.getElementById(file.id).getElementsByClassName('progressbar')[0].innerHTML = '<span style="font-weight: bold; color: green; font-size: 20px;">' + file.percent + "%</span>";
},
Error: function(up, err) {
document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message));
}
}
});
uploader.init();
}
</script>

</html>

Step 3:- Create another php file and name it to upload.php

Here is your php code which will move your selected files to server

<?php

/*From this code your your file will be move to your specifed folder*/

$targetfolder = "uploads/";

$file_name = $_FILES['file']['name'];

$fullpath = $targetfolder . $file_name;

if(move_uploaded_file($_FILES['file']['tmp_name'], $fullpath)){

echo 'Files Uploaded Successfully';

}else{

'Some thing went wrong';

}

Your code is ready for uplaod multiples on server with drag and drop functionality.

Plupload is great plugin for multiple file uploading using drag and drop.

Happy coding!!

Friday 3 April 2015

Are you new in Jquery Ajax. Not a problem.

Today I will tell you How to fetch data from database using Jquery Ajax.

This tutorial is for beginners. In this tutorial I will show you how to retreive data from database using Jquery Ajax in your php with out refreshing the webpage.
we need to create two php files, In first file our html php code present from where we do ajax request. in second file we process the ajax request and return the result to first page.
Step 1:- Create a school.php file and put this code in it.

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>function getdetails(){
var name = $('#name').val();
var rno = $('#rno').val();
$.ajax({
type: "POST",
url: "details.php",
data: {fname:name, id:rno}
}).done(function( result ) {
$("#msg").html( " Address of Roll no " +rno +" is "+result );
});
}
</script>
</head>
<body>
<table>
<tr>
<td>Your Name:</td>
<td><input type="text" name="name" id="name" /><td>
</tr>
<tr>
<td>Roll Number:</td>
<td><input type="text" name="rno" id="rno" /><td>
</tr>
<tr>
<td></td>
<td><input type="button" name="submit" id="submit" value="submit" onClick = "getdetails()" /></td>
</tr>
</table>
<div id="msg"></div>
</body>
</html>

In above code we are taking name and roll no of student and pass this to details.php using jquery ajax.
Step 2:- Create details.php and put the below code in it.

<?php
$name = $_POST['fname'];
$rno = $_POST['id'];

$con = mysql_connect("localhost","root","");
$db= mysql_select_db("school", $con);
$sql = "SELECT address from students where name='".$name."' AND rno=".$rno;
$result = mysql_query($sql,$con);
$row=mysql_fetch_array($result);
echo $row['address'];
?>

In above code we are getting address of student with help of his name and roll number.

create database named "school" and table name "students". table student contain the fields name, rno and address.

"We can aslo do this with help of normal coding but the difference here is we are getting result without refreshing the page and that's the magic of jquery Ajax."

Enjoy the code

Wednesday 19 February 2014

How to bind table and dropdown on selected index change using ajax jquery in php

Today I will tell you How to Bind table and dropdown on selected index change from database using Jquery Ajax.

This tutorial is for beginners. In this tutorial I will show you how to retreive data from database using Jquery Ajax in your php with out refreshing the webpage.

we need to create three php files, In first file our html code present from where we do ajax request. in second file we process the ajax request and return the result to first page and in the third file we create the database connection.

Step 1:- Create a database name "userdatabase"

Step 2:- Run this query on your database

CREATE TABLE IF NOT EXISTS `tbluser` (
`ID` int(11) NOT NULL AUTO_INCREMENT,
`UserName` varchar(100) NOT NULL,
`Userid` varchar(25) NOT NULL,
`Password` varchar(25) NOT NULL,
`Status` int(11) NOT NULL,
PRIMARY KEY (`ID`),
UNIQUE KEY `Userid` (`Userid`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=32 ;

INSERT INTO `tbluser` (`ID`, `UserName`, `Userid`, `Password`, `Status`) VALUES
(31, 'zain', 'khan', 'asdasd', 1),
(30, 'Owais', 'asher', 'asas', 1),
(27, 'raheel', 'raheel', 'asdasd', 2);

Step 3:- Create a db_connect.php file and put this code in it.

<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if(! $conn )
{
die('Could not connect: ' . mysql_error());
}

mysql_select_db('userdatabase');

?>

Step 4:- Create a index.php file and put this code in it.

<?php

include("db_connect.php");

$(document).ready(function(){

$.ajax({

type:"post",

url: "getdata.php",

success: function(data) {

$("#ddlName").html(data);

}

});

$("#ddlName").change(function(){

var val = $("#ddlName").val();

$.ajax({

type:"post",

url: "getdata.php?ID="+val+"",

success: function(data) {

console.log(data)

$("#ddlLname").html(data);

}

});

$("#submit").click(function(){

$.ajax({

url: 'getdata.php?get=1',

type: 'post',

success: function(response) {

$("#get").html(response);

}

});

</script>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

ID: <select name="ddlName" id ="ddlName" style="width:105px;margin-left: 58px;">

</select>

</br></br>

User Name: <select name="ddlLname" id ="ddlLname" style="width:105px">

<option value="">--Select--</option>

</select>

</div>

</body>

</html>

Step 5:- Create a getdata.php file and put this code in it.

<?php

include("db_connect.php");

if((isset($_REQUEST['ID'])) && (!empty($_REQUEST['ID'])))

{

BindDropdownByid();

}

if((!isset($_REQUEST['ID'])) && (!isset($_REQUEST['get'])))

{

BindDropdown();

}

if((isset($_REQUEST['get'])) && (!empty($_REQUEST['get'])))

{

BindTable();

}

function BindDropdown()

{

$result = mysql_query("select * from tbluser");

while($school = mysql_fetch_array($result)){

echo"<option value=".$school['ID'].">".$school['ID']."</option>";

}

function BindDropdownByid()

{

$result = mysql_fetch_array(mysql_query("select * from tbluser where ID = ".$_GET['ID'].""));

echo"<option value=".$result['ID'].">".$result['UserName']."</option>";

}

function BindTable()

{

echo "<table id='resultTable' border='1' style='margin-top: 3px;'>

<tr>

<th>First Name</th>

<th>Status</th>

</tr>";

$result = mysql_query("select * from tbluser");

while($row = mysql_fetch_array($result)) {

echo "<tr>";

echo "<td>".$row['ID']."</td>";

echo "<td>".$row['UserName']."</td>";

echo "<td>".$row['Userid']."</td>";

echo "<td>".$row['Status']."</td>";

echo "</tr>";

}

echo "</table>";

}

In first dropdown have all IDs and the second drop down fill with respect to User ID.

On button click it Bind all the table with out refreshing your page.

your result will look like this

Tuesday 18 February 2014

prettyphoto jquery plugin

“prettyPhoto”

“prettyPhoto prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox.”

“It is very easy to setup, yet very flexible if you want to customize it a bit”

Step1:- Create a file demo.html and put the below code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Pretty photo Jquery</title>

* { margin: 0; padding: 0; }

body {

background: #282828;

font: 62.5%/1.2 Arial, Verdana, Sans-Serif;

padding: 0 20px;

}

h1 { font-family: Georgia; font-style: italic; margin-bottom: 10px; }

h2 {

font-family: Georgia;

font-style: italic;

margin: 25px 0 5px 0;

}

p { font-size: 1.2em; }

ul li { display: inline; }

.wide {

border-bottom: 1px #000 solid;

width: 4000px;

}

.fleft { float: left; margin: 0 20px 0 0; }

.cboth { clear: both; }

#main {

background: #fff;

}

</style>

</head>

<body>

</ul>

</div>

</body>

$(document).ready(function(){

$("area[rel^='prettyPhoto']").prettyPhoto();

$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'light_square',slideshow:3000, autoplay_slideshow: true});

$(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true});

$("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({

custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',

changepicturecallback: function(){ initialize(); }

});

$("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({

custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',

changepicturecallback: function(){ _bsap.exec(); }

});

</script>

</html>

Download the complete demo and css and js file here

Download

Note: Never forget to put all all js, css and html file in the same location.

Send Registration email using .net

Html format for sending registration mail using SMTP server C#

Step1:- Create a file mail.aspx and put the code on mail.aspx.cs

Include name spaces

using System.Net.Mail;

using
System.Web.Mail;

copy the code and paste it on button click event.

protected void btnSubmit_Click(object sender, EventArgs e)

{

// Create a new message

var mail = new MailMessage();

// Set the to and from addresses.

// The from address must be your GMail account

mail.From = new MailAddress("example@gmail.com");

mail.To.Add(new MailAddress(to));

// Define the message

mail.Subject = “Thank you for register at devssolution.com”;

mail.IsBodyHtml =true;

mail.Body = "<br/><div " +

"style=color: rgb(69, 69, 69); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px;" +

"font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal;" +

"orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto;" +

"word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); width: 560px; " +

"padding-top: 50px; height: 100px; margin: 0px auto;>" +

"<a href=http://devssolution.blogspot.com/><img alt=Ads height=53 " +

"src=www.devssolution.blogspot.com/images/logo.png " +

"style=border: none; display: block; /></a></div>" +

"<table bgcolor=#ffffff border=0 " +

"cellpadding=0 cellspacing=0 " +

"style=padding: 0px; display: table; border-collapse: separate; color: rgb(69, 69, 69);" +

"font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; font-style: normal; " +

"font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto;" +

"text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; " +

"width=100%>" +

"<tbody style=width: 870px;>" +

"<tr" +

"style=display: table-row; vertical-align: inherit;>" +

"<td " +

"style=display: table-cell; border-spacing: 2px;>" +

" </td>" +

"<td " +

"style=display: table-cell; border-spacing: 2px; width: 536px;>" +

"<table border=0 cellpadding=0 " +

"cellspacing=0 " +

"style=padding: 0px; display: table; border-collapse: collapse; border: none; " +

"width=100%>" +

"<tbody style=width: 536px;>" +

"<tr " +

"style=display: table-row; vertical-align: inherit;>" +

"<td height=25 " +

"style=display: table-cell; border-spacing: 2px;>" +

"</td>" +

"</tr>" +

"<tr " +

"style=display: table-row; vertical-align: inherit;>" +

"<td " +

"style=display: table-cell; border-spacing: 2px; width: 536px;>" +

"<table " +

"style=padding: 0px; display: table; border-collapse: separate;" +

"border-left-width: 1px; border-left-style: solid; " +

"border-left-color: rgb(204, 204, 204); border-right-width: 1px; " +

"border-right-style: solid; border-right-color: rgb(204, 204, 204);" +

"width: 536px; height: 200px;>" +

"<tbody style=width: 534px;>" +

"<tr " +

"style=display: table-row; vertical-align: inherit;>" +

"<td " +

"style=display: table-cell; border-spacing: 2px;>" +

"<div " +

"style=padding: 0px 40px; width: 448px;>" +

"<p style=margin: 0px; padding: 0px; display: block;" +

"line-height: normal; font-style: normal; " +

"font-variant: normal; font-size: 15px; font-family: Arial;" +

"font-weight: bold; color: rgb(102, 102, 102);>"+

"Dear Valued Customer " + "</p>" +

"" +

"<p style=margin: 0px; padding: 0px; display: block;" +

"line-height: 14px; font-style: normal; font-variant: normal;" +

"font-weight: normal; font-size: 12px; font-family: Arial;" +

"color: rgb(102, 102, 102);>" +

"Thank you for using devssolution! <br/>" +

"<span class=Apple-converted-space> </span><br/>Following are the login details for your account on Adssledeger" +

//+" We have forwarded your query to the concerned department.<br/> Within 48 hours , a Customer Relationship Officer will contact you.</p>" +

"<br /><br /><strong>Login ID:" + " " + name +

"</strong><br><strong>Password:" + " " + passwords + "</strong><span " +

"class=Apple-converted-space> </span><br />" +

"<br />" +

"Thanks again and we look forward to serve you."+

"<p style=margin: 0px; padding: 0px; display: block; line-height: normal;>" +

"<em><strong >The DevsSolution Team</strong></em><br />" +

"</p>" +

"</div>" +

"</td>" +

"</tr>" +

"</tbody>" +

"</table>" +

"</td>" +

"</tr>" +

"<tr style=display: table-row; vertical-align: inherit;>" +

"<td style=display: table-cell; border-spacing: 2px;>" +

"<div>" +

"</div>" +

"</td>" +

"</tr>" +

"</tbody>" +

"</table>" +

"<div " +

"style=border-top-width: 1px; border-top-style: solid; border-top-color: rgb(204, 204, 204);" +

"padding: 10px 10px 10px 40px; text-align: center; font-style: normal; font-variant: normal;" +

"font-weight: normal; font-size: 11px; line-height: normal; font-family: Arial; color: rgb(153, 153, 153);" +

"width: 400px; height: 120px; margin: 40px auto 0px;>" +

"devssolution. | 1 Richmond Street New Brunswick | New Jersey 08901<br />" +

"<a href=devssolution.blogspot.com>www.devsolution.com</a></br>" +

"<div " +

"style=background-image: url(images/logo.png); height: 248px; background-position: initial initial; background-repeat: initial initial;>" +

" </div>" +

"</td>" +

"</tr>" +

"</tbody>" +

"</table>";;

// Create a new Smpt Client using Google's servers

var mailclient = new SmtpClient();

mailclient.Host = "smtp.gmail.com";

mailclient.Port = 587;

// This is the critical part, you must enable SSL

mailclient.EnableSsl = true;

// Specify your authentication details

mailclient.Credentials = new System.Net.NetworkCredential(

"YOUR GMAIL USERNAME",

"YOUR GMAIL PASSWORD");

mailclient.Send(mail);

}

Note: Using only gmail credentials. If you want to use your hotmail account or other change the port no. 587 port no is only use for gmail account.

Pages - Menu

Tuesday 26 July 2016

Multiple Files uploading using drag and drop

Friday 3 April 2015

Wednesday 19 February 2014

How to bind table and dropdown on selected index change using ajax jquery in php

Tuesday 18 February 2014

prettyphoto jquery plugin

Send Registration email using .net

Include name spaces