Rangkuman Praktikum Pemrograman Berbasis Web
A.
Dasar Teori
HTML adalah, (Hypertext Markup Language) sebuah bahasa standar yang digunakan oleh browser internet untuk membuat halaman dan dokumen pada sebuah Web yang kemudian dapat diakses dan dibaca layaknya sebuah artikel. HTML juga dapat digunakan sebagai link-link antara file-file dalam situs atau dalam computer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet.
Standar minimum elemen HTML adalah:
·
Document Type Declaration (DTD)
·
Head
·
Body
DTD
Sebagai standar versi dokumen W3C yaitu suatu deklarasi yang digunakan
untuk mengidentifikasi jenis dokumen HTML yang digunakan sehingga browser dapat
menentukan bagaimana memperlakukan kode tersebut.
Contoh DTD
pada HTML versi 4:
<!DOCTYPE HTML PUBLIC "-//W3C/IDTD HTML 4.01 Transitional/lEN" ''http://www . w3.orglTRlhtml4/loose.dtd">
Meta Dokumen
Elemen meta sebagai identitas dari halaman web yang bias a terdiri dari owner, keyword, layout, ataupun inisialisasi proses seperti refresh.
Contoh:
·
<meta
http-equiv="Content-Type" content="text!html;
charset=UTF-8" />
·
<meta
name="keywords" content="blog, web development, indonesia, html,
css" I> • <meta name="description" content="Tentang
dasar-dasar HTML" />
Keterangan
tag-tag lainnya dapat dilihat pada tabel 1 dibawah.
Pada perkembangannya, versi HTML yang mulai dipakai saat ini adalah
HTML5 ( HTML Versi
5) yang merupakan standar baru pada pemrograman web berbasis HTML. HTML5
menawarkan fitur barn dan kemudahan penggunaan tag-tag html. HTML5 menggantikan
versi HTML sebelumnya, HTML 4.01 yang diperkenalkan pada 1999. Sejak saat itu,
telah terjadi banyak perubahan pada web. Walaupun HTML5 masih dalam tahap
pengembangan, namun browserbrowser modern sudah banyak yang mendukung standar
HTML baru ini. Untuk tag-tag html versi sebelumnya masih dipakai di modul ini.
Fitur Baru
HTML5
HTML5
menawarkan banyak fitur yang menarik. Berikut ini adalah beberapa fitur HTML5
yang cukup menarik.
* Tag <canvas> untuk menggambar 2D
* Tag <video> dan <audio> untuk media playback * Mendukung
penyimpanan lokal
* Tag khusus, <article>, <footer>, <header>, <nav>,
<section>
* Kontrol barn pada form, seperti kalender,tanggal, waktu, email, url, dan
search
DasarTeori
Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemrograman. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna table, ukuran border, warna border, warna hyperlink, warna mouse over, spasiantar paragraph, spasiantarteks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalahbahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkankitauntukmenampilkanhalaman yang samadengan format yang berbeda.
Sejarah CSS
Nama
CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat
diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak
(parent-child) pada setiap style. CSS sendiri merupakan sebuah teknologi
internet yang direkomendasikan oleh World Wide Web Consortium atau W3C
padatahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan Netscape
melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir
mendekati dengan standar CSS.
Versi
Untuk
saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan
berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi
kebutuhan terhadap format dokumen agar bisa ditampilkan di printer, sedangkan
CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain
website. CSS3 mendukung penentuan posisi konten, downloadable, huruf font,
tampilan pada table /table layout dan media tipeuntuk printer. Kehadiran CSS
yang ketiga diharapkan lebih baik dari versi pertama dan kedua.
Bagian pertama sebelum
tanda ‘{}’ dinamakan selector,
sedangkan yang diapitoleh ‘{}’ disebut declaration
yang terdiri dari dua unsur, yaitu property dan value. Selector dalam pernyataan di atas adalah h1, sedangkan color adalah property, dan #0789de adalah
value. Selain itu ada tiga metode penulisan CSS atribut, yaitu:
Inline Style Sheet
CSS didefinisikan
langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan
menambahkan atribut style=”…”dalam
tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan
tidak akan memengaruhi tag HTML yang lain.
Embedded Style Sheet
CSS didefinisikan
terlebih dahulu dalam tag <style>
… </style> di atas tag <body>.
Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan
untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang
bersangkutan.
External Style Sheet
Menempatkan aturan CSS
secara terpisah, style shet external terhubung dengan dokumen melalui elemen
head. File style sheet text disimpan menggunakan ekstensi .css.
Syntax CSS
Syntax pada CSS
terdiri dari tiga bagian, yaitu selector,
property dan value
|
Selector
{property: value} |
Bagian selector untuk
menentukan pada elemen/tag HTML apa style tersebut diterapkan. Selector dapat
berupa nama Id elemen atau nama class. Property dapat diisi dengan jenis
warna, ukuran, perataan margin dll, sedangkan value diisi dengan nilai property
nya, misalnya red untuk warna dll. Setiap akhir penulisan property dan value
diakhiri dengan tanda titik koma (semicolon). Tanda ini juga digunakan sebagai
pemisah antar satu property dengan property lain.
|
P{font-family:
“sans serif”} |
Jika Anda ingin
menetapkan lebih dari satu property, maka property harus dipisahkan dengan
titik kome (semicolon). Berikut ini
adalah contoh yang menampilkan pendefinisian elemen paragraph agar rata tengah
serta warna text nya adalah merah:
|
|
Class Selector
Dengan menggunakan
class selector, kita dapat mendefinisikan style yang berbeda untuk elemen HTML
yang sama. Secara umum syntax style untuk class.
Id selector
Kita
juga dapat mendefinisikan style dengan menggunakan id selector. nid selector
didefinisikan dengan menggunakan karakter #.Berikut adalah contoh penggunaan id
selector:
Komentar pada CSS
Komentar digunakan untuk menjelaskan baris kode Anda, sehingga dapat membantu juga suatu hari nanti Anda akan melakukan pengeditan terhadap source code. Sebuah komentar akan diabaikan oleh browser. Komentar pada CSS dimulai dengan dengan /* dan diakhiri dengan */,.
POKOK BAHASAN III
JAVASCRIPT
Dasar
Teori
Javascript
adalah bahasa scrip yang ditempel pada kode HTML dan diproses disisi klient.
Dengan adanya bahasa ini, kemampuan HTML menjadi semakin luas. Contoh: untuk
menvalidasi masukan pada formulir sebelum formulir dikirim ke server.
Javascript
bukan bahasa java dan merupakan dua bahasa yang berbeda. Javascript
diinterpretasikan oleh klient, sedang java dikompilasi oleh program dan hasil
kompilasinya dijalankan oleh clien.
Javascript sebagai bahasa
berorientasikan objek
Properti
Adalah
atibut dari sebuah objek. Contoh: objek mobil mempunyai property warna mobil.
Penulisan:
nama_objek.nama_properti=nilai
window.defaultstatus=”selamat
belajar javascript”
Metode
Adalah
sekumpulan kode yang digunakan untuk melakukan sesuatu tindakan terhadap objek.
Penulisannya:
nama_objek.nama_method(parameter)
document.write(“halo”)
Pokok Bahasan IV
PHP
Dasar Teori
PHP (preprocessor
Hypertext) adalah bahasa scripting
yang menyatu dengan HTML dan dijalankan pada server side. Artinya semua sintaks yang diberikan akan sepenuhnya
dijalankan pada server sedangkan yang dikirimkan ke browser hanya hasilnya saja
berupa HTML. Untuk membedakan perintah HTML dan PHP digunakan tanda <? …
?>atau<?php … ?>
PHP dapat diaplikasikan dengan berbagai macam database, seperti MySQL, PostgreSQL,, Oracle, dan lannya.
Tag dalam php
Banyak cara untuk menyisipkan php dalam script html, ada berbagai macam
bentuk tag yang dapat digunakan, antara lain :
a.
Cara 1
<?php Menandai awal tag
……..
?> Menandai akhir tag
b.
Cara 2
<? Menandai awal tag
……..
?> Menandai akhir tag
c.
Cara 3
<% Menandai awal tag
……..
%> Menandai akhir tag
Cara ini sama dengan
tag pada ASP. Opsi ini bisa dilakukan jika nilai asp_tags pada php.ini bernilai
on.
d.
Cara 4
<script
language=”php”> Menandai
awal tag
……...
</script> Menandai
akhir tag
Ada kalanya sebagai pemrograman, karena banyaknya kode program atau variable dalam program, perlu menandai atau memberi komentar pada program. Komentar pada program merupakan tulisan pada program yang tidak dieksekusi. Pada PHP, ada 3 macam cara penulisan:
1. /*komentar*/
Tulisan apapun yang
berada diantara ‘/*’ dan ‘*/’ akan dianggap sebagai komentar. Cara seperti ini
sangat berguna dan efisien untuk pemberian komentar yang memakan banyak baris.
2. //komentar
Tulisan di baris yang
sama setelah ‘//’ akan dianggap sebagai komentar. Cara ini berguna untuk pemberian
komentar singkat yang tak lebih dari 1 baris saja.
3. #komentar
Sama seperti ‘//’,
tulisan di baris yang sama setelah ‘#’ akan dianggap sebagai komentar. Cara ini
berguna untuk pemberian komentar singkat yang tak lebih dari 1 baris saja.
Modularisasi
Modularisasi dalam pemrograman umum dilakukan dan sangat diperlukan
untuk mempermudah debugging dan pengembangan program. Modularisasi berarti
melakukan perbuatan program berdasarkan modul-modul. Setiap modul dikembangkan
untuk tujuan dan fungsi khusus. Modul dibuat secara general, modul dapat berupa fungsi atau
procedure.
a.
Require
Statement require
digunakan untuk membaca nilai variable dan fungsi-fungsi dari sebuah file lain.
Cara penulisan:
Require(namafile);
Teknik ini cocok untuk membuat template
yang memudahkan proses pengembangan aplikasi dengan menggunakan pola tampilan.
Missal dalam membuat design web yang dilakukan dengan kerja tim, pola dan
gambar-gambar yang dibutuhkan dapat dibuat dengan teknik ini. Statement require
ini tidak dapat dimasukkan dalam suatu struktur looping, misalnya while atau
for. Karena hanya memperbolehkan pemanggilan file yang sama tersebut hanya
sekali saja.
b.
Include
Statement include akan
menyertakan isi suatu file tertentu. Include dapat diletakkan di dalam suatu
looping misalnya dalam statement for atau while. Syntax penulisan: include(namafile);
Komentar
Posting Komentar