5-6 templates/post_form.tpl
function add()
{
global $db, $smarty;
$message = '';
if (empty($_POST['title'])) {
$message .= '標題必填 | ';
}
if (empty($_POST['directions'])) {
$message .= '描述必填 | ';
}
if (!isset($_POST['assign'])) {
$message .= '至少指派一名';
}
if (!empty($message)) {
echo "<script>alert('" . $message . "');history.back();</script>;";
exit;
}
/************省略*****************/
}
//更新清單
function update()
{
global $db, $smarty;
$message = '';
if (empty($_POST['title'])) {
$message .= '標題必填 | ';
}
if (empty($_POST['directions'])) {
$message .= '描述必填 | ';
}
if (!isset($_POST['assign'])) {
$message .= '至少指派一名';
}
if (!empty($message)) {
// 返回上一頁並重新整理
echo "<script>alert('" . $message . "');self.location=document.referrer;</script>;";
exit;
}
/****************省略***************/
}
D:\xampp\htdocs> mkdir class
<script src="/class/ckeditor5/build/ckeditor.js"></script>
<script>ClassicEditor
.create( document.querySelector( '#editor' ), {
toolbar: {
items: [
'heading',
'|',
'alignment',
'bold',
'italic',
'link',
'bulletedList',
'numberedList',
'|',
'outdent',
'indent',
'|',
'imageUpload',
'blockQuote',
'insertTable',
'mediaEmbed',
'undo',
'redo',
'fontBackgroundColor',
'fontColor',
'fontSize',
'fontFamily',
'highlight',
'underline',
'horizontalLine'
]
},
language: 'zh',
image: {
toolbar: [
'imageTextAlternative',
'imageStyle:full',
'imageStyle:side'
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells',
'tableCellProperties',
'tableProperties'
]
},
licenseKey: '',
} )
.then( editor => {
window.editor = editor;
} )
.catch( error => {
console.error( 'Oops, something went wrong!' );
console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
console.warn( 'Build id: 1rgkipb73di4-u4vchuqjbqta' );
console.error( error );
} )
.editorConfig(config=>{
config.allowedContent = {
script: true,
$1: {
// This will set the default set of elements
elements: CKEDITOR.dtd,
attributes: true,
styles: true,
classes: true
}
}})
;
</script>
<style>
.ck-editor__editable {
min-height: 8rem;
}
</style>
<textarea id="editor" class="form-control" name="directions" >{$content.directions}</textarea>
find_one()
function find_one($sn = "")
{
global $db;
/****省略***/
/**********註記以下********/
//$data['directions'] = htmlspecialchars($data['directions'], ENT_QUOTES);
}
<div class="row">
<label class="col-sm-3 text-right">
描述
</label>
<div class="col-sm-9">
{$content.directions}
</div>
</div>
<input type="text" required>
<input type="text" id="text" name="text" minlength="2" maxlength="20">
<input type="text" class="form-control" id="title" name='title' placeholder="字數 2 ~ 20" value='{$content.title}' required pattern="{literal}[a-zA-Z0-9_]{2,20}{/literal}">
<input type="date" class="form-control" id="end" name="end" value='{$content.end}' required min="{$now}" max="2022-12-31">
<div class="row m-3">
<label for="title" class="col-sm-2 col-form-label text-end">待辦事項</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="title" name='title' placeholder="字數 2 ~ 20" value='{$content.title}' required pattern="{literal}[a-zA-Z0-9_]{2,20}{/literal}">
</div>
</div>
<!-- 省略 -->
<div class="row m-3">
<label for="end" class="col-sm-2 col-form-label text-end">到期日</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="end" name="end" value='{$content.end}' required min="{$now}" max="2022-12-31">
</div>
</div>
// 列出所有
function list_all()
{
global $db, $smarty, $content;
include_once "class/PageBar.php";
$sql = "select * from `list` order by priority,end";
$PageBar = getPageBar($db, $sql, 10, 10);
$bar = $PageBar['bar'];
$sql = $PageBar['sql'];
$total = $PageBar['total'];
$result = $db->query($sql);
if (!$result) {
throw new Exception($db->error);
}
/**省略**/
$smarty->assign('total', $total);
$smarty->assign('bar', $bar);
}
getPageBar($mysqli, $sql, $show_num = 20, $page_list = 10, $to_page = "", $url_other = "")
$show_num = 20：每頁顯示資料數
$page_list = 10：分頁工具列呈現的頁數
$to_page = ""：要連結到那一個頁面
$url_other = ""：其他額外的連結參數
<h3>待辦清單<small>（共 {$total} 個事項）</small></h3>
{$bar}
npm i jquery
npm install --save sweetalert
<a href="javascript:del({$row.sn})" class="btn btn-danger" title="刪除"><i class="fas fa-times-circle"></i> 刪除</a>
<script src='/node_modules/jquery/dist/jquery.min.js'></script>
<script type='text/javascript' src='/node_modules/sweetalert/dist/sweetalert.min.js'></script>
<script type="text/javascript">
function del(sn){
swal({
title: "確定要刪除嗎？",
text: "刪除後資料就救不回來囉！",
type: "warning",
buttons: {
cancel: "不...別刪",
roll: {
text: "是！含淚刪除！",
value: "roll",
},
},
}).then(willDelete => {
if (willDelete) {
swal("OK！刪掉惹！", "該資料已經隨風而逝了...", "success");
location.href='index.php?op=delete&sn=' + sn;
}
});
}
</script>
{include file='sweetalert_delete.tpl'}
switch ($op) {
case 'delete':
del($sn);
// 轉向
header("location:index.php");
exit;
/*********** 省略 *******************/
<a class="btn btn-link" href=""></a>
$sql = "SELECT * FROM `list` where done!=1 order by end desc"
1.header.php 加入導覽列
$navbar = ['home' => "回首頁", 'post' => "發布待辦事項", 'done' => "已完成清單"];
2.navbar.tpl
<li class="nav-item">
<a class="nav-link {if isset($op) && $op=='done'}active{/if}" href="{$action}?op=done">{$navbar.done}</a>
</li>
3. 根據op 在 index.php加流程，在 index.tpl加一組樣板
case 'done':
done();
break;
{elseif $op=="done"}
{include file='done.tpl'}
4.撰寫 function done()
5.製作顯示頁done.tpl