Integrating JS and PHP -- is there a better way?

Question

I'm trying to improve the ui of a PHP program by integrating custom JS objects. But, since neither language has any awareness of the other, my methodology feels kludgey and awkward.

Take the case of presenting some set of db records and some group of buttons for, e.g., hiding, deleting, editing, etc. them. PHP calls mysql and loads the dataset, and therefore is the one who knows the record ids. As part of formatting the records for eventual display, I create some <table> structure with appropriate ids of the form id="key_part'.$recid.'", HTML frames for the custom JS objects, etc, and calls of the form onclick="'.$jsobj.'.jsRoutine('.$recid.') ;" to the various JS routines.

Then I create the JS code to be aware of the various ids so that it knows how to make the correct HTML code hide, be visible, change color, grow hair, or whatever.

It's the problem of keeping those two different code bases in sync that bothers me, I think. I've always tried to avoid that for the obvious reasons.

Is there a better way that doesn't involve a learning-curve for third-party library ideosyncrasies, or have I basically hit the practical limit of integration already?

Thanks in advance for your constructive opinions!

Answer 1

I would explain on a practical example.

You'd said You have a bunch of records You want to edit, delete, hide, etc. I have done this many times: list a records into a table with the "action" column containing actions like open for editing, delete, hide/unhide, move up/down, move first/last...

Of course this all could be done only in a way of PHP and form submits or page redirects, but why not to do this much user-friendly an nice to manage the data? So I used AJAX and JSON and jQuery framework was my best friend to achieve what I will picture further.

So lets go around the problem:

• we have a data stored in a database (lets work with MySQL)
• we have a server side written in PHP (or have to write it)
• we have a frontend that will allow us to manage the data using jQuery (AJAX and JSON)
  • every action user takes will be sent to server (PHP) by AJAX request (jQuery), server will manage the action and respond back to frontend
  • also the data itself is retrieved and presented by jQuery

Data retrieval and presenting

This will be done by PHP querying the MySQL database. You will prepare method/action that will take parameters like offset and limit to query only concrete bunch of records.

Within a frontend an AJAX request will be sent to PHP to retrieve the records. Either PHP can return with complete HTML markup that You will append at the end of table or the HTML markup could be set within jQuery from the data in JSON format. The second approach is better i think.

You can create a column containing a checkbox (yep, all table can be in a form, buth this is not a must) which value will carry the record's ID. Then You will write down other rows containing the data You want to present and an "action" column containing links for special actions.

Managing actions and data paging

So we have a table with lets say 15 rows as default, first column with checkbox and record ID, data columns and action column.

User clicks on hide action of the third row - by jQuery you catch the click event and from that link You get the parent tr element. Then You find its first child - td from which You find the checkboxe's value - the record's ID. So we now know we want to hide the record with ID lets say 9. An AJAX request has to be done to the server that will manage the hide action (maybe just set some flag for that record within DB) and after success a response is sent back to frontend - this is the moment when You hide also the whole tr element (and all data within) or just change some icon presenting the hided/visible flag.

When deleteing, You also remove the tr element, when moving, You also move the tr element.

No redirects, no reloads, no submits.

This is just a context, the code and all the work is upon You. I just wanted to picture how this could be achieved using PHP + jQuery using JSON and AJAX.

Also this approach needs the javascript is tunred on but You still can write the application to be able to submit, redirect, reload when there is no javascript support...

Answer 2

You could try using one of the templating frameworks like Mustache, dust.js or Handlebars. That way you externalize and standardize your templates that you can share between PHP and JavaScript.