I can not identify what's wrong with my code, I followed several tutorials but I was not successful in how to insert. When I press the insert button simply nothing happens, nothing is shown on the console, I was able to read the table and "print" it on a bootstrap table, I want to insert into a mysql table with AngularJS v1.6.1. Here is 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><scriptsrc="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'}
})
}
});
Bank connection (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);