JAVA SCRIPT
JavaScript adalah sebuah bahasa script yang dicantumkan pada sebuah halaman web dan dijalankan pada browser web. JavaScript adalah nama implementasi Netscape Communications Corporation untuk ECMAScript standar, suatu bahasa skrip yang didasarkan pada konsep pemrograman berbasis prototipe. Bahasa ini terutama terkenal karena penggunaannya di situs web (sebagai JavaScript sisi klien) dan juga digunakan untuk menyediakan akses skrip untuk objek yang dibenamkan (embedded) di aplikasi lain. Walaupun memiliki nama serupa, JavaScript hanya sedikit berhubungan dengan bahasa pemrograman Java, dengan kesamaan utamanya adalah penggunaan sintaks C. Secara semantik, JavaScript memiliki lebih banyak kesamaan dengan bahasa pemrograman Self. Skrip JavaScript yang dimasukkan di dalam berkas HTML ataupun XHTML harus dimasukkan di antara tag <script>...</script>. Berikut ini adalah contohnya (yang akan menampilkan sebuah dialog box berisi Halo Dunia! ketika sebuah tombol diklik oleh pengguna):
I. MEMASUKKAN JAVA SCRIPT KE DALAM DOKUMEN HTML
Sebenarnya ada dua cara menanamkan JavaScript kddalam dokumen
HTML anda, yaitu :
1. Mengapit JavaScript tersebut dengan tag <script>...</script> Contoh :
2. Menggunakan tag HTML yang menangani event.
Contoh :
Latihan 1
Latihan 2
Latihan 3
II. TYPE DATA
Tipe Data merupakan besaran yang digunakan untuk melakukan perhitungan, menulis dan sebagainya. Di dalam javascript terdapat beberapa macam Tipe Data, yaitu :
1. String
String adalah karakter yang bisa berupa huruf, kata symbol atau angka. String ditulis diantara tanda kutip ganda (“) atau tanda kutip tunggal ( ‘ ). Jika terdapat string lain gunakan tanda kutip tunggal. misal :
<input name = age on focus ="windows.status= ' ketikkan umuranda' ">
name = “firdaus ‘alikomeini’ adnan “ sedang untuk menulis tanda kutip ganda dalam string digunakan tanda (\ “).
Misalnya : name = “Institut \”Teknologi \” Bandung ”
2. Numerik
Berupa bilangan atau angka yang mempunyai sifat matematis (bisa dijumlah, tambah dsb), misalnya : 17, 8, 1945
3. Boolean
Nilai yang hanya memiliki dua nilai yaitu true (benar) dan false (salah)
4. Null
Adalah nilai yang tidak memiliki nilai sama sekali . Null tidak sama denagn karakter kosong atau nilai nol ( 0 ).
III. VARIABLE
Aturan penamaan variable
Java Script memiliki aturan untuk memberi nama variabel :
1. Harus diawali dengan karakter (huruf atau garis bawah ) tidak boleh diawali dengan angka atau symbol.
Contoh :
Variable
Keterangan
Contoh_3.1
Benar
_contoh3.2
Benar
2001_angkatan
Salah
$sql
Salah
2. Tidak boleh menggunakan spasi , untuk memisahkan antar karakter digunakan garis bawah.
Contoh :
Variable
Keterangan
Firdaus adnan
Salah
Firdaus_adnan
benar
3. Kapitalisasi (huruf besar dan huruf kecil) dibedakan pada nama variabel. Contoh :
Firdaus tidak sama dengan firdaus
4. Tidak boleh mengunakan reserverd word, atau nama yang sama dengan perintah yang ada pada Java Script. Reserved word dalam javascript adalah : Abstract, Boolean, break, byte, case, catch, char, c lass, const, continue, default, do, double, else, extends, false, final, finally, float, for, function, goto, if, implements, import, in, instace of, int, interface, long, native, new, null, package, private, protected, public, return, short , static, super, switch, synchronized, this, throw, throws, transient, true, try, var, void, while, with.
IV. KONSTANTA/LITERAL
Konstanta/literal adalah suatu nilai pasti yang tidak bisa diubah-ubah. Pengertian ini relevan dengan kata dasarnya yaitu konstan yang artinya tetap. Jika isi variable masih bisa diubah, maka konstanta tidak. Antara variable dan konstanta dapat disatukan. Perhatikan contoh di bawah ini : total = subtotal +
100. Nilai 100 di atas adalah konstanta/literal sedangkan total dan subtotal
merupakan varible.
Beberapa jenis literal pada Java Script :
1. Literal Integer
yaitu suatu bilangan bulat tanpa pecahan :
2. Literal Floating Point,
yaitu suatu bilangan pecahan atau berpangkat.
3. Literal String,
adalah suatu karakter yang berisi huruf , angka atau symbol simbol lainnya. Literal string harus diawali dan diakhiri dengan tanda kutip ganda ( “ ) atau tunggal ( ‘ ).
4. Literal Boolean,
adalah suatu litral yang memiliki dua buah nilai yaitu true (bena r) dan false
(salah)
Latihan 4
Latihan 5
V. Operator
Operator merupakan perintah yang memanipulasi nilai atau variable dan memberikan suatu hasil tertentu. Beberapa jenis operator yang sudah umum yaitu operator aritmatika yang sering kita gunakan dalam membahas matematika, diantaranya adalah operator tambah (+), kurang (),kali (x), bagi (/) , persen (%) dan sebagainya.
Datadata yang dimanipulasi oleh operator untuk memberikan suatu hasil y ang
diinginkan disebut juga dengan operan. Sebagai contoh : X + 3 = 6
Keterangan :
• X dan 3 adalah operan
• + adalah operator
• 6 adalah hasil
Dalam modul ini kita akan mempelajari jenis-jenis operator javascript, di antaranya adalah :
1. Operator Unary
Operator unary adalah operator yang hanya mengolah satu nilai atau satu operan saja. Operator unary dalam javascript terbagi atas tiga macam, yaitu :
a. Increment (penambahan), dengan symbol ++
Operator ini berfungsi untuk menambahkan nilai operan (variable) sebanyak satu.
Contoh :
Total = subtotal++
Dari contoh di atas kita dapat mendefinisikan bahwa variable subtotal dimasukkan ke variable total terlebih dahulu, kemudian nilai variable subtotal ditambah dengan angka satu.
Total =++ subtotal
Dari contoh di atas kita dapat mendefinisikan bahwa variable subtotal ditambah terlebih dahulu, lalu nilai variable subtotal di masukkan ke variable total.
b. Decrement (pengurangan), dengan symbol – Operator ini akan mengurangi nilai operan (variable) sebesar satu. Contoh :
Total = subtotal--
Artinya variable subtotal dimasukkan ke variable total terlebih dahulu kemudian nilai variable subtotal dikurangi Satu
Total = --subtotal
Artinya nilai variable subtotal dikurangi satu terlebih dahulu, kemudian nilai variable subtotal dimasukkan ke variable total.
c. Negasi (lawan), dengan symbol – Operator ini akan membalikkan nilai operan. Jika operan bernilai positif, operator negasi akan menjadikannya negatif dan sebaliknya. Perhatikan contoh soal berikut :
Latihan 6
2. Operator Binary
Operator Binary adalah operator yang mengolah dua nilai atau dua operan. Perhatikan contoh di bawah ini :
x + y = 5
Tanda + adalah operator binary, karena tanda tersebut mengolah dua buah operan yakni x dan y. Semua operator binary pada javascript adalah operator aritmatika.
Perhatikan table di bawah ini :
Operator
Fungsi
Contoh
+
Penjumlahan
var x = 2 + 3 ; nilai x = 5
-
Pengurangan
var x = 3 – 2; nilai x=1
*
Perkalian
var x = 2*3; nilai x = 6
/
Pembagian
var x = 3/2; nilai x = 1.5
%
Modulus
var x = 3%2; nilai x = 1
Latihan 7
3. Operator penugasan
Operator penugasan adalah operator yang memberi nilai kepada variable. Jenis operator yang umum digunakan adalah tanda sama dengan (=). Contoh :
var nilai = 10
nilai = matematika
Pada contoh di atas, variable nilai diberi nilai (value) 10. Pada baris k edua, variable nilai diberi nilai (value) yang terdapat pada variable matematika.
Jenis operator lainnya merupakan singkatan dari operator binary. Perhatikan contoh di bawah ini :
nilai += matematika
contoh di atas sama artinya dengan :
nilai =nilai + matematika
Beberapa jenis operator penugasan yang terdapat pada javascript adalah :
Operator
Contoh
Arti
=
nilai = 10
value nilai = 10
+=
nilai += matematika
nilai = nilai + matematika
-=
nilai -= matematika
nilai = nilai – matematika
*=
nilai *= matematika
nilai = nilai * matematika
/=
nilai /= matematika
nilai = nilai / matematika
%=
nilai %=matematika
nilai = nilai % matematika
Latihan 8
4. Operator perbandingan
Operator perbandingan adalah operator yang digunakan untuk membandingkan satu nilai dengan nilai yang lain, untuk mendapatkan hasil benar atau salah. Pada umumnya, macam dari jenis operator perbandingan ini adalah sama dengan (==).
Contohnya : Biaya == 100
Jika nilai dari variable biaya di atas besarnya sama dengan 100, maka pernyataan di atas akan memberikan hasil true (benar). Tetapi jika nilai dari variable biaya di atas besarnya tidak sama dengan 100, maka pernyataan di atas akan memberikan hasil false (salah).
Operator
Arti
Contoh
==
Sama dengan
Total==10
!=
Tidak sama dengan
Total !=100
>
Lebih besar dari
Total>100
<
Kurang dari
Total<100
>=
Lebih besar atau sama
Total>=100
<=
Kurang dari atau sama
Total<=100
Latihan 9
5. Operator logical
Pada dasarnya Operator logical hampir sama dengan operator perbandingan yang berfungsi untuk membandingkan dua buah nilai untuk memberikan hasil beanr atau salah. Perbedaannya adalah operator logical berfungsi membandingkan perbandingan. Perhatikan contoh di bawah ini :
( total > 10) && (biaya < 100)
Pada contoh di atas digunakan operator && yang artinya adalah mengharuskan kedua nilai memenuhi syarat. Jika kedua nilai benar maka ekspresi di atas akan bernilai benar. Beberapa jenis operator
yang terdapat di javascript adalah sebagai berikut :
Operator
Arti
Keterangan
&&
AND (dan)
Kedua nilai yang dibandingkan harus sesuai dengan kriteria
||
OR (atau)
Salah satu nilai yang dibandingkan harus sesuai
!
NOT (bukan)
Nilai yang dibandingkan merupakan kebalikannya.
Dari contoh di atas yaitu (total > 10) && (biaya < 100) dapat kita perkirakan bahwa :
• Jika total = 12 (benar) dan biaya = 98 (benar), maka hasilnya adalah benar
• Jika total = 8 (salah) dan biaya = 98 (benar), maka hasilnya adalah salah
• Jika total = 8 (salah) dan biaya = 102 (salah), maka hasilnya adalah salah
Jika operator contoh di atas kita ganti dengan tanda ( || ) maka dapat kita ambil perkiraan yaitu :
• Jika total = 12 (benar) dan biaya = 98 (benar), maka hasilnya adalah benar
• Jika total = 8 (salah) dan biaya = 98 (benar), maka hasilnya adalah benar
• Jika total = 12 (benar) dan biaya = 102 (salah), maka hasilnya adalah benar
• Jika total = 8 (salah) dan biaya = 102 (salah), maka hasilnya adalah salah
Jika contoh di atas dirubah menjadi !((total == 100), maka dapat kita perkirakan hasilnya sebagai barikut :
• Jika total=100 (benar), maka ekspresi di atas salah
• Jika total=98 (salah), maka ekspresi di atas benar
Latihan 10
6. Operator String
Operator string adalah operator yang mengolah nilai string, yaitu nilai yang berupa karakter (bukan angka atau ekspresi aritmatik). Jenis operator string pada dasarnya sama dengan operator-operator yang telah dijelaskan di atas. Hanya saja, operator-operator tersebut digunakan untuk memanipulasi string.
Perhatikan contoh di bawah ini. var nama = “adi” + “anak”+”baik”
Dari contoh di atas maka dapat diambil kesimpulan bahwa variable pesan adalah string “adi anak baik”.
Beberapa hal yang perlu diperhatikan adalah :
1. String tidak bisa dibandingkan
Jika kita tidak bisa membandingkan antara “roti” == “keju” atau
“roti”>”keju”. Maka hasil keduanya adalah salah atau false.
2. Javascript mengubah string angka menjadi numerik
Apabila string berisi angka, javascript akan mengubahnya menjadi nilai numerik, sehingga dapat dibandingkan. Perhatikan contoh di bawah ini : “100” > “10”. Javascript akan mengubah “100” menjadi 100 dan mengubah “10” menjadi 10. Karena 100 lebih besar dari 10, maka ekspresi di atas bernilai true atau benar.
3. String gabungan tidak diubah
Gabungan yang dimaksud adalah gabungan antara numerik dengan kalimat. Misalkan string tersebut berupa “angkatan2014”, contoh tersebut tidak akan diubah menjadi nilai numerik. Perhatikan table berikut yang menjadi contoh penerapan operator string pada javascript :
Operator
Arti
Contoh
==
Membandingkan string
“roti” == “keju”
>
Lebih besar dari
“100” > “10”
+
Penjumlahan
nama_awal = “adi”
nama_akhir = “perdana”
Nama = nama_awal + nama_akhir
+=
Penjumlahan ganda
nama = “adi”
nama+=” perdana”
Latihan 11
VI. Logika If
Pernyataan ini digunakan untuk membandingkan suatu kondisi, jika kondisi itu benar, maka akan dijalankan ekspresi tertentu, tetapi jika kondisi itu salah akan dijalankan ekspresi lain. Sintaks dari pernyataan if……else,
If (kondisi)
{ekspresi 1}
else (kondisi)
{ekspresi 2}
Keterangan :
Kondisi : kondisi yang dibandingkan
Ekspresi1 : ekspresiekspresi yang akan dijalankan jika kondisi memenuhi syarat.
Ekspresi2 : ekspresiekspresi yang akan dijalankan jika kondisi tidak
memenuhi syarat. Contoh :
Agar lebih memahami maksud dari pernyataan di atas, simak kalimat berikut : Jika nilai ujian saya meningkat, saya akan mendapatkan mobil dari orangtua saya, tetapi jika tetap atau berkurang maka saya tidak mendapatkan mobil (else) melainkan saya hanya mendapatkan sepeda.
Jika kita terjemahkan ke dalam bahasa javascript maka kalimatnya adalah:
If (nilai >90) (hadiah = “mobil”) else (hadiah=”sepeda”)
Keterangan :
Baris
Keterangan
if (nilai > 90) (hadiah
= “mobil”)
Jika isi variable nilai bernilai lebih besar dari 90 maka variable adiah akan diberikan nilai “mobil”
Else
(hadiah= “sepeda”)
Jika isi variable nilai bernilai tidak lebih besar dari 90 maka variable hadiah akan diberikan nilai “sepeda”
Latihan 12
Latihan 13
VII. Perulangan Dengan For
Pernyataan for berfungsi melakukan suatu loop atau menjalankan ekspresi berulangulang untuk kondisi yang telah di tentukan sebelumnya. Pernyataan for jika dilihat hampir sama dengan pernyataan while, yang berbeda adalah pernyataan for menyertakan kondisi awal dan kondisi akhir serta besarnya kenaikan. Sintak pernyataan for adalah :
for (kondisi_awal; kondisi _akhir; kenaikan) (ekspresi)
Keterangan :
• kondisi_awal : kondisi awal yang memenuhi untuk loop dimulai
• kondisi_akhir : kondisi akhir yang memenuhi untuk loop diakhiri
• kenaikan : besarnya kenaikan nilai variable untuk setiap iterasi loop
Latihan 14
VIII. Fungsi
Fungsi adalah sekumpulan kodekode javascript yang jika dijalankan akan menghasilkan atau mengerjakan suatu tugas tertentu. Fungsi dapat disebut sebagai modul atau subprogram dari seluruh skrip atau program javascript. Pembuatan Fungsi
Dilihat dari segi pembuatan fungsi, maka sintak dasarnya adalah :
function nama_fungsi (parameter)
{ …….. ekspresi ekspresi
……… }
Untuk memposisikan sintak tersebut, maka sintak tersebut harus diletakkan di :
<script language=”javascript”>
function nama_fungsi()
{
### isi fungsi ###
}
</script>
Aturan Pembuatan Fungsi
Ditinjau dari segi pembuatannya, maka fungsi memiliki beberapa aturan pembuatan yang akan di jabarkan di bawah ini :
1. Diawali dengan kata function
2. Nama fungsi bebas, asalkan dapat menjelaskan fungsi dari fungsi tersebut. Yang terpenting di sini adalah fungsi harus diikuti oleh tanda kurung “()” yang digunakan sebagai tempat parameter.
3. Di dalam tanda kurung setelah kata function, dapat diletakkan parameter
fungsi. Untuk lebih jelas lagi perhatikan sintak berikut :
function jumlah (a,b)
{
var c = a+b;
document.write (z)
}
Parameter di dalam fungsi bisa digunakan bisa juga tidak digunakan.
4. Parameter merupakan variable atau nilai yang akan diolah ekspresiekspresi yang terdapat di dalam fungsi tersebut.
Isi fungsi harus di letakkan di dalam tanda kurung kurawal. Latihan 15
Perhatikan contoh di atas. Tampak bahwa dengan menuliskan garis() berarti kita telah memanggil sintak “<hr>” yang di nyatakan di dalam sintak document.write. Ini disebabkan bahwa kata garis merupakan nama sebuah fungsi yang bisa dipanggil pada posisi manapun selama nama fungsi tersebut masih berada di antara sintak javascript. Pada contoh di atas, tampak bahwa isi parameter masih kosong. Di bawah ini ada script javascript yang memberikan nilai parameter pada fungsi.
Latihan 16
Memanggil Fungsi javascript
Untuk menampilkan fungsi yang telah di buat, maka fungsi tersebut harus dipanggil terlebih dahulu. Ada beberapa cara pemanggilan fungsi tersebut, yaitu :
1. Fungsi tersebut dipanggil dalam skrip javascript
2. Fungsi dipanggil dari dalam fungsi itu sendiri
3. Fungsi dipanggil dari dalam fungsi yang lain.
Di bawah ini akan dijelaskan secara lebih rinci mengenai metode pemanggilan fungsi javascript tersebut :
Memanggil fungsi dari dalam skrip javascript
Metode ini terbagi dua :
1. Fungsi dipanggil dari skrip yang terletak pada bagian <head> Perhatikan contoh di bawah ini :
Latihan 17
2. Fungsi dipanggil dari skrip javascript yang terletak pada bagian
<body> Latihan 18
IX. Event
Event adalah suatu aksi yang dilakukan oleh pemakai yang memicu jalannya kode JavaScript anda.sebagian besar event dipicu oleh pemakai yang memanipulasi halaman web pada program browsernya , seperti menggeser pointer keatas link untuk memicu menampilkan alamat link pada baris status.
Macam macam event :
1. Click , event ini terjadi jika pemakai mengklik tombol mouse pada link atau elemen yang terdapat form.
2. Focus, event ini terjadi jika pemakai mengklik atau meletakkan pointer mousepada elemen form seperti field teks , kotak cek dan sebagainya.
3. Blur , event ini terjadi jika pemakai menyingkirkan focus (pointer mouse)
dari elemen form yang sebelumnya diberi focus.
4. Change , event ini terjadi jika pemakai mengubah input atau masukan pada elemen form.
5. MouseOver, terjadi jika pemakai meletakkan mouse di atas sebuah link .
6. Select, event ini terjadi jika pemakai memilih teks pada elemen form, seperti menggeser pointer mouse pada teks sambil menahan tombol kiri mouse.
7. Submit, event ini terjadi bila mengklik tombol “submit”
Menjalankan Event
Event Handler
Event Handler merupakan kode kode javascript yang akan dijalankan apabila event tersebut dipicu.
Untuk menjalankan event tersebut maka digunakan sintaks : On NamaEvent = “
kode JavaScript ” Contoh :
OnMouseOver =”fungsi_data (a,b)” Memanggil Event Handler
Metode pemanggilan event handler dapat menggunakan dua metode, yaitu :
1. Memanggil melalui fungsi
Event Handler dapat dijalankan dengan cara memanggil fungsi. Sintaknya adalah :
OnNamaEvent = “namafungsi (parameter)”
Latihan 19
2. Memanggil dengan menjalankan kode javascript secara langsung
Event Handler dapat dijalankan dengan cara membuat kode javascript secara langsung di text editor. Sintaknya adalah :
OnNamaEvent = “kode javascript” Latihan 20
Latihan 21
X.
Minggu, 01 Juni 2014
Pengenalan Boostrap
PENGENALAN BOOTSTRAP
Jika anda seorang pengembang web, pastilah tidak asing dengan beberapa program aplikasi web desain seperti Dreamweaver, Flash dst. Atau bagi yang suka nye-cript…pasti hafal dengan elemen-elemen HTML, CSS bahkan Javascript atau JQuery.
Mendesain website menggunakan program aplikasi, memang terasa lebih mudah dan cepat, dibandingkan dengan cara menuliskan kode-kode (tag/elemen) HTML/CSS/Javascript yang rumit. Namun, ada beberapa fasilitas tertentu yang tidak didukung oleh beberapa program aplikasi tersebut, yang memaksa seorang web developer untuk mengetikkan kode-kode tertentu untuk mengatasinya.
Jika sudah begini, maka scripting adalah satu-satunya alternatif yang harus dilakukan :( Twitter bootstrap adalah suatu cara mendesain web atau membuat aplikasi berbasis web
dengan cara scripting yang sangat mudah dilakukan. Kenapa saya bilang mudah? Karena eh..karena anda tidak perlu menghafalkan banyak kode HTML/CSS/Javascript untuk membuat tampilannya, namun hasilnya sangat bagus dan menarik. Tak kalah dengan template2 buatan CMS terkemuka, seperti Joomla dan WordPress.
Dengan menggunakan Boostrap, kita dapat dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website, dengan cara yang mudah, hanya dengan memanggil fungsi CSS (class yang sudah disediakan oleh Bootstrap) dari berkas HTML yang telah didefinisikan. Bootstrap juga menyediakan komponen-komponen lain yang dibangun dengan menggunakan JavaScript.
Bootstrap ini sendiri dikembangkan oleh Mark Otto (@mdo) dan Jacob Thornton (@fat) dan didukung oleh hampir semua browser, baik Mozilla, Chrome, Safari, Opera, bahkan Internet Explorer.
Bagaimana Cara memanfaatkan Twitter Bootstrap?
Sebelum kita memulai membuat layout website menggunakan Twitter boostrap, ada b aiknya kita memahami beberapa fitur dan komponen yang terdapat pada bootstrap.
1. Source Bootstrap
Yang perlu anda lakukan untuk bisa memanfaatkan bootstrap ini adalah mendownload file-file bootstrap dari Twitter, anda dapat mendownloadnya di sini.
Jika anda sudah mendownloadnya, maka anda akan melihat sebuah file zip, bernama bootstrap.zip, yang mana jika di-extract akan menjadi sebuah folder Bootstrap, yang terdiri atas beberapa file berikut :
2. Struktur Bootstrap
Struktur bootstrap tersebut dapat digambarkan sebagai berikut :
bootstrap/
+-- css/
¦ +-- bootstrap.css
¦ +-- bootstrap.min.css
+-- js/
¦ +-- bootstrap.js
¦ +-- bootstrap.min.js
Dari struktur bootstrap di atas, maka jika kita ingin memanfaatkan Bootstrap untuk layout website kita, kita pasti faham, di mana seharusnya file kita diletakkan.
3. Docs Section
Berikut adalah beberapa fitur untuk layout website yang disediakan oleh bootstrap :
Scaffoling : Bagian yang mengatur background, link styles, grid system, dan two simple layouts
Base CSS : Bagian yang mengatur tampilan elemen HTML seperti typography, code, table, form, dan button. Termasuk Glyphicons, sebuah kumpulan ikon-ikon kecil.
Components : Bagian yang mengatur tampilan component, seperti tab, navbar, alerts, page headers, dst.
Javascript Plugins: Menyediakan beberapa component interaktif, seperti tooltips, popovers, modals, dan seterusnya.
4. Daftar Component Bootstrap
Berikut adalah Component dan Javascript plugin yang didukung oleh Bootstrap:
Untuk membuat layout website menggunakan bootstrap, sama dengan ketika mendesain menggunakan HTML dan CSS biasa. Pada dokumen HTML, kita hanya perlu menambahkan pada bagian <head> </head> dan pada bagian <body> </body> beberapa elemen berikut :
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text//css">
</head>
<body>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Elemen-elemen diatas digunakan untuk merelasikan dokumen HTML kita dengan file bootstrap yang telah ada.
Jika anda seorang pengembang web, pastilah tidak asing dengan beberapa program aplikasi web desain seperti Dreamweaver, Flash dst. Atau bagi yang suka nye-cript…pasti hafal dengan elemen-elemen HTML, CSS bahkan Javascript atau JQuery.
Mendesain website menggunakan program aplikasi, memang terasa lebih mudah dan cepat, dibandingkan dengan cara menuliskan kode-kode (tag/elemen) HTML/CSS/Javascript yang rumit. Namun, ada beberapa fasilitas tertentu yang tidak didukung oleh beberapa program aplikasi tersebut, yang memaksa seorang web developer untuk mengetikkan kode-kode tertentu untuk mengatasinya.
Jika sudah begini, maka scripting adalah satu-satunya alternatif yang harus dilakukan :( Twitter bootstrap adalah suatu cara mendesain web atau membuat aplikasi berbasis web
dengan cara scripting yang sangat mudah dilakukan. Kenapa saya bilang mudah? Karena eh..karena anda tidak perlu menghafalkan banyak kode HTML/CSS/Javascript untuk membuat tampilannya, namun hasilnya sangat bagus dan menarik. Tak kalah dengan template2 buatan CMS terkemuka, seperti Joomla dan WordPress.
Dengan menggunakan Boostrap, kita dapat dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website, dengan cara yang mudah, hanya dengan memanggil fungsi CSS (class yang sudah disediakan oleh Bootstrap) dari berkas HTML yang telah didefinisikan. Bootstrap juga menyediakan komponen-komponen lain yang dibangun dengan menggunakan JavaScript.
Bootstrap ini sendiri dikembangkan oleh Mark Otto (@mdo) dan Jacob Thornton (@fat) dan didukung oleh hampir semua browser, baik Mozilla, Chrome, Safari, Opera, bahkan Internet Explorer.
Bagaimana Cara memanfaatkan Twitter Bootstrap?
Sebelum kita memulai membuat layout website menggunakan Twitter boostrap, ada b aiknya kita memahami beberapa fitur dan komponen yang terdapat pada bootstrap.
1. Source Bootstrap
Yang perlu anda lakukan untuk bisa memanfaatkan bootstrap ini adalah mendownload file-file bootstrap dari Twitter, anda dapat mendownloadnya di sini.
Jika anda sudah mendownloadnya, maka anda akan melihat sebuah file zip, bernama bootstrap.zip, yang mana jika di-extract akan menjadi sebuah folder Bootstrap, yang terdiri atas beberapa file berikut :
2. Struktur Bootstrap
Struktur bootstrap tersebut dapat digambarkan sebagai berikut :
bootstrap/
+-- css/
¦ +-- bootstrap.css
¦ +-- bootstrap.min.css
+-- js/
¦ +-- bootstrap.js
¦ +-- bootstrap.min.js
Dari struktur bootstrap di atas, maka jika kita ingin memanfaatkan Bootstrap untuk layout website kita, kita pasti faham, di mana seharusnya file kita diletakkan.
3. Docs Section
Berikut adalah beberapa fitur untuk layout website yang disediakan oleh bootstrap :
Scaffoling : Bagian yang mengatur background, link styles, grid system, dan two simple layouts
Base CSS : Bagian yang mengatur tampilan elemen HTML seperti typography, code, table, form, dan button. Termasuk Glyphicons, sebuah kumpulan ikon-ikon kecil.
Components : Bagian yang mengatur tampilan component, seperti tab, navbar, alerts, page headers, dst.
Javascript Plugins: Menyediakan beberapa component interaktif, seperti tooltips, popovers, modals, dan seterusnya.
4. Daftar Component Bootstrap
Berikut adalah Component dan Javascript plugin yang didukung oleh Bootstrap:
- Button groups
- Button dropdowns
- Navigational tabs, pills, and lists
- Navbar
- Labels
- Badges
- Page headers and hero unit
- Thumbnails
- Alerts
- Progress bars
- Modals
- Dropdowns
- Tooltips
- Popovers
- Accordion
- Carousel
- Typeahead
Untuk membuat layout website menggunakan bootstrap, sama dengan ketika mendesain menggunakan HTML dan CSS biasa. Pada dokumen HTML, kita hanya perlu menambahkan pada bagian <head> </head> dan pada bagian <body> </body> beberapa elemen berikut :
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text//css">
</head>
<body>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Elemen-elemen diatas digunakan untuk merelasikan dokumen HTML kita dengan file bootstrap yang telah ada.
Sabtu, 03 Mei 2014
Belajar CSS
Apa itu CSS? dan apa kegunaanya?. Pernahkah anda melihat sebuah halaman
web dengan bentuk yang rapi, warna-warna yang indah. Itulah yang disebut
dengan CSS(Cascading Style Sheet). Penggunaan CSS dilakukan untuk mempercantik tampilan web. Kode CSS ditulis didalam tag <style> </style>.
Ada 3 cara untuk membuat CSS bisa diterapkan ke dalam HTML :
Simpan file CSS diatas dengan nama terserahanda.html, kemudian jalankan di Mozilla Firefox atau Browser lainnya. Disini sebagai contoh adalah akan membuat tag header <h1> </h1> yang akan dibuat menjadi warna merah. Untuk tampilannya seperti berikut :
Simpan file CSS diatas dengan nama terserahanda.html, kemudian jalankan di Mozilla Firefox atau Browser lainnya.
<style type="text/css">
p {
color:red;
}
</style>
Source kode diatas adalah tag untuk CSS yang akan membuat tag yang didalam paragraf <p> </p> berubah menjadi warna merah.
Untuk tampilannya sebagai berikut :
Pertama buatlah satu Folder. Buatlah halaman dengan nama style.css simpan kedalam folder yang anda buat tadi, kemudian ketik source code dibawah :
#kotak1 {
background-color:red;
width:200px;
height:200px;
float:left;
}
Pengertian source code diatas adalah :
#kotak1 = nama id
background-color:red; = membuat background menjadi warna merah
width:200px; = membuat panjang dengan ukuran 200px
height:200px; = membuat lebar kebawah dengan ukuran 200px
float:left; = posisi objek berada di kiri
Untuk bisa menampilkan kita harus memanggil file .css yang telah dibuat tadi. Buatlah satu file dengan nama index.html. Kemudian tuliskan source code dibawah ini :
<link rel="stylesheet" href="style.css" type="text/css"> = memamnggil file style.css
Masukkan kedua file tersebut ke dalam satu folder. Jika file style.css dan index.html sudah ada di dalam satu folder langkah selanjutnya adalah jalankan file index.html di Mozilla Firefox atau Browser lainnya.
Untuk tampilannya sebagai berikut :
Ada 3 cara untuk membuat CSS bisa diterapkan ke dalam HTML :
- Inline CSS
- Embedded CSS
- External CSS
Untuk bisa belajar CSS yang harus disiapkan adalah :
- Text Editor (Notepad, Adobe Dreamweaver, dll), disini penulis lebih senang menggunakan text editor Notepad++
- Browser seperti Mozilla Firefox, Google Chrome,Opera, dll
Inline
Inline CSS digunakan pada tag HTML-nya
Sebagai contoh, ketikkan source code berikut :
- <body>
- <body>
- <h1 style="color:red;">
- Contoh Inline CSS</h1>
- </body>
Simpan file CSS diatas dengan nama terserahanda.html, kemudian jalankan di Mozilla Firefox atau Browser lainnya. Disini sebagai contoh adalah akan membuat tag header <h1> </h1> yang akan dibuat menjadi warna merah. Untuk tampilannya seperti berikut :
Embedded CSS
CSS ini menempel diantara tag <head> .. </head>
Sebagai contoh :
- <html>
- <head>
- <style type="text/css">
- p {
- color:red;
- }
- </style>
- </head>
- <body>
- <p>
- Paragraf cara belajar CSS dengan cepat adalah dengan sering berlatih <p>
- </body>
- </html>
Simpan file CSS diatas dengan nama terserahanda.html, kemudian jalankan di Mozilla Firefox atau Browser lainnya.
<style type="text/css">
p {
color:red;
}
</style>
Source kode diatas adalah tag untuk CSS yang akan membuat tag yang didalam paragraf <p> </p> berubah menjadi warna merah.
Untuk tampilannya sebagai berikut :
External CSS
External CSS adalah cara dimana kita nantinya akan membuat file.css sendiri, kemudian memanggilnya dengan link dari tag HTML. Langsung saja saya contohkan dari External CSS.Pertama buatlah satu Folder. Buatlah halaman dengan nama style.css simpan kedalam folder yang anda buat tadi, kemudian ketik source code dibawah :
- #kotak1 {
- background-color:red;
- width:200px;
- height:200px;
- float:left;
- }
#kotak1 {
background-color:red;
width:200px;
height:200px;
float:left;
}
Pengertian source code diatas adalah :
#kotak1 = nama id
background-color:red; = membuat background menjadi warna merah
width:200px; = membuat panjang dengan ukuran 200px
height:200px; = membuat lebar kebawah dengan ukuran 200px
float:left; = posisi objek berada di kiri
Untuk bisa menampilkan kita harus memanggil file .css yang telah dibuat tadi. Buatlah satu file dengan nama index.html. Kemudian tuliskan source code dibawah ini :
- <html>
- <head>
- <link rel="stylesheet" href="style.css" type="text/css">
- </head>
- <body>
- <div id="kotak1">
- </div>
- </body>
- </html>
<link rel="stylesheet" href="style.css" type="text/css"> = memamnggil file style.css
Masukkan kedua file tersebut ke dalam satu folder. Jika file style.css dan index.html sudah ada di dalam satu folder langkah selanjutnya adalah jalankan file index.html di Mozilla Firefox atau Browser lainnya.
Untuk tampilannya sebagai berikut :
Minggu, 06 April 2014
Pertemuan 5 - HTML5
PENGENALAN HTML5
HTML5 merupakan sebuah bahasa markah untuk
menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti
dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011
masih dalam pengembangan.
Tujuan utama pengembangan HTML5 adalah untuk
memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah
dibaca oleh manusia dan juga mudah dimengerti oleh mesin.
HTML5 baru mencuat pada April 2010 setelah CEO Apple
Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash
sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten
apapun di web."
1.
DOCTYPE UNTUK HTML5
DOCTYPE adalah instruksi untuk web browser tentang apa versi
bahasa markup halaman yang ditulis. Deklarasi DOCTYPE mengacu pada Document
Type Definition(DTD).DTDmenetapkan aturan untuk bahasa markup,
sehingga browser dapat membuat konten halaman tersebut dengan benar. Penggunaan
DOCTYPE pada html5 lebih di sederhanakan.
Contoh
Penggunaan:
|
<!DOCTYPE
html>
<html>
<head>
<meta charset=”UTF-8”
<title>Judul pada dokumen</title>
</head>
<body>
Isi
dokumen...
</body>
</html>
|
2. PENJELASAN TAG-TAG HTML5
- <header>, digunakan untuk area header(bagian atas sebuah
halaman web).
- <article>,
untuk tempat meletakkan artikel atau
tulisan dihalaman web.
- <aside>,
digunakan sebagai penambah informasi
utama didalam halaman web. Biasanya berupa peringatan, catatan, dll.
- <section>,
untuk menentukan seksi-seksi
dokumen. Misalnya bagian yg mendefinisikan sebagai profil, kontak, berita, dan
sebagainya.
- <figure>,
Menentukan konten mandiri, seperti
diagram, foto, daftar kode, dll
- <figcaption>,
Mendefinisikan caption untuk elemen
<figure>
Contoh Penggunaan:
|
<!DOCTYPE
html>
<html>
<head>
<meta charset=”UTF-8”
<title>Fitur HTML</title>
</head>
<body>
<header>
<h2>
Tutorial HTML5</h2>
</header>
<article>
Web
hypertext aplication teknologi working group(WHATWG) memulai membuat standar
baru ini pada tahun2004 ketika konstorium w3c sedang fokus pada pengembangan
XHTML2.0 di masa depan sementara HTML 4.01 belum ada perubahan sejak tahun
2000<br/>
<b>sejak
tahun 2009</b>,w3c & XHTML bekerja sama dlm pengembangan
HTML<br/>
Dibawah
ini logo HTML5 yaitu:
</article>
<footer>
<p><h4>copyright
©2004 admin</h4></p>
<footer>
</body>
</html>
|
3.
VIDEO
Digunakan untuk memasukkan video,
misalnya ingin memutar video kedalam halaman web.Pada versi HTML sebelumnya
untuk memutar video pada sebuah web menggunakan plugins tambahan yang
biasa disebut flash Player.
- Tag Video Pada HTML5, setidaknya ada 3 jenis format
videoyang mendukung yaitu :
a. Ogg(File Ogg
dengan Video Codec Theora dan Audio Codec Vorbis) (.ogg)
b. MPEG4(File MPEG4 dengan Video Codec H.264
dan Audio Codec AAC) (.mp4)
c. WebM(File WebM
dengan Video Codec VP8 dan Audio Codec Vorbis)(.webm)
d. Apabila anda mempunyai video dengan format video bukan
ogg, mp4, dan webm. Anda bisa menggunakan aplikasi video converter salah
satunya miro video converter. Tag <video> Sintaks
Penulisanya :
|
<video
src="judulvideo.ogg" controls="controls">
</video>
|
atau
|
<videocontrols="controls"><source
src="judulvideo.webm" type="video/webm"></
video>
|
4. AUDIO
Digunakan untuk memasukkan suara/audio,
misalnya ingin memutar lagu kedalam halaman web.Ketika di generasi sebelumnya
(HTML 4.01) memasukkan audio ke dalam web masih harus menggunakan flash.
Tag Audio Pada HTML5, setidaknya ada 3 jenis format audioyang
mendukung yaitu:Ogg, MP3, Wav.
Sintaks Penulisanya :
|
<audio
controls="controls"><source src="judullagu.mp3"
type="audio/mp3"></audio>
|
5.
INPUT FORM BARU DI HTML5
Macam -macam
jenis input form baru di HTML5 yaitu:
a. email
b. url
c. number
d. range
e. Date pickers (date, month, week, time, datetime,
datetime-local)
f. search
g. color
h. tel (tipe ini belum support jadi tidak ada perubahan)
Sintaks
Penulisanya :
|
<input type="jenis"/>
|
Sabtu, 05 April 2014
Pertemuan 4 - Form dan Input HTML
Form dan Input HTML
Form
merupakan salah satu elemen HTML yang
digunakan untuk mendapatkan masukan dari
pengguna web. Pengguna web dapat memasukkan input
melalui halaman-halaman HTML. Umumnya pengolahan
form dilakukan pada server dengan
menggunakan skrip yang bersifat server-side
seperti PHP, ASP dan lain sebagainya.
). Untuk membuat form digunakan tag awal
<form> dan tag penutup </form>.
Sintaks
penulisannya :
<form
action=”url” method=”get|post”>
</form>
Jenis
masukan dalam satu formulir dibedakan menjadi :
Text
digunakan
untuk mengisi suatu nilai dapat berupa teks atau angka.
Radio
elemen isian
berupa pilihan dimana hanya satu pilihan yang dapat dilakukan.
Checkbox
elemen yang
menyediakan beberapa pilihan bisa lebih dari satu.
List elemen
pilihan dalam bentuk daftar.
Button elemen berupa tombol untuk
melakukan suatu proses.
Submit
elemen
tombol yang digunakan untuk memanggil url.
Reset elemen tombol yang digunakan untuk
mengembalikan kondisi awal.
Image digunakan sebagai pengganti
button, berupa gambar yang dapat melakukan proses.
Textarea elemen yang dapat menampung
kumpulan teks ketikan dari user.
File elemen button yang dapat memanggil
file atau gambar dari storage.
Password
elemen berupa teks yang khusus digunakan untuk mengisi password.
Tag
<TEXTAREA>
Tag <TEXTAREA>
digunakan untuk membuat sebuah kotak teks multi baris. Tag ini mempunyai
beberapa
atribut, yaitu :
Name:
Mendefinisikan nama Objek Area
Rows:
Menentukan Jumlah baris text area
Cols
: menentukan lebar text
area
Contoh:
<html>
<head
>
<title>Contoh
Tag Textarea dan Tag Select</title> </head>
<body>
<table
width="100%" >
<tr>
<td>Pilih
Jenis Kendaraan </td>
<td><select
name="motor">
<option
value="yamaha">Yamaha</option >
<option
value="honda">Honda</option >
<option
value="suzuki">Suzuki</option></select></td>
</tr>
<tr>
<td>
Alamat </td>
<td><textarea
name="alamat" cols="55"
rows="5"></textarea></td>
</tr >
</table
>
</body>
</html
>
Hasil:
Tag
<INPUT>
Tag
<INPUT> digunakan untuk membuat komponen-komponen yang digunakan
untuk meminta informasi dari user, misalnya
kotak teks, kotak pilihan, tombol dan
lain-lain. Tag ini tidak memerlukan tag penutup.
Tipe input
yang dapat dibuat adalah :
Text : digunakan untuk membuat kotak teks
Password : digunakan
untuk membuat kotak teks, tetapi semua
karakter akan ditampilkan dengan tanda *.
Check Box : digunakan untuk membuat suatu
daftar pilihan yang dapat dipilih lebih dari satu.
Radio : digunakan untuk membuat suatu
daftar pilihan yang hanya dapat dipilih satu saja.
File : digunakan untuk memanggil file atau gambar dari
storage.
Hidden : Digunkan
untuk mengirim data ke suatu aplikasi yang tidak diinginkan untuk dilihat
oleh browser.
Reset : digunakan untuk membuat tombol yang fungsinya untuk
menghapus semua isian form yang telah diberikan.
Submit : digunakan
untuk membuat tombol yang fungsinya untuk mengirimkan data form agar diolah.
Contoh:
<html>
<head
>
<title>Input
Data Berita</title>
</head
>
<body
text="#0000FF" >
<h2>Tambah
Berita</h2>
<form
method="post" action="#" enctype="multipart/form -data">
<table
width="100%">
<tr>
<td>Judul</td>
<td> :
<input type="text" name="judul"
size="60"/></td>
</tr>
<tr>
<td>Kategori</td>
<td>
:<select name="kategori"
>
<option
value="kategori_berita" selected>- Pilih Kategori </option>
<option
value="komputer">Komputer
<option
value="ekonomi">Ekonomi
<option
value="pendidikan">Pendidikan
</select>
</td>
</tr>
<tr>
<td>Headline</td>
<td> :
<input type="radio" name="headline" value="Y" checked/>Y
<input
type="radio" name="headline" value="N"/>
N</td>
</tr>
<tr>
<td>Isi
Berita</td>
<td> :
<textarea name="isi_berita" cols="45"
rows="6"></textarea>
</td>
</tr>
<tr>
<td>Gambar</td>
<td> :
<input type="file" name="fupload"
size="40"></td>
</tr>
<tr>
<td
colspan=2>
<input
type="submit" value="Simpan"/>
<input
type="reset" value="Reset"/>
</td>
</tr>
</table>
</form>
</body>
</html>
Hasil:
Langganan:
Postingan (Atom)