Level 15
Mar 14, 2019
3
Level 5
How do you manage a view that is getting big like this going out of control?
Technically i am not doing anything wrong but it's getting hard to manage. Plus there is still a lot to add to it.
Maybe classic includes like Codeigniter days?
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center course-details">
<div class="col-md-8">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/courses/">Courses</a></li>
<li class="breadcrumb-item active">{{ $course[0]->title }}</li>
</ol>
</nav>
@if (session('status'))
<div class="alert alert-success mt-2">
{{ session('status') }}
</div>
@endif
@if ($errors->any())
<div class="alert alert-danger mt-2">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<div class="card">
<div class="card-header">
<div class="card-body">
<form class="mt-2" method="post" action="/courses/{{ $course[0]->id }}">
@csrf
@method('PUT')
<div class="form-group ">
<label for="course_title">Course Title</label>
<input name="title" type="text" class="form-control" id="course_title" placeholder="ie. Meditation For Beginners" value="{{ old('title', $course[0]->title ) }}">
</div>
<div class="form-group">
<label for="course_description">Description</label>
<textarea class="form-control" id="course_description" name = "description" rows="3">{{ old('description', $course[0]->description ) }}</textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-sml"><i class="fas fa-save"></i> Save Changes (Title & Description)</button>
<button type="button" class="btn btn-primary btn-sml add-module"><i class="fas fa-plus-square"></i> Add A Module</button>
</div>
</form>
</div><!--Panel-->
</div><!--Panel-->
</div><!--Panel-->
</div>
</div>
<div class="row justify-content-center hide-this" id = "add-module-form">
<div class="col-md-8">
<h2>You are adding a module to {{ $course[0]->title }} </h2>
<form class="mt-2" method="post" action="/modules">
@csrf
<div class="form-group">
Title <input type="text" class="form-control mb-1 required" id="title" name = "title" placeholder="Module Title" required >
Release after how many days?
<div class="col-2">
<input type="number" class="form-control required" id="release_after" name = "release_after" value = "0">
</div>
<input type="hidden" class="form-control" name="course_id" value="{{ $course[0]->id }}">
</div>
<div class="form-group">
<label for="module_description">Description</label>
<textarea class="form-control" id="module_description" name = "description" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-success btn-sml"><i class="fas fa-plus-square"></i> Add This Module To {{ $course[0]->title }}</button> <button type="button" class="btn btn-warning btn-sml"
id = "hide-add-module-form">Cancel</button>
</form>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-8">
<hr />
<h1><i class="fas fa-code-branch"></i> Current Course Structure</h1>
<div class="card-body" style="padding: 0">
<ul class="sortable_modules">
<?php $counter=0;?>
@forelse ($modules as $module)
<?php $counter++;?>
<li id = "{{ $module->id }}" class="list-group-item mb-2 list-group-item-action "><h4 class="cursor_pointer"><kbd style="color: red"><i class="fas fa-sort"></i></kbd> {{ $module->title }}</h4>
<div class="float-right">
<small><a href="#"><i class="fas fa-pen"></i> Edit Module</a></small>
| <small><span class="link_js" onclick="open_add_lesson_box('module_{{ $module->id }}_new_lesson');"><i class="fas fa-plus-square"></i> Add A Lesson To This Module</span></small></div><br>
<div class="alert alert-info mt-3 mb-3 hide-this add_lesson_box" role="alert" id = "module_{{ $module->id }}_new_lesson">
<div class="float-right"><button type="button" class="btn btn-danger btn-sml close_add_lesson"><i class="fas fa-times"></i> Cancel</button></div><br>
<form class = "add_lesson_form" method="post" action="/lessons">
@csrf
<div class="form-group">
<label for="title">Lesson Title</label>
<input type="text" class="form-control" id="title" name="title" placeholder="Example: Lesson 1" required>
<input type="hidden" class="form-control" id="module_id" name="module_id" placeholder="module_id" value = {{ $module->id }}>
</div>
<div class="form-group">
<label for="release_after">Release after how many days?</label>
<div class="col-2"><input type="number" value="0" class="form-control required" id="release_after" name = "release_after">
</div>
</div>
<div class="form-group">
<label for="video_link">Video Link</label>
<input type="text" class="form-control" id="video" name = "video" placeholder="Example https://vimeo.com/303215159">
<small id="video-help" class="form-text text-muted">Vimeo or Youtube. Example: <strong>https://vimeo.com/303215159</strong></small>
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea class="form-control" id="description" rows="3" name="description"></textarea>
</div>
<button type="submit" class="btn btn-success btn-sml ajaxSubmit">Add This Lesson To Module {{ $module->id }}</button>
</form>
</div>
<!--Module Description-->
<div class="alert alert-secondary mt-3" role="alert"><kbd><i class="fas fa-file-alt"></i> Description</kbd><br /><p class="mt-2">{{ $module->description }}</p></div>
<!--Module Description-->
<kbd><i class="fas fa-book"></i> Lessons</kbd>
<ul class="sortable_lessons mt-3" style="padding-inline-start: 0;">
<?php $lessons = \App\Module::find($module->id)->lessons;?>
@forelse ($lessons as $lesson)
<li id = "{{ $module->id }}_lesson_{{ $lesson->id }}" class="list-group-item list-group-item-action"><i class="fas fa-arrows-alt-v cursor_pointer"></i> Lesson {{ $lesson->title }}
<div class="float-right"><small><a href="#"><i class="fas fa-pen"></i> Edit Lesson</a></small></div><br>
</li>
@empty
<p>This Module has no lessons yet</p>
@endforelse
</ul>
</li>
@empty
<p>This course has no modules yet</p>
@endforelse
</ul>
</div>
</div>
</div>
@endsection
Level 14
In addition of the first answer.
Your view should not be querying the database, that's the job of the controller.
Also laravel provides a $loop variable for in the loops so you don't have to make it yourself.
Level 5
This approach seems to be fine @include('modules.add_module_form')
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="/courses/">Courses</a>
</li>
<li class="breadcrumb-item active">{{ $course[0]->title }}</li>
</ol>
</nav>
</div>
</div>
<div class="row justify-content-center course-details">
<div class="col-md-8">
@if (session('status'))
<div class="alert alert-success mt-2">
{{ session('status') }}
</div>
@endif
@if ($errors->any())
<div class="alert alert-danger mt-2">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<div class="card">
<div class="card-header">
<div class="card-body">
<form class="mt-2" method="post" action="/courses/{{ $course[0]->id }}">
@csrf
@method('PUT')
<div class="form-group ">
<label for="course_title">Course Title</label>
<input name="title" type="text" class="form-control" id="course_title" placeholder="ie. Meditation For Beginners" value="{{ old('title', $course[0]->title ) }}">
</div>
<div class="form-group">
<label for="course_description">Description</label>
<textarea class="form-control" id="course_description" name = "description" rows="3">{{ old('description', $course[0]->description ) }}</textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-sml">
<i class="fas fa-save"></i> Save Changes (Title & Description)
</button>
<button type="button" class="btn btn-primary btn-sml add-module">
<i class="fas fa-plus-square"></i> Add A Module
</button>
</div>
</form>
</div>
<!--Panel-->
</div>
<!--Panel-->
</div>
<!--Panel-->
</div>
</div>
<!--id = "add-module-form"-->
@include('modules.add_module_form')
<!--END id = "add-module-form"-->
<div class="row justify-content-center">
<div class="col-md-8">
<hr />
<h1>
<i class="fas fa-code-branch"></i> Modules
</h1>
<div class="card-body" style="padding: 0">
<ul class="sortable_modules" style="padding-inline-start: 0; list-style-type:none;" >
<?php $counter=0;?>
@forelse ($modules as $module)
<li id = "{{ $module->id }}">
<!--Module Card -->
<div class="card">
<h5 class="card-header">Module {{ ++$counter }}</h5>
<div class="card-body">
<h5 class="card-title">{{ $module->title }}</h5>
<p class="card-text">
<p class="mt-2">{{ $module->description }}</p>
</p>
<!--Module Lessons-->
@include('modules.module_lessons')
<!--End Module Lessons-->
</div>
<div class="card-footer text-muted">
<div class="float-right">
<small>
<span class="show_update_module_button link_js" id="{{ $module->id }}">
<i class="fas fa-pen"></i> Edit Module
</a>
</small>
|
<small>
<span class="link_js" onclick="open_add_lesson_box('module_{{ $module->id }}_new_lesson');">
<i class="fas fa-plus-square"></i> Add A Lesson To This Module
</span>
</small>
</div>
</div>
</div>
<!--End Module Card -->
<br>
<!--EDIT MODULE-->
@include('modules.edit_module_form')
<!--END EDIT MODULE-->
<!--EDIT MODULE-->
@include('modules.add_lesson_form')
<!--END EDIT MODULE-->
</li>
@empty
<p>This course has no modules yet</p>
@endforelse
</ul>
</div>
</div>
</div>
@endsection
Please or to participate in this conversation.