# Lấy dữ liệu ra trang http://localhost/create/#crud/index (ok)

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MfTOvQv6o5XPCTli5jT%2F-MfTV1rleK6QikLcEw1Q%2FScreenshot_1.jpg?alt=media\&token=e23a8715-3266-4c9a-b090-04b1e591e790)

{% file src="https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-Mguwms6tqy_VDJJNR1v%2F-Mgv88hBO8943xmGHJ2w%2Fbackbonejs.sql?alt=media&token=02ca3005-3668-47e2-950e-b6e48ded6303" %}

{% embed url="https://index.php" %}

```
<!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>
```

{% embed url="https://models.js" %}

```
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'
});
```

{% embed url="https://routers.js" %}

```
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();
		} );
	}
});
```

{% embed url="https://crud.php" %}

```
<?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;
  }
});
```

