mouseon 放大圖片

HTML:

< img src="image.png" width="90%" class="resizableImage" >

JQUERY:


$('.resizableImage').hover(makeBigger, returnToOriginalSize);
function makeBigger() {
     $(this).css({height: '+=10%', width: '+=10%'});
 }
 function returnToOriginalSize() {
     $(this).css({height: "", width: ""});
 }

PHP & ajax

$.ajax({
url: '//www.gocar.idv.tw/tset/test.php',
cache:false,
async:false,
type: "POST",
dataType: 'json',
data: '&key='+key ,
success: function (data) {
$.each(data, function(index, val) {
});
}, error:function(msg){
alert('錯誤!'+msg);
}
});

[PHP]MySQL Temporary Table

function create_tmp_table($tmp_table,$tmp_col){
	drop_tmp_table($tmp_table); // 使用前先刪除
	$sql_str = '';
	foreach($tmp_col AS $k => $v){
		$sql_str .= "$k $v,";
	}
	$sql = "CREATE TEMPORARY TABLE $tmp_table ( 
			ID INT NOT NULL AUTO_INCREMENT,
			$sql_str
			tmp_create_time datetime,
			PRIMARY KEY(ID)
		)"; //建立暫存table
	$result  = mysqli_query($conn,$sql);
}

function ins_tmp_table($tmp_table,$arr){
	foreach($arr AS $k => $v){
		$sql_str .= "$k = '$v',";
	}
	$sql = "INSERT INTO $tmp_table  SET $sql_str tmp_create_time = NOW()";
	$result  = mysqli_query($conn,$sql);
}

function drop_tmp_table($tmp_table){
	$sql = "DROP TEMPORARY TABLE IF EXISTS $tmp_table "; 
	$result  = mysqli_query($conn,$sql);
}
$tmp_table = 'tmp_tablename'; // 前面要加 tmp_,避免誤刪正式table
$tmp_col = array( // 設定欄位
	'col1' => 'varchar(20)',
	'col2' => 'varchar(10)',
	'the_time' => 'datetime'
);

$arr[col1] = 'hello';
$arr[col2] = 'world';
$arr[the_time] = 2019-01-01 00:00:00;
ins_tmp_table($tmp_table,$arr); // 寫入臨時表
/*
SELECT * FROM tmp_table 
*/
drop_tmp_table($tmp_table); // 用完記得要刪除

[PHP]檔案上傳

HTML:

<!DOCTYPE html>
<html>
<body>

<form action="upload.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
</form>

</body>
</html>

PHP 程式碼

// 可以取自己想要的檢查使用
$uploadOk = 1; // 若為0代表檢查失敗
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
$target_dir = "uploads/"; // 存放檔案的目錄
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]); // 上傳檔案的檔名
//$target_file = $target_dir .date("YmdHis").".".$imageFileType; // 也可以自訂檔名

// 檢查上傳檔案是否為圖檔
if(isset($_POST["submit"])) {
	$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
	if($check !== false) {
		//echo "File is an image - " . $check["mime"] . ".";
		$uploadOk = 1;
	} else {
		echo "很抱歉,檔案非圖檔.";
		$uploadOk = 0;
	}
}
// 檢查檔案是否重複
if (file_exists($target_file)) {
	echo "檔案已存在";
	$uploadOk = 0;
}

// 檢查檔案大小
//if ($_FILES["fileToUpload"]["size"] > 8000000) {
//	echo "很抱歉,,檔案太大.";
//	$uploadOk = 0;
//}

// 檔案格式檢查
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif" ) {
	echo "很抱歉,檔案格式錯誤";
	$uploadOk = 0;
}


if ($uploadOk == 0) { // 回報上傳失敗
	echo "很抱歉,檔案上傳失敗";
	
} else { // 確認檔案沒問題,就將檔案由暫存區搬移至正式區
	if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
		echo "檔案 : ". basename( $_FILES["fileToUpload"]["name"]). " 上傳成功";
	} else {
		echo "很抱歉,檔案上傳失敗";
	}
}

[PHP] PHPExcel 檔案匯入

首先我們要先下載PHPExcel
PHPExcel Github https://github.com/PHPOffice/PHPExcel

程式碼:

include_once("/phpexcel/PHPExcel/IOFactory.php");
$file = "upload/test.xlsx";

//$sheetname = 'mysheet'; // 如果要指定工作表
//$objReader->setLoadSheetsOnly($sheetname);

$type = PHPExcel_IOFactory::identify($file); //自動偵測檔案格式
//$type = 'Excel2007'; //也可以手動指定
$objReader = PHPExcel_IOFactory::createReader($type);
$objPHPExcel = $objReader->load($file); //讀取檔案

echo ' 欄數: ' . $getHighestColumn = $objPHPExcel->setActiveSheetIndex()->getHighestColumn(); // 取得寬有幾格
echo ' 行數: ' . $getHighestRow = $objPHPExcel->setActiveSheetIndex()->getHighestRow(); // 共有幾行

// 設定資料區間,設定寬度區間為AC(29格),行數則是取 $getHighestRow,如果不要第一行標題可以把A1改為A2跳過第一行
$range = "A1:AC".$getHighestRow; 

// 不設區間,把所有資料取出
//$sheetData = $objPHPExcel->getActiveSheet()->toArray(null, true, true, true); 

//取出區間資料(陣列)
$sheetData = $objPHPExcel->getActiveSheet()->rangeToArray($range);

print_r($sheetData);

foreach($sheetData AS $k => $v){ // 在此作匯入處理
	// INSERT DB
}

[PHP]取得字串中的數字

大部分的人都會用 preg_replace 正規表達式的方法清除數字以外的字元
不過其實可以用filter_var會比較直覺

$str = 'ABC123DEF';
$number = filter_var($str, FILTER_SANITIZE_NUMBER_INT);
echo $number; // 顯示123的字串

其實 filter_var 可以透過替換掉後方的 “FILTER_SANITIZE_NUMBER_INT” 參數做很多用途,可以參考PHP手冊的參數說明 https://www.php.net/manual/en/filter.filters.php

WP Plugin開發 (2)-Plugin 後台建立設定頁

通常開發時會做的第一件事就是建立後台頁面
這邊先貼出完整檔案
詳細說明可以參考 https://codex.wordpress.org/Creating_Options_Pages

<?php
/**
 * Plugin Name:       My Frist Plugin
 * Plugin URI:        http://www.gocar.idv.tw/plugins/MyFristPlugin/
 * Description:       我的第一個Plugin
 * Version:           1.0
 * Author:            Henry Tsai
 * Author URI:        http://www.gocar.idv.tw/
*/

// 執行建立選單function
add_action('admin_menu', 'my_frist_plugin_create_menu');

function my_frist_plugin_create_menu() {
    // 加入左方選單
    add_menu_page('My Frist Plugin Settings', 'My Frist Plugin', 'administrator', __FILE__, 'my_frist_plugin_settings_page' , plugins_url('/images/icon.png', __FILE__) );

    // 執行欄位註冊function
    add_action( 'admin_init', 'register_my_frist_plugin_settings' );
}

function register_my_frist_plugin_settings() {
    //向 wordpress 註冊要儲存的欄位
    register_setting( 'my-frist-plugin-settings-group', 'new_option_name' );
    register_setting( 'my-frist-plugin-settings-group', 'some_other_option' );
    register_setting( 'my-frist-plugin-settings-group', 'option_etc' );
}

function my_frist_plugin_settings_page() {
?>
<div class="wrap">
<h1>My Frist Plugin</h1>

<form method="post" action="options.php">
    <?php settings_fields( 'my-frist-plugin-settings-group' ); ?>
    <?php do_settings_sections( 'my-frist-plugin-settings-group' ); ?>
    <table class="form-table">
        <tr valign="top">
        <th scope="row">New Option Name</th>
        <td><input type="text" name="new_option_name" value="<?php echo esc_attr( get_option('new_option_name') ); ?>" /></td>
        </tr>

        <tr valign="top">
        <th scope="row">Some Other Option</th>
        <td><input type="text" name="some_other_option" value="<?php echo esc_attr( get_option('some_other_option') ); ?>" /></td>
        </tr>

        <tr valign="top">
        <th scope="row">Options, Etc.</th>
        <td><input type="text" name="option_etc" value="<?php echo esc_attr( get_option('option_etc') ); ?>" /></td>
        </tr>
    </table>

    <?php submit_button(); ?>

</form>
</div>
<?php } ?>

這邊對程式內容用到的function做說明

add_action () 執行function
https://developer.wordpress.org/reference/functions/add_action/

add_action('admin_menu', 'my_frist_plugin_create_menu');
為什麼會用 add_action 來執行 function?
這跟WordPress的Hook機制有關,簡單來說,WP有很多程式區塊,想要讓function在特定區塊執行時就要透過Hook的方式執行
這段指的就是在 admin_menu 這個程式區塊執行 my_frist_plugin_create_menu 這個 function
add_action( 'admin_init', 'register_my_frist_plugin_settings' ); 也是類似原理,
主要是在admin_init時向WP註冊使用欄位
有機會會再對WP的Hook機制另闢文章說明,有興趣可以先google 會有很多相關說明

add_menu_page() 新增選單
https://developer.wordpress.org/reference/functions/add_menu_page/

add_menu_page('頁面標題', '選單顯示的名稱', '允許看到的權限',別名,產生頁面的Function,前面的icon圖);
頁面標題指的是後台頁面的<title>My Frist Plugin Settings</title>
icon尺寸則是要128x128
如果要子選單的話可以參考add_submenu_page():https://developer.wordpress.org/reference/functions/add_submenu_page/

建立設定參數

register_setting() 註冊設定參數
https://developer.wordpress.org/reference/functions/register_setting/

register_setting( '群組名稱', '欄位名稱' );
一開始我們要先註冊要使用的欄位,所以建立了register_my_frist_plugin_settings() function 並在當中設定3個欄位 
function register_my_frist_plugin_settings() { 
  register_setting( 'my-frist-plugin-settings-group', 'new_option_name' );
  register_setting( 'my-frist-plugin-settings-group', 'some_other_option' );
  register_setting( 'my-frist-plugin-settings-group', 'option_etc' ); 
}
function my_frist_plugin_settings_page() 
首先建立 my_frist_plugin_settings_page 這個 function來負責產生頁面

form 表單設定:

  <form method="post" action="options.php">  
表單資料只要送給 options.php ,不用SQL語法 WP 就會自動幫我們處理資料
所以表單開頭要設定
settings_fields( '群組名稱' );
do_settings_sections( '群組名稱' ); 
這樣 options.php 才知道我們要處理的是哪個欄位群組

然後再建立 input 並透過 get_option('new_option_name') 取得欄位目前所儲存資料
<input type="text" name="new_option_name" value="<?php echo esc_attr( get_option('new_option_name') ); ?>" /> 
最後再加入 submit_button(); submit 按鈕 
這樣就完成簡單的後台介面

WP Plugin開發 (1)-Plugin 起始設定

文章參考:https://codex.wordpress.org/Writing_a_Plugin

檔案&目錄

建立Plugin第一件事就是命名,要取一個獨一無二的外掛名稱,不然跟別的名稱衝到就會發生慘案了
Plugin的資料夾是在 wp-content/plugins/ 
如果我的Plugin名稱為 MyFristPlugin
就在 wp-content/plugins/ 中建立一個資料夾 MyFristPlugin
然後在資料夾中建立一個 MyFristPlugin.php 的主程式

readme.txt

如果要把自己的plugin發布上傳到官網給大家下載,包裝檔案內一定要包含readme.txt

readme.txt 範本:https://wordpress.org/plugins/readme.txt

更改後可以透過驗證器檢查內容
https://wordpress.org/plugins/developers/readme-validator/

更多發布細節請參考:https://wordpress.org/plugins/developers/

MyFristPlugin.php 的檔案開頭一定要加上 File Headers 自我介紹
Header設定可以參考:https://developer.wordpress.org/plugins/plugin-basics/header-requirements/

<?php
/**
 * Plugin Name:       My Frist Plugin
 * Plugin URI:        http://www.gocar.idv.tw/plugins/MyFristPlugin/
 * Description:       我的第一個Plugin
 * Version:           1.0
 * Author:            Henry Tsai
 * Author URI:        http://www.gocar.idv.tw/
*/

?>

通常 Header 除了自我介紹外還會加入版權宣告
https://developer.wordpress.org/plugins/plugin-basics/including-a-software-license/

所以完整的Header就像這樣

/**
 Plugin Name:       My Frist Plugin
 Plugin URI:        http://www.gocar.idv.tw/plugins/MyFristPlugin/
 Description:       我的第一個Plugin
 Version:           1.0
 Author:            Henry Tsai
 Author URI:        http://www.gocar.idv.tw/

 {Plugin Name} is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation, either version 2 of the License, or
 any later version.
  
 {Plugin Name} is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 GNU General Public License for more details.
   
 You should have received a copy of the GNU General Public License
 along with {Plugin Name}. If not, see {License URI}
*/

設定好後在已安裝的外掛清單中就可以看到剛儲存的外掛


環境配置:

一般plugin資料夾中我會建立下列目錄
同時會用 plugin_dir_path() & plugins_url() 來做路徑的設定

wp-content/plugins/MyFristPlugin
wp-content/plugins/MyFristPlugin/includes
wp-content/plugins/MyFristPlugin/js
wp-content/plugins/MyFristPlugin/css
wp-content/plugins/MyFristPlugin/images

利用 plugin_dir_path() 來 include 檔案:

define('MY_FRIST_PLUGIN_PATH', plugin_dir_path( __FILE__ )); // plugin所在目錄
define('MY_FRIST_PLUGIN_PATH_INCLUDES',MY_FRIST_PLUGIN_PATH.DIRECTORY_SEPARATOR.'includes'.DIRECTORY_SEPARATOR); // include 檔所在目錄

require_once MY_FRIST_PLUGIN_PATH_INCLUDES . 'function.php'; // 載入檔案

利用 plugins_url() 載入 js 檔或 css

<link rel='stylesheet' id='my-css' href='<?php echo plugins_url( '/css/my.css' , __FILE__ ); ?>'>' type='text/css' media='all' />
<script type='text/javascript' src='<?php echo  plugins_url( '/js/script.js' , __FILE__ ); ?>'></script>

基本的環境配置好了,下一步就開始製作程式囉