New to Laravel, trying to integrate Square Payment Form - laravel

I've been following the instructions on Square's website.
I've got all the code I need plugged into my application as shown on square, but the asset('js/square.js') call didn't find the file for some reason. So, I just added the script to the end of the resources/js/app.js file, doesn't seem to have any errors but the form doesn't look right..

<form id="nonce-form" novalidate action="PATH/TO/PAYMENT/PROCESSING/PAGE" method="post">
#csrf
<fieldset>
<span class="label">Card Number</span>
<div id="sq-card-number"></div>
<div class="third">
<span class="label">Expiration</span>
<div id="sq-expiration-date"></div>
</div>
<div class="third">
<span class="label">CVV</span>
<div id="sq-cvv"></div>
</div>
<div class="third">
<span class="label">Postal</span>
<div id="sq-postal-code"></div>
</div>
</fieldset>
<button id="sq-creditcard" class="button-credit-card" onclick="requestCardNonce(event)">Pay $1.00</button>
<div id="error"></div>
<!--
After a nonce is generated it will be assigned to this hidden input field.
-->
<input type="hidden" id="card-nonce" name="nonce">
</form>

Related

How to use laravel shweshi/OpenGraph

Here how to use it according to its GitHub
I already install the package:
Use Opengraph
$data = OpenGraph::fetch("http://www.addemyplus.com/blogs/my-faith-for-your-love");
that may return an array:
{"type":"website","title":"My Faith For Your Love","description":"","image":"http:\/\/www.addemyplus.com\/images\/frontend_images\/blogs\/medium\/57670.jpg"}
My problem is how can I use it on my blade that whenever I type a link in the form it will fetch the Og data of that site.
and show below the image and description
I have this code on form:
<form action="{{route('store_post_path')}}" method="POST">
{{csrf_field()}}
<div class="form-group">
<label class="sr-only" for="title">title</label>
<input type="text" class="form-control" name="title" placeholder="Your Post Title or Question">
</div>
<div class="form-group">
<label class="sr-only" for="post">post</label>
<textarea class="form-control" name="post_content" id="post_content" rows="3" placeholder="Briefly explain your question or Your Post Content"></textarea>
</div>
<div class="tab-pane fade" id="images" role="tabpanel" aria-labelledby="images-tab">
<div class="form-group">
<div class="custom-file">
</div>
</div>
<div class="py-4"></div>
</div>
<div class="btn-toolbar justify-content-between">
<div class="btn-group">
<button type="Submit" class="btn btn-primary">Share your Post</button>
</div>
</div>
</form>
How can I use the code to fetch the Og property of the link? I want to view the image and title of the link below before submitting my post.. Please show some tutorial sites for this.
Get the link from the form in post content. You can do it using regex.
function getUrl($string)
{
$regex = '/https?\:\/\/[^\" ]+/i';
preg_match_all($regex, $string, $match);
return ($match);
}
$url = getUrl($string)
If there are any links in post content you will get array of links.
Use OpenGraph::fetch($url) to fetch the OG data of the url. That you can show in the view.

view new div based on option value of select tag using laravel

i have a dropdown list when i select any one option from list i should display an another form with name of the teacher and subject of the teacher in textbox.The form is not displaying.when i select one item it should display the selected name and description box to add subjects of teachers that they interested please help me
view page
<div class="portlet light bordered row">
<h1>Add teacher subject</h1>
<div class="row">
<form action = "{{ url('subjectby/adding/process') }}" method = "POST">
{{ csrf_field() }}
<div class= "col-md-12">
<div class="form-group">
<h3>Choose Teachers </h3>
<div class="input-group">
<div class="ui-widget border-dropdown" style="margin-left:50px;">
<select id="teacher" name="teachers" placeholder="Select Teacher">
<option value="">Select Teacher</option>
#foreach($user as $tec)
<option value="{{$tec->id}}">{{$tec->name}}</option>
#endforeach
</select>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="new">
<div class="form-group">
<div class="col-sm-6">
<label for="inputFacebook">Teacher Name</label>
<input type=hidden value="{{$tec->id}}" name="id">
<input type="text" value="{{$tec->name}}" class="form-control" name="name">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label for="inputDescription">Subject Interested</label>
<textarea class="form-control" rows="8" name="intr" placeholder="Enter Subject Interest"> </textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="submit" value="add" name=b1>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
This isn't a Laravel specific problem. You are taking about DOM manipulation and so you best bet is to use jQuery or Vuejs or even vanilla Javascript if you so choose. Basically, you will write a script to watch for when your <select> changes, and then based on it's new value, show the part of the form you want.
Keep in mind that Laravel is a backend framework and so the user will never interact with it on a page. After a page loads, Laravel has done all it can do until another request is made. This is why Javascript was born - to let the user change things without reloading the page.

Integrate ckeditor in asp.net core mvc

I need to integrate an web based html editor in asp.net core project. I downloaded CKEditor and placed the unzipped folder in wwwroot folder.
I have referenced "ckeditor.js" in _Layout.cshtml using following script tag.
<script src="~/ckeditor/ckeditor.js" type="text/javascript">
</script>
Then, I've used following code to display the editor.
<textarea id="editor1" name="editor1">
</textarea>
<script type="text/javascript">CKEDITOR.replace('editor1');</script>
On using these lines of code in the empty About.cshtml of Home Folder, the editor was displayed. But the editor was not displayed when using the same code in another .cshtml file. The Code is given below
<div class="panel">
<div class="panel-heading border">
Create User
</div>
<div class="panel-body">
<div class="row no-margin">
<div class="col-lg-12">
<form asp-action="Edit" class="form-horizontal bordered-group" role="form">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="_id" />
<div class="form-group">
<label asp-for="Subject" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<input asp-for="Subject" class="form-control" />
<span asp-validation-for="Subject" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="MailFrom" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<input asp-for="MailFrom" class="form-control" />
<span asp-validation-for="MailFrom" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="Body" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
#* CKEDitor *#
<textarea id="editor1" name="editor1">
</textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" value="Update" class="btn btn-default" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">CKEDITOR.replace('editor1');</script>
Why is the editor not displayed in another cshtml file?
I've also faced the same problem while integrating CKEditor in aps.net mvc project. After trying to determine the error I found that the Layout of the page is different. You may have the same problem.
Use id attribute and use a hash on the name.
<script type="text/javascript">CKEDITOR.replace('#editor1');</script>

Dollar sign followed by a curly bracket inside widget html

I am currently on the Helsinki Release
Cannot understand the purpose of dollar sign and curly braces inside label tag
<label class="control-label" for="inputSuccess">${Location}</label>
The full html of the weather widget:
<form class="form-inline well">
<div class="form-group" ng-class="{'has-error': (c.errorMessage), 'has-success': (c.channel)}">
<label class="control-label" for="inputSuccess">${Location}</label>
<input type="text" class="form-control" id="weatherInput" placeholder="{{::data.enterLocMsg}}" ng-model="c.data.place">
<button type="submit" class="btn btn-default" ng-click="c.getWeather();">${Go}</button>
<span class="help-block" ng-bind="c.errorMessage" ng-if="c.errorMessage"></span>
</div>
</form>
<div class="panel panel-default" ng-if="c.channel">
<div class="panel-body">
<p>${Location}: {{c.channel.location.city}}, {{c.channel.location.region}} {{c.location.country}}</p>
<p>${Temperature}: {{c.channel.item.condition.temp}}</p>
<p>${Condition}: {{c.channel.item.condition.text}}</p>
<p>{{c.channel.item.condition.date}}</p>
</div>
</div>
From ServiceNow Product Dokumentation
Use the HTML template to internationalize strings in a widget.
Writing text as ${message} is the equivalent of writing ${gs.getMessage("message")} in other parts of the system, but written as a more legible shorthand.

Wget post data with text box that has randomly generated value?

I'm trying to use Wget to log in to my router and make a complete mirror of all the pages. The problem is, the router login page does not use the traditional "user" & "pass" ID for the text fields. It has a 'Password' and 'VmWpsPin' field. The ID for the 'Password' field is randomly generated every time the page is loaded/refreshed/requested. Below is the source code of the relevant part of the router page:
<body lang="en" class="superhubGUI" onload="javascript:Init()">
<div class="globalHeader">
<div id="nav">
<div id="logo">
<h1 id="header">Super Hub</h1>
</div>
<div id="buttons">Router Status
</div>
</div>
</div>
<div id="content">
<div id="container">
<div id="main">
<div class="panel noTitle" style="*padding:38px 30px 0px 30px">
<div id="login" class="inner">
<div class="inner-section">
<h2>Welcome to your Virgin Media Super Hub 2ac</h2>
<div id="signInForm">
<form action="/cgi-bin/VmLoginCgi" method="POST" name="signIn1" id="signIn">
<h2 id="loginTitle">Sign in to view and change your settings</h2>
<div class="field formField noHint username clearfix">
<label for="username"></label>
</div>
<div style="position:relative;top:-20px;" class="field formField noHint password clearfix">
<label for="password">Settings Password</label>
<input type="password" autocomplete="off" value="" maxlength="15" class="name required onefiftyPX inactive" name="KsCAqiihZb" id="password" onkeypress="handleKeyPress(event)" />
<div style="position:relative;left:-10px;" class="tooltip">
<img style="position:absolute; top:10px;" src="../images/toolTipButton.png"><span>Password can be found on the base of your Super Hub</span>
</div>
</div>
<div style="position:relative;top:-25px;" class="field formField noHint password clearfix">
<label for="password">WPS PIN</label>
<input type="text" autocomplete="off" value="" maxlength="15" class="name required onefiftyPX inactive" name="VmWpsPin" id="WpsPin" onkeypress="handleKeyPress(event)" />
<div style="position:relative;left:-10px;" class="tooltip">
<img style="position:absolute; top:10px;" src="../images/toolTipButton.png"><span>WPS PIN can be found on the base of your Super Hub</span>
</div>
</div>
<div>
Sign In
</div>
</form>
<p>
<span style="font-weight:bold;">Don't know your password?</span>
<br/>You'll find your default password on the bottom of your Super Hub.
</p>
</div>
</div>
</div><span class="pFoot"> </span>
</div>
</div>
My question is, how can I use Wget to login to the router when the ID changes at every request, is there somehow a way to request the page, parse the value out and then submit the form using something like --keep-session?
Or is there an alternative solution outside of Wget to automate the process? Any help is much appreciated.

Resources