Cakephp Articles

When launching new websites and web applications, it is difficult to get on trusted email lists of Hotmail, Yahoo and Etc. Aside from having proper SPF records, a great way to avoid this sysadmin problem is to use Gmail / Google Apps to offload your domain's email to their servers. By doing this, your domain gets an instant trust factor with receiving mail servers that a new server simply cannot do in a short period of time.

To email with Google Apps / Gmail with CakePHP, I've had recent success using the SwiftMailer CakePHP component. It is easy to use and leverages the PHP SwiftMailer library.

Configuring SwiftMailer CakePHP Component with Gmail

This is pulled off the component article's example, but I posted it here as well for your reference.

$this->SwiftMailer->smtpType = 'tls';
$this->SwiftMailer->smtpHost = 'smtp.gmail.com';
$this->SwiftMailer->smtpPort = 465;
$this->SwiftMailer->smtpUsername = 'name@domain.com';
$this->SwiftMailer->smtpPassword = 'your_password';

$this->SwiftMailer->sendAs = 'both';
$this->SwiftMailer->from = 'name@domain.com';
$this->SwiftMailer->fromName = 'Full Name';
$this->SwiftMailer->to = 'to_name@domain.com';
$this->SwiftMailer->template = 'your_action';
$this->SwiftMailer->subject = 'your_subject'

PHP:

$this->SwiftMailer->smtpType = 'tls';
$this->SwiftMailer->smtpHost = 'smtp.gmail.com';
$this->SwiftMailer->smtpPort = 465;
$this->SwiftMailer->smtpUsername = 'name@domain.com';
$this->SwiftMailer->smtpPassword = 'your_password';
 
$this->SwiftMailer->sendAs = 'both';
$this->SwiftMailer->from = 'name@domain.com';
$this->SwiftMailer->fromName = 'Full Name';
$this->SwiftMailer->to = 'to_name@domain.com';
$this->SwiftMailer->template = 'your_action';
$this->SwiftMailer->subject = 'your_subject'

I added two custom attributes here, template and subject because I find I like to set that as a variable instead of putting it in the send function (in the next step).

Emailing with SwiftMailer CakePHP Component

The send function has 3 parameters, but we are only concerned with the first two since we've already configured our settings in the step above. The first is the template found in /views/elements/email, the second is the subject.

try {
    if(!$this->SwiftMailer->send($this->SwiftMailer->template, $this->SwiftMailer->subject)){
        $this->log("Error sending email");
    }
} catch(Exception $e) {
	$this->log("Failed to send email: ".$e->getMessage());
}

PHP:

try {
    if(!$this->SwiftMailer->send($this->SwiftMailer->template, $this->SwiftMailer->subject)){
        $this->log("Error sending email");
    }
} catch(Exception $e) {
    $this->log("Failed to send email: ".$e->getMessage());
}

You will also notice here that we are wrapping the send function in a try/catch block. This allows us to output whatever caused the function to fail through an exception (and fail silently), rather having the component either kill the client to output the message, or simply return false with no explanation like a lot of things in CakePHP-land. Try/catch blocks work great in non-mission critical things like sending an email, conturary to the core library which should simply fail and exit the application.

I had one error on my local computer with TLS not being installed into PHP. So I added the following line to my PHP compile to add TLS support:

--with-openssl

Bash:

--with-openssl

My entire PHP compile looks like this...

sudo make clean && sudo ./configure --prefix=/usr/local/php5  --with-pear --enable-sockets --with-iodbc=/usr --with-curl=/usr --with-mysql=/usr/local/mysql --without-iconv --with-apxs2=/opt/local/apache2/bin/apxs --with-zlib-dir=../zlib-1.2.3/ --with-jpeg-dir=../jpeg-6b --with-openssl --with-gd --with-freetype2=/Developer/SDKs/MacOSX10.5.sdk/usr/X11/include/freetype2/freetype && sudo make && sudo make install

Bash:

sudo make clean && sudo ./configure --prefix=/usr/local/php5  --with-pear --enable-sockets --with-iodbc=/usr --with-curl=/usr --with-mysql=/usr/local/mysql --without-iconv --with-apxs2=/opt/local/apache2/bin/apxs --with-zlib-dir=../zlib-1.2.3/ --with-jpeg-dir=../jpeg-6b --with-openssl --with-gd --with-freetype2=/Developer/SDKs/MacOSX10.5.sdk/usr/X11/include/freetype2/freetype && sudo make && sudo make install

As an alternative to SwiftMailer, I was pointed to joshua's solution on the mailing list to use the built-in CakePHP email component with Gmail. Apparently he got it to work, but I couldn't for whatever reason.

Enjoy having mail go through to your users without fail!

I have decided to pour all of my resources and energy into getting four rather demanding projects done before the end of the year. This big end-of-year push has had a lot of thought behind it, which I wanted to share with you and document here on my blog.

The Projects

Of the four projects I am focusing on getting done, two are consulting jobs and two are my own start-up companies.  With the start-ups, I have partnered with businesses to help define the products and they will sell them when the products are released to the public.

The Plan

My focus in November will be on consulting. Consulting is a great way to get temporary cash flow, through which I will be using to hire people to work on my startup companies. I will have a total of 4 contractors working for me in November.

The Logistics

UI skills are the most important for my consulting work, and CakePHP skills are most important for the startups. In case you are wondering who is working with me, here is a list of them and brief description of each:

1. A developer that is a highly seasoned professional and core developer of CakePHP, he will be working on a startup in CakePHP.
2. A developer that is a master of databases and does a lot of work with CakePHP, he will be working on a startup in CakePHP and on documentation
3. A developer that is great at UI and CakePHP, however he will be consulting with me focusing on UI (jQuery/JavaScript/HTML/CSS) with me and has been for quite some time.
4. A developer/designer who is good at a diverse amount of things, working with UI, straight PHP and some CakePHP. He will be working with me on UI consulting projects.

Though the above isn't 100% finalized, I am confident they will be joining me in these last two important months of the year - all of the projects fun to work on. 

The Goal

It is my goal to have a company with products, partnerships and consulting. So far it has been working out brilliant and I only expect the great work to continue.

This will be a wild two months that I'm hoping to propel those working with me into a great 2009.

An addition to my website is the top commenters page.  Even though the page doesn't look that complex, there is still a bit going on behind the scenes.

To get the top commenter count I have to thank Ryan Peterson in helping me write this custom MySQL query.  I used Group By to lump the results together based on the commenter's email address.  Then use count(*) to count the number of records in the group. Also used the NOT function in MySQL to filter my email address.

SELECT `Comment`.`author`, `Comment`.`id`, `Comment`.`url`, count(*) AS `count` FROM `cake_comments` AS `Comment` WHERE 1 = 1 AND NOT(`Comment`.`email`=\'m@marcgrabanski.com\') GROUP BY `Comment`.`email` ORDER BY `count` DESC LIMIT 0, 10

Mysql:

SELECT `Comment`.`author`, `Comment`.`id`, `Comment`.`url`, count(*) AS `count` FROM `cake_comments` AS `Comment` WHERE 1 = 1 AND NOT(`Comment`.`email`=\'m@marcgrabanski.com\') GROUP BY `Comment`.`email` ORDER BY `count` DESC LIMIT 0, 10

Since I didn't want to load all of the related comments at once, I decied to use a little jQuery and Ajax to show comments that they have made.

First, I put a span tag around the comment count, because without JavaScript you won't see this functionality. On page load I swapped the spans into links with $(this).replaceWith('<a>' + $(this).html() + '</a>');

Instead adding behavior later after append, I used a jQuery object inside replaceWith  so I can attach behavior to the link and I like how the code looks.

$(this).replaceWith(
	$('' + $(this).html() + '').click(function(){
		//code here
	})
);

JavaScript:

$(this).replaceWith(
    $('<a>' + $(this).html() + '</a>').click(function(){
        //code here
    })
);

Using CakePHP's JavaScript object generator, $javascript->object($data); it was easy to send JSON back to the client and parse with jQuery. Here is the full source of the JavaScript file.

$(document).ready(function(){
	$('.get_comments').each(function(){
		$(this).replaceWith( 
			$(''+$(this).html()+'').click(function(){
				link = $(this);
				$.post('comments/get/comments', {
					'data[Comment][id]': $(this).siblings('.author').attr('id')
				}, function(data){
					out = '';
					for (i in data) {
						prefix = data[i].Article.type ? 'article/' : 'answers/';
						out += '
' + data[i].Article.title + '' + 
							data[i].Comment.created + '
';
					}
					$('
' + out + '
').hide().appendTo(link.parents('li:first')).slideDown();
					$(link).replaceWith( $(link).html() );
				}, 'json');
			})
		);
	});
});

JavaScript:

$(document).ready(function(){
    $('.get_comments').each(function(){
        $(this).replaceWith( 
            $('<a>'+$(this).html()+'</a>').click(function(){
                link = $(this);
                $.post('comments/get/comments', {
                    'data[Comment][id]': $(this).siblings('.author').attr('id')
                }, function(data){
                    out = '';
                    for (i in data) {
                        prefix = data[i].Article.type ? 'article/' : 'answers/';
                        out += '<li><a href="' + prefix + data[i].Article.slug + '#c' + data[i].Comment.id + '">' + data[i].Article.title + '</a>' + 
                            data[i].Comment.created + '</li>';
                    }
                    $('<ol>' + out + '</ol>').hide().appendTo(link.parents('li:first')).slideDown();
                    $(link).replaceWith( $(link).html() );
                }, 'json');
            })
        );
    });
});

Update: I think I'll post the CakePHP code just in case someone is interested. Here is the controller, I use the RequestHandler component var $components = array('RequestHandler'); and the Time helper var $helpers = array('Time'); in the top of the controller.

function get($type = null) 
{
	if ($this->RequestHandler->isAjax()) {
		Configure::write('debug', 0);
		if ($type == 'comments') {
			$comment = $this->Comment->read(array('Comment.email'), $this->data['Comment']['id']);
			$results = $this->Comment->find('all', array(
				'conditions' => array('email' => $comment['Comment']['email']),
				'fields' => 'Article.title, Article.slug, Article.type, Comment.id, Comment.created'
			));
			$this->set(compact('results'));
		}
	}
}

PHP:

function get($type = null) 
{
    if ($this->RequestHandler->isAjax()) {
        Configure::write('debug', 0);
        if ($type == 'comments') {
            $comment = $this->Comment->read(array('Comment.email'), $this->data['Comment']['id']);
            $results = $this->Comment->find('all', array(
                'conditions' => array('email' => $comment['Comment']['email']),
                'fields' => 'Article.title, Article.slug, Article.type, Comment.id, Comment.created'
            ));
            $this->set(compact('results'));
        }
    }
}

I also turn debug off with Configure::write('debug', 0);. Also, I only use $type  so that I can setup my code to get types of data if I want later - more of a design pattern I typically follow.

Then in my view I use the time helper and output a JSON object.

timeAgoInWords($result['Comment']['created']); 
		endif;
	endforeach;
	echo  $javascript->object($results); 
?>

PHP:

<?php
if ($result):
        if (isset($result['Comment']['created'])):
            $results[$key]['Comment']['created'] =
                $time->timeAgoInWords($result['Comment']['created']); 
        endif;
    endforeach;
    echo  $javascript->object($results); 
?>

To see in action, click the comments count next to someone's name on the top commenters page.

Note on March 21st, 2008: Neil Crookes made a nice Yahoo! Boss CakePHP Plugin that I would recommend over my code. Neil's fits much better into the CakePHP environment.

When you are in an administration panel, sometimes you want a "quick save" feature that allows you to save without leaving the page.  Here is how to accomplish this with CakePHP and jQuery.

To start, download jQuery and the jQuery Form Plugin JavaScript.  Include them in your view with the JavaScript helper:

$javascript->link(array('jquery', 'form'), false);

PHP:

$javascript->link(array('jquery', 'form'), false);

Include the RequestHandler in your controller detect an Ajax save attempt.  Also include the JavaScript helper if you haven't already.

var $helpers = array('Javascript');
var $components = array('RequestHandler');

PHP:

var $helpers = array('Javascript');
var $components = array('RequestHandler');

Next we want to override our save function with the ajax quick save.  Put this right before your $this->Model->save($this->data) in your save action.

if ($this->RequestHandler->isAjax()) {
	if ($this->Article->save($this->data)) {
		echo 'success';
	}
	Configure::write('debug', 0);
	$this->autoRender = false;
	exit();
}

PHP:

if ($this->RequestHandler->isAjax()) {
    if ($this->Article->save($this->data)) {
        echo 'success';
    }
    Configure::write('debug', 0);
    $this->autoRender = false;
    exit();
}

This detects if the request is ajax, then saves the data.  Then it sends back a simple, "success" message to let you know things went fine.  It also writes debug to 0 and doesn't render anything, then exits.

Lastly, lets create and include a JavaScript file that performs the quick save.

jQuery(function($){
 	$('')
 		.click(function(){
 			$(this).parents("form:first").ajaxSubmit({
 				success: function(responseText, responseCode) {
 					$('#ajax-save-message').hide().html(responseText).fadeIn();
 					setTimeout(function(){ 
 						$('#ajax-save-message').fadeOut(); 
 					}, 5000);
 				}
 			});
 			return false;
 		})
 		.appendTo('form div.submit'); 
});

JavaScript:

jQuery(function($){
    $('<input type="button" value="Quick Save" />')
        .click(function(){
            $(this).parents("form:first").ajaxSubmit({
                success: function(responseText, responseCode) {
                    $('#ajax-save-message').hide().html(responseText).fadeIn();
                    setTimeout(function(){ 
                        $('#ajax-save-message').fadeOut(); 
                    }, 5000);
                }
            });
            return false;
        })
        .appendTo('form div.submit'); 
});

This adds a button called, "Quick Save" to each form on the page where a div with class="submit" exists (you may want to switch this to the id of the form you want to add quick save to). Then It also attaches a click event to the button that submits the form via the jQuery Form Plugin.

In a few simple steps, we've created a quick save feature that saves your data whenever you want without leaving the page.

Note on June 27th: The website is now usable on IE6 and IE7.

Rebuilt from scratch on top of CakePHP and jQuery, version 2 of MarcGrabanski.com has been launched!

The first version was on top of PHP and HTML, which turned into a mess to maintain. This time I really thought long and hard on how to code the website from the ground-up. It is a psuedo CMS, blog and takes advantage of much of CakePHP's strengths.  The code is 100% hand written in a text editor, as well as the design was done in illustrator. I purchased the computer/face, then heavily modified it and illustrated all of the items around the monitor and keyboard. I enjoy illustrating but don't get to do it very often (too much coding). 

Finally I feel like I have a website to be pleased about - despite the compliments on the old website by far and wide audiences, I was never too happy with it.  But, this one I enjoy and am pleased with.  Which is ultimately what matters.  With this website I will be able to post more (hopefully) and definately have a much easier time maintaining.

Enjoy the new website, I know I will!

P.S. Please report any bugs you find in the new site to m@marcgrabanski.com

A good thing to do when deploying CakePHP websites is to load one copy of the CakePHP core files onto your server, and point all of your domains to that core directory. 

Media Temple's Plesk default configuration does not let PHP access files outside the website httpdocs. So we need to configure the domain's settings to have access to the root /cake folder, or wherever you happened to put the CakePHP root files.

First, let's make a new config file in our domain. Make sure you replace domain.com with your domain.

cd /var/www/vhosts/domain.com/conf/
vi vhost.conf

Bash:

cd /var/www/vhosts/domain.com/conf/
vi vhost.conf

Then basically we are over riding the default settings of Plesk with our own. Setting open_basedir to allow the /cake path.

        
                php_admin_flag engine on
                php_admin_flag safe_mode off
                php_admin_value open_basedir "/cake:/var/www/vhosts/domain.com/subdomains/tools/httpdocs:/tmp"
        
        
                php_admin_flag engine on
                php_admin_flag safe_mode off
                php_admin_value open_basedir "/cake:/var/www/vhosts/domain.com/subdomains/tools/httpdocs:/tmp"
        

Apache:

<Directory /var/www/vhosts/domain.com/subdomains/tools/httpdocs>
        <IfModule sapi_apache2.c>
                php_admin_flag engine on
                php_admin_flag safe_mode off
                php_admin_value open_basedir "/cake:/var/www/vhosts/domain.com/subdomains/tools/httpdocs:/tmp"
        </IfModule>
        <IfModule mod_php5.c>
                php_admin_flag engine on
                php_admin_flag safe_mode off
                php_admin_value open_basedir "/cake:/var/www/vhosts/domain.com/subdomains/tools/httpdocs:/tmp"
        </IfModule>
</Directory>

Now we need to reload the vhost to include that loads our new config file.

/usr/local/psa/admin/sbin/websrvmng --reconfigure-vhost --vhost-name=domain.com
service httpd graceful

Bash:

/usr/local/psa/admin/sbin/websrvmng --reconfigure-vhost --vhost-name=domain.com
service httpd graceful

Great! Now we can have a central set of cake files and use it for each domain.

My email was not getting sent using the email component in CakePHP. I debugged inside the core and found out that my subject was getting changed to something like, "=?UTF-8?B?V2VsY29tZ...".

In talking to Larry (core CakePHP team), he educated me that this allows for characters other than the English language to be sent via email (UTF-8 encoding). Even though it apparently was correct, it was still not being received at my personal email or a Yahoo account. Gmail got it, the others didn't.

The Alternate Email Encoding (English only)

Larry showed me the alternative way to encode that works just fine for English characters. If you are having trouble with receiving these UTF-8 encoded emails, try sending with iso-8859-15 (only English characters). You can try the English encoding using this line of code:

$this->Email->charset = 'iso-8859-15';

PHP:

$this->Email->charset = 'iso-8859-15';

This works for English-only applications, but if anyone can offer up a solution as to why Yahoo and Media Temple email accounts are not getting the UTF-8 emails please let me know. It is strange to me that gmail gets it just fine. Until then, I am only planning on sending English emails anyway so there is no issue until I build a multi-lingual application.

Released my CakePHP Asset Mapper. I've always wanted an easier way to control my JavaScript and CSS includes and this is the solution I came up with. Controls the entire web application's includes in one file!

Here is an example of a mapping rule:

$this->AssetRule->create(); 
$this->AssetRule->compact->css = array('site','global'); 
$this->AssetRule->compact->scripts = array('jquery', 'ui.datepicker'); 
$this->AssetRule->runRule();

PHP:

$this->AssetRule->create(); 
$this->AssetRule->compact->css = array('site','global'); 
$this->AssetRule->compact->scripts = array('jquery', 'ui.datepicker'); 
$this->AssetRule->runRule();

Accross the entire site, this would compact the site.css and global.css files together and run them through CSS Tidy. jQuery.js and ui.datepicker.js would be compacted together and then ran through JSMin.

Great, this simplifies a complex process of compacting and minimizing - while still giving you the freedom to include scripts normally. Compacting lowers the amount of http requests you website makes, increasing website performance. JSMin and CSS Tidy strip comments and whitespace leaving your files much smaller in size.

You can create a rule to include files in a specific controller and/or action with AssetRule->map and AssetRule->controller:

$this->AssetRule->create(); 
$this->AssetRule->map->controller = 'posts';
$this->AssetRule->map->action = 'admin_add';
$this->AssetRule->compact->css = array('user'); 
$this->AssetRule->runRule();

PHP:

$this->AssetRule->create(); 
$this->AssetRule->map->controller = 'posts';
$this->AssetRule->map->action = 'admin_add';
$this->AssetRule->compact->css = array('user'); 
$this->AssetRule->runRule();

This would only include your 'user.css' file in the, 'posts' controller - with the action, 'admin_add'. The css file would be compacted with the others.

Some scripts like TinyMCE, include other files (so it can't be compacted with the others) and requires a codeblock to be initialized. This configuration satisfies TinyMCE:

$this->AssetRule->create(); 
$this->AssetRule->map->action = 'admin_edit'; 
$this->AssetRule->scripts = array('tiny_mce/tiny_mce'); 
$this->AssetRule->codeblock = 'tinyMCE.init({ 
    mode : "textareas", 
    theme : "advanced", 
    plugins : "media", 
    media_external_list_url : "media/list.js", 
    theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,outdent,indent,redo,link,unlink", 
    theme_advanced_buttons2 : "", 
    theme_advanced_buttons3 : "", 
    theme_advanced_resizing : true, 
    theme_advanced_toolbar_location : "top", 
    theme_advanced_toolbar_align : "left", 
    theme_advanced_statusbar_location : "bottom", 
    extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]" 
});'; 
$this->AssetRule->runRule();

PHP:

$this->AssetRule->create(); 
$this->AssetRule->map->action = 'admin_edit'; 
$this->AssetRule->scripts = array('tiny_mce/tiny_mce'); 
$this->AssetRule->codeblock = 'tinyMCE.init({ 
    mode : "textareas", 
    theme : "advanced", 
    plugins : "media", 
    media_external_list_url : "media/list.js", 
    theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,outdent,indent,redo,link,unlink", 
    theme_advanced_buttons2 : "", 
    theme_advanced_buttons3 : "", 
    theme_advanced_resizing : true, 
    theme_advanced_toolbar_location : "top", 
    theme_advanced_toolbar_align : "left", 
    theme_advanced_statusbar_location : "bottom", 
    extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]" 
});'; 
$this->AssetRule->runRule();

Coming from a heavy UI developer background, I can afford to be incredibly anal when managing my CSS and JavaScript files. I hope this saves you time, frustration and makes your developer-life better.

Note on July 15th, 2008: I haven't used dreamweaver for a long time, this article was written back in cake 1.1 days.  I suggest Text Mate for Mac OS X, and E Text Editor for Windows.

I needed Dreamweaver to recognize a new file extension called, "thtml" for CakePHP. Here is how I got Dreamweaver to recognize new code extensions and highlight them correctly:

1. Edit your Extensions.txt file: C:\\Documents and Settings\\User\\Application Data\\Macromedia\\Dreamweaver 8\\Configuration
2. Add in the new file extension into its type: HTM,HTML,HTA,HTC,XHTML,THTML:HTML Documents
3. Now Dreamweaver recognizes the new file types but to get code highlighting you need to edit your MMDocumentTypes.xml file: C:\\Program Files\\Macromedia\\Dreamweaver 8\\Configuration\\DocumentTypes
4. Add in the new file extension to HTML winfileextension.

Here is the full article by Adobe: Adobe: Changing and adding file extensions recognized by Dreamweaver