Blog 彙整 - 第 18 頁，總計 21 頁 - VECTOR COOL 威得數位行銷

Plesk Onyx on CentOS 7 AWS AMI 一鍵安裝

有什麼比一鍵安裝更快樂呢

千呼萬喚始出來，AWS有Plesk官方的AMI囉!

相信很多接觸過虛擬主機的人都應該用過Plesk，Plesk是一套主流的主機管理系統，雖然cpanal也是主流的主機管理系統，但我還是習慣使用Plesk，可能是介面比較漂亮吧，以貌取程式，之前要在AWS上安裝還要從OS一個一個裝，慢慢去調校，期待有沒有AMI的解決方案，Plesk官方發布了一篇新文章，裡面有提到已經可以透過AWS AMI一鍵安裝AWS環境及Plesk

作業系統版本

提供3種不同作業系統的映像檔

OS
AWS AMI

Plesk十天試用

預先配置

講簡單一點就是都幫你配好好的拉，你只要點一下就好

預先安裝的 Plesk Extensions

Plesk Premium郵件由Kolab提供 – 安全的業務類電子郵件和協作工具，最多10個郵箱
Plesk電子郵件安全包（卡巴斯基AV / Magicspam） – 保護您的電子郵件
Plesk防火牆保護
ModSecurity – 保護您的服務器免受惡意攻擊
Symantec免費SSL證書（基本） – 來自全球安全領導者的網站安全*
WordPress工具包 – 只需點擊幾下即可在單個服務器上大量管理多個WordPress實例
Plesk安全顧問 – 如果你不是安全專家，這個嚮導是！
Amazon Route 53 DNS
Boldgrid – 快速，輕鬆的網站建設者在WordPress之上工作*

預配置為性能和安全性

服務提供商視圖
開啟防火牆
使用Atomicorp的基本規則開啟Web應用程序防火牆
開啟Fail2Ban禁用IP地址過濾
PHP 7-FPM（FastCGI Process Manager）
由NGINX服務

如果你是AWS新用戶，還送你 $500 美金 AWS credits

Plesk on AWS：

[……]

PHP include vs require

PHP include 與 require 到底有什麼差異阿?

相信 include() 跟 require() 大家並不陌生，都是用來引入文件，如果都一樣又為何要分成 include() 與require()呢，其實還是有些差異拉，我把在網路上看到的差異做成了比較表，方便大家選擇最適合的。

include

require

用到時才載入
一開始就加載

檔案發生錯誤的話，會顯示警告，不會立刻停止
會顯示錯誤，立刻終止程式，不再往下執行。

需要處裡文件檢查、速度相對較慢
速度比較快

適合動態態載入檔案
適合靜態檔案

適合用來引入動態的程式碼
適合用來引入靜態的內容

可以用在迴圈
–

有返回值
-[……]

PHP in_array comparing two arrays

PHP in_array() 無法比較兩個陣列，這邊採取替代的作法，使用array_intersect()，取得值的交集

/*
    VECTOR COOL
    https://vector.cool	
*/
$arr1 = array(1,2,3);
$arr2 = array(1,2,3,4,5,6,7);
$arr = array_intersect($arr1, $arr2);
if (count($arr) > 0) {
   // do something
}

參考資料：

[……]

[懶人CSS陰影]還在用PS上陰影嗎？用CSS為你的圖片或色塊加一點變化！

在設計網頁時為了不要讓圖片或色塊死板板的，有的人會傻傻的先用Photoshop上陰影再以圖片的格式上傳，今天我們直接為圖片和色塊加上CSS吧。

CSS實在有許多好用之處，今天要來跟大家介紹小編做網站時常常使用的CSS box-shadow！

顏色從淺到深的陰影色塊

.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}

.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card-1 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card-2 {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card-3 {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card-4 {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card-5 {
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

特殊陰影處理

HTML

<div class="box effect1">
<h3>Effect 1</h3>
</div>

<div class="box effect2">
<h3>Effect 2</h3>
</div>

<div class="box effect3">
<h3>Effect 3</h3>
</div>

<div class="box effect4">
<h3>Effect 4</h3>
</div>

<div class="box effect5">
<h3>Effect 5</h3>
</div>

<div class="box effect6">
<h3>Effect 6</h3>
</div>

<div class="box effect7">
<h3>Effect 7</h3>
</div>

<div class="box effect8">
<h3>Effect 8</h3>
</div>

CSS

.box h3 {
    text-align: center;
    position: relative;
    top: 80px;
}

.box {
    width: 70%;
    height: 200px;
    background: #FFF;
    margin: 40px auto;
}


/*==================================================
 * Effect 1
 * ===============================================*/

.effect1 {
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0 10px 6px -6px #777;
}


/*==================================================
 * Effect 2
 * ===============================================*/

.effect2 {
    position: relative;
}

.effect2:before,
.effect2:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

.effect2:after {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}


/*==================================================
 * Effect 3
 * ===============================================*/

.effect3 {
    position: relative;
}

.effect3:before {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}


/*==================================================
 * Effect 4
 * ===============================================*/

.effect4 {
    position: relative;
}

.effect4:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    right: 10px;
    left: auto;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: r[......]閱讀更多

Plesk 設定排程任務，定時瀏覽指定網頁

Plesk是一套很方便的主機系統管理程式，也是主流主機管理程式之一，很多主機商也都用Plesk來進行主機系統管理，本篇要介紹如何設定排程任務

什麼是排程任務?

有時我們在寫程式的時候會希望主機自動在某一個時間區間執行某些任務，例如：每日午夜12:00，進行購物車訂單出貨拋轉作業，當然也可以人工每天12點去瀏覽這支程式，只是非常愚蠢，偷懶是工程師的美德，於是我們需要一個像計時器的東西，時間到去做某些動作，達成自動化目的。

建立任務處理程式

我習慣會寫一支程式，專門執行某些特定任務，比如說：購物車訂單出貨拋轉作業，這支程式可透過瀏覽網頁的方式去驗證是否正常運行，確定一切都正常，接著我們需要一個觸發程式的瀏覽者，這我們就透過Plesk的排程任務達成。

設定Plesk

登入Plesk ，到指定網域的管理頁面，右上角有一個叫計畫的任務
PS. 如果您的Plesk管理面板中沒出現這個選單，那就是這功能管理者沒開放，就需聯絡你的主機商，如果他們不願意開這功能就換家主機商吧。

添加一個任務

設定執行時間

我選擇獲取URL選項，讓Plesk排程任務，在指定時間瀏覽我的某一支檔案。
輸入要執行的檔案URL
設定時間及週期
發送通知，可以選擇僅發送異常通知就好
選擇通知對象
儲存

驗證

設定完成後，一定要檢查是否有在指定時間及周期中執行，可以寫個小程式，去紀錄執行時間，以驗證程式有正常運行。
承上點，若你確定你的程式運行完全正常沒有問題，但排程卻沒正常運行，請檢查排程設定，若也都沒錯，請聯絡主機商。

安全設定

眼尖的朋友應該會看到我的執行URL加了個c參數，後面跟了一堆亂碼，這是一個簡單的安全設定，為了避免爬蟲或有心人士，在非排程定義執行區間去執行此程式，所做的驗證機制，在我的php檔最前方加入下方程式碼，若沒有正確的key，此頁將返回hTTP 404錯誤，當作根本就沒這頁的存在
```
<?php
if($_GET['c']!='B598FCD1B61E79D8249C5A8AAEC2D585'){
header("HTTP/1.0 404 Not Found");
exit;
}
```

設定 .htaccess 檔，該URL只允許執行某一 IP執行

RewriteEngine On
RewriteCond %{REMOTE_ADDR} !=123.123.123.123
RewriteCond %{REQUEST_URI} ^/basic/test.php [NC]
RewriteRule ^ - [R=404,L]

參考資料：

[……]

Win10 清除DNS快取

Windows 清除DNS快取

滑鼠移至左下角開始功能表，按右鍵。
選擇 Windows PowerShell
貼上下方文字
```
ipconfig /flushdns
```
清除DNS完成

[……]

PHP 清除字串頭尾空白

這是一個很常用的功能，有時我們在處理表單發送後的資料，有時常常會多按了一些空白，這些空白可能會導致資料錯誤，或是資料轉檔時，明明看資料沒錯，怎麼就對不起來，比如說我剛剛的例子，搞了我好久

用法：

<?php
　$str=" 測試字串，前後空白都會被清除     ";
　echo trim("$str");
?>

案例：

API回傳Json資料，怎麼看pickUpDateTime，都是沒值的，我就用empty()來做判斷，卻怎麼都友值，弄了半天是空白字元，我也不懂這API主人為什麼空值不拋要拋一堆空白自原來害人

[toStoreDateTime] => 2017/08/11 00:00:00
[pickUpDateTime] =>                    
[omTranMode] => 3203
[Status] => 50
[omReceName] => 王小明

不管!!至少問題找到了，問題就解決一半了，接著就是在用empty()作空值判斷前，先用trim()去過濾這些該死的空白

<?php
$pickUpDateTime ="                   ";
echo (empty(trim($pickUpDateTime )))?1:0;
?>

[……]

javascript get query values from url 取網址參數

本篇使用 Javascript ，若想用jQuery的方法，可參考本站另一篇

jQuery get query values from url 取網址參數

本篇提供兩種方法，擇一使用

方法一：

/*
    VECTOR COOL
    https://vector.cool
*/
function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

方法二：

/*
    VECTOR COOL
    https://vector.cool
*/
function getURLParameter(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

用法：

/*
    VECTOR COOL
    https://vector.cool
*/
var tech = getUrlParameter('technology');
var blog = getUrlParameter('blog');

[……]

jQuery get query values from url 取網址參數

本篇使用 jQuery方法，若覺得jQuery的方法很大包，可參考本站另一篇

javascript get query values from url 取網址參數

QueryString.js

把第一段的程式碼放到一個名叫 QueryString.js 的檔案，以後需要時再去引入這支檔案就可。

/*
    VECTOR COOL
    https://vector.cool
*/
(function($) {
    $.QueryString = (function(paramsArray) {
        let params = {};

        for (let i = 0; i < paramsArray.length; ++i)
        {
            let param = paramsArray[i]
                .split('=', 2);

            if (param.length !== 2)
                continue;

            params[param[0]] = decodeURIComponent(param[1].replace(/\+/g, " "));
        }

        return params;
    })(window.location.search.substr(1).split('&'))
})(jQuery);

用法：

/*
    VECTOR COOL
    https://vector.cool
*/
//Get a param
$.QueryString.param
//-or-
$.QueryString["param"]
//This outputs something like...
//"val"

//Get all params as object
$.QueryString
//This outputs something like...
//Object { param: "val", param2: "val" }

//Set a param (only in the $.QueryString object, doesn't affect the browser's querystring)
$.QueryString.param = "newvalue"
//This doesn't output anything, it just updates the $.QueryString object

//Convert object into string suitable for url a querystring (Requires jQuery)
$.param($.QueryString)
//This outputs something like...
//"param=newvalue&param2=val"

//Update the url/querystring in the browser's location bar with the $.QueryString object
history.replaceState({}, '', "?" + $.param($.QueryString));
//-or-
history.pushState({}, '', "?" + $.param($.QueryString));

參考資料：

[……]

PHP is Json 判斷字串是否為Json格式

Check string is json type
is Json 判斷字串是否為Json格式

Test

[……]

有什麼比一鍵安裝更快樂呢

千呼萬喚始出來，AWS有Plesk官方的AMI囉!

作業系統版本

CentOS

Ubuntu

Windows

Plesk十天試用

預先配置

預先安裝的 Plesk Extensions

預配置為性能和安全性

Plesk on AWS：

PHP include 與 require 到底有什麼差異阿?

include

require

PHP in_array() 無法比較兩個陣列，這邊採取替代的作法，使用array_intersect()，取得值的交集

顏色從淺到深的陰影色塊

特殊陰影處理

HTML

CSS

什麼是排程任務?

建立任務處理程式

設定Plesk

添加一個任務

設定執行時間

驗證

安全設定

參考資料：

Windows 清除DNS快取

用法：

案例：

方法一：

方法二：

用法：

用法：

Check string is json typeis Json 判斷字串是否為Json格式

Test

Check string is json type
is Json 判斷字串是否為Json格式