您的位置:首页 > 编程语言 > PHP开发

[李景山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 布局模版

代码如下图

<!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 bootstrap github 布局
相关文章推荐