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

Building Your Startup: Requesting Scheduling Changes
Feb 07, 2017 @ 12:44:23

The TutsPlus.com site has continued their "Building Your Startup" series with this new article enhancing the application they've already created to send requests for scheduling changes.

As the Meeting Planner alpha testing phase began, the clearest feature gap was the inability to change a meeting after it had been scheduled. It's not an easy problem. Is it okay to just change a meeting without a participant's permission? Or should you ask? Or do either, depending on your role in organizing the meeting? What if you just want to ask if it's okay to meet 15 minutes later—that should be easy, right?

Solving all this required some reflecting on the social aspects of adjusting a meeting. Over time, I realized that the ability to adjust meetings easily after they've been scheduled could make or break the Meeting Planner brand.

He then starts out by describing the "tall mountain to climb" in the number of changes to backend, frontend and UX/UI functionality required to add the feature. He includes all of the code changes and additions that need to be made including:

  • migrations to add new tables
  • UI updates to add options for rescheduling requests
  • form changes
  • handling request submissions

Each point on the list includes code, screenshots and anything else that was required to make the update.

tagged: startup build scheduling change yii2 tutorial ui backend frontend

Link: https://code.tutsplus.com/tutorials/building-your-startup-requesting-scheduling-changes--cms-27076

Symfony Finland:
Sharing state in a Symfony hybrid with Twig, React and other JavaScript apps
Jan 26, 2017 @ 11:14:12

The Symfony Finland site has posted a new tutorial showing you how you can share state in a Symfony application between Twig, React and other Javascript-based applications.

Front end development has certainly grown up in the last few years. UI logic is increasingly being moved to the client side, but the traditional server-rendered views aren't going anywhere soon. And they shouldn't.

The two methods will live alongside each other and you'll have to work with two worlds. Let's explore an idea how to make this pleasant to work with, by sharing state between Twig templates and JavaScript.

The post starts with some background on a case where this kind of sharing was a requirement and, while the initial version was scrapped, a prototype application was born. He details what this prototype showcases (which JS libraries) and links to the Javascript involved over on GitHub. They then get into the code examples showing the creation of an AppState object that handles the serializing of the state information and store the result in the database via a Doctrine connection. This value is then output to the pages that require it, making it available to the frontend application (Vue.js, React or plain Javascript).

tagged: tutorial symfony shared state backend frontend javascript twig react vuejs

Link: https://www.symfony.fi/entry/sharing-state-in-a-symfony-hybrid-app-with-twig-react-etc

Building a WordPress-Powered Front End With the WP REST API and AngularJS: Intro & Set
Aug 05, 2016 @ 11:17:36

The TutsPlus.com site has kicked off a new tutorial series today with part one of a look at using the WordPress REST API and AngularJS to create an API-powered frontend application.

In this series about building a WordPress-powered front end with the WP REST API and AngularJS, we will put the knowledge acquired in the introductory series to use. We will learn how we can leverage this knowledge to decouple the conventional theme-admin model supported by WordPress until now. We will plan and build a single-page application (that I've named Quiescent) with a WordPress back end which will feature posts, users, and categories listing pages. We will configure AngularJS routing and build a custom directive and controllers for the resources mentioned above.

In this first part of the series they walk you through some of the planning steps before the application even gets written (including wireframes). From there they get a bare-bones HTML structure setup for the Angular app to live in and make a matching WordPress plugin. This plugin will return a featured image, author name, associated categories and image resize data related to a post. The code for the plugin is included.

tagged: wordpress api frontend angularjs tutorial plugin wireframe planning series part1

Link: http://code.tutsplus.com/tutorials/building-a-wordpress-powered-front-end-with-the-wp-rest-api-and-angularjs-introduction-and-setup--cms-26115

Symfony Finland:
Choosing a front end architecture for Symfony framework projects
Aug 01, 2016 @ 11:21:42

On the Symfony Finland site there's a new post with some suggestions on choosing a frontend for your Symfony-based applications according to your needs.

Most projects created with the Symfony framework nowadays also include quite a bit of logic done on the client side. There is a large number of options on the market and this can lead to trouble choosing between the options. The JavaScript scene is full of camps and cutting through the buzz is quite a bit of work. [...] Symfony remains neutral to what is running in the front end of the project. As with most things in web development, there is no single "right" answer to which front end frameworks to use.

They talk briefly about the history of the framework and what kinds of considerations should be made for both the front and backend technology. They also remind you that there's not a "one size fits all" frontend technology out there. They describe a few different kinds of situations (backend heavy, frontend heavy, etc) and make a few suggestions as to which way you might want to go and libraries to investigate.

The next time you're faced with starting work on a front end of a web site or web application built with Symfony, you can reflect on the experience you've got from the back end. There are usually many right answers and no absolute truths.
tagged: frontend architecture symfony application suggestion opinion project

Link: https://www.symfony.fi/entry/choosing-a-front-end-architecture-for-symfony-framework-projects

Chris White:
Avoiding the burden of file uploads
Jun 14, 2016 @ 09:18:59

Chris White has a post to his site sharing a method he's come up with to avoid the burden of file uploads in your PHP application with the help of the offerings of Amazon S3 and some creative coding.

Handling file uploads sucks. Code-wise it's a fairly simple task, the files get sent along with a POST request and are available server-side in the $_FILES super global. Your framework of choice may even have a convenient way of dealing with these files, probably based on Symfony's UploadedFile class. Unfortunately it's not that simple.

[...] For most situations using S3 is a no brainer, but the majority of developers transfer their user's uploads to S3 after they have received them on the server side. This doesn't have to be the case, your user's web browser can send the file directly to an S3 bucket. You don't even have to open the bucket up to the public. Signed upload URLs with an expiry will allow temporary access to upload a single object.

He points out two advantages of this method: that you don't have to handle the upload part of file uploads and that it gives the user more control. He shares a video of the end result (a simple file upload frontend) and the code that you'll need to use the AWS PHP SDK to make it all work together. There's some configuration changes that'll need to be made on the S3 bucket side (like for CORS) but the code itself to make the connection is relatively simple. He does a great job of explaining every step of the way and includes the Javascript needed for the frontend as well.

tagged: file upload amazon s3 aws tutorial frontend

Link: https://cwhite.me/avoiding-the-burden-of-file-uploads/

Freek Van der Herten:
Building a dashboard using Laravel and Vue
Jun 09, 2016 @ 18:55:17

Freek Van der Herten has a post to his site showing you how to combine Vue.js and Laravel to make a dashboard, a simple way to display statistics and information in a "quick glance" format.

At Spatie we have tv screen against the wall that displays a dashboard. This dashboard displays the tasks that our team should be working on, important events in the near future, which music is playing at our office, and so on. We’ve opensourced our dashboard, so you can view the entire source code on GitHub. It is built with Laravel and Vue. In this post I’d like to explain why and how we made it.

He starts with a bit of history around their need for the dashboard and how previous versions (using Dashing) turned out. He gives a high level overview of what he was trying to accomplish and why he chose Vue.js. He then gets into the construction of the pieces of the dashboard:

  • the grid
  • the internet connection (server and client side)
  • the package statistics component

He also talks about the security they added to the system (protecting the dashboard from outside eyes) and how they displayed it on a TV using a Raspberry Pi.

tagged: dashboard vuejs tutorial laravel frontend backend

Link: https://murze.be/2016/06/building-dashboard-using-laravel-vue/

Gonzalo Ayuso:
Sharing authentication between socket.io and a PHP frontend (using JSON Web Tokens)
Jun 06, 2016 @ 11:50:29

In a follow up to his previous post about sharing authentication information between socket.io and PHP, Gonzalo Ayuso has posted an updated method using JSON Web Tokens instead.

I’ve written a previous post about Sharing authentication between socket.io and a PHP frontend but after publish the post a colleague (hi @mariotux) told me that I can use JSON Web Tokens (jwt) to do this. I had never used jwt before so I decided to study a little bit.

JWT are pretty straightforward. You only need to create the token and send it to the client. You don’t need to store this token within a database. Client can decode and validate it on its own.

He updates the code from the previous post, showing how to replace the HTTP basic authentication with the JWT functionality. He makes use of some simple JWT library handling to encode/decode the claims when the token is made a part of the request.

tagged: socketio share authentication frontend jwt jsonwebtokens

Link: https://gonzalo123.com/2016/06/06/sharing-authentication-between-socket-io-and-a-php-frontend-using-json-web-tokens/

SitePoint PHP Blog:
We’re Building a Marvel Catalog Reader! Avengers, Assemble!
May 16, 2016 @ 13:23:08

On the SitePoint PHP blog they've shared a tutorial covering the construction of a Marvel Catalog Reader that hooks in to the Marvel API for its data.

In this tutorial, we’re going to take a look at the Marvel API, a tool provided by Marvel for developers to get access to the 70-plus years of Marvel comics data. First, we’ll walk through the steps in which one can acquire the keys needed to make requests to the API. Then, we’ll look at the tools we can use to test out the API. Finally, we’re going to build a website that uses the API.

They start out on the API side of things, showing you how to sign up for an account, get your token information and include a note about using the API (rate limiting and referencing the source of the images). There's a mention and example of working with the interactive API documentation and the first part of the code you'll need to make the connection. They then get into the construction of the site itself using the Laravel framework and a simple caching command. This is used to store the results from a query made via a Guzzle client. The focus then shifts to the frontend where they create the HomeController and define both the main endpoint and two others: one for viewing a specific comic and the other for the character listing. The tutorial continues on showing you how to handle the (paginated) responses from each of the calls and push the results into a cache record. Finally, they create the matching views of the API query results and some example screenshots of the results.

tagged: marvel api tutorial laravel frontend cache reader guzzle

Link: http://www.sitepoint.com/were-building-a-marvel-catalog-reader-avengers-assemble/

Gonzalo Ayuso:
Sharing authentication between socket.io and a PHP frontend
May 16, 2016 @ 10:56:30

In a post to his site Gonzalo Ayuso shows you how to combine authentication between Socket.io and a PHP frontend running a simple Silex-based application.

Normally, when I work with websockets, my stack is a socket.io server and a Silex frontend. Protect a PHP frontend with one kind of authentication of another is pretty straightforward. But if we want to use websockets, we need to set up another server and if we protect our frontend we need to protect our websocket server too.

If our frontend is node too (express for example), sharing authentication is more easy but at this time we we want to use two different servers (a node server and a PHP server). I’ve written about it too but today we`ll see another solution.

He sets up a simple Silex application with three routes - the root (/), a login route and a "private" one requiring a user to be logged in. This last route makes the connection to the websocket server in the template. This connection sends the current session ID to the backend where it's verified with a simple Socket.io middleware. Sometimes the session ID cookie will be set as HttpOnly so he provides an alternative for that: a new endpoint just for getting the current session ID for the websocket request.

tagged: socketio websocket server frontend sharing authentication session silex tutorial

Link: https://gonzalo123.com/2016/05/16/sharing-authentication-between-socket-io-and-a-php-frontend/

Symfony Finland:
Universal Rendering in PHP/Twig could be done with the Angular 2 Template Compiler
May 09, 2016 @ 11:15:01

The Symfony Finland site has a post about Angular 2, its server-side rendering support and how Symfony can fit into the picture.

At the ng-conf event in May 2016 there were sessions discussing how Angular 2 can support server side rendering in various platforms. If you're working on a project running on Node.js, then Angular 2 is a native citizen. For other options like ASP, Java and PHP there are a few options on the table.

[...] Later during the ng-conf more details on the Server Side Rendering (Universal Rendering in Angular lingo) can be implemented in different environments to improve first page load experience. [...] The downside of these approaches is that you need to add additional complexity either by adding a dependency to an external service or require a rather exotic PHP extension at this point.

Instead he suggests using Twig along with the Angular 2 template compiler and some custom extensions to the base templating to format the output as Angular is expecting it. He talks about how the current backend rendering of templates could easily be translated to this handling. He also suggests that even just partial server-side rendering might be enough to help with the performance of the application.

tagged: symfony universalrendering angular2 twig template backend frontend performance

Link: https://www.symfony.fi/entry/universal-rendering-in-php-twig-with-angular-2-template-compiler