This post is part of LxD Series in which I share my learning process about different technologies. Learn more about LxD here. Ok you saw earlier the design we are going to use for our application. Now it’s time to integrate that design in our Laravel 5 application. Before I go further, let me tell directory structure of Laravel to integrate our design. Layouts are actually part of views hence they reside in views folder. You have option to put all of your layouts within views->layouts folder or manage it better by dividing it into folders based on your site modules. For instance, Admin, Emails, Site etc. For my sake I created…
-
-
LxD Series: Laravel Basics
Before we dive into coding Laravel based app, let’s learn what’s it all about. Laravel is an MVC based framework for rapid PHP based web application development. MVC(Model-View-Controller) is a design pattern used to write softwares. It consist of three parts: Model: This component deals with data and it’s manipulation. Usually you deal with database(RDBMS,NoSQL) here but this is not necessary at all. Your model could interact with a flat file or some remote API for data manipulation. View: The data which was processed or manipulated on model layer is shown by Views to end-users so that they could interact with the app. Controller: Controller actually sits between View and Model…
-
LxD Series: Initial Laravel App design
I am extremely sorry. It took me a while to make this post. I got totally engaged in other things that made me to stay away from this. I am making this post, as a filler to end inertia. ٰIn previous post I discussed how to install and configure Laravel. In this post I am sharing a few screens of the web app we are going to build. First screen will be a dashboard which users will see after logging in. Second is showing list of project while the third is entry form. In next couple of posts I will be discussing MVC basics and how Laravel implemented them. As…
-
LxD Series: Starting Laravel 5
Hello I am back after l00Ong time!! The next thing I am going to cover after AngularJS in LxD series is Laravel 5. I am specifically mentioning 5 because it has been released last month and Laravel 4 or L4 is already in use by various organizations and developers. Laravel 5 has gone thru major overhaul. Beside change in directory structure. Specially it’s now following PSR-4 Autoloader and names-spacing strictly and this is one of the major reasons I picked L5 since it’s going to help learning PHP Standards for next projects. Though I have worked pretty much on Laravel 4 but this series totally assumes that you…
-
LxD Series: Using $http for AJAX
So this is the last post related to AngularJS in LxD Series in today I am covering one of the most basic aspect of SPAs that is, interacting with backend systems. Angular comes with $http object that does something what many of us have been doing with $post/$get/$ajax methods of jQuery. Let’s jump into the code. So far we were using a predefined array having data of our records. It was something like this: ngAddressBook.controller('ngAddressListController', ['$scope', function ($scope) { $scope.contacts = [ {id:1,first_name:'Jane', last_name:'Doe','Phone':'123-456789','Email':'jane@example.com'}, {id:2,first_name:'Jhon', last_name:'Doe','Phone':'123-456789','Email':'jhon@example.com'} ]; $scope.getTotalContacts = function () { return $scope.contacts.length; }; }]); Which will now be changed to this: ngAddressBook.controller('ngAddressListController', function ($scope,$http) { $http.get('api.php').success(function(data) { $scope.contacts…
-
LxD Series: Implementing AngularJS templates and routers
Ok so we are going to implement templates and routers in AngularJS. Routers are going to help us to get unique URLs per page, or view while templates, as you know will help to provide theme of our app. This is what we came up in my last post. What I am going to do to shift the markup of this listing in a separate file and come up with a layout. Therefore index.html will look like this: <!doctype html> <html ng-app="ngAddressBook"> <head> <title>Ng Addressbook</title> <link href="main.css" rel="stylesheet" media="screen" /> </head> <body> <div ng-controller="ngAddressListController"> <div id="container"> <h1>Ng Address Book</h1> <div id="content" ng-view> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script> <script src = "angular-route.min.js"></script>…
-
LxD Series: $scope and Controllers
I learnt a few basics of AngularJS here and here and now I am making a giant leap and implementing first screen of our Ng Addressbook which will look like this: So let’s get into it. In this post we are going to discuss some important concept of Angular called Scope. A scope is a JS object that holds info of both data execution. In short $scope variable acts as both controller and model as it sits between them. You can learn further about scope here. When you don’t explicitly define a $scope, Angular uses $rootScope which is visible within code block where you initiated your angular App. In previous post we were…
-
LxD Series: Starting AngularJS – Part 2
In previous post I wrote the very first AngularJS app which did nothing magical but showing the input text on page as I type. Now I would like to get a grip on these weird attributes added in different HTML tags. For sake of reference I am writing program again. <!doctype html> <html ng-app> <head> <title>Ng Addressbook</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script> </head> <body> <div> <input type="text" ng-model="Name" placeholder="Write your name"> <h3>Hey {{Name}} how are you doing? Glad to know you executed your first Angular App successfully.</h3> </div> </body> </html> In AngularJS,these custom attributes are called directives which are understood and processed by AngularJS. The first one we come across is ng-app. Ng prefix tells…
-
LxD Series: Starting AngularJS
I am making this post after 20 days. I got busy as there was a new addition in my family. I am father of two sons now, thanks to God Almighty. Anyways, only a week is left in January. I will try to cover as much as I can so that we can have a minimal idea about AngularJS and it’s working so that we can start using it in our future projects. Running first program Ok So we are now going to run our first program but before that we need to setup AngularJS. If you visit AngularJS, you will see you can configure it in multiple ways(CDN,Download,Bower and npm).…
-
LxD Series: Intro of Single Page Applications
We are starting our journey by studying, learning and implementing a Single Page Application(SPA) in AngularJS. Before we get into AngularJS, let’s learn a bit about Single Page Application. Single Page Applications(SPA) are web applications or sites that use a single file as a base file or a container and then loads different views based on needs. One of the main reason to come up with an idea of SPA to provide a desktop like experience that is no server round-trip or waiting for page load to get results. Yes you’re right this is what AJAX has been providing for years. SPA heavily relies on AJAX and DOM Manipulation…