How to get started creating PHP web applications

By some accounts there are at least 5 million PHP developers in the world, each with a different skill level. But how did we all become PHP developers? Almost every PHPer has an interesting background story, and it is worth your time to investigate the back-stories of other PHPers you meet.

So lets say you want to become a PHPer and don’t know where to start. I’m here to help! Read on…

The first thing I’ll say is this: if you are coming to web development from a completely different background, even a non-technical background, hooray for you. I’m in the same boat. I’ve always loved computers and technology but I’m currently in my first and only true tech job in my career, and I’m in my mid 30s. What I’ve found is that the experiences you’ve had before give you context in terms of business processes and how the world of work works. That’s not to say a career programmer can’t gain that knowledge, but I think its harder.

I’ve always said this: I can learn the programming..there’s books and web articles out the wazoo to do so. Interpersonal and oral/written communications skills, business process knowledge, and policy level awareness aren’t so easy to learn, particularly if you’ve never been in the trenches of an organization doing the actual work that a web app is built to support. A web developer spends a lot of time translating client wants into actionable tasks, and you can’t do that with an abstract knowledge of what you can do with code.

PHP can be as simple or complex as you want it to be. To learn the language, you’re going to need a text editor of some kind (something better than NotePad), a PHP-enabled web server somewhere, and some time. Everything else you can get for free on the web. Oh, you’ll need time, of course.

When I started writing PHP, I already knew the basics of HTML. This is an essential piece, because HTML is the presentation language that results from your PHP scripts. So, if you lack basic HTML, you need to go back and pick that up first. There’s a billion HTML tutorials on the web to help you out. Learning HTML doesn’t require a PHP server, so you can write HTML files on your own computer and open them in your browser to view your work.

If you work for an organization that already has web servers that are PHP enabled, then you just need to get access so that you can place your PHP script files on the server in order to run/test them. If you’re learning on your own, you’re going to want to “rent” some web space. The host I recommend most highly is Asmallorange.com, they have personal hosting plans as cheap as $25/year, which would be fine for a small PHP beginner site.

You’re also going to need a text editor, preferrably one with syntax highlighting so you can understand your code better. I coded for nearly a year with plain old Notepad, and let me tell you that tracking down mistakes is a nightmare without syntax highlighting.

overview_thumb

Trellian CodePad

There are several good free IDEs (integrated development evnvironment) out there, but the simplest for beginners is probably CodePad by Trellian. Once you get good, you’re going to want something with more features, like Zend Studio, NetBeans or Komodo, but for beginners, Codepad has all that you need. For Mac users, I really love Coda by Panic, but the lack of inline error checking keeps me from using it as my primary IDE.

The next thing you’re going to need are some tutorials. I highly recommend this PHP/MySQL tutorial at freewebmasterhelp.com. This is the same tutorial I got started with, and will give you a basic understanding of how to use PHP with a MySQL database to create, edit and delete records.

The other thing I would recommend are books. Get lots of books on programming, even if you rarely use them. They are excellent reference materials and I find myself referring back to them over and over again.

51pqjvc7p5l_sl75_

Beginning PHP & MySQL

The best beginner’s PHP guide I found, and the one that helped launch my still-new career, is Beginning PHP and MySQL: From Novice to Professional, by W. Jason Gilmore. The book starts you out with the basic principles such as proper syntax, strings, arrays, etc. and works you up slowly. Even after you’ve mastered the concepts, the book is an excellent desk reference.

Hopefully there’s a newbie out there reading this that has benefited from my suggestions. Feel free to leave me a comment with your favorite beginner’s resources.

16 Tools for Prototyping and Wireframing

As someone who considers himself a developer first and a designer second, I’ve not previously put a lot of thought into using graphical tools (outside of HTML and my existing dev environment) to prototype front-end layouts for customers.

However, there are some major advantages to mocking up with a stand-alone tool. Once I have a business problem to solve, I will generally build the front end forms as I think they should exist, and demo them to the customer. There are two upsides, the customer sees exactly what he/she is getting, and once I start actual development, I’ve already coded the form template(s).

Another upside is that by hand-coding your prototypes, you are really forced to learn HTML, CSS, etc. on a nuts-and-bolts level.

The downside, however, is that this is quite time consuming, and if major changes are required from my original guess, then that’s even more time lost.

Over at Sitepoint.com, Gary Barber discusses 16 tools for prototyping and “wireframing”, which is just another, new, Web 2.0 word for building front-end mock ups. The prices on these various tools range from free to multiple thousands of dollars, and the platforms range from desktop to completely web based.

selected-home

Pencil

The most intriguing of these to me is Pencil, a free Firefox plugin (all platforms supported). My extremely raw first impression is that the tool is fairly rough around the edges, but for mockups you’re not looking for a ton of spit and polish (else customers start obsessing about the details.. “can this color be that color?”).

Finally, at the annual IBM Lotusphere conference this past January, I had the opportunity to sit in on a presentation by Chris Blatnik and Thomas Duff entitled “Getting to WOW… Interface First Design”. These guys had some impressive “out of the box” ideas about interface design, including color pallette selection and involving your your customer in the prototype process using simple construction paper, rulers, etc. Chris’s blog, Interface Matters, includes a wealth of related information for those wanting to become better interface designers.

PHP “market” demographics

Wonder how many PHP developers there are in your country? Are you curious as to the most popular browser among PHP developers? Manuel Lemos has a new blog post up at PHPclasses.org entitled “How Large Is the PHP Market?”, in which he delves into these questions and more.

Manuel uses a Zend estimate of 5 million for the total worldwide number of developers.  There is no documentation or methodology provided by Zend as to how that number was determined, but Manuel seems to think it is a reasonable estimate.  I disagree only to the extent I am not so quick to discard the notion this number could have been just pulled out of thin air.  For the sake of discussion, however, it is an adequate figure.

Also provided is a methodology you can use to extrapolate the number of PHP developers in your country.  In the U.S., for example, he estimates 637,000.  If you now feel much less unique and more easily replaceable, just remember that quality of work varies greatly and is your ticket to separating yourself from the herd.

In terms of development environments, the most suprising news is that 68% of PHP developers use Firefox as their development browser (myself included).  This is compared to a similar percentage of IE users in the general population.  Clearly this is due to Firefox’s superior developer tools and plugins, and probably to a somewhat lesser extent to Firefox’s standards compliance.  Why bang your head against the wall at the start of a project when you can wait until the end to do your IE validation?

There’s considerably more discussion in the article, so I encourage you to check it out if you’re interested in things like the percentage of web servers running Apache, or the number of Linux desktop users among PHP developers.

PHP templating with… well… PHP itself!

Have you avoided adopting a templating engine for your web applications because you are afraid of the learning curve? You’re not alone. I was in the same boat about a year ago.

But, as applications evolve and grow more complex over their lifecycle, separating presentation HTML and “presentation logic” from application logic becomes essential to being able to manage your code.

The hot template engine out there right now is Smarty. Although it is fairly simple to adopt and use, it does require the use of a Smarty-specific syntax for implementing logic (such as if statements, which are essential if you are going to show/hide content and/or controls based on user roles) in the template files themselves.

And although Smarty’s website touts the performance benefits, lets not kid ourselves. Smarty consumes server resources and even if its the fastest engine out there, its still going to slow down your application.

The alternative is to simply use PHP itself as your templating engine.

What’s that? You don’t understand what I mean? Do you remember back when you first starting coding PHP, and you jumbled up your PHP and HTML together into the same files? Remember embedding the good ole “” ? That’s the basic principle at work in templating with PHP.

Brian Lozier’s excellent Sitepoint.com article, Beyond the Template Engine, which is from way back in 2003 (I know, an eternity in web terms) discusses these issues in more detail. He also includes a detailed tutorial in the use of a PHP4 class he wrote for PHP-based templating.

I have used this class in my own applications and have found it to be excellent. The class is extremely simple and can be easily updated to PHP5 standards. He’s even included a caching method in the class, which can significantly boost application performance and reduce database calls (which is what generates most of your application’s server load).

Just for kicks, I added a method to Brian’s class to pull the templates from a database table (see below). If you’re building an application for mass distribution (like vBulletin or WordPress, etc.), this is how you would build a user-editable template system.

public function fetch_from_db($file) {
 
     extract($this->vars);  // extract vars to the local namespace
 
     $sql = " SELECT * FROM content WHERE Name = '$file' LIMIT 1 ";
     $result = mysql_query($sql) or die (mysql_error());
 
     if(mysql_num_rows($result) == 0) {
          $sql = " SELECT * FROM content WHERE Name = 'pagenotfound' LIMIT 1 "; 
          $result = mysql_query($sql) or die (mysql_error());
     } 
 
     $row = mysql_fetch_object($result);
 
     ob_start();
     eval("*>" . $row->Content . "<*"); // replace * with ? in your code
     $contents = ob_get_contents();
     ob_end_clean();
 
     return $contents;
 
}

Add cool, Apple-like reflections to your images

Cow’s Reflection.js allows you to add reflections to images on your webpages. It uses unobtrusive javascript to keep your code clean.

It works in all the major browsers – Internet Explorer 5.5+, Mozilla Firefox 1.5+, Safari, Google Chrome and Opera 9+. On older browsers, it’ll degrade and your visitors won’t notice a thing. Best of all, it’s under 5KB.

This is so simple its almost impossible to screw up.  Step 1) upload reflection.js to your file system. 2) Include in your HTML header using <script></script> tags, 3) add class=”reflect” to any image you want to have a reflection.

Here’s an example:

_0012_front_t

There is going to be a small performance hit as the script processes the image, so I wouldn’t recommend going crazy with this feature inside a web app.  However, for marquee images and static pages, this is a really slick “Web 2.0” addition to any website.  For those developing for a large IE6 installed base, I’d caution against extensive use of this script.  I’ve not tested it, but my guess is with Safari you’d never notice a performance impact.  With Firefox it should be fairly minimal and still worth the trade-off.

And yes, I’m also using this on this site.

PNG transparency fixes for IE6

If you’re a web developer, chances are you’ve grown to hate Internet Explorer 6 due to its inconsistencies with respect to CSS, JavaScript, and standards in general.  One additional annoyance is IE6’s lack of support for PNG transparency.

At my institution, we still have a very large installed base for IE6 (over 70% of our machines), so I cannot get around coding for IE6.  I’ve been able to avoid the issue in the past by just not using PNG images.  But at some point, GIFs won’t cut it, particularly in the realm of application icons (See Fam Fam Fam Silk icon set).

I have employed two separate approaches to address this problem.  The first is a JavaScript “PNG Fix” that the browser will apply to each image on the page.  Essentially the JS script will loop through every PNG, applying the “progid:DXImageTransform” function to each and thereby modifying the opacity.

There are several “fixes” written to do this, all very similar in function.  The one I like the most is from Daniel McDonald at Project Atomic.  Why do I like it?  Its simple (only 25 lines of code) and therefore quite fast.  If you have a lot of PNG files on your pages, you can sometimes see each file get transformed as the script slow-walks down the page.  Speed is of the utmost importance in any web application.  Just include the JS file, a “blank.gif” image, and include a couple of lines in your page header, and you’re done.

The second approach I’ve used to tackle PNG transparency issues in IE6 is really an outcome of the first.  The Project Atomic fix works great, unless your PNG is part of a CSS element such as a background image.

The real issue at hand is that IE6 doesn’t support 24-bit transparency.  It does, however, support 8-bit.  So why not change your 24-bit PNGs into 8-bit?  For an entire application, this could become a huge amount of work for very little value added, hence implementation of the Project Atomic fix. However, for those less common instances of PNGs as background images, I have followed Matthew Capewell’s tutorial to transform the 24-bit PNGs into IE6-compatible 8-bit images.

We’re stuck with IE6 for at least a few more years (When Microsoft finally stops providing XP to PC makers for new machines), good Web Developers should be able to deal with IE6 rather than just ignore it.

Note: The Project Atomic Fix is actually in-use on this site, in case you were wondering.

Fam Fam Fam Silk: Web Application Icons (Free!)

For those that haven’t already found this great set of application icons, I present to you the Fam Fam Fam “Silk” icon set. I’ve been using these for a couple of months and just love the modern look and the fact that over 700 icons means you’re certain to always find the icon you need from the pack.  This keeps your icon set consistent across your application.

From FamFamFam.com:

“Silk” is a smooth, free icon set, containing over 700 16-by-16 pixel icons in strokably-soft PNG format. Containing a large variety of icons, you’re sure to find something that tickles your fancy. And all for a low low price of $0.00. You can’t say fairer than that.

Icon sample: Empty drink glass Icon sample: Hourglass delete Icon sample: Green tag Icon sample: Expand sidebar Icon sample: Tile view Icon sample: Page Icon sample: PHP page Icon sample: Internet Explorer icon Icon sample: DVD Icon sample: Align left Icon sample: Bold text Icon sample: Numeric list Icon sample: Play button Icon sample: Soccer ball

Current version: 1.3.

Another great attribute to this icon set is the price.  Hey, when you work in an academic setting, “FREE” really gets your attention!  There are some licensing details, so I would encourage reading through the documentation once you’ve downloaded the zip file.

reCAPTCHA images aiding in book digitization

I was cruising the web tonight and ended up at reCAPTCHA.net, the image verification service run by Carnegie Mellon University.  They claim there are over 60 million reCAPTCHAs completed every day now, and they’ve launched a program now that essentially supplies the reCAPTCHA word images from various books that are currently not machine readable and therefore not available in digital format. A successful reCAPTCHA is a translation of two words into a digital form, and thus over time an entire book can be digitized.

I have to admit this is a pretty amazing concept. It would have never occurred to me to leverage the image verification process in order to harness the semi-unwitting cooperation of millions of us in what would otherwise be a completely monotonous, boring and thankless task of converting old books into digital format.

From their website:

To archive human knowledge and to make information more accessible to the world, multiple projects are currently digitizing physical books that were written before the computer age. The book pages are being photographically scanned, and then transformed into text using “Optical Character Recognition” (OCR). The transformation into text is useful because scanning a book produces images, which are difficult to store on small devices, expensive to download, and cannot be searched. The problem is that OCR is not perfect.

Example of OCR errors

reCAPTCHA improves the process of digitizing books by sending words that cannot be read by computers to the Web in the form of CAPTCHAs for humans to decipher. More specifically, each word that cannot be read correctly by OCR is placed on an image and used as a CAPTCHA. This is possible because most OCR programs alert you when a word cannot be read correctly.

Learn more about the book digitization project at http://recaptcha.net/learnmore.html