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.
at No comments:
Labels: , , ,
Location: Jakarta, Indonesia

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 

 }    





at No comments:
Labels: , , ,
Location: Jakarta, Indonesia

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>
at No comments:
Labels: , , ,
Location: Jakarta, Indonesia

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";
}
?>



at No comments:
Labels: , ,
Subscribe to: Posts (Atom)

Set Cookie dan Remove Cookie dengan php vanilla.js

< html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport...