Werken met JSP

Leerdoelen

Na het bestuderen van dit hoofdstuk wordt van je verwacht dat je:

  • Eclipse met de App Engine plugin hebt geïnstalleerd
  • jsp pagina's in Eclipse kunt maken
  • weet hoe je java code schrijft tussen de jsp tags <% en %>
  • weet hoe je de jsp expressie <%= variabele %> in je html code gebruikt
  • met bovenstaande volop geoefend hebt met de opdrachten in dit hoofdstuk
  • een online portfolio op App Engine hebt gedeployed

Benodigde voorkennis

Uitgangspunt is dat je de cursussen Inleiding Java, BlueJ en HTML 5 hebt voltooid.

Ontwikkelomgeving

In deze cursus gebruiken we de IDE Eclipse. Om apps op App Engine te deployen kun je de App Engine plugin installeren. Je mag uiteraard een andere IDE gebruiken, maar daarvoor mag je geen ondersteuning verwachten.

Opdracht 1

Met z’n vieren (Jan, Ali, Jeannette en jij) hebben jullie een karwei verricht en daarmee 113 euro verdiend. Schrijf een webpagina waarin je een berekening maakt om het geld zo eerlijk mogelijk te verdelen. In het venster van de webpagina komen de vier namen onder elkaar te staan met daarachter het bedrag dat een ieder krijgt.

In JSP kun je Java ouput in HTML-code genereren met "out.println("html code ")". Om er voor te zorgen dat de regels onder elkaar komen moet je aan het eind van iedere regel een <br> plaatsen. De gegenereerde HTML code wordt vervolgens door de browser weergegeven.

<%  
double bedrag = 113;
out.println("Jan: &euro; " + (bedrag / 4) + "<br>");
out.println("Ali: &euro; " + (bedrag / 4) + "<br>") ;
out.println("Jeanette: &euro; " + (bedrag / 4)  + "<br>");
out.println("Piet: &euro; " + (bedrag / 4)  + "<br>");
%>
Jan: € 28.25
Ali: € 28.25
Jeanette: € 28.25
Piet: € 28.25

Nadeel van deze methode is dat je alle html code inclusief speciale tekens als output moet genereren. Dit wordt al heel snel heel onoverzichtelijk. Een andere wat simpeler manier is om Java variabelen direct in HTML te gebruiken door gebruik te maken van de <%= "java variabele" %> jsp expressie. Je kunt bijvoorbeeld de variabele bedrag declareren en deze vervolgens direct in een gewone html tabel gebruiken. 

<!-- jsp code -->
<%  double bedrag = 113.0; %>

        <!-- html code  -->
        <table border="1">
            <thead>
                <tr>
                    <th>Naam</th>
                    <th>Totaal &euro; <%= bedrag %></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Jan</td>
                    <td>&euro; <%= bedrag/4 %></td>
                </tr>
                <tr>
                    <td>Ali</td>
                    <td>&euro; <%= bedrag/4 %></td>
                </tr>
                <tr>
                    <td>Jeannette</td>
                    <td>&euro; <%= bedrag/4 %></td>
                </tr>
                <tr>
                    <td>Piet</td>
                    <td>&euro; <%= bedrag/4 %></td>
                </tr>
            </tbody>
        </table>
Naam Totaal € 113.0
Jan € 28.25
Ali € 28.25
Jeannette € 28.25
Piet € 28.25

Verschillende programmeurs gebruiken verschillende stijlen van programmeren. Doordat Java en HTML code door elkaar heen worden gebruikt, kan je code snel onleesbaar worden. Het is dan ook zaak om je code zo overzichtelijk mogelijk te houden.

Opdracht 2

Schrijf een webpagina, waarin berekend wordt hoeveel seconden er in een minuut, een uur, een dag, een week en een jaar gaan. Maak gebruik van een tabel om de gegevens in het venster van de browser te plaatsen.

Eenheid Aantal seconden
Minuut 60
Uur 3600
Dag 86400
Week 604800
Jaar 31536000

Je begint met bovenin je jsp pagina de benodigde variabelen te declareren en een waarde te geven:

<% 
int minuut = 60;
int uur = minuut * 60;
int dag = uur * 24;
int week = dag * 7;
int jaar = dag * 365;
%>

Vervolgens maak je een tabel waarin je de variabelen tussen je HTML code plaatst met de JSP expressie <%= .... %>

 <body>
     <table border="1" cellpadding="5">
         <thead>
             <tr>
                 <th>Eenheid</th>
                 <th>Aantal seconden</th>
             </tr>
         </thead>
         <tbody>
             <tr>
                 <td>Minuut</td>
                 <td><%= minuut %></td>
             </tr>
             <tr>
                 <td>Uur</td>
                 <td><%= uur %></td>
             </tr>
             <tr>
                 <td>Dag</td>
                 <td><%= dag %></td>
             </tr>
             <tr>
                 <td>Week</td>
                 <td><%= week %></td>
             </tr>
             <tr>
                 <td>Jaar</td>
                 <td><%= jaar %></td>
             </tr>
             
         </tbody>
     </table>

 </body>

Het resultaat is een tabel waarin het aantal seconden wordt berekend

Opdracht 3

Verwelkom de bezoeker van je webpagina met een "Goedemorgen", "Goedemiddag" of "Goedenavond" afhankelijk van het tijdstip waarop de bezoeker de webpagina bezoekt. Geef ook het huidig uur.

Voorbeeld uitwerking:

Goedemorgen

Huidig uur: 7

Tip: Maak gebruik van de Java klasse Calendar. Maak een instantie van Calendar door de static methode Calendar.getInstance() aan te roepen. Dit levert de huidige datum/tijd op. Om het uur van de dag op te vragen kun je gebruik maken van de constante HOUR_OF_DAY van de klasse Calendar. 

<%  
Calendar nu = Calendar.getInstance();
int huidigUur = nu.get(Calendar.HOUR_OF_DAY);
    
//hier komt de overige java code
    
%>

De java.util.Calendar klasse moet geïmporteerd worden om de juiste tijd op te kunnen vragen:

<%@page import="java.util.Calendar"%>

Doe dit handmatig als NetBeans het niet automatisch heeft gedaan. Nu kun je de volgende variabelen declareren en de benodigde waardes geven:

<%  Calendar nu = Calendar.getInstance();
    int uur = nu.get(Calendar.HOUR_OF_DAY);
    String groet = "";
    if (uur < 12) {
      groet = "Goedemorgen";
	}
    else {
      groet = "Goedemiddag";
    }
%>
    <h1><%= groet %></h1>
    <p>Huidig uur: <%= uur %></p>

Als uur kleiner is dan 12 (ochtend) moet er Goedemorgen komen te staan, anders Goedemiddag. Hiervoor gebruik je een if... else statement. Merk op hoe je Java en HTML code door elkaar heen kunt gebruiken!

Opdracht 4

Geef de rij van Fibonacci. De eerste twee getallen van de rij zijn 1 en de volgende zijn steeds de som van de twee voorgangers. 1, 1, 2, 3, 5, 8, 13, 21, enz.

De rij van Fibonacci voegt steeds een nieuw getal toe dat de som is van de twee voorgaande getallen. Om de rij van Fibonacci te maken hebben we dus drie variabelen nodig. De twee getallen die bij elkaar moeten worden opgeteld en de som ervan. Om een echt lange reeks te maken kun je het primitieve type long gebruiken. Om aan te geven dat een getal van het type long is moet je L achter het getal zetten. Anders denkt java dat het een int is. 

<%
long arg0 = 0L;
long arg1 = 1L;
long som = arg0 + arg1;
long maxWaarde = 900000000000000000L;
%>

In een lus krijgt som steeds de waarde van arg0 + arg1. Nadat deze waarde is toegekend moet som worden weergegeven in HTML. Het eerste argument (arg0) krijgt de waarde van het tweede (arg1) en het tweede argument krijgt de waarde van som, waarna de lus zich herhaalt.

Voorbeeld uitwerking:

1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181, 6765, 10946, 17711, 28657, 46368, 75025, 121393, 196418, 317811, 514229, 832040, 1346269, 2178309, 3524578, 5702887, 9227465, 14930352, 24157817, 39088169, 63245986, 102334155, 165580141, 267914296, 433494437, 701408733, 1134903170, 1836311903, 2971215073, 4807526976, 7778742049, 12586269025, 20365011074, 32951280099, 53316291173, 86267571272, 139583862445, 225851433717, 365435296162, 591286729879, 956722026041, 1548008755920, 2504730781961, 4052739537881, 6557470319842, 10610209857723, 17167680177565, 27777890035288, 44945570212853, 72723460248141, 117669030460994, 190392490709135, 308061521170129, 498454011879264, 806515533049393, 1304969544928657, 2111485077978050, 3416454622906707, 5527939700884757, 8944394323791464, 14472334024676221, 23416728348467685, 37889062373143906, 61305790721611591, 99194853094755497, 160500643816367088, 259695496911122585, 420196140727489673, 679891637638612258, 1100087778366101931, en zo voort...

De rij van Fibonacci voegt steeds een nieuw getal toe dat de som is van de twee voorgaande getallen. Om de rij van Fibonacci te maken hebben we dus drie variabelen nodig. De twee getallen die bij elkaar moeten worden opgeteld en de som ervan.

In een lus krijgt som steeds de waarde van arg0 + arg1. Het eerste argument krijgt de waarde van het tweede en het tweede argument krijgt de waarde van som. 

<%
 long arg0 = 0L;
 long arg1 = 1L;
 long som = 1L;
 long maxWaarde = 900000000000000000L;
%>


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Fibonacci</title>
    </head>
    <body>
        <h3>De rij van Fibonacci</h3>
        <p>1, 
        <% while (som < maxWaarde) {
            som = arg0 + arg1;
            arg0 = arg1;
            arg1 = som; %>
            <%= som %>, 
      
       <% } %>
        en zo voort... </p>
   </body>
</html>

Opdracht 5

Schrijf een webpagina waarin een schaakbord op het scherm wordt getekend. Een schaakbord heeft 8 bij 8 vakken om en om zwart en wit.

Aanwijzingen

  • bekijk de html en css code van onderstaand schaakbord met de functie "element inspecteren" van je browser
  • gebruik mbv Java twee lussen (loops) om de rijen en de kolommen te maken
  • bedenk een algoritme om de cellen om de beurt zwart en wit te maken

Schaakbord


De gebruikte CSS code

<style type="text/css">
  table#schaakbord td {
      width: 30px;
      height: 30px;
  }
  
  #schaakbord td.zwart {
      background-color: black;
  }
  
  #schaakbord td.wit {
      background-color: white;
  }
  
  table#schaakbord {
      border: 1px solid black;
      border-collapse: collapse;
  }
</style>

De gebruikte JSP code

<h3>Schaakbord</h3>
<table id="schaakbord">
    <% for (int i = 0; i < 8; i++) { %>
    <tr>
       <% for (int j = 0; j < 8; j++) { 
           if ((i + j) % 2 == 0) { %>
           	<td class="zwart"></td>
           <% } 
           else { %>
           	<td class="wit"></td>
           <% } 
    }%>
    </tr>
   <% } %>
</table>

Alternatieve uitwerking

Er is iets voor te zeggen om je Java en HTML code zoveel mogelijk gegroepeerd bij elkaar te houden. Dit kun je bijvoorbeeld doen door de HTML code in een String op te nemen en die vervolgens in je HTML op te nemen. Let er dan wel op dat je bepaalde tekens zoals aanhalingstekens moet "escapen" met \ (backslash).

<!DOCTYPE html>
<html>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<% 
    String velden = "";
    for (int i = 0; i < 8; i++) { 
        velden += "<tr>";
        for (int j = 0; j < 8; j++) { 
           if ((i + j) % 2 == 0) {
           	velden += "<td class=\"zwart\"></td>";
            } 
           else {
           	velden += "<td class=\"wit\"></td>";
            } 
        }
      velden += "</tr>";
   } 
  
%>

    <head>
       
     <title>Schaakbord</title>

    </head>
    <body>
        <h1>Schaakbord</h1>
        <table id="schaakbord">
         	<%= velden %>
        
        </table>
       
    </body>
</html>

Opdracht 6

Zet de tafel van vijf in het venster van de browser. Uiteraard maak je gebruik van een lus.

De tafel van 5

1 x 5 = 5
2 x 5 = 10
3 x 5 = 15
4 x 5 = 20
5 x 5 = 25
6 x 5 = 30
7 x 5 = 35
8 x 5 = 40
9 x 5 = 45
10 x 5 = 50

<body>
    <h3>De tafel van 5</h3>
    <% for (int i = 1; i <= 10; i++) { %>
    <%= i %> x 5 = <%= i * 5 %> <br>
    <% } %>
</body>

Opdracht 7

Maak een webpagina met daarop een vermenigvuldigingstabel. In een vermenigvuldigingstabel staan de getallen die met elkaar vermenigvuldigd worden op de eerste regel en in de linkerkolom. In de cel, waarin kolom en regel elkaar kruisen, staat de uitkomst van de vermenigvuldiging van de twee getallen.

Vermenigvuldigingstabel

1 2 3 4 5 6 7 8 9 10
2 4 6 8 10 12 14 16 18 20
3 6 9 12 15 18 21 24 27 30
4 8 12 16 20 24 28 32 36 40
5 10 15 20 25 30 35 40 45 50
6 12 18 24 30 36 42 48 54 60
7 14 21 28 35 42 49 56 63 70
8 16 24 32 40 48 56 64 72 80
9 18 27 36 45 54 63 72 81 90
10 20 30 40 50 60 70 80 90 100 

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%
    String cellen = "";
    for (int rij = 1; rij <= 10; rij++){
        cellen += "<tr>";
        for (int kolom = 1; kolom <= 10; kolom++) {
            if (rij == 1 || kolom == 1) {
                cellen += "<th>" + (rij * kolom) + "</th>";
            }
            else {
                cellen += "<td>" + (rij * kolom) + "</td>";
            }
        }
        cellen += "</tr>";
    }
%>


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>xtabel</title>
    </head>
    <body>
        <h1>Vermenigvuldigingstabel</h1>
        <table id="xtabel">
            <%= cellen %>
        </table>
    </body>
</html>