Lấy dữ liệu ra trang http://localhost/create/#crud/index (ok)
PreviousChức năng thêm dữ liệu http://localhost/create/#crud/new (ok)NextChức năng cập nhật dữ liệu http://localhost/create/#crud/1/edit (ok)
Last updated
Advanced Javascript
Last updated
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CRUD BackboneJS PHP MySQL</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="page-header">
<h1>MY CRUD</h1>
</div>
<div class="panel panel-default">
<div class="panel-body" id="primary-content">
<!-- this is content -->
</div>
</div>
</div>
<!-- the index container -->
<script type="text/template" id="indexTemplate">
<a style="margin:10px 0px;" class="btn btn-large btn-info" href="#crud/new"><i class="fa fa-plus"></i> Create New Data</a>
<div id="collapseExample2">
<% if (_.isEmpty(cruds)){ %>
<div class="alert alert-warning">
<p>There are currently no cruds. Try creating some.</p>
</div>
<% } %>
<table id="list-cruds" class="table table-bordered table-striped">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
<th>Active</th>
<th width="140">Action</th>
</tr>
</thead>
<tbody>
<% var idx = 1 %>
<% _.each(cruds, function (crud) { %>
<tr>
<td><%= idx++ %></td>
<td><%= crud.name %></td>
<td><%= crud.email %></td>
<td><%= crud.phone %></td>
<td><%= crud.address %></td>
<% if (crud.active == 0) {%>
<td>Disable</td>
<% } else { %>
<td>Active</td>
<% } %>
<td class="text-center">
<a class="btn btn-xs btn-info" href="#crud/<%= crud.id %>/edit"><i class="fa fa-pencil"></i> Edit</a>
<a id="deleteButton" class="btn btn-xs btn-danger item-destroy" data-id="<%= crud.id %>"><i class="fa fa-trash"></i> Delete</a>
</td>
</tr>
<% }); %>
</tbody>
</table>
<a style="margin:10px 0px;" class="btn btn-large btn-info" href="#crud/index"> All</a>
<a style="margin:10px 0px;" class="btn btn-large btn-info" href="#crud/active"> Active</a>
<a style="margin:10px 0px;" class="btn btn-large btn-info" href="#crud/disable"> Disable</a>
</div>
</script>
<script type="text/jst" id="formTemplate">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="alert alert-danger fade in" style="display:none;"></div>
<form>
<h2><%= name %></h2>
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control" name="name" value="<%= name %>" />
</div>
<div class="form-group">
<label>Email:</label>
<input type="text" class="form-control" name="email" value="<%= email %>" />
</div>
<div class="form-group">
<label>Phone:</label>
<input type="text" class="form-control" name="phone" value="<%= phone %>" />
</div>
<div class="form-group">
<label>Address:</label>
<textarea class="form-control" rows="5" name="address"><%= address %></textarea>
</div>
<div class="form-group">
<label>Active:</label>
<% if(_.isEmpty(active) == true && active == 1) { %>
<input type="checkbox" name="active" value="1" checked>
<% } else { %>
<input type="checkbox" name="active" value="0">
<% } %>
</div>
<button class="save btn btn-large btn-info" type="submit">Save</button>
<a href="#crud/index" class="btn btn-large btn-default">Cancel</a>
</form>
</div>
</div>
</script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/backbone/underscore-min.js"></script>
<script src="assets/backbone/backbone-min.js"></script>
<script src="routers.js"></script>
<script src="models.js"></script>
<script src="helpers.js"></script>
<script src="views/add.js"></script>
<script src="views/view.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<script>
var app = new APP.crudRouter();
</script>
</body>
</html>APP.crudModel = Backbone.Model.extend({
defaults: {
name: "Lionel",
address: "Ha Nam",
email: "lionel@gmail.com",
phone: "0914748166",
id: 1,
active: 1
}
});
APP.crudCollection = Backbone.Collection.extend({
model: APP.crudModel,
url: 'crud.php'
});window.APP = window.APP || {};
APP.crudRouter = Backbone.Router.extend({
routes: {
"crud/index": "index",
"crud/new": "create",
},
$container: $('#primary-content'),
initialize: function () {
this.collection = new APP.crudCollection();
this.collection.fetch({
async: false
});
$(document).ready(function() {
$('#list-cruds').DataTable();
} );
Backbone.history.start();
},
create: function () {
var view = new APP.crudNewView({
model: new APP.crudModel()
});
this.$container.html(view.render().el);
},
index: function () {
var view = new APP.crudIndexView({
collection: this.collection
});
this.$container.html(view.render().el);
$(document).ready(function() {
$('#list-cruds').DataTable();
} );
}
});<?php
$db = new PDO('mysql:host=localhost;dbname=backbonejs', 'root', '');
$statement = $db->query('SELECT * FROM crud');
$statement->setFetchMode(PDO::FETCH_ASSOC);
echo json_encode($statement->fetchAll());
?>views/view.js
APP.crudIndexView = Backbone.View.extend({
template: _.template($('#indexTemplate').html()),
render: function () {
this.$el.html(
this.template({cruds: this.collection.toJSON()})
);
return this;
}
});views/add.js
APP.crudNewView = Backbone.View.extend({
template: _.template($('#formTemplate').html()),
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});