線上書籍

Home

[1062] PHP7入門

一、 自製BootStrap4頁面
  1. 先前用的是CDN方式來製作，需在網路連線狀態才得以開發，亦可自製離線版基本頁面。
  2. 先下載最新版 bootstrap4：http://bootstrap.hexschool.com/docs/4.0/getting-started/download/。下載後，存到網頁目錄下，並解壓縮，會得到 js 及 css 兩個資料夾。
  3. 由於BootStrap4拿掉了圖示，所以，我們可以直接到 http://fontawesome.io/ 下載，解壓後，將 fonts 及 css 複製到網頁目錄下。
  4. 接著下載 jquery：https://jquery.com/download/，並存入 js 資料夾中
  5. 最後下載popper.js存入 js 資料夾中（bootstrap4 選單會用到） ：https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js
  6. 我們可以在css下新增一個my.css檔案，以便放置自己的CSS樣式設定。 <!DOCTYPE html> <html lang="zh-Hant-TW"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>頁面標題</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/my.css"> </head> <body> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
二、 隨視窗大小自動調整大小的底圖（CSS+jquery）
  1. 概念：容器中設定圖片背景，初次載入或調整視窗大小時，會自動調整容器符合螢幕大小。
  2. 新增一組.img-container容器，至my.css加入背景圖樣式設定
  3. 圖檔抓取可至：https://pixabay.com/ 下載，無須裁切
  4. CSS完整屬性手冊：http://css.doyoe.com/properties/index.htm .img-container { background: url('../images/pic.jpg') center center/cover no-repeat gray; }
  5. background-size屬性值cover是把圖放大到填滿整個容器，圖片可能無法完整顯示。contain則是會依照容器大小完整顯示圖片，會造成容器部份空間無法覆蓋到。
  6. 若用整合性寫法，背景尺寸要放在位置後面，並且記得加上/才有效果。
  7. 利用jquery可以偵測各種事件，並指定執行動作，例如畫面載入完要執行的動作可用： $(document).ready(function () { //執行動作 });
  8. 若視窗大小有調整，則事件為： $(window).resize(function () { //執行動作 });
  9. 動態套用某元素樣式值的作法為： $("挑選器").css('屬性名稱', '值');
  10. 動態偵測視窗的寬、高值的作法為： $(window).width(); $(window).height();
  11. 完整jquery用法可參考：http://www.css88.com/jqapi-1.9/
  12. 將以上這些東西整合起來（需放在引入jquery.js之後）： <script type="text/javascript"> $(document).ready(function () { $(".img-container").css('width', $(window).width()); $(".img-container").css('height', $(window).height()); }); $(window).resize(function () { $(".img-container").css('width', $(window).width()); $(".img-container").css('height', $(window).height()); }); </script>
三、 BootStrap4容器及網格概念
  1. BootStrap4的網格系統以 flexbox（CSS3）為基礎（取代 table、floats…），因此可以做到自動等寬等高的欄位 、自動平均欄位、垂直置中等以往很難做的功能。
  2. 同時也代表對 IE9（以下）不再支援，至少要用IE10才行。
  3. 凡是要用 BootStrap 的網格系統來排版，一定要使用容器樣式（.container）。
  4. 一個頁面中可以有多個容器，容器也可以巢狀使用（容器中還有容器）
  5. 容器有兩種，一種是寬度有上限的容器.container，另一種是滿版的.container-fluid
  6. .row 代表一個橫列，以確保裡面的欄位可以對齊、排序。若同時加入.no-gutters，裡頭的欄位則不會有間隔，會緊密連接。
  7. 欄位的設定是「.col-斷點-寬」，斷點可不指定，寬度1~12，不設寬度會自動平均，若設auto會自動根據內容多寡調整大小。滿版為12欄。若超過，則會自動新增一個 .row。
  8. 在 .container 之外多一層 <div> 並設想要的底色或底圖即可作到滿版底色+有限寬度
四、 BootStrap4斷點
  1. 所謂斷點，在這裡指的是當螢幕尺寸符合斷點規範的大小時，才會根據斷點設定來實施網格系統（例如左邊9欄，右邊3欄），若是不符合斷點範圍，則自動調整為一欄式（通常是在手機瀏覽的情況下）。
    • (1) xs < 576 px（手機直式）
    • (2) sm 範圍 576 px～767px（手機橫式）
    • (3) md 範圍 768 px～991px（平板直式）
    • (4) lg 範圍 992 px～1199px（平板橫式）
    • (5) xl >= 1200 px（一般螢幕）
  2. 可以同時用多個斷點，例如：col-sm-4 col-md-3，意思就是用手機直看時，該區域寬度佔4欄（畫面分為三欄式），用手機橫看時，該區域寬度佔3欄（畫面分為四欄式）。
五、 BootStrap4 間隔工具
  1. 間隔工具的組成為「屬性邊緣-尺寸」，如.m-3、.pt-5、py-1...等。
  2. 屬性設定：m 即 margin（外距），p 即 padding（內距）
  3. 邊緣設定：t（即top）、b（即bottom）、l（即left）、r（即right）、x（即left 和right）、y（即top和bottom）、空白則是設定元素的四個邊緣。
  4. 尺寸設定：0~5個空白空間。
  5. 詳情：http://bootstrap.hexschool.com/docs/4.0/utilities/spacing/
六、 假文產生器 http://more.handlino.com/
  1. 載入假文產生器的js <script src="http://more.handlino.com/javascripts/moretext-1.2.js" type="text/javascript"></script>
  2. 在容器中套用（產生3句，每句20到50個中文字之間） <p class="lipsum(3,20-50)"></p>
七、 BootStrap4簡易導覽工具
  1. 如果只需要單純選項，最基本架構如下，其中<nav>亦可換成<ul>： <nav class="nav"></nav>
  2. 選項部份，其中<a>亦可換成<li class="nav-item">： <a class="nav-link text-white active" href="index.php">首頁</a>
  3. .nav-link會讓選項較寬大；.text-white設成白色文字；.active指作用中選項。
  4. 詳情：http://bootstrap.hexschool.com/docs/4.0/components/navs/
八、 利用javascript來製作隨機底圖（補充）
  1. 先宣告javascript陣列（當然要準備這幾張圖） var images = ['pic1.jpg', 'pic2.jpg', 'pic3.jpg'];
  2. 隨機取得某個陣列值 images[Math.floor(Math.random() * images.length)]
  3. Math.random()會產生 0到0.9999...的小數
  4. images.length是陣列數量，兩者相乘（*3）會變成 0 ~ 2.9999...的小數
  5. Math.floor()只取最大整數部份，所以，會產生0~2之間的整數，亦即陣列索引 <script type="text/javascript "> $(document).ready(function () { var images = ['pic.jpg', 'pic2.jpg', 'pic3.jpg']; $('.img-container').css({ 'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')' }); }); </script>
九、 BootStrap4表單
  1. 在 Visual Studio Code 中輸入b4-form-grid按 Enter可以快速產生一整組表單語法。
  2. 在一般的HTML中<fieldset>和<legend>是有其獨特用途和外觀的，但在 BS4 的表單中，<fieldset>等同<div>，<legend>等同<label>，因此，擇一即可，效果是一樣的。
  3. 在 Visual Studio Code 中輸入b4-form-group按 Enter 可以快速產生一組表單元件群組的語法。 「表單群組」是指一組用.form-group容器中，包住「標籤+輸入元件」。
  4. 「表單群組」預設為標籤在上，輸入框在下。
  5. 若要做成標籤在左，輸入框在右的表單群組，在.form-group後要加一個.row，才能變成水平輸入表單。
    • (1) 在<label>中要加入.col-sm-* 指定標籤空間大小，還要加入.col-form-label確保和輸入元件可以垂直對齊。
    • (2) <input>外面要用<div>包起來，並加入.col-sm-* 指定輸入框的空間大小
    • (3) 若是希望標籤可以靠右邊對齊，則可加入.text-sm-right，如此，只有螢幕大於576px時才會靠右，小螢幕時，最自動回到左上方。
    • (4) 如果要在欄位下方加上說明，可用.form-text，並用.text-danger來設定成紅色
十、 資料庫規劃
  1. 若是不熟，建議先用試算表軟體，如：Calc或Excel來規劃一下（內含完整架構及模擬資料），順便想像一下需要的功能和欄位。
  2. 啟動adminer或者直接連至 http://localhost/us_opt2/index.php
  3. 帳密預設為 root 及 12345，點擊「建立新資料庫」，如「reporter」，「校對」選擇「utf8_general_ci」
  4. 點擊「建立資料表」，建立需要的資料表，例如「article」資料表 ，「引擎」請選「MyISAM」
  5. 接著建立以下資料表： 列 類型 註解
    sn mediumint(9) 自動遞增 流水號
    title varchar(255) 文章標題
    content text 文章內容
    create_time datetime 建立時間
    update_time datetime 最後更新時間
  6. 注意，一定要有流水號（勾選AI，即自動遞增）
  7. 最後，請匯出sql檔，以便下次使用。
十一、 為何需要使用適當欄位類型？
  1. 節省空間：不同欄位類型佔用空間不同，往往可以差到好幾倍。
  2. 降低開發難度：選用適當欄位類型可以減少許多檢查，例如ENUM，或設定適當索引
  3. 避免錯誤：例如電話號碼就不可用數字欄位，避免0開頭被省略。
十二、 讓PHP7連線到MySQL資料庫
  1. HTML網頁語法無法直接存取資料庫伺服器，需透過程式來介接。
  2. 注意！PHP7已經不支援MySQL系列函數，而是改用MySQLi物件，或者PDO物件。
  3. 使用PDO物件的好處是方便介接其他資料庫，而用MySQLi物件的優點則是其運作和早期MySQL較像，熟悉MySQL函數的話，幾乎可以無痛轉移。底下還是以MySQLi為範例。
  4. 基本MySQL資料庫連線方法： $db = new mysqli(_DB_HOST, _DB_ID, _DB_PASS, _DB_NAME); if ($db->connect_error) { die('無法連上資料庫：' . $db->connect_error); } $db->set_charset("utf8");
  5. 指定欲連線的來源位置（一般為localhost），資料庫帳號、密碼及資料庫名稱。
  6. 若無錯誤訊息，表示連線成功。連線後，需設定用utf8編碼來擷取資料。
十三、 常數設定
  1. 常數是一定設定就不會變，和變數可以隨時指派其值不一樣。
  2. 常數可以直接在函數中使用
  3. 一般常數會以大寫前面加底線來辨識（實際上，不加底線或是用小寫也是可以）。
  4. 常數定義方式： define('常數名稱', '對應值');
  5. 可作一個config.php檔，然後讓其他程式來引入。
十四、 if條件判斷
  1. PHP的判斷式寫法 if(判斷條件){ //條件為真執行 }elseif(判斷條件){ //elseif的條件為真執行 }else{ //條件為假時執行 }
  2. Smarty的判斷式寫法 {if 判斷條件} //條件為真執行 {elseif 判斷條件} //elseif 的條件為真執行 {else} //條件為假時執行 {/if}
  3. 由上往下判斷，一旦為真，就執行指定動作。後面就不再繼續判斷。
  4. elseif 和 else 均可省略，視情況使用即可。
  5. elseif 可以有很多組，其餘的只能有一組。若是太多elseif，建議改用switch
十五、 資料庫insert寫入語法
  1. 要操作MySQL，必須用SQL語言，新增資料的SQL語法如下（大小寫無關）： INSERT [INTO] `資料表名稱` [(`欄位1`, `欄位2`...)] VALUES ('值1', '值2'...)
  2. 建議凡是資料庫名稱、資料表名稱、欄位名稱都用重音符號`包起來。
  3. 凡是「值」的，都用單引號'包起來。
十六、 用PHP來操作資料庫流程
  1. 先完成連線，取得資料庫資源變數物件，例如：$db
  2. 利用 $db->real_escape_string() 過濾資料，目的是順利讓所有資料存入資料庫，並避免隱碼攻擊。如： $title = $db->real_escape_string($_POST['title']);
  3. $db->query($sql) 就是送執行指令到資料庫。
  4. $db->error 會秀出資料庫傳回來的錯誤訊息
  5. 取得寫入時該資料產生的流水號：$db->insert_id
  6. 凡是寫入、修改、刪除，進行完都應該做轉向，避免使用者重新整理畫面，又重複執行寫入、修改或刪除：header("location: index.php?sn={$sn}");
  7. header()函數基本上是設定文件檔頭，其中 location屬性可以指定文件轉向，故利用之來達成轉向功能。 if (isset($_POST['op']) and $_POST['op'] == "insert") { $db = new mysqli(_DB_HOST, _DB_ID, _DB_PASS, _DB_NAME); if ($db->connect_error) { die('無法連上資料庫：' . $db->connect_error); } $db->set_charset("utf8"); $title = $db->real_escape_string($_POST['title']); $content = $db->real_escape_string($_POST['content']); $sql = "INSERT INTO `article` (`title`, `content`, `create_time`, `update_time`) VALUES('{$title}', '{$content}', now(), now())"; $db->query($sql) or die($db->error . $sql); $sn = $db->insert_id; header("location: index.php?sn={$sn}"); }