Teknologi Informasi

Setelah sebelumnya di postingan Membuat SlidingUpPanel Dengan HTML, CSS Dan Javascript Bagian 3 kita telah membuat pemutar musiknya, maka pada postingan terahir di dalam topik ini kita akan memperbaiki beberapa element serta sedikit memberi efek untuk mempercantik tampilan antarmuka. Pertama-tama kita akan mengedit pada bagian panel header dimana content dari panel header akan kita bagi menjadi 2, yaitu panel header saat posisi SlidingUpPanel terbuka dan panel header saat posisi SlidingUpPanel tertutup atau berada dibagian dibawah layar. Ubah bagian sliding-up-panel-header menjadi seperti berikut SlidingUpPanel Music Player Sekarang tambahkan css berikut kedalam file sliding-up-panel.css . #sliding-up-panel-header.expanded .panel-header-content__expanded{ transition:opacity 300ms; opacity:1; } #sliding-up-panel-header .panel-header-content__expanded{ position: absolute; transition: opacity 300ms; opacity:0; text-align: le...

Pada postingan sebelumnya tentang Membuat SlidingUpPanel Dengan HTML, CSS Dan Javascript Bagian 2 kita telah selesai SlidingUpPanel, di postingan kali ini kita akan membuat javascript untuk memainkan lagu dari yang disimpan dalam folder songs . Buatlah file javascript baru di dalam folder proyek Anda beri nama player.js . Seperti sebelumnya ssaat membuat sliding-up-panel.js buatlah class MusicPlayer pada file tersebut kemudian tambahkan constructor pada kelas MusicPlayer dan inisialisasikan variable yang akan digunakan. 'use strict'; class MusicPlayer{ constructor(){ this.player = document.querySelector('audio'); this.playlist = document.querySelector('.playlist'); this.playPauseBtn = Array.from(document.querySelectorAll('.play-btn')); this.nextBtn = document.querySelector('.next-btn'); this.prevBtn = document.querySelector('.prev-btn'); this.songs = Array.from(document.querySelectorAll(...

Pada postingan sebelumnya tentang Membuat SlidingUpPanel Dengan HTML, CSS Dan Javascript Bagian 1 kita telah selesai membuat desain awal aplikasi, di postingan kali ini kita akan bermain dengan javascript untuk membuat SlidingUpPanel yang kita buat sebelumnya dapat bekerja sesuai apa yang kita inginkan. Pertama buatlah file javascript baru beri nama sliding-up-panel.js  kemudian tuliskan "use strict"; . Mode use strict ini berguna untuk menempatkan program atau fungsi dalam operasi konteks yang strict (ketat). konteks yang ketat ini mencegah tindakan-tindakan tertentu dan melempar lebih banyak exception/pengecualian. Disini kita akan membuat kelas baru dengan nama SlidingUpPanel dan memuat kelas pada event window onload. "use strict"; class SlidingUpPanel{ constructor(){ } } window.addEventListener('load',() => new SlidingUpPanel()); Untuk mengetes apakah kelas yang kita buat bekerja kita akan menulis ke console, menjadi seperti berikut. ...

Tulisan ini bulum sepenuhnya selesai dan lengkap, namun akan terus diupdate jika penulis memiliki waktu luang. Pada postingan kali ini saya akan membahas cara penggunaan Flexbox Di CSS3. Sebelum memulai ada baiknya Anda memahami terlebih dahulu apa itu Flexbox. Apa Itu Flexbox ? Flexbox (Flexible Layout) merupakan salah satu fitur baru di CSS3 yang bertujuan untuk menyediakan cara yang lebih efisien dalam mengatur tata letak komponen pada suatu dokumen html dengan menyelaraskan ruang antar item dalam suatu elemen meskipu ukurannya tidak diketahui. Poin utama di balik Flexible Layout adalah untuk memberikan kemampuan untuk mengubah lebar / tinggi (dan urutan) item untuk mengisi ruang yang tersedia (sebagian besar untuk mengakomodasi semua jenis layar dan ukuran layar). Sebuah wadah fleksibel memperluas item untuk mengisi ruang kosong yang tersedia, atau mengecilkan mereka untuk mencegah overflow/melewati batas tinggi dan lebar dari wadah. Yang paling penting, Flexbox layout adalah layou...

Pada kesempatan kali ini saya akan membahas tentang bagaimana Membuat SlidingUpPanel Dengan HTML, CSS dan javascript . Biasanya SlidingUpPanel ini banyak digunakan di aplikasi-aplikasi pemutar musik di Android. Namun disini kita akan mencoba membuatnya menggunakan HTML, CSS dan javascript. Kita akan membuat pemutar musik sederhana dengan SlidingUpPanel yang hampir mirip dengan Google Play Music. Sebelum memulai ada baiknya Anda menginstall Nodejs terlebih dahulu jika di Komputer/Laptop Anda belum terinstall Nodejs. Nodejs merupakan teknologi javascript sisi server. Anda dapat mendownload Nodejs di https://nodejs.org . Setelah mengistall nodejs Anda perlu menginisialisasikan folder proyek Anda terlebih dahulu, dan mengisi rincian tentang proyek Anda. Pada folder proyek Anda buka terminal/cmd kemudian ketikkan perintah berikut. npm init Setelah itu isi semua rincian yang ditanyakan. Selanjutnya Anda peru menginstall beberapa modul yang akan kita gunakan diantaranya adalah: express jsmedi...