1 / 53

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.

ashanti
Download Presentation

Internet Applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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 – 2002 • Tight integration with JavaScript, DOM. • XHTML 2.0 – 2002, 2006, 2008 • Not entirely backwards compatible • Xforms, XML DOM, XML Events

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

  7. DOM

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

  9. HTML Document • <html> • <head></head> • <body> • </body> • </html>

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

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

  12. 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=“”>

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

  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) • 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 pseudocode • 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! <br/>”; } for() { } Control structure $i = 1 Variable declaration $i < 100 Limit 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) • 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

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

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

  48. flowcharts • http://users.evtek.fi/~jaanah/IntroC/DBeech/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

More Related