Twitter Bootstrap, jQuery &
Laravel – Oh My!

Ian Service

About Me

Work for/with/on

  • Landscape Ontario - manage systems, web development, networks
  • ts².ca - VoIP services, Hosting (domains/web/email), Consult/Develop
  • Data Matters - Off-site backup software
  • Credible Goat - virtualization services on our own hardware

About Me

Philosophy

  • Keep things legible, well commented
  • No frameworks, code from scratch
  • No jQuery, javascript from scratch

Assumtions

  • You use version control, preferably git
  • You've posted data from a form to a PHP script
  • You enjoy beer or beer-like beverages

Twitter Bootstrap

  • Designing Sports - Matt Sharpe, made me do it
  • Responsive web framework, easy to integrate into existing projects
  • Controls for every type of data/message/input, skips the design question for devs
  • Fully open source, edit as you like
  • Cross-browser debugging taken care of. Less testing, more doing.

Twitter Bootstrap


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

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

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Twitter Bootstrap

Twitter Bootstrap

  • Included glyphicons are okay, Font Awesome are better...
  • Uses jQuery for all of it's actions

jQuery

write less, do more

  • Cross-browser javascript library
  • Uses #id and .class parameters to isolate elements

jQuery


var http = new XMLHttpRequest();
var wait = 0;

if (http.readyState == 4 || http.readyState == 0) {
	http.open("GET", oafoptions["url"] + "?" + "command=Check+Dates&contactID=" + oafoptions["contactID"], true);
	http.onreadystatechange = function() {
		if (http.readyState == 4) {
			var Date = http.responseXML.getElementsByTagName("Date");
			for (var i = 0; i < Date.length; i++) {
				showday(Date[i].firstChild.nodeValue);
				delayPopulateDate(Date[i].firstChild.nodeValue);
			}
		}
	}
	http.send(null);
}

jQuery


$(document).on("ready", function() {
	var request = $.ajax({
		url: oafoptions["url"],
		type: "get",
		data: {
			command: "Check Dates",
			contactID: oafoptions["contactID"]
		},
		dataType: "json"
	});
	request.done(function(data) {
		// do something
	});
});

jQuery

  • Typeahead.js taught me JSON

Scene Missing

Laravel

  • Compass Creative - Jonathan Reinink made me do it
  • Performance PHP Framework
  • Got everything you ever wanted integrated as classes and functions
  • Never used Model View Controller before, lots more learning
  • Makes working with teams on projects easier
  • SQL injection impossible

Laravel

  • Needs newer php than CentOS supplies
  • Use Webtatic.com archive via yum...

# rpm -Uvh http://mirror.webtatic.com/yum/el6/latest.rpm
# yum install php55w

Laravel

Install Composer


# curl -sS https://getcomposer.org/installer | php
# mv composer.phar /usr/local/bin/composer

Create your Laravel Project


# cd /var/www/html
# composer create-project laravel/laravel your-project-name --prefer-dist

Laravel

Laravel

  • app/routes.php
  • app/models/User.php
  • app/views/user/index.blade.php
  • app/controllers/UserController.php

Laravel

  • Authentication functions ready to go
  • mySQL read/write mirrors supported
  • Create tables with migrations
  • Eloquent ORM to do SQL

Laravel

app/models/Task.php


<?php
	class Task extends Eloquent {
		public function users() {
			return $this->belongsTo("User", "user_id");
		}
	}

app/models/User.php


<?php
	class User extends Eloquent {
		public function tasks() {
			return $this->hasMany("Task");
		}
	}

Laravel

app/routes.php


Route::get("tasks", function() {
	// find tasks belonging to user id 1
	$tasks = User::find(1)->tasks;
	return View::make("tasks.index")->with("tasks", $tasks);
});

Laravel

app/views/tasks/index.blade.php


<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Tasks List</title>
		<link href="/css/bootstrap.min.css" rel="stylesheet">
		<link href="/css/font-awesome.min.css" rel="stylesheet">

		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-sm-12">
					<h3>Tasks List</h3>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12">
					<table class="table table-striped">
					<tbody>
						<tr><th>Task Name</th><th>Description</th><th>Due Date</th></tr>
							@foreach ($tasks as $task)
								<tr>
									<td>{{ $task->name }}</td>
									<td>{{ $task->description }}</td>
									<td>{{ date("r", strtotime($task->duedate)) }}</td>
				        </tr>
						  @endforeach
					</tbody>
					</table>
				</div>
			</div>
		</div>

		<script src="/js/jquery-1.11.1.min.js"></script>
		<script src="/js/bootstrap.min.js"></script>
	</body>
</html>

Laravel

Think about CRUD

  • Create
  • Read
  • Update
  • Delete

Mix Laravel & jQuery

  • Handle forms with single view
  • Do data lifting with jQuery's $.ajax and controllers

Conclusion

  • Too much to learn
  • Must rebuild everything

What's next?

  • SASS?
  • PHPUnit
  • gulp

Learn More

  • Twitter Bootstrap: getbootstrap.com
  • Font Awesome: fortawesome.github.io/Font-Awesome/
  • jQuery: jquery.com & jqueryui.com
  • Laravel: laravel.com & laracasts.com & scotch.io