SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Upload n resize 4 picture in one table row

    Hi guys I have big problem.


    I've used a thumbnail script to make thumnail of my image. But it only works for one image. How about inserting 4 images into one row? For example, i have a produk, and i want to insert 4 images on that produk..

    so the table would look like this:
    //table structure for product

    | id_produk | name_produk | picture 1 | picture 2 | picture 3 | picture 4 |

    -----------------------------------------------------------------------------------------------------
    //this is what should be inside the table product

    | 1 | shoes 1 | img1 | img2 | img3 | img4

    I have made some coding like this:

    Code:
    function UploadImage($fupload_name){
      //direktori gambar
      $vdir_upload = "../../../foto_produk/";
      $vfile_upload = $vdir_upload . $fupload_name;
    
      //Simpan gambar dalam ukuran sebenarnya
      move_uploaded_file($_FILES["fupload"]["tmp_name"], $vfile_upload);
    
      //identitas file asli
      $im_src = imagecreatefromjpeg($vfile_upload);
      $src_width = imageSX($im_src);
      $src_height = imageSY($im_src);
    
      //Simpan dalam versi small 110 pixel
      //Set ukuran gambar hasil perubahan
      //$dst_width = 55;
      //$dst_height = ($dst_width/$src_width)*$src_height;
      
      //Simpan dalam versi small 110 pixel
      //Set ukuran gambar hasil perubahan
       $dst_height = 150;
       $dst_width = ($dst_height/$src_height)*$src_width;
     
    
      //proses perubahan ukuran
      $im = imagecreatetruecolor($dst_width,$dst_height);
      imagecopyresampled($im, $im_src, 0, 0, 0, 0, $dst_width, $dst_height, $src_width, $src_height);
    
      //Simpan gambar
      imagejpeg($im,$vdir_upload . "small_" . $fupload_name);
      
      //Hapus gambar di memori komputer
      imagedestroy($im_src);
      imagedestroy($im);
    }
    Now with script above, i can create one big image and one thumbnail for picture1.

    Please help me how to upload all those 4 images within the same id_product and create thumbnail for those images as well. thanks

    PS:
    this is my upload form, i just cut from break above. I chose the :editproduct one so u can see the database structure. Dont bother with the language, just see the fupload field there, since i want to upload 4 images in my product, so i create 4 colls in my product database and so i name my fupload field with "fupload1, fupload2, etc" (<input type=file name='fupload' size=30>).

    Code:
         break;
        
      case "editproduk":
        $edit = mysql_query("SELECT * FROM produk WHERE id_produk='$_GET[id]'");
        $r    = mysql_fetch_array($edit);
    
        echo "<h2>Edit Produk</h2>
              <form method=POST enctype='multipart/form-data' action=$aksi?module=produk&act=update>
              <input type=hidden name=id value=$r[id_produk]>
              <table>
              <tr><td width=70>Nama Produk</td>     <td> : <input type=text name='nama_produk' size=60 value='$r[nama_produk]'></td></tr>
              <tr><td>Kategori Utama</td>  <td> : <select name='kategoriutama'>";
     
              $tampil=mysql_query("SELECT * FROM kategori_utama ORDER BY id_kategori_utama");
              if ($r[idkategori_utama]==0){
                echo "<option value=0 selected>- Pilih Kategori Utama -</option>";
              }   
    
              while($wk=mysql_fetch_array($tampil)){
                if ($r[idkategori_utama]==$w[id_kategori_utama]){
                  echo "<option value=$wk[id_kategori_utama] selected>$wk[nama_kategori_utama]</option>";
                }
                else{
                  echo "<option value=$wk[id_kategori_utama]>$wk[nama_kategori_utama]</option>";
                }
              }
        echo "</select></td></tr>
    		  <tr><td>Kategori</td>  <td> : <select name='kategori'>";
     
              $tampil=mysql_query("SELECT * FROM kategori ORDER BY nama_kategori");
              if ($r[id_kategori]==0){
                echo "<option value=0 selected>- Pilih Kategori -</option>";
              }   
    
              while($w=mysql_fetch_array($tampil)){
                if ($r[id_kategori]==$w[id_kategori]){
                  echo "<option value=$w[id_kategori] selected>$w[nama_kategori]</option>";
                }
                else{
                  echo "<option value=$w[id_kategori]>$w[nama_kategori]</option>";
                }
              }
        echo "</select></td></tr>
              <tr><td>Berat</td>     <td> : <input type=text name='berat' value=$r[berat] size=3></td></tr>
              <tr><td>Harga</td>     <td> : <input type=text name='harga' value=$r[harga] size=10></td></tr>
              <tr><td>Diskon</td>     <td> : <input type=text name='diskon' value=$r[diskon] size=2></td></tr>
              <tr><td>Stok</td>     <td> : <input type=text name='stok' value=$r[stok] size=3></td></tr>
              <tr><td>Deskripsi</td>   <td> <textarea name='deskripsi' style='width: 600px; height: 350px;'>$r[deskripsi]</textarea></td></tr>
              <tr><td>Picture 1</td>       <td> :  
              <img src='../foto_produk/small_$r[gambar1]'></td></tr>
              <tr><td>Ganti Gbr</td>    <td> : <input type=file name='fupload' size=30> *)</td></tr>
    		   <tr><td>Picture 2</td>       <td> :  
              <img src='../foto_produk/small_$r[gambar2]'></td></tr>
              <tr><td>Ganti Gbr</td>    <td> : <input type=file name='fupload2' size=30> *)</td></tr>
    		   <tr><td>Picture 3</td>       <td> :  
              <img src='../foto_produk/small_$r[gambar3]'></td></tr>
              <tr><td>Ganti Gbr</td>    <td> : <input type=file name='fupload3' size=30> *)</td></tr>
    		   <tr><td>Picture 4</td>       <td> :  
              <img src='../foto_produk/small_$r[gambar4]'></td></tr>
              <tr><td>Ganti Gbr</td>    <td> : <input type=file name='fupload4' size=30> *)</td></tr>
              <tr><td colspan=2>*) Apabila gambar tidak diubah, dikosongkan saja.</td></tr>
              <tr><td colspan=2><input type=submit value=Update>
                                <input type=button value=Batal onclick=self.history.back()></td></tr>
             </table></form>";
        break;  
    }
    ANd this is the action which will process the form above:
    after successfully creating the thumbnail, I will insert them to my product data with the same 'id_product'. So again, one product has 4 images.
    Code:
    $module=$_GET[module];
    $act=$_GET[act];
    
    // Update produk
    elseif ($module=='produk' AND $act=='update'){
      $lokasi_file    = $_FILES['fupload']['tmp_name'];
      $tipe_file      = $_FILES['fupload']['type'];
      $nama_file      = $_FILES['fupload']['name'];
      $acak           = rand(1,99);
      $nama_file_unik = $acak.$nama_file; 
    
      $produk_seo      = seo_title($_POST[nama_produk]);
    
      // If there is no images being changed
      if (empty($lokasi_file)){
        mysql_query("UPDATE produk SET nama_produk = '$_POST[nama_produk]',
                                       produk_seo  = '$produk_seo',
    								   idkategori_utama = '$_POST[kategoriutama]', 
                                       id_kategori = '$_POST[kategori]',
                                       berat       = '$_POST[berat]',
                                       harga       = '$_POST[harga]',
                                       diskon      = '$_POST[diskon]',
                                       stok        = '$_POST[stok]',
                                       deskripsi   = '$_POST[deskripsi]'
                                 WHERE id_produk   = '$_POST[id]'");
      header('location:../../media.php?module='.$module);
      }
      else{
        if ($tipe_file != "image/jpeg" AND $tipe_file != "image/pjpeg"){
        echo "<script>window.alert('Upload Gagal, Pastikan File yang di Upload bertipe *.JPG');
            window.location=('../../media.php?module=produk)</script>";
        }
        else{
        UploadImage($nama_file_unik);
        mysql_query("UPDATE produk SET nama_produk = '$_POST[nama_produk]',
                                       produk_seo  = '$produk_seo', 
    								   idkategori_utama = '$_POST[kategoriutama]',
                                       id_kategori = '$_POST[kategori]',
                                       berat       = '$_POST[berat]',
                                       harga       = '$_POST[harga]',
                                       diskon      = '$_POST[diskon]',
                                       stok        = '$_POST[stok]',
                                       deskripsi   = '$_POST[deskripsi]',
                                       gambar1      = '$nama_file_unik',
                                       gambar2      = '$nama_file_unik',
                                       gambar3      = '$nama_file_unik',   
                                       gambar4      = '$nama_file_unik',
                                 WHERE id_produk   = '$_POST[id]'");
        header('location:../../media.php?module='.$module);
        }
      }
    Please help me. i've browsed everywhere but couldn't find any solutions. Thanks

  2. #2
    Always A Novice bronze trophy
    K. Wolfe's Avatar
    Join Date
    Nov 2003
    Location
    Columbus, OH
    Posts
    2,182
    Mentioned
    67 Post(s)
    Tagged
    2 Thread(s)
    I'm doing to dive into this a bit later, but just a heads up for the next time you make a project such as this:

    1) Try to stay away from things like Field1, Field2, Field3 such as your images. Create a new table of Images with a foreign key to relate it back to the beginning table, perhaps with an 'ImageType' column if needed. If your worried about limiting each type of image or all images overall, you can pragmatically check the image count before allowing an upload. This allows for very easy changes down the road say if you want to allow more images to be uploaded.

    2) I would stay away from storing the image in the db. I would instead perhaps store the path to the image with some descriptors with it.

  3. #3
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by K. Wolfe View Post
    I'm doing to dive into this a bit later, but just a heads up for the next time you make a project such as this:

    1) Try to stay away from things like Field1, Field2, Field3 such as your images. Create a new table of Images with a foreign key to relate it back to the beginning table, perhaps with an 'ImageType' column if needed. If your worried about limiting each type of image or all images overall, you can pragmatically check the image count before allowing an upload. This allows for very easy changes down the road say if you want to allow more images to be uploaded.

    2) I would stay away from storing the image in the db. I would instead perhaps store the path to the image with some descriptors with it.
    Oh yes, I think I got your point. Beautiful. Thanks Kyle. So, I just created a new table for storing my images n limit my upload file. and i relate my images table to produk table using the same "key field". but the problem is, how can i combine uploading images and uploading product information? So, while adding product or editing product, I can upload n delete images in other table at the same time? I just able to do it one after another. I upload my product and submit it, then i upload all the rest images. So, how can i combine those action together?

  4. #4
    SitePoint Wizard frank1's Avatar
    Join Date
    Oct 2005
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok ,i am not an advertiser (i dont know the writer personally either) but just assuming that you are just starting with php(through number of posts,sorry if i got it wrong) and if you want an easy and detailed answer go through book called php solutions.
    I recommed that book (just in this case) because that book has excatly what you want to do with detail explanations
    inserting content,uploading multiple images,resizing it and managing relations.(also done in easy object oriented way)

    I recommed book because each line is better explained there...rather than i saying
    you need to have referential integrity(better than manual),you can make class for upload and resize and use it generically for 4 images maintaining one to many or many to many relation...
    so if possible just go through that book,will make things much easier...(please dont get me wrong)
    if you are not able to do that ,i may try to answer your question again.

    thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •