DEV Community: bezkoder

JPA Many to One UniDirectional example

bezkoder — Tue, 11 Jan 2022 09:30:11 +0000

In this tutorial, I will show you how to implement JPA Many to One UniDirectional mapping with Hibernate in a Spring Boot example using @ManyToOne annotation. You'll know:

How to configure Spring Data, JPA, Hibernate to work with Database
How to define Data Models and Repository interfaces for JPA Many-to-One relationship
Way to use Spring JPA to interact with Database for Many-to-One association
Way to create Spring Rest Controller to process HTTP requests

Full Article: JPA Many to One UniDirectional example

JPA Many to One UniDirectional: Appropriate way to implement One To Many mapping

In a relational database, a One-to-Many relationship between table A and table B indicates that one row in table A links to many rows in table B, but one row in table B links to only one row in table A.

For example, you need to design data model for a Tutorial Blog in which One Tutorial has Many Comments. So this is a One-to-Many association.

You can map the child entities as a collection (List of Comments) in the parent object (Tutorial), and JPA/Hibernate provides the @OneToMany annotation for that case: only the parent-side defines the relationship. We call it unidirectional @OneToMany association.

Similarly, when only the child-side manage the relationship, we have unidirectional Many-to-One association with @ManyToOne annotation where the child (Comment) has an entity object reference to its parent entity (Tutorial) by mapping the Foreign Key column (tutorial_id).

The most appropriate way to implement JPA/Hibernate One To Many mapping is unidirectional Many-to-One association with @ManyToOne. You can read Vlad Mihalcea's article for more details.

JPA Many to One UniDirectional example

We're gonna create a Spring project from scratch, then we implement JPA/Hibernate One to Many Mapping with tutorials and comments table as following:

We also write Rest Apis to perform CRUD operations on the Comment entities.

These are APIs that we need to provide:

Methods	Urls	Actions
POST	/api/tutorials/:id/comments	create new Comment for a Tutorial
GET	/api/tutorials/:id/comments	retrieve all Comments of a Tutorial
GET	/api/comments/:id	retrieve a Comment by `:id`
PUT	/api/comments/:id	update a Comment by `:id`
DELETE	/api/comments/:id	delete a Comment by `:id`
DELETE	/api/tutorials/:id	delete a Tutorial (and its Comments) by `:id`
DELETE	/api/tutorials/:id/comments	delete all Comments of a Tutorial

Assume that we've had tutorials table like this:

Here are the example requests:

Create new Comments: POST /api/tutorials/[:id]/comments

comments table after that:

Retrieve all Comments of specific Tutorial: GET /api/tutorials/[:id]/comments

Delete all Comments of specific Tutorial: DELETE /api/tutorials/[:id]/comments

Check the comment table, all Comments of Tutorial with id=2 were deleted:

Delete a Tutorial: DELETE /api/tutorials/[:id]

All Comments of the Tutorial with id=3 were CASCADE deleted automatically.

Let's build our Spring Boot One to Many CRUD example.

Spring Boot Many to One example

Technology

Java 8
Spring Boot 2.6.2 (with Spring Web MVC, Spring Data JPA)
PostgreSQL/MySQL
Maven 3.8.1

Project Structure

Let me explain it briefly.

– Tutorial, Comment data model class correspond to entity and table tutorials, comments.
– TutorialRepository, CommentRepository are interfaces that extends JpaRepository for CRUD methods and custom finder methods. It will be autowired in TutorialController, CommentController.
– TutorialController, CommentController are RestControllers which has request mapping methods for RESTful CRUD API requests.
– Configuration for Spring Datasource, JPA & Hibernate in application.properties.
– pom.xml contains dependencies for Spring Boot and MySQL/PostgreSQL/H2 database.

– About exception package, to keep this post straightforward, I won't explain it. For more details, you can read following tutorial:
@RestControllerAdvice example in Spring Boot

For step by step and Github, please visit:
https://www.bezkoder.com/jpa-one-to-many/

You can apply this implementation in following tutorials:

Spring Boot + Microsoft SQL Server: CRUD Operations example

bezkoder — Mon, 16 Aug 2021 09:35:11 +0000

In this tutorial, we're gonna build a Spring Boot CRUD Operations example with Maven that use Spring Data JPA to interact with Microsoft SQL Server (MSSQL). You'll know:

Way to use SQL Server maven dependency in Spring Boot
How to configure Spring Data, JPA, Hibernate to work with Database
How to define Data Models and Repository interfaces
Way to create Spring Rest Controller to process HTTP requests
Way to use Spring Data JPA to interact with MSSQL Database

Full Article: Spring Boot + SQL Server: CRUD Operations example

Overview of Spring Boot + SQL Server example

We will build a Spring Boot CRUD Rest Apis using Spring Data JPA with SQL Server (MSSQL) Database for a Tutorial application in that:

Each Tutotial has id, title, description, published status.
Apis help to create, retrieve, update, delete Tutorials.
Apis also support custom finder methods such as find by published status or by title.

These are APIs that we need to provide:

Methods	Urls	Actions
POST	/api/tutorials	create new Tutorial
GET	/api/tutorials	retrieve all Tutorials
GET	/api/tutorials/:id	retrieve a Tutorial by `:id`
PUT	/api/tutorials/:id	update a Tutorial by `:id`
DELETE	/api/tutorials/:id	delete a Tutorial by `:id`
DELETE	/api/tutorials	delete all Tutorials
GET	/api/tutorials/published	find all published Tutorials
GET	/api/tutorials?title=[keyword]	find all Tutorials which title contains `keyword`

We make CRUD operations & finder methods with Spring Data JPA's JpaRepository.
The database will be SQL Server (MSSQL) by configuring project dependency & datasource.

Technology

Java 8
Spring Boot 2.5 (with Spring Web MVC, Spring Data JPA)
Microsoft SQL Server (MSSQL)
Maven 3.6.1

Project Structure

Let me explain it briefly.

– Tutorial data model class corresponds to entity and table tutorials.
– TutorialRepository is an interface that extends JpaRepository for CRUD methods and custom finder methods. It will be autowired in TutorialController.
– TutorialController is a RestController which has request mapping methods for RESTful requests such as: getAllTutorials, createTutorial, updateTutorial, deleteTutorial, findByPublished...
– Configuration for Spring Datasource, JPA & Hibernate in application.properties.
– pom.xml contains dependencies for Spring Boot and SQL Server.

Run the Spring Boot + Microsoft SQL Server CRUD example

Run Spring Boot application with command: mvn spring-boot:run.

tutorials table will be automatically generated in Microsoft SQL Server Database.

Create some Tutorials:

MSSQL tutorials table after that:

Retrieve All Tutorials:

Retrieve a Tutorial by Id:

Update some Tutorials:

The table data is changed:

Find all Tutorials which title contains string 'ring':

Find all published Tutorials:

Delete a Tutorial:

Delete all Tutorials:

MSSQL database table is clean now:

You can also test this Spring Boot App with Client in one of these posts:

For step by step instruction and Github source code, please visit:
Spring Boot + SQL Server: CRUD Operations example

@RestControllerAdvice Annotation in Spring

bezkoder — Thu, 15 Apr 2021 13:38:30 +0000

In this tutorial, we're gonna look at an Spring Boot exception handling example that uses @RestControllerAdvice annotation. I also show you the comparison between @RestControllerAdvice and @ControllerAdvice along with the use of @ExceptionHandler annotation.

Full Article: https://bezkoder.com/spring-boot-restcontrolleradvice/

Rest API exception handling

We've created Rest Controller for CRUD Operations and finder method.
Let look at the code:
(step by step to build the Rest APIs is in:

@RestController
public class TutorialController {

  @Autowired
  TutorialRepository tutorialRepository;

  @GetMapping("/tutorials")
  public ResponseEntity&lt;List&lt;Tutorial>> getAllTutorials(@RequestParam(required = false) String title) {
    try {
      ...
      return new ResponseEntity&lt;>(tutorials, HttpStatus.OK);
    } catch (Exception e) {
      return new ResponseEntity&lt;>(null, HttpStatus.INTERNAL_SERVER_ERROR);
    }
  }

  @GetMapping("/tutorials/{id}")
  public ResponseEntity&lt;Tutorial> getTutorialById(@PathVariable("id") long id) {
    Optional&lt;Tutorial> tutorialData = tutorialRepository.findById(id);

    if (tutorialData.isPresent()) {
      return new ResponseEntity&lt;>(tutorialData.get(), HttpStatus.OK);
    } else {
      return new ResponseEntity&lt;>(HttpStatus.NOT_FOUND);
    }
  }

  @PutMapping("/tutorials/{id}")
  public ResponseEntity&lt;Tutorial> updateTutorial(@PathVariable("id") long id, @RequestBody Tutorial tutorial) {
    Optional&lt;Tutorial> tutorialData = tutorialRepository.findById(id);

    if (tutorialData.isPresent()) {
      ...
      return new ResponseEntity&lt;>(tutorialRepository.save(_tutorial), HttpStatus.OK);
    } else {
      return new ResponseEntity&lt;>(HttpStatus.NOT_FOUND);
    }
  }

  ...

  @DeleteMapping("/tutorials/{id}")
  public ResponseEntity&lt;HttpStatus> deleteTutorial(@PathVariable("id") long id) {
    try {
      tutorialRepository.deleteById(id);
      return new ResponseEntity&lt;>(HttpStatus.NO_CONTENT);
    } catch (Exception e) {
      return new ResponseEntity&lt;>(HttpStatus.INTERNAL_SERVER_ERROR);
    }
  }

  @DeleteMapping("/tutorials")
  public ResponseEntity&lt;HttpStatus> deleteAllTutorials() {
    // try and catch
  }

  @GetMapping("/tutorials/published")
  public ResponseEntity&lt;List&lt;Tutorial>> findByPublished() {
    // try and catch
  }
}

You can see that we use try/catch many times for similar exception (INTERNAL_SERVER_ERROR), and there are also many cases that return NOT_FOUND.

Is there any way to keep them simple, any way to attach the error response message smartly and flexibility?
Let's solve the problem now.

@RestControllerAdvice annotation

Spring supports exception handling by a global Exception Handler (@ExceptionHandler) with Controller Advice (@RestControllerAdvice).

@RestControllerAdvice
public class ControllerExceptionHandler {

  @ExceptionHandler(value = {ResourceNotFoundException.class, CertainException.class})
  @ResponseStatus(value = HttpStatus.NOT_FOUND)
  public ErrorMessage resourceNotFoundException(ResourceNotFoundException ex, WebRequest request) {
    ErrorMessage message = new ErrorMessage(
        status,
        date,
        ex.getMessage(),
        description);

    return message;
  }
}

The @RestControllerAdvice annotation is specialization of @Component annotation so that it is auto-detected via classpath scanning. It is a kind of interceptor that surrounds the logic in our Controllers and allows us to apply some common logic to them.

Rest Controller Advice's methods (annotated with @ExceptionHandler) are shared globally across multiple @Controller components to capture exceptions and translate them to HTTP responses. The @ExceptionHandler annotation indicates which type of Exception we want to handle. The exception instance and the request will be injected via method arguments.

By using two annotations together, we can:

control the body of the response along with status code
handle several exceptions in the same method

How about @ResponseStatus?

@RestControllerAdvice annotation tells a controller that the object returned is automatically serialized into JSON and passed it to the HttpResponse object. You only need to return Java body object instead of ResponseEntity object. But the status could be always OK (200) although the data corresponds to exception signal (404 - Not Found for example). @ResponseStatus can help to set the HTTP status code for the response:

@ResponseStatus(value = HttpStatus.NOT_FOUND)
public ErrorMessage resourceNotFoundException(ResourceNotFoundException ex, WebRequest request) {
  // ...    
  return message;
}

@RestControllerAdvice with @ResponseEntity

If you use @RestControllerAdvice without @ResponseBody and @ResponseStatus, you can return ResponseEntity object instead.

@RestControllerAdvice
public class ControllerExceptionHandler {

  @ExceptionHandler(ResourceNotFoundException.class)
  @ResponseStatus(value = HttpStatus.NOT_FOUND)
  public ErrorMessage resourceNotFoundException(ResourceNotFoundException ex, WebRequest request) {
    ErrorMessage message = new ErrorMessage(...);

    return message;
  }
}

@ControllerAdvice vs @RestControllerAdvice

For more details and implementing the example, please visit:
https://bezkoder.com/spring-boot-restcontrolleradvice/

React Redux CRUD example with axios and Rest API

bezkoder — Tue, 06 Apr 2021 03:38:40 +0000

In this tutorial, I will show you how to build a React Redux CRUD example consume Rest API. You also can display and modify data with Router, Axios & Bootstrap.

Full Article: https://bezkoder.com/react-redux-crud-example/

Overview of React Redux CRUD example

We will build a React Redux Tutorial Application with Rest API in that:

Each Tutorial has id, title, description, published status.
We can create, retrieve, update, delete Tutorials.
There is a Search bar for finding Tutorials by title.

Here are screenshots of our React Redux CRUD Application.

Create an item:

Retrieve all items:

Click on Edit button to update an item:

On this Page, you can:

change status to Published using Publish button
delete the item using Delete button
update the item details with Update button

Search Tutorials by title:

Redux Store:

This React Client consumes the following Web API:

Methods	Urls	Actions
POST	/api/tutorials	create new Tutorial
GET	/api/tutorials	retrieve all Tutorials
GET	/api/tutorials/:id	retrieve a Tutorial by `:id`
PUT	/api/tutorials/:id	update a Tutorial by `:id`
DELETE	/api/tutorials/:id	delete a Tutorial by `:id`
DELETE	/api/tutorials	delete all Tutorials
GET	/api/tutorials?title=[keyword]	find all Tutorials which title contains `keyword`

You can find step by step to build a Server like this in one of these posts:

React Redux App Component Diagram with Router & Axios

Now look at the React components that we're gonna implement:

– The App component is a container with React Router. It has navbar that links to routes paths.

– Three components that dispatch actions to Redux Thunk Middleware which uses TutorialDataService to call Rest API.

TutorialsList component gets and displays Tutorials.
Tutorial component has form for editing Tutorial's details based on :id.
AddTutorial component has form for submission new Tutorial.

– TutorialDataService uses axios to make HTTP requests and receive responses.

React Redux with API Calls example

This diagram shows how Redux elements work in our React Application:

We're gonna create Redux store for storing tutorials data. Other React Components will work with the Store via dispatching an action.

The reducer will take the action and return new state.

Technology

React 17/16
react-redux 7.2.3
redux 4.0.5
redux-thunk 2.3.0
react-router-dom 5.2.0
axios 0.21.1
bootstrap 4

Project Structure

I'm gonna explain it briefly.

package.json contains main modules: react, react-router-dom, react-redux, redux, redux-thunk, axios & bootstrap.
App is the container that has Router & navbar.
There are 3 components: TutorialsList, Tutorial, AddTutorial.
http-common.js initializes axios with HTTP base Url and headers.
TutorialDataService has methods for sending HTTP requests to the Apis.
.env configures port for this React CRUD App.

About Redux elements that we're gonna use:

actions folder contains the action creator (tutorials.js for CRUD operations and searching).
reducers folder contains the reducer (tutorials.js) which updates the application state corresponding to dispatched action.

More steps and Github source code at:
https://bezkoder.com/react-redux-crud-example/

Or you can add Pagination Component:
React Pagination with API using Material-UI

React Table Pagination (Server side) with Search | react-table v7

bezkoder — Sun, 04 Apr 2021 04:11:35 +0000

In this tutorial, I will show you how to make React Table Pagination (Server side) with Search in a React Hooks Application using react-table v7 for data table and Material-UI for pagination.

Full Article: https://bezkoder.com/react-table-pagination-server-side/

React Table Pagination (Server side) with Search example

One of the most important things to make a website friendly is the response time, and pagination comes for this reason. For example, this bezkoder.com website has hundreds of tutorials, and we don’t want to see all of them at once. Paging means displaying a small number of all, by a page.

Assume that we have tutorials table in database like this:

Our React.js app will display the result with react-table pagination (server side):

Change to a page with larger index:

We can change quantity of items per page (page size):

Or table pagination with search:

The API for this React client can be found at one of following posts:

These Servers will exports API for pagination (with/without filter), here are some url samples:

/api/tutorials?page=1&size=5
/api/tutorials?size=5: using default value for page
/api/tutorials?page=1: using default value for size
/api/tutorials?title=data&page=1&size=3: pagination & filter by title containing 'data'

This is structure of the response for the HTTP GET request:

{
    "totalItems": 8,
    "tutorials": [...],
    "totalPages": 3,
    "currentPage": 1
}

We actually only need to use tutorials and totalPages when working with Material-UI.

For step by step and Github source code, please visit:
https://bezkoder.com/react-table-pagination-server-side/

Vue.js Firestore CRUD App example

bezkoder — Sat, 06 Mar 2021 04:46:16 +0000

In this tutorial, I will show you step by step to build a Vue.js Firetore CRUD App example.

Full Article: https://bezkoder.com/vue-firestore-crud/

Vue Firestore CRUD Overview

We're gonna build an Vue Firestore CRUD App using firebase library in which:

Each Tutorial has key, title, description, published status.
We can create, retrieve, update, delete Tutorials (CRUD operations) from Firebase Firestore

Here are the screenshots:

Create a new Tutorial:

Cloud Firestore after the Create Operations:

– Retrieve all Tutorials, the details will show when clicking on any Tutorial:

Change status to Published/Pending using Publish/UnPublish button:

Update the Tutorial details with Update button:

Delete the Tutorial using Delete button:

Vue.js Firestore CRUD Project Structure

Let me explain it briefly.

package.json contains 3 main modules: vue, vue-router, firebase.
firebase.js configures information to connect with Firebase Project and export Firebase Firestore service.
TutorialDataService exports TutorialDataService that uses firebase's Firestore CollectionReference to interact with Firestore collection.
There are 3 components that uses TutorialDataService:
- AddTutorial for creating new item
- TutorialsList contains list of items, parent of Tutorial
- Tutorial shows item details
router.js defines routes for components.
App.Vue contains Router View and navigation bar.

For more details, implementation and Github, please visit:
https://bezkoder.com/vue-firestore-crud/

ReactJs JWT Authentication example

bezkoder — Sun, 10 Jan 2021 02:27:08 +0000

Full Article: https://bezkoder.com/react-jwt-auth/

In this tutorial, we're gonna build a Reactjs JWT Token Authentication: Login and Registration example (with Authorization) using LocalStorage, React Router, Axios and Bootstrap (without Redux). I will show you:

JWT Authentication Flow for User Signup & User Login
Project Structure for React JWT Authentication (without Redux) with LocalStorage, React Router & Axios
Creating React Components with Form Validation
React Components for accessing protected Resources (Authorization)
Dynamic Navigation Bar in React App

Note: The tutorial is for learning purpose. Better practice is to store JWT in HttpOnly cookie:
React.js Login & Registration example – JWT & HttpOnly Cookie

Or using Redux for state management:
React Redux: JWT Authentication & Authorization example

Overview of ReactJs JWT Authentication example

We will build a React application in that:

There are Login/Logout, Signup pages.
Form data will be validated by front-end before being sent to back-end.
Depending on User’s roles (admin, moderator, user), Navigation Bar changes its items automatically.

Here are the screenshots:
– Signup Page:

– Signup failed:

– Form Validation Support:

– Login Page:

– Profile Page (for successful Login):

– For Moderator account login, the navigation bar will change by authorities:

– Check Browser Local Storage:

User Registration and User Login Flow

For JWT Authentication, we’re gonna call 2 endpoints:

POST api/auth/signup for User Registration
POST api/auth/signin for User Login

The following flow shows you an overview of Requests and Responses that React Client will make or receive. This React Client must add a JWT to HTTP Header before sending request to protected resources.

You can find step by step to implement these back-end servers in following tutorial:

Demo Video

This is full React + Node.js Express JWT Authentication & Authorization demo (with form validation, check signup username/email duplicates, test authorization with 3 roles: Admin, Moderator, User):

Or React + Spring Boot JWT Authentication & Authorization demo:

ReactJs JWT Authentication Component Diagram

Let's look at the diagram below.

The App component is a container with React Router (BrowserRouter). Basing on the state, the navbar can display its items.
Login & Register components have form for data submission (with support of react-validation library). They call methods from auth.service to make login/register request.
auth.service methods use axios to make HTTP requests. Its also store or get JWT from Browser Local Storage inside these methods.
Home component is public for all visitor.
Profile component displays user information after the login action is successful.
BoardUser, BoardModerator, BoardAdmin components will be displayed by state user.roles. In these components, we use user.service to access protected resources from Web API.
user.service uses auth-header() helper function to add JWT to HTTP header. auth-header() returns an object containing the JWT of the currently logged in user from Local Storage.

Project Structure

This is folders & files structure for this React application:

For more details, implementation and Github, please visit:
https://bezkoder.com/react-jwt-auth/

Note: The tutorial is for learning purpose. Better practice is to store JWT in HttpOnly cookie:
React.js Login & Registration example – JWT & HttpOnly Cookie

Or using Redux for state management:
React Redux: JWT Authentication & Authorization example

Angular 10 upload file/image to Node.js Express server example

bezkoder — Fri, 08 Jan 2021 10:00:25 +0000

In this tutorial, I will show you way to build Angular 10 with Node.js Express: File/Image upload & download example.

Original Post: https://bezkoder.com/angular-10-node-js-file-upload/

Newer version with Angular 11:
https://bezkoder.com/angular-11-node-js-file-upload/

Overview

We're gonna create a full-stack Angular 10 + Node.js: File/Image upload with Express Rest APIs, in that user can:

see the upload process (percentage)
view all uploaded files/images
download by clicking on the file name

All uploaded files will be saved in uploads folder:

If you want to upload multiple files/images at once like this:

You can find the instruction here:
Angular 10 upload Multiple Images example

Technology

Server:

express 4.17.1
multer 1.4.2
cors 2.8.5

Client:

Angular 10
RxJS 6
Bootstrap 4

Node.js Express Rest APIs for File Upload & Storage

Node.js Server will provide APIs:

Methods	Urls	Actions
POST	/upload	upload a File
GET	/files	get List of Files (name & url)
GET	/files/[filename]	download a File

This is the project structure:

resources/static/assets/uploads: folder for storing uploaded files.
middleware/upload.js: initializes Multer Storage engine and defines middleware function to save uploaded files in uploads folder.
file.controller.js exports Rest APIs: POST a file, GET all files' information, download a File with url.
routes/index.js: defines routes for endpoints that is called from HTTP Client, use controller to handle requests.
server.js: initializes routes, runs Express app.

You can find Step by Step to implement the Node.js Express Server (with Github) at:
Node.js Express File Upload Rest API example using Multer

Angular 10 Client for file upload/download UI

This is the project structure that we're gonna build:

We import necessary library, components in app.module.ts.
upload-file.service provides methods to save File and get Files from Spring Boot Server.
upload-files.component contains upload form, progress bar, display of list files.
app.component is the container that we embed all components.
index.html for importing the Bootstrap.

Angular Service for File Upload
This service will use Angular HTTPClient to send HTTP requests.
There are 2 functions:

upload(file): returns Observable<HttpEvent<any>> that we're gonna use for tracking progress
getFiles(): returns a list of Files' information as Observable object

export class UploadFileService {

  constructor(private http: HttpClient) { }

  upload(file: File): Observable<HttpEvent<any>> {
    ...
  }

  getFiles(): Observable<any> {
    ...
  }
}

Angular Component for File Upload
File Upload Component has Progress Bar, Card, Button and Message. It injects UploadFileService to call uploadService.upload() method.

The upload progress will be calculated basing on event.loaded and event.total.
If the transmission is done, the event will be a HttpResponse object. At this time, we call uploadService.getFiles() to get the files' information and assign the result to fileInfos variable.

upload() {
  this.progress = 0;

  this.currentFile = this.selectedFiles.item(0);
  this.uploadService.upload(this.currentFile).subscribe(
    event => {
      if (event.type === HttpEventType.UploadProgress) {
        this.progress = Math.round(100 * event.loaded / event.total);
      } else if (event instanceof HttpResponse) {
        this.message = event.body.message;
        this.fileInfos = this.uploadService.getFiles();
      }
    },
    err => {
      this.progress = 0;
      this.message = 'Could not upload the file!';
    });
}

For more details, implementation and Github, please visit:
https://bezkoder.com/angular-10-node-js-file-upload/

Run the App

Run Spring Boot Server with command: mvn spring-boot:run.
Refresh the project directory and you will see uploads folder inside it.

Because we configure CORS for origin: http://localhost:8081, so you need to run Angular 10 Client with command:
ng serve --port 8081

Open Browser with url http://localhost:8081/ and check the result.

React Multiple Images Upload with Preview example

bezkoder — Wed, 06 Jan 2021 04:19:38 +0000

In this React tutorial, I will show you way to build React.js Multiple Images upload example with Preview using Axios and Multipart File for making HTTP requests, Bootstrap for progress bar and display list of images' information (with download url).

Original Full Post: https://bezkoder.com/react-multiple-image-upload-with-preview/

React Multiple Images upload Overview

We’re gonna create a React.js Multiple Images Upload with Preview application in that user can:

see the preview of images that will be uploaded
see the upload process (percentage) of each image with progress bars
view all uploaded files
download link to file when clicking on the file name

Here are screenshots of our React App:

Before upload:

Upload is done:

List of Images Display with download Urls:

Show status for each image upload:

Web API for Image Upload & Storage

Here are APIs that we will use Axios to make HTTP requests:

Methods	Urls	Actions
POST	/upload	upload a File
GET	/files	get List of Files (name & url)
GET	/files/[filename]	download a File

You can find how to implement the Rest APIs Server at one of following posts:

Project Structure

After building the React project is done, the folder structure will look like this:

Let me explain it briefly.

file-upload.service provides methods to save File and get Files using Axios.
images-upload.component contains upload form for multiple images, preview, progress bar, list of uploaded images display.
App.js is the container that we embed all React components.
http-common.js initializes Axios with HTTP base Url and headers.
We configure port for our App in .env

For more details, implementation and Github, please visit:
https://bezkoder.com/react-multiple-image-upload-with-preview/

CRUD Operations in React.js and MySQL example

bezkoder — Mon, 04 Jan 2021 14:27:37 +0000

In this tutorial, I will show you how to make CRUD Operation in React.js and MySQL example using Express & Sequelize. The back-end server uses Node.js + Express for REST APIs, front-end side is a React.js client with React Router, Axios & Bootstrap.

Full Article: https://bezkoder.com/react-node-express-mysql/

CRUD Operations with React.js and MySQL Overview

We will build a full-stack Tutorial Application in that:

Tutorial has id, title, description, published status.
User can create, retrieve, update, delete Tutorials.
There is a search box for finding Tutorials by title.

Here are screenshots of the example.

– Add an item:

– Show all items:

– Click on Edit button to view details of an item:

On this Page, you can:

change status to Published/Pending using Publish/UnPublished button
remove the object from MySQL Database using Delete button
update this object's details on Database with Update button

Search objects by field 'title':

Check MySQL database:

React + Node.js + MySQL Architecture

We're gonna build the application with following architecture:

– Node.js Express exports REST APIs & interacts with MySQL Database using Sequelize ORM.
– React Client sends HTTP Requests and retrieves HTTP Responses using Axios, consume data on the components. React Router is used for navigating to pages.

Video

This is our React Node.js Express Sequelize application demo (with brief instruction) running with MySQL database.

Node.js Express Back-end

These are APIs that Node.js Express App will export:

Methods	Urls	Actions
GET	api/tutorials	get all Tutorials
GET	api/tutorials/:id	get Tutorial by `id`
POST	api/tutorials	add new Tutorial
PUT	api/tutorials/:id	update Tutorial by `id`
DELETE	api/tutorials/:id	remove Tutorial by `id`
DELETE	api/tutorials	remove all Tutorials
GET	api/tutorials?title=[kw]	find all Tutorials which title contains `'kw'`

React.js Front-end

– The App component is a container with React Router. It has navbar that links to routes paths.

– TutorialsList component gets and displays Tutorials.
– Tutorial component has form for editing Tutorial's details based on :id.
– AddTutorial component has form for submission new Tutorial.

– These Components call TutorialDataService methods which use axios to make HTTP requests and receive responses.

For more details, implementation and Github, please visit:
https://bezkoder.com/react-node-express-mysql/

Spring Boot + Angular: Pagination example

bezkoder — Sun, 03 Jan 2021 07:54:09 +0000

In this tutorial, I will show you how to build a full-stack Pagination (Angular + Spring Boot) example on Server side. The back-end server uses Spring Data and Spring Web for REST APIs, front-end side is an Angular 11/10/8 App with HTTPClient.

Full Article: https://bezkoder.com/pagination-spring-boot-angular-11/

Pagination with Angular & Spring Boot example

Assume that we have tutorials table in database like this:

We need to export APIs for pagination (with/without filter) as following samples:

/api/tutorials?page=1&size=3
/api/tutorials?size=5: using default value for page
/api/tutorials?title=data&page=1&size=5: pagination & filter by title containing 'data'
/api/tutorials/published?page=2: pagination & filter by 'published' status

This is structure of the result that we want to get from the APIs:

{
    "totalItems": 12,
    "tutorials": [...],
    "totalPages": 3,
    "currentPage": 1
}

Our Angular app will display the result with pagination:

You can change to a page with larger index:

Or change page size (quantity of items per page):

Or paging with filter:

Full-stack Architecture

We're gonna build the application with following architecture:

Spring Boot exports REST Apis using Spring Web MVC & interacts with Database using Spring Data.
Angular 11/10/8 Client sends HTTP Requests and retrieve HTTP Responses using axios, shows data on the components. We also use Angular Router for navigating to pages.

For more details, please visit: https://bezkoder.com/pagination-spring-boot-angular-11/

React.js + Node.js + MongoDB CRUD example - MERN stack Application

bezkoder — Sat, 02 Jan 2021 12:09:30 +0000

In this tutorial, we're gonna build a MERN stack: React.js + Node.js + MongoDB CRUD Application with Express example. The back-end server uses Node.js + Express for REST APIs, front-end side is a React client with React Router, Axios & Bootstrap.

Full Article: https://bezkoder.com/react-node-express-mongodb-mern-stack/

React.js + Node.js + MongoDB CRUD example Overview

We will build a full-stack Tutorial Application in that:

Tutorial has id, title, description, published status.
User can create, retrieve, update, delete Tutorials.
There is a search box for finding Tutorials by title.

- Add an item:

- Show all items:

– Click on Edit button to view details of an item:

On this Page, you can:

change status to Published/Pending using Publish/UnPublished button
remove the object from MongoDB Database using Delete button
update this object's details on Database with Update button

- Search items by field 'title':

Check MongoDB Database:

MERN stack Architecture

Our React.js + Node.js + MongoDB CRUD application will follow this architecture:

Node.js Express exports REST APIs & interacts with MongoDB Database using Mongoose ODM.
React Client sends HTTP Requests and retrieves HTTP Responses using Axios, consumes data on the components. React Router is used for navigating to pages.

Video

This is brief instruction on React Node.js Express application running with MongoDB database.

Node.js Express MongoDB Back-end

These are APIs that Node.js Express App will export:

Methods	Urls	Actions
GET	api/tutorials	get all Tutorials
GET	api/tutorials/:id	get Tutorial by `id`
POST	api/tutorials	add new Tutorial
PUT	api/tutorials/:id	update Tutorial by `id`
DELETE	api/tutorials/:id	remove Tutorial by `id`
DELETE	api/tutorials	remove all Tutorials
GET	api/tutorials?title=[kw]	find all Tutorials which title contains `'kw'`

React.js Front-end

The App component is a container with React Router. It has navbar that links to routes paths.
TutorialsList component gets and displays Tutorials.
Tutorial component has form for editing Tutorial's details based on :id.
AddTutorial component has form for submission new Tutorial.
These Components call TutorialDataService methods which use axios to make HTTP requests and receive responses.

For more details, implementation and Github, please visit:
https://bezkoder.com/react-node-express-mongodb-mern-stack/

DEV Community: bezkoder

JPA Many to One UniDirectional example

JPA Many to One UniDirectional: Appropriate way to implement One To Many mapping

JPA Many to One UniDirectional example

Spring Boot Many to One example

Technology

Project Structure

Further Reading

Spring Boot + Microsoft SQL Server: CRUD Operations example

Overview of Spring Boot + SQL Server example

Technology

Project Structure

Run the Spring Boot + Microsoft SQL Server CRUD example

Further Reading

@RestControllerAdvice Annotation in Spring

Rest API exception handling

@RestControllerAdvice annotation

@RestControllerAdvice with @ResponseEntity

@ControllerAdvice vs @RestControllerAdvice

Further Reading

React Redux CRUD example with axios and Rest API

Overview of React Redux CRUD example

React Redux App Component Diagram with Router & Axios

React Redux with API Calls example

Technology

Project Structure

Further Reading

React Table Pagination (Server side) with Search | react-table v7

React Table Pagination (Server side) with Search example

Further Reading

Vue.js Firestore CRUD App example

Vue Firestore CRUD Overview

Vue.js Firestore CRUD Project Structure

Further Reading

ReactJs JWT Authentication example

Overview of ReactJs JWT Authentication example

User Registration and User Login Flow

Demo Video

ReactJs JWT Authentication Component Diagram

Project Structure

Angular 10 upload file/image to Node.js Express server example

Overview

Technology

Node.js Express Rest APIs for File Upload & Storage

Angular 10 Client for file upload/download UI

Run the App

Further Reading

React Multiple Images Upload with Preview example

React Multiple Images upload Overview

Web API for Image Upload & Storage

Project Structure

Further Reading

CRUD Operations in React.js and MySQL example

CRUD Operations with React.js and MySQL Overview

React + Node.js + MySQL Architecture

Video

Node.js Express Back-end

React.js Front-end

Further Reading

Spring Boot + Angular: Pagination example

Pagination with Angular & Spring Boot example

Full-stack Architecture

Further Reading

React.js + Node.js + MongoDB CRUD example - MERN stack Application

React.js + Node.js + MongoDB CRUD example Overview

MERN stack Architecture

Video

Node.js Express MongoDB Back-end

React.js Front-end

Further Reading