瀏覽作者：

俊良

常用連結

一般工具

7z解壓縮 https://www.developershome.com/7-zip

Allow Copy 網頁右鍵破解(chrome擴充元件)
https://chrome.google.com/webstore/detail/simple-allow-copy/aefehdhdciieocakfobpaaolhipkcpgc

Caesium相片瘦身
https://www.azofreeware.com/2011/07/caesium-131.html?m=1

AnyDesk遠端桌面控制
https://anydesk.com/zhs

影音播放器PotPlayer
https://www.azofreeware.com/2008/12/potplayer-1317106.html?m=1

PDF解鎖
www.sodapdf.com/unlock-pdf

網頁工程

FileZilla FTP檔案傳輸空間https://filezilla-project.org

Broken Link Checker
https://www.homeoffice999.com/22909299922403720855–2085420182

QRcode Generator
http://qr.calm9.com/tw

MD5 encode
http://www.md5.cz

Base64 Encode
https://www.google.com/amp/s/amp.base64encode.org

Base64 Decode
https://www.google.com/amp/s/amp.base64decode.org

Json Viewer
online
http://jsonviewer.stack.hu
chrome擴充元件
https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=zh-TW

Free SSL
https://www.sslforfree.com

Free Icon
https://openclipart.org

Notepad++
https://notepad-plus-plus.org/download/

PTT短網址
https://ppt.cc

色碼表
https://www.ifreesite.com/color

Web to App
https://www.appsgeyser.com

電腦硬體

重灌USB製作 https://m.xuite.net/blog/yh96301/blog/333939408

CPU-Z CPU規格
https://www.azofreeware.com/2006/10/cpu-z-137.html?m=1

GPU-Z 顯卡規格
https://www.azofreeware.com/2007/11/gpu-z-010.html?m=1

硬碟規格
https://www.azofreeware.com/2010/04/speccy-100125-beta.html?m=1

Defraggler磁碟重組
https://www.azofreeware.com/2009/07/defraggler-112152.html?m=1

網頁設計10-伺服器(3hr)

一、資訊安全(防火牆、弱點檢測、常見攻擊/漏洞)(25min)

  1. 概念：http://avp.toko.edu.tw/docs/class/1/%E8%B3%87%E8%A8%8A%E5%AE%89%E5%85%A8%E6%A6%82%E8%AB%96.pdf
  2. 防火牆設定：https://ithelp.ithome.com.tw/articles/10190378
  3. 弱點檢測：https://ithelp.ithome.com.tw/articles/10185727、http://www.cc.ntu.edu.tw/chinese/epaper/0035/20151220_3506.html
  4. 常見攻擊/漏洞：https://web.mit.edu/rhel-doc/4/RH-DOCS/rhel-sg-zh_tw-4/ch-exploits.html、https://www.puritys.me/docs-blog/article-226-六種常見的駭客攻擊方式.html、https://www.puritys.me/docs-blog/article-212-網站路徑駭客攻擊.html、https://mgleon08.github.io/blog/2018/06/20/security/

二、Windows Server+Linux(VM)(20min+?min安裝)

  1. 下載：VM、WinServer下載、Debian下載
  2. 安裝：
    1. VM：http://blog.ilc.edu.tw/blog/index.php?op=printView&articleId=438189&blogId=4950
    2. VM工具：https://www.isumsoft.com/computer/2-ways-enable-copy-paste-work-in-vmware.html
    3. Debian：https://www.youtube.com/watch?v=_jyBdGShd7k
  3. 連線：Putty下載、FileZilla下載
  4. (如果沒有)安裝SSH Server：https://neio.pixnet.net/blog/post/15546122、產生連線金鑰：https://blog.xuite.net/happyman/tips/16183478-putty+%E7%9A%84+key+authentication
  5. 安裝LAMP：https://www.tecmint.com/install-lamp-on-debian-10-server/、https://www.opencli.com/linux/debian-ubuntu-setup-apache-mysql-php

三、申請Domain/DDNS(15min+15min練習)

  1. Domain簡介：http://dns-learning.twnic.net.tw/internet/intro8.html、https://www.awoo.com.tw/blog/subdomain-or-subdirectory/
  2. 申請動態域名(DDNS)：No-ip https://www.noip.com/

四、路由器轉埠(15min+30min練習)

  1. 概念：https://ningselect.com/30752/58/
  2. 設定：https://www.asus.com/tw/support/FAQ/114093/、https://blog.3bro.info/archives/router-port-forwarding/

五、申請與設定HTTPS(15min+15min練習)

  1. 依網域分類：https://publicca.hinet.net/SSL-03.htm
  2. 申請免費SSL：https://www.sslforfree.com/

六、Apache多網域設定(15min)

  1. 設定：https://kingweblife.blogspot.com/2016/07/xamppvirtualhostwordpress-opencart.html

七、伺服器壓力測試(15min)

  1. ApacheBench：https://blog.miniasp.com/post/2008/06/30/Using-ApacheBench-ab-to-to-Web-stress-test
  2. https://blog.hellosanta.com.tw/網站設計/伺服器/你的伺服器抗壓性強嗎？幾款好用壓力測試軟體一次看完

八、作業：所有步驟皆須截圖，並加上至少1句說明(給未來的你自己看的)。

  1. 使用No-IP申請2組DDNS，名稱不限，1組提供作業8網頁，另一組提供作業9API，例：hw8web.ddns.net、hw9api.ddns.net。
  2. 使用MA121後方俊良提供之N台WIFI，設定路由器轉埠，將請求轉向自身筆電。
  3. 於筆電Apache設定多網域，使作業8、作業9皆能正確呈現。
  4. 申請並設定多網域SSL憑證，使2個網站皆能以HTTPS瀏覽。
  5. 提供ApacheBench壓力測試結果。

九、參考書籍

  1. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=573125&T=0&S=ASC&ty=ie&snc=1A0A3639182522F86AF454C186E76BCD
  2. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=635853&T=0&S=ASC&ty=ie&snc=0778DC420852FD241729281D3A3B1E3A
  3. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=243950&T=0&S=ASC&ty=ns&snc=2B183B3E0555FD241729281D3A3B1E3A

十、課程影片(片長：01:20:49)

網頁設計09-Laravel-API與其他應用(2hr)

一、JWT身分驗證(15min+15min練習)：

  1. JWT簡介：https://yami.io/jwt/
  2. Bearer-Token簡介：https://blog.yorkxin.org/2013/09/30/oauth2-6-bearer-token.html
  3. Postman軟體：https://www.getpostman.com/downloads/
  4. 使用JWT：https://hackmd.io/@8irD0FCGSQqckvMnLpAmzw/SkqRnxqIM

二、Laravel API(15min+45min練習)：

  1. 與Web差異：不需要View，複製並微調Controller、建立API版的Router、加上JWT身分驗證。
  2. 建立API：https://hackmd.io/@8irD0FCGSQqckvMnLpAmzw/Hk8QeMNLz

三、作業：將課堂練習完成。

四、課程影片(片長：00:28:19)

五、其他應用(參考)

  1. 網頁編輯器：
    1. CKEditor
      1. demo：https://ckeditor.com/ckeditor-5/demo/
      2. 使用：https://ckeditor.com/docs/ckeditor5/latest/builds/guides/quick-start.html
    2. TinyMCE
      1. demo：https://www.tiny.cloud/get-tiny/
      2. 使用：http://yhhuang1966.blogspot.com/2016/01/tinymce.html
  2.  自動寄送Mail：
    1. queue列隊：https://laravel.tw/docs/5.2/queues#introduction
    2. 設定：https://github.com/laravel/laravel/blob/master/config/mail.php
    3. 使用mail功能：https://medium.com/aydenlin/laravel-mailables-gmail-56a733ae0652
  3. JS統計圖表：
    1. 使用：https://www.chartjs.org/samples/latest/、https://www.ucamc.com/e-learning/javascript/270-簡單使用chart-js網頁上畫圖表範例集-javascript-圖表、jquery圖表繪製
  4. Line機器人：
    1. 使用：https://blog.reh.tw/archives/988
  5. 網頁拖曳：
    1. 拖曳效果：https://pjchender.blogspot.com/2017/08/html5-drag-and-drop-api.html
    2. 拖曳檔案上傳：https://fineuploader.com/demos.html#gallery-view、https://ithelp.ithome.com.tw/articles/10196002?sc=iThelpR
  6. Google Map API應用：
    1. 使用：https://medium.com/front-end-augustus-study-notes/google-map-api-1-a4e794b0162f、https://ithelp.ithome.com.tw/users/20103130/ironman/1310
  7. 影音串流：
    1. 網頁錄影：https://pjchender.blogspot.com/2018/02/js-javascript-mediarecorder-api.html
    2. 影片串流播放：http://www.cc.ntu.edu.tw/chinese/epaper/0033/20150620_3308.html
    3. 網頁直播：https://muki.tw/tech/websocket-simple-introduce-and-use/、https://kknews.cc/zh-tw/tech/anvlzgn.html
  8. 條碼：
    1. Bar code：https://zh.wikipedia.org/wiki/條碼
    2. QR code：https://zh.wikipedia.org/wiki/QR碼
    3. 產生：https://github.com/milon/barcode
    4. 掃描：https://github.com/andrastoth/webcodecamjs

網頁設計08-Laravel-web(6.5hr)

一、基本設定與目錄結構(15min)

  1. Laravel簡介：php的框架，程式簡約，有可讀性，適合團隊開發，完整的工具使其易維護。(https://laravel.tw/)
  2. 建立檔案，檔名openCMD.bat，內容為
    %~d1
    cd “%~p1”
    call cmd
  3. 建立專案：https://laravel.tw/docs/5.3
  4. 目錄結構說明：https://laravel.tw/docs/5.3/structure
  5. 環境設定：https://docs.laravel-dojo.com/laravel/5.5/configuration、https://www.kancloud.cn/kancloud/laravel-5-learning-notes/50153

二、Migrations(20min+25min練習)

  1. 需先確認.env檔中的資料庫連線是否已設定好。
  2. 依照資料庫正規化結果，撰寫資料庫遷移。
  3. 建立資料庫遷移：https://laravel.tw/docs/5.3/migrations#generating-migrations

三、Model(20min+25min練習)

  1. 依照資料庫正規化結果，確認各模型之間的關係(1:1、1:N、M:N)。
  2. 建立模型：https://laravel.tw/docs/5.3/eloquent#defining-models
  3. 設定軟刪除(邏輯上刪除掉，實際上還是存在資料庫)：https://laravel.tw/docs/5.3/eloquent#deleting-models
  4. 建立模型關聯：https://laravel.tw/docs/5.3/eloquent-relationships#defining-relationships

四、Seeding(20min+25min練習)

  1. 建立種子(測試)資料：https://laravel.tw/docs/5.3/seeding#writing-seeders

五、資料庫與Eloquent ORM(20min+25min練習)

  1. 模型的CURD操作：https://laravel.tw/docs/5.3/eloquent#retrieving-models
  2. 模型關聯操作：https://laravel.tw/docs/5.3/eloquent-relationships#querying-relations
  3. 資料庫操作：https://laravel.tw/docs/5.3/queries#retrieving-results
  4. 資料庫原生SQL操作(個人建議若情況太複雜才使用)：https://laravel.tw/docs/5.3/database#running-queries

六、Controllers+Session+validator(40min+20min練習)

  1.  建立控制器：https://laravel.tw/docs/5.3/controllers#resource-controllers
  2. 使用Session儲存訊息(登入狀態/錯誤訊息)：https://laravel.tw/docs/5.3/session#using-the-session、https://www.itsolutionstuff.com/post/laravel-5-implement-flash-messages-with-exampleexample.html
  3. 使用validator驗證資料：https://laravel.tw/docs/5.3/validation#manually-creating-validators
  4. 檔案上傳：https://laravel.tw/docs/5.3/requests#files

七、Routing(15min+15min練習)

  1. 建立路由：https://laravel.tw/docs/5.3/routing#basic-routing
  2. 預設路由與控制器：https://laravel.tw/docs/5.3/controllers#resource-controllers

八、Middleware(10min+15min練習)

  1. 中介層簡介：在得知路由(Routing)後，進入控制器(Controllers)前，提供一個簡便的機制來過濾資料，符合條件者才能進入對應的控制器。
  2. 建立中介層：https://laravel.tw/docs/5.2/middleware#defining-middleware、https://www.itread01.com/content/1546268770.html
  3. 設定哪些路由需經過中介層：https://laravel.tw/docs/5.3/routing#route-groups

九、CSRF(10min)

  1. CSRF簡介：https://blog.techbridge.cc/2017/02/25/csrf-introduction/
  2. 使用CSRF：https://laravel.tw/docs/5.3/csrf

十、Localization多語系(10min)

  1. 建立多語系檔案：https://docs.laravel-dojo.com/laravel/5.5/localization、https://dev.to/fadilxcoder/adding-multi-language-functionality-in-a-website-developed-in-laravel-4ech
  2. 在View中使用：https://laravel.tw/docs/5.3/localization#retrieving-language-lines

十一、Views/Blade(30min+30min練習)

  1. 建立Blade模板：https://laravel.tw/docs/5.3/blade#template-inheritance
  2. 父模板提供@yield空白處，給子模板的【單一】@section(索引,值)、【多行】@section~@endsection放
  3. 子模板用父模板時：先@extends(父模板)；@section中要用父模板，則加@parent。
  4. 父/子模板是互相對應的!
  5. 在Controller裡回傳View：https://laravel.tw/docs/5.3/blade#displaying-data
  6. Form方法欺騙：https://laravel.tw/docs/5.3/routing#form-method-spoofing、https://hackmd.io/@8irD0FCGSQqckvMnLpAmzw/BkaOzFCMM?type=view

十二、作業：將課堂練習完成。

十三、參考書籍

  1. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=663572&T=0&S=ASC&ty=ie&snc=342F121538004AD0421C3D282F301325
  2. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=663576&T=0&S=ASC&ty=ie&snc=342F121538004ED44618392C2B0C4FE9

十四、課程影片(片長：02:06:46)

網頁設計07-WebAPI與MVC概念(0.5hr)

一、RESTful(8min)

  1. RESTful簡介：https://ithelp.ithome.com.tw/articles/10191925、http://www.syscom.com.tw/ePaper_New_Content.aspx?id=500&EPID=219&TableName=sgEPArticle

二、MVC概念(8min)

  1. MVC簡介：https://ithelp.ithome.com.tw/articles/10191925、https://ithelp.ithome.com.tw/articles/10197959

三、WebAPI(14min)

  1. WebAPI簡介：https://hackmd.io/@8irD0FCGSQqckvMnLpAmzw/Hk8QeMNLz、https://www.itread01.com/content/1547078047.html
  2. WebAPI範例：綠界科技 API 介接文件 P17產生訂單、P33回傳結果(form-data)、P43回傳結果(JSON)、P48(安全性)、P63(自行檢測) https://www.ecpay.com.tw/Content/files/ecpay_011.pdf

四、參考書籍

  1. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=675963&T=0&S=ASC&ty=ns&snc=BAB59B80CB6DD841320C4D381F004315

五、課程影片(片長：00:14:57)

網頁設計06-【實作】傳統php(2.5hr)

一、RWD(20min)

  1. RWD簡介：適應性網頁、響應式網頁設計，舊式網站設計大多將手機版與電腦版網站分開設計，RWD則以百分比的方式及彈性的畫面設計，在不同解析度下自動改變網頁頁面的佈局排版，讓不同的設備都可以正常瀏覽同一網站，提供最佳的視覺體驗。(https://www.ibest.tw/page01.php)
  2. RWD模板網頁：https://html5up.net/、https://templated.co/、https://colorlib.com/wp/themes/ (For WordPress)

二、示範教學：登入、單一表冊CURD、多表冊CURD、Ajax(50min+1hr20min練習)

三、作業：將課堂練習完成。

四、參考書籍

  1. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=617517&T=0&S=ASC&ty=ns&snc=75EE57DE66F848DE50EE52C780E161F7
  2. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=610528&T=0&S=ASC&ty=ns&snc=75EE57D77FDE6FB7A8B69B8EC9AAA98F

五、課程影片(片長：01:29:57)

網頁設計05-JavaScript(1.5hr)

一、JavaScript(10min)

  1. JavaScript簡介：JS，被大多數網站所使用，主流瀏覽器也普遍支援。
  2. 基本語法：https://www.w3schools.com/js/js_statements.asp

二、jQuery(25min+25min練習)

  1. jQuery簡介：JavaScript的函數庫，方便於元素選取、操作、CSS 操作、事件監聽、特效/動畫等。
  2. 基本語法：https://www.w3schools.com/jquery/jquery_get_started.asp
  3. JSON格式介紹：https://j796160836.pixnet.net/blog/post/30530326-%E7%9E%AD%E8%A7%A3json%E6%A0%BC%E5%BC%8F
  4. DataTable套件：一種jQuery外掛套件，針對table的呈現方式提供具有彈性的客製化選項，可輕鬆實作出功能豐富的table介面。
  5. DataTable使用方式：https://datatables.net/examples/basic_init/zero_configuration.html

三、Ajax(10min+20min練習)

  1. Ajax簡介：非同步 JavaScript 及 XML，Web 應用程式便能快速、即時更動介面及內容，不需要重新讀取整個網頁，讓程式更快回應使用者的操作。(https://ithelp.ithome.com.tw/articles/10200409)
  2. 基本語法：https://awpluway.pixnet.net/blog/post/364195038、https://expect7.pixnet.net/blog/post/37919326

四、測驗

五、作業

1.【截圖】寫出程式碼：
請使用JQuery，將雲科大單一入口登入頁修改(https://webapp.yuntech.edu.tw/YunTechSSO/Account/Login)：

  1. 將「請輸入學號或教職員工編號」變成黃底。
  2. 在「密碼輸入框」隨意輸入亂碼後，在元素失焦時，顯示密碼。
  3. 將「保持登入按鈕」隱藏。
  4. 將「登入」按鈕事件更改為「按下後跳頁至Google首頁」。
  5. 結果顯示：

2.請使用JQuery，將雲科大工管系首頁修改(https://www.iem.yuntech.edu.tw/)，將上方工管系Logo處變成工管系教室簡介照片(MA113、MA122)4張照片，以每5秒輪播。

結果顯示：

3.請利用JQuery取得yahoo首頁(https://tw.yahoo.com/)預設搜尋關鍵字，並用Ajax的get方法與post方法連線至下圖php檔案，使其結果顯示於對話框。

六、參考書籍

  1. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=629817&T=0&S=ASC&ty=ie&snc=F062E34DF746051D0E50F167E0420157
  2. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=682306&T=0&S=ASC&ty=ie&snc=F062ED70D16DDB42350B4E3B1C1D3C1C

七、課程影片(片長：00:46:26)

網頁設計04-動態網頁-php(2.5hr)

一、php基本函數操作(變數/陣列/判斷/迴圈/方法呼叫/內建函數/檔案處理/簡易表單)(50min+30min練習)

  1. PHP簡介：Hypertext Preprocessor，超文字預處理器，透過執行PHP程式碼來產生使用者瀏覽的網頁。
  2. 基本語法：https://zh.wikipedia.org/wiki/PHP#語法、https://www.w3schools.com/php/php_syntax.asp

二、JSON格式：

  1. 是用來表達物件的一種格式，輕量級的資料交換語言。
    1. 物件(object)用大括號 { }
    2. 陣列(array)用中括號 [ ]
    3. 儲存方式：key-value，{“標籤1″:”值1″,”標籤2″:”值2”}
  2. 詳細：https://j796160836.pixnet.net/blog/post/30530326-%E7%9E%AD%E8%A7%A3json%E6%A0%BC%E5%BC%8F

三、PDO(類別/資料庫連線/CRUD範例)(25min+30min練習)

  1. PDO簡介：https://pjchender.blogspot.com/2015/08/php-data-objects-pdo.html
  2. 資料庫連線：下載 function.php 檔、test.php 檔、test.sql 檔

四、Git版本控制(15min)

  1. Git簡介：https://backlog.com/git-tutorial/tw/intro/intro1_1.html
  2. 申請github：https://github.com/join
  3. smartgit軟體安裝：https://www.syntevo.com/smartgit/download/
  4. git操作：https://blog.csdn.net/luoyang2/article/details/50388854

五、測驗

六、作業

1.寫出結果：
$a=1;  $b=2;
$a++;
echo ($a>$b)?”T”:”F”;

2.寫出結果：
$a=1;
$b=20/9;
$c=15%3;
if($a>$b && $b-$a>2){
  echo “A”;
}else if($c>=$b){
  echo “B”;
}else{
  echo “C”;
}

3.寫出結果：
$fruit = array(“Apple”, “Orange”, “Banana”);
$Apple=1;
$Orange=2;
$Banana=3;
$i=1;

switch($fruit[$i]){
  case $i:
    echo “A”;
  break;

  case 2:
    echo “B”;
  break;

  case “3”:
    echo “C”;
  break;

  case “fruit[1]”:
    echo “D”;
  break;

  case “fruit->2”:
    echo “E”;
  break;

  case $Orange:
    echo “F”;
  break;

  default:
    echo “No”;
  break;
}

4.寫出結果：
for ($x = 1; $x <= 3; $x++) {
  for ($y = 1; $y <= 3; $y++) {
   echo $x*$y.” “;
  }
  echo “<br>”;
}

5.寫出程式碼：
請宣告一陣列$nameArray，裡面依序存有「陳小良、陳小軒、陳小瑋、陳小宇」，請使用foreach迴圈以顯示下列結果：
陳O良、陳O軒、陳O瑋、陳O宇

6.寫出程式碼：檔案上傳頁面，限制只能上傳25mb的pdf檔，如上傳錯誤則提示使用者重新選擇檔案，上傳成功後，需顯示連結給使用者下載。

7.寫出程式碼：會員登入頁面，判斷帳號/密碼是否正確，若輸入正確則跳頁至Google首頁，若輸入錯誤則提示使用者重新輸入，直到正確為止。

七、參考書籍

  1. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=635013&T=0&S=ASC&ty=ie&snc=342F151A380641D94D13362324054414
  2. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=626110&T=0&S=ASC&ty=ie&snc=ACA7AEB497A7AF76E974D5430465E473
  3. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=619194&T=0&S=ASC&ty=ie&snc=ACA7AFB89BBB978F80DE62D77FE060F8
  4. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=635014&T=0&S=ASC&ty=ie&snc=ACA7ADB290AE9A80F34A0F7ADD5FE275

八、課程影片(片長：01:19:20)

網頁設計03-通訊協定與靜態網頁(2.5hr)

一、HTTP/HTTPS(25min)

  1. HTTP簡介：HTTP協議是Hyper Text Transfer Protocol(超文本傳輸協議)的縮寫，是用於從網際網路(WWW:World Wide Web)服務器傳輸超文本到本地瀏覽器的傳送協議。HTTP是一個基於TCP/IP通信協議來傳遞數據(HTML 文件，圖片文件，查詢結果等)。
  2. 說人話：我(Server)->明信片 (HTML/圖片/檔案)->依照中華郵政規範去送信(HTTP協定)->郵差(TCP協定)->門牌(IP協定)->信箱(本地瀏覽器)->你(Client) (http://www.w3big.com/zh-TW/http/http-methods.html)
  3. HTTP請求方法(get/post)： https://medium.com/@totoroLiu/http-post-%E5%92%8C-get-%E5%B7%AE%E7%95%B0-928829d29914
  4. HTTPS簡介：在HTTP上加入SSL/TLS，讓資料以加密方式傳送。https://www.youtube.com/watch?v=o0dO5iXbCCs、https://blog.dexiang.me/tech/about-hyper-text-transfer-protocol/#Why-HTTPS、https://kknews.cc/tech/x5ljxqr.html
  5. 說人話：我(Server)->掛號信 (HTML/圖片/檔案)->依照中華郵政規範去送信(HTTP協定)->加上信封(TLS協定)->郵差(TCP協定)->門牌(IP協定)->信箱(本地瀏覽器)->拆信(解密)->你(Client)
  6. Wireshark軟體：
    1. 封包分析軟體，下載：https://www.azofreeware.com/2008/06/wireshark-100.html
    2. http網頁：http://pos.agric.tw/index.php
    3. https網頁：https://pos.agric.tw/index.php

二、 TCP/IP(15min)

  1. OSI模型簡介：https://zh.wikipedia.org/wiki/OSI%E6%A8%A1%E5%9E%8B
  2. TCP簡介：屬於傳輸層協定，兩端主機可透過彼此的溝通，確保資料在傳輸中的正確性(檢查封包)，以及傳輸速率的控制等，是屬於可靠的、全雙工的連線模式。( http://dns2.asia.edu.tw/~wzyang/slides/info_net/info_B/CH10TCP.pdf 、 https://zh.wikipedia.org/wiki/傳輸控制協定 )
  3. 封包交換：https://www.youtube.com/watch?v=z4WodkgeV3I
  4. IP簡介：找尋位址，每個 IP位址是唯一的，現有IPv4、IPv6兩種版本 ( https://zh.wikipedia.org/wiki/%E7%BD%91%E9%99%85%E5%8D%8F%E8%AE%AE )、https://www.youtube.com/watch?v=WhxVFo_-1EY
  5. 本地IP：它是保留給本機回路測試使用的﹐它不可以被運用於實際的網路中，其中的 127.0.0.1 則代表任何一台 IP 主機本身。(http://www.pcnet.idv.tw/pcnet/network/network_ip_addr.htm)

三、Domain與DNS(10min)

  1. Domain網域名稱與URL結構：https://www.design-hu.com/web-news/domain.html
  2. DNS簡介：網域名稱系統，將好理解的網域名稱(www.google.com)轉換為機器可讀取的 IP位址(172.217.160.100)。https://aws.amazon.com/tw/route53/what-is-dns/、http://dns-learning.twnic.net.tw/internet/intro8.html
  3. 申請靜態域名(Domain)： PChome 買網址 http://myname.pchome.com.tw/、gandi https://id.gandi.net/zh-hant/login

四、網際網路(15min)

  1. 網路發展概況：https://www.youtube.com/watch?v=wuiQeQCfT4g、https://report.twnic.tw/2019/TrendAnalysis_infrastructure.html、https://kknews.cc/news/jno9pl.html
  2. 網路型態：
    1. WAN：https://zh.wikipedia.org/wiki/廣域網路
    2. LAN：https://zh.wikipedia.org/wiki/區域網路
    3. WiFi：https://zh.wikipedia.org/wiki/Wi-Fi
  3. 常見網路設備與線材：
    1. Router路由器：https://zh.wikipedia.org/wiki/路由器
    2. Switch交換器：https://zh.wikipedia.org/wiki/網路交換器
    3. Hub集線器(已被交換器取代)：https://zh.wikipedia.org/wiki/集線器
    4. Firewall防火牆：https://zh.wikipedia.org/wiki/防火牆
    5. Modern數據機：https://zh.wikipedia.org/wiki/數據機
    6. RJ45網路線：https://zh.wikipedia.org/wiki/8P8C
    7. 光纖：https://www.youtube.com/watch?v=PZBUfDGEwEM
    8. 機房建置規劃：http://www.dataknit.com.tw/gallery/施耐德apc資料中心規劃簡介.pdf、http://noc.twaren.net/noc_2008/Download/download_file.php?id=21060103、https://www.ccliang.me/wp-content/uploads/2019/12/網路設備場佈.jpg
  4. 常見連接埠：
    1. 20：FTP data，FTP傳送資料。
    2. 21：FTP control，FTP控制資料。
    3. 22：SSH，可用於遠端登入Linux系統。
    4. 25：SMTP，郵件寄送。
    5. 80：HTTP，未加密網頁。
    6. 110：POP3，收信(存local)。
    7. 143：IMAP，收信(存server)。
    8. 443：HTTPS，加密網頁。
    9. 989：FTPS data，安全FTP的資料傳輸埠。
    10. 990：FTPS control，安全FTP的控制埠。
    11. 3306：MYSQL，MySQL連線。
    12. 8080：HTTP ALT、Tomcat，替代網頁(80port)，tomcat網頁服務。
    13. 詳細：https://zh.wikipedia.org/wiki/TCP/UDP端口列表

五、HTML與CSS(50min+25min練習)

  1. 網頁前端與後端：https://tw.alphacamp.co/blog/2018-07-20-18464、https://www.hexschool.com/qa/how-to.html
  2. HTML簡介：用於建立網頁的標準標記語言，網頁瀏覽器可以讀取HTML檔案，並將其彩現成視覺化網頁。HTML允許嵌入圖像與物件，且可以用於建立互動式表單等。( https://zh.wikipedia.org/wiki/HTML )
  3. CSS簡介：用來為結構化文件(如HTML文件添加樣式(ex:字型、間距和顏色等)的語言，網頁瀏覽器會參照CSS的定義來顯示網頁文字和其它元素的外觀與布局。( https://zh.wikipedia.org/wiki/CSS )
  4. HTML練習：https://www.w3schools.com/html/html_basic.asp
  5. HTML測驗：https://www.w3schools.com/html/html_quiz.asp
  6. CSS練習： https://www.w3schools.com/css/css_syntax.asp
  7. CSS測驗：https://www.w3schools.com/css/css_quiz.asp

六、SEO(10min)

  1. SEO簡介：搜尋引擎最佳化，透過自然排序（無付費）的方式增加網頁能見度的行銷規律。
  2. SEO技巧：https://transbiz.com.tw/seo-guide/ 、 https://marketing.blueeyes.tw/seo-report-introduction.php

七、作業

  1. 要求：
    1. 無需撰寫「功能」，只要版面與格式一樣即可
    2. 頁面上的文字照寫
    3. 若有背景圖片，請用小畫家建立色塊取代原圖
  2. 題目：

八、參考書籍

  1. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=677022&T=0&S=ASC&ty=ie&snc=1609373E1C212BF367F95FCA8DEE52E6
  2. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=651544&T=0&S=ASC&ty=ie&snc=0778DA5CE377D34A3D03463314153404
  3. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=651545&T=0&S=ASC&ty=ie&snc=0778DA5CE377D44D3E00413413143701
  4. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=569607&T=0&S=ASC&ty=ie&snc=C6BE83EC51EE5EC4B789C8BD9A9BBE9A
  5. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=592694&T=0&S=ASC&ty=ie&snc=3E36181A223410160957FA6EE94B0E2A
  6. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=615599&T=0&S=ASC&ty=ie&snc=3E31151A3D192AF062FC5CC98EEF53E5
  7. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=653203&T=0&S=ASC&ty=ie&snc=3E311114340B46DC4E10312423044711

九、課程影片(片長：01:33:27)

網頁設計02-資料庫(2hr)

一、資料庫概念/正規化(30min)

  1. 資料庫簡介：http://www.tsnien.idv.tw/DataBase_WebBook/%E7%AC%AC%E4%BA%8C%E7%AB%A0%20%E8%B3%87%E6%96%99%E5%BA%AB%E7%B3%BB%E7%B5%B1%E7%B0%A1%E4%BB%8B.html、https://zh.wikipedia.org/wiki/資料庫、https://www.youtube.com/watch?v=CDvWYwGdNA4
  2. 資料庫正規化：消除重複性資料以維持資料的一致性。
  3. 正規化步驟：http://cc.cust.edu.tw/~ccchen/doc/db_04.pdf
  4. 關聯： https://notes.andywu.tw/2018/%E8%B3%87%E6%96%99%E5%BA%AB-%E9%97%9C%E8%81%AF%E4%BB%8B%E7%B4%B9-%E4%B8%80%E5%B0%8D%E4%B8%80%E3%80%81%E4%B8%80%E5%B0%8D%E5%A4%9A%E3%80%81%E5%A4%9A%E5%B0%8D%E5%A4%9A/
  5. 資料庫關聯練習(若為M:N要簡化為1:N)：
    1. 學生 vs 學生通訊資料
    2. 學生 vs 授課教師
    3. 文章 vs 作者
    4. 文章 vs 文章分類
    5. 文章 vs 留言板 vs 訪客
    6. 商品 vs 商品照
    7. 商品 vs 訂單 vs 顧客
  6. 資料庫關聯解答：
    1. 學生1 : 1 學生通訊資料
    2. 學生 M:N 授課教師 =>學生 1:N 選課清單 N:1 授課教師
    3. 文章 M:N 作者 => 文章 1:N 文章列表 N:1 作者
    4. 文章 M:N 文章分類 =>文章 1:N 文章分類列表 N:1 文章分類
    5. 文章 1:N 留言板 N:1 訪客
    6. 商品 1:N 商品照
    7. 商品 1:N 訂單 N:1 顧客

二 、資料庫操作(資料表結構、關聯、測試資料)(30min+20min練習)

  1. 資料庫結構：資料庫->資料表->欄位，用Excel比喻：Excel檔->工作表(Sheets)->儲存格(Cells)
  2. 資料表建立： https://www.itread01.com/content/1546358167.html
  3. 資料庫關聯設定： http://n.sfs.tw/content/index/10850
  4. 手動新增測試資料： https://ithelp.ithome.com.tw/questions/10186472

三 、SQL語法(CURD)(15min+25min練習)

  1. SQL的語法分類： https://zh.wikipedia.org/wiki/SQL#%E8%AF%AD%E8%A8%80%E7%89%B9%E7%82%B9
  2. SQL的資料操縱語言 DML ： https://zh.wikipedia.org/wiki/%E8%B3%87%E6%96%99%E6%93%8D%E7%B8%B1%E8%AA%9E%E8%A8%80
  3. 多表格 ( JOIN 與 UNION )查詢：https://www.kancloud.cn/thinkphp/mysql-tutorial/36426
  4. 建立視圖(View)：https://www.fooish.com/sql/view.html、https://www.404techsupport.com/2012/04/12/creating-and-editing-views-in-phpmyadmin/

四、作業( 截圖 ：SQL語法+結果)

  1. SQL檔：下載
  2. 【截圖】匯入資料。
  3. 【截圖】查詢：姓名包含「3」或「4」的職員名單。
  4. 【截圖】查詢：顯示帳號編號最大的主管(1位)。
  5. 【截圖】查詢：顯示職員各群組總人數(員工總人數、主管總人數)。
  6. 【截圖】查詢：顯示在11月下旬(11/15~11/30)的國內出差報告(需有姓名)。
  7. 【截圖】新增：員工5在2019/12/16至越南出差。
  8. 【截圖】修改：員工1的2019/11/19出差修正為11/17。
  9. 【截圖】刪除：員工3的11/24新加坡會議取消。
  10. 【截圖】清空所有測試資料。
  11. 【截圖】還原範例資料庫。

五、測驗

六、補充資料

  1. Excel連線：(VS要裝office工具) https://dev.mysql.com/downloads/connector/net/、https://www.mysql.tw/2018/06/excelmysql.html
  2. https://www.w3schools.com/sql/
  3. https://www.1keydata.com/tw/sql/sql.html

七、參考書籍

  1. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=575868&T=0&S=ASC&ty=ie&snc=72E26DF259E061B9AAB49580C7A8AB8D
  2. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=576838&T=0&S=ASC&ty=ie&snc=72E26DF35EFE4FD74B15342126074AEE
  3. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=617307&T=0&S=ASC&ty=ie&snc=72ED68CF71CE7EA497A9A89DBABB9EBA

八、課程影片(片長：01:13:08)

  • 1
  • 2