Spring bait will have to configure a view resolver for timeline we don’t have to manually you know create a view resolver bin for timeline because spring boot will automatically configure a way resolver for timely whenever it will find a time limit dependency in a classpath okay we have added a timeline starter dependency in a pom.xml, so springboard will automatically configure you know all the uh resolver and other dependencies for timely.
We don’t have to manually configure, and one more important thing is springboard will you know by default to find all the timely templates under the templates folder hence we need to keep all the timeline templates under the templates folder I understood just noted down these points now let me copy the student’s view and just right click on templates’ folder now and then go to others and just search for HTML file, okay and just give HTML a file name as students.html okay let me just expand this templates folder and look at here the blue student controller has a list student’s handler method it returns a view and this view we have just created here and now model has a list of students now we are going to display this list of students in our view that is students.html.
I hope you understood the blow now we are going to design an HTML table to display a list of students in the student.html file let’s get rid of this default title and just provide the title as a student management system and one more important thing is that we are going to use a bootstrap CSS framework to style our web pages CSS library is very popular for developing you know responsive layouts so we are going to use bootstrap 4 to style our web pages so go to the Chrome browser and just type bootstrap css cdn okay bootstrap for CSS CDN.
We’re going to use CDN links instead of you know downloading and adding bootstrap files to the project scroll down and here just copy this CDN link and let’s go back to our project and just below title paste this dependency and just format the page yeah there we go and let’s go back to our browser again you are new to bootstrap then I highly recommend you to you know I highly recommend you to read a read about a boost graph okay go to the components here and just go through these important components in bootstrap and also the content and a layout okay so go ahead and click on tables here and look at here we are going to use bootstrap table CSS classes to style our table.
We are going to use bootstrap table CSS classes so let’s keep open this page as it is because we are going to use a lot of bootstrap CSS classes now let’s go ahead and let’s create a due here due and let’s add a bootstrap CSS class to this due that is a container so we are going to wrap up all the HTML code inside this container and after that uh we’re going to create a new again with a bootstrap CSS class a row and then here we are going to create a heading that is h1 this is a page heading that is list students after that we’re gonna you know we’re going to create a table now so after the due with a class booster class row we’re going to create a table here.
Let’s add a bootstrap CSS class to this table and go to the browser again and look at here the bootstrap CSS class table and if you want to you know make uh you know or pay a table like this then you can use a bootstrap CSS class table dark and if you want to you know make a table like this then you can use bootstrap CSS class that is table header dark okay and so let me copy this boost lab CSS that is table stripped and let me paste here and let me copy one more bootstrap CSS class that is table bordered and let me paste here okay so within our table we’re going to create a table header.
Let’s add a boost type CSS class to this table header that is table hyphen dark and then we’re going to create a row here and then we’re going to define a table column so first is student first name and let’s define few more columns that are student last name and then student email and here we define a column for actions like update delete etc, okay, so this is the table header after that we’re going to different table body and then table row here perfect now we need to you know to display this table row dynamically.
If you see here you know student controller we have added a list of students to the model and we are going to display this list of students in a student’s file right students view and this list of students we are going to iterate and we are going to display in a table body so for that we are going to use the colon each attribute so just remember this is the time leap attribute which we can use to iterate over a list of students and then just you know to access the students variable by using a timely notation or syntax that is dollar within curly basis students so this forage that is the and each attribute just work as a forage loop and here we need to get a student from students.
If you could just mouse over on this attribute it says undefined attribute name because we need to refer to this attribute from the official website of timeslip so in order to ignore I mean in order to remove these warnings what you can do is we can add a reference link to the timely official website so go to HTML here and just add x mins uh followed by colon th and then followed by the official website link of timeslip and if you can just mouse over here the warning is disappeared okay so these tags or these attributes are typically referred from the timely official website now this is the th colon each attribute to iterate over a list of students.
Now we’re going to display student name first name last name and email so look at here these students comes from student controller here okay we are going to access this key by using timeslip syntax like this now let’s go and let’s use td here and then the colon text in order to display a text, so this is the timeline notation or syntax to display a model data that is a student is in our case is a model student and model attribute that is the first name okay similarly let’s display last name and email as well student dot last name student dot email perfect now let’s run our spring boot application and let’s see how it works so go to our you know student uh management system application class.
This is the main entry point class of our spring project so right-click on it and run as a spring boot app so so look at here the statements on a console create table student so student table is successfully created by Hubert automatically we don’t have to manually create the table and our springboard application is up and running on embedded tomcat server on port 8080 now let’s head over to the browser and let’s access this application and the URL for our least students is slash students.
We’re going to use this URL to access this method handler all right in a browser just type localhost 8080 slash students and hit enter and there we go list students and this is the table student first name last name email and action and there is no you know records exist in a student’s table now we are going to add records to the student’s table okay great so instead of adding uh you know records manually in a database.