Creating an AMP Blog Page with PHP and MySQL
Creating an AMP Blog Page with PHP and MySQL

In today's fast-paced digital world, page speed and mobile friendliness are crucial for user engagement and SEO. Accelerated Mobile Pages (AMP) is an open-source initiative that aims to provide web pages that load quickly on mobile devices. This article will guide you through creating a simple AMP-powered blog page using PHP and MySQL.

Prerequisites

Before we begin, ensure you have the following installed on your development environment:

PHP (version 7.0 or higher)

MySQL (version 5.7 or higher)

A web server like Apache or Nginx

Composer (for managing PHP dependencies)

 

Step 1: Setting Up the MySQL Database

First, we need to set up a MySQL database to store our blog posts.

Create a Database: Open your MySQL command line or a tool like phpMyAdmin and run the following SQL command to create a database:

CREATE DATABASE amp_blog;

Create a Table: Next, create a table to store the blog posts.

USE amp_blog;

CREATE TABLE posts (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    content TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Step 2: Setting Up the PHP Project

Project Structure: Create a project directory and structure it as follows:

amp-blog/
├── index.php
├── post.php
├── db.php
└── vendor/

Database Connection (db.php): Create a file named db.php to handle the database connection.

<?php
$host = '127.0.0.1';
$db = 'amp_blog';
$user = 'root';
$pass = '';
$charset = 'utf8mb4';

$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$options = [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    PDO::ATTR_EMULATE_PREPARES   => false,
];

try {
    $pdo = new PDO($dsn, $user, $pass, $options);
} catch (\PDOException $e) {
    throw new \PDOException($e->getMessage(), (int)$e->getCode());
}
?>

Step 3: Creating the Blog Pages

Homepage (index.php): This page will display a list of blog posts.

<?php
require 'db.php';

$stmt = $pdo->query('SELECT id, title, created_at FROM posts ORDER BY created_at DESC');
$posts = $stmt->fetchAll();
?>

<!doctype html>
<html amp>
<head>
    <meta charset="utf-8">
    <title>AMP Blog</title>
    <link rel="canonical" href="index.php">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-custom>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .post {
            background: #fff;
            border: 1px solid #ddd;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .post h2 {
            margin-top: 0;
            font-size: 1.5em;
        }
        .post time {
            display: block;
            font-size: 0.9em;
            color: #999;
            margin-bottom: 10px;
        }
        .post a {
            text-decoration: none;
            color: #333;
        }
        .post a:hover {
            text-decoration: underline;
        }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
    <div class="container">
        <h1>My AMP Blog</h1>
        <?php foreach ($posts as $post): ?>
            <div class="post">
                <h2><a href="post.php?id=<?= $post['id'] ?>"><?= htmlspecialchars($post['title']) ?></a></h2>
                <time datetime="<?= $post['created_at'] ?>"><?= $post['created_at'] ?></time>
            </div>
        <?php endforeach; ?>
    </div>
</body>
</html>

Single Post Page (post.php): This page will display a single blog post.

<?php
require 'db.php';

$id = $_GET['id'];
$stmt = $pdo->prepare('SELECT title, content, created_at FROM posts WHERE id = ?');
$stmt->execute([$id]);
$post = $stmt->fetch();

if (!$post) {
    die('Post not found!');
}
?>

<!doctype html>
<html amp>
<head>
    <meta charset="utf-8">
    <title><?= htmlspecialchars($post['title']) ?></title>
    <link rel="canonical" href="post.php?id=<?= $id ?>">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-custom>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        time {
            display: block;
            font-size: 0.9em;
            color: #999;
            margin-bottom: 20px;
            text-align: center;
        }
        .content {
            background: #fff;
            border: 1px solid #ddd;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
    <div class="container">
        <h1><?= htmlspecialchars($post['title']) ?></h1>
        <time datetime="<?= $post['created_at'] ?>"><?= $post['created_at'] ?></time>
        <div class="content">
            <?= nl2br(htmlspecialchars($post['content'])) ?>
        </div>
    </div>
</body>
</html>

Step 4: Testing Your AMP Blog

Run Your Server: Start your web server (Apache or Nginx) and navigate to http://localhost/amp-blog/index.php to view your blog.

Validate AMP: Use the AMP Validator to ensure your pages comply with AMP standards. Simply paste the URL of your blog pages into the validator.

 

< > GitHub




To engage in discussions and post comments, kindly log in or register to create an account.

© vladoivankovic.com