Problem
I want to make route of view abc.blade.php and with my this coad route not hit
echo '<div class="col-md-4 grid-top grid-in thumbnail">
<a href="{{ url (/singol) }}" class="b-link-stripe b-animate-gothickbox">
<img width="250" class="img-responsive" src="'.$image.'" alt="Random image"/>
<div class="b-wrapper">
<h3 class="b-animate b-from-left b-delay03 ">
<span>New Product</span>
</h3>
</div>
</a>
Just use href='/singol' and it will work.
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'm working on a carousel webpart with a text/xml transformation.
Simply trying to create a unique ID for each instance on the page.
Next I'd like to have the first item set to active with a CSS class.
For the section Webpart container:
{% uniqueId = string.FormatString("carousel-{0}", InstanceGuid.Substring(0,5)); #%}
<div id="{%uniqueId%}" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
□
</div>
<a class="carousel-control-prev" href="#{%uniqueId%}" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#{%uniqueId%}" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
This seems to work at first but for some reason it generates a text-node in HTML.
How can we do this without generating the variable output?
For a single carousel item in the Transformations section:
{% CssActive = IsFirst() ? "active" : string.Empty %}
<div class="carousel-item {%CssActive%}">
<img src="{%Image%}" alt="" class="w-100 d-block" />
<div class="carousel-caption d-none d-md-block">
<h3>{%Title%}</h3>
<div>{%Body%}</div>
</div>
</div>
This doesn't output anything? Is this even possible to use IsFirst() in a repeater?
Any help is much appreciated!
For the transformation you can use the following code:
<div class="carousel-item{% if (DataItemIndex == 0) { " active" } #%}">
<div class="card">
<img src="{%Image%}" alt="" class="card-img-top" />
<div class="card-body">
<h3 class="card-title">{%Title%}</h3>
<div class="card-text">{%Body%}</div>
</div>
</div>
</div>
Doc
For the Webpart container I can do a workaround with HTML/CSS:
<div class="d-none">
{% uniqueId = string.FormatString("carousel-{0}", InstanceGuid.Substring(0,5)); #%}
</div>
Far from ideal so if anybody else has a better idea ...?
I want to fetch category wise data in home page's sections but I am unable to do this. Only one category section is working[enter image description here][1]
I made Section model and under this model Category model My IndexController Code :
<?php
namespace App\Http\Controllers\Front;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Slider;
use App\Category;
use App\Section;
class IndexController extends Controller
{
public function index(){
$sliders = Slider::where('status',1)->get();
$categories = Category::with('sections')->where('status',1)->get();
//dd($categories);die;
return view('frontend.index')->with(compact('sliders','categories'));
}
}
and blade file code is :
<section class="latest_work">
<div class="container">
<div class="row sub_content">
<div class="col-md-12">
<div class="dividerHeading">
<h4><span>Find your best tours</span></h4>
</div>
<div id="recent-work-slider" class="owl-carousel">
#foreach($categories as $category)
#if($category['sections']['section_name'] == "Tours")
<div class="product">
<figure class="touching effect-bubba">
<div class="product-img">
<img class="img-responsive" src="{{ asset('images/categories/'.$category['category_banner']) }}">
<div class="option">
<a class="fa fa-shopping-cart" href="portfolio_single.html"></a>
<a class="fa fa-search mfp-image" href="{{ asset('images/categories/'.$category['category_banner']) }}"></a>
</div>
</div>
</figure>
<div class="product-info">
<div class="product-title">
<h3>
{{ $category['category_name'] }}
</h3>
</div><br>
</div>
</div>
#endif
#endforeach
</div>
</div>
</div>
</div>
</section>
<section class="latest_work">
<div class="container">
<div class="row sub_content">
<div class="col-md-12">
<div class="dividerHeading">
<h4><span>Find your best stays</span></h4>
</div>
<div id="recent-work-slider" class="owl-carousel">
#foreach($categories as $category)
#if($category['sections']['section_name'] == "Stays")
<div class="product">
<figure class="touching effect-bubba">
<div class="product-img">
<img class="img-responsive" src="{{ asset('images/categories/'.$category['category_banner']) }}">
<div class="option">
<a class="fa fa-shopping-cart" href="portfolio_single.html"></a>
<a class="fa fa-search mfp-image" href="{{ asset('images/categories/'.$category['category_banner']) }}"></a>
</div>
</div>
</figure>
<div class="product-info">
<div class="product-title">
<h3>
{{ $category['category_name'] }}
</h3>
</div><br>
</div>
</div>
#endif
#endforeach
</div>
</div>
</div>
</div>
</section>
<section class="latest_work">
<div class="container">
<div class="row sub_content">
<div class="col-md-12">
<div class="dividerHeading">
<h4><span>Find your best cars</span></h4>
</div>
<div id="recent-work-slider" class="owl-carousel">
#foreach($categories as $category)
#if($category['sections']['section_name'] == "Cars")
<div class="product">
<figure class="touching effect-bubba">
<div class="product-img">
<img class="img-responsive" src="{{ asset('images/categories/'.$category['category_banner']) }}">
<div class="option">
<a class="fa fa-shopping-cart" href="portfolio_single.html"></a>
<a class="fa fa-search mfp-image" href="{{ asset('images/categories/'.$category['category_banner']) }}"></a>
</div>
</div>
</figure>
<div class="product-info">
<div class="product-title">
<h3>
{{ $category['category_name'] }}
</h3>
</div><br>
</div>
</div>
#endif
#endforeach
</div>
</div>
</div>
</div>
</section>
only one tours section's categories is showing but not showing other categories
Yes Only one tour sections is showing because of this condition in your code
#if($category['sections']['section_name'] == "Tours")
........................
#endif
there is a div with tag that by click on small image I change the src attribute and show it's the original size, but I don't know how to do in Alpine js?
<div>
<img id="main" />
</div>
/* small images from db */
<div>
foreach($images as $image){
<img id='small' src="images/.$image" />
}
</div>
in jquery :
$("#small").each(function(){
$(this).click(function(){
$("#main").attr('src', $(this).attr('src');)
})
})
})
but I don't know how to do in Alpine js?!
Something like this (using Laravel Blade syntax)?
<div x-data="{imageUrl: ''}">
<section>
<img id="main" :src="imageUrl" />
</section>
<hr />
<div>
#foreach($images as $image)
<img id='small' src="{{ images/.$image }}" #click="imageUrl = '{{ images/.$image }}'" />
#endforeach
</div>
</div>
Demonstrated in a pen here with some dummy data.
Check this codepen: Image Preview Demo. Hope this helps.
<div class="flex items-center justify-center text-gray-500 bg-blue-800 h-screen">
<div class="w-full">
<h3 class="mb-8 text-xl text-center text-white">Image Preview Demo</h3>
<div class="w-full max-w-2xl p-8 mx-auto bg-white rounded-lg">
<div class="" x-data="imageData()">
<div x-show="previewUrl == ''">
<p class="text-center uppercase text-bold">
<label for="thumbnail" class="cursor-pointer">
Upload a file
</label>
<input type="file" name="thumbnail" id="thumbnail" class="hidden" #change="updatePreview()">
</p>
</div>
<div x-show="previewUrl !== ''">
<img :src="previewUrl" alt="" class="rounded">
<div class="">
<button type="button" class="" #click="clearPreview()">change</button>
</div>
</div>
</div>
</div>
<div class="mt-2 text-center text-white">
<a class="w-32 mx-2" href="https://tailwindcss.com/">TailwindCSS</a>
<a class="w-32 mx-2" href="https://github.com/alpinejs/alpine">AlpineJS</a>
</div>
</div>
</div>
You can use x-ref on your main image and then $ref in your Alpine data function to set the src property of your main image. You could define your main image something like:
<img x-ref="mainImage" src="URL TO YOUR FIRST IMAGE" />
For each of your thumbnail images, you can do something like:
<img src="URL TO THUMBNAIL" x-on:click="pickPhoto(ARRAY INDEX)">
Your data function can then include something like this:
...
currentPhoto: 0,
photos: [
"URL TO FIRST IMAGE",
...,
"URL TO LAST IMAGE",
],
pickPhoto(index) {
this.currentPhoto = index;
this.$refs.mainImage.src = this.photos[this.currentPhoto];
},
...
I have uploaded a working example here:
https://tailwindcomponents.com/component/tailwind-css-with-alpine-js-photo-gallery
Note that this is deliberately designed to allow you to have different URLs from your thumbnails and main images, so the thumbnails can be intrinsically smaller, and load very quickly. If you are using the same images for both, you can simplify the code significantly. Each of your thumbnails could be done like this:
<img src="URL TO YOUR FIRST IMAGE" x-on:click="$refs.mainImage.src = 'URL TO YOUR FIRST IMAGE'">
With no need for the pickPhoto function or the photos array.
The downside of the simpler approach is that your page will take longer to load because you won't be using smaller images for your thumbnails.
In AlpineJs you could do something like this.
Not tested, just to make you an idea.
myimages()
{
return {
selected: '',
images: [
'images/1.png',
'images/2.png',
'images/3.png',
'images/4.png'
]
}
}
<div x-data="myimages()">
<div>
<img id="main" :src="selected"/>
</div>
<div>
<template x-for="(selimage, index) in images" :key="index">
<img class='small' :src="selimage" #click="selected = selimage"/>
</template>
</div>
</div>
you can for each both of them like this
<div x-data="{image:'0'}">
<div>
#foreach ($image_src as $key => $image)
<a href="">
<img x-show="image==='{{ $key++ }}'"
src="{{$image}}" alt="">
</a>
#endforeach
</div>
<div class=" overflow-x-scroll ">
#foreach ($image_src as $key=> $image)
<a class="mr-1" on- href="">
<img :class="{' border border-way-pink':image==='{{ $key }}'}"
#click.prevent="image='{{ $key++ }}'"
class="w-32 h-24 mr-5" src="{{$image}}" alt="">
</a>
#endforeach
</div>
</div>
I have a laravel 5.0 project and i'm working with the pagination now but why is it not changing to the next page? Anyone knows or encounter this problem?
My Controller
public function($ship_id){
$members = Member::where('ship_id','=',$ship_id)->latest()->paginate(3);
$members->setPageName('members_page');
$pendings = AddRequest::where('ship_id','=',$ship_id)->paginate(3);
$pendings->setPageName('pendings_page');
return view('pages.Organization.List-Of-Organization-Scholar',compact('ship','schol','pendings','members','count_member','recommends'));
}
My View
#foreach($members as $member)
<div class="col-lg-4">
<div class="col-lg-12 well">
<a class="thumbnail" href="#">
<img class="img-responsive" src="../../{!! $member->Memscholar->scholar_image !!}" alt="" height="150" width="200">
</a>
<p>
<h3>{!! $member->Memscholar->scholar_lname !!}, {!! $member->Memscholar->scholar_fname !!}</h3>
</p>
</div>
</div>
#endforeach
<div class = "col-md-12">
{!! $members->appends(array_except(Request::query(), 'members_page'))->render()!!}
</div>
#foreach($pendings as $pending)
<div class="col-lg-4">
<div class="col-lg-12 well">
<a class="thumbnail" href="#">
<img class="img-responsive" src="../../{!! $pending->Pendscholar->scholar_image !!}" alt="" height="150" width="200">
</a>
</div>
</div>
#endforeach
<div class = "col-md-12">
{!! $pendings->appends(array_except(Request::query(), 'pendings_page'))->render()!!}
</div>