文章

[Day0] 網頁設計師會用到的VSCODE與常用套件

圖片
[Day00] 網頁設計師會用到的VSCODE與常用套件 所謂工欲善其事必先立行器,VSCode已經是目前熱門主流的編輯器,原因除了直覺快速的介面操作,便利的專案與檔案管理,還有那些滿滿免費套件可以使用。套件不是一定需要的,每個人都有習慣的環境套件,找到符合自己的套件才是真正屬於自己的環境,以下是我推薦想成為網頁設計師的新手套件,可以分為四個類別來介紹。 視覺強化 屬於高亮提示或排版自動美化部分,方便在編輯程式碼時減少錯誤的宣告起始頭尾,也利於觀看程式碼能快速看出主體結構。 Bracket Pair Colorizer 幫你的{}大括弧上色,會自動對應不同顏色,幫助你輕鬆看準程式區段範圍。 Highlight Matching Tag 當游標停留在某一個區段或是標籤上,能高亮提示該屬於那些區段範圍或對應的頭尾標籤位置。 indent-rainbow 協助你排版(TAB)的空格填塞淡淡顏色,能幫助你對齊更快速方便。 Prettier - Code formatter 對HTML/CSS/JS支援自動化format排版效果,提升美觀性容易維護。 vscode-styled-components 幫助JS跟CSS有更高亮的視覺輔助效果 Comment Translate 滑鼠停留在變數、函數或註解能自動Google翻譯(可繁體),易用於原作者之註解說明。 filesize 增加資訊於左下角對於檔案空間為多少的輕資訊。 Image preview 可簡單輕巧提示該圖片預覽並縮圖於行數左側。 SVG Viewer 我們都知道內建支援圖片預覽但不支援svg格式,此套件可以補強此需求。 程式語言輔助 收錄MD、PHP、JQ、BS這類網頁開發的程式語言為主,使用某宣告或函式能方便提示語法說明,不必背誦太多語法也能輕鬆找到指定宣告語言。 docs-markdown 透過ALT+M或是 F1 輸入 >docs 就能快速生成MarkDown標籤,MarkDown初學者推薦。 Markdown All in One 提供一些常用的快速鍵,方便Markdown編寫上手,以及支援預覽效果。 PHP Intelephense 自動化的PHP代碼偵測,

[60秒筆記] PHP的headers already sent....

PHP出現了錯誤是 headers already sent.. 通常發生在session、setcookie、header(轉址)這些代碼時且同時無效使用。 這常發生在某PHP環境下正常(舊版本7.2),移植到新PHP環境就不允許使用(新版本7.3)。這是因為新版本更嚴謹,不允許這些PHP執行之前,你的HTML文件就已經有輸出了。你有兩個作法可改善。 調整代碼順序: 將session_start()或header()或setcookie()放在該php之頁首,確保這些函式之前沒有任何的打印輸出 調整php.ini: 找到output_buffering,預設off改成on即可(apapche重啟)

[上課筆記] 常看見的系統維護時間並取消SQL連接

常見在PHP網頁遊戲或網站更新備份,會在指定日期或星期會自動進行系統維護並取消SQL連結。這部分分為兩個階段來討論。首先,開發者不會在每一個php去head宣告sql連結,會在另外一個建立linkdb.php並透過include作為SQL連結需要。再來是,每當被執行linkdb.php時,再連結SQL前做個時間檢查,如果剛好符合維修時間內,那應該停止SQL連接並回傳告知系統維修中 *******************************linkdb.php******************************* <?php $link=mysqli_connect("localhost","root","","a2018"); mysqli_query($link,"set names utf8") or die("資料庫連結發生錯誤"); include("stopdb.php"); ?> 接下來分兩步驟,首先到資料庫建立判斷的時間所用,再來設計一個stopdb.php,做為時段上的檢查 *******************************stopdb.php******************************* <?php $check_time=strtotime("+7hour"); $now_time=date("H:i:s",$check_time); $sql="select * from w05_webstop where ws_start<='$now_time' and '$now_time'<=ws_stop"; $ro=mysqli_query($link,$sql); $row=mysqli_fetch_assoc($ro); $num=mysqli_num_rows($ro);//計算這次搜尋到幾筆資料 if($num==1){ $check_stop=0; $now_day=date("Y-

[上課筆記] 使用PHP做一個資料管理

作業練習 1. 建立一個新的TABLE,欄位4個,規格與範例如下 [索引鍵(int)] [動物名稱(text)] [動物種類(text)] [體重(int)] 1 阿瘦 貓熊 30 2. 建立一個頁面,提供文字欄位3個與按鈕1個,可以新增動物資料 3. 建立一個頁面,可以顯示所有動物的資料,例如: 1 阿瘦 貓熊 30 4. 建立一個頁面,可以刪除指定的動物資料(輸入索引鍵刪除) 5. 建立一個頁面,可以修改指定的動物資料,藉由輸入索引確定欲修改的資料(但索引鍵不能被修改) 會用到的PHP功能 include("head.php"); 可以將別的網頁整合到目前內容,通常被用PHP做分割頁面做header.php+body.php=index.php,以及一些通用的語法可以做個include方便節省 switch($page){ case "main": include('main.php'); break; } SWITCH判斷,比較多項目要做不同結果執行時,比較清楚條列的判斷式用途 $link=mysqli_connect("localhost","root","","a2018"); mysqli_query($link,"set names utf8"); 透過php去登入SQL,需要輸入位置,帳號,密碼,跟資料庫名稱。而設定UTF8作為避免寫入中文時會發生亂碼,所以第兩行通常會跟著馬上寫。同樣這兩行會習慣獨立寫在例如linkdb.php內,再透過include("linkdb.php");的方式快速放在會操作SQL的網頁中。 header("location:???"); 設計form表單送出資料時,如果你操作沒有導向其他頁面,其之前的資料還會存在,會導致你重整F5時,資料又再重複送出。所以會利用header要求到其他頁面脫離的表單的服務。 $sql="SELECT * from w04_animal;"; mysqli_query($link,$sql); 每次要執行上傳遠端的SQL語法時,每

[上課筆記] PHP與SQL 第二彈

前置作業(作業):建立三個table 1. 客戶資料 - 欄位:客戶帳號、密碼、姓名 CREATE   TABLE   w03_customer   ( c_id   int ( 10 ) AUTO_INCREMENT ,   c_account   text ,   c_password   text ,   c_name   text ,   PRIMARY   KEY ( c_id ) ) # crate table 客戶資料表 (索引欄 整數(長度10), 客戶帳號 文字串, 密碼 文字串, 姓名 文字串, primary key(索引值)); 2. 訂單資料 - 欄位:產品編號、購買數量、客戶編號、訂購時間 CREATE   TABLE   w03_order   ( o_id   int ( 10 ) AUTO_INCREMENT ,   o_product_sn   text ,   o_buy_num   int ( 10 ) ,   o_customer_sn   text ,   c_order_time   DATETIME ,   PRIMARY   KEY ( o_id ) ) # crate table 訂單資料表 (索引攔 整數(長度10), 產品編號 文字串, 購買數量 整數(長度10), 客戶編號 文字串, 訂單時間 日時, primary key(索引值)); 3. 產品資料 - 欄位:產品名稱、產品金額、產品介紹 CREATE   TABLE   w03_product   ( p_id   int ( 10 ) AUTO_INCREMENT ,   p_product_name   text ,   p_product_price   decimal ( 10.2 ) ,   p_product_desc   text ,   PRIMARY   KEY ( p_id ) ) # crate table 訂單資料表 (索引攔 整數(長度10), 產品名 文字串, 產品價格 浮點數(長度10,小數點2), 產品介紹 文字串, primary key(索引值)); 4. 新增TABLE 1 與 TABLE 3 的內容資料,請都使用語法建立 (新增4筆資料 for table 1 & 新增5筆資料