新增程式碼片段

:::

1-2-2 安裝 Visual Studio Code 的相關套件

1-2-4 VSCode 常用快捷鍵 next

[1102] PHP全端開發

1-2-3 新增程式碼片段

您沒有觀看影片的權限

請先登入，登入後，確認您的權限後，即可觀看影片。

設定→新增程式碼片段（可以加快開發速度，日後亦可將常用語法自行加入）

html.json

{
    "jquery語法": {
        "prefix": "jquery",
        "scope": "html,smarty",
        "body": [
            "<script type=\"text/javascript\">",
            "    \\$(document).ready(function(){",
            "        ${1:jquery語法}",
            "    });",
            "</script>"
        ],
        "description": "jquery語法"
    },
    "引入樣板": {
        "prefix": "includeq",
        "scope": "html,smarty",
        "body": [
            "<{includeq file=\"\\$xoops_rootpath/modules/$WORKSPACE_NAME/templates/${2:樣板檔}.${3|tpl,html|}\"}>"
        ],
        "description": "引入樣板"
    },
    "foreach 迴圈": {
        "prefix": "foreach",
        "scope": "html,smarty",
        "body": [
            "<{foreach from=$${1:來源變數} key=${2:索引} item=${3:內容名稱} name=$1}>",
            "    $BLOCK_COMMENT_START 從0開始的次數 <{$smarty.foreach.$1.index}> $BLOCK_COMMENT_END",
            "    $BLOCK_COMMENT_START 從1開始的次數 <{$smarty.foreach.$1.iteration}> $BLOCK_COMMENT_END",
            "    <{$$2}>:<{$$3}>",
            "<{/foreach}>"
        ],
        "description": "foreach 迴圈"
    },
    "li項目": {
        "prefix": "li",
        "scope": "html,smarty,vue",
        "body": [
            "<li>$CLIPBOARD</li>"
        ],
        "description": "li項目"
    },
    "alert 框": {
        "prefix": "alert",
        "scope": "html,smarty,vue",
        "body": [
            "<div class=\"alert alert-${1|info,success,danger,warning,primary|}\">",
            "    $2",
            "</div>"
        ],
        "description": "alert 框"
    },
    "smarty語系": {
        "prefix": "const",
        "scope": "html,smarty",
        "body": [
            "<{\\$smarty.const.${1:語系名稱}}>"
        ],
        "description": "smarty語系"
    },
    "EasyResponsiveTabs 物件樣板": {
        "prefix": "tabs",
        "scope": "html,smarty",
        "body": [
            "<div id=\"demoTab\">",
            "    <ul class=\"resp-tabs-list vert\">",
            "        <{foreach from=\\$${1:來源變數} key=${2:索引} item=${3:內容名稱}}>",
            "            <li> \\$$2 </li>",
            "        <{/foreach}>        ",
            "    </ul>",
            "",
            "    <div class=\"resp-tabs-container vert\">",
            "        <{foreach from=\\$$1 key=$2 item=$3}>",
            "            <div> \\$$3 </div>",
            "        <{/foreach}>",
            "    </div>",
            "</div>"
        ],
        "description": "EasyResponsiveTabs 物件"
    },

}

xoops.json（全域）

{
    "重新導向": {
        "scope": "php",
        "prefix": "red",
        "body": [
            "redirect_header(\\$_SERVER['PHP_SELF'], 3, \"${0:已成功執行！}\");"
        ],
        "description": "加入 redirect_header() 重新導向"
    },
    "斷點列出變數值": {
        "scope": "php",
        "prefix": "dd",
        "body": [
            "Utility::dd(\\$${1:var});"
        ],
        "description": "斷點列出變數值"
    },
    "assign到樣板": {
        "prefix": "assign",
        "scope": "php",
        "body": [
            "\\$xoopsTpl->assign('${1:變數名稱}', \\$$1);"
        ],
        "description": "assign到樣板"
    },
    "產生word": {
        "prefix": "word",
        "scope": "php",
        "body": [
            "require 'vendor/autoload.php';",
            "\\$phpWord = new \\PhpOffice\\PhpWord\\PhpWord();",
            "\\$filename = \"${1:檔名}\";",
            "\\$filename = iconv(\"UTF-8\", \"Big5\", \\$filename);",
            "\\$objWriter = \\PhpOffice\\PhpWord\\IOFactory::createWriter(\\$phpWord, 'Word2007');",
            "header('Content-Type: application/vnd.ms-word');",
            "header(\"Content-Disposition: attachment;filename={\\$filename}.docx\");",
            "header('Cache-Control: max-age=0');",
            "\\$objWriter->save('php://output');"
        ],
        "description": "產生word"
    },
    "web_error 資料庫執行錯誤": {
        "prefix": "web_error",
        "scope": "php",
        "body": [
            "web_error(\\$sql, __FILE__, __LINE__);"
        ],
        "description": "web_error 資料庫執行錯誤"
    },
    "assign 變數到樣板": {
        "prefix": "assign",
        "scope": "php",
        "body": [
            "\\$xoopsTpl->assign('$CLIPBOARD', \\$$CLIPBOARD);"
        ],
        "description": "assign 變數到樣板"
    },
    "Request 過濾": {
        "prefix": "request",
        "scope": "php",
        "body": [
            "use Xmf\\Request;",
            "\\$op = Request::getString('op');"
        ],
        "description": "Request 過濾"
    },
    "use 物件": {
        "prefix": "use Utility",
        "scope": "php",
        "body": [
            "use XoopsModules\\Tadtools\\Utility;"
        ],
        "description": "use 物件"
    },
    "EasyResponsiveTabs 物件程式": {
        "prefix": "tabs",
        "scope": "php",
        "body": [
            "use XoopsModules\\Tadtools\\EasyResponsiveTabs;",
            "\\$EasyResponsiveTabs = new EasyResponsiveTabs('#demoTab', '${1|default,vertical,accordion'|}');",
            "\\$EasyResponsiveTabs->rander();",
            ""
        ],
        "description": "EasyResponsiveTabs 物件"
    },
    "sql fetchArray": {
        "prefix": "sql fetchArray",
        "scope": "php",
        "body": [
            "\\$sql = \"SELECT * FROM `\" . \\$xoopsDB->prefix('${1:資料表}') . \"` where 1\";",
            "\\$result = \\$xoopsDB->query(\\$sql) or Utility::web_error(\\$sql, __FILE__, __LINE__);",
            "\\$data = [];",
            "while (false !== (\\$all = \\$xoopsDB->fetchArray(\\$result))) {",
            "    foreach (\\$all as \\$k => \\$v) {",
            "        \\$\\$k = \\$v;",
            "    }",
            "    \\$data[] = \\$all ;",
            "}",
            "return \\$data;"
        ],
        "description": "sql fetchArray"
    },
    "sql fetchRow": {
        "prefix": "sql fetchRow",
        "scope": "php",
        "body": [
            "\\$sql = \"SELECT * FROM `\" . \\$xoopsDB->prefix('${1:資料表}') . \"` where 1\";",
            "\\$result = \\$xoopsDB->query(\\$sql) or Utility::web_error(\\$sql, __FILE__, __LINE__);",
            "while (false !== (list(\\$${2:欄位}) = \\$xoopsDB->fetchRow(\\$result))) {",
            "    $2;",
            "}"
        ],
        "description": "sql fetchRow"
    },
    "getPageBar 分頁": {
        "prefix": "pageBar",
        "scope": "php",
        "body": [
            "",
            "\\$PageBar = Utility::getPageBar(\\$sql, 20, 10);",
            "\\$sql = \\$PageBar['sql'];",
            "\\$bar = \\$PageBar['bar'];",
            "\\$total = \\$PageBar['total'];",
            "",
            "\\$xoopsTpl->assign('bar', \\$bar);",
            "\\$xoopsTpl->assign('total ', \\$total );",
            ""
        ],
        "description": "getPageBar 分頁"
    },
    "載入xoops_adm.css": {
        "prefix": "xoops_adm",
        "scope": "php",
        "body": [
            "\\$xoTheme->addStylesheet(XOOPS_URL . \"/modules/tadtools/css/xoops_adm{\\$_SESSION['bootstrap']}.css\");"
        ],
        "description": "載入xoops_adm.css"
    },
    "getArray": {
        "prefix": "getArray",
        "scope": "php",
        "body": [
            "\\$${1:name} = Request::getVar('${1}', [], null, 'array', 4);"
        ],
        "description": "getArray"
    },
}

b34.json（獨家配方，同時支援BootStrap3、BootStrap4的寫法）

{
	"B34 的表單": {
		"prefix": "form",
		"scope": "html,smarty",
		"body": [
			"<form action=\"${1:檔案}.php\" method=\"${2|post,get|}\" id=\"${3:myForm}\" enctype=\"multipart/form-data\" class=\"form-horizontal\">",
			"    $0",
			"    <{\\$token_form}>",
			"    <input type=\"hidden\" name=\"op\" value=\"<{\\$next_op}>\">",
			"    <div class=\"bar\">",
			"        <button type=\"submit\" class=\"btn btn-primary\">",
			"            <i class=\"fa fa-save\" aria-hidden=\"true\"></i> <{\\$smarty.const._TAD_SAVE}>",
			"        </button>",
			"    </div>",
			"</form>"
		],
		"description": "B34 的表單"
	},
	"B34 的 form-group>input": {
		"prefix": "form-group>input",
		"scope": "html,smarty",
		"body": [
			"<div class=\"form-group row\">",
			"    <label class=\"col-sm-${1:2} control-label col-form-label text-md-right\">",
			"        ${3:標題}",
			"    </label>",
			"    <div class=\"col-sm-${2:4}\">",
			"        <input type=\"text\" name=\"${4:變數名稱}\" id=\"$4\" class=\"form-control ${5|validate[required],''|}\" value=\"<{$$4}>\" placeholder=\"請輸入$3\">",
			"    </div>",
			"</div>"
		],
		"description": "B34 的 form-group>input"
	},
	"B34 的 input": {
		"prefix": "textarea",
		"scope": "html,smarty",
		"body": [
			"<input type=\"text\" name=\"${1:變數名稱}\" id=\"$1\" class=\"form-control ${2|validate[required],''|}\" value=\"<{$$1}>\" placeholder=\"請輸入$1\">"
		],
		"description": "B34 的 input"
	},
	"B34 的 form-group>textarea": {
		"prefix": "form-group>textarea",
		"scope": "html,smarty",
		"body": [
			"<div class=\"form-group row\">",
			"    <label class=\"col-sm-${1:2} control-label col-form-label text-md-right\">",
			"        ${3:標題}",
			"    </label>",
			"    <div class=\"col-sm-${2:4}\">",
			"        <textarea name=\"${4:變數名稱}\" id=\"$4\" class=\"form-control ${5|validate[required],''|}\" placeholder=\"請輸入$3\"><{$$4}></textarea>",
			"    </div>",
			"</div>"
		],
		"description": "B34 的 form-group>textarea"
	},
	"B34 的 textarea": {
		"prefix": "textarea",
		"scope": "html,smarty",
		"body": [
			"<textarea name=\"${1:name}\" id=\"$1\" class=\"form-control ${2|validate[required],''|}\" placeholder=\"請輸入$1\"><{$$1}></textarea>"
		],
		"description": "B34 的 textarea"
	},
	"B34 的 form-group>select": {
		"prefix": "form-group>select",
		"scope": "html,smarty",
		"body": [
			"<div class=\"form-group row\">",
			"    <label class=\"col-sm-${1:2} control-label col-form-label text-md-right\">",
			"        ${3:標題}",
			"    </label>",
			"    <div class=\"col-sm-${2:4}\">",
			"        <select name=\"${4:變數名稱}\" id=\"$4\" class=\"form-control ${5|validate[required],''|}\" placeholder=\"請輸入$3\">",
			"            <option value=\"${6:值}\" <{if \\$$4 == '$6'}>checked<{/if}>>$6</option>",
			"        </select>",
			"    </div>",
			"</div>"
		],
		"description": "B34 的 form-group>select"
	},
	"B34 的 select": {
		"prefix": "select",
		"scope": "html,smarty",
		"body": [
			"<select name=\"${1:name}\" id=\"$1\" class=\"form-control ${2|validate[required],''|}\" placeholder=\"請輸入$1\">",
			"    <option value=\"${3:值}\" <{if \\$$1 == '$3'}>checked<{/if}>>$3</option>",
			"</select>"
		],
		"description": "B34 的 select"
	},
	"B34 的 form-group>radio": {
		"prefix": "form-group>radio",
		"scope": "html,smarty",
		"body": [
			"<div class=\"form-group row\">",
			"    <label class=\"col-sm-${1:2} control-label col-form-label text-md-right\">",
			"        ${3:標題}",
			"    </label>",
			"    <div class=\"col-sm-${2:4}\" style=\"padding-top: 8px;\">",
			"        <div class=\"form-check-inline radio-inline\">",
			"            <label class=\"form-check-label\">",
			"                <input class=\"form-check-input\" type=\"radio\" name=\"${4:變數名稱}\" value=\"${5:值}\" <{if \\$$4=='$5'}>checked<{/if}>>",
			"                $5",
			"            </label>",
			"        </div>",
			"    </div>",
			"</div>"
		],
		"description": "B34 的 form-group>radio"
	},
	"B34 的 radio": {
		"prefix": "radio",
		"scope": "html,smarty",
		"body": [
			"<div class=\"form-check-inline radio-inline\">",
			"    <label class=\"form-check-label\">",
			"        <input class=\"form-check-input\" type=\"radio\" name=\"${1:名稱}\" value=\"${2:值}\" <{if \\$${1:名稱}=='$2'}>checked<{/if}>>",
			"        $2",
			"    </label>",
			"</div>"
		],
		"description": "B34的radio"
	},
	"B34 的 form-group>checkbox": {
		"prefix": "form-group>checkbox",
		"scope": "html,smarty",
		"body": [
			"<div class=\"form-group row\">",
			"    <label class=\"col-sm-${1:2} control-label col-form-label text-md-right\">",
			"        ${3:標題}",
			"    </label>",
			"    <div class=\"col-sm-${2:4}\" style=\"padding-top: 8px;\">",
			"        <div class=\"form-check-inline checkbox-inline\">",
			"            <label class=\"form-check-label\">",
			"                <input class=\"form-check-input\" type=\"checkbox\" name=\"${4:變數名稱}[]\" value=\"${5:值}\" <{if \\$$5|in_array:\\$$4_arr}>checked<{/if}>>",
				"                $5",
			"            </label>",
			"        </div>",
			"    </div>",
			"</div>"
		],
		"description": "B34 的 form-group>checkbox"
	},
	"B34 的 checkbox": {
		"prefix": "checkbox",
		"scope": "html,smarty",
		"body": [
			"<div class=\"form-check-inline checkbox-inline\">",
			"    <label class=\"form-check-label\">",
			"        <input class=\"form-check-input\" type=\"checkbox\" name=\"${1:名稱}[]\" value=\"${2:值}\" <{if \\$$2|in_array:\\$$1_arr}>checked<{/if}>>",
			"        $2",
			"    </label>",
			"</div>"
		],
		"description": "B34 的 checkbox"
	},
	"B34 的 input-group": {
		"prefix": "input-group",
		"scope": "html,smarty",
		"body": [
			"<div class=\"input-group\">",
			"    <div class=\"input-group-prepend input-group-addon\">",
			"        <span class=\"input-group-text\">${1:文字}</span>",
			"    </div>",
			"    <input type=\"text\" name=\"${2:name}\" class=\"form-control\" placeholder=\"${3:佔字符}\">",
			"    <div class=\"input-group-append input-group-btn\">",
			"        <button type=\"submit\" class=\"btn btn-primary\">${4:送出}</button>",
			"    </div>",
			"</div>"
		],
		"description": "B34 的 input-group"
	},
}