Using MAMP

Advertisements

Week 5: Intro to programming and PHP

HTML and CSS are not programming languages. HTML is a markup language and CSS is a style sheet language. They dictate where things go and how they should look, but they can’t actively do things.

PHP is a server side scripting language. It can be used to actually do things. When you’re writing PHP, you’re really programming!!

But! You need a server to run PHP. PHP, as a scripting language, needs to be executed by a server. If you write PHP into your website and then just open the file in a browser, it won’t work. The server does all the legwork – PHP is just a set of instructions to tell the server what to do.

Using the QUT Server Space

When logged in to a computer at QUT, you can access your public_html folder from windows explorer or finder. In here you can change files and immediately see the results by visiting student.ci.qut.edu.au/~yourusername.

  • You access your public_html file on a mac by opening Finder, pressing command-k, and typing in smb://cif-smb.qut.edu.au .
  • In windows, just type \\cif-smb.qut.edu.au into the address bar in explorer.

Testing your PHP code at home

You can simulate a server space at home using :

Introduction to Programming Concepts:

Programming today is based around the concept of Object Oriented Programming.

This indicates that your software is made up of objects – the building blocks of any logical system. These objects are Functions and Variables. Once you have declared a function or a variable, you can use it throughout your code. These principles apply to basically every programming language you’re ever likely to use.

Variables

A variable is a stored piece of information. It could be a number (an integer or floating point number) a word or series of words (a string), or a yes/no value (a boolean). A variable has both a value and a name. For example, I might have a variable called firstName with a value of “Cassie.” Or a variable called visitorCount with a value of 10. Once I have a variable, I can use it as if it were the value. For example, I could say something like:

$visitorCount = 10;

$newNumber = $visitorCount +1;

then the variable newNumber would equal 11.

In PHP variables always have a $ in front. Different languages have different conventions for using variables. In some languages you have to specifically say whether your variable is an integer, string, boolean, etc. In PHP, you don’t!

Functions

A function is a piece of code that does something. It will change something, or return a value. Functions have names. Once you define a function, you can use its name to call it at any time.

A function has a name and a body. The body of a function consists of the lines of code that actually do whatever it is you want to do. For example, I might have a function like:

function sayHello() {

echo “hello”;

}

If I wanted to use this function anywhere in my code, because I have defined it with the name sayHello(), I can simply write printHello() and the code in the body of the function will execute. Even though in this example the function is simple, this is good because a function may consist of multiple lines of code which you obviously don’t want to write and re-write many times – instead you can just use the name. This is a function call.

A function can have parameters and a return value. Parameters are variables that can be given to a function, in order for it to do something with them. A return value is a variable it might return when it is complete. It can have many parameters or no parameters, it can have no return value or one return value. A function cannot have multiple return values, however.  For example:

function increaseVisitorCount($currentCount){

$newCount = $currentCount+1;

return $newCount;

}

were I to call this with increaseVisitorCount($visitorCount);, I would get a number back. So if I wanted to use a value to get a number, I could write something like:

$visitorCount = 1;

$visitorCount= increaseVisitorCount($visitorCount);

This would set the variable visitorCount to be the return value of increaseVisitorCount – in this example, it would become the number 2.

Built in Functions

Various programming languages have built in functions. For example, I can say print(“Hello”);, print() is a built in function of php. I don’t have to define a new function called print(), because one already exists. That being said, it also means I should be careful not to define my own function named print(). print() is already taken, so it won’t work. You should always give your functions specific names so you know what they do and so they don’t clash with any built in functions.

Those are the basic structures behind programming. 

We will step through examples of how these work in class.

Some specific examples are in this file: PHP Beginner Examples. (right click and save file as)

General programming resources

PHP Resources:

Week 4

This week we will look at styling a Yahoo Pipes badge, the easiest way to get content from a pipe and onto your page. However, badges don’t give you a lot of control – we’ll look at the second, more complex way to get data from a pipe next week.

We’re going to use a number of different pipes and put them on a page. For this example, I’m going to use:

But you can use any pipes you want.

What you will need for this exercise

  • Working Pipes (use mine, linked above if you are still completing your own)
  • Firefox
  • Firebug is a plugin for Firefox that allows you to inspect and edit the HTML and CSS of any webpage.  You can install it from https://getfirebug.com/downloads/
  • A text editor for creating HTML and CSS files, such as Komodo Edit.

You can find the HTML and CSS for a simple example here.

Week 3

WHAT IS A MASHUP?

IN WEB DEVELOPMENT, A MASHUP IS GENERALLY A WEB APPLICATION THAT COMBINES DATA AND/OR FUNCTIONALITY FROM TWO OR MORE SOURCES TO CREATE A NEW SERVICE. THE TERM MASHUP IMPLIES EASY, FAST INTEGRATION, FREQUENTLY USING OPEN APIS AND DATA SOURCES TO PRODUCE RESULTS THAT WERE NOT THE ORIGINAL REASON FOR PRODUCING THE RAW SOURCE DATA. AN EXAMPLE OF A MASHUP IS THE USE OF CARTOGRAPHIC DATA TO ADD LOCATION INFORMATION TO REAL ESTATE DATA, THEREBY CREATING A NEW AND DISTINCT WEB API THAT WAS NOT ORIGINALLY PROVIDED BY EITHER SOURCE.

– Modified from Wikipedia.com entry on mashups

EXAMPLES:

TANGIBLE MASHUPS:

MASHUP REVIEW

What features are important when reviewing the mashup?
http://mashupawards.com/criteria/

SOME INTERESTING STUDENT MASHUP SUBMISSIONS:

MASHUP SOURCES

Popular Web APIs that can be used, Facebook, Flickr, Google Maps, Twitter (…and really anything with an RSS feed).

What if the website I want to source data from doesn’t have an rss feed?Try http://page2rss.com/ If that doesn’t give you what you need, you may want to consider an alternate data source as parsing the raw HTML to extract information from a website, while possible is a lot harder.

GUIDES TO USING YAHOO PIPES:

EXERCISES

  1. Play around with the Yahoo Pipes modules to get an idea of its possibilities and limits. When you finsh, post a screengrab of your source and outputs on your Tumblr!
  2. Mashup Brainstorm – What kinds of data available on the web would make for an interesting mashup (hint: think dynamic, constantly updated data)


Some HTML and CSS catch up stuff

Some videos to help you jog your memory about HTML and CSS –

HTML & CSS – The VERY Basics

Check this video out if you’ve forgotten the basics – it takes you back to the verys tart.

Google: HTML, CSS and Javascript from the Ground Up

Watch the HTML and CSS videos here, and have a go at the exercises if you’re still feeling a bit shaky. Watch the Javascript videos if you would like to start getting a handle on that too.

Week 2

Welcome to week 2. As you ease back into the idea of developing for web, it might be valuable to brush up on your HTML and CSS skills. Here are some useful resources:

W3Schools – Great site for getting a handle on the basics.

Net Tuts – Loads of more advanced tutorials, tips, tricks, and articles

A List Apart – A great site with content from CSS positioning basics to thoughtful articles on new web technologies and the design process.

And why not practice your CSS skills on the css Zen Garden?

Things you might want to install:

Firebug – A browser extension that lets you see the underlying html and css on a web page. Perfect for debugging your site. You can highlight something on a page and firebug will show you where in the code that thing is being styled. This will make your life so much easier!

Web Developer – A browser extension that has so many useful features I can’t list them all. You can toggle things like css or images on or off, you can instantly resize your browser window, it can outline block elements so you can easily see how your page is structured, and a lot more. Download it and have a play.

Komodo Edit – If you don’t already have a preferred text editor, this is a nice once.

There are a lot of CSS and HTML resources out there – if you ever get stuck, try googling your problem – you’ll be surprised how many people out there might have struggled with the same thing, and have solutions to offer!

And finally, some valuable insights: The Web Design Community Offers Advice To Beginners

And remember your to do list for this week:

  • Set up your Tumblr, and post the URL on the discussion board
  • Post your Daily Depictions (see the Week 1 lecture notes in case you don’t know what to do) and reblog with some commentary on one of your classmate’s!
  • Post your research and ideas about the top 6 new things on the web to get you started for poster submissions in Week 4.

Welcome to KIB204

Welcome to the KIB204 resources blog! I will be posting tutorial content and various resources here, so please check back regularly.

KIB204 posts will be in the KIB204 category and will be tagged tutorial, resource, inspiration, etc.

And on behalf of the teaching team I would like to correct the statement Deb made in the lecture that the Legend of Zelda started as a book and board games – it did start as a game, on the NES, and the books and board games are spin-off media. Though it has still shown an interesting evolution of interaction styles, from the NES buttons and d-pad to the totally-stylus based Phantom Hourglass and Spirit Tracks, all the way to Skyward Sword’s 1:1 motion controls. (I hope that’s restored your faith in the factual accuracy of our content! :))

I look forward to seeing you in the tutorials this week!