PHP +jQuery + Bootstrap 4 : Fill DropDown With Array

PHP +jQuery + Bootstrap 4 : Fill DropDown With Array



Language :
Rating : 5/5 (4)




In this example we see how to fill a bootstrap 4 dropdown component with items.The aim is to see how to work with both php and bootstrap as well as jquery.

Intro

  • Beginner PHP example tutorial right here.
  • We fill a dropdwon menu with menu items.
  • The menu items come from php simple array.
  • 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 use Bootstrap,jquery and php.
  • Pass data from php to html.
  • Fill dropdown menu with data from a php array
  • How to se PHP with HTML.

Tools Used

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

Source Code

  • Here's the source code.

Index.php

  • This is the php file we run.
  • It ads the homepage.php as a dependency,instantiates and invokes its functions.

 

<?php
/**
 * @author Oclemy
 * @copyright 2017
 */
require_once ('/Homepage.php');
$home = new Homepage();
$home->openHTMLTags();
$home->showNav(array(
    "Home",
    "News",
    "About Us",
    "Contact Us"));
$home->showDropDown(array(
    "Home",
    "News",
    "About Us",
    "Contact Us"));
    
$home->closeHTMLTags();
?>

 

 

 

Homepage.php

  • Represents our homepage.
  • Is actually a class with several functions.

 

<?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>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="Main.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>");
    }
    /*
    SHOW ALERT DIALOG PASSING IN MESSAGE DYNAMICALLY
    */
    public function showDropDown($dropDownItems)
    {        
           echo('<div class="dropdown">
  <button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Go To
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">');
  
  
    //LOOP THROUGH DROPDOWN ARRAY ADDING ITEMS
        foreach ($dropDownItems as $dropDownItem) {
            //PRINT DORPDOWN ITEMS
            echo('<a class="dropdown-item" href="#">'.$dropDownItem.'</a>');
        }
        
        echo('</div></div>');
            
    }
    /*
    CLOSE HTML TAGS
    */
    public function closeHTMLTags()
    {
        $closingTags = '</div></body></html>';
        echo ($closingTags);
    }
}
?>

 

 

Main.js

  • Our javascript file.
  • Initializes the dropdown.

 

// WHEN PAGE IS READY
$(document).ready(function() {
   $('.dropdown-toggle').dropdown();
    
});

 

 

 

Result

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

PHP Bootstrap Dropdown 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 *

    three × 3 =

    COMMENTS