Simple application to demonstrate dynamic site navigation bar from database in PHP in a very easy and simple way.
This can be done in many ways but this is the most simple way to do this using one table to store all the values
Just follow the codes and create your connection file first
Create the database of your desired name and paste this sql code there
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
CREATE TABLE `menus` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`parent_id` int(11) NOT NULL,
`name` varchar(20) NOT NULL,
`visible` tinyint(1) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=87 ;
--
-- Dumping data for table `menus`
--
INSERT INTO `menus` VALUES(1, 0, 'Home', 1);
INSERT INTO `menus` VALUES(2, 0, 'About', 1);
INSERT INTO `menus` VALUES(3, 0, 'Portfolio', 1);
INSERT INTO `menus` VALUES(11, 0, 'Mission', 1);
INSERT INTO `menus` VALUES(10, 3, 'Development', 1);
INSERT INTO `menus` VALUES(9, 0, 'Contact', 1);
INSERT INTO `menus` VALUES(84, 0, 'ramesh', 1);
INSERT INTO `menus` VALUES(85, 84, 'kumar', 1);
INSERT INTO `menus` VALUES(86, 3, 'hello', 1);
INSERT INTO `menus` VALUES(83, 2, 'llpp', 1);
INSERT INTO `menus` VALUES(82, 0, 'uuuuu', 1);
1. Create your own conn.php
<?php
$server = "localhost";
$user = "root" //// you username
$pass = ""; ///// your password
$db_name = "your_databse_name"; //// put your database name here
$con = mysql_connect($server,$user,$pass)
or die("Server not reachable");
$db = mysql_select_db($db_name,$con);
?>
Our Index.php
<?php
require_once 'conn.php';
include 'nav_func.php';
$errors=array();
if(isset($_POST['ADD']))
{
$par = addslashes(trim($_POST['par']));
//// checking for only alphbets in php
if(!empty($par))
{
if(only_alpha($par) == true)
{
$errors[]=insert_par(0,$par);
}
else{
$errors[] ="<font color='red'>Only characters are allowed</font>";
}
}
else{
$errors[] ="<font color='red'>Enter your desired menu name</font>";
}
}
if(isset($_POST['Sub']))
{
$parent = $_POST['cat_id'];
$sub_cat = addslashes(trim($_POST['sub_cat']));
if(!empty($sub_cat))
{
if(only_alpha($sub_cat) == true)
{
$errors[]=insert_par($parent,$sub_cat);
}
else{
$errors[] ="<font color='red'>Only characters are allowed for subcategory</font>";
}
}
else{
$errors[] ="<font color='red'>Enter your desired subcategory name</font>";
}
}
?>
<!doctype>
<html>
<head>
<title>
Dynamic Nav Menu From Database
</title>
<script language="Javascript" type="text/javascript">
function onlyAlphabets(e, t) {
try {
if (window.event) {
var charCode = window.event.keyCode;
}
else if (e) {
var charCode = e.which;
}
else { return true; }
if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
return true;
else
return false;
}
catch (err) {
alert(err.Description);
}
}
</script>
<style>
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
background: #E3CAA1;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
header{
font-family:Baskerville;
font-size:40px;
margin-bottom:20px;
background-color:red;
color:#fff;
}
footer{
font-family:Baskerville;
font-size:18px;
margin-top:100px;
background-color:red;
color:#fff;
}
.links{
width:600px;
margin-top:200px;
margin-bottom:60px;
}
#left{
float:left;
width:300px;
}
#right{
border-left:2px solid green;
}
</style>
</head>
<body>
<header>Dynamic Navigation Menubar From Database Using PHP</header>
<ul>
<?php echo get_nav(); ?>
</ul>
<center>
<div class='links'>
<form method='post'>
<table id='left'>
<tr><th colspan='2' align='left'>Insert Parent Category</th></tr>
<tr><td colspan='2'><?php foreach($errors as $err){echo $err;}?></td></tr>
<tr><td>Insert Parent Nav</td><td><input type='text' name='par' required maxlength='8' onkeypress="return onlyAlphabets(event,this);"></td></tr>
<tr><td><input type='submit' name='ADD' value='Add Parent'></td></tr>
</table>
</form>
<form method='post'>
<table id='right'>
<tr><th colspan='2' align='left'>Insert Sub-Category</th></tr>
<?php
echo create_nav_option();
?>
<tr>
<td>Insert Sub Menu</td>
<td><input type='text' name='sub_cat' required maxlength='15' onkeypress="return onlyAlphabets(event,this);"></td>
</tr>
<tr>
<td><input type='submit' name='Sub' value='Add Sub Category'></td>
</tr>
</table>
</form>
</center>
</div>
<footer>© - 2014 .php4allu.blogspot.com production</footer>
</body>
</html>
2. Our nav_func.php
<?php
function get_nav(){
$query = "select * from menus where parent_id='0' and visible='1'";
$result = mysql_query($query)
or die(mysql_error());
while($row=mysql_fetch_array($result))
{
echo "<li>".$row['name'];
/////get child menu nif exists
$get_child = "select name from menus where parent_id='".$row['id']."' and visible='1'";
$res = mysql_query($get_child)
or die(mysql_error());
$numrows = mysql_num_rows($res);
if($numrows > 0)
{
echo "<ul>";
while($row=mysql_fetch_array($res))
{
echo "<li>".$row['name']."</li>";
}
echo "</ul></li>";
}
else{
echo "</li>";
}
}
}
function create_nav_option(){
$query = "select * from menus where parent_id='0' and visible='1' and id!='1'";
$result = mysql_query($query);
$output = "<tr><td>Select Category</td><td><select name='cat_id'>";
while($row=mysql_fetch_array($result))
{
$output .="<option value='".$row['id']."'>".$row['name']."</option>";
}
$output .="</select></td>";
return $output;
}
function insert_par($parent_id,$name){
$insert = "insert into menus (parent_id,name,visible) values('$parent_id','$name','1')";
$result = mysql_query($insert);
if($result)
{
return "<font color='green'>Parent menu inserted successfully</font>";
}
else{
return "<font color='red'>Something went wrong</font>";
}
}
function only_alpha($menu){
if(ctype_alpha($menu))
{
return true;
}
else{
false;
}
}
?>
LIVE DEMO
This can be done in many ways but this is the most simple way to do this using one table to store all the values
Just follow the codes and create your connection file first
Create the database of your desired name and paste this sql code there
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
CREATE TABLE `menus` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`parent_id` int(11) NOT NULL,
`name` varchar(20) NOT NULL,
`visible` tinyint(1) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=87 ;
--
-- Dumping data for table `menus`
--
INSERT INTO `menus` VALUES(1, 0, 'Home', 1);
INSERT INTO `menus` VALUES(2, 0, 'About', 1);
INSERT INTO `menus` VALUES(3, 0, 'Portfolio', 1);
INSERT INTO `menus` VALUES(11, 0, 'Mission', 1);
INSERT INTO `menus` VALUES(10, 3, 'Development', 1);
INSERT INTO `menus` VALUES(9, 0, 'Contact', 1);
INSERT INTO `menus` VALUES(84, 0, 'ramesh', 1);
INSERT INTO `menus` VALUES(85, 84, 'kumar', 1);
INSERT INTO `menus` VALUES(86, 3, 'hello', 1);
INSERT INTO `menus` VALUES(83, 2, 'llpp', 1);
INSERT INTO `menus` VALUES(82, 0, 'uuuuu', 1);
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
1. Create your own conn.php
<?php
$server = "localhost";
$user = "root" //// you username
$pass = ""; ///// your password
$db_name = "your_databse_name"; //// put your database name here
$con = mysql_connect($server,$user,$pass)
or die("Server not reachable");
$db = mysql_select_db($db_name,$con);
?>
Our Index.php
<?php
require_once 'conn.php';
include 'nav_func.php';
$errors=array();
if(isset($_POST['ADD']))
{
$par = addslashes(trim($_POST['par']));
//// checking for only alphbets in php
if(!empty($par))
{
if(only_alpha($par) == true)
{
$errors[]=insert_par(0,$par);
}
else{
$errors[] ="<font color='red'>Only characters are allowed</font>";
}
}
else{
$errors[] ="<font color='red'>Enter your desired menu name</font>";
}
}
if(isset($_POST['Sub']))
{
$parent = $_POST['cat_id'];
$sub_cat = addslashes(trim($_POST['sub_cat']));
if(!empty($sub_cat))
{
if(only_alpha($sub_cat) == true)
{
$errors[]=insert_par($parent,$sub_cat);
}
else{
$errors[] ="<font color='red'>Only characters are allowed for subcategory</font>";
}
}
else{
$errors[] ="<font color='red'>Enter your desired subcategory name</font>";
}
}
?>
<!doctype>
<html>
<head>
<title>
Dynamic Nav Menu From Database
</title>
<script language="Javascript" type="text/javascript">
function onlyAlphabets(e, t) {
try {
if (window.event) {
var charCode = window.event.keyCode;
}
else if (e) {
var charCode = e.which;
}
else { return true; }
if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
return true;
else
return false;
}
catch (err) {
alert(err.Description);
}
}
</script>
<style>
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
background: #E3CAA1;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
header{
font-family:Baskerville;
font-size:40px;
margin-bottom:20px;
background-color:red;
color:#fff;
}
footer{
font-family:Baskerville;
font-size:18px;
margin-top:100px;
background-color:red;
color:#fff;
}
.links{
width:600px;
margin-top:200px;
margin-bottom:60px;
}
#left{
float:left;
width:300px;
}
#right{
border-left:2px solid green;
}
</style>
</head>
<body>
<header>Dynamic Navigation Menubar From Database Using PHP</header>
<ul>
<?php echo get_nav(); ?>
</ul>
<center>
<div class='links'>
<form method='post'>
<table id='left'>
<tr><th colspan='2' align='left'>Insert Parent Category</th></tr>
<tr><td colspan='2'><?php foreach($errors as $err){echo $err;}?></td></tr>
<tr><td>Insert Parent Nav</td><td><input type='text' name='par' required maxlength='8' onkeypress="return onlyAlphabets(event,this);"></td></tr>
<tr><td><input type='submit' name='ADD' value='Add Parent'></td></tr>
</table>
</form>
<form method='post'>
<table id='right'>
<tr><th colspan='2' align='left'>Insert Sub-Category</th></tr>
<?php
echo create_nav_option();
?>
<tr>
<td>Insert Sub Menu</td>
<td><input type='text' name='sub_cat' required maxlength='15' onkeypress="return onlyAlphabets(event,this);"></td>
</tr>
<tr>
<td><input type='submit' name='Sub' value='Add Sub Category'></td>
</tr>
</table>
</form>
</center>
</div>
<footer>© - 2014 .php4allu.blogspot.com production</footer>
</body>
</html>
2. Our nav_func.php
<?php
function get_nav(){
$query = "select * from menus where parent_id='0' and visible='1'";
$result = mysql_query($query)
or die(mysql_error());
while($row=mysql_fetch_array($result))
{
echo "<li>".$row['name'];
/////get child menu nif exists
$get_child = "select name from menus where parent_id='".$row['id']."' and visible='1'";
$res = mysql_query($get_child)
or die(mysql_error());
$numrows = mysql_num_rows($res);
if($numrows > 0)
{
echo "<ul>";
while($row=mysql_fetch_array($res))
{
echo "<li>".$row['name']."</li>";
}
echo "</ul></li>";
}
else{
echo "</li>";
}
}
}
function create_nav_option(){
$query = "select * from menus where parent_id='0' and visible='1' and id!='1'";
$result = mysql_query($query);
$output = "<tr><td>Select Category</td><td><select name='cat_id'>";
while($row=mysql_fetch_array($result))
{
$output .="<option value='".$row['id']."'>".$row['name']."</option>";
}
$output .="</select></td>";
return $output;
}
function insert_par($parent_id,$name){
$insert = "insert into menus (parent_id,name,visible) values('$parent_id','$name','1')";
$result = mysql_query($insert);
if($result)
{
return "<font color='green'>Parent menu inserted successfully</font>";
}
else{
return "<font color='red'>Something went wrong</font>";
}
}
function only_alpha($menu){
if(ctype_alpha($menu))
{
return true;
}
else{
false;
}
}
?>
LIVE DEMO
how i create conn.php and what database create i have created database but this is not working pleas solve my problame
ReplyDeleteIt doesn' t matter what name you have given to your database any name you can give and just change the name of your database in the conn.php file that's it...
DeleteIf you have problem -- https://www.facebook.com/groups/644359705655287/