程式碼:

<div>
  <a href="/">商品列表</a>
  <a href="/contactUs">聯絡我們</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>
      <td>{{ $product->title }}</td>
      <td>{{ $product->content }}</td>
      <td>{{ $product->price }}</td>
      <td></td>
    </tr>
  @endforeach
  </tbody>
</table>

畫面顯示

對應資料庫:

在WebController加入程式碼

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Product;

class WebController extends Controller
{
    public function index()
    {
        $products =Product::all();
        return view('web.index',['products' =>$products]);
    }

    public function contactUs()
    {
        return view('web.contact_us');
    }
}

加入畫面檔案:

加入路由Route::get('/contact-us', 'WebController@contactUs');

修改路由命名contact-us

程式碼

<div>
  <a href="/">商品列表</a>
  <a href="/contact-us">聯絡我們</a>
</div>
<h3>聯絡我們</h3>
<form action="">
  請問你是:<input type=text><br>
  請問你的消費時間:<input type="date"><br>
  請問你的消費種類:
  <select name="" id="">
    <option value="物品">物品</option>
    <option value="食物">食物</option>
  </select>
    <button>送出</button>
</form>  

程式碼

<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>
      <td>{{ $product->title }}</td>
      <td>{{ $product->content }}</td>
      <td>{{ $product->price }}</td>
      <td></td>
    </tr>
  @endforeach
  </tbody>
</table>

加入CSS的樣式:

程式碼:

<style>
  h2{
    color:red;
  }
   h2.fake{
    color:blue;
  }
</style>
<div>
  <a href="/">商品列表</a>
  <a href="/contactUs">聯絡我們</a>
</div>
<h2>商品列表</h2>
<h2 class="fake">假商品列表</h2>
<img src="https://origaminojikan.com/wp-content/uploads/2022/10/origami_50892-500x375.jpg" with="600" heigh="400" alt="一張圖片">
<table>
  <thead>
    <tr>
      <td>標題</td>
      <td>內容</td>
      <td>價格</td>
      <td></td>
    </tr>
  </thead>
  <tbody>
  @foreach ($products as $product)
    <tr>
      <td>{{ $product->title }}</td>
      <td>{{ $product->content }}</td>
      <td>{{ $product->price }}</td>
      <td></td>
    </tr>
  @endforeach
  </tbody>
</table>

大家明天見~