程式設計
首頁 程式設計
【網知 EP9】將Google 試算表的資料顯示在網頁上
https://youtu.be/zzIY22dHqY8
code.gs程式
// 連結HTML檔案
function doGet(){
var x=HtmlService.createTemplateFromFile("Index");
var y= x.evaluate();
// 避免無法顯示在網際網路上
var z = y.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
return z;
}
// 抓試算表裡的資料
function getData(){
...
下載 ⬇️ 新增、讀取、更新、刪除 (CRUD) +DataTable 系統 – 整合前端與後端 (GAS)
新增、讀取、更新、刪除 (CRUD) + DataTable 系統 – 整合前端與後端 (GAS)
🙏謝謝您購買C w C 頻道新增、讀取、更新、刪除 (CRUD) +Data Table 系統 ，一次購買即可享有此產品不斷更新🙂。
系統設定
請先看以下的影片來瞭解如何下載此產品，並透過簡單「三步驟」的設定來發布在網路上使用：
https://youtu.be/Y2E6ovj1yuE
系統下載連結
✅CRUD + Data Table系統: 下載
系統功能說明V1整合DataTable 以及新增、讀取、更新、刪除 (CRUD)的超棒系統，並且用Google 試算表做為後端資料庫，讓使用者可以輕鬆管理使用這個系統。這個系統包含八大特點了：✅1. CRUD功能：系統支持資料的新增(Create)、讀取(Read)、更新(Update)和刪除(Delete)操作，使使用者能夠輕鬆管理資料。✅2....
登入／註冊系統簡易版 -整合前端與後端(GAS)
本文章說明如何使用ChatGPT來建立 －登入／註冊系統簡易版 －整合前端與後端(GAS)
影片：
https://youtu.be/e2r3mUa224o
程式分享
試算表建立，試算表名稱Sheet1
code.gs
//連結login.html檔
function doGet() {
return HtmlService.createHtmlOutputFromFile('login.html');
}
//驗證帳號、密碼
function loginUser(email, password) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var data = sheet.getDataRange().getValues();
for (var i...
【畫圖變網頁】超神前端網頁設計工具介紹、設定、示範
https://youtu.be/fdnziUGfm1E
圖像變程式碼的轉換是一種利用人工智能和機器學習技術的方法，目的是從圖像中提取信息並生成對應的程式碼。這種轉換技術通常應用在網頁開發或設計領域，可以幫助開發人員快速創建網頁的基本結構和樣式。
這種轉換的過程通常涉及以下步驟：
圖像分析： 利用計算機視覺和機器學習算法，對輸入的圖像進行分析和處理。這可能包括識別和標記圖像中的不同元素，如文本、圖形、按鈕等。
特徵提取： 從圖像中提取關鍵的特徵和信息，這些特徵可以是像素的排列、色彩、形狀、文本內容等。
模式識別： 透過訓練過的機器學習模型，識別和匹配圖像中的模式和結構，例如識別特定的文本塊、按鈕、導航欄等。
代碼生成： 基於圖像分析和模式識別的結果，生成相應的網頁程式碼，包括HTML、CSS、甚至可能是JavaScript。這些程式碼將根據圖像中的排版、風格和元素生成相似的網頁結構。
這種技術的優點在於可以幫助快速生成網頁的基本結構和樣式，節省開發時間。但需要注意的是，生成的程式碼可能需要進一步的調整和優化，以確保網頁的功能性和響應性。
畫圖變網頁連結：
https://screenshottocode.com
此網站服務使用Open AI API Key，可以來這裡申請：
https://platform.openai.com/api-keys
開發者的GitHub：https://github.com/abi/screenshot-to-code
https://www.canva.com/design/DAF1wrldJDc/view?embed
手繪登入系統：
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
...
Google試算表－功能列按鈕 － 跳出表單與瀏覽dataTable系統
在這篇文章中，我將分享一個利用 Google Apps Script 實現的簡單且強大的更新管理功能。這個功能可以讓使用者在 Google Sheets 中輕鬆管理記錄，並透過直觀的界面進行操作，無需任何額外的插件或工具。
以下為系統的界面：
功能概述
此程式提供了三大主要功能：
更新記錄：使用者可以將新的更新日期與內容保存至 Google Sheets 中。透過日期選擇器選擇日期，並輸入相應的內容，點擊「保存」即可輕鬆新增更新記錄。
瀏覽更新記錄：使用者可以瀏覽所有更新過的記錄。每條記錄顯示更新日期和內容，
購買書的讀者獨家優惠：支援編輯和刪除功能。當點擊「編輯」按鈕時，使用者可以修改日期和內容，並且在修改後點擊「確認」按鈕保存變更。如果需要刪除某條記錄，則可以點擊「刪除」按鈕。
Google 試算表雲端資料庫網頁電子書
應用場景
這個程式非常適合用於需要定期更新和管理記錄的工作場景，比如：
項目進度更新：記錄項目進度、會議記錄等。
資料管理：管理資料更新、產品版本更新等。
日常工作日誌：對工作日誌進行管理，方便追蹤。
以下為程式分享
code.gs
function onOpen() {
const ui = SpreadsheetApp.getUi();
ui.createMenu('ℹ️更新管理')
...
Visual Studio Code-常用20個快捷鍵整理+自訂
這篇文章彙整常用的VSC快捷鍵
https://youtu.be/hHSCVyX_EDI
Ctrl (Cmd) +C / Ctrl (Cmd) +V / Ctrl (Cmd) +X ／Ctrl (Cmd) +ａ
複製、貼上、剪下、全選
Ctrl (Cmd) + z / Ctrl (Cmd) + Shift+ z
上一步 下一步
Ctrl...
用Copilot來建立網頁
這個影片說明如何用Copilot來完成網頁，包括圖片的插入，輕鬆快速！
https://youtu.be/-K981jjCQtk
影片完成的程式如下：
<html>
<head>
<style>
/* 這裡是 CSS 的部分，你可以修改它來改變網頁的外觀 */
body {
font-family: Arial, sans-serif;
background-color: #d6fdcc;
}
...
[電子書]Google試算表建立資料庫網頁 – 實作程式
9. GAS連接多個Web App檔11. 表單上傳系統12. 階層式登入系統13. 模糊資料搜尋系統 - SQL14. 資訊發布系統CRUD系統15. 待辦事項－CRUD系統新增章節 第19章. Google試算表－功能列按鈕 － 跳出CRUD系統
9. GAS連接多個Web App檔
code.gs
function doGet(e){
// if ... else ... statement 來確認是否有參數來決定開啟哪一個網頁
//如果沒有參數
if (!e.parameter.page){
...
.filter 搜尋功能 JQuery
程式分享
search.html
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
<!-- CSS 連結 -->
<link rel="stylesheet" href="search.css">
</head>
<body>
<h1>會員資料表</h1>
<form action="" class="search">
...
VS Code提升程式完成效率－高手必備
Visual Studio Code
設計一個網站/應用程式，涉及到兩個階段，包括『前置作業』以及『程式建立與測試』，這個文章的效率專注在第二個階段，也就是已完成前置作業後，程式的輸入、顯示、檢測的過程，這其中有五大方法可以提高效率，分別為：輸入程式效率、跳到某程式效率、搜尋效率、顯示效率、除錯效率，這個文章及影片，以Visual Studio Code為編輯軟體，整理主要的效率提升技巧，彙整所有的內容。
https://youtu.be/1t1xwtq8GUw
【輸入程式效率】html架構html標籤 快速建立標籤 快速建立標籤屬性 ...