Membuat Duplikasi Form dengan Jquery (Dynamic Form)
|
|
|
- Leony Halim
- 7 tahun lalu
- Tontonan:
Transkripsi
1
2 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 secara dinamis kadang sangat dibutuhkan dalam beberapa kasus. Kali ini saya akan berbagi bagaimana membuat form dinamis yang dapat di duplikasi dan dihapus sesuka kita. Membuat dynamic field mungkin bukan hal baru bagi seorang web programmer, field inputan yang dapat ditambah maupun di hapus secara dinamis kadang sangat dibutuhkan dalam beberapa kasus.
3 Kali ini saya akan berbagi bagaimana membuat form dinamis yang dapat di duplikasi dan dihapus sesuka kita. Pertama kita buat sebuah form yang nantinya dapat di duplikasi, buat file index.php dan masukkan kode berikut: <body> <div id="wrapper"> <form action="#" method="post" id="sign-up_area" role="form"> <div id="entry1" class="clonedinput"> <h2 id="reference" name="reference" class="heading-reference">entry #1</h2> <fieldset> <!-- Text input--> <label class="label_fn control-label" for="first_name">nama Depan: <input id="first_name" name="first_name" type="text" placeholder="" class="input_fn form-control" required=""> <p class="help-block">this field is required.</p> <!-- Text input--> <label class="label_ln control-label" for="last_name">nama Belakang: <input id="last_name" name="last_name" type="text" placeholder="" class="input_ln form-control"> <!-- Select Basic --> <label class="label_ttl control-label" for="title">jenis Kelamin: <select class="select_ttl form-control" name="title" id="title"> <option value="" selected="selected" disabled="disabled">pilih jenis kelamin</option> <option value="lk">laki-laki</option> <option value="pr">perempuan</option> </select> <!-- end.select_ttl --> <!-- Multiple Checkboxes (inline) --> <label class="label_checkboxitem control-label" for="checkboxitem">status <div class="input-group form-group"> <label class="checkbox-inline" for="checkboxitem-0"> name="checkboxitem" id="checkboxitem-0" value="1"> Single
4 <label class="checkbox-inline" for="checkboxitem-1"> name="checkboxitem" id="checkboxitem-1" value="2"> Menikah <label class="checkbox-inline" for="checkboxitem-2"> name="checkboxitem" id="checkboxitem-2" value="3"> Janda <label class="checkbox-inline" for="checkboxitem-3"> name="checkboxitem" id="checkboxitem-3" value="4"> Duda <!-- Prepended text--> <label class="label_twt control-label" for="twitter_handle">twitter: <div class="input-group form-group"> <span <input id="twitter_handle" name="twitter_handle" class="input_twt form-control" placeholder="" type="text"> <!-- Text input--> <label class="label_ control-label" for=" _address"> <input id=" _address" name=" _address" type="text" placeholder="contoh: class="input_ form-control"> <!-- end #entry1 --> <!-- Button (Double) --> <p> <button type="button" id="btnadd" name="btnadd" class="btn btn-info">tambah form</button> <button type="button" id="btndel" name="btndel" class="btn btn-danger">hapus form diatas</button> </p> <!-- Textarea --> <label class="control-label" for="notes">alamat: <textarea id="notes" name="notes" class="form-control">tulis alamat sesuai dengan KTP</textarea> <!-- Multiple Checkboxes (inline) --> <div class="checkbox"> <label> <input type="checkbox" value="">ya, Saya menyetujui syarat dan ketentuan.
5 <!-- Button --> <p> <button id="submit_button" name="submit_button" class="btn btn-primary">submit</button> </p> </fieldset> </form> <!-- end wrapper --> </body> Dalam form diatas kita akan menambahkan fungsi click pada id btnadd untuk menduplikasi form, dan btndel untuk menghapus form, dimana class clonedinput sebagai parameternya. Jangan lupa untuk meng include file-file jquery yang dibutuhkan pada elemen head: <head> <link href=" s" rel="stylesheet"> <script src="js/jquery min.js"></script> <script type="text/javascript" src="js/clone-form-td.js"></script> <script src=" </script> </head> Tambahkan juga kode css berikut di dalam elemen head: <style> #wrapper { width:595px; margin:0 auto; legend { margin-top: 20px; #attribution { font-size:12px; color:#999; padding:20px; margin:20px 0; border-top:1px solid #ccc; #O_o { text-align: center; background: #33577b;
6 color: #b4c9dd; border-bottom: 1px solid #294663; #O_o a:link, #O_o a:visited { color: #b4c9dd; border-bottom: #b4c9dd; display: block; padding: 8px; text-decoration: none; #O_o a:hover, #O_o a:active { color: #fff; border-bottom: #fff; text-decoration: only screen and (max-width: 620px), only screen and (max-device-width: 620px) { #wrapper { width: 90%; legend { font-size: 24px; font-weight: 500; </style> File index.php secara keseluruhan akan nampak seperti berikut: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>dynamic Form</title> <link href=" s" rel="stylesheet"> <style> #wrapper { width:595px; margin:0 auto; legend { margin-top: 20px; #attribution {
7 font-size:12px; color:#999; padding:20px; margin:20px 0; border-top:1px solid #ccc; #O_o { text-align: center; background: #33577b; color: #b4c9dd; border-bottom: 1px solid #294663; #O_o a:link, #O_o a:visited { color: #b4c9dd; border-bottom: #b4c9dd; display: block; padding: 8px; text-decoration: none; #O_o a:hover, #O_o a:active { color: #fff; border-bottom: #fff; text-decoration: only screen and (max-width: 620px), only screen and (max-device-width: 620px) { #wrapper { width: 90%; legend { font-size: 24px; font-weight: 500; </style> <script src="js/jquery min.js"></script> <script type="text/javascript" src="js/clone-form-td.js"></script> <script src=" </script> <!-- only added as a smoke test for js conflicts --> </head> <body> <div id="wrapper"> <form action="#" method="post" id="sign-up_area" role="form"> <div id="entry1" class="clonedinput"> <h2 id="reference" name="reference" class="heading-reference">entry #1</h2> <fieldset>
8 <!-- Text input--> <label class="label_fn control-label" for="first_name">nama Depan: <input id="first_name" name="first_name" type="text" placeholder="" class="input_fn form-control" required=""> <p class="help-block">this field is required.</p> <!-- Text input--> <label class="label_ln control-label" for="last_name">nama Belakang: <input id="last_name" name="last_name" type="text" placeholder="" class="input_ln form-control"> <!-- Select Basic --> <label class="label_ttl control-label" for="title">jenis Kelamin: <select class="select_ttl form-control" name="title" id="title"> <option value="" selected="selected" disabled="disabled">pilih jenis kelamin</option> <option value="lk">laki-laki</option> <option value="pr">perempuan</option> </select> <!-- end.select_ttl --> <!-- Multiple Checkboxes (inline) --> <label class="label_checkboxitem control-label" for="checkboxitem">status <div class="input-group form-group"> <label class="checkbox-inline" for="checkboxitem-0"> name="checkboxitem" id="checkboxitem-0" value="1"> Single <label class="checkbox-inline" for="checkboxitem-1"> name="checkboxitem" id="checkboxitem-1" value="2"> Menikah <label class="checkbox-inline" for="checkboxitem-2"> name="checkboxitem" id="checkboxitem-2" value="3"> Janda <label class="checkbox-inline" for="checkboxitem-3"> name="checkboxitem" id="checkboxitem-3" value="4">
9 Duda <!-- Prepended text--> <label class="label_twt control-label" for="twitter_handle">twitter: <div class="input-group form-group"> <span <input id="twitter_handle" name="twitter_handle" class="input_twt form-control" placeholder="" type="text"> <!-- Text input--> <label class="label_ control-label" for=" _address"> <input id=" _address" name=" _address" type="text" placeholder="contoh: class="input_ form-control"> <!-- end #entry1 --> <!-- Button (Double) --> <p> <button type="button" id="btnadd" name="btnadd" class="btn btn-info">tambah form</button> <button type="button" id="btndel" name="btndel" class="btn btn-danger">hapus form diatas</button> </p> <!-- Textarea --> <label class="control-label" for="notes">alamat: <textarea id="notes" name="notes" class="form-control">tulis alamat sesuai dengan KTP</textarea> <!-- Multiple Checkboxes (inline) --> <div class="checkbox"> <label> <input type="checkbox" value="">ya, Saya menyetujui syarat dan ketentuan. <!-- Button --> <p> <button id="submit_button" name="submit_button" class="btn btn-primary">submit</button> </p> </fieldset> </form> <!-- end wrapper --> </body> </html>
10 Selanjutnya kita buat fungsi jquery clone nya, ada dua fungsi yang kita butuhkan, yaitu fungsi untuk menduplikasi dan fungsi untuk menghapus. Fungsi untuk menduplikasi form: $(function () { $('#btnadd').click(function () { var num = $('.clonedinput').length, // Cek berapa banyak form yang telah kita duplikasi newnum = new Number(num + 1), // Tambahkan nilai 1 untuk setiap ID duplikasi newelem = $('#entry' + num).clone().attr('id', 'entry' + newnum).fadein('slow'); // Buat elemen baru dengan fungsi clone(), dan manipulasi ID dengan nilai newnum // H2 - section newelem.find('.heading-reference').attr('id', 'ID' + newnum + '_reference').attr('name', 'ID' + newnum + '_reference').html('entry #' + newnum); // Nama depan - text newelem.find('.label_fn').attr('for', 'ID' + newnum + '_first_name'); newelem.find('.input_fn').attr('id', 'ID' + newnum + '_first_name').attr('name', 'ID' + newnum + '_first_name').val(''); // Nama belakang - text newelem.find('.label_ln').attr('for', 'ID' + newnum + '_last_name'); newelem.find('.input_ln').attr('id', 'ID' + newnum + '_last_name').attr('name', 'ID' + newnum + '_last_name').val(''); // Status- checkbox newelem.find('.label_checkboxitem').attr('for', 'ID' + newnum + '_checkboxitem'); newelem.find('.input_checkboxitem').attr('id', 'ID' + newnum + '_checkboxitem').attr('name', 'ID' + newnum + '_checkboxitem').val([]); // - text newelem.find('.label_ ').attr('for', 'ID' + newnum + '_ _address'); newelem.find('.input_ ').attr('id', 'ID' + newnum + '_ _address').attr('name', 'ID' + newnum + '_ _address').val(''); // Twitter handle - append and text newelem.find('.label_twt').attr('for', 'ID' + newnum + '_twitter_handle'); newelem.find('.input_twt').attr('id', 'ID' + newnum + '_twitter_handle').attr('name', 'ID' + newnum + '_twitter_handle').val(''); // Insert elemen baru setelah field input duplikasi yang terakhir
11 $('#entry' + num).after(newelem); $('#ID' + newnum + '_title').focus(); // Enable tombol remove $('#btndel').attr('disabled', false); // Sesuaikan nilai '5' sesuai kebutuhan untuk mengatur jumlah duplikasi maksimal yang diperbolehkan. if (newnum == 5) $('#btnadd').attr('disabled', true).prop('value', "Batas maksimal duplikasi"); ); Fungsi untuk mengapus section form: $('#btndel').click(function () { // Dialog konfirmasi penghapusan if (confirm("apakah anda yakin ingin menghapus form diatas? Form tidak dapat dikembalikan.")) { var num = $('.clonedinput').length; // Berapa banyak form duplikasi yang telah dibuat $('#entry' + num).slideup('slow', function () {$(this).remove(); // Jika hanya satu form, disable tombol remove if (num -1 === 1) $('#btndel').attr('disabled', true); // enable tombol "add" $('#btnadd').attr('disabled', false).prop('value', "add section");); return false; // Hapus form duplikasi terakhir ); // Enable tombol "add" $('#btnadd').attr('disabled', false); // Disable tombol "remove" $('#btndel').attr('disabled', true); Simpan kode jquery diatas dengan nama jquery-clone-td.js Sekarang kita sudah dapat menduplikasi sebuah form dengan jquery, selamat mencoba.
12 Tentang Penulis Dimas Agung Noviyanto
Pemrograman 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
DAFTAR 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).
Langkah 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
Membuat Web Chatting dengan Ajax Jquery, PHP, dan Bootstrap [Part 2]
![Membuat Web Chatting dengan Ajax Jquery, PHP, dan Bootstrap [Part 2]](/thumbs/59/43255808.jpg "Membuat 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
Pemrograman Web PRAKTIKUM 6. Query Data 2. TUJUAN BELAJAR Mahasiswa dapat menggunakan PHP dan MySQL untuk mengupdate data
PRAKTIKUM 6 Query Data 2 TUJUAN BELAJAR Mahasiswa dapat menggunakan PHP dan MySQL untuk mengupdate data MATERI Program edit dan hapus TUGAS Menambahkan fitur edit dan hapus untuk semua form input data
Nama: ahmad edi purwanto. Nim: Tugas uts web statis. Tutorial cara penggunaan suatu framework CSS
Nama: ahmad edi purwanto Nim:12111027 Tugas uts web statis. Tutorial cara penggunaan suatu framework CSS Pengertian dasar dari Framework itu sendiri adalah; sebuah konsep yang memiliki struktur serta terorganisir
TUTORIAL 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,
CSS. 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
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
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
Membuat 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
TUTORIAL 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
LEMBAR 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
Tutorial Implementasi Jquery Mobile dan JSP. 1. Definisi Jquery Mobile
Tutorial Implementasi Jquery Mobile dan JSP 1. Definisi Jquery Mobile Jquery mobile : framework tampilan berbasis HTML 5, sehingga situs responsive baik di desktop, tablet atau smarphone. 2. Download Jquery
MODUL 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
Membuat 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
CSS 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
DAFTAR ISI DAFTAR ISI... 1 KATA PENGATAR... 2 BAB I PENDAHULUAN Latar Belakang Rumusan Masalah Tujuannya...
DAFTAR ISI COVER DAFTAR ISI... 1 KATA PENGATAR... 2 BAB I PENDAHULUAN... 3 1.1 Latar Belakang... 3 1.2 Rumusan Masalah... 3 1.3 Tujuannya... 3 BAB II PEMBAHASAN... 4 2.1 Pengertian CSS... 4 2.2 Format
Tutorial 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
BAB 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
Cara 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
Secara 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,
BAB 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
Beralih dari Input Submit ke Button dan Cara Mudah Membuat Button Bootstrap
Beralih dari Input Submit ke Button dan Cara Mudah Membuat Button Bootstrap Oleh: Arinadi Nur Rohmad Kenapa beralih dari Input Submit ke Button? Ya, menurut saya button lebih Power Full dari pada Input
MEMBUAT 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,
Membuat 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
KAJIAN 3 Web Responsive
KAJIAN 3 Web Responsive Modul 10 Pengantar Web Responsive Modul 11 Perancangan Web Responsive 73 KAJIAN 3 Web Responsive MODUL 10 Pengantar Web Responsive 10.1. TUJUAN Mengetahui dan memahami dasar perancangan
BAB IV CASCADING STYLE SHEET (CSS)
BAB IV CASCADING STYLE SHEET (CSS) A. KOMPETENSI DASAR Memahami jenis dan struktur dasar dokumen CSS dan CSS3. Mampu memanfaatkan CSS untuk memformat dokumen HTML. Mampu memanfaatkan pendekatan CSS untuk
TUTORIAL 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
Membuat Top Fixed Responsive Navbar Twitter Bootstrap
Membuat Top Fixed Responsive Navbar Twitter Bootstrap Oleh: ricky orlando napitupulu Salam bro and sis :), selamat datang di tulisan tutorial pertama ane ni, makasi da mau singga disini ye walopun kesasar
Author : 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
POLITEKNIK 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
[SANGAT MUDAH] Cara Membuat Tab dengan Bootstrap
![[SANGAT MUDAH] Cara Membuat Tab dengan Bootstrap](/thumbs/60/44479155.jpg "[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..
MODUL III CASCADING STYLE SHEET
MODUL III CASCADING STYLE SHEET A. TUJUAN Memahami struktur dasar dokumen HTML. Mampu membuat dokumen HTML yang baik dan benar. Mampu memanfaatkan elemen-elemen dasar untuk menampilkan informasi. B. PETUNJUK
Perancangan Web. Perancangan Web. Oleh : Moh. Sulhan. By : MOH.SULHAN
Oleh : Moh. Sulhan 1 Apa itu CSS? - Merupakan bahasa style sheet yang digunakan untuk mengatur tampilan dokumen - Sebuah metode yang digunakan untuk mempersingkat penulisan tag HTML, seperti font, color,
buat 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
CSS (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
SImple 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
Create Read Update Delete using PHP MySql
2016 Create Read Update Delete using PHP MySql CRUD TABEL ALUMNI DWI SETIYA NINGSIH // 210 315 70 25 [COMPANY NAME] [Company address] SS Program Gambar 1.1 Tampilan index.php Gambar 2.1 Tampilan edit.php
CSS Cascading Style Sheet
CSS Cascading Style Sheet Pemrograman Web 1 Genap 2011-2012 CSS Lanjut CSS Dimension Berfungsi untuk mengatur panjang dan lebar dari sebuah elemen HTML. contoh: height:100px; width:200px; Nilai/ value:
Membuat 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
BAB X AKSES DAN MANIPULASI DATA
BAB X AKSES DAN MANIPULASI DATA A. TUJUAN Memahami konsep dasar akses dan manipulasi data. Mampu mengintegrasikan aplikasi PHP dengan database MySQL. Mampu menghasilkan aplikasi web database untuk pengolahan
TUGAS 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
1. Apa itu Bootstrap?
Pendahuluan Dalam rangka memenuhi tugas mata kuliah Web Statis, Prodi TI, STMIK EL Rahma, dengan topik dan konten yang telah ditetapkan, yaitu mengenai Bootstrap. Maka saya mengekspresikan sebuah pemahaman
[SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3
![[SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3](/thumbs/63/50169407.jpg "[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
Perkenalan 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
BAB III CASCADING STYLE SHEET
BAB III CASCADING STYLE SHEET A. KOMPETENSI DASAR Memahami jenis dan struktur dasar dokumen CSS dan CSS3. Mampu memanfaatkan CSS untuk memformat dokumen HTML. Mampu memanfaatkan pendekatan CSS untuk menghasilkan
BAB 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
Halaman Utama. Tampilan Menu. Universitas Sumatera Utara
Halaman Utama Tampilan Menu Tampilan Galeri Tampilan Admin Listing Program Halaman Utama
CSS? Contoh sederhana Selector Mekanisme mengaplikasikan CSS Elemen-elemen CSS
PERTEMUAN 4 CSS? Contoh sederhana Selector Mekanisme mengaplikasikan CSS Elemen-elemen CSS Singkatan dari Cascading Style Sheet Merupakan suatu cara untuk memformat atau membuat layout halaman web menjadi
Masih 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
DASAR-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
window.location='karyawan/homeuser.php'</script>"; }else if($c['level']=="manajer"){
![window.location='karyawan/homeuser.php'</script>; }else if($c['level']==manajer){](/thumbs/65/53681093.jpg "window.location='karyawan/homeuser.php'</script>; }else if($c['level']==manajer){")
Source Code 1. Login.php
CSS Cascading Style Sheet
CSS Cascading Style Sheet Pengenalan CSS CSS adalah singkatan dari Cascading Style Sheets CSS (Cascading Style Sheet) digunakan untuk melengkapi file HTML, dan tugas utamanya adalah menetapkan aturan tampilan/style
MODUL 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
Lampiran Kode Program 1. Fw_jemput_penumpang.php PENGENALAN HTML - 2. Anda bisa menambahkan beberapa cell (kolom) untuk membuat satu baris cell (kolom).
PENGENALAN HTML - 2 G. Tabel HTML Setting untk membuat perintah tabel terdiri dari : Row : mementukan banyaknya baris yang dimiliki oleh tabel. Columns : menentukan banyaknya kolom yang dimiliki tabel.
TUTORIAL 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 8. Menggunakan JQuery Manipulation
Pemrograman Basis Data Berbasis Web
Pemrograman Basis Data Berbasis Web Pertemuan Ke-5 (CSS) Noor Ifada noor.ifada@if.trunojoyo.ac.id S1 Teknik Informatika - Unijoyo 1 Sub Pokok Bahasan CSS? Contoh sederhana Selector Mekanisme mengaplikasikan
Atribut ACTION tempat menspesifikasikan URL yang akan digunakan sebagai pemroses field input form.
FORM DAN INPUT HTML Elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web. Pengguna web dapat memasukkan input melalui halaman-halaman HTML. Elemen/ TAG ini digunakan membatasi input.
X/HTML5 Form. Auriza Akbar 25 Mei 2012
X/HTML5 Form Auriza Akbar auriza.akbar@gmail.com 25 Mei 2012 Form Form Komponen halaman web yang memiliki kontrol-kontrol formulir: text field, text area, button, radio button, checkbox, User dapat berinteraksi
Materi 9 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya
Materi 9 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya nizar.radliya@yahoo.com Nama Mahasiswa NIM Kelas Kompetensi Dasar Memahami perkembangan HTML5.
Pemrograman Web Sisi Client Pertemuan 3 PI
Pemrograman Web Sisi Client Pertemuan 3 PI Oleh : Hasanuddin, S.T. Program Studi Teknik Informatika Fakultas Teknologi Industri Universitas Ahmad Dahlan Yogyakarta Topik Pendahuluan HTML CSS JavaScript
<title>kamus Indonesia Karo Online</title> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet">
Listing Program 1. Index
Cascading 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)
2011 Ahmad Amarullah
1 Silabus Mata Kuliah Program Studi : Sistem Informasi Kode Mata Kuliah : Nama Mata Kuliah : Komputer Aplikasi IT ( XHTML & CSS ) Jumlah SKS : 2 SKS Semester : 1 Deskripsi Mata Kuliah : Mata kuliah ini
Publish: 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
TUTORIAL 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
Cara 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
Teks 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
MODUL PRAKTIKUM PEMROGRAMAN INTERNET
MODUL PRAKTIKUM PEMROGRAMAN INTERNET PENANGANAN FORM DALAM HTML DAN STYLE SHEET (CSS) DISUSUN OLEH : Astrid Lestari Tungadi, S.Kom FAKULTAS TEKNOLOGI INFORMASI UNIVERSITAS ATMA JAYA MAKASSAR 2014 FORM
KARTU BIMBINGAN TUGAS AKHIR MAHASISWA
DEPARTEMEN PENDIDIKAN NASIONAL UNIVERSITAS SUMATERA UTARA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM (FMIPA) JL. BIOTEKNOLOGI NO. 1 KAMPUS USU Telp. (061) 82144290 MEDAN 20155 KARTU BIMBINGAN TUGAS
CSS. 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
Membuat 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
How 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
CSS Cascading Style Sheet
CSS Cascading Style Sheet Pemrograman Web 1 Genap 2011-2012 Pengenalan CSS CSS = Cascading Style Sheet. Suatu style yang digunakan untuk menampilkan elemen HTML. Dapat mengatur dan mengontrol tampilan
Keuntungan 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
Validasi Form. Contoh Validasi Form
Validasi Form Data yang dimasukkan melalui sebuah form rawan terhadap penyalahgunaan yang mengancam keamanan aplikasi web. Maka biasanya sebuah form dilengkapi dengan proses memeriksa setiap isian form
XHTML 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
Web Programming (WP) Step 2 [ HTML & PHP BASIC]
![Web Programming (WP) Step 2 [ HTML & PHP BASIC]](/thumbs/55/37130440.jpg "Web Programming (WP) Step 2 [ HTML & PHP BASIC]")
Web Programming (WP) Step 2 [ HTML & PHP BASIC] Created By Rolly Yesputra, M.Kom rollyyp.wordpress.com rollyyesputra1@gmail.com 082391177785 767E4C4D 4 March 2015 rollyyp.wordpress.com 1 HTML (Hypertext
LEMBAR KERJA PRAKTIKUM
LEMBAR KERJA PRAKTIKUM Nim : 13-1401-164 Hari / Tgl TTD Asisten Nama Kelas : Muh. Idrus : DK-13 Mata kuliah : Pemrograman Web I Materi : CSS External - Tampilan halaman CSS External/index.html :
CSS 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;
AJAX 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
LAMPIRAN. A. Source Code Halaman Utama
A. Source Code Halaman Utama LAMPIRAN include 'config/config.php'; include 'config/statistik.php'; sa-prol
Pengenalan Perancangan Web 2017
9. Form dan Input HTML Form adalah elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web. Pengguna web dapat memasukkan input melalui halaman-halaman HTML. Form biasa digunakan untuk membuat
BAB 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
Percobaan 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
MEMBUAT MASTER BERITA Teknik Informatika Sopingi, M.Kom
MEMBUAT MASTER BERITA Teknik Informatika Sopingi, M.Kom 1. Buatlah File index.php File ini digunakan untuk menampilkan form dan datagrid tabel berita Memanggil koneksi manage BERITA
Membuat Toko Buku dengan PHP - MySQL
Membuat Toko Buku dengan PHP - MySQL Iman Amalludin iman.llusion@gmail.com :: http://blog.imanllusion.hostzi.com Abstrak PHP. Apa itu? PHP (Hypertext Preprocessor) adalah bahasa skrip yang dapat ditanamkan
Cascading Style Sheet
Cascading Style Sheet Manfaat: Memperindah tampilan halaman website. Mempermudah mengubah secara keseluruhan warna dan tampilan. Memformat ulang situs Anda secara cepat. Menghemat kode dan waktu dalam
PEMROGRAMAN WEB. Indra Gunawan, ST., M.Kom., CEH., CHFI
PEMROGRAMAN WEB Indra Gunawan, ST., M.Kom., CEH., CHFI Curiculum Vitae Pendidikan : S1 Teknik Informatika, Minat Studi Kecerdasarn Buatan, 2007, Universitas Islam Indonesia Yogyakarta Skripsi : Membuat
TUTORIAL HTML CSS Langkah Tepat menjadi Web Designer Handal, menguasai HTML & CSS, jalan membuat halaman website cantik dan menarik
TUTORIAL HTML CSS Langkah Tepat menjadi Web Designer Handal, menguasai HTML & CSS, jalan membuat halaman website cantik dan menarik www.ilmuwebsite.com Bagian 18. Lebih Dalam Bekerja dengan CSS 1 Bagian
BAB IV HASIL DAN PEMBAHASAN. Sistem Informasi Penjualan dan Pembelian Barang Pada Toko Touring
BAB IV HASIL DAN PEMBAHASAN 3.1 PROGRAM PENGHUBUNG DATABASE Sistem Informasi Penjualan dan Pembelian Barang Pada Toko Touring Menggunakan unit program didukung oleh pemrograman PHP dan database server
FRAMEWORK CSS :CSS BOOTSTRAP
BAB 5 FRAMEWORK CSS :CSS BOOTSTRAP A. TUJUAN 1. Memahami dan mempelajaricara membuat tampilan web yang responsive dengan framework CSS. 2. Mengimplementasikan CSS pada Bootstrap. B. LANDASAN TEORI 1. TEXT/TYPOGRAPHY
Triswansyah 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
MODUL III CASCADING STYLE SHEET
MODUL III CASCADING STYLE SHEET A. TUJUAN Memahami jenis dan struktur dasar dokumen CSS. Mampu memanfaatkan CSS untuk memformat dokumen HTML. Mampu memanfaatkan pendekatan CSS untuk menghasilkan halaman
Membuat 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
CSS (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
Membuat Tempelate Menggunkanan Boostrap
Membuat Tempelate Menggunkanan Boostrap Jihadul Akbar, S.Kom PUSTIK STMIK LOMBOK 3/30/2017 Tentang Modul Bootstrap adalah kerangka front-end yang paling populer dalam waktu terakhir. Sangat ringan, handal
LAPORAN 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
SURAT KETERANGAN Hasil Uji Program Tugas Akhir. Dengan Hasil : SUKSES / GAGAL
KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN UNIVERSITAS SUMATARA UTARA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM Jln. Bioteknologi No.1 Kampus USU Padang Bulan Medan-20155 Telp. (061) 8211050, 8214290, Fax.