Internet Applications Spring 2008
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
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
Related Documents
