From Scratch to Fullstack: Create a Todo Planner App with Java Spring Boot 3.2
ฝัง
- เผยแพร่เมื่อ 4 ส.ค. 2024
- Looking to create your own web application? Have you used productivity tools like JIRA or Trello?
In this exciting tutorial, I'll take you step-by-step through the process of creating your very own Todo Planner web application using Java Spring Boot for the server and Thymeleaf for the frontend.
Whether you're a seasoned developer or just getting started, this tutorial is perfect for anyone looking to learn more about web application development. You'll get a hands-on experience building your own app, as well as gaining valuable skills in Java Spring Boot, Docker and Thymeleaf.
👉👉 Get the Code (on github)! t.ly/kb2Ms
🔗 Grab My Other Available Product(s):
- Build Your First Web Service API Using Java Spring Boot wazoowebbytes.gumroad.com/l/x...
👋🏻Connect with me:
Twitter: / eyuzwa
🔗Resources & Links mentioned in this video:
- Spring Initializr: start.spring.io/
- Visual Studio Code: code.visualstudio.com/
===---=== Chapters ===---===
0:00:00 - Introduction
0:00:18 - Demo of Todo Planner
0:03:05 - Project template on start.spring.io
0:04:25 - Opening in VS Code
0:05:24 - What is the pom.xml?
0:05:55 - Setting up the .env file
0:06:21 - Adding dependencies to pom.xml
0:08:35 - Docker compose.yaml
0:13:54 - healthcheck for Docker image
0:16:58 - First bootup
0:18:01 - What is the MVC Pattern?
0:19:34 - Creating the Todo Model
0:22:13 - Creating the Todo Repository Interface
0:22:55 - Creating the Todo Service
0:26:03 - Creating the Page Controller
0:27:41 - Creating the index.html view
0:29:43 - Adding the our app.js file
0:30:45 - Adding the styles.css file
0:31:00 - Using the Application.properties for configuration
0:34:14 - Creating Application Seed Data
0:37:27 - Verifying app.js and Checking the database with phpMyAdmin
0:39:29 - Adding more HTML and Thymeleaf
0:44:46 - Passing data from Controller to View
0:45:54 - Submitting form from Thymeleaf to a Controller
0:46:15 - (Brief) Sidetrack about Dependency Injection
0:49:47 - Render Data from Controller with Thymeleaf
0:55:44 - Verifying Changes
0:56:27 - Handling Todo item update in Thymeleaf with JQuery
0:58:10 - Updating the Click event handler in JavaScript
1:00:27 - Setting up a REST Controller for the PUT
1:02:27 - Updating the TodoService to support getById
1:03:17 - Running through the final tests
1:04:37 - Updating the CSS
1:05:41 - Wrapping Things up
#springboot #beginner #docker - วิทยาศาสตร์และเทคโนโลยี
Thanks! This helped me out - just what I needed!
Can you please build more of these like fullstack with spring boot then lame management systems.You are only one who I follow for java right now!
hehe yeah - believe me I get tired of those too. I'm trying my best! Thanks so much for the feedback!
thank you very much for this incredibly useful video, one of the best I found so far! I am exited to use this new knowledge for future projects!
thank you so much - glad it helped you out! Good luck!
Thanks for the video. I am waiting for more:)
thanks so much for the feedback - I appreciate it!
Great job. Nice video!
thanks!
Awesome explanation thanks.
no problem at all - glad it was helpful to you!
Also, at 56:00 when you add a new item called watch movie, why does the ID jump to 102 instead of 53 as the last item id is 52 for the new item?
hmm could be a couple of reasons there. For one thing, it's possible that this is due to me restarting the app a few times while recording and creating other records...which is increasing the sequence. The other possibility is that a default increment value of the sequence that hibernate is creating could be around 50. I'll have to look into it. Good question!!
Great video matey - How would do this project but by use MySQL instead of PHP?
The project should already be using MySQL as the database. Maybe the name "phpmyadmin" is causing you the concern? It's just a database GUI (written in PHP maybe), but I can assure you that the db is already MySQL. Hope that helps!
@wazoowebbytes oh that's brilliant mate. Appreciate it. Can definitely see you having so many more subscribers in the future
thank you so much - I appreciate that man!
How do you know how to access the Phpmyadmin database ? kindly assist me
sure! If you're using the same Docker configuration that's in the project, then it should be available to you on localhost:8081. Is that what you're asking?
great work thank you, can you make next time a from scratch fullstack clone of instagram or twitter using spring boot and react or angular for front end, thanks for your time, we really appreciate it.
thank you very much - and I think that would be a great project idea to tackle next! Appreciate the comment!