JAVA, Spring Boot, HTML, CSS, Bootstrap - Full Stack Web App development for BEGINNERS - 2021 | Haroon Abdul Hakkim | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

JAVA, Spring Boot, HTML, CSS, Bootstrap - Full Stack Web App development for BEGINNERS - 2021

teacher avatar Haroon Abdul Hakkim

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

9 Lessons (40m)
    • 1. Introduction

    • 2. Prerequisites, What is Spring Boot and Initial Project Setup

    • 3. What Is @SpringBootApplication Annotation?

    • 4. How To Run The Application In IntelliJ IDE?

    • 5. Adding a Controller - Hello World!

    • 6. Rendering Simple HTML

    • 7. Deploy Application To Heroku Cloud

    • 8. Fetching Data from Database using Spring Data JPA

    • 9. Building the front-end using Bootstrap and Thymeleaf

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

This course is designed to teach and equip beginners with the tools to build a fully functional live Full
Stack web application hosted in the cloud (Heroku) for free.

By the end of this course, a complete beginner could have the gratification of seeing his web application run live on the internet with production-grade features!

This course is based on Java, Spring Boot, Spring Security, Thymeleaf templating engine for the backend and
HTML, CSS, JavaScript, Bootstrap for the frontend. Do NOT be intimidated by the number of frameworks used, the
sailing will be smooth and you will be able to grasp the concepts very easily if you have some prior programming experience.

The course will discuss in detail about how to build a simple question application with functionality to add, remove, edit
questions and answers. This application will be protected using a login page and we will implement the security using Spring Security framework.
This is a fun yet useful real-life project which could be modified to many day-to-day use case.

In the frontend, we will be using responsive design with the help of Bootstrap. It will be a cool project to have in your repertoire. The languages and frameworks used in the class project are:

  • Java
  • PostgreSQL
  • Spring Boot
  • Spring Data JPA
  • Spring Security
  • Thymeleaf
  • HTML
  • CSS
  • Bootstrap
  • Maven

This is going to be a colloborative effort and I would like to reach out to students who would need more attention!

GitHub repo

Meet Your Teacher

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: The specificity in a series of videos that we will be developing a web application using the Spring framework, particularly Spring Boot, spring Data JPA, time leaf template engine, Bootstrap UI and will be getting this application with Spring Security. And we'll be deploying it in heroku Cloud. This is going to be a very hands-on sodium, so backlogged. Before we start, I want to show you a glimpse of the final application that we will be building. This is a question bank application that if you login as an admin, we can do basic current operations like adding, editing, that are moving questions or categories. And you will be having a data table which lets us know search, BG named sod, et cetera. And if you login as a user, we will only be able to view and we will not be able to manipulate any infant, will also be exposing a public API, but a Duvall questions or get degrees, which is meant to be consumed by other services. This Spring Boot application is secured using a farm login and enroll as Logan. The old login uses Abduh and identity and access management provider, which provides us with a single sign-on feature. 2. Prerequisites, What is Spring Boot and Initial Project Setup: In this video, we will be building a simple lemma application with the rest endpoint that returns a string and a UA and bind, which returns a basic HTML. You'll also be deploying this to heroku Cloud for this unique Java 8 and Maman 3 installed in your system. And you need to have an idea of your choice. Spring is a Java based framework for building enterprise application. It provides us with features like dependency injection or inversion of control, MVC framework, loose coupling, etcetera. It is essentially a framework or frameworks. It makes use of existing frameworks and builds on top of it, but reduce the need for writing a lot of plumping cold. Spring Boot is a project built on top of the Spring framework. Spin would make it easier to develop standalone production grade applications. It configures all the features you want to use. And you can start your application with a single click. You can generate a demo project from the spring initially says cite, start docstring dot IU. Then we can add the Spring Web dependency and change the defaults according to our requirement and give generate R. We can use the Spring CLA, which can be downloaded as a zip file. And the spring bad file should be added to your environment class, but, and this can be used as a command line tool. Months installed. Open up your command prompt and type the command, splitting in it. And add the BEM dependency. And provide the name of the project you wish to generate. The project code generated. And we can see the bomb dot XML, which contains the dependencies for the project. As you can see, it contains the Spring Boot starter web dependency and the starter desk dependency. We can check out the project structure. We have a demo application, java glass, generated with the Spring Boot application annotation. And it has a main method. 3. What Is @SpringBootApplication Annotation?: I'll open the same project in Indonesia ID springboard application annotation is a combination of Enable auto configuration companies scan and configuration and rotation springboard Arthur configuration attempts to automatically configure your Spring application based on the JAR dependencies that you have added. For example, if had SQL DB is on a glass bottle and you have not manually configured any database connection means that Spring Boot auto configures an in-memory database. Then developing spin what applications you need to tell the Spring framework where to look for Spring components. Using components scan is one method of asking Spring grid texts being managed components from predefined project packages. 4. How To Run The Application In IntelliJ IDE?: There are a couple of methods to our node application. One method is to build a jar using Maven build command and run the data from gamma1 lane as the other half and Jack are, we can run the demo application medically from Indonesia, lake how we would run a simple Java class with main method. So we can just click on the blamer then delegate. The application has now started on 8080 port. Let's take a look at that localhost 8080 and point. This returns a photo for page not found error because we have not mapped any bug in our application. 5. Adding a Controller - Hello World!: We have not mapped any bug in our application. So let's add a quiz mapping, but the default button and the dispatcher servlet will displace the STDP request for this method. Glue that. First we need to annotate a class as a controller and then add a method which returns a simple string-based bonds and annotate with the request mapping, annotation and response body irritation. Response Modi is a spring and tradition which means a method return value to the response body. It does not interpret it as a new name. It uses HTTP message converters with the return value to history UDP response body based on the content type of the request. Let's run the application and localhost 8080 or bends the Hello World string as the response. The boilerplate code that we generated from spring CLA has used a default name for this application. So let's do some refactoring. We will rename this application class as question bank application. And let's also do you name the package name. 6. Rendering Simple HTML: For our terminating the application better, Let's create a separate controller instead of adding the main class as the controller. So let me create a new package named controller and create a Java class name of question bank controller inside that bag beach and annotate the same as a controller. Also, we will copy the request mapping method into this controller class. This mapping and returns a string as a response party. Similarly, if we need to render it as HTML view instead of a string, I'll we need to do is Omid that as far as quality and tradition and the method should return a view name. But the dispatcher surrounded the dispatcher. So look, milkshake help from the view resolver to pick up that define mu for the request. For this, we need the time leaf template engine dependency added to the boundary XML. My default view resolver looks into the templates folder under resources for his demon file. Since we're done the view name as index, we need to create an index.html in the templates folder. Let's run this application. Open up the browser. And in the slash index, but the index has demon is getting at Mendota. 7. Deploy Application To Heroku Cloud: Next up, we need to reply this application in heroku Cloud. Heroku is a platform as a service that enables developers to run an Arpanet applications and dial in the Cloud and developing a web application, the natural progression is their ticket online and make it available for end-users. Since Heroku supports Giovanni, WE, it becomes a natural choice to deploy our springboard application life. We need to create a free account with Heroku. By signing up. The Heroku dashboard will look like this. You can create a new herokuapp from the dashboard itself. Or we can use the Heroku CLI, download and install the Heroku CLI. It is a command line tool. So we can open up the terminal which comes to the Indonesia ID and login to Heroku using the Heroku login command. Polyploid a chord. In our local system to Heroku. We need to create a Git repository and push it to Heroku, the mode in each case and local projects folder. And then add all the files. Then make your first comment. Create a new Heroku using the Heroku git command. This will create a herokuapp with an auto-generated name. And it also creates a remote git repository with the name heroku. You can rename it to some other unique name if it is available using Heroku absolutely name. All we need to do to reply is good push our master branch to Heroku. Heroku automatically detects that this is a Java Spring Boot application and starts the bill. And once the builder completes, it deploys by running the generator JAR file. You can check the logs to confirm if your application has started up in Heroku. Heroku logs hyphen, hyphen detail. As you can see, the application started out fine. Now to view our application, all we need to do is tape heroku open. It opens the browser without a live application. You can see the URL in the address bar and hello world is printed. Let's check out the slash index, but it is also working as expected. In the Heroku dashboard. The new lab is not visible. We can navigate and tick the settings and configurations for our app here. Here we see the default command used to run the application after. You can customize this by adding a proc file in our project. Right now we don't have any add-ons. In the dissection, we can change our deployment method to suit our needs, will be using the default Heroku CLI matter, the setting speech. We can take the Heroku git URL. And if you have a custom domain, we can provide that. So we can use our own domain instead of the Hiroko auto-generated sub-domain. That's it for this video. In the next video, you'll see how to add Postgres EDB to an application and do crud operations using Spring Data JPA, GitHub link for this project is provided in the description below. You can check out each lesson by choosing the appropriate brand's name. 8. Fetching Data from Database using Spring Data JPA: In the previous video, we created a demo Spring Boot application which returns a Hello World string on the default path and the basic HTML on the slash index path, and made it live by pushing it to Heroku globe. The application we have right now is kind of useless rate. It has no deal functionality. It just prints out Hello world and make this application useful. We needed to talk to a database to store, retrieve our manipulate data. Spring Data is a spring project that lets us do exactly that. But minimum for us. Spring Data, JPA, a bar of the largest Spring Data family makes it easier to implement a data access layer for our application. Jb on Java persistence API is just a Java specification that is used to pass data between Java object relational database. The API acts as a bridge between object oriented domain models and relational database systems. It provides a platform to work directly with Java objects instead of using SQL commands. Like hibernate provide implementation for this GPS specification. In this tutorial, we will be using PostgreSQL, a relational database. You might wonder why postcolonial and might not any other relational database like MySQL. Simple. Heroku provides a free Postgres are unknown but considerable storage NMR application. And who doesn't love free stuff? Heroku provides a hobby no plan that is absolutely free. To integrate post-class BBN, don't Heroku application use the command heroku add ons three, Heroku Postgres, SQL column. The name of the database has been created. We can take the info regarding our Heroku application using the command for. It shows the postcards hobby them as an add-on. And we can see it shows up in the dashboard as well. Click on it to open the database little speech. Under the Overview tab, we can see the constraints like maximum number of rows and connections are known in this field blank under the Settings tab. And you can get that the damage credentials like DB host, username, password, etc. We can also get the same info from Heroku CLI using the command credentials. You our database. We have provisioned a database from Heroku for ourselves. In this database, we are going to have a category table with category ID, subject, and exam date, and a question on sustainable with the question AD, AD question and answer scholars. These two tables are connected by foreign key constraint on the category ID. We can use the SQL commands login to our database, and I'm going to create our tables. For this. We need postgres installed in your system. Installed postgres from the link provided in the Heroku Postgres base, depending on the operating system you're using. We can establish a session without and more database using Heroku PGP command. And you can run queries on it. Are, we can use a desktop plan like knee below, which is a universal database. Queries on the podcast DB supports all popular relational databases. Download and install BBVA. Once installed, open BBVA and create a new connection to scale. And in the connection settings dialog box, fill in the DOM is credentials, which you can get it from the Heroku CLI. Inside the database schema name public by default, we need to create our demos under the schema. We can create our tables using the DB user interface by filling out column names and their data types and adding constraints, primary key, foreign key, etc. While we can write the DDL or data definition language queries ourselves. I have already formulated the DDL queries to create the tables. And the category table has got DID as it's biomedical and subject and exam date and created and last updated timestamps. Timestamps. Let's execute this query. The category table has been created. And the question on such as primary key and foreign key, the question and anticodons execute this query as well. To animate the bottom D constraint on the get equity. I don't have any new demo. So let's insert some data. I have it set up in subqueries. If you're doing a seem to create the students noted muddy and then get comfortable. You can find in the description below, you can use that. So that's executed these queries. As discussed earlier, photos, pinMode application could efficiently Spring Data JPA. So we need to add this, bring books dr. Need IDB dependency and also the Bosporus good labor dependency in our bombarding Silent Spring Data, JPA is just a new diagnosis obstruction used to reduce the amount of boilerplate code to implement data access layer. Next up, we need JPA Entity beans, which are nothing but ordinary Java classes and notated as entity. These classes that percent the underlying table structure. In our database, we have two tables and equity and question answers. And so you wouldn't need to entity beans. We also require repository interfaces which are present. The data access layer, which typically does all the database operations like find, safe, persist, etc. Spring provides the implementation for these Austria interfaces in the runtime. Instead of writing SQL queries, we just need to define any methods in that posture interfaces. And spring will derive the query from that method name directly. And you can see on-screen some of the supported keywords and naming schemes for the grading methods. Typically in Java, we would require to provide the implementation of the set of pasta interfaces. But Spring takes care of the implementation in that our time. And we just need to define the corresponding interfaces and methods. Creating entity beans and GPA at apostrophes manually is a cumbersome task. Ends I used the Intelligent plugin, GPS support, the generate the entity beings. And our posture interfaces. Go to Settings from intelligent toolbar. And in the plugins section, you can add this plugin. We will create a new package named leader for the US. The plug-in open up any class and use the shortcut art, insert in the drop-down, select in GP introduced and in the dialog box that appears for love, the database credentials provided the newly created data package at the intermediate baggage and a positive bucket. The glasses will get generated in the provided baggage. Uncheck, Use Lomborg. Click Next. It shows on the list of tables in the database, select all and start generic name to the beans and repository Scott generated under data package. You can see that the interlude beans are Java classes, mark with entity and rotation, and map the table names and column names using table and column and traditions that are posted inside just interfaces extending the beer industry, which in turn extends paging and sorting. And a plus 3, which relates us but a setup method. The man and plate of foods entities like CVE, find, etc. The ID annotation on category ID did not start. It is the primary key field. There are some changes we need to do for these tender to entities. Marking a field with generated value on rotation specifies that a value would be automatically generated for that field. This is primarily intended for primary key fields. And the identity strategy indicates that the field will be incremented using the database server side strategy, the creator and last updated timestamp out of the datatype timestamp in the database. So instead of having it as a string in our Java object, even change it to local lead time. I notate that greater timestamp, timestamp, which will set the property value the current datetime, and then saving the entity for the first time, also annotated the last time, created a timestamp as update timestamp, which will set the property value for the current datetime, then no other entities updated do the same changes in the question answers entity as well. Guiding question answers entity doesn't reflect the volume calculation on the category only. Glue that we need to replace the column. My notation, Victor combination on giant column under addition and one-to-one or addition. Also, they please the category ID with the NTP being category. This indicates that the column category ID on the question answers table refers to the primary key category ID on the category given the fact that the getters and setters accordingly. We now have a data access layer and a controller layer. For these two layers to interact, we will introduce a service layer, which will provide the business logic. So this layer provides separation of concerns by separating them business logic from the data access layer and the controller layer. Let's create a package name serverless. Create a class named question banks solace. And I don't do it as a Service, which indicates that this class provides some business functionality. The best practice for some this layer is to separate the abstraction and implementation. So we will create an interface name and meet the question banks. So is implement this interface. Our end goal in this video is to fetch our data tables. So let's create a new method definitions. One fits all categories which are done set list of category objects and federal question answers. That's it returns a list of which nonces in the IEEE question bank service interface. Implement these methods in the serverless. We need to add that a poster is as properties in the service to dock with the database and fixed data, we will add the Ottaway under addition and this upholstery poverty spinning it's activating feature enables you to inject the object independency implicitly are divided on rotation, will get spring to search for a spinning be in the Spring container, which implements that interface and place it automatically into the center. Since bring provides the implementation of these filibuster interfaces and that aren't done. Those implementations will be injected into the cell. This class DB repositories by default comes with the final method. And this can be used to fetch all entries from the tables. We now have our service layer. We need to involve this list from the controller class. I will create a separate controller for APA calls named question magnitude be a controller. This controller is only meant for vestibule guns and will not be used to render the UI. Hence, fuel annotate this as address controller, which is a combination of controller and response body annotations. And this controller indicates that the new data done by each method would be to penetrate into the response body. Instead of rendering a template, I'll add a request mapping slash API or the glass go out and be spot for the Beta quests. Added a twist mapping slash questions that are duns and the list of questions and answers and slash categories Mapping. And they did have duns and the list of categories. We will inject the question lens enemies, my arc of adding a1, the interface on the implementation itself onto us, such as spending beans in the Spring container by that FN step. And you can use the injected service to enroll their corresponding fetch methods. You would have noticed that we are returning a list of objects in both the methods, this list of objects, and then deserialize that JSON weather turning the response. This is because any spring, thus controller in a Spring Boot application and will render JSON response by default. As long as Jackson bool is on the glass bottle, neck sample transitively gets included in spring Woodstock on them dependency. One last breath configuration we have to make is adding the database credentials in the application got properties file. You have to set that putting data source URL, which is the JDBC connection string, and the new desktops username and password. Let's run this application on the slash, api slash questions, but we had getting a decent Adi with the data from the database. Similarly, on the slash api slash categories path as well. Now we're successfully able to fetch data and I'm Postgres database using Spring Data JPA. And then pushing to Heroku demoed. It is not advisable, distort the new database credentials in plain text. In navigation dot properties file Heroku index the database credentials as environment variables. Metadata is data. If the herokuapp haciendo Debbie's add on, you can make use of this enzyme and minimally place holders in an application on properties. And pushing digital coded model, we can externalize our configuration like greeting separate profiles for them and broad environment and having separate it. Application Not properties file, put each and memory. Let's come with Discord and push it to Heroku. They mock. Let's take Heroku logs to see if the application is up and running. And use Heroku Open to open your remote application. It is fetching the questions and candidate is famotidine these as expected. And that's it for this video. In the next video, and we will be building our UI layer using Bootstrap and timely. The GitHub link is provided in the description below. You can check out each lesson by choosing the appropriate balance. 9. Building the front-end using Bootstrap and Thymeleaf: In the previous video, we worked with spin deed NZB to fixed data as a DCE. On, in this video, we wouldn't do much more than that. Good data GP, like adding anything big, eating dinner from the front-end is going to be using Bootstrap. And thank you. And I said bonus, I just showed you how to build a team of people into a data table which allows searching, sorting these initial etc, cyclically previous videos in the CDS and catch up on what you haven't done, didn't know of this project. It would make it easier to follow along. What we have right now in our spring Boot application is an index.html and a couple of EPA's retrieve data from the database. Suppose I wanted to create a simple homepage that feedings to be just showing on ethic nice and quick nonces in a tabular format. Before that, I renamed the question asked pushing the button you might controller. Also the index has to move the sound up on the new font. Pop in, stop the slash next button. Let's open up on it. Nicks esteem needs going to descend the speech with the head, both modes. Most stuff is the most popular HTML, CSS and JavaScript open so that you can use to quickly decide and be responsive to them. Looks up, saves us time. My deducing the neat delayed a lot of CSS and JavaScript. If it's customizable and it has been documented. What stuffs good system provides an elegant V to create mobile responsive Leodes who add will just copy paste this link into the end of this chamber. The morning. And at most type classes let them book on. A jumbo indicates a big green box on infraspinatus attention onto a specific calendar. We will also act couple of money who cookieCost us to add margin. In the notation M, site, M stands for x, indicates that the Martin's ought to be added in the x-axis. And the number five indicates the size of the Muslim island, the descender. And then add his back foot 11 blue hinting at group on Venus below that. In multi-step at containers used to set the margins meeting within his pots of behavior. Finally, inside these completeness, we had moved to add high police decided like buttons with the head subclasses, median, begin dogs, and naked and nods button using the DNG and add in London on the y-axis. Add the attribute which specifies the water to boo, boo and the hyperlink escape. Even provide a desk category. For now is just a peaceful in the sense that we have not added any Nicholas mapping for the stash that entity on white labeled the hyperlink blue, the same book question on this container, nasa, that the headset ask questions. Let's run this application on the localhost 8080. You can see that new index.HTML and getting it has a book on the big gray box encompassing the lodge buttons control. I've got a nice it repents a photo because we have not added any mapping plus last category, I'll slash question spot. So let's add that up and add to get mapping full slash. And the method should return a his team and he had I name it S category. Similarly adequate mapping, full slash, push this pop and return the new name. Ask questions. All the time. You'd be able to look into the templates folder under the sauces and his team at fights with the name, category and questions. So let's create the corresponding categories and questions as data into categories. Or why that bagless categories. The purpose of this and techniques tables from the DWT in a tabular format. This thing that MVC framework or whites marketing group and Google. And it's designed this pencil so that that dispenses the modern interface axis and the depth of data that contains the data of the MVC application. And it's used to transfer data between the controller and the view. Notice that has to do a sub-object in using the model object that the Henikoff and picking these TIME0. So noted plus nothing. You just need to add model as an argument and spins up places object. In that campaign. The mortar is a map interface. Find some folder from modern attributes. The actor group can be history or an object on a commission. And let's add an attribute with the name epiglottis and its value should be the list of objects that she fits from the DW. From the database would make use of the existing question banks and injected into this controller by using the auto white. I don't know. And we can call that this authentic nice little dent from the pushing the piston, this stuff get that nice from the dealer? No, the same for questions by adding an activity with any questions and its value is fetched from that fits with non-system have done in question by itself on the DWT peace within these models needs to be used. Stigma, that is, tiny leaf comes in. So I know captivity is to add the techniques namespace that the prefix inside the body we will add onto the paper at the head, the baton, and, and-and fight able to head. Notice you've seen that the stack and responding to the columns in our databases cat enable that David Barbie, you can make use of time, the standard expressions index. To access the marble afternoon, we use the thesis since the categories added to the modern isn't a list, you can isolate the list using that. Each hydrogen atom. Much like the forties to loop in Java, the th, each attribute at base all of the activities, I'll say Ni, each element for the medium of antiquity, you can use the deistic attribute, prevented its value expression, and palpate the bony of the deck that you can access each act and look up the category object using the medium explicit syntax and populate it and application to see how it would look snow in the middle. So it become the show-up up edit this hyperlink and access to stash contiguity and just paste that in pots from the category in our Postgres database in a tabular format. The paper doesn't look bad. Mitre doesn't look good it either. Next step is to define a DBA. Thanks Dan Paul matters too bulky for my liking. So I'll show you how to format that Einstein, you think time. To follow my Java objects, we need to add time defects doesn't argue as a dependency nop. All notice in this module add inputs object allowing the formatting and creation of Java objects. Sometimes the templates to Fama than MOOC on datetime object created and instead use the syntax of out-of-stock, Paul Mac, the big evenly and the format you wish to have in saying that standard expression. Similarly for the last step, Both stuff offers a number of opt-in studying options for Abel's. So we need to add the CSS class. Able team of people use tables to add zebras type in 80 within the div RV at papered lamda for blindness on all say so that says Add able to haul it to enable a homeless gate on labor roles within the body. To make that David had up, you'd adopt giddy, use the modified class D1 and D2. You can make use of Pangaea and liters to take on the categories I have to do and display appropriate edit messages. He had to switch case statements. Nancy, if captains object is null, then we just print out milk and at least put any in that case, indicated by the dots in the middle of the table. And then picking the same processing pushes has DMO. You can notice that the push nonces plus ascap ADT class has a property. You can access the property so the category object using question, property name, we will display the equity as a complex subject with the hyphen in between. At the Bootstrap CSS style sheet. In both the history and application. You can see the status update on the people not able head and stripe paper buddy and the homeless on the Daman Grewal, that David list. You can also notice that the timestamps are formatted according to the fall might be poet and he was independent and objective and not able to view the data from our front-end. Next, we will see how to add new push nonces and getting these from the front-end.