urlscan.io logo urlscan.io
SecurityTrails logo

service.to Open in urlscan Pro
206.210.111.198  Public Scan

Back to summary
URL: http://service.to/
Submission: On April 18 via manual from US — Scanned from CA

Form analysis 0 forms found in the DOM

Text Content

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