Insert into Mysql table with Angularjs + PHP

Asked

Viewed 247 times

0

I can not identify what is wrong with my code, I followed several tutorials but I was not successful in how to insert. The moment I press the Insert button just doesn’t happen, nothing is shown on the console, I was able to read the table and "print" it in a bootstrap table, I want to insert in a mysql table with Angularjs v1.6.1. Follows my code:

index.html

<!doctype html>
<html>

<head>
    <title>AngularJSCRUD</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="https://use.fontawesome.com/152084022d.js"></script>
    <script src="js/angular.min.js"></script>
    <link href="css/style.css" rel="stylesheet">

</head>

<body ng-app='myapp'>
    <nav class="navbar navbar-dark bg-dark">
        <a class="navbar-brand" href="#">
            Bootstrap
        </a>
    </nav>

    <section class="create"  ng-controller="insertMovie">
        <div class="container">
            <div class="card text-center">
                <div class="card-header">
                    Insert Movie
                </div>
                <div class="card-body" >
                    <form ng-submit="postData()">
                        <div class="form-row">
                            <div class="form-group col-md-12">
                                <label for="inputName">Movie Name:</label>
                                <input type="text" class="form-control" name="movie_name" ng-model="movieName">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="inputName">Movie Director:</label>
                                <input type="text" class="form-control" name="movie_director" ng-model="movieDirector">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="inputName">Movie Release:</label>
                                <input type="number" class="form-control" name="movie_director" ng-model="movieRelease">
                            </div>
                        </div>
                        <button ng-click="postData()" type="submit" class="btn btn-primary">Insert</button>
                    </form>
                </div>
                <div class="card-footer text-muted">
                    Movies
                </div>
            </div>
        </div>
    </section>
    <section class="table-movies" ng-controller="userCtrl">
        <div class="container" >
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th scope="col">ID</th>
                        <th scope="col">Movie Name</th>
                        <th scope="col">Movie Director</th>
                        <th scope="col">Movie Release</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="movies in users">
                        <td>{{movies.id}}</td>
                        <td>{{movies.movie_name}}</td>
                        <td>{{movies.movie_director}}</td>
                        <td>{{movies.movie_release}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>

    <!-- Script -->
    <script src="js/angular-controller.js"></script>
</body>

</html>

angular-controller.js

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

app.controller('userCtrl', ['$scope', '$http', function ($scope, $http) {

    $http({
        method: 'get',
        url: './database/getData.php'
    }).then(function successCallback(response) {
        $scope.users = response.data;
    });

}]);

app.controller('insertMovie', function ($scope, $http) {
    /*
    * This method will be called on click event of button.
    */
    $scope.postData = function () {

        var request = $http({
            method: "post",
            url: './database/insertData.php',
            data: {
                movieName: $scope.movieName,
                movieDirector: $scope.movieDirector,
                movieRelease: $scope.movieRelease
            },
            headers : {'Content-Type': 'application/x-www-form-urlencoded'} 
        })
    }
});

connection to the Database (config.php)

<?php

$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "movies"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
 die("Connection failed: " . mysqli_connect_error());
}

?>

insertData.php

<?php
// Including database connections
require_once 'config.php';

$postdata = file_get_contents("php://input");
$request = json_decode($postdata);

$movieName = $request->movieName;
$movieDirector = $request->movieDirector;
$movieRelease = $request->movieRelease;

$sql = "INSERT INTO list_movies VALUES (NULL, $movieName, $movieDirector, $movieRelease)";

if ($conn->query($sql) === TRUE) {
    echo "New record created successfully";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>

getData.php

<?php

include 'config.php';

$sql = mysqli_query($con,"SELECT * FROM `list_movies`");
$data = array();

while ($row = mysqli_fetch_array($sql)) {
    $data[] = array("id"=>$row['id'],"movie_name"=>$row['movie_name'],"movie_director"=>$row['movie_director'], "movie_release"=>$row['movie_release']);
}

echo json_encode($data);
  • But shows some error while running?

  • That’s the problem, they show no error.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.