Demo : http://cbunny.rudylee.com/autocomplete_redirect

Demo source code : https://github.com/rudylee/cbunny

In my previous post ( http://blog.rudylee.com/2011/07/25/jquery-ui-autocomplete-in-cakephp/ ) we have successfully integrated the jQuery AutoComplete with CakePHP with a little bit hacky way. Now we gonna add another feature that can redirect user to our desired place when they click the result value in the AutoComplete ( try the demo for more details ).

So let’s start the coding ( I assume you have integrated the jQuery UI AutoComplete in your apps, if you haven’t, just read my previous post ), so basically what we need to do are divided into 4 steps:

• Wrap the jQuery UI AutoComplete search field in a form tag.
• Add a hidden field which will hold the ID of the result.
• Add ‘select’ option into the helper.
• Set up the action that will handle the form submit

Here is the sample code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
    echo $this->Form->create('autoComplete',array('url' => array('controller' => 'users', 'action' => 'autoComplete'),'id' => 'GuestForm'));
    echo $this->Form->hidden('Guest.id');
    echo $this->Ajax->autoComplete('Guest.search', array(
	'source' => array(
	    'controller' => 'users',
	    'action' => 'autoComplete',
	    'prefix' => 'admin'
	),
	'select' => 'function(event, ui){
	    $("#GuestId").val(ui.item.id);
	    $("#GuestForm").submit()}'
    ));
    ?>
    </form>

As you can see in line 1, I defined the form and the controller + action that will handle the form submit. Line 2 is the hidden field that will hold the ID of the result. Line 3 is the AutoComplete form, I have added select option into the helper which will run the function defined to it each time user click the result. Line 10 means that the hidden field ( field that has ID GuestID ) will have value based on the AutoComplete Item ID ( which came from ui.item.id) and Line 11 will submit the form.

Here is the sample of the action code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

    function admin_autoComplete() {
	if (!empty($this->data)) {
	    $this->redirect(array(
		'controller' => 'users',
		'action' => 'view', $this->data['Guest']['id']
	    ));
	}
	$this->autoRender = false;
	$guests = $this->User->getGuests(array(
	    'conditions' => array(
		'OR' => array(
		    'User.name LIKE' => '%' . $_GET['term'] . '%',
		    'User.surname LIKE' => '%' . $_GET['term'] . '%'
		)
	    )
		));
	echo json_encode($this->User->autoComplete_encode($guests));
    }

Just ignore line 8 and so, we gonna focus on line 2 to 7. In that line, I redirect the user to the view action which based on the Guest ID which I got from the form. You can change the controller/action in this section. I hope everything is clear. Cheers.

Auto redirect in CakePHP jQuery AutoComplete is a post from: blog.rudylee.com

Demo : http://cbunny.rudylee.com/autocomplete

Demo source code : https://github.com/rudylee/cbunny
The post to add auto redirect feature into the AutoComplete : http://blog.rudylee.com/2011/12/12/auto-redirect-in-cakephp-jquery-autocomplete/
You can copy the modified Ajax and Javascript helpers from here https://github.com/rudylee/topping

Last week I was trying to use jQuery UI Autocomplete in my CakePHP apps. However, CakePHP Ajax and Javascript helpers don’t support jQuery by default. After googling a little bit, I found that this guy ( http://www.cakephp.bee.pl/ ) already made Ajax and Javascript helpers for jQuery.

So I just copied these helpers from his site and put it into my apps. It’s done ? obviously not. It turned out that the autocomplete script that he using in his helper is the old one ( http://docs.jquery.com/Plugins/autocomplete ).

Thus, I had to add a method inside that helper to use jQuery UI autocomplete. Here are the sample codes ( you can copy from my github for the complete file, this one is just snippet ) :

 /**
     * Options for auto-complete editor.
     *
     * @var array
     */
    var $autoCompleteOptions = array(
	'select', 'source'
    );
 
    /**
     * Create a text field with Jquery UI Autocomplete.
     *
     * Creates an autocomplete field with the given ID and options.
     * needs include jQuery UI Autocomplete file
     *
     * @param string $field DOM ID of field to observe
     * @param array $options Ajax options
     * @return string Ajax script
     * check out http://jqueryui.com/demos/autocomplete/
     */
    function autoComplete($field, $options = array()) {
	$var = '';
	if (isset($options['var'])) {
	    $var = 'var ' . $options['var'] . ' = ';
	    unset($options['var']);
	}
 
	if(isset($options['source'])) {
	    $options['source'] = "'".Router::url($options['source'])."'";
	}
 
	if (!isset($options['id'])) {
	    $options['id'] = Inflector::camelize(str_replace(".", "_", $field));
	}
 
	$htmlOptions = $this->__getHtmlOptions($options);
	$htmlOptions['autocomplete'] = "off";
 
	foreach ($this->autoCompleteOptions as $opt) {
	    unset($htmlOptions[$opt]);
	}
 
	$options = $this->_optionsToString($options, array('multipleSeparator'));
	$callbacks = array('formatItem', 'formatMatch', 'formatResult', 'highlight');
 
	foreach ($callbacks as $callback) {
	    if (isset($options[$callback])) {
		$name = $callback;
		$code = $options[$callback];
		switch ($name) {
		    case 'formatResult':
			$options[$name] = "function(data, i, max) {" . $code . "}";
			break;
		    case 'highlight':
			$options[$name] = "function(data, search) {" . $code . "}";
			break;
		    default:
			$options[$name] = "function(row, i, max, term) {" . $code . "}";
			break;
		}
	    }
	}
	$options = $this->_buildOptions($options, $this->autoCompleteOptions);
 
	$text = $this->Form->text($field, $htmlOptions);
	$script = "{$var} $('#{$htmlOptions['id']}').autocomplete(";
	$script .= "{$options});";
 
	return "{$text}\n" . $this->Javascript->codeBlock($script);
    }

And here are the sample to use it in our application

echo $this->Ajax->autoComplete('Guest.search', array(
    'source' => array(
	'controller' => 'users',
	'action' => 'autoComplete',
	'prefix' => 'host'
    ),
));

Action code :

 /**
     * Auto Complete Action for Host
     *
     * Auto Complete action for host list of guests
     * also process the search
     */
    function host_autoComplete() {
	if (!empty($this->data)) {
	    $this->redirect(array(
		'controller' => 'users',
		'action' => 'view', $this->data['Guest']['id']
	    ));
	}
	$this->autoRender = false;
	$guests = $this->User->getGuests(array(
		    'host_id' => Configure::read('User.id'),
		    'conditions' => array(
			'OR' => array(
			    'User.name LIKE' => '%' . $_GET['term'] . '%',
			    'User.surname LIKE' => '%' . $_GET['term'] . '%'
			)
		    )
		));
	echo json_encode($this->User->autoComplete_encode($guests));
    }

Model method ( encode the data array to display fields that we want, in this example I am just showing firstname and surname )

  /**
     * autoComplete encode
     *
     * Parsing passed array and change it to consume-able
     * by autocomplete jQuery UI
     * @param array $data
     * @return json $data
     */
    function autoComplete_encode($postData = array()) {
	$temp = array();
	foreach ($postData as $user) {
	    array_push($temp, array(
		'id' => $user['User']['id'],
		'label' => $user['User']['name'].' '.$user['User']['surname'],
		'value' => $user['User']['name'],
	    ));
	}
	return $temp;
    }

Don’t forget to use $_GET['term'] to get data from autocomplete field and also encode the data to JSON so it can be displayed by jQuery UI.

jQuery UI AutoComplete in CakePHP is a post from: blog.rudylee.com

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

// set up horizontal scroll
var setupFeaturedBoxes = function () {
	var buttons = {
		previous: {
			enabled: '/img/arrow1-left.gif',
			hover: '/img/arrow1-left.gif'
		},
		next: {
			enabled: '/img/arrow1-right.gif',
			hover: '/img/arrow1-right.gif'
		}
	};
	var featuredContentWidth = 121;
	var featuredContentScrollPrefs = {
		speed: 800,
		axis: 'x'
	};
	jQuery('.featuredBox').each( function (i) {
		var featuredBox = jQuery(this);
		featuredBox
			.find('.scrollArrow')
				.filter('.next')
					.hover(
						function () {
							jQuery(this)
								.attr( 'src', buttons.next.hover )
								.css( 'cursor', 'pointer' )
							;
						},
						function () {
							jQuery(this)
								.attr( 'src', buttons.next.enabled )
								.css( 'cursor', 'default' )
							;
						}
					)
					.click( function() {
						featuredBox.find('.featuredContent').scrollTo(
							'+=' + featuredContentWidth + 'px',
							featuredContentScrollPrefs
						);
						return false;
					})
				.end()
				.filter('.prev')
					.hover(
						function () {
							jQuery(this)
								.attr( 'src', buttons.previous.hover )
								.css( 'cursor', 'pointer' )
							;
						},
						function () {
							jQuery(this)
								.attr( 'src', buttons.previous.enabled )
								.css( 'cursor', 'default' )
							;
						}
					)
					.click( function() {
						featuredBox.find('.featuredContent').scrollTo(
							'-=' + featuredContentWidth + 'px',
							featuredContentScrollPrefs
						);
						return false;
					})
		;
	});
	jQuery('.featuredBox .featuredContent .featuredDisplayDiv').each( function (i) {
		jQuery(this).css( 'width', ( featuredContentWidth * jQuery(this).find('ul li').size() ) + 'px' );
	});
};
 
var setupFeaturedBoxes2 = function () {
	var buttons = {
		previous: {
			enabled: '/img/arrow2-left.gif',
			hover: '/img/arrow2-left.gif'
		},
		next: {
			enabled: '/img/arrow2-right.gif',
			hover: '/img/arrow2-right.gif'
		}
	};
	var featuredContentWidth2 = 172;
	var featuredContentScrollPrefs = {
		speed: 800,
		axis: 'x'
	};
	jQuery('.featuredBox2').each( function (i) {
		var featuredBox = jQuery(this);
		featuredBox
			.find('.scrollArrow')
				.filter('.next')
					.hover(
						function () {
							jQuery(this)
								.attr( 'src', buttons.next.hover )
								.css( 'cursor', 'pointer' )
							;
						},
						function () {
							jQuery(this)
								.attr( 'src', buttons.next.enabled )
								.css( 'cursor', 'default' )
							;
						}
					)
					.click( function() {
						featuredBox.find('.featuredContent2').scrollTo(
							'+=' + featuredContentWidth2 + 'px',
							featuredContentScrollPrefs
						);
						return false;
					})
				.end()
				.filter('.prev')
					.hover(
						function () {
							jQuery(this)
								.attr( 'src', buttons.previous.hover )
								.css( 'cursor', 'pointer' )
							;
						},
						function () {
							jQuery(this)
								.attr( 'src', buttons.previous.enabled )
								.css( 'cursor', 'default' )
							;
						}
					)
					.click( function() {
						featuredBox.find('.featuredContent2').scrollTo(
							'-=' + featuredContentWidth2 + 'px',
							featuredContentScrollPrefs
						);
						return false;
					})
		;
	});
	jQuery('.featuredBox2 .featuredContent2 .featuredDisplayDiv2').each( function (i) {
		jQuery(this).css( 'width', ( featuredContentWidth2 * jQuery(this).find('ul li').size() ) + 'px' );
	});
};
 
 
jQuery(document).ready(function(){
 
 
// set up horizontal scroll
	setupFeaturedBoxes();
	setupFeaturedBoxes2();
 
});

As you can see at the line 5 there is an image path in which needed by the slider to load the image. Actually I can easily using the absolute path but if change the environment or the path then the image will be broken. So here come the Router class of CakePHP to the rescue.

The idea is to change the Javascript file to PHP file and change the path to use the Router class. Here is the sample of my PHP file :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

<script type="text/javascript" language="JavaScript">
var setupFeaturedBoxes = function () {
	var buttons = {
		previous: {
			enabled: <?php Router::url('/img/arrow1-left.gif')?>,
			hover: <?php Router::url('/img/arrow1-left.gif')?>
		},
		next: {
			enabled: <?php Router::url('/img/arrow1-right.gif')?>,
			hover: <?php Router::url('/img/arrow1-right.gif')?>
		}
	};
	var featuredContentWidth = 121;
	var featuredContentScrollPrefs = {
		speed: 800,
		axis: 'x'
	};
	jQuery('.featuredBox').each( function (i) {
		var featuredBox = jQuery(this);
		featuredBox
			.find('.scrollArrow')
				.filter('.next')
					.hover(
						function () {
							jQuery(this)
								.attr( 'src', buttons.next.hover )
								.css( 'cursor', 'pointer' )
							;
						},
						function () {
							jQuery(this)
								.attr( 'src', buttons.next.enabled )
								.css( 'cursor', 'default' )
							;
						}
					)
					.click( function() {
						featuredBox.find('.featuredContent').scrollTo(
							'+=' + featuredContentWidth + 'px',
							featuredContentScrollPrefs
						);
						return false;
					})
				.end()
				.filter('.prev')
					.hover(
						function () {
							jQuery(this)
								.attr( 'src', buttons.previous.hover )
								.css( 'cursor', 'pointer' )
							;
						},
						function () {
							jQuery(this)
								.attr( 'src', buttons.previous.enabled )
								.css( 'cursor', 'default' )
							;
						}
					)
					.click( function() {
						featuredBox.find('.featuredContent').scrollTo(
							'-=' + featuredContentWidth + 'px',
							featuredContentScrollPrefs
						);
						return false;
					})
		;
	});
	jQuery('.featuredBox .featuredContent .featuredDisplayDiv').each( function (i) {
		jQuery(this).css( 'width', ( featuredContentWidth * jQuery(this).find('ul li').size() ) + 'px' );
	});
};
 
var setupFeaturedBoxes2 = function () {
	var buttons = {
		previous: {
			enabled: <?php Router::url('/img/arrow2-left.gif')?>,
			hover: <?php Router::url('/img/arrow2-left.gif')?>
		},
		next: {
			enabled: <?php Router::url('/img/arrow2-right.gif')?>,
			hover: <?php Router::url('/img/arrow2-right.gif')?>
		}
	};
	var featuredContentWidth2 = 172;
	var featuredContentScrollPrefs = {
		speed: 800,
		axis: 'x'
	};
	jQuery('.featuredBox2').each( function (i) {
		var featuredBox = jQuery(this);
		featuredBox
			.find('.scrollArrow')
				.filter('.next')
					.hover(
						function () {
							jQuery(this)
								.attr( 'src', buttons.next.hover )
								.css( 'cursor', 'pointer' )
							;
						},
						function () {
							jQuery(this)
								.attr( 'src', buttons.next.enabled )
								.css( 'cursor', 'default' )
							;
						}
					)
					.click( function() {
						featuredBox.find('.featuredContent2').scrollTo(
							'+=' + featuredContentWidth2 + 'px',
							featuredContentScrollPrefs
						);
						return false;
					})
				.end()
				.filter('.prev')
					.hover(
						function () {
							jQuery(this)
								.attr( 'src', buttons.previous.hover )
								.css( 'cursor', 'pointer' )
							;
						},
						function () {
							jQuery(this)
								.attr( 'src', buttons.previous.enabled )
								.css( 'cursor', 'default' )
							;
						}
					)
					.click( function() {
						featuredBox.find('.featuredContent2').scrollTo(
							'-=' + featuredContentWidth2 + 'px',
							featuredContentScrollPrefs
						);
						return false;
					})
		;
	});
	jQuery('.featuredBox2 .featuredContent2 .featuredDisplayDiv2').each( function (i) {
		jQuery(this).css( 'width', ( featuredContentWidth2 * jQuery(this).find('ul li').size() ) + 'px' );
	});
};
 
 
jQuery(document).ready(function(){
 
 
// set up horizontal scroll
	setupFeaturedBoxes();
	setupFeaturedBoxes2();
 
});
</script>

As you can see I just change the image path to . I don’t know if this is the best solution or not, but for now it’s the simplest

Fixed static image path in Javascript using CakePHP is a post from: blog.rudylee.com

I already tried several ways to handle upload file in CakePHP, from writing a private action in the app_controller and the last I write a component.

I can upload file, delete file, check the file type using my Upload Component, but I realize that there are many things missing in my component.

In searching for inspiration, I found CakePHP do have serveral plugins to handle File Upload and the features are beyond my component.

One of the plugin is Media Plugin by Davidpersson.

Using the plugin is quite easy, but the wiki and the CakeFest slide is not updated with the new configuration ( I am using v1.3alpha ), so you need to jumped in to the core and trying to understand the new configuration.

Basically the plugin consist of several behaviours :

• Transfer
• Polymorphic
• Meta
• Generator
• Coupler

But in this post I will just cover the Transfer,Coupler and Meta behaviour because I only understand these behaviours. So lets go to the implementation part, here is my CakePHP and Media Plugin version :

1. CakePHP 1.3.0
2. Media Plugin 1.3 alpha

First you must create a table that has a ‘file’ field in it. Remember, the field must be named ‘file’ or the plugin won’t working. Here is the example with my application :

CREATE TABLE IF NOT EXISTS `photos` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `file` varchar(255) NOT NULL,
  `dirname` varchar(255) NOT NULL,
  `basename` varchar(255) NOT NULL,
  `checksum` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ;

The field that will be used by the plugin are file, dirname, basename, and checksum. But the three last fields is optional, so you can have it in your table or not (if you are using Coupler, and Meta behaviour you MUST add the there fields ). Next, bake the application ( I was using ‘cake bake’ command ).

After that grab the Media Plugin from the github and put it in the plugins folder of your application. Next you will need to include the plugin to your application, open your bootstrap.php / core.php and add this line in it :

require APP . 'plugins/media/config/core.php';

Then create the folder that will be used for storing the files. Go to your application folder in terminal and type this command ( ex: /var/www/sample ) :

cake media init

The command will ask whether you want to create the directories or not, this is the print out of my terminal :

rudy@rudy-laptop:~/www/dummy$ cake media init
---------------------------------------------------------------
Media Shell
---------------------------------------------------------------
Do you want to create missing media directories now?
[n] > y
/dummy/webroot/media/                              [OK  ]
/dummy/webroot/media/static/                       [OK  ]
/dummy/webroot/media/static/aud                    [OK  ]
/dummy/webroot/media/static/css                    [OK  ]
/dummy/webroot/media/static/doc                    [OK  ]
/dummy/webroot/media/static/gen                    [OK  ]
/dummy/webroot/media/static/ico                    [OK  ]
/dummy/webroot/media/static/img                    [OK  ]
/dummy/webroot/media/static/js                     [OK  ]
/dummy/webroot/media/static/txt                    [OK  ]
/dummy/webroot/media/static/vid                    [OK  ]
/dummy/webroot/media/transfer/                     [OK  ]
/dummy/webroot/media/transfer/aud                  [OK  ]
/dummy/webroot/media/transfer/css                  [OK  ]
/dummy/webroot/media/transfer/doc                  [OK  ]
/dummy/webroot/media/transfer/gen                  [OK  ]
/dummy/webroot/media/transfer/ico                  [OK  ]
/dummy/webroot/media/transfer/img                  [OK  ]
/dummy/webroot/media/transfer/js                   [OK  ]
/dummy/webroot/media/transfer/txt                  [OK  ]
/dummy/webroot/media/transfer/vid                  [OK  ]
/dummy/webroot/media/filter/                       [OK  ]
 
/dummy/webroot/media/transfer/.htaccess is not in your webroot.
Remember to set the correct permissions on transfer and filter directory.

Change the permission of the folder so that the webserver can write in it :

chown -R www-data webroot/media

Configure the ‘Photo’ model like this :

1
2
3
4
5
6
7
8
9
10
11
12
13
14

class Photo extends AppModel {
	var $name = 'Photo';
	var $displayField = 'title';
	var $actsAs = array('Media.Transfer','Media.Coupler','Media.Meta');
	var $validate = array(
		'file' => array(
			'mimeType' => array(
			'rule' => array('checkMimeType', false, array ( 'image/jpeg', 'image/png'))
		),
		'size' => array(
			'rule' => array('checkSize' , '5M')
		)
	));
}

As you can see, I added 3 behaviors ( Transfer, Coupler and Meta ). The transfer behavior is used for uploading, moving and validating the file. The coupler is for deleting the file ( it will automatically delete the file if you delete a record associated with it and also will automatically add the value in dirname and basename ), the last thing that it will do is adding the meta description to the table ( checksum ).

Edit the add.ctp and adding the ‘type’ => ‘file’ in the $this->Form->create and the $this->Form->input(‘file’) so the form can handle file upload. In the controller you don’t need to change anything because the behavior automatically handle the validation, the path and moving the file. this is my controller :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<?php
class PhotosController extends AppController {
 
	var $name = 'Photos';
 
	function index() {
		$this->Photo->recursive = 0;
		$this->set('photos', $this->paginate());
	}
 
	function view($id = null) {
		if (!$id) {
			$this->Session->setFlash(sprintf(__('Invalid %s', true), 'photo'));
			$this->redirect(array('action' => 'index'));
		}
		$this->set('photo', $this->Photo->read(null, $id));
	}
 
	function add() {
		if (!empty($this->data)) {
			$this->Photo->create();
			if ($this->Photo->saveAll($this->data)) {
				$this->Session->setFlash(sprintf(__('The %s has been saved', true), 'photo'));
				$this->redirect(array('action' => 'index'));
			} else {
				$this->Session->setFlash(sprintf(__('The %s could not be saved. Please, try again.', true), 'photo'));
			}
		}
	}
 
	function edit($id = null) {
		if (!$id && empty($this->data)) {
			$this->Session->setFlash(sprintf(__('Invalid %s', true), 'photo'));
			$this->redirect(array('action' => 'index'));
		}
		if (!empty($this->data)) {
			if ($this->Photo->save($this->data)) {
				$this->Session->setFlash(sprintf(__('The %s has been saved', true), 'photo'));
				$this->redirect(array('action' => 'index'));
			} else {
				$this->Session->setFlash(sprintf(__('The %s could not be saved. Please, try again.', true), 'photo'));
			}
		}
		if (empty($this->data)) {
			$this->data = $this->Photo->read(null, $id);
		}
	}
 
	function delete($id = null) {
		if (!$id) {
			$this->Session->setFlash(sprintf(__('Invalid id for %s', true), 'photo'));
			$this->redirect(array('action'=>'index'));
		}
		if ($this->Photo->delete($id)) {
			$this->Session->setFlash(sprintf(__('%s deleted', true), 'Photo'));
			$this->redirect(array('action'=>'index'));
		}
		$this->Session->setFlash(sprintf(__('%s was not deleted', true), 'Photo'));
		$this->redirect(array('action' => 'index'));
	}
}
?>

and this is my add view :

1
2
3
4
5
6
7

<?php echo $this->Form->create('Photo',array('type' => 'file'));?>
	<?php
		echo $this->Form->input('title');
		echo $this->Form->input('file',array('type' => 'file'));
	?>
<?php echo $this->Form->end(__('Submit', true));?>
</div>

Now you are ready to uploading files, deleting files, and validate them in the model ( for validation you can see the wiki in the github for complete validation ). That’s all

Upload file in CakePHP using Media Plugin is a post from: blog.rudylee.com

Jadi sekarang kita akan membuat sebuah grouping dalam select box seperti dalam gambar di bawah ini :

CakePHP Group Select

Di dalam contoh diatas gwa menggunakan 3 buah table di antaranya table majors ( jurusan ), table faculties ( fakultas ) dan table levels ( untuk pembagian apakah dia D3/S1 ). Hal pertama yang harus kita lakukan adalah men-query isi table dari majors ( dalam hal ini gwa menggunakan ClassRegistry karena table majors tidak ada relation dengan controller gwa ) :

1
2
3
4

$majors = ClassRegistry::init("Major")->find("all");
 
atau kalau punya relation / berada dalam controller sendiri
$majors = $this->Major->find("all");

Kemudian kita akan menggabungkan hasil query tersebut dan menyusunnya menjadi array yang jika kita masukkan ke dalam form helper maka akan secara otomatis menjadi select box yang tergroup. Kita akan menggunakan bantuan Set::combine untuk melakukan hal tersebut. Berikut contoh codingannya :

1
2
3
4

$majorsCombine = Set::combine($majors, "{n}.Major.id", array("%s - %s",
"{n}.Level.name", "{n}.Major.name"), "{n}.Faculty.name"); 
 
untuk penjelasan parameternya dapat dilihat di API CakePHP : <a href="http://api.cakephp.org/class/set#method-Setcombine">API CakePHP</a>

sedikit penjelasan tentang parameter yang gwa gunakan yaitu :

• $majorsCombine Nama variable penampung.
• Set::combine Nama method yang kita gunakan.
• $majors Sumber data kita
• {n}.Major.id Path pertama atau biasanya nilai dari select box kita
• array(‘%s – %s’,'{n}.Level.name’, ‘{n}.Major.name’) Kalau ini path kedua yang berfungsi sebagai label dari isi select box kita, jika dilihat itu isinya ada level dan major jadi nanti keluarnya ( S1 – Teknik Informatika )
• {n}.Faculty.name’ ini nama groupnya

Selanjutnya tinggal digunakan saja di viewnya seperti ini :

1

<?php echo $form->select("nama-form",$majorsCombine,null,null,"-- Pilih Jurusan Pertama --"); ?>

Penjelasannya kira-kira begini :

• $form->select ini form helper yang kita gunakan
• nama-form nama form helper yang kita gunakan
• $majorsCombine sumber data
• null,null,’– Pilih Jurusan Pertama — parameter tambahan lagi

Semoga membantu, silakan dicoba.. kalau ga jalan, dicoba lagi, kalau ga jalan juga ya sudah terima nasih aja

Group select box di CakePHP is a post from: blog.rudylee.com

Jika cara biasanya atau konvesional maka kita tinggal membuat seperti ini :

1

<a href="http://xxx"><img src="path/images"></a>

Sementara dalam CakePHP ada cara yang lebih gampang atau mungkin bagi beberapa orang lebih susah, yaitu :

1
2
3
4

<?php echo $html->link($html->image('/images/btn-register.png'), array('controller' => 'users','action' => 'add'),array('escape' => false)) ?>
 
atau kira-kira susunannya seperti ini
<?php echo $html->link($html->image('path-ke-image), array('controller' => 'nama-controller','action' => 'nama-action'),array('escape' => false)) ?>

Jadi kita menggunakan 2 buah helper yaitu link dan image dimana helper dari image kita letakkan di dalam helper link. Jangan lupa untuk menambahkan attribute escape => false atau gambar yang ingin anda tampilkan tidak akan muncul. Semoga bermanfaat

Membuat image sebagai link di CakePHP is a post from: blog.rudylee.com

jadi tanpa banyak cing cong seperti biasanya langsung saja ke codingan aja deh. Ceritanya gwa punya method dalam controller seperti ini.

1
2
3
4
5
6
7
8
9

	function index($id = null) {
		if(!$id) {
			$this->Session->setFlash(__('Invalid Question.', true));
		}
		else {
			$this->set('passedArgs',$id);
			$this->set('questions', $this->paginate(array('group_id' => $id)));
		}
	}

Jadi kalau dilihat dari method tersebut terlihat bahwa gwa mempassing parameter ke dalam method indexnya, dan gwa menggunakan parameter tersebut dalam paging gwa. Oleh karena itu gwa membuat satu variable lagi bernama passedArgs untuk menyimpan parameter yang ingin gwa passing ke dalam url paging nantinya ( dalam hal ini id yang ingin gwa passing ).

Setelah itu akan menambah codingan ke dalam viewnya yaitu

1
2
3
4
5
6

<?php
echo $paginator->counter(array(
'format' => __('Page %page% of %pages%, showing %current% records out of %count% total, starting on record %start%, ending on %end%', true)
));
<strong>$paginator->options(array('url'=>$this->passedArgs));</strong>
?>

Jadi kita hanya perlu menambah codingan $paginator->options yang di dalamnya kita letakkan variable yang ingin kita passing. Mungkin pada bingung kenapa gwa harus passing variable itu ke dalam halaman paging, jika anda bingung berarti anda harus belajar banyak lagi

Sekalian bonus biar ntar kalo lupa bisa ingat :

1
2
3

	var $paginate = array(
			'limit'	=> 10
		);

Code di atas buat limit jumlah item dalam 1 page, diletakkannya di dalam controller. Semoga membantu

Passing parameters di paging CakePHP is a post from: blog.rudylee.com

Tapi kalau gwa telusuri dari StatPress, ternyata ada satu hal yang menarik yaitu top search terms ( kata kunci yang dicari di search engine ) di blog gwa adalah CakePHP ( entah cari tutorial, entah cari arti CakePHP ). Maka dari situ gwa bisa mengambil kesimpulan bahwa ternyata ketertarikan orang untuk belajar CakePHP semakin besar apalagi website CakePHP indonesia sudah tidak beroperasi lagi ( cake-id ).

Jadi keknya untuk mendongkrak traffic blog gwa sepertinya gw harus banyak-banyak posting tips & trik, tutorial dan info2 tentang CakePHP neh. Yah moga-moga bisa rajin posting soal CakePHP

My blog top search terms – CakePHP is a post from: blog.rudylee.com

Tetapi ternyata semua tidak berjalan mulus seperti yang gwa kira. Setelah selesai mengcopy file tersebut ke dalam komputer yang lain, ketika ingin membuka halaman cakephp ternyata hanya halaman kosong saja yang terbuka.

Pertama kali kecurigaan dimulai dari webserver dan settingan PHP. Soalnya di komputer yang ini gwa menggunakan Lighttpd sementara di komputer di kosan pakai apache, jadi mulai deh googling mencari apakah ini salah dari webserver ( hasilnya didapat kalau ingin mencari error maka dapat melihat dari file log yang ada di folder log ).

Setelah mengutak-atik file conf nya Lighttpd dan melihat file log, ternyata tidak ada yang aneh dengan settingan lighttpd dan settingan php.ini nya. Kemudian kecurigaan menuju ke CakePHP nya, jadi mulai deh search di google tentang CakePHP blank page. Dan ternyata ga lama mencari-cari akhirnya ketemu solusinya. Ternyata solusinya gampang cukup delete file cache yang ada folder tmp/cache dan ternyata hasilnya… langsung bisa kebuka webnya

jadi kalau copy file cakephp ke server baru delete aja cachenya biar aman, supaya ga page kosong jadinya

Blank page pada CakePHP is a post from: blog.rudylee.com

Jadi kali ini gwa akan melakukan review terhadap framework PHP yang sudah gwa pelajari kurang lebih 5 bulan lamanya yaitu CakePHP. Selama 5 bulan ini gwa lewati dengan mempelajari CakePHP, dari baca ebook, nonton video tutorial sampai tanya-tanya sama orang-orang di channel #cakephp di irc.freenode.net.

Dalam waktu 5 bulan ini sudah banyak yang gwa pelajari dari CakePHP, tapi tetep masih lebih banyak lagi yang harus dipelajari dari CakePHP… Jadi intinya gwa bakal sharing apa yang sudah gwa dapatkan setelah lebih kurang 5 bulan mempelajari CakePHP ( FYI, gwa belom pernah pakai framework lain selain CakePHP ).

Salah satu hal yang gwa dapatkan dari mempelajari CakePHP adalah mengerti arsitektur MVC ( Model View Controller ). Untuk yang pengen tahu lebih banyak tentang MVC dapat dibaca di http://en.wikipedia.org/wiki/Model-view-controller.

Tapi gwa coba rangkum beberapa hal yang gwa mengerti tentang MVC, dalam pemprograman MVC seluruh program dibagi menjadi 3 bagian utama yaitu Model ( berhubungan dengan database ), Controller ( berhubungan dengan logic ), View ( berhubungan dengan tampilan program). Jadi jika pada pemprograman procedural atau pemprograman barbar kita bagi dalam function-function, maka pada MVC kita harus membaginya menjadi 3 bagian besar.

Jika kita ingin melakukan query,validasi, edit data kita masukkan ke dalam Model. Kalau kita ingin mengatur aliran data maka kita memasukkannya ke dalam Controller, dan yang terakhir kali jika kita ingin mengatur tampilan dari program kita ( designnya ) maka kita atur di View. 3 hal tersebut saling berhubungan dan mempunyai peran masing-masing.

Selain MVC tentu saja gwa banyak mempelajari penggunaan dari CakePHP itu sendiri. Penggunaan Helper-helper seperti AJAX, Session, Javascript, dan HTML. Jadi CakePHP secara default sudah menyediakan beberapa helper. Helper itu sendiri adalah sebuah class yang dapat digunakan untuk membantu kita dalam membuat aplikasi sesuai dengan helper yang kita gunakan. Jadi jika kita ingin membuat sebuah website yang menggunakan AJAX, kita dapat menggunakan AJAX helper yang dapat meringankan tugas kita dalam membuat aplikasi AJAX itu. Sama halnya jika kita ingin membuat session maka kita dapat menggunakan session helper untuk membantu kita mengatur session di CakePHP.

Selain helper dikenal juga istilah element di dalam CakePHP. Element disini bukan berarti elemen air, elemen api, elemen tanah. Element di dalam CakePHP itu lebih dapat diartikan sebagai view yang reuseable. Jadi misalnya kita mempunyai sebuah form dan kita ingin membuat form tersebut di 2 view yang berbeda maka kita dapat menggunakan element. Jadi kita tidak perlu membuat ulang kembali form tersebut di 2 view yang berbeda, cukup buat sebuah element dan panggil element tersebut di 2 view itu.

Paging dengan element

Dan satu hal lagi yang harus diperhatikan dalam merancang sebuah aplikasi dengan menggunakan konsep MVC adalah Model sebaiknya lebih memiliki banyak method dibandingkan controller. Hal itu dikarenakan konsep dari OOP itu sendiri yaitu ‘reuseable’.

Jadi gwa bisa menyimpulkan selama 5 bulan apa saja keuntungan yang didapatkan dari mempelajari CakePHP

• Mengerti konsep MVC.
• Waktu untuk mendevelop program menjadi lebih cepat.
• Source code menjadi lebih terstruktur.
• Kemampuan berbahasa inggris meningkat ( banyak baca cookbook + tanya2 pakai bahasa inggris wakaka.

Walaupun gwa tidak menampik adanya kerugian-kerugian yang didapatkan dari mempelajari CakePHP, ini beberapa kerugian tersebut :

• Harus belajar kembali karena dengan menggunakan framework tentu saja kita harus mempelajari API yang sudah tersedia.
• Aplikasi jadi lebih lemot.
• Jadi makin malas karena sudah dimanjakan dengan fitur-fitur walaupun tidak semalas karena menggunakan CMS
• Makin lupa syntax2 PHP yang dasar karena keseringan menggunakan syntax CakePHP

Tapi walaupun begitu semua kekurangan itu tertutupi oleh kelebihan-kelebihan yang didapatkan dari mempelajari CakePHP tersebut. Yah jelas, kalau banyak ruginya napaen gwa capek-capek belajar framework. Mungkin ada yang beranggapan kalau menggunakan framework itu sendiri dapat memperbodoh diri sendiri, dan gwa pun tidak menampik hal tersebut.

Tapi gwa menganalogikan mempelajari framework ini seperti sedang memasak mie goreng. Bedanya jika kita menggunakan framework maka kita menggunakan mie yang sudah dijual di pasaran tanpa kita tahu cara membuat mie tersebut. Sementara orang yang tidak menggunakan framework adalah orang yang membuat mienya sendiri.

Pertanyaannya adalah apakah mie goreng yang dibuat dengan mie jualan di pasar pasti lebih enak daripada mie yang dibuat sendiri ? bagaimana sebaliknya ? tentu saja jawabnya tergantung dari banyak faktor ( bisa kualitas mie, bisa kemampuan orang yang memasak ).

Sama halnya dalam menggunakan framework, seberapa bagusnya aplikasi kita bukan saja ditentukan dari framework apa yang kita gunakan, bukan juga ditentukan dari apakah kita menggunakan framework atau tidak. Tetapi juga ditentukan dari kemampuan orang tersebut, karena di mata client tetap saja yang dilihat itu adalah hasil jadinya, bukan codingannya ( kebanyakan client kan ga ngerti2 banget ). Jadi client mana mo tau itu mie hasil buat sendiri ato hasil beli di pasar, yang mereka tahu cuma “mie ini enak”, “mie ini ga enak”. Udah itu aja, simple sekali kan ?

Yah sebenarnya kalau mau didebatkan lagi sebenarnya banyak yang bisa didebatkan tapi intinya sekarang gwa malas nulis panjang-panjang dan juga tentu saja gwa mendukung semua orang untuk mempelajari framework. Kenapa ? karena sekarang persaingan sudah semakin ketat, kita sekarang membuat aplikasi semakin mudah dan semakin cepat. Ibarat kata pepatah “Siapa cepat dia dapat”. Sekarang itu ada di tangan anda, apakah anda ingin memakai mie yang dijual atau buat mie sendiri hohoho yang penting untuk sekarang 5 star buat CakePHP deh

Review CakePHP is a post from: blog.rudylee.com