2015年6月23日 星期二

TSQL 簡易教學

 SQL仍是目前關聯式資料庫的主流之一，可以簡化網頁程式碼的複雜度，例如增加一個欄位存放某計算過後的欄位值，就能減輕程式每次重複計算的演算過程，以下只是簡單示範如何使用CURSOR和FEACH

步驟1: 宣告變數
DECLARE @FileName char(30), @OrgFileName char(30),@FileSubName varchar(4),
@FilePath nchar(150)  //預計要跑cursor的暫存變數值
DECLARE @realFileName char(30) //暫存結果欄位的值

步驟2: 宣告cursor的模式
DECLARE my_cursor CURSOR FOR
SELECT 檔名,原檔名,副檔名,檔案路徑 from servfile   //說明: my_cursor會逐筆從servfile 取值
OPEN my_cursor   

FETCH NEXT FROM my_cursor
INTO @FileName,@OrgFileName, @FileSubName,@FilePath   
//說明:從servfile 的資料開始取值，依序從檔名、原檔名、副檔名、檔案路徑 逐一填值到變數中

WHILE @@FETCH_STATUS = 0 
BEGIN
//在此段落中敘述SQL的判斷或演算

FETCH NEXT FROM my_cursor
INTO @FileName,@OrgFileName, @FileSubName,@FilePath   
//繼續往下取值
END
CLOSE my_cursor;
DEALLOCATE my_cursor;


步驟3: 寫相關的SQL判斷式


    為了取得A資料表的『檔名』和『路徑』存入B資料表中，但A資料表的檔名有分『原檔名』和『檔名』，如果原檔名不為空時，檔名就依『原檔名』為主，反之就依『檔名』為主。

l   A資料表 


















l   B資料表

















範例程式

IF(RTRIM(@OrgFileName) <> '') 
        set @realFileName = RTRIM(@OrgFileName)
ELSE
         set @realFileName = RTRIM(@FileName)
update servfile_notice set 顯示檔名= RTRIM(@realFileName)+'.' + RTRIM(@FileSubName),存放路徑= RTRIM(@FilePath) where 檔名=@FileName

全部的SQL語法
DECLARE @FileName char(30), @OrgFileName char(30),@FileSubName varchar(4), @FilePath nchar(150)
DECLARE @realFileName char(30)
DECLARE my_cursor CURSOR FOR
SELECT 檔名,原檔名,副檔名,檔案路徑 from servfile

OPEN my_cursor   
 
FETCH NEXT FROM my_cursor
INTO @FileName,@OrgFileName, @FileSubName,@FilePath     

WHILE @@FETCH_STATUS = 0
BEGIN
      
     IF(RTRIM(@OrgFileName) <> '')
        set @realFileName = RTRIM(@OrgFileName)
     ELSE
         set @realFileName = RTRIM(@FileName)

     update servfile_notice set 顯示檔名= RTRIM(@realFileName)+'.' + RTRIM(@FileSubName),存放路徑= RTRIM(@FilePath) where 檔名=@FileName
          
     FETCH NEXT FROM my_cursor
     INTO @FileName,@OrgFileName, @FileSubName,@FilePath       
END

CLOSE my_cursor;
DEALLOCATE my_cursor;

    感謝各位的到訪，希望大家喜歡我的文章

補充說明:

        在很多的情況下會用到SubQuery，會影響效能要謹慎使用，以下範例是用於一對多的資料表情況下，A資料表只想JOIN 另一個資料表中合約日期最大的一筆，以下僅供參考~

select  p.產品代碼,p.產品名稱,c.合約迄日 from product  p
                            left join (
                            select
                                     b.產品代碼,
                                     max(b.合約迄日) as 合約迄日
                           from asuser A LEFT JOIN contract B
                           on (a.索引編號=b.索引編號) where a.索引編號=@index group by b.產品代碼 ) as c
                           on(p.產品代碼=c.產品代碼)
張貼者： 於 沒有留言:
標籤：

2015年6月17日 星期三

如何傳遞參數到POST協定的網址

    因為案子特殊需求，需要透過POST協定與其他廠商間接資料，所以針對這議題，作者想用簡單的教學，教大家如何用POST協定在Server端口設定，以及在client端的呼叫post的方法。

Server端:

    用c# Web API就能自動產生POST協定，但記得在POST協定傳回值改為object 才能接收來自JSON格式的參數

  public object Post([FromBody] object value)
  {
      return value;
  }

Client端:

var httpWebRequest = (HttpWebRequest)WebRequest.Create("http://localhost:55285/api/values");
httpWebRequest.ContentType = "application/json";  //傳輸格式如果為JSON
httpWebRequest.Method = "POST";
using (var streamWriter = new StreamWriter(httpWebRequest.GetRequestStream()))
{
string str1 = "key";
string str2 ="value";
string json = "{\""+str1+"\":\""+str2+"\"}";  // 接收參數值
streamWriter.Write(json);
streamWriter.Flush();
streamWriter.Close();
}

  var httpResponse = (HttpWebResponse)httpWebRequest.GetResponse();
  using (var streamReader = new StreamReader(httpResponse.GetResponseStream()))
   {
         var result = streamReader.ReadToEnd();                   
         Newtonsoft.Json.Linq.JObject obj = (Newtonsoft.Json.Linq.JObject)Newtonsoft.Json.JsonConvert.DeserializeObject(result);

         var objName = obj["Name"].ToString();
         textBox1.Text = objName;  
   }



張貼者： 於 沒有留言:
標籤：

2015年6月11日 星期四

Html5+Css3 初體驗

 許多人對Html5都不陌生，但CSS3 帶來更多驚喜，原本複雜的javascript 才能寫出來的特效，竟然不用寫一行程式，也能達到一樣的效果，作者用之前codova的範例，將畫面重新改版後，同樣也能在手機上呈現豐富的特效。

l   漸層色: -webkit-linear-gradient(bottom , #abd3ee, white);

作者以藍色海洋為構想，所以將背景以藍色漸層方式呈現，越往上顏色就越
淡，讓人感覺色彩更加豐富，如果想改變漸層的角度，可以把bottom改為其他的值，目前所知的參數如下left、top 、right、bottom ，還有組合式:left top、bottom right，如果都不符合期待的話還有直接輸入角度喔。

<style>
        body {
            width:400px;
            height:600px;
//從底層產生漸層效果，由藍色越往上越來越淡，直到白色為止。
            background: -webkit-linear-gradient(bottom , #abd3ee, white) no-repeat ; 
        }   
</style>
請參考http://www.w3schools.com/css/css3_gradients.asp

l   點選的行為: #button:hover, button:active

手機並沒有hover的行為，所以用active 代替，讓使用者有種按下按鈕
的體驗，才不會使用者一直重複點選。

        #button {
            position: fixed;           
            background-image: url('images/photoshop-icon.png');
            top: 480px;
            left: 0px;
            background-color: #abd3ee;
            border-radius: 100px 100px;
            width: 100px;
            height: 100px;
        }

        #button:hover, button:active {
            width: 130px;
            height: 130px;
            background-image: url('images/camera.png');
            background-repeat: no-repeat;               
            cursor: pointer;
       }

l   繪圖: cycle.arc(圓心X軸, 圓心Y軸,半徑, 起始角度 * Math.PI, 結束角度 * Math.PI, false);

首先要在html中插入<convas></convas>，就能透過javascript
繪製幾何圖形，作者用圓形來做示範教學，根據以下的圖示是各角度的起始點，比方的圖示，就是從0度到1.5度的圓弧，各位一定很好奇，如果想把下面的缺角補滿，角度該從多少到多少?  可不要被騙喔~ 是0到2.0, 正如同0度和360度都是同一角度，回到原點。




<style>
#seaweed {          
            width:300px;
            height:300px;           
            position:fixed;
            top:400px;
            left:130px;
}
</style>
<canvas id="seaweed"></canvas>
<script>
        drawSeaweed();
        function drawSeaweed() {
            var convas = document.getElementById("seaweed");
            var cycle = convas.getContext("2d");
            var radius = 30; //半徑
//開始繪圖
            cycle.beginPath();
cycle.arc(40, 30, radius, 0.5 * Math.PI, 1.5 * Math.PI, false); //左上半圓
cycle.arc(40, 90, radius, 0.5 * Math.PI, 1.5 * Math.PI, false); //左下半圓
            cycle.arc(40, 30, radius, 1.5 * Math.PI, 0.5 * Math.PI, false); //右上半圓
            cycle.arc(40, 90, radius, 1.5 * Math.PI, 0.5 * Math.PI, false); //右下半圓
            cycle.fillStyle = "green"; //綠色顏色
            cycle.fill();//填滿區塊
            cycle.strokeStyle = "block"; //外框線為黑色
            cycle.stroke();//外框線實心線
        }       
    </script>

l   動畫 : @-webkit-keyframes

這是讓靜態的圖片，也能活生生動起來的魔術語法喔，只要在from的區塊
中， 輸入狀態A的CSS樣式內容，然後在to的區塊中，輸入狀態B的CSS樣式內容，就能從狀態A變化到狀態B，不論是移動座標、改變顏色、都十分容易上手，以下的參數就是說明如果完成動畫效果。

-webkit-animation-name: 執行的動畫名稱
-webkit-animation- duration: 執行動畫時間
-webkit-animation-iteration-count: 執行動畫次數 (infinite 不限次數)

<style>
   /* The animation code */
   @-webkit-keyframes example {
       from {
          background: -webkit-radial-gradient(white, rgba(158, 226, 218, 0.73) , rgba(158, 226, 218, 0.73)  );
        }
       to {
          width:80px;
          height:80px; 
           top: 100px;
           background:-webkit-radial-gradient( rgba(0, 0, 100, 0.01) , rgba(0, 0, 100, 0.01) , rgba(158, 226, 218, 0.73) );
           }
        }     
  #bubble {            
            border-radius:100px 100px;
            position:fixed;
            top:400px;
            left:30px;
            width:30px;
            height:30px;                       
            background: -webkit-radial-gradient(white, rgba(158, 226, 218, 0.73) , rgba(158, 226, 218, 0.73)  );
            -webkit-animation-name: example;
            -webkit-animation-duration: 6s;
            -webkit-animation-iteration-count: infinite;
        }
</style>
<div id="bubble"></div>


l   轉角度 : -webkit-transform

作者構想把拍攝的照片轉7度，讓畫面看起來看加生動活潑，所以另要加上
box-shadow 陰影的效果，讓視覺感覺有點立體感…

<style>
   #image {
            top:30px;
            left:30px;
            width:200px;
            height:300px;
            -webkit-transform: rotate(7deg);
            background-color:white;
            box-shadow:3px 3px 5px 6px #ccc
        }

        #takePicture {
            position:relative;
            top:35px;
            left:35px;
            width:185px;
            height:250px;
            -webkit-transform: rotate(7deg);
            border: inset 4px #2bc4c4 ;
        }
</style>
<div id="image">
    <img id="takePicture" />
</div>


完成的成果



































泡泡會動喔~ 各位們有感覺到泡泡的夢幻嗎? 如果有人對拍照的功能有興趣的話，可以參考 『Codova 如何上傳圖片到Server』 ， 它說明如何透過codova 呼叫硬體的相機API，拍照後顯示在圖框上，感謝各位的到訪~


張貼者： 於 沒有留言:
標籤： ,
訂閱： 文章 (Atom)