Building a custom web application generator with yeoman

Background

At the University of Central Missouri our web application team currently uses a home-grown framework built to help us speed up our development and maintenance time by providing the common, standardized pieces we use in every one of our applications.

The original version consisted of a git repository with a readme.txt file with instructions on how to search and replace certain placeholder text for titles and variable, file, and class names.

When I discovered Grunt I created a script to ask for certain questions in lieu of the search and replace method mentioned above. This worked well and sped up our application start up time tremendously; however, there were certain conditional pieces of code in our applications that should be included or not based on answers in the Grunt script. For example, we use two different Database Management Systems (DBMS) and have certain code needed depending on which is chosen for that project. I was unable to find a good solution for this using Grunt.

Our Basic Yeoman Setup

After some time passed, I came across Yeoman and determined that it would handle the conditional case mentioned above and would allow for more flexibility in the future. I have outlined the main pieces of how I set it up below.

Dependencies / package.json

Besides the yeoman-generator dependency, our application generator also leverages random.org’s API to generate unique strings using this npm library. I have included our package.json file in its entirety below.

 app/index.js

We start by requiring the random-org generator and then instantiating it using our API key we received from Random.org.

Prompts

Next we set the prompts we want for our application details. For example, we ask for an application abbreviation which is used to build portions of class names and variables throughout the application. Additionally, we have a checkbox prompt for DBMS type which is used in the templates to conditionally pull the correct database files.

Example prompts:

Example template logic:

Notice that the checkbox value is used in the template if statements and the application abbreviate value is used in the  class instantiation call.

While still inside of the prompting function, but after the prompts, we access the answers given and set them into a variable (this.all_app_vars) that will be used in the writing function.

Generating the files

In the writing function we call the Random.org API to get the random strings, display information from Random.org so we don’t violate the API’s terms, and call the function that copies the templates to our destination (the template variables are parsed during the copy function).

 Example index.js file

 

Hopefully that will give you an idea of how to set up your own custom generator, if you have any questions please leave a reply in the comments and I’ll do my best to get them answered.

Creating a custom post type for sharing videos in WordPress

The idea

In a recent project that I worked on, my client wanted to be able to post videos on his website as a completely separate type of content (Video Sermons) with it’s own archive page. Further requirements included ability to post upload videos and link to them, as well as post videos from outside sources such as Vimeo, YouTube, etc.

There are several methods to accomplishing the above requirements. I chose to utilize the Custom Post Type method. If you aren’t familiar at all with Custom Post Types I would suggest reading the WordPress codex page on them.

Registering the Video Post Type

The first task is to register the new post type using the register_post_type function. Here is the function I created for this purpose, I have added comments in the code to help understand what is happening.

Adding the Video Upload meta box *

Next I needed to create the meta box that would hold the video information. I wanted to provide one field where the video information was placed, both for embed code (YouTube, etc.) and for local videos (uploaded to the site). I also wanted to use the built in media upload functionality of WordPress as much as possible in order to keep the interface consistent for the client. Since I borrowed heavily from this post for the next few items it seems silly to duplicate that information. I would encourage you to read Michael’s post to understand what is going on. I have posted my code and notes on things that I changed from Michael’s post. The main difference is that his post has to do with image upload and mine has to do with video upload.

Saving the data *

Note: All of the above code is in a file called video.php and located in the theme’s lib folder.

Adding the JavaScript *

First we need to create some javascript to handle tying in our field with the media uploader. This is placed in a file named video-upload.js in the theme’s js folder.

Then we need to make sure we include the media upload js and styles

* Thanks to this post by Michael for giving me a great base from which to build.

Creating the Video Sermon archive page

To create the Video Sermon archive page, I copied the theme’s page.php code and modified the query_posts function to pull in the video post type exclusively. Here is the top of the page with all of the parts that I modified (see the comments in the code for more details)

Everything else on the page (including the loop) remained identical to the page.php file. Next I created a new page in the WordPress Admin and selected this template.

Creating the single video page

To create the single video page I copied the theme’s single.php file and made these modifications:

  • For local (uploaded) videos I needed a video player. I chose to use Flowplayer. I included an add_action call at the very top of the page for the video player so that it only is called on that page.
  • Inside the loop, I needed to get the code from the video meta box and determine whether it was a local video or not and display it appropriately based on that.

Adding Flowplayer to the theme

In order to add Flowplayer for use in the theme, I placed the downloaded Flowplayer files in a new folder (called third-party to keep it separate from other theme files) inside the theme. You can see the reference to the swf file on line 13 of the code above.

Bringing it all together in the functions.php file

First I pull in the video.php file that creates the video post type:

Then we create the function that pulls in the flowplayer javascript. (the one we called from the single video page.

Using Premium WordPress themes for client projects

Premium WordPress themes have evolved to the point where they are viable options for projects. I recently had a client approach me with the need for a revamp of their website, but they had limited resources. I suggested that they use a premium theme from Themeforest to keep their costs down while still having a site that looks professional.

After looking though several themes we decided on the Karma theme by TrueThemes. For less than $40 dollars they were able to change the site from an outdated design; static, and hard to update; to a professional looking, current design, with the easy to use WordPress backend. My client was then able to focus their budget toward the other important aspects of the site’s revamp: better content organization, video presentation, online virtual seminars, etc.

Disclosure: Some links in this post are affiliate links.

Showing the current weather on your website using MagpieRSS

The idea

I recently completed a quick project where the client wanted to have the local weather conditions displayed on his website through an RSS feed. The first hurdle I came to was finding a website that provided the feed and allowed for its use on other sites. I originally tried weather.com, but their terms of service didn’t allow commercial use. After searching for a while I came across weather.gov which provides XML and RSS feeds of the current weather conditions and allows you to display them on your own website without restrictions. The only downside is that you probably won’t be able to show weather for your exact location (only from the nearest observation center). You can view locations by state at this page.

Installing MagpieRSS

It’s easy to get started with MagpieRSS. Download it from SourceForge.net and extract it. Next, copy the extlib folder and the files: rss_cache.inc, rss_fetch.inc, rss_parse.inc, and rss_utils.inc into your website’s includes directory, preferably outside the web root. Next we need to set up the PHP that uses MagpieRSS to parse the RSS feed.

The $rss variable is an array of values from the feed including the title, link back to weather.gov for more details, and description. In most feeds we would have multiple items in the feed that we would want to loop through and display. This feed; however, only returns one item – and that is all we want to display. So when we call the item we insert [0] to specify the first array value.

Note: to get the code to display properly above I had to modify the link using [ instead of <.

Now that we have the format for our code we can save this file as feeder.php and put it in our includes directory. Next, we include it in our website like this:

Last, we give it a little bit of style:

I hope you find this useful. You can also see a working example. Feel free to view the source and use it in your own website.

Get Started generating PDF’s today! Part 3 – extending/reuse

Extending FPDF

If you are new to FPDF you may want to start by reading Part 1: Installation and Part 2: Playing with the options.

We can extend the core FPDF library and set up some functions that we can reuse. For example, we want to present a report in a table. The table will need column headings so that we know what each column of data represents. We could build that into the file for this one report, but say we want another report, different heading names but the same basic structure. We can either replicate the entire file from the other report and change the heading values or we can extend FPDF and create a tableHeader function that accepts an array of heading values and creates the header on the fly. This approach will save us time as we add new reports.

Now we want to use this to create a pdf. So in our index.php file we need to set up some values and generate the pdf.

There you have it, a reusable table head builder. Now you can use the same concept as above to output the table data.

Get Started generating PDF’s today! Part 2 – playing with the options

If you haven’t read part 1 of the series, you might want to start there.

Options

Today we are going to talk about the options we have when creating a pdf with the FPDF library. We will cover:

  • Changing page orientation and size
  • Changing Font styles
  • Changing the size and style of text cells
  • The different options for saving the final product

Changing page orientation and size

When we initiate the FPDF class we can specify the page orientation, unit of measure and size. Page orientations options are: Landscape (L) and Portrait (P). Next we can set the unit of measure (used for everything except font sizes): Point (pt), Millimeter (mm), Centimeter (cm), and inch (in). To specify page size we have many options along with the ability to specify our own custom size. The options are: A3, A4, A5, Letter, and Legal.

So if we want to create a legal sized PDF in the landscape format, using millimeters as our unit of measure this is what it looks like:

Say we want a custom sized page, we need to specify the width and height in an array. The width and height values will use the specified unit of measure. Here is an example:

Our page will be 250 millimeters wide and 400 millimeters high.

Changing font styles

Next we want to set the font and its styles. According to the FPDF website the standard fonts available are: Arial, Times, Courier, Symbol, and ZapfDingbats. We will use Times for this example. Now we can set the font style, the options include: Italic (I), Bold (B), or Regular (empty string). You can also specify a combination of these styles. We will use bold. Last, we want to set the font size (always in points). For this example we will set it at 22 points.

So, our example would look like this:

Note: This can be used on a line by line basis to change the font in a pdf.

Changing the size and style of text cells

Now we need to write some text to our pdf. To do this we use the Cell function. There are a lot of options available when writing a text cell: Width, Height, text you want printed, border, where the current position should go after this cell, text alignment, whether the cell should have a background color or not, and a link for the text. For a complete list of the variables see the manual at fpdf.org. We want to output our name in text that is centered on the page, with no border and we want the cell to go to the next line after writing our name.

So, our example would look like this:

I have found it handy to have the cell page of the manual open for reference while building my pdfs. It helps me keep the options straight.

The different options for saving the final product

We’ve got our document ready and now we need to save it. We can specify the name for the file (I have found it best to specify a name without spaces such as file_name instead of file name) and the destination of the document. We have four destinations available: Inline (I) to the browser, Download (D) with the browser, Save (F) to a local file, and return the document as a String (S).

So, our example would look like this:

Note: I have found “D” to be the most consistent option across the different browsers.

This concludes our lesson for today. I hope this helps you get started playing with the options!

We will be continuing the series soon by extending FPDF to save us time.

Read Part 3 – Extending & Reuse

Get started generating PDF’s today! Part 1 – installation

FPDF

FPDF describes itself as

FPDF is a PHP class which allows to generate PDF files with pure PHP, that is to say without using the PDFlib library. F from FPDF stands for Free: you may use it for any kind of usage and modify it to suit your needs.

Installation

  1. Download the library and place it in a directory accessible by your web server

    It generally makes sense to put it in an includes directory.

  2. Include it in your web application
  3. Create the page

For more information and tutorials on building pdfs you can go to the FPDF website and reference their tutorials and the manual

We will be continuing this series soon with a closer look at our options when creating a page. Some things to look for are:

  • Changing page orientation and size
  • Changing Font styles
  • Changing the size and style of text cells
  • The different options for saving the final product

Read Part 2 – playing with the options

Timeclock: using FPDF to generate timesheets

Background

Read background information on the design of the timeclock system!

Single vs. Multiple timesheets

Since each student’s timesheet is formated the same way, whether it is generated as a single timesheet or as part of multiple timesheets, I developed a class to create the timesheets.

Figure 1: A sample timesheet
Figure 1: A sample timesheet

In the class is a function called outputPDF which accepts one argument: an array of the timesheet values. Inside the function we begin creating the page.

Now that we’ve got the timesheet ready let’s create a function that determines the timesheet type.

There are a few things we want to accomplish with this function.

  • include and instantiate the fpdf library
  • Call the FPDF page numbering function and create the first page:
  • Set the page title:
  • check to see if the type is single and if so, generate the timesheet:
  • if the type isn’t single check to see if it is multiple and if so, generate the timesheets:

So all together it looks like this: