Search code examples
phpajaxlaravelqr-code

How can I create and store the path or URL of the QR code image in your database for each product?

I am doing a Laravel project, creating a feature for scanning the QR codes of each product to retrieve product details. My flow is to:

  1. Generate 'product_code'(QR code) - using Milon/Barcode
  2. Associate QR codes with products - store the path or URL of the QR code image in your database for each product.
  3. Scan QR code - using Instascan.Scanner
  4. Retrieve product details - extract the product_code from the scanned content. Then, send an AJAX request to your backend server with the product code.
  5. Query Database
  6. Return Product Details once the product details are retrieved from database, return them as a response to the frontend.

Currently, I can generate QR codes with the code below:

In ProductController:

public function ProductStore(Request $request){
        
        // Generate the product code
        $product_code = uniqid();

        // Generate PNG path for the QR code
        $qrCodePath = DNS2D::getBarcodePNGPath($product_code, 'QRCODE');

        Product::insert([

            //insert data into product table
            'name' => $request->name,
            'supplier_id' => $request->supplier_id,
            'unit_id' => $request->unit_id,
            'category_id' => $request->category_id,
            'quantity' => '0',
            'product_code' => $qrCodePath,  // Save QR code data
            'created_by' => Auth::user()->id,
            'created_at' => Carbon::now(), 
        ]);

            
        $notification = array(
            'message' => 'Product Inserted Successfully', 
            'alert-type' => 'success'
        );

        return redirect()->route('product.all')->with($notification); 

    } // End Method

In view:

@foreach($product as $key => $item)
                        <tr>
                            <td>{{ $key + 1 }}</td>
                            <td>{{ $item->name }}</td>
                            <td>{{ $item['supplier']['name'] }}</td>
                            <td>{{ $item['unit']['name'] }}</td>
                            <td>{{ $item['category']['name'] }}</td>
                            <td>
                                <!-- Link to download the QR code image -->
                                <a href="{{ DNS2D::getBarcodePNGPath($item->product_code, 'QRCODE') }}" download="{{ $item->product_code }}">
                                    <!-- QR code image -->
                                    <img src="{{ DNS2D::getBarcodePNGPath($item->product_code, 'QRCODE') }}" alt="QR Code" width="100" height="100" />
                                    <br>p - {{ $item -> product_code }}
                                </a>
                            </td>

In the database (MySQL), the product_code will be saved in this string format (example: '\65cc0051d5c4bqrcode.png').

How can I create and store the path or URL of the QR code image in your database for each product? I need these steps to retrieve product details by sending an AJAX request to the backend server.

Sorry if it's a stupid question. I am new to Laravel.

Solution

  • all start here and what misled you is the comment:

    // Generate PNG path for the QR code
$qrCodePath = DNS2D::getBarcodePNGPath($product_code, 'QRCODE');

    the above method do the following:

    //Generate a PNG file that contains the QR code and return the file path

    so if you put $quCodePath inside product_code field you will override (lose) your product_code with a string containing the file path to your png.

    what you can do is

    1) create your qr code at runtime from your product_code:

    public function ProductStore(Request $request){
  
  // Generate the product code
  $product_code = uniqid();

  //##################### REMOVE THIS ################################
  // Generate PNG path for the QR code                              ##
  //$qrCodePath = DNS2D::getBarcodePNGPath($product_code, 'QRCODE');##
  //##################### REMOVE THIS ################################

  Product::insert([

    //insert data into product table
    'name' => $request->name,
    'supplier_id' => $request->supplier_id,
    'unit_id' => $request->unit_id,
    'category_id' => $request->category_id,
    'quantity' => '0',
    'product_code' => $product_code,  // SAVE CODE NOT QR CODE.
    'created_by' => Auth::user()->id,
    'created_at' => Carbon::now(), 
  ]);

      
  $notification = array(
    'message' => 'Product Inserted Successfully', 
    'alert-type' => 'success'
  );

  return redirect()->route('product.all')->with($notification); 

} // End Method 


/*
<!-- and in view all remain the same: -->
@foreach($product as $key => $item)
  <tr>
      <td>{{ $key + 1 }}</td>
      <td>{{ $item->name }}</td>
      <td>{{ $item['supplier']['name'] }}</td>
      <td>{{ $item['unit']['name'] }}</td>
      <td>{{ $item['category']['name'] }}</td>
      <td>
        <!-- Link to download the QR code image -->
        <a href="{{ DNS2D::getBarcodePNGPath($item->product_code, 'QRCODE') }}" download="{{ $item->product_code }}">
          <!-- QR code image -->
          <img src="{{ DNS2D::getBarcodePNGPath($item->product_code, 'QRCODE') }}" alt="QR Code" width="100" height="100" />
          <br>p - {{ $item -> product_code }}
        </a>
      </td>

*/

    2) or you can store both code and file path in your db

    but for this you need to add a new field on your db table

    public function ProductStore(Request $request){
  
  // Generate the product code
  $product_code = uniqid();

  
  // Generate PNG path for the QR code                              
  $qrCodePath = DNS2D::getBarcodePNGPath($product_code, 'QRCODE');
  

  Product::insert([

    //insert data into product table
    'name' => $request->name,
    'supplier_id' => $request->supplier_id,
    'unit_id' => $request->unit_id,
    'category_id' => $request->category_id,
    'quantity' => '0',
    'product_code' => $product_code,  // SAVE CODE 
    'qr_path' => $qrCodePath,  // SAVE QR PATH 
    'created_by' => Auth::user()->id,
    'created_at' => Carbon::now(), 
  ]);

      
  $notification = array(
    'message' => 'Product Inserted Successfully', 
    'alert-type' => 'success'
  );

  return redirect()->route('product.all')->with($notification); 

} // End Method

    and a change to your view is required too:

    @foreach($product as $key => $item)
  <tr>
      <td>{{ $key + 1 }}</td>
      <td>{{ $item->name }}</td>
      <td>{{ $item['supplier']['name'] }}</td>
      <td>{{ $item['unit']['name'] }}</td>
      <td>{{ $item['category']['name'] }}</td>
      <td>
        <!-- Link to download the QR code image -->
        <a href="{{ $item -> qr_path }}" download="{{ $item->product_code }}">
          <!-- QR code image -->
          <img src="{{ $item -> qr_path }}" alt="QR Code" width="100" height="100" />
          <br>p - {{ $item -> product_code }}
        </a>
      </td>