blade 模板

讓網頁靜態化

可以將php變數資料簡單的加入頁面

語法不同

原先的 <?php echo $var1; ?> 改寫為 {{ $var1 }}

所以將mypage.php改寫為

<!DOCTYPE html>
<html>
<head>
    <title>我的頁面</title>
</head>
<body>
<h1>HI~歡迎來到我的頁面</h1>
<p>{{ $var1 }}</p>
<p>{{ $var2 }}</p>
<p>{{ $var3 }}</p>
</body>
</html>

這時我們去看http://localhost:8000/mypage

可以看到

HI~歡迎來到我的頁面

怎麼會這樣

檔案命名方式 添加.blade

將mypage.php 改名為 mypage.blade.php

如此一來就會顯示變數資料了

HI~歡迎來到我的頁面

京城五

王力宏

周杰魂

if else 語法

現在我們將程式碼添加一個if判斷式 簡單來說就是

當var1是京城五時 他會說你好

原本程式碼應該是長這樣 (基本PHP部分不解釋)

<!DOCTYPE html>
<html>
<head>
    <title>我的頁面</title>
</head>
<body>
<h1>HI~歡迎來到我的頁面</h1>
<p>{{ $var1 }}
<?php if($var1=='京城五'): ?> 
<?php echo "說你好"; ?>
<?php endif; ?> 
</p>
<p>{{ $var2 }}</p>
<p>{{ $var3 }}</p>
</body>
</html>

laravel寫法

<!DOCTYPE html>
<html>
<head>
    <title>我的頁面</title>
</head>
<body>
<h1>HI~歡迎來到我的頁面</h1>
<p>{{ $var1 }}
@if($var1=='京城五'):
   說你好 
@endif  
</p>
<p>{{ $var2 }}</p>
<p>{{ $var3 }}</p>
</body>
</html>

果然可以

HI~歡迎來到我的頁面

京城五 說你好

王力宏

周杰魂

使用資料庫

從route.php將資料庫資料加入$data中

Route::get('mypage', function () {

$data = array('var1' => '京城五','var2' => '王力宏','var3' => '周杰魂','orders' => App\Order::all() );

    return view('mypage',$data);
});

回到頁面 先用基本的方式呼叫出來

<!DOCTYPE html>
<html>
<head>
    <title>我的頁面</title>
</head>
<body>
<h1>HI~歡迎來到我的頁面</h1>
<p>{{ $var1 }}
@if($var1=='京城五')  
   說你好 
@endif
</p>
<p>{{ $var2 }}</p>
<p>{{ $var3 }}</p>
<ul>
<?php foreach($orders as $order): ?>
    <li><?=$order->name;?></li>
<?php endforeach; ?>
</ul>
</body>
</html>

結果

mypage_array

laravel語法

<!DOCTYPE html>
<html>
<head>
    <title>我的頁面</title>
</head>
<body>
<h1>HI~歡迎來到我的頁面</h1>
<p>{{ $var1 }}
@if($var1=='京城五')  
   說你好 
@endif
</p>
<p>{{ $var2 }}</p>
<p>{{ $var3 }}</p>
<ul>
@foreach($orders as $order)
    <li>{{$order->name}}</li>
@endforeach
</ul>
</body>
</html>

結果當然也一樣囉~

持續補充

原始方法 引入外部css js image

也可以用 composer elixir 載入
CSS
<link rel="stylesheet" type="text/css" href="{{ URL::asset('/bootstrap/bootstrap.css') }}">

JS
<script type="text/javascript" src="{{ URL::asset('/bootstrap/bootstrap.min.js') }}"></script>

照片
<img src="{{ URL::asset('/img/cookie.png') }}" width="200">

{{ HTML::image('img/picture.jpg', 'a picture', array('class' => 'thumb')) }}

<img src="http://your.url/img/picture.jpg" class="thumb" alt="a picture">
這些東西都放在 public 資料夾
public/bootstrap/bootstrap.css
public/bootstrap/bootstrap.min.js
public/img/cookie.png

其他路徑使用

base_path();
app_path();
public_path();
storage_path();

results matching ""

    No results matching ""