X
Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

Tuesday, September 6, 2022

Menghubungkan Bot Telegram dengan Spreadsheet

Tahukah kalian bahwa kita bisa membuat aplikasi dengan menggabungkan bot Telegram dengan Spreadsheet, caranya pun terbilang sangat mudah. Sebelum kita lanjut, ada baiknya mengetahui terlebih dahulu apa itu bot telegram.

bot telegram adalah fitur ataupun akun yang ada di telegram dimana akun ini dioperasikan seperti bot atau AI yang dapat di desain sesuai kebutuhan. Salah satu fungsi yang paling banyak digunakan adalah menjawab pesan yang masuk secara otomatis.

Pada postingan kali ini kita akan membuat sebuah bot telegram yang dapat mengambil ataupun menginput data ke spreadsheet layaknya database.

Silahkan ikuti langkah-langkah di bawah ini :

1. Buat akun bot telegram, silahkan ketikkan "BotFather " di pencarian telegram kemudian pilih yang bercentang biru.

2. Tekan tombol start kemudian masukkan nama yang terdiri dari 5 - 32 karakter, kemudian masukkan username yang di inginkan. 




3. Selanjutnya bila berhasil akan muncul respon berisi token dari botFather, silahkan simpan token ini.

4. Buka spreadsheet kemudian buat file baru.

5. Isi file baru sesuai gambar di bawah :




6. Klik Extensi -> Apps Script




7. Selanjutnya akan muncul editor seperti pada gambar di bawah :




8. Klik icon tambah pada library kemudian tambahkan Google Sheets API




9. Edit Kode.gs seperti berikut


var token = "MASUKKAN_TOKEN_BOT_ANDA_DISINI";
var SheetID = "MASUKKAN_SHEET_ID_DISINI";
var url = "TEMPEL_URL_HASIL_DEPLOY_DISINI";

function doPost(e) {

var stringJson = e.postData.getDataAsString();
var updates = JSON.parse(stringJson);
var pesan_dari_bot = updates.message.text;
var jenisAksi = pesan_dari_bot.toLowerCase();
var id_pesan = updates.message.chat.id;


switch(jenisAksi) {
case "ambil_data":
var data = AmbilDataDariSheet();
sendText(id_pesan,data);
break;
case "input_data":
InputDataKeSheet("Pulpen", "A2");
InputDataKeSheet("Alat tulis", "B2");
InputDataKeSheet(10, "C2");
InputDataKeSheet(2000, "D2");
break;
default:
sendText(id_pesan,"Aksi tisak ada!");
}


}

function InputDataKeSheet(isi, posisi){
var request = {
majorDimension: "ROWS",
values: [[isi]]
};

Sheets.Spreadsheets.Values.update(
request,
SheetID,
"Sheet1!"+posisi,
{valueInputOption: "USER_ENTERED"}
);
return true;
}

function AmbilDataDariSheet(){
var data = "";
var rows = Sheets.Spreadsheets.Values.get(SheetID, "Sheet1!A2:D2").values;
for (var row = 0; row < rows.length; row++) {
data = "Nama Barang : " + rows[row][0] + "\n\n" +
"Deskripsi : " + rows[row][1] + "\n" +
"Jumlah : " + rows[row][2] + "\n" +
"Harga Satuan : " + rows[row][3] + "\n";
}
return data;
}

function setbot(){
var link = "https://api.telegram.org/bot"+token+"/setWebhook?url="+url;
var a = UrlFetchApp.fetch(link);
Logger.log(a);
}


function sendText(chatid,text,replymarkup){
var data = {
method: "post",
payload: {
method: "sendMessage",
chat_id: String(chatid),
text: text,
parse_mode: "HTML",
reply_markup: JSON.stringify(replymarkup)
}
};
UrlFetchApp.fetch('https://api.telegram.org/bot' + token + '/', data);
}
Isi token sesuai token bot telegram yang telah dibuat. SheetID bisa di dapatkan pada url Spreadsheet anda pada bagian seperti pada gambar di bawah :




Sedangkan url bisa akan ada setelah melakukan deployment.

10. Klik Terapkan -> Deployment baru




11. Klik ikon pengaturan kemudian pilih aplikasi web




12. Isi deskripsi, dan pilih yang memiliki akses sebagai "siapa saja" kemudian klik terapkan




13. Klik Izinkan akses kemudian login ke akun google anda dan berikan akses.



Jika muncul seperti gambar di ata klik advance kemudian "Go to Project tak berjudul (unsafe)". Selanjutnya allow pada halaman selanjutnya.

14. Selanjutnya akan muncul ID penerapan dan URL. Silahkan salin url untuk ditempel pada codingan yg telah dibuat tadi.



15. Paste url ke bagian:


var url = "TEMPEL_URL_HASIL_DEPLOY_DISINI";

16. Selanjutnya pada bar pilih save kemudian pilih setBot kemudian klik jalankan




Hal ini untuk membuat bot telegram berinteraksi dengan spreadsheet yang telah dibuat dan bisa menjalankan kode.

Perlu di perhatikan setiap kali anda melakukan perubahan pada kode silahkan save, kemudian ulangi langkah 10 - 16. Jika tidak kode perubahan tidak akan diterapkan.

Kurang lebih contohnya akan tampak seperti berikut : 

 


 

Tuesday, June 14, 2022

Mengenal Apa itu DOM di Javascript

Salah satu hal yang wajib kamu pahami saat belajar javascript adalah DOM.
Penerapan DOM dalam pembuatan website akan membuat website yang di bangun lebih dinamis dan interaktif.

Apa itu DOM ?

DOM merupakan singkatan dari Document Object Model yang mana artinya, dokumen HTML yang dimodelkan dalam sebuah objek. Objek dari dokumen ini menyediakan sekumpulan fungsi dan atribut/data yang bisa kita manfaatkan dalam membuat program Javascript yang merupakan standar dari XML dan HTML yang memiliki sifat platform independent. DOM memungkinkan untuk melakukan perubahan struktur, gaya, dan konten dokumen. Selain XML dan HTML DOM juga bisa digunakan untuk dokumen SVG.

Bagaimana Cara Menggunakan DOM ?

Berikut beberapa contoh penggunaan DOM :
1. Menulis kedalam HTML
Untuk menulis keadalam html tanpa mendefenisikan tag mana yang akan di tuliskan kita dapat menggunakan fungsi document.write(). Contoh penggunaannya :
	
document.write("Selamat Datang");
document.write("<h1>Saya sedang mempelajari cara kerja DOM di Javascript</h1>");
	
2. Mengakses Elemen secara spesifik
Mengakses elemen secara spesifik memungkinkan anda untuk melakukan perubahan pada tag html secara spesifik. Kita dapat menggunakan fungsi-fungsi yang dapat disesuaikan dengan kebutuhan. Berikut beberapa fungsi yang paling sering digunakan dalam melakukan DOM di Javascript.
  • getElementById() fungsi untuk memilih element berdasarkan id yang telah di definisikan pada tag html.
  • getElementByName() fungsi untuk memilih element berdasarkan name yang telah di definisikan pada tag html.
  • getElementByClassName() fungsi untuk memilih element berdasarkan class yang telah di definisikan pada tag html.
  • getElementByTagName() fungsi untuk memilih element berdasarkan tag name pada html.
  • querySelector() fungsi untuk memilih element berdasarkan query.
  • querySelectorAll() fungsi untuk memilih element berdasarkan query secara multiple.

Selain fungsi di atas masi banyak lagi fungsi-fungsi yang lainnya. 


3. Membuat Element

Selain melakukan DOM pada element yang sudah ada pada html, DOM juga memungkinkan untuk membuat elemet dan menambahkannya kedalam dokumen. Untuk melakukan aksi ini digunakan fungsi document.createElement(). Contohnya seperti berikut :


p = document.createElement('p');


Contoh di atas akan menghasilkan tag/element paragraf yang didefinisikan kedalam variabel p.

Friday, March 19, 2021

Menampilkan Data dari Database Kedalam DataTables di Codeigniter

 


DataTables merupakan sebuah library javascript yang mempermudah kita dalam menampilkan data kedalam bentuk table. Penggunaannya yang sangat simple dan memiliki banyak fitur membuat datatables banyak digunakan.

Pada postingan kali ini kita akan mencoba menampilkan data dari database kedalam table menggunakan DataTables dan framework Codeigniter 3. Langsung saja ikuti langkah-langkah di bawah.

1. Buat struktur database yang akan ditampilkan.





2. Hubungkan Codeigniter dengan database yang akan ditampilkan, caranya masuk ke application -> config -> database.php lalu masukkan atur sesuai database kalian contohnya seperti dibawah.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'cmsku',
'dbdriver' => 'mysqli',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);


3. Buat view dengan nama coba.php kemudian isi dengan kode di bawah :

<!DOCTYPE html>
<html>
<head>
<title>Coba Data Tables</title>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css">

<!--Import jQuery before export.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>


<!--Data Table-->
<script type="text/javascript" src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="tabelku" class="display" style="width:100%">
<thead>
<tr>
<th>No</th>
<th>Judul</th>
<th>Isi</th>
<th>Status</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>


</tbody>
</table>

<script type="text/javascript">
$(document).ready(function(){
let RefTable = {
init() {
RefTable.table=$('#tabelku').DataTable({

bSort : true,
destroy : true,
iDisplayLength : 10,
processing : true,
serverSide : true,
order : [],
ajax : {
"url" : "<?php echo base_url()?>Coba/load",
"type" : "POST",
},

});

$("body").on("click", "[data-action]", function(e) {
e.preventDefault();

let action = $(this).data("action");
if (action === "edit") {
//aksi edit disini
}
});
}

}
RefTable.init();

});

</script>





</body>
</html>


4. Buat Model dengan nama DataModel.php lalu isi dengan kode dibawah

  <?php
defined('BASEPATH') OR exit('No direct script access allowed');

class DataModel extends CI_Model {

var $table = 'postingan a';//nama tabel

var $column_order = array(null,'a.tanggal',null); //order berdasarkan

var $column_search = array('a.judul_postingan, a.tanggal', 'a.isi'); //cari berdasarkan

var $select_column = array('a.*'); //select all
var $order = array('a.tanggal' => 'desc'); // default order


public function __construct()
{
parent::__construct();
$this->load->database();
}

private function _get_datatables_query()
{
$this->db->select($this->select_column);
$this->db->from($this->table);
$i = 0;

foreach ($this->column_search as $item) // loop column
{
if($_POST['search']['value']) // if datatable send POST for search
{

if($i===0) // first loop
{
$this->db->group_start(); // open bracket. query Where with OR clause better with bracket. because maybe can combine with other WHERE with AND.
$this->db->like($item, $_POST['search']['value']);
}
else
{
$this->db->or_like($item, $_POST['search']['value']);
}

if(count($this->column_search) - 1 == $i) //last loop
$this->db->group_end(); //close bracket
}
$i++;
}

if(isset($_POST['order'])) // here order processing
{
$this->db->order_by($this->column_order[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);
}
else if(isset($this->order))
{
$order = $this->order;
$this->db->order_by(key($order), $order[key($order)]);
}
}

function get_datatables()
{

$this->_get_datatables_query();
if($_POST['length'] != -1)
$this->db->limit($_POST['length'], $_POST['start']);
$query = $this->db->get();
return $query->result();
}

function count_filtered()
{
$this->_get_datatables_query();
$query = $this->db->get();
return $query->num_rows();
}

public function count_all()
{
$this->db->from($this->table);
return $this->db->count_all_results();
}
}



Silahkan sesuaikan baris berikut sesuai dengan database kalian.

var $table = 'postingan a';//nama tabel

var $column_order = array(null,'a.tanggal',null); //order berdasarkan

var $column_search = array('a.judul_postingan, a.tanggal', 'a.isi'); //cari berdasarkan

var $select_column = array('a.*'); //select all
var $order = array('a.tanggal' => 'desc'); // default order


5. Buat Controller dengan nama Coba.php lalu isi dengan kode dibawah

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Coba extends CI_Controller {

public function __construct()
{
parent::__construct();
$this->load->model('DataModel');

}

public function index()
{
$this->load->view('coba');
}

public function load()
{

$data = array();

$tampil = $this->DataModel->get_datatables();

$no = $_POST['start'];

foreach ($tampil as $key => $r) {
$no++;
$row = array();
$row[] = $no;
$row[] = $r->judul_postingan;
$row[] = $r->isi;
$row[] = $r->status;
$row[] = '<a href="javascript:; type="button" class="btn btn-xs yellow btn-outline btn-edit tooltips " title="Edit" data-action="edit" data-id="'.$r->id_postingan.'"><i class="fa fa-edit"></i> Edit</a>
';
$data[] = $row;
}

$output = array(
"draw" => $_POST['draw'],
"recordsTotal" => $this->DataModel->count_all(),
"recordsFiltered" => $this->DataModel->count_filtered(),
"data" => $data,
);

echo json_encode($output);
}
}


6. Hasil running akan tampak seperti gambar dibawah ini :





Tuesday, January 19, 2021

Mengenal Sejarah JavaScript

Para programer berbasis web tentunya sangat ingin mengetehui lebih dalam tentang JavaScript. Hal ini tidak lepas dari fitur yang disediakan oleh JavaScript yang memudahkan dalam mengontrol, memanipulasi sebuah website. Selain itu bahasa pemrograman ini juga digunakan di hampir 90% web diseluruh dunia.

Sejarah Bahasa Pemrograman JavaScript


JavaScript merupakan salah satu bahasa pemrograman berbasis website yang dikembangkan oleh Netscape, sebuah perusahaan telekomunikasi yang juga mengembangkan browser Netscape Navigator. JavaScript sendiri mulai dibuat pada tahun 1995 yang mana ditangani oleh programer Netscape bernama Brendan Eich.

Pada awal kemunculannya bahasa pemrograman ini bernama LiveScript. Nama ini kemudian dirubah menjadi JavaScript dikarenakan pada saat itu Java yang dirilis oleh Sun Microsystem (sekarang Oracle)sedang menjadi sorotan. Bisa dikatakan bahwa tujuan penamaan JavaScript tidak lain untuk menarik perhatian para programan pada waktu itu, jadi JavaScript tidak ada kaitannya dengan Java.

JavaScript kemudian mengalami banyak lika-liku sebelum akhirnya kuat seperti sekarang. Dimulai ketika pada tahun 1996 dimana Microsoft merilis Internet Explorer 3.0. Ketika itu Microsoft ingin menggunakan JavaScript akan tetapi Netscape tidak memberikan izin. Hal ini berujung pada Microsoft yang mengembangkan bahasa script sendiri yang diberi nama JScript.

Pada tahun 1997 kemudian Organisasi Standardisasi International ECMA memecahkan masalah ketidakcocokan antara JavaScript dengan JScript hasilnya adalah ECMAScript. Ditahun yang sama persaingan antara Netscape Navigater dan Internet Explorer terus berlanjut dimana persaingan ini kemudian dikatakan sebagai "Perang Browser Pertama".

Faktor penentu kemenangan Internet Explorer adalah ketika Windows 98 dirilis kepublik, dimana Internet Explorer di pasang sebagai standar pada sistem operasi ini. Hal ini berdampak pada jumlah pengguna dan pangsa pasar yang meningkat.

Setelah kalah pada perang browser pertama, JavaScript kian terpuruk dikarenakan banyaknya keluhan dari komunitas engineering mengenai keamanan JavaScript. Masalah ini berujung pada banyaknya pengguna yang memilih mematikan fungsi JavaScript itu sendiri.

Belum sampai disitu saja, munculnya Flash yang menyelipkan Action Script berdasarkan ECMA. Hal ini membuat orang beranggapan Saya tidak membutuhkan JavaScript lagi.

JavaScript akhirnya menemui titik balik pada tahun 2005 ketika Google Maps diperkenalkan, yang mengadopsi teknologi JavaScript "A-Jax". Google membuka jalan bagi JavaScript untuk dihidupkan kembali. Ditandai dengan munculnya berbagai pustaka lain seperti "jQuery" atau "prototype.js". Lahirnya jQuery membuat penulisan yang awalnya panjang, menjadi lebih ringkas.

JavaScript semakin kuat dengan munculnya Node js pada tahun 2008. Bahasa pemrograman JavaScript yang awalnya hanya bisa berjalan sebagai Front End kini juga bisa di sisi server atau Back End.

Paling terbaru di era ini muncul pesaing baru dengan nama TypeScript, yang memiliki keunggulan type-safe (fitur yang memberitahu kesalahan saat mengonversi JavaScript ), dan mampu bekerja di browser manapun. Kelebihan ini membuat TypeScript banyak di gunakan programer dalam menulis program. Namun pada akhirnya node.js dan TypeScript akhirnya berjalan sebagai JavaScript.

Baca Juga :

Pengertian Node Js Beserta Kelebihannya
Belajar Fungsi Dasar Java Script
Contoh Program Menggunakan Javascript Sederhana
Cara Membuat Slide Dengan JavaScript Biasa Tanpa Jquery

Sunday, September 13, 2020

Cara Membuat Menu Auto Fixed Ketika di Scroll | WEB


 

Auto Fixed disini biasanya banyak di terapkan pada web-website yang ingin memiliki tampilan atau design web yang lebih menarik. Jadi simpelnya ketika kita melakukan scroll ke bawah menu yang tadinya posisinya tetap akan berubah menjadi fixed di atas atau di bagian tertentu yang sudah di tentukan.

Untuk membuat tampilan website anda seperti ini sangatlah mudah anda bisa memanfaatkan fitur javascript. Sebagai contoh disini kita akan membuatnya dengan tampilan html sederhana seperti berikut :
 


 

Ketika anda melakukan aksi scroll maka tampilan akan menjadi seperti berikut :




Kode cara Membuat Menu Auto Fixed Ketika di Scroll


<!DOCTYPE html>
<html>
<head>
<title>Coding Rakitan</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
body{
height: 2000px;margin: 0px;padding: 0px;
}.bl{
height: 200px;
}
.menu{
height: 50px;
background: #001b6a;
width: 100%;
}.fx{
top: 0px;
position: fixed;
}.d-flex{
display: flex;
height: 100%;
}.menu a{
margin-right: 20px;
margin-bottom: auto;
margin-top: auto;
color: white;
font-family: sans-serif;
}.m-auto{
margin: auto;
}h1{
font-size: 83px;
font-family: sans-serif;
}
</style>
</head>
<body >
<div class="bl">
<div class="d-flex">
<h1 class="m-auto">Coding Rakitan</h1>
</div>
</div>
<div class="menu" id="menu">
<div class="d-flex">
<a>Menu 1</a>
<a>Menu 2</a>
<a>Menu 3</a>
<a>Menu 4</a>
</div>
</div>
<br>
<div class="d-flex">

<img class="m-auto" style="margin-top: 0px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhKb401NNIMCTN4hLJY6sYbJ9doTZPWRvMrwj-KEsU6xJ1FurpHhGqjfj48_K3-VQehloD6MGwOd-7z-e4DuJlz-ijqigIQpIBqQdFzEVZJn0dKk81dyLR7tYSL2xvsi9US_iRtB-w7Ir1/s2518/Screenshot_2020-09-13+CODING+RAKITAN+INSPIRASI+CODING+TERUPDATE+android+studio+laravel+php.png" style="width: 700px;">
</div>
</body>
<script type="text/javascript">
$(function(){

var menu = $('#menu');
pos = menu.offset();

$(window).scroll(function(){
if($(this).scrollTop() > pos.top+menu.height()){
menu.addClass('fx');
} else if($(this).scrollTop() <= pos.top ){
menu.removeClass('fx');
}
});

});
</script>
</html>
Kode yang perlu anda perhatikan ada pada :

<script type="text/javascript">
$(function(){

var menu = $('#menu');
pos = menu.offset();

$(window).scroll(function(){
if($(this).scrollTop() > pos.top+menu.height()){
menu.addClass('fx');
} else if($(this).scrollTop() <= pos.top ){
menu.removeClass('fx');
}
});

});
</script>
Dimana pada kode javascript di atas menginstruksikan ketika terjadi scroll kebawah dan nilai over dari scroll ini lebih besar dari over menu maka tambahkan class fx pada menu, yang mana menu fx ini akan membuat position menjadi fixed dan berada di atas atau top 0px. Sedangkan bila kebalikannya bila terjadi scroll ke atas dan nilainya lebih kecil atau sama dengan menu over maka hapus kembali class fx yang membuat menu kembali seperti semula.

Saturday, October 5, 2019

Menampilkan Gambar Sebelum di Upload dengan Javascript


Tentunya anda sudah sering melihat web form pendaftaran dimana terdapat sesi upload foto. Sebelum mengupload foto ke server, biasanya gambar dapat dilihat di bagian tertentu di web tersebut. Hal ini bertujuan agar user tidak salah dalam memasukkan gambar atau foto.

Untuk menampilkan gambar tersebut, kita bisa memanfaatkan bahasa pemrograman javascript. Hasil dari pembuatan aplikasi ini nantinya akan tampak seperti gambar di bawah.



Ketika user selesai memilih gambar maka akan muncul seperti gambar di bawah.




Ikuti langkah dibawah ini untuk membuat aplikasi web seperti di atas.

1. Buat direktory atau folder Buat folder baru untuk menampung gambar, css, dan file html. Adapun gambar yang akan ditampung adalah gambar berikut.



Silahkan download gambar di atas dan masukkan ke folder yang telah anda buat dengan nama no-image.png.

2. Buat file css.css Silahkan buat file css.css dan isi sesuai dengan kode di bawah.


body{
    margin: 0px;
    padding: 0px;
    background: #dedede;
    display: flex;
    height: 100%;
    width: 100%;
    position: absolute;
    font-family: roboto;
}.container{
    width: 50%;
    overflow: hidden;
    min-height: 200px;
    background: white;  
    margin: auto;
    border-radius: 4px;
    box-shadow: 1px 1px 3px black;
}.image{
    min-height: 200px;
    width: 50%;
    margin: auto;
    object-fit: cover;
    padding: 20px;
    margin-top: 20px;
}.image img{
    width: 100%;
}.tombol{
    margin-top: 20px;
    padding: 20px;
    text-align: center;
}button{
    padding: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: unset;
    border-radius: 4px;
    border: 1px solid #dedede;
    cursor: pointer;
}.btn-success{
    background: green;
    color: white;
}.btn-danger{
    background: red;
    color: white;
}.btn-primary{
    background: blue;
    color: white;
}p{
    color: grey;
    font-size: 12px;
    text-align: center;
}.head{
    background: #baffae;
    padding: 20px;
    border-bottom: 1px solid #c8c8c8;
}.head h2{
    margin: 0px;
    font-weight: 300;
}.fot{
    padding: 10px;
    border-top: 1px solid #c8c8c8;
    font-size: 12px;
}.kata{
    padding-top: 20px;
    padding-left: 20px;
}.kata p{
    color: black;
    font-size: 15px;
    text-align: left;
}


3. Buat file index.html Silahkan buat file index.html dan isi sesuai dengan kode di bawah.


<!DOCTYPE html>
<html>
<head>
    <title>Coding Rakitan</title>
    <link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
    <div class="container">
        <div class="head">
            <h2>Upload Image</h2>  
        </div>  
        <div class="kata">
            <p>Gambar yang dipilih nantinya akan muncul dibawah ini.</p>
        </div>
        <div class="image">
            <img src="no-image.png" id="gambar">
        </div>
        <p>Klik tombol pilih file untuk memilih file dari komputer anda.</p>
        <div class="tombol">
            <input type="file" name="files" id="file" style="display: none;">
            <button id="pilih" class="btn-primary">Pilih file</button>
        </div>
        <div class="fot">
            created by @ <a href="http://codingrakitan.blogspot.com">codingrakitan.blogspot.com</a>
        </div>
    </div>
    <script type="text/javascript">
        var tm_pilih = document.getElementById('pilih');
        var file = document.getElementById('file');
        tm_pilih.addEventListener('click', function () {
            file.click();
        })
        file.addEventListener('change', function () {
            gambar(this);
        })
        function gambar(a) {
            if (a.files && a.files[0]) {     
                 var reader = new FileReader();    
                 reader.onload = function (e) {
                     document.getElementById('gambar').src=e.target.result;
                 }    
                 reader.readAsDataURL(a.files[0]);
            }

        }
    </script>
</body>
</html>


Penjelasan kode :

Kode yang perlu diperhatikan terletak di :

<script type="text/javascript">
        var tm_pilih = document.getElementById('pilih');
        var file = document.getElementById('file');
        tm_pilih.addEventListener('click', function () {
            file.click();
        })
        file.addEventListener('change', function () {
            gambar(this);
        })
        function gambar(a) {
            if (a.files && a.files[0]) {     
                 var reader = new FileReader();    
                 reader.onload = function (e) {
                     document.getElementById('gambar').src=e.target.result;
                 }    
                 reader.readAsDataURL(a.files[0]);
            }

        }
    </script>


function gambar() menginstruksikan untuk mengecek apakah ada file yang dipilih user, jika ada maka buat object FileReader (). File reader berfungsi untuk membaca file atau gambar yang telah dipilih untuk selanjutnya memasukkan gambar tersebut kedalam src dari element img.

Silahkan jalankan di browser anda dan lihat hasilnya.

Thursday, October 3, 2019

Pengertian Library dalam dunia Pemrograman




Library merupakan merupakan sekumpulan kode yang memiliki fungsi-fungsi tertentu dan dapat dipanggil kedalam program lain.

Library dibuat untuk mempermudah dalam membangun sebuah aplikasi. Dengam library programer tidak harus membangun kode dari awal untuk suatu fungsi tertentu.

Sekilas mungkin anda menganggap library ini sama dengan Framework, nyatanya tidak karena library biasanya hanya berfokus pada satu tugas saja seperti menangani database. Sedangkan framework menangani banyak tugas. Bahkan framework terdiri dari sekumpulan library.

Hal yang mendasari dibuatnya library disebabkan banyaknya bug yang muncul ketika terjadi peningkatan pada sistem pengkodean. Aplikasi yang harus ditulis  secara keseluruhan menjadi kendalanya.

Pada tahun 1959 JOVIAL memberikan solusi dengan membagi aplikasi menjadi beberapa bagian yang lebih kecil. Solusi inilah yang menjadi dasar pembuatan yang kita kenal sekarang sebagai library.