程式設計
首頁 程式設計
新增、讀取、更新、刪除 (CRUD) +Data Table 系統 – JavaScript
這篇文章說明如何使用JavaScript來設計出具有新增、讀取、更新、刪除 (CRUD)功能，同時又整合dataTable 的系統。
https://youtu.be/e5PZEjVCXqU
如果您對於整合後端有興趣，想要試用、瞭解或購買，連結如下：
整合前端與後端 - 新增、讀取、更新、刪除 (CRUD) +Data Table 系統
這裡的JS code 有新增、讀取、更新、刪除 以及取消的函式。
完整程式碼如下：
https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.11.0/js/jquery.dataTables.js
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="...
登入／註冊系統簡易版 -整合前端與後端(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...
下載 ⬇️ 新增、讀取、更新、刪除 (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....
【Google Sheets變成資料庫- 1】上傳「表單」資料到Google 試算表
這個影片會介紹如何將網頁表單所輸入的資料，上傳到Google試算表
https://youtu.be/qxtgUKQMPFI
Code.gs
// 連結HTML檔案
function doGet(){
var html=HtmlService.createTemplateFromFile("form");
var check=html.evaluate();
var show =check.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
return show;
}
// 新增資料到試算表
function addData(rowData){
//抓時間
...
下載 ⬇️ 登入／註冊系統完整版 -整合前端與後端(GAS)
登入／註冊系統 -整合前端與後端(GAS)
🙏謝謝您購買C w C 頻道登入/註冊系統，一次購買即可享有此產品不斷更新🙂。
系統設定
請先看以下的影片來瞭解如何下載此產品，並透過簡單「三步驟」的設定來發布在網路上使用：
https://youtu.be/f_Vak9v4Tng
系統下載連結
✅ 登入/註冊系統: 下載
系統功能說明V1這個Google Apps Script登入／註冊系統為您的網站提供了一個強大的身份驗證解決方案。這個系統能夠讓您輕鬆地在您的網站上實現使用者帳戶的管理和登入功能。這個系統包含了：✅1. 安全登入與註冊機制：系統透過Google Apps Script實現安全的登入與註冊功能，確保您的使用者數據得到保護，防止未授權訪問。✅2. 簡單易用：以直觀的方式實現登入和註冊，使用者只需輸入帳號和密碼即可完成登入，同時也能進行使用者帳戶的註冊管理。✅3. 忘記密碼：如果忘記密碼，可以輸入Email，確認資料裡有相同的email後，會寄出密碼的Email給會員。✅4. 自訂系統名稱：根據網站的名稱，使用者可以透過設定來更變系統名稱。✅5. 即時反饋：系統能夠提供即時的反饋訊息，如使用者名稱或密碼錯誤，註冊成功等，為使用者提供更好的使用體驗。✅6. 彈性擴展：基於Google Apps Script的系統，具有高度的擴展性，您可以根據需求擴展更多的功能和安全層。✅7. 登入後頁面：成功登入後，可以自行設計自己喜歡的內容，建立起完整的網站系統。無論您是在建立一個全新的網站還是需要更新現有網站的使用者身份驗證系統，這個Google Apps Script登入／註冊系統都能夠滿足您的需求，為您的網站提供穩健和可靠的使用者身份驗證解決方案。
有任何問題，隨時告知 cwcchannel@icloud.com
有任何問題，隨時告知 cwcchannel@icloud.com
有任何問題，隨時告知...
VS Code提升程式完成效率－高手必備
Visual Studio Code
設計一個網站/應用程式，涉及到兩個階段，包括『前置作業』以及『程式建立與測試』，這個文章的效率專注在第二個階段，也就是已完成前置作業後，程式的輸入、顯示、檢測的過程，這其中有五大方法可以提高效率，分別為：輸入程式效率、跳到某程式效率、搜尋效率、顯示效率、除錯效率，這個文章及影片，以Visual Studio Code為編輯軟體，整理主要的效率提升技巧，彙整所有的內容。
https://youtu.be/1t1xwtq8GUw
【輸入程式效率】html架構html標籤 快速建立標籤 快速建立標籤屬性 ...
【Google Sheets變成資料庫- EP4】Google試算表變成超強表格DataTable，具有搜尋、分頁、顯示幾筆以及排序功能/
Code.gs 檔
function doGet() {
var html = HtmlService.createTemplateFromFile("DataTable");
var check = html.evaluate();
// 避免無法顯示，使用XFrame allow all
var display =...
【Google Sheets資料庫- 5】尋搜引擎
https://youtu.be/OH51tMGJQFk
這篇文章分享搜尋引撆程式。
code.gs
// 連結HTML檔案
function doGet(){
var html=HtmlService.createTemplateFromFile("index");
var check=html.evaluate();
var show =check.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
return show;
}
/* PROCESS FORM */
function processForm(formObject){
var...
【畫圖變網頁】超神前端網頁設計工具介紹、設定、示範
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>
...
網頁程式設計對決：ChatGPT、Gemini、Claude3，究竟哪個最強？
人工智慧的演化速度驚人,程式編碼這項傳統人類專長,近來也被AI搞得天翻地覆。不過,誰是頂級高手?今天我們就來評比一下三位知名AI的網頁開發實力。
出賽者包括:
ChatGPT - 目前AI界的人氣王,佔有大量用戶群。
Claude - 號稱最強大的AI,實力是否名符其實,待查看。
Gemini - 來自科技巨擘Google的基因,底蘊深厚有望一展長才。
(沒選Copolit只因它是建立在ChatGPT的模式上,所以不加以討論)
比賽項目如下:
請幫我設計公司首頁網站，並提供相關程式在同一個檔案裡
使用Bootstrap 5.3框架
加入頁面輪播功能
增設公司簡介模組(含圖文，兩欄位)
每一項將評分,累計總分高者為贏家。是時候拉開序幕,讓這AI大亂鬥開始吧!請看以下的影片：
https://youtu.be/4xQUeVVZG_w
比較表格