Creating the Blog Project
Last modified: May 18 2024 18:40:23
This blog post details the steps taken to create a simple yet functional blog project using PHP, HTML, and CSS. The project allows users to search through blog posts and view them without requiring authentication for adding or editing posts.
Introduction
Creating a blog project is an excellent way to understand the basics of web development. In this project, we set up a basic blog interface using PHP for server-side logic, HTML for structure, and CSS for styling. We will go through the various components of the project, including the main blog menu, the search functionality, and individual blog posts.
Setting Up the Environment
We started by setting up our development environment using XAMPP and VSCode. XAMPP provides a local web server that supports PHP and MySQL, making it easy to test our web applications locally. VSCode is a powerful code editor that supports various extensions to enhance the development experience.
Creating the Blog Menu
The blog menu is the main interface of our blog. It lists all available blog posts and provides a search functionality to find specific posts.
Here is the code for the index.php file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Blog Menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>Blog Menu</h1>
<form action="search.php" method="GET" class="search-form">
<input type="text" name="query" placeholder="Search blog posts..." required>
<input type="submit" value="Search">
</form>
<h2>Blog Posts</h2>
<ul class="post-list">
<?php
$posts = array_diff(scandir('posts'), array('.', '..'));
if (count($posts) > 0) {
foreach ($posts as $post) {
$postName = pathinfo($post, PATHINFO_FILENAME);
$postPath = 'posts/' . $post;
$lastModified = date("F d Y H:i:s", filemtime($postPath));
echo '<li><a href="' . htmlspecialchars($postPath) . '">' . htmlspecialchars($postName) . '</a><span class="date">Last modified: ' . htmlspecialchars($lastModified) . '</span></li>';
}
} else {
echo '<li>No posts available.</li>';
}
?>
</ul>
</div>
</body>
</html>
Implementing the Search Functionality
The search functionality allows users to search for specific blog posts by keywords. The search results are displayed on a separate page.
Here is the code for the search.php file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Search Results</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>Search Results</h1>
<ul class="post-list">
<?php
if (isset($_GET['query'])) {
$query = htmlspecialchars($_GET['query']);
$posts = array_diff(scandir('posts'), array('.', '..'));
$found = false;
foreach ($posts as $post) {
if (stripos($post, $query) !== false) {
$postName = pathinfo($post, PATHINFO_FILENAME);
$postPath = 'posts/' . $post;
$lastModified = date("F d Y H:i:s", filemtime($postPath));
echo '<li><a href="' . htmlspecialchars($postPath) . '">' . htmlspecialchars($postName) . '</a><span class="date">Last modified: ' . htmlspecialchars($lastModified) . '</span></li>';
$found = true;
}
}
if (!$found) {
echo '<li>No matching posts found.</li>';
}
} else {
echo '<li>No search query provided.</li>';
}
?>
</ul>
<a href="index.php" class="back-link">Back to Blog Menu</a>
</div>
</body>
</html>
Styling the Blog
To improve the look and feel of the blog, we used CSS for styling. This ensures a consistent and pleasant user experience across the site.
Here is the code for the style.css file:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
.container {
width: 80%;
max-width: 800px;
margin: 50px auto;
background: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2 {
color: #333;
text-align: center;
border-bottom: 2px solid #ddd;
padding-bottom: 10px;
}
.search-form {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.search-form input[type="text"] {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.search-form input[type="submit"] {
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
border-radius: 4px;
margin-left: 10px;
}
.search-form input[type="submit"]:hover {
background-color: #555;
}
ul.post-list {
list-style-type: none;
padding: 0;
}
ul.post-list li {
margin-bottom: 10px;
padding: 10px;
border-bottom: 1px solid #ddd;
display: flex;
justify-content: space-between;
align-items: center;
}
ul.post-list li a {
text-decoration: none;
color: #333;
padding: 10px 15px;
display: block;
border-radius: 4px;
transition: background-color 0.3s ease;
flex-grow: 1;
}
ul.post-list li a:hover {
background-color: #f0f0f0;
}
ul.post-list li .date {
font-size: 0.9em;
color: #888;
margin-left: 10px;
}
.back-link {
display: inline-block;
margin-top: 20px;
padding: 10px 15px;
background-color: #333;
color: #fff;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.back-link:hover {
background-color: #555;
}
Conclusion
This blog project is a simple yet effective way to learn and practice web development skills. By combining PHP, HTML, and CSS, we created a functional blog interface with search capabilities and secure handling of user input. As you continue to develop this project, consider adding more features such as user authentication, comment sections, and a database to store blog posts.