Tutorial CRUD Client and API Server Using JQuery And Lumen Part 1

Next is a tutorial on how to create a database CRUD application using jquery and laravel framework. I have made many CRUD tutorials on the Seegatesite.com site, the difference is, in this tutorial the client will directly access the server API directly through JQuery. Follow the following tutorial

Some tools used to make this application.

  1. MySQL Database
  2. PHP> = 7.0, OpenSSL PHP Extension, PDO PHP Extension, Mbstring PHP Extension (Requirements needed for Lumen Framework installation)
  3. JQuery 3.3.1 + Bootstrap 4 CSS Framework

This tutorial will be divided into several sections

  1. Setting up the API backend server using the Lumen framework and creating a user register page.
  2. Create a login page.
  3. Create a product page.

What we will learn in the first part is

Create a new MySQL database

Please create a new database with the name “db_crud“. You can create a database using SQLYOG or MySQL Workbench or you can manually use the following command:

After the database is created, create a new table as “m_user“. Use the following script

Note:

The table above is used to store the user data.

If the above steps have been completed, the next step is to install the Lumen Framework

Installing the Lumen Framework

To install the lumen framework you need a composer. What is the composer? The composer is a special PHP dependency manager that has functionality such as Gem (Ruby) or Maven (Java). You can install a library through composer, and composer will automatically install other libraries as needed, without downloading one by one. Similar to “apt-get install” on the Linux operating system.

To install composer, please go to the following link https://getcomposer.org/download/

If you have installed composer, install the new lumen app with name “lumenapi“. Use the following command:

Laravel environment initial configuration

Please edit the .env file in the “lumenapi” folder and add the following code

Note:

Don’t forget to change db_charset and db_collation with the engine you are using. The default lumen uses the charset utf8mb4 and collation utf8mb4_unicode_ci. Because I use SQLYOG, the default engines used are latin1 and latin1_swedish_ci

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

Uncomment Authenticate middleware and register a new middleware with the name CorsMiddleware.php

Uncomment Facades function

Create a new middleware called CorsMiddleware.php in the “app/Http/Middleware” folder

Fill the following code in the CorsMiddleware.php file

Note:

The Middleware above is used to resolve the ‘No Access-Control-Allow-Origin‘ problem when accessing the server API. What is CORS? CORS or Cross-Origin Resource Sharing is a function that is used for various resources through the HTTP protocol. CORS is useful when you want to create web services that can be accessed through the other websites.

Edit Authenticate Middleware and add the following code

Note:

Authenticate middleware is a middleware that is used to protect API pages from unknown users by using tokens. The token used in this application is JSON Web Tokens.

The next step is to install JWT using firebase / PHP-jwt on laravel framework

Install JSON Web Tokens (JWT) for the Lumen server API security

This application uses firebase / PHP-jwt to create a server token, please run the following command in the lumenapi folder for installation of php-jwt

Next, make a controller for the user register.

Make the Laravel Controller

Create a new controller named RegisterController.php in the “app/Http/Controller/RegisterController.php” folder and fill in the following code

To be able to access the API register user, add the routes command on “routes/web.php” below:

Note:

Routes registers are used to add new users.

Next will make the front end of the register page using JQuery + HTML.

Another article :  Tutorial Build Point Of Sale With PHP, PDO, MySQL And Jquery Part 1

Create a user registration page.

Prepare a new folder for the front-end application as “restclient

Add a PHP file with as register.php and fill in the following code

Create a javascript file sha256.js (The js file is used to encrypt passwords using a hash so that the password is safe when we send it to the API server). Copy the following code:

The register page has finished. To try the register page, please activate the API server using the following commands in the lumenapi folder via CMD or Linux terminal.

If successful the application will run as follows

Tutorial Crud Jquery And Lumen For Beginners

Up to this point, Tutorial CRUD Client and API Server Using JQuery And Lumen Part 1 has finished. Upcoming articles, will continue to part 2. Hopefully useful

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.