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計算


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在一個頁面中僅能被使用一次
       

    Bootstrap 基礎教學


    Bootstrap 基礎教學

    Bootstrap的優點
    1.容易上手
    2.效果齊全
    3.縮短開發自適應網頁時間

    缺點:
    1.使用過多時,又對css不熟悉者
    容易造成樣式混亂難以控管


    事實上本篇並非在教導 Bootstrap每一個元件如何使用
    而是給予指引,方便各位網友去線上查詢最新現有的方法
    來套用



    Bootstrap 簡單來說就是為內建的 html元件 加入豐富的css樣式


    從這種簡陋樣式









    變為









    1.首先先到 http://getbootstrap.com/css/









    下載基本 Bootstrap 套件
    如果不想下載就使用線上 bootstrap 亦可
    解壓縮放置到網頁伺服器資料夾下

    2.接下來我們做第一個範例
    <html>
    <head>

        <link href="/css/dist/css/bootstrap.min.css" rel="stylesheet">

        <style type="text/css">
       

        </style>

    </head>

    <body>
        <div class="frame" >
            <button type="submit" class="btn btn-sm btn-primary">SAVE
            </button>            
            <button type="submit" class="">SAVE</button>
        <div>

    </body>
    </html>


    首先就是建立一個link標籤把我們剛下載的Bootstrap套件匯入
    注意連結相對位置
    <link href="/css/dist/css/bootstrap.min.css" rel="stylesheet"></link>

    另外我們在button標籤上的class加上
    class="btn btn-sm btn-primary"
    這樣子做就是套用了bootstrap的style囉!
    比對原本的按鈕是沒有加上的


    那其實 Bootstrap的button樣式很多種可以挑選
    在官方首頁上方選擇 CSS 搜尋 Buttons tags便可找到
    許多按紐樣式,如下圖




































    LNMP 安裝

    LNMP 安裝

    LNMP 故名就是 Linux + Nginx + MariaDB +  php
    是當前提供網頁服務 最佳的組合

    原生 Linux Centos 安裝時是以 Apache為基礎下去安裝
    以效能極至考量 , 相對於 nginx 簡單輕巧




    先 ifconfig 查看是否有浮動ip


    若無浮動,又要遠端 ssh 登入,動態重新分配ip(注意需在虛擬機開機前,網路設定設bridge)
    sudo dhchient


    更新 yum
    yum update

    安裝nginx
    sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
    sudo yum install nginx


    把80 port打開
    /sbin/iptables -I INPUT -p tcp --dport 80 -j ACCEPT

    開啟 nginx 服務
    sudo systemctl start nginx.service


    安裝 php , mariaDB
    root # yum install httpd mariadb-server mariadb php php-mbstring php-mysql php-gd
    root # yum install wget unzip



    啟動 mariaDB
    root # systemctl start mariadb.service

    啟動 mariaDB(加在開機使用)
    root # systemctl enable mariadb.service

    設定 mariaDB帳密
    sudo mysqladmin -u root password 'your-password'

    Phalcon 安裝教學


    相對於 Laravel , Phalcon 安裝是很簡單的
    請依下列步驟安裝即可,直接用pietty 複製貼上簡單輕鬆的完成它

    此套 Phalcon 是安裝在 linux Centos 7.0
    若還未裝此之朋友,請至另一頁 Linux Centos 7.0安裝教學



    yum 更新 rpm 到最新

    yum -y install php-devel --enablerepo=remi (基本上是安裝這個 )

    //以下我沒裝
    yum -y install gcc make
    yum -y install php --enablerepo=remi
    yum -y install php-pear
    yum -y install mysql-devel



    安裝Phalcon Developper Tools
     git clone git://github.com/phalcon/phalcon-devtools.git
    $ sudo mv phalcon-devtools /usr/local/src
    $ cd /usr/local/src/phalcon-devtools
    $ . ./phalcon.sh 
    $ nano ~/.bash_profile



    //以下擺到任何位置皆可 安裝它
    $ yum install git
    $ git clone git://github.com/phalcon/cphalcon.git
    $ cd cphalcon/build
    $ ./install



    create 一個phalcon專案
    $ cd /var/www/html
    $ phalcon project phalconTest
    Phalcon DevTools (1.2.5)



    權限都開 (有人只開 app/cache)
    chmod -R 777 /var/www/html/phalconTest


    vi /etc/selinux/config
    檢查有無 phalcon.so
    $ ls /usr/lib64/php/modules/


    檢查 /etc/php.d/下是否有 phalcon.ini

    若無則去剛才下載的安裝檔裡面copy phalcon.ini 到  /etc/php.d
    cphalcon/unit-tests/ci/phalcon.ini

    檢查有無加載成功
    php -ini |grep Phalcon


    對create的phalcon資料夾 設定權限
    chmod -R 777 /var/www/html/phalconTest


    設定SELinux
    vi /etc/selinux/config
    由原本 #SELINUX=enforcing 改為 SELINUX=disabled

    SELinux是 Security Enhanced Linux (安全加強的 Linux) 的縮寫, 他並不是一個防火牆的軟體,而是一個『針對檔案系統權限作更細部規劃的一個模組』。

    輕鬆駕馭 Linux 必備工具




    1. MobaXterm ( 類似 pietty 但功能更強大 可以複製貼上 )

    2.

    Centos 7.0 安裝

    Bootstrap 快速製作 UI 的好幫手

    Bootstrap 是 快速製作 UI 的好幫手
    在無美術的其況下,工程師可利用現成的網頁元素套件
    但使用之必定牽入相對應搭配的CSS , 若不妥善使用 , 反而會使
    網頁架構代碼 越來越混亂

    Laravel 基礎介紹



    1.為什麼選擇 Laravel 當 php 框架 ?
    (1).開發者定期發怖新版
    (2).框架元件表示上較簡潔
    (3).官方文件齊,相關學習資源完整
    (4).推廣者多,社群資源龐大
    (5).套件多生態系完整



    2.架構與組成






    1.1.應用程式起始都在 start ,
    包含 artisan.php套件註冊與使用(目前用不上)

    Global.php 載入各重要元素視覺控制,錯誤與資訊紀錄等

    Local.php當執行環境為local時才會被使用

    1.2.app/routes.php 
    設定路由,透過路由設定指定URL轉向特定頁面或控制頁面,
    API
    介面設計亦透過此來做參數傳入設計

    1.3.app/config/
    設定資料庫,cache,session , view ,queue 等讀取套件相關資訊

    1.4.MVC
    Controller , 所有經路由轉向後指定邏輯存放位置,或轉向某一個視圖連結
    view ,
    存放靜態網頁相關視覺資訊

    Models , 將資料庫的資料表物件為類別使用,可在此新增

    1.5.libraries
    共用類別庫,自訂義類別可存放在此