Build a Backbone.js Application with PHP

Last year like a lot of other developers I started to get excited about client-side Javascript frameworks.  Particularly interesting to me are frameworks that implement the concept of binding, where changes to your model objects will cause the view to update automatically.  To me it’s basically a little bit of magic that makes your web application seem alive as it responds to any changes made to the data.

Backbone.js is one such Javascript framework.  There’s many others, but I like Backbone because it doesn’t impose too much and allows you to pick and choose the parts that you like.  On the flip-side it can be tricky to figure out how to organize your project because there’s various ways to do any one thing.  As far as PHP, the challenge is that it doesn’t seem to be the most popular back-end language for use with Backbone.  There’s not a ton of info explaining how to organize your back-end PHP code.

I spent about two weeks really getting to know Backbone and then another 2 months integrating it into the latest Phreeze Builder.  You can use the builder utility to generate a PHP/Backbone app with just a few clicks (based on a MySQL database schema).  If you aren’t interested in the Phreeze framework, I happen to think that I’ve done a decent job of organizing a Backbone app into something that you can use as an example.  I’ve managed to implement things that I haven’t seen explained like pagination on collections.  For the UI I went with the ubiquitous Bootstrap from Twitter (using quite a lot of the user input controls), so the layout is fairly clean. I’m not 100% satisfied but I feel like it’s a good start.  The PHP part of the code is written using the Phreeze framework but essentially it’s just a standard REST API.  So again if you don’t really care for Phreeze, you can at least take a look to see how your own PHP code needs to be written to work with Backbone.

If you’re interested in using Backbone.js with PHP, I’d be interested in your feedback.  If you don’t want to install Phreeze you can just check out the video or play around with the Live Demo (the DB resets every hour so feel free to edit away).

36 Responses to “Build a Backbone.js Application with PHP”

  1. Morten May 26, 2012 at 10:08 am #

    This might be the framework I have been looking for :) Does it comes with any kind of I18N helper?

    Keep up the good work!

    • Jason May 26, 2012 at 11:06 am #

      Great! There isn’t anything in the framework as far as languages at the moment. But hopefully there’s nothing in there that makes it more difficult either. Phreeze is just starting to get out there so any help or feedback is definitely welcome.

    • Rich ORen April 17, 2013 at 1:33 pm #

      If you work a Template framework like Mustache or Handlebars you should be able to implement a I18n.

  2. sam May 27, 2012 at 6:25 pm #

    Look great, is there any plan to implement a file upload field? with image thumb would be amazing!

    • Jason May 27, 2012 at 10:25 pm #

      Yes I’d definitely like to do that. The only problem is that it’s not really possible to tell from the DB schema what field is an upload. Because usually you just store the path to the file as a varchar.

      But I definitely want a file upload field so I’m still thinking of a decent way to do that.

  3. lowformat May 29, 2012 at 1:58 am #

    i have been developing with phreeze in a localhost but when uploaded to a server it just wont work. not even phreeze it self to use the builder.
    yes i have check all the mysql conection

    • Jason August 30, 2012 at 11:26 pm #

      Sorry I didn’t see this comment until just know. It sounds like the server has some configuration that Phreeze doesn’t like. Could be an old version of PHP or some missing components. If you can get to the error logs and see what PHP is outputting then that would help to diagnose the problem.

  4. chris May 29, 2012 at 7:56 am #

    Nice demo there :) I’ve been messing with Backbone recently myself, so I’ll have to check it out and see how you’ve done it.

  5. David Reagan May 29, 2012 at 5:40 pm #

    How would I go about setting up authentication and access control in Phreezer?

    I see http://phreeze.com/docs/packages/verysimple::Authentication.html in the api docs. But I’m not sure where to start with it…

    • Jason May 29, 2012 at 11:55 pm #

      Hey David, Phreeze doesn’t really specify how you do the actual permission checking, but it does have some functionality for the controller to know whether or not a user is authenticated. The most simple way is to take your existing User or Account class and implement IAuthenticatable (which is just a couple of simple methods). You can check out phreeze/verysimple/Phreeze/AuthAccount.php for an advanced example. In the controller you can use SetCurrentUser() and GetCurrentUser() to store and retrieve the user object in the session.

      Once you have that implemented, I think the best place to put your authentication checking code is either in libs/Controller/AppBaseController.Init() (for app-wide authentication) or you can just add it to the Init function of the individual controllers that you want to be protected.

      Inside the Init method you could put code that looks something like this:

      if (!$this->GetCurrentUser()->IsAuthorized($permission)) throw new Exception(‘Not Authorized’);

      This assumes that somewhere else in the code you have a login page and on successful login you call SetCurrentUser($user) to store that user in the session. Then the controller will fire IsAuthorized on your User class and that gives you the oportunity to do your auth checking.

      I hope this makes sense, I really will be working on documentation for Phreeze, I have been getting a ton of messages about it!

  6. Kevin O July 3, 2012 at 6:33 pm #

    Great work! I’ve been evaluating this framework and so far I have this question:

    I used “builder” to create an app from my tables, but the foreign keys aren’t mapping. I’ve noticed that you have column prefixes in your sample. Can you explain why I’d need column prefixes and what best practices I should follow?

    Thanks!

    • Jason July 3, 2012 at 11:56 pm #

      Thanks Kevin, There’s no need to use a column prefix but if you do then Phreeze builder tries to take that into account to generate cleaner property names (ie you won’t have property names like $customer->C_FirstName). As far as other best practices, using all lower-case letters with underscores gives the best results. Phreeze will work with your schema either way, but the auto-generated class and property names will be prettier if you do it this way.

      As for the foreign keys, I’m not sure about that. Do you have the key constraints defined in your database? If you have a create scripts that you could share that has at least two of the tables with the relationship – I can take a look and see what’s going on.

      • Kevin O July 5, 2012 at 10:41 am #

        Thanks for the reply!

        I have screenshots and a snippet of SQL – here’s a link to get them:

        http://dl.dropbox.com/u/64020666/sample.zip

        Note that the foreign key relationships are not being pulled-in on the editor screen.

        Thoughts?

        • Jason August 30, 2012 at 11:27 pm #

          sorry for the long delay – I must have notifications turned off because I didn’t see the comment. I’ll check that out and see if I can reproduce it. thanks again!

          • Kevin O September 4, 2012 at 1:27 pm #

            Sorry to be a pain, but I’m nearing a window where I need to decide if I try Phreeze and knowing if the foreign keys will come over cleanly from my schema is huge. Any update would be great – thanks!!

  7. Seven August 30, 2012 at 8:24 pm #

    Love this one, great idea and awesome work! However, I stucked in “Analyze Database”, I entered the database info correctly but got a “404″ respond. Not sure what initial configuration needs to be done before running it. My phreeze is on a IIS server and the mysql database is in another server. Can you pls help? It will be great if you can provide some basic tutorial from the very beginning steps. Thanks a lot!

    • Jason August 30, 2012 at 11:24 pm #

      Hey Seven, right now Phreeze only runs on Apache, however it doesn’t need to be the case. The URL re-writing is what is causing the problem. Phreeze uses a .htaccess files to do URL re-writing and I know IIS doens’t support that out of the box.

      You may try installing http://www.helicontech.com/ape/ to see if that works if you are interested in doing that. Otherwise if you know of another way to configure URL re-writing in IIS, you can look at the .htaccess and see what’ it’s doing – it’s pretty basic.

      I would be glad to include instructions or config settings to allow Phreeze to run on IIS, but it’s going to require somebody who would be intersted in contributing to do that since I don’t have IIS available to me. If you have the time and desire to give it a try then I’d definitely be interested.

      Thanks!

      • Seven August 30, 2012 at 11:38 pm #

        Hi Jason, thanks for the clarification, we are moving to apache anyway so I wouldn’t bother too much on this for my current project. Thank you again for this amazing work.

  8. Seven August 30, 2012 at 10:52 pm #

    It will be great to have a download link of your demo project files because we couldn’t really study from your work since it’s at the backend. Thanks:)

    • Jason August 30, 2012 at 11:10 pm #

      Hey Seven, great idea – I’ll try to post that up next week. Thanks for checking out Phreeze!

      • Seven August 30, 2012 at 11:35 pm #

        Thanks for the reply Jason, looking forward to it:)

  9. Seven August 31, 2012 at 12:34 am #

    Hi, I made it to connect to the database, but got this error when generating the application: “file_put_contents(/Users/myname/Sites/phreeze/builder/temp/wrt504049c79da28): failed to open stream: Permission denied in smarty_internal_write_file.php at line 42″, any thought please? Thanks:)

    • Seven August 31, 2012 at 12:36 am #

      Already followed the steps of your other post on setting up apache/php/mysql in OS X mountain lion btw.

  10. Zane September 13, 2012 at 11:54 am #

    Do you know why when I go to the cases tab I get:

    json_encode() [function.json-encode]: Invalid UTF-8 sequence in argument in Controller.php at line 755

    I am running PHP 5.3.6 on MAMP

    • Jason September 14, 2012 at 10:58 pm #

      Hmm, it appears to be a character encoding issue with php’s json_encode function. What spoken language are you using? Could you go to line 755 in phreeze/libs/Phreeze/Controller.php and change it to:

      $output = @json_encode($obj);

      See if that gets rid of the warning?

      • Zane September 15, 2012 at 12:42 pm #

        That worked thank you. How do I go in and determine which row I want displayed? There are 20+ rows but I only need 3-4 displayed. Also, in the query I dont want it do display cases that have deleted=1

  11. David Reagan September 19, 2012 at 12:59 pm #

    So, where’s the best place to get help with Phreeze? Here? GitHub’s issue queue? Somewhere else?

  12. David Reagan September 19, 2012 at 3:13 pm #

    And now I have a real question.

    I have my app protected via something like this:

    AuthName “Login Required: please enter your L-number and Passphrase”
    AuthType Basic
    AuthBasicProvider ldap
    AuthzLDAPAuthoritative on
    AuthLDAPURL ldaps://hostname/ou=People,ou=Directory,o=IC
    AuthLDAPBindDN insertbinddn
    AuthLDAPBindPassword insertpassword
    Require ldap-user asdfsdf43ewf
    Require ldap-user asdfsadf
    Require ldap-user asdfsdf9
    Require ldap-user asdf4e

    When I log in, it gives me this error:

    Error connecting to database: Error connecting to database: Lost connection to MySQL server at ‘reading initial communication packet’, system error: 113

    I can connect to the mysql server via command line from my apps server. So it’s not the network.

    Also, when I try adding a row, it asks me to log in again multiple times, and then fails to save the new row.

    So, there’s something strange going on with how Phreeze is submitting requests, and how that interacts with the apache auth rules.

    Thoughts on fixing this?

  13. john ansome September 24, 2012 at 1:10 pm #

    Hello Jason.

    thank you very much for all this hard work, I am just trying to get started with your framework directly on my server – however I am having issues with the required files not being loaded correctly. I double checked the permissions but I found that some of the dependencies are simply not where the generated files expect them to be. I had to reset the base path on the builder and then had to locate each missing dependencies but fail to find the savant required dependencies…. Am I doing something wrong? or is my setup incorrect?

    Thanks.
    J

  14. Dale drake October 10, 2012 at 4:21 pm #

    Hi Jason, this is a really cool tool. I have learnt a ton playing with it. What I really need some help with is how to set up an select box on a form and then use the result as a filter for a collection. I have been reading the backbone documentation on filtering a collection but am stuck and could really use an example.

    Many Thanks
    D

  15. Avi Hayun December 28, 2012 at 1:47 am #

    Amazing tool!

    I love Phreeze.

    It became so easy to create an object driven (ORM) site which is based on a nice MVC style.

    Thanks.

    The main thing which is missing is a blog or something in which I could see when there is a new release of Phreeze, i truly want to stay updated.

    Thanks for everything – This is such a cool and easy PHP CRUD MVC ORM framework :-)

  16. Avi Hayun December 28, 2012 at 1:49 am #

    OK, a feature request:
    Bulk update of tables.

    I use Phreeze for DB update and view, currently, the tables allow me to update the data – one tuple in a time.

    Is there a way to add to the table view a “batch add” or something?
    Maybe CSV upload of data?

  17. Ursula March 22, 2013 at 4:36 pm #

    Do you know how to get phreeze to work on XAMPP???? I have attempted configuring the httpd.conf as indicated but i still get a 401 error. I have xampp 3.1

  18. Marcus July 7, 2013 at 5:01 pm #

    Jason, I’m running Pheeze on a max with Lion. After working through errors and configuration changes I can finally get to the place the generating code except I’m getting the error below. Any suggestions?
    file_put_contents(/Library/WebServer/Documents/phreeze/builder/temp/wrt51d9e1f82a95f3.30609088): failed to open stream: Permission denied in smarty_internal_write_file.php at line 42

    I could send the trace file if that helps.

  19. VInayak May 22, 2014 at 10:04 pm #

    From where can I download this application. I’m really interested to download this app and play around it.

    I like to explore in the Backbone pagination part of it.

    Can you please send me the zip of the entire Cargo system with sql.

  20. Maverick August 18, 2014 at 6:09 pm #

    Awesome ! and Thank You !

Leave a Reply

Please leave these two fields as-is: