f

1. Java Spring MVC using
MySQL

2. What are we building?
• A MVC webapplikation for CRUD operations

3. Webapp CRUD operations

4. What we need to create this app
• MySql Database
• Spring Initializr to set up the Spring webapp

5. Create account and database at
https://remotemysql.com/
• Create tables in phpmyadmin
• https://www.liquidweb.com/kb/creating-tables-in-a-database-with-
phpmyadmin/

6. NB-Springboot-Plugins for netbeans 11/12
• http://plugins.netbeans.org/plugin/67888/nb-springboot
• https://github.com/AlexFalappa/nb-springboot/wiki/Quick-Tour
• https://www.techgalery.com/2019/01/how-to-create-spring-boot-
project-using.html
From meny Tools/
plugins

7. Spring initializr
• Got to https://start.spring.io/
• Add these dependencies so we can create a spring web app and database connection
rename

8. Move the download zip file to more suitable
folder

9. Open netbeans import the zip file
• Import the saved zip file in netbeans File->import->from zip
• Will be a new project.

10. Intro Spring creating Controllers and Views
1. Any incoming request that comes to the web
application will be sent to Front Controller (a
Dispatcher Servlet)
2. Front Controller decides to which (Controller) it has to
hand over the request, based on the request headers.
3. Controller that took the request, processes the
request, by sending it to suitable service class.
4. After all processing is done, Controller receives the
model from the Service or Data Access layer.
5. Controller sends the model to the Front Controller
6. Dispatcher servlet finds the view template, using view
resolver and send the model to it.
7. Using View template and the model a view page is
build and sent back to the Front Controller.
8. Front controller sends the constructed view page to
the browser to render it for the user requested.

11. Create package for our controllers and then
add a CarControllerMysql
• Create an controllers package
• Name it controllers
• Add new java Controller class in that package
• Name it CarControllerMysql
To see this Controller class
you need the plugin for
NB-springboot installed

12. The auto genereted code for the new
TestController class

13. Run the web app,
you get an error about databases
Run the app, this is where the main method is

14. Need to add database properties to fix the
error
• Open application.properties. Then add these properties, but use your
credentials that you got from for remotemysql.com

15. Stop and run the webapp again and it works
Run the app, this is where the main method is
Surf to localhost:8080/

16. Surf to localhost:8080
• You get this error because we haven’t mapped a Controller to handle
this request,
• But we have the CarControllerMysql how can we use that

17. But we have the CarControllerMysql
• How can we use it? It handle the request for a ”/url”
It handle the request for ”/url” try this
localhost:8080/url
Same error?? Why? We need a view

18. The problem is the view
We should have a mustche view that contains html to be
shown when we surf to this request localhost:8080/url

19. Create a mustache view under templates
Use .mustache as file type

20. Add html to the urlview.mustache
Change in the CarControllerMysql
Change here to match the new urlview.
No need for .mustache as file type here

21. Stop and run the app again
• surf to localhost:8080/url se how the urlview.msutcha is presente
Shows the urlview.mustache

22. How to use the Model to set data to be
shown in view
• After all these changes stop and run the app again.
Change to this.
We will use the key ”attribute”
in the urlview to show the text ”Hello world value”

23. We have the controller, the model and the
view
urlview.mustache

24. Using request parameters in url
localhost:8080/url?name=Stina
Manage the request parameter name
Set attribute key ”yourname” and it’s value, to show the name in th
Urlview using the attribute key ”yourname”
Create requestaparameter

25. Using @PathVariable in url
localhost:8080/url/20
Set attribute key and value, to show in urlview
Manage PathVariables
Set defaultValue
For requestparameter
Create PathVariable id in url, using {id}

26. Stop and run the app
• Test the url using pathvariable and pathvariable+requestparameter
Funkar inte

27. Using arrays
• Create new @RequestMapping
method
• Create new view,
linksview.mustache
Use dot to get string
element
Start loop
End loop

28. Stop and run the app again, surf to
localhost:8080/url/links

29. Use Lists
Create List
and add cars
Use key attribute cars in linksview
Create loop to show id regnr of cars in the list

30. Stop and run the app again, surf to
localhost:8080/url/links
Our cars

31. Example slideshow

32. Create Controller - SlideShowController
Surf to localhost:8080/slideshow
you’re redirect to slideshow/next
Show the view
Set model data to be shown in the view
counter and picture

33. SlideShowController continue
Set model data to be shwon in the view
Decreament counter to show prev picture from array.
And check it’s bounds, we don’t won’t to have a
ArrayIndexOutOfBounds Exception
Show the view

34. Create View- slideshow.mustache
picture and counter was sett as model
data in the controller

35. Form handling

36. Create Controller –FormController.java
Handles the Posted data
from the form
Shows the form
Show view
Contains posted data;
name of form gui
components
and it’s filled in values

37. Create a view to show form
-userform.mustache
action=Which postmapping in controller
that handles the posted form data
name attribute is used in
the RequestParam in Controller to get
data from the is particular textfield

38. userform.mustache- cont
Submit the form to the controller
,which url or postmapping is state in
forms action attribute; action=”/formhandling”

39. View that show the posted form data-
userformhandling.mustache
Using the keys that where set in the controller based on
posted requestparam from the form.