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...
Home » Penelusuran 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;
}
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>
<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>
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.
Aziz Blogger October 05, 2019 Admin Bandung Indonesia
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.
Aziz Blogger October 02, 2019 Admin Bandung Indonesia
Pengertian Library dalam dunia Pemrograman
(adsbygoogle = window.adsbygoogle || []).push({}); Library merupakan merupakan sekumpulan kode yang memiliki fungsi-fungsi tertentu dan dapat dipanggil...
NPM merupakan singkatan dari (Node Package Manager) yaitu sebuah tools yang menyediakan banyak package. Ini merupakan tool yang paling sering digunakan dalam Framework Node js.
Dengan NPM anda bisa melakukan beberapa hal seperti :
- 1. Membuat project baru
- 2. Menginstall package atau library.
- 3. Menjalankan script command line.
Cara menggunakan NPM
Jika anda menginstall Node js maka otomatis NPM juga sudah terpasang dan bisa nada gunakan. Untuk mengguanakan NPM di windows, linux, maupun Mac Os caranya sangat mudah. Caranya pun tidak berbeda platform satu dengan yang lainnya. Berikut cara menggunakan NPM menggunakan Os Windows untuk mengistall libarary.- Buka cmd kemudian arahkan kedalam folder root web anda misalnya "cd C:\user\aplikasi node js\"
- Setelah berada di folder web anda, silahkan ketikkan perintah "NPM install express". Perintah ini menginstruksikan untuk melakukan penginstalan package 'express'. Untuk instruksi penginstalan package lainnya silahkan kunjungi alamat NPM disini
- Selesai, package tinggal anda gunakan.
Di atas tadi merupakan cara penggunaan NPM dalam mengisntal package atau library. Sedangkan untuk membuat project baru anda tinggal masuk kedalam folder root web anda melalui terminal atau CMD kemudian mengetikkan.
npm init
Setelah itu akan ada beberapa instruksi yang muncul seperti package name, version, description, entry point, test command, git repository, keywords, autor,dan license. Silahkan isi atau kosongkan bila anda tidak ingin mengguanakan instruksi default.
Selanjutnya yang terakhir adalah menjalankan script command line hal ini memerlukan pengaturan pada file package.json agar npm mengetahui instruksi apa yang harus dijalankan. Caranya seperti berikut :
- Buka file package.json
- Pada kode "script:{ "test": "echo \"Error: no test specifed\" && exit 1"}" silahkan tambahkan dibawahnya menjadi seperti ini
- Terakhir ketikkan perintah ini di cmd
"scripts": { "test": "echo \"Error: no test specifed\" && exit 1" "start": "node app.js" },
npm start
Pada instruksi di atas terdapat kode "node app.js" itu adalah instruksi untuk menjalankan file app.js, silahkan sesuaikan dengan nama file node js anda.
Aziz Blogger September 28, 2019 Admin Bandung Indonesia
Mengenal Apa itu NPM dalam Node js dan Bagaimana Cara Menggunakannya
NPM merupakan singkatan dari (Node Package Manager) yaitu sebuah tools yang menyediakan banyak package. Ini merupakan tool yang paling sering digunakan...
Node js merupakan salah satu framework yang digunakan untuk membangun aplikasi berbasis web. Framework ini menggunakan bahasa javascript sebagai bahasa pemrograman utama.
Jika biasanya kita menggunakan bahasa javascript untuk berjalan di sisi client maka dengan Node js, javascript mampu berjalan di sisi server.
Node js bersifat multiplatform yang dapat berjalan di MAC OS, LINUX, serta WINDOWS tanpa melakukan perubahan pada kodenya.
Node js sudah memiliki lebih dari 400.000 paket npm yang tersedia yang bisa diguanakan oleh programer. Untuk mengetahui apa itu Npm silahkan klik tautan dibawah ini.
Baca : Mengenal Apa itu Npm dalam Node js dan Bagaimana Cara Menggunakannya
Kelebihan Node js.
Banyak programer yang memilih Node js sebagai Framework dalam membangun aplikasi dikarenakan beberapa hal berikut ini :- Bersifat open source yang artinya kodenya dapat utak atik oleh pogramer serta tentunya gratis untuk digunakan.
- Bahas pemrograman utama yang digunakan adalah Javascript, yang sudah sangat populer di dunia pemrograman web. Sehingga untuk mendapatkan referesi tidak terlalu sulit.
- Penggunaan bahasa pemrograman yang sama di sisi server maupun clien sehingga meminimalisir kesalahan pemrograman.
- Mampu menangani ribuan koneksi secara bersamaan meskipun dengan sumber daya terbatas.
Itulah Pengertia Node Js Beserta semoga bermanfaat. Aziz Blogger September 28, 2019 Admin Bandung Indonesia
Pengertia Node Js Beserta Kelebihannya
Node js merupakan salah satu framework yang digunakan untuk membangun aplikasi berbasis web. Framework ini menggunakan bahasa javascript sebagai bahasa...
JavaScript merupakan sebuah bahasa pemrograman berbasis web. Bahasa ini diperkenalkan pertama kali oleh Netscape atau yang dikenal sebagai Nestcape Communication Corporation pada tahun 1995. Nestcape adalah sebuah perusahaan jasa komputer asal Amerika Serikat tepatnya di MountainView, California. JavaScript yang awalnya dinamakan "LiveScript" berfungsi sebagai bahasa sederhana untuk browser Netscape Navogator 2.
Secara default bahasa JavaScript dapat disematkan dalam file html, ataupun membuat file berekstensi .js yang dapat dipanggil kedalam file html. Penulisannya sangat sederhana:
Anda bisa memasang kode itu di dalam file html. Misalnya jika ingin membuat sebuah alert (script untuk menampilkan pesan ) anda bisa menuliskannya seperti berikut :
Kode di atas belum bisa langsung menampilkan alert ketika website dibuka. Perlu adanya pemicu yang berguna untuk menjalankan function di atas. Pemicu yang dimaksud seperti onclick() = ketika element diklik, onmouseenter() = ketika mouse/cursor menyentuh element, dan masih banyak lagi.
Pada contoh program menggunakan JavaScript kali ini kita akan menjalankan aksi berdasarkan onclick(), sehingga kode di atas menjadi seperti ini :
Pada status di atas kita mengisyaratkan pada button ketika di klik maka method klik yang ada pada kode javascript akan di jalankan. Contoh anda bisa mengklik tombol bawah.
Jika anda berniat menggunakan onmouseenter anda tinggal merubah onclick() menjadi onmouseenter.
Aziz Blogger July 17, 2019 Admin Bandung Indonesia
Secara default bahasa JavaScript dapat disematkan dalam file html, ataupun membuat file berekstensi .js yang dapat dipanggil kedalam file html. Penulisannya sangat sederhana:
<script type="text/javascript">
// fungsi yang akan dijalankan
</script>
// fungsi yang akan dijalankan
</script>
Anda bisa memasang kode itu di dalam file html. Misalnya jika ingin membuat sebuah alert (script untuk menampilkan pesan ) anda bisa menuliskannya seperti berikut :
<script type="text/javascript">
function klik() {
alert("Selamat datang");
}
</script>
function klik() {
alert("Selamat datang");
}
</script>
Kode di atas belum bisa langsung menampilkan alert ketika website dibuka. Perlu adanya pemicu yang berguna untuk menjalankan function di atas. Pemicu yang dimaksud seperti onclick() = ketika element diklik, onmouseenter() = ketika mouse/cursor menyentuh element, dan masih banyak lagi.
Pada contoh program menggunakan JavaScript kali ini kita akan menjalankan aksi berdasarkan onclick(), sehingga kode di atas menjadi seperti ini :
<button onclick="klik()">Tombol</button>
<!-- kode html -->
<script type="text/javascript">
function klik() {
alert("Selamat datang");
}
</script>
<!-- kode html -->
<script type="text/javascript">
function klik() {
alert("Selamat datang");
}
</script>
Pada status di atas kita mengisyaratkan pada button ketika di klik maka method klik yang ada pada kode javascript akan di jalankan. Contoh anda bisa mengklik tombol bawah.
Jika anda berniat menggunakan onmouseenter anda tinggal merubah onclick() menjadi onmouseenter.
<button onmouseenter="klik()">Tombol</button>
<!-- kode html -->
<script type="text/javascript">
function klik() {
alert("Selamat datang");
}
</script>
<!-- kode html -->
<script type="text/javascript">
function klik() {
alert("Selamat datang");
}
</script>
Aziz Blogger July 17, 2019 Admin Bandung Indonesia
Contoh Program Menggunakan Javascript Sederhana
JavaScript merupakan sebuah bahasa pemrograman berbasis web. Bahasa ini diperkenalkan pertama kali oleh Netscape atau yang dikenal sebagai Nestcape Communication...
