The other day I worked on putting together a custom PHP CMS, where admin users are able to create, delete, and edit other admin users. Admin users are also able to create content and rearrange the way the content appears in the main nav.

One challenge of this project was to work on creating a secondary menu that presented additional information to the admin user. If you’re curious about the code, you can find the GitHub repo here.

Here’s a screenshot of the homepage for the CMS:

And here’s what the interface looks like for managing admin users:

This project was a bit of practice for me to get more familiar with PHP, since it’s important to know PHP when working with WordPress or Drupal websites.

The other day I worked on putting together a PHP CMS from scratch, and I learned a little bit about how to set up my environment for running the application locally. So for anyone who is looking for a bit of a reference, below is more information outlining the steps for setting up the environment.

Mac Installation

The web server (Apache) involved with PHP applications is built-in with a Mac

httpd -v (on command line to see what version of apache is installed on machine)

Additional Info

echo is used to print text

For comments, // and # are used for single line

How PHP Communicates with the Browser

The browser sends a request to server (Apache). Apache finds the file, processes it if it requires processing (sometimes it might need to go back and forth between the database), then it assembles the html and ships it back to the browser.

Properties for the models:

JSON stands for JavaScript Object Notation. It’s the text format used for sharing data, and is the most popular data transmission format. JSON is used for local data while JSONP is used for remote data.

Here are a few other things to keep in mind about this data format:

JSON is language independent (it’s available in php, Python, etc)

JSON keys are wrapped in quotes

JSON keys can be any valid string

Special characters can make it difficult to access data, and you should use underscores instead of hyphens

JSON has to be parsed into JavaScript (which can be done with eval or JSON.parse – JSON.stringify does the opposite of parse)

A great alternative to XML

JSONP

Stands for JSON with padding

Used for cross domain requests

Request URL incorporates the name of a callback function according to syntax defined by the service you’re using

Response Formats

JSON object

JSON array

JSONP (function)

Browsers enforce same-origin policy

Cross-Site Script Injection (XSSI)

Protecting against XSSI – can strip out malformed code

If downloaded directly, it isn’t parsed and creates an error

Alternatives to JSON

XML

Extensible Markup Language

Was widely used before JSON became popular

We can convert JSON to XML with different services

YAML

Was created to be human readable

Another language used to interchange data on the web

Uses white space, including indents and blank lines, which increases the size of YAML but makes it easier for humans to read

Today we relaunched the greenapple.org website. The site was in dire need of a facelift – it wasn’t responsive, it had an odd user experience, and the CMS made it difficult for editors to make updates.

Here is what the homepage previously looked like:

And here’s what it looked like after I overhauled the design:

Our content specialists simplified the website’s content, and I worked on giving the overall look and feel a more modern look. I selected images for the new site, created icons, and coded it so that editors can easily swap out banner images. The website also uses SASS to make it easier for me to make global changes to colors, padding, and so on and so forth.

It’s always fun getting to rework a website, and compare and contrast the changes made in any given update.

PHP is an open-source, server-side scripting language that was designed to be used with HTML. It can be object-oriented, and here is an overview of some of its features:

Data Types

Arrays

To create a variable and assign it to an empty array, use the following format $newarr = array();

To create a variable and assign it to an array, use: $newarr = array(1,2,3,4,5,6);

Associative Arrays

Associative arrays are an object-indexed collection of objects, used when you need a key to retrieve data.

Constants

The value of constants doesn’t change.

Use quotes when defining the constant, define("CONST_VALUE", 10), once it’s been defined, don’t use the quotes when referencing it.

You can’t redefine constants.

Booleans

When PHP outputs ‘true’ into a string, it outputs 1. For ‘false,’ it outputs nothing.

To check if a variable is a boolean, use is_bool();

True and False can be written in uppercase or lowercase

Floats

round(number1, number2) takes a number and how many significant digits you want there to be

ceil(number) ceiling always rounds up

floor(number) floor always rounds down

is_float(number) to determine whether something is a float

Functions

strtolower() changes a string to lower-case

strtoupper() changes a string to upper-case

ucfirst() changes first letter in string to upper-case

ucwords() changes first letter of every word in the string to upper-case

strleng() finds length of the string

trim() eliminates white spaces

strstr() find a string within a string (pass two parameters). Find a string within a string

str_replace() takes three parameters – the string you’re looking for, what you want to replace it with, and the item we’re searching in

Integers

abs(0 - 100) absolute value

pow(3, 6) exponential (first number to the power of the second number)

sqrt(25) square root

fmod(17, 3) modulo

rand() random

rand(1,20) random (min, max)

is_int(number) to determine whether something is an integer

Null and Empty

Case insensitive

is_null(); will test if an item is null

An empty string, null, 0, 0.0, “0”, false, and an empty array, are all considered items that are empty

Strings

Strings can include letters, text, html.

Use double quotes or single quotes to denote strings

Can do variable replacement inside of a string (but only when you use double quotes):

<?php$phrase="Hello World";?><?phpecho"$phrase printed here<br>";?>

For in place substitution, use echo "{$phrase} Here<br>";

Debugging

Use <?php phpinfo(); ?> to access more information about the configurations

Missing semicolons are a common problem

To turn on error reporting, in the php.ini file, display_errors = On and error_reporting = E_ALL, in PHP code, ini_set('display_errors', 'On'); and error_reporting(E_ALL);

Turn off error reporting on live websites

Use echo to make sure you’re getting the right values for variables

print_r($array); to print readable array

gettype($variable); to get variable type

var_dump($variable); to get type and value

get_defined_vars(); array of defined variables

debug_backtrace(); show backtrace

Encoding

For GET requests to pass a reserved character, you must encode them with urlencode($string) – letters, numbers, underscores, and dashes will be unchanged, but reserved characters become % + 2-digit hexidecimal, and spaces become +

For rawurlencode, letters, numbers, and dashes are unchanged, reserved characters become % + 2-digit hexidecimal, and spaces become %20

Use rawurlencode for the path, before the “?” section, and uses urlencode on the query string

<, >, &, and ” are reserved characters in HTML

HTML can be encoded with htmlspecialchars() and htmlentities()

Printing

To print items to the screen, use echo

Variables

Today we relaunched the PEER website. The site’s content was simplified, which meant that fewer pages were needed. I used this as an opportunity to simplify and clean-up the existing look and feel. When it comes to web layout and design, I always lean towards minimalist tendencies. Minimalist designs don’t distract from the content, but complement it.

The PEER website homepage previously looked like this:

And the new website homepage now looks like this:

You can see that the main navigation was simplified and a larger, bolder image is being used for the main banner. The main navigation was also adjusted to take up less real estate on the header. The fonts were also tweaked to create a more modern look.

The process of updating the website included finding strong images and finding ways to code the layout so that it would shift smoothly when viewed on different devices. It also included creating additional views in Drupal to manage the updated Resources section, and a different format for sharing published articles.

The previous version of the site was something I designed a couple of years ago. It’s amazing how quickly your style can change and improve over time.

Once I ran npm install uglify-js --save, I made sure to specify the folder I wanted to run the process in (./js/*), and the file I wanted to create with the minified code (scripts.min.js). Next, all I had to do was run npm run uglify and my new scripts.min.js minified file was created.

Now whenever I make changes or add new files to my project’s JavaScript folder, I can run npm run uglify to bundle up and minify the code.