<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Recipe",
"name": "Party Coffee Cake",
"author": {
"@type": "Person",
"name": "Mary Stone"
},
"datePublished": "2018-03-10",
"description": "This coffee cake is awesome and perfect for parties.",
"prepTime": "PT20M"
}
</script>
Thursday, August 31, 2023
JSON Link Data
Saturday, August 26, 2023
Reverse Number Vanilla Javascript
function reversedNum(num) {
return (
parseFloat(
num
.toString()
.split('')
.reverse()
.join('')
) * Math.sign(num)
)
}
console.log(reversedNum(num))
Saturday, August 19, 2023
POST CSRF TOKEN LARAVEL DENGAN VANILLA JS
1 . tambahkan csrf token di main layout atau master layout seperti berikut :
<meta name="csrf-token" content="{{ csrf_token() }}" />
2. Di terapkan di page apapun untuk vanilla jacscript , seperti berikut
function sample(e){
var ajax = new XMLHttpRequest();
ajax.open("POST", e.dataset.url, true);
ajax.setRequestHeader('X-CSRF-TOKEN', document.querySelector('meta[name="csrf-token"]').content); // disini
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status == 200) {
if(ajax.responseText.status){
window.location.reload();
}else{
console.log(ajax.responseText);
}
}
}
ajax.send();
}
Tuesday, August 15, 2023
Add Remove Textbox Jquery Javascript
<!doctype html>
<html lang="en">
<head>
<title>Add or Remove Input Fields Dynamically</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</script>
<style>
body {
display: flex;
flex-direction: column;
margin-top: 1%;
justify-content: center;
align-items: center;
}
#rowAdder {
margin-left: 17px;
}
</style>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<strong> Adding and Deleting Input fields Dynamically</strong>
<div style="width:40%;">
<form>
<div class="">
<div class="col-lg-12">
<div id="row">
<div class="input-group m-3">
<div class="input-group-prepend">
<button class="btn btn-danger" id="DeleteRow" type="button">
<i class="bi bi-trash"></i>
Delete
</button>
</div>
<input type="text" class="form-control m-input">
</div>
</div>
<div id="newinput"></div>
<button id="rowAdder" type="button" class="btn btn-dark">
<span class="bi bi-plus-square-dotted">
</span> ADD
</button>
</div>
</div>
</form>
</div>
<script type="text/javascript">
$("#rowAdder").click(function () {
newRowAdd =
'<div id="row"> <div class="input-group m-3">' +
'<div class="input-group-prepend">' +
'<button class="btn btn-danger" id="DeleteRow" type="button">' +
'<i class="bi bi-trash"></i> Delete</button> </div>' +
'<input type="text" class="form-control m-input"> </div> </div>';
$('#newinput').append(newRowAdd);
});
$("body").on("click", "#DeleteRow", function () {
$(this).parents("#row").remove();
})
</script>
</body>
</html>
ENV PHP
RULE OF ENV FILE PHP
1. composer require vlucas/phpdotenv
2. Create ".env" file
3.require_once('./vendor/autoload.php');
4.use Dotenv\Dotenv;
5. $dotenv = Dotenv::createImmutable(__DIR__);
6.$dotenv->load();
7.$_ENV['CALL_FROM_ENV_FILE']
Sunday, August 13, 2023
PUT , PATCH LARAVEL BLADE
<form action="{{ route('route_name') }}" method="post">
{{ method_field('PUT') }}
{{ csrf_field() }}
</form>Monday, August 7, 2023
EyeDrop Javascript
<button id="start-button">Open the eyedropper</button> <span id="result"></span>
<script>
document.getElementById("start-button").addEventListener("click", () => {
const resultElement = document.getElementById("result");
if (!window.EyeDropper) {
resultElement.textContent =
"Your browser does not support the EyeDropper API";
return;
}
const eyeDropper = new EyeDropper();
eyeDropper
.open()
.then((result) => {
resultElement.textContent = result.sRGBHex;
resultElement.style.backgroundColor = result.sRGBHex;
})
.catch((e) => {
resultElement.textContent = e;
});
});
</script>
Sunday, August 6, 2023
Load Image Canvas and Printed Vanilla Js
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://printjs-4de6.kxcdn.com/print.min.css">
<canvas id="card_canvas"></canvas>
<hr>
<button onclick="print()">Print</button>
<script>
function print(){
const cv = document.getElementById("card_canvas");
const url = cv.toDataURL("image/jpeg");
printJS({printable: url, type: 'image', base64: true, imageStyle: 'width:100%;height:100%;'});
}
function updateCanvas(){
var canv = document.getElementById('card_canvas');
var context = canv.getContext('2d');
canv.width = window.innerWidth;
canv.height = 930;
var image = new Image();
image.src = 'sertifikat.jpeg';
image.addEventListener("load", function () {
context.drawImage(image, 0, 0, window.innerWidth, 930);
context.font = "bold 45px Calibri";
context.fillStyle = "Red";
context.fillText("rifqi", 480, 390);
});
}
window.addEventListener("load",updateCanvas)
</script>
Saturday, August 5, 2023
Class Static dan Compact PHP
<?php
class database {
public static function user($array) {
array_walk($array, function($name){
echo "Hello + ".$name ."<br>";
});
}
}
$array = array("Muhammad","Rifqi");
$row = database::user($array);
echo"<pre>";
print_r($row);
?>
-----------------------------------------------------------------------------------------------
<?php
$city = array("San Francisco","aaaa","bbb");
$state = array("San Francisco","aaaa","bbb");
$event = array("San Francisco","aaaa","bbb");
$location_vars = array("city", "state",'event');
$res = compact($location_vars);
echo "<pre>";
print_r($res);
?>
Lambda dan Clousure serta callback
<?php
//contoh lambda
$call = function($say){
return "HAllo + ".$say;
};
echo $call('rifki');
?>
<hr>
<?php
//contoh clousur
$name = " rifki";
$hello = function() use ($name) {
echo "HAllo + ".$name;
};
$hello();
?>
<hr>
<?php
//clousue dengan callback
$user = array("muhammad","rifki");
array_walk($user, function($name){
echo "HAllo + ".$name ."<br>";
});
?>
Thursday, August 3, 2023
Read QrCode Javascript
<html>
<head>
<title>SCAN QR</title>
<script>
function scanqr() {
var file = document.getElementById("file").files[0];
var formdata = new FormData();
formdata.append("file", file);
var hr = new XMLHttpRequest();
hr.open("POST", 'http://api.qrserver.com/v1/read-qr-code/');
// hr.setRequestHeader("Content-Type", "application/json");
// hr.setRequestHeader("Content-Type", "multipart/form-data");
hr.onreadystatechange = function() {
if (hr.readyState == 4 && hr.status == 200) {
var return_data = JSON.parse(hr.responseText);
document.getElementById("status").innerHTML = JSON.stringify(return_data);
}
}
hr.send(formdata);
document.getElementById("status").innerHTML = "processing...";
}
function scanqr2(){
var file = document.getElementById("file").files[0];
var formdata = new FormData();
formdata.append("file", file);
fetch('http://api.qrserver.com/v1/read-qr-code/', {
method : 'POST',
body : formdata
})
.then(res => res.json())
.then((data) => {
console.log(data)
})
}
// Using Jpg/jpeg to output better
</script>
</head>
<body>
<form enctype="multipart/form-data" action="#">
<p align="center"><input type="file" id="file" onchange="scanqr()"></p>
<p align="center"><div id="status"></div></p>
</form>
</body>
</html>
Subscribe to:
Posts (Atom)
-
<html> <head> <title>Convert Image to Base64</title> </head> <body> <h2> Convert Ima... -
Javascript ES6 Untuk Kali ini Coba Nge-Share Upload Foto dengan Vanilla Javascript dengan 2 method. method pertama dengan menggunakan n... -
< html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-...