[SANGAT MUDAH] Cara Membuat Tab dengan Bootstrap

Ukuran: px
Mulai penontonan dengan halaman:

Download "[SANGAT MUDAH] Cara Membuat Tab dengan Bootstrap"

Transkripsi

1

2 [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.. Tapi Syukurlah, Karena Bootstrap memberikan banyak kemudahan dalam bisang Web Design diantaranya kemudahan untuk membuat Tab.. Apa itu Tab? Coba lihat bagian atas Browser anda.. Inilah Tab..... Asalamualaikum.. Bagi yang seorang yang belum paham betul JQuery seperti saya, membuat Tab adalah pekerjaan yang cukup sulit.. Tapi Syukurlah, Karena Bootstrap memberikan banyak kemudahan dalam bisang Web Design diantaranya kemudahan untuk membuat Tab.. Apa itu Tab? Coba lihat bagian atas Browser anda.. Inilah Tab..

3 Ya, tapi sekarang kita akan membuat Tab untuk website agar tampilan website lebih rapi dan cantik.. Nah, sekarang saya ingin memberikan tutorial Cara Membuat Tab dengan Bootstrap. Kenapa harus dengan Bootstrap? Karena untuk memudahkan membuat tap hanya dengan class CSS saja tanpa perlu mengerti jquery.. Sekarang kita mulai tutorialnya.. Siapkan Alat dan Bahanya Laptop atau benda sejenisnya. Browser. Text editor. Jquery. Versi 1.7 keatas, bias di download di situs resminya.. Bootstrap 3. Saya disini menggunakan Bootstrap v.3.. Jika semua sudah terkumpul saatnya saya mulai.. Langkah 1 Niat.. *Ini Penting.. Langkah 2 Nyalakan Laptop atau benda sejenisnya.. Buka Text editor.. Langkah 3 Buat folder, terserah dimana saja. Misal D: coba.. Lalu buat folder baru di dalamnya untuk wadah file bootstapnya, misal bootstap. Sekarang kita extrak bootstrap 3 yang sudah ada.. Seperti ini..

4 Hasil struktur Foldernya jadi seperti ini.. coba >bootstrap >>css >>fonts >>js Langkah 4 Sekarang kita letakan jquery.min.js di coba>bootstrap>js.. Seperti ini.. Langkah 5 Sekarang kita mulai coding.. Buat dulu code struktur dasar untuk bootstrap.. Patekan Code ini ke text editor kamu..

5 <!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>membuat Button Bootstrap</title> <!-- dibawah sini CSS Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- dibawah sini CSS kamu, contoh <link href="mystyle.css" rel="stylesheet">--> <!-- JS untuk IE --> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src=" <script src=" <![endif]--> </head> <body> <!-- Content START --> <!-- Content END --> <!-- jquery (necessary for Bootstrap's JavaScript plugins) --> <script src="bootstrap/js/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html> Kita akan coding diantara Content Start dan END.. Langkah 6 Sekarang kita akan membuat beberapa tab, Coba lihat betapa mudahnya membuat tab dengan Bootstrap Pastekan code ini di antara Content Start dan END, fungsi dari barisan code sudah ada di Komentar

6 Code.. <h1>tab Mudah dengan Bootstrap</h1> <!-- Nav tabs, ini tombol tab di atas --> <ul class="nav nav-tabs"> <!-- Untuk Semua Tab.. pastikan a href= #nama_id sama dengan nama id di Tap Pane dibawah--> <li class="active"><a href="#home" data-toggle="tab">home</a></li> <!-- Untuk Tab pertama berikan li class= active agar pertama kali halaman di load tab langsung active--> <li><a href="#profile" data-toggle="tab">profile</a></li> <li><a href="#messages" data-toggle="tab">messages</a></li> <li><a href="#settings" data-toggle="tab">settings</a></li> </ul> <!-- Tab panes, ini content dari tab di atas --> <div class="tab-content"> <div class="tab-pane active" id="home">selamat datang</div><!-- Untuk Tab pertama berikan div class= active agar pertama kali halaman di load content langsung active--> <div class="tab-pane" id="profile">profil saya</div> <div class="tab-pane" id="messages">sangat Mudah membuat Tap dengan Bootstrap :)</div> <div class="tab-pane" id="settings">setting di sini..</div> </div> Lalu save file ini dengan nama index.html di folder coba.. Langkah 7 Buka index.html tadi.. Open with Browser anda.. Hasilnya..

7 Selesai.. Untuk mendapat update tutorial dari saya, silahkan click tombol Follow dibawah Foto saya di atas.. Original Posted By : Arinadi Nur Rohmad Tentang Penulis Arinadi Nur Rohmad Code_Start(); Barisan Kata Untuk Aksi Nyata. Code_get_SUCCESS(); :) Sekolah di SMK YAPPI Wonosari, Yogyakarta. Jurusan RPL..

Perkenalan Glyphicon Bootstrap dan Cara Mudah Menggunakannya

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

Lebih terperinci

Beralih dari Input Submit ke Button dan Cara Mudah Membuat Button Bootstrap

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

Lebih terperinci

[SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3

[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 terperinci

Perkenalan Font Awesome untuk Pure CSS dan Bootstap. [Part 1]

Perkenalan Font Awesome untuk Pure CSS dan Bootstap. [Part 1] Perkenalan Font Awesome untuk Pure CSS dan Bootstap. [Part 1] Oleh: Arinadi Nur Rohmad Font Awesome adalah kumpulan icon yang telah dibuat sedemikian rupa, dan menggunakan system Font Icon yang memungkinkan

Lebih terperinci

membuat website dengan bootstrap v3.0.0

membuat website dengan bootstrap v3.0.0 membuat website dengan bootstrap v3.0.0 Oleh: reski hamsah Belakangan ini, bootstrap telah merilis versi terbarunya dengan berbagai tawaran menarik mulai dari desain, fitur, dan customizer terbaru untuk

Lebih terperinci

Membuat Simple Online Messanger atau Chat dengan PHP, MySQL, JQuery, Bootsrtrap 3 dan Font Awesome 4 [Part 1]

Membuat Simple Online Messanger atau Chat dengan PHP, MySQL, JQuery, Bootsrtrap 3 dan Font Awesome 4 [Part 1] Membuat Simple Online Messanger atau Chat dengan PHP, MySQL, JQuery, Bootsrtrap 3 dan Font Awesome 4 [Part 1] Oleh: Arinadi Nur Rohmad Episode "Design Sampul" Asalamualaikum, Dalam pembuatan Online Messanger

Lebih terperinci

Cara Sederhana Import Data dari Excel (CSV) ke MySQL dengan PHP

Cara Sederhana Import Data dari Excel (CSV) ke MySQL dengan PHP Cara Sederhana Import Data dari Excel (CSV) ke MySQL dengan PHP Oleh: Arinadi Nur Rohmad Admin sekolah menyuruh saya untuk membuat aplikasi rekap nilai raport dan data siswa, nah pada tengah-tengah membuat

Lebih terperinci

Membuat Scrollspy Dengan Bootstrap

Membuat 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 terperinci

Cara Mudah dan Cepat Membuat Laporan atau Surat PDF dari PHP, MySQL dan MPdf

Cara Mudah dan Cepat Membuat Laporan atau Surat PDF dari PHP, MySQL dan MPdf Cara Mudah dan Cepat Membuat Laporan atau Surat PDF dari PHP, MySQL dan MPdf Oleh: Arinadi Nur Rohmad Sekarang jangan pusing lagi mau bikin laporan sederhana saja harus pake Set A, Set B, Set C dan apalah

Lebih terperinci

1. Apa itu Bootstrap?

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

Lebih terperinci

Membuat Top Fixed Responsive Navbar Twitter Bootstrap

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

Lebih terperinci

Membuat Display Produk dalam Layout Box 4 Kolom

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

Lebih terperinci

MEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP

MEMBUAT 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 terperinci

Page 1 of 8 Tutorial Font Awesome UTS Stmik El Rahma

Page 1 of 8 Tutorial Font Awesome UTS Stmik El Rahma Page 1 of 8 Tutorial Font Awesome Nama : Faqum Alf a Dwiyanto NIM : 12141368 Prodi : TI / I Buat tutorial cara penggunaan suatu framework CSS yang diimplementasikan pada layout semantik html. Tulislah

Lebih terperinci

Permasalahan Tambahan

Permasalahan Tambahan Permasalahan Membuat tampilan web yang bagus dan konsisten itu susah dan butuh waktu lama Untuk SEO (Search Engine Optimization) yang lebih baik, hanya gunakan tag dan html untuk menyimpan isi web.

Lebih terperinci

Membuat Online Messanger atau Chat dengan PHP, MySQL, JQuery, Bootsrtrap 3 dan Font Awesome 4 [Part 3]

Membuat Online Messanger atau Chat dengan PHP, MySQL, JQuery, Bootsrtrap 3 dan Font Awesome 4 [Part 3] Membuat Online Messanger atau Chat dengan PHP, MySQL, JQuery, Bootsrtrap 3 dan Font Awesome 4 [Part 3] Oleh: Arinadi Nur Rohmad Asalamualaikum, Setelah di part sebelumnya kita sudah membuat design dan

Lebih terperinci

TUTORIAL MEMBUAT SNIPPET TAB BOOTSNIPP UNTUK BOOTSTRAP

TUTORIAL MEMBUAT SNIPPET TAB BOOTSNIPP UNTUK BOOTSTRAP TUTORIAL MEMBUAT SNIPPET TAB BOOTSNIPP UNTUK BOOTSTRAP Oleh : Nama : Badiah Setyowati Nim : 12141363 Prodi : Teknik Informatika - Malam Bootsnipp A. Pengertian Bootsnip Bootsnipp. Apa sih itu Bootsnipp?

Lebih terperinci

WEB STATIS MEMBUAT TUTORIAL PENGGUNAAN FRAMEWORK CSS

WEB STATIS MEMBUAT TUTORIAL PENGGUNAAN FRAMEWORK CSS WEB STATIS MEMBUAT TUTORIAL PENGGUNAAN FRAMEWORK CSS Oleh : EMA SETYA KARISNA TI. 12141391 A. PENGERTIAN FRAMEWORK CSS Bootswatch.com Bootswatch merupakan penyedia tema berbagai macam bootstrap dengan

Lebih terperinci

Tutorial Implementasi Jquery Mobile dan JSP. 1. Definisi Jquery Mobile

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

Lebih terperinci

Responsive Sidebar dengan Bootstrap

Responsive 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 terperinci

KAJIAN 3 Web Responsive

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

Lebih terperinci

Membuat Web Chatting dengan Ajax Jquery, PHP, dan Bootstrap [Part 2]

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

Lebih terperinci

2. CARA MENGGUNAKAN FRAMEWORK CSS GETBOOTSTRAP.COM/232/ Bagaimana Cara Menggunakan Bootstrap?

2. CARA MENGGUNAKAN FRAMEWORK CSS GETBOOTSTRAP.COM/232/ Bagaimana Cara Menggunakan Bootstrap? NAMA : SITI NURWANTI NIM : 12141385 MATA KULIAH : PEMROGRAMAN WEB STATIS 1. PENGERTIAN FRAMEWORK CSS GETBOOTSTRAP.COM/232/ Bootstrap merupakan sebuah framework CSS,yang menyediakan kumpulan komponen-komponen

Lebih terperinci

BAB V DESAIN WEB CSS

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

Lebih terperinci

Ruang Kerja DREAMWEAVER MX 2004 :

Ruang Kerja DREAMWEAVER MX 2004 : 1.1 Pengertian Macromedia Dreamweaver : merupakan sebuah HTML editor Profesional untuk mendesain secara visual dan mengelola situs web beserta halaman- web. 1.2 Spesifikasi PC untuk menjalankan DREAMWEAVER

Lebih terperinci

Intro To JQuery Training Online Ilmuwebsite

Intro 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 terperinci

Membuat Layout Desain Awal dengan Photoshop

Membuat Layout Desain Awal dengan Photoshop 2 Websiteku Membuat Layout Desain Awal dengan Photoshop jalankan aplikasi photoshop anda dan siapkan sebuah kanvas baru, caranya pilih file - new lalu gunakan setting berikut: Width : 700 pixel Height

Lebih terperinci

Membuat Online Messanger atau Chat dengan PHP, MySQL, JQuery, Bootsrtrap 3 dan Font Awesome 4 [Part 2]

Membuat Online Messanger atau Chat dengan PHP, MySQL, JQuery, Bootsrtrap 3 dan Font Awesome 4 [Part 2] Membuat Online Messanger atau Chat dengan PHP, MySQL, JQuery, Bootsrtrap 3 dan Font Awesome 4 [Part 2] Oleh: Arinadi Nur Rohmad Episode System Sign-Up/Registerasi/Daftar User Asalamualaikum, Setelah di

Lebih terperinci

Cara Membuat Halaman Form Dengan Bootstrap CDN

Cara Membuat Halaman Form Dengan Bootstrap CDN Cara Membuat Halaman Form Dengan Bootstrap CDN Fitria Arnita 23@gmail.com Abstrak Bootstrap adalah front-end framework yang solek, bagus dan luar biasa yang mengedapankan tampilan untuk mobile device (Handphone,

Lebih terperinci

Pemrograman Web Week 2. Team Teaching

Pemrograman Web Week 2. Team Teaching Pemrograman Web Week 2 Team Teaching WEEK 2 HTML IKG2I4 Software Project I Persiapan Instalasi Editor Download dan Install apilkasi editor (mis. Notepad++) Karena membantu dalam pengembangan syntax highlighting

Lebih terperinci

Pengenalan Script. Definisi HTML

Pengenalan Script. Definisi HTML 1 Pengenalan Script Pada bab ini akan dibahas bahasa script yang dapat digunakan untuk membuat halaman web. Untuk dapat membuat halaman web bahasa script pertama yang harus anda kenal adalah HTML. HTML

Lebih terperinci

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

PRAKTIKUM SISTEM INFORMASI MANAJEMEN MODUL V DREAMWEAVER 5.1 Tujuan Praktikum Setelah menyelesaikan modul ini, mahasiswa diharapkan mampu : 1. Mengenal komponen aplikasi Macromedia Dreamweaver 2. Membuat template website offline sederhana

Lebih terperinci

Menggunakan Vibration pada Cordova

Menggunakan Vibration pada Cordova Menggunakan Vibration pada Cordova Juli 2015 Tingkat: Oleh : Feri Djuandi Pemula Menengah Mahir Artikel kali ini akan menjelaskan cara menggetarkan perangkat mobile dengan menggunakan API Cordova. Teknik

Lebih terperinci

LAPORAN RESMI. Flash, Audio dan Video. Dosen Pembimbing : Dwi SusantoS. ST, MT. Oleh Hamidah Nur Hidayati

LAPORAN RESMI. Flash, Audio dan Video. Dosen Pembimbing : Dwi SusantoS. ST, MT. Oleh Hamidah Nur Hidayati LAPORAN RESMI Flash, Audio dan Video Dosen Pembimbing : Dwi SusantoS. ST, MT Oleh Hamidah Nur Hidayati 4103131038 PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA KREATIF POLITEKNIK

Lebih terperinci

How to Create Simple Web (2) - Slice

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

Lebih terperinci

CHAPTER 6. Sebelum membuat starter data, kita perlu meng-create collections terlebih dahulu. Buat folder lib pada folder aplikasi.

CHAPTER 6. Sebelum membuat starter data, kita perlu meng-create collections terlebih dahulu. Buat folder lib pada folder aplikasi. CHAPTER 6 Untuk membuat collections, hal pertama yang dilakukan adalah menambahkan baris baru ke dalam file Javascript yang memungkinkan user untuk membuat collections. Sebelumnya, image tersimpan dalam

Lebih terperinci

buat Lightbox mu sendiri dengan jquery

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

Lebih terperinci

Membuat Carousel Dengan Bootstrap CDN

Membuat Carousel Dengan Bootstrap CDN Membuat Carousel Dengan Bootstrap CDN Fitria Arnita 23@gmail.com Abstrak Bootstrap adalah framework CSS yang dibuat khusus para designer web. Bootstrap digunakan untuk membuat sebuah templates web atau

Lebih terperinci

Tutorial Penggunaan Twitter Bootstrap

Tutorial Penggunaan Twitter Bootstrap Tutorial Penggunaan Twitter Bootstrap Oleh: Gilang Sonar Amanu Terimakasih telah mengunjungi tutorial saya lagi, setelah tutorial sebelumnya tentang Pengenalan Twitter Bootstrap Oke.. sebelum melangkah

Lebih terperinci

Pemrograman Web Week 4. Team Teaching

Pemrograman 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 terperinci

Tutorial Membuat Layout Website Sederhana dengan HTML dan CSS

Tutorial 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 terperinci

IKG3A3 / Software Project II

IKG3A3 / Software Project II IKG3A3 / Software Project II Mahmud Imrona, M.T. Izzatul Ummah, M.T. Kelompok Keahlian Algoritma dan Komputasi LECTURE NOTE WEEK 2 1 8/25/2015 WEEK 2 HTML 2 8/25/2015 IKG3A3 - Software Project II HTML

Lebih terperinci

Membuat Duplikasi Form dengan Jquery (Dynamic Form)

Membuat 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 terperinci

WELCOME MESSAGE WE STARTED AT. 10 March 2016 dimana komunitas ini didirikan

WELCOME MESSAGE WE STARTED AT. 10 March 2016 dimana komunitas ini didirikan WELCOME MESSAGE 10 March 2016 dimana komunitas ini didirikan dari ide mahasiswa STMIK Indonesia Jakarta dan mulai mengadakan Workshop dan bimbingan pembelajaran dari tempat ke tempat dengan tujuan memajukan,

Lebih terperinci

MODUL PRAKTIKUM SISTEM TERDISTRIBUSI

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

Lebih terperinci

Publish: 7 Juni 2012 Author & Copyright: Johan Status: FREE tutorial

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

Lebih terperinci

Cara membuat HTML dasar

Cara 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 terperinci

Pendahuluan. Hal itu dimungkinkan dengan adanya framework bernama PhoneGap. PhoneGap

Pendahuluan. Hal itu dimungkinkan dengan adanya framework bernama PhoneGap. PhoneGap Pendahuluan Dahulu, membuat aplikasi mobile semacam android packege (apk) boleh dibilang sulit dan tidak praktis. Seseorang butuh kemampuan bahasa pemrograman java yang boleh jadi bukanlah bahasa yang

Lebih terperinci

4. Tambahkan dukungan untuk platform Android. Silakan masuk ke folder..\cordova\workshop\ accelerometer dan jalankan perintah:

4. Tambahkan dukungan untuk platform Android. Silakan masuk ke folder..\cordova\workshop\ accelerometer dan jalankan perintah: Menggunakan Accelerometer pada Cordova Juli 2015 Tingkat: Oleh : Feri Djuandi Pemula Menengah Mahir Accelerometer adalah sensor gerak yang mendeteksi perubahan (delta) dalam gerakan relatif terhadap posisi

Lebih terperinci

Belajar Dasar HTML 5. It s all about 4rt, not how smart you are. S u p p o r t e d b y : [ C y b e r 4 r t C r e w ]

Belajar Dasar HTML 5. It s all about 4rt, not how smart you are. S u p p o r t e d b y : [ C y b e r 4 r t C r e w ] Belajar Dasar HTML 5 S u p p o r t e d b y : [ C y b e r 4 r t C r e w ] [ H I G r o u p o n F a c e b o o k ] r00t@cyber4rt:~# It s all about 4rt, not how smart you are [ H I F a n s P a g e ] 1 1 / 2

Lebih terperinci

Persiapan. File latihan.rar diekstrak. Contoh apabila Bahan diekstrak di d:\

Persiapan. File latihan.rar diekstrak. Contoh apabila Bahan diekstrak di d:\ CSS & CSS Framework CSS Cascading Style Sheets (CSS) adalah sebuah bahasa yang digunakan untuk menampilkan style dari sebuah dokumen HTML. CSS menjelaskan bagaimana elemen HTML harus ditampilkan. Persiapan

Lebih terperinci

LAMPIRAN. A. Source Code Halaman Utama

LAMPIRAN. A. Source Code Halaman Utama A. Source Code Halaman Utama LAMPIRAN include 'config/config.php'; include 'config/statistik.php'; sa-prol

Lebih terperinci

BAB 2 TINJAUAN PUSTAKA DAN DASAR TEORI

BAB 2 TINJAUAN PUSTAKA DAN DASAR TEORI BAB 2 TINJAUAN PUSTAKA DAN DASAR TEORI 2.1 Tinjauan Pustaka Penelitian sejenis pernah dilakukan oleh Kresno Fransiscus Xaverius Dwi (2017), dengan judul Sistem Informasi Penggajian Dosen di STMIK AKAKOM

Lebih terperinci

PHP dan Framework CodeIgniter

PHP dan Framework CodeIgniter Universitas Negeri Padang PHP dan Framework CodeIgniter Yeni Septiana Pendidikan Teknik Informatika 1102640 2015 Hai All.. Kali ini kita akan membahas tentang membuat Website dengan menggunakan bahasa

Lebih terperinci

Mahasiswa memahami Pengertian, fungsi, aplikasi untuk menjalankan JavaScript, cara menjalankan kode, cara memasukkan kode JavaScript ke dalam HTML

Mahasiswa memahami Pengertian, fungsi, aplikasi untuk menjalankan JavaScript, cara menjalankan kode, cara memasukkan kode JavaScript ke dalam HTML Pengenalan JavaScript Standar Kompetensi Mahasiswa memahami Pengertian, fungsi, aplikasi untuk menjalankan JavaScript, cara menjalankan kode, cara memasukkan kode JavaScript ke dalam HTML Indikator Hasil

Lebih terperinci

Membuat Tempelate Menggunkanan Boostrap

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

Lebih terperinci

PERTEMUAN 1. Kompetensi Dasar : Menjelaskan konsep dasar dan teknologi Webpage

PERTEMUAN 1. Kompetensi Dasar : Menjelaskan konsep dasar dan teknologi Webpage PERTEMUAN 1 Kompetensi Dasar : Menjelaskan konsep dasar dan teknologi Webpage Materi yang akan dibahas : 1. Kegunaan dari dokumen dan audiens 2. Bahasa HTML 3. Struktur dasar penulisan dokumen 4. Site

Lebih terperinci

TUTORIAL CSS FRAMEWORK

TUTORIAL CSS FRAMEWORK 11/13/2014 TUTORIAL CSS FRAMEWORK NAMA : DUWI PARYANTO NIM : 12141367 MATA KULIAH : PEMROGRAMAN WEB STATIS DOSEN : WAHYU WIDODO CSS FRAMEWORK FONT AWESOME A. Pengertian Framework Sebelum mempelajari bagaimana

Lebih terperinci

LAPORAN RESMI PRAKTIKUM II WEB DESAIN PENGENALAN JAVASCRIPT

LAPORAN 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 terperinci

Membuat Responsive dan Fleksibel Image Gallery dengan JQuery Fleximage

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

Lebih terperinci

Pembuatan Website Sederhana Menggunakan HTML (Hyper Text Markup Language)

Pembuatan Website Sederhana Menggunakan HTML (Hyper Text Markup Language) Pembuatan Website Sederhana Menggunakan HTML (Hyper Text Markup Language) Oleh : Tri Wahyu Nugroho triwahyunugroho@yahoo.com maswahyu@students.ee.itb.ac.id http://s.ee.itb.ac.id/~maswahyu http://www.maswahyu.tk

Lebih terperinci

Prak. E-Bussiness & E-Commerce HTML. (HyperText Markup Language) RAHMADY LIYANTANTO liyantanto.wordpress.com

Prak. E-Bussiness & E-Commerce HTML. (HyperText Markup Language) RAHMADY LIYANTANTO liyantanto.wordpress.com Prak. E-Bussiness & E-Commerce HTML (HyperText Markup Language) RAHMADY LIYANTANTO liyantanto@gmail.com liyantanto.wordpress.com Pendahuluan HTML adalah sebuah bahasa markup yang digunakan untuk membuat

Lebih terperinci

Menggunakan Connection pada Cordova

Menggunakan Connection pada Cordova Menggunakan Connection pada Cordova Juli 2015 Tingkat: Oleh : Feri Djuandi Pemula Menengah Mahir Connection memberikan informasi tipe dari koneksi ke jaringan selular atau jaringan. Artikel kali ini akan

Lebih terperinci

Menampilkan Google Maps V3 pada halaman website

Menampilkan 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 terperinci

STMIK DIKTAT SINGKAT MACROMEDIA DREAMWEAVER 8 SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER TASIKMALAYA.

STMIK DIKTAT SINGKAT MACROMEDIA DREAMWEAVER 8 SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER TASIKMALAYA. STMIK SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER TASIKMALAYA DIKTAT SINGKAT MACROMEDIA DREAMWEAVER 8 PENDAHULUAN Dreamweaver adalah sebuah program website editor yang berfungsi untuk membuat dan

Lebih terperinci

HTML. ( HyperText Markup Language) Pertemuan 2 Oleh : Nufan Balafif. Mata Kuliah : Pemrograman Berbasis Web

HTML. ( HyperText Markup Language) Pertemuan 2 Oleh : Nufan Balafif. Mata Kuliah : Pemrograman Berbasis Web HTML ( HyperText Markup Language) Mata Kuliah : Pemrograman Berbasis Web Pertemuan 2 Oleh : Nufan Balafif html (hypertext markup language) Adalah bahasa pemrograman Web (client) yang dikhususkan untuk

Lebih terperinci

Object-Oriented Programming Sederhana Dengan PHP

Object-Oriented Programming Sederhana Dengan PHP Object-Oriented Programming Sederhana Dengan PHP Toha Abdurrozak tohaabdur@gmail.com :: http://toha.ilearning.me Abstrak Dalam perkembangan dunia komputer saat ini, kebutuhan akan software semakin meningkat,

Lebih terperinci

Materi Pertemuan 1. Pengenalan Web Design Bagian I : Dasar- dasar CSS. lilih suhaeri WATERFIRE DEV. Kelaskita.com

Materi Pertemuan 1. Pengenalan Web Design Bagian I : Dasar- dasar CSS. lilih suhaeri WATERFIRE DEV. Kelaskita.com Materi Pertemuan 1 Pengenalan Web Design Bagian I : Dasar- dasar CSS lilih suhaeri WATERFIRE DEV. Kelaskita.com Pengenalan Web Design 1. Sejarah singkat tentang website Sejak awal kelahiran website di

Lebih terperinci

Abdullah hafidh. Fakultas Ilmu Komputer, Universitas Indonesia. [Membuat Web Sederhana dengan.net FrameWork. menggunakan Microsoft Visual Studio 2008]

Abdullah 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 terperinci

BAB 2 LANDASAN TEORI

BAB 2 LANDASAN TEORI BAB 2 LANDASAN TEORI 2.1 Pengenalan HTML 2.1.1 Pengertian Dokumen HTML HTML ( Hypertext Markup Language ) adalah suatu bahasa yang digunakan untuk menulis halaman web. HTML dirancang untuk digunakan tanpa

Lebih terperinci

LAYOUT. Alat dan Bahan. Cara Kerja. Percobaan. Nama : Dwi Setiya Ningsih Kelas : PJJ D3 T1 NRP :

LAYOUT. Alat dan Bahan. Cara Kerja. Percobaan. Nama : Dwi Setiya Ningsih Kelas : PJJ D3 T1 NRP : Nama : Dwi Setiya Ningsih Kelas : PJJ D3 T1 NRP : 2103157025 LAYOUT Alat dan Bahan --- Software HTML Editor seperti Notepad++, Adobe Dreamweaver, Text Wrangler atau yang lainnya --- Bahan-bahan gambar

Lebih terperinci

Design Web Dengan 2 Kolom

Design Web Dengan 2 Kolom Design Web Dengan 2 Kolom 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 terperinci

Pengenalan JavaScript

Pengenalan 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 terperinci

Membuat Plugin jquery (Part 2)

Membuat Plugin jquery (Part 2) Membuat Plugin jquery (Part 2) Oleh: muhamad iqbal ini adalah bagian kedua dari seri membuat plugin jquery, hal yang dibahas mengenai pembuatan plugin yang dapat dipakai untuk aplikasi sesungguhnya dan

Lebih terperinci

C. Ms Powerpoint D. Notepad E. Ms Acces

C. Ms Powerpoint D. Notepad E. Ms Acces 1. Apakah kepanjangan dari HTML? A. Hyper Text Mark Up Language B. Hyper Text Mark Language C. Hight Text Mark Up Language D. Hight Text Mark Language 2. Berikut ini adalah termasuk Software Browser, Kecuali:

Lebih terperinci

Pemrograman Web WEEK 03 HTML LANJUT

Pemrograman 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 terperinci

Menampilkan Battery Status pada Cordova

Menampilkan Battery Status pada Cordova Menampilkan Battery Status pada Cordova Juli 2015 Tingkat: Oleh : Feri Djuandi Pemula Menengah Mahir Artikel kali ini akan menjelaskan cara menampilkan status baterai (battery status) pada perangkat mobile

Lebih terperinci

Belajar Membuat Blog Wordpress Secara Offline dengan XAMPP Server

Belajar Membuat Blog Wordpress Secara Offline dengan XAMPP Server Belajar Membuat Blog Wordpress Secara Offline dengan XAMPP Server Pada kesempatan ini saya akan membahas mengenai cara belajar membuat blog wordpress secara offline (tanpa tersambung ke internet) dengan

Lebih terperinci

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

Membuat Plugin jquery (Part 1)

Membuat 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 terperinci

Pemrograman Web PRAKTIKUM 6. Query Data 2. TUJUAN BELAJAR Mahasiswa dapat menggunakan PHP dan MySQL untuk mengupdate data

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

Lebih terperinci

Mengelola isi halaman web. Memeriksa informasi untuk relevansi dan currency

Mengelola isi halaman web. Memeriksa informasi untuk relevansi dan currency Mengelola isi halaman web Memeriksa informasi untuk Software Web Design Software web design merupakan perangkat lunak yang berguna untuk membangun/membuat/mendisain halaman-halaman web, baik yang bersifat

Lebih terperinci

Cara Membuat website dengan Dreamweaver

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

Lebih terperinci

MENAMPILKAN GOOGLE MAPS DI WEB BROWSER DENGAN HTML5

MENAMPILKAN 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 terperinci

Responsive Layout dengan Bootstrap [Part 2]

Responsive 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 terperinci

Membuat Template dengan Bootstrap pada Codeigniter

Membuat Template dengan Bootstrap pada Codeigniter Membuat Template dengan Bootstrap pada Codeigniter Pepen Aandrian Syah pepenaan@gmail.com Abstrak Bootstrap adalah suatu Framework yang digunakan untuk membuat tampilan / desain suatu halaman website.

Lebih terperinci

Penangkapan Sinyal Radio dan Cara Penyebarannya Lewat Broadcasting Internet

Penangkapan Sinyal Radio dan Cara Penyebarannya Lewat Broadcasting Internet Penangkapan Sinyal Radio dan Cara Penyebarannya Lewat Broadcasting Internet Laporan ini disusun oleh: Muhammad Anis Rizky Maulana Nugraha 1 PENDAHULUAN Radio saat ini masih menjadi salah satu media hiburan

Lebih terperinci

SImple Pop-Up Modal dengan CSS3 dan Jquery

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

Lebih terperinci

Pemrograman Basis Data Berbasis Web

Pemrograman 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 terperinci

MEMBUAT WEBSITE SEDERHANA DENGAN HTML 5

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,

Lebih terperinci

Nama: ahmad edi purwanto. Nim: Tugas uts web statis. Tutorial cara penggunaan suatu framework CSS

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

Lebih terperinci

7 Cara Mempercantik Tampilan Blog

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

Basic jquery Menyentuh jquery sekarang juga

Basic jquery Menyentuh jquery sekarang juga Basic jquery Menyentuh jquery sekarang juga JQuery merupakan suatu framework (library) Javascript yang menekankan bagaimana interaksi antara Javascript dan HTML yanwar 11/8/2013 Apa sih jquery? 2 Kenapa

Lebih terperinci

Plugin Javascript Bootstrap 2

Plugin Javascript Bootstrap 2 Plugin Javascript Bootstrap 2 Oleh: ricky orlando napitupulu Salam bro/sis :) Setelah sebelumnya saya memberikan tutorial tentang plugin JS jquery yang super keren. Nah kini saya tambahin lagi lanjutanya.

Lebih terperinci

MODUL 13 INTERKONEKSI CLIENT-SERVER JQUERY

MODUL 13 INTERKONEKSI CLIENT-SERVER JQUERY MODUL 13 INTERKONEKSI CLIENT-SERVER JQUERY A. Tujuan : 1. Memahami pembuatan user interface 2. Memahami transmisi data pada user interface 3. Memahami passing parameter dalam koneksi client-server B. Dasar

Lebih terperinci

PRAKTIKUM PEMROGRAMAN WEB MODUL 7 TWITTER BOOTSTRAP

PRAKTIKUM PEMROGRAMAN WEB MODUL 7 TWITTER BOOTSTRAP PRAKTIKUM PEMROGRAMAN WEB MODUL 7 TWITTER BOOTSTRAP Disusun oleh: (Nama) (NIM) PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH JEMBER 2015 Modul 7 Twitter Bootstrap I. Tujuan:

Lebih terperinci

Panduan Web Desain Menggunakan Editor Macromedia Dreamweaver 8

Panduan Web Desain Menggunakan Editor Macromedia Dreamweaver 8 Panduan Web Desain Menggunakan Editor Macromedia Dreamweaver 8 Oleh Angga Radhitya Rachmat, S.Kom radhizu05@gmail.com 0882 6801 9510 0819 5724 1619 KATA PENGANTAR Puji syukur penulis panjatkan kehadirat

Lebih terperinci