Looking for more information on how to do PHP the right way? Check out PHP: The Right Way

CloudWays Blog:
Create A Laravel Vue Single Page App In Under An Hour
Feb 23, 2018 @ 10:15:51

The CloudWays blog has a new tutorial posted that walks you through the process of getting a Laravel+Vue.js single page application running in less than an hour. The instructions for the server portion cover the use of CloudWays' service but they could be applied to any number of other hosting providers.

Laravel has become the most popular choice for developing PHP projects. One important reason for this popularity is the built in support for Vue.js, a very fast growing JavaScript library for developing impressive front-ends.

This combination results is fast, secure and very impressive applications that need minimum time to go from ideation to final code review. The support for Vue.js means that Laravel developers could use Vue components easily within their apps without wasting time in writing integrations for the components. To demonstrate the support, I decided to create a single page application in Laravel with a Vue.js powered frontend.

They start off with a list of prerequisites (software to have installed) and then move on to setting up the database and creating a "tasks" migration. The tutorial then covers building out the authentication handling (via artisan) and the creation of the "task" model and controller. With all of that in place it starts in on the backend functionality to read, create, update and delete the tasks. Next it moves to the frontend showing how to create the Vue.js components required and integrating the Javascript into the view to link it to the backend for managing the tasks.

tagged: tutorial laravel singlepage application spa vuejs task

Link: https://www.cloudways.com/blog/laravel-vue-single-page-app/

Laravel News:
Building a Vue SPA with Laravel Part 3
Feb 19, 2018 @ 11:22:08

The Laravel News site is back with the latest part in their series covering the combination of Laravel and Vue.js to create a basic application. In this latest part (part 3) they continue from the previous tutorials and show how to pull in real data versus the fake data from before.

We will continue building our Vue SPA with Laravel by showing you how to load asynchronous data before the vue-router enters a route.

We left off in Building a Vue SPA With Laravel Part 2 finishing a UsersIndex Vue component which loads users from an API asynchronously. We skimped on building a real API backed by the database and opted for fake data in the API response from Laravel’s factory() method.

If you haven’t read Part 1 and Part 2 of building a Vue SPA with Laravel, I suggest you start with those posts first and then come back. I’ll be waiting for you!

In this tutorial, we are also going to swap out our fake /users endpoint with a real one powered by a database.

They get immediately back to the code, creating a "user" table seeder to generate randomized data and adding it for execution. Next, they switch to the database side, creating the MySQL database for the user data and running the seeding to create the users. The tutorial then shows the creation of the Users controller and what the resulting JSON will look like when pulling all users. Finally, it moves out to the client side and shows how to pull in the data pre-load and push the user details into a template to be rendered.

tagged: vuejs spa singlepage application part3 series tutorial laravel

Link: https://laravel-news.com/building-vue-spa-laravel-part-3

Laravel News:
Building a Vue SPA with Laravel
Jan 04, 2018 @ 10:23:08

On the Laravel News site there's a new tutorial posted showing you how to create a Vue.js single page application with Laravel for when you have API-driven applications.

Building a Vue single page application (SPA) with Laravel is a beautiful combination for building clean API-driven applications. In this tutorial, we show you how to get up and running with Vue router and a Laravel backend for building a SPA. We will focus on the wiring up all the pieces needed, and then in a follow-up tutorial, we will further demonstrate using Laravel as the API layer.

They walk you through the creation of a simple SPA that will render the initial content and allow for the browsing back and forth between content without a page reload. The tutorial helps you get all required libraries installed and includes the code to define the Vue router and two routes. The contents of the .vue files are also included as well as the server-side code to power the application.

tagged: laravel vuejs tutorial singlepage application spa introduction

Link: https://laravel-news.com/using-vue-router-laravel

Phillip Shipley:
How to automatically deploy static single-page-apps to Amazon S3 and Cloudfront or
Jun 02, 2017 @ 10:39:26

Phillip Shipley has a post to his site for the AWS and Cloudflare users out there (or those that want to use these together) about an easy way to automatically deploy static sites.

Managing web servers can be a lot of work. Especially when it comes to configuring and maintaining SSL certs, server and software updates, etc. Let’s Encrypt has made the SSL part a lot easier, but it is still work and to me feels like overkill for something as simple as a static single-page-application. Especially when there are dead simple solutions like Amazon S3 that can be used to host and scale a static website without any server configuration or maintenance. Adding CloudFront with a free SSL certificate from Amazon’s Certificate Manager service make SSL painless too.

[...] In this article I’ll cover how to use Codeship’s continuous integration and deployment service to build/test your app, deploy it to S3, and then clear cached versions of it from CloudFront and Cloudflare.

He then shows how to use the Codeship service to do the actual deployment, broken down into a few steps:

  • Step 1: Setting up project in Codeship
  • Step 2: Configure Tests
  • Step 3: Configure Environment Variables
  • Step 4: Configure Deployment

Each step includes both screenshots and configuration examples you'll need to get the workflow set up and running for your site.

tagged: deploy tutorial singlepage amazon s3 cloudfront cloudflare codeship process

Link: http://www.phillipshipley.com/2017/05/how-to-automatically-deploy-single-page-apps-to-amazon-s3-and-cloudfront-or-cloudflare-using-codeship/

NetTuts.com:
Building a Customer Management App Using AngularJS and Laravel
Oct 01, 2014 @ 11:52:09

The NetTuts site has posted the first part of a tutorial series showing you how to create an application with Laravel and AngularJS to do some customer management. The application lets you track customers and transactions related to them.

When creating a single-page app we should use some kind of framework to do some of the job for us so we can focus on the actual functionality. AngularJS fits here perfectly, because features like dynamic dependency injection and bi-directional data binding are just great. Sometimes we also require some kind of server. If you've chosen PHP then Laravel may be your best option, as it's easy to work with and pretty powerful. In this part of the tutorial, we will build the front-end of our application using AngularJS.

He starts with some of the "preparation work" that has to be put into the main template for Angular to even work, including the loading of the Angular files themselves. He sets up a basic route and, some initial styling (CSS) and talks about the overall structure of the application. He includes the code to create the customer controller and transactions handling (via controllers) and how to do the usual CRUD (create, read, update, delete) operations for each. HTML output templates are also included to handle the forms and other tabluar output needed to display customer details.

tagged: angularjs laravel framework singlepage customer management tutorial

Link: http://code.tutsplus.com/tutorials/building-a-customer-management-app-using-angularjs-and-laravel--cms-22234

Ryan Malesevich's Blog:
SimpleView Gallery: Browse Images in a Directory
Sep 12, 2006 @ 07:07:08

Ryan Malesevich points out a very simple, one-script solution to the common need for an image gallery for your website - SimpleView Gallery - that a friend of his has written up.

In my post that I wrote that I would be back for good this time, I mentioned that I was going to be working on a gallery script. My good friend Chris let me know that he also wrote a simple script viewer that works quite while. His script is SimpleView Gallery and it requires to modification for it, just upload the script to a directory that contains images and that's it.

He also mentions a small change he made to make it work with WordPress and it's automatic thumbnailing system (to hide those thumbnails).

tagged: simplegallery view images browse wordpress singlepage simplegallery view images browse wordpress singlepage

Link:

Ryan Malesevich's Blog:
SimpleView Gallery: Browse Images in a Directory
Sep 12, 2006 @ 07:07:08

Ryan Malesevich points out a very simple, one-script solution to the common need for an image gallery for your website - SimpleView Gallery - that a friend of his has written up.

In my post that I wrote that I would be back for good this time, I mentioned that I was going to be working on a gallery script. My good friend Chris let me know that he also wrote a simple script viewer that works quite while. His script is SimpleView Gallery and it requires to modification for it, just upload the script to a directory that contains images and that's it.

He also mentions a small change he made to make it work with WordPress and it's automatic thumbnailing system (to hide those thumbnails).

tagged: simplegallery view images browse wordpress singlepage simplegallery view images browse wordpress singlepage

Link: