線上書籍

Home

[1062] PHP7入門

一、 完成登入機制
  1. 先檢查UniForm Server是否有啟用php_openssl.dll（PHP→Edit Basic and Modules→PHP Modules Enable/Disable）
  2. 先處理寄信問題，修改config.php： $mailServerType = 'smtp'; //IF $mailServerType = 'smtp' $smtp_server = 'smtp.gmail.com'; $smtp_user = '帳號@gmail.com'; $smtp_pw = '密碼'; $smtp_port = 587; //465 for ssl, 587 for tls, 25 for other $smtp_security = 'tls'; //ssl, tls or ''
  3. 修改includes/mailsender.php的20行為： $mail->CharSet = "UTF-8";
  4. 修改globalcon.php把其中第4行中的 6 + 刪除，最後會像這樣： $signin_url = substr($base_url . $_SERVER['PHP_SELF'], 0, -(strlen(basename($_SERVER['PHP_SELF']))));
  5. 分別修改 signup.php、verifyuser.php、main_login.php將之套用樣板檔，若裡頭有任何地方有login/路徑的，請刪除之。
  6. 記得修改選單nav.tpl，並修改資料庫架構，以便紀錄發文者。
  7. 完整範例
二、 修改管理頁面樣板
  1. 放在footer.tpl的jquery.js可移至header.tpl，以應付越來越多的套件需求。
  2. 可把隨機底圖部份的語法獨立出來，方便不同頁面套用，畢竟不是每個頁面都要大底圖。
三、 安裝Ckeditor所見即所得編輯器
  1. 下載https://ckeditor.com/ckeditor-4/download/完整版Full Package
  2. 編輯表單樣板檔並貼入以下語法： <script src="ckeditor/ckeditor.js"></script> <textarea name="content" id="content"></textarea> <script> CKEDITOR.replace('content'); </script>
  3. 使用內建的設定工具列：localhost/reporter/ckeditor/samples/toolbarconfigurator/ ，將結果複製到 config.js 即可。
四、 安裝elfinder檔案管理
  1. 下載https://studio-42.github.io/elFinder/，下載解壓並改名為elFinder
  2. 將 elFinder/elfinder.html 改名為 elFinder/elfinder_cke.html，以避免日後更新時，設定被覆蓋。
  3. 修改 ckeditor/config.js ，在最後加入以下語法，以呼叫檔案管理工具： config.filebrowserBrowseUrl = 'elFinder/elfinder_cke.html';
  4. 下載https://hypweb.net/elFinder-nightly/demo/Demo/Downloads/Example/main.cke.js
  5. 修改 elFinder/elfinder_cke.html 第10行為 main.cke.js <script data-main="./main.cke.js" src="略"></script>
  6. 建立 files目錄（在linux下需設為777），將 elFinder/php/connector.minimal.php-dist 另存為 elFinder/php/connector.minimal.php 即可
五、 上傳圖片
  1. 若表單中有file元件，其表單編碼一定要加上： enctype="multipart/form-data"
  2.  記得建立一個資料夾，例如：uploads（linux下權限記得設定為777）
  3. 每上傳一個附檔（假設file欄位名稱為file），都會產生一組 $_FILES 超級全域變數：
    • (1) $_FILES['file']['name']：上傳檔案原始名稱。
    • (2) $_FILES['file']['type']：檔案的 MIME 類型，例如“image/gif”。
    • (3) $_FILES['file']['size']：已上傳檔案的大小，單位為bytes。
    • (4) $_FILES['file']['tmp_name']：檔案被上傳後的臨時檔案名。
    • (5) $_FILES['file']['error']：和該檔案上傳相關的錯誤代碼。
  4. 上傳的步驟：送出上傳→檔案會暫時放到tmp中→程式要搬移該檔到指定的位置。
  5. 搬移上傳檔方法： move_uploaded_file(暫存檔 , 新路徑檔名)
  6. 取得附檔名的方法： $ext = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
六、 隨機假圖http://lorempixel.com/
  1. 用法： <img src="http://lorempixel.com/400/300/">
七、 上傳工具
  1. https://www.verot.net/php_class_upload.htm下載解壓，把class.upload.php及lang目錄放到reporter目錄中。
  2. 建立uploads資料夾，並產生縮圖並轉檔： require_once 'class.upload.php'; $foo = new Upload($_FILES['cover']); if ($foo->uploaded) { // save uploaded image with a new name $foo->file_new_name_body = 'cover_' . $sn; $foo->image_resize = true; $foo->image_convert = png; $foo->image_x = 1200; $foo->image_ratio_y = true; $foo->Process('uploads/'); if ($foo->processed) { $foo->file_new_name_body = 'thumb_' . $sn; $foo->image_resize = true; $foo->image_convert = png; $foo->image_x = 400; $foo->image_ratio_y = true; $foo->Process('uploads/'); } }
八、 用HTML Purifier阻擋 XSS 攻擊
  1. 官網：http://htmlpurifier.org，
  2. 下載解壓縮並把library複製到reporter下，建議改名為HTMLPurifier，接著在讀取單一篇文章的函數中加入： require_once 'HTMLPurifier/HTMLPurifier.auto.php'; $config = HTMLPurifier_Config::createDefault(); $purifier = new HTMLPurifier($config); $data['content'] = $purifier->purify($data['content']);
九、 加入Markdown編輯器
  1. 官網：http://pandao.github.io/editor.md，手冊：http://markdown.tw/
  2. 下載解壓並改名為editor，接著編輯表單樣板檔並貼入以下語法： <link rel="stylesheet" href="editor/css/editormd.min.css" /> <script src="editor/editormd.min.js"></script> <script src="editor/languages/zh-tw.js"></script> <script type="text/javascript"> $(function () { var editor = editormd({ id: "editormd", height: 740, path: 'editor/lib/', codeFold: true, saveHTMLToTextarea: true, // 保存 HTML 到 Textarea searchReplace: true, htmlDecode: "style,script,iframe|on*", // 開啟 HTML 標籤解析 emoji: true, taskList: true, tocm: true, // Using [TOCM] tex: true, // 開啟科學公式TeX語言支持，默認關閉 flowChart: true, // 開啟流程圖支持，默認關閉 sequenceDiagram: true, // 開啟時序/序列圖支持，默認關閉, imageUpload: true, imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL: "editor/php/upload.php" }); }); </script>
  3. 原先輸入框部份改為 <div id="editormd"> <textarea style="display:none;" name="content" id="content"></textarea> </div>
  4. 在editor下建立uploads資料夾，並將editor/examples下的php複製到editor下
  5. 修改editor/php/upload.php，將 new EditorMdUploader();最後一個參數從false改為1，以便讓程式自動產生隨機檔名。
十、 將Markdown轉為HTML
  1. 在顯示單一文章的樣板檔前加入： <link rel="stylesheet" href="editor/css/editormd.preview.css" />

     

  2. 原本的內容區改為： <div id="article"> <textarea id="append-test" style="display:none;">{$article.content}</textarea> </div> <script src="editor/lib/marked.min.js"></script> <script src="editor/lib/prettify.min.js"></script> <script src="editor/lib/raphael.min.js"></script> <script src="editor/lib/underscore.min.js"></script> <script src="editor/lib/sequence-diagram.min.js"></script> <script src="editor/lib/flowchart.min.js"></script> <script src="editor/lib/jquery.flowchart.min.js"></script> <script src="editor/editormd.js"></script> <script type="text/javascript"> $(function () { var article; article = editormd.markdownToHTML("article", { htmlDecode: "style,script,iframe", // you can filter tags decode emoji: true, taskList: true, tex: true, // 默认不解析 flowChart: true, // 默认不解析 sequenceDiagram: true, // 默认不解析 }); }); </script>