Why laravel don't show bootstrap from controller?

- 1 answer

Ad

When I try to return a view from a route like this:

Route::get('/testid', function () { 
        $id = 1; // for test only
        $title = 'Dashboard';
        $username=Auth::user()->name;
        $job=Auth::user()->job;
        $p = 1; 

        $requestedorder = \App\Order::findOrfail($id);
        return view('ViewOrder',compact('requestedorder','title','username','job','p'));

});

in the browser it shows up normally like any bootstrap view

but when this view is returned from a controller

public function show($id) 
{
    $title = 'Dashboard';
    $username=Auth::user()->name;
    $job=Auth::user()->job;
    $p = 1; 

    $requestedorder = Order::findOrfail($id);
    return view('ViewOrder',compact('requestedorder','title','username','job','p'));
}

the view be like this without any bootstrap or any css or even without images : http://1drv.ms/1m7N8Yk

I noticed that this problem occures in any url with id like this "http://localhost:8000/testid/1"

this is vieworder view

@extends('WDashBoard')


@section('content2')

<div>

<h1>Order Details</h1>
<hr>



     <div class="row">
          <div class="col-sm-3">
                <h5><B>From :</B></h5>
          </div>                        
          <div class="col-sm-9"> 
                <h5> {{ $requestedorder->customeremail }}</h5>
          </div>
     </div>

     <div class="row">
          <div class="col-sm-3">
               <h5><B>Details :</B></h5>
          </div>                        
          <div class="col-sm-9"> 
               <h5>{{ $requestedorder->details }}</h5>
          </div>
      </div>

      <div class="row">
           <div class="col-sm-3">
                <h5><B>Required Work :</B></h5>
           </div>                        
           <div class="col-sm-9"> 
                <h5>{{ $requestedorder->requiredwork }}</h5>
           </div>
       </div>

       <div class="row">
            <div class="col-sm-3">
                 <h5><B>Date :</B></h5>
            </div>                        
            <div class="col-sm-9"> 
                 <h5> {{ $requestedorder->date }}</h5>
            </div>
       </div>

       <div class="row">
            <div class="col-sm-3">
                 <h5><B>Time :</B></h5>
            </div>                        
            <div class="col-sm-9"> 
                  <h5>{{ $requestedorder->time }}</h5>
            </div>
       </div>

       <div class="row">
            <div class="col-sm-3">
                 <h5><B>Message :</B></h5>
            </div>                        
            <div class="col-sm-9"> 
                 <h5>{{ $requestedorder->message }}</h5>
            </div>
       </div>

</div>

@stop

and this is my DashBoard view

@extends('master')

@section('content')

    <section class="slider2">
            <div class="slider-wrap2">          
                <h1>DashBoard</h1>
            </div> 
    </section>
    <section class="container">                       

          <div class="row">
               <div class="col-sm-3">
                    <div class="dash">
                    <br><br>
                    <center><img src="images/default-avatar.png" class="img-responsive img-circle" /></center>
                    <center><h3> {{ $username }} </h3></center> 
                    <center><h4> {{ $job }} </h4></center>
                    <br>

                    <ul class="nav nav-pills nav-stacked">
                        <li class="nav-header"></li>
                        <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/profile"><i class="glyphicon glyphicon-list-alt"></i>     
                        My Profile</a></li>
                        <li class="divider"></li>
                        <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/orders"><i class="glyphicon glyphicon-briefcase"></i>     
                        Requested Orders</a></li>
                    </ul>

                    <br><br><br><br>

                    </div>
               </div>
               <div class="col-sm-9">

               @yield('content2')

               </div>
           </div>
<br>
                </section>

@stop

and this is master view

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>{{ $title }}</title>

    <!-- Mobile Specific Metas
  ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <!-- CSS
  ================================================== -->
    <!-- Bootstrap -->
    <link target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- FontAwesome -->
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="css/font-awesome.min.css">
    <!-- Elegant icon font -->
     <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="css/line-icons.min.css">
    <!-- Animation -->
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="css/animate.css">
    <!-- Prettyphoto -->
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="css/prettyPhoto.css">
    <!-- Owl Carousel -->
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="css/owl.carousel.css">
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="css/owl.theme.css">
    <!-- Scrolling nav css -->
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="css/scrolling-nav.css">
    <!-- Template styles-->
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="css/style.css">
    <!-- Responsive styles-->
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="css/responsive.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body data-spy="scroll" data-target=".navbar-fixed-top" >




<!-- Header start -->
  <header id="header" role="banner" >
    <nav class="navbar navbar-default navbar-fixed-top"  id="tf-menu">
      <div class="container">
        <div class="row">
          <!-- Logo start -->
          <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </button>
              <div class="navbar-brand">
                <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#" class="page-scroll">
                  <img class="img-responsive" src="images/logo1.png" alt="logo">
                </a> 
              </div>                   
          </div><!--/ Logo end -->
          <div class="collapse navbar-collapse clearfix navMenu" role="navigation">
            <ul class="nav navbar-nav navbar-right">
                    <li><a class="page-scroll" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/" >Home</a></li>




                    <li><a class="page-scroll" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/about" >About</a></li>

                            <li><font style="opacity:.1">....................</font></li>
@if($p == 0)
                               <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/login" ><small>SignIn</small></a></li>


                               <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/register"><small>Register</small></a></li>

@endif
@if($p == 1)

                                <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/profile" ><small>hi {{ $username }}</small></a></li>

                                <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/auth/logout"><small>Logout</small></a></li>
@endif
                </ul>



              </div><!--/ Navigation end -->
        </div><!--/ Row end -->
      </div><!--/ Container end -->
    </nav>
  </header><!--/ Header end -->
    <!-- END MAIN NAV -->


      @yield('content')



  <!-- section Footer start  -->
  <footer id="footer">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="footer-content text-center">
            <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#slider-part" class="page-scroll logo-title">
              <img src="images/blackbg.png" alt="" class="img-responsive">
            </a>
            <ul class="footer-socail list-inline">
              <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#"><i class="fa fa-facebook"></i></a></li>
              <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#"><i class="fa fa-twitter"></i></a></li>
              <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#"><i class="fa fa-linkedin"></i></a></li>
            </ul>
          </div>
          <hr>
          <div class="row">
            <div class="col-md-6">
              <div class="copyright">
                <p> copyright &copy; <span>mycompany</span> - 2015</p>
              </div>
            </div>
            <div class="col-md-6">
            </div>
          </div>
        </div>
      </div> <!-- row end  -->
    </div> <!-- container end  -->
  </footer>
  <!-- section Footer end  -->



    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- initialize jQuery Library -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <!-- Bootstrap jQuery -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <!-- Style Switcher -->
    <script type="text/javascript" src="js/isotope.js"></script>
    <!-- Owl Carousel -->
    <script type="text/javascript" src="js/owl.carousel.js"></script>
    <!-- PrettyPhoto -->
    <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
    <!-- Isotope -->
    <script type="text/javascript" src="js/isotope.js"></script>
    <!-- Wow Animation -->
    <script type="text/javascript" src="js/wow.min.js"></script>
    <!-- SmoothScroll -->
    <script type="text/javascript" src="js/smooth-scroll.js"></script>
    <!-- Eeasing -->
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <!-- Counter -->
    <script type="text/javascript" src="js/jquery.counterup.min.js"></script>
    <!-- Waypoints -->
    <script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
    <!-- Scrolling navigation -->
    <script type="text/javascript" src="js/scrolling-nav.js"></script>
    <!-- Google Map API Key Source -->
    <!--<script src="http://maps.google.com/maps/api/js?sensor=false"></script>-->
    <!-- Custom js -->
    <script type="text/javascript" src="js/custom.js"></script>

    <script type="text/javascript" src="js/mapjs.js"></script>



  <script>
    new WOW().init();
  </script>
    <script>

   $('.counter').counterUp({
            delay: 100,
            time: 2000
        });
    </script>
  </body>
</html>

please help me thanks in advance

Ad

Answer

Ad

I'm assuming you're using relative paths in your HTML that are not properly mapping to your assets through your 'folder' structure.

Have you wrapped your asset URLs in the asset() helper function in your view?

<link target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="{{ asset( 'path/to/asset' ) }}" rel="stylesheet">

<img src="{{ asset( 'path/to/image' ) }}">

Remember, use of the / means you're in a 'subfolder' in traditional URL-to-Unix-style path mapping, so your asset references need to account for that.

Thankfully, Laravel makes this super easy with the URL helper functions.

Ad
source: stackoverflow.com
Ad