Project 2 Solution – Make a Dynamic Web Page (PHP)

There’s a lot going on in the PHP code below. No worries though. We’ll go over every single line where something new is happening.

<?php
$noteTitle = $_POST['title'];
$noteContent = $_POST['content'];

function addNote(string $title, string $content) 
{
  // get the contents of the file
  $fileContents = file_get_contents("data.json");
  $data = json_decode($fileContents);

  // add the note to the notes array
  $notes = $data->notes;

  // if there's no notes array, yet, create it
  if (empty($notes)) {
    $notes = [];
  }
  $note = [
    'title' => $title,
    'content' => $content,
  ];
  array_push($notes, $note);
  $data->notes = $notes;

  // turn the array back into JSON
  $jsonData = json_encode($data);

  // save the data to the file
  file_put_contents("data.json", $jsonData);
}

addNote($noteTitle, $noteContent);
?>
<a href="/">Create another note</a>

Code Dissection

 

<?php

This special combination of characters marks the opening of PHP that the server will execute.

$title = $_POST[‘title’];

In the first two lines, we’re creating two variables. $_POST is a global variable in PHP. It’s always accessible. You tell that it’s an associative array by the way we access its properties.

The global $_POST variable contains any information that was submitted from a form by the user. Since one of the form’s inputs had a name attribute with the value of title (<input type=”text” name=”title” />) , we can access the text that the user entered in that input.

$content = $_POST[‘content’];

The same goes for the textarea input field in the form. It had a name attribute with the value of “content”.

When the user submitted the form, the data from the form was “posted” to the server.

function addNote(string $title, string $content)

We’re declaring a function that accepts two parameters. Both parameters have to be strings, or we’ll get an error.

$fileContents = file_get_contents("data.json");

file_get_contents

This is a useful native PHP function. It does exactly what it says. It gets the contents of a file.

data.json

The file that we’re getting content from has the filename “data.json”. It’s located in the same directory where the PHP file is being run.

The content of the file is a JSON string, but we have to convert it into a object before it’s any use.

$data = json_decode($fileContents);

PHP has a useful function that turns a JSON string into an equivalent object. Since the contents of the file are just a set of curly braces (an empty JSON object) right now, the function gives us an empty PHP object.

$notes = $date->notes;

We’re trying to access a property in the object named notes. Since there is no property named notes, yet, the $notes variable will be NULL.

if (empty ($notes)) {

The empty PHP function checks for different values that equate to nothing. If the variable that it’s checking is one of those “empty” values, the empty function returns true. An empty array, a false Boolean, and a NULL value all cause the empty function to return true.

$notes = [];

We set the $notes variable to an empty array. It will be an array of associative arrays. PHP objects are very flexible. In the end, the $data object will have one property named notes that contains an array of associative arrays.

$note = […

We are creating an associative array that will have two key/value pairs.

‘title’ => $title,

The title of the role and the content.

array_push($notes, $note);

The array-push function adds an item to the beginning of an array. In this case, it adds an associative array (our note) to a normal array ($notes).

$data->notes = $notes;

We’re setting our array of notes back to the notes property of the object.

$jsonData = json_encode($data);

The json_encode function turns an array or object into a JSON string.

fie_put_contents(“data.json”, $jsonData);

The fie_put_contents function opens a file, saves some contents to it, and closes it. There is also a long-hand way of doing this, but I prefer the shorthand way. Much mere straight forward.

addNote($noteTitle, $noteContent);

We created the function above, but here is where we actually make use of it. The note’s title and content get passed as parameters and, ultimately, get saved to the data.json file.

?>

The question mark/greater than combo tells PHP that this is the end of the PHP. Anything after will be interpreted as HTML and will not be executed.

<a href=”/”>Create another note</a>

I thought it would be a good idea to give our users a way to get back to the previous page if they want to create another note. As you can see, using a plain HTML form that posts to a PHP page is not the best user experience since it takes the user away from the page. We’ll look into the other method later on in a JavaScript lesson using something called Ajax.

This simple little program introduced a lot of different PHP functions and some very practical programming. Later on, we’ll use an actual database instead of a file to persist our data.