線上書籍

Home

[1012]PHP進階開發及TadTools工具應用

一、 講義直送您的電腦
  1. 講義：http://www.tad0616.net/modules/tad_book3/index.php?tbsn=26
  2. 請申請Dropbox（雲端磁碟機https://www.dropbox.com），一旦發布講義，您的電腦會馬上收到。（有帳號的可不用再申請）
  3. 您也可以直接連上Dropbox網站，只要有網路，都可直接下載教材。
二、 關於本課程
  1. 本課程是系列中的第五個學程，屬最高階部份，因此，有任何聽不懂的：拜託您問！
  2. 上課歡迎隨時起來走動，互相觀摩交流，盡量別保持安靜。飲食部份請至走廊食用。
  3. 上課時間為7:00～7:15，由於教室電腦是全部還原，故軟體需要每次都安裝一次，留15分鐘時間給各位裝軟體及發問。休息時間為8:10~8:30，課程於9:50結束。
  4. 上課要拍照、錄音、錄影都隨便您～～能和同學分享更好。
  5. 座位沒有強制性，但也不建議每次都換來換去，盡量於第三次上課後即固定座位。
三、 申請學生練習主機空間（http://163.26.52.243）
  1. 學生練習主機為Linux主機，僅社大學員可以申請（FTP及MySQL帳號）。
  2. 若已經有了可不需再申請，當然要再申請一個新的也無妨。
  3. 使用期限為本學期，學期結束後，可能隨時會清除舊資料，故請自行備份。
  4. 申請後，您的網站網址為：「http://163.26.52.243/~帳號」
  5. 資料庫和FTP帳號、密碼是一樣的！
四、 務必學會FileZilla檔案傳輸軟體
  1. FTP用來把檔案傳到主機，FTP port為22（ssh加密通道）。
  2. 建議善用站台管理員，把常用的連線加入（此外，建議把樹狀目錄關閉）。

五、 開發工具：PSPad
  1. 可直接從163.26.52.243下載可攜版，裡面已經幫各位做好設定。
  2. 解壓縮後，直接執行pspad.exe即可。
  3. 請開啟「檢視→行號」。
六、 套用jquery
  1. 方法有二，一般法（離線意可用，但得自行更新版本）：
    • (1)  先到 http://jquery.com/ 下載最新版檔案，如：jquery-1.8.1.min.js
    • (2)  然後再網頁或程式中引入該檔案即可：
      • <script type="text/javascript" src="jquery-1.8.1.min.js"></script>
  2. 直接連線法（需連線才能用，方便，可隨意切換版本）：
    • (1) 直接遠端引用
      • <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    • (2)  或是用Google的Loader：
      • <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.8.1"); google.load("jqueryui", "1.7.2"); </script>
七、 jquery基本用法
  1. 基本概念：什麼元件在什麼時候要做什麼事。
    2. <script type="text/javascript"> $(document).ready(function(){ //jquery語法 }); </script>
  2. $() 就是用來指定元件的挑選器（什麼元件）， $(document) 或$()代表此網頁。
    • (1)  指定標籤：$("button")    →抓到的是→ <button>
    • (2)  指定id：$("#aa")→抓到的是→ id="aa"
    • (3)  指定class：$(".bb")→抓到的是→ class="bb"
  3. ready()是事件，事件中通常會執行某函數，因為函數大多只用一次，所以，通常直接在()中寫 function(){} 即可，不另外命名，稱之為匿名函數（或lambda函數）
  4. 完整事件或功能建議參考：http://www.css88.com/jqapi-1.7/
八、 jquery事件（event）用法
  1. 基本概念：什麼元件在什麼時候要做什麼事，底下以一些常用的事件為例。
    • (1)  click()：點按時
    • (2)  change()：值改變時
九、 jquery效果（Effects）
  1. 隱藏：$("#tbl").hide(); 顯示：$("#tbl").show();
  2. 滑下：$("#tbl").slideDown("slow"); 滑上：$("#tbl").slideUp("slow");
  3. 隱出：$("#tel").fadeOut("slow"); 隱入：$("#tel").fadeIn("slow");
  4. 加上CSS：$("#tbl").css("border","1px solid black");
  5. 套用class：$("body").addClass("girl");
  6. 移除class：$("body").removeClass();
  7. 加到裡面：$(".box").append("<b>嗨！</b>");
  8. 取值：$("input[name=my_name]").val();
十、 TadTools中呼叫jquery
  1. $jquery=get_jquery($ui=false,$mode="local",$theme='base');
  2. $ui：是否引入jquery ui
  3. $mode：引入方式，其值有：none（不引入jquery）、google（使用Google的jquery）、local（引入TadTools中的jquery）
  4. $theme：ui使用的佈景，有base和ui-lightness兩種。