In this tutorial I want to show you how to build a web application using the Laravel framework and JavaScript Ajax. For example, you could deploy the app as a mobile app using the Android web view widget.

You can find the link to the entire Laravel project at the end of the page. 🙂

 

Step 1: Requirements (installing Composer and Laravel)

To install external dependencies, we need the php package manager Composer. Download it here and install it on your local machine. I recommend installing composer globally and for all system users.

Since Laravel is nothing more than a package, we will use Composer to download and install it.

composer global require laravel/installer

After the installation, create a new Laravel project with the following command. (Replace „web-app“ with the project name of your choice. Laravel creates a directory according to the project name).

laravel new web-app

Now you can run the application by running the following command:

php artisan serve

 

Step 2: Creating controller, model, migration and a seed

Let’s create some files and classes to build our project.

Model

Create a model called Grocery.

php artisan make:model Grocery

Controller

Create a controller called GroceryController.

php artisan make:controller GroceryController

Migration

Create a database migration called create_groceries_tables. It provides all required information to insert the table create_groceries_tables into the database.

php artisan make:migration create_groceries_table

Add the following code to the migration located in the directory database/migrations:

public function up()
{
   Schema::create('groceries', function (Blueprint $table) {
     $table->bigIncrements('id');
     $table->string('title');
     $table->string('category');
     $table->timestamps();
  });
}

Seed

Create a seed called GroceriesSeed.

php artisan make:seed GroceriesSeeder

Add the following code to the seeder located in the directory database/seeds:

public function run()
{
  DB::table('groceries')->delete();
  DB::table('groceries')->insert([
    'title' => 'Apple',
    'category' => 'fruits',
    'created_at' => date("Y-m-d H:i:s"),
    'updated_at' => date("Y-m-d H:i:s")
  ]);
  DB::table('groceries')->insert([
    'title' => 'Banana',
    'category' => 'fruits',
    'created_at' => date("Y-m-d H:i:s"),
    'updated_at' => date("Y-m-d H:i:s")
  ]);
  DB::table('groceries')->insert([
    'title' => 'Orange',
    'category' => 'fruits',
    'created_at' => date("Y-m-d H:i:s"),
    'updated_at' => date("Y-m-d H:i:s")
  ]);
}

The central file that controls the seeds is the file called DatabaseSeeder.php located in the seeds directory. You need to add the following line to it for the seeder to work:

$this->call(GroceriesSeeder::class);

 

Step 3: Setup the database

Create a database (on your machine using a local database server) and add the sign-in information to the .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=web-app
DB_USERNAME=root
DB_PASSWORD=root

Let’s migrate the table to our database using the migration file. At the same time, the test data from the seed should be inserted. Use the following command to do both with just one command:

php artisan migrate --seed

 

Step 4: Add code to GroceryController

We need a method inside the GroceryController which retrieves grocery data from our database. To get this done, we use the Laravel ORM called eloquent. Eloquent makes it easier to retrieve data from our database. It’s based on data models, which we created at step 2 (the model Grocery). Add the class reference above the GroceryController class:

use App\Grocery;

After this, add the index method inside the GroceryController class. It returns a list of existing groceries in json format.

public function index() {
// Load all columns in descending order based on the 'id' column.
$groceries = Grocery::orderBy('id', 'desc')->get();

// Return data as JSON
return response()->json($groceries);
}

 

Step 5: Add required routes

Currently the controller can’t be accessed because a suitable route doesn’t exist. Let’s add it to the web.php file located in the routes directory.

Route::get('groceries', function() { 
  return view('grocery-list'); 
});
Route::get('groceries/get', 'GroceryController@index');

The first route is just the one we use to access the grocery list which we’ll create in the next step. To test the second route, try to access the url http://localhost:8000/groceries/get. If the route works, you should see a JSON response like this:

 

Laravel Ajax JSON Result

 

Step 6: Create view, add layout

Now we want to create a view with some bootstrap layout to show the data provided by the controller. Create the file grocery-list.blade.php under resources/views and add the following html markup.

After you create the view, you can access it by http://localhost/groceries. You should see a basic table with an entry.

<!doctype html>
  <html lang="en">
    <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

      <title>Hello, world!</title>
    </head>
    <body>
      <div class="container mt-4 mb-4">
        <div class="row">
          <div class="col-md">
            <table class="table table-bordered table-striped">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Title</th>
                  <th scope="col">Category</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td scope="row">1</td>
                  <td scope="row">Apple</td>
                  <td scope="row">Fruits</td>
                </tr>
              </tbody>
            </table>
          </div> 
        </div>
      </div>

      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo= " crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
      <script type="text/javascript">

     </script>
  </body>
</html>

 

Step 7: Extend the GroceryController

We no longer want to just get a JSON response. Tables are based on rows and columns, so let’s prepare the grocery data inside the controller like this. This is the easiest way to prepare data so that it can be output directly in the table.

public function index() {
  $html = "";

  // Load all columns in descending order based on the 'id' column
  $groceries = Grocery::orderBy('id', "desc')→get();

  // Loop result
  foreach($groceries as $grocerie)
  {
    // Concatenate variable
    $html .= '
      <tr>
        <td scope="row">'. $grocerie->id .'</td>
        <td scope="row">'. $grocerie->title .'</td>
        <td scope="row">'. $grocerie->category .'</td>
      </tr>
    ';
  }
  
  // Return data as HTML
  return response()->json($html);
}

 

Step 8: Do Ajax request

Fill the empty <script> at the end of the page with the following code:

$(document).ready(function(){

  getGroceryData();

  function getGroceryData() {
    $.ajax({
      method: 'GET',
      url: '/groceries/get',
      dataType: 'json',
      success: function(data) {
        console.log(data);
      },
      error: function(error) {
        console.log(error);
      }
    });
  }

});

Explanation

  • The code in the $(document).ready(function(){ … }) function is available after the web page has been loaded successfully.
  • The groceryData function contains our ajax request which retrieves the grocery data.
  • In the function a call is made using ajax ($.ajax({ … })):
    • method: the type of HTTP-Request we send.
    • url: the api URL, according to the route in the web.php file.
    • dataType: data is sent to api as JSON.
    • success:  this codeblock is called if the request was successfull. In the next step, we will define the code here that will fill the table.
    • error: in this block we can define what should happen, if the request failed.

 

Step 9: Output retrieved data

Remember: What we get from the controller through the ajax request is pre-formatted HTMLthat we can immediately outpit in the table. All we have to do is add one line of code to our existing script inside the success block.

$(document).ready(function(){

  getGrocerieData();

  function getGrocerieData() {
    method: 'GET',
    url: '/groceries/get',
    dataType: 'json',
    success: function(data) {
      // console.log(data);
      $('tbody').html(data);
    },
    error: function(error) {
      console.log(error);
    }
  }

});

Ready! If we access the app via the url http://localhost:8000/groceries, we should see the table with three entries.

Laravel Ajax final table

You can pull the whole code from GitHub: https://github.com/nfandrich/dynamic-web-app

Learn more about Laravel development by reading my related posts on the topic, for example How to upload images using Laravel and Intervention Image.