Tutorial : Create A Login Page Using Angular JS, RESTful Web Service, Hibernate & Oracle Database

RESTful Web Services are basically REST Architecture based Web Services. In REST Architecture everything is a resource. RESTful web services are light weight, highly scalable and maintainable and are very commonly used to create APIs for web-based applications.

This tutorial will teach you how to create a simple login page using Angular JS and RESTful Web Services. For the backend, I have used Hibernate and Oracle DB. You can also use any other database like MySQL.

1. Create The Login Page

The first thing that you need to do is create the login page. Since Angular JS is used to create a single page application, let us create two html pages – index.html and login.html. The index.html will form the base for all the pages if you’re looking to add more pages. Here is the code for index.html.

The next thing that you have to do is create login.html.

Once, you have done the above, theĀ  next thing that you need to do is configure Angular modules. The first thing that you need to do is create app.js.

2. Configure The RESTful Web Service

Once, you have created the app.js, you will have to create a js file for the LoginController. The LoginController js file will have the REST url which will be called.

Next thing that you will need to is create a package and class in java that will be able to receive the REST call. Here is how I have created one.

Also remember, that to RESTful Web Service to work, you need to configure the web.xml so that your application is aware about your REST url and the Java class which will handle all the REST calls. Make sure you have the correct class in web.xml else the servlet will not work.

Here is how my web.xml looks like.

When writing the class which will handle all your REST calls, make sure you add the @Path annotation, so that your Jersey API (REST API which I have used here) can determine the root class.

Here is the RestLoginWebServiceResource class which will handle the REST calls.

3. Create A Pojo And DAO Class

Now that you have created the class to handle the REST calls, you will need to create a Pojo class for hibernate and a DAO class to validate the user credentials.

Below is how the DAO class will look like which is used to validate the user credentials.

4. Configure Hibernate

To configure Hibernate, you need to have a hibernate.cfg.xml. Since I have used a local Oracle DB, here’s how it looks.

You will also need to have a class which will create the Hibernate SessionFactory so that it can be used to connect to the DB.

If you’re curious about how the project structure looks like it will be something like this.

So, that’s it for this tutorial. If you’re interested, you can download the project from this link.

Have already used Angular JS with RESTful Web Service ? You can share your views in the comments below.

Author: Lahaul Seth

A programmer and a web developer, he is the founder of Lion Blogger. His main hobbies are web design & development and providing writing services to clients.

Share This Post On

Pin It on Pinterest

Share This