Lesson 9: Layouts and structure.

app/Http/Controllers/PostsController.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Post;
+use Illuminate\Http\Request;
+
+class PostsController extends Controller
+{
+    public function index() {
+        return view('posts.index');
+    }
+
+    public function show(Post $post) {
+        return view('posts.show', compact('post'));
+    }
+}

app/Http/Controllers/TasksController.php

@@ -1,92 +0,0 @@
-<?php
-
-namespace App\Http\Controllers;
-
-use App\Task;
-use Illuminate\Http\Request;
-
-class TasksController extends Controller
-{
-    /**
-     * Display a listing of the resource.
-     *
-     * @return \Illuminate\Http\Response
-     */
-    public function index()
-    {
-        $name = 'Fred';
-        // $tasks = DB::table('tasks')->get();
-        $tasks = Task::all();
-
-        // Return a JSON response from the serialized results.
-        // return $tasks;
-
-        return view('tasks.index', compact('name', 'tasks'));
-    }
-
-    /**
-     * Show the form for creating a new resource.
-     *
-     * @return \Illuminate\Http\Response
-     */
-    public function create()
-    {
-        //
-    }
-
-    /**
-     * Store a newly created resource in storage.
-     *
-     * @param  \Illuminate\Http\Request  $request
-     * @return \Illuminate\Http\Response
-     */
-    public function store(Request $request)
-    {
-        //
-    }
-
-    /**
-     * Display the specified resource.
-     *
-     * @param  \App\Task  $task
-     * @return \Illuminate\Http\Response
-     */
-    public function show(Task $task)
-    {
-        return view('tasks.show', compact('task'));
-    }
-
-    /**
-     * Show the form for editing the specified resource.
-     *
-     * @param  \App\Task  $task
-     * @return \Illuminate\Http\Response
-     */
-    public function edit(Task $task)
-    {
-        //
-    }
-
-    /**
-     * Update the specified resource in storage.
-     *
-     * @param  \Illuminate\Http\Request  $request
-     * @param  \App\Task  $task
-     * @return \Illuminate\Http\Response
-     */
-    public function update(Request $request, Task $task)
-    {
-        //
-    }
-
-    /**
-     * Remove the specified resource from storage.
-     *
-     * @param  \App\Task  $task
-     * @return \Illuminate\Http\Response
-     */
-    public function destroy(Task $task)
-    {
-        //
-    }
-}

app/Post.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App;
+
+use Illuminate\Database\Eloquent\Model;
+
+class Post extends Model
+{
+    //
+}

app/Task.php

@@ -1,31 +0,0 @@
-<?php
-
-namespace App;
-
-use Illuminate\Database\Eloquent\Model;
-
-class Task extends Model
-{
-    /**
-     * Returns a collection, so cannot be chained.
-     *
-     * @return \Illuminate\Database\Eloquent\Collection|static[]
-     */
-    public static function incomplete_v0()
-    {
-        return static::where('completed', 0)->get();
-    }
-
-    /**
-     * Will answer to Task::incomplete() too but know it is a query scope.
-     *
-     * @param $query
-     *   The existing query.
-     *
-     * @return mixed
-     */
-    public function scopeIncomplete($query)
-    {
-        return $query->where('completed', 0);
-    }
-}

artisan → artisan

@@ -4,7 +4,7 @@ use Illuminate\Support\Facades\Schema;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Database\Migrations\Migration;
 
-class CreateTasksTable extends Migration
+class CreatePostsTable extends Migration
 {
     /**
      * Run the migrations.
@@ -13,11 +13,10 @@ class CreateTasksTable extends Migration
      */
     public function up()
     {
-        Schema::create('tasks', function (Blueprint $table) {
+        Schema::create('posts', function (Blueprint $table) {
             $table->increments('id');
-            $table->string('body');
-            $table->boolean('completed')
-                ->default(false);
+            $table->string('title');
+            $table->text('body');
             $table->timestamps();
         });
     }
@@ -29,6 +28,6 @@ class CreateTasksTable extends Migration
      */
     public function down()
     {
-        Schema::dropIfExists('tasks');
+        Schema::dropIfExists('posts');
     }
 }

public/css/album.css

@@ -0,0 +1,58 @@
+body {
+    min-height: 75rem; /* Can be removed; just added for demo purposes */
+}
+
+.navbar {
+    margin-bottom: 0;
+}
+
+.jumbotron {
+    padding-top: 6rem;
+    padding-bottom: 6rem;
+    margin-bottom: 0;
+    background-color: #fff;
+}
+
+.jumbotron p:last-child {
+    margin-bottom: 0;
+}
+
+.jumbotron-heading {
+    font-weight: 300;
+}
+
+.jumbotron .container {
+    max-width: 40rem;
+}
+
+.album {
+    min-height: 50rem; /* Can be removed; just added for demo purposes */
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+    background-color: #f7f7f7;
+}
+
+.card {
+    float: left;
+    width: 33.333%;
+    padding: .75rem;
+    margin-bottom: 2rem;
+    border: 0;
+}
+
+.card > img {
+    margin-bottom: .75rem;
+}
+
+.card-text {
+    font-size: 85%;
+}
+
+footer {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+}
+
+footer p {
+    margin-bottom: .25rem;
+}

resources/views/layouts/footer.blade.php

@@ -0,0 +1,10 @@
+<footer class="text-muted">
+    <div class="container">
+        <p class="float-right">
+            <a href="#">Back to top</a>
+        </p>
+        <p>Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>
+        <p>New to Bootstrap? <a href="../../">Visit the homepage</a> or read our <a href="../../getting-started/">getting started guide</a>.</p>
+    </div>
+</footer>
+

resources/views/layouts/master.blade.php

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <title>My application</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="/css/album.css" />
+</head>
+<body>
+    @include('layouts.nav')
+
+    <div class="container">
+        @yield('content')
+    </div>
+
+    @include('layouts.footer')
+</body>
+</html>

resources/views/layouts/nav.blade.php

@@ -0,0 +1,26 @@
+<div class="collapse bg-inverse" id="navbarHeader">
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-8 py-4">
+                <h4 class="text-white">About</h4>
+                <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
+            </div>
+            <div class="col-sm-4 py-4">
+                <h4 class="text-white">Contact</h4>
+                <ul class="list-unstyled">
+                    <li><a href="#" class="text-white">Follow on Twitter</a></li>
+                    <li><a href="#" class="text-white">Like on Facebook</a></li>
+                    <li><a href="#" class="text-white">Email me</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="navbar navbar-inverse bg-inverse">
+    <div class="container d-flex justify-content-between">
+        <a href="#" class="navbar-brand">Album</a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+    </div>
+</div>

resources/views/posts/index.blade.php

@@ -0,0 +1,65 @@
+@extends('layouts.master')
+
+@section('content')
+    <section class="jumbotron text-center">
+        <div class="container">
+            <h1 class="jumbotron-heading">My blog</h1>
+            <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
+            <p>
+                <a href="#" class="btn btn-primary">Main call to action</a>
+                <a href="#" class="btn btn-secondary">Secondary action</a>
+            </p>
+        </div>
+    </section>
+
+    <div class="album text-muted">
+        <div class="container">
+
+            <div class="row">
+                <div class="card">
+                    <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+                </div>
+                <div class="card">
+                    <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+                </div>
+                <div class="card">
+                    <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+                </div>
+
+                <div class="card">
+                    <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+                </div>
+                <div class="card">
+                    <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+                </div>
+                <div class="card">
+                    <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+                </div>
+
+                <div class="card">
+                    <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+                </div>
+                <div class="card">
+                    <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+                </div>
+                <div class="card">
+                    <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+                </div>
+            </div>
+
+        </div>
+    </div>
+@endsection
+
+@section('footer')
+<p>Special index footer</p>
+@endsection

resources/views/posts/show.blade.php

@@ -0,0 +1,8 @@
+@extends('layouts.master')
+
+@section('content')
+    <h1>{{ $post->title }}</h1>
+    <div class="body">
+        {{ $post->body }}
+    </div>
+@endsection

resources/views/tasks/index.blade.php

@@ -1,18 +0,0 @@
-<!doctype html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-
-        <title>Laravel</title>
-    </head>
-    <body>
-        <h1>Hello {{ $name }}</h1>
-        <ul>
-            @foreach ($tasks as $task)
-                <li><a href="/tasks/{{ $task->id }}">{{ $task->body }}</a></li>
-            @endforeach
-        </ul>
-    </body>
-</html>

resources/views/tasks/show.blade.php

@@ -1,16 +0,0 @@
-<!doctype html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-
-        <title>Laravel</title>
-    </head>
-    <body>
-        <div><a href="/">Home</a>
-                &gt; <a href="/tasks">Task list</a>
-        </div>
-        <h2>{{ $task->body }}</h2>
-    </body>
-</html>

routes/web.php

@@ -12,28 +12,6 @@
 */
 
 /** @var \Illuminate\Routing\Router $this */
-$this->get('/tasks', 'TasksController@index');
-$this->get('/tasks/{task}', 'TasksController@show');
+$this->get('/', 'PostsController@index');
+$this->get('/posts/{post}', 'PostsController@show');
 
-/*
-Route::get('/tasks', function () {
-    $name = 'Fred';
-    // $tasks = DB::table('tasks')->get();
-    $tasks = Task::all();
-
-    // Return a JSON response from the serialized results.
-    // return $tasks;
-
-    return view('tasks.index', compact('name', 'tasks'));
-});
-
-Route::get('/tasks/{task}', function ($id) {
-  // $task = DB::table('tasks')->find($id);
-    $task = Task::find($id);
-
-  // Return a JSON response from the serialized results.
-  // return $tasks;
-
-  return view('tasks.show', compact('task'));
-});
-*/