├── .gitignore
├── README.md
├── api
    ├── .htaccess
    ├── composer.json
    └── index.php
├── assets
    ├── js
    │   └── app.js
    └── tpl
    │   ├── add-new.html
    │   ├── edit.html
    │   └── lists.html
├── index.html
└── users.sql


/.gitignore:
--------------------------------------------------------------------------------
1 | api/composer.lock
2 | 
3 | api/vendor/
4 | api/vendor/*


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Angular Crud
2 | ======================
3 | 
4 | A small CRUD application using AngularJS and Slim PHP framework.
5 | 
6 | Requirements:
7 |   * <a href="http://angularjs.org/">AngularJS</a>
8 |   * <a href="http://www.slimframework.com/">Slim Framework</a>


--------------------------------------------------------------------------------
/api/.htaccess:
--------------------------------------------------------------------------------
 1 | RewriteEngine On
 2 | 
 3 | # Some hosts may require you to use the `RewriteBase` directive.
 4 | # If you need to use the `RewriteBase` directive, it should be the
 5 | # absolute physical path to the directory that contains this htaccess file.
 6 | #
 7 | # RewriteBase /
 8 | 
 9 | RewriteCond %{REQUEST_FILENAME} !-f
10 | RewriteRule ^(.*)$ index.php [QSA,L]


--------------------------------------------------------------------------------
/api/composer.json:
--------------------------------------------------------------------------------
1 | {
2 |     "require": {
3 |         "slim/slim": "^2.6"
4 |     }
5 | }
6 | 


--------------------------------------------------------------------------------
/api/index.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | require 'vendor/autoload.php';
  4 | 
  5 | $app = new \Slim\Slim();
  6 | $app->get('/users', 'getUsers');
  7 | $app->get('/users/:id', 'getUser');
  8 | $app->post('/add_user', 'addUser');
  9 | $app->put('/users/:id', 'updateUser');
 10 | $app->delete('/users/:id', 'deleteUser');
 11 | 
 12 | 
 13 | $app->run();
 14 | 
 15 | function getUsers() {
 16 | 	$sql = "select * FROM users ORDER BY id";
 17 | 	try {
 18 | 		$db = getConnection();
 19 | 		$stmt = $db->query($sql);  
 20 | 		$wines = $stmt->fetchAll(PDO::FETCH_OBJ);
 21 | 		$db = null;
 22 | 		echo json_encode($wines);
 23 | 	} catch(PDOException $e) {
 24 | 		echo '{"error":{"text":'. $e->getMessage() .'}}'; 
 25 | 	}
 26 | }
 27 | 
 28 | function getUser($id) {
 29 | 	$sql = "select * FROM users WHERE id=".$id." ORDER BY id";
 30 | 	try {
 31 | 		$db = getConnection();
 32 | 		$stmt = $db->query($sql);  
 33 | 		$wines = $stmt->fetchAll(PDO::FETCH_OBJ);
 34 | 		$db = null;
 35 | 		echo json_encode($wines);
 36 | 	} catch(PDOException $e) {
 37 | 		echo '{"error":{"text":'. $e->getMessage() .'}}'; 
 38 | 	}
 39 | }
 40 | 
 41 | function addUser() {
 42 | 	$request = Slim::getInstance()->request();
 43 | 	$user = json_decode($request->getBody());
 44 | 	$sql = "INSERT INTO users (username, first_name, last_name, address) VALUES (:username, :first_name, :last_name, :address)";
 45 | 	try {
 46 | 		$db = getConnection();
 47 | 		$stmt = $db->prepare($sql);  
 48 | 		$stmt->bindParam("username", $user->username);
 49 | 		$stmt->bindParam("first_name", $user->first_name);
 50 | 		$stmt->bindParam("last_name", $user->last_name);
 51 | 		$stmt->bindParam("address", $user->address);
 52 | 		$stmt->execute();
 53 | 		$user->id = $db->lastInsertId();
 54 | 		$db = null;
 55 | 		echo json_encode($user); 
 56 | 	} catch(PDOException $e) {
 57 | 		echo '{"error":{"text":'. $e->getMessage() .'}}'; 
 58 | 	}
 59 | }
 60 | 
 61 | function updateUser($id) {
 62 | 	$request = Slim::getInstance()->request();
 63 | 	$user = json_decode($request->getBody());
 64 | 	$sql = "UPDATE users SET username=:username, first_name=:first_name, last_name=:last_name, address=:address WHERE id=:id";
 65 | 	try {
 66 | 		$db = getConnection();
 67 | 		$stmt = $db->prepare($sql);  
 68 | 		$stmt->bindParam("username", $user->username);
 69 | 		$stmt->bindParam("first_name", $user->first_name);
 70 | 		$stmt->bindParam("last_name", $user->last_name);
 71 | 		$stmt->bindParam("address", $user->address);
 72 | 		$stmt->bindParam("id", $id);
 73 | 		$stmt->execute();
 74 | 		$db = null;
 75 | 		echo json_encode($user); 
 76 | 	} catch(PDOException $e) {
 77 | 		echo '{"error":{"text":'. $e->getMessage() .'}}'; 
 78 | 	}
 79 | }
 80 | 
 81 | function deleteUser($id) {
 82 | 	$sql = "DELETE FROM users WHERE id=".$id;
 83 | 	try {
 84 | 		$db = getConnection();
 85 | 		$stmt = $db->query($sql);  
 86 | 		$wines = $stmt->fetchAll(PDO::FETCH_OBJ);
 87 | 		$db = null;
 88 | 		echo json_encode($wines);
 89 | 	} catch(PDOException $e) {
 90 | 		echo '{"error":{"text":'. $e->getMessage() .'}}'; 
 91 | 	}
 92 | }
 93 | 
 94 | function getConnection() {
 95 | 	$dbhost="127.0.0.1";
 96 | 	$dbuser="root";
 97 | 	$dbpass="";
 98 | 	$dbname="angular_tutorial";
 99 | 	$dbh = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);	
100 | 	$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
101 | 	return $dbh;
102 | }
103 | 
104 | ?>


--------------------------------------------------------------------------------
/assets/js/app.js:
--------------------------------------------------------------------------------
 1 | angular.module('CrudApp', []).
 2 |   config(['$routeProvider', function($routeProvider) {
 3 |   $routeProvider.
 4 |       when('/', {templateUrl: 'assets/tpl/lists.html', controller: ListCtrl}).
 5 |       when('/add-user', {templateUrl: 'assets/tpl/add-new.html', controller: AddCtrl}).
 6 |       when('/edit/:id', {templateUrl: 'assets/tpl/edit.html', controller: EditCtrl}).
 7 |       otherwise({redirectTo: '/'});
 8 | }]);
 9 | 
10 | function ListCtrl($scope, $http) {
11 |   $http.get('api/users').success(function(data) {
12 |     $scope.users = data;
13 |   });
14 | }
15 | 
16 | function AddCtrl($scope, $http, $location) {
17 |   $scope.master = {};
18 |   $scope.activePath = null;
19 | 
20 |   $scope.add_new = function(user, AddNewForm) {
21 | 
22 |     $http.post('api/add_user', user).success(function(){
23 |       $scope.reset();
24 |       $scope.activePath = $location.path('/');
25 |     });
26 | 
27 |     $scope.reset = function() {
28 |       $scope.user = angular.copy($scope.master);
29 |     };
30 | 
31 |     $scope.reset();
32 | 
33 |   };
34 | }
35 | 
36 | function EditCtrl($scope, $http, $location, $routeParams) {
37 |   var id = $routeParams.id;
38 |   $scope.activePath = null;
39 | 
40 |   $http.get('api/users/'+id).success(function(data) {
41 |     $scope.users = data;
42 |   });
43 | 
44 |   $scope.update = function(user){
45 |     $http.put('api/users/'+id, user).success(function(data) {
46 |       $scope.users = data;
47 |       $scope.activePath = $location.path('/');
48 |     });
49 |   };
50 | 
51 |   $scope.delete = function(user) {
52 |     console.log(user);
53 | 
54 |     var deleteUser = confirm('Are you absolutely sure you want to delete?');
55 |     if (deleteUser) {
56 |       $http.delete('api/users/'+user.id);
57 |       $scope.activePath = $location.path('/');
58 |     }
59 |   };
60 | }


--------------------------------------------------------------------------------
/assets/tpl/add-new.html:
--------------------------------------------------------------------------------
 1 | <h2>Add new user</h2>
 2 | <div class="row">
 3 |   <div class="col-md-6">
 4 |   <form novalidate name="AddNewForm" id="add-new-form" method="post" action="">
 5 |     <div class="form-group">
 6 |       <label for="username">Username:</label>
 7 |       <input class="form-control" type="text" ng-model="user.username" required />
 8 |     </div>
 9 |     <div class="form-group">
10 |       <label for="first_name">First name:</label>
11 |       <input class="form-control" type="text" ng-model="user.first_name" required />
12 |     </div>
13 |     <div class="form-group">
14 |       <label for="last_name">Last name:</label>
15 |       <input class="form-control" type="text" ng-model="user.last_name" required />
16 |     </div>
17 |     <div class="form-group">
18 |       <label for="address">Address:</label>
19 |       <input class="form-control" type="text" ng-model="user.address" />
20 |     </div>
21 |     <button class="btn btn-primary" ng-disabled="AddNewForm.$invalid || isUnchanged(user)" id="add-new-btn" ng-click="add_new(user)">Save!</button>
22 |     <a href="#/" class="btn">Cancel</a>
23 |   </form>
24 | </div>
25 | </div>


--------------------------------------------------------------------------------
/assets/tpl/edit.html:
--------------------------------------------------------------------------------
 1 | <h2>Edit user</h2>
 2 | <div class="row">
 3 |   <div class="col-md-6">
 4 |   <form novalidate ng-repeat="user in users" name="AddNewForm" id="add-new-form" method="post" action="">
 5 |     <input type="hidden" ng-model="user.id" value="{{user.id}}" />
 6 |     <div class="form-group">
 7 |       <label for="username">Username:</label>
 8 |       <input class="form-control" type="text" ng-model="user.username" value="{{user.username}}" required />
 9 |     </div>
10 |     <div class="form-group">
11 |       <label for="first_name">First name:</label>
12 |       <input class="form-control" type="text" ng-model="user.first_name" value="{{user.first_name}}" required />
13 |     </div>
14 |     <div class="form-group">
15 |       <label for="last_name">Last name:</label>
16 |       <input class="form-control" type="text" ng-model="user.last_name" value="{{user.last_name}}" required />
17 |     </div>
18 |     <div class="form-group">
19 |       <label for="address">Address:</label>
20 |       <input class="form-control" type="text" ng-model="user.address" value="{{user.address}}" />
21 |     </div>
22 |     <button class="btn btn-primary" ng-disabled="AddNewForm.$invalid || isUnchanged(user)" id="add-new-btn" ng-click="update(user)">Update <span class="glyphicon glyphicon-floppy-disk"></span></button>
23 |     <button class="btn btn-danger" ng-click="delete(user)">Delete <span class="glyphicon glyphicon-trash"></span></button>
24 |     <a href="#/" class="btn">Cancel</a>
25 |   </form>
26 | </div>
27 | </div>


--------------------------------------------------------------------------------
/assets/tpl/lists.html:
--------------------------------------------------------------------------------
 1 | <h2>Users</h2>
 2 | <table class="table table-condensed">
 3 |   <thead>
 4 |     <tr>
 5 |       <th>Username</th>
 6 |       <th>First Name</th>
 7 |       <th>Last Name</th>
 8 |       <th>Address</th>
 9 |       <th>Options</th>
10 |     </tr>
11 |   </thead>
12 |   <tbody>
13 |     <tr ng-repeat="user in users">
14 |       <td>{{user.username}}</td>
15 |       <td>{{user.first_name}}</td>
16 |       <td>{{user.last_name}}</td>
17 |       <td>{{user.address}}</td>
18 |       <td><a href="#/edit/{{user.id}}" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-pencil"></i></button></td>
19 |     </tr>
20 |   </tbody>
21 | </table>
22 | <a class="btn btn-primary" href="#/add-user">Add New User</a>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset='utf-8'>
 5 |   <title>AngularJs</title>
 6 |   <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
 7 | <body ng-app="CrudApp">
 8 | 
 9 | <div class="container">
10 |   <div ng-view></div>
11 | </div>
12 | 
13 | <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
14 | <script type="text/javascript" src ="assets/js/app.js"></script>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/users.sql:
--------------------------------------------------------------------------------
 1 | CREATE TABLE IF NOT EXISTS `users` (
 2 |   `id` int(11) NOT NULL AUTO_INCREMENT,
 3 |   `username` varchar(255) NOT NULL,
 4 |   `first_name` varchar(100) NOT NULL,
 5 |   `last_name` varchar(100) NOT NULL,
 6 |   `address` varchar(255) DEFAULT NULL,
 7 |   PRIMARY KEY (`id`)
 8 | ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;
 9 | 
10 | --
11 | -- Sample Data
12 | --
13 | 
14 | INSERT INTO `users` (`id`, `username`, `first_name`, `last_name`, `address`) VALUES
15 | (1, 'lucentx', 'Aron', 'Barbosa', 'Manila, Philippines'),
16 | (2, 'ozzy', 'Ozzy', 'Osbourne', 'England'),
17 | (3, 'tony', 'Tony', 'Iommi', 'England');


--------------------------------------------------------------------------------