Welcome to another episode of “How to WordPress.” How to WordPress is an ongoing collection of WordPress how to resources, tutorials, and videos aimed at making a better WordPress experience for both beginners and seasoned vetrans alike.
In this episode of “How to WordPress” we look at an all important first step: setting up a local installation of a web server using WAMP Server. There is also a MAMP server available for Mac users. What “setting up a local web server” means is that you can run a website or web application entirely on your own computer and have things run just as they would (or close to it at least) as if it were your live server that hosts your website out on the internet. So you could run an entire WordPress website entirely self-contained on your own personal machine. Your local setup is not exposed to the Internet, no nobody can access your site or see anything you’re doing.
Setting up a local web server is great for development, testing, and experimenting with anything else that you might want to do before you push something live to your production server on the Internet. This particular video is more of a general overview of the installation process, but it’s still a very important first step in getting WordPress set up locally.
One of the more important components of Backbone.js is using templates. What are templates? Templates are essentially pieces of markup that you can use to create a bunch of different reusable copies of that markup (including all the styles and hierarchy that you want) but populating each component with different data. Used in combination with views, they are great for doing such as iterating over a collection of models to display a list of data for some purpose. You’ll see how it all fits together in what follows.
By default, Backbone.js uses the templating engine of Underscore.js which makes sense because Backbone has a hard dependency on Underscore. However, if you’re not a big fan of the way that Underscore does templating or you just want to use another templating engine, Backbone allows for that as well. The possibilities are limitless. But let’s first take a look at an Underscore.js template because that will work out of the box with Backbone.js. You do not need to load up anything else to use templates.
OAuth has become an incredibly popular way to manage authentication and authorization for apps — mobile, desktop, and web. What is OAuth? Well according to the OAuth site OAuth is…
An open protocol to allow secure authorization in a simple and standard method from web, mobile and desktop applications.
Well, to be honest that’s pretty general and might not exactly clear everything up if you’re new to OAuth. Don’t worry though. In what follows, we are going to show some really simple implementations in a couple of different languages that will hopefully help you get a better grasp on what OAuth is and whether or not it’s a good choice for you to use on your website or in your application.
Collections have a bunch of different usages in Backbone.js, but at their core they are basically arrays of models. If you are unfamiliar with Backbone models it might be a good idea to check out post on Backbone.js Models It’s a fairly quick introduction so it shouldn’t take too long to consume.
Collections, being groups of models, are good for displaying lists of data. So if you wanted, for example, to display a list of musical artists, the model would be an “Artist,” containing the artist name, birthday, hometown, favoriteColor or any other information that we’d want to use in our application, and the collection (array of models) would be “Artists.” To create a collection as an ordered set of models you have to specify which type of model your collection holds by setting the model property.
var Artists = Backbone.Collection.extend({
model: Artist
});
Again for demonstration, we’re going to actually need some models to use our collection. So let’s create one with some defaults (which we’ll be overriding anyway).
var biggie = new Artist({ id: 1, name: 'Notorious BIG', birthday: 'May 21, 1972', hometown: 'Brooklyn, NY', favoriteColor: 'green' });
var mike = new Artist({ id: 2, name: 'Mike Jones', birthday: 'January 6, 1981', hometown: 'Houston, TX', favoriteColor: 'blue' });
var taylor = new Artist({ id: 3, name: 'Taylor Swift', birthday: 'December 13, 1989', hometown: 'Reading, PA', favoriteColor: 'red' });
Note: When developing Backbone applications (or any other application for that matter) you’ll want to give your models an id property. It makes things much easier when working with lists and they’re required for doing any sort of retrieving and/or saving models from the database using the fetch and the save or sync methods.
Models in Backbone.js are the “data houses” for Backbone applications. They hold the data that gets fetched from the server and they get passed to the Backbone Views so that the views can display them. When users create or update data (by filling out a form and clicking a button or by some other means), that data will be housed within a model and then sent up to the server for processing.
To define a Backbone model, you have to simply have to extend the Backbone Model.
var Artist = Backbone.Model.extend({});
And then to use it we could create a new insatance…
