nlstudio7197x

google authenticator驗證教學

google authenticator驗證
可以在各語系下實行,C#,java
最近剛好在使用php,於是便有下列範例供參考

相信大家玩遊戲為了防止自己辛苦拿到的道具被偷走,
都有用過 google authenticator 來做進一步帳號登入

其中邏輯非常簡單 , 取得 google api return 的 code
用該code與手機上取得的 6位數字拼出一個結果

可以在google search任一個 git 下載
PHPGangsta/GoogleAuthenticator 其實裡面有一個 example code寫的很清楚
這裡底下看到是我重新改過符合現實的狀況

我們準備三支 php 檔案

//input.php
<form method="post" action="verif.php"> 
   <input type="text" name="inputAuth">
   <input type="submit" name="submit" value="Submit"> 
</form>

//verif.php
<?php

require_once '../PHPGangsta/GoogleAuthenticator.php';

$ga = new PHPGangsta_GoogleAuthenticator();

$checkResult = $ga->verifyCode("K12QLNQAICOTOP6C", $_REQUEST['inputAuth'], 1);// 2 = 2*30sec clock tolerance    
if ($checkResult) {
    echo 'OK';
} else {
    echo 'FAILED';
}

//getAuth
<?php

require_once '../PHPGangsta/GoogleAuthenticator.php';

$ga = new PHPGangsta_GoogleAuthenticator();

$secret = $ga->createSecret();
echo "Secret is: ".$secret."\n\n<br>";
//得出key(手動輸入)

$qrCodeUrl = $ga->getQRCodeGoogleUrl('Blog', $secret);
echo "Google Charts URL for the QR-Code: ".$qrCodeUrl."\n\n<br>";
//得出QrCode(手動輸入)
?>

這邊透過google api 可以產出 key , 跟 QrCode , 都可以在手機app設定上輸入
當然QrCode輕鬆多了不用輸入Key

每一次從手機上得到的 6位數字與 api 產生的 key

K12QLNQAICOTOP6C可以得出一個參數便是結果囉

CSS loading動畫

作者這邊分享幾個相當不錯以css來製作 loading 動畫的公開源碼的站台

要注意拿到 code 要再小小加工一下
為div 給它一個 id 方便 js 隱藏控制


<div id="c3" class="spinner" style="z-index: 999;visibility:hidden">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
</div>

在 css 裡面補上 ,使它可以跨越html結構,位移到自己想要的位置顯示

#c3{

    top:33%;
    left:27%;
    position:fixed;

}

http://www.css-spinners.com/

http://projects.lukehaas.me/css-loaders/

http://tobiasahlin.com/spinkit/

城堡與巨龍( CASTLE&DRAGON/城とドラゴン)

在這邊特別介紹一款手遊
城堡與巨龍( CASTLE&DRAGON/城とドラゴン)
無意間在Qoo發現,但仔細一查其實在 2015/2就已發行
是一款相較於現代塔防遊戲戰鬥算是小有創意一款手遊
簡單,輕鬆,無負擔的,無法沉迷的的一款遊戲

雖無法像其他遊戲一般靠著蠻幹日以繼夜的衝等
,但它有著其他遊戲沒有的特殊魅力

(1).肉來源(雞,種蘋果)應該是蘋果? ,
肉的用處 :
1.用來提升部份功能升級金錢上限
2.提升防禦相關上限
3.提升兵種武器防具升級
4.攻城搶奪需支付相對應的肉

肉的上限要提升,環環相扣就是需要憑著金幣

(2).金幣 , 用來支付各種兵種升級,防禦工事,肉類上限提升
每天記得點擊右邊寶箱 ,有時候會出現幾顆鑽石

(3).研究所 : 研發兵種裝備武器 , 裡面有各種兵種,兵種的來源增加,是藉由購買蛋孵化產生
孵化出來的兵種,便可以在研究所內進行研發武器與裝備,要注意的是武器與裝備的研發
是需要兵種等級到達一定才可以進行研發的喔,有些則是需要研究所等級到達才可

可以看到每次研發都需要蠻長一段時間(大部份都是落在1小時 - 4小時間)
一次只能研發一種,所以基本上點下去研發後,就可以去休息了)

(4).訓練場 : 訓練兵種的地方,可以隨時更換,兵種的等級上限也是需要藉由提升項目
隨之才可以練至最高等級 , 兵種頭上冒出綠色泡泡(表示該兵種訓練有一定成果 )
超過該等級之數字便提升等級 , 在研究裡找到新的武器與裝備項目

花費金幣提升兵種等級上限

當然如果你等不及,也可以花費鑽石來快速提升訓練

(5).好友 : 一開始沒有好友(趕緊去新增)不但會送鑽石,兵種還可以與好友相練成長
下圖可以看到,已經新增好幾個好友,

這裡注意,可以與朋友訓練時,朋友的訓練場會冒出驚嘆號,點擊選擇你要訓練
的兵種即可,與朋友訓練的次數是藉由上方玉(時間到會變成綠色)有點像攻城
時紅色的玉,綠色的玉增加亦可使用鑽石來增加

(6).購物車 : 畫面左下角有一個長的購物車的按紐 ,
可以購買孵化兵種所需的蛋(如下圖)
有一些蛋是限定時間販賣
其他兵種的蛋都是2天換一次(不用怕買不到,下一次會再輪到)
大約是2000CP - 5000CP左右(當然也可用鑽石購買)

那至於要買那些蛋好用呢?
可以參考網路上準備好的資料

(7).主城升級 : 畫面左上角會看到自己的主城等級
每一次升主城等級就會送3000CP(購買蛋的點數)

而升級主城的方法
1.兵種提升等級
2.孵蛋孵化完成
3.與朋友訓練勝利有機會提升

(8).攻城搶奪 : 點擊畫面右下角兩把刀的按紐便可進入攻城(又可分單人與多人)

每日都有提供固定與它人玩家連線獲得鑽石的獎勵

攻城前 : 通常我會選擇比自己等級低或接近自己等級主城的玩家或電腦AI
除非是肉多到沒地方花,亦可挑戰越級玩家

剛開始進入時會叫你選擇一個你一定要用的角色,通常我會選擇狀況良好
(上面有表示圖示),其他角色則是從剩下的角色中隨機選出
接著就開始需在10秒內配置好進攻或防守的兵種
(在黃色線內 ),黃色線會隨著進攻城 ( 前線則隨之推進 )

網路youtube上亦有許多影片參考
ゲームプレイ 03 マタンゴアーチャー中心

攻城前先偷看一下敵方兵力的配置

最後結算時會以你攻城占下的城數,與損傷程度百分比換算成金幣給您

更多的賺金幣技巧(參考youtube影片)
簡易高效100%搶錢法

(9).基本設定與防禦工事(換裝) :
在村莊右上角點擊會出現四個圖案
1.換裝(研發後可以在這邊換裝備)
2.主城目前排行
3.防禦工事佈置(當敵人來打你時陣行)
4.基本設置(音效畫面提醒 ... )

在做表單更新update時常會使用到的JQuery技術

本篇為紀錄 , 為解決
在做Form表單更新時,不換頁要做Update之狀況
在一般情況要做Update有幾種方法

1.按下編輯(Update)時將資料塞到URL,讓php或其他語言收變數
2.直接在原地表格變成input欄位,修改完直接原表單送出
3.第三種就是作者紀錄該方法,透過 JQuery將資料找到塞到我們想要的欄位裡

假設在同一頁面包含了已接收DB資料並且已塞到欄位表格中,代碼如下:

<html>

      <tr>
            <td>123</td>
            <td>456</td>
            <td>789</td>
            <td>
            <button type="button" onclick="updatePanel();" >編輯</button>
            </td>
            <input type="hidden" class="hidden1" value="666"  />
      </tr>
</html>

我們想要將這些資料,在我們按下編輯(Update)時,送到編輯的欄位
讓使用者方便編輯上次已填好的資料做修改,代碼如下:

<html>
     <div class="Update Form" aria-hidden="false">
      
          <li><input type="text" name="InputField1" /></li>
          <li><input type="text" name="InputField2" /></li>
          <li><input type="text" name="InputField3" /></li>
          <input type="hidden" id="InputField4" name="old_PermID"  />
     </div>
</html>

接著是JS代碼 updatePanel 的部份,如下:

<head>

      <script type="text/javascript">

 $('table tbody').on('click', 'td button', function () {
   
   var tr = $(this).closest('tr');
          document.getElementById("InputField1").value= tr[0].cells[0].innerText;//123
          document.getElementById("InputField2").value= tr[0].cells[1].innerText;//456
          document.getElementById("InputField3").value= tr[0].cells[2].innerText;//789
          document.getElementById("InputField4").value= 
          $(this).closest('tr').find('input.hidden1').val();//666
        });
      </script>
</head>

在 table tbody 內 , 最靠近 td ul button的按紐發出onclick事件便觸發,
tr[0].cells[0].innerText; 透過類似樹狀結構找到內容,將資料塞到我們指定Id標籤

這裡注意看其實我們還有偷偷傳送一個隱藏input欄位,有一些資訊不能被使用者修改
像更新或刪除的索引值,藉著隱藏欄位傳遞,
可以透過藉由 find('input.password'),找到指定的標籤與class name,便可找到其中的值

其中的用法非常多樣化,這裡只是舉例其中部份,有興趣可以再至官網深入探討

另外要注意的是作者發現在使用 Firefox 或 其他瀏覽器 時
底下這樣寫法造成瀏覽器不支援


tr[0].cells[0].innerText;//123

( only for chrome , IE )

而全面改用以下 , 或是將資訊利用for迴圈去繞update的html結構


 document.getElementById("InputField4").value= 
          $(this).closest('tr').find('input.hidden1').val();//666
( only for chrome , Firefox , IE )

About Call to a member function domain() on a non-object

About Laravel 5 After use Form::open occur some error

error : Call to a member function domain() on a non-object

FatalErrorException in UrlGenerator.php line 440:
Call to a member function domain() on a non-object
in UrlGenerator.php line 440
at HandleExceptions->fatalExceptionFromError(array('type' => '1', 'message' => 'Call to a member function domain() on a non-object', 'file' => '/home/nl/Laravel/vendor/laravel/framework/src/Illuminate/Routing/UrlGenerator.php', 'line' => '440')) in HandleExceptions.php line 116
at HandleExceptions->handleShutdown()

The Follow are solve

1.install command -> composer create-project laravel/laravel

2.composer update

3.composer require illuminate/html

4.composer dump-autoload

5.php artisan clear-compiled
  php artisan optimize

6.
Add to the app.php providers array:
    'Illuminate\Html\HtmlServiceProvider',


Add to the app.php aliases array:
    'Html'      => 'Illuminate\Html\HtmlFacade',
    'Form'      => 'Illuminate\Html\FormFacade',

7.in route 

 Route::any('/LoginCheck', 'LoginCheckController@index');

8.
注意 namespace路逕

<?php namespace App\Http\Controllers;

use Illuminate\Support\Facades\Redirect;

class LoginCheckController extends Controller {

如果有使用 \Redirect; 記得要 use


9.in view 

{!! Form::open(array('action' => 'LoginCheckController@index', 'method' => 'post')) !!}
 {!! Form::close() !!}

Bootstrap 資源

Bootstrap Grid排版教學
http://kimix.name/bootstrap-rwd-%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95%E5%8F%8A%E5%8E%9F%E7%90%86/

Bootstrap 線上排版器
http://www.layoutit.com/

Navbar配色器
http://work.smarchal.com/twbscolor/

Bootstrap 選擇Select 下拉
http://silviomoreto.github.io/bootstrap-select/

彈跳(對話)視窗分享code
http://codepen.io/DawsonMediaD/pen/byDqv
http://nakupanda.github.io/bootstrap3-dialog/#available-options

Alert 視窗分享code
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-alerts.php

利用jquery做的dataTable
https://datatables.net/examples/styling/bootstrap.html

Js在Bootstarp應用
http://www.bootstrap.vvvvv.tw/javascript.html#modals

參考影音教學
https://www.mokoversity.com/course/html5/bootstrap-html5-intro

Bootstrap Notify套件
http://bootstrap-growl.remabledesigns.com/
http://jquery-plugins.net/pines-notify-notifications-for-bootstrap-or-jquery-ui

在雲端寫程式(代碼)

runnable
http://code.runnable.com/

可撰寫C++,php,java,node等
可直接寫完編譯線上直預覽看結果
未來教學可移至該平台

JSFIDDLE
http://jsfiddle.net

另一個雲端寫code地方專門寫html,css,ajax

ActionScript - Netstream , netstream bytesLoaded , Kbit/s計算

netstream 在讀取視頻流量
網路查到方法是用 Netstream.bytesLoaded
實際上該方法只能用在讀取外部媒體.flv使用

若是讀取rmtp視頻串流
請使用


var nevbyte:Number=0;
var sum:Number;
var kbit:int;

var clockTimer:Timer = new Timer(1000,0);
clockTimer.addEventListener(TimerEvent.TIMER,onTick);
clockTimer.start();


function onTick(event:TimerEvent)
{   

    sum = Play_ns.info.byteCount - nevbyte;
    kbit=sum/1024;
    trace(kbit);
    panel.byteload_txt.text = String(kbit);
    nevbyte=Play_ns.info.byteCount;

}

Laravel -view與Controller參數傳遞與回應

Laravel -view與Controller參數傳遞與回應

前台網頁的操作不外乎就是靜態頁面view,下操作後
將參數傳遞給Controller(邏輯)判斷後發送給api,
得到回應結果,再將結果整理丟給view過程

以下實作view與Controller傳遞參數簡單範例

這邊簡單做一個login
1.在view準備一個叫loginEx.blade.php
尾巴有blade字眼才可使用Laravel自訂義一些方法
像底下代碼form改由{{ Form::open(array 就是


<html>

<head>

    

</head>

<body>



{{  Form::open(array('action'=>'LoginCheckController@check', 'method' => 'post')) }}      

<div >

    <div>    

    account:<input type="text"    class="form-control" id=""                      name="acc"/>

    pwd:    <input type="password" class="form-control" id="exampleInputPassword1" name="pwd"/>

    <button type="submit" class="btn btn-default">Submit</button>    

    </div>

</div>

{{ Form::close() }}



<!--  input type 屬性可參考  -->

<!--  http://www.w3schools.com/tags/att_input_type.asp   -->

<?php



    $msg = Session::get('msg');





    if( $msg =="Success")
    {

        echo "loginSuccess";
    }

    if( $msg =="Fail")
    {    

        echo "something wrong";
    }

    if (Session::has('message'))

    {

        Session::forget('message');

    }


?>

</body>

</html>

{{ Form::open(array('action'=>'LoginCheckController@check
是Laravel自訂義方法呼叫 Controller中的方法,將原本form中的name參數帶入
,而待會從 Controller回傳回來時是以session型態回傳

2.在Controller準備一隻叫 LoginCheckController.php


<?php

class LoginCheckController extends BaseController {


    
    public function check()
    {
        
        
/*         $acc = Input::get("acc");
           $pwd = Input::get("pwd"); */
        
         $rules = array(
                'acc'    => 'required|alphaNum|min:5', 
                'pwd'    => 'required|alphaNum|min:6' 
        );
    
        
        $validator = Validator::make(Input::all(), $rules);
        
        if ($validator->fails()) {
            
            $output = "Fail";
            return Redirect::to('loginEx')->with('msg', $output);
            
        }else{
            
            /* {....call login api } */
            $success = true;
            if($success)
            {
                $output = "Success";
                return Redirect::to('loginEx')->with('msg', $output);
            }else{
                $output = "Fail";
                return Redirect::to('loginEx')->with('msg', $output);
            }
            
            
    
    }

Controller接值使用Input::get("acc");
並且對所有Input參數做驗證 Validator::make(Input::all()
required|alphaNum|min:5
意義為必要輸入,且為字母數字,最小長度5

判斷成功與否會透過br /> return Redirect::to('loginEx')->with('msg', $output);
將結果回應至目標頁面

Laravel -view 視圖篇

基礎noSQL連接與實作

基礎noSQL連接與實作
Client連接基礎語法實測兩種
注意以下作法無關framework , laravel & Phalcon作法相同
1. yaCassandrapdo 2.phpCass

1. yaCassandrapdo
連接方法


$setting = 'cassandra:host=10.20.30.222;port=9160;cqlversion=3.0.0';

$username = "";
$password = "";

$db = new PDO($setting, $username, $password);

建立資料表


Route::get('api/pdo_cass/create' , function(){
 
 $db->exec ("CREATE KEYSPACE yapdo WITH REPLICATION = 
 {'class' : 'SimpleStrategy', 'replication_factor': 1}");

}) ;

SQL查詢


Route::get('api/pdo_cass/get' , function(){

 $setting = 'cassandra:host=10.20.30.222;port=9160;
        cqlversion=3.0.0';

 $username = "";
 $password = "";

 $db = new PDO($setting, $username, $password);

 $db->exec ("USE \"nl_keyspace\";");
 
 $result = $db->query("SELECT * FROM account")->fetchObject();
 
 var_dump($result) ;
 
}) ;

插入資料 & 更新資料


Route::get('api/pdo_cass/insert' , function(){
 
 $setting = 'cassandra:host=10.20.30.222;port=9160;
        cqlversion=3.0.0';
 
 $username = "";
 $password = "";
 
 $db = new PDO($setting, $username, $password);
 
 $db->exec ("USE \"nl_keyspace\";");

 $db->exec("INSERT INTO test (id, map_test) 
        VALUES (1, {'val1': 2, 'val2': 1, 'val3': 3});");
         //注意若插入key值等同原來值,就會自動將之後欄位值更新
}) ;

刪除資料


Route::get('api/pdo_cass/delete' , function(){
 
 $setting = 'cassandra:host=10.20.30.222;port=9160;
        cqlversion=3.0.0';
 
 $username = "";
 $password = "";
 
 $db = new PDO($setting, $username, $password);
 
 $db->exec ("USE \"nl_keyspace\";");
 
 $db->exec("DELETE FROM MastersOfTheUniverse 
        WHERE mastersID IN ('Man-At-Arms', 'Teela');");

}) ;

phpCass


$servers = array("10.20.30.222:9160" , "10.20.30.223:9160") ;
$pool = new ConnectionPool("devKeyspace" , $servers) ;

建立資料表


$sys = new SystemManager('127.0.0.1');
$sys->create_keyspace('Keyspace1', array(
"strategy_class" => StrategyClass::SIMPLE_STRATEGY,
"strategy_options" => array('replication_factor' => '1')
));

// Use composites for column names and row keys
$sys->create_column_family('Keyspace1', 'Composites', array(
"comparator_type" => "CompositeType(LongType, AsciiType)",
"key_validation_class" => "CompositeType(AsciiType, LongType)"
));

SQL查詢


Route::get('api/cass/get ' , function()
{
 $servers = array("10.20.30.222:9160", "10.20.30.223:9160" ) ;

 $pool = new ConnectionPool("nl_keyspace" , $servers) ;

 $column_family = new ColumnFamily($pool, "table_name");

 $result = $column_family->get('key');
 
 echo $result["col"];
 echo $result["value"];
 
 foreach($result as $key => $columns) {
  print_r($columns."
");
 }
});

插入資料 & 更新資料


Route::get('api/cass/insert_update' , function()
{
 $servers = array("10.20.30.222:9160", "10.20.30.223:9160" ) ;

 $pool = new ConnectionPool("nl_keyspace" , $servers) ;

 $column_family = new ColumnFamily($pool, "a3");

 $result = $column_family->insert( 'a4' , array('col' => '100' ,'value'=>'4444') ) ;
    //注意若插入key值等同原來值,就會自動將之後欄位值更新
});

刪除資料


Route::get('api/cass/delete' , function()
{
 $servers = array("10.20.30.222:9160", "10.20.30.223:9160" ) ;

 $pool = new ConnectionPool("nl_keyspace" , $servers) ;

 $column_family = new ColumnFamily($pool, "table_name");

 $result = $column_family->remove('key');

});

Laravel 路由對資料庫操作

Laravel 路由對資料庫操作

藉由路由夾帶參數輸入再透過邏輯轉呼叫資料庫
回應結果內容 , 有沒有發現,這好像就是api

是的,本來要拿 Laravel做api ,但因一些緣故最後又放棄使用
退回到傳統的 php架構上

查詢(1) : 一般SQL寫法 app/route.php


Route::get('api/test/openlist/get/{limit?}' , function($limit = 50)

{
  $result = DB::select("SELECT * FROM OpenList where id = ?" 
  , array(1) );
  return Response::json($result) ;
});


Route::get('api/test/openlist/get/{limit?}' , function($limit = 50)

{
  $result = DB::select("SELECT * FROM OpenList where id = ? 
  AND serverid = ?", array(1,54671) );
  //欲查詢變數順序,依array內容順序

  return Response::json($result) ;
});

查詢(2) : 物件寫法 app/route.php


DB::table(“OpenList”)->get();//查詢所有


DB::table("OpenList")->take(5)->get(); // 只查5筆


DB::table('users')->where('name', ‘uccu’)->get(); 
// 查name欄位值為uccu的資料


DB::table('roles')->lists('title', 'name');
//查roles裡的title,name欄位


$users = DB::table('users')

                    ->where('votes', '>', 100)

                    ->orWhere('name', 'John')

                    ->get();

插入(1):一般sql寫法 add/route.php


Route::get('api/sqlcmd/insert/' , function()
{
DB::insert('insert into users (id, name) 
values (?, ?)', array(1, 'Dayle'))
});

插入(2): 物件寫法 app/route.php


Route::get('api/sqlcmd/insert/' , function($limit = 50)
{
 DB::table("users")->insert( array('name' => 'hahaha' , 
        'email'=> 'hahaha@gmail.com') );
 //一次插入一筆資料
 DB::table('users')->insert(array(
 array('email' => 'taylor@example.com', 'votes' => 0),
 array('email' => 'dayle@example.com', 'votes' => 0),
 ));
 //一次插入多筆資料
 
});

更新(1):一般sql寫法 add/route.php


Route::get('api/sqlcmd/update/' , function($limit = 50)
{
 DB::update('update users set votes = 100 where 
        name = ?', array('John'));
});

更新(2):一般sql寫法 add/route.php


Route::get('api/sqlcmd/update/' , function($limit = 50)
{
 DB::table('users')->where('name', ‘hahaha’)->
        update(array('name' => ‘uccuu’, 'email' => 'uccuu@gmail.com'));
});

刪除(1):一般sql寫法 add/route.php


Route::get('api/sqlcmd/delete/' , function()
{
 DB::delete('delete from users');
});

刪除(2): 物件寫法add/route.php


Route::get('api/sqlcmd/delete/' , function($limit = 50)
{
 DB::table('users')->where('votes', '<', 100)->delete();
 
 DB::table('users')->delete();
 
 DB::table('users')->truncate();
});

Laravel 路由

Laravel 路由

使用了 Laravel 一段時間,將其心得分享紀錄在此,供網友參考

(1).註冊一個基本的 route 透過 get 方法傳送至根目錄( / ) 得到的回應
直接反回字串


Route::get('/', function()
{
    return 'Hello World';
});

(2).也可以透過 post 或是 any (GET、POST、PUT及DELETE)


Route::get('/con/get', function()
{
    return 'Hello World';
});


Route::any('/con/any', function()
{
    return 'Hello World';
});

當code確實打完後,應該可以在瀏覽器輸入
http://your.ip(or domain)/con/get 看到結果

(3)路由亦可以夾帶參數

Route::get('user/{id}', function($id)
{
    return 'User '.$id;
});

(4).有預設值的路由參數


Route::get('user/{name?}', function($name = 'John')
{
    return $name;
});

?表該項參數可選擇亦可不填寫

(5).自行設計條件過濾


Route::get('user/{age?}', function($age=null)
{
    if( $age  >200 )
    {  ........   }      
    else
    {  ........   }      
}));

(6)過濾條件亦可透過路由過濾
在 app/filter.php內


Route::filter('old', function()

{

    if (Input::get('age') > 200)

    {

        {......}

    }else{

        {......}

    }

});

在app/route.php內


Route::get('user', array('before' => 'old', function()

{

    return 'You are over 200 years old!';

}));

在瀏覽器輸入以下狀況時可以將其過濾

(7).路由前綴


Route::group(array("prefix" => "/api/") , function()
{
    
    Route::any("fun1" , function()
    {
        return View::make("fun1");
    });
    
    Route::any("fun2" , function()
    {
        return View::make("fun2");
    });
    
});

這時瀏覽網址便可輸入
http://nl.rg-laravel.com/api/fun1
http://nl.rg-laravel.com/api/fun2

(8).透過路由指向一個視圖頁面
這裡指的視圖就是view,可以把它想像成網站靜態頁面
該login會連結到 app/view/login.php


Route::any("login" , function()
{
    return View::make("login");
});

(9).輸入參數接值傳遞至view
可以觀察到路由後填寫的名子與其後變數名不用相同


Route::any("api2/{name}/{age}" , function($name1,$age1)
{

     $c1 = $name1;
     $c2 = $age1;


     return View::make("rgMain",array(
            'rgFactor'   => $c1 ,
            'rgContent'  => $c2


    ));
});

(10).透過路由來控制 Controller與其方法使用
以下內容表當路由連到 LoginCheck 會去呼叫 LoginCheckController 裡的 check 方法


Route::post('/LoginCheck', 'LoginCheckController@check )

(11).路由回應 json格式內容


Route::any("OpenList/Show/{gameName?}/{deskName?}" , function($gameName=null, $deskName=null)
{
    return Response::json(
        array(
                array("Round"  => "0120150129001" ,
                      "Inning" => "0001"          ,
                      "One"    => "11"            ,
                      "Two"    => "12"            ,
                      "Three"  => "13"            ,
                      "Four"   => "14"            ,
                      "Five"   => "15"            ,
                      "Six"    => "16"            ,
                      "Player" => "0"             ,
                      "Banker" => "0"             ,
                      "Winner" => "Tie")          ,

                array("Round"  => "0120150129001" ,
                      "Inning" => "002"           ,
                      "One"    => "21"            ,
                      "Two"    => "22"            ,
                      "Three"  => "23"            ,
                      "Four"   => "24"            ,
                      "Five"   => "25"            ,
                      "Six"    => "26"            ,
                      "Player" => "1"             ,
                      "Banker" => "1"             ,
                      "Winner" => "Player") ,
             )
        ) ;
});

(12).路由實作cache

 Route::get('api/test/openlist/cache/{limit?}' , function($limit = 50)
{
    $key = "k78ab1845";

    $content = Cache::get($key) ;

    if( $content )
    {
        //        Cache::forget($cql) ;
        echo "has cache = </br>" ;
    }
    else
    {
        echo "not cache = </br>" ;

        $content  = DB::table("OpenList")->take($limit)->get();
       
        Cache::forever($key , $content) ;
    }

    return Response::json($content) ;
});

(13)404事件


App::missing(function($exception)
{   

     return Redirect::to('http://');
});

(14)利用路由對資料庫做查詢回應結果內容


Route::get('api/test/openlist/get/{limit?}' , function($limit = 50)
{
    $result = DB::select("SELECT * FROM OpenList where id = ?" , array(1) );

    return Response::json($result) ;
});


Route::get('api/test/openlist/get/{limit?}' , function($limit = 50)
{
    $result = DB::select("SELECT * FROM OpenList where id = ? AND serverid = ?" , array(1,54671) );
//欲查詢變數順序,依array內容順序
    return Response::json($result) ;
});

關於路由對資料庫操作會另一寫一個篇幅做介紹

CSS + xHTML 網頁排版基礎教程

使用 xHTML(div系列標籤) 排版絕非因 table 排版不佳而使用
, table 與 div系列其實各自有其好處

這裡刻意強調 div系列標籤意指 ,
網站的構成並非單靠 div 建構

table 優點 :

    1.排版快速
    2.相容性高
    3.容易理解

      缺點 :

    1.程式碼與排版美術樣式混雜
    2.讀取速度較慢
    3.影響搜尋引擎結果

div 優點 :

    1.排版彈性高
    2.結構較大之網頁,事後修改容易
    3.讀取速度快
    4.提高搜尋引擎結果
    5.code簡潔

    缺點 :

    1.撰寫code較長,較花時間
    2.初學不易理解

單靠div建構缺點 :

    1.一個全是div結構,無法透過code看出其網站結構
    反倒是table,tr .td仍可看出來有行列之分

    2.影響日後維護

1.馬上來排版

    排版意味者我們希望一個空白的版面,可以切出我們想要的區塊
    填放我們要放的內容

    排版前注意
    我們試著把div想像成一個很大的區塊
    ul是其中部份區塊,而li又是其中更小的塊狀

    1.1.假設我們今天要來排最典型三個大並排區塊

    我們對 d-table , d-row加上紅線與藍線
    方便我們觀察區塊變化

    另外對 d-table 加上 height: 200px;
    方便我們對 d-table 區塊包覆情況觀察

 <style type="text/css">
    
    .d-table{
        border:1px solid red;
        height: 200px;
    }
    
    .d-row{

        border:1px solid blue;
    }</style>

<div class="d-table">
   
        <div class="d-row">
            <div class="d-col">第一個欄位</div>
            <div class="d-col">第二個欄位</div>
        </div>
   
        <div class="d-row">
            <div class="d-col">第三個欄位</div>
            <div class="d-col">第四個欄位</div>
        </div>
   
        <div class="d-row">
            <div class="d-col">第五個欄位</div>
            <div class="d-col">第六個欄位</div>
        </div>
 </div>

這時會看到由上而下排列,如下圖:

    仔細觀察,框架是由左側開始,但實際上並不是"真正的從左側開始"排列
    因此我們在樣式裡加上以下 float:left;

    .d-row{

        float:left;
        border:1px solid blue;

    }

    讓 d-row強制從左邊開始排列
    (正確來說應該是從左上角開始排列)
    可以看到下圖結果,三個區塊開始並排
    如果無法理解,試著想像一下,原本三個大區塊硬是要由上而下擠滿整個空間
    強制靠左後,由於內容寬度較短,由左擠至右,自然就變成三個並排區塊

    以此類推這樣的結構便可架構出自己想要的排版

    2.margin 和 padding 的使用

    各位有發現框線與框線間粘的好緊,我們希望都有其間距
    我們在 d-row 加上 margin : 5px;
    意思是由該區塊往外推的距離

    .d-row{

        float:left;
        border:1px solid blue;
        margin : 5px;

    }

如下圖:

在 d-table 加上 padding : 5px;
意思是該區塊邊線至內容的距離

    .d-table{

        border:1px solid red;
        height: 200px;
        padding : 5px;

    }

    如下圖:
    內容又受到 table往內壓縮之結果

    下圖中例子便可以看出
    1.對A來說,padding表往內壓縮 B框架的間距
    2.對B來說,padding表往內擠壓 B內容的間距
    3.對B來說margin往外推出與外層間的距離

事實上不管是 margin 或是 padding 還有上下左右之區分
用來控制"微調"重要的框架中內容元素的間距

    padding-top (上) 
    padding-right (右) 
    padding-bottom (下) 
    padding-left (左)

    margin-top (上邊界) 
    margin-right (右邊界) 
    margin-bottom (下邊界) 
    margin-left (左邊界)

    3.ul,li替代其中巢狀結構

    上述代碼全部都是以div建構而成,我們試著以ul,li
    替代後的結果變為

    <div class="d-table">
        <ul class="d-row1">
            <li class="d-col">第一個欄位</li>
            <li class="d-col">第二個欄位</li>
        </ul>

        <ul class="d-row2">
            <li class="d-col">第三個欄位</li>
            <li class="d-col">第四個欄位</li>
        </ul>


        <ul class="d-row3">
            <li class="d-col">第五個欄位</li>
            <li class="d-col">第六個欄位</li>
        </ul>
     </div>

    使用方法不變,但從code更能看出其結構性

    3.內容元素間的微調距離

    大架構抵定後就是對內容元素做些微調整
    不外乎就是透過 margin 與 padding 去對內容間距做微調
    達到我們想要的視覺效果

    注:使用li標籤在未給予css樣式前左邊會有一個黑圓圈
    賦予樣式後則消失


    在d-table我們加入     height   : 900px;

    .d-table{
        border   : 1px solid red;
        height   : 900px;
    }

對d-row1加入

        padding-top  : 40px;
        padding-left : 50px;

表示對d-row1框架上距與左距微調50px

並增加

     width    : 300px;
     height   : 800px;

    .d-row1{
        float    : left;
        border   : 1px solid blue;

        padding-top  : 50px;
        padding-left : 50px;

        width    : 300px;
        height   : 800px;
    };

    新增以下兩個樣式
    結構為 d-col1與2 ,為d-row1底下的兩個小區塊
    故意設間距不一樣,為了讓它看出其差異性
    可隨意控制不同兩個區塊特性

     .d-row1 .d-col1{

        padding-top  : 10px;
        padding-left : 20px;

    }

   
    .d-row1 .d-col2{
        padding-top  : 15px;
        padding-left : 25px;
    }

在框架結構裡也記得調整為底下

     <div class="d-table">

            <ul class="d-row1">
                <li class="d-col1">第一個欄位</li>
                <li class="d-col2">第二個欄位</li>
            </ul>

    代碼沒有問題的話,就會像下圖這樣



    注:
    (1)若css樣式未指定層級路徑

     .d-col1{
        padding-top  : 10px;
        padding-left : 20px;
    }

    css 樣式則會去尋找所有該標籤設定的組合設置
    若想要設置到對的區塊,應避免標籤重覆

    當然有時候,重覆標籤設計亦是為了後續維護便利性
    才可以調整一個全部都一起調整

    (2)若指定的css 為非人為賦予的,例如 li ,ul
    則標籤層級可以寫為
    (前面不加任何 . 與 # 囉)

     .d-row1 li{

    }

    (3)若有使用外部樣式連結時,修改其中一區塊中外部樣式內容
       其他內容若也有套用同樣樣式,則會一起被調整到

    4.id與class區別

    id為一頁面唯一的標示,用來定義特殊的元素內容
    就好比人的名子,一個屋子下一個人只會有一個名子
    用法與class一樣只是由原本的 .css{ } , 改為 #css{ }

    #css5 {height:25px; width: 200px;}

<div id="css5">我是ID例子</div>

    而class是一種樣式,就好比衣服可以套用在不同人身上

    概念上來說
    id是先找到結構/內容，再給它定義樣式；class是先定義好一種樣式，
    再套給多個結構/內容。
    歸納成一句話就是：class可以反複使用而id在一個頁面中僅能被使用一次

訂閱：文章 (Atom)