哈！伸港創作者！哈: 利用 laravel 12 做一個類似Google Drive 的作品-資料夾系統

2025年12月28日星期日

利用 laravel 12 做一個類似Google Drive 的作品-資料夾系統

3.利用 laravel 12 做一個類似Google Drive 的作品-巢狀資料夾

零、目標：

1.專案目標：

A.環境準備

B.建立 Laravel 專案 + 登入系統

C.建立資料庫（資料夾 / 檔案）

D.資料夾 CRUD

E.檔案上傳 / 下載

F.檔案列表（像 Google Drive）

G.分享連結

H.權限與安全

2.目前目標：

C.建立資料庫（資料夾 / 檔案）

a.資料夾

b.巢狀資料夾(parent_id)

c.建立資料夾

d.顯示資料夾列表

一、建立 Folder Model + Migration

1.指令：php artisan make:model Folder -m

2.編輯database/migrations/xxxx_create_folders_table.php

$table->id();
$table->foreignId('user_id')->constrained()->cascadeOnDelete();
$table->string('name');
$table->foreignId('parent_id')->nullable()
      ->constrained('folders')
      ->cascadeOnDelete();  
$table->timestamps();

如下圖：

3.指令：php artisan migrate

二、Folder Model 設定

1.編輯app/Models/Folder.php

    protected $fillable = ['name','user_id','parent_id'];
    public function parent() {
        return $this->belongsTo(Folder::class,'parent_id');
    }
    public function children() {
        return $this->hasMany(Folder:class,'parent_id');
    }

如下圖：

三、建立 FolderController

1.指令：php artisan make:controller FolderController

2.編輯app/Http/Controllers/FolderController.php

    public function index() {
        $folders = Folder::where('user_id',Auth::id())
            ->whereNull('parent_id')
            ->get();
        return view('folders.index',compact('folders'));
    }
    public function store(Request $request) {
        $request->validate([
            'name' => 'required|string|max:255',
        ]);
        Folder::create([
            'name' => $request->name,
            'user_id' => Auth::id(),
            'parent_id' => $request->parent_id,
        ]);
        return back();
    }

如下圖：

四、設定路由

1.編輯routes/web.php

use App\Http\Controllers\FolderController;

和

// Folder
Route::get('/folders',[FolderController::class,'index'])->name('folders.index');
Route::post('/folders',[FolderController::class,'store'])->name('folders.store');

如下圖：

五、建立畫面(Blade)

1.指令：cd resources/views/

md folders

cd folders

type nul > index.blade.php

2.編輯resources/views/folders/index.blade.php

<x-app-layout>
    <div class="p-6 max-w-4xl mx-auto">
        <h1 class="text-xl font-bold mb-4">我的資料夾</h1>

        <form method="POST" action="{{ route('folders.store') }}" class="mb-4">
            @csrf
            <input type="text" name="name" placeholder="新資料夾名稱"
                   class="border rounded p-2 mr-2">
            <button class="bg-blue-500 text-white px-4 py-2 rounded">
                新增
            </button>
        </form>

        <ul class="space-y-2">
            @foreach($folders as $folder)
                <li class="border p-3 rounded">
                    📁 {{ $folder->name }}
                </li>
            @endforeach
        </ul>
    </div>
</x-app-layout>

如下圖：

六、進行測試

1.指令：php artisan serve

2.編輯routes/web.php

use Illuminate\Support\Facades\Redirect;

與

//測試用時，要註解
//Route::get('/dashboard', function () {
//    return view('dashboard');
//})->middleware(['auth', 'verified'])->name('dashboard');

//測試用
Route::get('/dashboard',function(){
    return Redirect::route('folders.index');
})->middleware(['auth'])->name('dashboard');