Tutorial Webpage for

Lecture Cloud- and Web-Technologies

Loading...

Tutorial Webpage for Lecture
Cloud- and Web-Technologies

Home

Welcome to the tutorial page of the Cloud- and Web-Technologies lecture held by Sven Groppe every Summersemester at the University of Lübeck

All tutorials contain the exercise descriptions, all necessary data (like RDF data for running queries or rules on top of them) and example solutions, such that the students have the possibility to compare their solutions.

Tutorials

The following tutorials are available:

Contact

Please use the following email address for any comments and questions:

Semantic Web

Starting own SPARQL Endpoint

Per default the JavaScript-based editor used in the Semantic Web Tutorials accesses a SPARQL endpoint running on the IFIS pool server to process the SPARQL queries or RIF rules on the given data. Alternatively you may start your own SPARQL endpoint. For this purpose, you have to download and extract the files from this link. Then, after you have adapted the paths to use Java 8, you start the SPARQL endpoint with startEndpoint.sh and stop it with stopEndpoint.sh under linux, and configure the JavaScript-based editor to use a SPARQL endpoint at localhost (Click on the gear-wheel and choose localhost at "CHOOSE THE CLIENT'S ENDPOINT:").

General Hints

The exercise descriptions also contain links to the output of the solution. You may have a look at it to compare with the result of your solution to have a hint of its correctness. Furthermore, there are also links to the solutions of the exercises. Please have a look at the solution only after you have finished working on your own solution. Otherwise the learn effect is much less.

Please choose your Semantic Web tutorial from the tabs below:

SPARQL Exercises

You may use the SPARQL 1.0 specification for solving the exercises.

Within the DBPedia the data of the Wikipedia was prepared. The data of DBPedia is freely accessible in large files as well as in small portions. For example, you may download the data of the city Lübeck at the url http://dbpedia.org/data/L%C3%BCbeck.n3. We will use this data in our exercise. Please formulate SPARQL queries to answer the following questions:

Please develop your SPARQL queries for following problems and test your queries in our query evaluator. For this purpose, please press the button 'Start' behind the exercise, which loads the web-frontend of our query evaluator in a new tab.

Exercise 1

Who is born in Lübeck?

Exercise: Start Data Query
Solution: Output In Editor Query

Exercise 2

Who is born and died in Lübeck?

Exercise: Start Data Query
Solution: Output In Editor Query

Exercise 3

Who is born in Lübeck, but did not die in Lübeck?

Exercise: Start Data Query
Solution: Output In Editor Query

Exercise 4

What is nearby Lübeck in the cardinal (N, W, S, E) or intercardinal (NW, SW, SE, NE) directions?

Exercise: Start Data Query
Solution: Output In Editor Query

Exercise 5

Which information contain the word 'Focus'? For this purpose we load the data of the University of Lübeck...

Exercise: Start Data Query
Solution: Output In Editor Query

Exercise 6

What does Lübeck and Berlin have in common? For this purpose the data of Lübeck and Berlin has been put together...

Exercise: Start Data Query
Solution: Output In Editor Query

OWL Exercises

This time the exercises are exceptionally formulated in German as the ontology to be developed deals with the area of the dining hall at e.g. the University of Lübeck.

Diese Übung befasst sich mit der schrittweisen Entwicklung einer Ontologie, die in einer Mensa z.B. unserer Universität Verwendung finden könnte. Dabei werden Klassen für die Zutaten, die Gerichte und deren Klassifikationen genauso entwickelt wie für die Besucher der Mensa. Anhand von Testanfragen kann überprüft werden, in wieweit bestimmte Fakten automatisch hergeleitet werden können.

Exercise 1

Zunächst ist es sinnvoll, eine Klassenhierarchie für Zutaten (von Gerichten) zu entwerfen. Dabei sollen die Zutaten Schweine- und Rinderfleisch, Alkohol und vegetarische sowie vegane Zutaten extra gekennzeichnet werden. Zutaten sollen über einen Namen verfügen. Die Zutat Schweinefleisch soll immer den Namen 'Schweinefleisch' tragen. Analoges gilt für die Zutaten Rinderfleisch und Alkohol. Weiterhin wollen wir Komponenten von Gerichten einführen, die Zutaten oder weitere Komponenten beinhalten können. Ein Beispiel für solch eine Komponente ist Teig. Die Beziehung istEnthaltenIn soll auf Basis der Beziehung beinhaltet eingeführt werden.

Exercise: Start Data Query 1 Query 2 Query 3
Solution: Output 1 Output 2 Output 3 In Editor Ontology

Exercise 2

Bei den Gerichten wollen wir eine Klassifizierung in Alkoholhaltiges Gericht, Fleischhaltiges Gericht mit der Unterteilung bezüglich Schweine- und Rinderfleisch, Vegetarisches Gericht, Veganes Gericht und schonend zubereitetes Gericht. Es soll festgelegt werden, welche Arten von Gerichten sich ausschliessen. Die Art des Gerichtes soll weitestgehend aus den Arten seiner Zutaten geschlussfolgert werden können. Der Preis für das Gericht soll angebbar sein, insbesondere sollen die verschiedenen Preise für Studierende, Hochschulangehörige und Gäste unterscheidbar sein.

Exercise: Start Data Query 1 Query 2 Query 3
Solution: Output 1 Output 2 Output 3 In Editor Ontology

Exercise 3

In diesem abschliessenden Aufgabenteil entwickeln wir eine Hierarchie für die Besucher der Mensa. Diese teilen sich nicht nur in Studierende, Hochschulangehörige und Gäste ein, sondern auch in Veganer und Vegetarier. Es soll eine Beziehung definiert werden, die die gewählten Gerichte mit den Besuchern der Mensa verknüpft, sowie Bedingungen für Veganer und Vegetarier formuliert werden.

Exercise: Start Data Query 1 Query 2 Query 3
Solution: Output 1 Output 2 Output 3 In Editor Ontology

RIF Exercises

You may use the RIF BLD specification for solving the exercises.

Exercise 1

In the first exercise it is your task to extend the tree traversal rules of the lecture to implement a calculator which determines the result of the expression contained in the given tree. The given tree represents the expression (1 + (2-1)) * (20/2).

a)

As intermediate step we recommend that you extend the tree traversal rules of the lecture such that it logs the path from the root node to the current nodes, i.e. one of the results for the given tree will be :innervisited("-" "lr") and another :leafvisited(1 "lrr"), where l denotes the left child and r the right child.

Exercise: Start Ruleset
Solution: Output In Editor Ruleset

b)

Now you can extend your solution of a. in order to implement the functionality of the calculator by calculating the result of a node in the tree based on the already computed results of its children.

Exercise: Start Ruleset
Solution: Output In Editor Ruleset

Exercise 2

In this exercise we want to develop RIF rules for determining all possible paths in a given graph. Furthermore, as each edge has a weight, the RIF rules should compute the total weight of the determined path.

a)

In this exercise we first consider only directed acyclic graphs, i.e. we do not need to consider cycles in the graphs.

Exercise: Start Ruleset
Solution: Output In Editor Ruleset

b)

In this exercise we want to consider general graphs, which may contain also cycles. For this purpose the RIF rules from subexercise a. must be extended to abort if a cycle has been detected.
Hint: You may solve this exercise by using func:intersect to calculate the intersection of lists and func:count to count the elements of a list.

Exercise: Start Ruleset
Solution: Output In Editor Ruleset

Exercise 3

In this exercise we want to develop a RIF variant of the merge sort algorithm.

a)

Develop RIF rules implementing the merge algorithm, the input of which are two sorted lists and the result of which is a sorted list containing the entries of the input lists.

Exercise: Start Ruleset
Solution: Output In Editor Ruleset

b)

Develop RIF rules to split the unsorted input list. The splitting method should be a recursive one by dividing the input list in each recursion step into two equal (±1) sized lists. The splitting process spans a tree of recursion steps. In order to know later which lists must be merged, a numbering scheme should be applied. The input list should be annotated with 1. Its split sublists with 2 and 3. In general the split sublists of a list annotated with i should be annotated with 2*i and 2*i+1. The following figure provides an example.

Exercise: Start Ruleset
Solution: Output In Editor Ruleset

c)

Put all together and write additional 'glue' code for implementing the merge sort algorithm. You may also need to e.g. modify your rules for merging in order to log the number annotated during the split method in subexercise b.

Exercise: Start Ruleset
Solution: Output In Editor Ruleset

Multiplatform

This is the start page for online exercises with the topic of Kotlin.

General Hints

The slides of the lecture are not enough to solve the following exercises. You often have to consider additional information from the internet like those of https://kotlinlang.org/!

Please choose your Kotlin tutorial from the tabs below:

Basic Kotlin Exercises

The slides of the lecture are not enough to solve the following exercises. You often have to consider additional information from the internet like those of https://kotlinlang.org/!

Exercise 1: Kotlin - Using Kotlin features for compact code

Rewrite the code into an equivalent, still readable, but more compact one using the features of Kotlin!

Exercise: Start Code
Solution: Output In Editor Code

Exercise 2: Kotlin - Endrecursive Functions

Transform the following recursive function (for computing the fibonacci numbers) into an equivalent endrecursive function and afterwards in an iterative function!

fun fibonacci(n:Int): Int = 
    if(n<=1) n else fibonacci(n-1) + fibonacci(n-2)

Exercise: Start Code
Solution: Output In Editor Code

Exercise 3: Kotlin - Extension Functions

Develop an extension function to check whether or not a string is a palindrome. A palindrome is a string, which reads the same backward as forward.

A first function should just check simple palindromes like "madam" or "racecar".

A second function should check sentence-length palindromes, where punctuation, lower/uppercase and word dividers do not matter. Examples include "A man, a plan, a canal, Panama!", "Was it a car or a cat I saw?" and "No 'x' in Nixon".

Exercise: Start Code
Solution: Output In Editor Code

Advanced Kotlin Exercises

The slides of the lecture are not enough to solve the following exercises. You often have to consider additional information from the internet like those of https://kotlinlang.org/!

Exercise 1: Kotlin - DSL

Write a Domain Specific Language (DSL) for relational algebra expressions. An example of its usage is

val q4 = query {
    projection("A.a", "D.d") {
        union {
            table("A")
            table("B")
            join {
                table("C")
                table("D")
            }
        }
    }
}
println(q4)
table("A") represents a relational table with name "A". union and join can have two or more operands. projection and query can have exactly one operand. If the number of operands is different, then an exception should be thrown (via: throw Exception("message")). Furthermore, you can specify an arbitrary number of attributes with projection. For an arbitrary number of parameters of a function, please consider this link.In this exercise your task is to develop Kotlin code with which one can specify such relational expressions (without providing code to execute the specified relational expression).

Exercise: Start Code
Solution: Output In Editor Code

Exercise 2: Kotlin - Iterator

Please develop iterators to compute prime numbers. Please develop a) a variant using an iterator generator and b) in another variant an iterator class.

Exercise: Start Code
Solution: Output In Editor Code

Cloud

This is the start page for online exercises with the topic of cloud computing.

General Hints

After starting an exercise, you can have a look at the output of the solution. You may have a look at it to compare with the result of your solution to have a hint of its correctness. Furthermore, there are also tabs to the solutions of the exercises. Please have a look at the solution only after you have finished working on your own solution. Otherwise the learn effect is much less.

Our tutorial system runs the cloud code on our server. For this purpose, you have to authenticate yourself with your IDM account of our university. If you do not have such an account or if our server is currently not available, you can also do the exercises by installing the corresponding cloud software on your computer. Please see our installation instruction for this purpose.

Please choose your cloud tutorial from the tabs below:

Map/Reduce Exercises

The exercises are about realizing solutions to some standard problems in hadoop and its map/reduce framework.

Exercise 1: Map/Reduce - Try out WordCount

Your first task is just to try out the WordCount example...

Exercise: Start Data WordCount.kt
Solution: Output In Editor WordCount.kt

Exercise 2: Map/Reduce - PageRank

Your task is to develop a MapReduce-program for calculating the weights according to the PageRank approach.

The PageRank approach is still used today (besides other criteria) in search engines as basis for the ranking of websites. The input of the PageRank algorithm is a graph, where the (weighted) nodes represent the websites and the weighted edges between the nodes the links between the websites.

The weigths of the edges are after applying the PageRank approach as larger as more nodes (with large weights) are linked to this node. The weight G_i of a node i is calculated from the weights G_j of those nodes M_i, which are linked to the node i (i.e., which edges end in node i). If j (in M_i) is linked to c_j different nodes, then the weight of G_j is proportionally divided between these nodes. Hence one iteration of the PageRank approach can be described by the following formula for the determination of the new weight G_i of a node i:

In the given formula, d is a damping factor and n the total number of nodes.

The PageRank approach is typically processed in a given number of iterations (and sometimes based on converging ranks). In this exercise we compute the ranks of given websites only in one iteration. The input data is given in the form i G_i M_i, where the nodes in M_i are separated by commas.

Example:

Exercise: Start Data StartPageRank.kt
Solution: Output In Editor PageRank.kt

Map/Reduce - Rel. Algebra Exercises

The exercises are mainly about realizing the processing of SPARQL queries in hadoop and its map/reduce framework. For this purpose, we provide the SPARQL queries in the exercises.

Exercise 1: Map/Reduce - Mr. Magic Sets

Your first query contains only one triple pattern and returns the blank node from which all information about Mr. "Magic Sets" is accessible. A corresponding SPARQL query looks like:

PREFIX foaf: <http://xmlns.com/foaf/0.1/>
SELECT *
WHERE { 
        ?person foaf:name "Magic Sets" .
}

Semantic Web: In Editor Output Data Query
Exercise: Start Data Start.kt
Solution: Output In Editor Query1.kt

Exercise 2: Map/Reduce - Information about Mr. Magic Sets

More complex queries need processing a join: Your second query should return all available information about Mr. "Magic Sets". A corresponding SPARQL query looks like:

PREFIX foaf: <http://xmlns.com/foaf/0.1/>
SELECT *
WHERE { 
        ?person foaf:name "Magic Sets" .
        ?person ?p ?o .
}
In this exercise you should spend two parallel jobs for processing each of the triple patterns. One succeeding job should then evaluate the join result.

Semantic Web: In Editor Output Data Query
Exercise: Start Data Start.kt
Solution: Output In Editor Query2.kt

Exercise 3: Map/Reduce - Information about Mr. Magic Sets in an optimized way

In this exercise you should optimize the solution of the previous exercise by only using one job for all - processing of the triple patterns and joining their results. This is a good example to show that many steps can be integrated in one job, but this may need careful design of the mapreduce program.

Semantic Web: In Editor Output Data Query
Exercise: Start Data Start.kt
Solution: Output In Editor Query2Optimized.kt

Hive Exercises

You may use the HiveQL documentation for solving the exercises.

For the first three queries, we provide the corresponding SPARQL queries, which should be transformed into a HiveQL query. From the fourth query on, we provide the query on this webpage only in natural language. Only if you need additional help, you may use the links to show the corresponding SPARQL query. Your task is to develop HiveQL queries working on the provided data.

Exercise 1: Hive QL - Information about Mr. Magic Sets

Your first query should return all available information about Mr. "Magic Sets". A corresponding SPARQL query looks like:

PREFIX foaf: <http://xmlns.com/foaf/0.1/>
SELECT *
WHERE { 
        ?person foaf:name "Magic Sets" .
        ?person ?p ?o .
}

Semantic Web: In Editor Output Data Query
Exercise: Start Data Query
Solution: Output In Editor Query

Exercise 2: Hive QL - Email addresses of all persons

The second query should return information about email addresses of all persons in the given rdf graph. A corresponding SPARQL query looks like:

PREFIX foaf: <http://xmlns.com/foaf/0.1/>
SELECT ?name ?mbox
WHERE {
  ?person foaf:name ?name .
  {
      { ?person foaf:mbox ?mbox } 
      UNION
      { ?person foaf:mbox_sha1sum ?mbox }
  }
}

Semantic Web: In Editor Output Data Query
Exercise: Start Data Query
Solution: Output In Editor Query

Exercise 3: Hive QL - All persons and their depictions if available

The result of the third query should contain all persons in the given rdf graph and their depictions if available. A corresponding SPARQL query looks like:

PREFIX foaf: <http://xmlns.com/foaf/0.1/>
SELECT ?name ?depiction
WHERE { 
        ?person foaf:name ?name .
        OPTIONAL {
            ?person foaf:depiction ?depiction .
        }
}

Semantic Web: In Editor Output Data Query
Exercise: Start Data Query
Solution: Output In Editor Query

Exercise 4: Hive QL - Jo Foo's friends

Develop a query to answer who knows "Joe Foo"? (Who are the friends of "Joe Foo"?)

Semantic Web: In Editor Output Data Query
Exercise: Start Data Query
Solution: Output In Editor Query

Exercise 5: Hive QL - Friends of Jo Foo's friends

Who are the friends of the friends of "Joe Foo"?

Semantic Web: In Editor Output Data Query
Exercise: Start Data Query
Solution: Output In Editor Query

Exercise 6: Hive QL - EMail-addresses of friends of Jo Foo's friends

What are email-addresses of the friends of the friends of "Joe Foo"?

Semantic Web: In Editor Output Data Query
Exercise: Start Data Query
Solution: Output In Editor Query

Exercise 7: Hive QL - Person knowing someone not knowing him/her

Person A knows at least one person B, who does not know A. Develop a query to find such persons A.

Semantic Web: In Editor Output Data Query
Exercise: Start Data Query
Solution: Output In Editor Query

Exercise 8: Hive QL - Having unknown friends

Person A knows at least one person B, who does not know A. Develop a query to find such persons B.

Semantic Web: In Editor Output Data Query
Exercise: Start Data Query
Solution: Output In Editor Query

Pig Exercises

You may use the pig documentation for solving the exercises.

For the first three queries, we provide the corresponding SPARQL queries, which should be transformed into pig script. From the fourth query on, we provide the query on this webpage only in natural language. Only if you need additional help, you may use the links to show the corresponding SPARQL query. Your task is to develop pig scripts working on the provided data. Note that the queries are the same as in the Hive tutorial.

Exercise 1: Pig Latin - Information about Mr. Magic Sets

Your first query should return all available information about Mr. "Magic Sets". A corresponding SPARQL query looks like:

PREFIX foaf: <http://xmlns.com/foaf/0.1/>
SELECT *
WHERE { 
        ?person foaf:name "Magic Sets" .
        ?person ?p ?o .
}

Semantic Web: In Editor Output Data Query
Exercise: Start Data Script
Solution: Output In Editor Script

Exercise 2: Pig Latin - Email addresses of all persons

The second query should return information about email addresses of all persons in the given rdf graph. A corresponding SPARQL query looks like:

PREFIX foaf: <http://xmlns.com/foaf/0.1/>
SELECT ?name ?mbox
WHERE {
  ?person foaf:name ?name .
  {
      { ?person foaf:mbox ?mbox } 
      UNION
      { ?person foaf:mbox_sha1sum ?mbox }
  }
}

Semantic Web: In Editor Output Data Query
Exercise: Start Data Script
Solution: Output In Editor Script

Exercise 3: Pig Latin - All persons and their depictions if available

The result of the third query should contain all persons in the given rdf graph and their depictions if available. A corresponding SPARQL query looks like:

PREFIX foaf: <http://xmlns.com/foaf/0.1/>
SELECT ?name ?depiction
WHERE { 
        ?person foaf:name ?name .
        OPTIONAL {
            ?person foaf:depiction ?depiction .
        }
}

Semantic Web: In Editor Output Data Query
Exercise: Start Data Script
Solution: Output In Editor Script

Exercise 4: Pig Latin - Jo Foo's friends

Develop a query to answer who knows "Joe Foo"? (Who are the friends of "Joe Foo"?)

Semantic Web: In Editor Output Data Query
Exercise: Start Data Script
Solution: Output In Editor Script

Exercise 5: Pig Latin - Friends of Jo Foo's friends

Who are the friends of the friends of "Joe Foo"?

Semantic Web: In Editor Output Data Query
Exercise: Start Data Script
Solution: Output In Editor Script

Exercise 6: Pig Latin - EMail-addresses of friends of Jo Foo's friends

What are email-addresses of the friends of the friends of "Joe Foo"?

Semantic Web: In Editor Output Data Query
Exercise: Start Data Script
Solution: Output In Editor Script

Exercise 7: Pig Latin - Person knowing someone not knowing him/her

Person A knows at least one person B, who does not know A. Develop a query to find such persons A.

Semantic Web: In Editor Output Data Query
Exercise: Start Data Script
Solution: Output In Editor Script

Exercise 8: Pig Latin - Having unknown friends

Person A knows at least one person B, who does not know A. Develop a query to find such persons B.

Semantic Web: In Editor Output Data Query
Exercise: Start Data Script
Solution: Output In Editor Script

Exercise 9: Pig Latin - All at once

Multi-Query: Ask for the results of all above queries in one pig script. Do not compute any intermediate result more than one time.

Exercise: Start Data Script
Solution: Output In Editor Script

Flink - Stream Exercises

The exercises are using the DataStream API. You may use the Flink documentation during your exercises.

Exercise 1: Flink/DataStream API - Minimum of stream of sensor values

The given code prepares a stream of sensor values simulating e.g. a soft temperature rise.

Please compute the minimum of the temperatures in a sliding count window of size 100 each time sliding 10 events.

Exercise: Start MinStream.kt
Solution: Output In Editor MinStream.kt

Exercise 2: Flink/DataStream API - Average of stream of sensor values

The given code prepares a stream of sensor values simulating e.g. a soft temperature rise.

Please compute the average of the temperatures in a tumbling count window of size 100.

Exercise: Start AvgStream.kt
Solution: Output In Editor AvgStream.kt

Exercise 3: Flink/DataStream API - Join of sensor streams

The given code prepares two streams of sensor values simulating e.g. soft temperature rises.

Please compute the join of the temperatures in a tumbling time window of size 2000. The join should combine the stream tuples according to the second field (containing the number of measured sensor value).

Exercise: Start JoinStream.kt
Solution: Output In Editor JoinStream.kt

Flink - Graph Exercises

The exercises are using the graph library Gelly. You may use the Flink documentation during your exercises.

Exercise 1: Flink/Gelly - Try out Single-Source-Shortest-Path (SSSP)

Your task is just to try out the Single-Source-Shortest-Path (SSSP) example of the lecture...

Exercise: Start Data SSSP.kt
Solution: Output In Editor SSSP.kt

Exercise 2: Flink/Gelly - Cycle Detection

Please detect cycles in the given graph with the use of the Gelly API.

Exercise: Start Data NodeCentricAlgo.kt
Solution: Output In Editor CycleDetection.kt

Exercise 3: Flink/Gelly - All-Pairs-Shortest-Path (APSP)

Please solve the All-Pairs-Shortest-Path problem with the use of the Gelly API. APSP computes the shortest paths between each pair of vertices.

Exercise: Start Data NodeCentricAlgo.kt
Solution: Output In Editor APSP.kt

Exercise 4: Flink/Gelly - PageRank

Your task is to develop a Flink/Gelly-program for calculating the weights according to the PageRank approach.

The PageRank approach is still used today (besides other criteria) in search engines as basis for the ranking of websites. The input of the PageRank algorithm is a graph, where the (weighted) nodes represent the websites and the weighted edges between the nodes the links between the websites.

The weigths of the edges are after applying the PageRank approach as larger as more nodes (with large weights) are linked to this node. The weight G_i of a node i is calculated from the weights G_j of those nodes M_i, which are linked to the node i (i.e., which edges end in node i). If j (in M_i) is linked to c_j different nodes, then the weight of G_j is proportionally divided between these nodes. Hence one iteration of the PageRank approach can be described by the following formula for the determination of the new weight G_i of a node i:

In the given formula, d is a damping factor and n the total number of nodes.

The PageRank approach is typically processed in a given number of iterations (and sometimes based on converging ranks). In this exercise we compute the ranks of given websites only in one iteration. The input data is given in the form i G_i M_i, where the nodes in M_i are separated by commas.

Example:

Exercise: Start Data PageRank.kt
Solution: Output In Editor PageRank.kt

Exercise 5: Flink/Gelly - Mr. Magic Sets and his friends

Please compute the result of the "friend query" with the use of Gelly API, which determines all information about "Magic Sets" and the name of his (direct) friends. A corresponding SPARQL query looks like:

SELECT *
WHERE {
 ?magic_s <http://xmlns.com/foaf/0.1/name> "Magic Sets".
 ?magic_s ?foo_p ?foo_o.
 ?magic_s <http://xmlns.com/foaf/0.1/knows> ?friend_s.
 ?friend_s <http://xmlns.com/foaf/0.1/name> ?friend_name.
}

Semantic Web: In Editor Output Data Query
Exercise: Start Data NodeCentricAlgo.kt
Solution: Output In Editor FriendQueryWithGelly.kt

Browser

This is the start page for online exercises with the topic of programming the browser.

General Hints

After starting an exercise, you can have a look at the rendered output of the solution. You may have a look at it to compare with the result of your solution to have a hint of its correctness. Furthermore, there are also tabs to the solutions of the exercises. Please have a look at the solution only after you have finished working on your own solution. Otherwise the learn effect is much less.

Please choose your browser tutorial from the tabs below:

HTML Exercises

The slides of the lecture are not enough to solve the following exercises. You often have to consider additional information from the internet!

Exercise 1: HTML - Introduction (Deprecated)

Please add a paragraph with a short bio of yourself. Have fun!

Exercise: Start Page
Solution: Output In Editor Page

Exercise 2: HTML - Find Errors

There are 9 errors in the given HTML document. Find and correct these errors!

Exercise: Start Page
Solution: Output In Editor Page

Exercise 3: HTML - Table

Please render the solution and try to write html code for rendering the same html table!

Exercise: Start Page
Solution: Output In Editor Page

Exercise 4: HTML - CV (Deprecated)

Please write the CV of yourself or of a duck. Please try to use as many different types of html tags as you can (ordered/unordered lists, headings, tables...)... You can render the solution for an example what can be included.
The CV should contain a photo (use e.g. url duck.png), sound (ente.mp3) and a video (EvalBig.format and format one of avi, ogv, mp4, wmv, 3gp, webm).
Furthermore, the CV site should contain a web formular for contacting you.

Exercise: Start Page
Solution: Output In Editor Page

CSS Exercises

The slides of the lecture are not enough to solve the following exercises. You often have to consider additional information from the internet! Especially look at CSS3 selectors and CSS4 selectors.

Exercise 1: CSS - Table

Please look at the rendered solution and try to write css code such that the html table is rendered exactly the same as in the solution!

Exercise: Start Page
Solution: Output In Editor Page

Exercise 2: CSS - Absolute Positioning (Deprecated)

Please look at the rendered solution and try to write css code such that the site is rendered exactly the same as in the solution!

Exercise: Start Page
Solution: Output In Editor Page

Javascript Exercises

The slides of the lecture are not enough to solve the following exercises. You often have to consider additional information from the internet!

Exercise 1: JS - Interactive Forms

In this exercise we develop an interactive form about job experiences, which may be part of a job application form. Depending on the type of job chosen different input possibilities should be given (for the cook the number of stars and his/her specialties, for the software developer his/her homepage and his/her programming languages, for all a field for notes). Furthermore, it should be possible to add more job experiences. Again please try the rendered solution to find out how the interactive form could look and behave like.
You can use the javascript function element.insertAdjacentHTML(A, '<p>new paragraph</p>'); to add new html code (here a new paragraph) right before/after the (opening) tag of element (A is 'BeforeBegin'/'AfterBegin') or before/after the closing tag of element (A is 'BeforeEnd'/'AfterEnd').

Exercise: Start Page
Solution: Output In Editor Page

Exercise 2: JS - Duck Shooting (Deprecated)

Please write a simple game. The goal of the game is to shoot the black duck as often you can in one minute. However, do not shoot the yellow ducks! You will get a penalty in this case. You can play the game of the rendered solution for getting an idea how it could look like. We encourage you to develop this game further and send us your solution!
In Javascript a function is called every X milliseconds by using var myInterval = setInterval(function () {...}, X); You can stop this with window.clearInterval(myInterval);
The width of your current viewport can be determined by document.documentElement.clientWidth. You can set the x-position of the duck image to 100 px with duck.style.left = '100px'; (duck must contain the corresponding img tag). duck.offsetLeft determines the current position of the duck.
You can use the audio files ente.mp3 and failed.mp3 to play a sound of success and of the penalty respectively.

Exercise: Start Page
Solution: Output In Editor Page

JQuery Exercises

The slides of the lecture are not enough to solve the following exercises. You often have to consider additional information from the internet!

Exercise 1: JQuery/AJAX - Page-wise CV

This time we want to have a page-wise version of our duck CV: There are four buttons on the sidebar with which the user can choose a page of the duck CV. After pressing on one of the buttons, the old page is faded out, the new page is loaded from the server and faded in. You can render the solution for an example how it could look like.
You can access the server under the url page.php. The server requires a parameter page set to 1, 2, 3 or 4. The server returns the html code for the different pages. For any invalid input, the server returns the string Server: invalid input!.
Furthermore, the buttons for active pages should be disabled.

Exercise: Start Page
Solution: Output In Editor Page

Exercise 2: JQuery - Paginator (Deprecated)

In this exercise we want to implement a paginator. With the help of a paginator, a user can easily choose a page, navigate to the next, previous, first and last page. Furthermore, if not all page numbers can be displayed, the paginator shows only those nearby the current active page. The paginator should be responsive, i.e. resizing the window adapts the paginator, such that always as many page buttons are shown as possible. Also the page button over the mouse pointer should be marked (implementing the hover-functionality) as well as the active page.
You can render the solution for an example how it could look like. Please play around with the window sizes to check the responsive capabilities of the solution.
In the given code of the exercise, a canvas is used in which the paginator is drawn. The example code already gives you some entry points by adding some event handlers whenever the window is resized, the user clicks into the paginator or moves its mouse. By collecting the page buttons to be drawn in the array currentButtons using objects of type DrawObject it is possible to have all information at hand. Drawing those objects of type DrawObject is also already given. Have fun!

Exercise: Start Page
Solution: Output In Editor Page

Server

This is the start page for online exercises with the topic of programming the web server.

General Hints

After starting an exercise, you can have a look at the rendered output of the solution. You may have a look at it to compare with the result of your solution to have a hint of its correctness. Furthermore, there are also tabs to the solutions of the exercises. Please have a look at the solution only after you have finished working on your own solution. Otherwise the learn effect is much less.

Please choose your server programming tutorial from the tabs below:

PHP (imperative) Exercises

The slides of the lecture are often enough to solve the following exercises, but you may consider additional information from the internet!

Exercise 1: PHP - Introduction

Let us start with a first example exercise: Your first exercise is to add your name after the 'Hello'. Have fun!

Exercise: Start Page
Solution: Output In Editor Page

Exercise 2: PHP - Array to HTML Table

Write PHP code such that the content of the given array $salaries is displayed as html table!

Exercise: Start Page
Solution: Output In Editor Page

Exercise 3: PHP - Simple Captcha

A captcha (short for 'Completely Automated Public Turing test to tell Computers and Humans Apart') is a type of challenge-response test used in computing to determine whether or not the user is human in order to e.g. prevent agent programs to misuse services provided at the web.
Write PHP code generating a simple captcha. The simple captcha should randomly formulate a simple question like what is the result of a simple math equation (e.g., what is the sum of 2 and 5?). There should be a text field in which the user can type the answer. Afterwards the answer is checked for correctness (via Javascript) and in case of success a 'Congratulations!' message is displayed.
Remarks:Coding the answer in Javascript could be parsed by agents, which then automatically could pass the captcha check. Hence the check should be executed also at server-side (via e.g. php-code). However, this scenario cannot be handled in this tutorial system...

Exercise: Start Page
Solution: Output In Editor Page

Exercise 4: Regular Expression - Find text that matches

Find a matching text for the pattern /^$/!

Exercise: Start Page
Solution: Output In Editor Page

Exercise 5: Regular Expression - Formulating first regular expression

Find a pattern matchings strings containing more than 2 characters, starting with an upper-case letter and ending with a digit!

Exercise: Start Page
Solution: Output In Editor Page

Exercise 6: Regular Expression - Time string

Find a pattern validating time representations of the form hh:mm:tt. Only correct representations should be validated, i.e. hours above 23, and minutes and seconds above 59 should not be validated!

Exercise: Start Page
Solution: Output In Editor Page

Exercise 7: Regular Expression - Floating point number

Find a pattern validating floating-point numbers! Please check the tests to get an idea about the syntax of floating point numbers...

Exercise: Start Page
Solution: Output In Editor Page

PHP (object-oriented) Exercises

The slides of the lecture are often enough to solve the following exercises, but you may consider additional information from the internet!

Exercise 1: PHP - Calculator Class

Develop a calculator class, which internally uses a stack. The stack can be filled with numbers using a push function. Furthermore, there should be functions for adding, subtracting, multiplying and dividing the two latest inserted numbers on the stack, and pushing the result again on the stack. If the stack contains only one element, the class should provide access to this element via a value function.

Exercise: Start Page
Solution: Output In Editor Page

Exercise 2: PHP - Canvas Draw Code Generator

It seems to be that the used PHP interpreter in Javascript has problems with recursion in OOP. Please use the server-based PHP execution (after login) or check out PHPFiddle to run your code if you have any problems with the used PHP interpreter in Javascript.
Your task is to model PHP classes, which represent rectangle and circle drawing objects as well as a container for several drawing objects, which could be besides rectangles and circles again containers. The drawing objects should be able to output the graphic operations to Javascript, such that a whole scene is drawn when the Javascript is executed. Only basic graphic operations for drawing a rectangle and a circle should be used in the output Javascript code. The drawing objects as well as the containers can be moved to a new position and also scaled by a factor.
A test scenario is given, where a train under a sun is initialized. This scene should be drawn with no scaling factor (in canvas 1), with scaling factor 10 (in canvas 2) and additionally with the train moved to (50,0) (in canvas 3).

Exercise: Start Page
Solution: Output In Editor Page