Home > Software design >  Spring boot maven mysql crud in single html page
Spring boot maven mysql crud in single html page

Time:01-14

I created a spring boot crud application using a single HTML form. I want to display data in the text field for modification when I click the edit button. But print particular data in the console not appeared in the text field. I can not found what the problem.

Credit Card Entity Class

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table(name = "credit_card")
public class CreditCard {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "creditcard_id")
    private int creditCardId;
    
    @Column(name = "creditcard_type")
    private String creditCardType;
    
    @Column(name = "creditcard_number")
    private String creditCardNumber;
    
    public CreditCard() {
        
    }

    public CreditCard(int creditCardId, String creditCardType, String creditCardNumber) {
        this.creditCardId = creditCardId;
        this.creditCardType = creditCardType;
        this.creditCardNumber = creditCardNumber;
    }

    public int getCreditCardId() {
        return creditCardId;
    }

    public void setCreditCardId(int creditCardId) {
        this.creditCardId = creditCardId;
    }

    public String getCreditCardType() {
        return creditCardType;
    }

    public void setCreditCardType(String creditCardType) {
        this.creditCardType = creditCardType;
    }

    public String getCreditCardNumber() {
        return creditCardNumber;
    }

    public void setCreditCardNumber(String creditCardNumber) {
        this.creditCardNumber = creditCardNumber;
    }
}

Person Entity class

import java.util.Set;   
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.OneToMany;
import javax.persistence.Table;

@Entity
@Table(name = "person")
public class Person {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "persion_id")
    private int persondId;

    @Column(name = "persion_name")
    private String personName;

    @Column(name = "persion_contact_no")
    private String personContactNo;

    @Column(name = "persion_address")
    private String personAddress;

    @OneToMany
    private Set<CreditCard> creditCards;

    public Person() {

    }

    public Person(int persondId, String personName, String personContactNo, String personAddress,
            Set<CreditCard> creditCards) {
        this.persondId = persondId;
        this.personName = personName;
        this.personContactNo = personContactNo;
        this.personAddress = personAddress;
        this.creditCards = creditCards;
    }

    public int getPersondId() {
        return persondId;
    }

    public void setPersondId(int persondId) {
        this.persondId = persondId;
    }

    public String getPersonName() {
        return personName;
    }

    public void setPersonName(String personName) {
        this.personName = personName;
    }

    public String getPersonContactNo() {
        return personContactNo;
    }

    public void setPersonContactNo(String personContactNo) {
        this.personContactNo = personContactNo;
    }

    public String getPersonAddress() {
        return personAddress;
    }

    public void setPersonAddress(String personAddress) {
        this.personAddress = personAddress;
    }

    public Set<CreditCard> getCreditCards() {
        return creditCards;
    }

    public void setCreditCards(Set<CreditCard> creditCards) {
        this.creditCards = creditCards;
    }

    @Override
    public String toString() {
        return "Person [persondId="   persondId   ", personName="   personName   ", personContactNo="   personContactNo
                  ", personAddress="   personAddress   "]";
    }

}

Controller Class

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.obydul.spring.model.Person;
import com.obydul.spring.service.PersonService;

@Controller
public class PersonController {

    @Autowired
    private PersonService personService;

    @RequestMapping("/")
    public String home() {
        return "person";
    }

    @RequestMapping("/person")
    public String showPerson(Model model) {
        Person person = new Person();
        model.addAttribute("person", person);
        model.addAttribute("persons", personService.getAllPersons());
        return "person";
    }

    @RequestMapping(value = "/person_save", method = RequestMethod.POST)
    public String savePerson(@ModelAttribute Person person, Model model) {
        personService.savePerson(person);
        // model.addAttribute("persons", personService.getAllPersons());
        return "redirect:/person";
    }

    @RequestMapping("/person_edit/{persondId}")
    public String editPerson(@PathVariable int persondId, Model model) {
        model.addAttribute("person", personService.getPersonById(persondId));

        System.out.println("person edit :: "   personService.getPersonById(persondId));
        return "redirect:/person";
    }
    
    @GetMapping("/persons/{persondId}")
    public String deleteStudent(@PathVariable int persondId) {
        personService.deletePersonById(persondId);
        return "redirect:/person";
    }

}

Person.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Person Information Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
    crossorigin="anonymous">
</head>
<body>
<br>
    <div >
        <div >
            <h3 >Person Info</h3>
            <div >
                <form action="#" th:action="@{/person_save}" th:object="${person}"
                    method="post">
                    
                    <div >
                        <label>Person Name</label> <input type="text" name="personName"
                            th:field="*{personName}"  />
                    </div>

                    <div >
                        <label>Contact No</label> <input type="text"
                            name="personContactNo" th:field="*{personContactNo}"
                             />
                    </div>

                    <div >
                        <label>Address</label> <input type="text" name="personAddress"
                            th:field="*{personAddress}"  />
                    </div>


                    <div >

                        <button type="submit" >Save</button>
                        <button type="reset" >Reset</button>
                    </div>
                    <input type="hidden" id="persondId" th:field="*{persondId}"/>
                    
                    <br>
                    

            <table >
                <thead >
                    <tr>
                        <th >Person Id</th>
                        <th >Person Name</th>
                        <th >Contact No</th>
                        <th >Address</th>
                        <th >Edit</th>
                        <th >Delete</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="person: ${persons}">
                        <td  th:text="${person.persondId}" />
                        <td th:text="${person.personName}" />
                        <td  th:text="${person.personContactNo}" />
                        <td th:text="${person.personAddress}" />
                        <td  >
                        <a th:href="@{/person_edit/{persondId}(persondId=${person.persondId})}" >Edit</a>
                        </td>
                        <td  >
                        <a th:href="@{/persons/{persondId}(persondId=${person.persondId})}" >Delete</a>
                        </td>
                    </tr>

                </tbody>
            </table>
                </form>
            </div>

        </div>

    </div>
</body>
</html>

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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.6.2</version>
        <relativePath /> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.obydul.spring </groupId>
    <artifactId>SpringBoot_Hibernate</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>SpringBoot_Hibernate</name>
    <description>spring boot hibernate one to many relationship</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

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

Person Info Screen

Console output

person edit :: Person [persondId=8, personName=John, personContactNo=021450000, personAddress=Dhaka]

CodePudding user response:

replace this to line

@RequestMapping("/person_edit/{persondId}")

with this one:
@GetMapping("/person_edit/{persondId}")

CodePudding user response:

Accoring to https://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#inputs, you shouldn't be specifyin the name attribute on the form input elements. So instead of

<input type="text" name="personName" th:field="*{personName}"  />

You should use

<input type="text" th:field="*{personName}"  />

thymeleaf will populate the name attribute for you. I'm not sure if that's the reason why the value isn't being set though.

  •  Tags:  
  • Related