Close

Home » Web Development

‘Web Development’ Category

January 30th, 2012

Code Completion in phpStorm with phpBB3

phpStorm Logo As I mentioned in a previous phpStorm post, phpStorm is my favourite PHP IDE.
Since I do a lot of work with phpBB3, I have a couple tips for code completion.

There are basically 2 main phpBB3 code libs that do not have completion and are used a lot.
The DBAL and ACM, though the DBAL is used the most, I put the caching in as well, just in case its needed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Open phpBB3 root/common.php
 
// Add doc blocks above
$cache = new cache();
$db = new $sql_db();
 
// So they look like this
/** @var $cache acm */
$cache = new cache();
 
/** @var $db dbal_mysql */
$db = new $sql_db();
 
// This should provide code completion for most if not all query functions in phpBB3 and also cache functions

What we are doing is setting the reference for the class to the global var using the @var annotation.
This will give you almost complete code completion for any SQL query functions you need to use from the DBAL.
Also including the phpBB3 caching mechanism ACM.

There are others that require class assigning annotations as well.
Like the custom profile field class to name one.

So when you work with these, just annotate your instance var referencing it to the class like we did in the above code.
Then you should have full completion for your phpBB3 project.

Stay tuned for more phpStorm tips.

January 29th, 2012

Code Completion for CodeIgniter in phpStorm

phpStorm Logo Open source projects can sometimes be a bit of a pain in phpStorm.
Here I am going to show how to fix code completion for CodeIgniter in phpStorm.

Common Issues

(more…)

January 27th, 2012

Grid for aligning HTML elements

When it comes to layout markup and CSS I use FireBug and the Webdeveloper Toolbar for FireFox constantly.

With HTML block alignment a useful tool is the ruler under the Miscellaneous tab in the Webdev Toolbar.
The problem with it is this, every page refresh you need to add it back.

This is a pain when aligning a lot of different size elements, like forms for example.
So I made a simple tool for it, a graphic that is repeated with CSS over the area you are working in or the entire body.
A tiny bit of CSS and HTML goes a long way.

It is open source and available with an example on GitHub Grid Layout Overlay

Add the div to the area you want the grid to overlay.

1
<div id="grid"></div>

Drop the image in an accessible path.

Add the CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#grid {
display: block;
position: absolute;
background: url('../img/100grid.png') repeat;
z-index: 10000;
width: 100%;
height: 100%;
min-height: 800px;
margin: 0;
padding: 0;
top: -12px; /* Adjust the Vertical position */
left: -6px; /* Adjust the Horizontal position */
opacity: .7; /* Adjust the opacity */
}

Make sure to adjust the path to point to the image location url(‘../img/100grid.png’)

Then you should end up with a grid over your layout like this simple example.

I will be posting YouTube entries on this also.