How to Use the Star Wars API in About 50 Lines of PHP

Codexicus Starwarsius

Edit: Since I posted this the original Star Wars API has been discontinued. Luckily it’s been taken over by other people, so the only changes you need to make to the code is to edit the API urls from “swapi.com/api/…” to “swapi.dev/api/…”

Now on with the mayhem:

I’m a little late to the party when it comes to the StarWars API. I guess it came out a few years ago, but I was only exposed to it through studying my course materials at Austin Coding Academy. It’s never too late.

So let’s break it out and see what we get. The example we’re going to do today produces the webpage shown in the picture above. It’s also live on my website if you want to see it in action for yourself.

That’s right — about 50 lines of code and only one webpage to handle the different types of output. The API provides data both in list format and specific format. We’ll be processing both.

First, here’s an example of the data that the API provides:

Looks pretty good, right?

There’s a couple of things to keep in mind. Those URLs you see are the addresses of further API calls, they are not links to images or pages. That’s okay because they’re valuable for another reason. Here’s the reason:

The API itself doesn’t include links to any images at all. So what I ended up doing was creating a folder structure on my web server that matches the URL pattern of the API results. Like this:

/img/films/1

/img/films/2

etc. All the way to /img/vehicles/39/

and in each of these folders I would save about 3 to 4 different images of what that url leads to in the API.

Example: when you call the API with the url https://swapi.co/api/people/35/ you get Padmé Amidala as your result set. So your directory structure would look like /img/people/35/1.jpg and you would have one picture of Padmé Amidala in your local folder. I chose three or four, and the code we’re going to write will process however many you have in that folder, so go crazy!

Mine ended up being 837 files in 273 folders, so it might take you a minute or two, depending on how many images of each result you want to store. I did it by hand while I was watching TV, but maybe you can write a script to process all that for you with image searches.

The reason I discarded the idea of just using an image search API (because I tried that first) is that the sheer number of images involved not only makes page-loading a time consuming, tedious process, but the API people get pretty mad about all the calls.

I already pissed off Qwant, and Bing wanted no part of it. That’s why I did it myself.

But that being done, let’s make a banner. Here’s mine:

I made this at fontmeme

That banner took about two minutes to make at fontmeme. I also used them for the graphics in my Marvel Universe game (more about that later).

Most of our code is going to be in php, but we can do the navigation bar in HTML like this:

You can see that it’s just a bunch of links with the parameter “?cat=” appended to them. I’ve never seen a cat in the Star Wars canon, but there’s no ruling them out, but for our purposes “cat” is shorthand for “category.”

And here’s where we start our php, and the first thing we do is check for those parameters:

We’re just telling php that if someone called the page with a parameter to put it into a variable, otherwise leave it blank. Except for the $category variable, which we set to default to “people” if it’s not set to be anything else.

That way when you first come to the page, the first thing you see is Luke Skywalker.

Now that we know what type of data we’re looking for, let’s call the API and get it!

You can see in the code above where we created our API url out of the base url (https://swapi.co/api/) and then added our category variable, specific variable and page variable. If specific and page are empty, their parameters are ignored.

Then we get our results in the variable $jsonSW. We decode the JSON, and now we’re ready to parse and display the results!

Here’s how we do that:

Pretty simple, right? I took out all the comments because they made it hard(er) to read, but here’s what’s happening:

We’re making a big box across the screen. Then inside that box are two smaller boxes; one on the left to display the data, and another on the right to show a big picture of whoever’s data we’re looking at.

You might notice the conditional if ($specific===””){

That’s because if you request specific data it comes in a different format than if you request list data. Not different enough to cause any huge problems, but we have to make one small adjustment.

I already showed you an example of list data above. Here’s an example of specific data:

See how there’s no “count”, “next”, “prev” or “results”?

That’s why we parse it a little different. Both cases are handled in the code above. With the list results we’re looping through the “results” element, but with the specific results we’re looping through the main body.

What happens is that once we figure out which way we’re going to process the results — as specific or list — the process is the same. You can see we just call two functions; drawLeftBox() and drawRightBox() and send them each the $key=>$value pairs from the result set. The process is the same.

Those two functions are pretty involved. In fact, they’re the meaty part of the process, because we’ll be outputting a lot of HTML code through php. Here’s drawLeftBox() now:

There’s a lot going on in there. Let me break it down for you:

— if it comes across “edited”, “created” or “url” in the results we’re not going to display those to the page. We will use “url” later, but the others we don’t need for our purposes.

— if the item is an array of elements, then we know it’s going to be urls. Those we’re going to break apart and construct links to images on our local site.

— we open up the corresponding folder and display every image inside it. You can limit them if you want, but I just wanted to print them all.

— then we come upon another element called “homeworld.” It’s not an array, but it is a url, so we parse it the same way and display a picture.

— the way we’re displaying these images is to make them links to a “specific” page about that item. So when you click on a picture of Tatooine, you go to the Tatooine page (which is really just this same page showing specific instead of list)

Then when we’ve got all that printed out, control goes back to our loop and then drawRightBox() is called, also sending along the $key and $value for processing.

This one’s easier, because it’s just a big picture of whatever the subject of this data is. Here’s the function:

This one’s simple, and it’s also why I said we’d get to the “url” field later. The “url” field of the JSON results is just a link to an API call for specific details about whatever character it represents.

Instead, we’re just going to parse that url into a local path to an image of that character (or ship or species, you get it). We also make it a hyperlink, and when the user clicks the picture, they’re sent to a specific page with just details about that one character.

Remember they’re not being “sent” anywhere. All links on this page just reload this same page requesting different data to be displayed. And that’s how we display it.

And guess what. Now we’re done. All that’s left is to put a little “Next Page” link at the bottom for pages where the results are more than 10 and we’re done.

Here’s that link:

That is literally every line of php code to make the codex happen. I didn’t count it, but it’s something like 50 lines I’m pretty sure. Even with the insane number of comments I put in my original code it’s only 192 lines, and at least half of them are comments.

Because I comment like this:

And you should, too.

Now you have your very own use for the Star Wars API. Don’t forget to credit the people whose data you use, and feel free to link your own amazing creation in the comments!

4a 75 73 74 20 61 6e 6f 74 68 65 72 20 63 6f 6d 70 75 74 65 72 20 6e 65 72 64 20 77 69 74 68 20 61 20 62 6c 6f 67