Файл: cobisja/documentation/index.html
Строк: 2795
<?php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BootHelp - PHP Helpers for Bootstrap</title>
<meta name="description" content="">
<meta name="author" content="Jorge Cobis">
<meta name="copyright" content="Jorge Cobis">
<meta name="generator" content="Documenter v2.0 http://rxa.li/documenter">
<meta name="date" content="2015-06-07T00:00:00+02:00">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/documenter_style.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
html, body{background-color:#FFFFFF;color:#383838;}
h1,h2,h3,h4,h5,h6{color:#383838;}
section table{background-color:#FFFFFF;}
::-moz-selection{background:#444444;color:#DDDDDD;}
::selection{background:#444444;color:#DDDDDD;}
a.brand{background-image:url();}
a, a:hover, a:active{color:#0000FF;}
hr{border-top:1px solid #EBEBEB;border-bottom:1px solid #FFFFFF;}
div.navbar-inner, .navbar .nav li ul{background:#DDDDDD;color:#222222;}
a.btn-navbar{background:#DDDDDD;color:#222222;}
.navbar .nav li a{color:#222222;text-shadow:1px 1px 0px #EEEEEE;}
.navbar .nav li a:hover, .navbar .nav li.active a{text-shadow:none;}
div.navbar-inner ul{}
.marketing-byline{color:#FFFFFF;}
.navbar .nav > li a{color:#444444;}
.navbar .nav > li a:hover, a.btn-navbar:hover{background:#444444;color:#DDDDDD;}
.navbar .nav .active > a, .navbar .nav .active > a:hover, a.btn-navbar:active{background-color:#444444;color:#DDDDDD;}
.navbar .nav li ul li a:hover{background:#444444;color:#DDDDDD;}
.navbar .nav li ul li a:active{background:#444444;color:#DDDDDD;}
.btn-primary {
background-image: -moz-linear-gradient(top, #0088CC, #0044CC);
background-image: -ms-linear-gradient(top, #0088CC, #0044CC);
background-image: -webkit-gradient(linear, 0 0, 0 0088CC%, from(#DDDDDD), to(#0044CC));
background-image: -webkit-linear-gradient(top, #0088CC, #0044CC);
background-image: -o-linear-gradient(top, #0088CC, #0044CC);
background-image: linear-gradient(top, #0088CC, #0044CC);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088CC', endColorstr='#0044CC', GradientType=0);
border-color: #0044CC #0044CC #bfbfbf;
color:#FFFFFF;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
background-color: #0044CC;
}
#documenter_copyright{display:block !important;visibility:visible !important;}
</style>
</head>
<body class="documenter-project-boothelp" data-spy="scroll" id="top">
<!-- Documentation Navbar -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
<a class="brand" href="#">BootHelp - PHP Helpers for Bootstrap</a>
<div class="nav-collapse">
<ul class="nav">
<li><a href="#overview" title="Overview">Overview</a></li>
<li><a href="#installing_boothelp" title="Installing BootHelp">Installing BootHelp</a></li>
<li><a href="#configuring_boothelp" title="Configuring BootHelp">Configuring BootHelp</a></li>
<li><a href="#using_boothelp" title="Using BootHelp">Using BootHelp</a></li>
<li><a href="#some_examples" title="Some examples">Some examples</a></li>
<li><a href="#last_but_not_least" title="Last but not least">Last but not least</a></li>
</ul>
</div>
</div>
</div>
</div> <!-- End of Navbar -->
<!-- Main Container Beginning -->
<div class="container" id="documenter_content">
<div id="documenter-cover">
<div class="masthead">
<h1>BootHelp - PHP Helpers for Bootstrap</h1>
<p></p>
<ul class="marketing-byline">
<li>created: 01/05/2015</li>
<li>latest update: 06/07/2015</li>
<li>by: Jorge Cobis</li>
</ul>
<p class="download-info">
<a href="http://boothelp-guide.code389.com.ve" class="btn btn-primary btn-large">BootHelp Guide</a> <a href="http://boothelp-demo.code389.com.ve" class="btn btn-large">BootHelp Demo</a>
</p>
</div> <!-- masthead -->
<div id="intro">
<p class="highlight hero-unit">Thank you for purchasing BootHelp and make your life easier. You cannot find an easier way to build Bootstrap components using just what you best know: PHP.
You can contact me if you have any trouble using BootHelp.</p>
</div> <!-- intro -->
</div>
<section id="overview">
<div class="page-header"><h3>Overview</h3><hr class="notop"></div>
<p>
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.</p>
<p>
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 <a href="http://getbootstrap.com/components/#modal">Modal</a> for instance.</p>
<p>
<code>BootHelp</code> (<strong>Boot</strong>strap <strong>Help</strong>ers) is a set of classes that allow 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).</p>
<p>
Currently BootHelp is capable to generate the following Bootstrap components:</p>
<ul>
<li>
Alert box (including dismissible ones).</li>
<li>
Badges.</li>
<li>
Button.</li>
<li>
Button groups.</li>
<li>
Button Toolbars.</li>
<li>
Dropdown.</li>
<li>
Icon.</li>
<li>
Image.</li>
<li>
Label.</li>
<li>
Links.</li>
<li>
List group.</li>
<li>
Modal.</li>
<li>
Nav.</li>
<li>
Navbars.</li>
<li>
Panel.</li>
<li>
Panel Row.</li>
<li>
Progress bars (including stacked progress bars).</li>
<li>
Thumbnails.</li>
<li>
Carousels.</li>
<li>
ListGroup.</li>
<li>
Tables.</li>
</ul>
<p>
Also <strong>BooHelp</strong> offers you the powerfull <strong>ContentTag</strong> class and <strong>contentTag</strong> abstract method allowing you to build any other component you need.</p>
<p>
You can build any Boostrap application styled using just PHP! :-D</p>
<p>
</p>
</section>
<section id="installing_boothelp">
<div class="page-header"><h3>Installing BootHelp</h3><hr class="notop"></div>
<p>
It is so easy to install <strong>BootHelp</strong>:</p>
<ol>
<li>
Change into your application root folder.</li>
<li>
Create a folder named <strong>vendor</strong> in case your project does not have that folder (if you are using Composer, you'd have that folder).</li>
<li>
Copy the file <strong>BootHelp.zip</strong> into <strong>vendor</strong> folder.</li>
<li>
Change into <strong>vendor</strong> folder and uncompress the file<strong> BootHelp.zip</strong>.</li>
<li>
You're done!</li>
</ol>
<p>
Now you have to setup a couple of things to get <strong>BootHelp</strong> fully integrated into your project.</p>
</section>
<section id="configuring_boothelp">
<div class="page-header"><h3>Configuring BootHelp</h3><hr class="notop"></div>
<p>
Depending on the project structure you have, there are 2 ways to configuring <strong>BootHelp </strong>to get it running in a flawless way:</p>
<h2>
<strong>First method: Composer</strong></h2>
<p>
<strong>Composer</strong> is the PHP's package manager and is the recommended way to get packages for your projects. It's also able to build automatically <strong><em>autoloaders</em></strong> if you wrote down your code using PSR-0 and/or PSR-4 standards, avoiding you headaches about everything related to loading classes.</p>
<p>
If you are using <strong>Composer </strong>then you'll have a file named <strong>composer.json</strong>. In this file is where you set the namespaces you are using in your project and the path were your classes live. So, to configure <strong>BootHelp</strong> to use your <strong>Autoload</strong> (generated by Composer), you have open <strong>composer.json</strong> file, look for the <strong>"autoload section"</strong> and add the following lines:</p>
<pre class="prettyprint lang-js linenums">
{
...
"autoload": {
"psr-4": {
"cobisja\BootHelp\": "vendor/cobisja/BootHelp/src/",
"cobisja\BootHelp\Guide\": "vendor/cobisja/BootHelp/Guide/content/"
... the rest of your namespace mapping ...
}
}
...
}</pre>
<p>
After saving the changes, you have to re-generate the autoload map file running the following command:</p>
<pre class="prettyprint lang-plain linenums">
$ composer dump-autoload
</pre>
<p>
Finally, all you have to do is require the autoload generated:</p>
<pre class="prettyprint lang-php linenums">
<?php
require 'vendor/autoload.php';
// The rest of your PHP code
...
</pre>
<p>
</p>
<div style="page-break-after: always;">
<span style="display: none;"> </span></div>
<h2>
Second method: Manual loading of classes.</h2>
<p>
In the case you are not using Composer, you have to load all the BootHelp classes by yourself, that means you have write down about 20 of require or include sentences. Howerver, to make your life easier, inside of <strong>"vendor/cobisja/BootHelp/"</strong> folder, you'll find a file named <strong>boothelp-core.php</strong>. That files acts as a proxy, allowing you to require or include just that file:</p>
<pre class="prettyprint lang-php linenums">
<?php
require "vendor/cobisja/BootHelp/boothelp-core.php";
// The rest of your PHP code.
...
</pre>
<p>
Remember, depending of your project structure maybe you'll have to require or include<strong> boothelp-core.php</strong> in every single page where you need to use any of BootHelp classes.</p>
<p>
</p>
<h3>
A note about BootHelp behaviour expected.</h3>
<p>
Remember that <strong>BootHelp</strong> just generates HTML code according <strong>Bootstrap</strong> specifications. That's it!. Thus, you have to have downloaded and installed Bootstrap files and <strong>jQuery </strong>Files. Specifically the following versions:</p>
<ul>
<li>
<strong>Bootstrap v3.3.4: Boothelp requires <em>bootstrap.css</em>, <em>bootstrap.js</em> and the whole content of <em>fonts folder</em>.</strong></li>
<li>
<strong>jQuery 1.9.x: BootHelp requires <em>jquery.js</em></strong></li>
</ul>
<p>
Of course, you have to load the files above in your project using the according tag (<link> and <script>).</p>
<p>
</p>
<p>
</p>
<p>
</p>
</section>
<section id="using_boothelp">
<div class="page-header"><h3>Using BootHelp</h3><hr class="notop"></div>
<p>
Once you've installed and configured BootHelp, the next step is get aware about how to use any of BootHelp classes<strong>.</strong></p>
<p>
You have 2 ways to use BootHelp: Using <strong>BootHelp abstract class</strong> and then call any of its methods. The other way is to get an instance of the component you want to use.</p>
<h2>
Method 1: Using BootHelp abstract class</h2>
<p>
This is by far the easier way to use BootHelp, and hence it is the recommended one:</p>
<pre class="prettyprint lang-php linenums">
<code data-lang="php"><?php
use cobisjaBootHelpBootHelp;
// Let's create a Modal component.
echo BootHelp::modal('How easy is to use BootHelp!!!');
...
</code></pre>
<h2>
Method 2: Directly using of the component class</h2>
<p>
If you want to use just the specific component class, you have to get a component instance and use it:</p>
<pre class="prettyprint lang-php linenums">
<code data-lang="php"><?php
use cobisjaBootHelpModal;
// Let's create a Modal component.
$my_modal = new Modal('How easy is to use BootHelp!!!');
echo $my_modal;
...
</code></pre>
<p>
</p>
</section>
<section id="some_examples">
<div class="page-header"><h3>Some examples</h3><hr class="notop"></div>
<p>
Let's review some examples on how using BootHelp:</p>
<h3>
Example 1: A simple page with a simple validation (code snippet)</h3>
<pre class="prettyprint lang-php linenums">
<?php
require "vendor/autoload.php";
use cobisjaBootHelpBootHelp;
// We perform a simple "all fields are required" validation.
if ((empty($_POST['name']) || empty($_POST['last_name')) {
echo BootHelp::alertBox("All fields are required", ['context'=>'danger', 'dismissible'=>true]);
} else {
echo BootHelp::alertBox("Thanks for your registration!", ['context'=>'success', 'dismissible'=>true]);
}
</pre>
<h3>
Example 2: A simple page with a navbar</h3>
<p>
Try resizing your browser!</p>
<pre class="prettyprint lang-php linenums">
<code data-lang="php"><!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="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<?php
require "vendor/autoload.php";
use cobisjaBootHelpBootHelp;
echo BootHelp::navbar(function () {
return [
BootHelp::vertical(function () {
return BootHelp::linkTo('Home');
}),
BootHelp::horizontal(function () {
return BootHelp::nav(['class'=>'navbar-right'], function () {
return
BootHelp::linkTo('Profile') .
BootHelp::linkTo('Settings');
});
})
];
});
?>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
</code></pre>
<h3>
Example 3: A single page with a customized panel row:</h3>
<p>
This sample shows:</p>
<ul>
<li>
Panel row (2).</li>
<li>
Dropdown.</li>
<li>
Modal.</li>
</ul>
<pre class="prettyprint lang-php linenums">
<!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="css/bootstrap.min.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">
<?php
require "vendor/autoload.php";
use cobisjaBootHelpBootHelp;
echo BootHelp::panelRow(['column_class'=>'col-sm-6', 'id'=>'panel_row'], function(){
return [
BootHelp::panel(['title'=>'Department', 'context'=>'info'], function () {
return [
'Department: Marketing',
BootHelp::dropdown('Select department', function(){
return [
BootHelp::linkTo('Human resources'),
BootHelp::linkTo('Accounting'),
BootHelp::divider(),
BootHelp::linkTo('IT support')
];
})
];
}),
BootHelp::panel(['title'=>'Phone'], function () {
return [
BootHelp::icon('earphone') . ' 323-555-5555',
BootHelp::modal('Phone options unavailable!', ['title'=>'Show phone options.'])
];
})
];
});
?>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html></pre>
<p>
See for yourself how BootHelp saving you a lot of time avoiding you to writing a lot of HTML code. Check the html code generated by BootHelp using the example above:</p>
<pre class="prettyprint lang-html linenums">
<div class="row" id="panel_row">
<div class="col-sm-6">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Department</h3>
</div>
<div class="panel-body">
Department: Marketing
<div class="dropdown">
<button data-toggle="dropdown" id="label-dropdown-3619234525" type="button" class="dropdown-toggle btn btn-default" aria-expanded="false">
Select department
<span class="caret"></span>
</button>
<ul aria-labelledby="label-dropdown-3619234525" role="menu" class="dropdown-menu">
<li><a href="#" role="menuitem">Human resources</a></li>
<li><a href="#" role="menuitem">Accounting</a></li>
<li class="divider"></li>
<li><a href="#" role="menuitem">IT support</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Phone</h3>
</div>
<div class="panel-body"><span class="glyphicon glyphicon-earphone"></span> 323-555-5555
<div id="modal-container-modal-3491645712">
<button data-target="#modal-3491645712" data-toggle="modal" class="btn btn-default" caption="Show phone options.">
Show phone options.
</button>
<div aria-hidden="true" arialabelledby="label-modal-3491645712" role="dialog" tabindex="-1" id="modal-3491645712" class="modal fade" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 id="label-modal-3491645712" class="modal-title">Show phone options.</h4>
</div>
<div class="modal-body">
Phone options unavailable!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></pre>
<p>
Without BootHelp you'd have to write <strong>54 lines of HTML code</strong>. Instead, you write only <strong>27 lines of PHP code</strong>. Do the math by yourself <img alt="smiley" height="20" src="assets/images/image_1.gif" title="smiley" width="20"></p>
<h3>
A functional app:</h3>
<p>
You can find a fully functional application on the web: <a href="http://boothelp-demo.code389.com.ve">http://boothelp-demo.code389.com.ve</a></p>
<p>
The applicaction is about 2 simple games (Guess the number and Guess the word). All the Game interface has been built just using BootHelp. Take a look!!!</p>
<p>
</p>
</section>
<section id="last_but_not_least">
<div class="page-header"><h3>Last but not least</h3><hr class="notop"></div>
<p>
As you've seen at Overview section, the current version of BootHelp is able to generates 19 Bootstrap components. You have several ways to customize the component generation. To get all the information about, BootHelp includes a Guide where you'll find a very detailed description of every BootHelp helper, so this is the best way you have to learn how to use them.</p>
<p>
To see the whole Guide just point your browser to get the BootHelp folder:</p>
<pre class="prettyprint lang-plain linenums">
http://your_app_url/vendor/cobisja/BootHelp/</pre>
<p>
As you can suppose, BootHelp is evolving to include more Bootstrap components, <span id="result_box" lang="en"><span class="hps">therefore</span><span>,</span> <span class="hps">the guide included</span> <span class="hps">in the package</span> <span class="hps">may become</span> <span class="hps">obsolete</span></span>. In that case, you can always watch the updated BootHelp Guide in the web, just point your browser to:</p>
<pre class="prettyprint lang-plain linenums">
http://boothelp-guide.code389.com.ve</pre>
<p>
<strong>Remember: BootHelp</strong> handles all about HTML generation according to Bootstrap specifications. That's it!. To get the behaviour you expected you have to download and install the following:</p>
<ul>
<li>
Bootstrap css files.</li>
<li>
Bootstrap fonts files.</li>
<li>
Bootstrap js files.</li>
<li>
jQuery js files.</li>
</ul>
<p>
You can get all of them for free in their websites. They are not included with BootHelp.</p>
<p>
Currently, BootHelp are developed to support the following bootstrap and jQuery versions:</p>
<ul>
<li>
Bootstrap 3.3.4</li>
<li>
jQuery 1.9.x</li>
</ul>
<p>
If you have any problem, please contact me:</p>
<p>
emai: jcobis@gmail.com</p>
<p>
twitter: @cobisja</p>
<p>
skype: cobisjax</p>
<p>
<strong>Thanks so much for purchasing BootHelp!!!</strong> <img alt="wink" height="20" src="assets/images/image_2.gif" title="wink" width="20"></p>
</section>
<hr />
<footer>
<p>Copyright Jorge Cobis 2015 made with the <a href="http://rxa.li/documenter">Documenter v2.0</a></p>
</footer>
</div><!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script>document.createElement('section');var duration='500',easing='swing';</script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery.scrollTo.js"></script>
<script src="assets/js/jquery.easing.js"></script>
<script src="assets/js/scripts.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/bootstrap-min.js"></script>
</body>
</html>
?>