frontend operation

Now, you know almost everything you needed for procedural php. Let's get the data displayed in frontend. As you did in the backend dashboard file, you can separate the header and footer section and include them in all files in order to make your project organized. Basically, we need to use SQL SELECT statement with mutiple clauses to display required datain the frontend.

Header / Menu Section

Let's say, you have a table named pages in your database where you have added all the pages and you want those page titles to be displayed in your frontend's menu section. You simply need to use the SQL SELECT query while preserving connection to the database and print those data in the menu section as shown below.

// add database connection at the top of the page
<?php
require_once('connect.php');	
?>

<ul class="nav navbar-nav">
	<li><a href="index.php">HOME</a></li>
<?php
$query = "SELECT * FROM pages";
$result = mysqli_query($connect,$query);
foreach($result as $menu){
?>
	<li><a href="page.php?id=<?=$menu['id']?>"><?=ucfirst($menu['title']);?></a><li>
<?php } ?>
	<li><a href="contacts.php">CONTACTS</a></li>
</ul>	

Here, we made the first menu title static that returns us to the landing page whereas other links will take us to page.php where the content will be retrieved according to their id. Displaying page id in the uri is the best method while displaying pages as sometimes the page titles might get matched.

Display Posts

In the home page, we might need to display some short descriptions of multiple post and for that too we can use SQL SELECT statement as shown below.

<?php
$query = "SELECT * FROM posts ORDER BY postid DESC LIMIT 0,4";
$result = mysqli_query($connect, $query);
foreach($result as $post){
?>
<div class="container-fluid">
	<div class="col-sm-3">
		<h4><?=$post['title']?></h4>
		<img src="posts/<?=$post['image']?>" width="100%"/>
		<p><?=substr($post['description'],0,200)?></p>
		<a href="page.php?id=<?=$post['postid']?>" class="read">Read full story</a>		
	</div>
</div> 	
<?php } ?>

Here, the sql statement will fetch posts from posts table in descending order and that'll be the latest 4 while substr() function limits the character count to the defined number only. If you remember, the array index starts from 0 so, array index for the first data will always be 0.

If you need to display another 4, you can use the same statement with limit 4,8.

If you need to display the first few data, you can use ASC instead of DESC.

If you need to display single data from the order you can you 0,1.

If you want to display one with specific title or id, you can use WHERE clause followed by id or title.

In this way, you can display desired posts or pages with little descriptions and the link for those pages in the home page.

Single Page

Now, the next phase would be to display data in single page where the description section would be displayed in full details. We'll include the file containing header section with menus and that'll get us connected to the database too as connect.php file is already included there. So, the only thing remaining would be to retrieve the id from uri and display the post or page content with that id in the body. In case, you have both pages and posts table, it'll be better to have separate pages for those two in order to avoid conflict while displaying the contents so the links will also be separate as displayed below.

// for pages
<a href="page.php?id=<?=$post['postid']?>" class="read">Read full story</a>

// for posts		
<a href="post.php?id=<?=$post['postid']?>" class="read">Read full story</a>			

In such cases, you'll have two separate files to display pages and posts. The php codes will be identical but one will display the page contents while the other will display the post contents.

<?php	
$id = $_GET['id'];
$query = "SELECT * FROM pages WHERE id = " .$id;
$result = mysqli_query($connect,$query);
$data = mysqli_fetch_assoc($result);
?>

<div class="container">
	<h1><?=$data['title']?></h1>
	<img src="images/<?=$data['image']?>" width="100%"/>
	<p><?=$data['description']?></p>		
</div>

Here, mysqli_fetch_assoc() will fetch all the data from single row. This way you can display the page / post content in single page. The only difference would be the table name in the SQL statement if it was a page that displays posts.

Contacts Page

Since the contacts page will contain form to collect feedbacks and messages form visitors. We'll keep it static and add the link in our menu section. Now, you already know how to create a form and how to process it. So, you can give it a go yourself and add a page in your dashboard to view those messages. But, don't forget to use validation and encrypt special characters that might be sent via such forms to prevent sql injections.

0 Like 0 Dislike 0 Comment Share Tweet