Springboot/Thymeleaf: Links on html-template cannot be parsed

Question

I continued my Springboot/Thymeleaf project and resolved some issues mentioned earlier (Springboot: Localhost:8080 results in Whitepage-Error instead of showing content).

localhost:8080 now shows a list of genes and proteins (see picture). Following the URI http://localhost:8080/protein?id=Q6GZX3 (for example) I can now show the entry for one protein. The same is possible for a gene.

Now, I tried to link proteins and genes (have a link at protein page saying “Gene” and showing the gene-html-page upon clicking. Only for protein pages so far). Upon execution, I get the following error for my protein.html:

 <a th:href=”gene?id= + ${geneid}”>Gene</a>

 could not be parsed. 

For further understanding/if necessary: After resolving this link error of my protein.html-page, my final aim is:

Make the list elements shown via index.html clickable and, upon clicking, show the detailed infos for genes/proteins. Furthermore have a button on each gene site, which redirects you to the corresponding protein and vice versa for the proteins.

Background info:

My code so far: Pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.MMueller</groupId>
    <artifactId>SpringBoot_v2</artifactId>
    <version>1.0-SNAPSHOT</version>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.3.RELEASE</version>
    </parent>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <type>jar</type>
        </dependency>

        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

    </dependencies>

    <properties>
        <java.version>1.8</java.version>
    </properties>


    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

Main.java

package main;

import db.admin.DatabaseQuery;
import db.admin.local.DatabaseQueryLocal;
import db.io.FileReader;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.boot.autoconfigure.SpringBootApplication;
//import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.context.annotation.ComponentScan;

/**
 * Main class
 * @author Miriam Mueller
 */
//@Configuration
@SpringBootApplication
@ComponentScan(basePackages = "gui.spring")// sucht alle @Controller in gui.spring
@EnableAutoConfiguration
public class Main {

    public static void main(String[] args) {


        DatabaseQuery query = new DatabaseQueryLocal();
        new FileReader(query); 

        SpringApplication.run(Main.class, args);

    }
}

Applicationcontroller.java

package gui.spring.controller;

import db.admin.DatabaseQuery;
import db.admin.local.DatabaseQueryLocal;
import db.sample.Gene;
import db.sample.Protein;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import java.util.List;

@Controller
public class ApplicationController {
    @RequestMapping(value = "/", method=RequestMethod.GET)

    public String deleteSession(Model model){
        DatabaseQuery query = new DatabaseQueryLocal();
        List<Protein> proteins = query.getProteins();
        List<Gene> genes= query.getGenes();

        model.addAttribute("proteins", proteins);
        model.addAttribute("genes", genes);
        return "index";
    }
}

proteinController.java

package gui.spring.controller;

import db.admin.DatabaseQuery;
import db.admin.local.DatabaseQueryLocal;
import db.sample.Protein;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import java.util.Optional;

@Controller
public class ProteinController {

    @RequestMapping(value = "/protein", method = RequestMethod.GET)
    public String einProteinAnzeigen(Model model, @RequestParam("id") String identifier) {

        DatabaseQuery query = new DatabaseQueryLocal();
        Optional<Protein> protein = query.getProteinByName(identifier);

        if(protein.isPresent()) {
Gene associatedGene = query.getGenes().stream()
        .filter(g -> g.getProtein().equals(protein.get()))
        .findFirst().get();

            model.addAttribute("identifier", protein.get().getIdentifier());
            model.addAttribute("description", protein.get().getDesc());
            model.addAttribute("sequence", protein.get().getSequence());
    model.addAttribute("geneid", associatedGene.getIdentifier());

            } else {
             model.addAttribute("identifier", "No Protein found with this id " + identifier);

             model.addAttribute("description", "");
             model.addAttribute("sequence", "");
             }
            return "protein";
        }
}

GeneController.java

package gui.spring.controller;

import db.admin.DatabaseQuery;
import db.admin.local.DatabaseQueryLocal;
import db.sample.Gene;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;

import java.util.Optional;

@Controller
public class GeneController {
    //Alle Aufrufe der Seite localhost:8080/gene landen hier, weil der value die URL "/protein" abgreift
    @RequestMapping(value = "/gene", method = RequestMethod.GET)
    public String einGenAnzeigen(Model model, @RequestParam("id") String identifier) {

        DatabaseQuery query = new DatabaseQueryLocal();
        Optional<Gene> gene = query.getGeneByName(identifier);

        if(gene.isPresent()) {
            model.addAttribute("identifier", gene.get().getIdentifier());
            model.addAttribute("description", gene.get().getDesc());
            model.addAttribute("sequence", gene.get().getSequence());
        } else {
            //wenn query kein Protein zuruckliefert eine Warnung an den Nutzer ausgeben:
            model.addAttribute("identifier", "No Gene found with this id " + identifier);
            //und die anderen Attribute leer setzten:
            model.addAttribute("description", "");
            model.addAttribute("sequence", "");
        }

        //liefert die protein.html-Datei
        return "gene";
    }
}

index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
    <title>Index</title>
    <meta http-equiv="Content-Type" content="content/html; charset=UTF-8"/>
</head>
<body>

    <!--<a th:href="@{/protein}">"Proteins"</a> -->

    <h2>Genes and Proteins</h2>

    <table align="left" border="1" cellspacing="5" width="80%">
        <td style="width:50%;">
            <th:block th:each="gene:${genes}">
                <p th:text="${gene.getIdentifier()}"></p>
            </th:block>
        </td>
        <td style="width: 50%;">
            <th:block th:each="protein:${proteins}">
                <p th:text="${protein.getIdentifier()}"></p>
            </th:block>
        </td>
    </table>
</body>
</html>

protein.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
    <title>Protein</title>
    <meta http-equiv="Content-Type" content="content/html; charset=UTF-8">
</head>
<body>
        <h2 th:text="${identifier}"></h2>

        <br/>
        <p th:text="${description}"></p>

        <br/>
        <p th:text="${sequence}" style="width: 400px; word-wrap: break-word"></p>
<br/>

<a th:href="gene?id= + ${geneid}">Gene</a>

</body>
</html>

Gene.html

!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
    <title>Protein</title>
    <meta http-equiv="Content-Type" content="content/html; charset=UTF-8">
</head>
<body>

    <h2 th:text="${identifier}"></h2>

    <br/>
    <p th:text="${description}"></p>

    <br/>
    <p th:text="${sequence}" style="width: 400px; word-wrap: break-word"></p>

</body>
</html>

Answer 1

Change your th:href for the following one:

<a th:href="@{'gene?id=' + ${geneid}}">Gene</a>

This should redirect you the desired URL, thou calling the einGenAnzeigen method in your GeneController.