1. Internet Applications Spring 2008

2. Review Last week –Usability & HCI –Guest Lecturer

3. 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/

4. Webservers

5. HTML Hypertext Markup Language HTML 1.0 1992 – Tim Berners Lee HTML 4.0 – 1999 –CSS XHTML 1.0 – 2002XHTML 1.0 –Tight integration with JavaScript, DOM. XHTML 2.0 – 2002, 2006, 2008XHTML 2.0 –Not entirely backwards compatible –Xforms, XML DOM, XML Events

6. Semantic html (xhtml) http://semantichtml.org/home/

7. DOM

8. Elements Semantics & structure Design & interactivity Decision making CSS PHP PERL RUBY RDBMS XML XHTML XSL SQL AJAX JavaScript

9. HTML Document

10. XHTML Syntax All elements must be closed properly – Elements must be properly nested – Attribute values must be quoted – Elements names are in lower case Documents must be well-formed

11. Tags, elements, attributes Tag / element = –Consists of a name inside brackets <> Attributes –Properties of the elements included within the <> such as –Universal attributes class, id

12. Interesting Elements

13. Forms – Email Address: –

14. Programming Definitions Concepts A programming framework

15. Definitions Programming Language “A formal language used to write instructions that can be translated into machine language and then executed by a computer.” (definitions)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

16. 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 pseudocodeflowcharts Code the program Create variables, routines, functions Compile/run the program Test, verify Release

17. 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

18. 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”

19. 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:

20. PHP Comparison Operators http://www.w3schools.com/php/php_operators.asp

21. PHP Flow Control examples

22. 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

23. Variables Text –Strings Numbers –Integers (whole numbers) –Floating point – (decimal numbers) Boolean –True/False

24. Variables – single value Scalars – Single value variables –Strings - $username = “mitcheet” –Numbers $cost = 55.00 –Boolean $ready = True

25. 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)

26. PHP Variable Operators http://www.w3schools.com/php/php_operators.asp

27. 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.

28. 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

29. 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! ”; } for() { }Control structure $i = 1Variable declaration $i < 100Limit declaration $i++Increment declaration echo “”;operational statement

30. 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

31. 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?

32. Functions Definition –“A sequence of instructions for performing a specific task” (freedictionary)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

33. 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 }

34. 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

35. Object-oriented programming Definition History –Gained popularity in 1990s –Most languages have OO features PHP, Perl, Ruby....... Familiar examples The Document Object model

36. 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/

37. 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

38. 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)

39. 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.

40. 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

41. Modeling Classes Class diagram –Helps conceptualize attributes and methods Class name Attributes –idNumber –lastName –FirstName Methods –setData() –calcPay() –showData()

42. 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

43. 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

44. 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; ?>

45. 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”

46. Pseudo code Input/output –Input, Read, Display Iteration –Repeat Until, Dowhile /end dowhile, for/end for Decision –If then 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)

47. Error Handling http://users.evtek.fi/~jaanah/IntroC/DBee ch/3gl_more.htm#start

48. flowcharts http://users.evtek.fi/~jaanah/IntroC/DBee ch/3gl_flow.htm#start

49. Coding Translate your pseodocode

50. 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

51. Language elements (logic) Elements of program logic –Program must follow a sequence of instructions that create a logical process.

52. 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

53. Next week Technology Topics HTML/Webservers