PHP OOP S1E4: Materializecss – Menus and Pages

PHP OOP S1E4: Materializecss – Menus and Pages



Rating : 5/5 (1)




Introduction

PHP language is a server side programming language that's very popular and it's not hard to figure out why. It's relatively easier to get started and create things. However, most people end up writing code that is hard to maintain and read, code with no structure and very hard to debug in case of an error. In these series of tutorials we are doing, our aim is to help in this regard by using Object Oriented paradigm for the whole of our applications. This can help users coming from other object oriented languages like Java and C#. We are going to encapsulate everything in terms of objects and classes, hence making it easier to reuse code as well as extend on our apps.
In this tutoria we look at how to create a simple website using Object Oriented PHP. Our website will use MaterializeCSS to theme our applications,hence giving them a modern material design feel. We see how to switch through different pages via Material NavigationBar. Each page is encapsulated into a class. These paegs derive from the base MasterPage class, hence inheriting menus,navbar and footer.

Tools Used

Language : PHP 7, HTML, CSS
Platform : Backend and Fronted Web
IDE : PHPStorm
Server : Uniform Server/WAMP/Xampp
Topics : Object Oriented PHP, PHP Classes, Bootstrap Menus

Questions this Project answers.

  • PHP Object Oriented examples full.
  • How to switch through different pages with PHP via menus/navbar.
  • Using Materializecss with PHP.
  • PHP pass data between different pages.
  • PHP material design example.
  • PHP, HTML and CSS full example.

Libraries Used

These are the third party CSS and JS used in this project.

  • Materialize.css

Screenshot

  • Here's the screenshot of the project.
    PHP Material Menus and Pages

Project Structure

  • Here's the structure of the project.

PHP Menus and Pages Structure

Source Code

Lets have a look at the source code.

Constants.phpComponents.phpMasterPage.phpStellar.phpGalactic.phpPlanetray.phpIndex.phpVideo/DemoDownload
  • Our constants class.
  • Will hold website constants like sitename and baseurl.
<?php
/**
 * Created by Oclemy.
 * User: Hp
 * Date: 7/31/2017
 * Time: 5:56 PM
 */
class Constants
{
    const SITE_TITLE = 'Camposha.info';
    const SITE_BASE_URL = 'http://localhost/projects/MaterializeNavbar';
}

 

  • Our Components class.
  • Will contain functions that encapsulate HTML elements/components.
  • Defines the html definitions of menu as well as jumbotron.
<?php
/**
 * THIS CLASS ENCAPSULATES THE HTML ELEMENTS/COMPONENTS THAT WE USE. EACH FUCNTION RETURNS A COMPONENT.
 * Created by PhpStorm.
 * User: Hp
 * Date: 7/31/2017
 * Time: 5:56 PM
 */
require_once('classes/Constants.php');
class Components
{
    /*
     * SHOW NAVIGATION BAR AND MENU ITEMS
     */
    public static function printNavbar($navbarItems)
    {
        $openNavbar = '<nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">' . Constants::SITE_TITLE . '</a>
      <ul class="right hide-on-med-and-down">
     <li><a href="'.Constants::SITE_BASE_URL.'">Home</a></li>
      ';
        $closeNavbar = '</ul>
      <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
    </div>
  </nav>';
        //OPEN NAVIGATIONBAR
        echo $openNavbar;
        //PRINT MENU ITEMS
        if (isset($navbarItems)) {
            foreach ($navbarItems as $navbarItem) {
                echo '<li><a href="'.Constants::SITE_BASE_URL.'/'.$navbarItem.'.php">' . $navbarItem . '</a></li>';
            }
        }
        //CLOSE NAVIGATIONBAR
        echo $closeNavbar;
    }
    public static function printInfoSection($info)
    {
        echo '
         <div class="section no-pad-bot" id="index-banner">
    <div class="container">
      <br><br>
      <h1 class="header center orange-text">'.$info["header"].'</h1>
      <div class="row center">
        <h5 class="header col s12 light">'.$info["description"].'</h5>
      </div>
      <div class="row center">
        <a href="http://camposha.info/" id="download-button" class="btn-large waves-effect waves-light orange">Get Started</a>
      </div>
      <br><br>
    </div>
  </div>
        ';
    }
}

 

  • Our Master Page class.
  • Defines the html definitions of site header and site footer.
  • Also shows the menu in navbar.
  • Any page that derives from this class will have the master site layout applied to it.
<?php
/**
 * MASTER PAGE CLASS. THIS CLASS SHALL GET APPLIED TO ANY PAGE AS LONG AS IT INHERITS FROM THIS CLASS
 * Created by Oclemy.
 * User: Hp
 * Date: 7/31/2017
 * Time: 5:56 PM
 */
require_once ('classes/Components.php');
require_once ('classes/Constants.php');
/**
 * Class MasterPage
 */
class MasterPage
{
    /**
     * MasterPage constructor.
     */
    public function __construct($pageTitle)
    {
        $this->printHeader($pageTitle);
    }
    public function __destruct()
    {
        $this->printFooter();
    }
    private function printHeader($title)
    {
        if (!isset($title)) {
            $title = '';
        }
        $site_header = '
       <!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
  <title>'.Constants::SITE_TITLE.'</title>
  <!-- CSS  -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
        ';
        echo $site_header;
        //PRINT MENU
        Components::printNavbar(array(
            "Planetary",
            "Stellar",
            "Galactic"));
    }
    /*
    1.FOOTER HTML TAGS
    */
    private function printFooter()
    {
        $site_footer = '
       <footer class="page-footer orange">
    <div class="container">
      <div class="row">
        <div class="col l6 s12">
          <h5 class="white-text">Company Bio</h5>
          <p class="grey-text text-lighten-4">Galactic News brings the latest planetary, stellar and galactic news.</p>
        </div>
        <div class="col l3 s12">
          <h5 class="white-text">Reach Us</h5>
          <ul>
            <li><a class="white-text" href="#!">About Us</a></li>
            <li><a class="white-text" href="#!">Contat Us</a></li>
            <li><a class="white-text" href="#!">News</a></li>
            <li><a class="white-text" href="#!">Terms</a></li>
          </ul>
        </div>
        <div class="col l3 s12">
          <h5 class="white-text">Connect</h5>
          <ul>
            <li><a class="white-text" href="#!">Facebook</a></li>
            <li><a class="white-text" href="#!">Twitter</a></li>
            <li><a class="white-text" href="#!">Linkedn</a></li>
            <li><a class="white-text" href="#!">Google Plus</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="container">
      Made by <a class="orange-text text-lighten-3" href="http://camposha.info">Camposha</a>
      </div>
    </div>
  </footer>
  <!--  Scripts-->
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="js/materialize.js"></script>
  <script src="js/init.js"></script>
  </body>
</html>
        ';
        echo $site_footer;
    }
}

 

  • Our Stellar class.
  • Derives from MasterPage.
  • Shows jumbotron, passing in an associative array.
<?php
/**
 * Created by PhpStorm.
 * User: Hp
 * Date: 7/31/2017
 * Time: 6:57 PM
 */
require_once('classes/MasterPage.php');
class Stellar extends MasterPage
{
    /*
   CONSTRUCTOR
   */
    public function __construct()
    {
        parent::__construct($this->__toString());
    }
    /*
   PAGE TAG
   */
    public function __toString()
    {
        return 'Stellar';
    }
    public function show()
    {
        Components::printInfoSection(array('header'=>'Stellar News','description'=>'Get the Latest Stellar News here.'));
    }
}
/*
*SHOW PAGE
*/
$s = new Stellar();
$s->show();

 

  • Our Galactic class.
  • Derives from MasterPage.
  • Shows jumbotron, passing in an associative array.
<?php
/**
 * Created by PhpStorm.
 * User: Hp
 * Date: 7/31/2017
 * Time: 6:57 PM
 */
require_once('classes/MasterPage.php');
class Galactic extends MasterPage
{
    /*
   CONSTRUCTOR
   */
    public function __construct()
    {
        parent::__construct($this->__toString());
    }
    /*
   PAGE TAG
   */
    public function __toString()
    {
        return 'Galactic';
    }
    public function show()
    {
        Components::printInfoSection(array('header'=>'Galatic News','description'=>'Get the Latest Galactic News here.'));
    }
}
/*
*SHOW PAGE
*/
$g = new Galactic();
$g->show();

 

  • Our Planetary class.
  • Derives from MasterPage.
  • Shows jumbotron, passing in an associative array.
<?php
/**
 * Created by PhpStorm.
 * User: Hp
 * Date: 7/31/2017
 * Time: 6:57 PM
 */
require_once('classes/MasterPage.php');
class Planetary extends MasterPage
{
    /*
   CONSTRUCTOR
   */
    public function __construct()
    {
        parent::__construct($this->__toString());
    }
    /*
   PAGE TAG
   */
    public function __toString()
    {
        return 'Planetary';
    }
    public function show()
    {
        Components::printInfoSection(array('header'=>'Planetary News','description'=>'Get the Latest Planetary News here.'));
    }
}
/*
*SHOW PAGE
*/
$p = new Planetary();
$p->show();

 

  • Our Homepage class.
  • Derives from MasterPage.
  • Shows jumbotron in homepage, passing in an associative array.
<?php
/**
 * Created by PhpStorm.
 * User: Hp
 * Date: 7/31/2017
 * Time: 5:54 PM
 */
require_once('classes/MasterPage.php');
class Home extends MasterPage
{
    /*
   CONSTRUCTOR
   */
    public function __construct()
    {
        parent::__construct($this->__toString());
    }
    /*
   PAGE TAG
   */
    public function __toString()
    {
        return 'Home';
    }
    public function show()
    {
        Components::printInfoSection(array('header'=>'Cosmic News','description'=>'Get the Latest Cosmic News daily.'));
    }
}
/*
*SHOW HOMEPAGE
*/
$home = new Home();
$home->show();

 

  • Video version of this tutorial.

PHP OOP S1E4 : Materializecss - Navigate Menus/Pages

  • Download the Project below:
Download

How to Download and Run.

  1. Download the project above.
  2. You'll get a zipped file,extract it.
  3. Place it in the root directory of your server.
  4. Go to constants.php and change the baseurl to point to your projects location in the server.
  5. Make sure server is running. Point the browser to that base url to see your site.
  6. That's it.

More

  • Visit our channel for more examples like these.
  • Lets share tips and ideas in our Facebook Page.

Oclemy,Cheers.



Rating :

    Leave a Reply

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

    eleven − 6 =

    COMMENTS