確認產品數量
跟資料庫比對

加入按鈕程式碼:

到JS官網
https://releases.jquery.com/
選

顯示

貼到程式碼

用開發者工具看是否有報錯

先測試彈出視窗

程式碼

<style>
  .special-text {
    text-align: center;
    background-color: yellowgreen;
  }
</style>
<div>
  <a href="/">商品列表</a>
  <a href="/contact-us">聯絡我們</a>
</div>
<h2>商品列表</h2>

<img src="https://origaminojikan.com/wp-content/uploads/2022/10/origami_50892-500x375.jpg" width="600" height="400" alt="一張圖片">
<table>
  <thead>
    <tr>
      <td>標題</td>
      <td>內容</td>
      <td>價格</td>
      <td></td>
    </tr>
  </thead>
  <tbody>
  @foreach ($products as $product)
    <tr>
    @if ($product->id == 1)
      <td class="special-text">{{ $product->title }}</td>
    @else
      <td>{{ $product->title }}</td>
    @endif
      <td>{{ $product->content }}</td>
      <td style="{{ $product->price <200 ? 'color: red;font-size:22px':''}}">{{ $product->price }}</td>
     
      <td><input class="check_product" type="button" value="確認商品數量" data-id="{{ $product->id }}"></td>
    </tr>
  @endforeach
  </tbody>
</table>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
 integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" 
 crossorigin="anonymous">
</script>
<script>
  $('.check_product').on('click',function () {
    alert('123')
  })

</script>

測試完修改成我們要的功能:
True表示數量夠

加入的程式碼:

<style>
  .special-text {
    text-align: center;
    background-color: yellowgreen;
  }
</style>
<div>
  <a href="/">商品列表</a>
  <a href="/contact-us">聯絡我們</a>
</div>
<h2>商品列表</h2>

<img src="https://origaminojikan.com/wp-content/uploads/2022/10/origami_50892-500x375.jpg" width="600" height="400" alt="一張圖片">
<table>
  <thead>
    <tr>
      <td>標題</td>
      <td>內容</td>
      <td>價格</td>
      <td></td>
    </tr>
  </thead>
  <tbody>
  @foreach ($products as $product)
    <tr>
    @if ($product->id == 1)
      <td class="special-text">{{ $product->title }}</td>
    @else
      <td>{{ $product->title }}</td>
    @endif
      <td>{{ $product->content }}</td>
      <td style="{{ $product->price <200 ? 'color: red;font-size:22px':''}}">{{ $product->price }}</td>
     
      <td><input class="check_product" type="button" value="確認商品數量" data-id="{{ $product->id }}"></td>
    </tr>
  @endforeach
  </tbody>
</table>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
 integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" 
 crossorigin="anonymous">
</script>

<script>
  $('.check_product').on('click',function () {
    //alert('123')
    $.ajax({
    method: 'POST',
    url: '/products/check-product',  
    data: { id: $(this).data('id')}
  })
  .done(function( response ) {
    if(response){
      alert('商品數量充足')
    }
    else{
      alert('商品數量不足')
    }
  })
  })

</script>

設定路由 Route::post('/products/check-product', 'ProductController@checkProduct');

寫controller跟

程式碼

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use App\Models\Product;

class ProductController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {
        //$data = $this->getDate();
        //$data = DB::table('sbl_teams')->get();
        $data = DB::table('products')->get();
        //dump($data);
        return response($data);
    }

    public function checkProduct(Request $request)
    {
        $id = $request->all()['id'];
        $product = Product::find($id);
        if ($product->quantity > 0) {
            return response(true);
        } else {
            return response(false);
        }
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    /*public function store(Request $request)
    {
        $data = $this->getDate();
        $newData = $request->all();
        array_push($data,$newData);
        return response($data);
    }*/

    public function store(Request $request)
{
    $data = $this->getDate(); // 獲取現有数据集合
    $newData = $request->all(); // 獲取 POST 请求的數據
    $data->push(collect($newData)); // 使用集合的 push 方法
    return response($data); // 返回更新後的集合
}

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $form = $request->all();
        $data = $this ->getDate();
        $selecteData = $data->where('id',$id)->first();
        $selecteData = $selecteData->merge(collect($form));

        return response($selecteData);
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
{
    $data = $this->getDate();
    $data = $data->filter(function ($product) use ($id) {
        return $product['id'] != $id;
    });

    return response($data->values());
}


    public function getDate()
    {
        return collect([
            collect([
                'id' => 0,
                'title' => '測試商品一',
                'content' => '這是一個很棒的商品',
                'price' => 50
            ]),
            collect([
                'id' => 1,
                'title' => '測試商品2',
                'content' => '這是一個棒的商品',
                'price' => 30
            ]),
        ]);
    }
}

畫面確認

+

修改資料表的數量來做確認

大家明天見~腸胃炎趕快好~