Internet Applications Spring 2008. Review Last week –Usability & HCI –Guest Lecturer.

Internet Applications

Spring 2008

Review

• Last week– Usability & HCI– Guest Lecturer

This week

• Tech-topic presentations

• Introduction to programming

• HTML / Webservers

• http://www.techcrunch.com/2008/02/16/poor-people-use-yahoo-those-better-off-use-google/

Webservers

HTML

• Hypertext Markup Language• HTML 1.0 1992 – Tim Berners Lee• HTML 4.0 – 1999

– CSS

• XHTML 1.0 – 2002– Tight integration with JavaScript, DOM.

• XHTML 2.0 – 2002, 2006, 2008– Not entirely backwards compatible– Xforms, XML DOM, XML Events

Semantic html (xhtml)

• http://semantichtml.org/home/

Elements

Semantics & structure

Design & interactivityDecision making

CSS

PHP

PERL

RUBY

RDBMS

XMLXHTML

XSLSQL

AJAX

JavaScript

HTML Document

• <html>

• <head></head>

• <body>

• </body>

• </html>

XHTML Syntax

• All elements must be closed properly– <html></html>– <html/>

• Elements must be properly nested– <ul><li></li></ul>

• Attribute values must be quoted– <img src=“/home/image.jpg”/>

• Elements names are in lower case• Documents must be well-formed

Tags, elements, attributes

• Tag / element = – Consists of a name inside brackets <>

• Attributes– Properties of the elements included within

the <> such as <img src=“” alt=“”/>– Universal attributes

• class, id

Interesting Elements

• <h1><h2/></h3><h4>• <p>• <ul><li></li></ul>• <ol><li></li><ol>• <dl><dt><dd><dl>• <div></div>• <span></span>• <br/>• <a href=“”></a>• <img alt=“” src=“”>

Forms

• <form action=“submit.php” method=“post”>– <fieldset>

• <label for=“email”>Email Address:</label>• <input id=“email” name=“email” class=“text”

type=“text”/>

– </fieldset>

• </form>

Programming

• Definitions

• Concepts

• A programming framework

Definitions

• Programming Language• “A formal language used to write instructions that can be

translated into machine language and then executed by a computer.” (definitions)

• Scripting Language• Run-time (does not require compilation)• Restricted context (requires a specific environment)• Functional / Object oriented • Definitions

• Compiler / Interpreter• A program that builds and executes a program.

Compilers create a self-executable file, interpreters read a text script at run-time

The programming process

• Analyze the problem• What do you want your program to do?• What are your users expecting, what data do you have?

• Plan program flow/logic • What steps need to occur, in what order?• Useful tools include Step-Form, flowcharts, and

pseudocode

• Code the program• Create variables, routines, functions

• Compile/run the program• Test, verify• Release

Algorithms

• “An effective procedure for solving a problem in a finite number of steps.”

• Sample Algorithm for an email form (Step Form)– Begin

• If form data is present then continue processing– Get data from form (Subject, note, etc)– If the subject doesn’t contain bad stuff then continue

processing» Write subject, note to email function» Send email» If Email sent successfully then tell user that it did,

otherwise output the error code

– End

Algorithm elements

• Processes / Sequences• Actions are ordered according to need

• Decision making / Selection• If...Then...Else

– If today is Friday then go home early– If username = mitcheet then allow access

• Repetition / Iteration / Looping• While

– While the database returns data, print it out

• Foreach– For Each piece of data returned, write it to a file

• Variables• Placeholders for information to be used by program• Often “initialized” with specific values (such as 0”

Decision making

• Single-Alternative / unary outcome– If then

• Dual-Alternative / binary outcome– If then else

• Multi-Alternative /xary outcome– If then elsif elsif elsif– Switch case statements

• Switch case1: case2: default:

PHP Comparison Operators

http://www.w3schools.com/php/php_operators.asp

PHP Flow Control examples

Nesting

• Use a mix of flow-control and decision making functions to create complex processes

• If -> then -> else

• Switch -> case -> default

• For -> next

• Do -> while

Variables

• Text – Strings

• Numbers– Integers (whole numbers)– Floating point – (decimal numbers)

• Boolean– True/False

Variables – single value

• Scalars – Single value variables– Strings - $username = “mitcheet”– Numbers $cost = 55.00– Boolean $ready = True

Variables – multiple values

• Arrays – Multi-value variables – Grouped in numerical order

• $email[1] = “[email protected]”• $email[2] = “[email protected]”

– Grouped with text• $email[1][“username”] = “[email protected]”• $email[1][“realName”] = “Erik Mitchell”

– General syntax• $email = array ( key=>value, key=>value)• Arrays can be nested (think hierarchy)

PHP Variable Operators

http://www.w3schools.com/php/php_operators.asp

Variable scope

• Depending on where you initialize a variable, impacts what functions can use it– A variable initialized at the beginning of

your file is “global”– A variable initiialized whitnin a fucntion is

limited to the function.

Looping

• Definition• Loop structures allow re-execution of instructions with

multiple sets of data

• Examples• Writing records from a database query onto a webpage• Calculating cost, discounts, shipping on items in a

shopping cart• Comparing values to make decisions

• Benefits• declare logic and operational statements once & re-use• Loops are the building blocks of structured programming• Use a ‘main’ loop to control the program

Loop structures

• Components• Loop control variable

– the variable that keeps changing ($i for example)

• Sentinel value– the value which signals the end of the loop

• Loop control structures– Do while, While, for, foreach

• Examplefor($i=1; $i<=100; $i++) {

echo “hello world! <br/>”;

}

for() { } Control structure$i = 1 Variable declaration$i < 100 Limit declaration$i++ Increment declarationecho “”; operational statement

Creating an Algorithm

• Investigate– Identify a specific process

• (sending email)– Identify the major decisions

• (presence of data, appropriateness of data)– Identify the loops

• What needs to happen several times?– Identify variables

• Lay out the algorithm– Design a sequence of steps incorporating the decisions from

step 1. Make changes as necessary• Refine algorithm

– Implement changes noticed during run-through– Group processes, variables

Class Exercise

• Create a step-form program that will count the number of words on a page of text:– How does your program flow? What does

your algorithm do?– What elements of flow control would you

use?– How would you store data?– What types of functions would you need

your program to do?

Functions

• Definition– “A sequence of instructions for performing a

specific task” (freedictionary)• Benefits

– Modularization/Abstraction– Code re-use– Variable management (global, local)– Easier to troubleshoot and maintain

• Key concepts– Global variables vs local variables– Parameters– Returned values

PHP Functions

• Examples– Phpinfo(), for(), foreach(), echo.......

• Contents– Name, Parameters, operations, return values

function myFunctionName (parameters)

{

parameters;

operations;

return variables;

}

Declaration

{

Parameters passed to functionOperations (calculate, lookup, etc)Return values to rest of program

}

Programming approaches

• Logical/structural programming• Stream of consciousness• Starts at line 1

• Procedural programming• Uses functions, sub-functions, subroutines• Encapsulation, modularization

• Object-oriented programming• Further encapsulation• Uses concepts of inheritance, modularity

Object-oriented programming

• Definition

• History– Gained popularity in 1990s– Most languages have OO features

• PHP, Perl, Ruby.......

• Familiar examples• The Document Object model

The Door metaphor

• Methods• Open• Close

• Interface• The doorknob

• Inheritance• What does this door do

that all other doors do?

• Encapsulation• Hinges, knob, lock

http://flickr.com/photos/backnext/1413662719/

Object-oriented overview

– Classes– A category of things. Defines characteristics and

methods of related objects

– Objects– A specific item that belongs to a class, an “instance”

of a class

– Methods– Inheritance– Polymorphism

Object-oriented overview

– Classes– A category of things. Defines characteristics and methods

of related objects

– Objects– A specific item that belongs to a class, an “instance” of a

class

– Is-a relationships & multiple hierarchies• myChippedSilsMug is an example of the class Mugs

– Classes include• A name• Data (often)• Methods (often)

Object-oriented advantages

• Object reuse, abstraction• Saves development time, effort• Modularity• Method overloading, polymorphism use

reasonable easy to remember names for methods

• Polymorphism – same operation to be carried out differently depending on context

• Method overloading – different methods exist with the same name but different argument lists.

Classes example

• Class name: employee– Class data:

• idNumber, lastName, firstName, jobName, weeklySalary

• These would be ‘variables’ in our procedural environment, in OOP they are attributes.

– Class methods:• setData(), calculatePay(), findJob(),

showEmployeeData()......• Methods are comparable to functions in a

procedural environment

Modeling Classes

• Class diagram– Helps conceptualize

attributes and methods

•Class name

•Attributes–idNumber–lastName–FirstName

•Methods–setData()–calcPay()–showData()

Modeling classes - pseudocode

Class bookNum bookIdChar titleChar authorChar ISBNChar lengthChar pictureLocation

getBookCoverArt(char identifier)ISBN = identifierpictureLocation = amazonPictureAPI(ISBN)return

findBookCost(char identifier)ISBN = identifierbookCost = amazonCostAPI(ISBN)

Return

showBookData()print title, author, pictureLocation

return

Class attributes

• Classes:– Inherits attributes, methods

• Superclass / subclass• Parent / child

– Can Override default values• A child does not inherit every feature of the

parent

– Can be concrete / abstract• Concrete classes have objects• Abstract classes only have child classes

Creating Objects• Instantiation

– Creating objects that will inherit traits of classes• Php example

<?php//Create a class

class book {var $bookId;var $bookTitle;

}//Create an Object$mybook = new book();$mybook->bookTitle = "Gone with the Wind";$mybook->bookid = "54";echo $mybook->bookTitle." ".$mybook->bookId;

?>

Class features

• Polymorphism– Classes that do different things

• Method overloading– When different methods exist with the same name

but different argumnet lists – “when two objects of different classes can su ethe same method name you are uing polymorphism, when you create ac hiild class that contains a method with teh same nwame but idfffent function you are overloading”

Pseudo code• Input/output

– Input, Read, Display

• Iteration– Repeat Until, Dowhile /end dowhile, for/end for

• Decision– If <condition> then <statement> else– If <> then <> elsif <> elsif <> endif

• Processing– Add(+), subtract(-), compute, compare (<,=,>), set

• Subroutines (functions/sub-functions)– Use to define sub processes:

• EMAILTHIS: – Input email, subject, note– Send email– Set send result to output variable X– return X

• Include in your pseudo code with a call statement– Call EMAILTHIS (email, subject, note)

Error Handling

• http://users.evtek.fi/~jaanah/IntroC/DBeech/3gl_more.htm#start

flowcharts

• http://users.evtek.fi/~jaanah/IntroC/DBeech/3gl_flow.htm#start

Coding

• Translate your pseodocode

Language elements (Syntax)

• Syntax – grammar, order, structure of program– PHP syntax example

<? PHPFunction () { stuff }$variablename;End of Line markers (;)//comments

?>

– Syntax has to be perfect!– PHP is case specific

Language elements (logic)

• Elements of program logic– Program must follow a sequence of

instructions that create a logical process.

Group discussion

• Rough out an interface that does: what?Have them as a class define an

application

• Have them break into groups,– Define the interface, sketch it out– Define data model– Define one key task

Next week

• Technology Topics HTML/Webservers

Internet Applications Spring 2008. Review Last week –Usability & HCI –Guest Lecturer.

Documents

Transcript of Internet Applications Spring 2008. Review Last week –Usability & HCI –Guest Lecturer.