• Register
300 points
6 1 1

Create a Web application in Spring boot wih PostgreSQL  (Part-3)

For previous parts follow thi links as below

PART-1 : https://kodlogs.com/blog/9348/create-a-web-application-in-spring-boot-wih-postgresql-part

PART-2 : https://kodlogs.com/blog/9349/create-a-web-application-in-spring-boot-wih-postgresql-part


Now let’s make Register View, Patient Form (Add-Update Form) and Dashboard which will show a list.

Add Register view as below :

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>HEALTHCARE SYSTEM</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>
</head>
<body>
<h1 class="text-center">REGISTER</h1>

<form th:action="@{/register}" method="post" class="text-center" th:object="${user}">

    <div>
        <label> Full Name : <input type="text" name="fullName" placeholder="Enter Full Name" required="true"
                                   autofocus="true" autocomplete="off" class="input-group"/> </label>
    </div>

    <div>
        <label> User Name : <input type="text" name="username" placeholder="Enter User Name" required="true"
                                   autofocus="true" autocomplete="off" class="input-group"/> </label>
    </div>

    <div>
        <label> Password : <input type="password" name="password" placeholder="Enter Password" required="true"
                                  class="input-group" autocomplete="off"/>
        </label>
    </div>

    <div>
        <input type="submit" value="REGISTER" class="btn btn-info"/>
        <a th:href="@{/}" class="btn btn-danger">BACK</a>
    </div>

</form>

<div th:if="${isError}">
    <h5 class="text-danger text-center">Username is already exists,Please choose other.</h5>
</div>

</body>
</html>

 

Add Dashboard view as below : In this we will explore how we can generate table with dynamic content.

 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>HEALTHCARE SYSTEM</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

</head>
<body>
<div class="container-fluid">
    <h1 class="text-center">PATIENT LIST</h1>
    <div class="row">
                <h4 class="text-left border-warning col-md-4">User's Full name : <span th:text="${session.person.fullName}"/></h4>
        <div class="col-md-8" align="right">
            <h4>
                <a class="btn btn-warning" th:href="@{/add-patient}">ADD PATIENT</a>
                <a class="btn btn-danger ml-2" th:href="@{/logout}">LOGOUT</a>
            </h4>
        </div>
    </div>
    <table class="table">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Name</th>
            <th scope="col">Age</th>
            <th scope="col">Address</th>
            <th scope="col">Mobile Number</th>
            <th scope="col">Blood Group</th>
            <th scope="col">Action</th>
        </tr>
        </thead>
        <tbody th:if="${#lists.size(patients) > 0}">
        <tr th:each="patient : ${patients}">
            <th scope="row" th:text="${patientStat.index + 1}">1</th>
            <td th:text="${patient.fullName}">Mark</td>
            <td th:text="${patient.age}">25</td>
            <td th:text="${patient.address}">Ahmedabad</td>
            <td th:text="${patient.mobile}">+918264119367</td>
            <td th:text="${patient.bloodGroup}">O+ve</td>
            <td>
                <a th:href="@{'/add-patient/'+ ${patient.id}}" class="btn btn-danger">UPDATE</a>
                <a th:href="@{'/delete/'+ ${patient.id}}" class="btn btn-primary">DELETE</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

</body>
</html>


In this I have used new thymleaf tags like th:text with session variable, th:each, and aggregate variable Stat. So let’s see one by one.

th:text ---  This replace our dynamic content with text.

session --- This is used to access session values.

aggregate Value – This is used by adding suffix Stat in your variable to access index of list in thymleaf. i.g, patient is my variable the patientStat is my aggragated variable. And I can access index by patienttStat.index.

 

Now let’s add add patient form as below.

 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>HEALTHCARE SYSTEM</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>
</head>
<body>
<h1 class="text-center">ADD PATIENT</h1>
<form th:action="@{/add-patient}" method="post" class="text-center" th:object="${person}">

    <input type="hidden" name="id" th:field="*{id}">

    <div>
        <label> Patient Name : <input type="text" name="fullName" placeholder="Enter Full Name" required="true"
                                      autofocus="true" autocomplete="off" class="input-group" th:field="*{fullName}"/> </label>
    </div>

    <div>
        <label> Patient Age : <input type="number" min="0" name="age" placeholder="Enter Age" required="true"
                                     class="input-group" autocomplete="off" th:field="*{age}"/>
        </label>
    </div>

    <div>
        <label> Patient Mobile Number :
            <input
                    type="tel"
                    maxlength="10" minlength="10"
                    name="mobile" placeholder="Enter Mobile Number"
                    required="true" class="input-group"
                    autocomplete="off" th:field="*{mobile}"/>
        </label>
    </div>

    <div>
        <label> Patient Address : <input type="text" name="address" placeholder="Enter Address" required="true"
                                         class="input-group" autocomplete="off" th:field="*{address}"/>
        </label>
    </div>

    <div>
        <label> Patient Blood Group : <input type="text" name="bloodGroup" placeholder="Enter Blood Group" required="true"
                                             class="input-group" autocomplete="off" th:field="*{bloodGroup}"/>
        </label>
    </div>

    <div>
        <input type="submit" value="Save" class="btn btn-info"/>
        <a th:href="@{/dashboard}" class="btn btn-danger">BACK</a>
    </div>

</form>
</body>
</html>

 

In this I have used th:field thymleaf tag. Which is used for getting value to respected fields. Like when we want to update any form we first need to show them existing value from this we can show them. i.g, th:field= *{field_name}

So now we have added all views which will be needed for this. In next article we will more discuss on the things related to back end means conroller and our business logics.

See you soon. Stay home stay safe.

More Posts

REST APIs / Services with Spring boot darshan1507 - Jun 5
Create a Web application in Spring boot with PostgreSQL (Part-2) darshan1507 - May 25
Create a Web application in Spring boot with PostgreSQL (Part-1) darshan1507 - May 25
Uploading files to AWS S3 Bucket using Spring Boot darshan1507 - Jun 7
Application Properties in Spring Boot thistimeonly32 - Apr 4
Spring framework annotations @Autowire @Component @Bean @Configuration @Value darshan1507 - Jun 5
Spring AOP Interview Questions Lalit Kumar - Dec 30, 2020
Offline pages in Progressive Web Apps dev - Jun 17
3-tier architecture in c# windows application (Part A) mhfaisal - May 12
Part 3 video of pair programming a Perl web app mjg - Jun 13