PHP + Bootstrap 4 : Fill NavBar with Array

PHP + Bootstrap 4 : Fill NavBar with Array



Language :
Rating : 5/5 (4)




This is our first PHP + Bootstrap 4 example.We want to see how to work with PHP,JQuery and Bootstrap 4.Here we see how to fill a bootstrap navbar with navigation items from an array in a simple array.

Intro

  • In this example we simply populate menu items in a bootstrap navigation bar.
  • The menu items we get them from a PHP array.
  • We mark the first item as active.
  • Beginner PHP example tutorial right here.
  • We've used PHPDesigner  as our IDE.
  • The code is well commented for easier understanding.

Common Questions we answer

With this simple example we explore the following :

  • How to se PHP with Bootstrap.
  • Navbar in bootstrap.
  • PHP arrays and bootstrap.
  • Pass data from php to html.
  • How to use PHP with HTML.

 

Tools Used

  • IDE : PHPDesigner
  • OS : Windows 8.1
  • LANGUAGES : PHP/HTML

Source Code

  • Here's the source code.

Index.php

  • We instantiate homepage class and call its functions.

 

<?php
/**
 * @author Oclemy
 * @copyright 2017
 */
 
 //IMPORT HOMEPAGE PHP FILE
require_once ('/Homepage.php');
//INSTANTIATE HOMPEAGE CLASS
$home = new Homepage();
//OPEN HTML TAGS
$home->openHTMLTags();
//SHOW NAVIGATION BAR WITH ARRAY DATA
$home->showNav(array(
    "Home",
    "News",
    "About Us",
    "Contact Us"));
    
//CLOSE HTML TAGS    
$home->closeHTMLTags();
?>

 

 

 

Homepage.php

  • This class represents our homepage.
  • We write functions that print our html tags in our page.
  • One of the functions takes an array and displays the array items in our bootstrap navbar.

 

<?php
/**
 * @author Oclemy
 * @copyright 2017
 */
class Homepage
{
 //SITE TITLE CONSTANT
    const SITE_TITLE = 'Camposha.info';
    /*
    OPEN HTML,TITLE AND HEADER TAGS
    */
    public function openHTMLTags()
    {
        $openingTags = '<!DOCTYPE html><html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>' . self::SITE_TITLE . '</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    
  </head>
  <body>
  <div class="container-fluid">';
        echo ($openingTags);
        echo ("</br>");
    }
     /*
    SHOW NAVIAGTION BAR AND ITEMS FROM AN ARRAY
    */
    public function showNav($menuItems)
    {
        echo ('<nav class="navbar navbar-toggleable-md navbar-inverse bg-primary"> 
        <a class="navbar-brand" href="#">' . self::SITE_TITLE . '</a>
  <div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav">');
        $firstItem = true;
        
        //ADD MENU ITEMS FROM ARRAY
        foreach ($menuItems as $menuItem) {
            
            //MAKE FIRST ITEM THE ACTIV ITEM
            if ($firstItem) {
                print ('<li class="nav-item active"><a class="nav-link" href="#">' . $menuItem .
                    '<span class="sr-only">(current)</span></a></li>');
                $firstItem = false;
            } else {
                print ('<li class="nav-item"><a class="nav-link" href="#">' . $menuItem .
                    '</a></li>');
            }
        }
        
        //CLOSE OUR LIST
        echo ('</ul></div></nav>');
        echo ("</br>");
        echo ("</br>");
    }
   
    /*
    CLOSE HTML TAGS
    */
    public function closeHTMLTags()
    {
        $closingTags = '</div></body></html>';
        echo ($closingTags);
    }
}
?>

 

 

 

Result

  • Here's what we get when we run the project.
PHP Bootstrap Navbar Array

PHP Bootstrap Navbar Array

 

How To Run

  • Just copy the project above.
  • Open whatever editor or ide you like,say notepad++.
  • Create an empty file and paste the above code.
  • Save with .PHP extension e.g test.php.
  • Save to the root directory of your server,say wamp server.
  • Navigate over to that directory in the browser as in : localhost/test.php.

 

More

YouTube

  • Visit our channel for more examples like these.

Facebook

Related

Oclemy,Cheers.



Rating :

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    17 + 18 =

    COMMENTS