Why Learn PHP, CSS, and MySQL

Jul 20, 2012

This post is available in audio form.

Transcript of the Audio:

I’m trying this thing, where instead of assuming you care to know then, then I just spell out how to do it, I thought it would be worthwhile to take some time to explain here is why these are skills worth developing, here is what they will enable you to do, and here is how they are different from other skills (in a very broad fashion).

There are people I know who are brilliant programmers, they are good with OpenGL and C++, they can get a computer to do pretty much anything that a computer us capable of doing, they know all kinds of fancy graphics algorithms and so on, but at the end of the day, they’ve just never really tinkered with making anything online so they have no confidence with it or path of entry to it. That prevents them basically from presenting their work to the outside world, or from integrating features into their work that they might be interested in but don’t really know where to start when it comes to something like a leaderboard or user-generated content.

Maybe you’re one of these, like I was for a long time, who despite being comfortable in some fairly low-level languages, just didn’t really deal with the web stuff in general. There’s no excuse for it, because the web stuff is in many cases a lot easier than what you’re doing with your low-level code.

So first, for the big picture–and I apologize if you already know this and it’s boring you but the whole idea today is to warm people up to this–first and foremost the websites that you view are built in HTML. HTML is not really a programming language in the purest sense, so much as it’s a formatting language. There is a very common pattern to it, there are these things called tags encased between less than and greater than signs, which sounds mathematically strange to say out loud but when you look at it on the page it basically looks like it’s getting hugged by the left and right pointing arrows. Anything between a start one of those and an end one of those is affected by the HTML tag. The way to discern the front one from the back one is that the back one always has an extra slash in it. So if we have <i>some words here</i>, “some words here” will be in italics. That’s the same way we make hyperlink text, that’s the same way we make bold text. This can be used to adjust the alignment on the page, to display images, link to other files (including other websites)… HTML is the way that websites get laid out in a way that the browser can make sense to display.

There are a couple of downsides to HTML. Because it’s a formatting language and not a programming language, when you make a change a change any place in it the rest of the file is oblivious to that, because the browser winds up dealing with it pretty much one piece at a time. If you have a certain style you want to use, a head between sections of your text maybe, and you have a certain font size and font style, and spacing above it and below it and you go through a lot of care to come up with exactly how you want it to look, if you need it multiple places on the page you’ve got to copy/paste that. That’s of course a problem because it’s really difficult to maintain, if you need to update it for some reason, and it’s really difficult to iterate on, if you wanted to experiment with a little more this way and a little more that way you would have to change it in 8 or 9 places across multiple files.

CSS, which stands for Cascading Style Sheets, addresses that problem of HTML. CSS centralizes those formatting decisions, and you can either override HTML’s various tags or you can introduce your own categories of them, and label them for use within your HTML. You can come up with your own heading types, your own paragraph styles, your own tricks for how you want to lay out images and tables on the site. You can centralize that in one CSS file, which is then referenced from multiple HTML files. You can then quickly and easily iterate on the design, or switch between multiple skins for the site, without having to each of those individual files, you only need to change a CSS file where those definitions are provided.

The other major shortcoming of HTML is what I first said about it, which is that it’s not really a programming language, it is a formatting language. There are of course a ton of benefits to something being a programming language, in terms of being able to reuse functionality, in terms of being able to determine a structure and then vary the parameters within it. PHP fixes this problem by, really, being a programming language that generates the HTML for a web browser. HTML is what the web browser sees, but the PHP is spitting out that HTML effectively through print statements, within for-loops and if-conditionals and so on. If you want to have a website that does something different based on who is using the website, based on which account they’re logged into, or based on the day of the year (say something special on holidays), PHP lets you generate different HTML based on such conditions. If you have structure on a page that has a lot of repetition to it, say a calendar (which is the case with my InteractionArtist prototypes) then PHP is a good way to lay out that grid in a systematic way, populating it with entries, by writing only a single function as opposed to having to hand copy and paste each of those chunks.

Now those entries that I mentioned, when we talk about filling in a grid of things on a syllabus or blog entries… if it’s something that’s not going to change very often, if it’s something which there are not a ton of entries to (let’s say maybe a dozen or two, as opposed to hundreds), if it’s something you only need to reference on one website, and if you only ever need to order it in one certain order, say newest to oldest for example, then you could probably get away with just storing that information in an array, or in a dictionary, or in some similar data structure already provided to us, within that one php file that’s referencing it.

But far more commonly, the situation that you’re in is that you have a whole bunch of information, like we’re talking hundreds of entries for a blog. Or in DeviantArt where each individual user has their own big pile of art submissions, favorites, and other things about their interactions on the site. Likewise on Facebook. So you have a ton more data that needs to be accessed from many different pages, and there are a bunch of different ways that we would need to order it, sort it, or select from it. We might, for example, only want to show photographs of a friend that include myself and a mutual friend, but not with someone that has explicitly blocked the account that we’re browsing these photos from. It can become very intricate, very quickly, in how to lay out this information efficiently, how to access it efficiently, and that’s where MySQL fits in. That’s what MySQL and databases do for us.

MySQL isn’t the only type of database, but it is among the most standard and universal. If you learn it you’re pretty well equipped to navigate into the others if you have a reason to.

With a database it becomes easier to create user accounts, manage things, easier to organize information and tie it to other information. A couple of examples of this:

Recently for VGDev, the game development club I help run at Georgia Tech, we wanted to update the website, beef it up a little bit. We wanted a better way to display the games, so that as a visitor to the site you could choose to only show the completely finished games, or the games that are mostly done, or show me everything if I’m just interested in the history of the club and who has been involved with it. We enabled that through using PHP and MySQL. Now all of the projects and who worked on them are in our database, and when you use a radio box it’s affecting which of those entries shows up on the page. We also used a little bit of jQuery there, which I’m not going to talk about today, but it’s another thing to look into. It’s surprisingly simple to get started with, and can greatly empower you to do cool things dynamically on a website that otherwise would be kind of a pain to do.

I’m helping a couple of professors now update their course hand in website, which includes the course schedule. I’m using PHP and MySQL for that as well, as a way to easily separate out the data from each course from the representation of it, so that we can just have each course pointing to a different database table or set of tables. This way we can use the same structure to support multiple courses across multiple semesters, and using forms created with php to define due dates and other details for the course.

“Now as a game developer,” I hear you thinking, “why should I care?” Besides the obvious that your website can benefit from it, your portfolio, your ability to present your work online, it’s also useful for user generated content to be submitted and kept track of for your program, or for leaderboard tables to be able to submit scores and compare them to other scores in the database.

PHP is also important as a layer between the SQL and your client. We had to do this recently for Game-o-Matic with Dr. Ian Bogost and the UC Santa Cruz guys and Ian’s other GRA’s. Because if you don’t have the PHP there… when you have a client whether it’s a downloaded program or an ActionScript 3 Flash program in a browser, when it needs to access or modify the database, there are two ways you could go about it. Now the wrong way, and this is actually what Super Meat Boy had done and got nailed to the wall over it maybe a year or two ago, is to actually have that client contain anywhere within it the MySQL login information, the database name, the user name, the password, and then to just do direct manipulations to add tables, add entries, add rows, to update or delete information on there. That’s dangerous. The reason why it’s dangerous is because it doesn’t take much of a hacker to be able to be able to keep track of what’s going in and out of your internet connection, or to dissect the program and figure out where and how these operations are occurring to then modify and hack your client to do things it’s not supposed to do to data that shouldn’t be happening. This means maybe blowing away other user’s work, or cheating by submitting artificial scores.

It works much better to have a layer of php between the two. Instead of your client, your downloaded program or ActionScript 3 game, directly accessing the database, it is instead posting parameters to a PHP file. The PHP file then is responsible for validating the information, that it’s reasonable, that it’s something which is allowable, potentially a checksum to make sure that it’s legit and coming from where it’s supposed to be coming from. Then the PHP file is responsible for interpreting and using that information to make changes to the database.

You might think, can’t the user just figure out what php file it’s looking at, and then just view that php file? That’s another security benefit of using php over having your web connecting code happen directly in your client. PHP gets run on the server, and this is actually a bit of a complication in that when you’re working on PHP you either have to locally run your own server to be able to test your PHP files, or more commonly you’ll be uploading it to a scratch directory or a development directory and making changes to it in your FTP browser directly on the site, and then refreshing in a browser to check it. Your computer, by default, doesn’t turn php into the code that it needs to. But the end user, the computer that’s accessing it for the consumer, doesn’t get to view source on PHP in the way that they do for HTML. All that they view is what the PHP spit out. If there’s information buried inside of a php function, like the login information for your database, people can’t get to that, only what’s being presented through whatever text you’re choosing for the PHP to output as HTML for the site. That’s a basic gatekeeping strategy, and is one of the reasons why as a game developer it’s important to know php in addition to MySQL.

While you’re at it, throw in some CSS and build yourself a decent website – says me, who has kind of an ugly website, except for HobbyGameDev. Speaking of which, HobbyGameDev in its current incarnation was built for me by Ryan Burrell, great guy out there, very talented web developer. HobbyGameDev is built on top of WordPress, which if you’re not familiar with it is one of many packages out there which is a whole bunch of folders and files of PHP (and CSS) along with database structures that it’s meant to be connected to. Anybody with a bit of server space can just copy the files into there, hook it up into the database, and build yourself a blog, customizing the heck out of it by changing those core files.

Like I said, PHP typically is not something you run locally, it’s something you need to have up on a server. If you haven’t already, I would recommend investing in a little bit of webspace. I don’t want to name services, because the one I use now is one I got into maybe 6 years ago, and which ones have benefits in terms of reliability, value offered and so on I’m sure fluctuates year to year. But I can say that for roughly the cost of 1 videogame a year, you can have access to a tremendous amount of bandwidth and online space to FTP files into, to experiment with your PHP scripts, to mess around with HTML5 or JavaScript or anything else you would like, as well as this of course can simplify sharing files.

If you haven’t already, I’d recommend looking into getting yourself some web space. It should support PHP, MySQL for database access, should give you direct access to FTP into it. Everyone should anymore in 2012, although I’m sure there are services out there that don’t. Ideally being able to SSH into it via command-line is nice, though I will say that my service doesn’t allow it, but it has enough admin tools in place that I can usually achieve my intended purposes through the available control panels.

Without a website, without some basic PHP skills, when you finish something it’s just gathering dust on your hard drive, and you don’t have a good way to blast it out there and share it, or to present yourself in the context of your work. It’s easily worth the cost of like I say, one game a year for virtually unbounded traffic and storage space online. If you’re using it for legit purposes and you just want to make some websites, store some files on it and have people access it, the services can hold up and survive traffic bumps really well.

If you are doing other types of game development, you can certainly handle PHP and MySQL. Stop relying on other people to do this work that you’re very capable of doing yourself. That said, I don’t want to leave you hanging, in the weeks ahead in addition to my usual HobbyGameDev stuff, I’ll also be providing some very very rudimentary beginning entries about using PHP, MySQL, and CSS to craft some basic website functionality and perform some of the most common operations, showing how those things are done. If nothing else you’ll have at least one source to go to, in addition to the countless other resources out there of good screencasts, good tutorials, websites with Q&A forums who are happy to help answer questions about challenges you run into. But such problems are only surmountable after you get started on it, after you get some momentum going, only if you work until you hit a dead end will you be prepared to get that help.

Get started in it. In 2012 it’s no longer sufficient to just be a programmer who works locally. Learn some basic web skills. If you don’t have webspace of your own, look into finding some. It’s not terribly expensive, it’s not terribly time consuming, and can benefit in a number of ways. I think you’ll be happy you did.

For HobbyGameDev, this is Chris DeLeon. Thanks for tuning in.

(Music at the start and end of this segment was from Ross Lafond.)

Learn and practice team game development with Gamkedo Club.
Membership worldwide. Professional support. Proven process.

Subscribe by e-mail to receive weekly updates with Gamkedo.Community interviews and YouTube training videos for game developers!

All contents Copyright ©2017 Chris DeLeon.

Site production by Ryan Burrell.