Muhammad Rifqi: 2020

Sunday, November 22, 2020

Konsep Integrasi JS dan CSS

<style>

#hitam{
    background-color: black;
    width: 300px;
    height: 300px;;
    color: white;
}
</style>

<script>
function munculkan(){
var hitam = document.getElementById('hitam');
        hitam.style.display = "block";
}
function sembunyikan(){
var hitam = document.getElementById('hitam');
        hitam.style.display = "none";
}
</script>

<p>
<button onclick="sembunyikan()">Hide</button> <button onclick="munculkan()">
    Show
</button>
</p>



<div id="hitam"></div>

Tuesday, November 10, 2020

Membuat Export Csv dengan Javascript

1. index.html

<thead>

<tr>

<th>Points</th>

</tr>

</thead>

<tbody>

<tr>

<td>Steven Soto</td>

</tr>

<tr>

<td>Alfred, Hines</td>

</tr>

<tr>

<td>Jeff, "The Champion" Foster</td>

</tr>

</tbody>

</table>

<button id="btnExportToCsv" type="button" class="button">Export to CSV</button>

const dataTable = document.getElementById("dataTable");

const btnExportToCsv = document.getElementById("btnExportToCsv");

btnExportToCsv.addEventListener("click", () => {

const exporter = new TableCSVExporter(dataTable);

const csvOutput = exporter.convertToCSV();

const csvBlob = new Blob([csvOutput], { type: "text/csv" });

const blobUrl = URL.createObjectURL(csvBlob);

const anchorElement = document.createElement("a");

anchorElement.href = blobUrl;

anchorElement.download = "table-export.csv";

anchorElement.click();

setTimeout(() => {

URL.revokeObjectURL(blobUrl);

}, 500);

});

</script>

2. script.js

class TableCSVExporter {

constructor (table, includeHeaders = true) {

this.table = table;

this.rows = Array.from(table.querySelectorAll("tr"));

if (!includeHeaders && this.rows[0].querySelectorAll("th").length) {

this.rows.shift();

}

convertToCSV () {

const lines = [];

const numCols = this._findLongestRowLength();

for (const row of this.rows) {

let line = "";

for (let i = 0; i < numCols; i++) {

if (row.children[i] !== undefined) {

line += TableCSVExporter.parseCell(row.children[i]);

}

line += (i !== (numCols - 1)) ? "," : "";

}

lines.push(line);

}

return lines.join("\n");

}

_findLongestRowLength () {

return this.rows.reduce((l, row) => row.childElementCount > l ? row.childElementCount : l, 0);

}

static parseCell (tableCell) {

let parsedValue = tableCell.textContent;

// Replace all double quotes with two double quotes

parsedValue = parsedValue.replace(/"/g, `""`);

// If value contains comma, new-line or double-quote, enclose in double quotes

parsedValue = /[",\n]/.test(parsedValue) ? `"${parsedValue}"` : parsedValue;

return parsedValue;

}

Tuesday, August 11, 2020

Deteksi adblock dengan menggunkan javascript

1. index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <SCRIPT LANGUAGE="JavaScript" SRC="script.js"></SCRIPT>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Adblock Detector JavaScript</title>
</head>
<body>
<div id="wrapfabtest">
    <div class="adBanner">
        This is an ad
    </div>
</div>
    
    
</body>
</html>

2. script.js

$(document).ready(function(){
    if($("#wrapfabtest").height() > 0) {
        alert('No AdBlock :)');
    } else {
        alert('AdBlock Detected ');
    }
});


3. style.css

#wrapfabtest {
}
.adBanner {
    background-color: transparent;
    height: 1px;
    width: 1px;
}

4. jquery.min.js 

Saturday, June 20, 2020

menampilkan API google dengan google sheet

materi kali ini adalah menampilkan API google dengan google sheet , kita buat satu sample sheet sebagai berikut : https://docs.google.com/spreadsheets/d/1qLtDb1IH35woz2qk_IWwAxoKTlT4jLR5GghJVyH3FMM/edit?ts=5ee83093#gid=1966830543

nah kita akan menampilkan data sheet tersebut dengan menggunkan google script. kodenya sebagai berikut :

code.js :

function doGet(e){

var ss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1qLtDb1IH35woz2qk_IWwAxoKTlT4jLR5GghJVyH3FMM/edit#gid=1966830543");
var sheet = ss.getSheetByName("data2");
return getUsers(sheet);

}

function getUsers(sheet){
var jo = {};
var dataArray = [];
var rows = sheet.getRange(2,1,sheet.getLastRow()-1, sheet.getLastColumn()).getValues();

for(var i = 0, l= rows.length; i<l ; i++){
var dataRow = rows[i];
var record = {};
record['id'] = dataRow[0];
record['name'] = dataRow[1];
record['email'] = dataRow[2];
dataArray.push(record);

}

jo.user = dataArray;

var result = JSON.stringify(jo);

return ContentService.createTextOutput(result).setMimeType(ContentService.MimeType.JSON);

}

dari kode di atas akan menapilkan data json dari url berikut :

https://script.googleusercontent.com/macros/echo?user_content_key=k1icigpSJSkyHsD7kujDp10H9Nq0PZ71l1FHMSUnzSW5dByJWp4n4X2YfivVviWsy185mzRsIu8uBxFHXpfEoDu3zk3hhSEnm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnDLMDx2aDDjNDKsfBxIhcMtfToULCX94Tc3pdy9bFsiGjrKQoTQi29iiCJvF3XCchog3nbldWvo5&lib=MlPEAd3Jf5XdLxrCVm9kzNHJAXLFnk5gG

nah selanjutkan kita akan menampilkan detail dari api tersebut :

var ss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1qLtDb1IH35woz2qk_IWwAxoKTlT4jLR5GghJVyH3FMM/edit?ts=5ee83093#gid=1966830543");

var sheet = ss.getSheetByName("data2");

function doGet(e){

return search(e) ;

}

function doPost(e){

return search(e) ;

}

function search(e){

var id = e.parameter.id;

var jo = {};

var dataArray = [];

var values = sheet.getRange(2, 1, sheet.getLastRow(),sheet.getLastColumn()).getValues();

for(var i = 0;i<values.length; i++){

if(values[i][0] == id ){

var record = {};

record['id'] = values[i][0];

record['name'] = values[i][1];

record['email'] = values[i][2];

dataArray.push(record);

}

jo.user = dataArray;

var result = JSON.stringify(jo);

return ContentService.createTextOutput(result).setMimeType(ContentService.MimeType.JSON);

}

dari data di atas hasillnya akan menampilkan detail dari masing masing api .

berikut url api datanya.

https://script.google.com/macros/s/AKfycbyTIrz4S3gk62craftdkDO-t5EZ4kxKE38nF_vigtLnmh-eXrsQ/exec?id=LPKS%20IKHTIAR%20BERSAMA

Wednesday, June 3, 2020

Read data from database using fetch javascript

this data from : https://www.baznaspayakumbuh.com/api/api_tabloit_pulsa.php

and we will fetch data from api to HTML .

The following code is :

fetch('https://www.baznaspayakumbuh.com/api/api_tabloit_pulsa.php')

.then(response => response.json())

.then(data => {

let output = '<h2>Lists of Users</h2>';

output += '<ul>';

for(let i=0 ; i < data.result.length; i++){

output += `<li> ${data.result[i].title}</li>`;

}

output += '</ul>';

document.getElementById("response").innerHTML = output;

});

</script>

Happy Code ...

Saturday, April 11, 2020

Membuat "MVC LARAVEL SENDIRI " dengan PHP NATIVE

Baik lah . kali ini kita coba membuat MVC LARAVEL sendiri dengan PHP Native, basicly laravel adalah PHP JUGA, cuma di kembangkan menjadi code yang lebih terstruktur supaya untuk pengembangan ke depannya lebih mudah dan kalau pun terjadi pergantian pemakai code , programmer tidak akan pusing mengulik code programmer sebelumnya.

baiklah langsung saja ke code

1. controller.php

isinya sebagai berikut :

<?php
use Blog as B;
require ('model.php');

$data = new B\Loop;
echo $data->query();
// return template($data); jika menggunakan template

2. model.php

<?php

namespace Blog;

Class Loop {

public function query() {

return 'sql_query_anda_disni';

}

simple bukan!

Wednesday, February 26, 2020

Drag and Drop Image PHP Javascript

masih dalam tema javascript . sekarang kita membuat drag and drop javascript vanilla dengan php .
langsung saja kita buat 3 file berikut :

1. index.php

<html>
<head>
<title> Drag and Drop </title>
<link rel="stylesheet" type="text/css" href="global.css">
</head>
<body>
<p><img id="uploads" /></p>
<div class="dropzone" id="dropzone"> Drag and Drop Here </div>
<script type="text/javascript">
(function (){

var dropzone = document.getElementById('dropzone');

//upload to server
var upload = function(files){
var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append('file',files[0]);
xhr.onload = function(){
var data = JSON.parse(this.responseText);
document.getElementById('uploads').src = data[0].file;
}
xhr.open('post','upload.php');
xhr.send(formData);
}

//init file drop
dropzone.ondrop = function (e){
e.preventDefault();
this.className = 'dropzone';
upload(e.dataTransfer.files);
}

//init css before
dropzone.ondragover = function(){
this.className = 'dropzone dragover';
return false;
}

//init css after
dropzone.ondragleave = function(){
this.className = 'dropzone';
return false;
}

}());
</script>
</body>
</html>

2. upload.php

<?php

$uploaded = array();

if(!empty($_FILES['file']['name'])){

$name = $_FILES['file']['name'];

if(move_uploaded_file($_FILES['file']['tmp_name'],'upload/'.$name)){

$uploaded[] = array(

'name'=>$name,

'file'=>'upload/'.$name

);

}

echo json_encode($uploaded);

3. global.css

body{

font-size: Arial;

}

.dropzone{

width:300px;

height:300px;

border:2px dashed #ccc;

color:#ccc;

line-height: 300px;

text-align: center;

}

.dropzone.dragover{

border-color:#000;

color:#000;

}

simple bukan , happy nice day.

Tuesday, February 25, 2020

REST API DUA METHOD CURL dan FILE_GET_CONTENT

Untuk Kali Ini Kita Bermain dengan API , tentu dengan PHP DAN MYSQL. nah disini saya akan menjelaskan 2 method , satu dengan curl satu lagi dengan get_content. berikut kodenya :

1. sample curl get data.

$ch = curl_init(); //inisial curl

curl_setopt($ch, CURLOPT_URL, 'https://example.com/json.php'); // get url

curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1); //kirim data

$content = curl_exec ($ch); //eksekusi

curl_close ($ch); //close

echo json_decode($content,true);


2. sample data curl post data

define("URL","http://example.com");

$fields = array(

'token'=>$token,

'key'=>$key,

'subject'=>$subject

);

$d = json_encode($fields);

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, URL);

curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");

curl_setopt($ch, CURLOPT_POSTFIELDS, $d);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

curl_setopt($ch, CURLOPT_HTTPHEADER, array(

'Content-Type: application/json',

'Content-Length: ' . strlen($d))

);

$result = curl_exec($ch);

curl_close($ch);

3. sample data get_content , untuk contoh kasus login dengan php mysql dan java

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
//menghindari CORS origin

include "config.php"; // koneksi

$post = json_decode(file_get_contents('php://input'),true); //get data dari luar php

if(isset($post['nik']))
{
$login = mysqli_num_rows(mysqli_query($con, "SELECT * FROM tbl_user WHERE
username='".$post['username']."' AND password='".md5($post['password'])."'"));

if($login > 0) {
$data = mysqli_fetch_assoc(mysqli_query($con, "SELECT * FROM tbl_user WHERE
username='".$post['username']."' AND password='".md5($post['password'])."'"));

$result = json_encode(array('status'=>'OK','msg'=>$data));
echo $result; //result

} else {

$result = json_encode(array('status'=>'OK','msg'=>'User Not Exist'));
echo $result; //result

}
}else{

$result = json_encode(array('status'=>'OK','msg'=>'Cannot Load Data'));
echo $result; //result

}

Preview Image Javascript Vanilla

Masih Dengan Javascript, Kali ini kita ambil materi yang simple yaitu preview image before upload dengan javascript.

baik berikut kodenya :

<input type="file" name="foto" onchange="loadFile(event)">
//function js untuk realtime / onchange

<p> <img id="output" width="250"/> </p> // output hasil

<script>
function loadFile(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
//Deklarasi function.
};
</script>

Membuat Upload Foto Javascript method ajax native dan Fetch Javascript

Javascript ES6

Untuk Kali ini Coba Nge-Share Upload Foto dengan Vanilla Javascript dengan 2 method. method pertama dengan menggunakan native ajax. yang kedua dengan menggunakan method fetch. let' go kita coba mulai kodingannya : 😎💪

1. upload foto javacript dengan ajax native .

kita siapkan satu file bernama index.php sbb :

<script>

----------------------- Awal ini adalah penyederhaan dari element ------------------------------

function _(el){

return document.getElementById(el);

}

----------------------- Akhir ini adalah penyederhaan dari element -----------------------------

----------------------- ini adalah function upload filenya ------------------------------------------

function uploadFile(){

var file = _("file1").files[0]; // name dari file-image

var formdata = new FormData(); //deklarasi form menggunakan js

formdata.append("file1", file); // name dari element html beserta value yang dikirim ke server

var ajax = new XMLHttpRequest(); // initial untuk ajax

ajax.open("POST", "file_upload.php"); // action ajax

ajax.onreadystatechange = function() {. // jika ajax berhasil dan mengirim response baliknya

if(ajax.readyState == 4 && ajax.status == 200) {

var return_data = ajax.responseText;

console.log(return_data);

_("status").innerHTML= return_data;

}

ajax.send(formdata); //form yang dikirm

}

</script>

<form id="upload_form" enctype="multipart/form-data" method="post">

<p><input type="file" name="file1" id="file1"></p>

<p><input type="button" value="Upload File" onclick="uploadFile()"></p>

<p id="status"></p>

</form>

berikutnya adalah kita menyiapkan pengiriman ke server , kita buat file dengan nama file_upload.php

<?php

$fileName = $_FILES["file1"]["name"]; // name dari file

$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // PHP tmp folder

$fileType = $_FILES["file1"]["type"]; // jenis dari file

$fileSize = $_FILES["file1"]["size"]; // Ukuran size dalam bytes

$fileErrorMsg = $_FILES["file1"]["error"]; // 0 untuk false... and 1 untuk true

if(move_uploaded_file($fileTmpLoc, "test_upload/$fileName")){

echo "OKE";

} else {

echo "GAGAL";

}

2. upload foto javacript dengan Fetch data.

method Fetch adalah method yang lebih asyncronus untuk pengiriman data ke servernya.

pertama kita siapakan index.phpnya.

<form enctype="multipart/form-data" method="post">

<p><input type="file" name="file" id="image"></p>

<p><input type="button" id="upload_btn" value="Upload File"></p>

<p id="output"></p>

</form>

<script src="script.js"></script>

yang kedua kita siapkan vanilla javascriptnya.

function _(el){

return document.getElementById(el);

}

//inital event submit

_("upload_btn").addEventListener('click',uploaddata);

function uploaddata(event){

event.preventDefault(); // mencegah default js

//initsial header untuk mehod data

const h = new Headers();

h.append('Accept','application/json');

// initial variable form data

const fd = new FormData();

const myFile = _('image').files[0];

fd.append('avatar', myFile);

// format data pengiriman ke server

let req = new Request('http://localhost/blog/upload.php', {

method: 'POST',

headers: h,

mode: 'no-cors',

body: fd

});

//method pengiriman data

fetch(req)

.then( (response)=>{

console.log(response);

_('output').textContent = "Oke";

})

.catch( (err) =>{

console.log('ERROR:', err.message);

});

}

selenjutnya kita buat pengiriman data ke server

<?php

$fileName = $_FILES["avatar"]["name"]; // file name

$fileTmpLoc = $_FILES["avatar"]["tmp_name"]; // PHP tmp folder

if(move_uploaded_file($fileTmpLoc, "test_upload/$fileName")){

echo "OKE";

} else {

echo "GAGAL";

}

Muhammad Rifqi

Sunday, November 22, 2020

Konsep Integrasi JS dan CSS

Tuesday, November 10, 2020

Membuat Export Csv dengan Javascript

Tuesday, August 11, 2020

Deteksi adblock dengan menggunkan javascript

Saturday, June 20, 2020

menampilkan API google dengan google sheet

Wednesday, June 3, 2020

Read data from database using fetch javascript

Saturday, April 11, 2020

Membuat "MVC LARAVEL SENDIRI " dengan PHP NATIVE

Wednesday, February 26, 2020

Drag and Drop Image PHP Javascript

Tuesday, February 25, 2020

REST API DUA METHOD CURL dan FILE_GET_CONTENT

Preview Image Javascript Vanilla

Membuat Upload Foto Javascript method ajax native dan Fetch Javascript

Set Cookie dan Remove Cookie dengan php vanilla.js

Report Abuse

Labels