Internet Applications

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/

DOM

Elements RDBMS XML XHTML SQL XSL PHP JavaScript PERL AJAX CSS RUBY

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] = “mitcheet@unc.edu” • $email[2] = “burrohj@unc.edu” • Grouped with text • $email[1][“username”] = “mitcheet@wfu.edu” • $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 • Example for($i=1; $i<=100; $i++) { echo “hello world! <br/>”; } for() { } Control structure $i = 1 Variable declaration $i < 100 Limit declaration $i++ Increment declaration echo “”; 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 function • Operations (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

Modeling classes - pseudocode Class book Num bookId Char title Char author Char ISBN Char length Char pictureLocation getBookCoverArt(char identifier) ISBN = identifier pictureLocation = amazonPictureAPI(ISBN) return findBookCost(char identifier) ISBN = identifier bookCost = 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 <? PHP Function () { stuff } $variablename; End of Line markers (;) //comments ?> • Syntax has to be perfect! • PHP is case specific

Internet Applications