Getting Started With Spring Framework: Part II
Designing Our Home Page and Static Files.
In the last chapter, we took some time to go through most of the necessary basics needed in order to get started with building Web Apps with Spring MVC. In this chapter, we will look at how we can get by using static files in our applications. Static files are basically Javascript, Images, and CSS files.
We will also design our Home Page for viewing existing blog posts if any are present in the database (PS, we will just use some dummy data instead of connecting to an actual database, that is saved up for a later chapter). For the interface side, we will use Bootstrap. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. you can quickly prototype your ideas or build your entire app.
Project Repository: My Blog App
Getting Bootstrap
You can get Bootstrap here, then go under Compiled CSS and JS and hit Download.
Once you hit download, you will be prompted to save a zipped folder, that’s the folder which contains all the necessary Bootstrap files we need.
Getting Bootstrap to work with Spring.
At this point, I’m assuming you have successfully downloaded Bootstrap and extracted the files. Once extracted, you should get two folders; js and css like so:
The next step is to copy/cut these two folders and paste them in the static (src/main/resources/static) folder in our project. After you’ve done that, your file structure should look like this:
Do not be alarmed by all those files in the two folders, what we are interested in from the CSS folder is just the bootstrap.min.css file and in the JS folder, what we will be using is the bootstrap.min.js file, we will ignore the rest for now….or forever haha!
Ok, back to business!
Linking to the CSS and JavaScript Files
Linking your web apps to static files is just as easy as pointing to their locations, nothing complicated to it really. Here’s how we are doing it below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DevC-Lusaka Blog</title>
<!-- Linking to static files (JS and CSS) -->
<link href="/css/bootstrap.css" rel="stylesheet" type="text/css">
<script href="/js/bootstrap.js" type="text/javascript"></script>
</head>
The last to tags before the </head> tag is where the magic happens, we are simply pointing our home page to the CSS and Javascript files that we wish to use in our app. This is pretty much the standard method that even you will mostly use in your day-to-day projects with Spring should you choose to take it up. That’s pretty much all we’ll need to do for now really! :D
The rest of the Code!
Since this is not a tutorial that focuses on Bootstrap, i’ll just go ahead and paste the remaining code for the homepage then in your own free time you could check out the bootstrap classes used when designing the page Here.
This project will also be available on my github profile if you so wish to clone it.
Here’s the code for our index.html page
Run the App Again!
After running the app, you should see something like this, or exactly this if you did everything right:
That’s pretty much all we needed to do in order to get our app working with static files. Although I would like to point out that all this rendering of templates and static files is being made possible by a library we included in our project earlier on when we first initialized the project on Spring Initializr, Thymleaf. It is also responsible for making it possible for users to render data from the database to our views and thus it plays a big role in Spring and Web Apps.
Conclusion
In this part of the tutorial, we went over designing our Home Page for our app, just a simple interface to start with and as well as how we could get our web apps to work with static files. In the next chapter, we will look at how we can connect our application to a Database, MYSQL database in this case. We will go over the configurations step-by-step.
Useful Links:
- Getting Started With The Spring Framework: Part 1
- Project Repository: My Blog App
- Spring Initializr
- Spring Home Page
Happy Coding!
