Introduction to HTML and PHP

8/13/2019 Introduction to HTML and PHP

1/30

M.Sc. Sebastian Wagner

http://www.is.uni-frei

burg.de/

Winter Term 2013/2014

Management of InformationSystems

Introduction to HTML and PHP

27/11/2013
http://www.is.uni-freiburg.de/http://www.is.uni-freiburg.de/http://www.is.uni-freiburg.de/


2/30

M.Sc. Sebastian Wagner, Introduction to HTML and PHP

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 thecellar 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, becauseregistered students didnt take the tutorial.

Tutorials

2


3/30


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

Exercise Sheets (Tutorial)

3


4/30


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 thissemester. You will need to practice these for the exam.

About this Lecture

4


5/30


Describe the principal methodologies for modeling and designinginformation 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.

Learning Objectives

5


6/30


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 anglebrackets and plain text.

Example of an HTML page structure:

Example-Page

This is my first web page

HTML documents are also known as web pages.

What is HTML?

6


7/30M.Sc. Sebastian Wagner, Introduction to HTML and PHP

HTML Tags

7

A few important HTML tags and some of their attributes:

Creates a table

Creates a line in a table

Creates a cell in a table

colspan=2 Sets the column span to two

rowspan=2 Sets the row span to two

align= Alignment: left, right, center

Defines a generic block for e.g. text

Defines a generic field in a block

Line break

Defines a form

action=URL Destination URL of the form

method= Method of transfer GET or POST

Input field

type= Type: Text, Hidden, Button, Submit, Reset,



HTML Demonstration

8

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.



CSS is used to style HTML elements.

Some CSS-Attribute are:

background Background (color)

font-family Font (e.g. Arial)

font-size Font sizecolor Color of the element

border Border

padding Padding of the text in a cell to the cell edge

border-collapse Determines whether frame of adjacent elements collapse or separate

Note: For individual tags CSS-attributes can also be defined within thetag using the HTML attribute style=.

Example:

This is a paragraph.

Cascading Style Sheet (CSS)

9



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

HTML Closing Remarks

10



Why PHP?

PHP is not a standalone programming language, but rather a scriptlanguage.

PHP scripts are embedded in other structures (mostly HTML code) tooffer additional dynamic content.

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

PHP offers easy ways to communicate with databases.

Programming in PHP

11



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

$text = Hallo World! (string)

$result = 2,7 (double)

Variable names are case sensitive ($a and $A are two differentvariables

PHP Variables

12



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


14/30


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!

PHP Operators (cond.)

14


15/30


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

Built-in Functions

15


16/30


PHP scripts are embedded into HTML code with - Tags.

Variables are implicitly initialized once they are used and do notrequire explicit declaration.

We will first look at some control structures that are elementary tomost programming languages and a method to visualize them.

Programming in PHP

16


17/30


Nassi-Shneiderman diagrams (NSD, also called structograms) aregraphical representations for structured programming.

They allow for a language-independent visualization of a programsstructure.

On the following slides we will also consider the NSD representationfor each control structure.

There will be an exercise on NSDs at the end of this lecture.

Visualizing a programs structure

17


18/30


IF ELSE

Control structure for checking conditions.

Programming control structures

18

if ($a >$b) {echo $a.' is larger than '.$b;

}

else {

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

}

$a > $bTrue False

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


19/30


IF ELSEIF ELSE

Control structure forchecking successiveconditions.


19

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;

}

$a > $bTrue False

echo

echo echo

$a == $bTrue False


20/30


SWITCH CASE

Control structure forchecking conditionwith multiple options.


20

switch ($language) {

case 0:

echo 'Hallo!';

break;

case 1:

echo 'Salut!';

break;

case 2:

echo 'Ciao!';

break;

default:

echo 'Hi!';

}

$language

0 Default

echo echo

1 2

echo echo


21/30


WHILE

Basic loop checks condition first and loops commands as long ascondition is met.

Increment operator ++, decrement operator --


21

$i = 0;

while ($i


22/30


DO WHILE

Basic loop checks condition after one iteration and loops as long ascondition is met.


22

$i = 11;do {

echo $i.'
';

$i++;

}while ($i


23/30


FOR

Counting loop checks condition first and loops commands for afixed number of times.

Requires integer inputs.


23

for ($i=0; $i


24/30


Most common programming languages look very similar in theirbasic concepts:

Same forC++, C#, Pascal, VBA,

Programming in PHP

24

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


25/30


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.

PHP Functions

25

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


26/30


http://www.php.net/

http://www.w3schools.com/html/default.asp

http://www.w3schools.com/php/default.asp

References

26
http://www.php.net/http://www.php.net/http://www.php.net/http://www.w3schools.com/html/default.asphttp://www.w3schools.com/html/default.asphttp://www.w3schools.com/html/default.asphttp://www.w3schools.com/php/default.asphttp://www.w3schools.com/php/default.asphttp://www.w3schools.com/php/default.asphttp://www.w3schools.com/php/default.asphttp://www.w3schools.com/html/default.asphttp://www.php.net/


27/30


$pwd = $_POST['password'];

$pwd2 = $_POST['password2'];

if($pwd != $pwd2) {

echo 'You entered two different passwords. Please go back.';

}

else {

echo 'You were successfully registered!';

}

Exercise 1

27

What does the program below?

What is the output for $pwd = 1234, $pwd2 = 4321?

Draw a Nassi-Shneiderman diagram for the code below.


28/30


Solution Exercise 1 (Nassi-Shneiderman diagram)

28

$pwd != $pwd2Yes No

Output:Differentpasswords

Output:Registrationsuccessful

Initialize $pwd and $pwd2


29/30


$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


30/30

M S S b ti W I t d ti t HTML d PHP

Solution Exercise 2 (Nassi-Shneiderman diagram)

30

Value smaller than 0Yes No

Output:Enter non-

negativenumber

Output:Fibonacci-element equalsvalue

Define variables for calculation

Value is 0 or 1Yes No

Initialize value

i=0; i

Introduction to HTML and PHP

Documents

Transcript of Introduction to HTML and PHP