Rangkuman pemrograman web semester 2

RANGKUMAN MATERI PEMROGRAMAN WEB KELAS X SEMESTER GENAP  DAN KB GENAP

Kegiatan Belajar  2 : Menyajikan Komponen Entri Pilihan

1.)  Komponen input file

Komponen input file berfungsi untuk memasukan data file yang dibutuhkan

kedalam sistem web yang dibuat. Format tag  HTML-nya adalah sebagai 

berikut :

 <input type=file name=name accept=mime type list>

2.)   Komponen radio button

Pada form input radio button hanya ada satu pilihan yang terseleksi,tidak bisa

digunakan untuk multiple answer. Format umum tag HTML dari  Form Input

Radio Button adalah sebagai berikut :

 <input type=radio name=name value=value>

<input type=radio name=name value=value checked>

3) Komponen chexbox

Komponen chexbox memiliki fungsi yang hampir sama dengan radio button,

yaitu untuk menentukan pilihan. Namun pada chexbox dapat digunakan untuk

memilih lebih dari satu jawaban (multi answer). 

<input type=checkbox name=name value=value>

<input type=checkbox name=name value=value checked>

4) Komponen Input Image

Komponen input image bertujuan untuk memasukan file gambar yang

dibutuhkan oleh sistem web, misalnya saja file gambar foto.jpg. Format tag

HTML dengan atribut image adalah sebagai berikut :

 <input type=image name=name src="url">

<input type=image name=name src="url" align="alignment">

5)  Komponen select

Komponen input dengan tipe ‘select’ adalah  komponen input dengan banyak

pilihan nilai dan hanya memungkinkan untuk memilih 1 alternatif opsi pilihan.

Istilah lain dari bentuk komponen ini adalah combo box atau list box. Contoh

penggunaan komponen ini adalah pemilihan data agama, jurusan, pekerjaan,

dan sebagainya. Format umum Penulisan komponen select adalah sebagai

berikut :

  <select name=”name”>

  <option value="nilai1"> nilai1 </option>

  <option value=" nilai2"> nilai2 </option>

  <option value=" nilai3"> nilai3 </option>

</select>

6) Komponen datalist

Komponen datalist merupakan elemen form baru pada HTML5. Datalist

digunakan untuk membuat daftar list. Komponen datalist memberikan dukungan

autocomplete dasar untuk pilihan pada field input. Komponen datalist

merupakan pengabungan antara list dan field input dengan atribut

autocomplete. Saat membuat pilihan  pada datalist, bila terdapat huruf/item

yang sama dengan  data pada data list maka akan muncul item yang cocok

(fungsi autocomplete bekerja).

Format umum Penulisan komponen datalist adalah sebagai berikut :

 <input list="list">

 <datalist id="id">

  <option value="nilai1">

  <option value=" nilai2">

  <option value=" nilai3">

 </datalist>

Kegiatan Belajar  4  : Menyajikan Cascading Style Sheet untuk   

Memformat Tampilan Teks

Agar lebih menarik, mudah dalam hal  pengaturans serta editing, teks pada

sebuah halaman web dapat diberikan sytle dalam kemasan CSS. Pengaturan

style tersebut meliputi banyak properti, diantaranya adalah pewarnaan,

pemilihan font, spasi dan lain sebagainya.

Color              > Mengatur warna dari teks

Direction         >Menentukan arah tulisan/teks

letter-spacing   > Menambah ataupun mengurangi spasi antar karakter dalam teks

line-height        > Mengatur  tinggi baris teks

text-align          > Menentukan batas teks secara horisontal

text-decoration > Menentukan dekorasi/hiasan pada teks

text-indent        > Menentukan jarak inden dari baris pertama dalam teks-blok

text-shadow     >  Menentukan efek bayangan pada teks

text-transform   >  Mengatur huruf besar-huruf kecil dari teks

unicode-bidi     >  Untuk mengeset unicode

vertical-align     >  Menentukan batas teks secara horisontal

white-space      >  Menentukan penulisan white-space pada elemen

word-spacing    >  Menambah ataupun mengurangi spasi antar kata dalam teks

1)  Pengaturan warna pada teks/color

CSS dapat terapkan untuk mengatur warna dari teks. Pengaturan warna teks

dengan CSS dapat menggunakan nilai warna sebagai berikut :

·         nilai HEX  misalnya, "#ff0000"

·         nilai RGB misalnya, "rgb(255,0,0)"

·         nama dari warna tersebutmisalnya "red"

Format penulisan untuk pemberian warna pada text menggunakan CSS adalah

sebagai berikut :

 selector {color:nilai warna}

2)  Pengaturan spasi antar karakterf/letter-spacing

Salah satu style dari CSS adalah letter-spacing yang dapat digunakan untuk

memberikan jarak (spasi) antar karakter atau huruf. Format penulisan CSS

untuk pengaturan jarak (spasi) antar karakter atau huruf adalah sebagai  

berikut :

  selector { letter-spacing:nilai spasi;}

3)  Pengaturan bentuk-bentuk teks/decoration

Pengaturan bentuk teks menggunakan properti text-decoration bertujuan untuk

mengatur atau menghapus dekorasi dari  teks. Format penulisan CSS untuk

mengaturan dekorasi teks  adalah sebagai berikut :

 selector {text-decoration : nilai text-decoration }

4)  Pengaturan spasi antar kata/word-spacing

Salah satu style dari CSS adalah word-spacing yang dapat digunakan untuk

memberikan jarak (spasi) antar kata. Format penulisan CSS untuk pengaturan

jarak (spasi) antar karakter atau huruf adalah sebagai berikut :

  selector { word-spacing:nilai spasi;}

Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px

5)  Pengaturan jarak indentasi paragraph/text-indent

Text-indent menentukan jarak inden dari baris pertama dalam teks-blok,

sehingga teks pada baris pertama terlihat lebih menjorok kedalam dibanding

teks pada baris yang lain.  Format penulisan untuk pengaturan jarak indentasi

text adalah sebagai berikut :

selector { text-indent:nilai indent}

Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px

5)  Pengaturan jarak indentasi paragraph/text-indent

Text-indent menentukan jarak inden dari baris pertama dalam teks-blok,

sehingga teks pada baris pertama terlihat lebih menjorok kedalam dibanding

teks pada baris yang lain.  Format penulisan untuk pengaturan jarak indentasi

text adalah sebagai berikut :

selector { text-indent:nilai indent}

Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px

6)  Pengubahan huruf besar dan huruf kecil dari sebuah teks/text- 

     transform

Teks-transform properti digunakan untuk menentukan huruf besar dan kecil

dalam teks. Format penulisan CSS untuk pengaturan text indent adalah

sebagai berikut :

 selector { text-transform:nilai text transform}

 Nilai text transform dapat diisi dengan uppercase,lowercase, capital. Pada

listing kode berikut terlihat CSS dituliskan dalam bentuk CLASS p.besar, p.kecil

dan p.kapital. Hal ini bertujuan untuk memberikan pengaturan yang berbeda

pada paragrafnya.

7)  Pemberian efek bayangan pada teks/Text shadow

Text-shadow digunakan untuk memberikan efek bayang pada sebuah teks.

Berikut adalah format penulisan CSS dengan text-shadow

 Selector { text-shadow: koordinatX koordinatY  

 nilaiWarnaTeksBayangan;}

8)  Pengaturan Text Alignment

Properti text-align digunakan untuk mengatur alignment horizontal teks. Teks 

dapat ditulis rata kiri, rata kanan, rata kanan kiri ataupun ditulis center. Ketika

text-align diset “justify", setiap baris memiliki lebar yang sama, dan margin kiri

dan kanan lurus (seperti di majalah dan surat kabar). Format penulisan CSS

untuk text alignment

 selector {text-align:nilai text-align;}

Kegiatan Belajar  6 : Penerapan CSS pada elemen tabel

1)  Konsep dasar model box

Pada dasarnya elemen dari HTML adalah model box. Istilah model box ini

digunakan pada saat membahas desain dan layout. Model box memungkinkan

untuk membuat border disekeliling elemen dan space elemen yang saling

berhubungan. Model box pada elemen HTML dapat digambar sebagai berikut :

2)  Pengaturan border tabel

CSS dapat digunakan untuk memformat border atau garis tepi dari sebuah

tabel. Format yang dapat dilakukan meliputi  jenis garis (dotted, solid, dan lain-

lain), warna border, ketebalan garis tepi dan sebagainya. Demikian pula warna

dari sebuah sel, dapat diatur dengan CSS.

3)  Pengaturan lebar dan tinggi tabel

Lebar dan tinggi dari sebuah tabel didefinisikan dalam property width dan height

Contoh berikut ini mengatur lebar tabel 100% dan tinggi dari elemen th adalah 

50px.

4)  Pengaturan text-align pada tabel

Teks dalam tabel diatur  dengan properti.text-align dan vertical-align . Nilai dari

properti text-align untuk horizontal alignment adalah left, right, atau center.

5)  Pengaturan padding tabel

Padding adalah jarak antara isi atau content, berupa teks ataupun gambar

dengan batas dalam dari sel tersebut. Style padding ini dapat diterapkan pada

elemen HTML <td> (kolom).  Ukuran yang digunakan dapat berupa cm, atau px

(piksel). Property style untuk pengaturan padding yang mengelilingi content

adalah td{ padding:15px; } 

6)  Pengaturan warna pada table

Pewarnaan pada tabel dapat digunakan untuk mengatur warna pada

teks,background maupun border.

table, td, th

{ border:1px solid green; }

Kegiatan Belajar 8 : Pengenalan Javascript

Javascript merupakan bahasa yang dapat digunakan untuk mengolah

halaman web.  Program javasacript dapat ditempatkan bersamaan dengan file HTML

ataupun secara terpisah dalam file tersendiri. Javascript berbeda dengan Java yang dalam implementasinya di HTML menggunakan tag yang lain dari Javascript.

Komentar diperlukan dalam program untuk membantu dalam

pengembangan aplikasi selanjutnya.

Kegiatan Belajar 10 : Memahami Penggunaan Array

Array,  adalah  satu variabel yang dapat berisi banyak data yang independent.

Data yang disimpan diberikan  indeks  tertentu atau menggunakan  nomer urut

mulai dari 0.Indeks ini  nantinya dapat digunakan  untuk mengakses data yang

disimpan dalam array tersebut.

JENIS-JENIS ARRAY

Array Multidimensi

Array yang hanya berisikan nilai-nilai tunggal disebut sebagai array monodimensi

atau unidimensi. Berikut merupakan ilustrasi dari array monodimensi tersebut.

Array Asosiatif

Indek dalam array selain ditentukan secara  otomatis  oleh sistem dan selalu

dimulai dari 0, juga dapat dimodifikasi dengan menggunakan kata (string) atau

nilai tertentu. Tabel dengan indeks termodifikasi ini kita kenal dengan nama array

asosiatif. Berikut adalah ilustrasinya.

Kegiatan Belajar 12 : Memahami Penerapan Struktur Kontrol Perulangan

Perulangan merupakan struktur yang memungkinkan untuk menjalankan kode

program yang sama beberapa kali dengan menggunakan suatu kondisi tertentu.

Perulangan dalam javascript memiliki tiga bentuk, yakni perulangan for, while dan

do-while.

Perulangan for

Perulangan ini memiliki bentuk sebagai berikut :

for ( inisialisasi; kondisi; peubah ) {

  baris program 1;

  baris program 2;

  …

}

Perulangan while 

Perulangan ini memiliki bentuk sebagai berikut :

while ( kondisi ) {

    kode program yang ingin dijalankan berkali-kali;

}

Perulangan do-while

Perulangan ini memiliki bentuk sebagai berikut :

do {

    kode program yang ingin dijalankan berkali-kali;

} while( kondisi );

Kegiatan Belajar 14 : Pemrograman Berorientasi Obyek

Pemrograman Berorientasi Obyek (PBO)

Pemrograman berorientasi obyek adalah sebuah paradigma dalam

pemrograman yang  mengelompokkan fungsi, prosedur, variabel ataupun

konstanta terkait dalam satu kesatuan  (kelas) seperti obyek dalam dunia nyata.

Obyek sendiri merupakan wujud dari kelas, secara umum dikenal dengan nama

instan.  Teknik-teknik dalam pemrograman ini merupakan pengembangan dari

teknik sebelumnya seperti modularitas, polimorfisme, dan enkapsulasi. Saat ini

ada banyak bahasa pemrograman yang telah mendukung pemrograman

berorientasi obyek ini, seperti C++, C#, Java, Javascript,  PHP,  Python, Ruby,

dan Objective C. 

 

Kegiatan Belajar 16 : Navigasi Halaman Web

Navigasi Halaman

Navigasi secara umum dapat digunakan untuk menunjukkan perpindahan dari

satu titik ke titik yang lain. Dalam hal ini perpindahan yang dimaksud adalah

perpindahan dalam  satu halaman ataupun antar halaman web. Wujud dalam

halaman web yang tampak  adalah dalam bentuk link (tekstual), tombol dan

gambar (grafis). Selain menggunakan HTML, navigasi pada halaman web juga

dapat diwujudkan dengan menggunakan program Javascript.

 Perancangan navigasi untuk suatu website dapat juga dikenal dengan istilah

pembuatan sitemap. Penggambarannya dilakukan dengan terlebih dahulu

menentukan halaman utama web, kemudian menentukan link-link apa saja dari

yang ada di halaman tersebut dan mengaitkannya. Berikut ini merupakan salah

satu contoh bentuk rancangan sitemap.

·         Navigasi secara umum dapat digunakan untuk menunjukkan perpindahan

·         dari satu titik ke titik yang lain.

·         Selain menggunakan HTML, navigasi pada halaman web juga dapat

·         diwujudkan dengan menggunakan program Javascript.

·         Perancangan navigasi untuk suatu website dapat juga dikenal dengan

·         istilah pembuatan sitemap.

·         Sitemap ini nantinya dapat dijadikan panduan ataupun arah bagi

·         programmer web dalam mengembangkan aplikasinya. 

·         Bagi  user  , sitemap  dapat  memberikan  gambaran secara menyeluruh

·         tentang web yang sedang dikunjungi.

·          jQuery merupakan salah satu librari yang dapat digunakan untuk

·         menerapkan AJAX ini dengan perintah-perintah yang lebih sederhana.

Kegiatan Belajar 18 : Penerapan Pustaka Eksternal

Penerapan Pustaka Eksternal

Selain menyediakan pustaka bawaan, pada pemrograman Javascript juga

dimungkinkan untuk menggunakan pustaka dari pengembang  (programmer)

Javascript lainnya. Pustaka eksternal sebenarnya adalah program Javascript

seperti umumnya yang dikembangkan oleh perorangan atau instansi agar dapat

digunakan oleh orang atau instansi lainnya. Ada banyak pustaka Javascript yang

telah dikembangkan, seperti Dojo, Ext JS, YUI, dan jQuery. Bentuknya ada yang

bersifat terbuka dan tertutup  tergantung dari pengembangnya.  Adanya

penambahan pustaka eksternal ini akan dapat menambah fitur dari halaman web

yang dihasilkan. Selain itu juga dapat memberikan kemudahan dalam

pengembangan karena adanya penyederhanaan sejumlah operasi umum dalam

Javascript, seperti fungsi-fungsi untuk mengakses obyek ataupun menjaga

kompatibilitas antar browser.

   Sekian dari sya semoga bermanfaat.