I am using laravel 6. I have problem with my section where its not display the result on browser. I have place #yield on my layout but half of section still not displayed
here my code
#section('main-content')
<section class="breadcrumbs">
<div class="container">
<div class="d-flex justify-content-between align-items-center">
<h2>Detail Tanaman</h2>
</div>
</div>
</section>
<!-- ======= Blog Section ======= -->
<section id="blog" class="blog">
<div class="container" data-aos="fade-up">
<div class="row">
<div class="col-lg-8 entries">
<article class="entry">
<div class="entry-img">
<img src="/img/bonsai.jpg" style ="width:100%; height:100%;" alt="" class="img-fluid">
</div>
<h2 class="entry-title">
{{$data->nama_tanaman}}
</h2>
here my layout
<a class="carousel-control-prev" href="#heroCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon bx bx-chevron-left" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#heroCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon bx bx-chevron-right" aria-hidden="true"></span>
</a>
</div>
</section><!-- End Hero -->
#yield('main-content')
You forget to add extends('master') (master is the name of your master page file) at the first of your section like:
In your master:
#yield('main-content')
In your section file:
#extends('master')
#section('main-content')
...
#endsection
Related
I want to have the same mechanism like this https://www.w3schools.com/html/default.asp but in laravel application
This is my code on routes/web.php
Route::get('tutorial', function(){
$tutorial = Tutorial::get();
return view('tutorial.index')->with('tutorial', $tutorial);
})->name('index-tutorial');
// Show one Tutorial by Id
Route::get('tutorial/{id}', function($id){
$tutorial = Tutorial::findOrFail($id);
return view('tutorial.show')->with('tutorial', $tutorial);
})->name('show-tutorial');
for my Blade template
tutorial/show.blade.php
<div class="container">
#foreach($tutorial as $tutorial)
<h1>{{$tutorial->title}}</h1>
<p>{{$tutorial->title_description}}</p>
<p>{{$tutorial->title_lesson}}</p>
<div class="btn-group btn-group-lg d-flex justify-content-end mb-3" role="group">
<form class="mx-3" action="{{route('delete-tutorial', $tutorial->id)}}" method="POST">
#csrf
#method('DELETE')
<button class="btn btn-danger" name="Delete">Delete</button>
</form>
<form action="{{route('edit-tutorial', $tutorial->id)}}" method="GET">
#csrf
<button class="btn btn-primary" name="Edit">Edit</button>
</form>
#endforeach
</div>
tutorial/index.blade.php
<main class="d-flex flex-nowrap">
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark"
style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-
auto text-white text-decoration- none">
<svg class="bi pe-none me-2" width="40" height="32"><use
xlink:href="#bootstrap"></use></svg>
<span class="fs-4 text-white">MySql Lessons</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
#forelse($tutorial as $link)
<li class="nav-item">
<a href="{{route('show-tutorial', $link->id)}}" class="nav-
link">
<p class="text-white bg-dark">{{$link->title}}</p>
</a>
</li>
#empty
<p class="text-white bg-dark">No available lesson</p>
#endforelse
</ul>
</div>
I been researching a lot about having this mechanism
This one is different from other questions because i don't use controllers for this
Have you tried using example tamplates from Bootstrap?
Check here https://getbootstrap.com/docs/5.3/examples/
it's quite easy actually, you just need to copy the html code from bootstrap tamplate and tweak here and there. use
#include to add your desired components, #yield for your desired content page. and use #extends and #section inside your content pages.
roughly like this.
your main blade view
<!doctype html>
<html lang="en">
<head>
</head>
<body>
#include('partials.adminNav')
<div class="row">
#include('partials.adminSideBar')
</div>
<div class="container">
#yield('container')
</div>
</body>
#include('partials.footer')
</html>
for your side bar you just need to put links for your desired page
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3 sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">
<span data-feather="home" class="align-text-bottom"></span>
//Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//your links/route for page content">
<span data-feather="file" class="align-text-bottom"></span>
//links name
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//your links/route for page content">
<span data-feather="edit" class="align-text-bottom"></span>
//Links name
</a>
</li>
</ul>
</div>
</nav>
in like this in your content pages
#extends('layouts.adminMain')
#section('container')
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="py-4">
// your content here
</div>
</main>
#endsection
make use of the #include and #yield build in function. this way you'll have a consistent navbar/sidebar but can changes the content within.
Hope this works for you :)
Instead of using route closures, I manage to convert them to a TutorialController
Route::resource('tutorial', TutorialController::class);
for the aside bar routes/web
view()->composer('layout.sidebar', function($view){
$tutorial = Tutorial::all();
$view->with('links', $tutorial);
});
layout/sidebar.blade.php
<main class="d-flex flex-nowrap">
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark"
style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto
text-white text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><use
xlink:href="#bootstrap"></use></svg>
<span class="fs-4 text-white">MySql Lessons</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
#forelse($links as $link)
<li class="nav-item">
<a href="{{ route('tutorial.show', $link->id)}}" class="nav-link">
<p class="text-white bg-dark">{{$link->title}}</p>
</a>
</li>
#empty
<p class="text-white bg-dark">No available lesson</p>
#endforelse
</ul>
</div>
</main>
in my index.blade and show.blade you can add #include('layout.sidebar')
#extends('layout.app')
#section('title', "Show Tutorials")
#section('content')
#include('layout.sidebar')
<div class="container">
<h1>{{$tutorial->title}}</h1>
<p>{{$tutorial->title_description}}</p>
<p>{{$tutorial->title_lesson}}</p>
<div class="btn-group btn-group-lg d-flex justify-content-end mb-3"
role="group">
<form class="mx-3" action="{{route('tutorial.destroy', $tutorial-
>id)}}" method="POST">
#csrf
#method('DELETE')
<button class="btn btn-danger" name="Delete">Delete</button>
</form>
<form action="{{route('tutorial.edit', $tutorial->id)}}" method="GET">
#csrf
<button class="btn btn-primary" name="Edit">Edit</button>
</form>
</div>
#endsection
I built an interactive resumé page that contains a form. I'm trying to send a message, using form in go and it isn't working. It's just keep taking back to the home page when I click on the submit button.
I want to receive a message when the user click the submit button.
I also want the sender to receive a confirmation that the message has been delivered.
This is my main.go file
package main
import (
"fmt"
"net/http"
"text/template"
)
func main() {
http.HandleFunc("/", routeIndexGet)
http.HandleFunc("/process", routeSubmitPost)
fmt.Println("server started at localhost:9000")
http.ListenAndServe(":9000",nil)
}
func `routeIndexGet`(w http.ResponseWriter, r *http.Request){
if r.Method == "GET" {
var tmpl = template.Must(template.New("form").ParseFiles("index.html"))
var err = tmpl.Execute(w, nil)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
}
return
}
http.Error(w, "", http.StatusBadRequest)
}
func routeSubmitPost(w http.ResponseWriter, r *http.Request) {
if r.Method == "POST" {
var tmpl = template.Must(template.New("result").ParseFiles("index.html"))
if err := r.ParseForm(); err != nil{
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
var name = r.FormValue("name")
var email = r.FormValue("email")
var subject = r.FormValue("subject")
var message = r.Form.Get("message")
var data = map[string]string{"name": name, "email":email, "subject": subject, "message":message}
if err := tmpl.Execute(w, data); err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
}
return
}
http.Error(w, "", http.StatusBadRequest)
}
This is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>MeetMe - Resume Website Template</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" >
<!-- Fonts -->
<link rel="stylesheet" type="text/css" href="assets/fonts/font-awesome.min.css">
<!-- Icon -->
<link rel="stylesheet" type="text/css" href="assets/fonts/simple-line-icons.css">
<!-- Slicknav -->
<link rel="stylesheet" type="text/css" href="assets/css/slicknav.css">
<!-- Menu CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/menu_sideslide.css">
<!-- Slider CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/slide-style.css">
<!-- Nivo Lightbox -->
<link rel="stylesheet" type="text/css" href="assets/css/nivo-lightbox.css" >
<!-- Animate -->
<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
<!-- Main Style -->
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
<!-- Responsive Style -->
<link rel="stylesheet" type="text/css" href="assets/css/responsive.css">
</head>
<body>
<!-- Header Area wrapper Starts -->
<header id="header-wrap">
<!-- Navbar Start -->
<nav class="navbar navbar-expand-lg fixed-top scrolling-navbar indigo">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span class="icon-menu"></span>
<span class="icon-menu"></span>
<span class="icon-menu"></span>
</button>
<img src="assets/img/logo.png" alt="">
</div>
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="onepage-nev navbar-nav mr-auto w-100 justify-content-end clearfix">
<li class="nav-item active">
<a class="nav-link" href="#hero-area">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">
About
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">
Services
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#resume">
Resume
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolios">
Work
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">
Contact
</a>
</li>
</ul>
</div>
</div>
<!-- Mobile Menu Start -->
<ul class="onepage-nev mobile-menu">
<li>
Home
</li>
<li>
about
</li>
<li>
Services
</li>
<li>
resume
</li>
<li>
Work
</li>
<li>
Contact
</li>
</ul>
<!-- Mobile Menu End -->
</nav>
<!-- Navbar End -->
<!-- Hero Area Start -->
<div id="hero-area" class="hero-area-bg">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 text-center">
<div class="contents">
<h5 class="script-font wow fadeInUp" data-wow-delay="0.2s">Hi This is</h5>
<h2 class="head-title wow fadeInUp" data-wow-delay="0.4s">Omoyibo Oghenetega</h2>
<p class="script-font wow fadeInUp" data-wow-delay="0.6s">Back-end Web Developer</p>
<ul class="social-icon wow fadeInUp" data-wow-delay="0.8s">
<li>
<a class="facebook" href="#"><i class="icon-social-facebook"></i></a>
</li>
<li>
<a class="twitter" href="#"><i class="icon-social-twitter"></i></a>
</li>
<li>
<a class="instagram" href="#"><i class="icon-social-instagram"></i></a>
</li>
<li>
<a class="linkedin" href="#"><i class="icon-social-linkedin"></i></a>
</li>
<li>
<a class="google" href="#"><i class="icon-social-google"></i></a>
</li>
</ul>
<div class="header-button wow fadeInUp" data-wow-delay="1s">
Get a Free Quote
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Hero Area End -->
</header>
<!-- Header Area wrapper End -->
<!-- About Section Start -->
<section id="about" class="section-padding">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="img-thumb wow fadeInLeft" data-wow-delay="0.3s">
<img class="img-fluid" src="assets/img/gallery/FB_IMG.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="profile-wrapper wow fadeInRight" data-wow-delay="0.3s">
<h3>Hi Guys!</h3>
<p>I build digital product for web and mobile and i also maintain existing web and mobile project</p>
<div class="about-profile">
<ul class="admin-profile">
<li><span class="pro-title"> Name </span> <span class="pro-detail">Omoyibo Oghenetega</span></li>
<li><span class="pro-title"> Age </span> <span class="pro-detail">23 Years</span></li>
<li><span class="pro-title"> Experience </span> <span class="pro-detail">1 Years</span></li>
<li><span class="pro-title"> Country </span> <span class="pro-detail">Nigeria</span></li>
<li><span class="pro-title"> Location </span> <span class="pro-detail">portharcourt, Rivers state</span></li>
<li><span class="pro-title"> e-mail </span> <span class="pro-detail">tomoyibo#gmail.com</span></li>
<li><span class="pro-title"> Freelance </span> <span class="pro-detail">Available</span></li>
</ul>
</div>
<i class="icon-paper-clip"></i> Download Resume
<i class="icon-speech"></i> Contact Me
</div>
</div>
</div>
</div>
</section>
<!-- About Section End -->
<!-- Services Section Start -->
<section id="services" class="services section-padding">
<h2 class="section-title wow flipInX" data-wow-delay="0.4s">What I do</h2>
<div class="container">
<div class="row">
<!-- Services item -->
<div class="col-md-6 col-lg-3 col-xs-12">
<div class="services-item wow fadeInDown" data-wow-delay="0.3s">
<div class="icon">
<i class="icon-grid"></i>
</div>
<div class="services-content">
<h3>Back-end Development</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse condi.</p>
</div>
</div>
</div>
</section>
<!-- Services Section End -->
<!-- Resume Section Start -->
<div id="resume" class="section-padding">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="education wow fadeInRight" data-wow-delay="0.3s">
<ul class="timeline">
<li>
<i class="icon-graduation"></i>
<h2 class="timelin-title">Education</h2>
</li>
<li>
<div class="content-text">
<h3 class="line-title">Bsc In Electrical engineering university</h3>
<span>2015 - 2020</span>
<p class="line-text">Expenses as material breeding insisted building to in. Continual so distrusts pronounce by unwilling listening. Thing do taste on we manor.</p>
</div>
</li>
<li>
<div class="content-text">
<h3 class="line-title">Higher Secondary School - French village international college</h3>
<span>2009 - 2014</span>
<p class="line-text">Expenses as material breeding insisted building to in. Continual so distrusts pronounce by unwilling listening. Thing do taste on we manor.</p>
</div>
</li>
<li>
<div class="content-text">
<h3 class="line-title">Secondary School - Labratory High School</h3>
<span>2005 - 2010</span>
<p class="line-text">Expenses as material breeding insisted building to in. Continual so distrusts pronounce by unwilling listening. Thing do taste on we manor.</p>
</div>
</li>
</ul>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="experience wow fadeInRight" data-wow-delay="0.6s">
<ul class="timeline">
<li>
<i class="icon-briefcase"></i>
<h2 class="timelin-title">Experience</h2>
</li>
<li>
<div class="content-text">
<h3 class="line-title">junior back - end Developer</h3>
<span>Jan 2020 - Present</span>
<p class="line-text">Expenses as material breeding insisted building to in. Continual so distrusts pronounce by unwilling listening. Thing do taste on we manor.</p>
</div>
</li>
<li>
<div class="content-text">
<h3 class="line-title">software developer</h3>
<span>Nov 2019 - Dec 2020</span>
<p class="line-text">Expenses as material breeding insisted building to in. Continual so distrusts pronounce by unwilling listening. Thing do taste on we manor.</p>
</div>
</li>
<li>
<div class="content-text">
<h3 class="line-title">software developer</h3>
<span>Mar 2015 - Oct 2016</span>
<p class="line-text">Expenses as material breeding insisted building to in. Continual so distrusts pronounce by unwilling listening. Thing do taste on we manor.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Resume Section End -->
<!-- Portfolio Section -->
<section id="portfolios" class="section-padding">
</section>
<!-- Portfolio Section Ends -->
<!-- Contact Section Start -->
<section id="contact" class="section-padding">
<div class="contact-form">
<div class="container">
<div class="row contact-form-area wow fadeInUp" data-wow-delay="0.4s">
<div class="col-md-6 col-lg-6 col-sm-12">
<div class="contact-block">
<h2>Contact Form</h2>
<form id="contactForm">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Name" required data-error="Please enter your name">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" placeholder="Email" id="email" class="form-control" name="email" required data-error="Please enter your email">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="text" placeholder="Subject" id="msg_subject" class="form-control" required data-error="Please enter your subject">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" id="message" placeholder="Your Message" rows="5" data-error="Write your message" required></textarea>
<div class="help-block with-errors"></div>
</div>
<div class="submit-button">
<button class="btn btn-common" id="submit" type="submit">Send Message</button>
<div id="msgSubmit" class="h3 text-center hidden"></div>
<div class="clearfix"></div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-6 col-lg-6 col-sm-12">
<div class="footer-right-area wow fadeIn">
<h2>Contact Address</h2>
<div class="footer-right-contact">
<div class="single-contact">
<div class="contact-icon">
<i class="fa fa-map-marker"></i>
</div>
<p>portharcourt, rivers state</p>
</div>
<div class="single-contact">
<div class="contact-icon">
<i class="fa fa-envelope"></i>
</div>
<p>tomoyibo#gmail.com</p>
</div>
<div class="single-contact">
<div class="contact-icon">
<i class="fa fa-phone"></i>
</div>
<p>+(234) 813 685 9270</p>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<object style="border:0; height: 450px; width: 100%;" data="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d34015.943594576835!2d-106.43242624069771!3d31.677719472407432!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86e75d90e99d597b%3A0x6cd3eb9a9fcd23f1!2sCourtyard+by+Marriott+Ciudad+Juarez!5e0!3m2!1sen!2sbd!4v1533791187584"></object>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section End -->
<!-- Footer Section Start -->
<footer class="footer-area section-padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="footer-text text-center wow fadeInDown" data-wow-delay="0.3s">
<ul class="social-icon">
<div class="container">
<div class="row">
<div class="col-lg-1 col-md-2 col-xs-2">
<div class="img-thumb wow fadeInLeft" data-wow-delay="0.3s">
<img class="img-fluid" src="assets/img/gallery/zuri.png"i4g.png" alt="">
</div>
</div>
<div class="col-lg-1 col-md-2 col-xs-2">
<div class="img-thumb wow fadeInLeft" data-wow-delay="0.3s">
<img class="img-fluid" src="assets/img/gallery/hng.png" alt="">
</div>
</div>
<!-- Services Section End -->
<u1>
<li>
<a class="facebook" href="#"><i class="icon-social-facebook"></i></a>
</li>
<li>
<a class="github" href="#"><i class="icon-social-github"></i></a>
</li>
<li>
<a class="instagram" href="#"><i class="icon-social-instagram"></i></a>
</li>
<li>
<a class="instagram" href="#"><i class="icon-social-linkedin"></i></a>
</li>
<li>
<a class="instagram" href="#"><i class="icon-social-google"></i></a>
</li>
</ul>
<p>Copyright © 2018 UIdeck All Right Reserved</p>
</div>
</div>
</div>
</div>
</footer>
<!-- Footer Section End -->
<!-- Go to Top Link -->
<a href="#" class="back-to-top">
<i class="icon-arrow-up"></i>
</a>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="assets/js/jquery-min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.mixitup.js"></script>
<script src="assets/js/jquery.counterup.min.js"></script>
<script src="assets/js/waypoints.min.js"></script>
<script src="assets/js/wow.js"></script>
<script src="assets/js/jquery.nav.js"></script>
<script src="assets/js/jquery.easing.min.js"></script>
<script src="assets/js/nivo-lightbox.js"></script>
<script src="assets/js/jquery.slicknav.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/form-validator.min.js"></script>
<script src="assets/js/contact-form-script.min.js"></script>
<script src="assets/js/map.js"></script>
</body>
</html>
It seems there is no action attribute on your contactForm. Due to that, when you submit, it will submit to the page itself instead of the route you wanted it to submit to.
Consider adding an action attribute:
...
<form id="contactForm" action="/process">
<div class="row">
<div class="col-md-6">
<div class="form-group">
...
I am trying to create an application with laravel and I am having some difficulty in understanding how to dynamically load content into a division according to the button clicked from the product icon.
This is the category page
<div class="row justify-content-center">
#foreach($ProductData as $Product)
<div class="col-6 col-md-4 col-lg-4 col-xl-3">
<div class="product product-7 text-center" title="{{$Product->product_name}}">
<figure class="product-media">
<span class="product-label label-new">New</span>
<a href="product.html">
<img src="{{ asset('images/product/thumbnail/'.$Product->photo) }}" alt="{{$Product->photo}}" class="product-image">
</a>
<div class="product-action-vertical">
<span>add to wishlist</span>
<span>Quick view</span>
<span>Compare</span>
</div><!-- End .product-action-vertical -->
<div class="product-action">
<span>add to cart</span>
</div><!-- End .product-action -->
</figure><!-- End .product-media -->
<div class="product-body">
<div class="product-cat">
Women
</div><!-- End .product-cat -->
<h3 class="product-title">{{$Product->product_name}}</h3><!-- End .product-title -->
<div class="product-price">
$ {{$Product->price}}
</div><!-- End .product-price -->
<div class="ratings-container">
<div class="ratings">
<div class="ratings-val" style="width: 20%;"></div><!-- End .ratings-val -->
</div><!-- End .ratings -->
<span class="ratings-text">(2)</span>
</div><!-- End .rating-container -->
<div class="product-nav product-nav-thumbs">
<a href="#" class="active">
<img src="{{ asset('assets/molla/assets/images/products/product-4-thumb.jpg') }}" alt="product desc">
</a>
<a href="#">
<img src="{{ asset('assets/molla/assets/images/products/product-4-2-thumb.jpg') }}" alt="product desc">
</a>
<a href="#">
<img src="{{ asset('assets/molla/assets/images/products/product-4-3-thumb.jpg') }}" alt="product desc">
</a>
</div><!-- End .product-nav -->
</div><!-- End .product-body -->
</div><!-- End .product -->
</div><!-- End .col-sm-6 col-lg-4 col-xl-3 -->
#endforeach
</div>
**and mypopup/quickView.html, where I want to load data dynamically is bellow: **
<div class="container quickView-container">
<div class="quickView-content">
<div class="row">
<div class="col-lg-7 col-md-6">
<div class="row">
<div class="product-left">
<a href="#one" class="carousel-dot active">
<img src="assets/molla/assets/images/popup/quickView/1.jpg">
</a>
<a href="#two" class="carousel-dot">
<img src="assets/molla/assets/images/popup/quickView/2.jpg">
</a>
<a href="#three" class="carousel-dot">
<img src="assets/molla/assets/images/popup/quickView/3.jpg">
</a>
<a href="#four" class="carousel-dot">
<img src="assets/molla/assets/images/popup/quickView/4.jpg">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
There are two ways you can dynamically load the modal/popup
Store the product details in data-* attribute of quick view button/anchor tag. Have a skeleton Quick View modal. On click of 'Quick View', trigger a javascript function to populate the skeleton modal with the product data fetched from data attributes.
Making AJAX call when user click on 'Quick View' button and populate the skeleton modal with the response data
Going by Approach #1 can you save you multiple network calls to the server as all the product related data (required to be shown in Quick View) is stored as data attributes
Updated
Example for Approach #1
<a class="btn btn-primary btnQuickView" data-product-name="Product Name" data-product-img="http://shop.com/product/image.jpg" data-product-price="200.00">Quick View</a>
Modal code
<!-- Quick View Modal -->
<div id="quickViewModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Title</h4>
</div>
<div class="modal-body">
<h1 id="modal-product-name"></h1>
<img id="modal-product-image" src="">
<p id="modal-product-price"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Load jQuery library -->
<script type="text/javascript">
$(function(){
$('body').on('click','.btnQuickView', function(e){
e.preventDefault();
var data = $(this).data();
$('#quickViewModal #modal-product-name').html(data.productName);
$('#quickViewModal #modal-product-name').attr('src', data.productImage);
$('#quickViewModal #modal-product-name').html(data.productPrice);
$('#quickViewModal').modal();
});
});
</script>
I have a collection of views that i want them to share a specific layout.
I created the layout master.blade.php ,in a folder i named it layouts.
From the docs , i found that i need to add the tag #extends and section('content') in my view so it fits under the layout :
#extends('layouts.master')
#section('content')
<div style="background-color:white;width:963px;height:100%">
<div style="padding-top:100px;padding-bottom:200px">
<h2 style="color:sandybrown; text-align:center"><b style="padding-right:40px">Contactez nous</b></h2>
<br />
<hr width="50%" color="gris" />
<div class="row">
<div class="col-md-6" style="padding:5%">
<form method="post" asp-controller="Home" asp-action="RegisterContact" style="padding-left:20px">
<label><span style="color:blue">Nom et prenom</span></label>
<br />
<input size=" 40" style="border-color:darkorange" asp-for="Name"/>
<br />
<label><span style="color:blue">E-mail</span></label>
<br />
<input size=" 40" asp-for="Email" style="border-color:darkorange" />
<br />
<label><span style="color:blue">Message</span></label>
<br />
<textarea rows="10" cols="40" style="border-color:darkorange" asp-for="Message"></textarea>
<br />
<button style="background-color:blue;"><span style="color:white">ENVOYER</span></button>
....
#endsection
but when i click in the link in the view's link in the navbar , this is what i get ?:
so is there a missing part in the logic ?
Update:
the view and the layout are both under the same folder :
C:\xampp\htdocs\laravel\resources\views\layouts
the view's name wasn't ending with .blade.php , but doing so now i get an exception :
InvalidArgumentException in FileViewFinder.php line 137: View [layouts.WhoWeAre] not found.
this is the body code of the layout :
</div>
<nav class="navbar navbar-expand-md bg-light navbar-light">
<div class="navbar-collapse collapse w-50">
<ul class="navbar-nav ml-auto">
<li class="nav-item navbar1 ">
<a class="nav-link" href="{{action('HomeController#WhoWeAre')}}"><span style="text-decoration: underline;"><B>Acceuil</B></span></a>
</li>
<li class="nav-item navbar1">
<a class="nav-link" ><span style="text-decoration: underline;"><B>Qui somme nous</B></span></a>
</li>
<li class="nav-item navbar1">
<a class="nav-link"><span style="text-decoration: underline;"><B>Specialités</B></span></a>
</li>
</ul>
</div>
<div>
<img src="images/decoupage/nawrass-logo.png " class="rounded-circle bg-light">
</div>
<div class="navbar-collapse collapse w-50 ">
<ul class="navbar-nav mr-auto">
<li class="nav-item navbar2">
<a class="nav-link" >
<span style="text-decoration: underline;"><B>Contactez-nous</B></span>
</a>
</li>
<li class="nav-item navbar2">
<img src="images/decoupage/location.png" style="padding-top: 7px">
<span style="padding-top: 15px">Djerba Houmet Souk</span>
</li>
<li class="nav-item navbar2">
<div class="row">
<div class="col-md-3" style="padding-top: 7px">
<img src="images/decoupage/phone.png">
</div>
<div class="col-md-8" style="font-size: 16px;">
<span>75 620 660 </span>
<br>
<span>98 816 962</span>
</div>
</div>
</li>
<li class="nav-item navbar2">
<img src="images/decoupage/fb.png" style="padding-top: 7px">
</li>
</ul>
</div>
</nav>
<div class="container " style="min-height:100%; padding-left:120px;flex:1;display:flex;flex-direction:column;">
<div style="flex:1;display:flex;flex-direction:column;">
#yield('content')
</div>
</div>
<div id="footer">
<div class="jumbotron " style="margin-top:0 ; background-color:blue">
<div class="container ">
<div class="row">
<div class="col-md-6">
<div class="card mb-3 " style="background-color: blue">
<div class="row no-gutters">
<div class="col-md-3 ">
<img src="images/decoupage/logo-white.png" class="card-img" alt="my card image">
</div>
<div class="col-md-9 ">
<div class="card-body ">
<p class=" card-text text-white " style="font-size: 14.45px">
Bienvenu a centre de formation ennawres: formation en coiffure hommes et dames Langues {francais, anglais...} ,photographie..et plusieurs d'autres..
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2"></div>
<div class="col-md-4 ">
<br/>
<img src="images/decoupage/phone.png">
<span class="text-white">
75620660-98815952
</span>
<br>
<br>
<img src="images/decoupage/location.png">
<span class="text-white">
Houmet Souk Djerba,1Km Ajim
</span>
</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-4 text-white">
PROPULSE PAR MOSAIQUE WEB COPYRIGHT 2019
</div>
</div>
</div>
</div>
</div>
For information the click in the navbar "Qui sommes nous" link trigger this controller method:
public function WhoWeAre()
{
return view('layouts/WhoWeAre');
}
and this is routes.php :
Route::get('/', function () {
return view('welcome');
});
Route::get('/whoweare', 'HomeController#WhoWeAre');
I am trying to load some images in the browser using bootstrap in Express(Handlebars), and although rest of the media contents appear fine , the images are not getting loaded in the Browser(Chrome).
The code in the .hbs file is as follows:
1 <div class="panel panel-default">
2 <div class="panel-heading">
3 <h2 class="panel-title">{{index.title}}</h2>
4 <div>
5 <ul class="media-list">
6 {{#each movies}} <li class="media">
7 <a class="pull-left" href="#"
8 <img class="media-object img-responsive" src= {{ poster_path }} alt=" ">
9 </a>
10 <div class="media-body">{{ title }}<br/><strong class="media-heading">{{ popularity }}</strong>
11 </div>
12 </li>
13 {{/each}} </ul>
14 </div>
15 </div>
16
17 </div>
Here is a screen shot of the page:
https://drive.google.com/file/d/0B0oBZ2pgT9DUQldkaHFfNllFblU/view?usp=sharing
Any comments/suggestions would be much appreciated.
ADDED FIDDLE :
https://jsfiddle.net/chattes/9azgfxex/
Thanks
I was able to figure it out... it was a mistake with the div tags.
Latest fiddle:
https://jsfiddle.net/chattes/9azgfxex/
<title>{{title}}</title>
<body>
<div class="page-header">
<div class="container">
<div class="col-md-1">
<h1>discoverMovie</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<ul class="media-list">
<div class="col-sm-12 col-md-6">
<li class="media">
<img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" alt="Interstellar" width="200" height="100" class="img-thumbnail">
<div class="media-body">"Interstellar"
<br/><strong class="media-heading">14.524256</strong>
</div>
</li>
</div>
<div class="col-sm-12 col-md-6">
<li class="media">
<img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg"