Chức năng cập nhật dữ liệu http://localhost/create/#crud/1/edit (ok)

<?php
$db = new PDO('mysql:host=localhost;dbname=backbonejs', 'root', '');
$page = isset($_POST['p'])? $_POST['p'] : '';
if($page=='add'){
  $sql = "INSERT INTO crud values (:id,:nm,:em,:hp,:ad,:at)";
  $query = $db->prepare($sql);
  $POST = $_POST['value'];
  $query->execute(array(":id"=>null,":nm"=>$POST['name'],":em"=>$POST['email'],":hp"=>$POST['phone'],":ad"=>$POST['address'],":at"=>$POST['active']));
}else if($page=='edit'){
  $sql = "UPDATE crud SET name= :nm, email= :em, phone= :hp, address= :ad, active= :at WHERE id = :id";
  $query = $db->prepare($sql);
  $POST = $_POST['value'];
  $query->execute(array(":id"=>$POST['id'],":nm"=>$POST['name'],":em"=>$POST['email'],":hp"=>$POST['phone'],":ad"=>$POST['address'], ":at"=>$POST['active']));
}else {
  $statement = $db->query('SELECT * FROM crud');
  $statement->setFetchMode(PDO::FETCH_ASSOC);
  echo json_encode($statement->fetchAll());
}
?>

https://index.phpindex.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="views/view.js"></script>
<script src="views/add.js"></script>
<script src="views/edit.js"></script>
<script src="helpers.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>

https://models.jsmodels.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'
});

https://routers.jsrouters.js

window.APP = window.APP || {};
APP.crudRouter = Backbone.Router.extend({
	routes: {
		"crud/index": "index",
		"crud/new": "create",
		"crud/:id/edit": "edit",
	},
	$container: $('#primary-content'),
	initialize: function () {
		this.collection = new APP.crudCollection();
		this.collection.fetch({
			async: false
		});
		this.index();
		$(document).ready(function() {
			$('#list-cruds').DataTable();
		} );
		Backbone.history.start();
	},
	create: function () {
		var view = new APP.crudNewView({
			model: new APP.crudModel(),
			collection: this.collection,
		});
		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();
		} );
	},
	edit: function (id) {
		var view = new APP.crudEditView({
			model: this.collection.get(id)
		});
		this.$container.html(view.render().el);
	}
});

views/edit.js

APP.crudEditView = Backbone.View.extend({
  events: {
    "click button.save": "save"
  },
  template: _.template($('#formTemplate').html()),
  save: function (event) {
    event.preventDefault();
    var at = this.$el.find('input[name=active]').prop('checked');
    if (at) {
      at = 1;
    } else {
      at = 0;
    }
    this.model.set({
      id: this.model.id,
      name: this.$el.find('input[name=name]').val(),
      email: this.$el.find('input[name=email]').val(),
      phone: this.$el.find('input[name=phone]').val(),
      address: this.$el.find('textarea[name=address]').val(),
      active: at
    });
    if (this.model.isValid()) {
      var id = this.model.id;
      var nm = this.$el.find('input[name=name]').val();
      var em = this.$el.find('input[name=email]').val();
      var hp = this.$el.find('input[name=phone]').val();
      var ad = this.$el.find('textarea[name=address]').val();
    }
    $.ajax({
      url: '../create/crud.php',
      type: 'POST',
      dataType: 'json',
      data: {p: 'edit', value: { id: id, name: nm, email: em, phone: hp, address: ad, active: at }},
    })
    .done(function() {
      console.log("success");
      Backbone.history.navigate("crud/index", {trigger: true});
    })
    .fail(function() {
      console.log("error");
    });
  },
  render: function () {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});

PreviousLấy dữ liệu ra trang http://localhost/create/#crud/index (ok)Next========== End Backbonejs Php Mysql =============

Last updated 2 years ago