A summary of my comments:
Gradually integrating Backbone into an existing PHP website is
shooting yourself in the foot. Backbone shines when used correctly
within a single-page app feeding its data from a RESTful API.
What you would need is to make a REST API with PHP, exposing your data
from the server through different url endpoints used by backbone models
and collections. PHP can return anything, it's not limited to HTML, so
you could return JSON which javascript can easily parse.
How to use Backbone with PHP
The backend API
Here's a really simple PHP endpoint based on your code.
example_ajax.php
<?php
$query ="select id,username,message,useremail,date from contact";
$result = mysqli_query($query);
$rows = array();
while($r = mysqli_fetch_assoc($result)) {
$rows[] = $r;
}
// return the array as JSON so Backbone can automatically parse it.
print json_encode($rows);
See Creating a simple REST API in PHP
There are PHP frameworks that handle REST API for you, like:
The frontend data handling
Create a custom collection which binds to our newly created endpoint:
var ContactCollection = Backbone.Collection.extend({
url: "example_ajax.php",
});
The static template
And handle the HTML templating with Backbone views.
First prepare the HTML template, could be a static HTML on the server.
<table id="hor-minimalist-b" summary="Users List">
<thead>
<tr>
<th scope="col">User ID</th>
<th scope="col">User Name</th>
<th scope="col">User Message</th>
<th scope="col">User Email</th>
<th scope="col">Date</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script type="text/template" id="contact-template">
<td><%= id %></td>
<td><%= username %></td>
<td><%= message %></td>
<td><%= useremail %></td>
<td><%= date %></td>
</script>
Backbone views
Then the views:
var ContactView = Backbone.View.extend({
tagName: 'tr',
template: _.template($('#contact-template').html()),
initialize: function(options){
// optional, automatically remove the html of this row only.
this.listenTo(this.model, 'remove', this.remove);
},
render: function() {
this.$el.empty().append(this.template(this.model.toJSON()));
return this;
},
});
The list view below uses the ContactView as a child view.
var ContactListView = Backbone.View.extend({
el: "#hor-minimalist-b", // uses existing element in the page
initialize: function(options) {
// cache a jQuery element to use as a container for the child views.
this.$body = this.$('tbody');
// optional, automatically adds a new contact when the collection changes
this.listenTo(this.collection, 'add', this.renderContact);
},
render: function() {
this.$body.empty();
this.collection.each(this.renderContact, this);
return this; // always return this for chaining
},
renderContact: function(model) {
var view = new ContactView({ model: model });
this.$body.append(view.render().el);
},
});
How to use it
var collection = new ContactCollection(),
view = new ContactListView({ collection: collection });
view.render();
collection.fetch();
The .fetch() function makes a GET call to something like http://www.example.com/example_ajax.php, which should return an array.
Why an API? Why not send SQL queries from JavaScript?
JavaScript runs on the client side, which you should never trust. Instead, you expose specific endpoints on your server, which you can trust. This is why you need an API.
Sending SQL queries from javascript is a bad idea for several reasons:
- SQL Injection: Someone could fetch/change anything in your database (including stealing password, or nuking the database all together),
- It's an open door to your server,
- Lacks trusted validation, or it's harder to validate a SQL query string,
- Tight coupling, e.g. making it harder to share queries code between different client (mobile app, website, desktop app, etc)
It can be done, but it shouldn't.
phpMyAdmin is an example of an application which takes SQL written by the user and runs it as-is.
If it's in a controlled environment, like a local intranet, and you want to access MySQL from client-side JavaScript, you could write a php script which takes the body of a request and pass it directly to a MySQL database, returning the result as JSON.
For example, there's a lib named Squel.js which serve to build SQL query strings. They have a big red box on the frontpage which reads:
NOTE: It is recommended that you do NOT create queries browser-side to
run on the server as this massively increases your exposure to SQL Injection attacks.
Additionnal reading:
