Study Note

Lavarel 快速學習自我挑戰 Day17

Symbols count in article: 672 Reading time: 3 mins.

Application Media

設定和顯示

  1. 新增 view views/media/index.blade.php
  2. 設定 media index view
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
@extends('layouts.admin')

@section('content')

    <h1>Media</h1>

    @if($photos)

    <table class="table">
        <thead>
        <tr>
            <th>id</th>
            <th>Name</th>
            <th>Created</th>
            <th>Email</th>
        </tr>
        </thead>
        <tbody>

        @foreach($photos as $photo)

        <tr>
            <td>{{$photo->id}}</td>
            <td>{{$photo->file}}</td>
            <td>{{$photo->created_at ? $photo->created_at : 'no date'}}</td>
        </tr>

        @endforeach
        </tbody>
    </table>

    @endif

@stop
  1. 新增 media controller php artisan make:control AdminMediasController
  2. 新增 routes Route::resource('admin/media', 'AdminMediasController');
  3. 修改 layout admin
1
2
3
4
5
6
7
<li>
    <a href="{{route('admin.media.index')}}">All Media</a>
</li>

<li>
    <a href="{{route('admin.media.upload')}}">Upload Media</a>
</li>
  1. 在 AdminMediasController 新增 index function
1
2
3
4
5
6
7
public function index(){
        
    $photos = Photo::all();
    
    return view('admin.media.index', compact('photos'));
    
}
  1. 修改 routes
    Route::get('admin/media/upload', ['as'=>'admin.media.upload', 'uses'=>'AdminMediasController@store']);

設定 view

  1. 刪除 routes (因為這個是為了不讓錯誤顯示)
    Route::get('admin/media/upload', ['as'=>'admin.media.upload', 'uses'=>'AdminMediasController@store']);
  2. 修改 layouts admin view
    <a href="{{" {{route('admin.media.create')" }}}}">Upload Media</a>
  3. 在 AdminMediasController 新增 create function
1
2
3
4
5
public function create(){

    return view('admin.media.create');

}
  1. 新增 media create view
1
2
3
4
5
6
7
8
@extends('layouts.admin')

@section('content')

    <h1>Upload Media</h1>

@stop

新增上傳外掛

  1. Dropzone 上傳外掛
  2. 在 media create view 新增 script section
1
2
3
4
5
@section('scripts')

    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.js"></script>

@stop
  1. 在 media create view 新增 style section
1
2
3
4
5
@section('styles')

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.css">
    
@stop
  1. 在 layouts admin view 新增 yield 才能使用 section @yield('styles') @yield('scripts')
  2. 新增上傳區塊
1
2
3
4
5
{!! Form::open(['method'=>'POST', 'action'=>'AdminMediasController@store', 'class'=>'dropzone']) !!}
    
    {{csrf_field()}}

{!! Form::close() !!}

上傳檔案

  1. 在 AdminMediasController 新增 store function
1
2
3
4
5
6
7
8
9
10
11
12
13
public function store(Request $request){

    $file = $request->file('file');

    $name = time() . $file->getClientOriginalName();

    $file->move('images', $name);

    Photo::create(['file'=>$name]);

    return $name;

}

刪除圖片

  1. 在 media index view 新增 delete button
1
2
3
4
5
6
7
8
9
10
<td>
    {!! Form::open(['method'=>'DELETE', 'action'=>['AdminMediasController@destroy', $photo->id]]) !!}

        {{csrf_field()}}

        <div class="form-group">
            {!! Form::submit('Delete Post', ['class'=>'btn btn-danger']) !!}
        </div>
    {!! Form::close() !!}
</td>
  1. 在 AdminMediaController 新增 destroy function
1
2
3
4
5
6
7
8
9
10
11
public function destroy($id){

    $photo = Photo::findOrFail($id);

    unlink(public_path() . $photo->file);

    $photo->delete();

    return redirect('/admin/media');

}
Share