最小物聯網系統（五）——Laravel RESTful模板化

Phodal發表於2014-03-06
LaravelREST

下面這部分來自於之前的部落格，這裡就不多加論述了。

這個也就是我們要的模板，

修改Create() 

    public function create()
    {
        $maxid=Athomes::max('id');
        return View::make('athome.create')->with('maxid',$maxid);
    }


這裡需要在app/views/建立一個athome裡面建立一個create.blade.php，至於maxid，暫時還不需要，後面會用到show。如果只需要模板，可以簡化為

    public function create()
    {
        return View::make('athome.create');
    }


這裡只是對其中程式碼的進行一下說明。

建立表單

建立表單之前

由於使用到了bootstrap以及bootstrap-select，記得新增css。 
        <link rel="stylesheet" type="text/css" href="<?= url('css/bootstrap.min.css') ?>" />
        <link rel="stylesheet" type="text/css" href="<?= url('css/bootstrap-select.min.css') ?>" />

以及javascript 
<script type="text/javascript" src="<?= url('js/jquery.min.js')?>"></script>
<script type="text/javascript" src="<?= url('js/bootstrap.min.js') ?>"></script>
<script type="text/javascript" src="<?= url('js/bootstrap-select.min.js') ?>"></script>
<script>
 $('.selectpicker').selectpicker();
 </script>

建立表單

這裡用到的是之前提到的那個作者寫下的，稍微修改了一下。 
  <div class="row-fluid">
    {{ HTML::ul($errors->all()) }}
    {{ Form::open(array('url' => 'athome')) }}

       <div class="form-group">
            {{ Form::label('led1', '開關1') }}
            {{ Form::select('led1',array('關','開'),$selected=NULL,array('class'=>'selectpicker')) }}

        </div>

        <div class="form-group">
            {{ Form::label('sensors1', 'sensors1') }}
            {{ Form::text('sensors1', Input::old('sensors1'), array('class' => 'form-control')) }}
        </div>

        <div class="form-group">
            {{ Form::label('sensors2', 'sensors2') }}
            {{ Form::text('sensors2', Input::old('sensors2'), array('class' => 'form-control')) }}
        </div>

        <div class="form-group">
            {{ Form::label('temperature', 'temperature') }}
            {{ Form::text('temperature', Input::old('temperature'), array('class' => 'form-control')) }}
        </div>

        {{ Form::submit('Create!', array('class' => 'btn btn-primary')) }}

    {{ Form::close() }}

    </div>

開關一開始打算用checkbox，加上bootstrap-switch實現
 
ON OFF
 
弱弱地覺得還是沒掌握好的節奏，所以最後用select來實現。
還需要修改一下之前的create()，新增一行 
return Redirect::to('athome');

也就是新增完後，重定向到首頁檢視，最後例子給出的create如下 
        public function store()
    {
        $rules = array(
            'led1'=>'required',
            'sensors1' => 'required|numeric|Min:-50|Max:80',
            'sensors2' => 'required|numeric|Min:-50|Max:80',
            'temperature' => 'required|numeric|Min:-50|Max:80'
        );
        $validator = Validator::make(Input::all(), $rules);

        if ($validator->fails()) {
            return Redirect::to('athome/create')
                ->withErrors($validator);
        } else {
            // store
            $nerd = new Athomes;
            $nerd->sensors1       = Input::get('sensors1');
            $nerd->sensors2       = Input::get('sensors2');
            $nerd->temperature    = Input::get('temperature');
            $nerd->led1              = Input::get('led1');
            $nerd->save();

            Session::flash('message', 'Successfully created athome!');
            return Redirect::to('athome');
        }
    }

編輯edit

完整的blade模板檔案 

<!DOCTYPE html lang="zh-cn">
<html>
      <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="keywords" content="">
        <meta name="viewport" content="width=device-width">
        <meta name="description" content="">
        <title>@yield('title')</title>
        <link rel="stylesheet" type="text/css" href="<?= url('css/bootstrap.min.css') ?>" />
        <link rel="stylesheet" type="text/css" href="<?= url('css/bootstrap-select.min.css') ?>" />
        <link rel="stylesheet" href="<?= url('css/justified-nav.css') ?>" type="text/css" media="screen" />
    </head>
<body>


<div class="container">

<div class="container">
  <div class="row-fluid">

<h1>Edit {{ $athome->id }}</h1>

<!-- if there are creation errors, they will show here -->
{{ HTML::ul($errors->all()) }}

{{ Form::model($athome, array('route' => array('athome.update', $athome->id), 'method' => 'PUT')) }}

        <div class="form-group">
            {{ Form::label('led1', '開關1') }}
            {{ Form::select('led1',array('關','開'),$selected=NULL,array('class'=>'selectpicker')) }}

        </div>

        <div class="form-group">
            {{ Form::label('sensors1', '感測器1') }}
            {{ Form::text('sensors1', Input::old('sensors1'), array('class' => 'form-control')) }}
        </div>

        <div class="form-group">
            {{ Form::label('sensors2', '感測器2') }}
            {{ Form::text('sensors2', Input::old('sensors2'), array('class' => 'form-control')) }}
        </div>

        <div class="form-group">
            {{ Form::label('temperature', '溫度感測器') }}
            {{ Form::text('temperature', Input::old('temperature'), array('class' => 'form-control')) }}
        </div>


    {{ Form::submit('Edit the Nerd!', array('class' => 'btn btn-primary')) }}

{{ Form::close() }}

    </div>
</div>


<div class="footer">
        <p>© Company 2013</p>
      </div>
</div>

</div>
<script type="text/javascript" src="<?= url('js/jquery.min.js')?>"></script>
<script type="text/javascript" src="<?= url('js/bootstrap.min.js') ?>"></script>
<script type="text/javascript" src="<?= url('js/bootstrap-select.min.js') ?>"></script>
<script>
 $('.selectpicker').selectpicker();
 </script>
<script type="text/javascript" src="<?= url('js/log.js') ?>"></script>


</body>
</html>


首頁index

參考之前的Laravel+Angularjs+D3打造視覺化資料,RESTful+Ajax。
怎樣？
Powerful RESTful

相關文章