Post Ticker

6/recent/ticker-posts

How to build a complete blog application from scratch using PHP and MySQL databases

K.M. Ahsan Abdullah Monday, February 14, 2022

 I'm excited to be taking you through this long-awaited tutorial, finally. I'll show you "How to build a complete blog application from scratch using PHP and MySQL databases". A blog as you know it is an application where some users (Admin users) can create, edit, update and publish articles to make them available to the public to read and maybe comment on. Users and the public can browse through a catalog of these articles and click on any one to read more about the article and comment on them.

Features:

  • A user registration system that manages two types of users: Admin and Normal Users
  • The blog will have an admin area and a public area separate from each other
  • The admin area will be accessible only to logged in admin users and the public area to the normal users and the general public
  • In the admin section, two types of admins exist: 
    • Admin:
      • Can create, view, update, publish/unpublish and delete ANY post.
      • Can also create, view, update and delete topics.
      • An Admin user (and only an Admin user) can create another admin user or Author
      • Can view, update and delete other admin users
    • Author:
      • Can create, view, update and delete only posts created by themselves
      • They cannot publish a post. All publishing of posts is done by the Admin user.
  • Only published posts are displayed in the public area for viewing
  • Each post is created under a particular topic
  • A many-to-many relationship exists between posts and topics.
  • The public page lists posts; each post is displayed with a featured image, author, and date of creation.
  • The user can browse through all posts listings under a particular topic by clicking on the topic
  • When a user clicks on a post, they can view the full post and comment at the bottom of the posts.
  • A Disqus commenting system is implemented which allows users to comment using social media accounts with platforms like Facebook, GooglePlus, Twitter.
Recommended course: PHP Beginner To Master - CMS Project

We'll call the project complete-blog-php. On your server directory (htdocs or www), create a folder named complete-blog-php. Open this folder in a text editor of your choice, for example, Sublime Text. Create the following subfolders inside it: admin, includes, and static.


  • admin: Will hold files for the admin backend area. Files concerned with creating, viewing, updating and deleting posts, topics, users.
  • includes: Will hold files containing pieces of code that will be included into one or more other pages. E.g. Files for error display
  • static: Hold static files such as images, CSS stylesheets, Javascript.

<!DOCTYPE html>
<html>
<head>
	<!-- Google Fonts -->
	<link href="https://fonts.googleapis.com/css?family=Averia+Serif+Libre|Noto+Serif|Tangerine" rel="stylesheet">
	<!-- Styling for public area -->
	<link rel="stylesheet" href="static/css/public_styling.css">
	<meta charset="UTF-8">
	<title>LifeBlog | Home </title>
</head>
<body>
	<!-- container - wraps whole page -->
	<div class="container">
		<!-- navbar -->
		<div class="navbar">
			<div class="logo_div">
				<a href="index.php"><h1>LifeBlog</h1></a>
			</div>
			<ul>
			  <li><a class="active" href="index.php">Home</a></li>
			  <li><a href="#news">News</a></li>
			  <li><a href="#contact">Contact</a></li>
			  <li><a href="#about">About</a></li>
			</ul>
		</div>
		<!-- // navbar -->

		<!-- Page content -->
		<div class="content">
			<h2 class="content-title">Recent Articles</h2>
			<hr>
			<!-- more content still to come here ... -->
		</div>
		<!-- // Page content -->

		<!-- footer -->
		<div class="footer">
			<p>MyViewers &copy; <?php echo date('Y'); ?></p>
		</div>
		<!-- // footer -->

	</div>
	<!-- // container -->
</body>
</html>

/****************
*** DEFAULTS
*****************/
* { margin: 0px; padding: 0px; }

html { height: 100%; box-sizing: border-box; }
body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
}
/* HEADINGS DEFAULT */
h1, h2, h3, h4, h5, h6 { color: #444; font-family: 'Averia Serif Libre', cursive; }
a { text-decoration: none; }
ul, ol { margin-left: 40px; }
hr { margin: 10px 0px; opacity: .25; }

/* FORM DEFAULTS */
form h2 {
	margin: 25px auto;
	text-align: center;
	font-family: 'Averia Serif Libre', cursive;
}
form input {
	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;
}
form input:focus {
	outline: none;
}
/* BUTTON DEFAULT */
.btn {
	color: white;
	background: #4E6166;
	text-align: center;
	border: none;
	border-radius: 5px;
	display: block;
	letter-spacing: .1em;
	margin: 10px 0px;
	padding: 13px 20px;
	text-decoration: none;
}
.container {
	width: 80%;
	margin: 0px auto;
}
/* NAVBAR */
.navbar {
	margin: 0 auto;
    overflow: hidden;
	background-color: #3E606F;
    border-radius: 0px 0px 6px 6px;
}
.navbar ul {
    list-style-type: none;
    float: right;
}
.navbar ul li {
    float: left;
    font-family: 'Noto Serif', serif;
}
.navbar ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 20px 28px;
    text-decoration: none;
}
.navbar ul li a:hover {
	color: #B9E6F2;
    background-color: #334F5C;
}

/* LOGO */
.navbar .logo_div {
	float: left; 
	padding-top: 5px;
	padding-left: 40px;
}
.navbar .logo_div h1 {
	color: #B9E6F2;
	font-size: 3em;
	letter-spacing: 5px;
	font-weight: 100;
	font-family: 'Tangerine', cursive;
}

/* FOOTER */
.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  color: white;
  background-color: #73707D;
  text-align: center;
  width: 80%;
  margin: 20px auto 0px;
  padding: 20px 0px;
}


<head>
	<!-- Google Fonts -->
	<link href="https://fonts.googleapis.com/css?family=Averia+Serif+Libre|Noto+Serif|Tangerine" rel="stylesheet">
	<!-- Styling for public area -->
	<link rel="stylesheet" href="static/css/public_styling.css">
	<meta charset="UTF-8">
</head>


<?php require_once('includes/head_section.php') ?>


<div class="navbar">
	<div class="logo_div">
		<a href="index.php"><h1>LifeBlog</h1></a>
	</div>
	<ul>
	  <li><a class="active" href="index.php">Home</a></li>
	  <li><a href="#news">News</a></li>
	  <li><a href="#contact">Contact</a></li>
	  <li><a href="#about">About</a></li>
	</ul>
</div>


<!-- navbar -->
<?php include('includes/navbar.php') ?>

v

Tags:

Post a Comment

0 Comments

Thanks for your important comments. If this is your problem I will try to sloved this.