Archive for the ‘Programming’ category

« Older Entries
Newer Entries »

PHP Lesson 3

February 7th, 2007

Sunny Man’s TutorialsIn lesson 2 we touched on variables in PHP and how to create one and then change it via a number of processes. Today we’re going to use some of the functions that PHP provide which allow us to manipulate and query strings and that will most likely become very handy in the future.

If you wish to take a look at the functions it offers then head on over to the PHP Manual, specifically the string functions.

Lesson 3: String Functions

Last week we touched on how to find the length of a string using the strlen() function. Today we’re going to look at a few more functions and put them into a practical example. To find the length of a string all we have to do is employ this function as is shown here:

<?php
$five = strlen("mouse"); //$five's value is 5
$word = "mousemat";
$eight = strlen($word); //$eight's value is 8
?>

Now we’re going to look at replacing characters or phrases within a string with something else. To do this in the simplest way we are going to use the str_replace() function. There’s several parameters to this function. This means that we have to provide more information within the functions. In this case the format is str_replace(string to search for, string to replace it with, string to search within).

$string = "Sunny Man’s Blog";
$string = str_replace("Man","Boy",$string); //replace 'Man' with 'Boy'
echo $string; //displays Sunny Boy's Blog

Later on when we get to talking about SQL and databases you’ll need to be able to encrypt strings. There are several different types of encryption available in PHP. All of them are simple enough to use but, as we will will discuss later on, knowing when to use the correct one is vital. First let’s take a look at the different types.

$password = md5("password");
echo $password; //5F4DCC3B5AA765D61D8327DEB882CF99

$password = sha1("password");
echo $password; //5BAA61E4C9B93F3F0682250B6CF8331B7EE68FD8

Both md5 and sha1 have their advantages and disadvantages but they’re both quick to generate and once stored in a variable, easy to remember. Say we wanted to take a raw password that was given to us by a form (we’ll cover this soon), replace the letter ‘i’ with ‘z’ and encrypt it for storage in a database, this is how we would do it:

<?php
$password = "birmingham";
$password = str_replace("i","z",$password);
$password = md5($password);
?>

This is the end of lesson 3. In the next lesson we’ll talk about taking variables from a form, collecting them and manipulating them in a real life situation. After than we’re going to put all we’ve learnt into a logging in script in lesson 5 which will introduce you to salts, database queries and some other stuff we will cover in lessons 6 to 10.

1 comment »

Posted in Educational, Programming, Tutorials

PHP Lesson 2

February 6th, 2007

Sunny Man’s TutorialsIn a previous post I started you off on the basics of PHP and you managed to get Hello World! displayed on the screen. This lesson we are going to learn about how to create, use and manage variables. Hope you enjoy it…

Lesson 2: Variables

Unlike programming languages such as C++, in PHP you don’t have to state what type of variable you’re creating when you create one. A variable such as $myvar could just as well be a number as it could be a word. It’s as easy as pie to create different variables:

<?php
$age = 15;
$name = "John";
?>

Here we created 2 variables: $age and $name which values’ are 15 and ‘John’ respectively. It’s that easy to create variables. Now that we have created variables we can manipulate them. Say for example we wanted to increase the $age variable and assign the new value to $age again, this is what we would add before the end of the script:

$age = $age+1;

If we now output the $age variable we would find that it displays 16 and not 15.

echo $age; //this would display '15'

We can also attach strings together. Take the $name variable we created earlier. We can take that and also create a last name in a different variable and then string them together to make the $name variable include the first and last name. Here we go:

$lastname = "Smith";
$fullname = $name.$lastname; //this would create "JohnSmith"
$fullname = $name." ".$lastname; //this would create "John Smith"

So, let’s try and put this all together and make a useful program out of it. Here we manipulate the age by turning it into dog years. We also here string the first and last names together and then as a step towards the next lesson we’ll count the number of characters in the names.

<?php
$age = 15;
$firstname = "John";
$lastname = "Smith";
$i = 0; //used later on as a counter

$dog = $age*7;
echo "You're ".$age." human years old and ".$dog." dog years!";
echo "<br />"; //create a new line; just regular html

$name = $firstname." ".$lastname;
$i = $i + strlen($firstname); //0 + 4
$i = $i + strlen($lastname); //4 + 5
echo $name.", you have ".$i." letters in your name!";
?>

Try it out and play around with it! Next lesson we’re going to look at some of the functions we can apply to strings such as getting the length of the string and searching for a specific item within a variable.

1 comment »

Posted in Educational, Programming, Tutorials

PHP Lesson 1

February 5th, 2007

Sunny Man’s TutorialsI’m going to start producing a few classes for those people who wish to start learning the wonderful programming language of PHP. These will be pretty simple classes and will reach until the end of my knowledge of the language. First, a bit of my experience – albeit a relatively short one.

My History

I first started to learn PHP 3 years ago and have since then done some things I’m quite proud of in the language. I’ve built a system for a hospital in Reading, my own blogging software (although quite simple, it does the job) and also a file directory viewer with AJAX technology. But, my PHP knowledge is quite limited and I have not used the language now for some times as I have been concentrating on the design aspect of the web.

Lesson 1: Hello World!

Every programmer starts off with the ‘Hello World!’ program. Here we are going to get PHP to output the text ‘Hello World!’ to the screen. From this point out I’ll assume you’ve installed PHP and have it running on Apache or the like.

So, as with any PHP script we have to tell the server it’s going to be dealing with PHP. So we start it off with the opening and closing tags. All code goes between these tags:

<?php
?>

Now, as I said all PHP code goes in between these tags. So, now we have to make it do what we want it to do. So, in between those tags we know insert this line of code which tells it to output the text to the screen:

echo "Hello World!";

Once we’ve put this all together we should be able to achieve the result we wanted. Try it yourself on your own server! Just save the following code as a .php file and run it!

<?php
echo "Hello World!";
?>

It’s going to get a bit more complicated than this, I can assure you. I’ll post a lesson every weekday – every Friday we’ll do a roundup of everything we’ve learnt!

3 comments »

Posted in Educational, Programming, Tutorials

Theme Development Process

January 6th, 2007

Web DesignIn celebration of my acceptance into the 9rules community I decided, once again, to create another WordPress theme for my blog – this time with a much more professional look and with a little more beauty under the hood. It has taken me just over 3 days to plan, mock, test and implement the new design and I know that it’s a good one because I like it and for some reason, I just have to look at it every now and again. While developing it I wondered how other people planned, mocked and tested their designs and whether or not I was doing things correctly. I wondered how the design process worked for professional designers and whether or not I was detailed enough in the three stages. Here I’m going to document the design and its progress from a few days ago when I started it.

Planning

Usually when I’m planning a design I would start with a piece of paper, a pencil and a rubber. But, I’ve found that when designing a WordPress theme, I prefer to start in my favourite image editor, Fireworks. I find being able to visualise the layout and make changes at my whim, and on-the-go, makes the process much faster and, apparently much more fun. I start with a blank canvas 1024 pixels wide by 2000 pixels high and I set to work. In the past I’ve used a colour scheme generator to give me a palette of colours that I can work with but this time I just went in with a choice of all the colours you could wish for.

I chose 3 colours I would make the design around – light black (#333), white (#fff) and my iconic ‘Wii’ blue (#0cf). I then set to work with the ideas in my head. I always seem to prefer to create fixed width layouts possibly because it is a reflection on my personality. I like things to be structured and things to be the same from all angles; by this I mean I like it to look similar on all platforms, in all browsers and all resolutions. I’ve only ever done a few fluid layouts because of browser CSS support back when IE6 was the latest version of IE but now that IE7 has been released I hope to design a few more, even if just for fun. I’m digressing here, back to colours. As I said I gave myself a limited palette to work with and the idea of a fixed width design and the inspiration from the world wide web.

I set the background colour of the canvas to my light black and then layed down my content area, defined by a white box. My main points of detail for this design were to reduce the header size, place the search function in the header, advertise my acceptance into 9rules and to sort out display issues with my bookmarks in IE6. As I designed it from the top down I was asking myself is the possible? and if it was I was asking how would I do this? The design for the homepage was complete but I wanted to add another stage to planning as I’d faced problems in the past when I hadn’t done it. I previously hadn’t designed the comments and respond section for any WordPress themes and I always hadn’t been happy with the final result because I’d been unprepared.

I’d finished both plans (homepage and single page) now in my image editor, it was late at night and I realised I’d spent a good five or six hours doing both plans in Fireworks. I wondered whether I was sad or just committed. Next stage is creating a HTML template of the design.

Mocking Up

The next stage in my development process was to turn my graphical plans into poetry, or in my case code. I decided to deviate from my usual header, content, footer div code layout but not too far. I start off with a XHTML Transitional template – because I like to use the strike through tag – and work from there. I have two Notepad2 windows open: one for the template and one for the cascading style sheet and deviate between the two. I tend to write the template code to the next milestone then turn to the CSS, write that and then view it in my native browser. If anything needs changing I do so. Once I’ve reached a major milestone such as I’ve finished the header I will get out my pack of browsers: Opera, Internet Explorer 7, Internet Explorer 6 and of course Firefox. When it’s not being spammed I’ll also require the services of Dan Vine‘s service iCapture which will allow me to view it in Safari on a Mac – a very handy tool for me, a Windows user.

It usually takes me around two days (accounting for procrastination) to finalise the design in HTML, find any rendering errors and sort them out but this time it took less than a day. I actively used the W3C validation tools and although I don’t actually understand the thinking behind some of it, I use section 508 and WCAG validation tools. Thanks the kindness of a few friends I received some suggestions and opinions on the design. I like to ask a select group of their opinions as they know their stuff and I respect their opinions. I tweaked a couple visual options and then the day was over again. Time to start turning the template into a theme.

Theme Building

Turning the template into a WordPress theme is the easy part in my opinion. I don’t like to overcomplicate things and so I only use the minimum of files required to make the theme work. I like the process of cutting up the code and placing the parts into their respective files. As I do so, I keep checking to see how the template integrates with the content over the template-to-theme period.

Because I hadn’t transformed my plan for the comments into HTML for my template, I had to create this from scratch now. I love turning an image into code and seeing it displayed on the screen – code is poetry, as WordPress says. When I was doing this I came across a bookmark I had made sometime back that linked to a set of over 1000 free icons made by Mark James, called ‘Silk‘. I decided to try and implement them into my design some how and thought that to fill some space, the comments section would be perfect. I think they work well and go with the overall ‘feel’ of the design. The transformation from template to WordPress theme took a day and I have to say I’m proud.

Final Theme Thoughts

This is my sixth design in the Sunny Man’s/Boy’s Blog series and I think it’s my best design yet in terms of aesthetics, accessibility and semantics. I don’t think I’ve reached the limit of my talents just yet either. I’m was so honoured that I was accepted into 9rules, I think it propelled me to just show that they didn’t make a wrong decision. I’m not the most precise or concise writer and I tend to deviate from the point I want to make but I hope that some of my points and thoughts get through on the topics I’m now going to concentrate on.

The new theme I think is very elegant although I’m not sure whether it is better centred as it is now or aligned to the left, as I planned it. Hopefully people will like it, but it’s more to please me and to boost my ego I suppose! So, that was the development of this theme from start to finish. Not very detailed, I’m sorry, but I keep forgetting to take screen shots of the development process and making an animated gif out of them as some in the past have. It’s 00:27 and Celebrity Big Brother is rather tedious. Goodnight.

5 comments »

Posted in Blogging, Programming