Code With Design » tutorial

Java: Tutorial about Arrays vs Static Arrays

Caleb Jonasson — Mon, 29 Mar 2010 09:50:06 +0000

This is a tutorial found on dream in code that I recently stumbled upon. It gives you a good look at an alternative to an array when using anything over java JDK 5. The tutorial covers some of the built in methods that the the ArrayList class comes with. It also goes over sorting, looping, checking for null and changing index’.

The tutorial was written by one of the moderators who goes by the screen name Locke.

You can find the tutorial here.

Into to HTML: Creating A Basic Web Page

Caleb Jonasson — Mon, 16 Nov 2009 19:54:49 +0000

In order to create your own web page you should first open up a text editor such as notepad or notepad ++. First things first is to copy the following code into your text editor and save it as index.php. PHP is a server side programming language which is most commonly used across the web because of its simple integration with html. Actual PHP code requires a server but if there is html text inside of a PHP file a simple test on your computer will allow you to properly view the page.

Demo Website || featured on codewithdesign.com

H1 tags

H2 tags

H3 tags

The h1 stands for header1 and these p tags are paragraph tags

Now we are going to step through the code so you know exactly what is going on and how the web browser reads the information. The top line of the code will let your browser know what standards it is to follow when reading the code.

The second line of code states that it is going to follow the w3 standards.

Now we are going to get into the more customizable areas of the website. This section of information is known as head information and is not displayed on the webpage itself. This information is once again read by the browser but you can tell the search engines what information to display along with the title of the page. There are many more things that you can do with this section of the text which I will be going over in another into to HTML article.

Demo Website || featured on codewithdesign.com

The first bit of the code is very boring but now we can get more into the content of the page. As you can see there are greater and lesser then signs with content in between, these are called tags. When declaring information inside of a tag you need to have a starting tag and a closing tag. The closing tag is going to allow you to specify that it is closing and will always close the tag immediately before it. For every opening tag you need to have a closing tag or information will not be displayed properly.

H1 tags

H2 tags

H3 tags

Notice how these tag examples are within the body tags. This means that the following content will be displayed within the body of the web browser. When you look at the page you will notice that it breaks into sections. The main section is html which contains the sub sections of head and body.

You can start creating a site with just this information but it is a good idea to clarify the beginning information in the tags for the best results when trying to find bugs and errors.

Within the body of the page a lot of the information can be sorted into different sections. In order to seperate the content you will need to use something called div tags. A div tag can easily break apart seperate sections of the page and will help you style your page in the future.

The Empty Headed Blog

Note that it is possible to contain divs inside of divs.

Going Through Website Creation Part 1: Layout

Caleb Jonasson — Fri, 13 Nov 2009 19:25:59 +0000

Starting Up An Old Project

A few months ago I posted an old project on the old blog. The project was entitled “Browser Friendly Feed Reader.” This project consisted of three simple pages. The first was the submitting form where users could enter their rss or xml feed. The contents of this feed could be output in the web browser to displaying it inside of the site framework that was created.

Process.php
Forum.php
View.php

The site was very simple but it was more built for the idea behind viewing a feed in the browser. Since then I wanted to create a more advanced version of the site that relied on a database and the ability to subscribe to the feeds. This is when I decided to restart to the old project and completely rework how everything is set from the ground up.

Working With The Framework

When starting to create a new project or just recreating one the first thing that you will need is a frame work. The frame work is a quick drawing of how you would like to have everything setup. Some people like to create theirs with programs such as In Design or Illustrator but I prefer to use a graphing set, a notepad and whatever pen is closest to me. I should be using pencil but I normally have a plan in my head prior to starting something.

Once you have the general idea of how things are going to work it is a good idea to draw out how you would like to store the key components of a site. I use a notepad throughout the whole process and it usually starts with me laying out something that looks like this.

Contents of index

Header (include not secure page)
Main image
Nav bar (include)

Sidebar (include)
Sidebar components (include single and double width items)
Navigation (include)

Main content (not included)
Post data

Footer (include)
Blocks of meta and links (include)
Bottom strip (include)

Order of Operations When Designing the Index

Once this has been worked up I then head into Adobe Dreamweaver to begin the process of changing my framework into an actual css ready site with all of the divs. This process takes a fair amount of time and the content usually created in this order. First note that Dreamweaver automatically creates the untitled.php page and the css page. At this point I only have the two items on my testing server. Back to showing you the order of operations.

Change the CSS page to create the proper widths for main content, sidebar, and post.
Change padding properties, select fonts, change margin properties.
Create the divs within the untitled document ie the divs in the header that hold link menus.
Add the div id and classes to the CSS file. (remember to work down the content as it appears within your page. Start with the header then go to sidebar, etc.)
Create and fill the pages with fake content and see if this is how you would like the pages to be displayed.
Go through and tweak anything that makes you unhappy.

Pulling Apart the Index.php Page

Now that you have created your base index page and you are somewhat happy with the content you can go ahead and begin to pull the page apart. This is where the layout of includes will come in handy. This process consists of cutting and pasting section of code into new php files. The naming of these files is up to you but I normally go with “pt_” as a prefix for “Part” which is a part of a page and “pg_” which stands for “Page” meaning that it is a whole page. An example of this is “pg_authors.php” or pg_feeds_addfeed.php” The next section of naming a page comes from the actual section that is within the page. On the friendly browser feed viewer project I started there are sections of pages that relate to feeds. If I wanted to create a page where users could subscribe to a feed I would name it “pg_feed_subscribe” this tells me what the php file is, its subject and what the page is for. Another type of file I often contain is the prefix “process_” This is a page that requires a form to post to or backend piece of date. The page naming is completely up to you I just wanted to share how I go about naming my webpages.

Now we will go through pulling the pages apart. Now that we have gone through a little lesson on proper page names it is now time to actually pull something apart. For this I will not be using the rss.skorg.org site but a new site with no content instead.

Here is the full index.php page that we will be working with.

Test

Header

Sidebar1 Content
The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content.
Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.

Main Content
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.
H2 level heading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.

Footer

Now we are going to pull this page apart and change some things so the include will work properly. The first thing we are going to want to do is change how the header information is setup. We want the content that can be thrown into one file to stay at the very top. The rest that we need for the page is going to be below that.

Test




Header

Take note of where this section of code is and what has changed. The title tags have been moved below the IE exceptions. This is so it is not included in the new “pt_head_req_top.php” file. Now we are going to cut the bottom part of the header code will have a separate required field for the transition tags. This is important so if you wanted to add class to the divs you could do it to everything based on one file change.

1
2
3

 include('pt_head_req_top.php'); ?>
Test
 include('pt_head_main.php'); ?>

Inside the two sections is where you want the head data that will change for each page. The following code is what pt_head_main.php consists of.





Header

Because we are now pulling sections of the page together with php the load times will be a little bit quicker and we have decreased the code of the index by an incredible amount. The index.php code now looks like this when we are done with it.

 include('pt_head_req_top.php'); ?>
Test

include('pt_head_main.php');
include('pt_sidebar_main.php');
?>
 Main Content 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.
H2 level heading 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.
 include('pt_footer_main.php');?>

Now you should be able to create a site that is fully based off of your index. If you need to change things around like the css link based on different pages there is always PHP code for things like that.

Continue on to read part 2

By: Caleb Jonasson

The Beginners Guide to PHP

Caleb Jonasson — Wed, 30 Sep 2009 00:27:27 +0000

The beginners guide to PHP

The first thing that you are going to need to know about PHP is that it is built around HTML. Any PHP page can function the same as an HTML page. So if we were to go and put a head, body and some content in paragraphs you would have a successful HTML page being outputted by PHP.

<head>
<title>My PHP Pagetitle>
head>
 
<body>
<h1>The Main Test Pageh1>
<p>This is the paragraphp>
body>

When you run the following lines inside of a PHP script you are essentially just coding in HTML but as a .PHP file.

Anything that you code in PHP must be between the PHP tags. If it is not between the PHP tags the browser will assume that it is HTML and will print out simple text from the browser.


 
?>
 
 ?>

As you can see there are two different ways to show that the code is PHP. It is more formal among coders to use the first method of opening and closing tags but it is not necessary. It is more or less a way to recognize that the following code is PHP based.

It is always a good idea to properly comment the code that you are working on. This will help people that read your code if you ever need help with it. Also when going back to a project after quite some time you may be forgetful as tow hat variables and sections of the code are doing what. Which leads me to want to talk about assigning variables.

Unlike other programming languages where declaring a variable as an Integer, Boolean, Float, Etc is important and needed to get the program to run. In PHP you can convert variables to these values but if you wanted to assign a variable with a number or text it only requires an equal sign.

1
2
3


//this is a comment
?>

Declaring a variable.


// declaring a variable
$pizza = “$13.99″;
// printing the variable
echo $pizza;
 
?>

Notice how the variable has a $ sign on it. All variables must have this dollar sign in front of it in order to be noticed by the server processing the PHP. A variable can contain almost any information that you want and can be called anything, but it is a good idea to name them something that will help you remember them. If you have variables of $q, $h, $ht, $gh and so on. Chances are that you will be ridiculed by someone eventually. You are also going to have issues remembering the code that you have entered.

Functions are a very important part of PHP much like they are for any language. In this next example we are going to create our own function and apply it to some code with a variable and content outputs into a browser.


function roll() {
return mt_rand(1,6);
}
echo roll()
?>

As you can see, we have created a rolling dice with PHP. Within this function we included the “mt_rand”, similar to rand but has a more random output then the simple “rand.”
Now we are going to load a variable from the roll function that we have created then output it into the browser.


function roll() {
return mt_rand(1,6);
}
$roll1 = roll()
echo “you  have rolled a ” . $roll1 . “, way to go!”
 
?>

With this short section of code you first create the function roll. After the function you then load it into the variable roll1. Now you have an output of this roll going to your browser. This output will say for example “ you have rolled a 1, Way to go!”