Deteksi Tubrukan Objek Dengan HTML5 [Part 2]
|
|
- Irwan Setiabudi
- 7 tahun lalu
- Tontonan:
Transkripsi
1
2 Deteksi Tubrukan Objek Dengan HTML5 [Part 2] Oleh: Yudhistira Bayu W Bismillahirahmanirahim Assalamualaikum wr.wb Setelah kita belajar dengan konsep awal dari tubrukan ini yang berada di Part 1, sekarang kita berlangsung ke part 2 yaitu untuk deteksi tubrukan 2 objek yang ditampilkan kedalam kanvas. Sebenarnya ada beberapa konsep untuk menggambarkan tubrukan dengan html5, contohnya rectan... Bismillahirahmanirahim Assalamualaikum wr.wb Setelah kita belajar dengan konsep awal dari tubrukan ini yang berada di Part 1, sekarang kita berlangsung ke part 2 yaitu untuk deteksi tubrukan 2 objek yang ditampilkan kedalam kanvas. Sebenarnya ada beberapa konsep untuk menggambarkan tubrukan dengan html5, contohnya rectangle collision. Gambar diatas merupakan contoh dari rectangle collision. Jadi, pada rectangle collision ini semua objek dianggap kotak dan pengecekan dilakukan oleh posisi antar kotak yang saling bersinggungan. Kelemahannya, posisi tubrukannya ga pas karena berbentuk kotak :D tapi kelebihannya adalah perfomanya lebih bagus
3 Sementara gambar di atas adalah contoh dari pixel perfect collision. Jadi pengecekan menggunakan pixel setiap gambar objek yang akan dicek tubrukannya. Kelebihan dari cara ini adalah proses tubrukan yang dilakukan akan selalu tepat, namun performa menjadi lambat karena harus mengecek setiap pixel gambar dari setiap objek. Nah, pada tutorial ini, kita akan menggunakan konsep collision yang pertama, yaitu rectangle collision. Tujuan kita adalah agar performa lebih baik. Dan rectangle collision juga konsep yang paling banyak dipakai. Oke kita langsung aja ke programnya, seperti biasa, keterangannya ada di bawah dari tutorial ini: <!DOCTYPE HTML> <html> <head> <style> canvas { border-width: 1px; border-style: solid; </style> <script> var canvas; var ctx; var balls = []; var circlex = 30; var circley = 30; var circlexmodifier = 2; var circleymodifier = 2; window.onload = function(){ canvas = document.getelementbyid("mycanvas"); ctx = canvas.getcontext("2d"); var newball1 = new Object(); var newball2 = new Object(); newball1.x = 30; newball1.y = 30;
4 newball2.x = 500; newball2.y = 30; newball1.modx = 4; newball1.mody = 4; newball2.modx = -2; newball2.mody = 2; newball1.color = "#FF0000"; newball2.color = "#0000FF"; balls[0] = newball1; balls[1] = newball2; ; setinterval(draw, 1.6); function draw() { ctx.fillstyle = "#fff"; ctx.fillrect(0,0,canvas.width,canvas.height); false); for (b in balls) { ctx.beginpath(); ctx.arc(balls[b].x, balls[b].y, 30, 0, 2 * Math.PI, ctx.fillstyle = balls[b].color; ctx.fill(); balls[b].x += balls[b].modx; balls[b].y += balls[b].mody; if (balls[b].x >= canvas.width-30) balls[b].modx *= -1; else if (balls[b].x < 30) balls[b].modx *= -1; if (balls[b].y >= canvas.height-30) balls[b].mody *= -1; else if (balls[b].y < 30) balls[b].mody *= -1; { for (var i=balls[0].x-30; i<balls[0].x + 30; i++) { for (var j=balls[0].y-30; j<balls[0].y + 30; j++) if (i >= balls[1].x-30 && i <= balls[1].x + 30 && j >= balls[1].y-30 && j <= balls[1].y + 30) { balls[0].modx *= -1; balls[0].mody *= -1; balls[1].modx *= -1; balls[1].mody *= -1;
5 break; </script> </head> <body> <center> <canvas id="mycanvas" width="640" height="480"> </canvas> </center> </body> </html> Keterangan: - Kode dibawah ini adalah kode yang terdapat pada baris 69, dimana kita melakukan looping untuk mendapatkan setiap titik pada objek bola pertama for (var i=balls[0].x-30; i<balls[0].x + 30; i++) { - Kode dibawah ini kode baris 70, sama tujuannya dengan kode diatas. Namun bedanya ini untuk mendapatkan setiap titik pada objek bola kedua for (var j=balls[0].y-30; j<balls[0].y + 30; j++) { - Kode dibawah ini terdapat pada baris 75-79, bertujuan untuk jika terjadi singgungan antar titik maka kita dapat merubah nilai modx dan mody pada setiap bola dengan dikalikan -1, yang akan menjadi nilai berlawanan dari nilai awal; Sehingga arah bola akan berbalik setelah bertubrukan balls[0].modx *= -1; balls[0].mody *= -1; balls[1].modx *= -1; balls[1].mody *= -1; - Kode dibawah ini, terdapat pada baris 80. Break digunakan untuk menghentikan pengecekan, karena sudah pasti tubrukan terdeteksi. Jadi, tidak perlu lanjut ke pengecekan titik titik lainnya break; Nah, hasil dari program diatas adalah ada 2 bola yang bisa saling bertubrukan. Oke cukup sekian
6 dari saya, tutorial ini akan berlanjut ke part 3 dimana akan ada banyak bola yang bertubrukan. Hampir mirip dengan ini, bedanya ada pada line dimana akan ada beberapa baris pengecekan. Tentang Penulis Yudhistira Bayu W Seorang pelajar tampan dan rupawan yang mencoba belajar coding.
Deteksi Tubrukan Objek Dengan HTML5 [Part 1]
Deteksi Tubrukan Objek Dengan HTML5 [Part 1] Oleh: Yudhistira Bayu W Bismillahirahmanirahim Assalamualaikum wr.wb Alhamdulillah kita telah sampai pada tutorial penanganan Tubrukan dengan menggunakan HTML5.
Lebih terperinciDeteksi Tubrukan Objek Dengan HTML5 [Part 3]
Deteksi Tubrukan Objek Dengan HTML5 [Part 3] Oleh: Yudhistira Bayu W BismillahirahmanirahimAssalamualaikum wr.wb Alhamdulillah kita sudah sampai di part terakhir yaitu part ke 3 dari tutorial tubrukan
Lebih terperinciGRAFIKA GAME. Aditya Wikan Mahastama. Prinsip Prinsip Grafika Komputer UNIVERSITAS KRISTEN DUTA WACANA GN1213
GRAFIKA GAME Aditya Wikan Mahastama mahas@ukdw.ac.id Prinsip Prinsip Grafika Komputer 2 UNIVERSITAS KRISTEN DUTA WACANA GN1213 (1) PIKSEL, BITMAP dan VEKTOR PENGOLAHAN CITRA DIGITAL 1950 Image Processing
Lebih terperinciBermain dengan Marker Google Maps API
Bermain dengan Marker Google Maps API Oleh: Hasyemi Rafsanjani Asyari Marker adalah salah satu penanda lokasi berbentuk icon atau pin atau juga image. Marker bisa kita rubah dengan image dari kita atau
Lebih terperinciMembuat Simpel Site HTML Layout Menggunakan Tag div
Membuat Simpel Site HTML Layout Menggunakan Tag div Oleh: Yudhistira Bayu W Ya, setelah saya memberikan Tutorial Tutorial Simpel HTML pada sebelumnya, Kali Ini saya akan memberikan Cara Membuat Simpel
Lebih terperinciHover Putar CSS3. Oleh: Mohammad Nur Huda
Hover Putar CSS3 Oleh: Mohammad Nur Huda Assallamualaikum... Haha... Sebenarnya ini adalah tulisan pertama saya pada situs berbagi ilmu ini :-). Pada kali ini kita akan membuat efek hover memutarkan objek
Lebih terperincibuat Lightbox mu sendiri dengan jquery
buat Lightbox mu sendiri dengan jquery Oleh: putra surya herlambang assalamualikum wr wb. apakah kamu pernah melihat gambar pada website yang ketika kamu klik lalu akan muncul suatu kotak besar yang juga
Lebih terperinciBAB IV IMPLEMENTASI KARYA. Dalam bab ini akan diuraikan implementasi hasil karya yang merupakan
BAB IV IMPLEMENTASI KARYA Dalam bab ini akan diuraikan implementasi hasil karya yang merupakan penjabaran dari perancangan karya, meliputi pra produksi, produksi, dan pasca produksi. 4.1 Pra Produksi Pada
Lebih terperinciMenampilkan multiple marker Google Maps API
Menampilkan multiple marker Google Maps API Oleh: Hasyemi Rafsanjani Asyari Masih berhubungan dengan Google Maps, kali ini saya akan mengajarkan bagaimana menampilkan banyak marker pada map. Kalau pada
Lebih terperinciMembuat Halaman Admin Untuk Web Buatan Sendiri
Membuat Halaman Admin Untuk Web Buatan Sendiri Oleh: Yudhistira Bayu W Bismillahirahmanirahim, Assalamualaikum wr.wb Apakabar mas bro dan mbak bro semua :D masih semangat ga nih puasanya? :D ini sambil
Lebih terperinciBab 4 Hasil dan Pembahasan
Bab 4 Hasil dan Pembahasan 4.1 Prototype Pembuatan aplikasi tidak lepas dari kebutuhan user untuk memenuhi kebutuhan dan materi yang ada. Proses prototyping aplikasi terdapat penambahan yang dibutuhkan
Lebih terperinciMembuat Themes Wordpress sendiri - Part 1
Membuat Themes Wordpress sendiri - Part 1 Oleh: asep saepulloh Halo sahabat jaco. Kali ini saya akan membahas bagaimana caranya membuat themes sendiri di CMS Wordpress. Terkadang sahabat jaco muak dengan
Lebih terperinciTIP 163. Game Engine. Topik 1 (Pert 2) Game Engine dan Struktur Game HTML5 Sederhana. Dosen: Aditya Wikan Mahastama
TIP 163 Game Engine Topik 1 (Pert 2) Game Engine dan Struktur Game HTML5 Sederhana Dosen: Aditya Wikan Mahastama Last Week Review Bagaimana dengan contoh game yang diminta untuk dipelajari? Apa yang anda
Lebih terperinciSImple Pop-Up Modal dengan CSS3 dan Jquery
SImple Pop-Up Modal dengan CSS3 dan Jquery Oleh: d-newbie Assalamualaikum wr.wb. bertemu lagi dengan saya, kali ini saya akan menulis tutorial tentang pop-up, apa itu pop-up? Kalo menurut wikipedia pop-up
Lebih terperinciMembuat Web Chatting dengan Ajax Jquery, PHP, dan Bootstrap [Part 2]
Membuat Web Chatting dengan Ajax Jquery, PHP, dan Bootstrap 2.3.2 [Part 2] Oleh: d-newbie pada tutorial sebelumnya kita sudah membuat 2 modal, yaitu modal "Masuk" dan modal "Daftar" dan pada tahap ini
Lebih terperinciMenampilkan Google Maps V3 pada halaman website
Menampilkan Google Maps V3 pada halaman website Oleh: Hasyemi Rafsanjani Asyari Sekilas tentang Google Maps, ya semua mungkin hampir sudah tahu merupakan salah satu produk dari Google. Dengan Google Maps
Lebih terperinciMembuat PopUp Menu dengan HTML dan JavaScript
Membuat PopUp Menu dengan HTML dan JavaScript by Fajran Rusadi 1. Publication Information Copyright 2004 by Fajran Iman Rusadi All rights reserved. 2. Abstraksi Dalam tutorial kali ini, kita akan membuat
Lebih terperinciFacebook App dengan Javascript
Facebook App dengan Javascript Oleh: Dewi Rosalin Hampir semua pengguna internet tidak asing lagi dengan Facebook, bahkan sudah memiliki akun Facebook. Bagi pemilik website hal ini dapat mambantu untuk
Lebih terperinciCara membuat elemen agar bisa didrag
Cara membuat elemen agar bisa didrag Oleh: Khaerul Amin Website yang indah tidak hanya dilihat dari tampilannya saja, akan tetapi dilihat juga dari berbagai fitur, animasi, functionality, interaksi dan
Lebih terperinciTriswansyah Yuliano
Mendesain Menu dengan CSS Triswansyah Yuliano triswansyah_yuliano@yahoo.com http://triswan.wordpress.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan
Lebih terperinciMembuat Tabel Responsive dengan CSS
Membuat Tabel Responsive dengan CSS Oleh: Christian Rosandhy CSS Layout Responsive udah jadi salah satu kebutuhan wajib ya dalam pembuatan website kita.. Sama seperti layout, Table juga perlu tampilan
Lebih terperinciMembuat Display Produk dalam Layout Box 4 Kolom
Membuat Display Produk dalam Layout Box 4 Kolom Oleh: Debrian Ruhut Saragih Selamat pagi Sobat sekalian, saat ini kita banyak menemukan toko online bertebaran di Internet. Saya sering memperhatikan bagaimana
Lebih terperinciDownload Game Maker Disini
Tutorial Game Maker Bagi Pemula [Part 1] Karena banyaknya pertanyaan tentang tutorial untuk newbie / pemula, maka saya akan membuat tutorialnya disini. Yang dibutuhkan hanyalah Game Maker 8.0 Pro, niat
Lebih terperinciHTML (HyperText Markup Language)
HTML (HyperText Markup Language) IMS HTML HyperText Markup Language adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah
Lebih terperinciSimple Price Calculator dengan Input Range
Simple Price Calculator dengan Input Range Oleh: Septi Wulan Haloo, pada tutorial pertama saya ini, saya ingin membagikan cara membuat simple price calculator dengan input range (yang inputnya bisa digeser-geser
Lebih terperinciObjek Bergoyang CSS3
Objek Bergoyang CSS3 Oleh: Mohammad Nur Huda Assallamualaikum... Gak terasa nih udah mulai banyak yang mudik... Di sela-sela waktu masih aja nih saya update tutorial buat temen-temen jagocoding sekalian...
Lebih terperinciMENAMPILKAN GOOGLE MAPS DI WEB BROWSER DENGAN HTML5
MENAMPILKAN GOOGLE MAPS DI WEB BROWSER DENGAN HTML5 Agung Nugroho Agung.nugroho@raharja.info :: http://ngapainbingung.com Abstrak Google Maps merupakan maps yang paling popular karena keakuratannya dan
Lebih terperinciPublish: 7 Juni 2012 Author & Copyright: Johan Status: FREE tutorial
Kumpulan Tutorial dan belajar ilmu website mulai dari hosting dan coding seperti belajar HTML, CSS, Javascript, Javascript, JQuery, ASP.Net hingga SEO dan Desain web dengan Dreamweaver dan Photoshop untuk
Lebih terperinciMendeteksi Lokasi dengan HTML5 Geolocation
Mendeteksi Lokasi dengan HTML5 Geolocation Oleh: Hasyemi Rafsanjani Asyari Di tutorial kali ini masih berkaitan dengan google maps, yaitu kita akan membuat script dimana kita bisa mendeteksi lokasi dari
Lebih terperinciMODUL PRAKTIKUM SISTEM TERDISTRIBUSI
MODUL PRAKTIKUM SISTEM TERDISTRIBUSI WEB API Yuli Purwati, M.Kom Praktikum 8 7 Juni 2017 Aplikasi ASP.NET Web Api 1. Pembuatan Web Api Buat project baru pada Visual Studio, File New Project. Lalu, pilih
Lebih terperinciPercobaan 1 : Mengatur Width Dan Height Hasil :
Percobaan 1 : Mengatur Width Dan Height Analisa : Terlihat di atas kalau width dan height dari tag dan berbeda sesuai value yang telah diinputkan yang bias dibedakan dengan background-color
Lebih terperinciBAB VI DESAIN WEB RESPONSIF
BAB VI DESAIN WEB RESPONSIF A. KOMPETENSI DASAR Memahami konsep dasar desain halaman web responsif Mampu menerapkan konsep desain web responsif ke dalam aplikasi Mampu menghasilkan desain aplikasi web
Lebih terperinciLimitasi Text Input dengan Javascript
Limitasi Text Input dengan Javascript Oleh: d-newbie Assalamualaikum. wr.wb.sampai jumpa kembali pada kesempatan kali ini saya akan menulis tutorial tentang limitasi inputan dengan menggunakan javascript,
Lebih terperinciGeocoding Services pada Google Maps API
Geocoding Services pada Google Maps API Oleh: Hasyemi Rafsanjani Asyari Geocode adalah salah satu fitur dari Google Maps API yang singkatnya sih adalah mentranslate human readable address menjadi sebuah
Lebih terperinciGeocoding Services pada Google Maps API
Geocoding Services pada Google Maps API Oleh: Hasyemi Rafsanjani Asyari Geocode adalah salah satu fitur dari Google Maps API yang singkatnya sih adalah mentranslate human readable address menjadi sebuah
Lebih terperinciLangkah Cara Membuat Form Login Menggunakan PHP dan MySQL Langkah 1: Membuat Tabel MySQL User/Pengguna
Dalam tutorial cara membuat form login dengan PHP dan MySQL, kita akan belajar membuat halaman login untuk website dengan menggunakan PHP Session. Tutorial ini merupakan tutorial tingkat dasar, sederhana
Lebih terperinciMenampilkan Markers Google Maps API dengan PHP dan MySQL
Menampilkan Markers Google Maps API dengan PHP dan MySQL Oleh: Hasyemi Rafsanjani Asyari Hai-hai teman-teman jagocoding. Kali ini sedikit lebih advance, tapi tetap masih pada topik tentang Google Maps!
Lebih terperinciPEMROGRAMAN WEB 10 Introduction to HTML5
PEMROGRAMAN WEB 10 Introduction to HTML5 Andi WRE HTML 5 The New HTML Standard The next generation of HTML Hasil kerjasama antara World Wide Web Consortium (W3C) dan the Web Hypertext Application Technology
Lebih terperinciKomunikasi Multimedia
Komunikasi Multimedia Modul ke: Fakultas Ilmu Komunikasi Teknik Lanjutan Corporate Website: HTML Editing dengan Macromedia Dreamweaver MX Anindita, S.Pd, M.Ikom Program Studi Public Relations www.mercubuana.ac.id
Lebih terperinciPEMROGRAMAN WEB 08 JavaScript Dasar
PEMROGRAMAN WEB 08 JavaScript Dasar Andi WRE JavaScript Scripting language Lightweight scripting language Client-side scripting language Membuat halaman web menjadi lebih interaktif Digunakan untuk menambahkan
Lebih terperinciTUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah
TUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah www.ilmuwebsite.com Bagian 7. Membuat Data Pagination Menggunakan
Lebih terperinciHTML5 Komplet. Jubilee Enterprise PENERBIT PT ELEX MEDIA KOMPUTINDO
HTML5 Komplet HTML5 Komplet Jubilee Enterprise PENERBIT PT ELEX MEDIA KOMPUTINDO HTML5 Komplet Jubilee Enterprise 2017, PT. Elex Media Komputindo, Jakarta Hak cipta dilindungi undang-undang Diterbitkan
Lebih terperinciMembuat Chatbox Sederhana dengan Ajax jquery dan PHP PDO
Membuat Chatbox Sederhana dengan Ajax jquery dan PHP PDO Oleh: Ananda Mukhammad Ikhsan Chatbox adalah fitur yang cukup penting di website berbasis sosial media. Nah, kali ini saya akan memberikan tutorial
Lebih terperinciImage Slider 3D. Oleh: Anthonius
Image Slider 3D Oleh: Anthonius Kali ini saya akan berbagi cara membuat image slider dengan tampilan 3D. Cara ini sangat efisien karena hanya menggunakan sedikit script. Untuk CSS nya agan bisa copy langsung
Lebih terperinciMinimal basic fungsi tool photoshop
Saat jalan-jalan ke web, kadang ketemu tombol dengan efek glassy yang menarik. Atau ga jaduh-jauh, bagi pemakai yahoo widget ataupun sistem operasi vista hal ini bukan hal yang jarang ditemui. Tapi bagaimana
Lebih terperinciAnalisa Pada percobaan ini, menunjukan flow dalam kondisi normal atau sesuai dengan default dan sifat masing-masing tag HTML-nya.
TUGAS CSS LAYAOUT PRAKTIKUM 6 1. Percobaan 1 Pada percobaan ini, menunjukan flow dalam kondisi normal atau sesuai dengan default dan sifat masing-masing tag HTML-nya. 2. Percobaan2 Position: relative;
Lebih terperinciMembuat Layout Web Mengunakan Table
Page 1 INFO : ILMUKOMPUTER.ID.AI By PRASETYO UTOMO Web : http://www.prasetyo771.wordpress.com Facebook : facebook.com/tyo777 No Hp : 08982069172 Email : prasetyoutomo771@gmail.com Page 2 1. Pengenalan
Lebih terperinciAJAX dengan jquery Part 3
AJAX dengan jquery Part 3 Oleh: Cecep Yusuf Pada tutorial ini, kita akan belajar bagaimana mengirim data POST dari sebuah form dan dikirim dengan metode AJAX post dengan menggunakan jquery. Selamat pagi
Lebih terperinciLEMBAR KERJA PRAKTIKUM. - JavaScript Alert yang ditampilkan browser saat membuka halaman home/index.html :
LEMBAR KERJA PRAKTIKUM Nim : 13-1401-164 Hari / Tgl TTD Asisten Nama Kelas : Muh. Idrus : DK-13 Mata kuliah : Pemrograman Web I Materi : JavaScript - JavaScript Alert yang ditampilkan browser saat membuka
Lebih terperinciManipulasi Gambar dengan Efek yang keren
Manipulasi Gambar dengan Efek yang keren Oleh: Sendy PK Halo Sobat Coding, pada tutorial kali ini kita akan membuat program yang bisa digunakan untuk memanipulasi gambar. Berikut deskripsi program yang
Lebih terperinciManipulasi Gambar dengan Efek yang keren
Manipulasi Gambar dengan Efek yang keren Oleh: Sendy PK Halo Sobat Coding, pada tutorial kali ini kita akan membuat program yang bisa digunakan untuk memanipulasi gambar. Berikut deskripsi program yang
Lebih terperinciMODUL PEMOGRAMAN WEB I STMIK IM BANDUNG MODUL PEMOGRAMAN WEB I. Oleh: CHALIFA CHAZAR. Chalifa Chazar edu.script.id
1 MODUL PEMOGRAMAN WEB I Oleh: CHALIFA CHAZAR 2 Modul 3 HTML Layout Tujuan: Mahasiswa mengenal konsep-konsep dan komponen layout dasar untuk membangun website statis. Pustaka:» HTML dan XML Edisi 2: Betha
Lebih terperinciPemrograman Basis Data Berbasis Web
Pemrograman Basis Data Berbasis Web Pertemuan Ke-6 (JavaScript) Noor Ifada noor.ifada@if.trunojoyo.ac.id S1 Teknik Informatika - Unijoyo 1 Sub Pokok Bahasan JavaScript? Pendeklarasian JavaScript JavaScript
Lebih terperinciBermain Dynamic Tabel Row dengan menggunakan Javascript
Bermain Dynamic Tabel Row dengan menggunakan Javascript 20 06 2008 Jika kita adalah orang yang berkutat dengan dunia IT terutama bidang aplikasi web programming, pasti akan sering menjumpai proses insert,
Lebih terperinciMasih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat
Contoh ke dua layout menggunakan CSS Masih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat HEADER ISI NAVIGASI
Lebih terperinciMembuat Form Dinamis dengan HTML & Javascript.
Membuat Form Dinamis dengan HTML & Javascript. Oleh: d-newbie Assalamualaikum wr.wb. Form tentunya sudah tidak asing lagi bagi para developer web, element html yg satu ini seolah-olah merupakan element
Lebih terperinciPengenalan JavaScript
Pengenalan JavaScript Tujuan - Mahasiswa memahami konsep dasar Javascript - Mahasiswa mampu memahami cara menggunakan Javascript - Mahasiswa mampu memahami dasar variabel di Javascript - Mahasiswa mampu
Lebih terperinciMembuat Desain Custom Input (Checkbox + Radio Button) pada Form
Membuat Desain Custom Input (Checkbox + Radio Button) pada Form Oleh: Christian Rosandhy Bosen lah ya liat checkbox dan radio button di HTML yang gitu-gitu aja? Di tutorial kali ini kita akan belajar mendesainnya
Lebih terperinciMembuat Duplikasi Form dengan Jquery (Dynamic Form)
Membuat Duplikasi Form dengan Jquery (Dynamic Form) Oleh: Dimas Agung Noviyanto Membuat dynamic field mungkin bukan hal baru bagi seorang web programmer, field inputan yang dapat ditambah maupun di hapus
Lebih terperinciPengantar Pemrograman Sisi Server
Pengantar Pemrograman Sisi Server PHP 1 Agenda Kilas balik materi minggu lalu Pengenalan PHP Variabel Fungsi Pengulangan (loop) Pengatur aliran (control flow) Array 2 KILAS BALIK MATERI MINGGU LALU 3 Coding
Lebih terperinciDAFTAR PUSTAKA. Fathansyah. (2007). Basis Data. Informatika : Bandung.
DAFTAR PUSTAKA Fathansyah. (2007). Basis Data. Informatika : Bandung. Pressman, Roger S. (2012). Rekayasa Perangkat Lunak Buku Dua, Pendekatan Praktisi (Edisi 7). Andi : Yogyakarta. Saputra, Agus. (2012).
Lebih terperinciSelection, Looping, Branching
Selection, Looping, Branching Struktur If untuk membuat percabangan alur program dengan satu pilihan saja dapat mengatur apakah sebuah perintah akan dijalankan atau tidak tergantung kepada kondisinya setidaknya
Lebih terperinciDESIGN WEB. D3 TKJ
DESIGN WEB D3 TKJ yunhix@yahoo.com SUB POKOK BAHASAN JavaScript? Pendeklarasian JavaScript JavaScript sederhana PeletakanJavaScript KomentarpadaJavaScript KotakDialog Variabel Operator StrukturKontrol
Lebih terperinciMembuat Captcha Image menggunakan Codeigniter 2x
Membuat Captcha Image menggunakan Codeigniter 2x Oleh: Yoga C. Pranata Hai semua, disini saya akan menerangkan tentang bagaimana membuat captcha menggunakan Codeigniter. Sebelum memulainya, kalian pasti
Lebih terperinciMembuat Responsive dan Fleksibel Image Gallery dengan JQuery Fleximage
Membuat Responsive dan Fleksibel Image Gallery dengan JQuery Fleximage Oleh: Christian Rosandhy Siapa bilang bikin galeri gambar yang responsive itu susah? Di tutorial kali ini kita akan belajar membuat
Lebih terperinci[SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3
[SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3 Oleh: Arinadi Nur Rohmad Oke, Membuat slide show adalah pekerjaan yang sulit untuk yang baru belajar CSS karena pada dasarnya Slide Show dibuat
Lebih terperinciMenampilkan user online seperti di obrolan step by step
Menampilkan user online seperti di obrolan step by step Oleh: lukman hakim Salam hangat temen2 Jagocoding.com, Berikut saya akan berbagi tutorial sederhana yakni bagaimana cara menampilkan user online
Lebih terperinciJAVASCRIPT. Disusun untuk : Melengkapi Tugas Akhir Semester I Mata Kuliah Desain Web Oleh : AGUNG DIAN PRIBADI NIM :
JAVASCRIPT Disusun untuk : Melengkapi Tugas Akhir Semester I Mata Kuliah Desain Web Oleh : AGUNG DIAN PRIBADI NIM : 308 312 417 494 UNIVERSITAS NEGERI MALANG FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
Lebih terperinciBAB V DESAIN WEB CSS
BAB V DESAIN WEB CSS A. KOMPETENSI DASAR Memahami konsep dan strategi desain web yang rapi berbasis HTML dan CSS/CSS3. Mampu mengoptimalkan fitur-fitur CSS dalam desain web. Mampu memanfaatkan pendekatan
Lebih terperinciMODUL 7. Pengantar jquery
MODUL 7 Pengantar jquery Laboratorium Komputer STIMIK PPKIA Pradnya Paramita Malang 2016 Pertemuan 7 7.1 Tujuan : 1. Mahasiswa dapat memahami mengenai PHP dengan jquery 2. Mahasiswa dapat mengaplikasikan
Lebih terperinciTutorial CSS Desain Layout 1 Dengan HTML5 dan CSS
Tutorial CSS Desain Layout 1 Dengan HTML5 dan CSS Oleh: Ardie Jocong pada tutorial ini saya akan mencoba menjelaskan Bagaimana Membuat Desain Layout Website dengan Menggunakan HTML5 dan CSS.. Okeh Langsung
Lebih terperinciLAPORAN RESMI. PRAKTIKUM TEKNOLOGI WEB Pengenalan JavaScript
LAPORAN RESMI PRAKTIKUM TEKNOLOGI WEB Pengenalan JavaScript Dosen Pembimbing : Dwi Susanto Oleh : Noer Rhiannah A (4103131052) 3 D3 MMB B PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA
Lebih terperinciJavaScript. Sumber : Buku Pemrograman Web karangan Abdul Kadir & Pengantar Java Script di
JavaScript Sumber : Buku Pemrograman Web karangan Abdul Kadir & Pengantar Java Script di http://www.ilmukomputer.com/2006/08/19/pengantarjava-script Pemrograman Web/MI/D3 sks 1 Pengenalan JavaScript Javascript
Lebih terperinciI. SOAL PILIHAN GANDA. 1. Tag yang harus dimiliki setiap file HTML adalah : a. <HEAD> b. <TITLE> c. <BODY> d. <TEXT> e. <STYLE>
I. SOAL PILIHAN GANDA 1. Tag yang harus dimiliki setiap file HTML adalah : a. b. c. d. e. 2. Akan dihasilkan tulisan budi dengan huruf terbesar a. budi b.
Lebih terperinciJavaScript. Pemrograman Web 1. Genap
JavaScript Pemrograman Web 1 Genap 2011-2012 Pengenalan JavaScript Apa itu JavaScript? JavaScript adalah bahasa Scripting, bukan bahasa pemrograman. JavaScript didisain untuk membuat halaman HTML menjadi
Lebih terperinciDasar Membuat App Facebook
Dasar Membuat App Facebook Oleh: titan Sebagaimana seperti yang kita ketahui facebook bukan hanya sebatas sosial network untuk berinteraksi dengan teman kita di dunia maya. Dengan jelinya facebook menggaet
Lebih terperinciTUTORIAL APLIKASI WEB Dengan PHP dan MySQL
TUTORIAL APLIKASI WEB Dengan PHP dan MySQL Tutorial Aplikasi Web Dengan PHP dan MySQL A. DASAR TEORI PHP merpakan bahasa pemrograman yang sangat popular dalam pengembangan website dewasa ini, pada dasarnya,
Lebih terperinciMODUL PEMOGRAMAN WEB I STMIK IM BANDUNG MODUL PEMOGRAMAN WEB I. Oleh: CHALIFA CHAZAR. Chalifa Chazar edu.script.id
1 MODUL PEMOGRAMAN WEB I Oleh: CHALIFA CHAZAR 2 Modul 6 CSS3 Tujuan: Mahasiswa mengenal komponen CSS 3 sebagai pelengkap element HTML dalam membangun website statis. Pustaka:» HTML dan XML Edisi 2: Betha
Lebih terperincidisertai contoh-contoh javascript yang kompatibel dengan Firefox
JAVASCRIPT disertai contoh-contoh javascript yang kompatibel dengan Firefox by Ek kian S U R A B A Y A - 2010 hal 1 dari 36 TUJUAN: PRAKTIKUM I Mahasiswa mengenal tentang Javascript serta dapat menuliskan
Lebih terperinciGRAFIKA GAME. Aditya Wikan Mahastama. HTML5 dan Primitif Grafika UNIV KRISTEN DUTA WACANA TEKNIK INFORMATIKA GENAP 1213
GRAFIKA GAME Aditya Wikan Mahastama mahas@ukdw.ac.id HTML5 dan Primitif Grafika 3 UNIV KRISTEN DUTA WACANA TEKNIK INFORMATIKA GENAP 1213 Before we begin to draw THE CONCEPT OF CANVAS Sebuah bidang yang
Lebih terperinciPemrograman Web PRAKTIKUM 3 CSS. TUJUAN BELAJAR Mahasiswa dapat menggunakan css untuk mengatur gaya tampilan elemenhtml
PRAKTIKUM 3 CSS TUJUAN BELAJAR Mahasiswa dapat menggunakan css untuk mengatur gaya tampilan elemenhtml MATERI Sintaks CSS, cara memakai CSS, jenis-jenis selektor, satuan ukuran, satuan warna, properti
Lebih terperinciCSS (Cascading Style Sheet) Oleh : Devie Rosa Anamisa
CSS (Cascading Style Sheet) Oleh : Devie Rosa Anamisa Pembahasan Pengertian CSS CSS (FONT, TEXT, COLOR) CSS - Image PENGERTIAN CSS Singkatan dari Cascading Style Sheet Digunakan dalam kode HTML untuk menciptakan
Lebih terperinciPerkenalan Glyphicon Bootstrap dan Cara Mudah Menggunakannya
Perkenalan Glyphicon Bootstrap dan Cara Mudah Menggunakannya Oleh: Arinadi Nur Rohmad Glyphicon ini berbasis text jadi lebih ringan dan biasa diganti warna seperti huruf pada umumnya yang berbeda dari
Lebih terperinciPemrograman Basis Data Berbasis Web
Pemrograman Basis Data Berbasis Web Pertemuan Ke-6 (JavaScript) Noor Ifada S1 Teknik Informatika - Unijoyo 1 Sub Pokok Bahasan JavaScript? Pendeklarasian JavaScript JavaScript sederhana Peletakan JavaScript
Lebih terperinciA. LATAR BELAKANG ATAU BACKGROUND
A. LATAR BELAKANG ATAU BACKGROUND Latar belakang background dalam CSS dibedakan menjadi 2: 1. Latar Belakang Dengan Menggunakan Warna: Warna background memiliki dua nilai: Transparent : membuat wearna
Lebih terperinciTutorial Membuat Layout Website Sederhana dengan HTML dan CSS
Tutorial Membuat Layout Website Sederhana dengan HTML dan CSS Oleh: I Wayan Dharmana Halo kawan, apa kabar? Semoga di awal bulan Ramadhan ini kawan pembaca tetap semangat untuk mencari ilmu. Nah, pada
Lebih terperinciModul 5 -Javascript-
Modul 5 -Javascript- Pengertian: Javascript adalah bahasa script yang bisa dijalankan di browser, dan biasa disebut dengan client side programming. Client di sini adalah browser, seperti: Google Chrome,
Lebih terperinciLaporan Bengkel Web II Modul 6
Laporan Bengkel Web II Modul 6 D I S U S U N Oleh : Muhammad Aly Al-Husaini 1457301050 1 SI C Politeknik Caltex Riau T.A 2014-2015 Modul 6. Fungsi Filter PHP Contoh Program Contoh 1 : Baris 3, membuat
Lebih terperinciTUTORIAL RUBY ON RAILS
TUTORIAL RUBY ON RAILS TEKNIK INFORMATIKA-UNIV.NASIONAL Oleh: Slamet nurhadi 083112706450100 UNIVERSITAS NASIONAL DAFTAR ISI: 1. MEMBUAT PROYEK BARU DENGAN SETINGAN DATABASE MySQL 2. MEMBUAT HALAMAN WEB
Lebih terperinciPemrograman Web WEEK 03 HTML LANJUT
1 Pemrograman Web WEEK 03 HTML LANJUT 2 Introduction IMAGE HYPERLINK IMAGE MAP DIV & SPAN META 1 HTML Image 3 Menampilkan gambar pada halaman web Tag: (tidak memiliki tag penutup) align Atribut Value
Lebih terperinciDropdown Berhubungan (Sync Dropdown) Dengan CI & MySQL
Dropdown Berhubungan (Sync Dropdown) Dengan CI & MySQL Oleh: Gilang Sonar Amanu Saya mau coba share lagi, tutorial sederhana namun sering bgt digunakan untuk berbagai kasus. Mungkin bisa berguna khususnya
Lebih terperinciSIMPLE TUTORIAL - ADOBE DREAMWEAVER CS 5 Oleh: H. Heri Istiyanto, S.Si., M.Kom.
SIMPLE TUTORIAL - ADOBE DREAMWEAVER CS 5 Oleh: H. Heri Istiyanto, S.Si., M.Kom. Dreamweaver merupakan aplikasi yang digunakan untuk membuat website secara profesional. Pada tutorial ini akan dijelaskan
Lebih terperinciMEMBUAT WEB PERSONAL DENGAN DREAMWEAVER
MEMBUAT WEB PERSONAL DENGAN DREAMWEAVER Jalankan Dreamweaver 8 Pilih HTML Setelah dipilih HTML maka akan muncul tampilan pertama seperti berikut : Klik Page Properties untuk pengaturan awal Halaman Pilih
Lebih terperinciCara Memasukan Font Baru Ke Dalam Web Menggunakan CSS
Cara Memasukan Font Baru Ke Dalam Web Menggunakan CSS Oleh: Rahmat Menghias blog/web boleh saja tetapi tentunya juga harus memperhatikan kenyamanan visitor yang akan berkunjung ke web anda. Oleh sebab
Lebih terperinciEdisi UNIVERSITAS NEGERI SEMARANG. Badan Pengembangan Teknologi Informasi dan Komunikasi. Modul Pelatihan H T M L
Edisi 1 UNIVERSITAS NEGERI SEMARANG Badan Pengembangan Teknologi Informasi dan Komunikasi Modul Pelatihan H T M L U N I V E R S I T A S N E G E R I S E M A R A N G Modul Pelatihan HTML Akhmad Munawar http://about.me/akhmad.munawar
Lebih terperinciResponsive Layout dengan Bootstrap [Part 2]
Responsive Layout dengan Bootstrap [Part 2] Oleh: Christian Rosandhy Salam jaco,, sebagai lanjutan dari tutorial Membuat Layout Responsive dengan Container Bootstrap, kali ini kita akan mencoba membuat
Lebih terperinci7 Cara Mempercantik Tampilan Blog
7 Cara Mempercantik Tampilan Blog Primo Riveral primo@raharja.info Abstrak Memiliki blog dengan tampilan keren dan enak dilihat tentu pasti menjadi kembanggaan tersendiri untuk seorang yang menggemari
Lebih terperinciVariabel dan Tipe data Javascript
Variabel dan Tipe data Javascript Variabel Pendeklarasian variabel dalam JavaScript dapat di isi dengan nilai apa saja dan juga bersifat opsional. Artinya variabel boleh di deklarasikan ataupun tidak hal
Lebih terperinciDASAR-DASAR CSS DASAR-DASAR CSS By: Rohi Abdulloh A. PENGENALAN
DASAR-DASAR CSS DASAR-DASAR CSS 2015 A. PENGENALAN CSS merupakan kependekan dari Cascading Style Sheet yaitu suatu skrip yang digunakan untuk mempercantik tampilan HTML atau mengatur bagaimana elemen HTML
Lebih terperinci