Tuesday 28 May 2013

Twitter Bootstrap tutorial 01 (twitter boostrap base template)

PURPOSE
show the code of a basic twitter bootstrap html template

WHAT YOU NEED TO KNOW

  • in the template header include bootstrap.css/bootstrap.js and jquery.js
  • you need to put the doctype at the beginning becoz twitter bootstrap uses html5
  • if you want to make it responsive meaning(flexibly changing layout according to device) you can include the bootstrap-responsive.css in the header.

CODE
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"  >
    <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css"  >
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html


TEST
you can test responsiveness with the next tutorial.

Twitter Bootstrap tutorial 02 (grids and layouts system)

PURPOSE
Grids are small boxes css-ed by twitter bootstrap where you can put content.
it consists of 12 columns per row and the structure to create one is :
  container-div > row-div > span-div

There are two types of grid: fixed and fluid. In the fixed grid the size of the boxes
 are based on pixels but in the fluid there are based on percentage which means
 according to your device width and height,boxes may be larger or smaller.

fixed grid


WHAT YOU NEED TO KNOW
Below is the basic format for a 12columns fully occupied,you can make small boxes of size 1 twelve times or 6 twice and so on. if you go over 12 columns,the next box shows up on the next line.

 <div class="container">
  <div class="row">
   <div class="span12">(content goes here)
   </div>
 </div>
</div>

CODE


<!DOCTYPE html>
<html>
 <head>
  <title>Scaffolding</title>
  <link type="text/css" rel="stylesheet" href="css/bootstrap.css">
  <script src="js/bootstrap.js"></script>
  <script src="js/jquery.js"></script>
  <style>
  .span1,.span2,.span3,.span4,.span5,.span6,.span7,.span8,.span9,.span10,.span11,.span12{
  background: black;
  color:white;
  text-align:center;
  margin-bottom: 5px;
  margin-top:5px;
  }

  </style>
 </head>
<body>
<div class="container">
     <div class="row">
       <div class="span1">1
       </div>
       <div class="span1">1
       </div>
       <div class="span1">1
       </div>
       <div class="span1">1
       </div>
       <div class="span1">1
       </div>
       <div class="span1">1
       </div>
       <div class="span1">1
       </div>
       <div class="span1">1
       </div>
       <div class="span1">1
       </div>
       <div class="span1">1
       </div>
       <div class="span1">1
       </div>
       <div class="span1">1
       </div>
     </div>
     <div class="row">
       <div class="span2">2
       </div>
       <div class="span2">2
       </div>
       <div class="span2">2
       </div>
       <div class="span2">2
       </div>
       <div class="span2">2
       </div>
       <div class="span2">2
       </div>
     </div>
     <div class="row">
       <div class="span3">3
       </div>
       <div class="span3">3
       </div>
       <div class="span3">3
       </div>
       <div class="span3">3
       </div>
     </div>
     <div class="row">
       <div class="span4">4
       </div>
       <div class="span4">4
       </div>
       <div class="span4">4
       </div>
     </div>
     <div class="row">
       <div class="span5">5
       </div>
       <div class="span5">5
       </div>
       <div class="span2">2
       </div>
     </div>
     <div class="row">
       <div class="span6">6
       </div>
       <div class="span6">6
       </div>
     </div>
     <div class="row">
       <div class="span7">7
       </div>
       <div class="span5">5
       </div>
     </div>
      <div class="row">
       <div class="span8">8
       </div>
       <div class="span4">4
       </div>
     </div>
     <div class="row">
       <div class="span9">9
       </div>
       <div class="span3">3
       </div>
     </div>
     <div class="row">
       <div class="span10">10
       </div>
       <div class="span2">2
       </div>
     </div>
      <div class="row">
       <div class="span11">11
       </div>
       <div class="span1">1
       </div>
     </div>
      <div class="row">
       <div class="span12">12
       </div>
     </div>
      <div class="row">
       <div class="span6 offset6">span6 with offset6
       </div>
     </div>
     <div class="row">
       <div class="span12" style="background:yellow;color:black">nested row
        <div class="row" >
           <div class="span6" >span6</div>
           <div class="span6">span6</div>
        </div>
       </div>
     </div>
    </div>


</body>
</html>
OUTPUT


                             

fluid grid

we will use the same code above and replace "container" by "container-fluid" and "row" by "row-fluid" and also make sure that all nested rows have their columns equal to 12 if not it
 will not display as in the fixed grid. You will see that with the fluid grid , the boxes spread all
 over the screen and are responsive like the fixed grid. You can put both on the same page and see the difference.

CODE
<div class="container-fluid">
     <div class="row-fluid">
       <div class="span1">1
       </div>
       <div class="span1">1
       </div>
       <div class="span1">1
       </div>
       <div class="span1">1
       </div>
       <div class="span1">1
       </div>
       <div class="span1">1
       </div>
       <div class="span1">1
       </div>
       <div class="span1">1
       </div>
       <div class="span1">1
       </div>
       <div class="span1">1
       </div>
       <div class="span1">1
       </div>
       <div class="span1">1
       </div>
     </div>
     <div class="row-fluid">
       <div class="span2">2
       </div>
       <div class="span2">2
       </div>
       <div class="span2">2
       </div>
       <div class="span2">2
       </div>
       <div class="span2">2
       </div>
       <div class="span2">2
       </div>
     </div>
     <div class="row-fluid">
       <div class="span3">3
       </div>
       <div class="span3">3
       </div>
       <div class="span3">3
       </div>
       <div class="span3">3
       </div>
     </div>
     <div class="row-fluid">
       <div class="span4">4
       </div>
       <div class="span4">4
       </div>
       <div class="span4">4
       </div>
     </div>
     <div class="row-fluid">
       <div class="span5">5
       </div>
       <div class="span5">5
       </div>
       <div class="span2">2
       </div>
     </div>
     <div class="row-fluid">
       <div class="span6">6
       </div>
       <div class="span6">6
       </div>
     </div>
     <div class="row-fluid">
       <div class="span7">7
       </div>
       <div class="span5">5
       </div>
     </div>
      <div class="row-fluid">
       <div class="span8">8
       </div>
       <div class="span4">4
       </div>
     </div>
     <div class="row-fluid">
       <div class="span9">9
       </div>
       <div class="span3">3
       </div>
     </div>
     <div class="row-fluid">
       <div class="span10">10
       </div>
       <div class="span2">2
       </div>
     </div>
      <div class="row-fluid">
       <div class="span11">11
       </div>
       <div class="span1">1
       </div>
     </div>
      <div class="row-fluid">
       <div class="span12">12
       </div>
     </div>
      <div class="row-fluid">
       <div class="span6 offset6">span6 with offset6
       </div>
     </div>
     <div class="row-fluid">
       <div class="span12" style="background:yellow;color:black">nested row-fluid
        <div class="row-fluid" >
           <div class="span6" >span6</div>
           <div class="span6">span6</div>
        </div>
       </div>
     </div>
    </div>

OUTPUT


Friday 24 May 2013

Setting Up Virtual Hosts in XAMPP

PURPOSE
Setting Up Virtual Hosts in XAMPP

ENVIRONMENT

  • XAMPP 1.8.1


Steps
  1. Open  C:\windows\system32\drivers\etc\hosts with admin privilege
  2. Add "127.0.0.1      Site.com" at the end of the file and save
  3. Edit C:\xampp\apache\conf\extra\httpd-vhosts.conf and add the following
NameVirtualHost *:80
  <VirtualHost *>
    DocumentRoot "C:\xampp\htdocs"
    ServerName localhost
    ErrorLog "logs/localhost-error.log"
    CustomLog "logs/localhost-access.log" combined
  </VirtualHost>

  <VirtualHost *>
    DocumentRoot "C:\xampp\htdocs\phpacademy.com"
    ServerName phpacademy.com 
    ErrorLog "logs/phpacademy.com-error.log"
    CustomLog "logs/phpacademy.com-access.log" combined
  <Directory "C:\xampp\htdocs\phpacademy.com">
    Order allow,deny
    Allow from all
  </Directory>
</VirtualHost>



Using CodeIgniter with BootStrap

PURPOSE OF THIS TUTORIAL

Showing you how to use twitter bootstrap with codeigniter

ENVIRONMENT

  • NetBeans IDE 7.2.1 
  • xampp 1.8.1
  • JQuery 
  • Twitter BootStrap


STEPS
  • download CodeIgniter and unzip
  • download the minified and source Bootstrap and unzip 
  • download JQuery and unzip
    • if you are using xampp 
      •  move "applications","system" and "index.php" from CodeIgniter folder to c:\xampp\htdocs\<project-name>\
      • merge the "js","img","css","less" file from the the minified and source bootstrap unzipped folder and move them to c:\xampp\htdocs\<project-name>\
      • rename the JQuery javascript file in the unzipped JQuery folder to jquery.js and move it to the "js" directory under c:\xampp\htdocs\<project-name>\
  • start creating an existing project of CodeIgniter for c:\xampp\htdocs\<projectname>
  • replace the welcome_message.php of codeigniter by one of the templates in bootstrap examples  and replace all the "../assets/" by "<?php echo base_url(); ?>" but for the base_url function to work you have to add "$autoload['helper'] = array('url');" under applications/autoload.php in your codeigniter project folder
  • test