Jendela Ilmu Informatika: Web Programming

Showing posts with label Web Programming. Show all posts

Sunday, June 26, 2016

Bootstrap Features

9:47 PM

a. Typography

Typography akan membuat tampilan teks pada halaman web menjadi rapi, mudah dibaca, dan nyaman dilihat dengan menggunakan font dan ukuran huruf tertentu. Terdapat banyak class yang telah disediakan dalam fitur-fitur Typography Bootstrap. Contohnya adalah sebagai berikut:

Nama Class	Keterangan atau Fungsi
.lead	Untuk teks stand out
.small	Untuk teks kecil
.text-left	Untuk teks align kiri / rata kiri
.text-center	Untuk teks align tengah / rata tengah
.text-right	Untuk teks align Kenan / rata kanan
.text-justify	Untuk teks justify / rata kanan kiri
.text-nowrap	Untuk teks no wrap / tanpa enter
.text-lowercase	Untuk teks huruf kecil semua
.text-uppercase	Untuk teks huruf besar semua
.text-capitalize	Untuk teks capital / huruf depannya besar semua
.list-unstyled	Untuk me remove list untuk tag <ul> atau <ol> seperti list-style dsb
.list-inline	Untuk list agar berada pada satu baris

b. Table

HTML tables digunakan untuk mempresentasikan data dengan metode grid seperti baris dan kolom. Dengan menggunakan Bootstrap, tampilan tabel dapat diimprovisasi dengan cara yang simpel dengan gaya yang lebih baik.

Pada konsepnya pembuatan tabel menggunakan framework bootstrap sama seperti membuat tabel pada html dengan hanya menambahkan class pada tag <table> yaitu class tabel. Contoh penggunaaannya dapat dilihat pada source code berikut ini:

<thead>

<tr>

<th>First Name</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>Carter</td>

<td>johncarter@mail.com</td>

</tr>

<tr>

<td>Peter</td>

<td>Parker</td>

<td>peterparker@mail.com</td>

</tr>

<tr>

<td>Rambo</td>

<td>johnrambo@mail.com</td>

</tr>

</tbody>

</table>

Maka hasilnya adalah sebagai berikut:

c. Images

Gambar atau image sering sekali ditemukan pada disain web modern. sehingga mempercantik gambar dan mengatur atau menempatkan gambar tersebut secara benar pada halaman web sangat penting untuk meningkatkan kepuasan atau pengalaman user dalam mengakses halaman website.

berikut ini adalah jenis-jenis improvisasi tampilan gambar yang disediakan pada framework Bootstraps dan cara pemanggilannya.

Terdapat 3 styles yang disediakan Bootstrap yaitu Rounded Images, Circle Image, dan Thumbnails images. Contoh hasilnya dapat dilihat pada gambar beikut ini:

d. Button

Komponen buttons yang disediakan memiliki banyak tema warna yang menarik. Button di bootstrap ada beberapa gaya yang siap kita gunakan, di antaranya adalah sbb:

Berikut ini adalah contoh implementasi button menggunakan Bootstrap.

<button type="button" class="btn btn-default"> Default</button>

<button type="button" class="btn btn-primary"> Primary</button>

<button type="button" class="btn btn-success"> Success</button>

<button type="button" class="btn btn-warning"> Warning</button>

<button type="button" class="btn btn-danger"> Danger</button>

e. Progress-bar

Komponen Progress Bar dapat digunakan untuk menampilkan kemajuan proses secara up to date. Implementasinya adalah sebagai berikut:

<div class="progress-bar progress-bar-success"

role="progressbar" aria-valuenow="40" aria-valuemin="0"

aria-valuemax="100" style="width:40%"> 40% Complete (success)

</div>

<div class="progress-bar progress-bar-info"

role="progressbar" aria-valuenow="50" aria-valuemin="0"

aria-valuemax="100" style="width:50%"> 50% Complete (info)

</div>

<div class="progress-bar progress-bar-warning"

role="progressbar" aria-valuenow="60" aria-valuemin="0"

aria-valuemax="100" style="width:60%"> 60% Complete (warning)

</div>

<div class="progress-bar progress-bar-danger"

role="progressbar" aria-valuenow="70" aria-valuemin="0"

aria-valuemax="100" style="width:70%"> 70% Complete (danger)

</div>

Hasilnya akan seperti ini:

f. Alerts

Komponen Alerts dirancang untuk menampilkan tanda atau peringatan tertentu pada halaman web dengan banyak pilihan tema warna. Implementasinya adalah sebagai berikut:

Berita 1

Anda berhasil !

</div>

<br/>

Berita 2

Anda bisa 2 !

</div>

<br/>

</div>

Hasilnya adalah sebagai berikut ini:

g. Form

Sama halnya dengan form pada HTML biasa dalam membuat formulir inputan pada halaman web, namun Bootstrap memberikan tampilan yang lebih cantik. berikut ini adalah contoh implementasi Form menggunakan bootstrap:

<form>

</div>

<label for="alamat">Alamat anda:</label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

</div>

Dan hasilnya akan seperti ini:

h. Icons

Bootstrap versi 3.3.6 terdiri lebih dari 250 Glyphicons. Pada versi ini juga tersedia untuk font-format untuk usability dan scalability yang lebih baik. Berikut ini adalah beberapada Glyphicons yang dapat digunakan pada bootstrap. Untuk merubah warna pada icon anda dapat memberikan style apada properti style pada tag icon yang akan digunakan.

Untuk menggunakan bootstrap icon, anda hanya perlu menggunakan tag <span> dan menambahkan atribut untuk pemanggilan class. Contoh syntaxnya dapat dilihat pada contoh berikut ini.

Dimana glyphicon-class-name adalah nama spesifik class untuk icon (misalnya glyphicon-search, glyphicon-user, glyphicon-star etc.) yang didefinisakan pada file cootstrap.css.

Sebagai contoh anda dapat melihat penggunakan icon search di bawah ini:

<!DOCTYPE html>

<head>

<title>Heading - Labels</title>

</head>

<body>

<form>

<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span> Search</button>

<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> Search</button>

</form>

</div>

</body>

</html>

Dan hasil outputnya adalah sebagai berikut ini:

Tuesday, June 21, 2016

Sistem Bilangan dan Konversinya

9:25 AM

Bilangan Biner

Sistem bilangan biner berbasis-2, menggunakan digit biner (bit) yaitu 0 dan 1, istilah bit dipakai dalam sistem bilangan biner singkatan dari binary digit. Byte adalah string yang terdiri dari 8 bit, bilangan biner 101 mempunyai persamaan decimal :

2²x 1 + 2¹ x 1 = 4 + 0 + 1 = 5

Sandi Biner

Sandi biner dibentuk dari n bit dengan 2ⁿ kemungkinan cara menyusun bit yang berlainan (2ⁿ kombinasi)

• Sandi binary code decimal (BCD)

• Sandi Excess (XS-3)

• Sandi 8, 4, -2, -1

• Sandi Gray

• Sandi alfanumerik

Sandi Binary Code Decimal (BCD)

Sandi Binary Code Decimal (BCD) menggunakan prinsip 4 bit biner untuk merepresentasikan satu digit desimal.

• Kelebihan : konversinya lebih mudah dan sering digunakan pada aplikasi antarmuka.

• Kekurangannya : penggunaan bit yang boros karena hanya 4 bit saja yang digunakan untuk menunjukkan 16 nilai yang berbeda, tapi hanya 10 nilai saja yang digunakan.

Jenis-jenis sandi BCD

• 8421 BCD

• 4221 BCD

• 5421 BCD

Misalkan menggunakan 4221 BCD jika ingin menampilkan angka 7 maka nilai binernya adalah 1101₂ atau 1011₂, namun jika menggunakan 8421 BCD maka nilai binernya 0111₂.

Sandi Binary Coded Decimal (BCD)

• Konversi nilai desimal ke BCD untuk 171,625

1 7 1 , 6 2 5

0001 0111 0001 , 0110 0010 0101

• Konversi BCD ke desimal untuk 00101001,01001000

0010 1001 , 0100 1000

2 9 , 4 8

Sandi Excess 3 (XS-3)

Sandi Excess 3 (XS-3) adalah kelebihan tiga diperoleh dari nilai binernya ditambah tiga.

Nilai yang dicari excess-3 : 2 3

Nilai yang ditambahkan +3 +3

Hasil dari excess-3 5 6

Nilai biner yang dibentuk =0101 =0110

Nilai dari sandi excess-3 untuk nilai desimal 23 adalah 01010110₂.

Sandi 8, 4, -2, -1

Sandi 8, 4, -2, -1 mirip dengan sandi BCD, hanya nilai yang digunakan terdapat bobot negatifnya.

Nilai 0110₂ untuk sandi 8, 4, -2, -1

01102 = 0x8 + 1x4 + 1x (-2) + 0x(-1)

= 4 – 2 = 2

Sandi Gray

Sandi Gray hanya 1 bit saja yang berubah dalam dua kode yang berurutan, setengah bagian atas (kode desimal 5 - 9) merupakan bayangan cermin dari setengah bagian bawah (kode desimal 0 - 4) kecuali untuk bit ke-4 dari kanan (bersifat reflektif). Sandi ini sering diaplikasikan dalam industri kendali dan implementasi urutan pada finite state machine (FSM).

Tahapan konversi biner ke sandi Gray

• Mulai dengan bit MSB biner. MSB sandi Gray sama dengan MSB biner,

• Bit kedua yang terdekat ke MSB pada sandi Gray diperoleh dengan menambahkan MSB dan MSB kedua dari biner dengan mengabaikan bawaannya,

• Bit ketiga MSB pada sandi Gray dengan menambahkan MSB kedua dan ketiga pada biner dengan mengabaikan bawaannya,

• Proses ini berlanjut hingga didapatkan LSB untuk sandi Gray.

Tahapan konversi sandi Gray ke biner

• Mulai dengan bit MSB. MSB biner sama dengan MSB untuk sandi Gray,

• Bit kedua yang dekat ke MSB pada biner didapat dengan menambahkan MSB biner dan MSB kedua dari sandi Gray dengan mengabaikan bawaannya,

• Bit ketiga MSB pada biner dengan menambahkan MSB kedua biner dan ketiga pada sandi Gray dengan mengabaikan bawaannya.

• Proses ini berlanjut sampai didapatkan LSB biner.

Tahapan konversi Desimal – Biner - sandi Gray

Tabel konversi desimal - biner - sand grayi

Bilangan Oktal

Sistem bilangan oktal jarang digunakan dalam representasi sinyal digital, namun beberapa referensi ada yang menuliskannya. Bilangan oktal tidak begitu familiar, namun bisa digunakan dalam bentuk konversinya.

Sistem bilangan oktal berbasis-8, penulisan notasi ini dituliskan misal sebagai 734₈ atau 734_oktal. Konversi nilai oktal ke dalam bentuk biner lebih mudah karena hanya mengambil tiga digit saja dari bilangan biner kemudian mengkonversinya menjadi desimal.

Contoh :

734₈ konversi binernya menjadi 1110111002

hasil konversinya 111₂ = 7

011₂ = 3

100₂ = 4

Nilai konversi desimal ke oktal dilakukan dengan cara membagi nilai desimal dengan 8

Bilangan Desimal

Sistem bilangan desimal berbasis angka 10

Posisi paling tidak berarti (paling kanan) memiliki sebuah bobot faktor berbasis 10-n, dan posisi paling berarti (paling kiri) memiliki bobot faktor 10n

Penulisan notasinya : 10ⁿ, ..., 10³, 10², 10¹, 10⁰, 10^-1, 10^-2, 10^-3, ..., 10^-n

Bilangan Desimal direpresentasikan sebagai berikut:

581 = 5 x 100 + 8 x 10 + 1 x 1

atau dituliskan dalam ranah bilangan 10 sebagai,

581 = 5x10² + 8x10¹ + 1x10⁰ = 500 + 80 +1

Bilangan desimal dan biner menggunakan sistem pembobotan posisional, yaitu:

1010₂ = 1x2³ + 0x2² + 1x2¹ + 0x2⁰

= 1x8 + 0x4 + 1x2 + 0x1

= 10₁₀

Konversi Desimal ke Biner

Nilai biner disusun dari most significant bit (MSB) menuju least significant bit (LSB)

Bilangan Heksadesimal

Bilangan yang sering digunakan dalam representasi bilangan dalam aplikasi sistem digital dan penulisan kode program.

Sistem bilangan heksadesimal berbasis-16

Notasinya 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E dan F.

Konversi nilai heksadesimal ke dalam bentuk biner lebih mudah karena hanya mengambil 4 digit saja dari bilangan biner kemudian mengkonversinya menjadi desimal.

Contoh :

734₁₆ konversi binernya menjadi 11100110100₂

hasil konversinya 0111₂ = 7

0011₂ = 3

0100₂ = 4

Nilai konversi desimal ke heksadesimal dilakukan dengan cara membagi nilai desimal dengan angka 16.

Nilai heksadesimal dikonversi menjadi nilai biner untuk mendapatkan nilai desimal, contoh 10011₂ maka nilai heksadesimalnya adalah 13₁₆, nilai desimalnya :

1x2⁴ + 0x2³ + 0x2² + 1x2¹ + 1x2⁰

1x16 + 0x8 + 0x4 + 1x2 + 1x1

16 + 0 + 0 + 2 + 1 = 19

Konversi nilai heksadesimal menjadi nilai desimal

1DC16 = 1x162 + Dx161 + Cx160

= 1x162 + 13x161 + 12x160

= 256 + 208 + 12

= 476

Sandi Alfanumerik

• Sandi alfanumerik digunakan untuk mengolah data yang berupa huruf, tanda baca, dan karakter lain.

• American Standard Code for Informat Interchange (ASCII)

• Extended Binary Codec Decimal Interchange Code (EBCDIC).

Sandi ASCII

• Sandi ASCII (American Standard Code for Informat Interchange) merupakan sandi 7 bit

• Jumlah sandi ASCII sebanyak 27 = 128 sandi

• Sandi ini sering diaplikasikan dalam dekoder untuk membuat tampilan pada liquid crystal display (LCD) atau tampilan yang lainnya.

Sandi EBCDIC

Sandi EBCDIC (Extended Binary Codec Decimal Interchange Code) merupakan sandi 8 bit yang diaplikasikan pada sistem komputer untuk saling bertukar informasi.

Monday, June 20, 2016

Konsep Dasar Framework CSS Bootstrap

7:57 AM

1. Sejarah dan Pengertian

Bootstrap digambarkan sebagai CSS sederhana namun dibangun dengan pre-processor yang menyediakan lebih banyak daya dan fleksibilitas ketimbang CSS standar. Awalnya dirilis pada Jumat, 19 Agustus, 2011, dan sudah memiliki lebih dari 20 produk release termasuk yang terbesar adalah versi -2 dan versi-3. Hadirnya Bootstrap 2, maka fungsionalitas responsif terhadap seluruh kerangka sebagai stylesheet opsional telah di tambahkan dan pada Bootstrap 3, maka responsif secara default telah ditambahkan untuk pendekatan pertamanya terhadap ponsel.

Bootstrap merupakan sebuah framework yang dikembangkan oleh tim Twitter yang berfungsi sebagai kerangka kerja untuk memudahkan dan mempercepat dalam membuat tampilan website yang responsive dan terstandar. Bootstrap menyediakan komponen-komponen antarmuka siap pakai yang telah dirancang sedemikian rupa untuk digunakan dalam membuat tampilan halaman website responsive. Bootstrap juga menyediakan sarana untuk membuat layout halaman web dengan mudah dan rapi yaitu menggunakan grid system 12 kolom. Bootstrap dibangun dengan teknologi HTML, CSS dan Javascript yang dapat membuat layout halaman website, table, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi class dalam berkas HTML.

2. Keunggulan Penggunaan Bootstrap

Berikut ini adalah beberapa keunggulan atau kelebihan menggunakan WRD Bootstrap:

a) Waktu pembuatan yang lebih cepat : Karena elemen-elemen yang biasa ada dalam sebuah website pada umumnya sudah dibuatkan class-nya oleh Bootstrap ini, jadi kita tinggal memanggilnya dalam theme.

b) Template yang menggunakan Bootstrap lebih rapi : Mungkin ini akan sedikit relatif, karena kebiasaan masing-masing developer membuat coding pasti berbeda-beda. Namun pada dasarnya, karena bootstrap sudah terstruktur, untuk modifikasi class dan penambahan class memang sebaiknya mempertahankan kerapihan code yang sudahada lebih dulu.

c) Template yang menggunakan Bootstrap lebih ringan.

3. Struktur Bootstrap

Struktur bootstrap tersebut dapat digambarkan sebagai berikut :

Berikut adalah beberapa fitur untuk layout website yang disediakan oleh bootstrap :

a) Scaffoling : Bagian yang mengatur background, link styles, grid system, dan two simple layouts

b) Base CSS : Bagian yang mengatur tampilan elemen HTML seperti typography, code, table, form, dan button. Termasuk Glyphicons, sebuah kumpulan ikon-ikon kecil.

c) Components : Bagian yang mengatur tampilan component, seperti tab, navbar, alerts, page headers, dst.

d) Javascript Plugins: Menyediakan beberapa component interaktif, seperti tooltips, popovers, modals, dan seterusnya.

4. Grid System

Grid System dalam sebuah desain web adalah sebuah cara atau metode pembagian kolom di sebuah halaman web dengan menggunakan class. Pembagian kolom ini dimaksudkan agar web menjadi responsive. Grid System menggunakan system grid 12 kolom yang akan memudahkan dalam melayout sebuah halaman web, berikut contoh grid system bootstrap.

Bootstrap Grid System menyediakan cara cepat dan mudah untuk membuat layoutlayout website responsif. Misalnya untuk membuat kolom atau grid kecil seperti cellphones dan lainnya, kita dapat menggunakan class .col-xs-*. Sedangkan class col-sm-* biasanya digunakan untuk device yang berukuran kecil seperti tablet. Class col-md-* dapat digunakan untuk device yang berukuran sedang atau medium. Untuk lebih jelasnya dapat dilihat pada tabel berikut ini:

5. Bootstrap Features

a. Typography

b. Table

c. Images

Gambar atau image sering sekali ditemukan pada disain web modern. Sehingga mempercantik gambar dan mengatur atau menempatkan gambar tersebut secara benar pada halaman web sangat penting untuk meningkatkan kepuasan atau pengalaman user dalam mengakses halaman website.

d. Button

Komponen buttons yang disediakan memiliki banyak tema warna yang menarik.

e. Progress-bar

Komponen Progress Bar dapat digunakan untuk menampilkan kemajuan proses secara up to date.

f. Alerts

Komponen Alerts dirancang untuk menampilkan tanda atau peringatan tertentu pada halaman web dengan banyak pilihan tema warna.

g. Form

Sama halnya dengan form pada HTML biasa dalam membuat formulir inputan pada halaman web, namun Bootstrap memberikan tampilan yang lebih cantik.

h. Icons

Bootstrap versi 3.3.6 terdiri lebih dari 250 Glyphicons. Pada versi ini juga tersedia untuk font-format untuk usability dan scalability yang lebih baik.

Baca juga artikel Bootstrap Features

Cara Penempatan CSS dalam HTML

3:09 AM

Menempatkan style CSS dalam dokumen yang dibuat dalam bahasa HTML dapat dilakukan dalam beberapa cara dan tingkatan yang berbeda sesuai dengan keinginan. Cara penempatan dalam HTML adalah dengan menggunakan beberapa cara, diantaranya menggunakan Inline Style, Internal Style, External Style, dan juga teknik Importing dengan Internal Style.

a. Inline Style

CSS yang dibuat dalam sebuah tag HTML yang hanya berlaku untuk dokumen yang diapitnya saja. Biasanya teknik ini digunakan pada pemformatan khusus pada sebuah elemen HTML dan tidak digunakan untuk memformat seluruh dokumen web. Contohnya adalah sebagai berikut :

<!DOCTYPE html>

<html>

<head>

<title>Inline Style</title>

</head>

<body>

<font style=’arial; font-family:Arial; font-

size:20px;background-color:yellow’>Penerapan Inline

Style</font>

</body>

</html>

Dalam script di atas dapat diketahui bahwa style tersebut memiliki nama style arial yang memiliki nilai atau value untuk style tersebut. Dari script di atas dapat dilihat tampilan dalam browser seperti pada Gambar berikut ini.

b. Internal Style

Pada teknik ini style diletakkan pada tengah tag antara tag <head> dan </head>. Aturan-aturan dalam style ini diatur sedemikian rupa untuk digunakan pada suatu tempat maupun untuk keseluruhan situs. Perhatikan contoh berikut :

<!DOCTYPE html>

<html>

<head>

<title>Internal Style</title>

<style>

body {background-color:lightgrey;}

h1 {color:blue;}

p {color:green;}

</style>

</head>

<body>

<h1>Ini adalah Style Heading 1 yang sudah diubah</h1>

<p> Ini adalah Style Paragrap yang sudah diubah </p>

</body>

</html>

Maksud dari script di atas adalah mengatur style pada elemen body dengan warna latar belakang abu-abu muda, <h1> dengan warna biru, dan tag <p> dengan warna hijau. Hasil script di atas dalam browser dapat dilihat di bawah ini.

c. Imported Style

Dengan teknik ini sebuah style tidak disimpan pada halaman tersebut. Namun untuk menghubungkannya dengan halaman web yang dibuat, demgam menggunakan import yang terdapat pada style CSS. Perhatikan contoh berikut :

<!DOCTYPE html>

<html>

<head>

<title>Import Style</title>

@import url(http://www.namasitus.com/global.css);

</style>

</head>

<body>

<div class=blog>Penerapan Import Style</div>

</body>

</html>

Dari script di atas, dokumen HTML akan mengambil atau meng-import style CSS untuk dalam dokumen tersebut. Dimana pada contoh di atas dokumen akan mengimpor file style dengan nama global yang berekstensi .css pada alamat url http://www.namasitus.com dengan menggunakan perintah berikut :

@import url(http://www.namasitus.com/global.css);

d. Eksternal Style

Dengan menggunakan teknik ini, dapat memanggil CSS style pada file CSS yang diinginkan menggunakan perintah “Link rel” yang berfungsi untuk menghubungkan ke dalam sebuah CSS style eksternal dengan nama yang telah ditentukan. Perhatikan contoh berikut :

Pada contoh di atas menghubungkan sebuah dokumen HTML dengan sebuah eksternal style dengan nama default.css yang telah dibuat sedemikian rupa sehingga style tersebut dihubungkan untuk memformat tampilan dalam dokumen HTML tersebut.

Dalam mengimpor file CSS, dapat langsung mengimpor beberapa file CSS sekaligus dalam sebuah dokumen agar memperkaya tampilan dokumen. Perhatikan contoh berikut :

Atau dapat menggunakan perintah :

<style>

@import url(default1.css);

@import url(default2.css);

@import url(default3.css);

</style>

Jendela Ilmu Informatika

Sunday, June 26, 2016

Bootstrap Features

Tuesday, June 21, 2016

Sistem Bilangan dan Konversinya

Monday, June 20, 2016

Konsep Dasar Framework CSS Bootstrap

Cara Penempatan CSS dalam HTML

Kategori

Popular Post