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………………………………………………………………………
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
/* 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;
background-color:#dddddd;
border:0px solid #ccc;
color:black;
}
.left-bar-links a {
text-decoration:none;
color:black;
}
#noticeboard{
width:780px;
height:35px;
border:0px solid #cce;
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;
border:1px solid #cce;
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;
background-color:white;
-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;
background-color:white;
border:0px solid grey;
border-radius:0px;
}
.watch-video{
position:relative;
border:0px solid #cce;
border-radius:px;
margin-left:-2px;
}
/* div for adding comment */
.add-comment{
position:absolute;
background-color:white;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
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;
background-color:white;
border:1px solid grey;
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;
border:1px solid grey;
}
.bookmark{
position:absolute;
top:6px;
left:509px;
width:68px;
height:40px;
border-radius:3px;
border:1px solid grey;
}
.count_view{
position:absolute;
top:6px;
left:583px;
width:85px;
height:40px;
border-radius:3px;
border:1px solid grey;
}
.comment-div{
position:absolute;
background-color:#dddddd;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
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;
background-color:white;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: visible;
top:85px;
margin-left:209px;
width:748px;
border-radius:3px;
border:;
padding:1px;
}
.edit-video{
position:relative;
top:8px;
left:5px;
border:0px solid grey;
width:590px;
}
.title-video{
position:absolute;
top:-7px;
left:169px;
border:1px solid grey;
width:320px;
height:25px;
}
.watermark{
top:23px;
left:169px;
width:320px;
height:70px;
color:#777;
background-color:#fff;
overflow: hidden;
border:1px solid black;
position:absolute;
}
.input {
border: 1px solid #A5C2C8;
color: #000000;
padding: 5px;
width: 480px;
}
.edit-button{
position:absolute;
background-color:#cce;
top:56px;
left:509px;
width:68px;
height:40px;
border-radius:3px;
border:1px solid #ccc;
color:grey;
}
.delete-button{
position:absolute;
background-color:#cce;
top:56px;
left:509px;
width:85px;
height:40px;
border-radius:3px;
border:1px solid #ccc;
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;
background-color:white;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: visible;
top:145px;
margin-left:210px;
width:885px;
border-radius:3px;
border:;
padding:1px;
}
.bookmark-header{
position:absolute;
background-color:white;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
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;
background-color:white;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: visible;
top:145px;
margin-left:210px;
width:885px;
border-radius:3px;
border:;
padding:1px;
}
.profile-photo-div{
position:absolute;
background-color:white;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
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;
border:1px solid #cce;
height:40px;
}
#submit_button
{
position:relative;
width:120px;
height:50px;
left:104px;
top:-9px;
border-radius:5px;
border:1px solid #cce;
background-color:#f4f8fb;
color:blue;
font-size:29px;
}
.view-video-div{
position:relative;
background-color:white;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
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;
border:0px solid grey;
}
.styling_like_count{
position:absolute;
top:-13px;
left:708px;
border-radius:3px;
border:0px solid grey;
}
.styling_unlike_button{
position:absolute;
top:21px;
left:680px;
border-radius:3px;
border:0px solid grey;
font-size:11px;
}
.styling_unlike_count{
position:absolute;
top:3px;
left:718px;
border-radius:3px;
border:0px solid grey;
}
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.
