7 Forms and Files

I’ve got a vision of what to build next. Let’s try to build a very simple editable blog. In “real world” applications, we’d probably make use of databases, but for our purposes, let’s build the thing by writing to files. By writing to file, we can make things persistent. Storing things in PHP variables only lasts as long as the program is running, but saving results of programs to files or a database can leave a record. A record is something we can pull up again and again, and modify and save. For a lot of applications, persistent data is a necessity.

Let’s start by creating a simple HTML file at index.html:

<html>
  <body>
    <h1>Welcome to My Personal Homepage</h1>
    <p>I can neither confirm nor deny ...</p>
    <p>PHP may or may not mean Personal HomePage</p>
  </body>
</html>

Displaying this with PHP is rather straight-forward. We create a file at index.php at put the following in it:

<?php

require('index.html');

Serve your webpage with the following command in your terminal >php -S localhost:8080 index.php and navigate to it with your browser. You’ll see index.html rendered. PHP has pulled index.html in and rendered it in the browser all as a result of including that single “require(‘index.html’);” line.

We want to be able to edit index.html from the browser. Let’s include a link, but not in index.html. We’ll put the link in index.php, so that we can click to get into an editing mode. Include:

<a href="/?edit=true">Edit</a>

in your index.php file. You can use “?>” to exit the PHP code block and put it in as plain HTML or if you want the challenge, try to echo or print it with PHP.

In edit mode, we shouldn’t render the HTML file, we should pull it into a text field that can be edited and saved. We’ll use “isset()” to check the “$_GET” super global variable, and if we see “$_GET[‘edit’]” exists, we’ll render this form instead. To do that, we need to pull the file in to our program in a slightly different way. Below is the full code of index.php with these additions made:

<?php

// If the form was submitted write changes to file
if(!empty($_POST["text"])) {
    // file_put_contentes writes to file
    file_put_contents('index.html',$_POST["text"]);
}

if(isset($_GET['edit'])) {
    // file_get_contents reads from file
    $file_contents = file_get_contents('index.html');
    // echo our form elements with $file_contents in the textarea
    echo '<form method="post" action="index.php">';
    echo '<textarea id="text" name="text">';
    echo $file_contents;
    echo '</textarea>';
    echo '<input type="submit" value="submit">';
    echo '</form>';
} else {
    // render index.html
    require('index.html');
    // link to access edit mode
    echo '<a href="/?edit=true">Edit</a>';
}

That “$_POST[]” variable works much like “$_GET[]” does. It exists because we submitted a form or something similar, but if we simply load and render a page, nothing would be in the variable. By checking the contents of the variable before doing anything else, we can intercept the form data and save it to file before rendering the page. If we had reversed the order, the experience in the browser would be strange.

Order is important in programming. The math term for things that are order dependent is non-abelian. If you walk east for a mile and then walk north a mile, the result would be the same even if you switched the order. You’d end up in the same place, a little over 1.4 miles northeast of where you started. If you display a file and then make changes to it, well, that’s not going to have the same results as making the changes to it and then displaying it.

You’ve now built a very simple blog! Have fun and make it your own!

Exercises:

  1. Can you build a web application that functions as a diary? Instead of opening a file and editing it, you might want to append to the file so that previous contents doesn’t get overwritten.