Configuration Springboot with thymeleaf and admin template using Bootstrap part 1

#configurationspringbootwiththymeleaf #springbootthymeleafbootstrap #springbootadminlte
#thymeleafadminlte
Configuration Spring boot with admin template using bootstrap+Template engine thymeleaf+Open jdk 11 part 1

***Others tutorials ***
Show Menus Based on User Role in Spring Security.
1.Check this tutorial
2. Spring security without websecurityconfigureradapter
3. Dockerize spring boot app

--In the end tutorial you will know how to build website using springboot+thymeleaf+admin template using Bootstrap.
--Flow the web application which will we build: see the image
--This tutorial will divide into 6 section
1. Create Springboot project
- select maven as build tool
- spring boot 2.5.5 version
- follow the metadata project like mine
- packaging jar
- java 11
- Add dependencies (Spring Web)+Thymeleaf template engines
- generate(after generate, you can put your project in the spesific place/folder)
- unzip project, Import project into intellijIdea
- makesure your pc/laptop connect to internet(wait until finish download dependencies)
- add other dependency from thymeleaf (thymeleaf-layout-dialect)
2. Create package & folder for project structure
- create package controller
- under folder resources - static folder, create folder css, js and images(create manually)
- under templates create folder fragments, layouts, page
- fragments - use for gather static content like header, sidebar and footer
- layouts - to combine header, sidebar, and footer, so they become templates ready use
- pages - use for gather dynamic page
3. Download Admin Template using Bootstrap & Understanding default template structure
- observe header, sidebar menu & footer
- click the menu COMPONENT select sub menu BADGE
- click menu form ELEMENTS select sub menu RADIO
- you can observe, which component not changed every time you select submenu(BADGE/RADIO)
- they are header, sidebar, and footer(common used component & static)
4. Create a login page for entry point , when URL hit for the first time
- copy html code from template
- copy css, js and images which needed for login template(css to folder resources/static/css ,js to folder resources/static/js and image to folder resources/static/images)
- add xmlns/xml namespaces for thymeleaf
- load css, jss and image using thymeleaf tag
- add action when button submit/click
5. Modify admin template into 4 component and add into springboot
- create header html file inside folder fragments, and copy header from template, Add thymeleaf namespaces, add fragment tag.
- create sidebar html file inside folder fragments, and copy sidebar from template, Add thymeleaf, add fragment tag.
- create footer html file inside folder fragments, copy footer from template, Add thymeleaf, add fragment tag.
- create dashboard html inside folder layouts(this page used to combine header, sidebar, dynamic content, and footer) , copy template from index, add thymeleaf namespaces, add thymeleaf namespace layout, load js css and image which needed for template, combine header, sidebar and footer using th:replace(structure template sidebar, header, conten, footer), mark div tag which used for dynamic content
- create one page. This page used when user success login(landing page, when user succes login will show this page, copy code from template), add xml namespace, add xml namespace layout, add layout decorator which mark this page using dashboard template, replace conten use layout fragment with real conten.
6. Create Controller class
- Create a LoginController Class, to handle requests when the app first appears
- Create a method to redirect request to login page
- Create method to redirect request to admin template when submit button click
- Run app
try login to dasboard, success


Happy learning and happy sharing!!!
see you on next tutorial

[SayyedFakhruddin]

Thanks a lot! It really helped me.
Just wanted know about how can I show the parts of the layout to both the authenticated and non-authenticated users?

[mesut]

i dont understand why my default thymeleaf dependency doesnt see the content on the static folder. I always have to add "../static" before css links javascript links in html files and even then thymeleaf still doesnt recognize the static folder. i have to add a specific this line to applicaion properties



i didnt see any errors on your project. Can you tell me why this happens? i really wonder

[Emmanuelkigai]

Hi, I have the same error you encountered on minute 53:10 even after replacing the dependency

[marcelosazo]

bro I can not move forward when you change the dependency. the only thing you do is remove the version number, the rest is the same. and I can not load the css or js in the landing_page.html as the main page, when I start with dashboard.html I load the csss and js. I followed the whole video but I can not move forward, what advice you give me to continue. I speak of the error of minute 53:05

[supriyajadhav]

Please 🙏 provide how i resolved issue of version 3.1.4

[mahasiswa_stis]

why you using landing_page for your return /home? not dashboard.html

[moustnk]

hello nice tuto but now its not working because of the 3.1.4 version and the depreciated websecurity elements

[jagrutjoshi]

hello brother im not able to solve 53:05 error not able to add css and js please help @programmingtutorial549