-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgetting-stared-with-spring-framework.html
391 lines (346 loc) · 81.3 KB
/
getting-stared-with-spring-framework.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
<!DOCTYPE html><html lang="de-ch"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Getting stared with the Spring Framework - Finecloud</title><meta name="description" content="What is the Spring Framework Spring is the world's most popular Java framework and makes programming Java quicker, easier, and safer for everybody. Spring’s focus on speed, simplicity, and productivity. You can select and generate your Spring Package online: https://start.spring.io/ Lets make a Gradle Project,…"><meta name="generator" content="Publii Open-Source CMS for Static Site"><link rel="stylesheet" href="https://www.finecloud.ch/media/plugins/syntaxHighlighter/prism-black.css"><link rel="canonical" href="https://www.finecloud.ch/getting-stared-with-spring-framework.html"><link rel="alternate" type="application/atom+xml" href="https://www.finecloud.ch/feed.xml"><link rel="alternate" type="application/json" href="https://www.finecloud.ch/feed.json"><meta property="og:title" content="Getting stared with the Spring Framework"><meta property="og:site_name" content="Finecloud"><meta property="og:description" content="What is the Spring Framework Spring is the world's most popular Java framework and makes programming Java quicker, easier, and safer for everybody. Spring’s focus on speed, simplicity, and productivity. You can select and generate your Spring Package online: https://start.spring.io/ Lets make a Gradle Project,…"><meta property="og:url" content="https://www.finecloud.ch/getting-stared-with-spring-framework.html"><meta property="og:type" content="article"><link rel="shortcut icon" href="https://www.finecloud.ch/media/website/finecloud.png" type="image/png"><link rel="stylesheet" href="https://www.finecloud.ch/assets/css/style.css?v=39da73365516a098a9b73b721fc970e2"><script type="application/ld+json">{"@context":"http://schema.org","@type":"Article","mainEntityOfPage":{"@type":"WebPage","@id":"https://www.finecloud.ch/getting-stared-with-spring-framework.html"},"headline":"Getting stared with the Spring Framework","datePublished":"2022-09-23T07:41","dateModified":"2022-09-23T07:41","description":"What is the Spring Framework Spring is the world's most popular Java framework and makes programming Java quicker, easier, and safer for everybody. Spring’s focus on speed, simplicity, and productivity. You can select and generate your Spring Package online: https://start.spring.io/ Lets make a Gradle Project,…","author":{"@type":"Person","name":"Finecloud","url":"https://www.finecloud.ch/authors/finecloud/"},"publisher":{"@type":"Organization","name":"Finecloud"}}</script><meta name="google-site-verification" content="seFY9U12uiEq5U3_MyZiX6XWzk0AVFl9zITr2ZKsytY"></head><body><div class="site-container"><header class="top" id="js-header"><a class="logo" href="https://www.finecloud.ch/">Finecloud</a><nav class="navbar js-navbar"><button class="navbar__toggle js-toggle" aria-label="Menu" aria-haspopup="true" aria-expanded="false"><span class="navbar__toggle-box"><span class="navbar__toggle-inner">Menu</span></span></button><ul class="navbar__menu"><li><a href="https://www.finecloud.ch/" target="_self">Blog</a></li><li><a href="https://www.finecloud.ch/tags/" target="_self">Tags</a></li></ul></nav><div class="search"><div class="search__overlay js-search-overlay"><div class="search__overlay-inner"><form action="https://www.finecloud.ch/search.html" class="search__form"><input class="search__input js-search-input" type="search" name="q" placeholder="search..." aria-label="search..." autofocus="autofocus"></form><button class="search__close js-search-close" aria-label="Close">Close</button></div></div><button class="search__btn js-search-btn" aria-label="Search"><svg role="presentation" focusable="false"><use xlink:href="https://www.finecloud.ch/assets/svg/svg-map.svg#search"/></svg></button></div></header><main><article class="post"><div class="hero"><figure class="hero__image hero__image--overlay"><img src="https://www.finecloud.ch/media/website/download.jpg" srcset="https://www.finecloud.ch/media/website/responsive/download-xs.jpg 300w, https://www.finecloud.ch/media/website/responsive/download-sm.jpg 480w, https://www.finecloud.ch/media/website/responsive/download-md.jpg 768w, https://www.finecloud.ch/media/website/responsive/download-lg.jpg 1024w, https://www.finecloud.ch/media/website/responsive/download-xl.jpg 1360w, https://www.finecloud.ch/media/website/responsive/download-2xl.jpg 1600w" sizes="100vw" loading="eager" alt=""></figure><header class="hero__content"><div class="wrapper"><div class="post__meta"><time datetime="2022-09-23T07:41">September 23, 2022</time></div><h1>Getting stared with the Spring Framework</h1></div></header></div><div class="wrapper post__entry"><div class="post__toc"><h3>Table of Contents</h3><ul><li><a href="#mcetoc_1gd9vb6re8m">What is the Spring Framework</a></li><li><a href="#mcetoc_1gd9vb6re8n">What can Spring do</a></li><li><a href="#mcetoc_1gd9vb6re8o">Getting started</a></li><li><a href="#mcetoc_1gd9vsqc28s">Display dynamic content</a></li><li><a href="#mcetoc_1gdfedk589b">Add some Bootstrap</a></li><li><a href="#mcetoc_1gdk6qb94kk">Formatting Dates and Numbers</a></li><li><a href="#mcetoc_1gdk6qb94kl">Introducing Spring Data</a></li><li><a href="#mcetoc_1gdkdrmqkla">Saving a Person</a></li></ul></div><h2 id="mcetoc_1gd9vb6re8m">What is the Spring Framework</h2><p>Spring is the world's most popular Java framework and makes programming Java quicker, easier, and safer for everybody. Spring’s focus on speed, simplicity, and productivity.</p><h2 id="mcetoc_1gd9vb6re8n">What can Spring do</h2><ul><li><strong>Microservices</strong>: Quickly deliver production‑grade features with independently evolvable microservices.</li><li><strong>Reactive</strong>: Spring's asynchronous, nonblocking architecture means you can get more from your computing resources.</li><li><strong>Cloud</strong>: Your code, any cloud—we’ve got you covered. Connect and scale your services, whatever your platform.</li><li><strong>Web apps</strong>: Frameworks for fast, secure, and responsive web applications connected to any data store.</li><li><strong>Serverless</strong>: The ultimate flexibility. Scale up on demand and scale to zero when there’s no demand.</li><li><strong>Event Driven</strong>: Integrate with your enterprise. React to business events. Act on your streaming data in realtime.</li><li><strong>Batch</strong>: Automated tasks. Offline processing of data at a time to suit you.</li></ul><h2 id="mcetoc_1gd9vb6re8o">Getting started</h2><p>You can select and generate your Spring Package online: <a href="https://start.spring.io/">https://start.spring.io/</a></p><p>Lets make a Gradle Project, use Java v17 and add those dependencies:</p><ul><li>Spring Boot DevTools Developer Tools</li><li>Lombok Developer Tools</li><li>Spring Web Web</li><li>Thymeleaf Template Engines</li><li>Spring Data JPA SQL</li><li>H2 Database SQL</li><li>Validation I/O</li></ul><p>Click "Generate" and unzip the file to your IDE Projects and open it with your preferred IDE.</p><p>In the IDE run the <code>PeopledbWebApplication.java</code> Class and open your browser, go to <a href="http://localhost:8080/">http://localhost:8080/</a> you should get a page like this:</p><figure class="post__image"><img loading="lazy" src="https://www.finecloud.ch/media/posts/65/Screenshot-2022-09-19-at-06.18.30.png" alt="" width="1140" height="354" sizes="100vw" srcset="https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-19-at-06.18.30-xs.png 300w, https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-19-at-06.18.30-sm.png 480w, https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-19-at-06.18.30-md.png 768w, https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-19-at-06.18.30-lg.png 1024w, https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-19-at-06.18.30-xl.png 1360w, https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-19-at-06.18.30-2xl.png 1600w"></figure><p>Go back to your IDE and create a new index.html File in the Folder <em>/src/main/resources/static/index.html</em> with this content:</p><pre class="hljs" style="color: #a9b7c6; background: #282b2e none repeat scroll 0% 0%; display: block; overflow-x: auto; padding: 0.5em;"><span class="xml"><span class="hljs-meta" style="color: #bbb529;"><!DOCTYPE html></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string" style="color: #6a8759;">"en"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string" style="color: #6a8759;">"UTF-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">title</span>></span>Hello<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">title</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">body</span>></span>
Hello World
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">html</span>></span></span></pre><p>Rebuild your Project in the IDE and reopen your page on <a href="http://localhost:8080/">http://localhost:8080/</a> and you should see this now:</p><figure class="post__image"><img loading="lazy" src="https://www.finecloud.ch/media/posts/65/Screenshot-2022-09-19-at-06.22.16.png" alt="" width="1140" height="354" sizes="100vw" srcset="https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-19-at-06.22.16-xs.png 300w, https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-19-at-06.22.16-sm.png 480w, https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-19-at-06.22.16-md.png 768w, https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-19-at-06.22.16-lg.png 1024w, https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-19-at-06.22.16-xl.png 1360w, https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-19-at-06.22.16-2xl.png 1600w"></figure><p>Congratulations you just generated your first Spring Web App.</p><h2 id="mcetoc_1gd9vsqc28s">Display dynamic content</h2><p>Let's create a new package called web.controller and lets create a Java class called PeopleController with this content:</p><pre class="hljs" style="color: #a9b7c6; background: #282b2e none repeat scroll 0% 0%; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #cc7832;">package</span> ch.finecloud.peopledbweb.web.controller;
<span class="hljs-keyword" style="color: #cc7832;">import</span> ch.finecloud.peopledbweb.biz.model.Person;
<span class="hljs-keyword" style="color: #cc7832;">import</span> org.springframework.stereotype.Controller;
<span class="hljs-keyword" style="color: #cc7832;">import</span> org.springframework.ui.Model;
<span class="hljs-keyword" style="color: #cc7832;">import</span> org.springframework.web.bind.annotation.GetMapping;
<span class="hljs-keyword" style="color: #cc7832;">import</span> org.springframework.web.bind.annotation.RequestMapping;
<span class="hljs-keyword" style="color: #cc7832;">import</span> java.math.BigDecimal;
<span class="hljs-keyword" style="color: #cc7832;">import</span> java.time.LocalDate;
<span class="hljs-keyword" style="color: #cc7832;">import</span> java.util.List;
<span class="hljs-meta" style="color: #bbb529;">@Controller</span>
<span class="hljs-meta" style="color: #bbb529;">@RequestMapping</span>(<span class="hljs-string" style="color: #6a8759;">"/people"</span>)
<span class="hljs-keyword" style="color: #cc7832;">public</span> <span class="hljs-class"><span class="hljs-keyword" style="color: #cc7832;">class</span> <span class="hljs-title" style="color: #ffc66d;">PeopleController</span> </span>{
<span class="hljs-meta" style="color: #bbb529;">@GetMapping</span>
<span class="hljs-function"><span class="hljs-keyword" style="color: #cc7832;">public</span> String <span class="hljs-title" style="color: #ffc66d;">getPeople</span><span class="hljs-params">(Model model)</span> </span>{
List<Person> people = List.of(
<span class="hljs-keyword" style="color: #cc7832;">new</span> Person(<span class="hljs-number" style="color: #6897bb;">10l</span>, <span class="hljs-string" style="color: #6a8759;">"Jake"</span>, <span class="hljs-string" style="color: #6a8759;">"Snake"</span>, LocalDate.of(<span class="hljs-number" style="color: #6897bb;">1950</span>, <span class="hljs-number" style="color: #6897bb;">1</span>, <span class="hljs-number" style="color: #6897bb;">8</span>), <span class="hljs-keyword" style="color: #cc7832;">new</span> BigDecimal(<span class="hljs-number" style="color: #6897bb;">50000</span>)),
<span class="hljs-keyword" style="color: #cc7832;">new</span> Person(<span class="hljs-number" style="color: #6897bb;">20l</span>, <span class="hljs-string" style="color: #6a8759;">"Sara"</span>, <span class="hljs-string" style="color: #6a8759;">"Smith"</span>, LocalDate.of(<span class="hljs-number" style="color: #6897bb;">1960</span>, <span class="hljs-number" style="color: #6897bb;">2</span>, <span class="hljs-number" style="color: #6897bb;">7</span>), <span class="hljs-keyword" style="color: #cc7832;">new</span> BigDecimal(<span class="hljs-number" style="color: #6897bb;">60000</span>)),
<span class="hljs-keyword" style="color: #cc7832;">new</span> Person(<span class="hljs-number" style="color: #6897bb;">30l</span>, <span class="hljs-string" style="color: #6a8759;">"Johnny"</span>, <span class="hljs-string" style="color: #6a8759;">"Jackson"</span>, LocalDate.of(<span class="hljs-number" style="color: #6897bb;">1970</span>, <span class="hljs-number" style="color: #6897bb;">3</span>, <span class="hljs-number" style="color: #6897bb;">6</span>), <span class="hljs-keyword" style="color: #cc7832;">new</span> BigDecimal(<span class="hljs-number" style="color: #6897bb;">70000</span>)),
<span class="hljs-keyword" style="color: #cc7832;">new</span> Person(<span class="hljs-number" style="color: #6897bb;">40l</span>, <span class="hljs-string" style="color: #6a8759;">"Bonny"</span>, <span class="hljs-string" style="color: #6a8759;">"Norris"</span>, LocalDate.of(<span class="hljs-number" style="color: #6897bb;">1980</span>, <span class="hljs-number" style="color: #6897bb;">4</span>, <span class="hljs-number" style="color: #6897bb;">5</span>), <span class="hljs-keyword" style="color: #cc7832;">new</span> BigDecimal(<span class="hljs-number" style="color: #6897bb;">80000</span>))
);
model.addAttribute(<span class="hljs-string" style="color: #6a8759;">"people"</span>, people);
<span class="hljs-keyword" style="color: #cc7832;">return</span> <span class="hljs-string" style="color: #6a8759;">"people"</span>;
}
}
</pre><p>We're going to create a new HTML file under the resources/templates folder. We call it people.html:</p><pre class="hljs" style="color: #a9b7c6; background: #282b2e none repeat scroll 0% 0%; display: block; overflow-x: auto; padding: 0.5em;"><span class="xml"><span class="hljs-meta" style="color: #bbb529;"><!DOCTYPE html></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string" style="color: #6a8759;">"en"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string" style="color: #6a8759;">"UTF-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">title</span>></span>People<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">title</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">body</span>></span>
here are some people
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">html</span>></span></span></pre><p>If we not open our browser to <a href="http://localhost:8080/people">http://localhost:8080/people</a> we will see that html file loaded. What is the difference between putting an HTML file under static versus under templates? The basic idea is: if you have HTML content that is dynamic and controlled from our Java code, then you need to put that HTML under templates. This will allow us to feed some dynamically generated content into this page and make a more interesting web page. Essentially, whereas static web pages we put under the static folder here are not capable of being fed data from our Java code directly.<br><br>Let's actually put sort of put a little bit of something dynamic in here. Let's make another package under the main package, and call this one biz.model with a Java Class Person with the following content: </p><pre class="hljs" style="color: #a9b7c6; background: #282b2e none repeat scroll 0% 0%; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #cc7832;">package</span> ch.finecloud.peopledbweb.biz.model;
<span class="hljs-keyword" style="color: #cc7832;">import</span> lombok.AllArgsConstructor;
<span class="hljs-keyword" style="color: #cc7832;">import</span> lombok.Data;
<span class="hljs-keyword" style="color: #cc7832;">import</span> java.math.BigDecimal;
<span class="hljs-keyword" style="color: #cc7832;">import</span> java.time.LocalDate;
<span class="hljs-meta" style="color: #bbb529;">@Data</span>
<span class="hljs-meta" style="color: #bbb529;">@AllArgsConstructor</span>
<span class="hljs-keyword" style="color: #cc7832;">public</span> <span class="hljs-class"><span class="hljs-keyword" style="color: #cc7832;">class</span> <span class="hljs-title" style="color: #ffc66d;">Person</span> </span>{
<span class="hljs-keyword" style="color: #cc7832;">private</span> Long id;
<span class="hljs-keyword" style="color: #cc7832;">private</span> String firstName;
<span class="hljs-keyword" style="color: #cc7832;">private</span> String lastName;
<span class="hljs-keyword" style="color: #cc7832;">private</span> LocalDate dob;
<span class="hljs-keyword" style="color: #cc7832;">private</span> BigDecimal salary;
}
</pre><p>Normally we would create or generate getters and setters and all that good stuff in that Java Class. However, now that we're using the spring framework with spring boot and we got all this cool added functionality here, we can do something a little more interesting. We're going to use a special annotation from a library called Lombok, and the annotation we will use is called @Data. This annotation will will allow the Lombok Library to scan this class, find these fields and generate getters and setters and a constructor and an equals and a hash code and a two string method, all for us whenever we need it.</p><p>Next we also need to change our people.html file like so:</p><pre class="hljs" style="color: #a9b7c6; background: #282b2e none repeat scroll 0% 0%; display: block; overflow-x: auto; padding: 0.5em;"><span class="xml"><span class="hljs-meta" style="color: #bbb529;"><!DOCTYPE html></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string" style="color: #6a8759;">"en"</span> <span class="hljs-attr">xmlns:th</span>=<span class="hljs-string" style="color: #6a8759;">"http://www.thymeleaf.org"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string" style="color: #6a8759;">"UTF-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">title</span>></span>People<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">title</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">body</span>></span>
here are some people:
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">ol</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">li</span> <span class="hljs-attr">th:each</span>=<span class="hljs-string" style="color: #6a8759;">"person: $</span></span></span><span class="hljs-template-variable" style="color: #629755;">{people}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string" style="color: #6a8759;">"</span> <span class="hljs-attr">th:text</span>=<span class="hljs-string" style="color: #6a8759;">"$</span></span></span><span class="hljs-template-variable" style="color: #629755;">{person}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string" style="color: #6a8759;">"</span>></span>My Junk Person<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">li</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">ol</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">html</span>></span></span></pre><p>If we now rebuild our Project and refresh our people page we receive this dynamic content:</p><figure class="post__image"><img loading="lazy" src="https://www.finecloud.ch/media/posts/65/Screenshot-2022-09-20-at-08.58.49.png" alt="" width="1304" height="480" sizes="100vw" srcset="https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-20-at-08.58.49-xs.png 300w, https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-20-at-08.58.49-sm.png 480w, https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-20-at-08.58.49-md.png 768w, https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-20-at-08.58.49-lg.png 1024w, https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-20-at-08.58.49-xl.png 1360w, https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-20-at-08.58.49-2xl.png 1600w"></figure><h2 id="mcetoc_1gdfedk589b">Add some Bootstrap</h2><p>Let's make the Table more beautiful by using the bootstrap css framework:</p><pre class="hljs" style="color: #a9b7c6; background: #282b2e none repeat scroll 0% 0%; display: block; overflow-x: auto; padding: 0.5em;"><span class="xml"><span class="hljs-meta" style="color: #bbb529;"><!DOCTYPE html></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string" style="color: #6a8759;">"en"</span> <span class="hljs-attr">xmlns:th</span>=<span class="hljs-string" style="color: #6a8759;">"http://www.thymeleaf.org"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string" style="color: #6a8759;">"UTF-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string" style="color: #6a8759;">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string" style="color: #6a8759;">"width=device-width, initial-scale=1"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">title</span>></span>People<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">title</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">link</span> <span class="hljs-attr">href</span>=<span class="hljs-string" style="color: #6a8759;">"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string" style="color: #6a8759;">"stylesheet"</span> <span class="hljs-attr">integrity</span>=<span class="hljs-string" style="color: #6a8759;">"sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"</span> <span class="hljs-attr">crossorigin</span>=<span class="hljs-string" style="color: #6a8759;">"anonymous"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string" style="color: #6a8759;">"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"</span> <span class="hljs-attr">integrity</span>=<span class="hljs-string" style="color: #6a8759;">"sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"</span> <span class="hljs-attr">crossorigin</span>=<span class="hljs-string" style="color: #6a8759;">"anonymous"</span>></span><span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #6a8759;">"col-8 mx-auto"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #6a8759;">"table"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">thead</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">th</span> <span class="hljs-attr">scope</span>=<span class="hljs-string" style="color: #6a8759;">"col"</span>></span>ID<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">th</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">th</span> <span class="hljs-attr">scope</span>=<span class="hljs-string" style="color: #6a8759;">"col"</span>></span>Last Name<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">th</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">th</span> <span class="hljs-attr">scope</span>=<span class="hljs-string" style="color: #6a8759;">"col"</span>></span>First Name<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">th</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">th</span> <span class="hljs-attr">scope</span>=<span class="hljs-string" style="color: #6a8759;">"col"</span>></span>DOB<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">th</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">th</span> <span class="hljs-attr">scope</span>=<span class="hljs-string" style="color: #6a8759;">"col"</span>></span>Salary<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">th</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">tr</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">thead</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">tbody</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">tr</span> <span class="hljs-attr">th:each</span>=<span class="hljs-string" style="color: #6a8759;">"person : $</span></span></span><span class="hljs-template-variable" style="color: #629755;">{people}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string" style="color: #6a8759;">"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">th</span> <span class="hljs-attr">scope</span>=<span class="hljs-string" style="color: #6a8759;">"row"</span> <span class="hljs-attr">th:text</span>=<span class="hljs-string" style="color: #6a8759;">"$</span></span></span><span class="hljs-template-variable" style="color: #629755;">{person.id}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string" style="color: #6a8759;">"</span>></span>1<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">th</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">td</span> <span class="hljs-attr">th:text</span>=<span class="hljs-string" style="color: #6a8759;">"$</span></span></span><span class="hljs-template-variable" style="color: #629755;">{person.lastName}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string" style="color: #6a8759;">"</span>></span>Mark<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">td</span> <span class="hljs-attr">th:text</span>=<span class="hljs-string" style="color: #6a8759;">"$</span></span></span><span class="hljs-template-variable" style="color: #629755;">{person.firstName}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string" style="color: #6a8759;">"</span>></span>Otto<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">td</span> <span class="hljs-attr">th:text</span>=<span class="hljs-string" style="color: #6a8759;">"$</span></span></span><span class="hljs-template-variable" style="color: #629755;">{person.dob}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string" style="color: #6a8759;">"</span>></span>@mdo<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">td</span> <span class="hljs-attr">th:text</span>=<span class="hljs-string" style="color: #6a8759;">"$</span></span></span><span class="hljs-template-variable" style="color: #629755;">{person.salary}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string" style="color: #6a8759;">"</span>></span>@mdo<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">td</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">tr</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">tbody</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">table</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">html</span>></span></span></pre><p>If we now rebuild our Project and refresh our people page we receive this dynamic content:</p><figure class="post__image"><img loading="lazy" src="https://www.finecloud.ch/media/posts/65/Screenshot-2022-09-21-at-09.14.36.png" alt="" width="1406" height="373" sizes="100vw" srcset="https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-21-at-09.14.36-xs.png 300w, https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-21-at-09.14.36-sm.png 480w, https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-21-at-09.14.36-md.png 768w, https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-21-at-09.14.36-lg.png 1024w, https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-21-at-09.14.36-xl.png 1360w, https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-21-at-09.14.36-2xl.png 1600w"></figure><h2 id="mcetoc_1gdk6qb94kk">Formatting Dates and Numbers</h2><p>To format the Dates and Currency (Salary) we should not modify our Person.java Class, since this Class is part of the Service Layer, not the Presentation Layer. What we should do instead is create new Formatter Classes which make use of the Spring Formatter and can act directory on. the Presentation Layer:</p><p>peopledbweb/web/formatter/BigDecimalFormatter.java</p><pre class="hljs" style="color: #a9b7c6; background: #282b2e none repeat scroll 0% 0%; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-selector-tag" style="color: #cc7832;">package</span> <span class="hljs-selector-tag" style="color: #cc7832;">ch</span><span class="hljs-selector-class" style="color: #e8bf6a;">.finecloud</span><span class="hljs-selector-class" style="color: #e8bf6a;">.peopledbweb</span><span class="hljs-selector-class" style="color: #e8bf6a;">.web</span><span class="hljs-selector-class" style="color: #e8bf6a;">.formatter</span>;
<span class="hljs-selector-tag" style="color: #cc7832;">import</span> <span class="hljs-selector-tag" style="color: #cc7832;">org</span><span class="hljs-selector-class" style="color: #e8bf6a;">.springframework</span><span class="hljs-selector-class" style="color: #e8bf6a;">.format</span><span class="hljs-selector-class" style="color: #e8bf6a;">.Formatter</span>;
<span class="hljs-selector-tag" style="color: #cc7832;">import</span> <span class="hljs-selector-tag" style="color: #cc7832;">org</span><span class="hljs-selector-class" style="color: #e8bf6a;">.springframework</span><span class="hljs-selector-class" style="color: #e8bf6a;">.stereotype</span><span class="hljs-selector-class" style="color: #e8bf6a;">.Component</span>;
<span class="hljs-selector-tag" style="color: #cc7832;">import</span> <span class="hljs-selector-tag" style="color: #cc7832;">java</span><span class="hljs-selector-class" style="color: #e8bf6a;">.math</span><span class="hljs-selector-class" style="color: #e8bf6a;">.BigDecimal</span>;
<span class="hljs-selector-tag" style="color: #cc7832;">import</span> <span class="hljs-selector-tag" style="color: #cc7832;">java</span><span class="hljs-selector-class" style="color: #e8bf6a;">.text</span><span class="hljs-selector-class" style="color: #e8bf6a;">.NumberFormat</span>;
<span class="hljs-selector-tag" style="color: #cc7832;">import</span> <span class="hljs-selector-tag" style="color: #cc7832;">java</span><span class="hljs-selector-class" style="color: #e8bf6a;">.text</span><span class="hljs-selector-class" style="color: #e8bf6a;">.ParseException</span>;
<span class="hljs-selector-tag" style="color: #cc7832;">import</span> <span class="hljs-selector-tag" style="color: #cc7832;">java</span><span class="hljs-selector-class" style="color: #e8bf6a;">.util</span><span class="hljs-selector-class" style="color: #e8bf6a;">.Locale</span>;
@<span class="hljs-keyword" style="color: #cc7832;">Component</span>
public class BigDecimalFormatter implements Formatter<BigDecimal> {
@<span class="hljs-keyword" style="color: #cc7832;">Override</span>
public BigDecimal parse(String text, Locale locale) throws ParseException {
<span class="hljs-selector-tag" style="color: #cc7832;">return</span> <span class="hljs-selector-tag" style="color: #cc7832;">null</span>;
}
@<span class="hljs-keyword" style="color: #cc7832;">Override</span>
public String print(BigDecimal object, Locale locale) {
<span class="hljs-selector-tag" style="color: #cc7832;">return</span> <span class="hljs-selector-tag" style="color: #cc7832;">NumberFormat</span><span class="hljs-selector-class" style="color: #e8bf6a;">.getCurrencyInstance</span>(<span class="hljs-selector-tag" style="color: #cc7832;">locale</span>)<span class="hljs-selector-class" style="color: #e8bf6a;">.format</span>(<span class="hljs-selector-tag" style="color: #cc7832;">object</span>);
}
}
</pre><p>peopledbweb/web/formatter/LocalDateFormatter.java</p><pre class="hljs" style="color: #a9b7c6; background: #282b2e none repeat scroll 0% 0%; display: block; overflow-x: auto; padding: 0.5em;">package ch<span class="hljs-selector-class" style="color: #e8bf6a;">.finecloud</span><span class="hljs-selector-class" style="color: #e8bf6a;">.peopledbweb</span><span class="hljs-selector-class" style="color: #e8bf6a;">.web</span><span class="hljs-selector-class" style="color: #e8bf6a;">.formatter</span>;
import org<span class="hljs-selector-class" style="color: #e8bf6a;">.springframework</span><span class="hljs-selector-class" style="color: #e8bf6a;">.format</span><span class="hljs-selector-class" style="color: #e8bf6a;">.Formatter</span>;
import org<span class="hljs-selector-class" style="color: #e8bf6a;">.springframework</span><span class="hljs-selector-class" style="color: #e8bf6a;">.stereotype</span><span class="hljs-selector-class" style="color: #e8bf6a;">.Component</span>;
import java<span class="hljs-selector-class" style="color: #e8bf6a;">.text</span><span class="hljs-selector-class" style="color: #e8bf6a;">.ParseException</span>;
import java<span class="hljs-selector-class" style="color: #e8bf6a;">.time</span><span class="hljs-selector-class" style="color: #e8bf6a;">.LocalDate</span>;
import java<span class="hljs-selector-class" style="color: #e8bf6a;">.time</span><span class="hljs-selector-class" style="color: #e8bf6a;">.format</span><span class="hljs-selector-class" style="color: #e8bf6a;">.DateTimeFormatter</span>;
import java<span class="hljs-selector-class" style="color: #e8bf6a;">.util</span><span class="hljs-selector-class" style="color: #e8bf6a;">.Locale</span>;
<span class="hljs-variable" style="color: #629755;">@Component</span>
public class LocalDateFormatter implements Formatter<LocalDate> {
private final DateTimeFormatter dateTimeFormatter = DateTimeFormatter<span class="hljs-selector-class" style="color: #e8bf6a;">.ofPattern</span>(<span class="hljs-string" style="color: #6a8759;">"dd. MMMM, yyyy"</span>);
<span class="hljs-variable" style="color: #629755;">@Override</span>
public LocalDate parse(String text, Locale locale) throws ParseException {
return LocalDate<span class="hljs-selector-class" style="color: #e8bf6a;">.parse</span>(text, dateTimeFormatter);
}
<span class="hljs-variable" style="color: #629755;">@Override</span>
public String print(LocalDate object, Locale locale) {
return dateTimeFormatter<span class="hljs-selector-class" style="color: #e8bf6a;">.format</span>(object);
}
}
</pre><p>we also need to put the dob and salary table declaration into one more pair of curly braces:</p><p><code> <td th:text="${{person.dob}}">@mdo</td></code><br><code> <td th:text="${{person.salary}}">@mdo</td></code></p><p>If we not rebuild our Project we get beck those values nicely formatted:</p><figure class="post__image"><img loading="lazy" src="https://www.finecloud.ch/media/posts/65/Screenshot-2022-09-21-at-11.10.16-2.png" alt="" width="1442" height="374" sizes="100vw" srcset="https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-21-at-11.10.16-2-xs.png 300w, https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-21-at-11.10.16-2-sm.png 480w, https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-21-at-11.10.16-2-md.png 768w, https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-21-at-11.10.16-2-lg.png 1024w, https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-21-at-11.10.16-2-xl.png 1360w, https://www.finecloud.ch/media/posts/65/responsive/Screenshot-2022-09-21-at-11.10.16-2-2xl.png 1600w"></figure><h2 id="mcetoc_1gdk6qb94kl">Introducing Spring Data</h2><p>Until now we have worked with very static data. Lets change this by adding real <a href="https://en.wikipedia.org/wiki/Create,_read,_update_and_delete" rel="nofollow">CRUD</a> functionality.</p><p>Now we're going to introduce the third part of our three tier architecture. And that is the data. Lets create a new package called <em>data</em>. Under the data package, we create a new Java Interfacee called <em>PersonRepository</em> with this content:</p><pre class="hljs" style="color: #a9b7c6; background: #282b2e none repeat scroll 0% 0%; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #cc7832;">package</span> ch.finecloud.peopledbweb.data;
<span class="hljs-keyword" style="color: #cc7832;">import</span> ch.finecloud.peopledbweb.biz.model.Person;
<span class="hljs-keyword" style="color: #cc7832;">import</span> org.springframework.data.repository.CrudRepository;
<span class="hljs-keyword" style="color: #cc7832;">import</span> org.springframework.stereotype.Repository;
<span class="hljs-meta" style="color: #bbb529;">@Repository</span>
<span class="hljs-keyword" style="color: #cc7832;">public</span> <span class="hljs-class"><span class="hljs-keyword" style="color: #cc7832;">interface</span> <span class="hljs-title" style="color: #ffc66d;">PersonRepository</span> <span class="hljs-keyword" style="color: #cc7832;">extends</span> <span class="hljs-title" style="color: #ffc66d;">CrudRepository</span><<span class="hljs-title" style="color: #ffc66d;">Person</span>, <span class="hljs-title" style="color: #ffc66d;">Long</span>> </span>{
}
</pre><p>The first will be the type of the domain model class that I want this repository to be responsible for or work with, and that would be our person class. The other type, though, which I will separate with a comma. The second type will be the data type of the ID property of the person class, that would be, in our case, long. And then I need to annotate this interface so that when spring is starting up or in this case, spring<br>data is starting up. It can scan through all of the classes that I have here, and it will find this interface and know that it should treat this interface as an actual data repository.<br>To do that, we will use another annotation of the spring framework, which is <em>@Repository. </em>That's all I have to do to make a repository with full crud capabilities.<br><br>We need to go into the person class now and make a few little alterations here:</p><pre class="hljs" style="color: #a9b7c6; background: #282b2e none repeat scroll 0% 0%; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #cc7832;">package</span> ch.finecloud.peopledbweb.biz.model;
<span class="hljs-keyword" style="color: #cc7832;">import</span> lombok.AllArgsConstructor;
<span class="hljs-keyword" style="color: #cc7832;">import</span> lombok.Data;
<span class="hljs-keyword" style="color: #cc7832;">import</span> lombok.NoArgsConstructor;
<span class="hljs-keyword" style="color: #cc7832;">import</span> javax.persistence.Entity;
<span class="hljs-keyword" style="color: #cc7832;">import</span> javax.persistence.GeneratedValue;
<span class="hljs-keyword" style="color: #cc7832;">import</span> javax.persistence.Id;
<span class="hljs-keyword" style="color: #cc7832;">import</span> java.math.BigDecimal;
<span class="hljs-keyword" style="color: #cc7832;">import</span> java.time.LocalDate;
<span class="hljs-meta" style="color: #bbb529;">@Data</span>
<span class="hljs-meta" style="color: #bbb529;">@AllArgsConstructor</span>
<span class="hljs-meta" style="color: #bbb529;">@NoArgsConstructor</span>
<span class="hljs-meta" style="color: #bbb529;">@Entity</span>
<span class="hljs-keyword" style="color: #cc7832;">public</span> <span class="hljs-class"><span class="hljs-keyword" style="color: #cc7832;">class</span> <span class="hljs-title" style="color: #ffc66d;">Person</span> </span>{
<span class="hljs-meta" style="color: #bbb529;">@Id</span>
<span class="hljs-meta" style="color: #bbb529;">@GeneratedValue</span>
<span class="hljs-keyword" style="color: #cc7832;">private</span> Long id;
<span class="hljs-keyword" style="color: #cc7832;">private</span> String firstName;
<span class="hljs-keyword" style="color: #cc7832;">private</span> String lastName;
<span class="hljs-keyword" style="color: #cc7832;">private</span> LocalDate dob;
<span class="hljs-keyword" style="color: #cc7832;">private</span> BigDecimal salary;
}
</pre><p>Lets create a Class to load the Persons:</p><pre class="hljs" style="color: #a9b7c6; background: #282b2e none repeat scroll 0% 0%; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #cc7832;">package</span> ch.finecloud.peopledbweb.data;
<span class="hljs-keyword" style="color: #cc7832;">import</span> ch.finecloud.peopledbweb.biz.model.Person;
<span class="hljs-keyword" style="color: #cc7832;">import</span> org.springframework.boot.ApplicationArguments;
<span class="hljs-keyword" style="color: #cc7832;">import</span> org.springframework.boot.ApplicationRunner;
<span class="hljs-keyword" style="color: #cc7832;">import</span> org.springframework.stereotype.Component;
<span class="hljs-keyword" style="color: #cc7832;">import</span> java.math.BigDecimal;
<span class="hljs-keyword" style="color: #cc7832;">import</span> java.time.LocalDate;
<span class="hljs-keyword" style="color: #cc7832;">import</span> java.util.List;
<span class="hljs-meta" style="color: #bbb529;">@Component</span>
<span class="hljs-keyword" style="color: #cc7832;">public</span> <span class="hljs-class"><span class="hljs-keyword" style="color: #cc7832;">class</span> <span class="hljs-title" style="color: #ffc66d;">PersonDataLoader</span> <span class="hljs-keyword" style="color: #cc7832;">implements</span> <span class="hljs-title" style="color: #ffc66d;">ApplicationRunner</span> </span>{
<span class="hljs-keyword" style="color: #cc7832;">private</span> PersonRepository personRepository;
<span class="hljs-function"><span class="hljs-keyword" style="color: #cc7832;">public</span> <span class="hljs-title" style="color: #ffc66d;">PersonDataLoader</span><span class="hljs-params">(PersonRepository personRepository)</span> </span>{
<span class="hljs-keyword" style="color: #cc7832;">this</span>.personRepository = personRepository;
}
<span class="hljs-meta" style="color: #bbb529;">@Override</span>
<span class="hljs-function"><span class="hljs-keyword" style="color: #cc7832;">public</span> <span class="hljs-keyword" style="color: #cc7832;">void</span> <span class="hljs-title" style="color: #ffc66d;">run</span><span class="hljs-params">(ApplicationArguments args)</span> <span class="hljs-keyword" style="color: #cc7832;">throws</span> Exception </span>{
<span class="hljs-keyword" style="color: #cc7832;">if</span> (personRepository.count() == <span class="hljs-number" style="color: #6897bb;">0</span>) {
List<Person> people = List.of(
<span class="hljs-keyword" style="color: #cc7832;">new</span> Person(<span class="hljs-keyword" style="color: #cc7832;">null</span>, <span class="hljs-string" style="color: #6a8759;">"Pete"</span>, <span class="hljs-string" style="color: #6a8759;">"Snake"</span>, LocalDate.of(<span class="hljs-number" style="color: #6897bb;">1950</span>, <span class="hljs-number" style="color: #6897bb;">1</span>, <span class="hljs-number" style="color: #6897bb;">8</span>), <span class="hljs-keyword" style="color: #cc7832;">new</span> BigDecimal(<span class="hljs-number" style="color: #6897bb;">50000</span>)),
<span class="hljs-keyword" style="color: #cc7832;">new</span> Person(<span class="hljs-keyword" style="color: #cc7832;">null</span>, <span class="hljs-string" style="color: #6a8759;">"Jennifer"</span>, <span class="hljs-string" style="color: #6a8759;">"Smith"</span>, LocalDate.of(<span class="hljs-number" style="color: #6897bb;">1960</span>, <span class="hljs-number" style="color: #6897bb;">2</span>, <span class="hljs-number" style="color: #6897bb;">7</span>), <span class="hljs-keyword" style="color: #cc7832;">new</span> BigDecimal(<span class="hljs-number" style="color: #6897bb;">60000</span>)),
<span class="hljs-keyword" style="color: #cc7832;">new</span> Person(<span class="hljs-keyword" style="color: #cc7832;">null</span>, <span class="hljs-string" style="color: #6a8759;">"Mark"</span>, <span class="hljs-string" style="color: #6a8759;">"Jackson"</span>, LocalDate.of(<span class="hljs-number" style="color: #6897bb;">1970</span>, <span class="hljs-number" style="color: #6897bb;">3</span>, <span class="hljs-number" style="color: #6897bb;">6</span>), <span class="hljs-keyword" style="color: #cc7832;">new</span> BigDecimal(<span class="hljs-number" style="color: #6897bb;">70000</span>)),
<span class="hljs-keyword" style="color: #cc7832;">new</span> Person(<span class="hljs-keyword" style="color: #cc7832;">null</span>, <span class="hljs-string" style="color: #6a8759;">"Vishnu"</span>, <span class="hljs-string" style="color: #6a8759;">"Norris"</span>, LocalDate.of(<span class="hljs-number" style="color: #6897bb;">1971</span>, <span class="hljs-number" style="color: #6897bb;">3</span>, <span class="hljs-number" style="color: #6897bb;">6</span>), <span class="hljs-keyword" style="color: #cc7832;">new</span> BigDecimal(<span class="hljs-number" style="color: #6897bb;">70000</span>)),
<span class="hljs-keyword" style="color: #cc7832;">new</span> Person(<span class="hljs-keyword" style="color: #cc7832;">null</span>, <span class="hljs-string" style="color: #6a8759;">"Alice"</span>, <span class="hljs-string" style="color: #6a8759;">"Jane"</span>, LocalDate.of(<span class="hljs-number" style="color: #6897bb;">1972</span>, <span class="hljs-number" style="color: #6897bb;">3</span>, <span class="hljs-number" style="color: #6897bb;">6</span>), <span class="hljs-keyword" style="color: #cc7832;">new</span> BigDecimal(<span class="hljs-number" style="color: #6897bb;">70000</span>)),
<span class="hljs-keyword" style="color: #cc7832;">new</span> Person(<span class="hljs-keyword" style="color: #cc7832;">null</span>, <span class="hljs-string" style="color: #6a8759;">"Daniel"</span>, <span class="hljs-string" style="color: #6a8759;">"Norris"</span>, LocalDate.of(<span class="hljs-number" style="color: #6897bb;">1980</span>, <span class="hljs-number" style="color: #6897bb;">4</span>, <span class="hljs-number" style="color: #6897bb;">5</span>), <span class="hljs-keyword" style="color: #cc7832;">new</span> BigDecimal(<span class="hljs-number" style="color: #6897bb;">80000</span>))
);
personRepository.saveAll(people);
}
}
}
</pre><p>we also need to modify our <em>PeopleController</em>:</p><pre class="hljs" style="color: #a9b7c6; background: #282b2e none repeat scroll 0% 0%; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #cc7832;">package</span> ch.finecloud.peopledbweb.web.controller;
<span class="hljs-keyword" style="color: #cc7832;">import</span> ch.finecloud.peopledbweb.biz.model.Person;
<span class="hljs-keyword" style="color: #cc7832;">import</span> ch.finecloud.peopledbweb.data.PersonRepository;
<span class="hljs-keyword" style="color: #cc7832;">import</span> org.springframework.stereotype.Controller;
<span class="hljs-keyword" style="color: #cc7832;">import</span> org.springframework.web.bind.annotation.GetMapping;
<span class="hljs-keyword" style="color: #cc7832;">import</span> org.springframework.web.bind.annotation.ModelAttribute;
<span class="hljs-keyword" style="color: #cc7832;">import</span> org.springframework.web.bind.annotation.RequestMapping;
<span class="hljs-meta" style="color: #bbb529;">@Controller</span>
<span class="hljs-meta" style="color: #bbb529;">@RequestMapping</span>(<span class="hljs-string" style="color: #6a8759;">"/people"</span>)
<span class="hljs-keyword" style="color: #cc7832;">public</span> <span class="hljs-class"><span class="hljs-keyword" style="color: #cc7832;">class</span> <span class="hljs-title" style="color: #ffc66d;">PeopleController</span> </span>{
<span class="hljs-keyword" style="color: #cc7832;">private</span> PersonRepository personRepository;
<span class="hljs-function"><span class="hljs-keyword" style="color: #cc7832;">public</span> <span class="hljs-title" style="color: #ffc66d;">PeopleController</span><span class="hljs-params">(PersonRepository personRepository)</span> </span>{
<span class="hljs-keyword" style="color: #cc7832;">this</span>.personRepository = personRepository;
}
<span class="hljs-meta" style="color: #bbb529;">@ModelAttribute</span>(<span class="hljs-string" style="color: #6a8759;">"people"</span>)
<span class="hljs-function"><span class="hljs-keyword" style="color: #cc7832;">public</span> Iterable<Person> <span class="hljs-title" style="color: #ffc66d;">getPeople</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword" style="color: #cc7832;">return</span> personRepository.findAll();
}
<span class="hljs-meta" style="color: #bbb529;">@GetMapping</span>
<span class="hljs-function"><span class="hljs-keyword" style="color: #cc7832;">public</span> String <span class="hljs-title" style="color: #ffc66d;">showPeoplePage</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword" style="color: #cc7832;">return</span> <span class="hljs-string" style="color: #6a8759;">"people"</span>;
}
}
</pre><h2 id="mcetoc_1gdkdrmqkla">Saving a Person</h2><p>To provide the function to also add new Persons, we first need to create a form in the WebUI to create new People Records:</p><pre class="hljs" style="color: #a9b7c6; background: #282b2e none repeat scroll 0% 0%; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-meta" style="color: #bbb529;"><!DOCTYPE html></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string" style="color: #6a8759;">"en"</span> <span class="hljs-attr">xmlns:th</span>=<span class="hljs-string" style="color: #6a8759;">"http://www.thymeleaf.org"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string" style="color: #6a8759;">"UTF-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string" style="color: #6a8759;">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string" style="color: #6a8759;">"width=device-width, initial-scale=1"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">title</span>></span>People<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">title</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">link</span> <span class="hljs-attr">href</span>=<span class="hljs-string" style="color: #6a8759;">"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string" style="color: #6a8759;">"stylesheet"</span> <span class="hljs-attr">integrity</span>=<span class="hljs-string" style="color: #6a8759;">"sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"</span> <span class="hljs-attr">crossorigin</span>=<span class="hljs-string" style="color: #6a8759;">"anonymous"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string" style="color: #6a8759;">"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"</span> <span class="hljs-attr">integrity</span>=<span class="hljs-string" style="color: #6a8759;">"sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"</span> <span class="hljs-attr">crossorigin</span>=<span class="hljs-string" style="color: #6a8759;">"anonymous"</span>></span><span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #6a8759;">"col-md-8 col-sm-10 mx-auto mt-5 my-5"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">h2</span>></span>People List<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #6a8759;">"table table-bordered table-sm"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">thead</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">th</span> <span class="hljs-attr">scope</span>=<span class="hljs-string" style="color: #6a8759;">"col"</span>></span>ID<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">th</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">th</span> <span class="hljs-attr">scope</span>=<span class="hljs-string" style="color: #6a8759;">"col"</span>></span>Last Name<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">th</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">th</span> <span class="hljs-attr">scope</span>=<span class="hljs-string" style="color: #6a8759;">"col"</span>></span>First Name<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">th</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">th</span> <span class="hljs-attr">scope</span>=<span class="hljs-string" style="color: #6a8759;">"col"</span>></span>DOB<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">th</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">th</span> <span class="hljs-attr">scope</span>=<span class="hljs-string" style="color: #6a8759;">"col"</span>></span>EMail<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">th</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">th</span> <span class="hljs-attr">scope</span>=<span class="hljs-string" style="color: #6a8759;">"col"</span>></span>Salary<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">th</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">tr</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">thead</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">tbody</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">tr</span> <span class="hljs-attr">th:if</span>=<span class="hljs-string" style="color: #6a8759;">"${#lists.isEmpty(people)}"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">td</span> <span class="hljs-attr">colspan</span>=<span class="hljs-string" style="color: #6a8759;">"6"</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #6a8759;">"text-center"</span>></span>No Data<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">td</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">tr</span> <span class="hljs-attr">th:each</span>=<span class="hljs-string" style="color: #6a8759;">"person : ${people}"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">th</span> <span class="hljs-attr">scope</span>=<span class="hljs-string" style="color: #6a8759;">"row"</span> <span class="hljs-attr">th:text</span>=<span class="hljs-string" style="color: #6a8759;">"${person.id}"</span>></span>1<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">th</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">td</span> <span class="hljs-attr">th:text</span>=<span class="hljs-string" style="color: #6a8759;">"${person.lastName}"</span>></span>Mark<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">td</span> <span class="hljs-attr">th:text</span>=<span class="hljs-string" style="color: #6a8759;">"${person.firstName}"</span>></span>Otto<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">td</span> <span class="hljs-attr">th:text</span>=<span class="hljs-string" style="color: #6a8759;">"${{person.dob}}"</span>></span>@mdo<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">td</span> <span class="hljs-attr">th:text</span>=<span class="hljs-string" style="color: #6a8759;">"${person.email}"</span>></span>Otto<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">td</span> <span class="hljs-attr">th:text</span>=<span class="hljs-string" style="color: #6a8759;">"${{person.salary}}"</span>></span>@mdo<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">td</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">tr</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">tbody</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">table</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">h2</span>></span>Person Form<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">form</span> <span class="hljs-attr">th:object</span>=<span class="hljs-string" style="color: #6a8759;">"${person}"</span> <span class="hljs-attr">method</span>=<span class="hljs-string" style="color: #6a8759;">"post"</span> <span class="hljs-attr">novalidate</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #6a8759;">"mb-3"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string" style="color: #6a8759;">"firstName"</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #6a8759;">"form-label"</span>></span>First Name<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">label</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string" style="color: #6a8759;">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #6a8759;">"form-control"</span> <span class="hljs-attr">id</span>=<span class="hljs-string" style="color: #6a8759;">"firstName"</span> <span class="hljs-attr">th:field</span>=<span class="hljs-string" style="color: #6a8759;">"*{firstName}"</span> <span class="hljs-attr">th:errorclass</span>=<span class="hljs-string" style="color: #6a8759;">"is-invalid"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string" style="color: #6a8759;">"firstNameHelp"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string" style="color: #6a8759;">"validationFirstName"</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #6a8759;">"invalid-feedback"</span> <span class="hljs-attr">th:errors</span>=<span class="hljs-string" style="color: #6a8759;">"*{firstName}"</span>></span>
Please choose a username.
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #6a8759;">"mb-3"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string" style="color: #6a8759;">"lastName"</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #6a8759;">"form-label"</span>></span>Last Name<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">label</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string" style="color: #6a8759;">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #6a8759;">"form-control"</span> <span class="hljs-attr">id</span>=<span class="hljs-string" style="color: #6a8759;">"lastName"</span> <span class="hljs-attr">th:field</span>=<span class="hljs-string" style="color: #6a8759;">"*{lastName}"</span> <span class="hljs-attr">th:errorclass</span>=<span class="hljs-string" style="color: #6a8759;">"is-invalid"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string" style="color: #6a8759;">"lastNameHelp"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string" style="color: #6a8759;">"validationLastName"</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #6a8759;">"invalid-feedback"</span> <span class="hljs-attr">th:errors</span>=<span class="hljs-string" style="color: #6a8759;">"*{lastName}"</span>></span>
Please choose a username.
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #6a8759;">"mb-3"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string" style="color: #6a8759;">"dob"</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #6a8759;">"form-label"</span>></span>Date of Birth<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">label</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string" style="color: #6a8759;">"date"</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #6a8759;">"form-control"</span> <span class="hljs-attr">id</span>=<span class="hljs-string" style="color: #6a8759;">"dob"</span> <span class="hljs-attr">th:field</span>=<span class="hljs-string" style="color: #6a8759;">"*{dob}"</span> <span class="hljs-attr">th:errorclass</span>=<span class="hljs-string" style="color: #6a8759;">"is-invalid"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string" style="color: #6a8759;">"dobHelp"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string" style="color: #6a8759;">"validationDOB"</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #6a8759;">"invalid-feedback"</span> <span class="hljs-attr">th:errors</span>=<span class="hljs-string" style="color: #6a8759;">"*{dob}"</span>></span>
Please choose a username.
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #6a8759;">"mb-3"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string" style="color: #6a8759;">"email"</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #6a8759;">"form-label"</span>></span>Email address<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">label</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string" style="color: #6a8759;">"email"</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #6a8759;">"form-control"</span> <span class="hljs-attr">id</span>=<span class="hljs-string" style="color: #6a8759;">"email"</span> <span class="hljs-attr">th:field</span>=<span class="hljs-string" style="color: #6a8759;">"*{email}"</span> <span class="hljs-attr">th:errorclass</span>=<span class="hljs-string" style="color: #6a8759;">"is-invalid"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string" style="color: #6a8759;">"emailHelp"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string" style="color: #6a8759;">"validationEmail"</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #6a8759;">"invalid-feedback"</span> <span class="hljs-attr">th:errors</span>=<span class="hljs-string" style="color: #6a8759;">"*{email}"</span>></span>
Please choose a username.
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #6a8759;">"mb-3"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string" style="color: #6a8759;">"salary"</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #6a8759;">"form-label"</span>></span>Salary<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">label</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string" style="color: #6a8759;">"number"</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #6a8759;">"form-control"</span> <span class="hljs-attr">id</span>=<span class="hljs-string" style="color: #6a8759;">"salary"</span> <span class="hljs-attr">th:field</span>=<span class="hljs-string" style="color: #6a8759;">"*{salary}"</span> <span class="hljs-attr">th:errorclass</span>=<span class="hljs-string" style="color: #6a8759;">"is-invalid"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string" style="color: #6a8759;">"salaryHelp"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string" style="color: #6a8759;">"validationSalary"</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #6a8759;">"invalid-feedback"</span> <span class="hljs-attr">th:errors</span>=<span class="hljs-string" style="color: #6a8759;">"*{salary}"</span>></span>
Please choose a username.
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string" style="color: #6a8759;">"submit"</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #6a8759;">"btn btn-primary"</span>></span>Save Person<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">form</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">html</span>></span></pre><p>lets also perform some validation of the entered data:</p><pre class="hljs" style="color: #a9b7c6; background: #282b2e none repeat scroll 0% 0%; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #cc7832;">package</span> ch.finecloud.peopledbweb.biz.model;
<span class="hljs-keyword" style="color: #cc7832;">import</span> lombok.AllArgsConstructor;
<span class="hljs-keyword" style="color: #cc7832;">import</span> lombok.Data;
<span class="hljs-keyword" style="color: #cc7832;">import</span> lombok.NoArgsConstructor;
<span class="hljs-keyword" style="color: #cc7832;">import</span> javax.persistence.Entity;
<span class="hljs-keyword" style="color: #cc7832;">import</span> javax.persistence.GeneratedValue;
<span class="hljs-keyword" style="color: #cc7832;">import</span> javax.persistence.Id;
<span class="hljs-keyword" style="color: #cc7832;">import</span> javax.validation.constraints.*;
<span class="hljs-keyword" style="color: #cc7832;">import</span> java.math.BigDecimal;
<span class="hljs-keyword" style="color: #cc7832;">import</span> java.time.LocalDate;
<span class="hljs-meta" style="color: #bbb529;">@Data</span>
<span class="hljs-meta" style="color: #bbb529;">@AllArgsConstructor</span>
<span class="hljs-meta" style="color: #bbb529;">@NoArgsConstructor</span>
<span class="hljs-meta" style="color: #bbb529;">@Entity</span>
<span class="hljs-keyword" style="color: #cc7832;">public</span> <span class="hljs-class"><span class="hljs-keyword" style="color: #cc7832;">class</span> <span class="hljs-title" style="color: #ffc66d;">Person</span> </span>{
<span class="hljs-meta" style="color: #bbb529;">@Id</span>
<span class="hljs-meta" style="color: #bbb529;">@GeneratedValue</span>
<span class="hljs-keyword" style="color: #cc7832;">private</span> Long id;
<span class="hljs-meta" style="color: #bbb529;">@NotEmpty</span>(message = <span class="hljs-string" style="color: #6a8759;">"First name can not be empty"</span>)
<span class="hljs-keyword" style="color: #cc7832;">private</span> String firstName;
<span class="hljs-meta" style="color: #bbb529;">@NotEmpty</span>(message = <span class="hljs-string" style="color: #6a8759;">"Last name can not be empty"</span>)
<span class="hljs-keyword" style="color: #cc7832;">private</span> String lastName;
<span class="hljs-meta" style="color: #bbb529;">@Past</span>(message = <span class="hljs-string" style="color: #6a8759;">"Date of Birth must be in the Past"</span>)
<span class="hljs-meta" style="color: #bbb529;">@NotNull</span>(message = <span class="hljs-string" style="color: #6a8759;">"Date of Birth can not be empty"</span>)
<span class="hljs-keyword" style="color: #cc7832;">private</span> LocalDate dob;
<span class="hljs-meta" style="color: #bbb529;">@Email</span>(message = <span class="hljs-string" style="color: #6a8759;">"Email must be valid"</span>)
<span class="hljs-meta" style="color: #bbb529;">@NotEmpty</span>(message = <span class="hljs-string" style="color: #6a8759;">"Email can not be empty"</span>)
<span class="hljs-keyword" style="color: #cc7832;">private</span> String email;
<span class="hljs-meta" style="color: #bbb529;">@DecimalMin</span>(value = <span class="hljs-string" style="color: #6a8759;">"1000.00"</span>, message = <span class="hljs-string" style="color: #6a8759;">"Salary must be at least 1000.00"</span>)
<span class="hljs-meta" style="color: #bbb529;">@NotNull</span>(message = <span class="hljs-string" style="color: #6a8759;">"salary can not be empty"</span>)
<span class="hljs-keyword" style="color: #cc7832;">private</span> BigDecimal salary;
}
</pre><p> </p></div><footer class="wrapper post__footer"><p class="post__last-updated">This article was updated on September 23, 2022</p><ul class="post__tag"><li><a href="https://www.finecloud.ch/tags/database/">database</a></li><li><a href="https://www.finecloud.ch/tags/gui/">gui</a></li><li><a href="https://www.finecloud.ch/tags/http/">http</a></li><li><a href="https://www.finecloud.ch/tags/java/">java</a></li><li><a href="https://www.finecloud.ch/tags/softwareentwicklung/">software development</a></li><li><a href="https://www.finecloud.ch/tags/spring/">spring</a></li><li><a href="https://www.finecloud.ch/tags/spring-framework/">spring-framework</a></li><li><a href="https://www.finecloud.ch/tags/sql/">sql</a></li><li><a href="https://www.finecloud.ch/tags/thymeleaf/">thymeleaf</a></li></ul><div class="post__share"></div></footer></article><nav class="post__nav"><div class="post__nav-inner"><div class="post__nav-prev"><svg width="1.041em" height="0.416em" aria-hidden="true"><use xlink:href="https://www.finecloud.ch/assets/svg/svg-map.svg#arrow-prev"/></svg> <a href="https://www.finecloud.ch/java-and-databases-use-sql-joins.html" class="post__nav-link" rel="prev"><span>Previous</span> Java and databases use SQL joins</a></div><div class="post__nav-next"><a href="https://www.finecloud.ch/handling-exceptions-in-webui.html" class="post__nav-link" rel="next"><span>Next</span> Handling Exceptions in Web UI </a><svg width="1.041em" height="0.416em" aria-hidden="true"><use xlink:href="https://www.finecloud.ch/assets/svg/svg-map.svg#arrow-next"/></svg></div></div></nav><div class="post__related related"><div class="wrapper"><h2 class="h5 related__title">You should also read:</h2><article class="related__item"><div class="feed__meta"><time datetime="2023-04-10T08:36" class="feed__date">April 10, 2023</time></div><h3 class="h1"><a href="https://www.finecloud.ch/spring-exception-handling.html">Spring Exception Handling</a></h3></article><article class="related__item"><div class="feed__meta"><time datetime="2023-04-06T15:31" class="feed__date">April 6, 2023</time></div><h3 class="h1"><a href="https://www.finecloud.ch/mockmvc.html">Testing with MockMVC</a></h3></article><article class="related__item"><div class="feed__meta"><time datetime="2023-04-04T15:29" class="feed__date">April 4, 2023</time></div><h3 class="h1"><a href="https://www.finecloud.ch/spring-bean-lifecycle.html">Spring Bean Lifecycle</a></h3></article></div></div></main><footer class="footer"><div class="footer__copyright"><p>Powered by Publii</p></div><button onclick="backToTopFunction()" id="backToTop" class="footer__bttop" aria-label="Back to top" title="Back to top"><svg><use xlink:href="https://www.finecloud.ch/assets/svg/svg-map.svg#toparrow"/></svg></button></footer></div><script>window.publiiThemeMenuConfig = {
mobileMenuMode: 'sidebar',
animationSpeed: 300,
submenuWidth: 'auto',
doubleClickTime: 500,
mobileMenuExpandableSubmenus: true,
relatedContainerForOverlayMenuSelector: '.top',
};</script><script defer="defer" src="https://www.finecloud.ch/assets/js/scripts.min.js?v=6ca8b60e6534a3888de1205e82df8528"></script><script>var images = document.querySelectorAll('img[loading]');
for (var i = 0; i < images.length; i++) {
if (images[i].complete) {
images[i].classList.add('is-loaded');
} else {
images[i].addEventListener('load', function () {
this.classList.add('is-loaded');
}, false);
}
}</script><script defer="defer" src="https://www.finecloud.ch/media/plugins/syntaxHighlighter/prism.js"></script></body></html>