How to create a blog in PHP and MySQL database

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.

 

,

WordPress Meta Box for Beginner

Do you want to customize your WordPress theme/plugin to add additional information on your post/page? Then you need to use Meta Box on your WordPress. In this step by step article I’ll show you how to add Meta Box in WordPress for beginner.

What is Meta Box?

Meta Boxes are one of the most important feature of WordPress that allow you to add custom option to your WordPress page of post. In WordPress you can use category and tag which is given as default. But if you want to add more info about your product/page/post, then what do you need first?

In this case you can add custom meta box to show extra data to Page/Post or Post Type.

What is Meta Data?

The data we input in meta box is called meta data. More simply the value we input in meta box is a meta data. It can be number or text.

But, remember, we need to sanitize the date to make it secure.

How to add Meta Box in WordPress?

You need to register a function named add_meta_box to create a Meta Box in WordPress. This function includes the following syntax:

add_meta_box( $id, $title, $callback, $screen, $context, $priority, $callback_args)

Now we will create  a meta box for post type. I’m creating this file into themes functions.php file.

Just write the code into your themes functions.php file. But creating a unique php file for meta boxes will be better for practical use.

 

add_action("add_meta_boxes","my_meta");

 	function my_meta(){
    add_meta_box(
    "my_custom_meta",
    "My first meta box",
    "my_meta_box_mes",
    "post",
    "normal",
    "low"
    );
  } 
function my_meta_box_mes(){
  echo '<input type="text" |';
  
}

 

See how does it look

 

Custom Metabox

Saving Meta Data

You can also save your meta data adding a function. You can use a code like below

add_action("admin_init", "custom_metabox");

 	function custom_metabox(){
    add_meta_box(
    "Custom_metabox_01",
    "Custom Metabox",
    "custom_metabox_field",
    "post",
    "normal",
    "low"
    );
  } 
function custom_metabox_field(){
  global $post;
  
  $data = get_post_custom($post->ID);
  $val = isset($data['customm_input']) ? esc_attr($data['custom_input'] [0]) : 'no value';
  echo '<input type="text" name="custom_input" id="custom_input" value="" .$val. />';
  
}
add_action("save_post","save_detail");

function save_detail(){
  global $post;
  
};

You may need to show meta data in your single post. For this, edit your single.php file in your theme file.

Add the code below to show your Meta date in single post.

 

$custom_post_type = get_post_meta($post->ID, 'custom_input', true);
      
      echo $custom_post_type;

Here custom_input is my custom meta data id. Use your own ID to show your custom meta data.

So this is all for today. I hope you have understand adding and customizing WordPress Meta Box for Beginner. There are some other tutorials on basic php in Bengali language with you tube tutorial. You can check PHP Bangla Tutorial.