Header
Partagez | 

[Forumactif] Modifier l'hébergeur d'images SERVIMG + Créer son propre hébergeur d'images

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Eluknow

Doyen
Bons Points (BP) : 107
Voir le profil de l'utilisateur http://a-toi-de-coder.forumactif.org/

Message Sujet: [Forumactif] Modifier l'hébergeur d'images SERVIMG + Créer son propre hébergeur d'images   Lun 9 Mar - 19:19

Modifier l'hébergeur d'images SERVIMG



Bonjour à tous !
Je vous présente aujourd'hui un tout nouveau tutoriel, qui concerne le codage sur les forums hébergés sous Forumactif.
Nous allons voir dans celui-ci comment modifier l'hébergeur d'images. Vous savez, c'est le truc là :
Servimg:
 
Vous comprenez mieux ce que nous allons voir maintenant ? Wink.
Alors voici notre programme :


Trouvons un hébergeur



Toujours vivant après ce programme palpitant ? Parfait ! On commence alors !
Nous allons commencer par poser les choses. Déjà, qu'est-ce qu'un hébergeur d'images ?
Prenons l'exemple de celui en place sur chaque forum de FA. C'est un site, complètement détaché de FA, sur lequel il y a un formulaire (qui s'affiche quand on clique sur Bouton Servimg), qui permet de choisir une image. Quand on valide le formulaire, l'image est ajoutée dans la base de données du site, et on nous donne le lien qui permet de l'afficher sur notre forum.

Je pense que maintenant, vous devez avoir plein de noms d'hébergeurs d'images qui vous viennent à l'esprit non ? Si ce n'est pas le cas, faites la recherche suivante : [Hébergeur d'images sur google]
Maintenant, il ne vous reste plus qu'à en choisir parmi tous ceux-ci Very Happy.
Wouhooo, je suis libre de choisir !!
Hé bah non, héhé. Votre hébergeur doit respecter quelques petites choses :
-L'hébergement des images doit se faire sans inscription
-Il doit proposer un formulaire pour héberger l'image, de la même taille que celui de Servimg (ou presque).
Car oui, si vous prenez la page entière, vous imaginez ce qui s'affichera quand on cliquera sur Bouton Servimg ? Hé bien, toute la page :p. Ca fait grand !

Pour éviter de faire 15000 sites, je vais prendre le premier : HostingPics.
Il n'a pas besoin d'inscription, et propose un formulaire tout mini ! Parfait pour nous !
Voici donc où se trouve le formulaire version mini : http://www.hostingpics.net/iframe_mini.php
On peut alors continuer !
Si vous avez pris un autre hébergeur, qui répond aux critères, et que vous avez l'adresse URL de son formulaire version mini, ne vous inquiétez pas, la procédure est la même pour la suite ! Wink.

Un peu de javascript



Finie la rigolade, place à la torture mouhahaha.
Maintenant qu'on a notre hébergeur et notre formulaire version mini, on peut commencer à rentrer dans le monde passionnant du codage ! A commencer par le Javascript.
Alors, on va faire notre code ensemble :
On va commencer par déclarer une fonction anonyme (qui n'a pas de nom) :
Code:
$(function() {

});

Après, on fait appel à sceditor, qui est un API (ensemble de fonctions pour un service (servimg)) gérant servimg (j'essaie de faire au plus simple Wink). Avec sceditor, on modifie le texte que contient actuellement le cadre de notre Bouton Servimg, avec une fonction qu'on va nommé "caller". Cette fonction contiendra le formulaire de notre nouvel hébergeur d'images. Ce qui donne :
Code:
$.sceditor && ($.sceditor.commands.servimg["exec"] = $.sceditor.commands.servimg["txtExec"] = function (caller) {
C'est assez abstrait ce code, et il est assez dur de le commenter. Si vous voulez plus de précisions, n'hésitez pas à poser vos questions Wink

Ensuite on créé une variable qui contient notre nouveau contenu, c'est à dire le formulaire version mini de notre nouvel hébergeur d'images. Mais cette variable ne doit pas seulement contenir l'adresse URL du formulaire, non, sinon quand on cliquera sur notre bouton Bouton Servimg, on ne verra que l'adresse URL pas le formulaire... Gênant.. Pour éviter cela, on va afficher la page dans une iframe, comme suit :
Code:
<iframe src="ADRESSE URL" width="LARGEUR" height="HAUTEUR" scrolling="no" frameborder="0" allowtransparency="true">
LARGEUR et HAUTEUR sont la largeur et la hauteur que l'iframe doit prendre. Autrement dit, à peu près les dimensions du formulaire de Servimg, soit 400 de largeur et 100 de hauteur.
On a donc pour nous (vous devez mettre votre adresse URL si vous avez choisi un autre hébergeur) :
Code:
var content = '<p><iframe src="http://www.hostingpics.net/iframe_mini.php" width="400" height="100" scrolling="no" frameborder="0" allowtransparency="true"></iframe></p>';

Après on refait appel à notre api sceditor, notamment avec sa fonction createDropDown, qui permet de mettre un nouveau contenu à la place du précédent. Si vous voulez plus d'informations sur la fonction, vous pouvez lire sa [description]
Tout cela nous donne :
Code:
this.createDropDown(caller, 'servimg', content);

Enfin, on ferme notre fonction caller :
Code:
})

Voici donc à quoi ressemble finalement notre code !
Code:
$(function () {
            $.sceditor && ($.sceditor.commands.servimg["exec"] = $.sceditor.commands.servimg["txtExec"] = function (caller) {
                var content = '<p><iframe src="http://www.hostingpics.net/iframe_mini.php" width="400" height="100" scrolling="no" frameborder="0" allowtransparency="true"></iframe></p>';
                this.createDropDown(caller, 'servimg', content);
            })
        });

Dans les réponses, mais aussi dans les réponses rapides !



Bon c'est bien beau tout ça, mais qu'est-ce qu'on en fait de notre code hein ?
Justement, j'y viens Smile.
Maintenant qu'on a fait le plus dur, il ne nous reste plus qu'à mettre le code sur notre forum !

Pour cela, rendez-vous sur le panneau d'administration de votre forum -> Modules -> HTML & JAVASCRIPT -> Gestion des codes Javascript.
Cochez : Activer la gestion des codes Javascript : Oui. (si ce n'est pas déjà fait) puis validez.
Cliquez alors sur Créer un nouveau Javascript.
En titre mettez : Hébergeur
Et en placement : Sur les sujets
Puis collez enfin notre fameux code javascript fait dans l'étape précédente.
Et enfin, cliquez sur Valider !

Vous pouvez vérifier par vous même dans n'importe lequel des sujets de votre forum et dans les réponses rapides que c'est bien le nouvel hébergeur d'images qui s'affiche quand vous cliquez sur Bouton Servimg.

Pour le modifier dans les réponses normales également, c'est encore différent.
Toujours dans le panneau d'administration, allez dans Affichage -> Général -> Templates -> Poster & Messages privés -> posting_body
Dans le template, ajoutez notre code javascript (le même que celui que vous avez mis précédemment dans les modules) entre les balises <script type="text/javascript"></script>, et après la ligne :
Code:
<script src="{JS_DIR}extendedview.js" type="text/javascript"></script>
(normalement c'est la première ligne du template si vous ne l'avez pas modifié).
Validez, puis confirmez la modification du Template et voilà !
Pour ceux qui seraient un peu perdus, voici le template (par défaut) modifié :
Code:
<script src="{JS_DIR}extendedview.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
            $.sceditor && ($.sceditor.commands.servimg["exec"] = $.sceditor.commands.servimg["txtExec"] = function (caller) {
                var content = '<p><iframe src="http://www.hostingpics.net/iframe_mini.php" width="400" height="100" scrolling="no" frameborder="0" allowtransparency="true"></iframe></p>';
                this.createDropDown(caller, 'servimg', content);
            })
        });
</script>
<!-- BEGIN privmsg_extensions -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
   <tr>
      <td align="center" valign="top" width="100%">
         <table border="0" cellspacing="2" cellpadding="0" height="40">
            <tr valign="middle">
               <td>{INBOX_IMG}</td>
               <td><span class="cattitle">{INBOX_LINK}</span></td>
               <td>{SENTBOX_IMG}</td>
               <td><span class="cattitle">{SENTBOX_LINK}</span></td>
               <td>{OUTBOX_IMG}</td>
               <td><span class="cattitle">{OUTBOX_LINK}</span></td>
               <td>{SAVEBOX_IMG}</td>
               <td><span class="cattitle">{SAVEBOX_LINK}</span></td>
            </tr>
         </table>
      </td>
   </tr>
</table>
<br clear="all" />
<!-- END privmsg_extensions -->

{POST_PREVIEW_BOX}{ERROR_BOX}

<!-- BEGIN switch_quote_limit -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr class="inner">
      <td>
         <table cellspacing="0" cellpadding="1" border="0" width="100%">
            <tr><td class="row1"> </td></tr>
            <tr><td class="row1" align="center"><span class="gen" style="color:red;">{switch_quote_limit.L_QUOTE_LIMIT_WARNING}</span></td></tr>
            <tr><td class="row1"> </td></tr>
         </table>
      </td>
   </tr>
</table>
<!-- END switch_quote_limit -->

<form action="{S_POST_ACTION}" method="post" name="post" enctype="multipart/form-data">
   <table width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
      <tr><td><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a> <!-- BEGIN switch_not_privmsg -->{NAV_CAT_DESC}<!-- END switch_not_privmsg --></span></td></tr>
   </table>
   
   <!-- BEGIN switch_forum_rules -->
   <table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">
      <tbody>
         <tr>
            <td class="catBottom">
               <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tbody>
                     <tr>
                        <td valign="top">
                           <h1 class="cattitle"> {L_FORUM_RULES}</h1>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </td>
         </tr>
         <tr>
            <td class="row1 clearfix">
               <table>
                  <tr>
                     <!-- BEGIN switch_forum_rule_image -->
                     <td class="logo">
                        <img src="{RULE_IMG_URL}" />
                     </td>
                     <!-- END switch_forum_rule_image -->
                     <td class="rules postbody">
                        {RULE_MSG}
                     </td>
                  </tr>
               </table>
            </td>
         </tr>
      </tbody>
   </table>
   <!-- END switch_forum_rules -->
   
   <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
      <tr>
         <th height="28" class="thHead" colspan="2" valign="bottom">
            <strong>{L_POST_A}</strong>
         </th>
      </tr>
      <!-- BEGIN switch_username_select -->
      <tr>
         <td class="row1" width="22%"><span class="gen"><b>{L_USERNAME}</b></span></td>
         <td class="row2" width="78%"><span class="genmed"><input class="post" type="text" name="username"  maxlength="25" value="{USERNAME}" size="25" tabindex="1" /></span></td>
      </tr>
      <!-- END switch_username_select -->
      
      <!-- BEGIN switch_reasons -->
      <tr>
         <td class="row1" width="22%"><span class="gen"><b>{L_REASON}</b></span></td>
         <td class="row2" width="78%"><span class="genmed">{REASON}</span></td>
      </tr>
      <!-- END switch_reasons -->

      <!-- BEGIN switch_privmsg -->
      <tr>
         <td class="row1" width="22%"><span class="gen"><b>{L_USERNAME}</b></span></td>
         <td class="row2" width="78%">
            <span class="genmed">
               <!-- BEGIN switch_username -->
               <input class="post" style="margin:1px 0" type="text" name="username[]" value="{switch_privmsg.switch_username.USERNAME}" size="25" /><br />
               <!-- END switch_username -->
               <input class="post" style="margin:1px 0" type="text" id="username" name="username[]" value="{USERNAME}" size="25" tabindex="1" /> 
               <img id="add_username" src="{ADD_USERNAME_IMG}" class="selectHover" alt="" /> 
               <input class="liteoption" type="button" id="find_user" value="{L_FIND_USERNAME}" />
            </span>
         </td>
      </tr>
      <!-- BEGIN switch_privmsg_friend -->
      <tr>
         <td class="row1" width="22%"><span class="gen"><b>{switch_privmsg.switch_privmsg_friend.L_OR_FRIEND}</b></span></td>
         <td class="row2" width="78%">{switch_privmsg.switch_privmsg_friend.FRIEND_PM}</td>
      </tr>
      <!-- END switch_privmsg_friend -->
      <!-- BEGIN switch_privmsg_group -->
      <tr>
      <td class="row1" width="22%"><span class="gen"><b>{switch_privmsg.switch_privmsg_group.L_OR_GROUP}</b></span></td>
      <td class="row2" width="78%">{switch_privmsg.switch_privmsg_group.MASS_PM}</td>
      </tr>
      <!-- END switch_privmsg_group -->
      <!-- END switch_privmsg -->

      <!-- BEGIN switch_groupmsg -->
      <tr>
         <td class="row1" width="22%"><span class="gen"><b>{L_USERNAME}</b></span></td>
         <td class="row2" width="78%"><span class="genmed">{USERNAME}</span></td>
      </tr>
      <!-- END switch_groupmsg -->

      <!-- BEGIN switch_subject -->
      <tr>
      <td class="row1" width="22%"><span class="gen"><b>{L_SUBJECT}</b></span></td>
      <td class="row2" width="78%">
         <span class="gen">
            <input class="post" style="width:450px" type="text" name="subject" value="{SUBJECT}" size="45" maxlength="{TOPIC_TITLE_MAXLENGTH}" tabindex="2" title="{TOPIC_TITLE_LENGTH_EXPLAIN}" onkeypress="if (event.keyCode==13){return false}" />

            <!-- BEGIN switch_subject_color -->
            <script type="text/javascript">
            //<![CDATA[
            input = document.getElementsByName('subject');
            //]]>
            </script>
            <select name="topic_color" onchange="input[0].style.color = topic_color.value" style="margin-left:10px">
               {switch_subject.switch_subject_color.TOPIC_TITLE_COLOR_OPTIONS}
            </select>
            <script type="text/javascript">
            //<![CDATA[
            input[0].style.color = '{switch_subject.switch_subject_color.TOPIC_TITLE_COLOR_DEFAULT}';
            //]]>
            </script>
            <!-- END switch_subject_color -->
         </span>
      </td>
      </tr>
      <!-- END switch_subject -->

      <!-- BEGIN switch_description -->
      <tr>
      <td class="row1" width="22%"><span class="gen"><b>{L_DESCRIPTION}</b></span></td>
      <td class="row2" width="78%">
         <span class="gen">
            <input class="post" style="width:450px" type="text" name="description" value="{DESCRIPTION}" maxlength="{TOPIC_DESCRIPTION_MAXLENGTH}" onkeypress="if (event.keyCode==13){return false}" />
         </span>
      </td>
      </tr>
      <!-- END switch_description -->

      <!-- BEGIN switch_icon_checkbox -->
      <tr>
      <td class="row1" valign="top"><span class="gen"><b>{L_ICON_TITLE}</b></span></td>
      <td class="row2">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <!-- BEGIN row -->
      <tr>
      <td nowrap="nowrap"><span class="gen"><!-- BEGIN cell --><label><input type="radio" name="post_icon" value="{switch_icon_checkbox.row.cell.ICON_ID}" {switch_icon_checkbox.row.cell.ICON_CHECKED} id="post_icon_{switch_icon_checkbox.row.cell.ICON_ID}" /> <span onclick="document.forms['post'].post_icon_{switch_icon_checkbox.row.cell.ICON_ID}.checked=true">{switch_icon_checkbox.row.cell.ICON_IMG}</span></label><!-- END cell --></span></td>
      </tr>
      <!-- END row -->
      </table>
      </td>
      </tr>
      <!-- END switch_icon_checkbox -->

      <tr id="parent_editor_simple" {EDITOR_DISPLAY_SIMPLE}>
         <td class="row1" valign="top">
            <table width="100%" border="0" cellspacing="0" cellpadding="1">
               <tr>
                  <td><span class="gen" style="white-space: nowrap;"><b>{L_MESSAGE_BODY}</b></span></td>
               </tr>
               <tr>
                  <td align="center" valign="middle">
                                                    <table width="100%" border="0" cellspacing="0" cellpadding="5">
                                                        <tr align="center">
                     <td class="gensmall" colspan="{S_SMILIES_COLSPAN}">
                        <div id="smileyContainer">
                        {L_SMILIES_PREVIEW_NEW}
                        </div>
                     </td>
                  </tr>
                  </table>
                  </td>
               </tr>
            </table>
         </td>
         <td class="row2" valign="top"><span class="genmed"></span>
            <table border="0" cellspacing="0" cellpadding="0" width="100%">
               <tr>
                  <td valign="top">
                     <textarea id="text_editor_textarea" class="post" name="message" tabindex="3" wrap="virtual">{MESSAGE}</textarea> 
                  </td>
                  <td id="smileyContainer" valign="top">
                     {L_SMILIES_PREVIEW_NEW}
                  </td>
               </tr>
            </table>
         </td>
      </tr>
      <!-- BEGIN edit_reason -->
      <tr>
         <td class="row1" width="22%"><span class="gen"><strong>{edit_reason.L_EDIT_REASON}</strong></span></td>
         <td class="row2" width="78%"><span class="gen"><input class="post" style="width:450px" type="text" name="edit_reason" value="{edit_reason.EDIT_REASON}" maxlength="255" /></span></td>
      </tr>
      <!-- END edit_reason -->
      {CODE_CONFIRM}
   </table>
   
   <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
      <tr>
         <td class="catBottom" colspan="2" align="center" height="28">
            <input type="hidden" name="lt" value="{LAST_TOPIC_ID}" />
            {S_HIDDEN_FORM_FIELDS}
            <!-- BEGIN switch_preview -->
            <input class="liteoption" type="submit" name="preview" value="{L_PREVIEW}" tabindex="5" /> 
            <!-- END switch_preview -->
            <!-- BEGIN switch_draft -->
             <input class="liteoption" type="submit" name="draft" value="{L_DRAFT}" tabindex="7" accesskey="d" /> 
            <!-- END switch_draft -->
            <!-- BEGIN switch_publish -->
             <input class="liteoption" type="submit" name="publish" value="{L_PUBLISH}" tabindex="8" accesskey="p" /> 
            <!-- END switch_publish -->
             <input class="mainoption" type="submit" name="post" value="{L_SUBMIT}" tabindex="6" accesskey="s" />
         </td>
      </tr>
   </table>
   <br /><br />

   <!-- BEGIN switch_roll_dice -->
   <div id="rolldice" style="display:{ROLLDICE_CLOSE}">
      <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
         <tr>
            <th class="thHead">
               <table width="100%">
                  <tr>
                     <td width="10"></td>
                     <td align="center"><span class="gen"><b>{ROLL_DICE_TITLE}</b></span></td>
                     <td width="10"><a href="javascript:ShowHideLayernew('rolldice')"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></td>
                  </tr>
               </table>
            </th>
         </tr>
      </table>
   </div>

   <div id="rolldice_show" style="display:{ROLLDICE_OPEN}">
      <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
         <tr>
            <th class="thHead" colspan="2">
               <table width="100%">
                  <tr>
                     <td width="10"> </td>
                     <td align="center"><span class="gen"><b>{ROLL_DICE_TITLE}</b></span></td>
                     <td width="10"><a href="javascript:ShowHideLayernew('rolldice')">
                        <img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a>
                     </td>
                  </tr>
               </table>
            </th>
         </tr>
         <tr>
            <td class="row1">
               <script type="text/javascript">
               //<![CDATA[
               function add_dice(dice_number,dice,number)
               {
                  var content = document.getElementById('post_dice').innerHTML;
                  document.getElementById('dice_to_del').innerHTML = '';
                  document.getElementById('dice_to_del').id = '';

                  var new_tr = document.createElement('tr');
                  new_tr.appendChild(document.createElement('td'));
                  new_tr.firstChild.innerHTML = '<span class="postbody">{ROLL_DICE_TITLE_LOW} #' + (dice_number + 1) + ' : </span><select name="post_dice_' + dice_number + '" id="post_dice_' + dice_number + '" value="' + dice + '">' + content + '</select><span class="postbody"> <label for="nb_rolls_' + dice_number + '">{switch_roll_dice.L_DICE_ROLLS} : </label><input type="text" size="2" maxlength="3" name="nb_rolls_' + dice_number + '" id="nb_rolls_' + dice_number + '" class="post" value="' + number + '" /> <span id="dice_to_del"><a href="javascript:add_dice(' + (dice_number + 1) + ',\'\',1)"><img src="{PATH_IMG_FA}tabs_more.gif" alt="plus" /></a></span></span>';
                  document.getElementById('list_dice').lastChild.appendChild(new_tr);

                  var select_dice = document.getElementById('post_dice_' + dice_number);
                  if ( dice == '' )
                  {
                     select_dice.selectedIndex=0;
                  }
                  for ( var i = 1; select_dice.options[i]; i++ )
                  {
                     select_dice.options[i].selected = ( select_dice.options[i].value == dice );
                  }
               }
               //]]>
               </script>            
               <table style="width:100%" id="list_dice">
                  <tr>
                     <td>
                        <span class="postbody">{ROLL_DICE_TITLE_LOW} #1 : </span>
                        <select name="post_dice_0" id="post_dice">
                           <option value="">-</option>
                           <!-- BEGIN row_replace -->
                           <option value="{switch_roll_dice.row_replace.DICE_ID}"{switch_roll_dice.row_replace.DICE_SELECTED}>{switch_roll_dice.row_replace.DICE_NAME}</option>
                           <!-- END row_replace -->
                        </select>
                        <span class="postbody">
                            <label for="nb_rolls_0">{switch_roll_dice.L_DICE_ROLLS} : </label><input type="text" size="2" maxlength="3" name="nb_rolls_0" id="nb_rolls_0" class="post" value="{switch_roll_dice.S_DICE_ROLLS_VALUE}" />
                            <span id="dice_to_del"><a href="javascript:add_dice(1,'',1)"><img src="{PATH_IMG_FA}tabs_more.gif" alt="plus" /></a></span>
                        </span>
                     </td>
                  </tr>
               </table>            
            </td>
         </tr>
      </table><br /><br />
   </div>
   {switch_roll_dice.DICE_SCRIPT}
   <!-- END switch_roll_dice -->

<!-- BEGIN switch_attachment_list -->
<div id="attachments">
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr><th class="thHead" colspan="2">
<table width="100%"><tr>
<td width="10"></td><td align="center"><span class="gen"><b>{L_ATTACHMENTS}</b></span></td><td width="10"></td>
</tr></table>
</th></tr>
<!-- BEGIN attachments -->
<tr>
<td width="22%" class="row1">
<span class="gen"><b>{L_ATTACHMENT_FILENAME}</b></span><br />
</td>
<td width="78%" class="row2">
<!-- BEGIN switch_is_orphan -->
<span class="gen">{switch_attachment_list.attachments.switch_is_orphan.FILENAME}</span>  
<!-- END switch_is_orphan -->
<!-- BEGIN switch_is_not_orphan -->
<a href="{switch_attachment_list.attachments.switch_is_not_orphan.U_ATTACH_URL}" class="gen">{switch_attachment_list.attachments.switch_is_not_orphan.FILENAME}</a>  
<!-- END switch_is_not_orphan -->
<!-- BEGIN switch_can_delete -->
<input type="submit" value="{L_ATTACHMENT_DELETE}" name="delete_file[{switch_attachment_list.attachments.ATTACH_POS}]" /><br />
<!-- END switch_can_delete -->
</td>
</tr>
<tr>
<td width="22%" class="row1">
<span class="gen"><b>{L_ATTACH_COMMENT}</b></span>
</td>
<td width="78%" class="row2">
<!--textarea name="comment_list[{switch_attachment_list.attachments.ATTACH_POS}]" cols="35" rows="3" style="width:100%">{switch_attachment_list.attachments.ATTACH_COMMENT}</textarea><br />
<a href="{switch_attachment_list.attachments.U_ATTACH_URL}" class="gen">{switch_attachment_list.attachments.FILENAME}</a>  <input class="liteoption" type="submit" value="{L_ATTACHMENT_DELETE}" name="delete_file[{switch_attachment_list.attachments.ATTACH_POS}]" /-->
<input class="post" type="text" id="filecomment{switch_attachment_list.attachments.ATTACH_POS}" name="comment_list[{switch_attachment_list.attachments.ATTACH_POS}]" value="{switch_attachment_list.attachments.ATTACH_COMMENT}" maxlength="255" style="width: 450px" />
<input type="hidden" value="{switch_attachment_list.attachments.ATTACH_ID}" name="attachment_data[{switch_attachment_list.attachments.ATTACH_POS}][attach_id]" />
<input type="hidden" value="{switch_attachment_list.attachments.IS_ORPHAN}" name="attachment_data[{switch_attachment_list.attachments.ATTACH_POS}][is_orphan]" />
<input type="hidden" value="{switch_attachment_list.attachments.REAL_FILENAME}" name="attachment_data[{switch_attachment_list.attachments.ATTACH_POS}][real_filename]" />
<input type="hidden" value="{switch_attachment_list.attachments.ATTACH_COMMENT}" name="attachment_data[{switch_attachment_list.attachments.ATTACH_POS}][attach_comment]" />
</td>
</tr>

<!-- END attachments -->
</table>
</div>
<!-- END switch_attachment_list -->

<!-- BEGIN switch_attachment -->
<div id="attachment" style="display:{ATTACHMENT_CLOSE}">
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr><th class="thHead">
<table width="100%"><tr>
<td width="10"></td><td align="center"><span class="gen"><b>{L_ATTACHMENT_ADD}</b></span></td><td width="10"><a href="javascript:ShowHideLayernew('attachment')"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></td>
</tr></table>
</th></tr>
</table>
</div>

<div id="attachment_show" style="display:{ATTACHMENT_OPEN}">
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr><th class="thHead" colspan="2">
<table width="100%"><tr>
<td width="10"></td><td align="center"><span class="gen"><b>{L_ATTACHMENT_ADD}</b></span></td>
<td width="10"><a href="javascript:ShowHideLayernew('attachment')">
<img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></td>
</tr></table>
</th></tr>
<tr>
<td class="row1">

<table class="forumline" width="100%" cellspacing="1" cellpadding="0" border="0">
<tr>
<td class="row1" colspan="2"><span class="gen">{L_ATTACHMENT_ADD_HELP}</span><br /><span class="info">{EXT_LIST}</span><br /></td>
</tr>

<tr>
<td class="row1" width="22%"><span class="gen"><b>{L_ATTACHMENT_FILENAME}</b></span></td>
<td class="row2" width="78%"><span class="genmed"><input class="post" type="file" id="fileupload" name="fileupload" value="" /><input value="{L_SUBMIT}" type="submit" name="add_file" /> ({L_MAX_ATT_SIZE})</span></td>
</tr>

<tr>
<td class="row1" width="22%"><span class="gen"><b>{L_ATTACH_COMMENT}</b></span></td>
<td class="row2" width="78%"><span class="genmed"><input class="post" type="text" style="width:450px" id="filecomment" name="filecomment" value="" maxlength="255" /></span></td>
</tr>

<!-- BEGIN modif_dav_08032010 -->
<tr>
<td valign="top" width="15%"><label class="gen" for="fileupload">{L_ATTACHMENT_FILENAME}</label><br /><br />
<label class="gen" for="filecomment">{L_ATTACH_COMMENT}</label></td>
<td width="80%"><input type="file" id="fileupload" name="fileupload" /><input type="submit" name="add_file" /> ({L_MAX_ATT_SIZE})<br />
<textarea id="filecomment" name="filecomment" cols="35" rows="3" style="width:100%"></textarea></td>
</tr>
<!-- END modif_dav_08032010 -->

</table>
</td>
</tr>
</table>
</div>

<!-- END switch_attachment -->

<div id="optionsitems" style="display:{OPTIONSITEMS_CLOSE}">
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr><th class="thHead">
<table width="100%"><tr>
<td width="10"></td><td align="center"><span class="gen"><b>{L_OPTIONS}</b></span></td><td width="10"><a href="javascript:ShowHideLayernew('optionsitems')"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></td>
</tr></table>
</th></tr>
</table>
</div>

<div id="optionsitems_show" style="display:{OPTIONSITEMS_OPEN}">
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr><th class="thHead" colspan="2">
<table width="100%"><tr>
<td width="10"></td><td align="center"><span class="gen"><b>{L_OPTIONS}</b></span></td>
<td width="10"><a href="javascript:ShowHideLayernew('optionsitems')">
<img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></td>
</tr></table>
</th></tr>

<!-- BEGIN switch_topic_modif -->
   <!-- BEGIN switch_icon_checkbox -->
   <tr>
      <td class="row1"><label class="gen">{POST_ICON_TITLE}</label></td>

      <td class="row2">
      <!-- BEGIN row -->
         <!-- BEGIN cell -->
         <label class="gen"><input type="radio" name="post_icon" value="{switch_topic_modif.switch_icon_checkbox.row.cell.ICON_ID}" id="post_icon_{switch_topic_modif.switch_icon_checkbox.row.cell.ICON_ID}" {switch_topic_modif.switch_icon_checkbox.row.cell.ICON_CHECKED} />?<span onclick="document.forms['post'].post_icon_{switch_topic_modif.switch_icon_checkbox.row.cell.ICON_ID}.checked=true">{switch_topic_modif.switch_icon_checkbox.row.cell.ICON_IMG}</span></label>
         <!-- END cell -->
      <!-- END row -->
      </td>
   </tr>
   <!-- END switch_icon_checkbox -->
<tr>

   <td class="row1"><label for="modif_topic_title" class="gen">{L_TOPIC_TITLE_MODIFY}</label></td>

   <td class="row2">
      <input class="post" style="width:450px" type="text" name="modif_topic_title" id="modif_topic_title" value="{MODIF_TOPIC_TITLE}" class="gen" maxlength="{TOPIC_TITLE_MAXLENGTH}" onkeypress="if (event.keyCode==13){return false}" />
      <!-- BEGIN switch_topic_button -->
       <input type="button" value="{L_SOLVED_WITHOUT_BRAKETS}" class="button" onclick="set_solved(this.form.elements['modif_topic_title'],'{L_SOLVED}')" style="display:none" id="button_solved" />
      <script type="text/javascript">
      //<![CDATA[
      document.getElementById('button_solved').style.display = 'inline';
      //]]>
      </script>
      <!-- END switch_topic_button -->
   </td>
</tr>
<!-- END switch_topic_modif -->

   <tr>
      <td class="row1" valign="top" width="22%">
         <span class="gensmall">
            {HTML_STATUS}<br />
            {BBCODE_STATUS}<br />
            {SMILIES_STATUS}
         </span>
      </td>
      <td class="row2" width="78%"><span class="gen"> </span>
         <table border="0" cellspacing="0" cellpadding="1">
            <!-- BEGIN switch_html_checkbox -->
            <tr>
               <td><input type="checkbox" name="disable_html"{S_HTML_CHECKED} /></td>
               <td><span class="gen">{L_DISABLE_HTML}</span></td>
            </tr>
            <!-- END switch_html_checkbox --><!-- BEGIN switch_bbcode_checkbox -->
            <tr>
               <td><input type="checkbox" name="disable_bbcode"{S_BBCODE_CHECKED} /></td>
               <td><span class="gen">{L_DISABLE_BBCODE}</span></td>
            </tr>
            <!-- END switch_bbcode_checkbox --><!-- BEGIN switch_smilies_checkbox -->
            <tr>
               <td><input type="checkbox" name="disable_smilies"{S_SMILIES_CHECKED} /></td>
               <td><span class="gen">{L_DISABLE_SMILIES}</span></td>
            </tr>
            <!-- END switch_smilies_checkbox --><!-- BEGIN switch_signature_checkbox -->
            <tr>
               <td><input type="checkbox" name="attach_sig"{S_SIGNATURE_CHECKED} /></td>
               <td><span class="gen">{L_ATTACH_SIGNATURE}</span></td>
            </tr>
            <!-- END switch_signature_checkbox --><!-- BEGIN switch_notify_checkbox -->
            <tr>
               <td><input type="checkbox" name="notify"{S_NOTIFY_CHECKED} /></td>
               <td><span class="gen">{L_NOTIFY_ON_REPLY}</span></td>
            </tr>
            <!-- END switch_notify_checkbox --><!-- BEGIN switch_delete_checkbox -->
            <tr>
               <td><input type="checkbox" name="delete" /></td>
               <td><span class="gen">{L_DELETE_POST}</span></td>
            </tr>
            <!-- END switch_delete_checkbox -->
            <!-- BEGIN switch_type_toggle -->
            <tr>
               <td></td>
               <td><span class="gen">{S_TYPE_TOGGLE}</span></td>
            </tr>
            <!-- END switch_type_toggle -->
         </table>
      </td>
   </tr>
</table>
</div>

<!-- BEGIN switch_type_cal -->
<div id="calendaritems" style="display:{CALENDARITEMS_CLOSE}">
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr><th class="thHead">
<table width="100%"><tr>
<td width="10"></td><td align="center"><span class="gen"><b>{L_CALENDAR}</b></span></td><td width="10"><a href="javascript:ShowHideLayernew('calendaritems')"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></td>
</tr></table>
</th></tr>
</table>
</div>
<div id="calendaritems_show" style="display:{CALENDARITEMS_OPEN}">
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr><th class="thHead" colspan="2">
<table width="100%"><tr>
<td width="10"></td><td align="center"><span class="gen"><b>{L_CALENDAR}</b></span></td><td width="10"><a href="javascript:ShowHideLayernew('calendaritems')"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></td>
</tr></table>
</th></tr>
<tr><td class="row1" width="22%"><span class="gen"><b>{L_CALENDAR_TITLE} :</b></span></td>
<td class="row2" width="78%"><span class="genmed">
{S_CALENDAR_DAY}{S_CALENDAR_MONTH}{S_CALENDAR_YEAR} 
<a href="javascript:void(0)" name="#" class="genmed" style="font-style:normal;font-weight:normal" onclick="document.post.topic_calendar_day.value={TODAY_DAY};document.post.topic_calendar_month.value={TODAY_MONTH};document.post.topic_calendar_year.value={TODAY_YEAR}">{L_TODAY}</a>
</span>
</td>
</tr>
<tr>
<td class="row1"><span class="gen"><b>{L_TIME} :</b></span></td>
<td class="row2"><span class="genmed">
<input name="topic_calendar_hour" type="post" maxlength="2" size="3" value="{CALENDAR_HOUR}" class="post" /> {L_HOURS}  
<input name="topic_calendar_min" type="post" maxlength="2" size="3" value="{CALENDAR_MIN}" class="post" /> {L_MINUTES}
</span>
</td>
</tr>
<tr>
<td class="row1"><span class="gen"><b>{L_CALENDAR_DURATION} :</b></span></td>
<td class="row2">
<span class="genmed">
<input name="topic_calendar_duration_day" type="post" maxlength="5" size="3" value="{CALENDAR_DURATION_DAY}" class="post" /> {L_DAYS}  
<input name="topic_calendar_duration_hour" type="post" maxlength="5" size="3" value="{CALENDAR_DURATION_HOUR}" class="post" /> {L_HOURS}  
<input name="topic_calendar_duration_min" type="post" maxlength="5" size="3" value="{CALENDAR_DURATION_MIN}" class="post" />&nbsp;{L_MINUTES}
<input name="create_event" type="hidden" value="{CREATE_EVENT}" />
<input name="calendar_d" type="hidden" value="{CALENDAR_D}" />
</span>
</td>
</tr>
</table>
</div>
<!-- END switch_type_cal -->
{POLLBOX}

<!-- BEGIN switch_display_menus -->
<script type="text/javascript">
//<![CDATA[
ShowHideLayernew('rolldice');
ShowHideLayernew('optionsitems');
ShowHideLayernew('calendaritems');
ShowHideLayernew('pollitems');
//]]>
</script>
<!-- END switch_display_menus -->

</form>
<table width="100%" border="0" cellspacing="2" align="center">
<tr>
<td align="right" valign="top">{JUMPBOX}</td>
</tr>
</table>{TOPIC_REVIEW_BOX}

<!-- BEGIN switch_privmsg -->
<div id="find_username" class="jqmWindow"></div>

<script src="{JS_DIR}jquery/jqmodal/jqmodal.js" type="text/javascript"></script>
<!-- END switch_privmsg -->
<script type="text/javascript">
//<![CDATA[
$(function(){
<!-- BEGIN switch_privmsg -->
   privmsg_add_username('{U_SEARCH_USER}', '<br /><span class="genmed"><input class="post" style="margin:1px 0" type="text" name="username[]" size="25" /></span>');
<!-- END switch_privmsg -->
<!-- BEGIN switch_image_resize -->
    resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} });
<!-- END switch_image_resize -->
});
//]]>
</script>

{SCEDITOR}

Regardez donc à quoi ça ressemble :
Dans les réponses rapides:
 
Dans les réponses normales:
 

Bon, c'est cool tout ça, mais que diriez-vous de faire votre propre hébergeur d'images ?
Revenir en haut Aller en bas



Cadeau de Noël


Mon dipl'homme:
 

Avatars et signas cadeaux':
 

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Eluknow

Doyen
Bons Points (BP) : 107
Voir le profil de l'utilisateur http://a-toi-de-coder.forumactif.org/

Message Sujet: Re: [Forumactif] Modifier l'hébergeur d'images SERVIMG + Créer son propre hébergeur d'images   Mer 11 Mar - 19:29

Créer son propre hébergeur d'images


L'hébergeur de notre site


Pour que votre hébergeur d'images soit en ligne (sur internet), il faut qu'il soit lui aussi hébergé.
Pour cela, un large choix s'offre à vous.
Des hébergeurs gratuits comme payants, selon vos besoins. Si vous pensez que vous aurez énormément d'images, alors tournez vous vers un hébergeur payant.
Pour trouver un hébergeur, rien de mieux que de taper "hébergeur de sites" sur Google !
Je ne peux vous guider davantage ! Si vous avez des questions, n'hésitez pas à venir la poser dans la rubrique dédiée à cet effet (lien en fin de tutoriel).

Le code PHP, analyse


Nous allons maintenant rentrer dans la partie la plus complexe. Afin de ne pas partir dans n'importe quel sens et de sortir un code correct et potable, nous allons déjà penser notre code. Concrètement, qu'est-ce qu'il doit nous apporter, afficher, vérifier etc.
Alors nous allons faire un petit récapitulatif :
Ce que notre code doit afficher :
-Le formulaire
-Les erreurs s'il y en a
-Le code qui permet d'afficher les images hébergées
-Les images une fois hébergées

Ce que notre code doit vérifier :
-L'extension du fichier indiqué par le membre
-Le poids de ce fichier
-Si le code a bien été exécuté, et qu'il n'y a pas eu d'erreur lors du transfert et/ou de l'hébergement de l'image

Ce que notre code doit "créer" :
-Un nom d'image unique
-Un emplacement à l'image hébergée
-Un lien pour afficher l'image hébergée

Bon, ça en fait du code à faire ! Vous êtes prêts ? Alors armez vos claviers, et ouvrez votre éditeur de textes ! (Notepad++ par exemple).

Important : Le code va être réalisé en PHP. Nous verrons aussi un peu de javascript. Tout le code sera expliqué, c'est à dire que même quelqu'un n'ayant jamais touché au PHP pourra comprendre ce qu'il fait un minimum. Si cela reste flou, n'hésitez pas à poser vos questions dans la section dédiée à cet effet.

Codons ! (Partie HTML/CSS)


Une fois que votre éditeur de textes est ouvert, créez un nouveau document que vous appellerez : hosting_mini.php

Maintenant, commençons à coder :
Comme toute page HTML qui se respecte, nous allons mettre en place la structure obligatoire de la page :
Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Hébergement d'images</title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>

Nous allons ensuite faire notre formulaire, qui se mettra entre les balises <body> </body>

Code:
<form method="post" enctype="multipart/form-data">
</form>
Comme vous le voyez, notre balise form a plusieurs attributs :
method : deux choix, post ou get. Ici nous choisissons post, c'est à dire qu'après validation du formulaire, les informations seront envoyées dans un tableau à la page indiquée dans l'attribut action.
enctype : 1 seul choix ici, celui qu'on a mis. Ca permet d'indiquer qu'on envoie des informations de l'ordinateur de l'internaute, à notre serveur (ici, ce sera une image, l'information).
J'ai volontairement omis l'attribut action="", puisque le formulaire est sur la même page que le code php qui vérifiera les informations envoyés par celui-ci. De ce fait, c'est le code lui-même qui se chargera de mettre l'attribut action avec la page actuelle Wink.

Dans ce formulaire, on met le bouton qui permet d'aller sélectionner une image dans ses fichiers sur son ordinateur, c'est à dire ce bouton :
Donc :
Code:
<form method="post" enctype="multipart/form-data">
<input type="file" name="image" id="image" size="20" />
</form>
Alors, les attributs :
type : on définit le type de champ du formulaire. Ici, c'est le champ qui permet de sélectionner un fichier (dit "file" en Anglais) sur son ordinateur. Donc le type, c'est "file".
name : bon, je crois que c'est assez simple : on définit le nom de notre champ. Ici, "image".
id : on définit l'id du champ, pour éventuellement le mettre en page.
size : c'est pour la longueur du bouton. C'est mon petit côté maniaque, désolé Very Happy.

Si vous prévisualisez votre code, vous verrez que seul le bouton apparait, sans aucune explication. Pour éviter cela, nous allons juste rajouter : Héberger une image.
Donc :
Code:
<form method="post" enctype="multipart/form-data">
Héberger une image : <br />
<input type="file" name="image" id="image" size="20" />
</form>

Ensuite, nous allons ajouter le bouton de validation :
Code:
<form method="post"  enctype="multipart/form-data">
Héberger une image : <br />
<input type="file" name="image" id="image" size="20" /><br />
<input type="submit" name="submit" value="Envoyer ! " />
</form>
Nos fameuses descriptions d'attributs :
type : bon ce coup-ci, c'est submit qui est utilisé comme type. Car submit signifie valider, envoyer.
name : bon, vous connaissez, pas la peine de nous attarder là-dessus Wink.
value : c'est le texte qui s'affiche sur le bouton. Ici "Envoyer !".

Bon, notre partie HTML est presque finie ! Pour faire "joli", on va juste rajouter le nom du forum au dessus du formulaire :
Code:
<h3 class="forum">Le nom de votre forum</h3>
Ce qui nous donne finalement :
Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Hébergement d'images</title>
<style type="text/css">
</style>
</head>
<body>
<h3 class="forum">Le nom de votre forum</h3>
<form method="post" enctype="multipart/form-data">
Héberger une image : <br />
<input type="file" name="image" id="image" size="20" /><br />
<input type="submit" name="submit" value="Envoyer ! " />
</form>
</body>
</html>

Bon maintenant nous allons mettre tout ça en page grâce au CSS, à commencer par la balise body.
En fait, nous allons faire en sorte que notre balise body soit adaptée pour l'iframe, c'est à dire : pas de marge, un fond transparent.
On a donc :
Code:
body{
background: transparent;
margin: 0;
padding: 0;
}

Nous allons maintenant, pour faire plus "classe", aligner tout le texte de notre page :
Code:
body{
background: transparent;
margin: 0;
padding: 0;
text-align: center;
}

Maintenant, on va embellir un peu le nom de notre forum ! (vous pouvez mettre en page comme vous voulez dès à présent Wink. Pour le tutoriel, je vais utiliser une mise en page assez simple, libre à vous de faire la même ou non Wink

Code:
h3.forum{
font-size: 17px;
font-family: Arial Bold;
color: grey;
}

Et voilà pour moi ! Vous pouvez mettre en page ce que vous voulez maintenant Wink. Si vous voulez faire un formulaire aux bordures rouges, c'est comme vous voulez :p.
Voici donc le code que j'obtiens Wink.
Code final:
 

C'est donc terminé pour cette partie, on va attaquer le PHP !

Codons ! (Partie PHP)


On va d'abord, comme pour tout langage, dire qu'on code en php. On va donc mettre :
Code:
<?php
//Notre code
?>
C'est un peu l'équivalent de la doctype, en html.

Nous allons maintenant procéder aux vérifications. C'est à dire, utiliser des conditions pour vérifier que telle ou telle donnée est bien correcte à ce qu'on attend. On fait cela pour éviter que des erreurs se produisent et que le code plante Wink.

Pour commencer, on va donc vérifier qu'on arrive bien sur la page car un internaute a cliqué sur le bouton submit du formulaire.

Code:
<?php
if(!empty($_POST['submit'])
{
/**Si, on a bien cliqué sur le bouton submit, alors on applique le code qu'il y aura à la place de ce commentaire**/
}
else{
//Ca veut dire qu'on a pas cliqué sur le bouton submit. On affiche le formulaire du coup
}
?>

Comme vous le voyez dans ce code, j'ai mis des petites annotations. On appelle ça des commentaires.
Commentaires:
 

Bon, expliquons le code précédent. Déjà, tout ce qui commence par $ (le symbole dollar), est une variable. Les variables contiennent des données sous forme de texte, nombres, tableau etc.
Ici, on a la variable $_POST, une variable native de PHP, qui contient les résultats d'un formulaire HTML, dont la méthode est post (method="post").
On accède donc aux données sélectionnées par l'internaute dans les champs (dans les <input />) en indiquant, entre accolades et guillemets simples, le nom du chan (<input name="NOM_DU_CHAN" />)
C'est donc lui notre fameux tableau qui contient les réponses à notre formulaire Wink.
Alors, on vérifie que cette variable n'est pas vide, grâce à !empty(). Mieux encore, on vérifie que la cellule du tableau correspondant à notre bouton submit, n'est pas vide. Donc, qu'on a cliqué dessus ! Si c'est le cas, alors on continuera notre code. Si ce n'est pas le cas, on affiche notre formulaire, car ça veut dire qu'il n'a pas été rempli ! Du coup, c'est dans le "else" qu'on met notre formulaire HTML !

Code:
<?php
if(!empty($_POST['submit'])
{
/**Si, on a bien cliqué sur le bouton submit, alors on applique le code qu'il y aura à la place de ce commentaire**/
}
else{
echo '<form method="post" enctype="multipart/form-data">
Héberger une image : <br />
<input type="file" name="image" id="image" size="20" /><br />
<input type="submit" name="submit" value="Envoyer ! " />
</form>';
}
?>

On a utilisé la fonction native echo pour afficher notre formulaire.
Mais, on met où le reste du code HTML ? Et bien, tout au dessus du code PHP on met ce qu'il y a au dessus de notre formulaire, et tout ce qu'il y a en dessous, et bien, en dessous de notre code PHP :p.

On a donc :
Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Hébergement d'images</title>
<style type="text/css">
body{
background: transparent;
margin: 0;
padding: 0;
text-align: center;
}

h3.forum{
font-size: 17px;
font-family: Arial Bold;
color: grey;
}
</style>
</head>
<body>
<h3 class="forum">Le nom de votre forum</h3>
<?php
if(!empty($_POST['submit'])
{
/**Si, on a bien cliqué sur le bouton submit, alors on applique le code qu'il y aura à la place de ce commentaire**/
}
else{
echo '<form method="post" enctype="multipart/form-data">
Héberger une image : <br />
<input type="file" name="image" id="image" size="20" /><br />
<input type="submit" name="submit" value="Envoyer ! " />
</form>';
}
?>
</body>
</html>

Bon, maintenant qu'on a posé les bases, on peut continuer ! Qu'est-ce qu'on a à vérifier maintenant... ? Et bien, que l'internaute a bien sélectionné un fichier à envoyer, qu'il n'a pas simplement cliqué sur le bouton submit !
(Je ne mettrai maintenant plus que la partie PHP, donc plus le html au dessus et au dessous du code, mais sachez qu'il est bien là Wink )
Code:
<?php
if(!empty($_POST['submit'])
{
  if (!empty($_FILES['image']['size']))
    {
    }
    else
    {
        echo "Pas d'image sélectionnée";
    }
}
else{
echo '<form method="post" enctype="multipart/form-data">
Héberger une image : <br />
<input type="file" name="image" id="image" size="20" /><br />
<input type="submit" name="submit" value="Envoyer ! " />
</form>';
}
?>

Hé mais pourquoi ce n'est pas $_POST['image'] ? Et pourquoi il y a ce ['size'] ????
J'y viens Wink. Alors, en fait, $_FILES est aussi une variable native de PHP. Mais celle là contient tous les fichiers envoyés par l'intermédiaire de chan de type file (<input type="file" />). Voilà tout Smile.
Maintenant, le ['size']. En fait, là on a un tableau.. dans un tableau :p. On a notre tableau $_FILES avec une cellule pour notre fichier sélectionné, donc notre image. (oui, notre <input type="file" /> a pour nom image (name="image"). Vous vous en rappelez ?)
Mais du coup, on veut savoir la taille totale de notre fichier. La taille totale est contenue "dans l'image". Donc dans notre cellule image. Donc, c'est une cellule dans la cellule Very Happy.
Maintenant on peut expliquer notre code : On vérifie qu'il y a bien un fichier sélectionné, pour cela on vérifie que la taille du fichier n'est pas nulle, n'est pas vide.

Maintenant, on va définir des variables que je vais appeler variables de vérification. En effet, elles vont nous servir à stocker des informations de référence, celles-ci permettront de vérifier que tout est bien correct dans l'image.
On doit donc vérifier : le poids de l'image, l'extension du fichier (hé oui, qu'on nous ne envoie pas un fichier pdf par exemple ! ), et enfin les erreurs et le nombre d'erreurs.
Voici nos variables :
Code:
$maxsize = 16777216; //Poids de l'image, en octets (= 2 Mo)
$extensions_valides = array('jpg, 'jpeg', 'gif', 'png', 'bmp'); //Liste des extensions valides
$i = 0; //Nombre d'erreurs. Pour l'instant 0
$error = NULL; //Erreur en cours. Pour l'instant, aucune

Ensuite, on va procéder à une batterie de tests pour vérifier le fichier envoyé par l'utilisateur !
Déjà, on va vérifier qu'il n'y a pas eu d'erreur lors du transfert en lui-même ^^.
Code:
if ($_FILES['image']['error'] > 0)
        {      $i++;
                $error .= "Erreur lors du transfert de l'image";
        }
Si le nombre d'erreur est supérieur à 0, alors on incrémente $i (on lui ajoute 1), et on indique que l'erreur courante est "Erreur lors du transfert de l'image".

Ensuite on vérifie que le fichier ne dépasse pas la taille imposée (définie dans la variable de vérification $maxsize)
Code:
if ($_FILES['image']['size'] > $maxsize)
        {      $i++;
                $error .= "Le fichier est trop gros : (<strong>".$_FILES['image']['size']." Octets</strong>    contre <strong>2 Mo</strong>)";
        }
Si la taille du fichier (en octets) est supérieure à la taille (en octets) définie dans $maxsize, alors on incrémente $i, et on affiche l'erreur courante, en affichant le poids actuel du fichier ($_FILES['image']['size']) et le poids maximum.

Maintenant il nous reste à vérifier l'extension du fichier. Pour cela, il nous faut décomposer le nom actuel du fichier que l'utilisateur envoie, en ne récupérant que l'extension. Pour cela nous allons utiliser une suite de fonctions natives.
Code:
$extension_upload = strtolower(substr(  strrchr($_FILES['image']['name'], '.')  ,1));
        if (!in_array($extension_upload,$extensions_valides) )
        {      $i++;
                $error .= "Extension du fichier incorrecte.";
        }
Ici, on a défini la variable $extension_upload, qui contient l'extension du fichier (png par exemple). Pour cela, on a sélectionné le nom du fichier ($_FILES['image']['name']) et on l'a mis en minuscule (fonction strtolower) puis on récupère l'extension (fonction substr) que la fonction strrchr a délimité.
En fait, la fonction substr est utilisée comme suit : substr($variable, 1). Ce qui signifie qu'on récupère la 1 chose (la seule chose en français) que l'on cherche. Et ce que l'on cherche, c'est l'extension, et la fonction strrchr($variable, '.') s'en charge, car elle permet de récupérer ce qu'il y a après le dernier point (.) dans le nom du fichier ! Fiou, ce fut dur.
Après, on va donc faire notre vérification. La condition signifie :
Si l'extension du fichier n'est pas contenue dans le tableau qu'est la variable de vérification $extensions_valides, alors on incrémente $i, et on affiche l'erreur courante.

Voici donc où on en est niveau code php :
Code PHP complet actuel:
 

Bon, maintenant, il ne nous reste plus grand chose à faire comme vérifications. Il ne nous en reste plus qu'une. Vérifier si $i est égale à 0. En effet, la variable $i est celle qui contient le nombre d'erreurs. S'il y en a + de zéro, bah, faut stopper le script, et les afficher ! Et comment on les affiche ? Grâce à notre variable $error, qui contient toutes les erreurs qui se sont produites ! Donc on va faire la condition qui vérifie que $i = 0. Si oui, alors on continue le script (celui qui nous permettra d'enregistrer l'image de l'utilisateur sur notre serveur). Dans le cas contraire, on affiche la variable $error.
Code:
if($i == 0)
        {
            //Script
        }
        else
        {
            echo $error;
        }

/!\ En PHP, pour vérifier que telle chose est égale à telle chose, il faut utiliser le double égal (==)

Bon, le plus dur est à venir Very Happy. Âmes sensibles, prenez votre courage à deux mains ! Very Happy.
Nous allons maintenant devoir créer notre propre fonction qui enregistrera l'image sur notre serveur.
Pour cela, créez un nouveau fichier que vous appellerez fonctions.php.
Dans ce nouveau fichier, on va donc créer notre fonction, que l'on va appeler move_image donc :
Code:
<?php
function move_image()
{
//Fonction
}

Cette fonction s'opérera sur le fichier de notre utilisateur, l'image de notre utilisateur. Nous devons donc en argument (entre les parenthèses), passer la variable qui correspondra à l'image de l'utilisateur.
Code:
<?php
function move_image($image)
{
//Fonction
}

Bon, notre fonction doit avant tout récupérer l'extension actuelle de l'image, pour ensuite la remettre dans le nom du fichier quand il sera hébergé sur notre serveur (bah oui, sinon, vous imaginez ? Une image .png se retrouverait en fichier sans extension, soit en fichier .txt Surprised).
On l'a déjà fait avec $extension_upload. On va reprendre exactement la même chose !
Code:
function move_image($image)
        {
            $extension_upload = strtolower(substr(  strrchr($image['name'], '.')  ,1));
        }

Ensuite, on doit créer le nom, juste avant l'extension. On pourrait donc mettre tout bêtement image.extension, mais impossible... Car, réfléchissons un peu... Pour une image, ça ira. Mais quand plusieurs images seront hébergées. Elles auront toutes le même nom ! Et pour accéder à une image, qui a le même nom que X autres... c'est dur :p.
Du coup, on doit créer un nom unique. Pour cela, nous allons nous baser sur le temps, le moment où l'utilisateur a envoyé son image. Rien de mieux pour cela, que d'utiliser la fonction native time(), qui récupère le temps en seconde qui s'est écoulé entre le début de l'époque UNIX (en 1970 et des bananes) et la seconde même où l'on invoque la fonction.
Code:
function move_image($image)
        {
            $extension_upload = strtolower(substr(  strrchr($image['name'], '.')  ,1));
            $name = time();
        }

Ensuite, on va supprimer les éventuels espaces que contient $name (car la fonction time() retourne des espaces, aussi), et on va coller en concaténant (en rajoutant) l'extension de l'image à la fin.

Code:
function move_image($image)
        {
            $extension_upload = strtolower(substr(  strrchr($image['name'], '.')  ,1));
            $name = time();
            $nomimage = str_replace(' ','',$name).".".$extension_upload;
        }
La fonction str_replace() remplace les espaces (' ') par un rien ('') qui sont contenus dans la variables $name. Puis, on concatène $extension_upload (l'extension de l'image).

Il nous reste maintenant à mettre l'image sur notre serveur, maintenant qu'on a son nom !
Pour cela, on définit d'abord le chemin jusqu'au dossier où on mettra l'image. (Nous ferons un point sur l'arborescence de notre site dans la prochaine partie, ne vous en faites donc pas)
Code:
$name = './hebergement/images/'.$nomimage;
move_uploaded_file($image['tmp_name'],$name);
La variable $name définit le chemin relatif jusqu'au fichier où on mettra l'image sur le serveur, suivi de son nom. La fonction native move_uploaded_file nous permet de mettre notre image sur le serveur.
Il ne nous reste maintenant plus qu'à retourner le nom de l'image, et le tour est joué ! Notre fonction est donc :
Code:
function move_image($image)
        {
            $extension_upload = strtolower(substr(  strrchr($image['name'], '.')  ,1));
            $name = time();
              $nomimage = str_replace(' ','',$name).".".$extension_upload;
              $name = './hebergement/images/'.$nomimage;
            move_uploaded_file($image['tmp_name'],$name);
            return $nomimage;
        }

Parfait, on revient donc maintenant sur notre page de départ , hosting_mini.php.
On va inclure notre page des fonctions, dans notre page actuelle, et appeler la fonction du coup !

Code:
<?php
require('fonctions.php');
if(!empty($_POST['submit']))
{
if (!empty($_FILES['image']['size']))
    {
        //On définit les variables de vérifications :
        $maxsize = 16777216;
        $extensions_valides = array( 'jpg' , 'jpeg' , 'gif' , 'png', 'bmp' );
        $i = 0;
        $error = NULL;
        if ($_FILES['image']['error'] > 0)
        {      $i++;
                $error .= "Erreur lors du transfert de l'image";
        }
        if ($_FILES['image']['size'] > $maxsize)
        {      $i++;
                $error .= "Le fichier est trop gros : (<strong>".$_FILES['image']['size']." Octets</strong>    contre <strong>2 Mo</strong>)";
        }
               
        $extension_upload = strtolower(substr(  strrchr($_FILES['image']['name'], '.')  ,1));
        if (!in_array($extension_upload,$extensions_valides) )
        {      $i++;
                $error .= "Extension du fichier incorrecte";
        }
      if($i == 0)
        {
            $nomimage=(!empty($_FILES['image']['size']))?move_image($_FILES['image']):'';
        }
        else
        {
            echo $error;
        }
  }
    else
    {
        echo "Pas d'image sélectionnée";
    }
}
else{
echo '<form method="post" enctype="multipart/form-data">
Héberger une image : <br />
<input type="file" name="image" id="image" size="20" /><br />
<input type="submit" name="submit" value="Envoyer ! " />
</form>';
}
?>
Oula, mais qu'est-ce qui a été modifié dans tout ce charabia ?!
Déjà, on a inclu la page fonctions.php, grâce à la fonction require();
Après, on a modifié cette partie :
Code:
if($i == 0)
        {
            $nomimage=(!empty($_FILES['image']['size']))?move_image($_FILES['image']):'';
        }
        else
        {
            echo $error;
        }
On a rajouté la variable $nomimage. Un peu bizarre, je le conçois. On va voir ensemble ce qu'il se passe :
En fait, notre variable résulte d'une condition (dite ternaire), contenue dans :
(!empty($_FILES['image']['size']))?move_image($_FILES['image']):''
Cette condition toute en ligne est en faite la même chose que :
Code:
if(!empty($_FILES['image']['size']))
{
move_image($_FILES['image']);
}
En gros, on vérifie bien que l'image existe, et si c'est le cas, on la passe en argument de notre fonction précédemment créée : move_image()
Donc en fait, on a invoqué notre fonction ! Maintenant, l'image est donc sur notre serveur ! Il ne reste plus qu'à afficher le lien de l'image !
Pour cela, on va tout simplement faire :
Code:
echo '<br />Insérer l\'image : ';
            echo '<textarea type="text" cols="35" rows="2" readonly><img src="http://VOTRE-SITE.fr/image-'.$nomimage.'" alt="Image" /></textarea>';
On affiche une chose semblable à :
Insérer l'image :

Mais d'où elle sort la variable $nomimage ?
Hé bien, de juste au dessus :p. C'est celle qu'on vient de créer avec notre condition ternaire Wink.

On a donc désormais terminé notre code ! Et le voici, tout beau tout propre, en entier !
Code final complet:
 

.htaccess



Nous en avons fini avec le php, mais pas avec les codes ! Il nous reste encore 3 petites lignes à faire.
En fait, quand nous avons créé notre fonction qui permet de mettre l'image sur le serveur, nous avons ensuite indiqué son lien pour y accéder. Cependant, si vous essayez actuellement d'y accéder, ça ne fonctionnera pas ^^'.. En fait, le lien indiqué n'existe pas. Et n'existera jamais ! Ce qu'on va faire, c'est rediriger tous les liens des images, vers la bonne adresse ! Mais pourquoi avoir fait ça ? Ca revient au même ? Pas exactement... En fait, c'est déjà beaucoup plus simple à lire ^^. Mais surtout... C'est plus sécurisé. L'hébergement de fichier sur son serveur est dangereux, car n'importe qui peut s'y introduire si il envoie un fichier un peu malicieux ! Heureusement, nous faisons des vérifications (l'extension, le poids etc). Mais aussi, nous modifions l'URL (le lien), pour éviter de donner une information aux utilisateurs pas très gentils : l'arborescence de notre site. Ce système s'appelle la réécriture d'URL.
Du coup, je vais vous demander de créer un nouveau fichier que vous appellerez : .htaccess (le nom du fichier doit être .htaccess, rien d'autre, et pas d'extension !).
Aussi, le fichier .htaccess doit être encodé en ANSI.

Dans celui-ci, nous allons indiquer que nous commençons par autoriser la réécriture d'URL.
Code:
RewriteEngine on

Ensuite, nous allons réaliser notre réécriture.
En réalité, les images sont accessible avec l'URL suivante : http://votre-site.fr/hebergement/images/nomimage
Mais nous allons modifier l'URL en : http://votre-site/image-nomimage
Pour cela, nous allons utiliser une expression régulière :
Code:
RewriteRule ^image-(\d+\.([a-z]+){3,4})$ /hebergement/images/$1 [L]
Au début, on indique avec RewriteRule que nous définissons une nouvelle réécriture d'URL. Ensuite, entre ^ et $, nous avons l'expression régulière qui correspond à l'URL réécrite (je ne peux vous expliquer tout ce blabla, ça rallongerait énormément le tutoriel. Si néanmoins vous tenez à comprendre ce code, vous pouvez m'envoyer un MP ou posez votre question dans la section dédiée Wink).
Et enfin, après le $, nous avons la vraie URL, soit : votresite.fr/hebergement/images/nomimage
Et voilà ! Notre fichier .htaccess a donc pour contenu :

Code:
RewriteEngine on
RewriteRule ^image-(\d+\.([a-z]+){3,4})$ /hebergement/images/$1 [L]


L'aborescence de notre site & la mise en ligne



Bon, c'est bien beau tout ça, mais tous ces fichiers, tous ces dossiers, on les organise comment ?!

Hé bien, comme suit :
Racine du site
-hebergement
--images
La racine du site, est le premier répertoire dans votre logiciel FTP. Il sera souvent nommé Public_html ou Public_ftp ou Nomdevotresite. C'est dans ce répertoire qu'on mettra tous nos codes

Du coup : le dossier images, dans le dossier hebergement, dans le racine du site.

Dans le dossier images, on aura toutes les images hébergées. On y touche pas. Dans le dossier hebergement, rien d'autre que le dossier images, et à la racine du site, les fichiers .htaccess fonctions.php hosting_mini.php.

Mais attends, tu nous parles de FTP, de mettre ça dans des dossiers etc. Mais c'est quoi tout ça ? .
Le FTP (abréviation abusive de logiciel FTP) est un logiciel qui vous permet de transvaser des fichiers de votre ordinateur, sur votre site. Pour cela, je vous conseille de télécharger le logiciel FileZilla. Vous aurez toutes les informations nécessaires quant à son utilisation dans ce tutoriel : http://www.school-of-progress.fr/t4471-wampserver#filezilla

Et voilà !



Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].



Je soussigné, Eluknow, accepte qu'un directeur reposte le présent tutoriel "[Codage FA]Modifier l'hébergeur d'images SERVIMG + Créer son propre hébergeur d'images" tel que je l'ai rédigé.
Revenir en haut Aller en bas



Cadeau de Noël


Mon dipl'homme:
 

Avatars et signas cadeaux':
 

[Forumactif] Modifier l'hébergeur d'images SERVIMG + Créer son propre hébergeur d'images
Page 1 sur 1
 Sujets similaires
-
» Insérer des images dans vos sujets.
» Hébergement gratuit images photos fichiers
» imabox.fr : uploader vos images
» hébergeur gratuit pour un site rein quand flash(RESOLUT)
» [Résolu] Affichage images dans un mail
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+