Inserting,displaying and deleting data using angular and php

Question

I'm new to Angular and I'm trying to follow tutorial on angular and php (http://phpenthusiast.com/blog/ajax-with-angular-and-php). I've managed to do the tutorial and now am trying to add a new field (testing). I've added a new field into the database. For some reason this new input field is not working and I wonder why. It displays the third input field, but when I try to add a person with 3rd value it is inserted as null in database. Here is my code.

index.html

<!doctype html>
<html ng-app="ajaxExample">
<head lang="en">
    <meta charset="utf-8">
    <title>Angular Ajax with PHP</title>
</head>
<body>

<h2>The form</h2>

<div ng-controller="mainController">

    <form> 
        <p>Fill the form</p>
        <div>
            <label>Name</label>
            <input type="text" ng-model="newName">
        </div>

        <div>
            <label>Phone</label>
            <input type="text" ng-model="newPhone">
        </div>

        <div>
            <label>Tests</label>
            <input type="text" ng-model="newTesting">
        </div>

        <input type="button" value="Add" ng-click="addPerson()">

    </form>

    <h2>The list</h2>
    <p>The names that were added with the form.</p>

    <ul>
        <li ng-repeat="person in people">
            <button ng-click="deletePerson( person.id )">Delete</button> {{ person.name }} {{ person.phone }} {{ person.testing }}
        </li>
    </ul>

</div>

<script src="/libs/angular.min.js"></script>
<script src="/assets/js/app.js"></script>

</body>
</html>

app.js

var ajaxExample = angular.module('ajaxExample', []);

ajaxExample.controller('mainController',function($scope,$http){
    $scope.people;

    $scope.getPeople = function() {
          $http({

              method: 'GET',
              url: '/api/get.php'

          }).then(function (response) {

              // on success
              $scope.people = response.data;

          }, function (response) {

              // on error
              console.log(response.data,response.status);

          });
    };

    $scope.addPerson = function() {
          $http({

               method: 'POST',
               url:  '/api/post.php',
               data: {newName: $scope.newName, newPhone: $scope.newPhone, newTest: $scope.newTest }

          }).then(function (response) {// on success

               $scope.getPeople();

          }, function (response) {

               console.log(response.data,response.status);

          });
    };

    $scope.deletePerson = function( id ) {

          $http({

              method: 'POST',
              url:  '/api/delete.php',
              data: { recordId : id }

          }).then(function (response) {

              $scope.getPeople();

          }, function (response) {

              console.log(response.data,response.status);

          });
        };

        $scope.getPeople();
});

the database

CREATE TABLE IF NOT EXISTS `people` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `name` varchar(60) DEFAULT NULL,
  `phone` varchar(20) DEFAULT NULL,
  `testing` INT(5),
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8;

connect.php - similar to one on tutorial with 'test' as database name get.php

<?php
require 'connect.php';

$connect = connect();

// Get the data
$people = array();
$sql = "SELECT id, name, phone, testing FROM people";

if($result = mysqli_query($connect,$sql))
{
    $count = mysqli_num_rows($result);

    $cr = 0;
    while($row = mysqli_fetch_assoc($result))
    {
        $people[$cr]['id']    = $row['id'];
        $people[$cr]['name']  = $row['name'];
        $people[$cr]['phone'] = $row['phone'];
        $people[$cr]['testing'] = $row['testing'];

        $cr++;
    }
}

$json = json_encode($people);
echo $json;
exit;

post.php

<?php
require 'connect.php';

$connect = connect();

// Add the new data to the database.
$postdata = file_get_contents("php://input");
var_dump($postdata);
if(isset($postdata) && !empty($postdata))
{
    $request     = json_decode($postdata);

    $newName  = preg_replace('/[^a-zA-Z ]/','',$request->newName);
    $newPhone = preg_replace('/[^0-9 ]/','',$request->newPhone);
    $newTesting = preg_replace('/[^0-9 ]/','',$request->newTesting);

    if($newName  == '' || $newPhone == '') return;

    $sql = "INSERT INTO `people`(`name`, `phone`, `testing`) VALUES ('$newName','$newPhone', '$newTesting')";

    mysqli_query($connect,$sql);
}
exit;

delete.php - same as tutorial

Thanks for help

Kintautas Puodžiukynas · Accepted Answer · 2017-06-29 17:40:17Z

1

Check spelling error:

<input type="text" ng-model="newTesting">


 data: {newName: $scope.newName, newPhone: $scope.newPhone, newTest: $scope.newTest }

Model and scope should have the same name

answered Jun 29, 2017 at 17:40

Kintautas Puodžiukynas

234 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

niuchu Over a year ago

thank you for answer. I've fixed it but it is still not working:(

Kintautas Puodžiukynas Over a year ago

Try $postdata = $_POST; And remove quotations in $sql query: people (name, phone, testing)

Collectives™ on Stack Overflow

Inserting,displaying and deleting data using angular and php

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related