學習筆記本

2014年8月25日星期一

【PHP】JSON 使用

json(JavaScript Object Notation)：JSON 是個以純文字來儲存資料，
更好用的是將陣列或物件轉換成文字。

規則

陣列用[]，如：
array('php','javacript','jquery') 會變成：
["php","javacript","jquery"]

物件用{}，如
arry('name'=>'steven',tel=>'1234') 變成：
{"name":"steven,"tel":1234}

jquery 使用json

使用： $.parseJSON() 將json解譯
範例

  var str = '{"prodcut_id":"1234",
        "name":"鉛筆",
              "spec":["紅","綠","藍"]
              }';
  var result = $.pasrseJSON(str);
  alert(result.prodcut_id); // 印出1234
  alert(result.spec[0]); // 印出 紅

用$.post時可以指定回傳格視為json

  $.post("test.php",{name:$("#name").val()},function (result){
   alert(result.prodcut_id);
  },json);

PHP 使用json

編譯解譯分別為：json_encode、json_decode，
但為了操作方便可將物件解譯成array，
此時就要用json_decode($str,true);

  $arr = array("product"=>"1234","name"=>"鉛筆","spec"=>array("紅","綠","藍"));
  $str = json_encode($arr);
  
  $obj = json_decode($str); // 此時會變成 stdClass Object ( [product] => 1234 [name] => 鉛筆 [spec] => Array ( [0] => 紅 [1] => 綠 [2] => 藍 ) )
  $arr = json_decode($str,true); // 結果：Array ( [product] => 1234 [name] => 鉛筆 [spec] => Array ( [0] => 紅 [1] => 綠 [2] => 藍 ) )

【CSS】Reset CSS 將CSS歸零，符合各樣瀏覽器

css(Cascading Style Sheets)是用來設定網頁的樣式
但在不同瀏覽器有時相同語法呈現方式卻會不同
對於css有時候真的會很麻煩
這時可以用 Reset CSS 將css歸零
在css開始前加上：

   /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
    */
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
      display: block;
    }
    body {
      line-height: 1;
    }
    ol, ul {
      list-style: none;
    }
    blockquote, q {
      quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
      content: '';
      content: none;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }

來源：http://meyerweb.com/eric/tools/css/reset/

2014年8月19日星期二

【GitHub】windows 入門

GitHub 是一個線上版本控制的服務，
版本管控簡單的說就是防止別人改到你的程式和做程式還原，
寫程式很怕越寫越糟，想找上一個版本或是還原到昨天寫的內容，
這時就要使用版本控制。

1.申請帳號

先到 https://github.com/ 申請一個帳號

2.建立一個 repository

要勾選Publiec，Private要收費

3.下載 GitHub windows 的工具

找到 Clone in Desktop 並下載安裝

4.開啟剛剛安裝的GitHub，輸入帳號密碼並連線

5.新增一個目錄並建立檔案

6.當有新增或修改檔案時要給予備註及上傳

2014年8月15日星期五

【MSSQL】最近執行的SQL

查詢目前正在執行的SQL語法

SELECT TOP 200 qs.creation_time,last_execution_time-creation_time as time,text 
FROM sys.dm_exec_query_stats as qs
CROSS APPLY sys.dm_exec_sql_text(qs.sql_handle) as st
ORDER BY qs.creation_time DESC

SELECT      r.scheduler_id as 排程器識別碼,
            status         as 要求的狀態,
            r.session_id   as SPID,
            r.blocking_session_id as BlkBy,
            substring(
    ltrim(q.text),
    r.statement_start_offset/2+1,
    (CASE
                 WHEN r.statement_end_offset = -1
                 THEN LEN(CONVERT(nvarchar(MAX), q.text)) * 2
                 ELSE r.statement_end_offset
                 END - r.statement_start_offset)/2)
                 AS [正在執行的 T-SQL 命令],
            r.cpu_time      as [CPU Time(ms)],
            r.start_time    as [開始時間],
            r.total_elapsed_time as [執行總時間],
            r.reads              as [讀取數],
            r.writes             as [寫入數],
            r.logical_reads      as [邏輯讀取數],
            -- q.text, /* 完整的 T-SQL 指令碼 */
            d.name               as [資料庫名稱]
FROM        sys.dm_exec_requests r 
   CROSS APPLY sys.dm_exec_sql_text(sql_handle) AS q
   LEFT JOIN sys.databases d ON (r.database_id=d.database_id)
WHERE       r.session_id > 50 AND r.session_id <> @@SPID
ORDER BY    r.total_elapsed_time desc

SELECT
A.SESSION_ID,DB_NAME(A.DATABASE_ID) AS DATABASE_NAME,
A.START_TIME,A.COMMAND,A.CPU_TIME,
A.PERCENT_COMPLETE,A.ESTIMATED_COMPLETION_TIME,B.TEXT

FROM SYS.DM_EXEC_REQUESTS A
CROSS APPLY
SYS.DM_EXEC_SQL_TEXT(A.SQL_HANDLE)AS B
WHERE SESSION_ID > 50

看哪個語法最花時間

SELECT TOP 10 total_worker_time, last_worker_time, 
max_worker_time, min_worker_time,
SUBSTRING(st.text, (qs.statement_start_offset/2) + 1,
((CASE statement_end_offset 
WHEN -1 THEN DATALENGTH(st.text)
ELSE qs.statement_end_offset END 
- qs.statement_start_offset)/2) + 1) as statement_text
FROM sys.dm_exec_query_stats as qs
CROSS APPLY sys.dm_exec_sql_text(qs.sql_handle) as st
ORDER BY max_worker_time DESC

SELECT TOP 50
 [Average CPU used] = total_worker_time / qs.execution_count,
 [Total CPU used] = total_worker_time,
 [Execution count] = qs.execution_count,
 [Individual Query] = SUBSTRING (qt.text,qs.statement_start_offset/2, 
         (CASE WHEN qs.statement_end_offset = -1 
            THEN LEN(CONVERT(NVARCHAR(MAX), qt.text)) * 2 
          ELSE qs.statement_end_offset END - 
qs.statement_start_offset)/2)
,[Parent Query] = qt.text
,DatabaseName = DB_NAME(qt.dbid)
FROM sys.dm_exec_query_stats qs
CROSS APPLY sys.dm_exec_sql_text(qs.sql_handle) as qt
ORDER BY [Average CPU used] DESC;


WITH DB_CPU_Stats
AS
(SELECT DatabaseID, DB_Name(DatabaseID) AS [DatabaseName], 
  SUM(total_worker_time) AS [CPU_Time_Ms]
 FROM sys.dm_exec_query_stats AS qs
 CROSS APPLY (SELECT CONVERT(int, value) AS [DatabaseID] 
              FROM sys.dm_exec_plan_attributes(qs.plan_handle)
              WHERE attribute = N'dbid') AS F_DB
 GROUP BY DatabaseID)
SELECT ROW_NUMBER() OVER(ORDER BY [CPU_Time_Ms] DESC) AS [row_num],
       DatabaseName, [CPU_Time_Ms], 
       CAST([CPU_Time_Ms] * 1.0 / SUM([CPU_Time_Ms]) 
       OVER() * 100.0 AS DECIMAL(5, 2)) AS [CPUPercent]
FROM DB_CPU_Stats
WHERE DatabaseID > 4 -- system databases
AND DatabaseID <> 32767 -- ResourceDB
ORDER BY row_num OPTION (RECOMPILE);
SELECT 
substring(text,qs.statement_start_offset/2
,(CASE 
WHEN qs.statement_end_offset = -1 THEN len(convert(nvarchar(max), 
text)) * 2 
ELSE qs.statement_end_offset 
END - qs.statement_start_offset)/2) 
,qs.plan_generation_num as recompiles
,qs.execution_count as execution_count
,qs.total_elapsed_time - qs.total_worker_time as total_wait_time
,qs.total_worker_time as cpu_time
,qs.total_logical_reads as reads
,qs.total_logical_writes as writes
,last_execution_time
FROM sys.dm_exec_query_stats qs
CROSS APPLY sys.dm_exec_sql_text(qs.sql_handle) st
LEFT JOIN sys.dm_exec_requests r 
ON qs.sql_handle = r.sql_handle
ORDER BY total_wait_time DESC

2014年8月11日星期一

【PHP、Jquery】廣告計數

計算一個廣告被被點擊次數有兩種狀況

1.站內廣告

原理：當點擊時用ajax計數，範例：

<a href="7311.tw" class="st-ad" adid="10"></a>

<script>
// 廣告計數
$("a.st-ad").click(function (e){
  e.preventDefault();
  $this = $(this);
  $.post("aj_ad.php",
    {mod:'ad_statistics',ad_id:$(this).attr('adid')},
    function (){
      window.location = $this.attr('href');
  });
});
</script>

2.站外廣告

原理：先連結到一頁專門計數的頁面，再轉到連結頁面

2014年8月8日星期五

【PHP】取得圖片資訊 getimagesize

取得圖片資訊：

$size = getimagesize("圖片網址");
print_r($size);
// 結果
Array ( [0] => 414 [1] => 262 [2] => 2 [3] => width="414" height="262" [bits] => 8 [channels] => 3 [mime] => image/jpeg )

說明：

0:寬度 1:長度 2:檔案類型 3:寬度及高度

2:檔案類型有：

1 = GIF，2 = JPG，3 = PNG，4 = SWF，5 = PSD，6 = BMP，7 = TIFF(intel byte order)，8 = TIFF(motorola byte order)，9 = JPC，10 = JP2，11 = JPX，12 = JB2，13 = SWC，14 = IFF，15 = WBMP，16 = XBM

【SQL】優化搜尋

今天發現網站變慢，查了一下原因

1.量大需限定範圍:

資料大約50萬筆，抓最近5筆資料，多加了範圍限制快了10倍

$sql = "SELECT TOP(5) *
FROM page_log pl 
ORDER BY time DESC";

$s = microtime(time);
$result = $this->db->queryAll($sql);
$e = microtime(time);
echo $e - $s;

結果：0.605秒

$sql = "SELECT TOP(5) *
FROM page_log pl 
WHERE time > '20140807000000'
ORDER BY time DESC";

$s = microtime(time);
$result = $this->db->queryAll($sql);
$e = microtime(time);
echo $e - $s;

結果：0.07秒

2014年8月5日星期二

【CSS】寫完新版型的CSS心得

1.數字、錢字符號:

color: #ed3729;
font-size: 15px;
font-weight: bold;
font-family:Century Gothic, Arial, Helvetica, sans-serif,新細明體;

2.一般字體可用:

font-family: "微軟正黑體";
font-family:Arial, Helvetica, sans-serif,新細明體;

3.商品名稱如果有帶型號最好不要使用英文單字換行，會不整齊，文字太常可用css將他隱藏

word-break:break-all; 
height:36px;
overflow:hidden;

4.可用簡單標籤來簡化html像是 i b 但要先消除他的屬性:

i { font-style: normal; }
b { font-weight:normal; }

5.css3 漸漸普及可多用，例如圓角、陰影:

box-shadow:2px 2px 5px #999; // 陰影
border-radius:3px; // 圓角

6.用line-height可以將文字垂直置中不用padding:

height:36px;
line-height:36px;

7.圖片加文字圖片會太高可將圖片加上position:

position:relative;
top:9px;

8.連結標籤可當div用但要加上display:

a { display:block;}

9.除了ul li可以做選單多層選單可以再利用dl dt dd:

dl{
 margin:0px;
 padding:0px;
}
dt{
 margin:0px;
 padding:0px;
}
dd{
 margin:0px;
 padding:0px;
}

10.考慮SEO要加上H1、H2....:

h1,h2,h3 {
 padding:0px;
 margin:0px;
 font-weight:normal; 
}

11.可將好看的色碼記下來以後可以用

12.適度的用icon可讓版面更好看

2014年8月4日星期一

【Jquery】canvas繪圖1 - 矩形

畫矩形

Html:

<canvas id="myCanvas" width="100" height="100"></canvas>

Javascript:

$ele = $('#myCanvas').css({border: '1px solid #333'}).get(0);
// 不能使用CSS的width跟height 或在canvas標籤上寫長寬 也可不限制
$ele.width = 100; 
$cv = $ele.getContext('2d'); // 畫布環境 用Jquery要取得物件要加上get(0)
//$cv = document.getElementById('myCanvas').getContext("2d"); // 用document.getElementById的方法
$cv.fillStyle = "rgba(0,0,255,0.5)";
$cv.fillRect(0,0,50,50);
$cv.fillStyle = "rgba(255,0,0,0.8)";
$cv.fillRect(50,50,100,100);

結果:

2014年8月3日星期日

【Jquery】滑動選單

無標題文件

成品連結：演示

技巧1：

滑動選單基本上就在寫CSS，先用CSS寫出想要的樣子，要將子選項寫在選項當中
HTML:

  <div id="home-menu">
    <div class="title">全站分類/div>
    <div class="menu1">
      <li><a href="#"><h1>筆記型電腦</h1></a>
       <dl>
         <dt>
            <a href="#"><h2>ACER 宏碁</h2></a>
            <a href="#"><h2>ASUS 華碩</h2></a>
            <a href="#"><h2>HP 惠普</h2></a>
            <a href="#"><h2>LENOVO 聯想</h2></a>
            <a href="#"><h2>MSI 微星</h2></a>
          </dt>  
          <dt>
            <a href="#"><h2>文書上網</h2></a>
            <a href="#"><h2>輕薄時尚</h2></a>
            <a href="#"><h2>影音娛樂</h2></a>
            <a href="#"><h2>行動商務</h2></a>
            <a href="#"><h2>遊戲電競</h2></a>
            <a href="#"><h2>大尺吋</h2></a>
          </dt>
        </dl>
      </li>
      <li><a href="#"><h1>桌上型電腦</h1></a></li>
      <li><a href="#"><h1>平板電腦</h1></a></li>
      <li><a href="#"><h1>DIY 零組件</h1></a></li>
      <li><a href="#"><h1>儲存裝置</h1></a></li>
      <li><a href="#"><h1>週邊耗材</h1></a></li>
      <li><a href="#"><h1>印表機及耗材</h1></a></li>
      <li><a href="#"><h1>遊戲軟體</h1></a></li>
    </div>
  </div>

CSS:

h1,h2,h3 {
 padding:0px;
 margin:0px;
 font-weight:normal; 
}
a:link, a:visited {
 color:#5b5247;
  text-decoration: none;
}
a:hover {
 color:#5b5247;
  text-decoration: none;
}
li {
 list-style: none;
}
/****** home-menu:start ******/
#home-menu {
 width:160px;
 padding-left:10px;
 float:left;
}

#home-menu .menu1 a {
 padding-left:10px;
 list-style: none;
 margin-right:20px;
 color:#333;
 height:28px;
 padding-left:10px;
 padding-top:7px;
 display:block;
 font-size:15px;
 letter-spacing:1px;
}

#home-menu .menu1 h1 {
 font-size:15px;
}

#home-menu .title {
 border-bottom: 1px solid #999;
 height: 25px;
 color: #333;
 padding-left: 10px;
 font-weight: bold;
 margin-right:20px;
}

#home-menu .menu1 {
 padding-top:10px; 
}

#home-menu .menu1 a:hover{
 background: #A8FFFF;
}

#home-menu .line {
 border-bottom: 1px solid #999;
 margin:15px 0;
}

#home-menu .menu1 li {
 position:relative;
}

#home-menu .menu1 dl {
 position: absolute;
 top:-30px;
 left:140px;
 background-color:#FFF;
 border:1px solid #DDD;
 padding:10px 15px 5px 15px;
 min-width:160px;
 min-height:360px;
 box-shadow:2px 2px 5px #999;
 z-index:10;
 /*display:none;*/
}

#home-menu .menu1 dl a{
 margin:3px 0 0 0;
 padding:5px;
 font-size:15px;
 color:#333;
 display:block;
 height:auto;
}

#home-menu .menu1 dl h2{
 font-size:15px;
}

#home-menu .menu1 dl dd:hover{
 background: #A8FFFF;
}
/****** home-menu:end ******/

技巧2：

在把子選單隱藏，用JS讓她動

CSS：

#home-menu .menu1 dl {
 position: absolute;
 top:-30px;
 left:140px;
 background-color:#FFF;
 border:1px solid #DDD;
 padding:10px 15px 5px 15px;
 min-width:160px;
 min-height:360px;
 box-shadow:2px 2px 5px #999;
 z-index:10;
 display:none;
}

JS:

$("#home-menu .menu1 li").hover(function(){
  $(this).find("dl").show();
},function (){
  $(this).find("dl").hide();
});

訂閱：文章 (Atom)

2014年8月25日 星期一

2014年8月19日 星期二

2014年8月15日 星期五

2014年8月11日 星期一

2014年8月8日 星期五

2014年8月5日 星期二

2014年8月4日 星期一

2014年8月3日 星期日

成品連結：演示

筆記型電腦

ACER 宏碁

ASUS 華碩

HP 惠普

LENOVO 聯想

MSI 微星

文書上網

輕薄時尚

影音娛樂

行動商務

遊戲電競

大尺吋

桌上型電腦

平板電腦

DIY 零組件

儲存裝置

週邊耗材

印表機及耗材

遊戲軟體