[李景山php]每天laravel[020]-laravel 中级任务--小白教程----实际操作-创建基础任务 to-do-list 案例 ---视图
2017-03-30 08:49
831 查看
视图: 女人再有内涵!不漂亮,也没什么鸟用!
一个呈现魅力与智慧的地方!
我们需要我们的 任务首页呈现 这么多功能:
1 添加新任务
2 展示已有的任务
3 可以删除已有的任务。
备注:这里可能需要用到 bootstrap 的支持, 如果需要 下载 完整的演示,可以 前往 github 去下载相应的全部文件。
使用我们 高大尚的 laravel 视图 强烈建议使用 布局模版的方式。
第一步: 创建 父类布局模版
位于 resources/views/layouts/app.blade.php 布局模版
代码如下图
然后创建一个新的Task 任务处理的 视图来继承 这个 公共视图:位于 resources/tasks/index.blade
代码如下:
好的,到目前为止,我们的 任务列表的模版就准备完成了!哈哈,哈哈
一个呈现魅力与智慧的地方!
我们需要我们的 任务首页呈现 这么多功能:
1 添加新任务
2 展示已有的任务
3 可以删除已有的任务。
备注:这里可能需要用到 bootstrap 的支持, 如果需要 下载 完整的演示,可以 前往 github 去下载相应的全部文件。
使用我们 高大尚的 laravel 视图 强烈建议使用 布局模版的方式。
第一步: 创建 父类布局模版
位于 resources/views/layouts/app.blade.php 布局模版
代码如下图
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>laravel 中级任务</title> </head> <body> <div class="container"> <nav class="navbar navbar-default"> </nav> </div> @yield('content') </body> </html>
然后创建一个新的Task 任务处理的 视图来继承 这个 公共视图:位于 resources/tasks/index.blade
代码如下:
@extends('layouts.app') @section('content') <div class="panel-body"> @include('common') <form action="/task" method="POST" class="form-horizontal"> {{csrf_field()}} {{--Task Name--}} <div class="form-group"> <label for="task-name" class="col-sm-3 control-label">Task</label> <div class="col-sm-6"> <input type="text" id="task-name" name="name" class="form-control"/> </div> </div> {{--Add Task Button--}} <div class="form-group"> <div class="col-sm-offset3 col-sm-6"> <button type="submit" class="btn btn-default"> <i class="fa fa-plus"></i>Add Task </button> </div> </div> </form> </div> {{--Current Tasks--}} @if(count($task) > 0) <div class="panel panel-default"> <div class="panel-heading"> Current Tasks </div> </div> <div class="panel-body"> <table class="table tables-striped task-table"> <thread> <th>Task</th> <th> </th> </thread> <tbody> @foreach($tasks as $task) <tr> <td class="table-text"> <div>{{$task-name}}</div> </td> <td> <form action="/task/{{$task->id}}" method="post"> {{csrf_field()}} {{method_field('DELETE')}} <button>Delete Task</button> </form> </td> </tr> @endforeach </tbody> </table> </div> @endif @endsection
好的,到目前为止,我们的 任务列表的模版就准备完成了!哈哈,哈哈
相关文章推荐
- [李景山php]每天laravel[021]-laravel 中级任务--小白教程----实际操作-创建基础任务 to-do-list 案例 ---Task 任务处理控制器
- [李景山php]每天laravel[023]-laravel 中级任务--小白教程----实际操作-创建基础任务 to-do-list 案例 ---删除数据
- [李景山php]每天laravel[023]-laravel 中级任务--小白教程----实际操作-创建基础任务 to-do-list 案例 ---在主页上添加数据
- [李景山php]每天laravel[018]-laravel 中级任务--小白教程----实际操作-创建基础任务 to-do-list 案例 ---准备关系模型
- [李景山php]每天laravel[023]-laravel 中级任务--小白教程----实际操作-创建基础任务 to-do-list 案例 ---主页,亲爱的,我回来了!!
- [李景山php]每天laravel[019]-laravel 中级任务--小白教程----实际操作-创建基础任务 to-do-list 案例 ---路由
- [李景山php]每天laravel[023]-laravel 中级任务--小白教程----实际操作-创建基础任务 to-do-list 案例 ---登录,该死的登录
- [李景山php]每天laravel[017]-laravel 中级任务--小白教程----实际操作-创建基础任务 to-do-list 案例 ---准备数据库
- [李景山php]每天laravel[022]-laravel 中级任务--小白教程----实际操作-创建基础任务 to-do-list 案例 ---Task 任务处理控制器--显示主页
- laravel 中级任务--小白教程----实际操作-创建基础任务 to-do-list 案例 ---在主页上添加数据
- laravel 中级任务--小白教程----实际操作-创建基础任务 to-do-list 案例 --
- [李景山php]每天laravel[015]-laravel 中级任务--小白教程----实际操作-启动 laravel
- [李景山php]每天laravel[015]-laravel 中级任务--小白教程----实际操作-修改你的启动页面
- [李景山php]每天laravel[012]-laravel 中级任务翻译---创建 模版 及 视图
- [李景山php]每天laravel[015]-laravel 中级任务翻译---删除任务
- [李景山php]每天laravel[029]-laravel 基础知识 --- 视图
- [李景山php]每天laravel[007]-laravel 中级任务翻译---目录
- [李景山php]每天laravel[013]-laravel 中级任务翻译---添加任务
- [李景山php]每天laravel[011]-laravel 中级任务翻译---路由
- [李景山php]每天laravel[010]-laravel 中级任务翻译---数据库迁移