database
Continue reading “JQuery UI autocomplete textbox with database in asp.net”
Welcome to Mehta Websolution's Blog
THE WEB DESIGN WORLD
Today I am presenting the most important social networking feature called ajax upload and resize an image without refreshing the page using jquery and PHP. This tutorial a continuation of my previous post, I just included image re-sizing function for different dimensions. It is very useful for your web project that saves lots of hosting space and bandwidth limit. Take a quick look at the live demo.
The tutorial contains three folders called js,includes and uploads with PHP files.
includes
— getExtension.php
— compressImage.php
js
— jquery.min.js
— jquery.form.js
uploads
index.php
ajaximageupload.php
db.php
Javascript Code
$(“#photoimg”).live(‘change’,function(){})- photoimg is the ID name of INPUT FILE tag and $(‘#imageform’).ajaxForm() – imageform is the ID name of FORM. While changing INPUT it calls FORM submit without refreshing page using ajaxForm() method. Uploaded images will prepend inside #preview tag.
<script type="text/javascript" src="http://ajax.googleapis.com/ ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script type="text/javascript" src="jquery.form.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#photoimg').live('change', function() { var A=$("#imageloadstatus"); var B=$("#imageloadbutton"); $("#imageform").ajaxForm({target: '#preview', beforeSubmit:function(){ A.show(); B.hide(); }, success:function(){ A.hide(); B.show(); }, error:function(){ A.hide(); B.show(); } }).submit(); }); }); </script>
Here hiding and showing #imageloadstatus and #imageloadbutton based on form upload submit status.
index.php
Contains simple PHP and HTML code. Here $session_id=1 means user id session value.
<?php include('db.php'); session_start(); $session_id='1'; // User login session value ?> <div id='preview'> </div> <form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'> Upload image: <div id='imageloadstatus' style='display:none'><img src="loader.gif" alt="Uploading...."/></div> <div id='imageloadbutton'> <input type="file" name="photoimg" id="photoimg" /> </div> </form> Sample database design for Users. Users Contains user details username, password, email and profile_image etc. CREATE TABLE `users` ( `uid` int(11) AUTO_INCREMENT PRIMARY KEY, `username` varchar(255) UNIQUE KEY, `password` varchar(100), `email` varchar(255) UNIQUE KEY, `profile_image` varchar(200) )
ajaximage.php
Contains PHP code. This script helps you to upload images into uploads folder. Image file name rename into timestamp+session_id.extention
<?php include('db.php'); session_start(); $session_id='1'; // User session id $path = "uploads/"; $valid_formats = array("jpg", "png", "gif", "bmp","jpeg","PNG","JPG","JPEG","GIF","BMP"); if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") { include_once 'includes/getExtension.php'; $imagename = $_FILES['photoimg']['name']; $size = $_FILES['photoimg']['size']; if(strlen($imagename)) { $ext = strtolower(getExtension($imagename)); if(in_array($ext,$valid_formats)) { if($size<(1024*1024)) // Image size max 1 MB { $actual_image_name = time().$session_id.".".$ext; $uploadedfile = $_FILES['photoimg']['tmp_name']; //Re-sizing image. include 'includes/compressImage.php'; $widthArray = array(200,100,50); //You can change dimension here. foreach($widthArray as $newwidth) { $filename=compressImage($ext,$uploadedfile,$path,$actual_image_name,$newwidth); echo "<img src='".$filename."' class='img'/>"; } //Original Image if(move_uploaded_file($uploadedfile, $path.$actual_image_name)) { //Insert upload image files names into user_uploads table mysqli_query($db,"UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id';"); echo "<img src='uploads/".$actual_image_name."' class='preview'>"; } else echo "failed"; } else echo "Image file size max 1 MB"; } else echo "Invalid file format.."; } else echo "Please select image..!"; exit; } ?>
compressImage.php
Re-sizing image into different pixel dimensions.
<?php function compressImage($ext,$uploadedfile,$path,$actual_image_name,$newwidth) { if($ext=="jpg" || $ext=="jpeg" ) { $src = imagecreatefromjpeg($uploadedfile); } else if($ext=="png") { $src = imagecreatefrompng($uploadedfile); } else if($ext=="gif") { $src = imagecreatefromgif($uploadedfile); } else { $src = imagecreatefrombmp($uploadedfile); } list($width,$height)=getimagesize($uploadedfile); $newheight=($height/$width)*$newwidth; $tmp=imagecreatetruecolor($newwidth,$newheight); imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,$width,$height); $filename = $path.$newwidth.'_'.$actual_image_name; //PixelSize_TimeStamp.jpg imagejpeg($tmp,$filename,100); imagedestroy($tmp); return $filename; } ?>
getExtension.php
This extracts file extension.
function getExtension($str) { $i = strrpos($str,"."); if (!$i) { return ""; } $l = strlen($str) - $i; $ext = substr($str,$i+1,$l); return $ext; }
db.php
Database configuration file, modify username, password and database values.
<?php define('DB_SERVER', 'localhost'); define('DB_USERNAME', 'username'); define('DB_PASSWORD', 'password'); define('DB_DATABASE', 'database'); $db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE); ?>
how to create Ajax PHP login script, in this post I want to discuss how to create a simple Ajax PHP login with welcome page using MySQL database. This will explain you creating user tables, posting form values and storing and destroying the session values. If you are a PHP beginner take a quick look at this live demo with Username: 9lessons Password:9lessons. This post has been updated with mysqli.
Users Table
User table contains all the users registration details.
CREATE TABLE `users` ( `uid` INT(11) NOT NULL AUTO_INCREMENT , `username` VARCHAR(45) , `password` VARCHAR(100) , `email` VARCHAR(45) , `friend_count` INT(11) , `profile_pic` VARCHAR(150), PRIMARY KEY (`uid`));
Jquery Code
Contains javascipt code, $(“#login”).click(function(){}– login is the ID name of the login button. Using element.val() calling username and password input values. If id value is even number if(id(even) % 2) = If(0) false
<script src="js/jquery.min.js"></script> <script src="js/jquery.ui.shake.js"></script> <script> $(document).ready(function() { $('#login').click(function() { var username=$("#username").val(); var password=$("#password").val(); var dataString = 'username='+username+'&password='+password; if($.trim(username).length>0 && $.trim(password).length>0) { $.ajax({ type: "POST", url: "ajaxLogin.php", data: dataString, cache: false, beforeSend: function(){ $("#login").val('Connecting...');}, success: function(data){ if(data) { $("body").load("home.php").hide().fadeIn(1500).delay(6000); //or window.location.href = "home.php"; } else { //Shake animation effect. $('#box').shake(); $("#login").val('Login') $("#error").html("<span style='color:#cc0000'>Error:</span> Invalid username and password. "); } } }); } return false; }); }); </script>
index.php
Contains PHP and HTML code, If session value exists this will redirect to home page.
<?php session_start(); if(!empty($_SESSION['login_user'])) { header('Location: home.php'); } ?> //HTML Code <div id="box"> <form action="" method="post"> Username <input type="text" class="input" id="username"/> Password <input type="password" class="input" id="password"/> <input type="submit" class="button button-primary" value="Log In" id="login"/> <div id="error"></div> </div> </form> </div>
ajaxLogin.php
Contains PHP code, this will verify username and password values in database.
<?php include("db.php"); session_start(); if(isset($_POST['username']) && isset($_POST['password'])) { // username and password sent from Form $username=mysqli_real_escape_string($db,$_POST['username']); //Here converting passsword into MD5 encryption. $password=md5(mysqli_real_escape_string($db,$_POST['password'])); $result=mysqli_query($db,"SELECT uid FROM users WHERE username='$username' and password='$password'"); $count=mysqli_num_rows($result); $row=mysqli_fetch_array($result,MYSQLI_ASSOC); // If result matched $username and $password, table row must be 1 row if($count==1) { $_SESSION['login_user']=$row['uid']; //Storing user session value. echo $row['uid']; } } ?> home.php If user session value is empty, this will redirect to login page. <?php session_start(); if(empty($_SESSION['login_user'])) { header('Location: index.php'); } ?> //HTML Code Welcome to Home Page <a href="logout.php">Logout</a>
logout.php
Cleaning the user session value.
<?php session_start(); if(!empty($_SESSION['login_user'])) { $_SESSION['login_user']=''; session_destroy(); } header("Location:index.php"); ?>
db.php
Database configuration file, modify username, password and database values.
<?php define('DB_SERVER', 'localhost'); define('DB_USERNAME', 'username'); define('DB_PASSWORD', 'password'); define('DB_DATABASE', 'database'); $db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE); ?>
now we will make a simple add, edit ,delete data with jquery, php and mysql
first we create a table called ‘tbl_barang’
CREATE TABLE `tbl_barang` ( `kode_barang` varchar(10) collate latin1_general_ci NOT NULL, `nama_barang` varchar(100) collate latin1_general_ci NOT NULL, `harga` double(16,2) NOT NULL, PRIMARY KEY (`kode_barang`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;
after that we create a file called ‘koneksi.php’ and put ths code into the file Continue reading “Ajax Create, Update and Delete data with jQuery and php”