Cara membuat elemen agar bisa didrag
|
|
- Adi Gunardi
- 7 tahun lalu
- Tontonan:
Transkripsi
1
2 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 lain sebagainya. JavaScript sebagai salah satu bahasa pemrograman web saat ini semakin pesat dan semakin banyak fitur-fitur baru yang disematkan untuk mempermudah seorang web developer untuk membuat website yang interaktif. Salah satunya adalah dengan membuat suatu elemen yang bisa didrag kemanapun anda mau, yang akan saya bahas cara membuatnya Selamat Datang di situs jagocoding.com Perkenalkan nama saya Khaerul Amin, saya member baru disini. Nantinya Insya Allah saya akan memberikan tutorial-tutorial seputar javascript untuk tingkat menengah sampai lanjutan. Dan untuk postingan pertamanya, <jika disetujui> yaitu cara membuat elemen agar bisa didrag kemanapun anda mau, seperti jquery Ui Draggable tapi yang akan saya buat cukup menggunakan javascript murni tanpa javascript library apapun. Oke dari pada kebanyakan intro, kita langsung saja ke code. Pertama kita buat html-nya terlebih dahulu, kurang lebih seperti ini <!doctype html> <html lang="id"> <head> <meta charset="utf-8"> <title>belajar Membuat Elemen Agar Bisa Didrag</title> <style> /* KODE CSS DISINI */ </style> </head> <body> <!-- Ini elemen yang akan dibuat agar bisa didrag --> <div id="target"> <div class="judul">hanya Sebuah Contoh</div> <div class="isi"> <p>sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
3 veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p> </div> </div> <script> // KODE JS DISINI </script> </body> </html> Sekarang tambahkan style ini dibaris /* KODE CSS DISINI */ /* Reset */ * { margin: 0; padding: 0; box-sizing: border-box; body { font-family: Arial, Helvetica, sans-serif; color: #222; background: #f6f6f6; font-size: 14px; line-height: 150%; #target { background: #fff; max-width: 600px; /* Jangan menggunakan margin karena akan berpengaruh pada hasil akhir */ /* Apapun selain static */ position: relative; /* Agar user tau elemen ini bisa didrag */ cursor: move; box-shadow: 0 0 5px hsla(0,0%,0%,.4); #target.judul { background: #09f; color: #fff; padding: 10px 20px;
4 #target.isi { padding: 20px; Saya hanya memberikan style yang sederhana saja mengingat ini tutorial tentang javascript bukan css. Yang harus diperhatikan adalah style pada #target harus mengatur [position] selain static. Bisa relative, fixed atau absolute. Jika tidak dilakukan, maka script tidak akan bekerja. Next, yaitu yang terpenting pada baris // KODE JS DISINI ganti dengan script ini. // Namespace untuk menghindari polusi pada window var com = com {; com.jagocoding = com.jagocoding {; // Namespace untuk setiap author ^_^ com.jagocoding.erul = com.jagocoding.erul {; // IIFE (function (global, exports) { // global sama saja dengan window // exports sama saja dengan com.jagocoding.erul 'use strict'; // KODE BERIKUTNYA DISINI (window, com.jagocoding.erul)); Disini saya menggunakan Namespace dan IIFE agar variable atau fungsi yang saya buat tetap aman dari script lain yang mungkin bisa membuat script yang saya buat tidak bekerja atau sebaliknya. Lanjut!! ganti // KODE BERIKUTNYA DISINI dengan ini. var doc = global.document; /** * Fungsi untuk membuat elemen bisa didrag {String id nilai attribute id elemen yang mau dibuat draggable */ var Drag = function (id) { var bolehdidrag, // Cek apakah elemen harus mengikuti kursor atau tidak element, // Referensi Elemen style, // Referensi Elemen.style agar kode lebih cepat X, Y; // Posisi kursor secara horizontal (X) dan vertikal (Y) if ('string'!== typeof id) { throw TypeError('Memerlukan string');
5 element = doc.getelementbyid(id); if (!element) { throw ReferenceError('Elemen tidak ditemukan'); style = element.style; // Fungsi ini akan dipanggil ketika element akan didrag function mulaididrag(event) { // Pastikan tombol mouse/keypad yang kiri yang ditekan if (1 === event.which) { // Agar teks tidak terblock event.preventdefault(); X = event.pagex; Y = event.pagey; bolehdidrag = true; // Fungsi ini akan dipanggil ketika element sedang didrag function sedangdidrag(event) { var x, y, left, top; if (bolehdidrag) { x = event.pagex; y = event.pagey; // Dapatkan posisi elemen saat ini left = parsefloat(style.left) element.offsetleft; top = parsefloat(style.top) element.offsettop; // Hmmmhh... Tentukan posisi yang baru x = Math.max(0, x - X + left); y = Math.max(0, y - Y + top); // Atur style.left = x + 'px'; style.top = y + 'px'; // Update posisi kursor X=event.pageX; Y=event.pageY; // Fungsi ini akan dipanggil ketika element selesai didrag function selesaididrag() {
6 bolehdidrag = false; ; // Semua variabel dan fungsi diatas tidak bisa diakses diluar // IIFE jadi saya menambahkan dua fungsi dibawah untuk dapat // mengakses fungsi dan variabel diatas return { mulai: function () { element.addeventlistener('mousedown', mulaididrag, false); doc.addeventlistener('mouseup', selesaididrag, false); doc.addeventlistener('mousemove', sedangdidrag, false);, berhenti: function () { element.removeeventlistener('mousedown', mulaididrag, false); doc.removeeventlistener('mouseup', selesaididrag, false); doc.removeeventlistener('mousemove', sedangdidrag, false); ; // Mengexpose fungsi Drag agar bisa digunakan diluar IIFE exports.drag = Drag; Oke kawan... Sekarang fungsi kita sudah jadi, dan cara menggunakannya gampang saja. cukup masukan kode ini diatas </script> // Tunggu sampai Dom sudah siap document.addeventlistener('domcontentloaded', function () { var contoh = com.jagocoding.erul.drag('target'); // Oke.. jadikan elemen tersebut bisa didrag contoh.mulai(); ); // Untuk menonaktifkannya gunakan // contoh.berhenti(); Sekian dulu yang bisa saya berikan. Jika ada yang masih bingung agan bisa bertanya kepada saya. Jika agan sudah bisa, saya kasih tantangan mudah. Yaitu membuat fungsi yang bisa merize ukuran suatu elemen. Untuk fungsinya hampir sama dengan yang diatas hanya ada perubahan sedikit. Sekian saja Sampai Jumpa lagi dipostingan selanjutnya. AAMIIN... Tentang Penulis
7
8 Khaerul Amin Khaerul Amin itu...?? TERSERAH ANDA SAJA BAGAIMANA MAU MENILAI SAYA
an exhibition a movement cushcush gallery Jl. Teuku Umar Gg. Rajawali no. 1A Denpasar - Bali
\ an exhibition a movement cushcush gallery Jl. Teuku Umar Gg. Rajawali no. 1A Denpasar - Bali. +62 361 242034 \ DenPasar2017 adalah pameran bersama yang merupakan bagian dari rangkaian program CushCush
Lebih terperinciHenHash. Fungsi Hash berdasarkan Henon Map
HenHash Fungsi Hash berdasarkan Henon Map Wiwit Rifa i (13513073) Program Studi Teknik Informatika Sekolah Teknik Elektro dan Informatika, Institut Teknologi Bandung Jalan Ganesha 10-12, Bandung 40132,
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 terperinciAlgoritma Cipher Blok Mats
Algoritma Cipher Blok Mats Algoritma Cipher Blok dengan Fungsi Acak Modulus Ramandika Pranamulia 13512078 Teknik Informatika Institut Teknologi Bandung Bandung,Indonesia ramandika@students.itb.ac.id Mamat
Lebih terperinci6. HTML & CSS. PTI15010 Pemrograman Web. Agi Putra Kharisma, S.T., M.T. Genap 2014/2015. Desain slide ini dadaptasi dari University of San Fransisco
6. HTML & CSS PTI15010 Pemrograman Web Agi Putra Kharisma, S.T., M.T. Genap 2014/2015 Desain slide ini dadaptasi dari University of San Fransisco HTML, CSS, JavaScript HTML (Struktur Dokumen) CSS (Tampilan
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 terperinciResponsive Sidebar dengan Bootstrap
Responsive Sidebar dengan Bootstrap Oleh: Boy Panjaitan Hai, Berjumpa lagi dengan saya Boy Panjaitan. kali ini saya akan membagikan tutorial tentang CSS lagi.pernahkah anda melihat website dengan sidebar
Lebih terperinciMembuat Scrollspy Dengan Bootstrap
Membuat Scrollspy Dengan Bootstrap Oleh: Hasyemi Rafsanjani Asyari Hai JagoCodingers. Apa kabar? Pernah ngga kalian membuka sebuah website lalu ada menu link navigasi yang akan terupdate atau terlihat
Lebih terperinciMODUL PRATIKUM 04B PEMROGRAMAN BERBASIS WEB (CCP119)
MODUL PRATIKUM 04B PEMROGRAMAN BERBASIS WEB (CCP119) Disusun oleh : KARTINI, SKom.,MMSI LABORATORIUM KOMPUTER FAKULTAS ILMU KOMPUTER UNIVERSITAS ESA UNGGUL MODUL PRATIKUM PBW 04B CSS : Layout dan Posisi
Lebih terperinciAuthor : Minarni, S.Kom.,MM
S Cascading Style Sheets Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit Kalimantan Tengah Internet Multimedia Keuntungan Menggunakan CSS Mempermudah dan mempersingkat pembuatan dan pemeliharaan
Lebih terperinciBAB V IMPLEMENTASI SISTEM
BAB V IMPLEMENTASI SISTEM Pada bab ini merupakan tahapan penerjemahan kebutuhan pembuatan software ke dalam representasi perangkat lunak sebeleum penulisan kode program dimulai sesuai dengan hasil analisis
Lebih terperinciMembuat Smooth Scrolling dalam 1 halaman dengan JQuery
Membuat Smooth Scrolling dalam 1 halaman dengan JQuery Oleh: Christian Rosandhy Segala sesuatu yang smooth itu tentunya asik dong ya? Begitu juga dengan website kita.. Kita bisa bikin animasi scroll dalam
Lebih terperinciXHTML dan Dasar-dasar CSS XHTML
XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto Email: rosa_if_itb_01@yahoo.com Blog: http://udinrosa.wordpress.com Website: http://www.gangsir.com XHTML Extensible Hypertext Markup Language
Lebih terperinciMembuat Button Dengan CSS
Membuat Button Dengan CSS Dari sekian banyak pertanyaan yang muncul dari para pemula di CSS adalah pertanyaan bagaimana sih membuat tombol dengan CSS?, hmmm bagi saya ini adalah pertanyaan yang simple
Lebih terperinciNotifikasi Keren dengan CSS3
Notifikasi Keren dengan CSS3 Oleh: Sendy PK Notifikasi pada website merupakan hal yang penting untuk memberi tahu pengunjung website tentang informasi singkat yang diberikan oleh pemilik website, hal ini
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 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 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 terperinciTutorial Layouting : Membuat Grid Sama Tinggi
Tutorial Layouting : Membuat Grid Sama Tinggi Oleh: Christian Rosandhy Salah satu masalah umum penggunaan Grid itu adalah mengatur tingginya biar rapi. Untuk bisa membuat grid yang benar-benar rapi dan
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 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 terperinciMembuat Plugin jquery (Part 1)
Membuat Plugin jquery (Part 1) Oleh: muhamad iqbal Ini adalah postingan pertama dari serial yang akan membahas tentang Membuat plugin jquery. Pada bagian ini kita akan membahas tentang konsep dasar plugin.
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 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 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 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 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 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 terperinciTeks dan Background SERIF SANS-SERIF MONOSPACE
Tujuan Teks dan Background Mahasiswa dapat memahami pengaturan teks melalui CSS Mahasiswa dapat memahami berbagai jenis ukuran teks Mahasiswa dapat memahami pengaturan background melalui CSS Dasar Teori
Lebih terperinciLAPORAN RESMI. Boxes
LAPORAN RESMI Boxes Dosen Pembimbing : Dwi Susanto,ST, MT Oleh Hamidah Nur Hidayati 4103131038 PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA KREATIF POLITEKNIK ELEKTRONIKA NEGERI
Lebih terperinciCara Membuat website dengan Dreamweaver
Cara Membuat website dengan Dreamweaver Pajrin Wurika Sahara Wurika.sahara@gmail.com Abstrak Dreamweaver adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG What You See
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 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 terperinciPengenalan HTML dan CSS
Pengenalan HTML dan CSS Pengenalan HTML dan CSS Jubilee Enterprise PENERBIT PT ELEX MEDIA KOMPUTINDO Pengenalan HTML dan CSS Jubilee Enterprise 2016, PT Elex Media Komputindo, Jakarta Hak cipta dilindungi
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 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 terperinciAbdullah hafidh. Fakultas Ilmu Komputer, Universitas Indonesia. [Membuat Web Sederhana dengan.net FrameWork. menggunakan Microsoft Visual Studio 2008]
2009 Abdullah hafidh Fakultas Ilmu Komputer, Universitas Indonesia [Membuat Web Sederhana dengan.net FrameWork menggunakan Microsoft Visual Studio 2008] Pada kesempatan ini, saya akan memberikan tutorial
Lebih terperinciSecara garis besar, terdapat 3 cara menginput kode CSS, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets.
Sebagaimana telah dipelajari pada saat pembahasan tentang HTML (pada artikel tutorial belajar HTML), HTML pada dasarnya adalah kumpulan dari tag-tag yang disusun sehingga memiliki bagian-bagian tertentu,
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 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 terperinciCSS. inheritance (pewarisan)
{CSS} lanjut CSS inheritance (pewarisan) sebuah elemen mewarisi beberapa nilai dari properti yang dimiliki oleh elemen parent-nya http://www.w3.org/tr/css21/cascade.html#inheritance http://www.slideshare.net/diniscorreia/htmlcss-3-introduction-to-css
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 terperinciMEMBUAT WEBSITE SEDERHANA DENGAN HTML 5
MEMBUAT WEBSITE SEDERHANA DENGAN HTML 5 NELI WIDI ASTUTI Neliwidiastuti97@gmail.com Abstrak Pada kesempatan ini saya akan mencoba menjelaskan tentang membuat website sederhana dengan HTML 5 dan CSS 3,
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 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 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 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 terperinciCascading Style Sheet (CSS) Didik Dwi Prasetya
Cascading Style Sheet (CSS) Didik Dwi Prasetya didikdwi@gmail.com CSS vcss à Cascading Style Sheet vstyle à mendefinisikan aturan untuk menampilkan elemen HTML. vdefinisi: Cascading Style Sheets (CSS)
Lebih terperinciMODUL PRATIKUM 04A PEMROGRAMAN BERBASIS WEB (CCP119)
MODUL PRATIKUM 04A PEMROGRAMAN BERBASIS WEB (CCP119) Disusun oleh : KARTINI, SKom.,MMSI LABORATORIUM KOMPUTER FAKULTAS ILMU KOMPUTER UNIVERSITAS ESA UNGGUL MODUL PRATIKUM PBW 04A Cascading Style Sheets
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 terperinciCSS RANDY CAHYA WIHANDIKA, S.ST., M.KOM
CSS RANDY CAHYA WIHANDIKA, S.ST., M.KOM CSS Cascading Style Sheet Bahasa yang digunakan untuk mengatur tampilan dan format dari dokumen markup (HTML) CSS didesain untuk memisahkan antara dokumen yang mendeskripsikan
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 terperinciCSS. Cascading Style Sheet. Spesifikasi lengkap di :
CSS Cascading Style Sheet Spesifikasi lengkap di : http://www.w3..org/tr/css2 Mengubah Text Mengubah Warna Mengubah Posisi Mengubah Ukuran Bagaimana cara menempatkan CSS? Ada 3 cara yaitu : Inline ( pada
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 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 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 CSS For Layout Tujuan: Mahasiswa mengenal komponen-komponen CSS yang dapat digunakan untuk mengatur tata letak element HTML dalam membangun website
Lebih terperinciPemrograman Web Week 4. Team Teaching
Pemrograman Web Week 4 Team Teaching Peran Masing-masing Bahasa HTML => Mengatur Struktur CSS => Mengatur tampilan JSS => Mengatur interaktifitas Penggunaan Javascript Sama seperti pada CSS, ada 3 cara
Lebih terperinciCara membuat HTML dasar
Cara membuat HTML dasar Oleh : Ronaldo Fantoni 11 IPA /12 1. Struktur dasar HTML HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya
Lebih terperinciMembuat Form Kontak yang Indah dan Atraktif dengan AJAX [Part 4]
Membuat Form Kontak yang Indah dan Atraktif dengan AJAX [Part 4] Oleh: Sendy PK Sekarang form sudah dapat berfungsi. Kita dapat membuka halaman di browser, klik link "Send Us an Email" untuk melompat ke
Lebih terperinciHow to Create Simple Web (2) - Slice
How to Create Simple Web (2) - Slice Oleh: Isnu Arief Darmawan Senang sekali, bisa berjumpa lagi dengan Anda :D #masih-presenter dengan Saya Om' Kenu. Sebelumnya, kita sudah membuat template yang sudah
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 terperinciBAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM
BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM 4.1. Implementasi Pada bab ini akan dilakukan implementasi dan pengujian terhadap sistem yang baru. Tahapan ini dilakukan setelah perancangan selesai dilakukan
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 terperinciMODUL PRAKTIKUM PEMROGRAMAN WEB (DASAR)
MODUL PRAKTIKUM PEMROGRAMAN WEB (DASAR) MATERI KULIAH SEMESTER 3 D3 TEKNIK INFORMATIKA STMIK AMIKOM YOGYAKARTA 2009 Disusun Oleh : ANGGIT DWI HARTANTO, S.KOM MODUL II CASCADING STYLE SHEET (CSS) I. PENGERTIAN
Lebih terperinciKeuntungan Memisahkan presentation sebuah dokumen dari content document itu sendiri Mempermudah dan mempersingkat pembuatan dan pemeliharaan dokumen w
Tentang CSS Adalah standart pembuatan dan pemakaian style untuk dokumen terstruktur, CSS digunakan untuk mempersingkat penulisan tag HTML seperti font, color, text dan table menjadi lebih ringkas sehingga
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 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 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 terperinciMODUL 1 STYLE SHEET UNTUK TAMPILAN DASAR
MODUL 1 STYLE SHEET UNTUK TAMPILAN DASAR PENDAHULUAN Setelah semua yang Anda ketahui tentang dasar pembuatan halaman Web dalam perkuliahan sebelumnya, kini tiba saatnya untuk membuat halaman web Anda tampil
Lebih terperinciJavaScript. Pemrograman Web 1. Genap
JavaScript Pemrograman Web 1 Genap 2011-2012 Popup Box JavaScript memiliki tiga macam Popup Box, yaitu : Alert box Biasanya digunakan untuk memberikan informasi ke pengguna. Confirm box Biasanya digunakan
Lebih terperinciCSS dan Tata Letak Pemrograman Internet (TKE ) Program Studi Teknik Elektro, Unsoed
CSS dan Tata Letak Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed Iwan Setiawan Tahun Ajaran 2011/2012 a, a:visited { text-decoration:none; } a:hover { text-decoration:underline;
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 terperinciLAPORAN RESMI PRAKTIKUM II WEB DESAIN PENGENALAN JAVASCRIPT
LAPORAN RESMI PRAKTIKUM II WEB DESAIN PENGENALAN JAVASCRIPT Di susun oleh : Galuh Meidaluna 4103141023 Dosen : Dwi Susanto ST. MT TEKNOLOGI MULTIMEDIA BROADCASTING POLITEKNIK ELEKTRONIKA NEGERI SURABAYA
Lebih terperinciPEMROGRAMAN BERBASIS WEB. Part 1,2 HTML. By Rolly Yesputra Sekolah Tinggi Manajemen Informatika dan Komputer Royal Kisaran, 2018
PEMROGRAMAN BERBASIS WEB Part 1,2 HTML By Rolly Yesputra Sekolah Tinggi Manajemen Informatika dan Komputer Royal Kisaran, 2018 Referensi HTML5, JavaScript, and jquery 24-Hour Trainer, Copyright 2015 by
Lebih terperinciSanksi Pelanggaran Pasal 72 Undang-undang Nomor 19 Tahun 2002 Tentang Hak Cipta 1. Barangsiapa dengan sengaja melanggar dan tanpa hak melakukan
Sanksi Pelanggaran Pasal 72 Undang-undang Nomor 19 Tahun 2002 Tentang Hak Cipta 1. Barangsiapa dengan sengaja melanggar dan tanpa hak melakukan perbuatan sebagaimana dimaksud dalam Pasal 2 Ayat (1) atau
Lebih terperinciBAB I PERKENALAN HTML
BAB I PERKENALAN HTML A. PENDAHULUAN Hypertext Markup Language (HTML) sebuah bahasa markup atau tanda yang digunakan untuk membuat sebuah halaman website, HTML merupakan berupa kode-kode tag yang menginstruksikan
Lebih terperinciHTML. Hypertext Markup Language. Pemrograman Web 1. Genap
HTML Hypertext Markup Language Pemrograman Web 1 Genap 2009 2010 HTML HTML? Sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser.
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 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 terperinciTUGAS UTS WEB STATIS. : Apriyanto Wibowo NIM : : Teknik Informatika S1 (Malam) Pengertian framework
TUGAS UTS WEB STATIS Nama : Apriyanto Wibowo NIM : 12141362 Prodi Mata Kuliah : Teknik Informatika S1 (Malam) : Pemrograman Web Statis Pengertian framework Framework adalah kerangka kerja. Framework juga
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 terperinciDesign Web 2 Kolom Flexible
Design Web 2 Kolom Flexible Muh Hasan Tanjung recosmic@gmail.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
Lebih terperinciTutorial Mengedit Halaman HTML dengan Dreamweaver
Tutorial Mengedit Halaman HTML dengan Dreamweaver Oleh : Ruth Ema Febrita Pada tutorial sebelumnya, kita sudah berhasil melakukan konversi dari desain website yang kita buat menggunakan Photoshop menjadi
Lebih terperinciPOLITEKNIK ELEKTRONIKA NEGERI SURABAYA
WEB DESAIN Pengenalan JavaScript Alfira Rizky Ayuputri 4103141039 3 D3 Multimedia Broadcasting B Dwi Susanto, S.ST, MT. D3 Teknologi Multimedia Broadcasting Departemen Multimedia Kreatif POLITEKNIK ELEKTRONIKA
Lebih terperinciLAYER DAN HYPERLINK. B. Kegunaan Layer: 1. Layer
1. Layer A. Dasar Layer Untuk membuat layer, yang harus anda butuhkan adalah menentukan atribut posisi untuk style anda. Posisi tersebut dapat sebagai posisi absolute atau posisi relative Posisi diatas
Lebih terperinciIntro To JQuery Training Online Ilmuwebsite
MODUL I JQUERY KELAS ZEROZERO Intro To JQuery Training Online Ilmuwebsite http://www.ilmuwebsite.com Lisensi Dokumen: Copyright 2014-2015 Ilmuwebsite.Com Untuk semua kalangan, silahkan menyebarluaskan
Lebih terperinciMEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP
MEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP NURLITA nurlita.icha@gmail.com Abstrak Kali ini kita akan membahas cara membuat layout dengan container bootstrap. Bootstrap adalah suatu framework front-end yang
Lebih terperinciPanduan Lengkapp HTML dan CSS bagian 2 Wahyu Setiyono
Panduan HTML dan CSS bagian 2 A. Apa itu CSS CSS (Cascading Style Sheets) merupakan kode pemrograman untuk membuat tampilan pada HTML. Selain menggunakan HTML para programer website sering menggunakan
Lebih terperinciTUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif
TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif www.ilmuwebsite.com Bagian 7. Menggunakan JQuery Traversing
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 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 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 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 terperinciManual Seting Member Card Pada SLiMS 7 (Cendana)
Manual Seting Member Card Pada SLiMS 7 (Cendana) Komunitas SLiMS Kudus www.slimskudus.net SLiMS Community meet up adalah agenda tahunan berkumpul nya SDC (SLiMS Developer Community ) dengan semua Komunitas
Lebih terperinciYUPOCOM COMPUTER EDUCATION. JavaScript. 1. Mengenal JavaScript Hal yang harus diketahui Apa itu JavaScript. 2.
1. Mengenal JavaScript 1.1. Hal yang harus diketahui 1.2. Apa itu JavaScript 2. Sintak JavaScript 3. Peletakan JavaScript 4. Statemen JavaScript 4.1. JavaScript Statemen 4.2. Semicolon 4.3. Code JavaScript
Lebih terperinciPemrograman Basis Data Berbasis Web
Pemrograman Basis Data Berbasis Web Pertemuan Ke-3 (HTML) Oleh: Noor Ifada S1 Teknik Informatika - Unijoyo 1 HTML singkatan dari HyperText Markup Language menentukan tampilan suatu teks dan tingkat kepentingan
Lebih terperinciCSS (Cascade Style Sheet)
CSS (Cascade Style Sheet) CSS merupakan bahasa (script) yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika kita berbicara dalam konteks web, bisa
Lebih terperinciCSS (Cascading Style Sheets)
CSS (Cascading Style Sheets) Instruktur: Arif Nurwidyantoro Intro Cascading Style Sheets (CSS) digunakan untuk mendefinisikan bagaimana sebuah elemen HTML ditampilkan. Sebuah elemen HTML dapat ditampilkan
Lebih terperinciBAB III PERANCANGAN ALAT
BAB III PERANCANGAN ALAT 3.1 Gambaran Umum Rancangan alat pengendali pintu melalui monitoring kamera yang digunakan pada penulisan ini terdapat 2 cara yang dilakukan yaitu melalui kamera yang akan mengambil
Lebih terperinci[SANGAT MUDAH] Cara Membuat Tab dengan Bootstrap
[SANGAT MUDAH] Cara Membuat Tab dengan Bootstrap Oleh: Arinadi Nur Rohmad Asalamualaikum.. Bagi yang seorang yang belum paham betul JQuery seperti saya, membuat Tab adalah pekerjaan yang cukup sulit..
Lebih terperinci