Tutorial Simple CRUD Angular 5 And Lumen 5.6 For Beginners

In this article, I will share a tutorial on how to create a simple CRUD application using Angular 5 and Lumen API 5.6. Using Angular as a front-end is highly in demand for software developers these days. In addition LUMEN as the backend server API is easy to develop and use. Angular 5 and Lumen 5.6 are powerful frontend and backend combinations. Follow the following tutorial.

We will try to create a simple restaurant menu application where the app can add menu, edit, delete and display menu in HTML table using angular 5. You can see the following video footage to see what we will do in this article.

 

Another article: Angular 4 Tutorial For Beginner With Simple App Project

Okay, Get started:

If you have prepared the four tools above, the next step is to create a new database

Create a New Database

Create a MySQL database with the name “restopjx”. You can create it using SQLyog or manually with the following command

Creating a Lumen Project 5.6

Create a lumen project using the following command.

After the project formed, go to the project folder. Configure the database in the  .env  file in the “restoapi” folder and fill it with your database settings.

Edit the app.php file in the “bootstrap” folder.

  1. Unmark // in the code “withFacades and withEloquent“.
  2. Enable Authenticate middleware and create a new middleware to solve Cors-origin problems in the lumen.
  3. Create a new middleware named CorsMiddleware.php inside the app/Http/Middleware folder and copy the following code

We will create a migration file that will use to create tables in the restopjx database automatically. Make 2 pieces of file migration using the following command.

Make sure both files have been formed in the folder “database/migrations/”

Another article: Restful API Tutorial With Lumen Laravel 5.5 For Beginners

Open the first file (in my experiment file named 2018_03_22_042752_create_menu_table.php) and copy the following code

Open the second file (in my experiment file named 2018_03_22_031419_create_m_menu_type_table.php) and copy the following code:

Run the migration file with the following command

If successful, will formed 2 pieces of tables in restopjx database as shown below

Create Database Tables Using Migration Lumen 5.6 Tutorial Angular 5

Creating a Model on Lumen

The next step is to create 2 models in the app folder that is m_menu.php and m_menu_type.php

Open the m_menu.php and copy the following code

Open the m_menu_type.php and copy the following code

Creating a Controller on Lumen

The next step creates 2 controllers MenuController.php and MenuTypeController.php in the app/Http/Controllers folder

Open the MenuController.php file and copy the following code

Open the MenuTypeController.php file and copy the following code

Edit the Controller.php file to add the buildFailedValidationResponse function used to return the validation results in JSON format

A brief description:

Controller is the most important part. All business cores are encoded in this section.

Creating a Route on Lumen

Please open the routes/web.php file and fill in the following code

Up to this point, backend server application APIs using lumens are ready to use. The next step we will make the application front-end using angular 5

Creating an angular project 5

Create a new project angular 5 as restopjx

The simple crud application that we will create requires a bootstrap css framework. Install some bootstrap modules for bootstrap css to run properly

In Angular 5, CRUD applications require multiple components, route, service and a resolve. We will prepare some of these files first.

Create Component on Angular 5

Create Service on Angular 5

Create Resolve on Angular 5

To make a resolve file on angular-cli can be done manually

Create a folder called resolve inside the app folder and create a new ts file named get_menu_type.resolve.ts

Create Routing on Angular 5

Similarly creating a resolved file, to create routing files using angular-cli can only be done manually.

Create a file with app.route.ts name in the app folder

A brief description:

  • The bootstrap module is used to run the bootstrap component without requiring help from JQuery.
  • Create 3 pieces of the component that is a dashboard, home, and menu.
    • the dashboard is used as a parent route or as an application interface layout.
    • the home component is used to create the main page.
    • the menu component is used to make the crud application
  • There are 2 pieces of service that is data and httpinterceptor
    • data service is used to use the API of the lumen server we have created
    • httpinterceptor service is used to resolve if API server returns code 500 and 404 on angular 5
  • Create a resolve to initialize the data before loading the entire HTML view, this resolve is used to retrieve data from the m_menu_type table via the API server.
  • Create routing to handle our request in the Url then directs the app to call the specified page / resource

After installing bootstrap and jquery, the next step is to put all the bootstrap CSS and js files on .angular-cli.json

How to install ng-bootstrap on angular 5

after installing ng-bootstrap via npm, the next step we need to load some modules so that the bootstrap framework can run properly in app.module.ts file. You can read more through the ng-bootstrap official site.

Please open app.module.ts file and add the following code

Open app.component.ts file and fill the following code

The next step we will add the code to some components that we have made above

Dashboard component

Open the dashboard.component.ts file and fill the following code

Edit and add the code in dashboard.component.html as follows

A brief description:

dashboard component used as parent layout which contains navbar and which all application module will displayed on dashboard component.

Home component

Open home.component.ts file and fill in the following code

Open the home.component.html file and fill in the following code

A brief description:

the home component used as the main page of the application. When we open a web page from  localhost:4200, the application will display the home as default page.

Menu component

Open menu.component.ts file and fill in the following code

Edit and add the following code to the menu.component.html file

A brief description:

  • The component menu is the main component that contains the code for CRUD applications.

Catch Resolve Angular 5 Tutorial

  • The above code is used to extract data from angular 5 resolve.
  • In this app, I apply angular reactive-form. More info read angular official site.
  • In the menu form, I apply bootstrap modal dialog, using ng-bootstrap.

Until this stage the coding of all components is complete, the next step we will add the code to the angular 5 service.

Data service

Httpinterceptor service

The next step is to add the code to the angular 5 resolve that we have created above: get_menu_types.resolve.ts

The final step is to add the code in the app.route.ts file

Up to this point, a simple crud application tutorial using Angular 5 and restful API lumen 5.6 has been completed. You can test Angular 5 by running the  ng serve  command on the terminal.

Build Angular 5 Application Tutorial Min

After the build application phase is complete, please open your browser and open URL http://localhost:4200. If successful will look like the following picture

Tutorial Create Crud Application Using Angular 5 And Lumen 5.6 For Beginners Min

You can download all the above project examples via my GitHub address below

 

 

So my brief tutorial on how to create crud application using angular 5 and lumen 5.6

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.