Tuesday, December 24, 2013

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>