Recently, I enrolled in the Web Application Development with PHP and MySql course at diycomputerscience.com

The course is broken into four parts, where we start with an introduction to PHP, and end by making our own web application with PHP and MySql.

I just completed part 1, which is Introduction to PHP. I decided to pen my thoughts and notes below.

Part 1 of the course consisted of some learning material and 6 activities for practice. I started reading the book PHP and MySql Web Development, but soon realized that my natural style of learning is by doing and not by reading. So I decided to read just some basics from the PHP manual, and start doing the activities.

Activity 1:

The first activity was to create notes for PHP. I created this wiki page to record my PHP notes. I will continue to use this wiki page and add important facts, etc, which will make it a reference for me in the long run. More unorganized notes will be blogged on this blog.

Activity 2:

The second activity was to make a simple HelloWorld program in PHP. Here is the GIT commit for the activity.

My main learnings in this activity are:

• A PHP script must be enclosed within special characters <?php .. ?>
• We use the echo command to print something to the console or the browser
• PHP strings can be single quoted as well as double quoted. Single quoted strings can contain double quotes, and double quoted strings can contain single quotes. Double quoted strings also support string interpolation.
• We can run PHP scripts on the command line, but we need a utility for it.

Activity 3:

The third activity was to create a greeting page using PHP. Here is the GIT commit for the activity.

My main learnings in this activity are:

• PHP has global variables which are available to the programmer for various tasks. One of the global variables is $_POST, which is an array containing all the post data (if the user made a POST request). PHP also provides us with _GET, and $_REQUEST
• We use the '.' operator to concatenate Strings in PHP

Activity 4:

The fourth activity was to create a temperature conversion service, which will allow the user to enter temperature in either Fahrenheit, or Celcius, and the application would convert it to the other metric and display the result.

Here are two GIT commits I made for this activity. The first one accepts the temperature in Fahrenheit, and displays it in Celcius. The second one allows a user to enter the temperature in either metric, and displays it in the other. 

My main learnings in this activity are:

• All variables in PHP are pre-pended with a $ sign
• PHP arrays are actually key => value pairs. If we query the array for a non-existent key, we will get a NULL
• PHP has support for the following types (Booleans, Integers, Floats, Strings, Arrays, Objects, Resources, and NULL)

Activity 5:

For the fifth activity we has to create a simple shopping cart using arrays. Here is the GIT commit. 

My main learnings for this activity are:

• A PHP session has to be explicitly started with the session_start() command. I think there is a file setting which will create the session for us implicitly
• We can include external PHP files using the include 'filename.php' statement. When we include an external file, it gets evaluated. I believe we can also use the require statement. I don't know the difference between the two, Need to find out.
• session_unset will remove all the values which have been stored in the session
• Most non boolean values will automatically evaluate to boolean when used in a conditional statement (need to figure out the exact rules)
• In PHP we can iterate through an array using the foreach statement like this
  • foreach($array as $key => $value) {}
• PHP supports the tertiary (cond ? something : something_else) operator
• Comparison is done with the == operator. However PHP also has a === operator. Need to find out what it means.
• PHP functions are declared thus:
  • function func_name ($param1, $param2) {}
  • We can have default parameters
  • We can have var args
• Even though a PHP array consists of key value pairs, we can add an element to the array without specifying the key
  • $array[] = "new element";
  • In this case PHP will compute the key as 1 greater than the last numeric key
  • The key must be either Integers, or Strings
  • The gettype($var_name) function returns the type of a variable
  • The var_dump($var_name) function dumps all the details of a variable
  • The is_array($var_name) function will return a true if the specified variable is an array
  • We can find out the number of elements in an array, by using the count() function

Activity 6:

For the sixth activity we had to recreate the simple shopping cart using classes and objects. Here is the GIT commit for the activity.

My main learnings in this activity are:

• PHP 5 onwards supports Object Oriented programming
• We can create a class thus:
  • class ClassName {}
  • Need to find out if classes can be public, private, etc
  • Classes support public, private, and protected variables as expected. Need to find out, what is the default.
  • The class constructor has to be a function named __construct()
  • An object of a class is created using the new keyword.
  • Objects have access to the $this variable which will refer to the calling object. In most cases it is the object to which the function belongs, but in certain cases, it could also mean the object which calls the function. If the function is called statically, then $this will not be set.
  • Members of an object are accessed like $obj->member_name

Permalink | Leave a comment  »

The first activity for this week is to create a test suite which will allow us to run all our unit tests together. JUnit 4.0 has an annotation @RunWith which let's us define a class in which we can declare all the test suites which willbe run when we run that test class.

I ceated a simple example for the two test cases which we have.

package practice;

import org.junit.runner.RunWith;
import org.junit.runners.Suite;

@RunWith(Suite.class)
@Suite.SuiteClasses(
        {ComplexMoneyTest.class,
         MoneyTest.class}
)
public class AllTests {
   
}

Permalink | Leave a comment  »

Activity 2 for week 1 is to create a simple HTML page which contains a Javascript snippet which would pop up a 'Hello World' alert.

Permalink | Leave a comment  »

This is for activity 2 of the Test Driven Development with Junit 4.0 course.

Permalink | Leave a comment  »

I have enrolled in an online Study Group on Test Driven Development with JUnit 4.0 on diycomputerscience.com

The first homework activity is to write a unit test for a Money class. See activity 1 on the course page for week 1.

I recorded my desktop as I did the homework...

Permalink | Leave a comment  »

The first video to watch for week 1 is this video from Google HTML/CSS/Javascript from the ground up. My notes follow (along with the timeline in the video):

00:00 Introduction

Javascript helps make our webpages interactive. Things like validating forms, drag & drop, hiding and showing elements, changing the color of certain elements and so on.

01:13 Getting Javascript into your webpage
There are various ways by which we can include Javascript in our web pages.

• Inline - though this is a bad idea
• Embedded Javascript <SCRIPT> tag
• Including a reference to a Javascript source file

The following code is an example of inline Javascript (someFunc() is a Javascript function probably defined elsewhere in the HTML file):

<div onmouseover="someFunc()">

We should avoid such inline usage of Javascript because it mixed presentation and logic... which is always a bad idea from a maintenance perspective.

A better way is to embed all your Javascript in <SCRIPT> </SCRIPT> tags, and then have an init function at the end of the page which adds event listeners, which in turn call certain functions when the event listener is invoked. We have not discussed event listeners, so I will not provide an example here.

The third way of including Javascript is to reference an external file which contains all the Javascript functions. In the line below, we include JQuery's external file containing it's Javascript code.

<script type="text/javascript" language="javascript" src="/public/javascripts/jquery-1.4.2.min.js"></script>

Out of all the above ways, the third is the most preferable way of including Javascript in your web page.

03:10 What can we do with Javascript

Now that we know how to include Javascript in an HTML page, the next question that comes to mind, is what can we do with Javascript?
Many people confuse Javascript for Java, so it is wise to remember that Javascript != Java. Even though Javascript is not Java, it has all the basic features of programming.

04:04 Basic syntax

var foo = 7; //valriables
var baz = 4 + (3 * 2) //operators
var baz = 'a string'; //Strings
var arr = [1,2,3]; //arrays
var f = function(x, y) { //functions
    return x * y;
}
if(baz) {} //conditionals
while(i < 4) {} //while loop
for(var i=0; i<10; i++) {} //for loop

JavaScript is an object oriented programming language... objects can contain properties and functions (called methods). They are good at helping us organize our code.

05:42 How does Javascript interact with web pages

We said earlier that Javascript interacts with web pages. It does so through the DOM (Document Object Model). It (DOM) represents the HTML document as a tree of objects, such that we can manipulate these objects with Javascript code.

HTML elements -> node object (in the DOM)
Attributes of HTML elements -> property of the node object

Here is a blog post which shows the Javascript objects which represent the DOM.

In Javascript, the DOM is represented as a tree of Javascript objects. These objects expose properties to us and we can manipulate those properties to change the look and feel of the web page.         

To manipulate the elements, we first need to obtain a reference to them. We can get a reference either using the id of the element, or it's tag name. Let's use the following HTML as an example:

<div id="about">
   <p id="first"></a><p id="second"></a>
</div>

document.getElementById('about'); //get the node object of an element which has a specific id
document.getElementByTagName('p'); //will return all <p> nodes
//we can even chain these
document.getElementById('about').getElementsByTagName('p');

Javascript by itself gives us just these two methods of selecting a DOM node. However, it would be wonderful if we could access elements by their CSS classname, or in a way that CSS selectors do. Well it seems, we cannot do this directly in Javascript, but we can use 3rd party libraries, like JQuery, or one of many other libraries to do it. Some such libraries are listed at http://getelementsby.com

Once we have a reference to a DOM element, we can access those elements to which our element has a pointer to. A DOM element has pointers to it's parent, children, and siblings:

p.parentNode
p.childNodes //array
p.firstChild
p.lastChild
p.previousSibling
p.nextSibling

Something we should be aware of is that a browser parses the HTML page from top to bottom, and parses (and if possible executes) the Javascript as it encounters it.

10:56 What can we do with DOM elements
       
We can attach listeners to DOM events which are generated on DOM elements, so we can do something special when a user interacts with that element.

Some events:

• click
• mouseover
• mouseout
• mousedown
• mouseup
• blur
• focus
• load

Unfortunately, the way in which we attach listeners is different for IE and other browsers.

On IE we should use:
selectedElement.attachEvent('onclick', handlingFunction); //IE

and on all other browsers, we should use:
selectedElement.addEventListener('click', handlingFunction, false); //All other browsers

So how do we know which to use?
Bad Idea: Javascript will allow us to check which browser is being used, and based on that we can decode which function to call.
Good Idea: Use object detection ... check if the object has a certain property

if(selectedElement,attachEvent) {
  selectedElement.attachEvent('onclick', handlingFunction); //IE
} else {
  selectedElement.addEventListener('click', handlingFunction, false); //All other browsers
}
       
13:41 What can we do with the events after attaching listeners

Change the look of your page, change CSS styles, add elements, remore elements... REVIEW
Don't mix presentation and behaviour... manipulate class names of elements... be careful and don't remove existing classes of elements...

16:30 Default events

preventDefault() function allows us to prevent the browser from performing the default behavior.

Permalink | Leave a comment  »

I signed up for participation in the Introduction To Javascript (for programmers) course on diycomputerscience.com

In week 1, we are supposed to watch a video which explains the basic capabilities of Javascript in about 17 minutes, and then do 2 learning activities. The first week seems like a relatively low pressure week.

I will be blogging my notes for every video on this blog, and will also publish assignments and activities here.

Permalink | Leave a comment  »

Permalink | Leave a comment  »

Click here to see the solution in full screen

Permalink | Leave a comment  »

Permalink | Leave a comment  »

Changing attributes of dom elements [00:00]

if(my_image.complete) {

  my_image.src = srcurl;

}

recommended

if(my_image.getAttribute("complete")) {

  my_image.setAttribute("src", srcurl);

}

Getting and changing CSS properties [02:40]

node.className = newCssClass

node.style.styleName = newStyle

To see the current computed style of an object

node.currentStyle.styleName - only IE

document.defaultView.getComputedStyle(node,"").getPropertyValue(styleName) - not on IE

Creating & removing elements [6:00]

document.createElement(tagName)

document.createTextNode(text)

node.cloneNode()

node.cloneNode(true)

All these methods create a node but we still have to insert it into the DOM.

node.appendChild(new);

node.insertBefore(new, sibling);

node.replaceChild(new, old);

old.parentNode.replaceChild(new, old);

To remove elements

node.removeChild(old);

old.parentNode.removeChild(old);

Be sure to remove all event handlers which may have been set on a node before deleting the node.

innerHTML even though not a standard, is still supported by all modern browsers.

Browser event model [12:02]

Lot's of different types of events. For example there are mouse events where the targer is the topmost layer below the cursor.

Adding event handlers:

node["on" + type] = f;

IE: node.attachEvent("on"+type, f);

W3C: node.addEventListener(type, f, false); //false indicates the bubbling event model

When the event handler function is called, it is passed an optional value, which is the event. However, in IE the event must be obtained from the global event object.

function myEventHandler(e) {

  e = e||event;

  var target = e.target || e.srcElement;

  //...

Event dispatching: trickling or bubbling

}

Why do we want to use either trickling or bubbling. Why not just give the event to the node in question.

We have to explicitly stop propogating by (do both or use a platform library)

e.cancelBubble = true;

if(e.stopPropagation) {

  e.stopPropagation();

}

After the bubbling the browser will do what it would do next, like giving focus to a form element, or submitting a url, etc. To prevent the browser from doing the that, then we can do the following (do all)

e.returnValue = false;

if(e.preventDefault()) {

  e.preventDefault();

}

return false;

Permalink | Leave a comment  »

Here are the assignments for week 4 of Javascript 101.

Permalink | Leave a comment  »

Permalink | Leave a comment  »

The 'document' object is the root object of the DOM, it has a single child node which is the HTML node. 

Every object has pointers to it's child nodes(childNodes[i], firstChild, lastChild), parent node (parentNode), and siblings (nextSibling, previousSibling).

The nodeName property of the node tells us the type of the node. So the nodeName for the HTML node will be "HTML". The nodeName for a text node is "#text", and for the document node is "#document".

document.documentElement refers to the HTML node

To directly access an object in the DOM by it's id, we can use 

document.getElementById(id);

We can also get objects by tag name. This will be useful if for instance we want to get all paragraph objects. This method can also be called on a specific node, to return all elements within that node.

document.getElementsByTagName("p");

We can change the value of a text node by setting the new value to it's nodeValue property. 

We can even change the values of node attributes.

node.setAttribute("align", newval);

We can even insert elements. First we must create an element and then insert it in the right place.

var x = document.createElement("HR"); document.getElementById('inserthere').appendChild(x);

We can even remove nodes. A node has to be removed through it's parent node.

var node = document.getElementById("inserthere"); node.parentNode.removeChild(node);

Document elements often have attributes. One such attribute 'id' is used to uniquely identify an element in a tree of elements. Earlier the 'name' element could also be used for the same purpose, but this is no longer true. The name element's true purpose is to be used in forms to represent values of various form elements. It can also be used to give names to windows, and frames.

node.className is the property which we can use to access the class attribute of a node in the HTML DOM.

Permalink | Leave a comment  »

Permalink | Leave a comment  »

2. Functions and variables share the same namespace. What does this mean and what important implication does this have?

In Javascript, functions and variables are all created in the same namespace. What this means is they could collide with one another. I would like to illustrate this concept with a few examples. In the examples below, the webpage contains a button, which when clicked evaluates the value of the variable 'f' and prints the result in a span tag in the webpage.

The image below shows that we only have a variable f which holds the number 3. This is what gets printed when we click the button.

 

The image below shows that we only have a function f. When we click the button, the body if the function is printed.

The image below shows that we have both a function f and a variable f. However, when we click the button, the value of the variable is printed. We will get the same result even if the order of the function and the variable holding the number are reversed. I am not sure if we should depend on the result, because it may also be a browser thing. This code was run on Firefox, and running it on another browser may yield a different result. However, it does point to the fact that we have to be careful and make sure that function names do not collide with variable names.

Permalink | Leave a comment  »

Permalink | Leave a comment  »

Permalink | Leave a comment  »

I finished reading the chapter in Arrays form Eloquent javascript. My notes:

• arrays have methods (concat, join, push, pop, slice, sort, splice)
• Deleting members from an array is tricky business, because they can leave a hold. Use splice() after deleting members of an array.
• Array inherits from object, indexes converted into strings, so a regular array is also an associative array
• Arrays have a length member which is 1 more than the highest integer subscript.
• Array length does not need to be declared... because it does not matter
• Do not use 'for in' with arrays... why?
• Array literals

          var myArr = [100, 200, 5000];
          also myList[1000] = "something";

• There are several ways of creating an array, [] is the most preferred
• Arrays get linked to Array.prototype?
• How do we determine if an object is an array?

          value.constructor == Array
          value instanceof Array
          Neither of these work if the val came from another frame...

• Do not use an Array as a prototype because the resulting object will not be an array. Instead either augment one particicular array object, or augment Array.prototype

Permalink | Leave a comment  »

• Objects can contain data and methods, and objects can inherit from other objects.
• JS objects are a collection of name value pairs, where names are strings (or just names), and the value can be any expression, or even an object literal.
• We can use the dot . notation as well as the [] notation to access members. Reserved words can be accessed only with the [] notation, and they have to be strings.
• We can also use maker functions which take params and return an object
• Nested objects are also possible with object literals as well as maker functions.
• The last property in the object cannot have a trailing comma
• The video says that an Exception object must have three properties
• We can add functions or properties to any object... just augment the object with what is desired
• An object can inherit from any other object. Every object has a link to another object (at the top of the chain is Object.prototype)

         new Object()
         var newObj = object(existingObj);
         var newObj = {} - This is preferred

         Similarly Exceptions can also be created in multiple ways:

        throw new Error(reason);

        throw {

           name: exceptionName,

           message: reason

        };

• Both objects can contain the same property...
• In JS new objects are made from similar objects and then customized...(prototypal inheritance)
• What happens to the new object if the old object is set to undefined?  The link is not broken because the variable is set to undefined and not the object... but the old object can be changed... in which case we cannot access that property... 
• Just like properties can be augmented, properties can be also deleted

          delete myObj[name]
          delete myObj.name

• Circular linkages? Will not happen.
• JS has Garbage collection.
• No equals() method for logical equality, only ==, or === for references
• Objects are always passed by reference
• Objects as well as prototypes can be augmented
• Object.prototype is the object which is the last in the linkage (similar to Java's Object class)
• Can we create our own something.prototype? which holds all the blog posts you have
• In functions, we can simulate named parameters by using a single object literal instead of n parameters to a function.
• Objects are always passed by reference and never by value.
• JS does not have the notion of logical equality.

Permalink | Leave a comment  »