學程式的道路上.....我跌跌撞撞的過程

文章為我平時發生錯誤的解決方法

因為擔心下次碰到時會忘記

所以就將他筆記下來了

如果有大大發現我的敘述錯誤

或者有哪些更有效率的方法

也請大大們不吝嗇的提供指教

謝謝~


1.首先,先建立Model

php artisan make:model User -m

接著填好自己要建立的「欄位名稱」、「資料型態」

專案名稱>>database>>migrations>>create_photos_table.php
<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePhotosTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('photos', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('user_id');
            $table->string('path');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('photos');
    }
}
  • $table->increments('id');    //指id為主鍵
  • $table->integer('user_id'); //指user_id資料型態為"整數"
  • $table->string('path');       //指path資料型態為"字串"
  • $table->timestamps();      //自動存入建立資料的時間

 


2.接著建立photo資料表

php artisan migrate

  所以現在到資料庫查看,就可以看見photo的資料表囉~

 


3.建立上傳圖片的表單

<showInfo.blade.php>
<form method="POST" name="showform" action="{{ url('/postInfo') }}" class="w3-container" id="showInfo" enctype="multipart/form-data" >
     {{ csrf_field() }}
    <div class="w3-padding w3-left" >

        <p>
           <label>大頭貼:</label>
         </p>
              @if(isset($photos)
             <img src="{{ url('../storage/app/' . $photos->path) }}" width="300px" height="200px" style="border: 5px solid; border-radius: 12px"">
              @else
                  <img alt="尚未上傳圖片" width="300px" height="200px" style="border: 5px solid; border-radius: 12px"">
             @endif

     </div>

        <input type="hidden" name="user_id" value="{{ $users->id }}">
     <button form="showInfo" class="w3-btn w3-white w3-border w3-round-large w3-left" style="margin-left: 30px;" onclick="alert('修改成功')">送出</button>
</form>
若沒有圖片,則顯示「尚未上傳圖片」的訊息
 

4.設定路由

 

Route::get('/showInfo', ['middleware' => 'auth', 'uses' => 'InformationController@showInfo']);
Route::post('/postInfo', ['middleware' => 'auth', 'uses' => 'InformationController@postInfo']);

get是在顯示圖片,而post是在做上傳圖片

這地方有是用到「中介層(middleware)」,主要功能是在防止使用者未登入的情況下,無法在網址後方串上檔名進行登入

 


5.撰寫controller,儲存圖片

 


namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;

use DB;
use Auth;
use App\User;
use App\Photo;

class InformationController extends Controller
{
    public function showInfo()
    {
        #呼叫登入者的資訊,用變數user儲存
        $user = Auth::user();

        #呼叫與user資料表相同id的photo資料表裡面的資料
        $photo = DB::table('photos')->where('user_id', '=', $user->id)->orderBy('created_at', 'desc')->first();


        #將變數存成陣列
        $data = ['users' => $user, 'photos' => $photo];
        return view('information.showInfo', $data);
    }
    public function postInfo(Request $request)
    {
        #建立一個新物建,儲存資料表欄位
        $photo = new photo;

        #photo資料表的資訊,內容可以使用var_dump($fileName)觀察
        $fileName = $_FILES['photo']['name'];

        #圖片儲存的路徑
        $destinationPath = '../storage/app';
        $new_fileName = date("Ymd") . "_" . $fileName;


        #檢查是否有上傳檔案
        #檢查檔案上傳是否有效,若有則存入資料庫
        #更新information資訊後,若也有上傳圖片就一併儲存
        if($request->hasFile('photo')){
            if ($request->photo->isValid()) {

                $photo->user_id = $request->user_id;
                $photo->path = $new_fileName;


                #將檔案存至指定的資料夾
                $request->file('photo')->move($destinationPath, $new_fileName);
                #存入photo資料庫
                $photo->save();

            }
         }

         #如果有存入photo儲存資料
         if($photo->save()){
             return redirect('/showInfo');
         }
    }
}


※紅色主要為存取圖片的程式碼

showInfo()

1.呼叫登入者的資料

2.將登入者的資料傳回前端網站

 

postInfo()

1.建立一個新的$photo物建

2.接收網頁傳遞過來的資料

3.設定圖片儲存的路徑 & 檔名

※建議可以換檔名,統一格式未來在整理圖片時筆記方便。

4.判斷式:若有photo檔案

5.判斷式:若為有效檔案

6.指定「資料庫欄位」需儲存的值

7.將檔案移至指定的資料夾路徑

8.儲存資料庫

9.如果儲存成功,回到showInfo頁面


6.撰寫controller,顯示圖片 

 


namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;

use DB;
use Auth;
use App\Photo;

class InformationController extends Controller
{
    public function showInfo()
    {
        #呼叫登入者的資訊,用變數user儲存
        $user = Auth::user();

        #呼叫與user資料表相同id的information、photo資料表裡面的資料
        $photo = DB::table('photos')->where('user_id', '=', $user->id)->orderBy('created_at', 'desc')->first();


        #將變數存成陣列
        $data = ['users' => $user, 'infos' => $info, 'photos' => $photo];
        return view('information.showInfo', $data);
    }
    public function postInfo(Request $request)
    {
        #建立一個新物建,儲存資料表欄位
        $photo = new photo;

        #photo資料表的資訊,內容可以使用var_dump($fileName)觀察
        $fileName = $_FILES['photo']['name'];

        #圖片儲存的路徑
        $destinationPath = '../storage/app';
        $new_fileName = date("Ymd") . "_" . $fileName;


        #檢查是否有上傳檔案
        #檢查檔案上傳是否有效,若有則存入資料庫
        #更新information資訊後,若也有上傳圖片就一併儲存
        if($request->hasFile('photo')){
            if ($request->photo->isValid()) {

                $photo->user_id = $request->user_id;
                $photo->path = $new_fileName;


                #將檔案存至指定的資料夾
                $request->file('photo')->move($destinationPath, $new_fileName);
                #存入photo資料庫
                $photo->save();

            }
         }

         #如果有存入photo儲存資料
         if($photo->save()){
             return redirect('/showInfo');
         }
    }
}


※紅色主要為顯示圖片的程式碼

1.從photo資料表中找資料,除了圖片需為該登入人員上傳的圖檔外,還要透過時間排序且只取出最接近現在時間的一筆

2.將圖片傳回前端網站


 

這樣就完成了簡單的上傳圖片+顯示圖片功能

這只是我的自我練習的一部份,其實還有表單+登入的功能

所以才需要使用到登入者的資料

arrow
arrow

    Neil 發表在 痞客邦 留言(1) 人氣()