1. PHP開發環境與表單

一、關於本課程

講義：http://www.tad0616.net/modules/tad_book3/index.php?tbsn=34
請申請Dropbox，一旦發布講義，您的電腦會馬上收到。（有帳號的可不用再申請）
本課程是系列中的第三個學程，屬較進階部份，因此，有任何聽不懂的：隨時發問！
上課歡迎卯起來走動，互相觀摩交流，盡量別保持安靜。飲食部份請至走廊食用。
上課時間為週六9:00～12:00及13:30～16:30，共計九次。
上課歡迎拍照、錄音、錄影，能和同學分享更好。
座位基本上沒有強制性，但也不建議每次都換來換去。
社大電腦C磁碟會還原，可在D磁碟安裝常用的可攜式軟體
記得認識一下助教！郭俊良及李佳玲。

二、這學期會學到...

PHP：這是為了下一學期要寫XOOPS模組所必備的基本能力。
MySQL：也就是SQL資料庫語言，我們的資料都要放進資料庫中。
HTML5：也就是做網頁，用來撰寫系統外觀架構、表單...等。
CSS3：用來美化系統外觀（HTML5和CSS3是上學期的課，本學期不再詳述）
BootStrap：快速導入自適應框架，讓您的系統在手機跑看起來也一樣美觀。
TinyButStrong：小強樣板引擎，讓版面製作變得更一致、更簡單。

三、開發工具

只要是自己熟悉的純文字編輯工具都可以。
首推sublime text，其次為NotePad++，基本上沒有限制，您用得習慣即可。

四、開發環境

需有網頁伺服器（如：Apache），因為PHP必須依附在網頁伺服器中。
需有資料庫（如：MySQL或MariaDB）
在家中沒有伺服器或者沒有網路的環境，可裝Uniform Server （http://www.uniformserver.com）或XAMPP （https://www.apachefriends.org），請勿用AppSer這個殘缺的東西！
申請學生練習主機空間（http://163.26.52.243）
- (1) 學生練習主機為Linux主機，僅社大學員可以申請（FTP及MySQL帳號）。
- (2) 使用期限為本學期，學期結束後，可能隨時會清除舊資料，故請自行備份。
- (3) 申請後，您的網站網址為：「http://163.26.52.243/~帳號」
- (4) 資料庫和FTP帳號、密碼是一樣的！

五、 Uniform Server設定

可安裝在隨身碟，開發環境帶著跑。
執行UniController.exe可開啟控制台，依序點選Start MySQL及Start Apache啟動伺服器。
選擇「General→Mail utility msmtp」來進行寄信設定。
開啟後，右邊下拉選單可先選擇「Gmail」，然後點選「Edit configuration File」來編輯設定檔。
找到Gmail的設定部份，輸入您的Gmail帳號及密碼（請將中文字的部份以實際資料替換掉）
儲存後，可透過其界面來寄發測試信。

六、幾個您要知道的位置（假設裝在D:）

網頁目錄的位置：D:\UniServerZ\www
資料庫的存放位置：D:\UniServerZ\core\mysql\data
PHP 設定檔 php.ini 的位置：D:\UniServerZ\core\php54\php_production.ini
MySQL設定檔 my.ini 的位置：D:\UniServerZ\core\mysql\my.ini
網站連結位置：http://電腦IP或http://localhost或http://127.0.0.1
phpMyAdmin 的連結位置：http://localhost/us_phpmyadmin

七、第一個PHP測試檔（info.php）

<?php
phpinfo();
?>

儲存至：D:\UniServerZ\www\info.php
測試：http://localhost/info.php

八、修改php.ini (底線部份為建議務必修改項目)

date.timezone = Asia/Taipei ; //主機預設時區，否則系統抓到的可能會有誤差。
display_errors = On ; //是否顯示錯誤訊息？建議開啟！
upload_max_filesize = 100M ; //允許上傳的檔案的最大容量。
post_max_size = 120M ; //表單最大容量，該值必須大於 upload_max_filesize
memory_limit = 128M ; //一個程序所能夠申請到的記憶體空間
max_input_vars = 1000 ; //表單可接收的變數數量，超過此數量，就無法完全接收。
max_file_uploads = 20 ; //最多只能傳幾個檔案？請視需求設定之。
max_execution_time = 150 ; //每個程序最大允許執行時間(秒)，0 表示沒有限制。
記得Stop Apache再重啟 Start Apache，如此設定才會生效。

九、 FileZilla檔案傳輸軟體

http://www.inote.tw/filezilla-download (或 http://163.26.52.243 的下載區)

十、關於PHP（PHP：Hypertext Preprocessor）

PHP（http://php.net）最早由拉斯姆斯·勒多夫在1995年發明
PHP是一種伺服器端語言，是生存在主機中的，所以您得裝網站伺服器。
PHP是一種嵌入式的語言，所以可以和網頁寫在一起。
PHP是一種描述式語言，所以不需要事先編譯。
PHP是一種跨平台的語言，可以在Linux、windows...等環境下運作。
PHP是一種免費的語言，所以不用錢..

十一、本學期主題：特殊的簡易佈告欄

本學期來做一個特殊的簡易佈告欄（eznews）
有標題、內容區、分類、發布者、發布日期...等（可自行新增想要的欄位）
可上傳附件、可標題直接轉址。
發布者靠密碼發布，無需複雜認證或用戶管理。
可以在手機上操作。

十二、使用者輸入介面設計

基礎HTML5頁面：（或輸入html:5，然後按tab鍵）

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="utf-8">
    <title>標題</title>
  </head>
  <body>
    主內容區
  </body>
</html>

請存成post.php。.php檔裡面可以有HTML語法和PHP程式，但.html檔僅能有HTML語法，無法執行PHP程式。
表單語法：<form action="接收程式.php" method="傳送方式">表單</form>
- (1) action 屬性：用來指定使用者填好的東西，要送去給哪個程式來執行。
- (2) method 屬性：指定傳送方法，可以是 POST（建議）或 GET（預設）
- (3) 如果希望表單可以上傳，必須加入 enctype="multipart/form-data"

十三、 sublime text操作技巧

輸入div，按tab鍵，會變成<div></div>
輸入div*3，按tab鍵，會變成<div></div><div></div><div></div>
輸入div.well，按tab鍵，會變成<div class=”well”></div>
輸入div#toolbar，按tab鍵，會變成<div id=”toolbar”></div>
輸入div>a，按tab鍵，會變成<div><a href=""></a></div>
輸入div+a，按tab鍵，會變成<div></div><a href="">發布新聞</a>
輸入a{發布新聞}，按tab鍵，會變成<a href="">發布新聞</a>
輸入input[type=text name=title]，按tab鍵，會變成<input type="text" name="title">
可用 Ctrl+/ 或 Ctrl+Shift+/ 來產生註解符號
用tab鍵縮排，Shift+tab反縮排
更多進階用法：http://docs.emmet.io/abbreviations/syntax/

十四、最基礎的 input 表單元件

<input type="格式" name="名稱" size="大小" value="預設值" placeholder="佔位字元">
格式有：text（文字框）、hidden（隱藏框）、password（密碼框）、file（上傳框）、submit（送出鈕）、reset（清除鈕）
其中的 name 最重要！一定要有！因為 name 送出後，會變成 PHP 的變數名稱。
例如表單有個：<input type="text" name="tel">，表單送出後，方法若用 post，那麼會得到 $_POST['tel'] 變數；若是用 get，那就是 $_GET['tel']

十五、其他常用的表單元件 HTML 語法及屬性

用<button type=”submit”>按鈕文字</button>也可做出按鈕效果
單選框：<input type="radio" name="名稱" value="值 1">選項文字 1
- (1) 單選框通常會有好幾個選項，一組選項就要一組<input>，name 都要一樣才行！
- (2) 若要預設選取，要加上 checked="checked"
- (3) 可以用<label for="id">選項</label>，以便點選文字就可以勾選該項目。
複選框：<input type="checkbox" name="名稱[]" value="值 1">選項文字 1
- (1) 複選框通常同時會有好幾個選項，一組選項就要一組<input>
- (2) name 都要一樣才行！而且因為是複選，所以 name 要加上[]，如此會送出陣列。
- (3) 若要預設選取，要加上 checked="checked"
下拉選單：<select name="名稱" size=1>選項</select>
- (1) 選項：<option value="值">選項文字</option>
  - a. 一組選項，就是一組<option>
  - b. 若要預設選取：要在<option>中加入 selected="selected"
- (2) 若希望下拉選單可以複選，除了 name 要加上[]外，還要加上 multiple 屬性。
大量文字框：<textarea name="名稱" cols="欄寬" rows="列高">預設值</textarea>

十六、接收表單變數

PHP模式：<?php php程式; ?>
用echo 印出變數：字串請用雙引號包起來；變數若要放在字串中，請用{}隔開。
nl2br()函數可以將換行轉換成網頁的換行標籤<br>
每一個敘述句後，請用;作為結尾

十七、請善用註解

//這是PHP單行註解，自己一行，或者放在程式後面都可以
/* 這是PHP多行註解，中間可以有很多行 */

十八、 BootStrap3簡易用法

BootStrap3官網：http://getbootstrap.com/
BootStrap中文手冊：http://v3.bootcss.com/css/
布局容器：有<div class="container-fluid">和<div class="container">，放在最外層，前者寬度100%，後者約80%。
網格系統：一律為<div class="row">可想像為一個橫列，裡面可以分為12格
設定網格：<div class="col-md-n">，n的值從1~12，一個row裡面加起來總和最大為12。如<div class="col-md-9"><div class="col-md-3">就是左9格，右3格的兩欄式排列。
另，class可以多重指定，例如：<div class="col-md-9 well">同時套用well效果
套用前：
套用後：