Step By Step Create Admin Panel With Spring Boot And Angular

Prepare the server-side setup by installing MySQL community server and running it as a background service, using HeidiSQL for database workbench with root credentials, and configuring IntelliJ with Java 8.

Import the demo spring boot project into IntelliJ, created via start spring io, using Java 8 by default, with automatic gradle or maven setup and a quick dependencies refresh.

Install and configure Lombok for the server side, and enable annotation processing in IntelliJ so Lombok can generate getters and setters and simplify code.

Learn how the Lombok library simplifies Java by auto-generating getters and setters, adds data and value annotations, and creates empty and full constructors with noargs and allargs for immutable classes.

Explore Spring dependency injection and decoupled design through constructor, setter, and field injection, with core components like @Configuration, @Repository, and @Service.

Explore how to use the @RequestParam annotation in Spring to extract query, form, and header parameters, customize parameter names, set default values, and handle required versus optional parameters.

Learn how the @PathVariable annotation maps template URI variables to method parameters, customize variable names, and handle required versus optional values in Spring rest APIs.

Demonstrate how the @RequestBody annotation maps the HTTP request body to a transfer or domain object using HTTP message converters, with JSON content and Jackson handling.

Build an admin panel with Spring Boot and Angular by implementing mvc architecture, defining entities, repositories, services, exposing api endpoints, and securing them with Spring Security, Hibernate, Lombok, and Liquibase.

Install and configure a spring boot admin panel via start.spring.io, selecting a gradle project, java, and dependencies for security, persistence api with Hibernate, and a rest api.

Choose Gradle for project dependencies due to efficient configuration and better performance than Maven. Gradle enables incremental builds by checking updated tasks and avoiding unnecessary work, shortening build times.

Configure server-side properties to name the application, set data source credentials, enable utc time zone, and enable create database if not exist, with liquibase change logs and hibernate auto settings.

Model a product management system with users, roles, products, and transactions; store roles as an enumeration in the user and relate transactions to both user and product.

Learn how Hibernate maps Java objects to MySQL tables using entity, table, column, id, and GeneratedValue annotations, and manage one-to-one, one-to-many, man-to-one, and many-to-many relations with eager and lazy fetch.

Create a user model class in the model package with an auto-increment id, name, username, password, and a role enum, using mock data annotations for getters, setters, equals, and hashCode.

Create a product model in the model package, with an entity class named product mapped to the product table, including id, name, price, and explanation fields, using data annotations.

Create a transaction model with id as primary key, links to product and user via many-to-one relations, includes purchase date, and includes getters, setters, and hashCode using Bloomberg data annotation.

Learn Liquibase, a sql migration library for relational databases, and describe changesets in xml, json, or sql. Understand database changelog, rollback, locks, and how changesets update schemas.

Create and implement Liquibase change logs and templates to manage database changes for the admin panel. Build a user table and understand change log structure, chains, and rollback support.

Implement Liquibase change sets for product and transaction models, creating product and transaction tables and adding 10 test products to validate the changes.

Learn how JPA repositories in Spring Boot enable auto configuration and generic CRUD operations by extending with an entity and id, and create custom queries via method names like findByUsername.

Create a user repository interface extending the GPA repository to enable basic operations, and implement a find by user name query.

Create product and transaction repositories by extending generic base repositories, specifying model and id classes, to access database methods in the admin panel built with Spring Boot and Angular.

Implement a Spring user service that wires a user repository via dependency injection, provides save, update, delete, and find methods, and secures passwords with a password encoder.

Define and implement a product service in Spring Boot, inject the product repository, and provide save, update, and find all methods with transaction management.

Create a transaction service interface and its implementation with service and transactional annotations, wiring it to a transaction repository to save transactions and retrieve all transactions.

Explore controller overview in a Spring Boot and Angular admin panel, detailing user and admin roles, login, register, display profile, and admin capabilities to manage users, products, and transactions.

Explore how a rest controller in Spring Boot handles http requests with get, post, delete, put, and patch mappings, including request bodies, path variables, and ResponseEntity.

Demonstrate creating rest API methods in a spring rest controller, detailing http status and response body for post, get, put, and delete mappings, using request body and path or query parameters.

Create a user controller in Spring Boot, wiring user, product, and transaction services to expose rest endpoints for register, get user, purchase, and get all products via Spring Security.

Create and wire an admin controller as a rest controller with dependency injection, exposing API endpoints to manage users, products, and transactions, including update, delete, find all, and count operations.

Discover how Spring Security enables secure login for authenticated rest api paths using an encrypted header, with UserDetailsService and password encryption.

Explore how security configurations are handled and overridden. Learn about authentication and authorization with sibling security, HTTP filters, the authentication manager, and the user details service.

Create a custom user details service implementation in spring security that loads users by username, handles not found cases, authenticates by user role, and returns username, password, and authorities.

explain spring security default configuration and customization, including form login and authorization header flows, session handling, cross site request forgery protection, and cross origin resource sharing policies.

Explore Spring Security authentication through HTTP filters and form login, using basic authorization tokens, username and password, UsernamePasswordAuthenticationToken, ProviderManager, and DAOAuthenticationProvider with retrieveUser and additionalAuthenticationChecks.

Implement authorization in Spring Security by configuring interceptors and urls for permit all, deny all, roles, authenticated, and fully authenticated, using AccessDecisionManager and voters with affirmative, consensus, or unanimous strategies.

Create a Spring security configuration to expose public resources and user endpoints, protect admin APIs with role-based access, enable basic authentication, and configure cors and a user details service.

Explore how Json web token enables role-based authentication by generating and validating tokens in client–server requests, using Spring filters to authorize login and admin list operations.

Configure json web token authentication to secure admin and user roles, define secret key and expiry, implement authorization header prefix, and store a transient token in the user entity.

Create a json web token provider in Spring Boot and Angular by implementing token generation, authentication extraction, and expiry validation using jwt signing.

Create a custom JWT authorization filter to validate tokens, set the Spring Security context authentication, and wire token generation from the user controller login.

Test the server side of the admin panel built with Spring Boot and Angular, verifying server functionality and readiness for integration.

Explore integrating the backend with the frontend by consuming rest api endpoints via http requests and handling backend data in the frontend once the backend is running.

Prepare the client-side infrastructure by installing and configuring the Angular CLI through NPM, and align it with the project's NPM version.

Learn Angular basics using the CLI to create projects, manage dependencies with npm and package.json, and build components, directives, services, pipes, guards, and lifecycle hooks.

Design an admin panel interface with Spring Boot and Angular to manage users and products, consume server data via API calls, and enable purchases.

Create an Angular CLI client project, install dependencies like Angular Material and Bootstrap, and scaffold login, register, profile, home, and admin pages with services, guards, and templates.

Configure an angular project by setting up angular material and its modules, enabling bootstrap and material icons, and importing http client and forms support for login and register forms.

Define Angular routes for an admin panel, including default home, profile and product detail with parameters, and admin dashboard, user and product lists, plus not found and unauthorized errors.

Explore model service controller and view architecture in Angular, detailing how to implement model classes, services, and controllers within an MVC cycle and use HDTV API calls for server communication.

Create a user model class on the client side in mvc architecture, mirroring server side logic. Define user and admin fields and default role values in the model package.

Create a product model class in the model package, implemented in lower case, and define the product fields. Build the foundation for the Spring Boot and Angular admin panel.

Create a Transaction model class in the model package, defining fields with default values and importing user and product fields to complete the Transaction class.

Explore how Angular uses http client and services to fetch data from server APIs, handle endpoints, and manage observable streams with next, error, and complete states for an admin panel.

Implement a reactive user service in Spring Boot and Angular, using observables and behavior subjects to manage current user via REST APIs for login, logout, registration, get products, and purchase.

This lesson implements an Angular authentication guard using canActivate to protect restricted routes, checking the current user's role from the authentication service and redirecting to login or unauthorized pages.

Implement 404 not found and 401 unauthorized error pages in the admin panel, create a container to display messages, and add a home page link for easy navigation.

Implement a register component and view, inject the user service in the constructor, call the user service register method with subscribe, and navigate to login page via the router module.

Implement a user profile component and view to display current user details, integrate the user service, handle logout via local storage, and route to login.

Create an admin home page that lists all products in a data table, enables viewing details and purchasing via a user service, and navigates to product detail pages.

Create the product detail component page by importing the product model, using the router to read the product id from route parameters, and displaying current product details from local storage.

Implement a user template with navigation bar linking login, register, and profile pics, log hours, and a logout method that navigates to login and shows admin and current user.

Implement the admin service to handle rest api interactions for managing users, products, and transactions, including creating, updating, deleting, and fetching data via observable methods.

Implement admin dashboard components, import and instantiate the admin service, define counts, fetch users, products, and transactions, and display statistics in dashboard cards on init.

Implement a user list page with a material table in Angular, wiring the admin service to find all users, and support update and delete via Bootstrap modals.

Implement a product list page component with material table in the Angular admin panel, enabling create, update, and lead operations via admin service while supporting sorting and paging.

Implement the transaction list component page and view using Angular and Material table. Import admin service and transaction model, set data source and columns, and enable sorting and paging.

Implement an admin template with horizontal and vertical Bootstrap navigation, showing login and register for guests and profile, current user, and log out, using user service observable and routing.

Implement the app component to render admin or user templates based on the current user's role, using the user service and router events.

Implement json web token handling on the angular client by storing the user token in local storage, creating a current user variable and headers with an authorization and content-type json.

Test the app by running the server side via the main class or a task, then test client side and change the user role from the database for initial setup.