İçeriğe geç
yazilimrehberi.dev

Make a Simple Blog with PHP

Making a Simple Blog with PHP

In this example, we will create a simple blog site using PHP. In this blog site, users will be able to register, log in, view their posts, and add new posts.

Database Design

First, let’s create our database. We will create a database named blog and two tables: users and posts.

CREATE DATABASE blog;


USE blog;


CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL
);


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

Our Application’s File Structure

Our application’s file structure should be as follows:

blog/
├── css/
│   └── style.css
├── includes/
│   ├── connect.php
│   ├── header.php
│   ├── footer.php
│   └── nav.php
├── pages/
│   ├── login.php
│   ├── register.php
│   ├── posts.php
│   └── new-post.php
├── actions/
│   ├── register.php
│   ├── login.php
│   ├── logout.php
│   ├── posts.php
│   └── new-post.php
├── index.php

Database Connection

Let’s create a file named includes/connect.php to establish a database connection:

<?php
$host = "localhost
$dbname = "blog";
$username = "root";
$password = "";


try {
    $db = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $username, $password);
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die("Database connection failed: " . $e->getMessage());
}
?>

Header and Menu

Let’s create files named includes/header.php and includes/nav.php to provide the title and menu part of our pages:

includes/header.php-
<?php
session_start();
?>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Blog</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
includes/nav.php-
<nav>
    <a href="/">Anasayfa</a>
    <a href="/pages/posts.php">Yazılar</a>


    <?php if (isset($_SESSION["user_id"])) : ?>
        <a href="/pages/new-post.php">New Entry</a>
        <a href="/actions/logout.php">Logout</a>
    <?php endif; ?>
    <?php if (!isset($_SESSION["user_id"])) : ?>
        <a href="/pages/register.php">Register</a>
        <a href="/pages/login.php">Login</a>
    <?php endif; ?>
</nav>

Let’s create a file named includes/footer.php to provide the bottom part of our pages:

includes/footer.php-
</body>
</html>

Register Page

Let’s create a file named pages/register.php to provide the registration page:

<?php include "../includes/header.php"; ?>
<?php include "../includes/nav.php"; ?>


<h1>Register</h1>


<form action="../actions/register.php" method="post">
    <label for="username">Username:</label>
    <input type="text" name="username" id="username" required><br>
    <label for="password">Password:</label>
    <input type="password" name="password" id="password" required><br>
    <input type="submit" value="Register">
</form>


<?php include "../includes/footer.php"; ?>

Registration Process

Let’s create a file named actions/register.php to provide the registration process:

<?php
include "../includes/connect.php";


if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = trim($_POST["username"]);
    $password = password_hash(trim($_POST["password"]), PASSWORD_DEFAULT);


    $query = $db->prepare("INSERT INTO users (username, password) VALUES (?, ?)");
    $query->execute([$username, $password]);


    header("Location: ../pages/login.php");
    exit;
}


?>

Login Page

Let’s create a file named pages/login.php to provide the login page:

<?php include "../includes/header.php"; ?>
<?php include "../includes/nav.php"; ?>


<h1>Login</h1>


<form action="../actions/login.php" method="post">
    <label for="username">Username:</label>
    <input type="text" name="username" id="username" required><br>
    <label for="password">Password:</label>
    <input type="password" name="password" id="password" required><br>
    <input type="submit" value="Login">
</form>


<?php include "../includes/footer.php"; ?>

Login Process

Let’s create a file named actions/login.php to provide the login process:

<?php
include "../includes/connect.php";


if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = trim($_POST["username"]);
    $password = $_POST["password"];


    $query = $db->prepare("SELECT * FROM users WHERE username = ?");
    $query->execute([$username]);
    $user = $query->fetch(PDO::FETCH_ASSOC);


    if ($user && password_verify($password, $user["password"])) {
        session_start();
        $_SESSION["user_id"] = $user["id"];
        $_SESSION["username"] = $user["username"];


        header("Location: /");
        exit;
    } else {
        echo "Username or password is incorrect!";
    }
}
?>

Logout Process

Let’s create a file named actions/logout.php to provide the logout process:

<?php
session_start();
session_destroy();


header("Location: /pages/posts.php");
exit;
?>

Posts Page

Let’s create a file named pages/posts.php to provide the posts page:

<?php include "../includes/header.php"; ?>
<?php include "../includes/nav.php"; ?>
<?php include "../includes/connect.php"; ?>


<h1>Posts</h1>
<?php
$query = $db->query("SELECT * FROM posts");
$posts = $query->fetchAll(PDO::FETCH_ASSOC);
?>
<?php foreach ($posts as $post) : ?>
    <article>
        <h2><?= $post["title"] ?></h2>
        <p><?= $post["content"] ?></p>
    </article>
    <hr>
<?php endforeach; ?>


<?php include "../includes/footer.php"; ?>

New Post Page

Let’s create a file named pages/new-post.php to provide the new post page:

<?php include "../includes/header.php"; ?>
<?php include "../includes/nav.php"; ?>




<?php if (!isset($_SESSION["user_id"])) : ?>
    <p>You must log in to add a post.</p>
    <a href="/pages/login.php">Click here to log in.</a>
<?php endif; ?>


<?php if (isset($_SESSION["user_id"])) : ?>
    <h1>New Post</h1>


    <form action="../actions/new-post.php" method="post">
        <label for="title">Title:</label>
        <input type="text" name="title" id="title" required><br>
        <label for="content">Content:</label>
        <textarea name="content" id="content" required></textarea><br>
        <input type="submit" value="Save Post">
    </form>
<?php endif; ?>


<?php include "../includes/footer.php"; ?>

New Post Process

Let’s create a file named actions/new-post.php to provide the new post process:

<?php
include "../includes/connect.php";


if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $title = trim($_POST["title"]);
    $content = trim($_POST["content"]);


    $query = $db->prepare("INSERT INTO posts (title, content) VALUES (?, ?)");
    $query->execute([$title, $content]);


    header("Location: ../pages/posts.php");
    exit;
}
?>

CSS File

Let’s create a css/style.css file to provide our CSS file:

css/style.css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}


body {
    background-color: #f4f4f9;
    color: #333;
    font-size: 16px;
    line-height: 1.6;
    padding: 20px;
}


.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}


/* Header and Nav */
header {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


header h1 {
    font-size: 2.5em;
    letter-spacing: 2px;
}


nav {
    display: flex;
    justify-content: center;
    background-color: #333;
    padding: 15px 0;
    margin-top: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


nav a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    font-weight: bold;
    font-size: 1.1em;
    transition: color 0.3s ease;
}


nav a:hover {
    color: #4CAF50;
}


/* Form */
form {
    background-color: white;
    padding: 30px;
    margin: 20px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}


form label {
    font-size: 1.2em;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}


form input[type="text"],
form input[type="password"],
form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
}


form input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
}


form input[type="submit"]:hover {
    background-color: #45a049;
}


/* Page Title */
h1, h2 {
    color: #333;
    margin-bottom: 20px;
}


h1 {
    font-size: 2em;
    text-align: center;
}


/* Posts */
.post {
    background-color: white;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}


.post h2 {
    font-size: 1.5em;
    color: #4CAF50;
}


.post p {
    margin-top: 10px;
}


/* Footer */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
    position: relative;
    bottom: 0;
    width: 100%;
}


footer p {
    margin: 0;
}


/* Responsive */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
    }


    nav a {
        margin: 10px 0;
    }


    form, .post {
        margin: 20px 0;
    }
}

Home Page

Finally, let’s create our home page index.php:

/index.php
<?php include "includes/header.php"; ?>
<?php include "includes/nav.php"; ?>


<h1>Blog Site</h1>


<!-- IF SESSION EXISTS, WELCOME MESSAGE -->
<?php if (isset($_SESSION["user_id"])) : ?>
    <p>Welcome, <span style="color:red"><?php echo $_SESSION["username"]; ?>!</span></p>
<?php endif; ?>


<p>Welcome! You can share your posts on this blog site.</p>


<?php include "includes/footer.php"; ?>

Running Our Application

Now we can run our application. To run our application, we can use a web server (e.g., Apache). For example, we can install a web server like XAMPP or Wampserver, or start a local web server with the command php -S localhost:80 if PHP is installed.

To run our application, we can create a folder named blog in the root directory of our web server (htdocs or www, for example) and copy the files we created above into this folder. Then, we can go to http://localhost/blog in our web browser to see our application.

When we run our application, we will see a blog site. In this blog site, users can register, log in, view posts, and add new posts.

To access the admin panel of our application, we can go to http://localhost/blog/admin/login.php. To access the admin panel, we need to register and log in.

We can continue to develop our application and add new features. For example, we can add features like editing, deleting posts, adding comments, etc. We can also improve the design of our application and make it more user-friendly.

In this example, we learned how to create a simple blog site with PHP. By using PHP’s database connection, form processing, session management, and other features, we developed a real application. By studying this example, you can learn how to develop applications with PHP and develop your own projects.