Angular PHP submitted data dissapeared when refreshing page.

[henk]

Since a week I am diving into PHP, but could not figure out how to fix a good working PHP file. When someone wants to place a comment on the forum page, the text should be stored somewhere in this case names.json. When all the fields are filled in correctly, they can click the submit button. After that the information will be pushed into an array, so their information will be showing on the forum page. BUT when someone is refreshing the page, all the data that recently is stored on names.json will be gone. The array under $scope.comments are not deleted. Anyone an idea how I can fix this. Where do I have to look at. So at the end, when someone has entered the field, push the submit button, their information should be stored even when they are refreshing the page. 

angular.module("forum-page", ["myApp"])
	.controller("Forum", ['$scope', '$http', function($scope, $http) {
			$scope.options = [
			{		
				id: 1, 
				country : "Angola"
			},
				{
				id: 2, 
				country: "Argentina"
			}
		];

		$scope.comments = [
			{
			"name": "Kevin", 
			"country": "Nederland",
			"comment": "Wat een mooi toestel vandaag ontvangen, zeer blij met mijn bestelling :)"
			}, 
			{
			"name": "Jason", 
			"country": "USA", 
			"comment": "What a great phone I received from Meizu, will surely come back to buy again in the future"
			}, 
			{
			"name": "姚宣辰", 
			"country": "中国", 
			"comment": "这个手机很标亮， 下次也会买魅族智能手机"
			}, 
			{
			"name": "Joshua", 
			"country": "Deutschland",
			"comment": "Sehr zufrieden mit diesem Smartphone und kann es jedem empfehlen"
			}, 
			{
			"name": "Bobby", 
			"country": "België", 
			"comment": "Erg blij dat ik toch het toestel van Meizu besteld hebt, geniet er elke dag van."
			}
		];

	$scope.addComment = function(dataObject) {

		$scope.url = "submit.php";

		if(dataObject) {

			 $http.post($scope.url, {"name": $scope.dataObject.name, "email": $scope.dataObject.country, "message": $scope.dataObject.comment}).
                success(function(data, status) {
                    // console.log(data);
                    $scope.status = status;
                    $scope.data = data;
                    $scope.result = data; 

                    $scope.dataObject = {
					name: "", 
					country: "", 
					comment: ""
	
					};
				
                })
                	$scope.comments.push(dataObject);
		} else {
			console.log("Form is not valid");
		}
	};
}]); 

But when I am refreshing the page, all the data dissapears. What should I do in order to store the data. 

<?php
/**
 * @filesource : submit.php
 * @author : Shabeeb  <me@shabeebk.com>
 * @abstract : simple submission php form
 * @package sample file 
 * @copyright (c) 2014, Shabeeb
 * shabeebk.com
 * 
 *  */

// below the input field will be 

$json = file_put_contents('names.json', file_get_contents('php://input'), FILE_APPEND);  
$data = json_decode($json);
@$name = $data->name;
@$email = $data->email;
@$message = $data->message;

//saving to database
//save query

//now i am just printing the values
echo "Name : ".$data->name."\n";
echo "Email : ".$data->email."\n";
echo "Message : ".$data->message."\n";

//echo "Hello world";

?>

<div ng-controller="Forum" class="forum-page">
	<div class="col-lg-12"> 

	<div id="comment-block">
		<div id="comment-list" ng-repeat="comment in comments">
			<div id="text-block">
				<div class="comment-info name">{{comment.name}}</div>
				<div class="comment-info" id="comment">{{comment.comment}}</div>
				<div class="comment-info countries">{{comment.country}}</div>
			</div>
		</div>
	
		<ng-form name="comment_box" method="post" id="comment-box">
			<input type="text" class="comment-form" id="name" ng-model="dataObject.name" ng-minlength="2" ng-maxlength="20" ng-required="true" placeholder="Name">
			<select class="comment-form" ng-model="dataObject.country" ng-options="x.country as x.country for x in options" ng-required="true">
			<option value="">-- Choose Country --</option>
			</select>
			<textarea type="text" class="comment-form countries" ng-model="dataObject.comment" rows="6" cols="90" ng-minlength="1" ng-maxlength="300" ng-required="true" placeholder="Comment"></textarea>
			<span class="comment-form" id="remain_amount_of_letters">{{300-dataObject.comment.length}} Left</span>
			<button class="comment-form comment-button" ng-disabled="comment_box.$invalid" type="submit" ng-click="addComment(dataObject)">Place comment</button>
		</ng-form>

[mac_gyver]

web servers and browsers are stateless. they don't know anything about any http request before or after the current one. when you refresh the page, it is requested again and it starts over and operates on any current data it is told to use. 

 

the $scope.comments array, that's hard-coded now, should instead be retrieved or dynamically built from the stored data on the server. by appending/pushing the submitted data to the $scope.comments array in the client, you have duplicated data on the client and on the server and can have the data out of synchronization if the server side code doesn't validate and store the data. data should only be stored in one place.

 

next, this line - $json = file_put_contents('names.json', file_get_contents('php://input'), FILE_APPEND); isn't doing what you think. file_put_contents() returns an integer that's the number of bytes written to the file (or a false value if the file_put_contents() failed), so, while this will append the submitted data to names.json, the $json variable isn't either the submitted data or the entire contents of names.json. the reason you are getting php errors from the code is because $json, and then $data, isn't the submitted data. btw - don't use @ error suppressors in your code. they just hide problems, while still leaving your code nonfunctional. your task as a programmer is to find and fix problems, not hide them.

 

this would be a good point to mention separation of concerns. i don't know from your program logic what you expect $json to hold, but if you separate the different concerns in your code, it would be clear to you and us what you are trying to do. saving data due to a form submission/post request is a separate concern from retrieving data to output it.

 

your server side post method form processing code should detect that a post method form was submitted, input and validate the submitted data, then if there are no validation errors, use the submitted data. for what your application is doing, using the submitted data would mean to store it persistently on the server. you can display/dump the data for debugging purposes, but that is not the primary concern of the post method form processing code.

 
if you then want to retrieve some or all of the the stored data and output it, this is a separate concern from the post method form processing and the code to do this should be a separate independent section in your file.

Edited December 2, 2016 by mac_gyver