Inclusion of Bootstrap and HTML Markup

The purpose of the section is to implement the general styling that we have implemented which shows the inclusion of bootstrap and the HTML markup:

Inclusion of Bootstrap and HTML Markup

An issue that has not yet been addressed in paths. So far, we've been using relative paths for including files such as views in system/View.php. Let's fix that:

  1. Open webroot/index.php and add these lines after line 9:
    defined('DS') || define('DS', DIRECTORY_SEPARATOR);
define('APPDIR', realpath(__DIR__.'/../app/') .DS);
define('SYSTEMDIR', realpath(__DIR__.'/../system/') .DS);
define('PUBLICDIR', realpath(__DIR__) .DS);
define('ROOTDIR', realpath(__DIR__.'/../') .DS);

    These are constants that can be called anywhere in the framework. The first line defines a directory separator, for example, / or a depending on the machine:

    • APPDIR – points to the app folder
    • SYSTEMDIR – points to the system folder
    • PUBLICDIR – points to the webroot folder
    • ROOTDIR – points to the root project path

    Each one creates an absolute path to its endpoint.

  2. Now, let's fix the View class. Open system/View.php, and on line 24, replace:
    $filepath = "../app/views/$path.php";

    With:

    $filepath = APPDIR."views/$path.php";

    Note

    This allows for views to include other views from parent or child folders with no issues.

  3. Next, create a folder called layouts inside app/views. Create the following files inside app/views/layouts:
    • errors.php
    • footer.php
    • header.php
    • nav.php
    • errors.php
  4. Open errors.php and enter the following code:
    <?php
use AppHelpersSession;

if (isset($errors)) {
    foreach($errors as $error) {
        echo "<div class='alert alert-danger'>$error</div>";
    }
}

if (Session::get('success')) {
    echo "<div class='alert alert-success'>".Session::pull('success')."</div>";
}

    Note

    This includes a Session helper, which we will create shortly.

    The first if statement checks whether $errors exists, and if so, exit the loop and display an alert. The classes are Bootstrap classes (we will have this in header.php).

    The next if statement checks for the existence of a session called success, and if it exists, displays its contents. This is used to provide feedback to the user.

  5. Open header.php and enter the following code:
    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><?=(isset($title) ? $title.' - ' : '');?> Demo</
title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

    Note

    This sets the HTML document and optionally uses a $title, should it exist. Also include Bootstrap CDN CSS and JavaScript, as well as jQuery and a custom style.css file located in webroot/css/style.css – create this file.

  6. Now, open footer.php and close the container div and the body and html tags:

    Note

    For full code snippet, refer to Lesson 7.php file in the code files folder.

    </div>
</body>
</html>
  7. Now, open nav.php and enter the following code:
    <nav class="navbar navbar-default">
……
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
</nav>

    Note

    This is a navigation component for Bootstrap. This is a clean way to bring in a responsive menu for our admin pages. Note the two-page links which are Admin and Users. We will also provide a logout link.

  8. Now, open app/views/404.php and include the layout files:
    <?php include(APPDIR.'views/layouts/header.php');?>
404!
<?php include(APPDIR.'views/layouts/footer.php');?>

    Note

    This brings in the header and shows the page content, and ends with the footer included.

    Don't include the nav here. The 404 can be shown even when the user is not logged in.

    This makes a very clean way of organizing common layouts into your views so that when you need to change a global element, the layout views are where they were stored.

  9. Open the framework in the browser if it's not already running. Run the following command from Terminal when on the root:
    php –S localhost:8000 –t webroot

    Note

    You won't notice anything different, but you will be redirected to a page that does not exist: http://localhost:8000/example.

  10. You'll see a 404 page that includes the header and footer layouts. Look at the page source code – right-click and click on 'view page source'. You should see the following output:

    Note

    For full code snippet, refer to Lesson 7.php file in the code files folder.

    <!doctype html>
<html lang="en">
<head>
……
404!
</div>
</body>
</html>

These layouts will become more visible as we go further into this chapter.

In this section, we have covered how to set up file paths correctly. We covered how to set up Bootstrap properly, and we finally set up views for errors and global elements like header, footer, navigation, and errors.

In the next section, we will cover how to add security to our application and setting up a password recovery.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset