Our in house designers are responsible for the design of this page. It’s a little bit of Facebook’s original timeline layout – but a lot simpler and minimalist. Here is a preview of how it looks:

In a nutshell, this is what we’re going to accomplish: We’re going to use custom post types (CPT) for each entry in the Timeline. We’re grabbing them via JavaScript – using the WP Rest API as the endpoint. We’re also using Boostrap’s grid system – so our timeline behaves well in mobile.

We are going to build everything as part of the theme. For more advanced users – you can also build it as a plugin.

Note that you have to be familiar with WordPress, PHP and Front end to follow. There is no download for this – you simply have to follow along.

Ready to get started? Let’s begin:

The Back-End

First off, let’s take care of the data. We need to register the CPT with WordPress and make sure we have the right custom fields. Actually, we only have one custom field necessary – and that is the year. The year is what the timeline is sorted by (newest to oldest).

Open up functions.php in your theme. First let’s add the CPT initialization.

function registerTimelineCPT() {
        $labels = array(
            'name' => __( 'Timeline' ),
            'singular_name' => __( 'Timeline' ),
            'add_new_item'       => __( 'Add New Timeline'),
            'new_item'           => __( 'Timeline'),
            'edit_item'          => __( 'Edit Timeline'),
            'view_item'          => __( 'View Timeline'),
            'all_items'          => __( 'View All'),
        );
        register_post_type( 'timeline',
            array(
                'labels' => $labels,
                'public' => true,
                'has_archive' => false,
                'rewrite' => false,
                'publicly_queriable' => true,
                'exclude_from_search' => true,
                'show_ui' => true,
                'show_in_nav_menus' => false,
                'show_in_menu' => true,
                'show_in_admin_bar' => false,
                'menu_icon' => 'dashicons-backup',
                'show_in_rest' => true,
                'public' => false, //removes the "permalink"
                'supports' => array(
                    'title',
                    'excerpt',
                    'thumbnail',
                    'custom-fields'
                )
            )
        );
        //REMOVES COMMENTS
        remove_post_type_support( 'timeline', 'comments' );
}
add_action( 'init', 'registerTimelineCPT' );

Above, we’re simply creating our CPT called “Timeline”. We’re setting up the labels, what it supports and what it doesn’t support. Upon logging in you should see a “Timeline” in your admin area.

Now for the  custom fields – you can easily add this the default way according to WordPress. In my case, I wanted to make it easier for the users to update – so I’m using this plugin called “Meta Box“.

Our custom field is now easier to set up and become much cleaner to the users.
If you have MetaBox installed, adding the field is as simple as below. This goes into your functions.php.

function createMetaBoxes($meta_boxes ){
	$prefix = 'tl_';
	$meta_boxes[] = array(
		'id' => 'timeline_metabox',
		'title' => esc_html__( 'Other', $prefix ),
		'post_types' => array( 'timeline' ),
		'context'    => 'normal',
		'priority'   => 'low',
		'autosave'   => true,
		'fields'     => array(
			array(
				'name' => esc_html__( 'Timeline',  $prefix  ),
				'id'   => 'timeline_year',
				'label_description' => esc_html__( 'Year', $prefix ),
				'type' => 'range',
				'min'  => '1930',
				'max'  => date("Y"),
				'step' => 1,
				'std'  => date("Y"),
			)
		)
	);
	return $meta_boxes;
}
add_filter( 'rwmb_meta_boxes', 'createMetaBoxes' );

Now if you go to the Timeline page, you should see our nice range slider:

We’re also using the following default WordPress fields:

• Title
• Excerpt
• Featured Image

So as you’re following along, go ahead and add several timelines and make sure these fields are filled out.

REST Endpoint

Before we can call our Timelines through REST, we have to do some setup. Still in functions.php, add the code below:

function restProperties(){
	register_rest_field( 'timeline',
		'timeline_year',
		array(
		   'get_callback' => 'registerRestCb',
		   'update_callback' => null,
		   'schema'          => null,
		)
	 );
	function registerRestCb($object, $field_name, $request){
		return get_post_meta( $object[ 'id' ], $field_name, true );
	}
}
add_action( 'rest_api_init', 'restProperties');

So the above makes the ‘timeline’ available as and endpoint in REST. Also, we’re adding the ‘timeline_year’ as a property in the response. To find out more about WP REST API, check their documentation.

Now, when you hit the endpoint: YOURURL +’/wp-json/wp/v2/timeline?_embed&per_page=100‘, you should now see data as a JSON string. This is enough for us to work with in our Front End. Let’s go do that now.

The Front-End

Before we continue, I forgot to mention the libraries that we need to work with:

• jQuery
• Bootstrap
• Handlebars

Markup

I’m going to add the markup first (the handlebar templates), then we’ll move on to the logic.

This is the main template:

<script id="timeline-template" type="text/x-handlebars-template">
    {{#each this}}
    <div class="decade-wrap" id="decade-{{decade}}">            
    <h1>{{decade}}s</h1>
    {{#each @this}}                    
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 timeline-item timeline-index-{{@index}} timeline-{{leftOrRight @index}}">
            <div class="timeline-year">{{year}}</div>
            <div class="timeline-inner-wrap col-lg-8 col-md-8 col-sm-8 col-lg-12 {{pull @index}}">                
                <div class="timeline-thumbnail" style="background:url('{{img}}') no-repeat #ccc">                 
                </div> 
                <div class="timeline-title">{{title}}</div>
                <div class="timeline-excerpt">{{{excerpt}}}</div>
            </div>
        </div>
        {{{closeWrap @index}}}
    {{/each}}
    </div>
    {{/each}}
</script>

As you can see, we’re using the Bootstrap col classes to make each item responsive. We’re also using pull classes – so the alternate item will be pulled to the left.

The decades scroller:

<script id="timeline-decades-template" type="text/x-handlebars-template"> 
{{#each this}}
    <div class="timeline-decades-link-item decade-{{decade}} {{showingOrNot @index}}">
            <a href="#decade-{{decade}}">{{decade}}s</a>
    </div>
{{/each}}
</script>

Nothing fancy here, just a list of decades that is clickable.

Lastly, let’s build the wrapper:

<div class="timeline-decade-links-wrapper">
  <div class="timeline-decade-links">
       <div class="getting-items">Getting Items</div>
  </div>
</div>
<div class="timeline-wrapper"></div> 
<div class="show-more-wrap">
   <a href="#"><img src="showmore.png"></a>
</div>

The above markup simply holds the timelines together. It also has the text “Getting Items” – which acts as our loader – until our AJAX call completes. Also, we have a “show more” button – so that when clicked – the rest of the items appear in the bottom.

So the above is our HTML. Now we need JavaScript, which is described below.

Getting and Grouping the Items

This is where we pull the data from our REST endpoint, and pass it on to the handlebars templates that we’ve created. We also need additional logic – specifically grouping the decades together to build the scroller.

Let’s grab our items via .ajax():

$(document).ready(function(){
	$.ajax({
		url : '/wp-json/wp/v2/timeline?_embed&per_page=100',
		success : function(data){
                        console.log(JSON.parse(data));
			//TODO :compileTemplates();
			//TODO: bindDecadeScroller();
		},
		error : function(data){
			console.log('Error in fetching timeline...')
		}
	})
});

All things are happening inside the document ready handler. Now if you refresh your browser, you shall see our data in a parsed JSON object.

Now that we have our objects in place, remove the console.log() line that we have. We have 2 TODOS: functions that we haven’t built yet, namely compileTemplates() and bindDecadeScroller(). You can guess what both of them do.

Let’s add the first function compileTemplates():

function compileTemplates(data){
	var parsed = JSON.parse(data);
	if(parsed.length > 0){
		var obj = buildTimeline(parsed);
		var source  = $("#timeline-template").html();
		var source2 = $("#timeline-decades-template").html();
		var template = Handlebars.compile(source);
		var template2 =  Handlebars.compile(source2);
		$('.timeline-decade-links').html(template2(obj));
		$('.timeline-wrapper').html(template(obj));
	}
}

The above simply compiles the JSON data and hands it over to our templates. This alone should get our views going. But don’t refresh the browser yet. There are plenty of logic that still needs to happen.

Notice the new function in line 4 called “buildTimeline()“.  On top of that, we have Handlebar helpers that we haven’t registered – so the browser will actually throw a fit. This will be covered in the section below “View Helpers“.

Let’s build the function called buildTimeline():

function buildTimeline(data){
    function comp(a, b){
        return b - a;
    }
    function compYear(a,b) {
        if (b.year < a.year)
            return -1;
        if (b.year > a.year)
            return 1;
        return 0;
    }
    function grabImg(el){
        var src = '';
        if(el._embedded){
            if(el._embedded['wp:featuredmedia']){
                src = el._embedded['wp:featuredmedia'][0]['source_url'];
            }
        }
        return src;
    }
    $.each(data, function(){
        $(this)[0].timeline_year = parseInt($(this)[0].timeline_year);
    })
    //add decade:
    $.each(data, function(){
        var year = $(this)[0].timeline_year;
        $(this)[0].timeline_year_decade = Math.floor(year / 10) * 10;
    })
    //group decades:
    var decades = [];
    $.each(data, function(){
        decades.push($(this)[0].timeline_year_decade);
    })
    var uniqueDecades = [];
    $.each(decades, function(i, el){
        if($.inArray(el, uniqueDecades) === -1) uniqueDecades.push(el);
    });
    decades = uniqueDecades.sort(comp);
    var clean = Array();
    var final = Array();
    $.each(data, function(i, el){
        var obj = {};
        obj.id = el.id;
        obj.img = grabImg(el);
        obj.title = el.title.rendered;
        obj.excerpt = el.excerpt.rendered;
        obj.year = el.timeline_year;
        obj.year_decade = el.timeline_year_decade;
        clean.push(obj);
    });
    clean = clean.sort(compYear);
    $.each(decades,function(i,el){
        var key = i;
        final[key] = Array();
        $.each(clean,function(x,xel){
            final[key]['decade'] = el;
            if(xel.year_decade == el){
                final[key].push(xel);
            }
        })
    })
    return final;
}

Okay this is the meat of our logic. We’re trying to grab all of the years in our timelines. And from each of those years, we need to calculate the decade, take out the duplicates and stuff them back to a final array, grouped by decade.

In lines 31-34 is where we calculate the decade, then stuffing it to a new property called “timeline_year_decade“. Then we’re doing a couple more loops to remove duplicates, sort and create a clean “decades” array – which we need for our final loop in lines 66-75.

Refresh your browser and see what our “final” array looks like.

Now we our compileTemplates() is done, let’s go and register our helpers and do some CSS.

View Helpers

Now we have to do add more scripting to determine additional classes that makes our timeline look the way it does.

In case you haven’t noticed, our templates are sprinkled with helpers for handlebars. Let’s register those helpers now.

Handlebars.registerHelper('leftOrRight', function(index) {
	return index %2 == 0 ? 'left' : 'right';
});
Handlebars.registerHelper('closeWrap', function(index) {
   return (index+1) %2 == 0 ? '<div class="clearfix"></div>' : '';
});
Handlebars.registerHelper('pull', function(index) {
   return index %2 == 0 ? '' : 'col-lg-push-4 col-md-push-4 col-sm-push-4';
});
Handlebars.registerHelper('showingOrNot', function(index) {
	if(index == 0){
		return 'showing';
	}
});

The above are view helpers – that cooperates with the HTML templates that we just built. For instance, the “leftOrRight” helper – determines if a class of “left” or “right” is to be added. Below are the images for that:

Left Line:

Right Line:

Arrow up:

Vertical Line:

The Styles

Finally, the styles that make our timeline look good. I’m not going to walk through what each style does. I’m just going to add this as a reference for you to plugin. You might have a different style depending on your preference.

.timeline-wrapper {
    position:relative;
    z-index: 99;
}
.decade-wrap {
    overflow:hidden;
    clear:both;
    display:block;
    background:url('vertical_line.png') #fff repeat-y;
    background-position-x: center;
}
.decade-wrap:first-child {
    padding-top: 40px;
}
.decade-wrap:last-child{
    margin-bottom: 75px;
}
.decade-wrap h1 {
    text-align: center;
    background:#fff;
    padding:25px 0 35px;
    font-size:45px;
    color: #0077C8;
}
.timeline-thumbnail {
    background-position-x: center !important;
    background-position-y: center !important;
    background-size: cover !important;
    height:319px;
}
.timeline-item,
.timeline-inner-wrap {
    padding-left:0;
    padding-right:0;
}
.timeline-left {
    background:url('left_line.png') no-repeat right center;
    margin-left: 8px;
}
.timeline-right {
     margin-top: 100px;
    background:url('right_line.png') no-repeat left center;
    margin-left: -15px;
}
.timeline-inner-wrap {
    padding-top: 25px;
}
.timeline-year {
    position: absolute;
    top: 39%;
    font-size:30px;
    font-weight: 500;
    color: #0077C8;
}
.timeline-right .timeline-year {
    padding-left: 35px;
}
.timeline-left .timeline-year {
    right:0;
    padding-right: 34px;
}
.timeline-title {
    font-size: 19px;
    font-weight: 500;
    color: #000;
    padding-top: 15px;
    padding-bottom: 10px;
}
.timeline-decade-links {
    background:#ececec;
    min-height: 60px;
    display: flex;
}
.timeline-decades-link-item {
    width: 100px;
    margin: 0 auto;
    text-align: center;
    font-size: 18px;
    padding-top: 18px;
    height: 60px;
}
.timeline-decades-link-item a:hover,
.timeline-decades-link-item a:focus{
    text-decoration:none;
}
.timeline-decades-link-item.showing {
    background:url('arrow-up.png') transparent no-repeat center bottom;
}
.timeline-decade-links-wrapper {
    overflow: hidden;
}
.timeline-decade-links-wrapper.fixed {
    position: fixed;
    top: 0px;
    z-index: 110;
    left:0;
    width:100%;
}
.admin-bar .timeline-decade-links-wrapper.fixed {
    top:32px;
}
@media(max-width:1199px){
    .timeline-thumbnail {
        height:253px;
    }
    .timeline-item {
        background-position-y: 33%;
    }
    .timeline-year{
        top: 21%;
    }
}
@media(max-width:991px){
    .timeline-thumbnail {
        height:190px;
    }
    .timeline-item {
        background-position-y: 28%;
    }
    .timeline-year{
        top: 18%;
        font-size: 23px;
    }
    .decade-wrap h1 {
        padding: 14px 0 24px;
        font-size: 31px;
    }
}
@media(max-width:768px){
    .timeline-thumbnail {
        height:354px;
        width:410px;
    }
    .decade-wrap {
        background:none;
    }
    .decade-wrap:first-child {
        padding-top:0;
    }
    .decade-wrap h1 {
        padding: 0px 0px 0px 0px;
    }
    .timeline-right {
        margin-top: 0;
    }
    .timeline-item {
        background:#fff;
        margin-left: 0 !important;
        margin-right:0 !important;
    }
    .timeline-year {
        position: relative;
        padding-left: 0 !important;
        padding-right:0 !important;
    }
    .timeline-decade-links {
        display: none;
    }
}
@media(max-width:500px){
    .timeline-thumbnail {
        height:302px;
        width:auto;
    }
}
@media(max-width:375px){
    .timeline-thumbnail {
        height:242px;
    }
}

 
After our helpers apply the classes, our CSS and images in place – Bootstrap will take care of the rest. If you refresh, you should see your timeline. Inspect and you see our classes applied.

Finally, let’s go ahead and bind that scroller:

function bindDecadeScroller(){
	 $('.timeline-decades-link-item a').on('click',function(){
		var id = $(this).attr('href');
		var offset = ($(id).offset().top - 150) ;
		$('html, body').stop().animate({
			scrollTop: offset
		}, 1000);
		return false;
	})
}

This should have a smooth animating effect when you click on the decades on the scroller. Note that our timelines are grouped by decades, encapsulated in a DIV with the ID – of the decade. So when our scroller is cicked – it has the ID of the DIV in it’s href attribute.

So technically, even without our animation – it will know where to focus naturally.

We’re using .animate() to make that jump smoother. Check jQuery’s documentation on .animate for more information.

Conclusion

And there you have it. We’ve just build a pretty cool timeline – grouped by decades, with a scroller that focuses on the decade when clicked. This is also responsive – so it looks real good in a mobile device.

Note that this is a pretty basic timeline – which you can greatly enhance by adding other things. For example, you can add a modal for more details for each of the item. Or even multiple images per item – one that you can scroll left to right like a slideshow. There are many possibilities.

For the live page, check out the Parsons timeline page. I hope you enjoyed this tutorial. Leave your comments below.

The post How to Build a Company Timeline using Bootstrap and WordPess REST API appeared first on Michael Soriano.

Update 9/5/2016: Updated flaw in token creation and token checking for better security. Thanks to comment by Mohammad and his findings.

Update 7/20/2016: Added index.php file to the views directory. This is the view that is being used once a successful login is processed.

View in Github

The Forgot your Password form

In our controller “Main.php”, let’s add a new action called “forgot”. The code is below and I’ll explain what is inside:

public function forgot()
        {
            $this->form_validation->set_rules('email', 'Email', 'required|valid_email');
            if($this->form_validation->run() == FALSE) {
                $this->load->view('header');
                $this->load->view('forgot');
                $this->load->view('footer');
            }else{
                $email = $this->input->post('email');
                $clean = $this->security->xss_clean($email);
                $userInfo = $this->user_model->getUserInfoByEmail($clean);
                if(!$userInfo){
                    $this->session->set_flashdata('flash_message', 'We cant find your email address');
                    redirect(site_url().'main/login');
                }
                if($userInfo->status != $this->status[1]){ //if status is not approved
                    $this->session->set_flashdata('flash_message', 'Your account is not in approved status');
                    redirect(site_url().'main/login');
                }
                //build token
                $token = $this->user_model->insertToken($userInfo->id);
                $qstring = $this->base64url_encode($token);
                $url = site_url() . 'main/reset_password/token/' . $qstring;
                $link = '' . $url . '';
                $message = '';
                $message .= 'A password reset has been requested for this email account
';
                $message .= 'Please click: ' . $link;
                echo $message; //send this through mail
                exit;
            }
        }

The action opens up the same way we have with our other forms. We have our validation rules for our “email” input field. In our form, all we’re really asking for our user is to enter their password. So we just need to run a couple of rules against this value: valid email and required. Once our validation passes, we also clean the data with our xss_clean() method which is loaded automatically.

To learn more about the Security Helper click here.

Now we check if the email submitted exists in our database through our Model method: getUserInfoByEmail(). So add the code below to our Model (User_Model.php). This method returns the record on success and false on fail.

public function getUserInfoByEmail($email)
    {
        $q = $this->db->get_where('users', array('email' => $email), 1);
        if($this->db->affected_rows() > 0){
            $row = $q->row();
            return $row;
        }else{
            error_log('no user found getUserInfo('.$email.')');
            return false;
        }
    }

We also need another method that checks grabs the user information. This method called “getUserInfo()” simply returns the row and false if none is found:

public function getUserInfo($id)
    {
        $q = $this->db->get_where('users', array('id' => $id), 1);
        if($this->db->affected_rows() > 0){
            $row = $q->row();
            return $row;
        }else{
            error_log('no user found getUserInfo('.$id.')');
            return false;
        }
    }

So back in our “forgot” action, we simply set a couple of error messages when we receive a false from our model, or proceed with the token creation “insertToken()” on success. Note that we are reusing this method from our previous action when creating a new user.

The code for our view is below. Just some messaging our form and input fields. Notice we’re using CodeIgniter’s Form class.

<div class="col-lg-4 col-lg-offset-4">
<h2>Forgot Password</h2>
<p>Please enter your email address and we'll send you instructions on how to reset your password<br>
<?php 
$fattr = array('class' =--> 'form-signin'); 
echo form_open(site_url().'main/forgot/', $fattr); ?>
</p>
<div class="form-group">
<?php echo form_input(array(
          'name'=-->'email', 'id'=&gt; 'email', 'placeholder'=&gt;'Email', 'class'=&gt;'form-control', 'value'=&gt; set_value('email'))); ?>
<?php echo form_error('email');?>
</div>
<p><?php echo form_submit(array('value'=-->'Submit', 'class'=&gt;'btn btn-lg btn-primary btn-block')); ?>
<?php echo form_close(); ?></p>
</div>

Now go ahead and try out your form. Try an email that doesn’t exist – and try one that does. With our unique token code in our action, we continue to construct the link and “echo” to the browser.

Remember that this is to be emailed to the user but we are simply echoing it out for demo purposes. The link should look like below:

The Reset Password Form

So now we have a unique link that we’ve sent to our forgetful user. Once they click on this link – they better have a page to land on, with a way to reset their password. So let’s build that now.
Let’s create another action in our controller, name it “reset_password()” and add the code below:

public function reset_password()
        {
            $token = $this->base64url_decode($this->uri->segment(4));
            $cleanToken = $this->security->xss_clean($token);
            $user_info = $this->user_model->isTokenValid($cleanToken); //either false or array();
            if(!$user_info){
                $this->session->set_flashdata('flash_message', 'Token is invalid or expired');
                redirect(site_url().'main/login');
            }
            $data = array(
                'firstName'=> $user_info->first_name,
                'email'=>$user_info->email,
                'token'=>base64_encode($token)
            );
            $this->form_validation->set_rules('password', 'Password', 'required|min_length[5]');
            $this->form_validation->set_rules('passconf', 'Password Confirmation', 'required|matches[password]');
            if ($this->form_validation->run() == FALSE) {
                $this->load->view('header');
                $this->load->view('reset_password', $data);
                $this->load->view('footer');
            }else{
                $this->load->library('password');
                $post = $this->input->post(NULL, TRUE);
                $cleanPost = $this->security->xss_clean($post);
                $hashed = $this->password->create_hash($cleanPost['password']);
                $cleanPost['password'] = $hashed;
                $cleanPost['user_id'] = $user_info->id;
                unset($cleanPost['passconf']);
                if(!$this->user_model->updatePassword($cleanPost)){
                    $this->session->set_flashdata('flash_message', 'There was a problem updating your password');
                }else{
                    $this->session->set_flashdata('flash_message', 'Your password has been updated. You may now login');
                }
                redirect(site_url().'main/login');
            }
        }

So our users will land in our page called “reset_password”, with a token in the url. First we need to process that and determine if its a good token. This is accomplished by our model’s isTokenValid() method. This method is the same method we had in our “complete” action when we are registering a new user – so this is nothing new.

And if you remember, this method returns user information on success – so we go on with our setup for the form. We pass this information using $data array straight to our view, reset_password.php:

<div class="col-lg-4 col-lg-offset-4">
<h2>Reset your password</h2>
<h5>Hello <?php echo $firstName; ?>, Please enter your password 2x below to reset</h5>
<p><?php
    $fattr = array('class' =--> 'form-signin'); echo form_open(site_url().'main/reset_password/token/'.$token, $fattr); ?></p>
<div class="form-group">
<?php echo form_password(array('name'=-->'password', 'id'=&gt; 'password', 'placeholder'=&gt;'Password', 'class'=&gt;'form-control', 'value' =&gt; set_value('password'))); ?&gt; <?php echo form_error('password') ?></div>
<div class="form-group">
<?php echo form_password(array('name'=-->'passconf', 'id'=&gt; 'passconf', 'placeholder'=&gt;'Confirm Password', 'class'=&gt;'form-control', 'value'=&gt; set_value('passconf'))); ?> <?php echo form_error('passconf') ?></div>
<p><?php echo form_hidden('user_id', $user_id);?>
<?php echo form_submit(array('value'=-->'Reset Password', 'class'=&gt;'btn btn-lg btn-primary btn-block')); ?>
<?php echo form_close(); ?></p>
</div>

Clicking the link with the token will run our view. And if you did it correctly, it should render like below:

Finally, we do some validation and sanitation on the passwords entered. Once passed, we continue to encrypt our user’s password through the create_hash() method. Remember this method is from our Password class that we’ve also used when creating new users. Then we update the user’s password on success.

Conclusion

So there you have our basic user registration system, explained in detail. Remember that this is mainly to get a grasp on what goes on behind the scenes of such a system as well as learning the ropes of MVC. It is also important to know that this is not production code. There are plenty of improvements to be made. But this should be enough to get you started.

The post Building a user registration system – Part 3: The Password Reset Form appeared first on Michael Soriano.

Update 9/5/2016: Updated flaw in token creation and token checking for better security. Thanks to comment by Mohammad and his findings.

Update 7/20/2016: Added index.php file to the views directory. This is the view that is being used once a successful login is processed.

View in GitHub

Once you fill out the fields, check your database for the new entries. The user table should look like below:

Note that we have the status set to “pending” as well as the role set to “subscriber”. We also have the password blank at the moment. Open the “tokens” table and you should see a new entry as well:

Notice our user ids match in both tables. You should also be seeing our message in the browser – which is the message we will be sending through email to our user:

Now we’re ready to code the 2nd part of the registration process.

The “Complete” your registration page

So our user gets an email to complete the registration. This email has a link with a “token” that ties the user id and the time created. So the code below is for our “complete” action. imply add to our Main controller:

public function complete()
        {
            $token = base64_decode($this->uri->segment(4));
            $cleanToken = $this->security->xss_clean($token);
            $user_info = $this->user_model->isTokenValid($cleanToken); //either false or array();
            if(!$user_info){
                $this->session->set_flashdata('flash_message', 'Token is invalid or expired');
                redirect(site_url().'main/login');
            }
            $data = array(
                'firstName'=> $user_info->first_name,
                'email'=>$user_info->email,
                'user_id'=>$user_info->id,
                'token'=>$this->base64url_encode($token)
            );
            $this->form_validation->set_rules('password', 'Password', 'required|min_length[5]');
            $this->form_validation->set_rules('passconf', 'Password Confirmation', 'required|matches[password]');
            if ($this->form_validation->run() == FALSE) {
                $this->load->view('header');
                $this->load->view('complete', $data);
                $this->load->view('footer');
            }else{
                $this->load->library('password');
                $post = $this->input->post(NULL, TRUE);
                $cleanPost = $this->security->xss_clean($post);
                $hashed = $this->password->create_hash($cleanPost['password']);
                $cleanPost['password'] = $hashed;
                unset($cleanPost['passconf']);
                $userInfo = $this->user_model->updateUserInfo($cleanPost);
                if(!$userInfo){
                    $this->session->set_flashdata('flash_message', 'There was a problem updating your record');
                    redirect(site_url().'main/login');
                }
                unset($userInfo->password);
                foreach($userInfo as $key=>$val){
                    $this->session->set_userdata($key, $val);
                }
                redirect(site_url().'main/');
            }
        }

First order of business is to validate the token. We grab it from the url with CI’s uri helper: “segment(4)”. The code below “isTokenValid()” resides in our model, which checks the validity of the token and returns the user information on success and false on no.

Note that I’m only using a weak time check – which compares to strings to be equal. You should implement your own mechanism which does a dateDiff or something like that.

public function isTokenValid($token)
    {
       $tkn = substr($token,0,30);
       $uid = substr($token,30);
        $q = $this->db->get_where('tokens', array(
            'tokens.token' => $tkn,
            'tokens.user_id' => $uid), 1);
        if($this->db->affected_rows() > 0){
            $row = $q->row();
            $created = $row->created;
            $createdTS = strtotime($created);
            $today = date('Y-m-d');
            $todayTS = strtotime($today);
            if($createdTS != $todayTS){
                return false;
            }
            $user_info = $this->getUserInfo($row->user_id);
            return $user_info;
        }else{
            return false;
        }
    }

Going back to our action, we simply create the “$data” array which we’ll need in our form. We’re also loading a “Password” class – which does the heavy lifting for our passwords. The class creates a dynamic salt appended to the password. The default hash is “sha256” and is fully configurable.

So token is good, validation passes – we then move on to updating our user information: “updateUserInfo()”. This goes in our model:

public function updateUserInfo($post)
    {
        $data = array(
               'password' => $post['password'],
               'last_login' => date('Y-m-d h:i:s A'),
               'status' => $this->status[1]
            );
        $this->db->where('id', $post['user_id']);
        $this->db->update('users', $data);
        $success = $this->db->affected_rows();
        if(!$success){
            error_log('Unable to updateUserInfo('.$post['user_id'].')');
            return false;
        }
        $user_info = $this->getUserInfo($post['user_id']);
        return $user_info;
    }

The above simply updates our table with the new password, login time and the status to “active”. We have enough to complete our registration process.

Our view called “complete” will contain our HTML:

<div class="col-lg-4 col-lg-offset-4">
<h2>Almost There!</h2>
<h5>Hello <?php echo $firstName; ?>. Your username is <?php echo $email;?></h5>
<small>Please enter a password to begin using the site.</small> <?php 
    $fattr = array('class' =&gt; 'form-signin');
    echo form_open(site_url().'main/complete/token/'.$token, $fattr); ?>
<div class="form-group">&nbsp;</div>
<div class="form-group">&nbsp;</div>
<?php echo form_submit(array('value'=&gt;'Complete', 'class'=&gt;'btn btn-lg btn-primary btn-block')); ?> 
<?php echo form_close(); ?></div>

Note that I’m using Bootstrap, so our form automatically looks nice. I’m also using CI’s form helper which makes our form building faster

Our form should look like below:

On success you will notice that we set the session with the user data that we’ve fetched from the back end “set_userdata()“. We’re also redirecting them to the homepage of our site. On failure, we user CI’s “set_flashdata()” to set an error message temporarily in session, and displaying it above our form.

The Login Form

With what we’ve done above – it’s now possible to create a login form. See, we’re using an encryption technology that only our application can process. So it is important that we create our registration system first, before we can create a login form.

This way – we can test it properly.

The code below is our controller logic for our login form:

public function login()
        {
            $this->form_validation->set_rules('email', 'Email', 'required|valid_email');
            $this->form_validation->set_rules('password', 'Password', 'required');
            if($this->form_validation->run() == FALSE) {
                $this->load->view('header');
                $this->load->view('login');
                $this->load->view('footer');
            }else{
                $post = $this->input->post();
                $clean = $this->security->xss_clean($post);
                $userInfo = $this->user_model->checkLogin($clean);
                if(!$userInfo){
                    $this->session->set_flashdata('flash_message', 'The login was unsucessful');
                    redirect(site_url().'main/login');
                }
                foreach($userInfo as $key=>$val){
                    $this->session->set_userdata($key, $val);
                }
                redirect(site_url().'main/');
            }
        }

Nothing new in the code above. Again, we’re setting validation rules for our 2 fields. We grab the post array and clean it via xss_clean(). Then we get to our model which has the checkLogin() method below:

public function checkLogin($post)
    {
        $this->load->library('password');
        $this->db->select('*');
        $this->db->where('email', $post['email']);
        $query = $this->db->get('users');
        $userInfo = $query->row();
        if(!$this->password->validate_password($post['password'], $userInfo->password)){
            error_log('Unsuccessful login attempt('.$post['email'].')');
            return false;
        }
        $this->updateLoginTime($userInfo->id);
        unset($userInfo->password);
        return $userInfo;
    }
    public function updateLoginTime($id)
    {
        $this->db->where('id', $id);
        $this->db->update('users', array('last_login' => date('Y-m-d h:i:s A')));
        return;
    }

The above selects all columns where the user id and password match. Note that we’re using the validate_password() method from our Password class. We then update the login time and return the user information back to our controller.

Our login form view contains the code below:

<div class="col-lg-4 col-lg-offset-4">
<h2>Please login</h2>
<?php $fattr = array('class' =&gt; 'form-signin');
         echo form_open(site_url().'main/login/', $fattr); ?>
<div class="form-group">&nbsp;</div>
<div class="form-group">&nbsp;</div>
<?php echo form_submit(array('value'=&gt;'Let me in!', 'class'=&gt;'btn btn-lg btn-primary btn-block')); ?>
<?php echo form_close(); ?>
<p>Don't have an account? Click to <a href="<?php echo site_url();?>main/register">Register</a></p>
<p>Click <a href="<?php echo site_url();?>main/forgot">here</a> if you forgot your password.</p>
</div>

Again, using CI’s form helper along with Bootstrap classes to make our form nice. We also have a link back to the “Register” page, which we covered in the first part of this tutorial. Finally, we have another link to the “Forgot” password link – which I’ll cover in Part 3.

Stay tuned.

The post Building a user registration system – Part 2: The Set Password and Login Forms appeared first on Michael Soriano.

One that will restrict users from accessing sections of the site. We will create a system that will allow them to create their own account, reset their password and even update their profile.

Update 8/13/2018: Added the entire CI application in the repo, allowing faster setup and debug. CI version is 3.0.2 The setup steps below might not be necessary for usage.

Update 9/5/2016: Updated flaw in token creation and token checking for better security. Thanks to comment by Mohammad and his findings.

Update 7/20/2016: Added index.php file to the views directory. This is the view that is being used once a successful login is processed.

View in Github

I’m going to assume that you are familiar with CodeIgniter, or other MVC frameworks. You don’t have to be an expert – just know enough that you will be able to follow along without me having to explain too much. We are also going to utilize Bootstrap – so our pages will look nice. Finally, the focus of this tutorial is learning how the process works. We’re not really here to look at design patterns, performance or database design.

So ready to get started? Roll up your sleeves and let’s start writing.

Get things setup

So obviously we’re going to need to store data – so we need a database. We will need a table that will house our users. Below is the SQL code to get you up and running. I’m calling the database “user-registration” – which is a stupid name actually. Name yours anything you want.

CREATE DATABASE IF NOT EXISTS `user-registration` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `user-registration`;

CREATE TABLE IF NOT EXISTS `ci_sessions` (
  `id` varchar(40) NOT NULL,
  `ip_address` varchar(45) NOT NULL,
  `timestamp` int(10) unsigned NOT NULL DEFAULT '0',
  `data` blob NOT NULL,
  PRIMARY KEY (`id`),
  KEY `ci_sessions_timestamp` (`timestamp`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE IF NOT EXISTS `tokens` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `token` varchar(255) NOT NULL,
  `user_id` int(10) NOT NULL,
  `created` date NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=26 ;

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `email` varchar(100) NOT NULL,
  `first_name` varchar(100) NOT NULL,
  `last_name` varchar(100) NOT NULL,
  `role` varchar(10) NOT NULL,
  `password` text NOT NULL,
  `last_login` varchar(100) NOT NULL,
  `status` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=42 ;

We’re going to use CodeIgniter 3.0.2. Download and install in your web server.
In config > config.php add the two lines below. I’ll explain these later.

$config['roles'] = array('subscriber', 'admin');
$config['status'] = array('pending', 'approved');

Open database.php, and add your database credentials. It would be something like:

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'user-registration',
	... //additional stuff here...
);

Create a new controller named Main.php and a model, name it User_model.php. In the next sections, we will tie these things together.

But first let’s look at the workflow of our system:

So our first step is the registration form. Users fill out this form which will only consist of their name and email. This will write a record to our database – but the account will only be in “pending” status. This will also trigger an email containing a token (which expires in a day), when clicked – will allow the user to finish the registration process. This form will have a password and password confirmation. This will update the record – and make the account “active”.

We will automatically login the user, but now that they have an account – they can actually utilize the login and reset password form.

It also makes sense for us to build the pages in this exact order. So we got: 1) register 2) complete 3) login 4) forgot password.

So inside our routes.php, add the default controller to ours:

$route['default_controller'] = 'main';

Also, let’s setup our autoload.php:

$autoload['helper'] = array('url');
$autoload['libraries'] = array('session');

Now we can move forward.

The Registration

So the very first thing we need is the HTML that contains our form. Let’s create a new file called “register.php” and put it in our “views” folder. Add the code below:

<div class="col-lg-4 col-lg-offset-4">
    <h2>Hello There</h2>
    <h5>Please enter the required information below.</h5>
<?php
    $fattr = array('class' => 'form-signin');
    echo form_open('/main/register', $fattr); ?>
    <div class="form-group">
      <?php echo form_input(array('name'=>'firstname', 'id'=> 'firstname', 'placeholder'=>'First Name', 'class'=>'form-control', 'value' => set_value('firstname'))); ?>
      <?php echo form_error('firstname');?>
    </div>
    <div class="form-group">
      <?php echo form_input(array('name'=>'lastname', 'id'=> 'lastname', 'placeholder'=>'Last Name', 'class'=>'form-control', 'value'=> set_value('lastname'))); ?>
      <?php echo form_error('lastname');?>
    </div>
    <div class="form-group">
      <?php echo form_input(array('name'=>'email', 'id'=> 'email', 'placeholder'=>'Email', 'class'=>'form-control', 'value'=> set_value('email'))); ?>
      <?php echo form_error('email');?>
    </div>
    <?php echo form_submit(array('value'=>'Sign up', 'class'=>'btn btn-lg btn-primary btn-block')); ?>
    <?php echo form_close(); ?>
</div>

Note that I’m not going to go through what goes in our header and footer template because it’s irrelevant to this tutorial. Just know that it’s basic HTML, along with a link to Bootstrap CSS. Our markup above is a mix of PHP and HTML. This is using CodeIgniter’s Form Class – which makes it real easy to do validation and data filter and sanitation.

So in our Main controller, let’s add a constructor and include the necessary components for our class. We’ll also set up our status and roles arrays inside this constructor:

class Main extends CI_Controller {
        public $status;
        public $roles;
        function __construct(){
            parent::__construct();
            $this->load->model('User_model', 'user_model', TRUE);
            $this->load->library('form_validation');
            $this->form_validation->set_error_delimiters('<div class="error">', '</div>');
            $this->status = $this->config->item('status');
            $this->roles = $this->config->item('roles');

So we’re loading our model “User_model” by default, the “form_validation” library and setting some HTML for our form errors. You’ll also notice the 2 properties (status and roles) – which grabs it from “$this->config”. Remember in our config file – we created 2 arrays? We’re simply outputting it here for easy access.

Now I know you’re saying this is better if these entries was in their own table in the database. Again, this is not a tutorial on database design. We’re simply doing it this way because it is not our focus. Let’s continue with our “register” method:

public function register()
        {
            $this->form_validation->set_rules('firstname', 'First Name', 'required');
            $this->form_validation->set_rules('lastname', 'Last Name', 'required');
            $this->form_validation->set_rules('email', 'Email', 'required|valid_email');
            if ($this->form_validation->run() == FALSE) {
                $this->load->view('header');
                $this->load->view('register');
                $this->load->view('footer');
            }else{
                if($this->user_model->isDuplicate($this->input->post('email'))){
                    $this->session->set_flashdata('flash_message', 'User email already exists');
                    redirect(site_url().'main/login');
                }else{
                    $clean = $this->security->xss_clean($this->input->post(NULL, TRUE));
                    $id = $this->user_model->insertUser($clean);
                    $token = $this->user_model->insertToken($id);
                    $qstring = $this->base64url_encode($token);
                    $url = site_url() . 'main/complete/token/' . $qstring;
                    $link = '' . $url . '';
                    $message = '';
                    $message .= 'You have signed up with our website
';
                    $message .= 'Please click: ' . $link;
                    echo $message; //send this in email
                    exit;
                };
            }
        }

Alright, plenty of going on up there. So the validation rules are setup initially. Our form contains 3 fields: Last name, First name and email. They’re all required fields, plus the email address must be in valid format.

You will notice in the block where our form is validated, we’re checking “isDuplicate()” from our model: $this->user_model. This is so that we won’t have duplicate records of the same email. Remember, we are using their email address as their username.

So if it’s a duplicate – we simply use CodeIgniter’s set_flashdata() and redirect them to the login page (which is not built yet).

If the email address is good, we continue by cleaning up the $_POST array. Notice that we have 2 methods right after the cleaning: insertUser() and insertToken(). So we write the record to our database, then we create a new token (let’s quickly run this SQL so we have this token table).

CREATE TABLE IF NOT EXISTS `tokens` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `token` varchar(255) NOT NULL,
  `user_id` int(10) NOT NULL,
  `created` date NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=26 ;

Another thing, you will also see that we’re using a local method called “base64url_encode()” – which is a way of outputting base64 code – that is in a web safe format. So in our controller, you can add these two methods in the bottom. Think of them as local “helper” methods.

public function base64url_encode($data) {
    return rtrim(strtr(base64_encode($data), '+/', '-_'), '=');
}
public function base64url_decode($data) {
    return base64_decode(str_pad(strtr($data, '-_', '+/'), strlen($data) % 4, '=', STR_PAD_RIGHT));
}

I am not putting them in a the “helpers” for CI – because these methods are only to be used in controllers – since they are “URL” related. And as you can see, we only have one controller. But as your application grows, and you have many controllers, it’s best to move this into a real CI Helper.
Finally, we create our final URL, to our “complete” action and echo it out. In production, this will be done through an email, in HTML format.

Some Back-end Stuff

Our model “User_model” is empty. Let’s go ahead and fill it up. We need 3 methods for our register to work remember? It’s 1) isDuplicate(), 2) insertUser() and insertToken(). First let’s create a constructor with our roles and status arrays:

public function insertUser($d)
    {
            $string = array(
                'first_name'=>$d['firstname'],
                'last_name'=>$d['lastname'],
                'email'=>$d['email'],
                'role'=>$this->roles[0],
                'status'=>$this->status[0]
            );
            $q = $this->db->insert_string('users',$string);
            $this->db->query($q);
            return $this->db->insert_id();
    }
    public function isDuplicate($email)
    {
        $this->db->get_where('users', array('email' => $email), 1);
        return $this->db->affected_rows() > 0 ? TRUE : FALSE;
    }
    public function insertToken($user_id)
    {
        $token = substr(sha1(rand()), 0, 30);
        $date = date('Y-m-d');
        $string = array(
                'token'=> $token,
                'user_id'=>$user_id,
                'created'=>$date
            );
        $query = $this->db->insert_string('tokens',$string);
        $this->db->query($query);
        return $token . $user_id;
    }

So judging from the method names – they’re pretty self explanatory correct? Also, if you’ve worked with CodeIgniter before, you’ll notice the syntax of interacting with the database. It used to be called “active record”, which is now the Query Builder class. Makes it real easy for non DBA’s like me to write queries.

The three methods all return either an array or a string on success, and “false” on failure. The return values are handled accordingly in our controller methods discussed previously. Pay token is simply a random number that we create and insert into the database. This token has an accompanying user id and a time stamp in the same row. This makes it possible for us to fetch the user, and find if it’s a valid request, in the appropriate time frame.

Let’s break it here for now. We have plenty more to come in the next part(s).

The post Building a user registration system – Part 1: The New User Form appeared first on Michael Soriano.

Note that this plugin will require the following files:

• jquery.min.js
• jquery.SPServices-2014.02.min.js
• bootstrap.min.css

In this post, I will show you how to use a Javascript plugin that I’ve written to basically recreate the markup of these SP lists so it works with Bootstrap / Mobile. It also has extra functionality like paging, filters, expand/collapse and other options. By the time we’re done, your list will look real good in desktop, tablet and mobile view:
View in Github

How to use the Plugin:

Note that I’ve only tested this with SharePoint 2013. You may need administrator rights to your website, as well as you should know how to work with custom lists and document libraries and such.
After you have downloaded the files, open the “sp-bootstrap-list-viewer.html” in you text editor. This is where you will add the plugin information.
You have to change the CHANGE-TO-YOUR-PATH in the JavaScript and CSS inclusion – to your downloaded path.
Then, you add 2 things: the list name, the “Answer” column. The rest of the options are optional such as the “filterBy” and “rowLimit”. The table below will show you want the rest of the options do.

Once you have edited the html file, upload it to a location in your SharePoint site, typically a document library. You will need to copy the location of the file.

Let’s go ahead and add a CEWP into your SharePoint page. in the “Content Link” input, add the location of the html file you’ve just uploaded.

Click “OK” and if everything is configured correctly, you should see the plugin do its thing:

The table below contains the options for the plugin and an explanation of what they’re for:

One thing to remember. If you plan to use the plugin multiple times in a page, you need to change the “instance” value to a random number prefixed with alphanumeric characters. You also need to make this the “Object” name of your html (where it says var spBL233565656 = new spBootstrapList …). This will make the instances of your plugin unique in every page and will not clash with each other.

Under the hood:

For those of you who want to know more about how the plugin works, I will show you some of it’s main functionality. Note that this was originally built for a FAQ list for SharePoint, hence the FAQ names such as “Question” and “Answer”. Though the plugin will work with any kind of SP list.

Requirements

We will need some help with Mark Anderson’s SPServices – a jQuery plugin that basically does the web service calls for us. This allows us to work with the lists’ data and convert it to our desired markup. Of course we will need Bootstrap – which will take care of the responsive and overall styles, as well as jQuery for DOM manipulation.
Notice the required scripts and styles. You can link to them externally or download them to a document library in SharePoint. Our constructor spBootstrapList() calls our Javascript class, passing along our required arguments. Again, the variable name “spBL233565656” and the value for “instance” has to be identical. This is for using it multiple of these in a single page.
So going into the Javascript plugin: sp-bootstrap-list-viewer.js, you will see that on first load there’s a public method that gets called to set things up “init()”. This makes the initial call to the plugin “SPServices”. As I’ve mentioned, the plugin does the AJAX call to the SharePoint web service. It uses SOAP as its protocol so the request / response will be in XML format. Our init() method also checks for valid fields:

var init = function(){
var ajax = methods.callSPServices(_settings.rowLimit, true);
$(ajax.responseXML).SPFilterNode("z:row").each(function(e) {
    var errors = Array();
    if(typeof $(this).attr('ows_' + _settings.question) == 'undefined'){
        errors.push("Invalid field name for Question: " + _settings.question);
    }
    if(typeof $(this).attr('ows_' + _settings.answer) == 'undefined'){
        errors.push("Invalid field name for Answer: " + _settings.answer);
    }
    if(_settings.filterBy !== '') {
        if(typeof $(this).attr('ows_' + _settings.filterBy) == 'undefined'){
            errors.push("Invalid field name for FilterBy: " + _settings.filterBy);
        }
    }
    _errors = errors;
    methods.parseResponse($(this));
});

Then we parse our response and we fill our internal object “_faqs”: Notice the SharePoint internal list names that start with “ows_” – these are how it comes out of the SOAP response. We parse it to our own object with more meaningful keys and it’s values:

parseResponse : function(resp){
    var record = {};
    record.question = resp.attr('ows_' + _settings.question);
    record.answer = resp.attr('ows_' + _settings.answer);
    record.created = resp.attr('ows_' + 'Created');
    if(_settings.filterBy !== ''){
        record.filterBy = resp.attr('ows_' + _settings.filterBy);
    }
    _faqs.push(record);
},

By the way, in order for us to make public methods from within our plugin is that we assign it to the “this” keyword. This way it becomes accessible from the outside. Here is an example of all the public methods of our plugin:

this.paginate = paginate;
this.filter = filter;
this.showHideFilters = showHideFilters;
this.clearFilter = clearFilter;
this.showHideAnswer = showHideAnswer;

Continuing with our process, note that we need the “_faq” array to be filled for our next method to fire. This method is called methods.buildFaqs(), So we built another object called “methods” and inside this is a series of functions. This will be our “internal” methods.
If you look at the buildFaqs() method, the code looks like below:

buildFaqs : function(){
  var output = '';
  for(var i=0; i<_faqs.length; i++){
    var hr = (i != (_faqs.length-1)) ? '

[code above has been truncated – due to syntax highlighting error]
So you see, we have our SharePoint list data in our array, and we build the HTML from it.

Pagination

Our pagination logic is quite interesting. We use the Bootstrap pagination HTML, and for each page, we need to do a AJAX call in order to get the next page ID. This is how SharePoint determines where to offset the record when a query is made by using “ListItemCollectionPositionNext” as a parameter.

var buildPagination = function(){
  if(_errors.length > 0) {
      $('#'+ _settings.instance+' .spBLPagerContainer').html('');
      console.log('Exiting buildPagination()');
      return false;
  }
  methods.getTotal(); //inside here we build filters
  if(parseInt(_totalRecords) > parseInt(_settings.rowLimit)) { //yes paginate
      var pages = Math.ceil(_totalRecords / _settings.rowLimit);
      var positions = Array('');
      for (var i=0; i < (pages - 1); i++) { //builds the values required 'ListItemCollectionPositionNext'
          var pos = '';
          if(i == 0){ //skips first to not pass pos
              positions.push(methods.getNextPos(pos));
          }else{
              var offset = i;
              positions.push(methods.getNextPos(positions[offset]));
          }
      }
  // console.log(positions);
  methods.buildPagination(positions);
  }else{ // no need to paginate
      $('#'+ _settings.instance+' .spBLPagerContainer').html('');
  }
}

We then proceed to build the actual markup with our internal method: methods.buildPagination():

buildPagination : function(items){
  if(_firstLoad == false){
      $('#'+ _settings.instance+' .spBLPagerContainer').html(pager);
  }
  _positions = items;
  var pager = '

 
[code above has been truncated – due to syntax highlighting error]
Each button has an inline “onclick” that calls our public “paginate()” method. Each of them also has the attribute “data-position” which holds the offset “ID” that we talked about:

var paginate = function(clicked){
  if($(clicked).parents('li').hasClass('active') || $(clicked).parents('li').hasClass('disabled')){
      return false;
  }
  $('#'+ _settings.instance+' .pagination li').removeClass('active');
  var pos = $(clicked).attr('data-position') != '' ? $(clicked).attr('data-position') : '';
  if($(clicked).hasClass('NextButton')){
      $('#'+ _settings.instance+' a[data-position="'+pos+'"]').not('.NextButton').parents('li').addClass('active');
  }else if($(clicked).hasClass('PrevBtn')){
      $('#'+ _settings.instance+' a[data-position="'+pos+'"]').not('.PrevBtn').parents('li').addClass('active');
  }else{
      $(clicked).parents('li').addClass('active');
  }
  methods.updateNextPrevBtns(pos);
  methods.clearFaqs();
  var options = {
      CAMLViewFields: methods.fieldsToRead(true),
      CAMLQuery: methods.query(),
      CAMLRowLimit : _settings.rowLimit,
      CAMLQueryOptions: ""
  }
  var ajax = $().SPServices(methods.mergeSPCommon(options));
  $(ajax.responseXML).SPFilterNode("z:row").each(function(e) {
      methods.parseResponse($(this));
  });
  methods.buildFaqs();
}

You noticed too from the code above that we use SPServices on each click. That’s because we are only grabbing a predefined set of records – which is the limit that we pass into our plugin.

Filters

So the plugin supports filtering. This means that you can choose a field from your list and make that a “filter” column.
First, assuming you’ve selected a valid field, we have to build it. Take a look at the code below:

getFilterByValues : function(resp){
  var filterList = Array();
  var filterListUnique = Array();
  $(resp.responseXML).SPFilterNode("z:row").each(function(e) {
      var filterValue = $(this).attr('ows_' + _settings.filterBy);
          if(typeof filterValue !== 'undefined'){ //only add to array if theres a value
              filterList.push(filterValue);
          }
  });
  $.each(filterList,function(i,el){ //get rid of duplicates
      if($.inArray(el, filterListUnique) === -1){
          filterListUnique.push(el);
      }
  });
  _filterByListUnique = filterListUnique;
  _filterByList = filterList;
}

The above simply grabs the data. And since there are duplicate entries – we will have to make them unique and fill up our “_filterByListUnique” array. This is next:

buildFilters : function(){
  var count = 0;
  var out = '';
  out +=

[code above has been truncated – due to syntax highlighting error]
The above builds out the checkboxes we need for our filtering capabilities. Now when each item is clicked, it triggers our filter() method:

var filter = function(clicked){
  _firstLoad = false;
  _filterByValues = [];
  $('#'+ _settings.instance+'-filtersArray :checkbox:checked').each(function(e){
      _filterByValues.push($(this).val());
  })
  methods.filter();
}

Which actually calls our internal methods.filter() method:

filter : function(){
  $('#'+ _settings.instance+'-filtersArray input').attr('disabled', 'disabled');
  $('#'+ _settings.instance+' .clearFilter').attr('disabled', 'disabled');
  methods.clearFaqs();
  var ajax = methods.callSPServices(_settings.rowLimit, true);
  $(ajax.responseXML).SPFilterNode("z:row").each(function(e) {
      methods.parseResponse($(this));
  });
  setTimeout(function(){
      methods.buildFaqs();
      buildPagination();
      $('#'+ _settings.instance+'-filtersArray input').removeAttr('disabled');
      $('#'+ _settings.instance+' .clearFilter').removeAttr('disabled');
  },10);
  if(_filterByValues.length > 0){
      $('#'+ _settings.instance + ' .clearFilter').show();
  }else{
      $('#'+ _settings.instance + ' .clearFilter').hide();
  }
}

A lot going on here. You see that we make a new AJAX call through SPServices, passing our filter value. We parse the response, rebuild our items through “methods.buildFaqs()” and rebuild our pagination through buildPagination().
There’s much more logic in the plugin such as the creating the CAML queries – but I decided not to go through them. If you’re well versed with .NET and SharePoint – you will be able to decipher these easy.

Console Debugging

Once you have the code in place – save and refresh your page. If by any reason some of the options are passed incorrectly, error handling is added and will be displayed in the HTML. You also need to turn on the console for more messages of what’s going on. I’ve added a couple of helpers that will get you information about your list such as getAllColumns(). This will display all of the fields that belong to the list you’re working with. Simply use the instance name + getAllColumns().

Conclusion

As you can see, we can make SharePoint internal lists work responsively. We may have to redo the markup entirely – but there are web services in place to grab the data. Thanks to open source code such as SPServices, jQuery and Bootstrap – our task becomes somewhat easier.
Feel free to comment below.

The post How to make a SharePoint List work with Bootstrap – using SPServices and jQuery appeared first on Michael Soriano.

In our previous tutorial, we learned how to create a photo gallery with Bootstrap. Our gallery looks nice and pretty, regardless of screen size. When an image is clicked, a modal box appears with a larger version of the image. If you haven’t done so, you might want to “Explore Bootstrap’s Grid System” first before getting your hands dirty.
View Demo
View in Github
Now we’re going to add some control buttons right below the large image, so you can navigate through the gallery right in the modal window. Take a look at what we’re building in the image below.

I know that there are plenty of plugins that do this sort of thing. But I like doing things from scratch just to learn how things work. Ready to get started – let’s begin.

Add HTML inside the “Click” Event

We’re going to have to add our markup via Javascript. This is because the contents of our modal box doesn’t really exist yet when the page loads. In our last tutorial, we’re already have a click event where we’re building our large image. We simply need to append to this code. See below (in between where it says “Start of new code” and “End of new code”).

$('li img').on('click',function(){
  var src = $(this).attr('src');
  var img = '';
  //Start of new code
  var index = $(this).parent('li').index();
  var html = '';
  html += img;
  html += '
';
  html += 'next »';
  html += '« prev';
  html += '
';
  //End of new code
  $('#myModal').modal();
  $('#myModal').on('shown.bs.modal', function(){
      $('#myModal .modal-body').html(html);
  })
  $('#myModal').on('hidden.bs.modal', function(){
      $('#myModal .modal-body').html('');
  });
 });

Explanation: – this click event is inside the small image that was clicked. We just need to know which index it is from the list of images we have. We can achieve this by using jQuery’s .index() method. So we wrote:

var index = $(this).parent('li').index();

Meaning, we want the image that was clicked, traversing to it’s parent (list item) and grabbing it’s index. Then assigning it to a variable “index”. Note that our index is array based – so the first element is a zero.
Next, we create the actual markup that we’re adding right in the modal box. You see we start with our image, then our div containing our next and previous links. You see how we consume the variable “index” that we created previously:

html += 'next »';
html += '« prev';

Notice that our “Next” button has a “+2” for it’s “href” attribute. That’s because we want a number that is ahead of the current image that is showing, plus another because we started with zero – remember? Try out the new code by clicking on an image. As soon as our modal window pops up, you see our new previous and next buttons in place. But don’t click them yet – we haven’t written that part.

Create the logic when the buttons are clicked

Now let’s take care of what happens when our buttons are clicked. Let’s think about what we need to achieve for a minute. First, we need to change the image “src” attribute of our large image to the next (or previous) image in the list. We already have our index so that shouldn’t be too hard. We also need to increment (or decrement) our index each time we click. Oh, we also have to hide the next button – once we get to the last image. The same behavior needs to happen to the previous button when we hit the first image. Add the code below right outside our document ready handler:

 $(document).on('click', 'a.controls', function(){
   //this is where we add our logic
   return false;
});

This just sets up our click handler for both previous and next buttons. Note that we have “.control” as a class to both links – so we only have to code once. Notice that we’re also binding the click event of our link to a parent element (in this case the document). This binding technique is used because our link is not present yet even when document is ready (reason why we wrote it outside of the .ready()).
Replace the current image
Now let’s add this code inside our click handler:

var index = $(this).attr('href');
var src = $('ul.row li:nth-child('+ index +') img').attr('src');
$('.modal-body img').attr('src', src);

Explanation: – first, we set up a variable called “index” (not the same as the index that we created previously as this is local to the anonymous function it’s in). This variable contains the number that is in the “href” of the link clicked. Variable “src” goes back to our un-ordered list, grabs the “nth-child” with the index as the number, grabs the image inside it and takes the “src” attribute.
Finally, it assigns the “src” value and replaces the current image with it. Increment or Decrement the Link Counters At the same time, whenever our links are clicked, we’d want to change it’s “href” value. Add the code below:

var newPrevIndex = parseInt(index) - 1;
var newNextIndex = parseInt(newPrevIndex) + 2;
if($(this).hasClass('previous')){
    $(this).attr('href', newPrevIndex);
    $('a.next').attr('href', newNextIndex);
}else{
    $(this).attr('href', newNextIndex);
    $('a.previous').attr('href', newPrevIndex);
}

Explanation: – Again, we create 2 new variables: “newPrevIndex” – which as a less than one value of the current index, and “newNextIndex” which has plus two. We then create an “if else” block. We check if the link clicked by checking it’s class, then we change both buttons “href” attributes accordingly.
Hide links when last or first image is reached
Now we need to hide the “next” link when we reach the last image in the list and hide the “previous” when the first image is reached. We also need to re-show them when we go the opposite direction. Add the code below:

var total = $('ul.row li').length + 1;
//hide next button
if(total === newNextIndex){
    $('a.next').hide();
}else{
    $('a.next').show()
}
//hide previous button
if(newPrevIndex === 0){
    $('a.previous').hide();
}else{
    $('a.previous').show()
}

Explanation: – this part is pretty simple. It simply takes the total number of list items in our gallery (var total), and makes that the basis of our comparisons. You will see the first “if” block checking if the total is the same as the new index. If it is, simply hide the “next” button, if not – show the link again. The next “if” block checks if our previous index is “0” (which is our first item), then hides and shows our “previous” link.
What about if the last item IS clicked? Okay, the above code handles when the links are clicked – but what if the last OR the first item is clicked so the modal window has the first or last item. This will still have BOTH buttons in view right? In this case, we simply need to “trigger” the same click handler we just wrote above. We do this by adding the code below – right when we create the html in our modal window:

$('#myModal').on('shown.bs.modal', function(){
    $('#myModal .modal-body').html(html);
    //this will hide or show the right links:
    $('a.controls').trigger('click');
})

Some CSS

Finally, adding some styles to our links so it looks better. Note that I didn’t really spend a lot of time styling the links because this is pretty much open to your liking. Instead, I just wrote a couple of lines to make the links presentable:

.controls{
    width:50px;
    display:block;
    font-size:11px;
    padding-top:8px;
    font-weight:bold;
}
.next {
    float:right;
    text-align:right;
}

Conclusion

So now let’s see what we have: 1) a fully responsive photo gallery (Bootstrap powered), 2) a modal pop up when a thumbnail is clicked and 3) control buttons that navigate through the images once clicked. And we wrote all of this without a plugin! How cool is that! If you haven’t seen the demo, feel free to check it out here.

The post Let’s Add Next and Previous Buttons to our Bootstrap Photo Gallery appeared first on Michael Soriano.

This page is now simply an archive of the original tutorial. Note that I’ve been having issues with my syntax highlighter (for the code in tutorial) – so the code in the steps may not show in its entirety.

View Demo
View in Github

Update 1/7/2018: The plugin now uses Bootstrap 4 – which is entirely different from the previous version.
Update 6/24/2016: Several enhancements have been made to the plugin. See the following list for the most recent changes:

1) The Modal box that opens is always going to be the large modal. Images will scale up to 100% to fill the entire modal box. You still have the option of having a small thumbnail and linking to a different image for the large size – mainly for performance purposes.

2) A new plugin option called “fullHeight” that allows you to have different heights in the thumbnails inside the grid. Most people want to see uniform heights, so I default this value to “true”. If you want to see dynamic heights, simply set this to “false”. Note that this doesn’t affect the modal images.

3) I’ve separated the styles into it’s own stylesheet. You now have to include this stylesheet in your document, or you can simply copy the contents into your own stylesheet. I tried making everything inline so you only have to include the JS file, but it’s been growing and having an external CSS is the only way to manage.

4) Added glyphicons for the “Next” and “Previous” links in the modal. This just looks better.

5) Images are required to have an alt tag, so I’m outputting the value of this into the modal as the title.

6) You can have additional text underneath the grid thumbnails by having a “p” tag with a class of “text”. I grab this value and put it in the modal as well.

Update 12/13/2015: I’ve updated the plugin to support linking to a different image when shown in the modal box. Continue reading below for instructions.

Update 11/14/2015: This code for this tutorial have been converted into a jQuery plugin. This means that it’s now easier to create a responsive photo gallery. The original tutorial is still available below (where is says “Original Tutorial”). Note that you don’t need to follow it if you’re using the plugin. But it’s good to know the inner workings of Bootstrap regardless.

How to use the Plugin:

Download the files from Github. Note that you will need to have jQuery and Bootstrap (CSS and JS) in your pages for the plugin to work effectively. It has been tested it with jQuery 1.10.2 and Bootstrap 3.3.5. Then add the plugin file (jquery.bsPhotoGallery.js) right below jQuery.

Please see README in Github for more details.

Then it’s time to initialize our plugin and pass in the options.

$(document).ready(function(){
  $('ul.first').bsPhotoGallery({
    "classes" : "col-lg-2 col-md-4 col-sm-3 col-xs-4 col-xxs-12",
    "hasModal" : true
  });
});

Explanation: We are wrapping the code in a document.ready function so jQuery is available throughout. The selector $(ul.first) is the markup for our images, and .bsPhotoGallery is our plugin.

We need to pass in our Bootstrap classes into the “classes” argument so it’s important to know how the Bootstrap Grid system works. And if you want to have a “modal box” appear with your image when clicked, you simply add the “hasModal” : true agrument.

Benefits of using this Plugin

By using this plugin, you don’t need to manually add the Bootstrap classes to each of the list item that you create. This just gets added dynamically as soon as the plugin kicks in. It also adds the Bootstrap helpers for clearing different heights of images OR if you have some kind of caption underneath (like the demo)

Moreover, the plugin has the “modal” functionality which requires some Javascript to write anyway. So we might as well bundle them all up to one complete plugin.

Linking to a different image in the Modal

In a some cases you want to show an entirely different image when the modal box is shown. Simply add an extra attribute to the image called “data-bsp-large-src“, and the value being the path to the image desired.

Below is the old tutorial – if you choose to follow it instead to using the plugin.

The Original Tutorial Starts Here:

Remember: You don’t have to follow these steps if you’ve gone through the steps above in using the plugin. But if you want to build your own, then the tutorial below is good.

So you’ve been tasked with creating a photo gallery for you website. One that looks good on a desktop, a phone – even a tablet. One that has a grid of thumbnails, plus a modal functionality when the thumbnails are clicked.

This is part one of two series. Part two is where we add “previous” and “next” links to our modal box, click here to view it.

Well you’re in luck. Not only that we’ll show you how to code it – but we’ll show you using the most advanced front end framework yet! It’s called Bootstrap. For those of you living under a rock and have never heard of it – here’s a good start.

Before we begin, make sure you read our in-depth look of Bootstrap’s grid system. This will make you familiar of the classes we need to make the gallery. Also, if you haven’t seen the demo, below is a preview of what we’re building. See how the grid responds when we shrink the page?

So ready to start? Let’s code:

Create the Markup

Assuming that you’ve downloaded and linked to Bootstrap’s files, let’s create our .container div, along with an un-ordered list. Each list item will contain your images.

Save it and we should have something like below:

Nothing magical here, just an un-ordered list of images with no styles. Now let’s apply the Bootstrap classes. First, add a “row” to the ul tag. Second, add classes “col-lg-2”, “col-md-2”, “col-sm-3” and “col-xs-4” to each list item.

Save and view it in the browser:

Believe it or not, we’re halfway done. Didn’t we say Bootstrap makes front end development faster? Try re-sizing your browser, and see how the thumbnails and the grid behave.

ul {
  padding:0 0 0 0;
  margin:0 0 0 0;
}
ul li {
  list-style:none;
  margin-bottom:25px;
}
ul li img {
  cursor: pointer;
}

Add a few CSS styles just to get rid of the list styles and unnecessary padding and margins.

Different Heights for the Images

In cases where you need to show images with different orientations, additional text or simply just different sizes. The grid naturally breaks with this pattern. To resolve this, basically you need to add an element that will clear the items. Bootstrap has a class for this called “clearfix”.

The element needs to be added where you want them to clear. For example, if you’re using “col-lg-2” (which means 6 columns), right after the 6th image, you add the element.

In addition, you have to add helper classes to only make them appear at certain viewports, such as “visible-lg-block”. So the element will have classes like below:

“clearfix visible-lg-block”

So if you look closely at our markup, there are list items that are inserted just for this purpose:

This should solve the variable height issues with the grid. Now we’re ready to move on to the next part.

Create the Light Box (Modal)

So we want the large version of the image be shown in a lightbox as soon as we click on the thumbnail. Bootstrap’s got a pre-built Javascript Modal that makes this easy as well. Add the following to your markup:

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog"><!-- /.modal-content --></div>
<p><!-- /.modal-dialog --></p>
</div>

The above code is what makes up the modal pop up box. Now let’s add some Javascript to make our images happen. Make sure you’ve linked to the Bootstrap.js file, as well as the jQuery library.

Then add a new set of script tags, plus the code below:

$(document).ready(function(){
   $('li img').on('click',function(){
        var src = $(this).attr('src');
        var img = '';
        $('#myModal').modal();
        $('#myModal').on('shown.bs.modal', function(){
            $('#myModal .modal-body').html(img);
        });
        $('#myModal').on('hidden.bs.modal', function(){
            $('#myModal .modal-body').html('');
        });
   });
})

The above code simply calls the .modal() function as soon as we click a thumbnail. The contents of the modal box is grabbed from the 2 variables we created (src, img) which is the image tag and original src of the image clicked.

Now test your code by clicking on an image. To close the modal, click anywhere outside the popup.

And guess what? I believe that’s it! It would be good to have a previous and next button on the large image so we can cycle through the images. Maybe even add a “swipe” functionality as well.

Let’s tackle that in part two of this session so stay tuned.

Conclusion

As you can see, we didn’t do much code at all to create our responsive photo gallery. Imagine all the steps we have to take if it weren’t for our amazing Bootstrap framework. Think of all the manual calculations, measurements, css code etc. Thank you Bootstrap!

Let us know what you think in the comments below. We will have a download for this project when we finish part 2 of the series.

The post Create a Responsive Photo Gallery with this plugin and the Bootstrap Framework appeared first on Michael Soriano.

The Basic .col-xx-xx Classes

Bootstraps column classes are what makes up the individual columns of the grid. It’s main purpose is to align your components into – you guessed it, columns. They’re designed to have 3 sections:

The prefix part “col” – just organizes all the col classes together, sort of like a namespace. And if you’ve worked with other frameworks in the past, the 3rd section “12” just tells us to occupy 12 columns out of the maximum 12. Pretty basic right?
But what about the 2nd part? In our example, it’s the “lg”. This tells the browser to primarily use this for large screens only (default is 1170 pixels and above). Meaning, since we can use multiple classes on any element, we can now design for multiple sizes of the screen. Pretty powerful eh?
So how does it do that?
So if you investigate the css, and look for that particular class (.col-lg-12), you will see that it’s enclosed in a media query:

@media (min-width: 1200px) {
.col-lg-12 {
    width: 100%;
  }
}

As a matter of fact, ALL of the “lg” classes are inside this media query. So the rule only applies to a specific screen resolution. The rest of the sizes (md for 970px, sm for 768px and xs for less than 768px) contains the rules for its respective classes. Pretty forward thinking right?
Show me an example of its usefulness:
A common scenario is a two-column layout, with content on the left and sidebar on the right. With just a single class applied to both areas: red div has a class of col-lg-9 and green div has col-lg-3.
But most of the time – your sidebar’s content is not ready for a full page width in medium and small view ports. So you wish the sidebar doesn’t snap to the bottom right away right?

The solution: apply multiple .col classes into the same divs (one for each of the view port sizes). Take a look at the next example – where we apply a different column number ONLY on the extra small (.col-xs-12).

You see how the divs retained their 2 column layout all the way until the extra small view port is reached. Only then, did our sidebar snap to the bottom at full width. So you see how useful this is yet?

Classes “row” and “container”

Let’s jump out of the columns and look at the classes that wrap them. We have two important classes that do just that.
.row
Just as the word describes – a row is something that is on one horizontal layer. Similar to a “record” in a database, or a “row” in a table. In Bootstrap, if you want elements to be in one horizontal layer – use a class .row.

The dark grey divs both have a class “.row”. A row basically acts as a traditional div tag, but instead can be applied as a class. I’ve used class .row on a header or footer tag – and it works really well.
.container
Ideally, you add your HTML elements that need to be grouped together inside a class .container. The “max-width” properties for each break point (the media queries) are defined in this class. It is a very important class. One that is required to make things work the way they do.
According to Bootstrap’s docs, containers are:

Easily center a page’s contents by wrapping its contents in a .container. Containers set max-width at various media query breakpoints to match our grid system.

Containers also follow the default padding rule of 15 pixels on each side. So the contents are automatically flushed together with just the right amount of gutter space all the time.

How does Nesting work?

Nesting means adding more .col classes inside of existing .col classes. Most of the time, you would need to add a .row class first – before nesting your .col divs inside in order to see desired results.
So when do you need to nest?
All the time! If you inspect most HTML documents – it’s already a series of nested DOM elements so nesting your .col classes is already expected behavior. Although in Bootstrap, nesting will save you a lot of work calculating and deciding how wide a column has to be.

See both green divs have that have .col-lg-6 classes? These are nested inside the red div (the parent div). Also, notice that a nested .col-lg-6 class takes up 50% of the parent div’s width. In other words, all you really need to remember is the 12 grid rule – no matter how deep the nesting goes.
Note that I also applied the multiple classes technique (discussed above) to the child classes shown in the screenshot above. This is so that when resized, both div’s retain it’s 6 column width – until the last view port kicks in.

Pushing, Pulling and Offsetting

For even deeper customization of the grid elements, Bootstrap allows you to shift the columns around. Push and pull classes allow you to move the column # times to the left (also know as pull), or # times to the right (push).

So consider the markup below. Even though the green div is written right above the red div, the push and pull classes allows us to order them as if they were otherwise.

green pushed 4
red pulled 4

The code above makes it so the divs appear in the browser in a different order.

What makes it work?
If you inspect the push and pull classes, it utilizes the right and left property respectively – in percents. Since everything in Bootstrap is positioned relatively, using left and right will automatically just work.

@media (min-width: 992px)
   .col-md-pull-4 {
      right: 33.33333333333333%;
   }
   .col-md-push-4 {
      left: 33.33333333333333%;
   }
}

Offsets
Offsetting classes is similar to push and pull classes – except for the “offset” keyword in the class name. Also similar to push and pull, the number in the class tells the browser how many columns to offset the element.

The difference with offsetting is that it uses the margin left property. So if your element is right next to another element – it will simply push itself against it by the designated percentage. See the code below for a .col-md-offset-4 class:

@media (min-width: 992px)
 .col-md-offset-4 {
    margin-left: 33.33333333333333%;
 }

You see how this can be useful? You can simply apply this class to whichever you want to offset and still retain the responsive margins effectively. Pretty good right?

Visibility Classes

Although this has nothing to do with the grid, I thought it is worth a mention. We’ve all worked with a system that has a default class for a “display:none”. Well not only does Bootstrap have this (it’s called .hidden), but they’ve taken it an extra step. I like to call them the “visibility” classes.
These classes do just that – controls the visibility of elements – across multiple views. Now, when designing your web site, you just now have to pick which elements to show, hide in large, medium and small views – then simply apply the visibility classes. The table below (taken from Bootstrap’s website) explains what the classes do in specific view ports.

Conclusion

I believe we’ve looked at the core classes that will get you up and running with Bootstrap’s grid system. This alone, if used properly – will save you countless hours of development time. Don’t forget to read up on the rest of Bootstrap’s many features such as the built-in components, Javascript plugins and of course, the rest of the styles. Good luck and have fun coding!
Last of all, I would like to keep this an open discussion. If there’s anything that you would like to add, please leave a comment. I will be more than happy to answer questions or append to the article.

The post Exploring the Bootstrap 3.0 Grid System appeared first on Michael Soriano.