學程式的道路上.....我跌跌撞撞的過程
文章為我平時發生錯誤的解決方法
因為擔心下次碰到時會忘記
所以就將他筆記下來了
如果有大大發現我的敘述錯誤
或者有哪些更有效率的方法
也請大大們不吝嗇的提供指教
謝謝~
1.首先,先建立Model
php artisan make:model User -m
接著填好自己要建立的「欄位名稱」、「資料型態」
<?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資料表
所以現在到資料庫查看,就可以看見photo的資料表囉~
3.建立上傳圖片的表單
<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::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.將圖片傳回前端網站
這樣就完成了簡單的上傳圖片+顯示圖片功能
這只是我的自我練習的一部份,其實還有表單+登入的功能
所以才需要使用到登入者的資料