BurgerPedia: A Complete Laravel 5 and AngularJS Tutorial with Bootstrap to Make it Pretty

In this tutorial, I will get you up-and-running with Laravel 5, AngularJS and Bootstrap by building a real-world web application. We will be building a pretty advanced CRUD (CREATE, READ, UPDATE, and DELETE) application called BurgerPedia. BurgerPedia can be thought of as a Wikipdia clone for hamburgers. So users can add a hamburger and the community then add/edit/delete multiple descriptions about the hamburger. You can see it live here and I have provided screenshots as well.

Here are two screenshots of what we will be building:

We will use Laravel 5 for the backend and AngularJS for the front end. And because we want to make things pretty, we will use twitter bootstrap to make it all look nice. Now, before going too deep into this tutorial, I have to mention that I am far from an expert in any of the frameworks that I use in this tutorial. I simply created this tutorial as a way to force me to learn the various fameworks, especially Laravel. I have been slowly migrating from CakePHP to Laravel so this tutorial is for me as well as anyone else who is interested. The reason why I am really interested in Laravel is that it is hard to ignore the popularity of this PHP framework. Although other PHP frameworks are on the decline, Laravel continues to grow in popularity, as highlighted by the Google chart below:

So, this tutorial is a chance for me to get my hands dirty and walk you through the development process, step-by-step. Now, let’s talk about all three main frameworks that we will be using:

Laravel

Laravel is a web application framework with expressive, elegant syntax. The creators of Laravel believe development must be an enjoyable, creative experience to be truly fulfilling. Laravel attempts to take the pain out of development by easing common tasks used in the majority of web projects, such as authentication, routing, sessions, and caching. Laravel will be used in our web application to create a RESTFUL API that serves as the backend to our application. This backend will allow us to do the basic CRUD(Create, Read, Update, Delete) operations for our hamburgers and their descriptions

AngularJS

AngularJS is an open-source web application framework maintained by Google and by a community of individual developers and corporations to address many of the challenges encountered in developing single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) architecture, along with components commonly used in rich Internet applications. AngularJS will be used as the frontend for our application.

Bootstrap

Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. Bootstrap will be used to make our web application pretty J Hey, I’m vain and looks matter to me.

This tutorial will cover:

• Models and Controllers in Laravel
• Pagination in Laravel
• RESTful APIs and routes
• AngularJS application structure
• AngularJS controllers
• AngularJS infinite scroll
• Displaying data from the REST API using AngularJS
• AngularJS form validation
• AngularJS data filtering
• The Bootstrap framework

Finally, like most of my tutorials, it’s important that I tell you what versions of the frameworks that I am using. Depending on the version that you use, certain things that I do in this tutorial may not work. So, if you really want to follow along, use the same version as I am, and you should be fine. For this tutorial, I am using:

• Laravel 5.3.8
• AngularJS 1.5.8
• Bootstrap 3.3.7

This tutorial should take you about 15-30 minutes to complete. It was inspired by the wonderful tutorial on Pluralsight by Steven Maguire called Getting Started with Laravel 5. I will also be putting the code on GitHub once I find the time.

Next Step: Installing Laravel