Basic CRUD operations using php, mongodb and knockoutjs with validation

1) I used knockout simplegrid for table data with DELETE, EDIT action and pagination support

2) THE CRUD operations are using XHR/AJAX

3) I used Twitter Booststarp Framework.

You can Download/Fork from the github.com basics_of_php_mongodb_knockoutjs

Before trying this we need to install PHP, Apache webserver/Any HTTP server and MongoDB

second download mongodb.dll file (php mongodb driver) and keep this file extension if you are using windows OS.

These are JavaScript files required

<!-- Just for debugging purposes. Don't actually copy this line! -->

<!--[if lt IE 9]><script src="js/ie8-responsive-file-warning.js"></script><![endif]-->

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

<!--[if lt IE 9]>

 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

 <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

<![endif]-->

<script type="text/javascript" src="js/jquery-1.11.0.js"></script>

<script type="text/javascript" src="js/bootstrap.js"></script>

<script type="text/javascript" src="js/knockout-3.0.0.js"></script>

<script type="text/javascript" src="js/knockout.simpleGrid.3.0.js"></script>

These are the CSS files and Stylesheet required

<link href="" media="screen" rel="stylesheet" />

<!-- Bootstrap core CSS -->

<link href="css/bootstrap.css" rel="stylesheet">

<!-- Custom styles for this template -->

<style>

body {padding-top: 40px;padding-bottom: 40px;background-color: #eee;}

.form-signin {max-width: 330px;padding: 15px;margin: 0 auto;}

.form-signin .form-signin-heading, .form-signin .checkbox { margin-bottom: 10px; }

.form-signin .checkbox {font-weight: normal;}

.form-signin .form-control {position: relative;font-size: 16px;height: auto;padding: 10px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

.form-signin .form-control:focus {z-index: 2;}

.form-signin input[type="text"] {margin-bottom: -1px;border-bottom-left-radius: 0;border-bottom-right-radius: 0;}

.form-signin input[type="password"] {margin-bottom: 10px;border-top-left-radius: 0;border-top-right-radius: 0;}

/* KO Grid */

.ko-grid { margin-bottom: 1em; width: 100%; border: 1px solid silver; background-color:White; }

.ko-grid th { text-align:left; background-color: Black; color:White; }

.ko-grid td, th { padding: 0.4em; }

.ko-grid tr:nth-child(odd) { background-color: #DDD; }

.ko-grid-pageLinks { margin-bottom: 1em; }

.ko-grid-pageLinks a { padding: 0.5em; }

.ko-grid-pageLinks a.selected { background-color: Black; color: White; }

.liveExample { height:20em; overflow:auto } /* Mobile Safari reflows pages slowly, so fix the height to avoid the need for reflows */

li { list-style-type: disc; margin-left: 20px; }

.action-status{color:green;}

</style>