How to create a blog in PHP and MySQL database

Posted on by codersaiful

This article describes to you how to build a complete blog from PHP and My SQL database. You can create, edit, update and published the PHP and MySQL database. Your Audience can browse blog articles catalog and click on any articles that they want to read.

Features

  • Two types of Users like – Admin & Normal Users are managed by user registration system.
  • The Admin area and public area separated from each other in the blog.
  • The admin user can only log in to admin area and in the general public area the normal user can only logged in.
  • Two types of admin exist in the admin area –
  • Admin:
  • Any post can create, update, published or delete
  • Topic can also create, delete, update or published
  • Admin can also delete, update or view other admin user.
  • Author
  • Author can create, update, and delete only their posts.
  • A particular topic is chosen for each post.
  • Each public post lists with author, features image, date and so on.

Implementation

Let’s start coding. Project name complete-blog-php. In our server directory (htdocs or WWW), create a folder named complete-blog-php.  In your choice text editor open this folder like- Sublime Text. Create a subfolder inside it: admin, includes and static.

In this application’s root folder, create a file named index.php               :

Open this folder and paste the following code in it:

<!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>

 

We include some Google Fonts links between the <head></head> tags. We also provide the link of our style file public_styling.css. Our entire application wrap with the container <div> that include navbar, footer sections of the page.

To view these go to: http://localhost/complete-blog-php/index.php.

For the styling of the site the static folders will hold. Inside the static folder create 3 folders: css, images, js. In the CSS subfolder you just create file: public_styling.css.

Open public_styling.css and paste the following code:

/****************
*** 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;
}

 

This code starts with default styling that is followed by navbar styling. We create the include folder as beginning we repeating the head sections, the footer and the navbar. We create a folders at the beginning named includes. Now we create three sections on this three folders head section.php, navbar.php and footer.php.

Go to the index.php file and include the <meta charset = “UTF – 8”> tag directly into <title> and cut it. The newly created file complete-blog-php/includes/head_section.php and paste the code in it. So, head_section.php file has following code –

<!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">
 

After that back in index.php file, and replace the code as following line –

 

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

The immediately follows this include line in the <title> tag. The include line is <title> tag in the head_section.php. In the index.php file indicates the comment and past navbar.php the following code –

 

<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>

Paste the following line –

<!-- navbar -->

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

Past in the footer.php file the following line –

<div class="footer">

<p>MyViewers &copy; <?php echo date('Y'); ?></p>

</div>

</div>

<!-- // container -->

</body>

</html>

Created config.php file as in index.php. now use variable ROOT_PATH in the included files. After all these changes index.php will look like this:

<!-- The first include should be config.php -->

<?php require_once('config.php') ?>

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

<title>LifeBlog | Home </title>

</head>

<body>

<!-- container - wraps whole page -->

<div class="container">

<!-- navbar -->

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

<!-- // navbar -->


<!-- banner -->

<?php include( ROOT_PATH . '/includes/banner.php') ?>

<!-- // banner -->


<!-- Page content -->

<div class="content">

<h2 class="content-title">Recent Articles</h2>

<hr>

<!-- more content still to come here ... -->

</div>

<!-- // Page content -->


<!-- footer -->

<?php include( ROOT_PATH . '/includes/footer.php') ?>

<!-- // footer -->

 

This is mainly the basic steps that set up in the public area. Hope you enjoy the tutorial session.

 

Posted in PHP

Leave a Reply