PHP Classes

PHP Bootstrap Helpers: Generate HTML pages programatically with Bootstrap

Recommend this page to a friend!
  Info   View files Example   Screenshots Screenshots   View files View files (77)   DownloadInstall with Composer Download .zip   Reputation   Support forum (1)   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2024-01-10 (2 months ago) RSS 2.0 feedStarStarStarStarStar 81%Total: 1,669 This week: 1All time: 2,354 This week: 89Up
Version License PHP version Categories
boothelp 0.4.5MIT/X Consortium ...5.4HTML, PHP 5
Description 

Author

This package can generate HTML pages programatically with Bootstrap.

It provides a set of helper classes that generate HTML for several types of page controls using Bootstrap.

Currently it provides helper classes for alerts, buttons, button groups, toolbars, dropdowns, icons, modal dialogs, navs, navbars, panels, progress bars, badges, labels, images and thumbnails.

Picture of Jorge Cobis
  Performance   Level  
Name: Jorge Cobis <contact>
Classes: 3 packages by
Country: Venezuela Venezuela
Age: ???
All time rank: 12454 in Venezuela Venezuela
Week rank: 45 Up1 in Venezuela Venezuela Up
Innovation award
Innovation award
Nominee: 1x

Example

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>BootHelp - PHP Helpers for Bootstrap</title>

        <!-- Bootstrap -->
        <link href="Guide/css/bootstrap.min.css" rel="stylesheet">

        <!-- BootHelp -->
        <link href="Guide/css/boothelp.css" rel="stylesheet">

        <!-- Font awesome css -->
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" media="screen" rel="stylesheet" type="text/css" />
    </head>
  <body>
      <div class="container">
          <div class="row">
              <div class="col-md-9" role="main">
<?php
/*
 * BootHelp - PHP Helpers for Bootstrap
 *
 * (The MIT License)
 *
 * Copyright (c) 2015 Jorge Cobis <jcobis@gmail.com / http://twitter.com/cobisja>.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */

/**
 * Guide to how to use BootHelp - PHP Helpers for Bootstrap
 *
 * To get running this web guide you have to download the followings pieces of software:
 *
 * - jQuery 1.9.x -> http://jquery.com
 * - Bootsrap 3.3.x -> http://getbootstrap.com
 *
 * Then copy the followings files into specified locations:
 *
 * bootstrap css: 'bootstrap.min.css -> 'Guide/css'.
 * bootstrap fonts: 'bootstrap/fonts/*' -> 'Guide/fonts'.
 * jquery and bootstrap js: 'bootstrap.min.js and jquery.min.js -> 'Guide/js'.
 *
 * Aditional css is required to use 'Font awesome'. You have to add a link to awesome.css:
 * <link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" media="screen" rel="stylesheet" type="text/css" />
 */
require 'vendor/autoload.php';

require(
'Guide/overview.php');
require(
'Guide/alert.php');
require(
'Guide/badge.php');
require(
'Guide/button.php');
require(
'Guide/button_group.php');
require(
'Guide/button_toolbar.php');
require(
'Guide/dropdown.php');
require(
'Guide/icon.php');
require(
'Guide/image.php');
require(
'Guide/label.php');
require(
'Guide/modal.php');
require(
'Guide/nav.php');
require(
'Guide/navbar.php');
require(
'Guide/panel.php');
require(
'Guide/panel_rows.php');
require(
'Guide/progress_bar.php');
require(
'Guide/thumbnail.php');

use
cobisja\BootHelp\Nav;
use
cobisja\BootHelp\Helpers\LinkTo;
?>
</div>
                <div class="col-md-3">
                   <div role="complementary" class="sidebar affix">
                       <?php
                       
echo new Nav(['as'=>'single', 'class'=>'bs-docs-sidenav'], function(){
                            return [
                                new
LinkTo('Overview', ['href'=>'#overview']),
                                new
LinkTo('Alerts', ['href'=>'#alerts']),
                                new
LinkTo('Badges', ['href'=>'#badges']),
                                new
LinkTo('Buttons', ['href'=>'#buttons']),
                                new
LinkTo('Button Group', ['href'=>'#button-group']),
                                new
LinkTo('Button Toolbar', ['href'=>'#button-toolbar']),
                                new
LinkTo('Dropdowns', ['href'=>'#dropdowns']),
                                new
LinkTo('Icons', ['href'=>'#icons']),
                                new
LinkTo('Images', ['href'=>'#images']),
                                new
LinkTo('Labels', ['href'=>'#labels']),
                                new
LinkTo('Modals', ['href'=>'#modals']),
                                new
LinkTo('Navs', ['href'=>'#navs']),
                                new
LinkTo('Navbars', ['href'=>'#navbars']),
                                new
LinkTo('Panels', ['href'=>'#panels']),
                                new
LinkTo('Panel rows', ['href'=>'#panel-rows']),
                                new
LinkTo('Progress bars', ['href'=>'#progress-bar']),
                                new
LinkTo('Thumbnails', ['href'=>'#thumbnails'])
                            ];
                        });
                       
?>
</div>
                </div>
            </div>
        </div>
        <script src="Guide/js/jquery.min.js"></script>
        <script src="Guide/js/bootstrap.min.js"></script>
        <script src="Guide/js/boothelp.js"></script>
    </body>
</html>


Details

BootHelp - PHP Helpers for Bootstrap

A simple set of classes to generate most of the Bootstrap's components without writing any HTML code, just PHP.

About

Nowadays Bootstrap is a great framework commonly used by a lot of web designers and web developers to build web sites with a fresh looking using its HTML and CSS based design templates for typography, forms, buttons, navigation, and other interface components, as well JavaScript extensions.

However, to get all of its powerful resources, usually you have to write a lot of HTML code, no matters if you want to use a simple component, like [Modal] for instance.

BootHelp (Bootstrap Helpers) is a set of classes that allows you to get all the power of Bootstrap's components with no need to write any HTML code (or at least a minimun amount of it).

Requirements

  • Any flavour of PHP 5.4+
  • [PHPUnit] to execute the test suite (optional).

Remember that BootHelp just generates HTML code acording Bootstrap specifications v3.3.4. To get running the code as you expected, you have to install all [Bootstrap requirements].

Getting started

Setting up the environment

After download BooHelp, you have 2 ways to get your environment configured to use the classes:

Composer

[Composer] is the PHP's package manager and is the recommended way to get packages for your projects. It's also able to build automatically *autoloaders* if you wrote down your code using PSR-0 and/or PSR-4 standards, avoiding you headaches about everything related to loading classes.

BootHelp is built follows PSR-4 standard and comes with a specific file named composer.json that allows Composer to generate a file named autoload.php (beside others files of course). This files generated is the only one you need to include in your project to get all classes required by BootHelp loaded in memory:

  1. Install Composer:
        curl -s https://getcomposer.org/installer | php
    
  2. Get inside BootHelp root folder and generate the autoload.php file:
        php composer.phar dump-autoload
        ```
        The command above will generate a folder called vendor. Inside of it, you'll see the autoload.php
    
    
  3. Require/Include autoload.php file in the index.php of your project or whatever file you need to use BootHelp classes:

    <?php require 'vendor/autoload.php'; ...

    ```

Loading BootHelp classes by hand

Even if Composer it's the preferred method to generate the files needed to get all classes loaded, maybe you want to do the task by hand:

  1. Copy and paste BootHelp folder in your project root.
  2. Require/Include the BootHelp classes:

        <?php
            require '{BootHelp root folder}/src/Base.php';
            require '{BootHelp root folder}/src/Helpers/Html/Html.php';
            require '{BootHelp root folder}/src/Helpers/Html/HtmlAttribute.php';
            require '{BootHelp root folder}/src/Helpers/Html/HtmlContent.php';
            require '{BootHelp root folder}/src/Helpers/ContentTag.php';
            require '{BootHelp root folder}/src/Helpers/LinkTo.php';
            require '{BootHelp root folder}/src/Helpers/Vertical.php';
            require '{BootHelp root folder}/src/Helpers/Horizontal.php';
            require '{BootHelp root folder}/src/Helpers/Divider.php';
            require '{BootHelp root folder}/src/AlertBox.php';
            require '{BootHelp root folder}/src/Button.php';
            require '{BootHelp root folder}/src/ButtonGroup.php';
            require '{BootHelp root folder}/src/ButtonToolbar.php';
            require '{BootHelp root folder}/src/Dropdown.php';
            require '{BootHelp root folder}/src/Icon.php';
            require '{BootHelp root folder}/src/Modal.php';
            require '{BootHelp root folder}/src/Nav.php';
            require '{BootHelp root folder}/src/Navbar.php';
            require '{BootHelp root folder}/src/Panel.php';
            require '{BootHelp root folder}/src/PanelRow.php';
            require '{BootHelp root folder}/src/ProgressBar.php';
            require '{BootHelp root folder}/src/BootHelp.php';  
        ```
    
    

Handling namespaces

All BootHelp classes are under the namespace BootHelp. So, to use any class you need to use the Fully qualified class name. For example, to get a new instance of Modal class you need to use:

<?php
...
$modal = new BootHelp\Modal('Hello world');
...

However, as your project grows up using fully qualified class names becomes annoying, so it's better to use PHP USE sentence:

<?php
...
use BootHelp\Modal;
...

$modal = new Modal('Hello world)';
...

How to use BootHelp classes:

You have 2 ways to use BootHelp: Using BootHelp abstract class and then call any of its methods.

The other way is to get an instance of the component you want to use.

Method 1 - Using BootHelp abstract class:

<?php
use BootHelp\BootHelp;
...
$modal = BootHelp::modal('How easy is to use BootHelp!!!');
echo $modal;
...

BootHelp abstract class exposes the following 17 abstract methods:

content_tag, divider, horizontal, link_to, vertical, alert_box, button, button_group, button_toolbar, dropdown, icon, modal, nav, navbar, panel, panel_row, progress_bar

Method 2 - Using directly the component class:

<?php
use BootHelp\Modal;
...
$modal = new Modal('How easy is to use BootHelp!!!');
echo $modal;

BootHelp offers 17 classes that deal directly with Bootstrap components:

ContentTag, Divider, Horizontal, LinkTo, Vertical, AlertBox, Button, ButtonGroup, ButtonToolbar, Dropdown, Icon, Modal, Nav, Navbar, Panel, PanelRow, ProgressBar.

Besides the classes showed above, you can find 5 additionals classes with differents purposes:

Html, HtmlAttribute, HtmlContent, Base, BootHelp

BootHelp API

To get an idea about how to use BootHelp classes, what parameters you have to provide, what classes you can use together, and somethings like that, there is a complete guide included, that you can load in your browser. The guide is located in Guide folder. Actually, when you download BootHelp you can open the file index.php in your browser to read all the information about the classes.

However, to get running the Guide, you need to download and install the following:

  • [jQuery] 1.9.x
  • [Bootstrap] 3.3.4

Then, uncompress the files above downloaded and carefully follows the steps show below:

  1. Get into BootHelp root folder.
  2. Copy the file bootstrap.min.css into Guide/css folder.
  3. Copy the files bootstrap/fonts/intoGuide/fonts* folder.
  4. Copy the files bootstrap.min.js and jquery.min.js into Guide/js folder.

Aditional css is required to use 'Font awesome'. You have to add a link to awesome.css:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" media="screen" rel="stylesheet" type="text/css" />

You have to put the sentence above in index.php

Todo

BootHelp is not perfect!!!. It's been tested but maybe you can find some bugs, or maybe you can find many better ways to do the things. For that reason, there are some things to do:

  • Include more Bootstrap components.
  • Find a way to integrate BootHelp with template engines like [Twig].
  • Improve the classes integration.

Author

[Jorge Cobis]

By the way, I'm from Bolivarian Republic of Venezuela :-D

Contributing

Feel free to contribute!!!. Welcome aboard!!!

Misc

Version history

0.4.0 (Tuesday, 12th May 2015)

  • Added support for badges, labels, images and thumbnails components.
  • Refactoring of few Base methods.
  • Guide updating.
  • Fix minor bugs.

0.3.2 (Friday, 1st May 2015)

  • Fix minor bug in progress bar label.

0.3.1 (Monday, 20th April 2015)

  • Adding full customizing options for modal button.
  • General namespace refactoring.
  • Guide bugs fixed.
  • Fix minor bugs.

0.3.0 (Thursday, 16th April 2015)

  • Adding support for generating Button Groups and Button Toolbars.
  • Improved documentation.
  • Fix minor bugs.
  • New tests for new compoments.
  • Updated test for Dropdown, Nav and Navbar components.

0.2.2 (Wednesday, 15th April 2015)

  • Better integration between Dropdown and Nav / Navbar.
  • Adding correct class when a Button is within a Navbar.
  • Fix minor bugs.
  • README.md upgraded.

0.2.1 (Friday, 10th April 2015)

  • Updating .gitignore file.

0.2.0 (Friday, 10th April 2015)

  • First public release.
  • Whole project refactored.

0.1.0 (Sunday, 21st September 2014)

  • Initial non public version (Classes based on traits)

License

Copyright (c) 2015 Jorge Cobis (<jcobis@gmail.com>)

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

[modal]:http://getbootstrap.com/javascript/#modals [phpunit]:https://phpunit.de/ [jQuery]:http://jquery.com [bootstrap]:http://getbootstrap.com/ [bootstrap requirements]:http://getbootstrap.com/getting-started/ [composer]:https://getcomposer.org [twig]:http://twig.sensiolabs.org/ [Jorge Cobis]:mailto:jcobis@gmail.com


Screenshots  
  • basic_dropdown.png
  • dismisible_alert.png
  • dropdown_generated.png
  • modal_generated.png
  • stacked_progress_bar.png
  • standard_alert.png
  • standard_modal.png
  Files folder image Files  
File Role Description
Files folder imageGuide (19 files, 3 directories)
Files folder imagesrc (17 files, 1 directory)
Files folder imagetests (1 directory)
Accessible without login Plain text file CHANGELOG.md Data Auxiliary data
Accessible without login Plain text file composer.json Data Auxiliary data
Accessible without login Plain text file index.php Example Example script
Accessible without login Plain text file LICENSE Lic. Documentation
Accessible without login Plain text file phpunit.xml Data Auxiliary data
Accessible without login Plain text file README.md Doc. Documentation

  Files folder image Files  /  Guide  
File Role Description
Files folder imagecss (1 file)
Files folder imageimg (4 files)
Files folder imagejs (1 file)
  Accessible without login Plain text file alert.php Example Example script
  Accessible without login Plain text file badge.php Example Example script
  Accessible without login Plain text file button.php Example Example script
  Accessible without login Plain text file button_group.php Example Example script
  Accessible without login Plain text file button_toolbar.php Example Example script
  Accessible without login Plain text file dropdown.php Example Example script
  Accessible without login Plain text file guide.template Data Auxiliary data
  Accessible without login Plain text file icon.php Example Example script
  Accessible without login Plain text file image.php Example Example script
  Accessible without login Plain text file label.php Example Example script
  Accessible without login Plain text file modal.php Example Example script
  Accessible without login Plain text file nav.php Example Example script
  Accessible without login Plain text file navbar.php Example Example script
  Accessible without login Plain text file overview.php Example Example script
  Accessible without login Plain text file panel.php Example Example script
  Accessible without login Plain text file panel_rows.php Example Example script
  Accessible without login Plain text file progress_bar.php Example Example script
  Plain text file Sample.php Class Class source
  Accessible without login Plain text file thumbnail.php Example Example script

  Files folder image Files  /  Guide  /  css  
File Role Description
  Accessible without login Plain text file boothelp.css Data Auxiliary data

  Files folder image Files  /  Guide  /  img  
File Role Description
  Accessible without login Image file pic1.jpg Photo Photograph
  Accessible without login Image file pic2.jpg Photo Photograph
  Accessible without login Image file pic3.jpg Photo Photograph
  Accessible without login Image file pic4.jpg Photo Photograph

  Files folder image Files  /  Guide  /  js  
File Role Description
  Accessible without login Plain text file boothelp.js Data Auxiliary data

  Files folder image Files  /  src  
File Role Description
Files folder imageHelpers (6 files, 1 directory)
  Plain text file AlertBox.php Class Class source
  Plain text file Base.php Class Class source
  Plain text file BootHelp.php Class Class source
  Plain text file Button.php Class Class source
  Plain text file ButtonGroup.php Class Class source
  Plain text file ButtonToolbar.php Class Class source
  Plain text file Dropdown.php Class Class source
  Plain text file Icon.php Class Class source
  Plain text file Image.php Class Class source
  Plain text file Label.php Class Class source
  Plain text file Modal.php Class Class source
  Plain text file Nav.php Class Class source
  Plain text file Navbar.php Class Class source
  Plain text file Panel.php Class Class source
  Plain text file PanelRow.php Class Class source
  Plain text file ProgressBar.php Class Class source
  Plain text file Thumbnail.php Class Class source

  Files folder image Files  /  src  /  Helpers  
File Role Description
Files folder imageHtml (3 files)
  Plain text file Badge.php Class Class source
  Plain text file ContentTag.php Class Class source
  Plain text file Divider.php Class Class source
  Plain text file Horizontal.php Class Class source
  Plain text file LinkTo.php Class Class source
  Plain text file Vertical.php Class Class source

  Files folder image Files  /  src  /  Helpers  /  Html  
File Role Description
  Plain text file Html.php Class Class source
  Plain text file HtmlAttribute.php Class Class source
  Plain text file HtmlContent.php Class Class source

  Files folder image Files  /  tests  
File Role Description
Files folder imagesrc (16 files, 1 directory)

  Files folder image Files  /  tests  /  src  
File Role Description
Files folder imageHelpers (4 files)
  Accessible without login Plain text file AlertBoxTest.php Test Unit test script
  Accessible without login Plain text file ButtonGroupTest.php Test Unit test script
  Accessible without login Plain text file ButtonTest.php Test Unit test script
  Accessible without login Plain text file ButtonToolbarTest.php Test Unit test script
  Accessible without login Plain text file DropdownTest.php Test Unit test script
  Accessible without login Plain text file IconTest.php Test Unit test script
  Accessible without login Plain text file ImageTest.php Test Unit test script
  Accessible without login Plain text file LabelTest.php Test Unit test script
  Accessible without login Plain text file ModalTest.php Test Unit test script
  Accessible without login Plain text file NavbarTest.php Test Unit test script
  Accessible without login Plain text file NavTest.php Test Unit test script
  Accessible without login Plain text file Panel.php Test Unit test script
  Accessible without login Plain text file PanelRowTest.php Test Unit test script
  Accessible without login Plain text file ProgressBarTest.php Test Unit test script
  Accessible without login Plain text file PTest.php Test Unit test script
  Accessible without login Plain text file ThumbnailTest.php Test Unit test script

  Files folder image Files  /  tests  /  src  /  Helpers  
File Role Description
  Accessible without login Plain text file BadgeTest.php Test Unit test script
  Accessible without login Plain text file ContentTagTest.php Test Unit test script
  Accessible without login Plain text file DividerTest.php Test Unit test script
  Accessible without login Plain text file LinkToTest.php Test Unit test script

 Version Control Unique User Downloads Download Rankings  
 91%
Total:1,669
This week:1
All time:2,354
This week:89Up
User Ratings User Comments (1)
 All time
Utility:93%StarStarStarStarStar
Consistency:90%StarStarStarStarStar
Documentation:88%StarStarStarStarStar
Examples:88%StarStarStarStarStar
Tests:84%StarStarStarStarStar
Videos:-
Overall:81%StarStarStarStarStar
Rank:9
 
Commendable deed, thank you for it.
8 years ago (Emil Zasmeta)
87%StarStarStarStarStar