YouTube video manager with PHP, MYSQL & jQuery

Implémentation

A travers ce tutoriel, nous allons souvent faire référence au côté public et au côté admin de l'interface. Je voulais juste préciser, dans un soucis de clarification, que le côté public réfère à la page sur laquelle vous allez afficher vos vidéos, c'est à dire une page sur votre site, qui est ouverte au public. Au contraire, le côté admin, fait référence à une page de votre interface d'administration, seulement accessible par des personnes autorisées, et qui ont le pouvoir d'ajouter et supprimer des vidéos.

Le plan d'action

Afin de résumer ce qui est couvert dans cet article, voici une petite liste des différentes étapes nécessaire pour tout faire marcher.

1. Inclure les fichiers
2. Changer quelques variables
3. Créer la table SQL
4. Appeler la méthode getPublicSide du coté public
5. Appeler la méthode getAdminSide du coté admin
6. Gérer vos vidéos

Inclure les fichiers

Avant de commencer, regardons les fichiers qu'il vous faudra inclure afin de faire marcher tout cela. Côté public, vous aurez besoins de 6 fichiers. La librairie jQuery, la classe PHP de l'interface, son fichier JavaScript, et sa feuille de style, mais aussi le script FancyBox et ses styles afin de présenter les vidéos dans un lecteur intégré et sophistiqué:

//Video Manager PHP Class
include("Chemin_vers/MyVideo.php");
 
//Scripts (jQuery + FancyBox Plugin + Video Manager Script)
<script type="text/javascript" src="Chemin_vers/jquery.js"></script>
<script type="text/javascript" src="Chemin_vers/jquery.fancybox.js"></script>
<script type="text/javascript" src="Chemin_vers/video_manager.js"></script>
 
//CSS (FancyBox CSS + Video Manager CSS)
<link rel="stylesheet" type="text/css" href="Chemin_vers/fancy.css" />
<link rel="stylesheet" type="text/css" href="Chemin_vers/video_manager.css" />

Côté admin, vous n'aurez pas besoin de la FancyBox ,donc pas besoin d'inclure les 2 derniers fichiers.

Changer les variables

Il y a deux variables dans l'application que vous devez / pouvez changer afin de correspondre à vos propres paramètres.

Dans le fichier MyVideo.php ligne 3 vous verrez: define('table_name','videos'). Cela veut dire que la table SQL que nous allons utiliser sera appelée videos. Si vous voulez changer cela, changez simplement le mot videos par quelque chose d'autre.

Dans le fichier video_manager.js, ligne 1, vous pouvez voir: var pageurl = '/resources/video_manager'. C'est l'url du côté admin, vous devez changer cette url par celle de votre propre côté admin.

La Table SQL

Comme mentionné dans l'introduction, les vidéos que vous allez manager seront sauvegardées dans une table mysql. Grâce à l'API de YouTube, nous pouvons commencer à implémenter notre solution avec seulement 3 champs, un id, un titre et une url. Le code de la table peut donc se résumer à ceci:

//The Table SQL Code
CREATE TABLE `videos` (
  `video_id` int(11) NOT NULL auto_increment,
  `video_url` varchar(255) default NULL,
  `video_title` varchar(255) default NULL,
  PRIMARY KEY  (`video_id`)
)

Il existe une méthode dans la classe PHP appelée createVideoTable. Cette méthode, si appelée, créera la table dans votre base de données si celle ci n'existe pas déjà. Du coup si vous voulez vous sauver la peine d'ouvrir un éditeur SQL comme phpmyadmin, il vous suffit d'appeler cette méthode et la classe l'installera pour vous.

En savoir plus sur la classe PHP

La classe a été construite en se basant sur la structure de la table SQL. On retrouve donc les 3 même attributs (id, url et titre). Les quelques lignes de code suivantes vous montrent à des fins d'information l'initialisation des variables, le constructeur, et une méthode appelée load, que j'utilise souvent:

define("table_name","myvideos");
 
class MyVideo {
 
  //=======================================//
  //==========> Class Variables <==========//
  //=======================================//
  private $id;		//Id of the Video
  private $url;		//YouTube Url
  private $title;	//Video Title
 
 
//=======================================================================================//
//================================= Core Methods ========================================//
//=======================================================================================//
 
 
  //=======================================//
  //============> Constructor <============//
  //=======================================//
  public function __construct($id=0,$url="",$title="")
  {
    $this->id=$id;
    $this->url = $url;
    $this->title = $title;
  }
 
 
  //=======================================//
  //======> Load a Video Via its ID <======//
  //=======================================//
  public function load($id){
    //Select the Video Information from DB
    $sql="SELECT * FROM ".table_name." WHERE video_id = $id LIMIT 1";
    $result=array(); $video = new MyVideo();
    $req = mysql_query($sql) or die("Erreur SQL !<br>".$sql."<br>".mysql_error());
 
    //Assign those Infomation to a MyVideo Object
    while($data= mysql_fetch_assoc($req)) {
      $MyVideo->id = $data[video_id];
      $MyVideo->url = $data[video_url];
      $MyVideo->title = $data[video_title];
    }
 
    return $MyVideo;    
  }
 
}

Si cela vous intérresse d'en savoir un peu plus, dans le code précédent, nous pouvons voir les 3 variables de la classe lignes 6, 7 et 8, et le constructeur lignes 19 à 24. Vous pouvez passer des arguments au constructeur si vous voulez les assigner à l'objet directement.

Entre les lignes 30 et 44, vous pouvez voir la méthode load. Cette méthode prend simplement un id de vidéo en paramètre, et va chercher dans la base de données les informations liées à cette vidéo. Ces information sont ensuite assignées à un objet MyVideo, qui est finalement retourné. En d'autres termes, si vous passez le nombre 1 à cette méthode, elle vous retournera un objet dont les variables correspondent à la vidéo numéro 1 dans la base de données.

Je décris juste se qui se passe avec un peu plus de détails pour ceux que cela intéresse, si le code n'est pas vraiment votre tasse thé, ne vous inquiétez pas, vous pourrez tout faire marcher sans connaissances techniques poussées, en voici la preuve:

Côté public: Installation Rapide

Ce qui est très pratique avec cette classe, c'est que si vous voulez juste la faire marcher rapidement et sans prise de tête, il vous suffit d'inclure les fichiers, créer la table sql (en appelant une méthode comme expliqué précédemment). Ensuite, vous vous rendez sur la page où vous désirez afficher les vidéos, et il vous suffit d'appeler la méthode getPublicSide.

//On your Page:
echo'
<div id="publicside">
  <h3>Public side : Your List Of Videos</h3>';
  MyVideo::getPublicSide();
echo'</div>';

Côté public: un peu plus de détails

A nouveau, si cela vous intéresse d'en savoir un peu plus, regardons de plus près le code impliqué.

//MyVideo::getPublicSide:
  public function getPublicSide(){
    echo MyVideo::getThumbnailsList();
  }
 
//MyVideo::getThumbnailsList: 
  public function getThumbnailsList(){
 
    $thumbdom="<ul>"; $playerdom="";
 
    //Get The videos from DB
    $videolist = MyVideo::getrecords();
 
    //Loop Through Them
    if(!empty($videolist)){foreach($videolist as $video){
 
      //Get YouTube Id
      $youtubeid = str_replace("watch?v=","",end(explode("/",$video[video_url])));
      $youtubeid = reset(explode("&",$youtubeid));
 
      //Youtube video File + Youtube video Thumbnail
      $thumb = "http://img.youtube.com/vi/$youtubeid/default.jpg";
      $file = "http://www.youtube.com/v/$youtubeid";
 
      //Build Up your list of video
      $thumbdom.='<li>
      <a class="fancy" href="#video'.$video[video_id].'" title="'.$video[video_title].'">
        <img src="'.$thumb.'" alt="'.$video[video_title].'" />
      </a>
      </li>';
 
      //Also adds the corresponding player for the video
      $playerdom.='<div class="video_player_wrap" id="video'.$video[video_id].'">
        <embed style="width:400px;height:350px" src="'.$file.'&autoplay=1&hl=en&fs=1
        &rel=0&color1=0x3a3a3a&color2=0x999999" 
        type="application/x-shockwave-flash" allowscriptaccess="always" 
        allowfullscreen="true" width="320" height="265"></embed>
      </div>'."\n";
    }}
    $thumbdom.="</ul>";
    $dom='<div id="thumbnailscontainer">'.$thumbdom.'</div>
    <div id="playercontainer">'.$playerdom.'</div>';
    return $dom;
  }
 

Le point de départ, c'est la méthode getPublicSide, qui est appelée sur la page désirée. Pour le moment, cette méthode fait simplement appel à une autre méthode appelée getThumbnailsList, vous pouvez bien sur ajouter votre propre code afin de mieux répondre à vos besoins.

La méthode getThumbnailsList est détaillée lignes 7 à 44. Elle fait plusieurs choses. Premièrement elle récupère la liste des vidéos présentes dans la base de données. Ensuite, elle parcours ces vidéos afin de construire une liste non ordonnée, composée des aperçus des vidéos. Ce qui est pratique, c'est que vous n'avez pas à stocker ces aperçus. Ils sont récupérés automatiquement depuis l'API YouTube.

Tout en parcourant cette liste, la méthode en profite pour construire le lecteur vidéo FancyBox, qui sera caché au chargement de la page, et révélé quand l'utilisateur cliquera sur une vidéo.

En résumé, simplement en appelant la méthode getPublicSide sur votre page, vous vous retrouvez avec une belle liste de vidéos que vous pouvez lire dans un très joli lecteur.

Côté Admin: Installation Rapide

Tout comme le côté public, afin d'installer votre interface du côté admin, il vous suffit de faire appel à une simple méthode, cette fois ci, getAdminSide. Cette méthode va récupérer la liste des vidéos que vous pouvez manager, vous présenter un formulaire que vous pourrez utiliser pour ajouter ou éditer des vidéos, et elle va réagir à vos actions afin d'effectuer les tâches que vous demandez.

//On your Page:
echo'
<div id="publicside">
  <h3>Public side : Your List Of Videos</h3>';
  MyVideo::getPublicSide();
echo'</div>';

Côté admin: un peu plus de détails

Regardons de plus près ce qui se passe du côté admin.

//MyVideo::getAdminSide:
  //====================================================//
  //=====> Generates The markup for the Admin Page <====//
  //====================================================//  
  public function getAdminSide(){	
    //Table Creation (Uncomment to create the SQL Table)
    //MyVideo::createVideoTable();
 
    //Little API to Manage the posted data
    if(!empty($_POST)){
      MyVideo::POSTManager();
    } 
    if($_POST['ajaxrequest']!=1){ //If not an ajax request
      //Get the Admin Form and the video List
      echo'
      <div id="adminwrap">
        <div id="addrecordwrap">
          <a href="#">Add a new Video</a>
        </div>
        <div id="recordform">';
          //Admin Form
          echo MyVideo::getVideoForm(0,"/resources/video_manager","post");
        echo'
        </div>
        <div id="recordlist">
          <h3>Your Videos:</h3>';
          //Video List
          echo MyVideo::getAdminList();	
        echo'</div>
      </div>';
     }
  }
 

La ligne 11 stipule que l'on fera appel au POSTManager à chaque fois que des valeurs seront postées. Nous expliqueront le rôle de ce manager un peu plus tard mais en gros il est assez intelligent pour savoir quoi faire quand on lui envoie des données, (sécuriser les valeurs, puis ajout, édition, chargement ou délétion de vidéo).

Ligne 17 nous avons le lien qui permet de faire apparaitre le formulaire quand il est cliqué.

Ligne 21 on fait appel à la méthode getVideoForm, qui retourne le code html du formulaire d'ajout / édition de vidéo.

Et finalement ligne 27 nous avons la méthode getAdmin liste, qui retourne la liste des vidéos présente dans votre base de données. Cette liste est composée du titre de la vidéo, d'un lien éditer, et d'un lien supprimer.

Nous allons maintenant étudier comment, à partir du formulaire généré par la méthode getAdminSide, il est possible d'ajouter, éditer, et supprimer des vidéos.

Ajouter des vidéos

Comme vous pouvez le voir dans la démonstration, le formulaire qui vous permet d'ajouter une vidéo est caché par défaut. Quand vous cliquez le lien 'Ajouter une vidéo', il se révèle doucement.

Le code de ce formulaire est généré par la méthode getVideoForm:

  //==========================================//
  //== Display the form to add/edit a video ==//
  //==========================================//
  public function getVideoForm($videoid=0,$action="", $method="post"){
    //Load A Video if $videoid (Used to edit an existing video)
    if( (!empty($videoid)) && (is_numeric($videoid)) ){ 
      $video = MyVideo::load($videoid); 
    } else { 
      $video = new MyVideo(); 
    }
 
    //The Form Markup (Video Url, + Video Title)
    $form='<form action="'.$action.'" method="'.$method.'">
      <div class="regrow">
        <label class="inside" for="video_url">YouTube url:</label>
        <input type="text" name="video_url" class="text" value="'.$video->url.'" />
      </div>
      <div class="regrow">
        <label class="inside" for="video_title">Video Title:</label>
        <input type="text" name="video_title" class="text" value="'.$video->title.'" />
      </div>
      <div class="regrow">
        <input type="hidden" name="video_id" value="'.$video->id.'" />
        <input type="hidden" name="todo" value="savevideo" />
        <input type="submit" class="button" value="Send" /> 
        <input id="cancelctcform" type="button" class="button" value="Cancel" />
      </div>
    </form>';
    return $form;
  }  
 

Ce qui se passe ici est plutôt simple. Nous avons un formulaire avec un input pour le titre de la vidéo, et un pour l'url YouTube.

Ce qui est intéressant, c'est qu'il est possible d'utiliser la même méthode quand on veut obtenir un formulaire d'ajout ou d'édition. En d'autres termes, si vous voulez ajouter une vidéo, les champs seront libres, sinon, ils seront pré remplis avec les titre et url de la vidéo que vous souhaitez modifier.

Pour récapituler, si vous voulez ajouter une vidéo, vous cliquez sur le lien d'ajout de vidéo, le formulaire apparait, vous remplissez les champs, et appuyez sur le bouton d'ajout.

Que se passe-t-il quand on appuie sur le bouton d'ajout?

Quand vous postez un formulaire, cela envoie les valeurs à l'interface d'administration et plus précisément, à la méthode POSTManager. Selon les valeurs envoyées, cette méthode va effectuer les actions requises en votre faveur, en d'autres termes, si vous voulez ajouter une vidéo, elle va générer une requête insert, si vous voulez modifier, une requête update, et supprimer, une requête delete.

La méthode POSTManager est définie comme suit:

 
  //=====================================================================//
  //==> Order an insert / update or delete based on the posted values <==//
  //=====================================================================//  
  public function POSTManager(){
    //What Are We Going to do?
    $action = htmlentities($_POST['todo'],ENT_QUOTES);
    switch($action){
      //Add or Edit a Video
      case "savevideo": MyVideo::save(); 
        echo'<div class="feedback">Video Saved With Success</div>'; 
      break;
 
      //Remove a video
      case'delvideo':
        $recordid = htmlentities($_POST['recordid'],ENT_QUOTES);
        if(!empty($recordid)){
          $record = new MyVideo($recordid);
          $record->delete();
        }
      break;	
 
      //Load A video and return JSON
      case 'loadvideo':
        $recordid = htmlentities($_POST['recordid'],ENT_QUOTES);
        if(!empty($recordid)){
          $record = MyVideo::load($recordid);
          if(!empty($record)){
            echo'
            {
            "video_id" : "'.$recordid.'",
            "video_title" : "'.$record->title.'",
            "video_file" : "'.$record->url.'"
            }';
          }
        }
      break;				
      default: break;
    }  
  }
 

Quand un formulaire est posté, le POSTManager regarde premièrement ce qui est demandé de lui. Ligne 6, il récupère le paramètre todo depuis $_POST, puis utilise une structure switch pour déterminer ce qu'il doit faire ensuite.

Quand on lui demande d'ajouter ou modifier une vidéo, il va appeler la méthode save (ligne 9).

Pour supprimer une vidéo, il fera appel à la méthode delete.

Et enfin, il peut faire appel à la méthode load, qui est utilisée via une requête ajax afin de retourner des informations au format JSON relatives à une vidéo particulière.

A partir de maintenant, vous devriez donc avoir une meilleure compréhension de se qui se passe à l'intérieur du POSTManager quand on lui poste des données.

Voyons maintenant ce qui se passe quand on cherche à modifier une vidéo existante.

Modifier une vidéo

Du côté admin, nous avons la liste des vidéos présentes dans la base de données. Chaque vidéo possède un lien modifier, et un lien supprimer.

Si vous cliquez le lien modifier, (vous pouvez essayer dans la démonstration), les informations sur cette vidéo sont chargées depuis la base de données, puis placées dans les champs du formulaire.

Il vous suffit donc de modifier les valeurs dans le formulaire et de le poster pour que les changements prennent effet.

Si l'on regarde de plus près, on peut voir qu'il y a une fonction jQuery associée à l'évènement clic de ce lien:

//==> Edit Link <==//
jQuery(".editvideolink").click(function(){
  //Show the Form
  jQuery("#recordform").slideDown();		
 
  //Get the video id
  var wrap_ = jQuery(this).parent();
  var recordid = jQuery(wrap_).attr("id").split("_")[1];		
 
  //Get the JSON values for this video
  jQuery.post(pageurl,{todo:"loadvideo",recordid:recordid},function(data){
    //And populate the associated fields
    jQuery("#recordform form input[name=video_id]").val(data.video_id);
    jQuery("#recordform form input[name=video_url]").val(data.video_file);
    jQuery("#recordform form input[name=video_title]").val(data.video_title);
  },"json");
  return false;
});

Quand vous cliquez sur le lien Editer, la fonction retrouve l'id de la vidéo à modifier (lignes 7 et 8), et l'envoie au POSTManager via Ajax (ligne 11). Le manager retourne les informations sur cette vidéo au format JSON, et ces informations sont placées dans les champs du formulaire (lignes 13, 14 et 15), afin de vous permettre de les modifier.

N'oubliez pas de changer la valeur de pageurl dans le fichier JavaScript, pour correspondre à votre propre page.

Supprimer une vidéo

Supprimer une vidéo de la base de données est encore plus simple. Vous n'avez même pas à vous occuper de supprimer quoi que se soit d'autre qu'une ligne dans la base de données.

Donc, pour se débarrasser d'une vidéo, il suffit de cliquer le lien supprimer correspondant. L'application vous demandera de confirmer si vous êtes sur de bien vouloir supprimer cette vidéo. Si oui, cliquez simplement oui, et le POSTManager s'en occupera pour vous. La prochaine fois que vous visitera le côté public, la vidéo ne sera plus là.

Ce qui se passe, d'une manière similaire à la fonction JavaScript précédente, l'id de la vidéo que l'on veut supprimer est envoyé au POSTManager:

jQuery(".confdel").livequery("click",function(){
  //Get the video id
  var wrap_ = jQuery(this).parent();
  var recordid = jQuery(wrap_).attr("id").split("_")[1];
 
  //SlideUp the container
  jQuery(wrap_).slideUp("slow");
 
  //send the video to the POSTManager
  jQuery.post(pageurl,{todo:"delvideo",recordid:recordid},function(data){});
  return false;		
});

Quand le POSTManager recoit l'id de la vidéo, il génère une requête delete afin de la supprimer de la base de données.

Conclusion

Grâce à cette classe PHP, vous pouvez permettre à vos clients de gérer une liste de vidéo YouTube sans connaissance techniques quelconque.

La solution est très facile à installer, il vous suffit d'inclure les fichiers, créer la table, appeler une méthode côté public et une méthode côté admin pour la faire marcher.

Mais c'est aussi assez flexible pour vous permettre de modifier ce qui vous semble nécessaire. Le code est modifiable et réutilisable à volonté donc n'hésitez pas à vous en servir afin de bénéficier de sa puissance.

Partager:

Vous seriez peut être aussi intéressé par::

Poster un Commentaire

Commentaires récents

@James .
Hello James.
In order to make this work, you need 2 pages. You can call one myvideopage.php and the other myadminpage.php.
The myvideopage.php is the public side, myadminpage.php is the admin side.

On each of them, include the files as explained.
Don't forget to change the variables as asked.
Then, on your myvideopage.php, call the getpublicside method, and on the myadminpage.php., call the getadminside method.

For more detailed explanation, have a look at the different step of the tutorial but normally, it is a very straightforward process.

Let me know if you succeeded.

Regards.
Jeremy

De jdmweb114352 à 11:29 23/07/10 { Répondre }

I'm creating a new page for reviewing videos - I've looked at the codes above but I feel lost - I don't know what I'm supposed to save each page as - I can get into my database and change the specs on that to fit what is above but as far as the php files - I'm trying to understand if each code block - is a page and I should save as a page?

I know it might sound elementary but I'm new to coding -

De James à 02:21 21/07/10 { Répondre }

@Armando.
You shouldn't display php notices on your production site. With the function error_reporting, you can control what are the errors displayed on your site. You can add the following at the begining of your file:

// Report all errors except E_NOTICE
// This is the default value set in php.ini
error_reporting(E_ALL ^ E_NOTICE);

It should get rid of the notice.
Regards.
Jeremy

De jdmweb114352 à 10:55 15/07/10 { Répondre }

Please help me with this:


Notice: Undefined index: ajaxrequest in H:\UsbWebserver\Root\manuales\MyVideo.php on line 254

Thanks!!!!!

De Armando à 19:19 13/07/10 { Répondre }

Thanks for this very good article!

De gta 5 à 15:37 06/07/10 { Répondre }

@jdmweb114352.
Thanks a lot for this wonderful script.
It works perfect.

De Divya à 22:12 23/06/10 { Répondre }

@Divya.
I would be glad to help you. What is your issue? Is there a place where I could see it?

De jdmweb114352 à 19:35 23/06/10 { Répondre }

Hi, I tried to implement this on my site.
But Im unable to.
Any help from you would be greatly appreciated.

De Divya à 18:57 23/06/10 { Répondre }

download link is broken

De lenamtl à 16:34 15/06/10 { Répondre }

@lilian.
Ha ok. Very good then. Glad to hear this.
All the best.

De jdmweb à 12:19 14/06/10 { Répondre }

Hi, the problem is "dead" ^^
in fact, It was my code that made errors, not yours ;)
Thanks for all !!!

De lilian à 11:25 14/06/10 { Répondre }

@lilian.
Is there any place where I could see the problem? I might be able to find out what is going wrong.

De jdmweb à 13:45 13/06/10 { Répondre }

Hi !
I have a problem to edit videos in admin:
- when I clic the link the form scroll down, but he is empty...
I search all the day but have no solution^^

De lilian à 17:02 09/06/10 { Répondre }

@toshi.

Hi Toshi, the FancyBox player is well kown for having a few bugs in IE with according to the FancyBox version and the jQuery version you are using. The versions I am using in this tutorial should be ok in IE. If it is not working for you, I suggest you should either use another version of jQuery, or another version of the fancybox, or another modal window that looks the same. This issue has nothing to do with the tutorial.

De jdmweb à 09:26 26/04/10 { Répondre }

Hello.

In Firefox though it is OK
Are there measures though the tool of animation is hidden when displaying it with IE?

De toshi à 04:14 26/04/10 { Répondre }

@Deluxe Blog Tips.

Hey thanks. If you would like to control the options related to the YouTube player, you can do so in the method getThumbnailsList, (see The Public Side: Method Details line 33).

For example, if you want to display related videos, change &rel=0 to &rel=1 (line 35). You also can change the height and weight of the video (line 34). But if you do so, don't forget to match your new dimensions in the video_manager.js file as well so the fancybox player will have the same size than the YouTube player.

Basically, according to the fact that it is an embedded YouTube player, you have control on all the YouTube options which is great.

De jdmweb à 10:48 22/04/10 { Répondre }

Nice tutorial. I think it can be better if we can make some option for showing video like size, control bars, related videos, etc.

De Deluxe Blog Tips à 23:11 21/04/10 { Répondre }

Thank you, it was very helpful!

De Jen à 14:03 21/04/10 { Répondre }