Dynamically Displaying the Twitter Bootstrap Version in a CakePHP Page

by | Jun 12, 2019 | IT Tips | 0 comments

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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

?
1
2
3
4
5
6
7
8
9
10
11
&lt;script>
    $(function () {
        $.get(
            "/css/bootstrap.min.css",
            function (data) {
                var version = data.match(/v[.\d]+[.\d]/);
                $("#twbs_version").html(version);
            }
        );
    });
&lt;/script>

Layout.ctp

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<?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 *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.