Dynamically Displaying the Twitter Bootstrap Version in a CakePHP Page

Written by James McDonald

June 12, 2019

This is the CakePHP Code that I embed in a page to display the current version of Bootstrap CSS that is in use on the website.

Assuming that JQuery is included somewhere on the page all that is required is a target div and then a snippet of javascript created using CakePHP scriptStart scriptEnd feature which will allow dynamic specification of the path to bootstrap.min.css and javascript to fetch and parse for the v4.3.1 or which ever version string it is

 <tr>
   <th>Twitter Bootstrap Version</th>
        <td>
          <div id="twbs_version"></div>
            <?php
                $this->Html->scriptStart(['block' => 'from_view']);
                    echo '$(function () {' .
                    '$.get("' . $this->Url->css('bootstrap.min.css') . 
                    '", function (data) {' .
                    'var version = data.match(/v[.\d]+[.\d]/);' .
                    '$("#twbs_version").html(version); }); });';
                $this->Html->scriptEnd();
            ?>
    </td>
</tr>

Here is the javascript that is output by CakePHP to a block named ‘from_view’ see the Layout.ctp

<script>
    $(function () { 
        $.get(
            "/css/bootstrap.min.css", 
            function (data) {
                var version = data.match(/v[.\d]+[.\d]/);
                $("#twbs_version").html(version); 
            }
        );
    });
</script>

Layout.ctp

<?php
/**
 * CakePHP(tm) : Rapid Development Framework (http://cakephp.org)
 * Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org)
 *
 * Licensed under The MIT License
 * For full copyright and license information, please see the LICENSE.txt
 * Redistributions of files must retain the above copyright notice.
 *
 * @copyright     Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org)
 * @link          http://cakephp.org CakePHP(tm) Project
 * @since         0.10.0
 * @license       http://www.opensource.org/licenses/mit-license.php MIT License
 */

use Cake\Core\Configure;
$appDescription = Configure::read('appLongName');
$appShortDescription = Configure::read('appShortName');
?>
<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>
        <?= $this->Html->charset() ?>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title><?= $appShortDescription ?> : <?= $this->fetch('title') ?></title>
        <?=
        $this->Html->meta(
    'favicon',
    'img/logo/logo4-120.png',
    ['type' => 'icon']
); ?>
         <?=  $this->Html->meta('description', $appDescription ); ?>
         <?=  $this->Html->meta([
            'http-equiv' => "Content-Language",
            'content' => "en"
            ]); ?>
	<?= $this->Html->meta('google', 'notranslate'); ?>


        <?=  $this->Html->meta([
            'property' => "og:title",
            'content' => $appDescription
            ]); ?>

        <?=  $this->Html->meta([
            'property' => "og:description",
            'content' => $appDescription
            ]); ?>

        <?=  $this->Html->meta([
            'property' => "og:url",
            'content' => $this->Url->build('/', true)
            ]); ?>

        <?= $this->Html->meta(['name' => 'robots', 'content' => "noindex,nofollow" ]) ?>
        <?=  $this->Html->meta([
            'property' => "og:image",
            'content' => $this->Url->build('img/logo/logo.png', true)
            ]); ?>

             <?=  $this->Html->meta([
            'property' => "og:image:type",
            'content' => 'image/png'
            ]); ?>
                 <?=  $this->Html->meta([
            'property' => "og:image:width",
            'content' => '300'
            ]); ?>
                     <?=  $this->Html->meta([
            'property' => "og:image:height",
            'content' => '200'
            ]); ?>

            <?=  $this->Html->meta([
            'property' => "og:image:alt",
            'content' => $appDescription
            ]); ?>

        <?=
        $this->Html->css(
                [
                    'normalize',
                   // 'main',
                    'fontawesome-all.min',
                    'bootstrap.min',
                    'select2.min',
                    'melbdc'
                ]
        );
        ?>

        <?= $this->Html->script('vendor/modernizr-2.8.3.min'); ?>
        <?=
        $this->Html->script([
            'vendor/jquery-1.12.0.min',
            'plugins',
            'bootstrap.min',
            'select2.full.min',
             'custom'
                ], [
            'block' => 'end_of_body'
        ]);
        ?>
<?= $this->fetch('meta') ?>
<?= $this->fetch('css') ?>
<?= $this->fetch('script') ?>
    </head>
    <body>
        <!--[if lt IE 8]>
                <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
            <![endif]-->

            <?= $this->element('Nav/nav'); ?>

        <div class="container">
            <?= $this->Flash->render('auth'); ?>
            <?= $this->Flash->render(); ?>
        </div>
        <div class="container">
            <?= $this->fetch('content') ?>
        </div>


<?= $this->fetch('end_of_body'); ?>
<?= $this->fetch('from_view'); ?>

<?php if( ! $debug ): ?>
        <script>
            (function (b, o, i, l, e, r) {
                b.GoogleAnalyticsObject = l;
                b[l] || (b[l] =
                        function () {
                            (b[l].q = b[l].q || []).push(arguments)
                        });
                b[l].l = +new Date;
                e = o.createElement(i);
                r = o.getElementsByTagName(i)[0];
                e.src = 'https://www.google-analytics.com/analytics.js';
                r.parentNode.insertBefore(e, r)
            }(window, document, 'script', 'ga'));
            ga('create', 'UA-XXXXXXXX-X', 'auto');
            ga('send', 'pageview');
        </script>
        <?php        endif;?>
    </body>
</html>

0 Comments

Submit a Comment

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

You May Also Like…

How to Research a CPU Upgrade

How to Research a CPU Upgrade

Upgrade Time! Doing a lot of VMWare Workstation virtualization to create labs for self-study and training. Finding...