videouploadfeatureimg

Upload & Approve video using form in php

Hello Friends,

In this blog post, I will show you the video uploading functionality through user registration form and how admin approve these video before it is available for the users.

We have divided this functionality into to two major module, one is user module and another is the admin module.

A user will upload his video and after admin approval, he can see all the approved video till now along with his own video.

videoapproval2

When a user will submit a video it will reach to the admin panel and when admin will approve the video then it will go to the general view and will be visible to each user.

So this is simply video submission and approval functionality.


So how would you make this functionality?

This is a very simple application you just need to follow the step by step procedure given below.

before starting the actual procedure I just want to let you know the software which we used for making this functionality.


Software used:

NetBeans IDE

XAMPP Server

Though you can use any IDE which you are familiar with for developing this functionality.


First, Crate one SQL database name as dbtuts in our case and then create two tables, see the codes for the same below.

-- phpMyAdmin SQL Dump
-- version 4.1.12
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: Nov 15, 2018 at 12:17 PM
-- Server version: 5.6.16
-- PHP Version: 5.5.11

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `dbtuts`
--

-- --------------------------------------------------------

--
-- Table structure for table `admin`
--

CREATE TABLE IF NOT EXISTS `admin` (
`id` varchar(20) NOT NULL,
`username` varchar(25) NOT NULL,
`password` varchar(25) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `admin`
--

INSERT INTO `admin` (`id`, `username`, `password`) VALUES
('', 'anurag', '123');

-- --------------------------------------------------------

--
-- Table structure for table `tbl_uploads`
--

CREATE TABLE IF NOT EXISTS `tbl_uploads` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`name` varchar(20) NOT NULL,
`email` varchar(20) NOT NULL,
`password` varchar(20) NOT NULL,
`mobile` int(20) NOT NULL,
`file` varchar(100) NOT NULL,
`type` varchar(30) NOT NULL,
`size` int(11) NOT NULL,
`status` varchar(10) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=43 ;

--
-- Dumping data for table `tbl_uploads`
--

INSERT INTO `tbl_uploads` (`id`, `name`, `email`, `password`, `mobile`, `file`, `type`, `size`, `status`) VALUES
(35, 'anurag', 'anurag@gmail.com', '123', 123, '72752-samplevideo.mp4', 'video/mp4', 2058, 'approved'),

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Create a project name say videofileupload.

then create the file structure as given below.

videoapproval3

Once you create all the files then just copy and paste the code given below.


index.php

<?php
include_once 'dbconfig.php';
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>User Registration Form</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="headregis">
<label id="head">User Registration Form</label>
</div>
<div class="container">
<div class="main">
<form action="upload.php" method="Post" enctype="multipart/form-data" id="form">
<label>Enter Name:</label> <input type="text" name ="name" id="nme"/></br>
<label>Enter password:</label><input type ="password" name="password" id ="pwd"/></br>
<label>Enter Email Id:</label> <input type ="email" name="email" id="mail"/></br>

<label>Enter Mobile No.:</label><input type="number" name="mobile" id="mobno"/></br>
<label>Upload Your Video</label>

<input type="file" name="file" />
<button type="submit" name="btn-upload">upload</button>
</form>
<br /><br /><label>Try to upload any files(PDF, DOC, EXE, VIDEO, MP3, ZIP,etc...)</label>

</div>
</div>

</body>
</html>

login.php

<!DOCTYPE html>
<?php session_start(); ?>
<?php
if (isset($_SESSION['login_user'])) { // if already login
header("location: view.php"); // send to home page
exit;
}
?>

<html>
<head>
<title>
</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<div id="userform">
<h1 style="text-align: center;">User Login </h1>
<form action="" method="GET" id="form"/>
<label>UserName:</label>
<input type ="text" name="username"/></br>
<label>Password:</label>
<input type="password" name="password"/>
<input type="submit" name="sbt"/></form>
<a href="index.php">New User Register Here...</a>
</div>

</br>
<div id="loginform">
<h1 style="text-align: center;">Admin Login</h1>
<form action="" method="GET" id="form1"/>
<label>UserName:</label>
<input type ="text" name="username"/></br>
<label>Password:</label>
<input type="password" name="password"/>
<input type="submit" name="smbt"/></form>
</div>

</body>
</html>
<?php
if (isset($_GET['sbt'])) {
$connection = mysql_connect("localhost", "root", "");
$db = mysql_select_db("dbtuts", $connection);

$user = $_GET['username'];
$pass = $_GET['password'];
$_SESSION['login_user'] = $user;
$query = mysql_query("select * from tbl_uploads where '$user'=name AND '$pass'=password", $connection);
$rows = mysql_num_rows($query);

if ($rows == 1) {

header("location: view.php"); // Redirection To Other Page
} else {

echo "<script type='text/javascript'>alert('Username or Password is invalid!')</script>";
}
}
?>

<?php
if (isset($_GET['success'])) {
?>
<label>File Uploaded Successfully please make login once with your userid and password to view your files...</label>
<?php
} else if (isset($_GET['fail'])) {
?>
<label>Problem While File Uploading !</label>
<?php
}
?>

<?php
if (isset($_GET['smbt'])) {
$connection = mysql_connect("localhost", "root", "");
$db = mysql_select_db("dbtuts", $connection);
$user = $_GET['username'];
$pass = $_GET['password'];
$query = mysql_query("select * from admin where '$user'=username AND '$pass'=password", $connection);
$rows = mysql_num_rows($query);

if ($rows == 1) {

header("location: adminpanel.php"); // Redirection To Other Page
} else {

echo "<script type='text/javascript'>alert('Username or Password is invalid!')</script>";
}
}
?>

upload.php

<?php

include_once 'dbconfig.php';
if (isset($_POST['btn-upload'])) {
$name = $_POST['name'];
$password = $_POST['password'];
$email = $_POST['email'];

$mobile = $_POST['mobile'];

$file = rand(1000, 100000) . "-" . $_FILES['file']['name'];
$file_loc = $_FILES['file']['tmp_name'];
$file_size = $_FILES['file']['size'];
$file_type = $_FILES['file']['type'];
$folder = "uploads/";

// new file size in KB
$new_size = $file_size / 1024;
// new file size in KB
// make file name in lower case
$new_file_name = strtolower($file);
// make file name in lower case

$final_file = str_replace(' ', '-', $new_file_name);

if (move_uploaded_file($file_loc, $folder . $final_file)) {
//$sql="INSERT INTO tbl_uploads(file,type,size) VALUES('$final_file','$file_type','$new_size')";
//mysql_query($sql);
$sql = "insert into tbl_uploads(name,password,email,mobile,file,type,size,status) values('$name','$password','$email','$mobile','$final_file','$file_type','$new_size','pending')";
mysql_query($sql);
?>
<script>
alert('successfully uploaded');
window.location.href = 'login.php?success';
</script>
<?php

} else {
?>
<script>
alert('error while uploading file');
window.location.href = 'login.php?fail';
</script>
<?php

}
}
?>

view.php

<?php
include_once 'dbconfig.php';
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>File Uploading With PHP and MySql</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="header">
<label id="vtitle">File Uploading With PHP and MySql</label>
<label id="lgout"><a href="logout.php">Logout</a></label>
</div>
<div id="tbbody">
<table width="100%" border="1" id="tb1">
<tr>
<th colspan="4">your uploads...<label><a href="index.php">upload new files...</a></label></th>
</tr>
<tr>
<td>File Name</td>
<td>File Type</td>
<td>File Size(KB)</td>
<td>View</td>
</tr>
<?php
$sql = "SELECT * FROM tbl_uploads where status='approved'";
$result_set = mysql_query($sql);

while ($row = mysql_fetch_array($result_set)) {
?>
<tr>
<td>
<video width="320" height="240" controls>
<source src="uploads/<?php echo $row['file'] ?>" type="video/mp4">
Your browser does not support the <code>video</code> tag.
</video>

</td>
<td><?php echo $row['type'] ?></td>
<td><?php echo $row['size'] ?></td>
<td><a href="uploads/<?php echo $row['file'] ?>" target="_blank">view file</a></td>
</tr>
<?php
}
?>
</table>

</div>
</body>
</html>

In a case of any queries, you can write us at anurag@a5theory.com we will get back to you ASAP.

Hope! you would have enjoyed this post.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!

captchfeaturebgimg

Google Form Captcha Setup Using PHP and Jquery

Hello Friends,

In this blog post, I am going to explain how to make a captcha functionality for your form. Here I will show you how to setup google form captcha using PHP and jquery.

Captcha is generally used for security purpose, and its aim is to stop all the bots entry into our forms.

Bots are the software which is capable to register inside your website through your form, these bots are generally used by spammers.

captchacontent_img


Softwares used for making this functionality are:

NetBeans IDE

Xampp Server

For making a captcha functionality for your form you need to go through step by step procedure given below.

Now create a project with a name say googlecaptcha or you can have any name as per your desire.

Now creates the files as given the below file structure.

captchafilestructure_img

After creating all the files you just need to copy and paste the below code into the respective file.


form.php

<html>
<head>
<title>Google Captcha Protection in form- Demo Preview</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>

<div id="mainform">
<div class="innerdiv">
<h2>Google Captcha Creation</h2>
<!-- Required div starts here -->
<form method="post" id="myForm">
<h3>Fill Your Captcha!</h3>
<br/>
<table>
<tr>
<td><br/><br/><br/><br/><br/><br/></td>
<!--including google captcha image from captcha.php-->
<td><img id="captcha_img" src="captcha.php" /><br/>
<span id="reload">Can't read? try another one</span></td>
<tr>
<td>Enter Text:</td>
<td><input id="captcha1" name="captcha" type="text"></td>
</tr>

<tr>
<td></td>
<td><input type='submit' id="button" value='Submit'><br/>
</td>
</tr>
</table>
<?php
include 'verify.php';
?>
</form>
</div>
<!-- Right side div -->

</div>
</body>
</html>

scripts.js

$(document).ready(function() {
$("#reload").click(function() {
$("#captcha_img").attr("src", "captcha.php");
});
});

verify.php

<?php
if (isset($_POST["captcha"]))
{
session_start();
//Verifying user input captcha text with google generated captcha
if ($_SESSION["captcha"] == $_POST["captcha"])
{
echo "<b class=\"correct\">Correct Code Entered..!!</b>";
}
else
{
echo "<b class=\"wrong\">Wrong Code Entered..!!</b>";
}
unset($_SESSION['captcha']);
}
?>

 

style.css

@import url(http://fonts.googleapis.com/css?family=Fauna+One|Muli);
#mainform{
width:960px;
margin:20px auto;
padding-top:20px;
font-family: 'Fauna One', serif;
}

#mainform h2{
width:100%;
float:left;
text-align:center;
margin-top:35px;
}

.innerdiv{
width:65%;
float:left;
background-color: #CDDC39;
}

form{
background-color:white;
color:#123456;
box-shadow: 1px 1px 22px rgb(194, 194, 194);
width:500px;
margin:50px 250px 0 50px;
float:left;
height:430px;
text-align:center;
}

h3{
margin-top:0px;
margin-bottom:10px;
color:white;
background-color: #607D8B;
text-align:center;
width:100%;
height:50px;
padding-top:30px;
}

input{
width:250px;
height:30px;
border-radius:3px;
padding:2px;
box-shadow:0px 0px 10px darkgray;
margin:10px;
}

input[type=submit]{
background-color: #4CAF50;

border:1px solid white;
font-family: 'Fauna One', serif;
font-Weight:bold;
font-size:18px;
color:white;
margin-top: 15px;
}

span{
color:green;
font-size:14px;
}

#myForm div{
color:red;
font-size:14px;
}

table{
margin-left:40px;
}
#captcha_img{
margin-left:60px;;
}
#reload{
margin-left:40px;
cursor:pointer;
}
.correct{
color:green;
}
.wrong{
color:red;
}

Once you copy and paste all the files then run the form.php file and you will get desired captcha in your form on the browser.


In a case of any queries, you can write to us at anurag@a5theory.com we will get back to you ASAP.

Hope! you would have enjoyed this post.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!

image_upload_feature_img

Upload Image with PHP and Jquery Using Form

Hello Friends,

In this blog post, I am going to show an existing functionality of image upload using a form with the help of PHP and jquery.

Often you would have seen the option of image upload while filling your college, office, interview form. Here you upload your image and submit with the form.

this functionality is very important once we have to collect the image of our users and any other things depend on the context of the requirement.

You can also use this image upload functionality as your school project and show it as a collection of images would also take over to form an image gallery.

So How to build this functionality?

Friends, this is a very simple to build just follow the below-given procedure step by step and you will be finished with an image upload code or software.


Software used for building this project:

Net Beans IDE
Xampp Server

We used this above software for this project though you can use any software supporting PHP, HTML, Jquery or that you are familiar with.


File Structure:

See the image below.

imageuploadfilestr

As per the above file structure, you just make a PHP project name as image upload or you can have any name as per your requirement.

Now create all the files as shown in the above file structure. You can rename the pages but make sure to change the same in the code given below.

You will also need to create one folder name as upload folder. See the file structure image for the same.

You will also need to download one delete icon image and copy it to your project.

Now just place this below-given code into the respective files and run your project by running the upload.php file.


Upload.php

<!DOCTYPE html>
<html>
<head>
<title>Upload Image using form</title>
<link href="style.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="imageupload.js"></script>
</head>
<body>
<div id="mainform">
<div id="innerdiv">
<h2>Upload Image using form</h2>
<!-- Required Div Starts Here -->
<div id="formdiv">
<h3>Upload Image Form</h3>
<form action="" enctype="multipart/form-data" id="form" method="post" name="form">
<div id="upload">
<input type="file" name="file" accept="image/*">
</div>
<input id="submit" name="submit" type="submit" value="Upload">
</form>
<br>
<div id="detail">

<ul>

<li>You can upload only- <b>(jpeg,jpg,png) images.</b></li>
<li>Image size < 100kb.</li>
</ul>
</div>
</div>
<div id="clear"></div>
<div id="preview">
<img id="previewimg" src=""><img id="deleteimg" src="delete.png">
<span class="pre">IMAGE PREVIEW</span>
</div>
<div id="message">
<?php include 'imageupload.php';?>
</div>
</div>
</div>
</body>
</html>

Imageuplaod.php

<?php

if (isset($_POST['submit'])) {

$validextensions = array("jpeg", "jpg", "png");
$temporary = explode(".", $_FILES["file"]["name"]);
$file_extension = end($temporary);

if ((($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/jpeg")
) && ($_FILES["file"]["size"] < 100000)//Approx. 100kb files can be uploaded.
&& in_array($file_extension, $validextensions)) {

if ($_FILES["file"]["error"] > 0) {
echo "Return Code: " . $_FILES["file"]["error"] . "<br/><br/>";
} else {

echo "<span>Your File Uploaded Succesfully...!!</span><br/>";
echo "<br/><b>File Name:</b> " . $_FILES["file"]["name"] . "<br>";
echo "<b>Type:</b> " . $_FILES["file"]["type"] . "<br>";
echo "<b>Size:</b> " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
echo "<b>Temp file:</b> " . $_FILES["file"]["tmp_name"] . "<br>";
if (file_exists("upload/" . $_FILES["file"]["name"])) {
echo $_FILES["file"]["name"] . " <b>already exists.</b> ";
} else {
move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $_FILES["file"]["name"]);
$imgFullpath = "http://".$_SERVER['SERVER_NAME'].dirname($_SERVER["REQUEST_URI"].'?').'/'. "upload/" . $_FILES["file"]["name"];
echo "<b>Stored in:</b><a href = '$imgFullpath' target='_blank'> " .$imgFullpath.'<a>';

}

}
} else {
echo "<span>***Invalid file Size or Type***<span>";
}
}
?>

Imageuplaod.js

$(document).ready(function() {
// Function for Preview Image.
$(function() {
$(":file").change(function() {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
function imageIsLoaded(e) {
$('#message').css("display", "none");
$('#preview').css("display", "block");
$('#previewimg').attr('src', e.target.result);
};
// Function for Deleting Preview Image.
$("#deleteimg").click(function() {
$('#preview').css("display", "none");
$('#file').val("");
});
// Function for Displaying Details of Uploaded Image.
$("#submit").click(function() {
$('#preview').css("display", "none");
$('#message').css("display", "block");
});
});

Style.css

@import "http://fonts.googleapis.com/css?family=Droid+Sans";
/* Above is to load Google Fonts in our page.*/
#mainform{
width:960px;
margin:30px auto;
padding-top:20px;
font-family:'Droid Sans',sans-serif
}
#mainform h2{
margin-left:95px
}
#innerdiv{
float:left;
width:60%;
height:575px;
padding:10px 30px 30px
}
#formdiv{
background-color:#fff;
color:#123456;
box-shadow:0 1px 1px 1px gray;
width:480px;
margin:50px 0 0;
height:300px
}
h3{
margin-top:0;
color:#fff;
background-color:#182d69;
text-align:center;
width:100%;
height:50px;
padding-top:30px
}
input[type=submit]{
background-color:#182d69;
border:1px solid #fff;
font-weight:700;
font-size:18px;
color:#fff;
width:150px;
height:30px;
border-radius:3px;
padding:2px;
box-shadow:0 1px 1px 0 #a9a9a9;
margin-left:20px
}
#form{
width:43%;
float:left
}
#preview{
height:180px;
width:180px;
text-align:center;
margin:20px;
display:none
}
.pre{
margin-right:20px;
font-size:13px
}
#previewimg{
height:140px;
width:140px;
float:left;
padding:8px;
border:1px solid #e4d3c3;
margin-bottom:5px
}
#file{
opacity:0;
width:115px;
height:115px
}
#upload{
width:115px;
height:115px;
background-image:url(abc.png);
background-repeat:no-repeat;
margin-left:35px;
box-shadow:0 0 10px grey;
background-position:5px
}
#message{
width:100%;
font-size:14px;
color:#123456;
margin-top:-90px;
float:left;
margin:15px
}
#message span{
color:red;
font-size:15px
}
#detail{
line-height:20px;
float:left;
width:270px;
font-size:14px
}
ul{
margin-left:-25px
}
#textmessage{
float:right;
width:50%;
margin:15px 85px 0 0
}
div#img{
width:200px;
height:200px
}
#imageupload{
width:150px;
height:150px
}
#deleteimg{
cursor:pointer;
float:right;
margin-top:-175px;
margin-right:10px
}

In a case of any queries, you can write us at anurag@a5theory.com we will get back to you ASAP.

Hope! you would have enjoyed this post.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!