How to get image from url and insert into database and store image in your local root folder through PHP and mysql?

Description:- Hi ! In this tutorial I’m going to provide you code to get the image from url and then to store in the database as well in your local root directory or in a folder.
You can also include this type of image search thing in your website so that user will get limitless option to upload a picture.
I use rand() function to rename the image name and it will be helpful for you when you make a large website. 

This chapter will complete in 3 different steps:-
1. Make index.php
2. Make a new folder in which your image will store and rename that folder as ‘image’
3. Make a new database and give it a name mukulexp

1. index.php

<?php
// connection to database
$con = mysql_connect("localhost","root","");
mysql_select_db('mukulexp',$con) or die("could not connect");
?>
<?php
if(isset($_REQUEST['subimg']))
{
 // Your file
 $file = $_REQUEST['url'];
 
// Open the file to get existing content
$data = file_get_contents($file);
$newimage=rand()."abc.jpg";
// New file
$new = 'image/'.$newimage;
// Write the contents back to a new file
file_put_contents($new, $data);
mysql_query("Insert into image set name = '$newimage' ");
 echo "<img src='image/$newimage' width='300px' height='250px'/>";
}
?>
<form action="" method="post" enctype="multipart/form-data">
<input type="url" name="url"/><br/><br/>
<input type="submit" name="subimg" value="submit"/> 
</form>

2. Make a new folder and rename it as image

3. Make a new database and give it a name of mukulexp and then enter in your mukulexp and click on SQL and paste the below code or make the table by yourself and name it image and then make 2 columns in it first id and second name

CREATE TABLE IF NOT EXISTS `image` (
 `id` int(90) NOT NULL AUTO_INCREMENT,
 `name` varchar(4000) NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=11 ;
--
-- Dumping data for table `image`
--
INSERT INTO `image` (`id`, `name`)

NOTE : – Do all the above point as they are mentioned. Watch video for help
Happy Coding ūüôā

Advertisements

How to change the background color automatically with CSS3 animation ?

Description:- In this example I’m gonna show you guys how you can easily animate your background and texts without using WOW.js but using CSS3 animation properties.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>animation</title>
<style>
*{padding:0px; margin:0px;}
body{
 width:100%;
 background:rgba(51,51,51,1);
 position:relative;
 animation-name:demo;
 animation-direction:alternate reverse;
 animation-duration:10s;
 animation-iteration-count:infinite;
 animation-timing-function:linear;
}
@keyframes demo
{
    0%{background:rgba(51,51,51,1); height:1000px; left:0px; top:0px;}
    25%{background:rgba(0,102,153,1);left:0px;  top:0px;}
    50%{background:rgba(0,204,204,1); left:0px;top:0px;}
    75%{background:rgba(153,204,0,1); left:0px;  top:0px;}
    100%{background:rgba(51,51,51,1); left:0px; top:0px;}
    
}

.box > h1{font-family:Roboto; font-weight:300; font-size:36px; color:rgba(255,255,255,1);margin-left:500px;
margin-top:250px; animation:text .9s 1 ease alternate; position:relative; float:left; } 

@keyframes text
{
    0%{margin-left:0px;}
    25%{margin-left:500px; transform:rotate(0deg);}
    50%{margin-left:500px; transform:rotate(10deg);}
    75%{margin-left:500px; transform:rotate(-10deg);}
    100%{margin-left:500px; transform:rotate(0deg);}
}

.box2 > h1{font-family:Roboto; font-weight:300; font-size:26px; color:rgba(255,255,255,1);
 animation:sectext 3s 1 ease-in alternate; position:fixed; top:320px; margin-left:620px; opacity:1;} 

@keyframes sectext
{
    0%{opacity:0;}
    100%{opacity:1;}
}


</style>
</head>

<body>

<div class="box">
<h1>Keyframe Animation</h1>
</div>

<div class="box2">
<h1>By CSS3</h1>
</div>
</body>
</html>

 

How to upload and resize an image through GD PHP ?

Description:- Through this simple example you can easily upload your image file with the extensions of gif, png, jpg and jpeg and after uploading it will automatically resized.

For this example I made three different files :-
1. my_file.php
2. upload_file.php
3. webtechball_1.0.php


Step1:- Creating my_file.php

<!DOCTYPE HTML>
<head>
    <title></title>
</head>
<body>
<form action="upload_file.php" method="post" enctype="multipart/form-data">

<h2>Choose file:</h2> 
<input type="file" name="uploads"/> <br/>
<input type="submit" value="Upload"/>

</form>
</body>
</html>

Step2:- Creating upload_file.php

<?php
$name = $_FILES["uploads"]["name"];
$tmpName = $_FILES["uploads"]["tmp_name"];
$type = $_FILES["uploads"]["type"];
$size = $_FILES["uploads"]["size"];
$errorMsg = $_FILES["uploads"]["error"];
$explode = explode(".",$name);
$extension = end($explode);
//starting PHP image upload error handlings
if(!$tmpName)
{
    echo "ERROR: Please choose file";
    exit();
}
else if($size > 5242880)// if file size is larger than 5MB 
{
    echo "ERROR: Please choose less than 5MB file for uploading";
    unlink($tmpName);
    exit();
}
else if(!preg_match("/\.(gif|jpg|png|jpeg)$/i",$name)) 
{
    echo "ERROR: Please choose the file only with the GIF, PNG or JPG file format";
    unlink($tmpName);
    exit();
}
else if($errorMsg == 1)
{
    echo "ERROR: An unexpected error occured while processing the file. Please try again.";
    exit();
}
// End of PHP image upload error handlings

//Placing folder "uploads" where files will going to uploaded
$moveFile = move_uploaded_file($tmpName,"uploads/$name");

if($moveFile != true)
{
    echo "ERROR: File not uploaded. Please try again";
    unlink($tmpName);
    exit();
}


// ------Resizing your image ----------- 
include_once("webtechball_1.0.php");
$target = "uploads/$name";
$resize = "uploads/new_$name";
$max_width = 200; // maximum width of new file. Change it according to your need
$max_height = 150; // maximum height of new file. Change it according to your need
webtechball_img_resize($target, $resize, $max_width, $max_height, $extension);
//-----------End of resizing your image-----------

echo "<h2>Original image:-</h2> ";
echo "<img src='uploads/$name' /> <br/>";
echo "<h2>Resized image:-</h2> ";
echo "<img src='uploads/new_$name' />"

?>

Step3:- Creating webtechball_1.0.php

<?php
// This library file is made by webtechball
// Starting of function called webtechball_img_resize made by webtechball
function webtechball_img_resize($targett, $newcpy, $w, $h, $extn)
{

    list($origWidth, $origHeight) = getimagesize($targett);

    $ratio = $origWidth / $origHeight;

    if(($w / $h) > $ratio)
    {
        $w = $h * $raio;
    }
    else
    {
        $h = $w * $ratio;
    }
    
    $img="";
    $extn = strtolower($extn);
    if($extn == "gif")
    {
        $img = imagecreatefromgif($targett);
    }
    else if($extn == "png")
    {
        $img = imagecreatefrompng($targett);
    }
    else
    {
        $img = imagecreatefromjpeg($targett);
    }
    $a = imagecreatetruecolor($w, $h);
    
    imagecopyresampled($a,$img,0,0,0,0,$w,$h,$origWidth,$origHeight);
    imagejpeg($a,$newcpy,80);
}
// End of function called webtechball_img_resize made by webtechball
?>

*Note :- Remember one important thing don’t forget to make a new folder and rename it as “uploads”. In this folder your all uploaded files as well as your resized files will going to save. Follow the video for more details….

How to check and uncheck all the check boxes in just one click through jQuery ?

Description:- Through this example you can easily check all the check boxes of the list. So that you can delete them or you can perform whatever you want to do. This example includes jQuery file so download it from http://jquery.com/download/ or click on the link http://code.jquery.com/jquery-1.11.2.min.js  and save it in the same folder in which you are going to save this example.

<!DOCTYPE html>
<head>
<title>Check All</title>
<script src="jquery-1.11.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(e) {
    $("#selectall").click(function(e){
        if(this.checked)
        {
            $(".checks").each(function() {
                this.checked= true;
            });
        }
        else
        {
        $(".checks").each(function() {
                this.checked= false;
            });
        }
    });
});

</script>
<style>
ul{list-style:none;}
</style>
</head>
<body>
<ul>
    <li><input type="checkbox" id="selectall" name="selectall"/>Select All</li>
    <br/>
    <hr>
    <li><input type="checkbox" class="checks"/> Menu1</li>
    <li><input type="checkbox" class="checks"/> Menu2</li>
    <li><input type="checkbox" class="checks"/> Menu3</li>
    <li><input type="checkbox" class="checks"/> Menu4</li>
    <li><input type="checkbox" class="checks"/> Menu5</li>
    <li><input type="checkbox" class="checks"/> Menu6</li>
    <li><input type="checkbox" class="checks"/> Menu7</li>
    <li><input type="checkbox" class="checks"/> Menu8</li>
    <li><input type="checkbox" class="checks"/> Menu9</li>
</ul>


</body>
</html>

How to count WORDS in JavaScript ? OR How to make word counter in JavaScript ?

Description:- Few days before I made and upload character counter which is right here ( https://webtechball.wordpress.com/2015/02/25/how-to-make-fully-responsive-character-counter-through-javascript/ ) and today  Through this example you can easily make your own word counter not the character counter. In character counter user can easily know how many character he have written, but through word counter one can easily find out how many words he have written.

<!DOCTYPE HTML>
<head>
<title>Word counter</title>
<style>
#aaa{border:hidden;}
</style>
</head>
<body>
<textarea name="comment" onkeyup="wordcount(this.value)" rows="5" cols="50"></textarea> <br/>
</body>
</html>

<script>
document.write("<input type=text id=aaa readonly/>");
function wordcount(type) 
{
var words = type.split(/\s/);
var bbb = words.length;
var ccc = document.getElementById('aaa');
ccc.value = bbb;
}
</script>

How to validate the email field through JavaScript ? Or How to set validation to your email box through JavaScript?

Description:- In this example I’m gonna show you the code which use for email validation through JavaScript. You can use this email box with validation for your forget password area.

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Forget password</title>
<link rel="stylesheet" href="bootstrap.min.css" type="text/css"/>
<script src="bootstrap.min.js" type="text/javascript"></script>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<script>
function valid(forget_form,email)
{
    var expression = /^([a-zA-Z0-9_\-\.]){1,}\@([a-zA-Z_\-\.]){1,}\.([a-zA-Z]{2,4})$/;
    var address=document.forms[forget_form].elements[email].value;
    var eee=document.getElementById("email").value;
    if(eee=="")
    {
        alert("Please fill the field");
        return false;
    }
    if(expression.test(address)==false)
    {
        document.getElementById("err").innerHTML="Invalid email format. Please Insert the valid one";
        document.getElementById("err").style.color="Red";
        document.forms[forget_form].elements[email].focus();
        return false;
    }    
    
}

</script>
<body>
<div class="container" style="margin-top:200px">
    <div class="row">
        <div class="col-md-4"> </div>
        <div class="col-md-4">
            <form action="profile.html" method="post" role="form" id="forget_form" onSubmit="return valid('forget_form','emaill');" >
                <div class="form-group">
                    <label for="email">Email:</label>
                    <input type="text" name="emaill" id="email" class="form-control"/>
                    <span id="err"></span>
                    <input type="submit" class="btn btn-info" value="Submit" style="margin-top:5px"/>
                </div>
            </form>
        </div>
        <div class="col-md-4"> </div>
    </div>
</div>
</body>
</html>


*Note:- After writing all the aforesaid codes make one more page and name it as profile.html (which is mentioned in the form action). And don’t forget to include 3 main Bootstrap files in this example because this example is totally Bootstrap.