Wednesday, March 21, 2007

PractiCSS


Time to put our CSS skills to use...

Try CSS Challenge #3 (you might want to try 1 and 2 as well). Once you've got it right, upload to your web space and write a short blog post pointing to it.

If you haven't tried your second ftp client yet, now would be a good time to pick one from the list, install it, and take it for a spin - then post an entry on your blog comparing it to your first client. Which one (if either) will you be using from now on and why? I need this second ftp entry before we can finish off the Transfer Content subject.



Original image: 'Practice + Pain = Pose and Poise'
by: Pandiyan V

Tuesday, March 13, 2007

your in-flight entertainment today...


http://mirrors.creativecommons.org/

Got a CC license in mind for your own work?

Building with blocks


This week we're looking at how to use CSS to lay out a page. To kick off, work through this tutorial on subcide called 'Creating a CSS layout from scratch' (up to, but not including page 10, the navigation).

There are some interestnig techniques used here to ensure the divisions stay in the right places. And some not-so-interesting uses of graphics instead of text (did you spot them? What would you do differently?)

One thing I noticed was a lot of code in this tutorial that set the padding and margins for various elements to zero. If you're wondering why, there's a good article on the subject called 'No Margin For Error'

Taking the idea of stacking DIV boxes to make a page layout one step further, here's two more web pages to look at:

  • layout-o-matic - which lets you plug in some variables and automagically generate some CSS
  • Little boxes - which has a set of templates ready to download

Once you've explored these a little, revisit your '10 things' page and apply some CSS layout...
  1. Link a CSS file to the '10 things' page
  2. Create a DIV with a unique ID around your heading
  3. Set the background colour, border and padding for this div to have it stand out on the page
  4. create divisions for the list and your image(s) so that they display side by side on the page in a 2 column layout
  5. put in a 'footer' div with copyright, navigation and validation links in it
  6. Upload and post a blog entry to let me know when it's ready to view

Monday, March 05, 2007

CSSpectacular



After installing the HTML Validator and using to fix up your '10 things' page, I'd like you to use some Embedded CSS to smarten it up...

  1. set the body background to a different colour (a light grey would be nice)
  2. add margins to either side of the page (20%)
  3. add margins around your ULs (15px)
  4. set the font for the page to arial 12pt and make it a contrasting colour to the background
  5. add a border and background colour to your OLs
  6. set the colour of the hyperlinks:
  • :link {color: #0000dd }
  • :visited {color: #dd00dd }
  • a:active {color: #ff0000 }
  • a:hover {color: #0099ff }
Upload, link and blog

Saturday, March 03, 2007

Web 2.0 ... The Machine is Us/ing Us

I showed a little film in class a couple of weeks ago, and it's had me thinking about what the web's becoming and our part in it as developers.



As someone who's going to build the tools that make web-based user-generated artificial(?) intelligence possible, you'll need to start thinking about some of the issues flagged:

  • copyright
  • authorship
  • identity
  • ethics
  • aesthetics
  • rhetorics
  • governance
  • privacy
  • commerce
  • love
I was going to start building a list of links based on these, but quickly realised that each one is a website worth by itself. And a subjective, highly personalised one at that. So I'll leave it to you to build you own meaning, and restrict myself to pointing out a few interesting directions as we muddle through the year. I expect you to return the favour... drop the odd link into your own blog so we can all share the goodness.

Here's one to start off with. Another movie; this time exploring the creative commons. So, invite around your favorite friend, make the popcorn, and settle down for 'Get Creative'

Wednesday, February 28, 2007

Validation and DOCTYPE

Perusing your '10 things' lists, I noticed a few problems lurking beneath otherwise good-looking HTML. Many of these could be identified and avoided by using validation - either submitting your uploaded page to the W3C Markup Validation Service or by installing the HTML Tidy firefox extension and running this in your browser. A practice I heartily recommend to you, and expect you'll take up from now on.

If you do run a validator on your pages, one of the first things you'll find is that it insists on finding a DOCTYPE.

Why specify a doctype? Because it defines which version of (X)HTML your document is actually using, and this is a critical piece of information needed by browsers or other tools processing the document. Without it, many browsers will render the page in 'Quirks mode' - usually the stupidest option, where the browser assumes you’ve written old-fashioned, invalid markup as per the late 1990s - so it's important to get this right. Here's the W3C list of recommended DOCTYPES

Now things get interesting. To start, we need to decide what sort of (X)HTML we want to use. As a legacy of the browser wars there's a swag of HTML versions to choose from (including a couple that are still being developed), but for my money, you'd be mad not to go for a version of XHTML. It may be more work to get a valid page, but in the long run you'll save on re-development time and effort. Perhaps a read through HTML Versus XHTML will help you decide (although you're going to need some more research before you settle on a particular version).

So what will you be using for your pages? Have look through the links above and search for some more material on the web. Then try adding some DOCTYPEs and validating a few of your pages - and share the pain in a blog entry. In your entry I'll be looking for links to the resources you've read through; a definitive statement about your preferred markup version and type (strict or transitional), and a short sentence on why you feel this is the best one for you and your visitors.

setting the table


In the dim dark past (all of 3 years ago now), tables were used extensively for laying out web pages. But that's all in the past now. Repeat after me: "tables are only for displaying tabular data".

Very good, now we've got that straight, have a go at the table tutorial on Web Design from Scratch, which covers the subject in plenty of detail. Once you've finished, try out the Tables for tabular data HTML challenge.


Image: 'LED Dining table'

Monday, February 26, 2007

a todo list for life...


It's time we put some of our new found knowledge into practice with a quick exercise...

I'd like you to create a web page (complete with doctype, title and a heading) which lists 10 things you want do do before you die. They can range from the trivial to serious; but display them as a numbered list.

Once you've built your list, make at least one item into a nested list of the steps you'd need to take to accomplish that goal. For example:

  1. have my cake and eat it too
    1. get a cake
    2. hide from family and friends
    3. scoff cake like there's no tomorrow
  2. Goal two
  3. Goal three etc.
Add some hyperlinks from your items and/or steps to resources on the web that could help you accomplish your goal (in the example above this might be something like: get a cake)

Include some images on the page that are relevant to your project (perhaps using something like flickrCC)

For bonus points you might want to try adding CSS to:
  • colour your heading and list elements' text and background
  • add a margin to your image(s) and/or list elements
  • add rollover effects to your hyperlinks
  • add a drop shadow to your image(s)
  • format your lists
  • position elements on the page
Once you've finished, upload the lot to your web space and link to it from your home page and your blog.


Original image: 'IMG_7477'
by: tookie

Friday, February 23, 2007

firefoxin'


Here's a little shopping list for you firefox using web developers out there ...


  • Web Developer - a whole bunch of development tools in one handy package - the ability to live edit CSS and HTML alone is worth the price of the download.
  • Firebug - lets you ‘edit, debug, and monitor CSS, HTML, and JavaScript live in any web page’ - white man's magic at its best
  • HTML Validator - On the fly validation for W3C standards (this function is included in the web developer add on, but I have a soft spot for the original).
  • JSView - makes peeking into external javascript and CSS files into a simple mouse click activity.
  • View Source Chart - Creates a Colorful Chart of a Webpage's Rendered Source Code, which is pretty handy when you're just learning the ins and outs of tables, divs and the like.
  • Execute JS - lets you type in and debug JavaScript code on the fly. This will come in handy when we're studying client side scripting.
  • Live HTTP Headers - allows you to view HTTP headers of a page while browsing. This will come in handy when we're developing forms

Original Image: 'Firefox in the Hen House'

Wednesday, February 21, 2007

a picture's worth 1024 words

Our brains are wired to react to the things we see - as opposed to that what we read. As you will probably notice in this little experiment...

Tigers (Panthera tigris) are mammals of the Felidae family and one of four "big cats" in the Panthera genus. They are apex predators and the largest feline species in the world, comparable in size to the biggest fossil felids. The Royal Bengal Tiger is the most common subspecies of tiger, constituting approximately 80% of the entire tiger population, and is found in the Indian subcontinent. An endangered species, the majority of the world's tigers now live in captivity

What did you see first? The picture or the text? What left a lasting impression? I'm betting it was the picture that grabbed your attention, and that no matter how much information I put into the description, you'd have a much better idea of what a tiger's all about from that little 9k picture.

So how do we go about tapping into all that pictorial goodness? By using the IMG tag, mais oui!

Try this gentle introduction to the subject on HTMLdog. For a more in-depth exploration, see w3schools - including the various examples at the bottom of the page (but don't worry too much about the image maps just yet, we'll cover these in a seperate post).

After you finish reading the words - plug some images into a page of your own: find a copyright free image on flickr using flickrCC. Download the pic into an images directory and then write up a page that includes the image on the left hand side, along with a heading and some descriptive text (perhaps from wikipedia) which appears to the right and wraps around the picture. For bonus marks:

  • have the picture link to the original image on flickr
  • prevent the blue/purple border from appearing around the hyperlink
  • add a 15 pixel margin around the picture using CSS
  • add a drop shadow to the image using CSS (this is distinction level stuff)
  • add the correct attribution to your image and text
Save as images.html and link to your new page from your index page - upload the lot (don't forget the images directory and its contents) and then sit back and enjoy the view.



Image: 'Tiger'
Wikipedia article: 'Tiger'

linking up


A web page on its own is a lonely thing. Fortunately we can link it up with friends using the ultra-hip hyperlink (known to its friends as the anchor tag).

This Tizag article is a good introduction, but it doesn't discuss the depricated attributes (these are the bits that are no longer supported - usually because CSS does a better job). I'd recommend a follow up reading in the XHTML tutorial which covers these aspects.

Once you've read through these, have a bash at the hyperlink challenges I've set up for you on the wikiversity - if you've done the lists.html page, use this as your target for local links, and add a link on the lists page back to your links.html page so you can navigate backwards and forwards between them. Upload the lists.html and links.html pages to your web site and drop me a line so I can have a look at how you're getting on.




Image: 'ORLY?'

making a list and checking it twice

Today's post is being brought to you by the HTML tags: UL, OL and DL...

Lists are a handy styling element for presenting data in bite sized pieces. HTML gives you three basic flavours: the unordered list; the ordered list; and the definition list. Find out how each of these is works in this List Tutorial

Once you've mastered the syntax, flex your list building muscles with the Lists, lists and more lists HTML challenges. Save the exercises as a web page called lists.html and nestedlists.html - we'll be using them later to practicing linking.

Want to see something really cool? Listamatic takes a plain unordered list and CSSs the snot out of it - it's got to be seen to be believed.



Image: 'New holiday: No Internet Thursday'

Monday, February 19, 2007

Moovin and a groovin

Time to upload a file.

First up, we'll need to understand what file transfer is all about - the wikipedia article's a good spot to find out.

Next, we'll need an ftp client to play with. Peruse the list on wikipedia, or search google and select one that will fit your pocket and operating system.

Install your client of choice and connect to the bathurst tafe web server using the login details provided (if you've lost them, or not received them yet, give me a call and I'll see what I can cook up). Once you're logged in, upload the index.html file you created earlier and see if you can bring it up in a web browser: http://www.bathurst-tafe.nsw.edu.au/~yourname

Got troubles?

  • make sure you're using Active rather than Passive transfers in your ftp client
  • double check the user name and password
  • remember, if you're in the computer lab, our ip address is different from the bathurst-tafe.nsw.edu.au address
  • the web server can only see the public_html folder
  • you may need to change the permissions on the file so that others can read it
Once you finish this challenge, go to (or create) your blog and write a short post on the experience. Make shure you mention:
  • The name of your ftp client
  • The URL you got it from
  • any installation woes you encountered
  • some comments on its ease of use
  • $
  • the platform(s) it works on
  • the install file size
and any other interesting bits of information you came across

Create a basic document

Time to catch up with a few things...

For a path through the HTML/CSS maze, you could do worse than to try the following exercises and tutorials:

Once you get your head around this, create a new web page about yourself: index.html using the tricks you've just learnt.

Tuesday, February 13, 2007

Welcome to a new year of web development


For those of you just starting, a warm welcome to the 2007 web development course. And welcome back to those of you who are continuing their learning journey.

I haven't been idle over the break. Together with a teacher at Blue Mountains TAFE I've been helping to build some web development resources on the wikiversity. We've outlined the course onthe Cert IV Websites Qualification in Australia and will be building this into a complete course over the coming months. If you're just starting out, the page for ICAB4135A, Create a simple mark-up language document to specification could prove useful.

If you're just beginning, a visit to Tizag for some practice with their beginner tutorial might help. For those a little more comfortable with HTML, we'll be working through the Tizag HTML lessons over the next few weeks; with an emphasis on using CSS in place of attributes to change the look of our HTML.

If you're already using HTML try out some of the HTML challenges we've put together.

I'll be dropping by here regularly with more suggestions about picking a path through the study material, and talking to you all each week, but don't be shy about getting in contact - call me on 6338 2448 or email peter.shanks at tafensw.edu.au - another interesting option for you might be to start your own blog here on blogspot. Use it to keep a learning journal - jotting down notes, observations and questions after each study session. If you do, drop me a line with the url and I'll add it to the blogroll here.

All the best with your studies, this should be a fun year I think.



Image: 'Footprints'
by: Joshua Davis

Tuesday, November 28, 2006

a quick note on .htaccess

here’s a little about using .htaccess to protect your phpMyAdmin directory


It protects a directory through 2 files; .htaccess and .htpasswd – you can read all about it on this Comprehensive guide to .htaccess


There’s an online tool you can use to create these files at the .htaccess Generator


Enter your user name and your current password (this is not compulsory, but convenient), and /srv/www/[yourusername]/public_html/phpMyAdmin/ as the path. (note, no tilde in the user name). Then Copy the information returned by the online tool and save the first file as '.htaccess' and the second file as '.htpasswd'. Upload them (as ASCII) to your public_html/phpMyAdmin/ directory and viola, it will be password protected.

Monday, September 25, 2006

JavaScript and the DOM


Sorry folks, I’ve twisted my ankle and I’m not going to be able to make it in today. I know you’ll all miss me, but to dull the pain of separation, here’s a couple of tutorials to be going on with:

Javascript Basics Part 6 (internal link)

talking about the Document Object Model or DOM for short.

and…

Javascript Basics Part 7 (internal link)

examining the document object and the window object, both of which offer many useful functions.

When you’ve finished these you might like to try applying them to the Greening Bathurst form, so that error messages are displayed on the web page alongside the fields that they are all about (rather than in an alert box).

Want more? Have a look at error handling and AJAX:

Javascript Basics Part 11 (internal link)

how to account for errors and several different methods for general error handling.

Followed by:

Javascript Basics Part 10 (internal link)

An introduction to AJAX


Image: ‘A pint for the discerning standardista

Monday, September 04, 2006

Building a data-driven web site (reposted)


this was originally posted last month, but got lost somehow, so here it is again in all its warty glory...

It's been a while, so this is likely to be a lengthy post...

To start off, we're going to look a the topography of our data-driven book site: a page that lists all the authors, with links from each author's name to a page that lists the books written by that author. For maintenance, we'll add pages that allow author records to be added, edited and deleted.

Before we get stuck into this, we'll need to know how to communicate with our database using SQL (structured query language) statements. Have a look at the SQL CHEAT SHEET for some examples of SQL that select, update, insert and delete records from a database. You can experiement with these in myPhpAdmin by opening a SQL window and typing in commands.

Master/Detail Pages

For our first page we're just going to display a list of authors. The pseudocode for this operation would read something like:
connect to the database engineselect a database to useexecute a SQL statement to retrieve some records from the databasedisplay each record on the web pageand the php code to accomplish this might look something like:

<?php

// connect to the database engine
@ $db = mysql_pconnect('localhost','username','password');
// do some error checking
if (!$db) {
echo 'error: couldnt connect to the database';
exit;
}
else {
//echo ' all ok with connection';
}

// select a database on the database server
mysql_select_db('your_db',$db);

// execute a SQL query to select records from the authors table
$result = mysql_query('SELECT * FROM authors');

// display each record on the web page
$numresults = mysql_num_rows($result);
//echo $numresults." records found";
for ($i=0; $i<$numresults; ++$i) {
$row = mysql_fetch_assoc($result);
echo $row['firstname'].' '.$row['surname'].'<br />'';
}

?>


So far, so good. But we want more, vis: links from the author names to a page that lists all the books they've written, so we'd need to update the echo statement to look more like:
echo '<a href="titles.php?authorID='.$row['authorID'].'">'.$row['firstname'].' '.$row['surname'].'</a><br />'';Wha? I hear you ask...

Quite simple really; we've wrapped an anchor tag around our author names, linking them to (an as yet unwritten) page: titles.php, which will list all the books written by that author.

So that our new page can list just one author, we need to give it a hint about what author we're interested in, and we do this by appending the authorID to the URL: ?authorID=nnn, where nnn is grabbed from the database and pasted into the link, a unique ID for each author.

At the other end (on the titles.php page), our script will grab this ID using $_GET and use it to build an SQL statement which gets just those books written by our author. Something like:

<?php

// connect to the database engine
@ $db = mysql_pconnect('localhost','username','password');
// do some error checking
if (!$db) {
echo 'error: couldnt connect to the database';
exit;
}
else {
//echo ' all ok with connection';
}

// select a database on the database server
mysql_select_db('your_db',$db);

// execute a SQL query to select records from the authors table
$result = mysql_query('SELECT * FROM titles where authorID = '.$_GET['authorID']);

// display each title on the web page
$numresults = mysql_num_rows($result);
//echo $numresults." records found";
for ($i=0; $i<$numresults; ++$i) {
$row = mysql_fetch_assoc($result);
echo $row['title']<br />'';
}

?>

Note the php which grabs our authorID from the URL and sticks it onto the end of our SQL statement:
'SELECT * FROM titles where authorID = '.$_GET['authorID']
Nice and easy, yes? On to...

Adding New Records

To add a new record we need to write a form with text inputs for each field in the table, and link to this new page from our original authors list. So, to start we'd add a little line of HTML to our authors.php page:
<a href="admin/authoradd.php">Add a new author</a>(note, we're putting our administration pages in a new sub-directory called admin. More on why later)

The form itself is rather simple, just asking for the firstname and lastname of our new author (we don't need to get an authorID because this is an autonumber field and the database will do this for us). Something like this should do the trick:

<h1>Add a New Author</h1>
<form method="post" action="authoradd2.php">
<table border="0" cellpadding="3" >
<tr>
<td>First Name:</td>
<td><input type="text" name="firstname" /></td>
</tr><tr>
<td>Surname:</td>
<td><input type="text" name="surname" /></td>
</tr><tr>
<td></td>
<td><input type="submit" value="Add Author" /></td>
</tr>
</table>
</form>

For simplicity the form will submit (POST) to a second php page: authoradd2.php which will do the actual work of creating the new record. The pseudocode for this operation would be:
Get the form elements into variablesConstruct an SQL statement from these to insert a new recordConnect to the database engineSelect a databaseExecute the SQL statementRedirect back to the authors list (authors.php) to display the new authorand the code might look something like:

<?php
// get the firstname and surname from the form
$firstname = $_POST['firstname'];
$surname = $_POST['surname'];

// build the SQL statement which will insert a record
$sql = "INSERT INTO authors (firstname, surname) VALUES (' ".$firstname." ', ' ".$surname." ') ";

// connect to the database engine
@ $db = mysql_pconnect('localhost','username','password');
// do some error checking
if (!$db) {
echo 'error: couldnt connect to the database';
exit;
}
else {
//echo ' all ok with connection';
}

// select a database on the database server
mysql_select_db('your_db',$db);

// execute the SQL statement
$result = mysql_query($sql);
// check that it ran correctly
if (!$result) {
die('Invalid query: ' . mysql_error());
}

// redirect to the authors list to show the results
header("location: ../authors.php");

?>

let's move on now to...

Editing a Record

This is really a combination of things we've already done. Firstly, we need to add an 'Edit' link next to each author's name (which must include the authorID in the URL). This would mean changing our authors.php file so that each author would be displayed as:

echo '<a href="titles.php?authorID='.$row['authorID'].'">'.$row['firstname'].' '.$row['surname'].'</a><a href="admin/authoredit.php?authorID='.$row['authorID'].'">edit</a><br />'';

The important new part being:

<a href="admin/authoredit.php?authorID='.$row[authorID].'">edit</a>

And the new authoredit.php page? It would take the authorID, select the author record from the database, and populate a form with these values, allowing the user to edit them. Someting like:

<?php

// connect to the database engine
@ $db = mysql_pconnect('localhost','username','password');
// do some error checking
if (!$db) {
echo 'error: couldnt connect to the database';
exit;
}
else {
//echo ' all ok with connection';
}

// select a database on the database server
mysql_select_db('your_db',$db);

// execute a SQL query to select the author record from the authors table
$result = mysql_query('SELECT * FROM authors where authorID = '.$_GET['authorID']);

?>

<h1>Edit Author</h1>
<form method="post" action="authoredit2.php">
<table border="0" cellpadding="3" >
<tr>
<td>First Name:</td>
<td><input type="text" name="firstname" value="<?php echo $row['firstname'] ?>" /></td>
</tr><tr>
<td>Surname:</td>
<td><input type="text" name="surname" value="<?php echo $row['surname'] ?>"/></td>
</tr><tr>
<td><input type="hidden" name="authorID" value="<?php echo $row['authorID'] ?>" /></td>
<td><input type="submit" value="Add Author" /></td>
</tr>
</table>
</form>

One trick to note: the authorID is being passed to authoredit2.php as a hidden field:

<input type="hidden" name="authorID" value="<?php echo $row['authorID'] ?>" />

We don't want the end user to edit this value, but need to send it through so it can be used when updating the record. Once submitted the form calls authoredit2.php, which performs the following operations:
Retrive the form valuesBuild an SQL statement from them to update the recordConnect to the database engineSelect a databaseExecute the SQL statementRedirect the user to the authors list to display the resultsI won't bore you with a full listing, just the first 2 steps:

// get the firstname, surname and authorID from the form
$firstname = $_POST['firstname'];
$surname = $_POST['surname'];
$authorID = $_POST['authorID'];

// build the SQL statement which will insert a record
$sql = "UPDATE authors SET firstname = '".$firstname."', surname = '".$surname."' WHERE authorID = ".$authorID;

The biggest trick here is to remember to wrap any text strings inside single quotes for the SQL statement. This can call for some tricky double quote stuff in the php. Perhaps a view of the final SQL will give you an idea of what we're aiming at here. If, for example, I wanted to author number 1 in the database to assume my name the SQL would look like this:
UPDATE authors SET firstname = 'Peter', surname = 'Shanks' WHERE authorID = 1
Nearly done now, just one more thing:

Deleting Records

Lucky for us, this is really the easiest operation so far. All we need do is add a little code right next to our edit links on the authors.php page:


<a href="admin/authordelete.php?authorID='.$row['authorID'].'">del</a>

As with the edit link, we're passing each author's ID in with the URL. This time we don't need a form, just the php to build the SQL and execute it before redirecting us back to the author list page:

<?php
$authorID = $_GET['authorID'];
$sql = "DELETE FROM authors WHERE authorID = ".$authorID;
require("../connection.php");

$result = mysql_query($sql);
if (!$result) {
die('Invalid query: ' . mysql_error());
}

header("location: ../authors.php");
?>

Of note here: I got sick of writing the database connection and selection code over and over. Instead I put it in a seperate file: connection.php, which I included in this one with the php function: require("../connection.php");

And that's it - we've built a fully functional, data-driven set of web pages. If you want to practice your skills further, add some pages which allow you to view book details when you click on titles, and add, edit and delete titles from the database.

Sessions


So, we've been looking a bit at session variables. The scenario:

we're displaying a screenful of data to our web site visitors (like a list of authors), and we want to give authorised users the option to edit, delete and add new records - but we want to hide these pages from the average viewer. First, we need a login screen.

A simple form asking for a user's email and password should do. When the form's submitted, these fields would be checked against a database of users. Then the magic occurs...

If the user's email and password match, we'll be setting a session variable, that will let us know that they're authorised to see the administrative pages and links.

Sessions are like server-side files that store variables that can be read from, or written to, by PHP scripts. Each session file is unique to the user that created it and can only be accessed by subsequent requests from the same user.

For our login, we'll be setting a session variable called loggedin. The first piece of code on the page, and all other pages that need to access the variables, will be:

<?php session_start(); ?>

This piece of code does one of two things. If the user does not already have a session, it creates a new session - or - if the user does already have a session it connects to the existing session file. When a new session is created, PHP session management generates a session identifier.

After calling the session_start function, we're ready to do the email/password comparison with the user details in the database (you can do that), if they match we'd set the session variable:

$_SESSION['loggedin'] = 'true';

Subsequenly we can check for this value on any page. To selectively display bits of html (links to edit and delete functions, for example) we might add:

<?php
session_start();
if ($_SESSION['loggedin'] == 'true') {
echo 'Edit>';
}
?>

If we were restricting access to a whole page (say the add, edit or delete pages), we might add some code like this:

<?php
session_start();
if ($_SESSION['loggedin'] != 'true') {
header("location:login.php");
}
?>

This code checks to see if the session variable loggedin is set to true. If not, it redirects the user to the login page.



Thanks to iconjon for the pic

Sunday, June 04, 2006

What should we build today?


Here's a little task that should cover the remaining assessment events for a bunch of modules: complex mark up language documents, emerging web technologies, introduction to programming and the client server envirnoment. It's due on the 19th June 2006

The problem

I'd like you to create a web based form that allows someone to enter event details (these could be for greening bathurst events, an upcoming gig for your band, your social calendar, whatever).

The form should allow for the entry of a date, title, description, location and and url to further event details (or a web site home page if there are no details online).

Once submitted, the form should call some script that creates an RSS file with the event information. For now we'll assume that there will only be one event at a time in this file, but in a later, database driven version, we'll be looking at how to list multiple events.

What you need to produce

For 3756V - Introduction to Programming

  • An IPO table of the process

For 3756Y - Complex Mark Up Language Docuemnts
  • A form for entering the data. To make the date input unambiguous, allow the user to select days, months and years from dropdown boxes.
For 3756Y - Complex Mark Up Language Docuemnts, 3756X - Emerging Web Technologies & Standards and 3756W - WWW Client Server Envirnoment
  • An RSS file for the event generated by some PHP script. This can be in RSS 0.91, 1.0 or 2.0 format but it must be validated
For 3756Y - Complex Mark Up Language Docuemnts and 3756X - Emerging Web Technologies & Standards
  • a link to the RSS feed from a web page. The link should be from an image like this:
For bonus marks
  • see if you can add some client side JavaScript that prevents users from submitting the form with empty fields

What I need to see on or before the 19th June, 2006:

An assignment cover sheet attached to a copy of your IPO diagram and URLs to the pages with your RSS feed link and your form for entering new events.

Hints

You might find the followning web sites useful:



Thanks to The One True Stickman for a picture of his junk corner