Retrieving a GET command though Slim PHP & AngularJS

Question

I have recently started programming in AngularJS and have run into an issue when trying to pull a specific data row out of my datastore.

I have a frontend webpage on a server running XAMPP with PHP and MySql. I successfully integrated Slim PHP and was able to retrieve a JSON list of all my data when I goto ( localhost/requests )

My issue however is getting a specific record out based on which ID they click on.

This is my code for the Frontend partial they can select which record to open.

requestList.Html

    <table class="table table-hover">
    <thead>
        <tr>
            <th ng-repeat="header in headers">{{header}}</th>
            <th>Id</th>      
            <th>Date</th>      
            <th>Initiator</th>      
            <th>Detail</th>      
            <th>Requestor</th>         
            <th class="text-center">View</th>
            <th class="text-center">Edit</th>
            <th class="text-center">Delete</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="request in requests">
            <td>{{request.ID}}</td>
            <td>{{request.Date_Submitted}}</td>
            <td>{{request.Change_Initiator}}</td>
            <td>{{request.Change_Initiator_id}}</td>
            <td>{{request.Requestor}}</td>
            <td class="text-center">
                <a ng-href="/#/requests/:{{request.ID}}" class="glyphicon glyphicon-eye-open green"></a>
            </td>
            <td class="text-center">
                <a ng-href="request/edit/{{request.id}}" class="glyphicon glyphicon-pencil blue"></a>
            </td>
            <td class="text-center">
                <a ng-click="deleterequest(request.id)" class="glyphicon glyphicon-remove red"></a>
            </td>
        </tr>
    </tbody>
</table>

viewRequests.html

<div class="container-fluid" >
    <form class="form-horizontal" role="form">

        <div class="form-group">
            <div class="text-center">
                <h1>{{ header }}</h1>
                <p>{{ message }}</p>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">Id:</label>
            <div class="col-sm-4">
                <input name="id" class="form-control" type="text" value="{{request.ID}}" disabled />
            </div>
            <label class="col-sm-2 control-label">Date:</label>
            <div class="col-sm-4">
                <input type="date" class="form-control" value="{{request.Date_Submitted}}" required/>
            </div>
        </div>

        <div class="form-group">    
            <label class="col-sm-2 control-label">Change Initiator:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" value="{{ request.Change_Initiator }}" required/>
            </div>
            <label class="col-sm-2 control-label">Risk Level:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" value="{{ request.Risk_Level }}" required/>
            </div>
        </div>

        <div class="form-group">    
            <label class="col-sm-2 control-label">CI Details:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" value="{{ request.Change_Initiator_id }}" required/>
            </div>
        </div>

        <div class="form-group">    
            <label class="col-sm-2 control-label">Requestor:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" value="{{ request.Requestor }}" required/>
            </div>
            <label class="col-sm-2 control-label">Systems Affected:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" value="{{ request. }}" required/>
            </div>
        </div>

        <div class="form-group">    
            <label class="col-sm-2 control-label">Implemented By:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" value="{{ request. }}" required/>
            </div>
            <label class="col-sm-2 control-label">Implementation Date:</label>
            <div class="col-sm-4">
                <input type="date" class="form-control" value="{{ request. }}" required/>
            </div>
        </div>

        <div class="form-group">    
            <label class="col-sm-2 control-label">Close Date:</label>
            <div class="col-sm-4">
                <input type="date" class="form-control" value="{{ request. }}"/>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">Work to be Performed:</label>
            <div class="col-sm-4">
                <textarea name="request.description" required>{{ request.Work_to_be_performed }}</textarea>
            </div>
            <label class="col-sm-2 control-label">Backout Plan:</label>
            <div class="col-sm-4">
            <textarea name="request.description" required>{{ request.Backout_Plan }}</textarea>
            </div>
        </div>

        <div class="form-group">
            <button class="edit" ng:click="editRequest()">Edit</button>
            <button class="save" ng:click="saveRequest()">Save</button>    
            <button class="approve" ng:click="approveRequest()">Approve</button> 
        </div>

    </form>
</div>

app.js

var app = angular.module('changeControlApp', [
    'ngRoute',
    'ngResource'
]);


app.config(function($routeProvider) {


    $routeProvider
        .when('/',                      {templateUrl: 'app/partials/requestList.html', controller: 'viewController' })
        .when('/requests',              {templateUrl: 'app/partials/requestList.html', controller: 'viewController' })
        .when('/createRequest',         {templateUrl: 'app/partials/viewRequests.html', controller: 'createRequestController' })
        .when('/settings',              {templateUrl: 'app/partials/settings.html', controller: 'settingsController'})
        .when('/requests/:id',    {templateUrl: 'app/partials/viewRequests.html', controller: 'viewRequestController' })
        .otherwise({ redirectTo: '/' });

});


    app.controller('viewRequestController', function($routeParams, $resource, $scope, $location, $window, $http) {
        $scope.header = 'View Change Request';

        var request_Id = $routeParams.requestId;
        var Request = $resource('http://pdgrosit02v/changeRequest/app/api/requests/:id', { id: request_Id });

        $scope.request = Request.get();

});

    app.controller('viewController', function($resource, $scope, $location, $route) {          
        var Requests = $resource('http://pdgrosit02v/changeRequest/app/api/requests'); 

        $scope.requests = Requests.query();

});   

Slim index.php

<?php

require 'Slim/Slim.php';
\Slim\Slim::registerAutoloader();

use Slim\Slim;

$app = new Slim();
$app->get('/requests', 'getRequests');

$app->get('/requests/:id',  'getRequest');

$app->post('/add_request', 'addRequest');

$app->run();

function getRequests() {
  $sql = "select * FROM change_request ORDER BY id";
  try {
    $db = getConnection();
    $stmt = $db->query($sql);  
    $requests = $stmt->fetchAll(PDO::FETCH_OBJ);
    $db = null;
    echo json_encode($requests);
  } catch(PDOException $e) {
    echo '{"error":{"text":'. $e->getMessage() .'}}'; 
  }
}

function getRequest($id) {
    $sql = "SELECT * FROM change_request WHERE ID=:id";
    try {
        $db = getConnection();
        $stmt = $db->prepare($sql);  
        $stmt->bindParam("id", $id);
        $stmt->execute();
        $request = $stmt->fetchObject();  
        $db = null;
        echo json_encode($request); 
    } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}'; 
    }
}

function getConnection() {
  $dbhost="pdgrosit02v";
  $dbuser="root";
  $dbpass="root";
  $dbname="pdgwebapps";
  $dbh = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);  
  $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  return $dbh;
}

When I navigate to " /requests " I get a full JSON version of the MySQL table. However when I navigate to "/requests/:1" I just get "false"

Any and all help would be appreciated - I have tried to find the solution for several days but have come up empty!

Edited:

Updated app.js

app.controller('viewRequestController', function($routeParams, $resource, $scope, $location, $window, $http) {
        $scope.header = 'View Change Request';

        var request_Id = $routeParams.requestId;
        var Request = $resource('http://pdgrosit02v/changeRequest/app/api/requests/id', { id: request_Id });

        $scope.request = Request.get();

});

Edited:

Updated index.php

function getRequest($id) {
    $sql = "SELECT * FROM change_request WHERE ID=$id";
    try {
        $db = getConnection();
        $stmt = $db->prepare($sql); 
        $stmt->execute();
        $request = $stmt->fetchObject();  
        $db = null;
        echo json_encode($request); 
    } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}'; 
    }
}

Answer 1

It looks like you aren't formatting your request correctly -- see http://docs.slimframework.com/#Routing-Overview

When you put $app->get('/requests/:id', 'getRequest'); the colon is indicating that whatever ends up in that path segment is to be treated as a parameter called "id". You don't need that colon when you make a request. So, your requests should look like: http://foo.com/requests/3

Answer 2

According to the doc (http://www.php.net/manual/en/pdostatement.fetchobject.php):

The return value of this function on success depends on the fetch type. In all cases, FALSE is returned on failure.

Also, according to examples in docs here http://www.php.net/manual/en/pdostatement.bindparam.php you should use:

$sth->bindParam(':id', $id, PDO::PARAM_INT); //see ':' by id