views/view.js
views/add.js
Last updated
Was this helpful?
Was this helpful?
<?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 {
$statement = $db->query('SELECT * FROM crud');
$statement->setFetchMode(PDO::FETCH_ASSOC);
echo json_encode($statement->fetchAll());
}
?><!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="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>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(),
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();
} );
}
});APP.crudIndexView = Backbone.View.extend({
template: _.template($('#indexTemplate').html()),
render: function () {
this.$el.html(
this.template({cruds: this.collection.toJSON()})
);
return this;
}
});APP.crudNewView = Backbone.View.extend({
template: _.template($('#formTemplate').html()),
events: {
"click button.save": "save",
},
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.$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()) {
this.collection.add(this.model);
}
if (this.model.save) {
console.log("Success");
} else {
console.log("No Success");
};
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();
$.ajax({
url: '../create/crud.php',
type: 'POST',
dataType: 'json',
data: {p: 'add',value: { id: id, name: nm, email: em, phone: hp, address: ad, active: at }},
})
.done(function() {
console.log("success");
})
.fail(function() {
console.log("error");
});
},
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});