you tube tutorial

YouTube tutorial in php and JavaScript

Complete and download this tutorial at www.23tutorials.com for free

Thanks for downloading this video sharing tutorial eBook.

You are free to distribute this eBook with your friends and colleagues. We have many tutorials like; how to create a social network tutorial like Facebook in php and JavaScript,

Ho to create twitter tutorial in php and JavaScript,

Ho to create Gmail tutorial in php and JavaScript,

Ho to create twitter web plug-in like who is online.

Visit our website to follow and download all this tutorials for free at www.23tutorials.com. For any question email us at [email protected].

YouTube Tutorial in php and JavaScript

Database………………………………………………………………………


http://www.23tutorials.com/

Connection.php………………………………………………………………. 4

Function.php…………………………………………………………………. 5

Index.css………………………………………………………………………. 6

Home.css ……………………………………………………………………... 10

Registration script……………………………………………………………. 31

Login script…………………………………………………………………... 38

How to upload video script………………………………………………….. 43

How to view all uploaded videos script …………………………………….. 49

How to watch videos script…………………………………………………… 52

Uploading profile picture script……………………………………………… 59

Show user profile name / photo script………………………………………. 64

How to search video script……………………………………………………. 67

How to edit video information script………………………………………… 73

How delete video script………………………………………………………. 78

How to add comment to a video script…………………………………….... 83

How to bookmark video script……………………………………………….. 92

How to like / dislike video script……………………………………………. 99

How to count video views script……………………………………………. 107

How to view bookmark (favorite) videos script…………………………… 113

How user edit account information………………………………………… 116

connection.phpThis php file connects this tutorial to the database.


<?php$mysql_hostname= "localhost";$mysql_user = "root";$mysql_password = "";$mysql_database = "learn"; //database name, you can change to yours$prefix = "";$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");mysql_select_db($mysql_database, $bd) or die("Could not select database");?>

function.php


This php file stores the login user session.

<?phpinclude("connection.php");if(isset($_SESSION["SESS_MEMBER_ID" ] ) ) {$result = mysql_query("SELECT member_id FROM `member` WHERE `member_id`='".$_SESSION["SESS_MEMBER_ID"]." ' LIMIT 1");if(mysql_num_rows($result)) {$row = mysql_fetch_array($result);$_SESSION["logged"] = $row["member_id"];} } ?>

Index.css

This is the index.css for styling the index.php page.

body{


margin-left:-0%;

margin-top:0%;

margin-right:-0%;

background-color:#dddddd;

}

#index_page_header{

position:fixed;

background-color:#e03409;

width:1280px;

height:80px;

top:-21px;

left:0px;

z-index: 2;

}

#registration_div{

background-color:;

width:304px;

height:420px;

position:absolute;

top:95px;

font-weight:bold;

left:7px;

border:1px solid white;

border-radius:5px;

}

h1{


color:white;

}

h2{

position:absolute;

color:green;

font-size:17px;

left:40px;

top:-12px;

}

.reg{

position:relative;

left:3px;

border-radius:4px;

border:0px;

height:30px;

width:295px;

}

#submit_bitton{

position:relative;

background-color:blue;

left:80px;

top:-35px;

border-radius:4px;

border:0px;

height:30px;

width:125px;


color:white;

}

#login_div{

background-color:;

position:absolute;

top:25px;

margin-left:7px;

width:20px;

}

#login_email{

position:relative;

left:3px;

border-radius:0px;

border:0px;

height:25px;

width:298px;

}

#login_password{

position:relative;

top:2px;

left:3px;

border-radius:0px;

border:0px;

height:25px;

width:298px;

}


#login_button{

position:absolute;

background-color:blue;

left:0px;

top:60px;

border-radius:0px;

border:1px solid grey;

height:23px;

width:55px;

color:white;

}

Home.css

Below is the home.css for styling the home page.


/* div containing profile picture */

.profile-photo{

position:absolute;

top:84px;

left:10px;

width:150px;

height:140px;

background-color:white;

border:1px solid #cce;

border-radius:6px;

}

/* profile name */

#profile_name{

position:relative;

top:-27px;

left:2px;

font-size:17px;

}

/* profile picture */

.profile_pic{

position:absolute;

top:4px;

left:4px;

width:142px;

height:132px;

border-radius:6px;


}

/* div for uploading videos */

.upload-video-div{

position:absolute;

top:84px;

left:210px;

width:440px;

height:140px;


border:1px solid #ccc;

border-radius:6px;

}

/* div for syling uploading forms like youtube */

.fileUpload {

position: relative;

overflow: hidden;

margin: 10px;


height: 123px;

width: 180px;

text-align: center;

top:-2px;

border:1px solid black;

}


.fileUpload input.upload {

position: absolute;

top: 0;

right: 0;

margin: 0;

padding: 0;

font-size: 20px;

cursor: pointer;

opacity: 0;

filter: alpha(opacity=0);

height: 100%;

text-align: center;

}

.custom-span{ font-family: Arial; font-weight: bold;font-size: 100px; color: #FE57A1}

#uploadFile{border: none;margin-left: 10px; width: 200px;}

.custom-para{font-family: arial;font-weight: bold;font-size: 24px; color:#585858;}

#photo_text{

position:absolute;

width:350px;

height:36px;

left:147px;

top:75px;

font-size:16px;

}

#photo_comment{

position:absolute;


left:150px;

top:30px;

font-size:20px;

}

#submit_photo{

position:absolute;

width:340px;

height:50px;

left:155px;

top:120px;

font-size:24px;



color:white;

}

.preview

{

position:absolute;

left:185px;

top:-52px;


}

#preview{

position:absolute;


top:60px;

color:#cc0000;

font-size:12px

}

/* end of div for syling uploading forms like youtube */

.left-bar-links{

position:absolute;

width:160px;

height:120px;

left:10px;

top:240px;

font-size:17px;



color:black;

}

.left-bar-links a {

text-decoration:none;

color:black;

}

#noticeboard{

width:780px;

height:35px;


background-color:;

position:absolute;


left:20px;

top:0px;

}

.content{

width:380px;

margin:0 auto;

position:absolute;

top:37px;

left:190px;

}

#searchid

{

position:absolute;

width:480px;


padding:10px;

font-size:14px;

border-radius:5px;

}

#result

{

position:absolute;

width:480px;


padding:10px;

display:none;

top:37px;

border-top:1px;

overflow:hidden;

border:1px #CCC solid;

background-color:#cce;

}

.user-video-upload{

position:absolute;


-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);

overflow: visible;

top:244px;

margin-left:210px;

width:885px;

border-radius:3px;

border:;

padding:1px;

}

.user-preview{

position:relative;

border:px solid #cce;

border-radius:px;

margin-left:-10px;

}


#native {

-webkit-column-width: 250px;

-moz-column-width: 250px;

-o-column-width: 250px;

-ms-column-width: 250px;

column-width: 250px;

-webkit-column-rule-style: solid;

-moz-column-rule-style: solid;

-o-column-rule-style: solid;

-ms-column-rule-style: solid;

column-rule-style: solid;

float:left;

padding:22px;

padding-bottom:10px;

padding-top:0px;

list-style-type: none;

position:relative;

}

/* watch videoform when the video is clicked */

.watch-video-div{

position:absolute;

top:83px;

left:209px;

width:750px;

height:420px;




border-radius:0px;

}

.watch-video{

position:relative;


border-radius:px;

margin-left:-2px;

}

/* div for adding comment */

.add-comment{

position:absolute;



overflow: visible;

top:510px;

margin-left:209px;

width:748px;

border-radius:3px;

border:;

padding:1px;

}

.comment-profile-pic{

position:relative;


top:4px;

left:5px;

width:50px;

height:40px;



border-radius:2px;

}

.add-comment-profile_photo{

position:absolute;

top:2px;

left:1px;

width:47px;

height:36px;

border-radius:2px;

}

.coment-form{

position:absolute;

top:6px;

left:61px;

width:367px;

height:36px;

border-radius:2px;

border:1px solid grey; }

.submit-comment{


position:absolute;

top:6px;

left:434px;

width:68px;

height:40px;

border-radius:3px;


}

.bookmark{

position:absolute;

top:6px;

left:509px;

width:68px;

height:40px;

border-radius:3px;


}

.count_view{

position:absolute;

top:6px;

left:583px;

width:85px;

height:40px;

border-radius:3px;


}


.comment-div{

position:absolute;



overflow: visible;

top:580px;

margin-left:210px;

width:748px;

border-radius:1px;

border:;}

.comment-horizontal-line{

color:white; }

.comment-user-name{

color:grey;

margin:-39px 0px 0px 61px;

font-size:15px;

position:absolute;

}

.comment-text{

color:black;

margin:-20px 0px 0px 60px;

font-size:15px;

position:absolute;

}


/* Begining of edit.php page styling */

.edit-video-container{

position:absolute;



overflow: visible;

top:85px;

margin-left:209px;

width:748px;

border-radius:3px;

border:;

padding:1px;

}

.edit-video{

position:relative;

top:8px;

left:5px;


width:590px;

}

.title-video{

position:absolute;

top:-7px;

left:169px;


width:320px;


height:25px;

}

.watermark{

top:23px;

left:169px;

width:320px;

height:70px;

color:#777;

background-color:#fff;

overflow: hidden;


position:absolute;

}

.input {

border: 1px solid #A5C2C8;

color: #000000;

padding: 5px;

width: 480px;

}

.edit-button{

position:absolute;


top:56px;

left:509px;

width:68px;

height:40px;


border-radius:3px;


color:grey;

}

.delete-button{

position:absolute;


top:56px;

left:509px;

width:85px;

height:40px;

border-radius:3px;


color:grey;

}

.delete-button a{

text-decoration:none;

position:absolute;

top:10px;

margin-left:5px;

}


.home-video-title{

position:absolute;

left:9px;

}

/* Begining of bookmark.php page styling */

.bookmar-video{

position:absolute;



overflow: visible;

top:145px;

margin-left:210px;

width:885px;

border-radius:3px;

border:;

padding:1px;

}

.bookmark-header{

position:absolute;



overflow: visible;

top:83px;

margin-left:210px;

width:885px;


border-radius:3px;

border:;

padding:1px;

}

.bookmark-title{

position:relative;

margin-left:10px;

color:#cce;

}

/* Begining of edit_account.php page styling */

.edit-div-container{

position:absolute;



overflow: visible;

top:145px;

margin-left:210px;

width:885px;

border-radius:3px;

border:;

padding:1px;

}

.profile-photo-div{

position:absolute;




overflow: visible;

top:500px;

margin-left:210px;

width:885px;

border-radius:3px;

border:;

padding:1px;

}

.preview{

width:160px;

left:250px;

position:absolute;

height:160px;

}

#position_edit_form{

position:;

left:24px;

top:41px;

}

.edit_account_form

{


width:300px;

border-radius:3px;


height:40px;

}

#submit_button

{

position:relative;

width:120px;

height:50px;

left:104px;

top:-9px;

border-radius:5px;


background-color:#f4f8fb;

color:blue;

font-size:29px;

}

.view-video-div{

position:relative;



overflow: visible;

top:85px;

margin-left:210px;


width:885px;

height:605px;

border-radius:3px;

border:;

padding:1px;

}

/* home page styling*/

.most-watch-video{

position:absolute;

top:-15px;

margin-left:32px;

font-size:12px;

color:red;

}\

.styling_post_like_link{

position:absolute;

top:0px;

left:680px;

border-radius:3px;


}

.styling_like_count{

position:absolute;

top:-13px;

left:708px;

border-radius:3px;



}

.styling_unlike_button{

position:absolute;

top:21px;

left:680px;

border-radius:3px;


font-size:11px;

}

.styling_unlike_count{

position:absolute;

top:3px;

left:718px;

border-radius:3px;


}

Chapter One (1)

Registration script


Chapter one is all about the registration process of any new users who want to upload or view videos on this video sharing social network. The new user must have to register or sign up before he or she can upload or view videos. This chapter one contains the registration and login form where the user can provide some details about he or her private information. Below is the registration form where the new user can sign up.

Create a file called index.php which contains the registration form. Below is the index.php page for registration.

<! DOCTYPE >

<HTML >


<head>



<link rel="stylesheet" type="text/css" href="css/index.css"/>

</head>

<body>

<html>

<div id="registration_div">

<h2>Register to upload your videos</h1> <br>

<form name="myForm" action="exec.php" onsubmit="return(validate());" method="post">

<br><input type="text" name="firstname" placeholder="FIRST NAME" class="reg"><br>

<br> <input type="text" name="secondname" placeholder="SECOND NAME" class="reg"><br>

<br> <input type="text" name="email" placeholder="EMAIL" class="reg"><br>

<br> <td><input type="password" name="password" placeholder="PASSWORD" class="reg"><br>

<br> <input type="password" name="retype" placeholder="RE-TYPE PASSWOED" class="reg"><br><br>

Male<input type="radio" name="sex" value="male">

Female<input type="radio" name="sex" value="female"<br><br>

<font color="green">Born on</font><br>

Day<select name="day"> <option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option>/select> Month<select name="month"> <option>January</option>


<option>February</option><option>March</option><option>April</option><option>May</option><option>June</option><option>July</option><option>August</option><option>September</option><option>October</option><option>November</option><option>December</option></select>Year<select name="year" > <option>1924</option> <option>1923</option> <option>1922</option> <option>1921</option><option>1920</option><option>1919</option><option>1918</option><option>1917</option><option>1916</option><option>1915</option><option>1914</option><option>1913</option><option>1912</option><option>1911</option><option>1910</option></select><br/><br><br> <input type="hidden" name="profile_picture" value="p.jpg"> <td><input name="submit" type="submit" value="Submit" id="submit_bitton"/></td> </form> </div>

</body></html>


After creating the registration page above we need to create a file called exec.php which is indicated green above. This exec.php file above will insert all the sign up users’ details into the database.

<?phpsession_start();include('connection.php');$firstname=$_POST['firstname'];$secondname=$_POST['secondname'];$email=$_POST['email'];$sex=$_POST['sex'];$password=$_POST['password'];$photo=$_POST['profile_picture'];$day=$_POST['day'];$month=$_POST['month'];$year=$_POST['year'];mysql_query("INSERT INTO member(firstname, secondname, email, sex, password, profile_picture, day, month, year)VALUES('$firstname', '$secondname', '$email', '$sex', '$password', '$photo', '$day', '$month', '$year')");header("location: home.php");mysql_close($con);

?>

Next is to create a php page called home.php where the sign up or newly registered user will be taken to. This home.php page is the page


that will show the user profile names, user profile photo, uploading videos, viewing videos, editing videos information, like and dislike videos, add comment to any videos and many more.

// include the below php script at the top of the <!DOCTYPE> in the home.php page

<?php

session_start();include("connection.php");//connect to the databaseinclude("function.php");//This is the include file above indicated above

?>

<!DOCTYPE ><HTML >

<head >

</head >

<body >

welcome to 23tutorials.com video social network learning script for newbie’s programmers.Hopes you enjoyed this tutorial. Follow the entire above video social network tutorials and you will benefit and learn new trick to create your own social network.Thanks

</body >

</html >


Chapter (2)

Login script

This is the login form where user can login and when they have finished their sign up process completely. We are still


going to use the index.php page where but this time will are going to add only the login form. The user must login to have access to all activities happening on the social networks.

Below is the index.php page which contains the login form.<?php //Start sessionsession_start(); //Unset the variables stored in sessionunset($_SESSION['SESS_MEMBER_ID']);unset($_SESSION['SESS_FIRST_NAME']);unset($_SESSION['SESS_LAST_NAME']);?>

<!DOCTYPE >

<HTML >

<head>



</head>

<body>

<html>

<nav id="index_page_header">

<div id="login_div">

<form name="loginform" action= "loginscript.php" method="post">

<input type="text" name= "login_email" placeholder="email" id="login_email"> <br>

<input type="text" name="login_password" placeholder="password" id="login_password">

<input type="submit" name="login_button" value="login" id="login_button">

<?php


if( isset($_SESSION['ERRMSG_ARR']) && is_array($_SESSION['ERRMSG_ARR']) && count($_SESSION['ERRMSG_ARR']) >0 ) {

echo'<ul class="err">';

foreach ($_SESSION['ERRMSG_ARR'] as $msg) {

echo'<li>',$msg,'</li>';

}

echo'</ul>';

unset($_SESSION['ERRMSG_ARR']);

}

?>

</form>

</div>

</nav>

</body>

</html>

Next is to create a php file called loginscript.php which will validate the information the user provide to login. This loginscript.php will check if the user already has an account on this video website and it ill checks if the user has provided wrong information to login.

<?php //Start session session_start(); //Include database connection details require_once('connection.php');


//Array to store validation errors $errmsg_arr = array(); //Validation error flag $errflag = false; //Function to sanitize values received from the form. Prevents SQL injection function clean($str) { $str = @trim($str); if (get_magic_quotes_gpc()) { $str = stripslashes($str); } return mysql_real_escape_string($str); } //Sanitize the POST values $email = clean($_POST['login_email']); $password = clean($_POST['login_password']); //Input Validations if ($email == '') { $errmsg_arr[] = 'email missing'; $errflag = true; } if ($password == '') { $errmsg_arr[]= 'Password missing'; $errflag = true; } //If there are input validations, redirect back to the login form if ($errflag) { $_SESSION['ERRMSG_ARR'] = $errmsg_arr; session_write_close(); header("location: index.php"); exit(); } //Create query $qry="SELECT * FROM member WHERE email='$email' AND password='$password' "; $result=mysql_query($qry); //Check whether the query was successful or not if ($result) { if (mysql_num_rows($result) > 0) { //Login Successful session_regenerate_id(); $member = mysql_fetch_assoc($result);


$_SESSION['SESS_MEMBER_ID'] = $member['member_id']; $_SESSION['SESS_FIRST_NAME'] = $member['email']; $_SESSION['SESS_LAST_NAME'] = $member['password']; session_write_close(); header("location: home.php"); exit(); } else { //Login failed $errmsg_arr[] = 'email and password not found'; $errflag = true; if ($errflag) { $_SESSION['ERRMSG_ARR'] = $errmsg_arr; session_write_close(); header("location: index.php"); exit(); } } } else { die("Query failed"); } ?>

Next is the home.php page where when the user has sign up or login, it will take him into the home.php page where he can upload profile photo, upload videos, add comments related to video, watch video, bookmark video. plesae take note that the home.php page will be used throughout the upcoming steps in this tutorial.

//Below is the home page that the login user will be taken after login process is completed.

// include the below php script at the top of the <!DOCTYPE> in the home.php page


<?phpsession_start();include("connection.php");//connect to the databaseinclude("function.php");//This is the include file above indicated above?>

<!DOCTYPE ><HTML >

<head >

</head >

<body >

welcome to 23tutorials.com social network learning script for newbie’s programmers.Hopes you enjoyed this tutorial. Follow the entire above video social network tutorials and you will benefit and learn new trick to create your own social network. Thanks</body >

</html >

Chapter (3)

How to upload video script

After when the user has login successfully, he or she can upload video that can be or will be view by everyone on the video


social network. We are using the home.php page mention above where only the login user can upload and view videos.

Below is the database that will store the uploaded videos.

CREATE TABLE IF NOT EXISTS `video_upload` ( `video_id` int(11) NOT NULL AUTO_INCREMENT, `member_id` varchar(100) NOT NULL, `firstname` varchar(100) NOT NULL, `secondname` varchar(30) NOT NULL, `raw_video_title` varchar(1000) NOT NULL, `video_title` varchar(1000) NOT NULL, `description` varchar(100) NOT NULL, `date` varchar(30) NOT NULL, PRIMARY KEY (`video_id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5;

Next is the home.php page contains the video uploading form.

<?php session_start(); include ("connection.php"); // connect to the database include("function.php"); ?>


<!DOCTYPE >

<HTML >

<head>


<link rel="stylesheet" type="text/css" href="css/home.css"/>


<link href="css/font-awesome.css" rel="stylesheet">

//below is the Jquery files, please use the one that you have or visit www.23tutorials.com and get it for free.<script type="text/javascript" src="script/jquery-1.8.0.min.js"></script>

//below is another Jquery file, please use the one that you have or visit www.23tutorials.com and get it for free<script type="text/javascript" src="script/jquery.form.js"></script>

<script type="text/javascript" >

//below Jquery code is used for showing loading icon while uploading videos

$(document).ready(function() {

$('#img').live('change', function() {

$("#preview").html('');

$("#preview").html('<img src="icons/loader.gif" alt="Uploading...."/>'); // please create a folder called icons and have an image with a gif extension for showing the loading icons when uploading video.

$("#formphoto").ajaxForm( {

target: '#preview'




}).submit();

});

});

</script>

</head>


</nav>

<body>

<div class="upload-video-div">

<div class="fileUpload">

<span class="custom-span">+</span>

<p class="custom-para">Add Images</p>

<form id="formphoto" method="post" enctype="multipart/form-data" action='videoupload.php'>

<input type="file" name="photoname" id="img" class="upload"/>

<input type="hidden" name="descripe" value=""/>

</form>

</div>


<div id='preview'>

</div>

</div>

</body>

</html>

Next is the php file call "videoupload.php" indicated above which will validate and store the login user uploaded video into the database.

<?php

session_start();

include("connection.php"); // connect to the database

include("function.php");

$member_id= $_SESSION["logged"];

$firstname= $_firstname;

$secondname = $_secondname;

$path = "videos/"; // please create a folder called videos for keeping the uploaded videos

$video_formats = array("mp4");

$valid_formats = array("mp4", "flv", "avi", "wmv" , "mpg");


if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")

{

$photo_name = $_FILES['photoname']['name'];

$size = $_FILES['photoname']['size'];

if (strlen($photo_name))

{

list($txt, $ext) = explode(".", $photo_name);

if(in_array($ext,$video_formats))

{ if($size<(1000000*1000000))

{ $video_name = $_FILES['photoname']['name'];

$tmp = $_FILES['photoname']['tmp_name'];

if(move_uploaded_file($tmp, $path.$video_name))

{

mysql_query("INSERT INTO video_upload(member_id, firstname, secondname, raw_video_title, video_title, date)

VALUES('$member_id', '$firstname', '$secondname', '$video_name', '$video_name', NOW() )");

//echo "<img src='uploads/".$image_name."' class='preview'>";

echo "<video width='260' height='126' controls class='preview'>

<source src='videos/".$video_name."' </video>";

}


else

echo "failed";

}

else

echo "video file size max 10000 MB";

}

else

echo "Incorrect VIDEO format..";

}

else

echo "Choose a video please..!";

exit;

}

?>

Chapter (4)

How login user can view his all uploaded videos script

This is the view video script where login user can view all the uploaded videos and he / she can choose which video to watch.

Below is the database where all the user uploaded videos will be stored.


Below is the database for the storing all the uploaded videos and where we are going to select the login user uploading videos he want to see.


Next create a page called home.php after when you are done with the login and signup steps in the tutorials which will contain the video uploading form. Below is the home.php where the login user can upload videos and share it. Remember that this home.php will be used throughout this tutorial as from now.

<?php session_start();include ("connection.php"); // connect to the database include("function.php"); ?>

<!DOCTYPE >

<HTML >


<head>





<script type="text/javascript" src="script/jquery-1.8.0.min.js"></script>

<script type="text/javascript" src="script/jquery.form.js"></script>

</head>


</nav>

<body>

<html>

<div class="user-video-upload">

<?php

$member_id =$_SESSION["logged"];

$result= mysql_query("select * FROM `video_upload` LIMIT 6 ");

while($row=mysql_fetch_array($result))

{

echo'<ul id="native">';

echo'<li>';

echo"


<div class='user-preview'>

<a href='watch_video.php?video_id=".$row['video_id']."'> <video width='260' height='126'>

<source src='videos/".$row['raw_video_title']."'> </video> </a>

<p class='home-video-title'>".$row['video_title']."</p>

</div> ";

echo'</li>';

echo'</ul>';

}

?>

</div>

</body>

</html>

Chapter (5)

How to watch videos script

This is the watch video script where the login user can watch any uploaded videos he / she clicks in order to watch it. We are going to use two pages the first is the home.php page and the second will be watch_video.php page.


Below is the database where all the uploaded videos will be stored.

Below is the database for the storing all the uploaded videos and where we are going to select the video we want to see.


Next create a page called home.php after when you are done with the login and signup steps in the tutorials which will contain the video uploading form.

Below is the home.php where the login user can view and click any videos he / she want to watch. This videos have a link


(watch_video.php) which will take the user to a page called watch_video.php where he can watch the video.


<!DOCTYPE >

<HTML >


<head>







</head>

<body>

<html>


</nav>


<?php

$member_id=$_SESSION["logged"];

$result= mysql_query("select * FROM `video_upload` LIMIT 6 ");


{


echo'<li>';

echo"

<div class='user-preview'> //when the user clicks the link of the video below it will take him to the page watch_video.php where he can watch the video.





</div> ";

echo'</li>';

echo'</ul>';

}

?>

</div>

</body>

</html>

Next is the php page called "watch_video.php" where the user can watch the video he clicks from the home.php page above.


<?php session_start();

include ("connection.php"); // connect to the database

include ("function.php");

$video_id = $_GET["video_id"]; ?>

<!DOCTYPE >

<HTML >

<head>








</head>

<body>


</nav>

<div class="watch-video-div">

<?php

$result= mysql_query("select * FROM `video_upload` WHERE video_id='$video_id'");


{

echo"

<div class='watch-video'>

<video width='755' height='420' controls>

<source src='videos/".$row['video_title']."'> </video>

</div> ";

}

?>

</div>


</body>

</html>

Chapter (6)

Uploading profile picture script


This is the change profile photo script where the login user can change his profile photo.

Below is the database for the storing the uploaded profile photo.

CREATE TABLE IF NOT EXISTS `member` (`member_id`int(11) NOT NULL AUTO_INCREMENT,`firstname` varchar(30) NOT NULL,`secondname` varchar(30) NOT NULL,`email` varchar(30) NOT NULL,`sex` varchar(100) NOT NULL,`password` varchar(30) NOT NULL,`profile_picture` varchar(30) NOT NULL,`day` varchar(100) NOT NULL,`month` varchar(30) NOT NULL,`year` varchar(100) NOT NULL,PRIMARY KEY (`member_id`)) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

Next create a page called home.php that contains the form for uploading profile picture.

<?php session_start();


include ("connection.php"); // connect to the database include("function.php"); ?>

<!DOCTYPE >

<HTML >

<head>







<script type="text/javascript" >

//upload profile photo

$(document).ready(function() { $('#img').live('change', function() {

$("#preview").html('');

$("#preview").html('<img src="icons/loader.gif" alt="Uploading...."/>');

$("#formphoto").ajaxForm({

target: '#preview'

}).submit();

});

});

</script>

</head>


<body>


</nav>



<div class="profile-photo-div">

<div class="fileUpload">

<span class="custom-span">+</span>

<p class="custom-para">Add Images</p>

<form id="formphoto" method="post" enctype="multipart/form-data" action='upload_photo.php'>

Upload your image <input type="file" name="photoname" id="img" class="upload"/>

</form>

</div>

<div id='preview'>

</div>

</div>

</body>

</html>

Next is the php file called "upload_photo.php" which will insert the updated profile photo into the database?

<?php

session_start();



$member_id= $_SESSION["logged"];

$path = "uploads/"; // uploads is the folder for storing the uploaded profile photo.

$photo_formats = array("jpg", "png", "gif", "bmp" , "PNG" , "JPG", "GIF");

if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")

{

$photo_name = $_FILES['photoname']['name'];

$size = $_FILES['photoname']['size'];

if(strlen($photo_name))

{

list($txt, $ext) = explode(".", $photo_name);

if(in_array($ext,$photo_formats))

{

if($size<(9000*9000))

{

$image_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;

$tmp = $_FILES['photoname']['tmp_name'];

if(move_uploaded_file($tmp, $path.$image_name))

{

mysql_query("UPDATE member SET profile_picture='$image_name' WHERE


member_id='$member_id'");

echo "<img src='uploads/".$image_name."' class='preview' >";

}

else

echo "failed";

}

else

echo "Image file size max 9 MB";

}

else

echo "Incorrect image format..";

}

else

echo "Choose an image..!";

exit;

}

?>

Chapter (7)

Show user profile name / photo script


This is the view profile names and photo script where the login user can view his profile names and photo.

Below is the database for the storing the uploaded profile names and photo.

CREATE TABLE IF NOT EXISTS `member` (`member_id`int(11) NOT NULL AUTO_INCREMENT,`firstname` varchar(30) NOT NULL,`secondname` varchar(30) NOT NULL,`email` varchar(30) NOT NULL,`sex` varchar(100) NOT NULL,`password` varchar(30) NOT NULL,`profile_picture` varchar(30) NOT NULL,`day` varchar(100) NOT NULL,`month` varchar(30) NOT NULL,`year` varchar(100) NOT NULL,PRIMARY KEY (`member_id`)) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

Next create a page called home.php that shows the profile names and picture.



<!DOCTYPE >

<HTML >

<head>







</head>

<body>


</nav>

<div class="profile-photo">

<?php

/* select the names of the login from the database */

$member_id =$_SESSION["logged"];

$result = mysql_query("SELECT * FROM `member` WHERE `member_id`='$member_id' LIMIT 1");

echo "<table border='0px' id='profile_name'>


";

while($row = mysql_fetch_array($result))

{

echo "<tr>";

echo "<img src='uploads/".$row['profile_picture']."' class='profile_pic'>";

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

echo "</tr>";

}

echo "</table>";

?>

</div>

</body>

</html>

Chapter (8)

How to search video script

This is the search engine script where the login user can search for any videos he likes in Jquery.

Below is the database for the storing the videos that will be searched.

CREATE TABLE IF NOT EXISTS `video_upload` ( `video_id` int(11) NOT NULL AUTO_INCREMENT, `member_id` varchar(100) NOT NULL, `firstname` varchar(100) NOT NULL, `secondname` varchar(30) NOT NULL, `raw_video_title` varchar(1000) NOT NULL, `video_title` varchar(1000) NOT NULL, `description` varchar(100) NOT NULL, `date` varchar(30) NOT NULL,


PRIMARY KEY (`video_id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5;

Next create a page called home.php which contains the search engine form and it shows the search result.


<!DOCTYPE >

<HTML >

<head>




<script type="text/javascript">

$(function(){

$(".search").keyup(function()

{

var searchid = $(this).val();

var dataString = 'search='+ searchid;

if(searchid!='')

{

$.ajax({

type: "POST",

url: "search.php",

data: dataString,

cache: false,

success: function(html)

{

$("#result").html(html).show();

}

});

}return false;

});

jQuery("#result").live("click",function(e){

var $clicked = $(e.target);

var $name = $clicked.find('.name').html();

var decoded = $("<div/>").html($name).text();

$('#searchid').val(decoded);

}); jQuery(document).live("click", function(e) {

var $clicked = $(e.target);

if (! $clicked.hasClass("search")){

jQuery("#result").fadeOut();

}

});

$('#searchid').click(function(){

jQuery("#result").fadeIn();

});

});

</script>

</head>

<body>


<div id="noticeboard">

<div class="content">

<input type="text" class="search" id="searchid" placeholder="Search for video" />


<div id="result">

</div>

</div>

/<div>

</nav>

</body>

</html>

Next is the php file call "search.php" which search for the videos in the database.

<?php

include('connection.php');

if ($_POST)

{

$query = $_POST['search'];

$sql = mysql_query("SELECT * FROM `video_upload` WHERE `video_title` LIKE '%$query%'

UNION

SELECT * FROM `video_upload` WHERE `description` LIKE '%$query%' LIMIT 15 ") or die (mysql_error());

$num_of_row = mysql_num_rows($sql);

if ($num_of_row > 0 ) {

while($row = mysql_fetch_array($sql))


{

$id = $row['video_id'];

$description = $row['description'];

if ($description!='')

{

echo "<a href='watch_video.php?video_id=".$id."' style='color:white; text-decoration:none;' class='message_link'>

". $row['description']." </a>";

echo "<hr width='540px' style='color:white;'>";

}else{

echo "<a href='watch_video.php?video_id=".$id."' style='color:white; text-decoration:none;' class='message_link'>

".$row['video_title']."</a>";

echo "<hr width='540px' style='color:white;'>";

}

}

}

else

{

echo "<font color='red' size='4' >No result found!</font>";

}

}

?>


Chapter 8: How to edit video information script

YouTube edit videos information in database. Welcome to our tutorial we hope you enjoy it

This is the edit video information script where the login user can edit or change his uploaded video information.Below is the database for editing the videos information in the database.



Next create a page called home.php which conains the login user's videos to be edited.


<!DOCTYPE >

<HTML >

<head>








</head>

<body>

<html>


</nav>

<div class="edit-video-container">

<?php

$result = mysql_query("select * FROM `video_upload` WHERE member_id='$member_id' LIMIT 5");


{

echo "

<div class='edit-video'>

<video width='155' height='100' >

<source src='videos/".$row['raw_video_title']."'> </video>

<form action='video_description.php' method='post'>

<input type='text' name='videoe_title' value='".$row['video_title']."' class='title-video' placeholder='Title of the video' title='Please give a title of your video'>

<div class='UIComposer_Box'>

<textarea class='watermark' class='input' name='description_text' title='Please descript your video'> ".$row['description']." </textarea>


<input type='hidden' name='video_id' value='".$row['video_id']."' class='edit-button'>

<input type='submit' name='submit_info' value='Save' class='edit-button' title='save the information'>

</div>

</form>

</div> <hr> ";

}

?>

</div> </body>

</html>

Next is the php file called "video_description.php" to insert the video edit information into the in the database.

<?php

session_start();

include("connection.php");


$my_id = $_SESSION["logged"];

$video_title = $_POST['videoe_title'];

$video_desscription = $_POST['description_text'];

$video_id = $_POST['video_id'];

mysql_query("UPDATE video_upload SET video_title='$video_title',description='$video_desscription' WHERE video_id='$video_id'") or

die(mysql_error());


{

echo "<script type=\"text/javascript\">

alert(\"Video info has been edited\");

window.location='home.php';

</script>";

}

?>


Chapter (9)

How delete video script

This is the edit video information script where the login user can edit or change his uploaded video information.Below is the database for editing the videos information in the database.


Next create a page called home.php which contains the login user's videos to be edited.



<!DOCTYPE >

<HTML >

<head>








</head>

<body>

<html>


</nav>

<div class="edit-video-container">

<?php

$result= mysql_query("select * FROM `video_upload` WHERE member_id='$member_id' LIMIT 5");


{

echo "

<div class='edit-video'>

<video width='155' height='100' >

<source src='videos/".$row['raw_video_title']."'> </video>

<form>

<input type='text' name='videoe_title' value='".$row['video_title']."' class='title-video' placeholder='Title of the video' title='Please give a title of your video

<div class='UIComposer_Box'>

<textarea class='watermark' class='input' name='description_text' title='Please descript your video'> ".$row['description']." </textarea>

</div>

</form>


<div class='delete-button'> <a href='delete_upload_video.php?delete=".$row['video_id']."' title='Delete this video'> Delete video</a></div>

</div> <hr> ";

}

?>

</div>

</body>

</html>

Next is the php file called "delete_upload_video.php" above to delete the login user video into the in the database.

<?php

session_start();


include("function.php"); //get the id (member_id) for the login user

?>

<?php

$myfriend = $_GET['delete'];

$me = $_SESSION["logged"];

$query = mysql_query("delete from video_upload WHERE member_id = '" . $_SESSION["logged"] . "' AND video_id = '" . $_GET['delete'] . "' ");

{



alert(\"Video has been deleted\");

window.location='delete_video.php';

</script>";

}

?>


Chapter: (10)

How to add comment to a video script

This is the add comment on video script where the login user can add comment that is related to the video that the user is watching.

Below is the database where all the user uploaded videos will be stored.

Below is the database for the storing all the uploaded videos and where we are going to select the video we want to see.


Below is the database for storing the comment that is related to a video database.

CREATE TABLE IF NOT EXISTS `video_comment` (`comment_id` int(11) NOT NULL AUTO_INCREMENT,`video_id` int(11) NOT NULL,`memberid` int(11) NOT NULL,`date` date NOT NULL,`comment` varchar(5000) NOT NULL,PRIMARY KEY (`comment_id`)) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;

Next create a page called home.php aftre when you are done with the login and signup steps in the tutorials which will contain the video uploading form.

Below is the home.php where the login user can view and click any Complete and download this tutorial at www.23tutorials.com for free

videos he / she want to watch. These videos have a link (watch_video.php) watch will take the user to a page called watch_video.php where he can watch the video.


<!DOCTYPE >

<HTML >

<head>







</head>

<body>

<html>



</nav>


<?php

$member_id = $_SESSION["logged"];

$result = mysql_query("select * FROM `video_upload` LIMIT 6 ");


{


echo'<li>';

echo"

<div class='user-preview'> //below is the link that will take the user to the page where he will add comment to the video he is watching.




</div> ";

echo'</li>';

echo'</ul>';

}

?>

</div>

</body></html>


Next is the php file called "watch_video.php" as indicated above where the user can watch the video he clicks from the home.php page above.

<?php session_start();include ("connection.php"); // connect to the database include ("function.php"); $video_id = $_GET["video_id"]; // the id of the video that has been click.?>

<!DOCTYPE >

<HTML >

<head>







<script type="text/javascript">

$(document).ready(function(){

var form = $('#form');

var submit = $('#search');


form.on('submit', function(e) {

// prevent default action

e.preventDefault();

// send ajax request

$.ajax({

url: 'insert_comment.php', //insert the comment into the database without refreshing the page. The file is below.

type: 'POST',

cache: false,

data: form.serialize(), //form serizlize data

beforeSend: function(){

// change submit button value text and disabled it

submit.val('Submitting...').attr('disabled', 'disabled');

},

success: function(data){

// reset form and button

form.trigger('reset');

submit.val('comment').removeAttr('disabled');

},

error: function(e){

alert(e);

}

});

});


});

</script>

</head>

<body>


</nav>



<div class="add-comment">

<div class="comment-profile-pic">

<?php

/* profile photo of user who commented */

$member_id=$_SESSION["logged"];

$result = mysql_query("SELECT * FROM `member` WHERE `member_id`='$member_id' LIMIT 1");

while($row = mysql_fetch_array($result))

{

echo "<tr>";

echo "<img src='uploads/".$row['profile_picture']."' class='add-comment-profile_photo'>";

echo "</tr>";

}

echo "</table>";

?>

</div>

<?php

/* add comment onto video */

echo"

<form method='post' id='form'>

<input type='text' name='comment_text' placeholder='Add a comment on this video' class='coment-form'>

<input type='hidden' value='$video_id' name='video_id'>

<input type='submit' name='submit1' value='comment' class='submit-comment' id='search'>

</form>

";

?>

<br>

</div>



<div class="comment-div">

<?php

$comment = mysql_query("SELECT * FROM video_comment WHERE video_id='$video_id' ORDER BY date DESC LIMIT 7");

while($rows = mysql_fetch_array($comment)){

$userid=$rows["memberid"];

$member=mysql_query("SELECT * FROM member WHERE member_id='$userid'");

$row = mysql_fetch_array($member);

echo'<div class="comment-profile-pic">';

echo "<img src='uploads/".$row['profile_picture']."' class='add-comment-profile_photo'>";

echo'</div>';

echo'<p class="comment-user-name">'.$row["firstname"].' '.$row["secondname"].'</p>';

echo'<p class="comment-text">'.$rows["comment"].'</p>';

echo'<hr class="comment-horizontal-line">';

}

?>

<br>

</div>

</body>

</html>

Next is the php file called "insert_comment.php" indicated above which will insert the comment that is related to a video.

<?php

session_start();

include("connection.php");


?>

<?php

$comment_text=$_POST['comment_text'];

$sender= $_SESSION["logged"];

$video_id=$_POST["video_id"];

$query=mysql_query("INSERT INTO video_comment(comment,date,memberid,video_id)


VALUES('$comment_text',NOW(),'$sender','$video_id') ") or

die(mysql_error());

while($row=mysql_query($query)){

//$comment_text=$row['comment'];


alert(\"comment added\");

window.location='watch_video.php';

</script>";

}

?>

Please follow the remaining chapters of this tutorial at www.23tutorials.com for free and many more tutorials like how to create YouTube, Facebook, twitter and many more.



Thanks for following this video sharing social network tutorial ebook.

You are allowed to share this ebook with your friends or colleagues. We have many tutorials like;

How to create Facebook in php and JavaScript,

How to create twitter in php and JavaScript,

How to create Gmail in php and JavaScript

And many more free tutorials all for free.

We also have plug-in like who is online (showing online users),

Facebook search engine tutorials and many more for free.


Visit our website www.23tutorials.com and get all the tutorials that you want, you can even request a tutorial and will help you.



you tube tutorial

Internet