Developing PHP on Mac

The course is over, and I want to start thinking about professional development.

So many options. I want to have a development environment that

• is pleasant to use as an editor
• includes a syntax highlighter for several languages
  
• in particular, supports HTML, CSS, Javascript, PHP
• context sensitive help - gives me the documentation for functions I'm trying to use
  
• auto-completion of names of functions as I type
  
• has integrated source code control
• integrated solution for copying the programs to wherever they run from
  
• has a debugger which allows stepping through the running program and inspecting and setting values of variables
  

Have been trying to learn how to use the Eclipse package for PHP. Eclipse was an offering that IBM made to the public domain in expectation of getting lots of plug-ins developed for free by others. This indeed happened, and then some. Eclipse was a Java developer's tool originally but there's a whole industry out there of Eclipse plug-in manufacturers, and people who build entire apps on top of this expandable platform. The first apps were all development tools, but increasingly companies are using the tool to build their own applications in. Because it basically has great window management (screen real estate controls) and great inter-process communication for the apps that run within it.

So, downloading Eclipse for PHP from eclipse.org and installing was straightforward. Worked both on my Mac and on a Windows XP machine. I stopped tinkering with the Windows version though.

I wanted "grown-up" source code control, which for some reason equates in my mind to Perforce rather than Subversion or CVS. Downloading Perforce and installing was very simple, it runs like a charm and its user interface is quite simple to use once you understand its basic terms (requires reading a few pages of their intro documents). Getting Perforce's eclipse plug-in was simple too. Installing it in to my Eclipse was also simple. Then I got stuck on something basic. It took me a couple of extra cycles to find Perforce's documentation on how to arrange the relationship between Perforce's workspace and Eclipse's workspace. Now that it's done and configured (Eclipse's must contain Perforce's), checking files in and out using Eclipse and without using the Perforce UI is a breeze.

I like Perforce's tools for visual comparison of versions of a file, but interestingly, Eclipse has a similar tool for the versions of a file it remembers in its memory (a very nifty trick, better than Notepad++'s also infinite undo memory because it remembers the save points and shows you a visual comparison). If I were thinking about setting up a business with many programmers, would I use Perforce? Not sure. It's a little pricey beyond the first couple of users (which are free). CVS while ancient works reasonably well. I've seen Subversion used in serious commercial applications, and it's of course popular in the Open Source world. I'm glad I made the effort with Perforce, but either CVS or its more modern successor SVN would be just fine.

After solving the source code problem I went on to find out how to FTP files without exiting Eclipse. This took a little research. In the end I found a plug-in from Aptana Software which does this well. However when I downloaded and installed it, I took everything else that Aptana makes. So my Eclipse is now carrying around a lot of Aptana in its belly, and there are cases where Aptana wants to let me know it wants to help me, e.g. when I want to edit a file with a suffix of .sql. I can turn the pesky thing off, but Aptana is beckoning that I check it out. Maybe I should.

Why did I care about ftp? Because that's how we were working - uploading our files to a Unix server that had Apache and PHP installed. So once ftp was figured out I discovered I don't care. My Mac (vanilla imac running OS 10.6 - Snow Leopard) has a pretty recent php installed on it (5.3.1) and Apache. I downloaded mysql, a very simple undertaking, installed it, and suddenly my desktop has everything on it. Ah yes, also downloaded and installed the most recent version of phpmyadmin and installed it. Setting it up is a little tricky in my opinion, there's a step where you have to issue some Unix commands from its command line. I'm comfortable with this but not everyone is.

Somewhere along the line I realized that Apple's PHP doesn't have an extension that phpmyadmin prefers having, which is the ability to encrypt some communications (it's called mcrypt). Getting it added to PHP required downloading a lot of source code (both libmcrypt and PHP itself) but installing just a little bit of it. And looking at the php.ini file for the first time - minor changed need to be made to add an extension. There's surprisingly little documentation about this anywhere, but there are some kind souls on the Internet that figured it out and explain all. Took me longer than expected to *follow* the instructions, I'm not good at following instructions. Once I forced myself to do so, it was trivial. And once that was done, I read phpmyadmin's documentation and discovered that I could have simply turned off the pesky warning message that prompted this whole voyage. But this wasn't a total loss by any means, I learned a few important things on the way.

There's a very powerful tool out there for working with MySQL, it's called mySQL Workbench. It has a combination of database management and database modeling features. A project I'm working on, in a very nascent state, is heavy on data and has many tables. The exact relationships are numerous and lend themselves to be described in database terms of "foreign keys". The workbench tool allows you to lay out all your tables in a diagram, that includes a visual representation of these relationships. And then it allows you to "Forward Engineer" your diagrams in to the database itself - it creates all the tables, indexes and whatever other database objects you modeled. It also knows how to "Reverse Engineer" a physical database in to a model diagram. Modeling tools that I'm familiar with from the commercial world are incredibly expensive. I was blown away by how powerful this tool is. Caveat: it has bugs and crashes now and then (it's not officially "released" yet). There are some older tools from the same source that are less functional but more stable. I'm sticking with this one (and saving frequently:-)

Yesterday I stopped and asked myself why I've been barreling down the Eclipse route, and googled the topic of free integrated development environments for PHP. The search yields an actual comparison which was helpful. It reminded me that the once-great company Sun, (founders of which are probably the reason I'm a computer guy in the first place) knows one or things about development too. Now they work for Oracle. And MySQL went with them to Oracle. So should I be looking at their "Netbeans"?

Yes. Downloaded. While I didn't follow their prescription of downloading a complete "MAMP" environment (Apache, MySQL and PHP for Macintosh), and instead added missing bits to the installation I already have (Apple's own installation of Apache and PHP, plus my installation of MySQL), what I ended up with seems to be complete. The missing bit, the reason I decided to look around, was a debugger. And what I've installed is "xdebug", an extension to PHP that can be talked to by Netbeans. Here incidentally the investment in understanding how to install mcrypt paid off because xdebug's installation instructions aren't great (understatement) and mcrypt's are relevant.

Netbeans is quite cool. I've invested a fraction of the time to learn it than I did with Eclipse but it seems simpler across the board. Eclipse also has some kind of interoperability with xdebug, I hope to figure that out next. Netbeans sort of works out of the box and is very satisfying as such. Oddly Perforce doesn't have a plug in for Netbeans, but does for a whole bunch of lesser used tools. Most people I know use Eclipse (because they are Java programmers and it's popular in that world). I'll have to make a decision soon.

And get off this tools tangent and back to the project I want to write.

Final Project - Going Ape

The live site is here: http://goingape.info, the development site is here: http://onepotcooking.com/yanivhakohen/finalproject/site/

During class today I was reading off these notes: http://onepotcooking.com/yanivhakohen/class12/final_project_notes.pdf

Handmade Blog

http://onepotcooking.com/yanivhakohen/class09/blog/

Combined assignment for classes 7 through 10. A blog with user accounts, which allows upload of multiple photos per post.

The log-in operation done in Ajax, with the page speaking to a back end using JSON, sort of. (The data is JSON format, but I suspect there are better ways to parse it than the one I used).

When you go to the site, you can see the posts, but you need to be logged in to post your own. There's a "register" link that puts you in registration mode, again Ajax. This was a mistake as it made the code overly complicated for almost zero visual gain. Will be smarter next time.

Registration involves providing a name and email address. The address is verified as belonging to you via a message that you receive (sent from "Handmade Blogmeister"), that includes a link that you need to follow, which upon doing so "confirms" the account. At this point you can use your email (which is the login ID) and password to log in and start posting.

Logging in is Ajax style, i.e. you are looking at the page, and after successfully logging in the login area transforms in to a posting area via some basic jquery. I dropped most of the animations I was playing with because they're not really as portable as the documentation claims them to be.

If you forget your password (you log in with a bad password), it asks you if you want a reminder, in the form of a link on the page. If you click it your password is mailed to you. I despise sites that do this, because it means that they store my password in clear-text, a very very bad practice. But this was just an exercise. The right way is to one-way encrypt the password with an MD5 style encryption; and to offer other mechanisms for self-service password resets. That's a whole separate exercise which I think I'll do ... some other time :-)

There's actually a lot of examples out there on how to do logging-in with Ajax, including very nifty visual and behind-the-scenes stuff. The challenge is understanding what's good and what isn't, not to mention what works and what doesn't. And I'm realizing that I very barely know Javascript and that it's a big and powerful language.

I dipped my toe in server-side image handling. I inquire for dimensions of the photos and normalize their display on the blog to 100 pixels high, so they fall in to neat rows. I didn't generate thumbnails, which would be the obvious thing to do next.

I called the site "Handmade Blog", after the name of the font in the banner, Handserif from dafont.com. The font's concept resonated with me: what I like about this course is that, freed from commercial imperative (the need to do things quickly), we are urged to build things from scratch, from basic ingredients, hand-made, and understand how they work. As we wind down this course, I feel I owe a big thank-you to Amos and Jack.

It's here, and I'd love if you checked it out. Opening an "account" is quick and easy and it would be cool if you actually uploaded a photo of yourself - I'd love to be able to keep in touch!

__autoload() class files

PHP class files can be automatically loaded thus:

http://php.net/manual/en/language.oop5.autoload.php

Going Ape

Going Ape is this year's theme for Friends Seminary's annual "Spring Fair", a day of games / rummage sale / food / bands / special Raptor exhibit / photography, that will be held on May 8th. I'm the co-organizer of this event. The event is popular with kids, and helps raise (not very much :-) funds for Friends Seminary, a Quaker school that my daughter used to go to. I'm still involved with the school though.

In years past, our biggest challenge was to get people to volunteer for work that needs to be done before and during the event. For years we've been aching for an online system that will make it easy to keep tally of who volunteered for what, and to do so in a public enough fashion so that people will find it compelling to follow those that have gone before.

The course provided an opportunity to try to build something like this, and GoingApe.info is the result. I bought the domain name last Friday for $1.07 (that includes tax). Hosting of course was a little more expensive, but it's surprisingly cheap too! I followed Amos's example and put it up on dreamhost.com. While I'm no expert in commercial web hosting, I'm amazed by how feature-rich their solution is, while still costing in absolute terms, very little. As an ex-Unix system administrator I'm impressed by what they provide.

So GoingApe.info is about to go live, at which time it will be announced to 600 families. The objective is to get as many parent volunteers as possible, while minimizing the pain of signing up online.

The source code, and a working copy, are in http://onepotcooking.com/yanivhakohen/goingape/.

The two versions differ only in the contents of definitions.php - user IDs, names of databases etc; and mild editing I had to do to the CREATE.sql file which came from my own environment (it was created using the Export function on mysqlphpadmin) and was used to load database definitions in to the one on onepotcooking.com. Otherwise the apps are identical.

I think I'm the world's worst graphic designer, but I get by with a little help from my friends ... the background images (each page has its own) were given to me by Eli Kuslansky of Unified Field. He also did the poster which is on the front page. He doesn't like my using GIFs for the navigation - while you can make them transparent, they lack basic capabilities from a graphic designer's perspective. I never knew...

The "map" is something I did with powerpoint a year ago.

The guts of the system is the Volunteer page. It went through several iterations until I finally understood (I hope) the difference between margins and padding.

An important goal was to make this easy to use, and in particular, not to require that people open "accounts". The solution depends heavily on email. People who sign up are sent a confirmation request in email. They click a link in the email which takes them back to the site. Unconfirmed records represent spam-bot hits, which we ignore. In a future version I want to add CAPTCHA technology to make it much harder to be exposed to spam-bots.

Another feature that depends on mail is a "download" feature intended for use by the "business owner" of the site. When he goes to the download.php page, it does practically nothing except tell him to sit tight and wait for mail. The mail he receives contains a link back to the site which invokes download of a CSV file, which on goes straight in to Excel on his computer.

The app has some ugly PHP code that I now regret, specifically how I ab-use arrays. Initially I was excited about how flexible PHP's associative arrays can be, something I took advantage of when I did the original file-based version of the site a week ago. When I moved the site to SQL this week, I tried to make sure the SQL code was elegant (data.php), but I didn't give up some of the over-complicated use of arrays. That code isn't too readable unfortunately.

At Amos's suggestion, I'm using "jQuery validate" to do input validation before sending stuff to the server. It's so easy to use it in a basic fashion. But now that I want to add something trivial to a new page I'm trying to write - the ability to check that the email addresses that are entered all end with @friendseminary.org, I find I need to actually read the instructions, ah well. Anyhow, I realize there's a huge universe of interesting plug-ins out there. I want something that knows how to pop-up a small div with text when I hover over certain fields for instance. Any pointers?

A lot of the work had to do with giving it production and debugging features, such as logging; mails that get sent to me when people volunteer, and if they experience errors. I made a conscious decision to expose users to possibly ugly error messages if they happen in a true exception situation (e.g. database server refuses to be connected to). In an application intended for broader use I wouldn't do this, but this app targets no more than 600 families. The production version of the site actually pops up a Javascript alert with my name and number on it urging people to call in.

I also tried to code for error conditions - do something sane on the user interface when an expected error occurs on the server. I used database constraints to stop duplicates of records being created in one condition (when a user hits reload on the page that creates a record - signup.php), and made the system respond with a reasonable message to the user.

Everything seems to work reasonably well on Mac and PC, with EI, Firefox and Safari, but IE is the most irritating - the screen flickers when going from page to page, even after the background images are comfortably in cache. I don't know where it's coming from - a difference in jQuery implementation?


Would love to get feedback - all and any suggestions or criticisms welcome. Thanks.

Class 7 Extra Assignment

This is a little more than was requested.

PHP's functions for file manipulation look like a superset of those you find in the standard C programming language. The extra functions are extremely useful.

But most of the work here is experimentation with the object oriented aspects of PHP. I was trying to figure out models of use of inheritance relative to the structure of pages. Was also curious about the degree to which PHP's object syntax and semantics are similar to C++, Java and C# (it's not so bad but has some gaps I think).

I settled on this notion: All HTML pages derive from a base class (BasicPage) that knows how to create the fundamental HTML and head/body structures.

A given site - one that shares banners, navigation, breadcrumbs, footers and what-not, has a class derived from BasicPage called SitePage that knows how to do all of that stuff for that site. It's an "abstract" class, i.e. you can't instantiate it, and have to derive from it to make it do something.

The last derivation, in my case "ProductsPage", knows how to draw the pesky matrix of products with their images and descriptions, and uses its parent class to do the rest.

The file index.php simply instantiates a ProductsPage and displays it.

One of things I like a lot about jQuery is that it smooths out differences between IE and the rest of the browser world. In particular, opaqueness is dealt with correctly and so I could achieve descriptions behind which you can still see a lighter version of the image.

It's here: http://onepotcooking.com/yanivhakohen/class07/file-based-data/

Class 7 In-Class Assignment

here: http://onepotcooking.com/yanivhakohen/class07/in-class-assignment

Class 6 Tic Tac Toe

here: http://onepotcooking.com/yanivhakohen/class06/tictactoe

Class 6 In-Class Assignment

http://onepotcooking.com//yanivhakohen/class06/class_assignment

Class 5 Homework Assignment

here: http://onepotcooking.com/yanivhakohen/class05/homework

Class 5 In-Class Assignment

here: http://onepotcooking.com/yanivhakohen/class05/in-class-assignment

Events that can trigger a JavaScript...

are listed in the w3schools HTML reference, (and not JavaScript reference,) here.

Class 4 Homework Assignment

BlackBook


MTV

Questions about class 4 assignment 1

The Submit button doesn't look like Georgia or Arial. What is it?

The down-arrow image for the dropdown - is that a property that can be controlled? I can't find a reference to it anywhere.

Class 3 Homework Assignment

This was a lot more work than I expected. Two pages implemented, the home page and the "contact" page.

I can't get the image in the white div on the contact page to center itself, anyone have any idea how to do this?

It's here.

Class 3 In-Class Assignment #3

click here

Class 3 In-Class Assignment #2

click here

Class 3 In-Class Assignment #1

click here

Class 2 In-Class Assignment

Class assignment

Restaurant Info Architecture

Navigation is minimal - using tabs at top of page below banner.
The restaurant's Menu is on every page - focus on food.
When mouse hovers over name of dish, a photo of it pops up next to cursor.

I'd like to have a click-to-chat or click-to-talk option here. Most computers have microphones.

Photos use Hulu style navigation by clicking the arrows or the photos on the bottom.


I got lazy here. Imagine two scrollable lists of text and photos describing special services.

I can blog!

Scary. Everyone can see.