Why laravel don't show bootstrap from controller?

1
votes

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 href="/profile"><i class="glyphicon glyphicon-list-alt"></i>     
                        My Profile</a></li>
                        <li class="divider"></li>
                        <li><a 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 href="assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- FontAwesome -->
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <!-- Elegant icon font -->
     <link rel="stylesheet" href="css/line-icons.min.css">
    <!-- Animation -->
    <link rel="stylesheet" href="css/animate.css">
    <!-- Prettyphoto -->
    <link rel="stylesheet" href="css/prettyPhoto.css">
    <!-- Owl Carousel -->
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">
    <!-- Scrolling nav css -->
    <link rel="stylesheet" href="css/scrolling-nav.css">
    <!-- Template styles-->
    <link rel="stylesheet" href="css/style.css">
    <!-- Responsive styles-->
    <link rel="stylesheet" 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 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" href="/" >Home</a></li>




                    <li><a class="page-scroll" href="/about" >About</a></li>

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


                               <li><a href="/register"><small>Register</small></a></li>

@endif
@if($p == 1)

                                <li><a href="/profile" ><small>hi {{ $username }}</small></a></li>

                                <li><a 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 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 href="#"><i class="fa fa-facebook"></i></a></li>
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
              <li><a 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

1
phptwitter-bootstraplaravellaravel-5.1
Are you sure that /ViewOrder and /Craftsman/ViewOrder are the same? – Zakaria Acharki
@ZakariaAcharki I'm sorry now it is edited but this is not my problem the view name is the same in my app – heba
Check the developpers console in your browser please. – Zakaria Acharki
Try to replace <link href="assets/css/bootstrap.min.css" rel="stylesheet"> by <link href="{{ asset('/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css"/>. – Zakaria Acharki

1 Answers

1
votes

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 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.