Introduction to PHP for Website Developers

What is PHP? I could just have you visit php.net and find out for yourself, but although you would find out a lot of information about PHP you probably wouldn't really understand its use/purpose.

When you create a website using just HTML and CSS, it's "static". This means that no matter who accesses each page, all of the pages will look the same.

The reason for this is that with static web pages, the server simply regurgitates the same page (code) to each viewer. In most cases, you are going to want something better: a dynamic web page.

Flash of Unstyled Content (Annoying White Flash)

Yup, I'm about to cover one of the most prominent web page styling problems ever known to man: the Flash of Unstyled Content (FOUC)!

What is it? Well, there are two different ways of explaining it:

1. To the viewer, it's that annoying white flash that you see every time you view a different page on a website when the website has a background image or background color that isn't white.
2. To the web coder, it's that short moment of time during which the page is unstyled (defaulting to a blank white page) that annoys the viewers.

Let's fix it! :)

Averaging Multidimensional Data for D3 Part 2

In my previous tutorial, I showed you conceptually how to average the data such that the 3 pieces of data in each row are averaged together and only 1 bar and text is shown per row for each average. This time I'm actually going to backtrack to the code I was using in the tutorial before that so that I can show you another way of averaging the data.

What we're going to average this time are not the 3 pieces of data per row (we're going to leave those alone this time); instead, we're going to average all of the elements each with a unique "Site Type" and "Media Type" value together.

Averaging Multidimensional Data for D3

Building from the example in my previous tutorial, I am only going to slightly modify a few aspects of the graph. My goal for this tutorial is to show how to code the graph differently such that the 3 pieces of data per row are averaged together into 1 piece of data per row.

Using Multi-Column Data with D3 Part 2

Okay, so after reading my previous tutorial we are now capable of loading in a CSV file with multi-column data and completely reconstructing it.

That's great! but... what about being able to categorize, filter, (somewhat) transition, and color the representation of that data? That's what this tutorial is all about! :)

Using Multi-Column Data with D3 Part 1

In my previous tutorial, I showed how to import data from a CSV file or a text file. However, oftentimes the type of data that you need to use has multiple columns, like so:

Column 1 Title, Column 2 Title, Column 3 Title
1, 2, 3
4, 5, 6

rather than being in a single column format, like this:

1
2
3
4
5
6

One common reason for having multi-column data is if all of the data can be split into categories and you need to visually show which category each piece of data is in, through colors, spacing, positioning, highlighting, font size, or etc.

In this tutorial, I'm just going to show you how to fully reconstruct the data by accessing it in memory, as it's not entirely the simplest thing for a beginner to do. Once we're able to access individual pieces of data, we'll be able to create multi-column/multi-category graphs, filter out certain categories of data, color them, etc.

Using CSV (and Text) Files with D3

This tutorial is in response to a request by someone who wanted to know how to use data from CSV (Comma Separated Values) files with D3. Interestingly enough, you will also see how the data can be stored into and read from a simple text file (instead) along the way.

The CSV file format is commonly used in spreadsheets, and it's pretty well known to programmers as one of the easiest formats to read and write data with. Why? Take a look at what a CSV file's contents could be:

2345, 345, sdfgsd, 3453,
wgdg, 34, fsg, dgd, 34534.634,

sfsfggsdfgsdfgsdfh, 4, "hello",
-2

If you look past the stupidity of the bogus "data" I used in that example, you'll see that it's fairly simplistic! Every value is separated by a comma - hence, Comma Separated Values (CSV).

Before I show you how to use CSV, you should know that I made an "Introduction to D3" tutorial earlier. I highly recommend that you read it first.

Introduction to D3

This tutorial is in response to a request by someone who wanted a basic introduction to D3. I've never used D3 before, but I've learned a bit about it so far and this is just an introduction to get you started anyways.

Basically, what I've found is that D3 is a lot like JQuery in many regards. You can select existing (and not-yet-existing) elements, manipulate them graphically, perform animations, etc. The best aspect of D3 seems to be that although the learning curve is rather steep for anyone who's a beginning coder, it actually ends up making most tasks of displaying/arranging data on a web page very simple and easy - you just have to know how. :)

Interacting with a MySQL Database Table in PHP

Now that you can create HTML forms and receive HTTP POST data and properly set up a table in a MySQL database, you are ready for the next step: interacting with this MySQL database through the use of an HTML form. All that's left for you to know and do is run MySQL queries from PHP code. Here's the script we're going to be looking at in this tutorial:

Setting up Tables in a MySQL Database

When you're about to include a MySQL database in a project you're working on, you're going to want to plan ahead and figure out what kind of layout this database should use. After all, you can't use a database without first creating it!

You could start by creating this database's structure using PHP code, but it would be incredibly hard to get everything right the first time! My recommendation is to do what I always do: start out by using Adminer or PHPMyAdmin to view the database and structure it manually. Adminer and PHPMyAdmin are two of the most common PHP scripts that you can use to access your database without needing to write code. One or both of them are usually included somewhere in your CPanel - if you're using a CMS like WordPress, you should be able to find a plugin for one of them or something.

Creating HTML Forms and Receiving HTTP POST Data

In my previous post, I showed you how to use HTTP GET to transfer/receive data through a page's URL (as well as how to intermingle PHP code with HTML code). What if you want the user to submit data through an HTML form to your website? That's where HTTP POST comes in.

There are two parts to making standard HTML forms: the HTML form code itself (including graphics, placement, text, and logic/data) and the PHP script that will retrieve the form data. We'll start with a brief overview of how you might want to make the form.

Working with PHP HTTP GET Variables

This tutorial assumes you know the basics of how HTML and PHP work together. The better your understanding of their relationship, the easier this tutorial will be to understand.

What makes a website different from a picture? It usually has interactivity (buttons, links, videos, etc.), but it also has something else: customizability. If it has an account system, for instance, you can enter your username and password, and it will check its database for your credentials.

Once signed in, you will receive a more personalized web page, perhaps with information such as Facebook notifications, new Youtube channel subscribers, or the amount of money you have in your Paypal account. How does this work when you're using HTML and PHP? That's what this tutorial is going to help with.

Using the PhotoSwipe Image Gallery Script

This tutorial is in response to a specific request by someone who wanted to know how to implement the PhotoSwipe Image Gallery script into a mobile JQuery website. Here's a link to PhotoSwipe for some context and a download link of the script for yourself:

http://www.photoswipe.com/

Here is a link to what our final product will be - you should test it out:

http://thecodingwebsite.com/tutorials/photoswipe/photoswipe.html

I basically just used their code examples and example images and removed all of the unnecessary code and such to determine the essential parts needed for a mobile JQuery website implementation. If you would like to just download my working example as a whole, I have placed it into a zip file for you:

http://thecodingwebsite.com/tutorials/photoswipe.zip

Setting up and using FTP

FTP, or File Transfer Protocol, is a means of being able to transfer files from one computer to another. Usually FTP is used for transferring files to and from web servers. It is one of my favorite methods of uploading websites, scripts, files, and etc.

FTP uses a client and server program. The server program listens and waits for incoming client connections, and once a connection is established the two computers can communicate with each other and transfer files back and forth. A client program is needed to interact with the server (from a website designer/developer/manager's perspective) and upload/download files.

My favorite FTP client is FileZilla (note: FileZilla also provides a server program, but we're not going to be using that in this tutorial). It's free and it can do everything you would want to do with an FTP client - I've also never experienced any bugs or any other problems (that were not my own fault).

First, go to the FileZilla website to download the client program:

http://filezilla-project.org/

Adding a subdomain to your website

Subdomains allow you to denotate to your website visitors that they are viewing a particular section of your website. An example of a subdomain would be mail.google.com. "mail" is a subdomain of "google.com", with a period in between. Generally, subdomains will have a folder on the same server as the main website for all of the subdomain's files.

This tutorial will show how to add a subdomain to your website if it uses CPanel or something similar. CPanel is a very common and popular control panel for websites, and this tutorial will be using screenshots I've taken (myself) from the (interactive) demo on CPanel's website:

Changing Page Content with JQuery

This tutorial is in response to a specific request by someone. Here is the summarized version of their request:

How would you use JQuery to create an image that changes when the mouse is over it and also changes the content (text/image(s)) in a different section of the page dynamically (without refreshing the page)?

In order to change page content with JQuery, you must first import JQuery and know the basics of how to use it, all of which I discussed here.


We will also need two images to test this out with and a section of content to change dynamically when the mouse moves over and out of this image. Here is the code we will use for our initial image:

Importing JQuery into your Website

JQuery is an extension of JavaScript that uses various techniques to virtually extend the capabilities of what you can create with plain JS. The website for JQuery can be found here:

http://jquery.com/

The most recent version of JQuery as of the creation of this tutorial is 1.7.1. You can (and should, if you're going to use it) download the production version of it here:

http://code.jquery.com/jquery-1.7.1.min.js

You can download it by visiting the URL and then clicking File > Save As (or Save Page As) in your browser.

An Overview of Web Pages

Index

I have created this index due to the amount of information present in this tutorial. Feel free to skim past any sections that contain information you already know. This tutorial provides the very basic information about how web pages work in general, and near the end it starts to focus a little bit on how to extend your HTML pages with CSS and JavaScript coding.

An Overview of Web Pages
W3 Schools
HTML
CSS
Extending web page capabilities
JavaScript vs. browser plugin languages
HTML basics
Head tags
Body tags
HTML page example, with CSS and JavaScript
Conclusion