laravel入門 4 (資料修改與刪除)

 


修改資料庫(edit)

修改資料的時候 , 我們設計跳出一個彈跳視窗進行修改 , 修改完後按下 送出 就完成修改

那我們就開始吧~

views(home.blade.php)設定

<!doctype html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
		<!-- 引入google字體 -->
		<link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900&amp;subset=latin-ext" rel="stylesheet">
		<style type="text/css">
			body{
				font-family: '微軟正黑體', 'Noto Sans TC', Helvetica, Arial, '黑體-繁', 'Heiti TC', '儷黑', 'LiHei', 'Microsoft JhengHei', sans-serif;
			}
		</style>
		<title>Note</title>
	</head>
  	<body>
	  	<div class="container">
	  		<div class="row">
	  			<div class="col-12">
	  				<h1 class="text-center mt-2">Note</h1>
	  				<input type="text" class="form-control mt-5"  placeholder="標題" id="newTitle">
	  				<textarea class="form-control mt-2" placeholder="內容" rows="3" id="newContent"></textarea>
	  			</div>
	  			<div class="col-12 text-right mt-2">
	  				<button type="button" class="btn btn-primary" onclick="addItem()">新增</button>
	  			</div>

	  			<div class="col-12 mt-5">
					<table class="table">
						<thead class="thead-light">
							<tr>
								<th width="200">標題</th>
								<th width="600">內容</th>
								<th>時間</th>
								<th style="min-width: 150px;">操作</th>
							</tr>
						</thead>
					  <tbody>
					  	<!-- 把假資料刪除後 , 將後端資料帶入html裡面 -->
					  	@foreach ($data as $val)
					    <tr>
							<td>{{$val->title}}</td>
							<td>{{$val->content}}</td>
							<th>{{$val->created_at}}</th>
							<td>
								<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal" onclick="getItem({{ $val->id }})">編輯</button>
								<button type="button" class="btn btn-danger">刪除</button>
							</td>
					    </tr>
					    @endforeach
					  </tbody>
					</table>
	  			</div>
	  		</div>
	  	</div>

		<!-- 編輯視窗 -->
		<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLabel"><b>編輯</b></h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						  	<span aria-hidden="true">&times;</span>
						</button>
					</div>
				<div class="modal-body">
					<div class="form-group">
						<label class="col-form-label">標題:</label>
						<input type="text" class="form-control" id='editTitle'>
					</div>
					<div class="form-group">
						<label class="col-form-label">內容:</label>
						<textarea class="form-control" id='editContent'></textarea>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
					<button type="button" class="btn btn-primary" onclick="editItem()">送出</button>
				</div>
				</div>
			</div>
		</div>

	    <!-- Optional JavaScript -->
	    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
	    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
	    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

	   	<!--  載入Laravel的內建前端套件 ,現在目的是要載入Axios -->
	    <script src="{{URL::asset('js/app.js')}}"></script>
	</body>
</html>

<script type="text/javascript">
	function addItem() {
		//取得資料
		var title = $('#newTitle').val();
		var content = $('#newContent').val();

		//檢查有沒有填寫資料
		if (!title) {
			alert('請填寫標題');
			return
		}
		if (!content) {
			alert('請填寫內容');
			return
		}

		//傳送到後端
	    axios.post('/addItem', {
	        title:title,
	        content:content
	    })
	    .then(function (response) {
	    	if (response.data.result == 'success') {
	    		//後端回傳過來是成功後,重整頁面
	    		location.reload();
	    	}
	    })
	    .catch(function (error) {
	        console.log(error);
	    });
	}
	function getItem(id) {
		//傳送到後端,並且取得資料
	    axios.post('/getItem', {
	        id:id
	    })
	    .then(function (response) {
	    	if (response.data.result == 'success') {
	    		$('#editTitle').val(response.data.data.title);
	    		$('#editContent').val(response.data.data.content);
	    		//使用一個 全域性的變數 ,來儲存要被編輯的ID , 等等真的要修改的時候直接取得
	    		window.editId = response.data.data.id;
	    	}
	    })
	    .catch(function (error) {
	        console.log(error);
	    });
	}
	function editItem() {
		//傳送到後端,並且修改
	    axios.post('/editItem', {
	    	//取得要修改的資料
    		title : $('#editTitle').val(),
    		content : $('#editContent').val(),
	    	//取得剛剛的ID
	        id:window.editId
	    })
	    .then(function (response) {
	    	if (response.data.result == 'success') {
	    		//後端回傳過來是成功後,重整頁面
	    		location.reload();
	    	}
	    })
	    .catch(function (error) {
	        console.log(error);
	    });
	}
</script>

重點說明如下 : 

將一開始頁面取得的id , 帶入onclick事件

<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal" onclick="getItem({{ $val->id }})">編輯</button>

將彈跳視輸入框新增ID , 才可以用js取得資料

<input type="text" class="form-control" id='editTitle'>
<textarea class="form-control" id='editContent'></textarea>

取得資料後 , 再更改彈跳視窗的資料

	function getItem(id) {
		//傳送到後端,並且取得資料
	    axios.post('/getItem', {
	        id:id
	    })
	    .then(function (response) {
	    	if (response.data.result == 'success') {
	    		$('#editTitle').val(response.data.data.title);
	    		$('#editContent').val(response.data.data.content);
	    		//使用一個 全域性的變數 ,來儲存要被編輯的ID , 等等真的要修改的時候直接取得
	    		window.editId = response.data.data.id;
	    	}
	    })
	    .catch(function (error) {
	        console.log(error);
	    });
	}

將彈跳視的輸出按鈕新增onclick事件 , 按下後修改資料

<button type="button" class="btn btn-primary" onclick="editItem()">送出</button>

修改資料

	function editItem() {
		//傳送到後端,並且修改
	    axios.post('/editItem', {
	    	//取得要修改的資料
    		title : $('#editTitle').val(),
    		content : $('#editContent').val(),
	    	//取得剛剛的ID
	        id:window.editId
	    })
	    .then(function (response) {
	    	if (response.data.result == 'success') {
	    		//後端回傳過來是成功後,重整頁面
	    		location.reload();
	    	}
	    })
	    .catch(function (error) {
	        console.log(error);
	    });
	}

route(routes/web.php)設定

//取得項目
Route::post('getItem','NoteController@getItem');
//編輯項目
Route::post('editItem','NoteController@editItem');

Controllers(app/Controllers/NoteController.php)設定

    //取得項目
    public function getItem(Request $request)
    {
    	//接收前端資料
    	$id = $request->input('id');

    	//取得資料庫資料
    	$data = Item::select('id','title','content')
    			->where('id',$id)
    			//最後一定要寫get()來結尾 , 不然會出錯
    			->first();
    			
    	//用json格式回傳結果,與資料
    	return response()->json(['result' => 'success','data' => $data]);
    }
    //更新項目
    public function editItem(Request $request)
    {
        //接收前端資料
        $id = $request->input('id');
        $title = $request->input('title');
        $content = $request->input('content');

        //修改資料庫
        Item::
        where('id',$id)
        ->update([
            //'資料庫欄位'=>資料
            'title'=> $title,
            'content'=> $content,
            'updated_at'=> NOW()
        ]);

        //用json格式回傳結果
        return response()->json(['result' => 'success']);
    }


刪除資料庫(delete)

views(home.blade.php)設定

<!doctype html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
		<!-- 引入google字體 -->
		<link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900&amp;subset=latin-ext" rel="stylesheet">
		<style type="text/css">
			body{
				font-family: '微軟正黑體', 'Noto Sans TC', Helvetica, Arial, '黑體-繁', 'Heiti TC', '儷黑', 'LiHei', 'Microsoft JhengHei', sans-serif;
			}
		</style>
		<title>Note</title>
	</head>
  	<body>
	  	<div class="container">
	  		<div class="row">
	  			<div class="col-12">
	  				<h1 class="text-center mt-2">Note</h1>
	  				<input type="text" class="form-control mt-5"  placeholder="標題" id="newTitle">
	  				<textarea class="form-control mt-2" placeholder="內容" rows="3" id="newContent"></textarea>
	  			</div>
	  			<div class="col-12 text-right mt-2">
	  				<button type="button" class="btn btn-primary" onclick="addItem()">新增</button>
	  			</div>

	  			<div class="col-12 mt-5">
					<table class="table">
						<thead class="thead-light">
							<tr>
								<th width="200">標題</th>
								<th width="600">內容</th>
								<th>時間</th>
								<th style="min-width: 150px;">操作</th>
							</tr>
						</thead>
					  <tbody>
					  	<!-- 把假資料刪除後 , 將後端資料帶入html裡面 -->
					  	@foreach ($data as $val)
					    <tr>
							<td>{{$val->title}}</td>
							<td>{{$val->content}}</td>
							<th>{{$val->created_at}}</th>
							<td>
								<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal" onclick="getItem({{ $val->id }})">編輯</button>
								<button type="button" class="btn btn-danger" onclick="deleteItem({{ $val->id }})">刪除</button>
							</td>
					    </tr>
					    @endforeach
					  </tbody>
					</table>
	  			</div>
	  		</div>
	  	</div>

		<!-- 編輯視窗 -->
		<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLabel"><b>編輯</b></h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						  	<span aria-hidden="true">&times;</span>
						</button>
					</div>
				<div class="modal-body">
					<div class="form-group">
						<label class="col-form-label">標題:</label>
						<input type="text" class="form-control" id='editTitle'>
					</div>
					<div class="form-group">
						<label class="col-form-label">內容:</label>
						<textarea class="form-control" id='editContent'></textarea>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
					<button type="button" class="btn btn-primary" onclick="editItem()">送出</button>
				</div>
				</div>
			</div>
		</div>

	    <!-- Optional JavaScript -->
	    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
	    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
	    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

	   	<!--  載入Laravel的內建前端套件 ,現在目的是要載入Axios -->
	    <script src="{{URL::asset('js/app.js')}}"></script>
	</body>
</html>

<script type="text/javascript">
	function addItem() {
		//取得資料
		var title = $('#newTitle').val();
		var content = $('#newContent').val();

		//檢查有沒有填寫資料
		if (!title) {
			alert('請填寫標題');
			return
		}
		if (!content) {
			alert('請填寫內容');
			return
		}

		//傳送到後端
	    axios.post('/addItem', {
	        title:title,
	        content:content
	    })
	    .then(function (response) {
	    	if (response.data.result == 'success') {
	    		//後端回傳過來是成功後,重整頁面
	    		location.reload();
	    	}
	    })
	    .catch(function (error) {
	        console.log(error);
	    });
	}
	function getItem(id) {
		//傳送到後端,並且取得資料
	    axios.post('/getItem', {
	        id:id
	    })
	    .then(function (response) {
	    	if (response.data.result == 'success') {
	    		$('#editTitle').val(response.data.data.title);
	    		$('#editContent').val(response.data.data.content);
	    		//使用一個 全域性的變數 ,來儲存要被編輯的ID , 等等真的要修改的時候直接取得
	    		window.editId = response.data.data.id;
	    	}
	    })
	    .catch(function (error) {
	        console.log(error);
	    });
	}
	function editItem() {
		//傳送到後端,並且修改
	    axios.post('/editItem', {
	    	//取得要修改的資料
    		title : $('#editTitle').val(),
    		content : $('#editContent').val(),
	    	//取得剛剛的ID
	        id:window.editId
	    })
	    .then(function (response) {
	    	if (response.data.result == 'success') {
	    		//後端回傳過來是成功後,重整頁面
	    		location.reload();
	    	}
	    })
	    .catch(function (error) {
	        console.log(error);
	    });
	}
	function deleteItem(id) {
		//js內建的詢問視窗 , 以免誤觸後刪除
		var check = confirm("確定要刪除嗎 ?");
		//如果點到確定後才會執行
		if (check == true) {
		    axios.post('/deleteItem', {
		        id:id
		    })
		    .then(function (response) {
		    	if (response.data.result == 'success') {
		    		//後端回傳過來是成功後,重整頁面
		    		location.reload();
		    	}
		    })
		    .catch(function (error) {
		        console.log(error);
		    });
		}
	}
</script>

重點說明如下 : 

將一開始頁面取得的id , 帶入onclick事件

<button type="button" class="btn btn-danger" onclick="deleteItem({{ $val->id }})">刪除</button>

使用confirm() 來防止誤觸刪除按鈕 , 如果確定後直接把id丟到後端刪除

	function deleteItem(id) {
		//js內建的詢問視窗 , 以免誤觸後刪除
		var check = confirm("確定要刪除嗎 ?");
		//如果點到確定後才會執行
		if (check == true) {
		    axios.post('/deleteItem', {
		        id:id
		    })
		    .then(function (response) {
		    	if (response.data.result == 'success') {
		    		//後端回傳過來是成功後,重整頁面
		    		location.reload();
		    	}
		    })
		    .catch(function (error) {
		        console.log(error);
		    });
		}
	}

route(routes/web.php)設定

//刪除項目
Route::post('deleteItem','NoteController@deleteItem');

Controllers(app/Controllers/NoteController.php)設定

    public function deleteItem(Request $request)
    {
        //接收前端資料
        $id = $request->input('id');

        //刪除資料庫的資料
        Item::
        where('id', '=', $id)
        ->delete();

        //用json格式回傳結果
        return response()->json(['result' => 'success']);
    }

終於結束了😂😂😂😂~~~~~~~~~

一開始碰可能會有點複雜 , 但在練習過幾次後是不是就覺得都在做同樣的事情呢

當然這個只是很簡單很簡單的範例 ~

大家一定要再深入地了解更多的細節 , 希望大家都可以學會Laravel ~

在下一章節我會貼上所有的程式碼 方便大家練習~


留言

張貼留言

這個網誌中的熱門文章

網頁入門教材目錄

  0.網頁運作原理 網頁運作原理與專業名詞 1.程式編輯器sublime 3 介紹 sublime 3 使用介紹 2. PHP開發環境介紹  Xampp介紹 3. 認識HTML HTML介紹 4. 認識CSS CSS基礎篇 CSS基礎語法 5.認識 Javascript Javascript基礎 6. 認識 Jquery Jquery與ajax介紹 7. Bootstrap 4 基礎介紹 Bootstrap 4 介紹 Bootstrap 4 範例製作 8. 資料庫入門 MariaDB入門教學 9. PHP介紹 PHP基礎用法 - 1 PHP基礎用法 - 2 PHP物件導向 PHP與資料庫連線 10. Laravel框架入門 Laravel 基礎概念 Laravel下載安裝、MVC流程編寫、資料庫設定 Laravel 新增資料與顯示資料 Laravel 資料修改與刪除 Laravel 完整筆記本範例
閱讀完整內容

什麼是HTML?

圖片
  1. HTML 是什麼呢 ? html介紹 HTML 的英文原文是 HyperText Markup Language ，中文譯為「超文字標示語言」。為什麼要說「 超文字 」呢？如果你曾經用過 Windows 上的「記事本」打過字，你應該知道一般的純文字輸入是無法顯示不同的字型大小、不同的文字顏色、甚至插入與文字說明相關的圖片的。而 超文字則可包含這些不同的文字變化、加入圖片或影音多媒體、畫表格、甚至可做一些基本的排版功能 。而「標記語言」指的是 HTML 透過一些定義好的結構化標籤 (Tag) 語法，讓你把超文字放到你所想要的位置、或去指定它的呈現方式。因此，再簡單的說， HTML 就是可以讓你將您所想要呈現給別人看的資料，儘可能以較豐富的方式去呈現。 我可以用什麼工具編寫 HTML 網頁？ 很簡單，用 Windows 內建的「記事本」小軟體，就可以拿來練習編寫網頁了。但如果可以的話，真心推薦您使用以下其中一套「免費的進階版記事本」小軟體：  Notepad++  、  sublime ，因為它們可以幫您將 HTML 語法和您的網頁文章內容用不同的顏色做一些區隔，讓您更方便閱讀 HTML 內容，並且也可以及早讓您發現可能的編寫錯誤，讓您的學習之路更為順暢。 我要如何瀏覽及測試我的 HTML 網頁呢？ 當您使用前述的「記事本」工具編寫完內容後， 可以將檔案儲存成 test.html 這樣的檔名 ， test 即是您網頁的主檔名，而 .html 則為網頁的副檔名。假設您的檔案是儲存在「桌面」，您可用檔案總管或是任何可能的方式到桌面去找到 .html 的檔案，例如前述的 test.html 檔，然後用 滑鼠在 test.html 檔案上按左鍵快速點選兩下 ，則電腦即會自動以您系統預設的  網頁瀏覽器  開啟這個練習的網頁 2. HTML 基本語法 基本的HTML文件格式 < HTML > 　 < HEAD > 　　 < TITLE > 網頁主題 </ TITLE > 　　 < Meta > 　 </ HEAD > 　 < BODY > 　　網頁內容的主要呈現部分 　 </ BODY > </ H...
閱讀完整內容

網頁是怎麼運作的呢?

圖片
  短期來看，在撰寫網站程式碼時，這些理論並不是非懂不可，但在之後，了解這些背後原理，對你會很有幫助。 網頁know-how : 用戶端與伺服器端 用戶端 是網路用戶的典型上網設備（像是連到 Wi-Fi 的電腦、或是連到手機網路的手機），這些設備通常有能夠上網的軟體（通常是 Firefox 或 Chrome 之類的瀏覽器）。 伺服器端 是放著網頁、網站、或著 app 的電腦。當用戶端設備要訪問網頁時，網頁的副本會從伺服器下載到用戶端，以便顯示在用戶的瀏覽器。 IP位址 為Internet Protocol Address的縮寫，中文被稱為網際協議位址。 是一種在Internet上的給主機編址的方式。  IP位址可以說是網頁伺服器的門牌 讓系統可以透過這個號碼找到正確的網頁伺服器在哪裡。 DNS Domain Name System的縮寫，中文又稱領域名稱解析系統。 是網際網路的一項的服務，是個可將網址和IP位址相互對應的資料庫，能夠使人更方便的存取網際網路。( 不用記長長一串的數字啦！ ) 伺服器 伺服器作為硬體來說，通常是指那些具有較高計算能力，能夠提供給多個使用者使用的電腦。伺服器與PC機的不同點太多了，例如PC機在一個時刻通常只為一個使用者服務。伺服器與主機不同，主機是透過終端給使用者使用的，伺服器是透過網路給用戶端使用者使用的。 而近期 雲端伺服器 越來越盛行,常見的雲端服務有 AWS , GCP , AZURE 等.... , 雲端伺服器擁有非常多的服務, 可以節省開發時間 , 直接使用服務(但通常都不便宜...) 、擁有高擴展的硬體資源, 隨時調整你的硬體資源、安全性高等等.... , 想必之後會成為伺服器的主流 網頁伺服器 又叫做 Web Server 。 Apache是接洽的服務員負責將網頁畫面傳遞給瀏覽器，只要網頁中有需要資料的部分Apache就會向DB索取資料後一起交給瀏覽器。 DB(Data Base)就是存放資料的地方。 web server 的種類有： apache、nginx、iis apache 和nginx的差別在於nginx可能速度會比較快，用的資源少。 iis是微軟做的，如果是寫 asp.net  就可用這套iis但環境就是要在window server上。 瀏覽器輸入網址的流程 :...
閱讀完整內容