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
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
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
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
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
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.