PHP Tutorial

Step 1

PHP Tutorial

In this tutorial we will create a simple twitter copycat. In step 1 we will create a simple page that lists all tweets in the database.

Step 1

1. We will start by creating the database and populating it with some data. For that we’ll use a SQL script like this one.


2. At first, lets concentrate in a page that lists all tweets. We will call this page list_all.php.


3. We will then sketch the HTML portion of the list_all.php page. For that we will use some bogus data just to fill the blanks:

<!DOCTYPE html>
<html>
  <head>
    <title>Example Twitter</title>
    <meta charset="utf-8">
  </head>
  <body>
    <section id="tweets">

      <header>
        <h2>Tweets</h2>
      </header>

      <article class="tweet">
        <header>
          <span class="realname">John</span>
          <a href="#" class="username">@john</a>
          <span class="time">12:46 PM</span>
        </header>

        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget urna nullam.
        </p>
      </article>

    </section>
  </body>
</html>

As you might have noticed we are using HTML 5 and making good use of some of the new semantic tags: section, article and header.


4. We will now connect to the database. For that, we will use the PDO extension. Just put the following code in the beginning of your php file:

<?php
  $conn = new PDO('pgsql:host=HOSTNAME;dbname=USERNAME', 'USERNAME', 'PASSWORD');
  $conn->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
?>

Don’t forget to replace the hostname, database name, username and password with your connection data.

We are also changing the default fetch mode to associative.


5. Now we are ready to retrieve the tweets from the database:

<?php
  $conn = new PDO('pgsql:host=HOSTNAME;dbname=USERNAME', 'USERNAME', 'PASSWORD');
  $conn->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);

  $stmt = $conn->prepare('SELECT * FROM tweets JOIN users USING (username) ORDER BY time DESC');
  $stmt->execute();
  $tweets = $stmt->fetchAll();
?>

We now have an array with all the tweets in the database, sorted by date and including information about the user that made each tweet.


6. We now have to create a article element for each tweet in the array. For that we just have to loop through the array and output an article element for each tweet. Just replace the article element in the HTML skeleton code with:

<?php foreach ($tweets as $tweet) { ?>
<article class="tweet">
  <header>
    <span class="realname"><?=$tweet['realname']?></span>
    <a href="#" class="username">@<?=$tweet['username']?></a>
    <span class="time"><?=$tweet['time']?></span>
  </header>

  <p><?=$tweet['text']?></p>
</article>
<?php } ?>

7. To make the output more pleasing to the eyes lets add some styles using CSS. First we create a new file called style.css:

.tweet {
  border: 1px solid red;
  padding: 10px;
  margin-bottom: 5px;
}

and then connect the list_all.php file to it by changing the head section of the HTML code:

<head>
  <title>Example Twitter</title>
  <link rel="stylesheet" href="style.css">
  <meta charset="utf-8">
</head>

This concludes step 1 of our tutorial. In step2 we will try to organize our code better.