飛狼實驗室[wp]

參考網址：
用VScode+EasyCod(ChatGPT)所產生的程式
運用到拖曳調整道次
問題1：用javascript ajax 讓籤號可以拖曳，並交換內容
問題2：可以加入ajax功能嗎？要更改資料庫內容

<!-- 20230408 by ChatGPT -->
<style>
.tags {
  display: flex;
  flex-wrap: wrap;
}

.tag {
  padding: 10px;
  margin: 10px;
  background-color: #ccc;
  cursor: move;
}
</style>
<div class="tags" id="container">
  <div class="tag" draggable="true" ondragstart="drag(event)" data-id="1">Tag 1</div>
  <div class="tag" draggable="true" ondragstart="drag(event)" data-id="2">Tag 2</div>
  <div class="tag" draggable="true" ondragstart="drag(event)" data-id="3">Tag 3</div>
  <div class="tag" draggable="true" ondragstart="drag(event)" data-id="4">Tag 4</div>
</div>
<script type="text/javascript">
var dragSrcEl = null;

function drag(e) {
  dragSrcEl = e.target;
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', dragSrcEl.innerHTML);
}

function drop(e) {
  e.preventDefault();
  if (e.target.className == 'tag') {
    var temp = dragSrcEl.innerHTML;
    dragSrcEl.innerHTML = e.target.innerHTML;
    e.target.innerHTML = temp;

    // 更新資料庫內容
    var id1 = dragSrcEl.getAttribute('data-id');
    var id2 = e.target.getAttribute('data-id');
    console.log(id1);
    updateDatabase(id1, id2);
  }
}

function allowDrop(e) {
  e.preventDefault();
}

var container = document.getElementById('container');
container.addEventListener('drop', drop, false);
container.addEventListener('dragover', allowDrop, false);

function updateDatabase(id1, id2) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'update.php', true);
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      console.log(xhr.responseText);
    }
  };
  xhr.send('id1=' + id1 + '&id2=' + id2);
}
</script>

參考網址：
phpExcel常用方法詳解

PHPExcel 使用小記

PHP 使用 PHPExcel 讀取、寫入並產生篩選功能的 Excel 下載檔

參考網址：https://neohsuxoops.blogspot.com/2020/09/phpspreadsheetphpexcel-xoops.html
PHPExcel，但是官網已經說明PHPExcel套件因升級不易只能支援到php5.6，該物件已於2017年正式棄用，並於2019年永久歸檔，換句話說PHPExcel套件對於日後新版的excel格式均不支援，為保持程式在最新狀態只好棄用PHPExcel改使用PhpSpreadsheet電子表格套件
唯一比較麻煩的是使用PhpSpreadsheet要先佈署composer，如果沒佈署composer是沒辦法使用的，還好官方有釋出已經設定好的phpoffice套件可以直接引入使用，省了很多麻煩，請直接參考「參考網站」
 

官方網站：https://github.com/PHPOffice

點下資訊社的教學
https://campus-xoops.tn.edu.tw/modules/tad_book3/page.php?tbsn=36&tbdsn=1336
套用樣板
好處是不用全部都用程式來寫，可以自己設定好各種花俏的格式，程式只負責把值填上

<?php

require 'vendor/autoload.php';

$spreadsheet = \PhpOffice\PhpSpreadsheet\IOFactory::load('test.xlsx');

$worksheet = $spreadsheet->getActiveSheet();

$worksheet->getCell('A1')->setValue('套用樣板測試');

header('Content-Type: application/vnd.ms-excel');
header('Content-Disposition: attachment;filename="套用樣板測試.xls"');
header('Cache-Control: max-age=0');

$writer = \PhpOffice\PhpSpreadsheet\IOFactory::createWriter($spreadsheet, 'Xls');
$writer->save('php://output');