allrite

Build a first web application

By

allrite

This is a work in progress!

This is a very basic introduction to building a web application using PHP. It assumes that you have some understanding of HTML and a web server that supports PHP to play with.

We will put the code below in /var/www/html/webapp/

Forms

Let’s make a simple HTML page with a form.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Web App</title>
  </head>
  <body>
    <h1>My Web App</h1>
    <form method="post">
      <div style="block">
        <label for="title">Title: </label>
        <input type="text" id="title" name="title" size="50">
      </div>
      <div style="block">
        <label for="content">Content: </label><br>
        <textarea id="content" name="content" cols="50" rows="10"></textarea>
      </div>
      <input type="submit" id="submit" name="submit" value="Submit">
    </form>
  </body>
</html>Code language: HTML, XML (xml)

Click on Submit and…

Nothing happens!

Add some PHP

We can use PHP to display the data. PHP is enclosed in the <?php ?> tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Web App</title>
  </head>
  <body>
    <h1>My Web App</h1>
    <form method="post">
      <div style="block">
        <label for="title">Title: </label>
        <input type="text" id="title" name="title" size="50">
      </div>
      <div style="block">
        <label for="content">Content: </label><br>
        <textarea id="content" name="content" cols="50" rows="10"></textarea>
      </div>
      <input type="submit" id="submit" name="submit" value="Submit">
    </form>
    <?php
      if ($_POST['submit']) {
        echo "<h2>" . $_POST['title'] . "</h2>";
        echo "<pre>" . $_POST['content'] . "</pre>";
      }
    ?>
  </body>
</html>Code language: PHP (php)

Store in a database

We’ll use sqlite3. 

sqlite3 webapp.dbCode language: Bash (bash)

Create a table.

CREATE TABLE posts(ID INTEGER PRIMARY KEY AUTOINCREMENT, title VARCHAR(255), content TEXT);

Quit out of sqlite.

Create a new PHP file called db.php.

<?php
  $db = new PDO( "sqlite:/var/www/html/webapp.db" );

  function listposts() {
    $results = $db->query("SELECT id, title FROM posts");
    return $results;
  }

  function getpost($id) {
    $stmt = $db->prepare("SELECT * FROM posts WHERE id=?");
    $stmt->execute([$id]);
    $row = $stmt->fetch(PDO::FETCH_ASSOC);
    return $row;
  }
  
  function addpost($data) {
    $stmt = $db->prepare("INSERT INTO posts(title, content) VALUES (?, ?)");
    $stmt->bindParam(1, $data['title']);
    $stmt->bindParam(2, $data['content']);
    $stmt->execute();
  }
?>Code language: PHP (php)

Add post to database

Create a PHP file called addpost.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Web App</title>
  </head>
  <body>
    <?php require_once("db.php"); ?>
    <h1>My Web App</h1>
    <form method="post">
      <div style="block">
        <label for="title">Title: </label>
        <input type="text" id="title" name="title" size="50">
      </div>
      <div style="block">
        <label for="content">Content: </label><br>
        <textarea id="content" name="content" cols="50" rows="10"></textarea>
      </div>
      <input type="submit" id="submit" name="submit" value="Submit">
    </form>
    <?php
      if ($_POST['submit']) {
        echo "<h2>" . $_POST['title'] . "</h2>";
        echo "<pre>" . $_POST['content'] . "</pre>";
        addpost($_POST);
      }
    ?>
  </body>
</html>Code language: PHP (php)

Show a post

Create a PHP file called post.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Web App</title>
  </head>
  <body>
    <?php require_once("db.php"); ?>
    <h1>My Web App</h1>
    <?php
       if ($_REQUEST['id']) {
         $data = getpost($_REQUEST['id']);
    ?>
    <h2><?php echo $data['title']; ?></h2>
    <p><?php echo nl2br($data['content']); ?></p>
    <?php 
       } else {
    ?>
    <p>No post found.</p> 
    <?php
       }
    ?>
  </body>
</html>Code language: PHP (php)

List posts

Add an index.php file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Web App</title>
  </head>
  <body>
    <?php require_once("db.php"); ?>
    <h1>My Web App</h1>
    <a href="addpost.php"><button type="button">Add post<button></a>
    <?php
       $posts = listposts();
    ?>
    <ul>
    <?php
       foreach ($posts as $post) {
    ?>
      <li><a href="post.php?id=<?php echo $post['id']; ?>"><?php echo $post['title']; ?></a></li>
    <?php
       } 
    ?>
    </ul>
  </body>
</html>Code language: PHP (php)

Extras

Add a link back to the home page.

Filed under: