Upload fotografii pe pagina WP


Zilele astea am avut plăcerea să revin puţin la bruma de cunoştinţe de PHP şi MySQL pentru un alt blog (Jurnalul meu de tată). Aici am vrut neapărat să fac o pagină (nu post) în care tătici ca mine să se poată da mari cu copii lor, încărcând direct nişte poze. Simplu nu? Acum că am terminat, e simplu, dar pe parcurs am avut câteva hopuri şi am căutat o grămadă pe net, fără a găsi o soluţie completă. Comod fiind, speram să găsesc un script şi doar să-l personalizez. Nu am găsit. Acum, dacă tot am muncit atâta, rezultatul poate ar fi util şi pentru alţii, de aceea scriu acest articol.

Modulele la care am lucrat ar fi:

  1. definirea noii pagini cu template separat, ca să nu afecteze celelalte pagini statice din blog;
  2. un modul de încărcare a pozelor cu datele asociate (părinte, copil, comentariu);
  3. un modul de minim control al uploadului (format fişier, dimensiune);
  4. un modul de procesare a pozelor astfel încât din poza încărcată să generez un thumbnail afişabil ca link către poza cu dimensiunile originale;
  5. un modul de gestiune a unei tabele MySQL în care să fie toate datele.

Probabil că pentru unii e doar o chestie de tastat, dar la mine a cam durat câteva zile. Nici n-am avut mult timp disponibil, dar nu a fost ceva ce să pot scrie din cap, am avut diverse tipuri de scripturi din care am consolidat o soluţie completă.

Aşadar, să începem.

Pagina cu template separat

Deci vroiam o pagină normală de WordPress, doar că în ea aveam nevoie de cod PHP. Sunt o grămadă de plug-in-uri, dar vroiam un cod nativ pe pagină, fără complicaţii care puteau afecta în alte părţi. Soluţia este simplă. Iei din directorul cu template-ul tău fişierul page.php, îl salvezi cu alt nume, în acelaşi director, şi la începutul lui pui următorul text:

<?php /*Template Name: Da-te mare*/?>

Asta spune WordPressu-lui că fişierul face parte din template şi se numeşte Dă-te mare.

Pasul doi este să faci o pagină nouă din Panoul de control (Pagini-Pagină Nouă), iar în lateral dreapta ai o listă din care alegi template-ul tău. Valoarea implicită este Default Template, iar tu vei alege Dă-te mare.

Gata, cam asta ar fi prima parte, acum, indiferent câte alte pagini ai, ele vor fi neschimbate, doar noua pagină va folosi acest nou template în care poţi să faci ce doreşti. În cazul meu urmează scriptul.

Încărcare poze, verificări, încărcat în tabelă

În primul rând va trebui să îţi faci o tabelă. Eu am preferat chiar să fac o altă bază MySQL pe tema asta, un nou utilizator MySQL cu drepturi pe baza şi apoi o tabelă cu câmpurile care mă interesau pe mine (Auto – incrementare automata, Părinte, Copil, Poza, Comentariu).

Cum nu-mi închipui că eşti hacker, şi dacă ai fi, probabil nu ai avea nevoie de prea multe ca să îmi strici blogul, o să pun mai jos tot scriptul pentru utilizare de voie, de oricine, oricând. Trebuie doar să modifici ceea ce ţine de baza de date şi parametrii. Pun şi ceva comentarii ca să fie mai uşor de urmărit.

<!– INCEPUT MOTOR GALERIE IMAGINI –>
     <div>
     <?php
       $user_name = „nume_utilizator_mySQL”;
       $password = „parolata”;
       $database = „nume_baza_date”;
       $server = „nume_sau_ip_server”;
       $pathToImages = „/calea_catre_directorul_cu_poze/”;
       $pathToThumbs = „/calea_catre_directorul_cu_thumbs/”;
       $thumbWidth = 150; //dimensiunea pentru definirea thumbnailului pozei incarcate
       
       //afisare baza de date
       $db_handle = mysql_connect($server, $user_name, $password);
       $db_found = mysql_select_db($database, $db_handle);

     if ($db_found) {

       $query = „select * from nume_tabela”;
       $result = mysql_query($query);
       echo mysql_error();
       //ciclu afisare
       echo ‘<table border=”0″ bgcolor=”fcf3ca” border-color=”grey” padding=”5px” spacing=”5px” align=”center” cols=”2″ width=”100%”>’;
       while($row=mysql_fetch_array($result)){
        
        echo ‘<tr>’;
        echo ‘<td width=”175px” align=”left”>’;
        echo „<a href=http://jurnaldetata.ro/wp-content/themes/coffeedesk/poze/”.$row[poza].”>”;
        echo „<img src=\”caleahttpcatrepoze”.$row[poza].”\” border=0></a>”;
        echo ‘</td><td align=”justify”>’;
        echo „Rol principal: <b>$row[copil]</b><br/>Figurant(ă): <b>$row[parinte]</b><br/>&nbsp;<p><i>$row[comentariu]</i></p>”;
        echo ‘</td>’;
        echo ‘</tr>’;
               
        }
        echo ‘</table>’;
        echo ‘<p>&nbsp;</p>’;
}

       else {
        print „Eroare: Baza de date nu a fost găsită!”;
       }
        mysql_close($db_handle);
//sfarsit afisare baza de date
//dimensiune maxima poza in KB
       define („MAX_SIZE”,”2500″);

//verificam extensia fisierului

       function getExtension($str) {
               $i = strrpos($str,”.”);
               if (!$i) { return „”; }
               $l = strlen($str) – $i;
               $ext = substr($str,$i+1,$l);
               return $ext;
       }

//contor de erori. trebuie sa fie 0, altfel nu incarcam poza
       $errors=0;
//verificam daca a fost apasat butonul submit

       if(isset($_POST[‘Submit’]))
       {
        //citim numele fisierului incarcat

        $image=$_FILES[‘image’][‘name’];
        
        if ($image)
        {
        //citim numele original

         $filename = stripslashes($_FILES[‘image’][‘name’]);
        //citim extensia
          $extension = getExtension($filename);
         $extension = strtolower($extension);
        //daca extensia nu este corecta, la revedere
       if (($extension != „jpg”) && ($extension != „jpeg”))
         {
        //mesaj eroare

          echo ‘<h3>Fisierul asta nu este o poza. Pune te rog format .jpg sau .jpeg</h3>’;
          $errors=1;
         }
         else
         {
//verificam marimea pozei

       $size=filesize($_FILES[‘image’][‘tmp_name’]);

//verificam sa nu depasim limita de marime
if ($size > MAX_SIZE*1024)
{
       echo ‘<h3>Limita fisierului este de 2.5MB iar poza ta este mai mare. Te rog pune una mai mică. Multumesc.</h3>’;
       $errors=1;
}

//noul nume de fisier este data unix, ca sa nu cumva sa avem fisiere cu acelasi nume si sa le suprascriem
$image_name=time().’.’.$extension;
$newname=$pathToImages.$image_name;
//verificam copierea si dam mesaj daca nu

$copied = copy($_FILES[‘image’][‘tmp_name’], $newname);
if (!$copied)
{
       echo ‘<h3>Încărcarea a eşuat!</h3>’;
       $errors=1;
}}}}

//daca totul merge bine mergem mai departe
       if(isset($_POST[‘Submit’]) && !$errors)
       {
       //creare thumbnail
        
         // incarcam imaginea si luam dimensiunile trebuie sa ai modulul GD instalat in PHP

            $img = imagecreatefromjpeg( „{$pathToImages}{$image_name}” );
            $width = imagesx( $img );
            $height = imagesy( $img );

            // calculam dimensiunile
            $new_width = $thumbWidth;
            $new_height = floor( $height * ( $thumbWidth / $width ) );

            // facem o poza temporara
            $tmp_img = imagecreatetruecolor( $new_width, $new_height );

            // copiem si redimensionam

           imagecopyresized( $tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height );

            // salvam fisierul

            imagejpeg( $tmp_img, „{$pathToThumbs}{$image_name}” );
       
       //sfarsit modul thumbnail
       $db_handle = mysql_connect($server, $user_name, $password);
       $db_found = mysql_select_db($database, $db_handle);

if ($db_found) {
       $parinte = $_POST[‘parinte’];
       $copil = $_POST[‘copil’];
       $poza = $image_name;
       $comentariu = $_POST[‘comentariu’];
       $comentariu = strip_tags($comentariu);
$SQL = „INSERT INTO nume_tabela (auto, parinte, copil, poza, comentariu) VALUES (‘NULL’, ‘$parinte’, ‘$copil’, ‘$poza’, ‘$comentariu’)”;
$result = mysql_query($SQL);

mysql_close($db_handle);

echo „<b>Te-ai dat mare. Poza a fost încărcată cu succes!</b>”;
echo „<p>Ca să te vezi dat mare, fă clic <a href=”adresa catre aceeasi pagina”><b>aici</b></a>.”; //pentru ca dupa ce incarca poza nu o si afisaza, ca am preferat ca listarea pozelor sa fie la inceputul paginii
}
else {
print „Eroare: Baza de date nu a fost găsită!”;
mysql_close($db_handle);
}
        
        
       }

       ?>

       <!–aici este formularul de upload –>
<a name=”formular”></a>
       <form name=”datemare” method=”post” enctype=”multipart/form-data”  action=””>
       <table border=”0″ bgcolor=”fcf3ca” border-color=”grey” padding=”5px” spacing=”5px” align=”center” cols=”2″ width=”200px”>
       <tr>
       <td colspan=”2″ align=”center”>
        <h4>Dă-te mare aici</h4>
       </td>
       
       <tr>
       <td>Numele tău:</td><td align=”center”><input type=”text” width=”100px” name=”parinte”></td>
       </tr>
       <tr>
        <td>Numele piticului sau piticei tale:</td><td align=”center”><input type=”text” width=”100px” name=”copil”></td>
       </tr>
       <tr>
        <td>Ceva vorbe despre instantaneu:</td><td align=”center”><textarea name=”comentariu” rows=”10″ cols=”20″></textarea></td>
        </tr>
       <tr> 
        <td>Poza:</td><td align=”center”><input type=”file” name=”image”></td>
        </tr>
       <tr>
        <td colspan=”2″ align=”center”>
        <input name=”Submit” type=”submit” value=”Da-mă mare!”></td>
        </tr>
       </table>
      
       </form>
     
     
     
     </div>
     <!– SFARSIT GALERIE IMAGINI –> 

Dacă vrei să vezi treaba în practică, mai ales dacă ai un pitic cu care te mândreşti, intră pe pagina Dă-te mare în jurnalul meu. Sunt sigur că sunt multiple îmbunătăţiri posibile şi nu ezita să le prezinţi, poate ajută pe cineva. Utilizare plăcută.


5 răspunsuri la “Upload fotografii pe pagina WP”

  1. Se stie ca, in urma cu doua milenii, in China nu era pretuit doctorul care trata cel mai bine, ci cel ai carui pacienti nu se imbolnaveau. El era platit atata timp cat pacientii sai erau sanatosi si… fericiti (chiar daca erau mai saraci). Iar pentru a le asigura sanatatea, medicii apelau la regulile de aur ale naturii. Vrei sa fii un om sanatos? Vrei ca medicamentatia ta sa fie „sanatoasa”?
    Incearca sa intri pe http://medicinapopulara.host.org si poate vei gasi raspunsul de mult asteptat.

  2. Mulţumesc. Foarte tari sugestiile, nici una nu este în practică, dar deja ar fi prea aproape de perfecţiune. Limită de spaţiu nu prea am 🙂 Să dea Domnu să fie mulţi lăudăroşi că pentru aşa motiv, mă apuc şi fac toate chestiile pe care le-ai scris. Acum mă concentrez pe partea a doua, aia în care am zis că vreau să iau interviuri taţilor. Pregăteşte-te! 🙂

  3. M-ai băgat în ceață cu toată povestea de mai sus așa că m-am dus și-am pus o poză pe direct, fără ocolișuri. Și dacă tot ai cerut feedback, zic:
    – un „modul” de previzualizare înainte de „Da-mă mare” – pentru a evita eventualele typos or else?
    – sau mai pe larg un „modul” de modificare/ștergere a pozei/comentariului?
    și 2 întrebări:
    – știe să facă legătura între diferitele upload-uri ale aceluiași „figurant”?
    – ai limită de spațiu la hosting? Dacă da, s-ar putea s-o termini repede cu limita de 2,5MB și cu un val de lăudăroși.
    – trebuia sa comentez aici sau acolo? 😀

Lasă un răspuns