I’ve come up with some habits that I’ve developed from building themes for WordPress over the years. One, is to start with a nearly blank style sheet. I also like to hook in several JavaScript libraries and CSS frameworks from the start to take advantage of things like JQuery, Blueprint’s CSS reset and Superfish menus. (more…)
Archive for the ‘web development’ Category
Blueprint: Taking a Close Look at grid.css
About Blueprint
Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
.container
/* A container should group all your columns. */
.container {
width: 950px;
margin: 0 auto;
}
Simple Security in CakePHP
When I started to dig in to investigate using the Security Component of CakePHP, I was a bit daunted. It took me quite a while to get my head around ACL after all. Then I found this article. Here’s the crux:
The Security component will create a hash based on the form fields produced by our Form Helper. If someone tampers with the form fields (by adding or removing or changing any field), the hash is not going to match with the expected one and the add() action will fail.
Yep, it’s that simple.
Really? It just can’t be that easy, can it? Yes. It can. I simply added the Security Component to my controller like so:
var $components = array('Security');Sure enough, when I reloaded a page with a form in my browser, this hidden field was there:
<input id="TokenFields1483167134" name="data[_Token][fields]" type="hidden" value="f513aebc448fabe42c7feedf31d43fa5bd71ec79%3An%3A0%3A%7B%7D" />
I installed a Firefox Add-on that allowed me to tamper with the POST data, and when I submitted the form, it failed, or in CakePHP terms, it was “Blackholed.” Awesome.
This isn’t going to protect me from all attacks, but it certainly is a good, easy start to implementing security in my application.
Roll Your Own CakePHP Components
As someone who is not formally trained as a programmer, I often understand concepts long before actually putting them into practice. Don’t Repeat Yourself (DRY) seems simple enough. Of course I don’t want to repeat myself while programming. Who wants to dig through lines of code to find a litte snippet of logic you once wrote? Still, when you’re pressed for time, sometimes you just have to Get Things Done (GTD). So best practices go through the window and you hammer out some spaghetti code so you can move on.
It’s only recently, since I’ve slowed down to finally understand how to write CakePHP Components, that I’ve realized that DRY enhances GTD. Now that I’ve got it all straight in my head, I’m a component evangelist.
At this point I’m going to assume that you’re familiar with MCV architecture and its benefits. Once in a while there’s a bit of logic that you find yourself coding into a controller that you realize you’re going to want to use in other controllers. It’s not specific to the model. That’s where components come in. They’re bits of logic that can be used by more than one controller. Let’s look at a simple one that converts mm/dd/yyyy dates to a Unix timestamp.
<?php class DateComponent extends Object { function mkTimestamp($sentdate, $senttime){ $thedate = explode('/', $sentdate); if(!empty($senttime)){ $thetime = explode(':', $senttime); $newdate = mktime($thetime[0],$thetime[1],0,$thedate[0],$thedate[1],$thedate[2]); } else { $newdate = mktime(0,0,0,$thedate[0],$thedate[1],$thedate[2]); } return $newdate; } } ?>
The function itself is not all that complicated. The thing is that I’m going to want to use this where ever I need to convert dates. Since the component is called “Date”, it’s named with the CakePHP convention for components: DateComponent. The file is called date.php and is saved in app/controllers/components.
Now we have to tell our controller(s) to use it. I’m using it across several controllers, so I’m adding it to app/app_controller.php by adding it to the $components var: var $components = array('Date');
Now I can access it in any controller like so: $tmsmp = $this->Date->mkTimestamp($thedate, $thetime);
The whole point is that components don’t have to be complex, they’re just code you want to reuse that doesn’t necessary apply to one model. They will save you time and clean up your controllers.
CakePHP Console ACL Help File
Every now and then I want to view my help files in pretty, formatted HTML instead of plain text in a text editor or terminal window. Right now I’m working on setting up some Access Control Lists (ACL) in the CakePHP Console. ACL is a powerful, yet sometimes hard-to-grasp concept. I always figure that if I want a resource like this, there has to be someone else out there who does, so for your reference and mine, here it is. (By the way, to get to this from the console, simply type cake acl help.)
Usage: cake acl <command> <arg1> <arg2>...
———————————————–
Commands:
create aro|aco <parent> <node>
Creates a new ACL object <node> under the parent specified by <parent>, an id/alias.
The <parent> and <node> references can be in one of the following formats:
- – <model>.<id> – The node will be bound to a specific record of the given model
- - <alias> – The node will be given a string alias (or path, in the case of <parent>),
i.e. ‘John’. When used with <parent>, this takes the form of an alias path,
i.e. <group>/<subgroup>/<parent>.
To add a node at the root level, enter ‘root’ or ‘/’ as the <parent> parameter.
delete aro|aco <node>
Deletes the ACL object with the given <node> reference (see ‘create’ for info on node references).
setParent aro|aco <node> <parent>
Moves the ACL object specified by <node> beneath the parent ACL object specified by <parent>.
To identify the node and parent, use the row id.
getPath aro|aco <node>
Returns the path to the ACL object specified by <node>. This command is useful in determining the inhertiance of permissions for a certain object in the tree.
For more detailed parameter usage info, see help for the ‘create’ command.
check <aro_id> <aco_id> [<aco_action>] or all
Use this command to check ACL permissions.
For more detailed parameter usage info, see help for the ‘create’ command.
grant <aro_id> <aco_id> [<aco_action>] or all
Use this command to grant ACL permissions. Once executed, the ARO specified (and its children, if any) will have ALLOW access to the specified ACO action (and the ACO’s children, if any). For more detailed parameter usage info, see help for the ‘create’ command.
deny <aro_id> <aco_id> [<aco_action>]or all
Use this command to deny ACL permissions. Once executed, the ARO specified (and its children, if any) will have DENY access to the specified ACO action (and the ACO’s children, if any). For more detailed parameter usage info, see help for the ‘create’ command.
inherit <aro_id> <aco_id> [<aco_action>]or all
Use this command to force a child ARO object to inherit its permissions settings from its parent. For more detailed parameter usage info, see help for the ‘create’ command.
view aro|aco [<node>]
The view command will return the ARO or ACO tree. The optional id/alias parameter allows you to return only a portion of the requested tree. For more detailed parameter usage info, see help for the ‘create’ command.
initdb
Uses this command : cake schema run create DbAcl
help [<command>]
Displays this help message, or a message on a specific command.
The ‘create’ help file
Usage: cake acl <command> <arg1> <arg2>…
———————————————–
- Commands:
create aro|aco <parent> <node>- Creates a new ACL object
<node>under the parent specified by<parent>, an id/alias. The<parent> and <node>references can be in one of the following formats:- -
<model>.<id>– The node will be bound to a specific record of the given model - -
<alias>– The node will be given a string alias (or path, in the case of<parent>), i.e. ‘John’. When used with<parent>, this takes the form of an alias path, i.e.<group>/<subgroup>/<parent>. To add a node at the root level, enter ‘root’ or ‘/’ as the<parent>parameter.
- -
- Creates a new ACL object
When Using a Grid Layout CSS Framework, Do the Math
I recently spent an entire weekend trying to troubleshoot why Internet Explorer 6 kept wrapping the rightmost DIV in my design to the bottom of the page when no other browser did. In my case, I was using the Blueprint CSS framework that creates twenty-four 30 pixel columns, each with a 10 pixel right margin (except the 24th column, which has no right margin), to make a nice 950-pixel wide grid. The whole purpose of using a CSS framework is that it’s supposed to protect me from exactly the sort of problem I was having where different browsers display the page differently. I spent hours trying to figure out why Blueprint was failing in this case. Finally, on Sunday evening I figured it out. The enemy was not Blueprint. The enemy was me.
Above is an approximation of the Blueprint grid. (The thirty-pixel columns are in gray and the ten-pixel right margins in white.) Read the tutorial file for details, but basically, by defining “span-16″ as the class of your DIV, you wind up with a 630 pixel DIV with a ten-pixel right margin for a total of 640 pixels. Nice and neat, and it seemed perfect in my case since the photo I wanted to place on the right was 300 pixels wide. I even had ten pixels to spare. You’re probably a lot smarter than me, so you’ve already figured it out. Unfortunately, I spent the better part of a weekend working in this problem. Finally I was reduced to counting columns and I realized there’s no way to get a 300-pixel DIV using 40 pixel columns! Firefox, Safari & higher versions of Internet Explorer were more forgiving and formatted the page as I wanted. Only Internet Explorer 6 interpreted the code strictly in this case. The other browsers corrected for my math error. I blamed Blueprint for failing and Internet Explorer 6 for misinterpreting my CSS when I was at fault all along.
Forty X 7 (span-7) = 280. Just short of my needed 300 pixels. Forty X 8 = 320. Twenty pixels too wide which left an unwanted margin on the right of my photo. When I finally figured all of this out, I was able to use a combination of Blueprint classes and my own classes to consistently format the page the way I wanted.
Lesson learned: Leverage your CSS grid framework as much as possible, but also add up your columns to your page elements don’t get pushed around the page. It may still be necessary to define your own DIVS outside of the framework.
Use Functions from Other Controllers While Maintaining MVC Architecture in CakePHP
UPDATE (7/22/2009)
requestionAction may not be the best solution. Read this.
At my day job, I’m working on an application to keep track of specimens for our lab. A specimen is sent to the lab, then divided into aliquots which are put into boxes and stored in freezers. The previous sentence ought to give you some idea of the architecture of the database, which in turn drives the Model for my application.
To take a step back for a second, I’m developing the application using the CakePHP framework which uses MVC architecture.
As you may have guessed I have specimen, aliquot, boxes and freezers tables. In turn then, I have Specimen, Aliquot, Box and Freezer Models.
The trick here is that I want to alert users when there are aliquots in the system that have not yet been assigned to boxes. It’s a simple query:
SELECT COUNT(aliquot.id) FROM aliquots WHERE aliquots.box_id IS NULL
The problem is that I want the number of unstored aliquots to be displayed on every page in the left column as a persistent reminder that there are are aliquots that need to be put away. I want to do that in a way that maintains the MVC architecture and doesn’t violate the DRY philosophy.
Since the query is run on the aliquots table and each view is generally specific to it’s own model, I either have to run a recursive query to access data across models–which adds overhead–or implement the solution below which lightens the load a bit and is a more elegant bit of code. (Tip of the hat to Jon Bennet for offering the solution.)
The solution involves CakePHP’s requestAction().
I can define the method in my aliquots controller and call it from anywhere. So if aliquots_controller.php has a method that retrieves the data from the model (in this case called ‘unstored’) I can simply put the following code into my layout:
$unstored = $this->requestAction('aliquots/unstored');
if(!empty($unstored)) {
echo $html->link('<strong>' . $unstored['unstored'] . ' aliquots have not been stored.</strong>', '/aliquots/store');
}I only have to define the method once to use it throughout my application. Problem solved.
Getting Blueprint CSS & JavaScript Libraries Into Your CakePHP Layout
Updated 12/3/2008
The other day I wrote about getting the Blueprint CSS framework into your WordPress theme. If you’re developing in CakePHP, it’s even easier to link multiple style sheets and JavaScript libraries to your layout file.
<?php
$css = array('blueprint/screen', 'blueprint/ie', 'style');
$jslibraries = array('prototype', 'scriptaculous', 'jquery');
echo $html->css('blueprint/print', 'stylesheet', 'media="print"');
echo $html->css($css, 'stylesheet', 'media=â€screen, projectionâ€');
echo $javascript->link($jslibraries);
?>
Let’s take these one at a time.
$css = array('blueprint/screen', 'blueprint/ie', 'style');
CakePHP’s html helper will load any css file you specify. First, make sure the css files are in app/webroot/css. Then put any css files you want to link to your layout in an array like I have above. You might have noticed that I didn’t include print in my array. That’s because we want to add an media=”print” as a separate attribute that the other style sheets won’t have.
Once they’re loaded into your array, simply put echo $html->css($css); in the head of your layout. The output will be:
<link rel="stylesheet" type="text/css" href="/app/webroot/css/blueprint/screen.css" />
<link rel="stylesheet" type="text/css" href="/app/webroot/css/blueprint/ie.css" />
<link rel="stylesheet" type="text/css" href="/app/webroot/css/style.css" />
We still haven’t linked our print style sheet. Make sure you link the print style sheet above the others so they override it. We can add media="print" by putting this into our layout head:
echo $html->css('blueprint/print', 'stylesheet', 'media="print"');
So now:
$css = array('blueprint/screen', 'blueprint/ie', 'style');
echo $html->css('blueprint/print', 'stylesheet', 'media="print"');
echo $html->css($css, 'stylesheet', 'media=â€screen, projectionâ€');
Results in:
<link rel="stylesheet" type="text/css" href="/cvp-msi/https/app/webroot/css/blueprint/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="/cvp-msi/https/app/webroot/css/blueprint/screen.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="/cvp-msi/https/app/webroot/css/blueprint/ie.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="/cvp-msi/https/app/webroot/css/style.css" media="screen, projection" />
Two things to note. In $html->css($path, $attributes), the first argument is the path from app/webroot/css. The second argument is html attributes.
Linking JavaScript libraries is very similar.
$jslibraries = array('prototype', 'scriptaculous', 'jquery');
This will link to prototype.js, scriptaculous.js and jquery.js respectively as long as there in app/webroot/js.
Put echo $javascript->link($jslibraries); into the head of your layout and you’re done. You have all three JavaScript libraries at your disposal.
Other good resources:
WordPress’ Auto Update Is OK, But The Command Line Is Faster
I recently found a great article about upgrading WordPress from the command line. If you’re familiar with a command line interface at all, it’s by far the simplest way to upgrade your WordPress install.
You can apply the same method to upgrading your WordPress plugins.
- Log in to your web server and
cdto the WordPress plugins directory:
cd httpdocs/wp-content/plugins
Your syntax may vary depending on your server. - Download the new version of the plugin. In my case I’m upgrading the Social Homes plug in.
wget http://downloads.wordpress.org/plugin/social-homes.2.3.zip - Back up your current plugin directory
tar -zcvf social-homes.tar.gz social-homes - Unzip the zip file of the new version
unzip social-homes.2.3.zip- You’ll be prompted to confirm you want to overwrite the files in the social-homes directory
replace social-homes/COPYING.txt? [y]es, [n]o, [A]ll, [N]one, [r]ename: - Type ‘A’ and hit return to overwrite the old files with the new ones.
- You’ll be prompted to confirm you want to overwrite the files in the social-homes directory
- Log into WordPress to make sure the upgrade worked by going to the “Plugins” panel in the admin area.
- Clean up your mess
rm social-homes.2.3.zip
rm social-homes.tar.gz
You’re done. You’ve successfully upgraded your plugin. This process can be much faster than downloading the plugin to your local directory, deactivating it in WordPress and uploading the new one. Especially if the plugin is a large one.
Incorporating Blueprint CSS Into Your New WordPress Theme
If you’re familiar with the Blueprint CSS framework, you already know it can make your life a lot easier. So how do you get it into your WordPress theme? Luckily, WordPress is designed to make your life easier too.
I’m assuming your know the basics of WordPress Theme Development. That is, at the very least you need:
- header.php
- footer.php
- index.php
- style.css
Put those files in a folder named after your theme. And put that folder in /wordpressroot/wp-content/themes/.
Once you’ve gotten that far, download the Blueprint CSS Framework and drop the “blueprint” folder from that download into your theme’s directory.
Finally, to include the new CSS files into your theme, just add this code to your header:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/blueprint/print.css" type="text/css" media="print">
<!--[if IE]>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/blueprint/ie.css" type="text/css" media="screen, projection">
<![endif]-->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
Pay attention to the order. You want to make sure that href="<?php bloginfo('stylesheet_url'); ?>" appears last in the list of style sheets. That’s your style.css where you can tailor the CSS for your specific design.
That’s it.