Store and Fetch Data from your PC’s Hard Drive via HTML & PHP

The technology in this demo involves Apache servers. I highly encourage reading this brief guide on setting up such servers.

Let’s say you own a business, more specifically a laundromat, and you wish to offer pick-up and drop-off services. In addition, you contemplate delivery services. “It’s like Uber, but for laundry… I’m gonna be rich!” you exclaim.

But how? Should it be an app? Customers may not want to download something over 120 MB to their phones. Instead, a contact form on your web page might seem more practical.

But you realize there are multiple scenarios of customer service:

(1) The customer drops off their clothes to your laundromat and expect a phone call once it’s ready for pick-up.

(2) The customer contacts you via phone call and requests pick-up and delivery of their clothes.

(3) The customer emails you for the delivery service.

What do these 3 scenarios have in common? You need to fill out the contact form on their behalf. Perhaps this will be an internal form, and it is only available on your PC’s hard drive at the laundromat.

The HTML Contact Form

This internal form will insert via POST method of customer info, such as:

• Full name.
• Phone number.
• Home address.
• Email address.
• Delivery option (yes or no).

<form action="insert.php" method="POST">
  <table>
   <tr>
    <td>Name :</td>
    <td><input type="text" name="customername" required></td>
   </tr>
   <tr>
    <td>Phone Number :</td>
    <td><input type="text" name="phonenumber" required></td>
   </tr>
   <td>Home Address :</td>
   <td><input type="text" name="homeaddress" required></td>
  </tr>
   <td>Email Address :</td>
   <td><input type="text" name="emailaddress" required></td>
  </tr>
  <tr>
 <td>Delivery :</td>
 <td>
  <input type="radio" name="delivery" value="y" required>Yes
  <input type="radio" name="delivery" value="n" required>No
 </td>
</tr>
<tr>
    <td><input type="submit" value="Submit"></td>
   </tr>
  </table>
 </form>

The PHP Insert File:

The PHP Insert File will do the following:

• Serve as a validator of mandatory text fields,
• Establish a connection,
• Echo statements to indicate if a new record was successfully inserted:

<?php
$customername = $_POST['customername'];
$phonenumber = $_POST['phonenumber'];
$homeaddress = $_POST['homeaddress'];
$emailaddress = $_POST['emailaddress'];
$delivery = $_POST['delivery'];

//form validator to ensure fields are not empty
if (!empty($customername) || !empty($phonenumber) || !empty($homeaddress) || !empty($emailaddress) || !empty($delivery)) {
    $host = "localhost";
    $dbUsername = "root";
    $dbPassword = "";
    $dbName = "customers";

//establish a connection
    $conn = new mysqli($host, $dbUsername, $dbPassword, $dbName);

    if (mysqli_connect_error()) {
         die('Connect Error('. mysqli_connect_errno().')'. mysqli_connect_error());
        }  else {
        $INSERT = "INSERT Into information (customername, phonenumber, homeaddress, emailaddress, delivery) values (?, ?, ?, ?, ?)";

//prepare statement
    $stmt = $conn->prepare($INSERT);
    $stmt->bind_param("sisss", $customername, $phonenumber, $homeaddress, $emailaddress, $delivery);
    $stmt->execute();
    echo "New customer record inserted successfully";
    echo '<p><a href="javascript:history.go ( -1); Location.reload ()" title="Return to the previous page">&laquo; Go back</a></p>';
    exit;

    }
    $stmt->close();
    $conn->close();

} else {
  echo "Please fill out all fields";
  die();
}

?>

PHPMyAdmin:

Now we create the Database in phpMyAdmin and call it customers :

… next, let’s create our table and call it information with 6 columns :

Note: the column id is checked for A.I (Auto Increment) as a unique identifier of each newly created record.

After creating the new table, click on Save :

Now, let’s fill out the HTML form and add a new customer:

… upon Submitting the form, we are redirected to the PHP page, which notifies us the customer was successfully added:

… now if we check our SQL table in phpMyAdmin, we see the new customer record added to the information table within the customers database:

If you are interested in displaying the customer data on a Fetch API with sortable columns and records per page, it can be found here in this article.

Hopefully this article motivates you to craft your very own Fullstack project!