technotechno

Postingan

Menampilkan postingan dengan label JavaScript

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

Baca selengkapnya

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:

Baca selengkapnya

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; displ

Baca selengkapnya

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.

Baca selengkapnya

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 pada 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

Baca selengkapnya

Pengertian Node Js Beserta Kelebihannya

Node js merupakan platform perangkat lunak yang digunakan untuk membangun aplikasi berbasis web. Platform 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 dalam membangun aplikasi web 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 sang

Baca selengkapnya

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 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: <script type="text/javascript"> // 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> Kode di a

Baca selengkapnya

Cara Membuat Menu Seperti Facebook dengan CSS, Jquery, dan HTML

Hai teman-teman kali ini saya akan berbagi mengenai bagaimana cara membuat menu yang mirip dengan menu milik sosial media terkenal. Apalagi kalau bukan Facebook, saya akan membagikan project yang telah saya buat di akhir postingan. Hasil tampilan nantinya akan nampak seperti gambar berikut. File utama yang harus anda perhatikan, ada pada file index.php dan css.css dalam folder "asset/css/". Untuk anda yang sudah terbiasa dengan dunia pemrograman web tentunya sudah paham dengan kode-kode yang akan saya bagikan. Bagi yag baru belajar silahkan dalami dulu tentang HTML dan juga CSS. Index.php <!DOCTYPE html> <html> <head> <title>Coding Rakitan</title> <link rel="stylesheet" type="text/css" href="asset/css/css.css"> <script type="text/javascript" src="asset/js/jq.js"></script> <script type="text/javascript" src="asset/js/js.js"></script> </head

Baca selengkapnya

Cara Membuat Scroll Auto Load More Data dengan Menggunakan Php, dan Jquery

Halo teman-teman sekarang saya akan membagikan sebuah cara membuat auto load more ketika scroll halaman mencapai batas bawahnya. Untuk lebih mengetahui bagaimana Scroll Auto Load ini anda bisa melihat contohnya seperti di bawah ini. Pada pembuatan tampilan seperti di atas kita hanya akan menggunakan data manual bukan dari database. Untuk membuat scroll auto load ini kita juga membutuhkan jquery, serta jquery inview yang dapat anda download melalui tautan di bawah. Jquery Jquery Invew Setelah selesai mendownload file di atas sekarang buatlah sebuah folder baru di localhost anda dan pastikan XAMP anda telah di aktifkan. Lanjut buat folder dengan nama disesuaikan dengan keinginan teman-teman saya sendiri memberi nama folder dengan "coba". Setelah itu buat direktori dengan susunan seperti berikut : Untuk file-file tambahan nantinya akan saya sertakan pada link download project di bawah. Yang perlu teman-teman ketahui disini adalah file "index.php", dan "data.php&qu

Baca selengkapnya

Membuat Text dan Tag Element Selalu Mengikuti Mouse atau Cursor

Hai sobat coding rakitan, kali ini kita akan membahas tentang bagaimana caranya agar suatu text atau element bisa selalu mengikuti mouse pada html. Dalam pembuatan web terkadang kita memerlukan suatu hal menarik yang akan membuat pengunjung terkagum-kagum dengan web yang kita miliki. Salah satu caranya dengan membuat tulisan bergerak mengikuti mouse kemanapun dia berada. Eits tapi masih di dalam layar browser yah. Untuk menambahkan cara ini anda memerlukan bantuan library javascript yaitu jquery. Library ini akan sangat membantu kita dalam menyederhanakan kode-kode javascript. Berikut adalah tampilan yang akan muncul bila anda menjalankan coding di bawah. Coding Rakitan Agar bisa menampilkan seperti di atas anda bisa menggunakan kode javascript seperti ini : <script type="text/javascript"> $('.kotak').mousemove(function(e){ $("#tulisan").css("display", "block"); $("#tulisan").css({left:e.pageX, top:e.pageY});

Baca selengkapnya