Connect your database

Laravel supports nearly every DBMS, but we will use MySQL to save our blog posts persistently. Go into app\config\database.php and tell the framework your database credentials by changing the already existing array called mysql:

'mysql' => array(
	'driver'    => 'mysql',
	'host'      => 'localhost',
	'database'  => 'DATABASE NAME',
	'username'  => 'USERNAME HERE',
	'password'  => 'PASSWORD',
	'charset'   => 'utf8',
	'collation' => 'utf8_unicode_ci',
	'prefix'    => '',
),

Use composer to install free code packages

The package manager tool composer will help use once again. We will use the a generator written by Jeffrey Way to auto generate all the basic files we need for a resources like post entries or  comments.

Go to your root folder an open the composer.json file, you will have to add the “require-dev” array:

{
...
	"require": {
		"laravel/framework": "4.2.*"
	},
    "require-dev": {
        "way/generators": "~2.0"
    },
...
}

Next step is to go to your ssh-console again and run the following command in the “superblog” folder (the root folder of your application):

composer update --dev

The command above downloaded the generator package into your “superblog/vendor” folder, now you have to tell Laravel that it should use this package by going into “app/config/app.php” (the main config file of your application):

'providers' => array(
		/*...*/
		'Illuminate\View\ViewServiceProvider',
		'Illuminate\Workbench\WorkbenchServiceProvider',
		'Way\Generators\GeneratorsServiceProvider'
	),

 Scaffold your blog

We will now use the generator to scaffold our first resource: the posts.
The generator will generate the controller the folliwing things for us:

• The controller in which we can handle actions like list, show, edit and delete.
• The model in which we can define the relationships and special functions like getters and setters.
• Files for the view
• A migration file for the creation of a fitting database table.

All you need for this is just one line of code! So go into your ssh and type in:

php artisan generate:resource post --fields="title:string, content:text"
#Accept every question that follows with an Y (for yes)

In the end the generator will output the following sentence: All done! Don’t forget to add “Route::resource(‘posts’, ‘PostsController’);” to app/routes.php. If you follow this suggestion you can already call the following URLs:

• domain.com/posts (for a list of all posts)
• domain.com/posts/create (will show a form for the creation of a post)
• domain.com/posts/1 (will show details about a not existing blog with an id that equals 1)
• domain.com/posts/1/edit (will show a form for updating a post)

Now we will do the same for the Comments:

php artisan generate:resource comment --fields="email: string, title:string, content:text, post_id:integer"  

#Accept every question that follows with an Y (for yes)

After generating the post files go to “app/routes.php” and add Route::resource(‘comments’, ‘CommentsController’); below the route for the posts.

In this ePaper you will learn how to work with the MVC-Framework Laravel. You will experience the development of a running blog-application, that is easy to expand with free code packages, maintainable and fun to code.

The presentation and this ePaper cover the following points:

1. Prepare your webserver for the Framework
2. How to install composer
3. How install and configure Laravel
4. Bringing free pre-coded composer packages into your application
5. Scaffold a blogging tool using a generator
6. How you can use one line of code to make your Website accessible via REST
7. Forget never-ending HTML and PHP combinations – write your templates in Blade

The Result

You can see the result here: http://epaper2.brainlovers.com/posts

If something does not work the way it should you can always take a look at this repository: https://github.com/triggerdesign/LaravelBlogDemo

A short introduction

The server based script language PHP is well known for its less than desirable syntax, it is easy to use and runs on nearly every webserver without any further configuration. It is easy to create small web applications like a blog or a simple CMS with PHP, but bigger systems need a reliable architecture.

You need a lot of knowledge and have to spend a lot of time for a stable web application that makes use of modern technologies and software patterns such as MVC, ORMs and REST.

This is why Frameworks are important for professional web developers. But why should you reinvent the wheel, if there are awesome Frameworks that you can install and use for free.  A Framework should not only provide you shortcuts, tools and components, it should also have a good documentation and an active community.

Laravel is a framework that delivers everything you need for coding a web application of any size. You can use Laravel for small projects, but it also grows with your needs.
This is the reason why Laravel currently is the most hyped PHP Framework:

If you want to read more about this topic I recommend you this article: Sitepoint – PHP Frameworks 2014

You don’t like text based tutorials?

You can skip the complete Requirements and installation section if you watch this free video tutorial made by the famous Jeffrey Way:

https://laracasts.com/series/laravel-from-scratch/episodes/1

If feel like a pro and prefer a quick start you can also read a shorter version of the Installation here:

http://laravel.com/docs/4.2/quick

Requirements

I assume that you are using a Windows System for your daily work. If you are using a Mac or even Linux you will know how to use your command line to install the things you need.

This are the things you need to follow my presentation:

• A Linux environment: It is easy to install Laravel if you use the right system. Because most websites run on a Linux based server we will use Ubuntu (please do not leave this tutorial now, you don’t have to be a Linux nerd to do this). You will also need SSH access to your server to run certain Laravel commands.
• A Webserver: You should install Apache (or Nginx) as a webserver, PHP 5.3 or greater and a MySQL Database together with phpMyAdmin.
  There are quadrillions of tutorials out there for this topic but I recommend watching this:
  Install a virtual Ubuntu Server on Windows: https://www.youtube.com/watch?v=Ykt3MeNwORQ
  Or rent a server somewhere, I am sure it will come with PHP, MySQL and phpMyAdmin.
• An IDE or a Texteditor: You can use the good old Windows notepad to develop Laravel applications, but an IDE like PhpStorm, Dreamweaver or Eclipse will help you a lot and increase your coding speed enormously. You will need FTP access (via your IDE or an FTP Client like FileZilla) if you want to edit the files live on your webserver.

When it is not possible for you to run a Linux system, you can also use Windows: http://www.wikihow.com/Install-Laravel-Framework-in-Windows

If you can use Vagrant you can use the Laravel Homestead box, which is very easy to install: http://laravel.com/docs/4.2/homestead

Install Laravel

Install composer globally

We will need “Composer” a package manager for PHP. This very helpful tool will download and update all your dependencies (like an authentication system, code generators and tons of other helpers and libraries) automatically.

Use an SSH client like “PuTTY” to connect to your server and paste in the following lines to install composer globally:

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

When you now type in “composer” into you command line you will see some info about the composer commands you can use.

Lets arrive

Now we will install the Laravel framework onto our web server. Instead of downloading the files like your grandma, you can use the thing you have just installed – composer:

# Go to your web folder
cd /var/www/httpdocs 

# Get the laravel installer
composer global require "laravel/installer=~1.1"

# Make the installer accessible via the "laravel" command
export PATH="$PATH:~/.composer/vendor/bin"

# Create a new laravel app with the name "superblog"
laravel new superblog

Wait some seconds and lets watch the laravel installer doing its magic… After seeing the last composer output : “Application ready! Build something amazing.” you are ready to go!

Take a look at Laravel

Now your web folder will look like this:

• superblog
  • app/
  • bootstrap/
  • public/
  • vendor/
  • composer.json
  • artisan

Make sure your web server points to the “superblog/public” folder and give full rights to your “superblog/app/storage” folder:

sudo chmod -R 777 app/storage

Visit your website and you will hopefully see the you have arrived logo.

Our first Laravel application

Proceed

To use it in a flat webdesign you should transform the Javascript and CSS a bit, here is my version of it:

CSS

.fancybox-nav {
    width: 150px;       
}

.fancybox-next {
	right: -65px;
}

.fancybox-prev {
	left: -65px;
}

.fancybox-nav span {
    visibility: visible;
    opacity: 0.5;
}

.fancybox-nav:hover span {
    opacity: 1;
}

 Javascript

$('.fancyboxLink').fancybox({
		padding: 0,
		margin : [50, 60, 20, 60],
		helpers	: {
			media : {

			},
			title	: {
				type: 'outside'
			},
			thumbs	: {
				width	: 100,
				height	: 100
			},
			overlay : {
				css : {
					'background' : 'rgba(0, 0, 0, 0.85)'
				}
			}
		}	
	});

Source:

function trigger_get_nggalbum_galleries($albumid){
	global $nggdb;
	$albums = $nggdb->find_album($albumid);
	$gallery_ids = $albums->gallery_ids;
	return $gallery_ids;
}

function trigger_get_nggallery_images($galleryid){
	global $nggdb;
	$galleryImages 	=  $nggdb->get_gallery($galleryid);
	$gallery		=  $nggdb->find_gallery($galleryid);

	$images = array();
	foreach($galleryImages as $gImage){
		$cImage = array();
		$cImage['gallery'] = $gImage->title;
		$cImage['galleryid'] = $gImage->_ngiw->_orig_image->galleryid;
		//$cImage['ngiw'] = $gImage->_ngiw->_orig_image;

		$cImage['slug'] = $gImage->_ngiw->_orig_image->image_slug;
		$cImage['alttext'] = $gImage->_ngiw->_orig_image->alttext;
		$cImage['description'] = $gImage->_ngiw->_orig_image->description;

		$cImage['width'] = $gImage->_ngiw->_orig_image->meta_data->full->width;
		$cImage['height'] = $gImage->_ngiw->_orig_image->meta_data->full->height;

		$cStorage = $gImage->_ngiw->get_storage();
		$cImage['full'] = $cStorage->get_image_url($gImage->_ngiw->_orig_image, 'full');
		//$cImage['medium'] = $cStorage->get_image_url($gImage->_ngiw->_orig_image, 'medium');
		//$cImage['small'] = $cStorage->get_image_url($gImage->_ngiw->_orig_image, 'small');
		$cImage['thumb'] = $cStorage->get_image_url($gImage->_ngiw->_orig_image, 'thumbnail');

		$images[] = $cImage;
	}

	$galleryValues = array();
	$galleryValues['title'] =  $gallery->title;
	$galleryValues['slug'] =  $gallery->slug;
	$galleryValues['galdesc'] =  $gallery->galdesc;
	$galleryValues['page'] =  $gallery->pageid;
	$galleryValues['path'] =  $gallery->path;
	$galleryValues['abspath'] =  $gallery->abspath;

	$returner = array('gallery' => $galleryValues, 'images' => $images);
	return $returner;
}

function trigger_get_nggalbum_images($albumid, $orderingalleries = true){
	$nggalleries = agez_get_nggalbum_galleries($albumid);
	$images = array();
	foreach($nggalleries as $nggid){
		$cImages = agez_get_nggallery_images($nggid);

		if($orderingalleries)
			$images[$cImages['gallery']['slug']]['images'] = $cImages['images'];
		else
			$images = array_merge($cImages['images'], $images);

		$images[$cImages['gallery']['slug']]['gallery'] = $cImages['gallery'];
	}

	return $images;	
}

Just use these functions inside your template or plugin.

trigger_get_nggalbum_galleries($albumid) will return the ID`s of every gallery inside the given album

trigger_get_nggallery_images($galleryid) returns all images inside a gallery as an array which contains information about the gallery and the images.

gallery => title, slug, galdesc, page, path, abspath
image =>
[0] => gallery, galleryid, slug, alttext, description, width, height, full (url to full image), thumb (url to thumbnail)
...

trigger_get_nggalbum_images($albumid) works just like trigger_get_nggallery_images, but this time it will return all the images inside a given album.

Usage:

<?php
$albumImages = trigger_get_nggalbum_images(1, true);
//Returns all images in the album ID:1 and orders them by their gallery membership (second argument)

foreach($albumImages as $galSlug => $galImages):
foreach($galImages['images'] as $galImageKey => $galImage):
<li class="mix <?=$galSlug ?>" data-name="Abby" data-age="2">
				<a href="<?=$imgLink ?>">
					<img src="<?=$galImage['thumb'] ?>" />
					<div class="mix-overlay">
						<div class="mix-overlay-text">
						<h3><?=$galImage['slug'] ?></h3>						
						<span><?=$galImage['gallery'] ?></span>
						<? if(!$galIsVideo): ?>
						<p><?=$galImage['description'] ?></p>
						<? endif; ?>
						</div>
					</div>
				</a>
			</li>
endforeach;
endforeach;
?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../js/canvasme/jquery.canvasme.js"></script>

Basic Usage:

var MyCanvasMe = $("#myTestCanvas").canvasMe({
		backgroundColor: "#333",
		updateObjectFunc : function(cObject, vars, gameTime){

                },
                mouseclickFunc : function(pos, which, objects, vars){

                },
                mousemoveFunc : function(pos, which, pressed, objects){
                }
	});

Examples

1. Gravishoot – Little gravitation game which uses canvasMe
2. CanvasMe Test – Little tech demo
3. Particle Simulation

Functions:

The Code:

//the gravitational force of the simulation
	var gravitation = 100;
    //a coefficient that makes the algorithm a bit more realistic
	var gFactor = 100000;
	
	
	var selectedField = "";  //the field selected with the mouse	
	var shootersLeft = 400; //ammount of point on the screen
	var shooterSize = 5; //default size of each point
	
	var lastMousePos = [0,0];
	
	var MyCanvasMe = $("#myTestCanvas").canvasMe({
		backgroundColor: "#333",
		updateObjectFunc : function(cObject, vars, gameTime){
			
			//Check every shooter (little point on the screen) step by step (shooter_n(egative) get attracted, shooter_p(ositive) get pushed away)
			if(cObject.role == "shooter_n" || cObject.role == "shooter_p"){
	
				//Points get reflected by the wall
				if(cObject.x >= 800 && cObject.vX > 0) cObject.vX *= -1;
				if(cObject.y >= 600 && cObject.vY > 0) cObject.vY *= -1;
				if(cObject.x <= 0 && cObject.vX < 0) cObject.vX *= -1;
				if(cObject.y <= 0 && cObject.vY < 0) cObject.vY *= -1;
				
                //Add velocity-X and velocityY- to the current postion         
				cObject.x += cObject.vX;
				cObject.y += cObject.vY;
				
				var inGfield = false;
				
				MyCanvasMe.objectsByRole("gfield", function(gObject){
					var cg =  gObject.size; //current Gravity
					
					//Checks if the current point is near a gravitation field
					if(MyCanvasMe.pointNear(gObject.x, gObject.y, cObject.x, cObject.y, cg)){
					inGfield = true;
					                                        
						distX = MyCanvasMe.round(cObject.x - gObject.x,2);
						distY = MyCanvasMe.round(cObject.y - gObject.y,2);
						
						relX = (distX < 0)? -1 : 1;
						relY = (distY < 0)? -1 : 1;
						
						//Get the absolute distance between gravitation field and point
						distXY = Math.min(MyCanvasMe.round(Math.sqrt(Math.pow(Math.abs(distX),2) + Math.pow(Math.abs(distY),2)),2), cg); 
                        
						//calculates the attraction to the gravitation field using the distance, the pole (line 56) and the gravitationfactor
						rgX = (relX * distXY)*cg*1.5;
						rgY = (relY * distXY)*cg*1.5;
                                                
						addX = rgX / gFactor;
						addY = rgY / gFactor;
						
						raddX = MyCanvasMe.round(addX, 3);
						raddY = MyCanvasMe.round(addY, 3);
						
						//points in the core of the gravitation field get slowed down
						if(distXY > 20){
							cObject.vX = cObject.vX * 0.995;
							cObject.vY = cObject.vY * 0.995;							
						}			

						//if the inner core get pushed away so they dont dissapear in the middle
						attract = distXY > 10;
						
						//the higher the gravitation the lower the size of the point (just a optical thingi)
						setSize = distXY / cg * 5;						
						cObject.size = setSize;
                                                						
						//adds the positive or negative gravitation to the current velocity
						if(attract) { cObject.vX -= addX; cObject.vY -= addY}
                        else        { cObject.vX += addX; cObject.vY += addY}
					}
					else{
						//point is moving free in space
					}
				});
				
				//if the point is moving free, set the size back to default
				if(!inGfield) cObject.size = shooterSize;
			}
                },
                mouseclickFunc : function(pos, which, objects, vars){
                    selectedField = 0;
					
					//select a gfield if mouse is clicked on one
                    MyCanvasMe.objectsByRole("gfield", function(gObject){
                        if(MyCanvasMe.pointNear(gObject.x, gObject.y, pos[0], pos[1], gObject.size))
                            selectedField = gObject;
                    });       
                },
                mousemoveFunc : function(pos, which, pressed, objects){
				
					//moving the selected gravitation field (see line 126)
                    if(pressed){
                       diffX = pos[0] - lastMousePos[0];
                       diffY = pos[1] - lastMousePos[1];
                       
                       selectedField.x += diffX;
                       selectedField.y += diffY;
                    }
                    
                    lastMousePos = pos;
                }
	});
	
	
        //Inserts n != x gravitation fields (color, position and size are random)
        for(var n = 0; n != 4; n++){
            gSize = MyCanvasMe.randInt(60,120);
            gColor = MyCanvasMe.randColor();
            gColor = "rgb(" +  MyCanvasMe.randInt(50,100,0) + "," +   MyCanvasMe.randInt(100,200,0) + "," +   MyCanvasMe.randInt(210,255,0) + ")";
            gPos = [MyCanvasMe.randInt(50,750),MyCanvasMe.randInt(50,550)];
            createGravi(gSize, gColor, gPos);            
        }
        
		
		//Creates one gravitation field
        function createGravi(size, color, position){
             cgfield = MyCanvasMe.addCircle(position[0], position[1], size, color,0.5,{ role: "gfield", gradient : true , composite : "lighter"}) ;
             MyCanvasMe.addCircle(position[0], position[1], 2, color,1.0,{ role: "gfield_center", connect : cgfield}) ;       
        }


		//Inserts shooters (little dots) until the maximum ammount is reached
		window.setInterval(function(){
            if(shootersLeft <= 0) return;
            csPos = [400, 300];
            for(var n = 0; n != 100; n++){
              var cAngle = MyCanvasMe.randInt(0,3600)/10;
              createShooter(csPos, cAngle);
           }        
        },300);
        
		//Creates one shooter at the given position facing the given angle
        function createShooter(position, angle){
            shootersLeft--;
            cColor = "rgb(" +  MyCanvasMe.randInt(200,255,0) + "," +   MyCanvasMe.randInt(100,200,0) + "," +   MyCanvasMe.randInt(5,100,0) + ")";
            var shooter_n = MyCanvasMe.addCircle(position[0], position[1], shooterSize, cColor,1.0,{ role: "shooter_n" }) ;
                   
            var angleSpeed = MyCanvasMe.angleToSpeed(MyCanvasMe.randInt(20,30) / 10,angle);
            shooter_n.vX = angleSpeed[0]; shooter_n.vY = angleSpeed[1];    
            shooter_n.composite = "lighter";            
        }

If you want to use the code above you also have to use my jQuery Plugin called canvasMe: http://triggerdesign.de/wordpress/canvas-me/

The Sourcecode:

$(function(){
		var PI_2 = Math.PI * 2;
		var c_movers = new Array();
		var c_ammount = <? if(empty($_GET["a"])) echo 450; else echo $_GET["a"]; ?>;
		var c_canvas;
		var c_size;
		var c_mid;
		var c_gravity = 0;

		var c_pfriction = 0.8;
		var c_friction  = 0.96;

		var ctx;

		c_init();

		function c_init(){
			c_log("init");
			c_log("click on the field to turn on the gravity");
			c_log("move your mouse - watch the magic happen^^");
			c_canvas = $("canvas")[0];
			ctx = $("canvas")[0].getContext("2d");
			c_size = { w: $(c_canvas).width(),  h: $(c_canvas).height() };
			c_mid = { x: $(c_canvas).width()/2,  y: $(c_canvas).height()/2 };

			var i = c_ammount;
			while(i--) c_add_mover();

			setInterval(c_update, 30);
			setInterval(c_draw, 44);
		}

		function c_physics(_m){
			_m.right	= _m.x + _m.size/2;
			_m.left		= _m.x - _m.size/2;
			_m.top		= _m.y - _m.size/2;
			_m.bottom	= _m.y + _m.size/2;

			if(_m.d.xy < c_size.w *0.95){
				var toAcc = ( 1 - ( _m.d.xy / (c_size.w *0.86) ) ) * c_size.w * 0.0014 * c_gravity;
				_m.vX -= _m.d.x * toAcc;
				_m.vY -= _m.d.y * toAcc;
			}
			/*
			if (_m.d.xy < c_size.w *0.125 && c_gravity != 0){
				var mAcc = ( 1 - ( _m.d.xy / (c_size.w *0.125) ) ) * c_size.w * 0.00026;
				_m.vX += c_mid.x * mAcc;
				_m.vY += c_mid.y * mAcc;
			}*/

			if(c_gravity != 0){
				_m.vX *= c_friction;
				_m.vY *= c_friction;
				_m.v = 2;
			}
			else{
				_m.vY += 0.3;

				_m.vY *= 0.99;
				_m.vX *= 0.99;

			}

			var vx_before = _m.vX; var vy_before = _m.vY;
			if ( _m.right > c_size.w ){
				_m.x = c_size.w - _m.size/2;
				_m.vX *= -1;
			}

			else if (_m.left < 0 ){
				_m.x = 0 + _m.size/2;;
				_m.vX *= -1;
			}

			if ( _m.bottom > c_size.h ){
				_m.y = c_size.h - _m.size/2;
				_m.vY *= -1;
			}
			else if ( _m.top < 0 ){
				_m.y = 0 + _m.size/2;
				_m.vY *= -1;
			}

			if(vx_before != _m.vX || vy_before != _m.vY)
				_m.v *= c_pfriction;

			_m.v = Math.max(_m.v, 0.5);
		}

		function c_rand(minVal,maxVal, floats, randswitch){
			if(typeof floats == 'undefined') floats = 5;
			var randVal = minVal+(Math.random()*(maxVal-minVal));
			var val =  parseFloat(randVal.toFixed(floats));

			if(randswitch)
				if(Math.random() > 0.5) val *= -1;

			return val;
		}

		function c_add_mover(){
			var new_mover = new mover();
			c_movers.push(new_mover);
		}

		function mover(){
			this.color = "rgb(" + c_rand(200,255,0) + "," +  c_rand(100,200,0) + "," +  c_rand(5,100,0) + ")";
			this.y     = c_mid.y;
			this.x     = c_mid.x;
			this.vX    = c_rand(0.1,3,3,true);
			this.vY    = c_rand(1,2,3);
			this.size  = 5; 
			this.v     = 2; 
			this.d		= {x: 0, y: 0, xy: 0};
			this.alpha	= 1.0;
		}

		function c_log(str){
			var curr_log = $("textarea").val();
			$("textarea").val(curr_log + "\n" + str);

			$("textarea").scrollTop(
					$("textarea")[0].scrollHeight - $("textarea").height()
			);
		}

		//***************************************//

		function c_update(){
			$.each(c_movers, function(index, m){
				m.x += m.vX * m.v;
				m.y += m.vY * m.v;

				m.d.x = m.x - c_mid.x;
				m.d.y = m.y - c_mid.y; 
				var d = Math.sqrt( m.d.x * m.d.x + m.d.y * m.d.y ) || 0.001;
				m.d.xy = d;
				m.d.x /= d;
				m.d.y /= d;

				var d_percent = Math.min(Math.max(Math.abs(m.d.xy / 250), 0.01),1);
				m.alpha = Math.max(1-(d_percent), 0.3);
				m.size = Math.max(d_percent*13,0.5);

				c_physics(m);
			});
		}

		function c_draw(){
			ctx.globalCompositeOperation = "source-over";

			ctx.clearRect(0,0,c_size.w,c_size.h, "#fff");

			$.each(c_movers, function(index, m){
				ctx.beginPath();
				ctx.fillStyle = m.color;
				ctx.globalAlpha  = m.alpha; 
				ctx.globalCompositeOperation = "lighter";
				ctx.arc( m.x , m.y , m.size , 0 , PI_2 , true );
				ctx.fill();
				ctx.closePath();
			});
		}

		$(c_canvas).click(function(){
			if(c_gravity == 0)
				c_gravity = 1;
			else
				c_gravity = 0;
		});

		$(c_canvas).mousemove(function(event){
			if(c_gravity == 0)
				c_mid = { x: $(c_canvas).width()/2,  y: $(c_canvas).height()/2 };
			else
				c_mid = { x: event.clientX -20,  y:  event.clientY -30};
		});

	});