Command Line 執行 PHP, 等同

Posted on 2015-08-31 by hoyo

想看某個 PHP 執行的結果，不需要寫一個 .php 來執行，直接用 php 執行即可

1	php -r 'echo session_save_path();'

—

等同或是別名 alias

exit() == die()

PHP 5.3.0 Add

__DIR__ == dirname(__FILE__)

—

141 total views, no views today

Apache Token

Posted on 2015-08-31 by hoyo

介紹以往實作過的 MP4 串流 + 控管方式，現在已經有 PHP 實作的方式，不推薦此種方式。

—

mod_auth_token 提供一個有時效性的加密網址 Install Apache and PHP to do Secure h264 Pseudo Streaming – PaskvilWiki (本機備份) 下列指令根據 OpenSUSE 11.2 以及個人使用習慣修改過了。

yast -i automake

cd ~

wget "http://mod-auth-token.googlecode.com/files/mod_auth_token-1.0.5.tar.gz"

tar zxf mod_auth_token-1.0.5.tar.gz

sudo rm missing

sudo ln -s /usr/share/automake-1.11/missing missing

sudo rm config.guess

sudo ln -s /usr/share/automake-1.11/config.guess config.guess

sudo rm config.sub

sudo ln -s /usr/share/automake-1.11/config.sub config.sub

sudo rm COPYING

sudo ln -s /usr/share/automake-1.11/COPYING COPYING

sudo rm install-sh

sudo ln -s /usr/share/automake-1.11/install-sh install-sh

sudo ./configure

make ; make check

make install

/etc/rc.d/apache2 restart

編輯 Apache 網站設定此處不同的地方是移除了 AuthTokenLimitByIp ，那是 1.0.6 版本才可使用的參數。

# Disable direct access to the folder

AllowOverride None

allow from all

</Directory>

ScriptAlias /Multimedia/ /Multimedia/

# Token settings

AuthTokenSecret "mysecretstring"

AuthTokenPrefix /Multimedia/

AuthTokenTimeout 10

</Location>

管制的目錄有沒有在網站內都無所謂，因為該目錄可使用 ScriptAlias 導引，而且當 mod_auth_token 生效時，一定要透過運算生效的網址才可下載使用。產生下載網址

<?php

// Settings to generate the URI

$secret = "mysecretstring"; // Same as AuthTokenSecret

$protectedPath = "/Multimedia/"; // Same as AuthTokenPrefix

$hexTime = dechex(time()); // Time in Hexadecimal

$fileName = "/test.mp4"; // The file to access

$token = md5($secret . $fileName. $hexTime);

// We build the url

$url = $protectedPath . $token. "/" . $hexTime . $fileName;

產生的網址大概長這個樣子

1	/Multimedia/ed60099baf58e663468348fe368bf35c/5057d728/test.mp4

直接到 /Multimedia/A2.mp4 會出現 HTTP 401 Authentication required! 錯誤，逾時才連結會出現 HTTP 410 Resource is no longer available! 錯誤。

該連結即無法重複使用，下為重複使用的錯誤訊息

Gone

The requested resource

/Multimedia/46017c47f301d168cf695eac9951b29f/50b57357/test.mp4

is no longer available on this server and there is no forwarding address. Please remove all references to this resource.

175 total views, 1 views today

jQuery – DatePicker

Posted on 2015-08-31 by hoyo

jQuery UI Datepicker 增加時間 Timepicker

$(function () {

var opt={

showButtonPanel: false,

showAnim: false,

//以下為日期選擇器部分

dayNames:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],

dayNamesMin:["日","一","二","三","四","五","六"],

monthNames:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],

monthNamesShort:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],

prevText:"上月",

nextText:"次月",

weekHeader:"週",

showMonthAfterYear:true,

dateFormat:"yy-mm-dd",

//以下為時間選擇器部分

timeOnlyTitle:"選擇時分",

timeText:"時間",

hourText:"時",

minuteText:"分",

//secondText:"秒",

//millisecText:"毫秒",

timezoneText:"時區",

currentText:"現在時間",

closeText:"確定",

amNames:["上午","AM","A"],

pmNames:["下午","PM","P"],

showSecond:false,

timeFormat:"HH:mm" //HH:mm:ss

};

$(".DataTimePicker").datetimepicker(opt);

});

—

開啟顯示週數以及強制選擇第一天

var opt={

showButtonPanel: false,

showAnim: false,

//以下為日期選擇器部分

dayNames:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],

dayNamesMin:["日","一","二","三","四","五","六"],

monthNames:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],

monthNamesShort:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],

prevText:"上月",

nextText:"次月",

weekHeader:"週",

showWeek: true,

firstDay: 1,

onSelect: function(date){

var d = new Date(date);

var index = d.getDay();

if(index == 0) {

d.setDate(d.getDate() - 6);

}

else if(index == 1) {

d.setDate(d.getDate());

}

else if(index != 1 && index > 0) {

d.setDate(d.getDate() - (index - 1));

}

var year = d.getFullYear();

var month = (1 + d.getMonth()).toString();

month = month.length > 1 ? month : '0' + month;

var day = d.getDate().toString();

day = day.length > 1 ? day : '0' + day;

$(this).val(year +'-'+ month +'-'+ day);

showMonthAfterYear:true,

dateFormat:"yy-mm-dd"

};

$(".DataTimePicker").datepicker(opt);

—

只顯示年、月

屬於硬幹的方式，實際使用效果不理想，建議使用其他方案 (2016-03-28)

Datepicker hide calender to show month-year and full calendar not working properly

HTML

<style>

.ui-datepicker-calendar {

display: none !important;

}

</style>

JavaScript

$('.date-picker').datepicker( {

changeMonth: true,

changeYear: true,

showButtonPanel: true,

dateFormat: 'MM yy',

onClose: function(dateText, inst) {

$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));

}

});

—

選取一週

How Can I Use a Date Picker to Select a Whole Week?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

$(function() {

var startDate;

var endDate;

var selectCurrentWeek = function() {

window.setTimeout(function () {

$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')

}, 1);

}

$('.week-picker').datepicker( {

showOtherMonths: true,

selectOtherMonths: true,

onSelect: function(dateText, inst) {

var date = $(this).datepicker('getDate');

startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());

endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);

var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;

$('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));

$('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));

selectCurrentWeek();

beforeShowDay: function(date) {

var cssClass = '';

if(date >= startDate && date <= endDate)

cssClass = 'ui-datepicker-current-day';

return [true, cssClass];

onChangeMonthYear: function(year, month, inst) {

selectCurrentWeek();

}

});

$('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });

$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });

});

</script>

</head>

<body>

</body>

</html>

—

關閉某個星期

Disable single day of a week in datepicker

$( "#datepicker" ).datepicker({

beforeShowDay: noMondays

});

function noMondays(date){

if (date.getDay() === 1) /* Monday */

return [ false, "closed", "Closed on Monday" ]

else

return [ true, "", "" ]

}

—

196 total views, 1 views today

CKEditor 4.5.3 之初步使用

Posted on 2015-08-21 by hoyo

為什麼是 CKEditor ?

現在還有在維護
因為還有在維護所以應該有圖檔拖曳上傳功能
真的有圖檔拖曳上傳功能 → 讚 live demo

下載及 demo 請到官網：CKEditor

—

如何使用

下載解壓縮

1	<script src="/???/ckeditor/ckeditor.js"></script>

到 ckeditor/samples/toolbarconfigurator/index.html 自訂工具列

將設定值取代 config.js 檔案

—

使用 Ajax 上傳都是未更新前的資料問題

在上傳前套用以下程式

1	for ( instance in CKEDITOR.instances ) CKEDITOR.instances[instance].updateElement();

—

拖曳圖檔至編輯區

基本知識、觀念建立：File Browser/Uploader

前端的程式都可以直接從官網下載，唯一需要自己準備的只有圖檔上傳後回傳的程式，大概是長這樣：

class Upload {

function __construct()

{

$ResizeWidth = 780;

$ResizeHeight = 780;

$id = $_GET['id'];

$Upload_dir = '../../Upload/'. $id;

if ( !is_dir( $Upload_dir ) ) mkdir($Upload_dir);

$SourceFile = $_FILES['upload']['tmp_name'];

list($width, $height, $type, $attr) = getimagesize($SourceFile);

# 儲存的路徑檔名

$fn = explode('.', $_FILES['upload']['name']);

array_pop($fn);

$FileName = implode('.', $fn);

# 上傳圖檔寬或高大於重新取樣設定

if ( $width > $ResizeWidth || $height > $ResizeHeight ) {

$si = new SimpleImage();

$si->load($SourceFile)->best_fit($ResizeWidth, $ResizeHeight)->save($Upload_dir.'/'.$FileName.'.png');

}

else {

move_uploaded_file($SourceFile, $Upload_dir.'/'.$FileName.'.png');

}

$return = array("uploaded"=>true, "fileName"=>$FileName.'.png', "url"=>"/photo.php?id={$id}&N=".$FileName);

echo json_encode($return);

}

長這樣的根據？

直接從官網範例 → File Upload ，在 Chrome 的 F12 追蹤得到上傳後需要回傳 json

{

"fileName":"\u4e2d\u6587_\u5927\u5bb6_aa_~!.png",

"uploaded":1,"error":{"number":207,"message":"The uploaded file was renamed to \u0022\u4e2d\u6587_\u5927\u5bb6_aa_~!.png\u0022."},

"url":"\/userfiles\/files\/%E4%B8%AD%E6%96%87_%E5%A4%A7%E5%AE%B6_aa_~!.png"

}

硬要看官方文件的話，在這裡 → Uploading Dropped or Pasted Files

—

實際運用的情況

目前 2015.8.26 CKEditor 的版本為 4.5.3
預計達成功能
- 基本文字編輯、格式修改
- 附加圖檔
  - 檔案拖曳直接上傳附加
  - 複製、貼上上傳附加 (目前只支援 Firefox，找尋其他方案)
  - 已上傳可瀏覽後附加不須重新上傳

使用 Plugins

autogrow : 編輯區不是固定尺寸
uploadimage : 拖曳檔案進編輯區即可上傳
image2 : 讓圖片可移動以及改變大小

自訂 Plugin : 以瀏覽圖檔點選後直接插入為例

參考資料

Inserting HTML into CKeditor from popup window
[CKEditor] 增加上傳圖片功能 (這個用在圖片按鈕內的「瀏覽伺服器」，最後插入圖片的 Javascript 不同)

準備好以下材料

下載官方的 custom plugin : Timestamp Plugin
瀏覽圖庫的程式

操作流程長這樣

從工具列點選瀏覽圖庫按鈕，彈出一個瀏覽圖庫子視窗
選取後點選圖片
將圖片插入編輯區，關閉瀏覽圖庫視窗 (實際程式流程為相反)

實際上的操作就是按一下工具列按鈕，然後按一下圖片這兩下

關鍵點

1	window.opener.CKEDITOR.instances['id_NOTE'].insertHtml('ccc');

—

編輯時和前端顯示相同 CSS 結果

config.js

1	config.contentsCss = '../../css/modern-business.css';

—

554 total views, no views today

開啟 CentOS 的 Mail SMTP 認證

Posted on 2015-08-11 by hoyo

搞這個是因為要用 PHPMailer 發信，PHP 和 Mail Server 不同台，所以必須使用 SMTP auth 進行發信。

參考

CentOS 6 Mail Server 設定(一) —> Postfix 設定

1	yum install cyrus-sasl-md5 cyrus-sasl-plain cyrus-sasl

vi /etc/postfix/main.cf

smtpd_sasl_auth_enable = yes

smtpd_sasl_security_options = noanonymous

broken_sasl_auth_clients = yes

重新啟動服務

1	/etc/init.d/saslauthd restart

–

362 total views, 1 views today

hoyo 學習紀錄

PHP 網頁應用 IOT 物聯網自動化

Monthly Archives: 8 月 2015

Command Line 執行 PHP, 等同

等同或是別名 alias

Apache Token

jQuery – DatePicker

jQuery UI Datepicker 增加時間 Timepicker

選取一週

關閉某個星期

CKEditor 4.5.3 之初步使用

為什麼是 CKEditor ?

如何使用

使用 Ajax 上傳都是未更新前的資料問題

拖曳圖檔至編輯區

實際運用的情況

使用 Plugins

自訂 Plugin : 以瀏覽圖檔點選後直接插入為例

編輯時和前端顯示相同 CSS 結果

開啟 CentOS 的 Mail SMTP 認證