How to embed forms to another website using laravel - php

I have a two projects using laravel framework. I have a form for project 1 that I want to embed on my project 2.
Here is my FormController in project 1
public function show(Form $form)
{
return view('formbuilder.render', compact('form'))->render();
}
View on project 2 where I want to embed the form on project 1
#extends('layouts.app')
#section('content')
div class="card rounded-0">
<div class="card-body">
<script type="text/javascript" src="https://route/for/first-project-form"></script>
</div>
</div>
#endsection
I want to imitate how jot form works. https://www.jotform.com/help/34-Embedding-a-Form-to-a-Web-Page.
How do I achieve this?

Using an iframe it's just this simple:
#extends('layouts.app')
#section('content')
div class="card rounded-0">
<div class="card-body">
<iframe src="https://route/for/first-project-form"></iframe>
</div>
</div>
#endsection
If you really want to use a javascript file to load the iframe (can't see any reason why, but let's do it):
Create a javascript file:
const container = document.getElementById('form-container')
const iframe = document.createElement("iframe");
iframe.setAttribute("src", "https://route/for/first-project-form");
iframe.style.width = "640px";
iframe.style.height = "480px";
container.appendChild(iframe);
In project 2:
#section('content')
<div class="card rounded-0">
<div class="card-body">
<div id="form-container"></div>
</div>
</div>
<script src="http//link/to/javascript/file"></script>
#endsection

Related

How to show database info in Laravel Blade with VUE

Sorry for the next question, Im really new on VUE.
I have a button on my blade, when I do it click I want to retrieve the info of the customer depend of the ID that get on my controller, I get the ID #3 and I click on CUSTOMER INFO Button, I want to see the info of this customer from the database
This is my function on my Controller CustomersController.php
public function showcustomers($idcustomer)
{
$Customers = Customers::find($idcustomer);
return view('showcustomer',
['Customers' => $Customers]);
}
And this is my button on Blade showcustomer.blade.php :
<div id="cita">
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-xs-6">
<button v-on:click="showinfo = !showinfo" type="button" class="w3-btn w3-blue" style="width:100%">CUSTOMER INFO</button>
</div>
</div>
</div>
</div>
<br/><br/>
<div class="container align-content-between">
<div class="row text-center">
<div class="col-md-12 col-xl-12">
<information v-if="!showinfo"></information>
</div>
</div>
</div>
</div>
My app.js
Vue.component('information', require('./components/information.vue').default);
var app = new Vue({
el: '#cita',
data: {
showinfo: true,
}
});
And finally my information.vue
<template>
<div id="information">
<h4>Information {{ Customers.name }}</h4>
</div>
</template>
<script>
export default {
name: "information"
}
</script>
<style scoped>
</style>
Standard way of doing that is you will be implementing an ajax request where your front-end or Vue will fetch the necessary information from back-end via ajax request.
Another way of achieving that is you will be using properties or attributes in VUE
from your information.vue add a props maybe customerName or orderId or both
<template>
<div id="information">
<h4>Information {{ customerName }}</h4>
<h4>ID {{ orderID }}</h4>
</div>
</template>
<script>
export default {
props:["customerName","orderID"],
name: "information"
}
</script>
<style scoped>
</style>
in you showcustomer.blade.php you can pass the data from php to your vue by adding attributes based on the property name declared on you vue template
<information customer-name="John Mahu" order-id="0099812-ABC" v-if="!showinfo"></information>
or populate from your PHP variable
<information customer-name="{{ $Customers->customer_name }}" order-id="{$Customers->some_order_id}" v-if="!showinfo"></information>
Read more about vue props
https://v2.vuejs.org/v2/guide/components-props.html

How to make dynamic #yield in laravel?

I want to make #yield('dynamic') to load different pages like single page application in laravel.
Route:
Route::get(
'/front-office-setup/{setup_type}',
'AdmissionFrontOfficeSetupController#index'
)->name('frontofficesetupview');
Controller:
public function index($setup_type)
{
$data['setup_type'] = $setup_type;
return view('frontoffice::frontofficesetup.frontofficesetup', $data);
}
View:
<div class="row">
<div class="col-md-3">asdf</div>
<div class="col-md-4">asdf</div>
<div class="col-md-5"> #yield('{{$setup_type}}')</div>
</div>
Section:
#extends('frontoffice::frontofficesetup.frontofficesetup')
#section('visitor-purpose')
sdfasd
#endsection
But it doesn't render or show in #yield('{{$setup_type}}')
Is there any way to do this?
Edit part*
Also i have already included a #yield type of things in view file
#extends('backend.master.master')
#section('content')
<div class="row">
<div class="col-md-3">asdf</div>
<div class="col-md-4">asdf</div>
<div class="col-md-5"> #yield($setup_type)</div>
</div>
#endsection
#yield is already started PHP tag <?php. SO no need to mention braces again{{}}. Simply try #yield($setup_type) It will work perfectly.

Registering a 2nd component? Vue.js Laravel6

I have created a fresh Laravel6 project to work out how to register components...
I have cloned ExampleComponent.vue to ExampleComponent2.vue
// ExampleComponent2.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example2 Component</div>
<div class="card-body">
I'm an example2 component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component2 mounted.')
}
}
</script>
// app.js
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('example-component2', require('./components/ExampleComponent2.vue').default);
// login.blade.php
- I have placed this under the closing tag and #endsection to test on the login page...
<example-component2></example-component2>
I have run "npm run watch" in command line and there are no error messages...
When I load the login route, I open the console to see this error message?
[Vue warn]: Unknown custom element: - did you
register the component correctly? For recursive components, make sure
to provide the "name" option.
(found in )
How do I register extra components???
// login.blade.php - I have placed this under the closing tag and #endsection to test on the login page...
You need an element with the id that you defined in your js/app.js:
const app = new Vue({
el: '#app', // you need an element with id="app". Your vue component will replace this
});
Then put your component inside that element.
//login.blade.php
#extends('layouts.authentication')
#section('content')
<div id="app">
<example-component2/>
</div>
#endsection

Blank page on laravel 5

I just try to create a profile page i create a Route like this:
Route::get('profile/{id}/{name}','ProfileController#index');
and the index function like this :
public function index($id,$name)
{
$user = \App\User::find($id);
return view('pages.profile',compact('user'));
}
profile view:
#extends('app')
#section('content')
<div class="container" style="margin-top: 50px;padding: 30px;">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="proPic"><img src="{{user->image}}" class="img-responsive" alt="Image"></div>
</div>
</div>
</div>
#endsection
but when I lunch the link i get a blank page
If you have a default installation, you probably need to have:
#extends('layouts.app')
instead of
#extends('app')
and change
{{user->image}}
to
{{ $user->image }}
Your code looks clean, a blank page can occur when laravel doesn't displays errors. I'd recommand you to :
1- Check the server response (HTTP code, content...)
2- Check your logs, maybe you'll discover a problem of configuration

Multiple Jplayer audio players from Laravel DB

I'm trying to create multiple instances of Jplayers that each play a different audio file from my Laravel Database (table called archives) and i'm stuck at the point the jQuery code meets the Laravel code.
So far the audio players play but they play the same file.
also i have trouble when i navigate deeper into the website. ex: with mydomain.com/segments/ the audio player adds "segments" to the url instead of just the public directory. I know a similar issue can be solved with the URL:asset in Laravel, but i'm not sure how to with this since it's the jquery that's getting the file.
This is where i try to create my multiple jplayer instances using a laravel Forloop (i need to start at 2 because player 1 is being used elsewhere)I'm confused about how to mix the Laravel and Jquery code.
This is all in my footer.blade.php
<!--{{{$counter = 2}}}-->
#foreach ($archives as $archive)
<script>
var counter = "{{$counter}}";
var file = "archiveAudio/{{$archive->audioFile}}";
$(document).ready(function(){
$("#jquery_jplayer_"+ counter).jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
title: "Hidden",
mp3: file,
oga: ""
});
},
play: function() { // To avoid multiple jPlayers playing together.
$(this).jPlayer("pauseOthers");
},
swfPath: "../../js",
supplied: "mp3, oga",
cssSelectorAncestor: "#jp_container_" + counter,
wmode: "window",
globalVolume: true,
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true
});
counter ++;
});
</script>
#endforeach
Home page Blade View (needs to start with #2 player add 1 to the player ID for each player it creates)
<div id="latest">
<!-- {{ $count = 2}} -->
#foreach ($archives as $archive)
<div class="singleLatest">
<img src = "/images/segments/{{$archive->segment->image}}" width="100px;"/>
<div class="playerAndInfo">
<h3> {{ $archive->archiveTitle}}<br>{{$archive->segment->name}}</h3>
<div id="jquery_jplayer_{{$count}}" class="jp-jplayer"></div>
<div id="jp_container_{{$count}}" class="jp-audio" role="application" aria-label="media player">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<div class="jp-controls">
<button class="jp-play" role="button" tabindex="0">play</button>
</div>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time" role="timer" aria-label="time"> </div>
<div class="jp-duration" role="timer" aria-label="duration"> </div>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your Flash plugin.
</div>
</div>
</div>
</div>
</div><!--end playerAndInfo-->
</div> <!-- end single latest -->
<!-- {{ $count = $count +1}} -->
#endforeach
</div><!-- End latest -->
Thanks!

Categories