CakePHP 1.3 Tutorial : Muat Naik -> Crop Imej

Posted by Fairuz Sulaiman on 5/25/11 • Categorized as Benjana Ilmu,CakePHP,Catatan Harian,Ilmu Komputer,PHP MySQL

assalamualaikum

Bismillahirrahmanirrahim. Syukur kepada Allah kerana dengan izin-Nya dapat saya menyiapkan modul seperti tajuk di atas. Selepas mencuba lebih kurang 5 hari… (satu tempoh yang panjang bagi pengaturcara kelas bawahan seperti saya menyiapkan projek). Alhamdulillah akhirnya usaha berjaya

Sebenarnya idea ini datang daripada beberapa link dibawah iatu

WebmotionUK -> Klik untuk laman tersebut. Idea datang daripada sini Untuk Demo Klik di sini
Tutorial daripada Bakery everything cakephp -> Klik untuk laman tersebut.

Malangnya terlalu banyak masalah yang timbul . Ok mari kita mulakan tutorial ini.

Langkah 1: Perkara yang perlu anda ada

CakePHP terkini . Untuk muat turun klik SINI
Plugin javascript ImgselectArea. Muat turun di SINI kemudian extract (menggunakan winrar atau winzip atau 7zip) kemudian diletakkan ke folder webroot cakePHP
JQuery min.

Langkah 2 : Kemudian di dalam folder ‘app/webroot’ cipta folder baru bernama ‘files’ dan dalam folder ‘files’ ciptakan folder baru bernama ‘upload_pic’. Untuk pengetahuan, di sini fail gambar yang dimuat naik dan resize di simpan.

Langkah 3 : Kemudian cipta fail component baru bernama ‘images.php’ kemudia simpan di ‘app/controllers/components’. Sila ‘ copy dan paste’ kod di bawah.

<?php
//app/controllers/components/images.php

class ImagesComponent extends Object {
		/* The Upload Directory @access public * @var string*/
		var $upload_dir = "";

		/* The Upload Directory Path @access public  @var string*/
		var $upload_path = ""; 

		/* New name of the large image & New name of the thumbnail image @access public @var string */
		var $large_image_name = "resized_pic.jpg";
		var $thumb_image_name = "thumbnail_pic.jpg";

		/**
		* The Max File Size. Approx 1MB @access public @var string */
		var $max_file = "1148576";

		/* The Max width allowed for the large image @access public @var string	*/
		var $max_width = "500";

		/* The Width of thumbnail image @access public @var string*/
		var $thumb_width = "150";

		/* The Height of thumbnail image @access public @var string	*/
		var $thumb_height = "150";

		//Image functions
		//You do not need to alter these functions
		function resizeImage($image,$width,$height,$scale)
		{
			$newImageWidth = ceil($width * $scale);
			$newImageHeight = ceil($height * $scale);
			$newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
			$source = imagecreatefromjpeg($image);
			imagecopyresampled($newImage,$source,0,0,0,0,$newImageWidth,$newImageHeight,$width,$height);
			imagejpeg($newImage,$image,90);
			chmod($image, 0777);
			return $image;
		}

		//You do not need to alter these functions
		function resizeThumbnailImage($thumb_image_name, $image, $width, $height, $start_width, $start_height, $scale){
			$newImageWidth = ceil($width * $scale);
			$newImageHeight = ceil($height * $scale);
			$newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
			$source = imagecreatefromjpeg($image);
			imagecopyresampled($newImage,$source,0,0,$start_width,$start_height,$newImageWidth,$newImageHeight,$width,$height);
			imagejpeg($newImage,$thumb_image_name,90);
			chmod($thumb_image_name, 0777);
			return $thumb_image_name;
		}

		//You do not need to alter these functions
		function getHeight($image) {
			$sizes = getimagesize($image);
			$height = $sizes[1];
			return $height;
		}

		//You do not need to alter these functions
		function getWidth($image)
		{
			$sizes = getimagesize($image);
			$width = $sizes[0];
			return $width;
		}
}
?>

Langkah 4: Kemudian cipta fail controller baru bernama ‘images_controller.php’ kemudian simpan di ‘app/controllers/’ . Sila copy paste kod di bawah.

<?php
//app/controllers/images_controller.php
class ImagesController extends AppController {

	var $components = array('Images');
	var $helpers = array('Html','Form', 'Ajax','Javascript');

function index() {
	$error = '';
	$this->Images->upload_dir = WWW_ROOT . 'files' . DS . 'upload_pic' . DS;
//Image Locations
	$large_image_location = $this->Images->upload_dir.$this->Images->large_image_name;
	$thumb_image_location = $this->Images->upload_dir.$this->Images->thumb_image_name;

//Create the upload directory with the right permissions if it doesn't exist
if(!is_dir($this->Images->upload_dir)){
	mkdir($this->Images->upload_dir, 0777);
	chmod($this->Images->upload_dir, 0777);
}

//Check to see if any images with the same names already exist
if (file_exists($large_image_location)){
	if(file_exists($thumb_image_location)){
		$thumb_photo_exists = 'files/upload_pic/'.$this->Images->thumb_image_name;
		}else{
		$thumb_photo_exists = "";
	}

	$large_photo_exists = 'files/upload_pic/'. $this->Images->large_image_name;
	$this->set('current_large_image_width', $this->Images->getWidth($large_image_location));
	$this->set('current_large_image_height', $this->Images->getHeight($large_image_location));
} else {
	$thumb_photo_exists = '';
	$large_photo_exists = '';
}
	$this->set('large_photo_exists', $large_photo_exists);
	$this->set('thumb_photo_exists', $thumb_photo_exists);
	$this->set('thumb_width', $this->Images->thumb_width);
	$this->set('thumb_height', $this->Images->thumb_height); 

if(!empty($this->data)) {
	if(isset($this->data['Image']['image'])){
//Get the file information
		$userfile_name = $this->data['Image']['image']['name'];
		$userfile_tmp = $this->data['Image']['image']['tmp_name'];
		$userfile_size = $this->data['Image']['image']['size'];
		$filename = basename($this->data['Image']['image']['name']);
		$file_ext = substr($filename, strrpos($filename, '.') + 1);

	//Only process if the file is a JPG and below the allowed limit
	if((!empty($this->data['Image']["image"])) && ($this->data['Image']['image']['error'] == 0)){
		if (($file_ext!="jpg") && ($userfile_size > $this->Images->max_file)) {
			$error= "ONLY jpeg images under 1MB are accepted for upload";
			}
	}else{
		$error= "Select a jpeg image for upload";
	}
	//Everything is ok, so we can upload the image.
	if (strlen($error)==0){
	if (isset($this->data['Image']['image']['name'])){

	move_uploaded_file($userfile_tmp, $large_image_location);
	chmod($large_image_location, 0777);

	$width = $this->Images->getWidth($large_image_location);
	$height = $this->Images->getHeight($large_image_location);
	//Scale the image if it is greater than the width set above
	if ($width > $this->Images->max_width){
		$scale = $this->Images->max_width/$width;
		$uploaded = $this->Images->resizeImage($large_image_location,$width,$height,$scale);
	}else{
		$scale = 1;
		$uploaded = $this->Images->resizeImage($large_image_location,$width,$height,$scale);
	}
	//Delete the thumbnail file so the user can create a new one
	if (file_exists($thumb_image_location))
	{
		unlink($thumb_image_location);
	}
		}
	//Refresh the page to show the new uploaded image
		$this->redirect(array('controller' => "images", 'action' => 'index'));
		}
}

		if(isset($this->data['Image']['x1']))
		{
		//Get the new coordinates to crop the image.
			$x1 = $this->data['Image']["x1"];
			$y1 = $this->data['Image']["y1"];
			$x2 = $this->data['Image']["x2"];
			$y2 = $this->data['Image']["y2"];
			$w = $this->data['Image']["w"];
			$h = $this->data['Image']["h"];
			//Scale the image to the thumb_width set above
			$scale = $this->Images->thumb_width/$w;
			$cropped = $this->Images->resizeThumbnailImage($thumb_image_location, $large_image_location,$w,$h,$x1,$y1,$scale);
			$this->redirect(array('controller' => "images", 'action' => 'index'));
		}
		$this->set('error', $error);
	}
}

	function deleteImage()
	{
		$this->Images->upload_dir = WWW_ROOT . 'files' . DS . 'upload_pic' . DS; 

		$thumb_image_location = $this->Images->upload_dir.$this->Images->thumb_image_name;

		if (file_exists($thumb_image_location))
		{
			unlink($thumb_image_location);
		}
		$this->redirect(array('controller' => "images", 'action' => 'index'));
	}
}
?>

Langkah 5: Kemudian cipta fail model baru bernama ‘image.php’ kemudian simpan di ‘app/models/’ . Sila copy paste kod di bawah.

<?php
//app/models/image.php
class Image extends AppModel {
	var $name = 'Image';
	var $useTable = false;
}
?>

Langkah 6: Kemudian cipta folder baru bernama ‘images’ di dalam folder ‘app/views’. Kemudian cipta fail baru di dalam folder images bernama ‘index.ctp’.

<?php
//app/views/images/index.ctp

	echo $javascript->link('crop/jquery.min');
	echo $javascript->link('crop/jquery.imgareaselect.min');

//Only display the javacript if an image has been uploaded
if(strlen($large_photo_exists)>0){
?>
<script type="text/javascript">
function preview(img, selection) {
	var scaleX = <?php echo $thumb_width;?> / selection.width;
	var scaleY = <?php echo $thumb_height;?> / selection.height;

	$('#thumbnail + div > img').css({
	width: Math.round(scaleX * <?php echo $current_large_image_width;?>) + 'px',
	height: Math.round(scaleY * <?php echo $current_large_image_height;?>) + 'px',
	marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
	marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
	});
	$('#x1').val(selection.x1);
	$('#y1').val(selection.y1);
	$('#x2').val(selection.x2);
	$('#y2').val(selection.y2);
	$('#w').val(selection.width);
	$('#h').val(selection.height);
	}

	$(document).ready(function () {
	$('#save_thumb').click(function() {
	var x1 = $('#x1').val();
	var y1 = $('#y1').val();
	var x2 = $('#x2').val();
	var y2 = $('#y2').val();
	var w = $('#w').val();
	var h = $('#h').val();
	if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
	alert("You must make a selection first");
	return false;
	}else{
	return true;
	}
	});
	});

	$(window).load(function () {
	$('#thumbnail').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
	});

	function checkform(){
	document.getElementById('ImageX1').value = document.getElementById('x1').value;
	document.getElementById('ImageY1').value = document.getElementById('y1').value;
	document.getElementById('ImageX2').value = document.getElementById('x2').value;
	document.getElementById('ImageY2').value = document.getElementById('y2').value;
	document.getElementById('ImageW').value = document.getElementById('w').value;
	document.getElementById('ImageH').value = document.getElementById('h').value;
	//alert(document.getElementById('x1').value);
	return true;
}

</script>
<?php }?>
<h1>Photo Upload and Crop</h1>
<?php
//Display error message if there are any
if(isset($error) and strlen($error)>0){
echo "<ul><li><strong>Error!</strong></li><li>".$error."</li></ul>";
}
if(strlen($large_photo_exists)>0 && strlen($thumb_photo_exists)>0){
	echo "<p><strong>NOTE:</strong> If the thumbnail image looks the same as the previous one, just hit refresh a couple of times.</p>";
	echo '<img src="'.$large_photo_exists.'" style="float: left; margin-right: 10px;" id="thumbnail" alt="Main" /> <img src="'.$thumb_photo_exists.'" style="float: left; margin-right: 10px;" id="thumbnail" alt="Thumbnail" />';
	echo "<p>".$this->Html->link('Delete Images', array('controller'=>'images', 'action'=>'deleteImage'))."</p>";
}else{
if(strlen($large_photo_exists)>0){?>
<h2>Create Thumbnail</h2>
<div align="center">
<img src="<?php echo $large_photo_exists;?>" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />
<div style="float:left; position:relative; overflow:hidden; width:<?php echo $thumb_width;?>px; height:<?php echo $thumb_height;?>px;">
<img src="<?php echo $large_photo_exists;?>" style="position: relative;" alt="Thumbnail Preview" />
</div>
<br style="clear:both;"/>
<?php echo $this->Form->create('Image', array('action' => 'index', 'name'=>'thumbnail', 'onsubmit'=>'return checkform()'))?>
<?php echo $this->Form->hidden('x1');?>
<?php echo $this->Form->hidden('y1');?>
<?php echo $this->Form->hidden('x2');?>
<?php echo $this->Form->hidden('y2');?>
<?php echo $this->Form->hidden('w');?>
<?php echo $this->Form->hidden('h');?>

<input type="hidden" name="x1" value="" id="x1" />
<input type="hidden" name="y1" value="" id="y1" />
<input type="hidden" name="x2" value="" id="x2" />
<input type="hidden" name="y2" value="" id="y2" />
<input type="hidden" name="w" value="" id="w" />
<input type="hidden" name="h" value="" id="h" />
<!--<input type="submit" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb" />-->
<?php echo $this->Form->submit('Simpan Thumbnail', array('div' => false));?>
<?php echo $this->Form->end(); ?>
</div>
<hr />
<?php } ?>
<h2>Upload Photo</h2>
<?php echo $this->Form->create('Image', array('action' => 'index', 'name'=>'photo', 'type'=>'file'))?>
Photo <?php echo $this->Form->file('image');?> <?php echo $this->Form->submit('Muat Naik', array('div' => false));?>
<?php echo $this->Form->end(); ?>
<?php } ?>

Akhir sekali jangan lupa menguji dengan menggnakan web browser anda. Selamat Mencuba

Tagged as: Aktiviti, PHP MySQL, Tips Komputer

Comments are closed.

Fairuz Sulaiman

CakePHP 1.3 Tutorial : Muat Naik -> Crop Imej

More in 'Benjana Ilmu'

More in 'CakePHP'

More in 'Catatan Harian'

More in 'Ilmu Komputer'

More in 'PHP MySQL'

Waktu Solat

Iklan