สร้าง Photo Gallery

สวัสดีครับ Workshop วันนี้จะมาเสนอการสร้าง Photo Gallery ซึ่งระบบดังกล่าวจะสามารถทำงานดังนี้ครับ
  • สามารถอัพโหลดไฟล์รูปภาพ jpg,jpeg,png,gif ได้
  • แสดงรายการรูปภาพจากโฟลเดอร์รูปภาพ
  • สามารถลบรูปภาพได้โดยมีการยืนยันการลบข้อมูล
  • จัดองค์ประกอบด้วย CSS
  • ดึงข้อมูลรูปภาพแบบ Directory Browse
ขั้นตอนการสร้าง

 

1. สร้าง folder ใน c:/appserv/www/photo/

gallery_step1

2. สร้าง folder upload ใน folder photo  เพื่อใช้สำหรับเก็บรูปภาพ

gallery_step2

6. สร้างไฟล์ CSS ไฟล์ style.css
@charset "utf-8";
 
    body{padding: 0;margin: 0;}
 
    body,table,td,div{font-family: 'Tahoma',Verdana;font-size: 12px;}
 
    #topnav{background-color: #900;padding: 20px 10px;margin-bottom: 20px;}
 
    #topnav a{text-decoration: none;color: #FFF;font-size: 1.2em;font-weight: bold;padding: 0px 10px;}
 
    #topnav a:hover{color: #D8D8D8;}
 
    #detail{padding: 10px 20px;}
 
    #detail .item{float: left;margin-right: 10px;border: #C0C0C0 1px solid;padding: 4px;margin-bottom: 20px;}
 
    #detail .item .photo{width: 200px;height: 130px;overflow: hidden;margin-bottom: 5px;}
 
    #detail .item a{display: block;text-decoration: none;text-align: center;font-weight:normal;color: #000;}
 
    #detail .item a:hover{font-weight: bold;}
 
    .clear{clear: both;}

 

4. สร้างไฟล์แสดงผลรูปภาพ index.php
<!doctype html>
 
    <html>
 
    <head>
 
    <meta charset="utf-8">
 
    <title>Photo View</title>
 
    <link href="style.css" rel="stylesheet" type="text/css">
 
    </head>
 
     
 
    <body>
 

<div id="topnav">
 
        <a href="upload.php">Upload Photo</a>
 
        <a href="index.php">View Photo</a>
 
    </div>

 

<div id="detail">
 
    <?php $dir='upload/'; $total=0; if($handle=opendir($dir)){ while(false!==($file=readdir($handle))){ if ($file != "." && $file != "..") { ?>
 

<div class="item">
 

<div class="photo"><a href="upload/<?php echo $file; ?>" target="_blank" title="<?php echo $file; ?>"><img src="upload/<?php echo $file; ?>" width="200" border="0"></a></div>

 
    <a href="del.php?id=<?php echo base64_encode($file); ?>" onclick="return confirm('ยืนยันการลบข้อมูล');">DEL</a>
 
    </div>

 
    <?php $total+=1; } } } ?>
 

<div class="clear"></div>

 
    <strong>Total: </strong><span style="text-decoration: underline;"><?php echo $total; ?></span>&nbsp;<strong>Images</strong>
 
    </div>

 
    </body>
 
    </html>

gallery_cover

5. สร้างไฟล์แบบฟอร์มอัพโหลดรูปภาพ upload.php
<!doctype html>
 
    <html>
 
    <head>
 
    <meta charset="utf-8">
 
    <title>Upload Photo</title>
 
    <link href="style.css" rel="stylesheet" type="text/css">
 
    </head>
 
     
 
    <body>
 

<div id="topnav">
 
        <a href="upload.php">Upload Photo</a>
 
        <a href="index.php">View Photo</a>
 
    </div>

 

<div id="detail">
 

<h2>Upload Photo</h2>

 




 

<form method="post" enctype="multipart/form-data" action="upload_save.php">
 
        <strong>Image File:&nbsp;</strong><input type="file" name="tmpFile">
 




 
        <input type="submit" value="Upload">
 
        </form>

 
    </div>

 
    </body>
 
    </html>

gallery2

6. สร้างไฟล์รับข้อมูลและบันทึกรูปภาพ upload_save.php
<?php header('Content-type: text/html; charset=utf-8'); $file=$_FILES; if(isset($file['tmpFile']['name'])){ $filetype=end(explode('.',strtolower($file['tmpFile']['name']))); $allowFiles=array('jpg','jpeg','png','gif'); $chkAllow=false; foreach($allowFiles as $key){ if($key==$filetype){ $chkAllow=true; break; } } if($chkAllow){ move_uploaded_file($file['tmpFile']['tmp_name'],'upload/'.time().'.'.$filetype); ?>            
 
    <script language="javascript">
 
    window.location.href="index.php";
 
    </script>
 
    <?php exit(); } } ?>

 

7. สร้างไฟล์ลบรูปภาพ del.php
<?php header('Content-type: text/html; charset=utf-8'); $get=$_GET; if($get['id']!=''){ $id=base64_decode($get['id']); @unlink('upload/'.$id); } ?>            
 
    <script language="javascript">
 
    window.location.href="index.php";
 
    </script>

gallery3

ผลการทำงาน

gallery_cover

สรุป : คงจะเป็นประโยชน์ไม่น้อยนะครับ สำหรับคนที่ต้องการศึกษาวิธีทำ Image Gallery ซึ่งวิธีนี้ไม่ได้จัดเก็บข้อมูลรูปภาพลงบน log file หรือ ลงบน ฐานข้อมูลนะครับ แต่จะเป็นการอันทึกข้อมูลลงในโฟลเดอร์และทำการ Directory Browse เพื่อแสดงข้อมูลใน Folder Upload ครับ ส่วนตัวอย่าง code ท่านสามารถดาวน์โหลดได้จากกล่องข้างล่างนี้นะครับ ขอให้มีความสุขกับการเขียนโปรแกรมครับ /9Boy
ความคิดเห็น
(มีผู้เข้าชม 3,809 ครั้ง, 1 ผู้เข้าชมในวันนี้)

Related posts