Introduction To HTML and PHP

Management of Information Systems
Introduction to HTML and PHP

27/11/2013
M.Sc. Sebastian Wagner http://www.is.uni-freiburg.de/ Winter Term 2013/2014
Tutorials We have up to 600 Students (the number has doubled compared to last year!). We offer 19 tutorials per week with 8 tutors. Up to 80% of all students received one of their priorities. Two computer pools are need, 2114 and -1001b (this pool is in the cellar of the KG2 building and not in the KG1 building). Registrations for the tutorials will no longer be accepted! It is not allowed to go to a different tutorial for any reason. The only chances to get another date is You find a student who is willing to swap courses. Places become available in the course of the semester, because registered students didnt take the tutorial.
M.Sc. Sebastian Wagner, Introduction to HTML and PHP 2
Exercise Sheets (Tutorial) Students are free to solve exercise sheets in the course of the semester. Evaluation Students are able to collect points for each exercise. 10 points 1 bonus point for the final exam. 5 exercise sheets with 100 points in total. Groups of 3-5 students are allowed. We recommend you to solve the exercise sheets even if you are not able to take the tutorials, otherwise it will be difficult to pass the exam. You can find all materials and exercise sheets online. First submission will be on 13.12.2013 (very likely).
M.Sc. Sebastian Wagner,
About this Lecture
Parts of this lecture are not in the book.
Content will be practiced later today in the exercise session.

Use the slides from this lecture and the exercises to prepare for the programming part of the exam. You will get additional exercises on ILIAS in the course of this semester. You will need to practice these for the exam.
Learning Objectives
Describe the principal methodologies for modeling and designing information systems. Learn and understand the basic structure of an HTML document. Learn how to use PHP in combination with HTML web pages. Understand the basic programming structures. Visualize programming routines.
What is HTML?
HTML stands for Hyper Text Markup Language. A markup language consists of a set of markup tags. A HTML document contains different tags surrounded by angle brackets and plain text. Example of an HTML page structure:
<!DOCTYPE html> <html> <head> <title>Example-Page</title> </head> <body> <h1>This is my first web page</h1> </body> </html>
HTML documents are also known as web pages.

HTML Tags A few important HTML tags and some of their attributes:
<table></table> <tr></tr> <td></td> colspan=2 rowspan=2 align= <div></div> <span></span> <br /> <form></form> action=URL method= <input /> type= Creates a table Creates a line in a table Creates a cell in a table Sets the column span to two Sets the row span to two Alignment: left, right, center Defines a generic block for e.g. text Defines a generic field in a block Line break Defines a form Destination URL of the form Method of transfer GET or POST Input field Type: Text, Hidden, Button, Submit, Reset,
HTML Demonstration
First, let us have a look at any web page on the internet. Open web browser e.g. Firefox Go to any web page Press right click Select Seitenquelltext anzeigen Look at HTML tags and structure Second, let us create our own web page.
Cascading Style Sheet (CSS) CSS is used to style HTML elements. Some CSS-Attribute are:
background font-family font-size color border padding border-collapse Background (color) Font (e.g. Arial) Font size Color of the element Border Padding of the text in a cell to the cell edge Determines whether frame of adjacent elements collapse or separate
Note: For individual tags CSS-attributes can also be defined within the tag using the HTML attribute style=. Example: <p
style="color:red;font-size:24px;">This is a paragraph.</p>
HTML Closing Remarks
This are almost all information about HTML you need to solve the exercises. You have to write your own HTML web pages in the course of the Tutorates. Therefore, it is essential to understand the general syntax. Subsequently we will continue with the PHP introduction.
PHP code will be embedded in HTML code.
10
Programming in PHP
Why PHP? PHP is not a standalone programming language, but rather a script language. PHP scripts are embedded in other structures (mostly HTML code) to offer additional dynamic content.
We will, however, only look at very basic concepts.

PHP offers easy ways to communicate with databases.
11
PHP Variables Declaration rules: Starts with the $ symbol, followed by the name of the variable Name must begin with a letter or the underline character _ Name can only contain alpha-numeric characters and underlines (A-z, 0-9, and _) PHP variables contains values ($a=1) or expressions ($a=$b+$c). Examples: $number = 5 $text = Hallo World! $result = 2,7
(integer) (string) (double)
Variable names are case sensitive ($a and $A are two different variables
PHP Operators
PHP Arithmetic Operators $a+$b, $a-$b, $a*$b, $a/$b, $a%$b (11%5=1 teilen mit Rest) -$a negates the content of variable $a $a . $b concatenates the variable $a with $b PHP Comparison Operators $a == $b ($a is equal to $b) $a != $b ($a is different from $b) $a > $b ($a is greater than $b) $a >= $b ($a is greater or equal to $b) $a < $b ($a is less than $b) $a <= $b ($a is less or eqal to $b)
13
PHP Operators (cond.)
PHP Logical Operators AND: $a and $b OR: $a or $b NOT: !$a Example: $a = 6 $b = 2 ($a/2 == $b or $a*$b >= $a*2) Is this statement true? 3 == 2 or 12 >= 12 -> The statement is true!
14
Built-in Functions
There are more than 700 built-in functions.
Some of these functions are e.g.: echo String returns one or more strings. strlen() returns the length on a string. log() returns the natural logarithm. sin() returns the sinus of the respective input parameter. abs() returns the absolute value.
Example: $a = Test strlen($a) = 4
15
Programming in PHP
PHP scripts are embedded into HTML code with <?php ?> - Tags. Variables are implicitly initialized once they are used and do not require explicit declaration. We will first look at some control structures that are elementary to most programming languages and a method to visualize them.
16
Visualizing a programs structure
Nassi-Shneiderman diagrams (NSD, also called structograms) are graphical representations for structured programming. They allow for a language-independent visualization of a programs structure. On the following slides we will also consider the NSD representation for each control structure. There will be an exercise on NSDs at the end of this lecture.
17
Programming control structures
IF ELSE
Control structure for checking conditions.

if ($a > $b) { echo $a.' is larger than '.$b; } else { echo $a.' is not larger than'.$b; }
True
$a > $b
False
echo $a.' is larger than '.$b;
echo $a.' is not larger than '.$b;
18
IF ELSEIF ELSE
Control structure for checking successive conditions.
if ($a > $b) { echo $a.' is larger than '.$b; } elseif ($a == $b) { echo $a.' is equal to '.$b; } else { echo $a.' is smaller than'.$b; }
True
$a > $b
False $a == $b echo
echo
True echo
False
19
SWITCH CASE
Control structure for checking condition with multiple options.
switch ($language) { case 0: echo 'Hallo!'; break; case 1: echo 'Salut!'; break; case 2: echo 'Ciao!'; break; default: echo 'Hi!'; }
$language 0 echo 1 echo 2 echo Default echo
20
WHILE
Basic loop checks condition first and loops commands as long as condition is met. Increment operator ++, decrement operator --
$i = 0; while ($i <= 10) { echo $i.'<br />'; $i++; }
$i <= 10
echo $i.<br />'; $i++;
21
DO WHILE
Basic loop checks condition after one iteration and loops as long as condition is met.
$i = 11; do { echo $i.'<br />'; $i++; } while ($i <= 10);
echo $i.<br />'; $i++;
$i <= 10
22
FOR
Counting loop checks condition first and loops commands for a fixed number of times. Requires integer inputs.
for ($i=0; $i<=10; $i++) { echo $i.'<br />'; }
$i=0; $i <= 10; $i++
echo $i.<br />'; $i++;
23
Programming in PHP
Most common programming languages look very similar in their basic concepts:
PHP: if (a > b) { while (b < a) { b = a + c; } } else { a = b + c; } Java: if (a > b) { while (b < a) { b = a + c; } } else { a = b + c; } Matlab: if (a > b) while (b < a) b = a + c; end else a = b + c; end
Same for C++, C#, Pascal, VBA,
24
PHP Functions
Functions are essential elements of programming languages. We should give the function a name that reflects its functionality. To add more functionality, functions have special input parameters. To let a function return a value, use the return statement.
Example without return:

function add($a, $b) { $result= $a + $b echo 'The sum of ' . $a . ' and ' .$b. ' is: ' .$result; } add(5, 2) OUTPUT = The sum of 5 and 2 is: 7
Example with return:

function add($a, $b) { $result= $a + $b return $result; } echo add(5, 2) OUTPUT = 7
25
References
http://www.php.net/
http://www.w3schools.com/html/default.asp
http://www.w3schools.com/php/default.asp
26
Exercise 1
What does the program below?

What is the output for $pwd = 1234, $pwd2 = 4321? Draw a Nassi-Shneiderman diagram for the code below.
$pwd = $_POST['password']; $pwd2 = $_POST['password2']; if($pwd != $pwd2) { echo 'You entered two different passwords. Please go back.'; } else { echo 'You were successfully registered!'; }
27
Solution Exercise 1 (Nassi-Shneiderman diagram)
Initialize $pwd and $pwd2 Yes $pwd != $pwd2 No
Output: Different passwords
Output: Registration successful
28
Exercise 2
What calculates the program on the right side? What is the output for $n=-5, $n=1, and $n=10 ? Draw a Nassi-Shneiderman diagram for the right code.
$n = $_POST['zahl'];
if($n < 0) { echo 'Please enter a non-negative number!'; } elseif(($n == 0) OR ($n == 1)) { echo 'The '.$n.'th Fibonacci-element is '.$n; } else { $fibminusone = 1; $fibminustwo = 0; $i = 2; while($i <= $n) { $fib = $fibminusone + $fibminustwo; $fibminustwo = $fibminusone; $fibminusone = $fib; $i++; } echo 'The '.$n.'th Fibonacci-element is '.$fib; }
29
Solution Exercise 2 (Nassi-Shneiderman diagram)

Initialize value Yes Value smaller than 0 No
Output: Enter nonnegative number
Yes
Value is 0 or 1 Define variables for calculation
No
Output: Fibonaccielement equals value
i=0; i<=value, i++

Calculate Fibonacci-element for i
Output: Fibonacci-element
30

Introduction To HTML and PHP

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Introduction To HTML and PHP

Hochgeladen von

Copyright:

Verfügbare Formate

Management of Information Systems

Introduction to HTML and PHP

M.Sc. Sebastian Wagner http://www.is.uni-freiburg.de/ Winter Term 2013/2014

M.Sc. Sebastian Wagner,

Introduction to HTML and PHP

About this Lecture

Parts of this lecture are not in the book.

Content will be practiced later today in the exercise session.

M.Sc. Sebastian Wagner,

Introduction to HTML and PHP

M.Sc. Sebastian Wagner,

Introduction to HTML and PHP

HTML documents are also known as web pages.

M.Sc. Sebastian Wagner,

Introduction to HTML and PHP

M.Sc. Sebastian Wagner,

Introduction to HTML and PHP

M.Sc. Sebastian Wagner,

Introduction to HTML and PHP

HTML Closing Remarks

PHP code will be embedded in HTML code.

M.Sc. Sebastian Wagner,

Introduction to HTML and PHP

We will, however, only look at very basic concepts.

M.Sc. Sebastian Wagner,

Introduction to HTML and PHP

(integer) (string) (double)

M.Sc. Sebastian Wagner,

Introduction to HTML and PHP

PHP Operators (cond.)

M.Sc. Sebastian Wagner,

Introduction to HTML and PHP

There are more than 700 built-in functions.

M.Sc. Sebastian Wagner,

Introduction to HTML and PHP

M.Sc. Sebastian Wagner,

Introduction to HTML and PHP

Visualizing a programs structure

M.Sc. Sebastian Wagner,

Introduction to HTML and PHP

Programming control structures

Control structure for checking conditions.

echo $a.' is larger than '.$b;

echo $a.' is not larger than '.$b;

M.Sc. Sebastian Wagner,

Introduction to HTML and PHP

Programming control structures

Control structure for checking successive conditions.

M.Sc. Sebastian Wagner,

Introduction to HTML and PHP

Programming control structures

Control structure for checking condition with multiple options.

$language 0 echo 1 echo 2 echo Default echo

M.Sc. Sebastian Wagner,

Introduction to HTML and PHP

Programming control structures

echo $i.<br />'; $i++;

M.Sc. Sebastian Wagner,

Introduction to HTML and PHP

Programming control structures

echo $i.<br />'; $i++;

M.Sc. Sebastian Wagner,

Introduction to HTML and PHP