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
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
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.
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
Baca juga artikel Bootstrap Features
Cara Penempatan CSS dalam HTML
3:09 AM
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>
<style type=”text/css”>
@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 :
<link
rel=”stylesheet” type=”text/css” href=”default.css”>
|
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 :
<link
rel=”stylesheet” type=”text/css” href=”default1.css”>
<link
rel=”stylesheet” type=”text/css” href=”default2.css”>
<link
rel=”stylesheet” type=”text/css” href=”default3.css”>
|
Atau dapat menggunakan perintah :
<style>
@import
url(default1.css);
@import
url(default2.css);
@import
url(default3.css);
</style>
|
Konsep Dasar Switching dan Konfigurasi
1:55 AM
Konsep Dasar Switching dan
Konfigurasi
Dasar Switch Configuration
Switch Boot
Sequence
Dalam rangka mencari image IOS yang
cocok, switch melakukan langkah-langkah sebagai berikut:
1. Mencoba booting secara otomatis
dengan menggunakan informasi dalam variabel lingkungan BOOT.
2. Jika variabel ini tidak diatur,
switch melakukan pencarian dari atas-ke-bawah di file sistem flash. Sistem akan
memuat dan menjalankan file executable pertama yang ditemukan.
3. Sistem operasi IOS kemudian
menginisialisasi interface menggunakan perintah Cisco IOS yang ditemukan dalam
file konfigurasi, konfigurasi startup, yang disimpan di NVRAM.
Note: Perintah boot system dapat
digunakan untuk mengatur
variabel dilingkungan BOOT.
Memulihkan
Sistem dari Crash
1. Boot loader juga dapat digunakan
untuk mengelola switch jika IOS tidak dapat dimuat.
2. Boot loader dapat diakses melalui
koneksi konsol dengan:
• Hubungkan PC dengan kabel konsol
ke port konsol switch. Cabut kabel listrik switch.
• Colokkan kembali kabel listrik,
tekan dan tahan tombol Mode.
• Sistem LED akan menyala kuning
sebentar dan kemudian hijau solid. Lepaskan tombol Mode.
3. Boot loader switch:prompt akan
muncul di software terminal emulasi pada PC.
Indikator
Switch LED
1. Setiap port pada Cisco switch
Catalyst memiliki status LED lampu indikator.
2. Secara default lampu LED mencerminkan
aktivitas port tetapi mereka juga dapat memberikan informasi lain tentang
switch melalui tombol Mode.
3. Berikut mode yang tersedia pada
Cisco Catalyst 2960 switch:
System LED
Redundant Power System (RPS) LED
Port Status LED
Port Duplex LED
Port Speed LED
Power over Ethernet (PoE) Mode LED
Switch LED
Indicators
• Cisco Catalyst 2960 switch modes.
Mempersiapkan
Manajemen Dasar Switch
1. Untuk mengatur switch Cisco dari
jarak jauh, maka switch perlu dikonfigurasi untuk dapat diakses dari jaringan.
2. Memasukkan alamat IP dan subnet
mask.
3. Jika pengelolaan switch dari
jaringan luar (jarak jauh), default gateway juga harus dikonfigurasi.
4. Informasi IP (address, subnet mask,
gateway) yang akan di masukkan ke switch SVI (switch virtual interface).
5. Meskipun pengaturan IP ini
memungkinkan manajemen remote dan remote akses ke switch, Namun tetap tidak mengizinkan
switch mengirimkan paket Layer 3.
Mempersiapkan
Manajemen Dasar Switch
Komunikasi
Duplex
Konfigurasi
Switch Ports di Physical Layer
Fitur
Auto-MDIX
1. Jenis kabel seperti
straight-through atau crossover dapat digunakan saat menghubungkan perangkat.
2. The automatic medium-dependent
interface crossover (auto-MDIX), fitur ini akan menghilangkan keruwetan kebutuhan
terhadap straight-through atau crossover.
3. Ketika auto-MDIX diaktifkan,
interface secara otomatis mendeteksi dan mengkonfigurasi sambungan yang tepat.
4. Bila menggunakan auto-MDIX pada
sebuah interface, kecepatan interface dan duplex harus di set ke auto.
Fitur
Auto-MDIX
Fitur
Auto-MDIX
Verifikasi
Konfigurasi Switch Port
Network
Access Layer Issues
Network
Access Layer Issues
• Troubleshooting Switch Media
(connection) issues.
Network
Access Layer Issues
• Troubleshooting Interface-related
issues.
SSH
Operation
• Secure Shell (SSH) adalah sebuah
protokol yang menyediakan baris perintah koneksi yang aman
(terenkripsi) berbasis perangkat
remote.
• SSH umumnya digunakan dalam sistem
berbasis UNIX.
• Cisco IOS juga mendukung SSH.
• Sebuah versi dari perangkat lunak
IOS termasuk kriptografi (dienkripsi) fitur dan kemampuan yang diperlukan untuk
mengaktifkan SSH pada switch Catalyst 2960.
• Karena fitur enkripsi yang kuat,
SSH harus mengganti Telnet untuk koneksi manajemen.
• SSH menggunakan TCP port 22 secara
default. Telnet menggunakan port TCP 23.
MAC Address
Flooding
• Switch otomatis mengisi tabel CAM
dengan melihat lalu lintas data memasuki port mereka.
• Switch akan meneruskan lalu lintas
data tsb melalui semua port jika tidak dapat menemukan tujuan MAC dalam tabel
CAM nya.
• Dalam keadaan seperti itu, switch
bertindak sebagai hub. Lalu lintas Unicast dapat dilihat oleh semua perangkat
yang terhubung ke switch.
• Seorang penyerang bisa
mengeksploitasi perilaku ini untuk mendapatkan akses ke lalu lintas biasanya dikendalikan
oleh switch dengan menggunakan PC untuk menjalankan MAC flooding tool.
MAC Address
Flooding
• Alat tersebut adalah program yang
dibuat untuk menghasilkan dan mengirimkan frame dengan sumber alamat MAC palsu
ke port switch.
• Sebagai frame ini mencapai switch,
ia menambahkan alamat MAC palsu ke meja CAM, mengambil catatan dari port frame
tiba.
• Akhirnya table CAM diisi dengan
alamat MAC palsu.
• Tabel CAM kini tidak memiliki ruang
untuk perangkat legit yang hadir dalam jaringan dan karena itu tidak akan
pernah menemukan alamat MAC mereka dalam tabel CAM.
• Semua frame sekarang diteruskan ke
semua port, yang memungkinkan penyerang untuk mengakses lalu lintas ke host
lain.
MAC Address
Flooding
• Attacker membanjiri CAM table dengan
entri palsu.
MAC Address
Flooding (membanjiri)
• Switch sekarang
berperilaku/mempunyai fungsi seperti
Hub.
DHCP
Spoofing (penipu)
1. DHCP adalah protokol jaringan yang
digunakan untuk menetapkan informasi IP secara otomatis.
2. 2 tipe DHCP attacks are:
• DHCP spoofing (penipu)
• DHCP starvation (kelaparan)
3. Dalam serangan DHCP spoofing,
server DHCP palsu ditempatkan dalam jaringan untuk mengeluarkan alamat DHCP
bagi klien.
4. DHCP starvation sering digunakan
sebelum serangan DHCP spoofing untuk menolak layanan ke server DHCP yang sah.
DHCP
Spoofing
• DHCP Spoof Attack.
1)Sebuah kegiatan penyerang server DHCP
pada segmen jaringan.
2)Klien menyiarkan permintaan untuk informasi
konfigurasi DHCP.
3)Server DHCP nakal merespon sebelum
server DHCP yang sah dapat merespon, menetapkan informasi konfigurasi IP penyerangdidefinisikan.
4)Paket host diarahkan ke alamat
penyerang karena mengemulasi gateway default untuk alamat DHCP yang keliru
diberikan kepada klien.
Memanfaatkan
CDP
• CDP adalah protokol khusus di layer
2 pada perangkat Cisco yang digunakan untuk menemukan perangkat Cisco lain yang
terhubung langsung.
• Protokol ini dirancang untuk
memungkinkan perangkat melakukan auto-configure koneksi mereka.
• Jika penyerang mendengarkan pesan
CDP, maka ia bisa mempelajari informasi penting seperti model perangkat, versi
perangkat lunak yang berjalan.
• Cisco merekomendasikan
menonaktifkan CDP saat tidak digunakan.
Memanfaatkan
Telnet
• Seperti telah disebutkan, bahwa
protokol Telnet tidak aman dan harus diganti dengan SSH.
• Meskipun penyerang dapat
menggunakan Telnet sebagai bagian dari serangan lainnya.
• Dua dari serangan ini adalah Brute
Force Password Attack dan Telnet DOS Attack.
• Ketika password tidak dapat
ditangkap, penyerang mungkin akan mencoba banyak kombinasi karakter. Upaya ini
untuk menebak password ini dikenal sebagai serangan brute force password.
• Telnet dapat digunakan untuk
menguji password yang digunakan oleh sistem.
• Dalam serangan DoS Telnet, attacker
mengeksploitasi kekurangan dalam Telnet software server yang berjalan pada
switch yang membuat layanan Telnet tidak tersedia.
• Ini semacam serangan untuk mencegah
administrator dari jarak jauh mengakses fungsi manajemen switch.
• Hal ini dapat dikombinasikan dengan
serangan langsung lain pada jaringan, sebagai bagian dari upaya terkoordinasi
untuk mencegah administrator jaringan mengakses perangkat inti selama
penyerangan.
• Kerentanan dalam layanan Telnet
memungkinkan serangan DoS terjadi, biasanya dibahas dalam patch keamanan yang
disertakan dalam Cisco IOS revisi baru.
10 Best
Practices
1. Mengembangkan kebijakan keamanan
tertulis bagi
organisasi.
2. Matikan layanan dan port yang tidak
digunakan.
3. Gunakan password yang kuat dan
sering dirubah.
4. Kontrol akses fisik ke perangkat.
5. Gunakan HTTPS bukan HTTP.
6. Melakukan operasi backup secara
teratur.
7. Mendidik karyawan tentang serangan
sosial engineering.
8. Mengenkripsi dan melindungi data
sensitif dengan password.
9. Menerapkan firewall.
10. Lakukan up-to-date software.
Network
Security Tools: Options
• Peralatan Keamanan Jaringan sangat
penting bagi administrator jaringan.
• Alat tersebut memungkinkan
administrator untuk menguji kekuatan dari limplementasi keamanan yang diterapkan.
• Administrator dapat melancarkan
serangan terhadap jaringan dan menganalisis hasilnya.
• Menyesuaikan kebijakan keamanan
untuk mengurangi atau mencegah munculnya jenis-jenis serangan yang lain.
• Audit keamanan dan penetration
testing adalah dua fungsi dasar untuk menilai keamanan jaringan dan perangkat
pengujian implementasi keamanan jaringan.
Network
Security Tools: Audits
• Tools Keamanan Jaringan ini dapat
digunakan untuk mengaudit jaringan.
• Dengan memonitor jaringan,
administrator dapat menilai jenis informasi apa yang penyerang ingin kumpulkan.
• Misalnya, dengan menyerang dan
membanjiri CAM Table switch, administrator akan belajar switchport mana yang rentan
terhadap MAC flooding dan memperbaiki masalah yang timbul.
• Perangkat Keamanan Jaringan juga
dapat digunakan sebagai alat uji penetrasi.
• Penetrasi Testing adalah simulasi
serangan.
• Ini membantu untuk menentukan
seberapa rentan jaringan ketika berada di bawah serangan yang nyata.
• Kelemahan dalam konfigurasi
perangkat jaringan dapat diidentifikasi berdasarkan hasil uji penetration test.
• Perubahan dapat dibuat untuk
membuat perangkat lebih tahan terhadap serangan
• Tes tersebut dapat merusak jaringan
dan harus dilakukan di bawah kondisi yang sangat terkendali
• Sebuah jaringan test bed off-line
yang persis seperti jaringan produksi sebenarnya adalah ideal untuk dijadikan
model pengujian.
Sumber : www.cisco.com
Pengantar Jaringan Switch
12:53 AM
Routing dan Switching
Pengatar Jaringan Switch
Tujuan routing dan switching adalah :
Dapat
mengembangkan konvergensi data, suara dan video dalam konteks jaringan yang
dipakai.
Dapat
menjelaskan jaringan yang dipakai dalam usaha kecil sampai menengah.
Dapat
menjelaskan proses frame forwarding pada jaringan yang dipakai.
Dapat
membandingkan collision domain ke domain broadcast.
Perkembangan Komploksitas Jaringan adalah :
Dunia digital
kita berubah
Informasi hatus
dapat diakses dari mana saja di dunia
Jaringan harus
aman, dapat diandalkan, dan selalu tersedia
Elemen dari Sebuah Jaringan Konvergensi
Kolaborasi
adalah keharusanUntuk mendukung kolaborasi, jaringan menggunakan solusi-solusi
konvergensi layanan data seperti sistem suara, telepon IP, gateway suara,
dukungan video, dan video conferencing control panggilan, pesan suara,
mobilitas dan petugas otomatis juga fitur-fitur umum.
Manfaat dari Jaringan Konvergensi meliputi :
Berbagai jenis
lalu lintas, namun hanya satu jaringan yang mengelola
Penghematan
besar atas instalasi dan pengelolaan data suara, video dan data jaringan
terpisah
Mengintegrasikan
manajemen TI
Borderless Switched Networks
Borderless
Network adalah sebuah arsitektur jaringan yang membuat organisasi dapat
terhubung dengan siapapun, dimanapun, kapanpun, dan dengan perangkat jaringan
yang aman, handal, dan mulus. Hal ini dirancang untuk menangani TI dan
tantangan bisnis, seperti mendukung jaringan konvergensi dan perubahan pola
kerja.
Hierarchy in the Bordetless Switched Network
Borderless
diaktifkan pada pedoman desain jaringan yang dibangun di atas prinsip-prinsip
berikut :
Hirarkis
Modular
Ketahanan
Keluwesan
Core, Distribution, Access
Role of Switched Networks
Peran jaringan
switch telah berkembang, sebuah Switch Jaringan semakin kompleks yang memungkinkan
lebih fleksibilitas dan mampu melakukan manajemen lalu lintas data. Hal ini
juga mendukung peningkatan fitur seperti : kualitas pelayanan, tambahan
keamanan, dukungan untuk nirkabel, dukungan untuk IP telepon dan layanan
mobilitas.
Form Factor
Fixed.
Fitur dan
pilihan dibatasi pada kebutuhannya yang hanya berfungsi sebagai switch.
Modular Memiliki
beberapa modul Chassis yang menerima line card yang berisi port single atau
double.
Stackable Switch
stackable dihubungkan dengan kabel khusus secara efektif beroperasi
sebagai satu switch yang besar.
Konsep umum dari
switching adalah sebuah switch membuat keputusan berdasarkan jalur masuk dan
port tujuan, sebuah switch LAN menyimpan sebuah table yang ia gunakan untuk
menentukan bagaimana untuk meneruskan lalu lintas melalui switch. LAN switch
meneruskan frame Ethernet berdasarkan pada MAC dari frame.
Pengisian Secara Dinamis MAC Address Table Switch
Switch harus
terlebih dahulu mempelajari perangkat ada yang terhubung pada masing-masing
port sebelum dapat mengirimkan frame
Switch membangun
table yang disebut MAC Address, atau table Content Address Memory (CAM)
Perangkat
dipetakan <-> port disimpan dalam table CAM
CAM adalah tipe
memori khusus yang digunakan dalam aplikasi perincian berkecepatan tinggi
Informasi dalam
table alamat MAC digunakan untuk mengirim frame
Ketika switch
menerima sebuah frame masukan dengan alamat MAC yang tidak ditentukan pada
table CAM, maka switch akan menyebarkan frame ke semua port, namaun hanya satu
yang menerima frame.
Metode Switch Meneruskan Frame
Switch dengan
Cut-through akan meneruskan frame sebelum paket sepenuhnya diterima. Minimal
alamat tujuan dari frame harus sudah dibaca sebelum frame diteruskan.
Store-and-Forward Switching
Store-and-Forwarding
memungkinkan switch untuk menerima error (via cek FCS) lakukan Buffering
otomatis, Forwarding lebih lambat.
Cut-Through Switching
Cut-Through
memungkinkan switch unuk memulai forwarding di sekitar 10 mikrodetik, tidak ada
FCS cek, tida ada Buffering otomatis.
Collision Domains
Collision domain
adalah segmen di mana perangkat harus bersaing untuk dapat berkomunkasi dengan
perngkat lain, semua port hub memiliki collision domain yang sama, setiap port
switch adalah collision domain sendiri. Sebuah switch akan menghentikan
collision pada tiap portnya, setiap segmen dikelompokan dalam collision domain
yang lebih kecil, sehingg mengurangi persaingan perangkat dalam berkomuikasi.
Broadcast Domains
Broadcast domain
adalah perluasan jaringan di mana frame broadcast dapat diterima, switch
meneruskan broadcast frame ke semua port. Tetapi switch tidak memecah broadcast
domain, semua poert switch (dengan konfigurasi default) memiliki broadcast
domain yang sama. Jika dua atau lebih
switch tehubung, broadcast akan meneruskan ke semua port dari semua switch
(kecuali port yang awalnya menerima broadcast).
Mengurangi Kecepatan Jaringan
Switch membantu
mengurangi kecepatan jaringa dengan :
Memfasilitasi
segmentasi LAN menjadi collision domain yang terpsah.
Menyediakan
komunikasi full-duplex antara pernagkat.
Mengambil
keuntungan dari kepadatan port yang tinggi.
Buffering frame
besar.
Menggunkan prt
berkecepatan tinggi.
Mengambil
keuntungan dari proses switching internal yang cepat.
Memiliki biaya
per-port yang rendah.
Sunday, June 19, 2016
Basic HTML
10:50 AM
HTML adalah singkatan dari HyperText
Markup Language adalah salah satu memerintahkan bahasa pemrograman web
desain dan juga biasa di sebut script untuk menyusun dokumen-dokumen Web. Dokumen HTML disimpan dalam format
teks reguler dan mengandung tag-tag yang web browser untuk mengeksekusi
perintah-perintah yang dispesifikasikan.
Struktur dasar HTML adalah sebagai
berikut :
<html>
<head>
<title>Judul
Dokumen</title>
</head>
<body>
Isi Dokumen Web
</body>
</html>
|
Tag Adalah teks
khusus (markup) berupa dua karakter "<" dan
">", sebagai contoh <body> adalah tag dengan
nama body. Tag harus ditulis secara berpasangan, yang terdiri atas tag
pembuka dan tag penutup (ditambahkan karakter "/" setelah karakter
"<"), sebagai contoh <body> ini adalah tag pembuka
isi dokumen HTML, dan </body> ini adalah tag penutup isi
dokumen HTML.
Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup.
Element HTML
Tag
yang berfungsi untuk membuka dan menutup seluruh isi dalam kode HTML. Isi
dokumen yang ingin ditampilkan di dalam browser harus berada di dalam tag ini.
Penulisan element HTML :
<html>
Isi Dokumen Web
</html>
|
Element Head dan Title
Tag
Head mendefinisikan bagian kepala dokumen dari halaman web. Tag Head digunakan
untuk mendeklarasikan judul dokumen yang menggunakan tag Title. Penulisannya adalah:
<head>
<title>
Judul Dokumen Web
</title>
</head>
|
Element
Body
Tag
yang mendefinisikan isi halaman web yang ditampilkan oleh browser. Penulisannya adalah :
<body>
Isi halaman Web
</body>
|
Catatan
: Jika penulisan script salah, maka script tidak terbaca sempurna (eror)
sehingga dapat mengganggu penampilan dan dinamika web itu sendiri.
Atribut mendefinisikan property dari suatu
element HTML, yang terdiri atas nama dan nilai. Penulisannya adalah sebagai
berikut :
<tag>
Nama atribut=”nilai
atribut”
Nama atribut=”nilai
atribut”>
</tag>
|
Secara
umum nilai attribut harus berada dalam tanda petik satu atau dua.
Sebagai contoh, untuk membuat warna teks menjadi kuning dan latarbelakang
halaman web menjadi hitam, penulisannya adalah :
<body bgcolor=”black”
text=”yellow”> . . . </body>
|
Keterangan
:
Tag
|
Keterangan
|
<body> . . .
</body>
|
Element untk membuat isi
dokumen
|
Bgcolor=”black”
|
Atribut yang mendefinisikan
bahwa warna latar atau background dari dokumen web adalah hitam
|
Text=”yellow”
|
Atribut yang mendefinisikan
bahwa warna teks dalam dokumen adalah kuning
|
Komentar Seperti dalam bahasa pemrograman yang
lainnya, HTML juga memiliki komentar yang dapat digunakan untuk menjelaskan
bagian-bagian dari isi dokumen web. Komentar dalam HTML diatur oleh tanda
pembuka <!-- dan ditutup oleh tanda -->. Penulisan komentar
dalam HTML :
<! - -
Isi komentar
- - >
|
Konsep Dasar CSS
10:06 AM
CSS (Cascading Style Sheets)
Memahami dan mengetahui fungsi dari
CSS (Cascading Style Sheets) sebagai Bahasa pemrograman guna mengatur desain
layout web.
CSS (Cascading Style Sheets) adalah
sebuah cara untuk memisahkan isi dengan layout dalam halaman-halaman web yang
dibuat. CSS memperkenalkan template yang berupa style untuk membuat dan
mempermudah penulisan dari halaman-halaman yang dirancang. Hal ini sangat
penting karena halaman yang menggunakan CSS dapat dibaca secara bolak-balik dan
isinya dapat dilihat oleh pengunjung dari manapun.
CSS dapat menciptakan halaman
yang tampak sama dengan resolusi layar dari pengunjung yang berbeda tanpa
memerlukan suatu tabel. Dengan CSS,
akan lebih mudah melakukan setting tampilan keseluruhan web hanya dengan
menggantikan atribut-atribut atau perintah dalam style CSS dengan
atribut yang diinginkan tanpa harus mengubah satu per satu atribut tiap elemen
yang ada dalam situs yang dibuat.
Cara kerja
CSS
Cara kerja CSS sangatlah mudah,
karena CSS hanya membutuhkan style sebagai penentu dari font, warna, dan
format-format lain untuk memformat atribut sebuah halaman web yang dibuat. Tiap
style mempunyai dua buah elemen dasar, yaitu “selector” dan “declaration”.
Sebuah selector adalah tag HTML, sementara declaration adalah
satu atau beberapa perintah atau nilai dari CSS yang menunjukkan tipe bentuk
yang diaplikasikan pada selector. Declaration ini biasanya ditandai dengan
tanda kurung kurawal {}. Perintah atau nilai CSS yang berbeda dipisahkan
satu dengan yang lain dengan menggunakan tanda titik-koma (;) seperti pada
contoh berikut :
<style>
h1
{color:blue; font-size:12px;}
</style>
|
Dapat dilihat bahwa :
.h1 adalah selector, dan {color:blue; font-size:12px} adalah declaration.
Selector-selector dan style dalam CSS
akan dimasukkan dalam sebuah tempat yang sama dalam isi dokumen HTML atau
dibuat di luar dokumen HTML yang nantinya akan dipanggil untuk menentukan isi
tampilan dokumen HTML.
Hal yang paling umum dalam memukan
kode Style Sheet dengan menggunkan tag <style>. Tag ini selalu dalam
bagian <head> dan sebelum </head> dari dokumen. Secara garis besar
perhatikan contoh berikut :
<!DOCTYPE
html>
<html>
<head>
<style>
. . . aturan-aturan css . . .
</style>
</head>
<body>
. . . Dokumen HTML yang
akan diberikan aturan CSS
</body>
</html>
|
Rules dalam
penulisan selector style pada CSS
Selector digunakan untuk memilih
elemen-elemen HTML berdasarkan nama, id, class, atribut dan lain-lain. Berikut
ini merupakan beberapa teknik penulisan selector dalam CSS.
Element
selector merupakan
cara penulisan syntax css berdasarkan
elemen-elemen yang sudah disediakan pada bahasa HTML. Anda dapat memlihi semua
elemen dari tag <p> pada sebuah halaman seperti contoh
dari elemen selector adalah sebagai berikut:
p {
color: red;
text-align: center;
}
|
Class
Selector digunakan
untuk memilih elemen html yang memiliki sifat atau perilaku yang sama dalam
satu halaman. Selector Class ini bisa digunakan untuk beberapa elemen dalam
satu halaman. Penerapan selector Class sebaiknya memperhatikan kesamaan
elemen-elemen pada halaman html.
Penulisan selector class pada CSS
diawali dengan huruf titik (.) atau dot. Kemudian nama class ditulis tepat
setelah tanda titik. Deklarasi CSS untuk Class ini ditulis diantara kurung
kurawal seperti pada selector elemen dan selector id. Berikut ini adalah
penulisan class selector:
.center
{
Text-align: center;
Color: red;
}
|
Contoh script pemanggilannya adalah
sebagai berikut :
<p
class=”center”>contoh pemanggilan class
Selector</p>
|
Id Selector Untuk menuliskan selector
Id kita menggunakan karakter hash (#). Kemudian nama Id ditulis tepat setelah
tanda # tanpa spasi. Deklarasi CSS untuk ID ini ditulis diantara kurung kurawal
seperti pada selector elemen. Contoh penulisannya adalah sebagai berikut:
#paral
{
Text-align: center;
color: red;
}
|
Contoh script pemanggilannya adalah
sebagai berikut :
<p
id=”paral”>>contoh pemanggilan style menggunakan id
Selector</p>
|
Grouping
Selector Digunakan
jika anda memiliki beberapa elemen dengan deklarasi style yang sama. Misalnya
contoh berikut ini:
h1 {
text-align: center;
center: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
|
Jika kita lihat pada contoh di atas,
terdapat tiga elemen dengan deklarasi style yang sama. Penulisan selector tersebut
sangat tidak efektif. Maka dari itu agar penulisan style lebih efektif maka
akan lebih baik untuk mengelompokkan selector-selector. Untuk
mengemlompokkan atau grouping selector, gunakan tanda koma untuk setiap selector.
contoh di bawah ini adalah cara untuk mengelompokan beberapa selector dengan
deklarasi style yang sama.
h1, h2, p {
text-align:
center;
color:
red;
}
|
Subscribe to:
Posts (Atom)
