Navigation

Thực hiện chức năng crud add (ok)

<!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">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>CRUD BackboneJS PHP MySQL</title>
  <!-- Bootstrap -->
  <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">
  <style>
    .alert.fixed {
      position: fixed;
      top: 20px;
      left: 25%;
      width: 50%;
      margin-bottom: 0;
      box-shadow: 0px 0px 10px #454545;
    }
  </style>
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
<div class="modal fade" id="modalDelete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        Modal Confirm
      </div>
      <div class="modal-body">
        <div class="content"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <a href="#" id="delete" class="btn btn-success success">Delete</a>
      </div>
    </div>
  </div>
</div>
<div class="container">

  <div class="page-header">
    <h1>MY CRUD</h1>
  </div>
  <div id="message"></div>
  <div class="panel panel-default">
    <div class="panel-body" id="primary-content">
      <!-- this is content -->
    </div>
  </div>
  <button style="margin:10px 0;" class="btn btn-warning" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"><i class="fa fa-desktop"></i> Show Output JSON</button>
  <div class="collapse" id="collapseExample">
    <code id="output" style="display:block;white-space:pre-wrap;"></code>
  </div>
</div>
<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) == false && 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>

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

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="assets/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<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="assets/backbone/backbone.localStorage.js"></script>
<script src="assets/js/pubnub.min.js"></script>
<script src="bower_components/pubnub-backbone/backbone-pubnub.min.js"></script>
<script>
  var pubnub = PUBNUB.init({
    subscribe_key: 'sub-c-4c7f1748-ced1-11e2-a5be-02ee2ddab7fe',
    publish_key: 'pub-c-6dd9f234-e11e-4345-92c4-f723de52df70',
  });
</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/notification.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>
<?php
$db = new PDO('mysql:host=localhost;dbname=backbonejs', 'root', '');
$page = isset($_GET['p'])? $_GET['p'] : '';
if($page=='add'){
  $sql = "INSERT INTO crud values (:id,:nm,:em,:hp,:ad,:at)";
  $query = $db->prepare($sql);
  $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);
  $query->execute(array(":id"=>$_POST['id'],":nm"=>$_POST['name'],":em"=>$_POST['email'],":hp"=>$_POST['phone'],":ad"=>$_POST['address'], ":at"=>$_POST['active']));
} else if($page=='trash'){
  $sql = "DELETE FROM crud WHERE id = :id";
  $query = $db->prepare($sql);
  $query->execute(array(":id"=>$_POST['id']));
} else if($page=='item'){
  $statement = $db->query("SELECT * FROM crud WHERE id = ".$_GET['id']);
  $statement->setFetchMode(PDO::FETCH_ASSOC);
  echo json_encode($statement->fetch());
} else{
  $statement = $db->query('SELECT * FROM crud');
  $statement->setFetchMode(PDO::FETCH_ASSOC);
  echo json_encode($statement->fetchAll());
}
?>

views/notification.js

"use strict";

APP.AlertView = Backbone.View.extend({

    tagName: "div",

    className: "alert fade",

    template: ["<a href=\"#\" data-dismiss=\"alert\" class=\"close\">&times;</a>", "<strong><%= title %></strong>", "<%= message %>"].join("\n"),

    initialize: function (options) {

        _.bindAll(this, "render", "remove");

        this.template = _.template(this.template);

        if (options) {
            this.alert = options.alert || "info";
            this.title = options.title || "";
            this.message = options.message || "";
            this.fixed = options.fixed || false;
        }

    },

    render: function () {
        var that = this,
            output = this.template({title: this.title, message: this.message});

        this.$el.addClass("alert-" + this.alert).html(output).alert();

        if (this.fixed) {
            this.$el.addClass("fixed");
        }

        window.setTimeout(function () {
            that.$el.addClass("in");
        }, 20);

        return this;
    },

    remove: function () {
        var that = this;

        this.$el.removeClass("in");

        window.setTimeout(function () {
            that.$el.remove();
        }, 1000);
    }
});

APP.AlertView.show = function (title, message, alertType) {
    var alert = new APP.AlertView({
        alert: alertType,
        title: title,
        message: message,
        fixed: true
    });

    $(document.body).append(alert.render().el);

    window.setTimeout(function () {
        alert.remove();
    }, 9000);

    return alert;
};

views/add.js

"use strict";

APP.crudNewView = Backbone.View.extend({
  // functions to fire on events
  // here we are blocking the submission of the form, and handling it ourself
  events: {
    "click button.save": "save",
    "keyup input": "validate",
    "keyup textarea": "validate"
  },
  
  template: _.template($('#formTemplate').html()),

  initialize: function (options) {
    this.model.bind('invalid', APP.helpers.showErrors, APP.helpers);
  },

  save: function (event) {
    event.stopPropagation();
    event.preventDefault();
    var at = this.$el.find('input[name=active]').prop('checked');
    if (at) {
        at = 1;
    } else {
        at = 0;
    }

    // update our model with values from the form
    this.model.set({
      id: this.$el.find('input[name=id]').val(),
      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()) {
      // save it
      this.collection.add(this.model);
      if (this.model.save) {
          new APP.AlertView.show("CRUD", "Created Success", "success");
      } else {
          new APP.AlertView.show("Error", "can not be created", "danger");
      }
      var id = this.$el.find('input[name=id]').val();
      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();
      $.post("crud.php?p=add", { id: id, name: nm, email: em, phone: hp, address: ad, active: at } , function(data){
        Backbone.history.navigate("crud/index", {trigger: true});
      });
    }
  },

  // populate the html to the dom
  render: function () {
    this.$el.html(
    	this.template(this.model.toJSON())
    );
    return this;
  }
});

Source

C:\xampp\htdocs\gulp

PreviousXây dựng giao diện (ok)NextPhân tích để tạo giao diên http://localhost/gulp/#crud/new 1.0

Last updated

Navigation

Lionel

@Copyright 2023