Archive for the 'Programming' category

Styling the default Zend_Form layout

published on December 22, 2008.

Here's an example for styling Zend_Form's default layout. The default layout is using definition lists. While there's an option for changing the default layout, the wrapper tags and stuff, I see no reason for it. Create the form, add some CSS and your good to go :)

Note: Be sure to provide a Document Type in your view scripts like this:

<?php
<?= $this->doctype('XHTML1_STRICT') ?>

because when the form is generated, ZF is looking at the doctype to see how to create the form elements. Forgetting the doctype will probably generate invalid markup. I learned the hard way. Don't do the same mistake, k? :)

The generated markup

So, here's what Zend_Form makes for us (this markup is after submitting the form, but whit generated error, to show the error markup, too):

<form enctype="application/x-www-form-urlencoded" method="post" action="">
<dl class="zend_form">
    <dt>
        <label for="input1" class="required">Input field #1:</label>
    </dt>
    <dd>
        <input type="text" name="input1" id="input1" value="" />
        <ul class="errors">
            <li>Value is empty, but a non-empty value is required</li>
        </ul>
        <p class="description">Description? Yes, please.</p>
    </dd>
    <dt>
        &nbsp;
    </dt>
    <dd>
        <input type="submit" name="submit" id="submit" value="Submit form" />
    </dd>
</dl>
</form>

The PHP code which generates this form (without the error, of course) goes like this:

<?php
$input1 = new Zend_Form_Element_Text('input1');
$input1->setLabel('Input field #1:')
          ->setDescription('Description? Yes, please.')
          ->setRequired(true);

$submit = new Zend_Form_Element_Submit('submit');
$submit->setLabel('Submit form')

$form = new Zend_Form();
$form->setMethod('post')
       ->addElement($input1)
       ->addElement($submit);

Now, the generated form looks kinda good with no styling (which is good, if some maniac comes to visit with CSS support disabled).

OK, I lie: there's a minimum of CSS for setting the background to white and the width to 460 pixels.

As you can see I've shortened the HTML and the PHP in the example codes…

The styling

I like my forms a bit different: form elements and their labels side by side with element descriptions and eventual errors showing up under the element. Here's the CSS to achieve this:

.zend_form{
background:#fff;
width:460px;
margin:5px auto;
padding:0;
overflow:auto;
}

.zend_form dt{
padding:0;
clear:both;
width:30%;
float:left;
text-align:right;
margin:5px 5px 5px 0;
}

.zend_form dd{
padding:0;
float:left;
width:68%;
margin:5px 2px 5px 0;
}

.zend_form p{
padding:0;
margin:0;
}

.zend_form input, .zend_form textarea{
margin:0 0 2px 0;
padding:0;
}

.submit{
float:right;
}

.required:before{content:'* '}

.optional:before{content:'+ '}

Of course, this CSS takes care only of the layout; things like font types and sizes, colors, borders, backgrounds, etc. are not essential for this.

So, with this CSS applied to the generated Zend_Form, you can see on the image what will come up. And you know what's the best part? It's good for Firefox, Internet Explorer 6, Chrome and Opera, both under Windows and GNU/Linux (sorry, not tested for Internet Explorer 7 and Safari, but they should play along as well).

I almost forgot: I added a class="submit” to the submit button, to be able to float it right. I first tried to do that with input[type=submit], but IE doesn't know that, and as I wanted to make a styling that looks (almost) the same in all browsers with no hacks, I decided to add the class attribute.

So there, this little CSS code snippet should get you started with styling your Zend Form's.

Cheers!

Data filtering with PHP's Filter extension

published on December 15, 2008.

Today I was catching up on feeds and one of the articles lead me to GoPHP5.org, where I spent some time lurking. In the FAQ section of that site one sentence made me curios:

The Filter extension is a new security component in PHP.

Filter extension? Maybe it's nothing new for some of you, but it is for me. I've never heard of it before. So I quickly hopped over to PHP.net and the Filter chapter of the manual.

The filter extension is an extension that comes by default in PHP 5.2. It is here to help us to “validate and filter data that comes from insecure sources, such as user input”. It can validate integers, booleans, floats, regular expressions, URLs, E-Mails and IPs. It can sanitize strings, integers, floats, URLs, E-Mails…

Examples

Here are some examples about what this extension is capable of. Lets assume that we get some data from a form with POST method. The 3 input fields are name, email and age (I'm not creating a real validator, but var_dump-ing the results of the filtering, to show what filter gives what kind of output).

<?php
// $_POST['name'] = "Robert <b>hello</b>";
var_dump(filter_input(INPUT_POST, 'name', FILTER_SANITIZE_STRING));
// Output: string(12) "Robert hello"

// $_POST['email'] = "mail@example.com";
var_dump(filter_input(INPUT_POST, 'name', FILTER_VALIDATE_EMAIL));
// Output: string(16) "mail@example.com"

// $_POST['age'] = "22";
var_dump(filter_input(INPUT_POST, 'age', FILTER_VALIDATE_INT,
                        array('options' => array('min_range' => 18,
                                                'max_range' => 28)
                        )));
// Output: int(22)

With the first filter I'm using the FILTER_SANITIZE_STRING which strips down all tags and unwanted characters from our string. The second filter validates the provided E-mail address: pass it a malformed E-mail address and it will result with a boolean false. The third filter validates the age: it must be an integer and in the range between 18 and 28 (the min and max ranges are optional, I added them just for the example).

Besides input filtering it can filter variables, too:

<?php
$string = "Some funky string with <b>html</b> code and 'quotes'";
var_dump(filter_var($string, FILTER_SANITIZE_STRING));
// Output: string(53) "Some funky string with html code and 'quotes'"
// NOTE: the single quotes in the output are encoded as &amp;#39;

var_dump(filter_var($string, FILTER_SANITIZE_MAGIC_QUOTES));
// Output: string(54) "Some funky string with html code and \'quotes\'"
// NOTE: the <b></b> html tags are NOT stripped in the output

var_dump(filter_var($string, FILTER_SANITIZE_ENCODED));
// Output: string(80) "Some%20funky%20string%20with%20%3Cb%3Ehtml%3C%2Fb%3E%20code%20and%20%27quotes%27"

Play around with it, get familiar, cause this is one nice extension that will help you make more secure web sites and web apps.

Cheers!

MyUrl view helper for Zend Framework

published on December 02, 2008.

I started writing some boring introduction but I'll just skip to the point.

The problem

Zend Framework's built in URL view helper — Zend_View_Helper_Url — is discarding the query string of the URL, thus breaking some links.

Example: If I'm on a page like:

http://project/foo/bar/?param1=value1

and in the bar.phtml I use the Url helper like this:

<?php
<?= $this->url(array('param2' => 'value2')); ?>

I expect this:

http://project/foo/bar/param2/value2/?param1=value1

or something similar to this. This would be just perfect:

http://project/foo/bar/param1/value1/param2/value2

But no, it gives:

http://project/foo/bar/param2/value2/

The solution

After working on several workarounds, currently this is the best one I can think of — take the link that is created by the built-in Url helper and add the query string on that link:

<?php

// Usage:
// <?= $this->myUrl($this->url(array('param2' => 'value2'))); ?>
// Output:
// http://project/controller/action/param2/value2/?param1=value1
class Zend_View_Helper_MyUrl
{
    public function myUrl(&$url, &$toAdd = array())
    {
        $requestUri = Zend_Controller_Front::getInstance()->getRequest()->getRequestUri();
        $query = parse_url($requestUri, PHP_URL_QUERY);
        if($query == '')
        {
            return $url;
        }
        else if(empty($toAdd))
        {
            return $url . '/?' . $query;
        }
        else
        {
            $toAdd = (array)$toAdd;
            $query = explode("&", $query);

            $add = '/?';

            foreach($toAdd as $addPart)
            {
                foreach($query as $queryPart)
                {
                    if(strpos($queryPart, $addPart) !== False)
                    {
                        $add .= '&' . $queryPart;
                    }
                }
            }
            return $url . $add;
        }
    }
}

The second parameter, $toAdd, should be an array of parameters that we want to add to the URL. Say, if I have a query string like:

?param1=value1&someotherparam=anditsvalue

but want only to add the param1=value1 to the URL, I would pass “param1” as the second parameter. Not passing anything as the second parameter will result in adding the complete query string to the URL.

This is an ugly hack to make ugly links work, but it works. Thoughts?

Cheers!

LAMP and SVN on Ubuntu 8.10

published on November 24, 2008.

This post is a rewrite of one of my older posts, Ubuntu as a dev machine, but this time I'll explain also how to setup a basic SVN besides the LAMP.

Ubuntu 8.10 was released bout a month ago and today I wasn't in the mood of doing any coding so I decided to try out the new Ubuntu. Once again, I'm installing it under VirtualBox (VB), cause it seems that they still haven't fixed the bug related to the rtl8187 chipset. Oh well…

Be sure to use VB v2.x.x. (v2.0.6. is the latest now), cause it's recognizing the correct screen resolution, not like VB v.1.6.4, whit which I had to configure manually the xorg.conf file…

Setting up LAMP

Here are the commands:

sudo apt-get install apache2
sudo apt-get install php5 libapache2-mod-php5
sudo /etc/init.d/apache2 restart
sudo apt-get install mysql-server
sudo apt-get install libapache2-mod-auth-mysql php5-mysql phpmyadmin
sudo /etc/init.d/apache2 restart
sudo a2enmod rewrite
sudo /etc/init.d/apache2 restart

If mod_rewrite doesn't work, do the following:

sudo gvim /etc/apache2/sites-available/default

And change AllowOverride None to AllowOverride All.

Setting up SVN

I'm not gonna explain how SVN works or the terms, this is just how to set it up. If you are not familiar with versioning and Subversion, read this book: Version Control with Subversion. It's free, available for download and contains probably everything you need to know about SVN. Be sure to learn the commands like commit, import, export, checkout, add, info, etc…

There are 2 ways for setting up SVN: as an Apache module or to use svnserve which is designed for SVN. As I already have Apache installed, the best solution is to use Apache for SVN. It's using a module called mod_dav_svn.

The setup presented here is very basic, it has no authentication and probably is insecure, but it's good for my needs on localhost.

The commands:

sudo apt-get install subversion
sudo a2enmod dav
sudo /etc/init.d/apache2 restart
sudo apt-get install libapache2-svn
sudo /etc/init.d/apache2 restart

Now we have all packages installed, only the configuration left.

First, I create a folder called svn under the var folder:

sudo mkdir /var/svn

Now I need to create a folder under the svn folder where all my repositories will be:

sudo svnadmin create /var/svn/repos

We use the svnadmin create command to create the repository; mkdir is not good for this.

Next, open up the httpd.conf file and add the following lines to it:

<Location /repos>
    DAV svn
    SVNPath /var/svn/repos
</Location>

I've seen people creating a new user and group for SVN. I think (I haven't looked into it detailed) that's for the authentication stuff. I did a much simpler thing: I added the ownership over /var/svn to www-data (Apache user):

sudo chown -R www-data /var/svn

This is probably a big security hole, but again: I use it only on localhost so I can live with that.

We are now ready to import a project into SVN, i.e. to add a project to the repository:

svn import -m "First import to SVN" /import/from/here/project file:///var/svn/repos/project/trunk

To start working on that project we need to checkout it:

svn checkout http://localhost/repos/project/trunk /var/www/project

Now the “project” is under SVN which should ease the development process. Since I'm using SVN I have no more backups of projects all over the place; if something goes wrong I know it's under SVN and I can revert to any older working version of my project.

Cheers!

TickTweet WordPress plug-in

published on November 21, 2008.

Few weeks ago @imjustcreative mentioned on Twitter that he would like a WordPress plug-in that would scroll (tick) tweets where “soultweet” is mentioned. As I wanted to do a plug-in for some time, but never had any good ideas, I told him that I'll take up the job. So I started to work on this in my free time.

Before I even started looking at anything, I decided that I want this plug-in to be fast, to work with smallest possible data to save bandwidth and to keep the number of calls towards Twitter low.

First I looked into the Twitter Search API documentation, to see how data can be retrieved from Twitter — in Atom or in JSON.

The first idea...

As a JSON document is smaller than an XML document, I decided to retrieve data in JSON. Of course, once retrieved it would be cached locally in a file for some time (5 minutes is my default).

I also wanted to avoid the possibility of the page waiting to retrieve the data from Twitter, so I figured that it would be the best to call it up with Ajax. That way, when the plug-in is called up, it sends an Ajax request to himself, the page continues loading normally and in the background runs the Ajax request.

The draft was there, I looked at the WordPress writing a plug-in page and in a week or so the first version of the plug-in was ready to go out.

I tested it locally on my Windows machine (a basic WAMP setup) and on my Ubuntu machine (a basic LAMP setup), on this server and on another one which has a ton of security limitations (server of my College). I was glad to see that it worked like a charm on all 4 servers. I put up a TickTweet page, and let it out in the wild through Twitter.

The retweet madness started immediately. @imjustcreative, @jonimueller and @bishop1073 downloaded it right away. Soon as they enabled the plug-in, the short and exciting life of TickTweet started to end. Errors, bugs… Joni's server is running on PHP 4, and I had a few PHP 5 only functions. My bad. On Graham's and Bishop's server who knows what went wrong. Graham helped me a lot tracing down the bugs, a few of them were found and squashed, but that was not enough. So I decided to pull back TickTweet, rethink it and possibly rewrite it.

The second idea...

OK, this JSON — Ajax thingy won't work. Back to the paper. I started looking at the WordPress core to see what functions and/or classes are available in it for this kind of task… Didn't took me long to find the fetch_rss() function. Man I was happy to find that! It's using the MagpieRSS and the Snoopy classes to retrieve the data. I figured, those are included in WP's core, they're gonna do the job just fine. So I've rewritten it.

Testing again. The College's server was dropped out right away, no way around that security. On others it worked fine. I tested for a couple of days just to make sure. When I thought it was OK, I've let it go once again. I contacted Joni, Graham and Bishop to tell them that the new rewritten version is out. On Joni's site it worked. Awesome. On Bishop's site worked. Kinda. On Graham's site didn't work. He tried it on another site. Worked. Cool. Finally it works. I was happy.

But not for long. The next day I saw that on my site it's ticking some ol’ tweets. What?! Then started the bug hunting again. I looked at each line of code, var_dumped every variable. No luck. Somehow, all of a sudden, my server is not getting the data from Twitter. No changes on the server configuration, no change in the code, but it just won't work.

The third idea...

The third idea is to leave this “plug-in” as—is, and to stop working on it. It just doesn't pay off. Sure, I could trace down where it hangs on my server, going backwards through the code, but it's just not worth it. Those who are interested in this plug-in, you can find it at the TickTweet page, use it, rewrite it, change it, trash it.

Cheers!

Robert Basic

Robert Basic

Software developer making web applications better.

Let's work together!

I would like to help you make your web application better.

Robert Basic © 2008 — 2020
Get the feed