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>

Comments

Post a Comment

Popular posts from this blog

AIOMgr: Preparing flush failed with VERR_NOT_SUPPORTED, disabling async flushes

AIOMgr: Preparing flush failed with VERR_NOT_SUPPORTED, disabling async flushes If you get error like this while Installing Windows 8.1 as guest OS using Oracle VirtualBox /VirtualMachine Then check your RAM Allocation for the Guest OS. Example: First time i gave 5120 (5 GB) of RAM for Guest OS. while installing i got the error like this in log file AIOMgr: Preparing flush failed with VERR_NOT_SUPPORTED , disabling async flushes. Now i changed the RAM size to 4096(4 GB) , now the error gone, the guest OS installed successfully. My Suggestion is to set RAM size in EVEN  for this kind of errors.
Read more

Create Virtual Host in IIS Server

Image
1)  Open Command Prompt using Administrative Rights 2)  Flush the cache of ARP (Address resolution protocol) a) C:\Windows\system32> netsh interface ip delete arpcache b) C:\Windows\system32> arp -a 3)  Open IE (Internet Explorer) a)  Open Internet Options window from settings b)  Click on Connections Tab -> Click on LAN Settings button c)  Uncheck all checkbox but make sure to check the "Bypass proxy server for local address." 4)  Open Hosts file from C:\Windows\System32\drivers\etc Folder (Make sure is it have write permission) It will look like this # localhost name resolution is handled within DNS itself. # 127.0.0.1       localhost # ::1                 localhost Add these lines at bottom of this file (You can add multiple names) 127.0.0.1 mysite.com 127.0.0.1 maheshbokkisam.com 5)  Now check is these virtual host/domain names are working a)  Go to Command Prompt and run this commands 5.a.1)  ping mysite.c
Read more

The model type is invalid. please select an item from the list ( ASP.Net MVC)

Image
Hi, If any one face this problem, hear is one solution While creating/Add controller for Entity Framework in Asp.Net MVC3 OR MVC4 Example: As per this website Controller name:  MoviesController . (This is the default. ) Template:  Controller with read/write actions and views, using Entity Framework . Model class:  Movie (MvcMovie.Models) . Data context class:  MovieDBContext (MvcMovie.Models) . Views:  Razor (CSHTML) . (The default.) when we click on " Add" Button the application show one alert message "The model type is invalid. please select an item from the list " Before adding MoviesController we need to  built the project before proceed to this step. Click on Run Button to built the project and now add controller with above steps. I hope you problem will be solved.
Read more