How To Create A Blog in PHP and MySQL Database
How To Create A Blog in PHP and MySQL Database
This is part 3 of a 4-part series on How To Build a Blog with PHP and MySQL.
You can view the previous two parts here: part 1, part 2.
In the last two parts of this tutorial, we finished creating the public area. We
even set up our database, inserted some data into the database tables and
were able to query this and display on the page. But we don't always want to
create users, posts, topics using a database client like PHPMyAdmin, do we?
We want an interface on the website and a logged in user with admin
privileges to do that.
When a user with admin privileges logs in, they are automatically redirected to
the admin dashboard. But we haven't created an admin user in our system
yet. We will do that soon.
dashboard.php:
On your browser,
visit http://localhost/complete-blog-php/admin/dashboard.php and you will see
that there is no styling and there are error messages about failure to include
some two files. That's because we have not yet created these files. We'll do
that soon.
The reason we have created a separate includes folder for the admin area is
to ensure that all admin files are in one folder (admin). Later on, we can
strengthen the security of the admin folder using htaccess authentication. We
won't be doing that in this tutorial though.
In this newly created includes folder, create a file
named head_section.php. Open head_section.php and add this code to
it:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?
family=Averia+Serif+Libre|Noto+Serif|Tangerine"
rel="stylesheet">
<!-- Font awesome -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/
css/font-awesome.min.css" />
<!-- ckeditor -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.8.0/ckedi
tor.js"></script>
<!-- Styling for public area -->
<link rel="stylesheet" href="../static/css/admin_styling.css">
Reload the dashboard.php page on the browser. Now the error message that
remains is for just one file (admin_functions.php). We'll come to that soon.
Once in the backend, the user can create, read, update and delete users,
posts, and topics. Let's start with users. In your admin folder, create a file
named users.php
Now open users.php and add this code to it:
users.php:
This is all we will need to do in the users.php file. Creating, editing, and
deletion of a user will be done in this one file.
In your admin folder, create admin_functions.php and add this code to it:
admin_functions.php:
<?php
// Admin user variables
$admin_id = 0;
$isEditingUser = false;
$username = "";
$role = "";
$email = "";
// general variables
$errors = [];
/* - - - - - - - - - -
- Admin users actions
- - - - - - - - - - -*/
// if user clicks the create admin button
if (isset($_POST['create_admin'])) {
createAdmin($_POST);
}
// if user clicks the Edit admin button
if (isset($_GET['edit-admin'])) {
$isEditingUser = true;
$admin_id = $_GET['edit-admin'];
editAdmin($admin_id);
}
// if user clicks the update admin button
if (isset($_POST['update_admin'])) {
updateAdmin($_POST);
}
// if user clicks the Delete admin button
if (isset($_GET['delete-admin'])) {
$admin_id = $_GET['delete-admin'];
deleteAdmin($admin_id);
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* - Returns all admin users and their corresponding roles
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
function getAdminUsers(){
global $conn, $roles;
$sql = "SELECT * FROM users WHERE role IS NOT NULL";
$result = mysqli_query($conn, $sql);
$users = mysqli_fetch_all($result, MYSQLI_ASSOC);
return $users;
}
/* * * * * * * * * * * * * * * * * * * * *
* - Escapes form submitted value, hence, preventing SQL
injection
* * * * * * * * * * * * * * * * * * * * * */
function esc(String $value){
// bring the global db connect object into function
global $conn;
// remove empty space sorrounding string
$val = trim($value);
$val = mysqli_real_escape_string($conn, $value);
return $val;
}
// Receives a string like 'Some Sample String'
// and returns 'some-sample-string'
function makeSlug(String $string){
$string = strtolower($string);
$slug = preg_replace('/[^A-Za-z0-9-]+/', '-', $string);
return $slug;
}
?>
Reload the dashboard.php page on your browser and the error message is
gone.
Next is to include the navbar.php page and the menu.php page. These are
repeating segments of admin pages just as was the case with the public area.
navbar.php:
<div class="header">
<div class="logo">
<a href="<?php echo BASE_URL
.'admin/dashboard.php' ?>">
<h1>LifeBlog - Admin</h1>
</a>
</div>
<div class="user-info">
<span>Awa</span> <a href="<?php echo
BASE_URL . '/logout.php'; ?>" class="logout-btn">logout</a>
</div>
</div>
menu.php:
<div class="menu">
<div class="card">
<div class="card-header">
<h2>Actions</h2>
</div>
<div class="card-content">
<a href="<?php echo BASE_URL .
'admin/create_post.php' ?>">Create Posts</a>
<a href="<?php echo BASE_URL .
'admin/posts.php' ?>">Manage Posts</a>
<a href="<?php echo BASE_URL .
'admin/users.php' ?>">Manage Users</a>
<a href="<?php echo BASE_URL .
'admin/topics.php' ?>">Manage Topics</a>
</div>
</div>
</div>
/* * * * * * * * * *
* STYLING DEFAULTS
* * * * * * * * * */
* { margin: 0px; padding: 0px; }
a { text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: 'Noto Serif', serif; }
/* forms */
form { width: 60%; margin: 5px auto; padding-bottom: 50px; }
form input[type=file], input[type=email], input[type=password],
input[type=text],
form select, form textarea {
width: 100%;
display: block;
padding: 13px 13px;
font-size: 1em;
margin: 5px auto 10px;
border-radius: 3px;
box-sizing : border-box;
background: transparent;
border: 1px solid #3E606F;
}
input[type="checkbox"] { height: 20px; float: left; }
form button { float: right; margin-left: 24%; }
form input:focus { outline: none; }
label { margin-top: 20px; float: left; }
/* tables */
table { border-collapse: collapse; width: 70%; margin: 20px
auto; }
th, td { padding: 8px; text-align: left; border: 1px solid #ddd;
}
th { text-align: center;}
/* buttons */
.btn {
color: white;
background: #4E6166;
text-align: center;
border: none;
border-radius: 5px;
display: block;
letter-spacing: .1em;
padding: 13px 20px;
text-decoration: none;
}
/* * * * * * * * * *
* HEADER
* * * * * * * * * */
.header {
padding: 15px 45px;
font-family: 'Noto Serif', serif;
color: white;
background: black;
}
.header .logo { width: 50%; float: left; }
.header .logo h1 { color: white; }
.header .user-info { width: 10%; margin-top: 10px; float:
right;}
.header .logout-btn { color: red; text-decoration: none; }
.header:after{ content: ""; display: block; clear: both; }
/* * * * * * * * * *
* DASHBOARD
* * * * * * * * * */
.container {
width: 95%;
margin: 5px auto 50px;
border: 1px solid #BFBCB3;
padding: 10px 0px 50px;
}
.container:after { content: ""; display: block; clear: both; }
.container.dashboard h1 { text-align: center; margin: 25px; }
.container.dashboard .stats a {
display: inline-block;
padding: 30px;
margin: 5px;
width: 25%;
text-align: center;
border-radius: 3px;
border: 1px solid #BFBCB3;
}
.container.dashboard .stats a.first { margin-left: 25px; }
.container.dashboard .stats a:hover { cursor: pointer;
background-color: #E1E1E1; }
.container.dashboard .buttons { margin-left: 15px; }
.container.dashboard .buttons a {
display: inline-block;
margin: 10px;
text-decoration: none;
color: #444;
padding: 10px 25px;
border: none;
background-color: #0E7D92;
color: white;
}
/* * * * * * * * * *
* PAGE CONTENT
* * * * * * * * * */
.container.content .menu { width: 16%; float: left; padding:
40px 10px; }
/* Menu card */
.container.content .menu .card .card-header {
padding: 10px;
text-align: center;
border-radius: 3px 3px 0px 0px;
background: #3E606F;
}
.container.content .menu .card .card-header h2 { color: white; }
.container.content .menu .card .card-content a {
display: block;
box-sizing: border-box;
padding: 8px 10px;
border-bottom: 1px solid #e4e1e1;
color: #444;
}
.container.content .menu .card .card-content a:hover {
padding-left: 20px; background: #F9F9F9; transition: 0.1s;
}
/* Actions div (at the middle) */
.container.content .action { width: 35%; float: left; text-
align: center; }
.container.content .action form { width: 90%; }
.container.content .action .page-title { margin: 25px; }
.container.content .action.create-post-div { width: 80%; }
/* Table div (Displaying records from DB) */
.table-div { float: left; width: 47%; }
.table-div .message { width: 90%; margin-top: 20px; }
.table-div table { width: 90%; }
.table-div a.fa { color: white; padding: 3px; }
.table-div .edit { background: #004220; }
.table-div .delete { background: #F70E1A; }
.table-div .publish { background: red; }
.table-div .unpublish { background: green; }
/* * * * * * * * * *
* VALIDATION ERRORS
* * * * * * * * * */
.message {
width: 100%;
margin: 0px auto;
padding: 10px 0px;
color: #3c763d;
background: #dff0d8;
border: 1px solid #3c763d;
border-radius: 5px;
text-align: center;
}
.error {color: #a94442; background: #f2dede; border: 1px solid
#a94442; margin-bottom: 20px; }
.validation_errors p {text-align: left;margin-left: 10px;}
In your browser, go
to http://localhost/complete-blog-php/admin/users.php you'll see an error that
says file messages.php is not found. Create a file named messages.php in
your complete-blog-ph/includes folder and add this code in it:
<?php if (isset($_SESSION['message'])) : ?>
<div class="message" >
<p>
<?php
echo $_SESSION['message'];
unset($_SESSION['message']);
?>
</p>
</div>
<?php endif ?>
admin_functions.php:
/* - - - - - - - - - - - -
- Admin users functions
- - - - - - - - - - - - -*/
/* * * * * * * * * * * * * * * * * * * * * * *
* - Receives new admin data from form
* - Create new admin user
* - Returns all admin users with their roles
* * * * * * * * * * * * * * * * * * * * * * */
function createAdmin($request_values){
global $conn, $errors, $role, $username, $email;
$username = esc($request_values['username']);
$email = esc($request_values['email']);
$password = esc($request_values['password']);
$passwordConfirmation =
esc($request_values['passwordConfirmation']);
if(isset($request_values['role'])){
$role = esc($request_values['role']);
}
// form validation: ensure that the form is correctly
filled
if (empty($username)) { array_push($errors, "Uhmm...We
gonna need the username"); }
if (empty($email)) { array_push($errors, "Oops.. Email is
missing"); }
if (empty($role)) { array_push($errors, "Role is required
for admin users");}
if (empty($password)) { array_push($errors, "uh-oh you
forgot the password"); }
if ($password != $passwordConfirmation)
{ array_push($errors, "The two passwords do not match"); }
// Ensure that no user is registered twice.
// the email and usernames should be unique
$user_check_query = "SELECT * FROM users WHERE
username='$username'
OR email='$email'
LIMIT 1";
$result = mysqli_query($conn, $user_check_query);
$user = mysqli_fetch_assoc($result);
if ($user) { // if user exists
if ($user['username'] === $username) {
array_push($errors, "Username already exists");
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* - Receives admin request from form and updates in database
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
function updateAdmin($request_values){
global $conn, $errors, $role, $username, $isEditingUser,
$admin_id, $email;
// get id of the admin to be updated
$admin_id = $request_values['admin_id'];
// set edit state to false
$isEditingUser = false;
$username = esc($request_values['username']);
$email = esc($request_values['email']);
$password = esc($request_values['password']);
$passwordConfirmation =
esc($request_values['passwordConfirmation']);
if(isset($request_values['role'])){
$role = $request_values['role'];
}
// register user if there are no errors in the form
if (count($errors) == 0) {
//encrypt the password (security purposes)
$password = md5($password);
The code we just added has 3 main parts: initialization of admin user
variables, Admin user actions, and Admin user functions, in that order. This is
the same format in which we will add code for topics which is coming next. For
now, you can already create, read, update and delete a user.
complete-blog-php/admin/topics.php:
The following code has three sections. Each section has been labelled on top
using a comment and the three are variables, actions and functions. So in
your admin_functions.php file, add the following code to it but make sure you
split it accordingly as indicated below using the comments.
admin_functions.php:
<?php
// Admin user variables
// ... varaibles here ...
// Topics variables
$topic_id = 0;
$isEditingTopic = false;
$topic_name = "";
/* - - - - - - - - - -
- Admin users actions
- - - - - - - - - - -*/
// ...
/* - - - - - - - - - -
- Topic actions
- - - - - - - - - - -*/
// if user clicks the create topic button
if (isset($_POST['create_topic'])) { createTopic($_POST); }
// if user clicks the Edit topic button
if (isset($_GET['edit-topic'])) {
$isEditingTopic = true;
$topic_id = $_GET['edit-topic'];
editTopic($topic_id);
}
// if user clicks the update topic button
if (isset($_POST['update_topic'])) {
updateTopic($_POST);
}
// if user clicks the Delete topic button
if (isset($_GET['delete-topic'])) {
$topic_id = $_GET['delete-topic'];
deleteTopic($topic_id);
}
/* - - - - - - - - - - - -
- Admin users functions
- - - - - - - - - - - - -*/
// ...
/* - - - - - - - - - -
- Topics functions
- - - - - - - - - - -*/
// get all topics from DB
function getAllTopics() {
global $conn;
$sql = "SELECT * FROM topics";
$result = mysqli_query($conn, $sql);
$topics = mysqli_fetch_all($result, MYSQLI_ASSOC);
return $topics;
}
function createTopic($request_values){
global $conn, $errors, $topic_name;
$topic_name = esc($request_values['topic_name']);
// create slug: if topic is "Life Advice", return "life-
advice" as slug
$topic_slug = makeSlug($topic_name);
// validate form
if (empty($topic_name)) {
array_push($errors, "Topic name required");
}
// Ensure that no topic is saved twice.
$topic_check_query = "SELECT * FROM topics WHERE
slug='$topic_slug' LIMIT 1";
$result = mysqli_query($conn, $topic_check_query);
if (mysqli_num_rows($result) > 0) { // if topic exists
array_push($errors, "Topic already exists");
}
// register topic if there are no errors in the form
if (count($errors) == 0) {
$query = "INSERT INTO topics (name, slug)
VALUES('$topic_name',
'$topic_slug')";
mysqli_query($conn, $query);
Thanks for your patience. In the next part, we add a form for creating posts.
We use ckeditor to give a user the ability to add styling to texts, images, and
lists.
See you there!
Awa Melvine