Posted on

Quickstart: Laravel 4

Your mileage may vary with this particular quickstart depending on your host. I am using hostmonster, a fairly poor choice for current web development trends, but we aren’t exactly creating the next InstaBookSpaceGramChat here.

1. Download Composer

In SSH, navigate to  the root of your project folder and run the following to download Composer.

curl -sS https://getcomposer.org/installer | php

2. Create your Laravel project

Before you go all copy-pasta crazy down below, make sure to replace your-project-name with whatever it is you are making.

By default, the command to install Laravel project is:

composer create-project laravel/laravel your-project-name --prefer-dist

For my particular environment, I needed to add php and change composer to composer.phar. Again, this is more than likely due to my shared server environment. The updated command looked something like this:

php composer.phar create-project laravel/laravel your-project-name --prefer-dist

Update 09/10/14: For Dreamhost servers, I ended up installing Composer in ~/bin so my Composer command ended up being php ~/bin/composer.phar. I solved this mess by creating an alias via alias composer='php ~/bin/composer.phar'. This allowed me to run composer all over the place.

3. Make /public directory work properly

At this point, your Laravel app is ready to go. Unfortunately, by default, everything needs to be accessed via /public. So if http://www.instabookspacegramchat.com is pointing to your new Laravel project directory, you would need to go to http://www.instabookspacegramchat.com/public to see your new project at work.

This, to me, is a horrible flaw with the base Laravel install. To get around it you can either a) set your document root to /public for your domain or b) create an .htaccess file in your project root.

For option b, I used the following in my newly created .htaccess file:

RewriteEngine on
RewriteCond %{REQUEST_URI} !^public
RewriteRule ^(.*)$ public/$1 [L]

4. Create a view and route

If you open up your /app/routes.php file, you’ll see that your default route is being handled by the hello view. The hello view lives in /app/views as hello.php.

To create a view and route to call your very own, you’ll need to go back to your /app/routes.php file and add the following:

Route::get('/foo', function()
{
return View::make('foo');
});

The parameter of View::make() refers to the view. In our case, foo refers to /app/views/foo.php

Keep in mind this is one of the more basic methods of creating a route.  In your later Laravel travels, your route-fu will be much stronger.

Next we need to make our foo view. Save & close your routes.php and create /app/views/foo.php. Throw whatever HTML you want to in this new view and hop on over to http://[url]/foo.

5. Next Steps

  • Creating Blade templates
  • Advanced routing
  • Creating controllers
  • Creating models
Posted on

Quickstart: Ember.js

Need to dive into the MVC Javascript web application framework known as Ember.js and only have 10 minutes? Look no more!

The following is all done in the same page. In my case, it is index.html.

1. Get Ember.js, Handlebars.js and jQuery


<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://builds.emberjs.com/tags/v1.3.0/ember.js"></script>

2. Start your application

In this case myApp is our application. myApp can be changed to whatever you want. Just be sure to keep it in mind to reference later.

<script type="text/javascript">
window.myApp = Ember.Application.create();
</script>

3. Setup a route or two

<script type="text/javascript">
myApp.Router.map(function() {
this.resource('index', { path: '/' });
this.resource('about', { path: 'about' });
});
</script>

The first parameter of this.resource() corresponds to a <script type="text/x-handlebars"> element with a matching data-template-name attribute.

For example:

this.resource('foo', { path: '/foo-page' });

refers to:

<script type="text/x-handlerbars" data-template-name="foo">
<p>some html...</p>
</script>

and would be accessed by http://[your url]/foo-page.

4. Make your views

<html>
<body>
<script type="text/x-handlebars" data-template-name="index">
<h1>Index Page</h1>
<p>{{#link-to 'about'}}about{{/link-to}}</p>
</script>

<script type="text/x-handlebars" data-template-name="about">
<h1>About Page</h1>
<p>{{#link-to 'index'}}home{{/link-to}}</p>
</script>
</body>
</html>

View the final product here.

5. Next Steps

  • Exploring Handlebars
  • Data Binding/Modeling
Posted on

Updating/Adding packages via Composer

So you found a fantastic new bundle* package and want to add it to your Laravel 4 installation. Here’s what steps I just took to get it done.

* Bundles were used prior to Laravel 4. If you are looking at a bundle, it isn’t compatible with Laravel 4, by default.

The fantastic package that I just had to have was Imagine, an image processing package.

Depending on your server configuration you may or may not need to type php before any of the scripts below.

If it’s been a while since you’ve added a package to your site, it would be a good idea to make sure you have the latest and greatest Composer.

php composer.phar self-update

Navigate to your project’s laravel directory. It should be a directory with mostly just files related to composer. Files such as composer.phar, composer.json, etc. Once there, use your SSH text editor of choice to edit composer.json. For me, it was this

vi composer.json

Per the instructions at Imagine’s github, you need to update your composer.json as follows:

{
  "require": {
    "orchestra/imagine": "2.3.*@dev"
  }
}

In my case, I already had something in my composer.json so it ended up looking like this:

{
  "require": {
    "monolog/monolog": "1.2.*",
    "orchestra/imagine": "2.3.*@dev"
  }
}

Once that is saved, you can update your Laravel installation via this:

php composer.phar update

For further reading, feel free to check out Composer in more detail at https://getcomposer.org/doc/01-basic-usage.md

Posted on

Explaining the MEAN stack

Let’s check out the web’s latest darling buzzword. The MEAN stack in cynical, sub-layman’s terms. Whoever’s turn it was to be cutesy with the nerd acronyms really nailed it this time.

MongoDB – http://www.mongodb.org/

This is our method of storage. It is the 50’s hip greaser dude to mySQL’s Pauly Shore.

According to http://www.mongodb.org/, it is agile and scalable. If you’re playing hipster developer bingo at home, you’re off to a great start. Also, it has automatic sharding. If this doesn’t make you giggle, then you need to see yourself out.

MongoDB is a key player in the NoSQL movement. That is, not relying fully (or at all) on a database for data queries. Instead using XML, JSON, etc document based solutions. No more querying one table to query another table to query another table. You get delicious data objects that bend to your will at a fraction of the overhead.

ExpressJS – http://expressjs.com/

Bundles up a bunch of NodeJS goodness to be used at our leisure. Perhaps the most expendable letter in the MEAN acronym, this is mostly to make life easier until we want/need to get under the hood of NodeJS.

AngularJS

It’s tagline is Superheroic Javascript MVW Framework. MVW!? What magical, problem solving acronym is MVW? Well it’s Model-View-Whatever. At first glance, this caused a grimace, but upon further research, it is a peaceful gesture to calm the gang mentality of MVC vs MVVM and whatever else ego tripping developers argue over when it comes to frameworks.

What it actually does, is quite impressive. It turns what used to be lifeless HTML into something alive and dynamic.

Nodejs

This allows you to write server side applications via normal javascript. After being a supporting player in all of the web hoopla since animated gifs, it finally gets to be the star.

There you go, you can now bring up this spicy hot buzzword at interviews or company bbqs and ACTUALLY know what it means. If only this existed when I needed to flub my way through the last six months.