MODUL PRAKTIKUM TIK PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI UNIVERSITAS ISLAM...

MODUL PRAKTIKUM TIK

PRAKTIKUM WEB

Disusun oleh:

Asisten Praktikum TIK TA 2012/2013

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS ISLAM NEGERI SUNAN KALIJAGA

YOGYAKARTA

2012

Apa itu Website ?

WEBSITE adalah sekumpulan halaman informasi yang disediakan melalui jalur internet

sehingga bisa diakses di seluruh dunia selama terkoneksi dengan jaringan internet. Website

merupakan sebuah komponen yang terdiri dari teks, gambar, suara animasi sehingga menjadi media

informasi yang menarik untuk dikunjungi oleh orang lain.

Dalam membangun sebuah website kita perlu mengetahui beberapa bahasa pemrograman

web seperti HTML, CSS, PHP, dll. Pada praktikum kali ini kita akan mengenal tiga bahasa

pemrograman yang telah disebutkan tadi.

A. HTML

HTML singkatan dari Hyper Text Markup Language adalah file teks atau file ASCII yang

berisi instruksi/script kepada web browser untuk menampilkan suatu tampilan grafis dari

sebuah halaman web. Didalam file HTML terdapat beberapa "tag" atau kode-kode yang

dimengerti oleh web browser dan dapat menampilkannya di layar monitor.

File HTML dapat dibuat dengan aplikasi text editor apapun di sistem operasi apapun, antara

lain : Notepad di Windows, emasc atau vi di Unix atau SimpleText di Macintosh. File HTML

ini juga bisa dibuat di aplikasi word processor apapun asalkan saat menyimpan file tersebut

disimpan dengan format text-only.

Salah satu kelebihan file HTML adalah cross platform, artinya file HTML dapat ditampilkan di

beberapa Operating System (OS) yang berbeda dan memiliki tampilan yang sama walaupun

saat pembuatannya menggunakan satu OS tertentu saja.

TAG-TAG HTML

Command HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan dari

document HTML.

<begin tag> </end tag>

Contoh: Setiap document HTML di awali dan di akhiri dengan tag HTML.

<html>

</html>

Tag tidak case sensitive, jadi anda bisa gunakan <HTML> atau <html> keduanya

menghasilkan output yang sama.

Bentuk dari tag HTML sebagai berikut:

http://faculty.petra.ac.id/dwikris/docs/desgrafisweb/html_dasar/1-apaitu_taghtml.html

<element attribute = value>

Element : nama tag

Attribute : atribut dari tag

Value : nilai dari atribut.

Contoh:

<body bgcolor=red>

body merupakan element, bgcolor (Background) merupakan atribut yang memiliki nilai red.

STRUKTUR HTML DOCUMENT

Document HTML bisa di bagi mejadi tiga bagian utama:

1. HTML

Setiap document HTML harus di awali dan di tutup dengan tag HTML <html></html>

tag HTML memberi tahu browser bahawa yang di dalam kedua tag tersebut adalah document HTML.

2. HEAD

Bagian header dari document HTML di apit oleh tag <head></head> di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser. Selain itu Bookmark juga megunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan “title” sebagai bookmark dan juga untuk keperluan pencarian (searching) biasanya title di gunakan sebagai keyword. Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi tertentu mengenai document HTML, anda bias menentukan author name, keywords, dan lainyan pada tag META. Contoh: <META name=”Author” contents=”Bocah Gunung”>

Author dari document tersebut adalah “Bocah Gunung”

3. BODY

Document body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page.

BASIC HTML ELEMENT

1. Block Level Element

Block level element yang sering di gunakan : Heading (H1 sampai H6) Contoh:

2. Paragraf (P)

Contoh:

3. List Item(LI)

List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list). Ada tiga macam list yang bisa anda tambahkan ke document HTML: a. Unordered List (Bullet) :

Tag Attribute Value Description

<ul> type square Bullet Kotak

disc Bullet Titik

circle Bullet Lingkaran

Contoh :

b. Ordered List (Numbering)


<ol> start n Begin number

type I Upper Roman

i Lower Roman

A Uppercase

a Lowercase

Contoh:

c. Definition List

Definition List terdiri diapit oleh tag <DL> … </DL> dan <DT> tag menentukan definition term serta <DD> tag menentukan definition itu sendiri.

Contoh:

4. Horizontal Rules(HR)

Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam document HTML.


<hr> width 100% Default

size n px Angka dalam pixel

align center Posisi tengah

left Rata kiri

right Rata kanan

color red, yellow, dsb (#000000)

warna garis

Contoh:

5. Pemformatan Page

a. Break

Tag <BR> di gunakan untuk memulai baris baru pada document HTML, tag ini fungsinya mirip dengan carriage return. Contoh:

b. Font

Dengan tag <FONT> anda bisa menentukan format tampilan font dalam document HTML seperti color, size, style dan lainya.

Contoh:

c. Color

Color merupakan attribute yang bisa anda tambahkan pada beberapa element seperti body, font, link dan lainya. Color di bagi dalam tiga ketegori warna primer yaitu red, green dan blue. Masing-masing color didefinisikan dalam dua digit hexadecimal number. #RRGGBB

Hexadecimal Color

#FF0000 Red

#00FF00 Green

#0000FF Blue

#000000 Black

#FFFFFF White

d. Alignment

Align attribute digunakan untuk menentukan perataan object dalam document HTML baik berupa text, object, image, paragraph, division dan lain-lain.

Value Description Left Rata kiri Right Rata kanan

Center Rata tengah

Justify Rata kanan kiri

e. Format text Physical Formatting

Tag Description

<B>…</B> Bold text

<I>…</I> Italic text

<U>…</U> Underline Text

<BIG>…</BIG> Untuk ukuran yang lebih besar dari normal

<SMALL>…</SMALL> Untuk ukuran yang lebih kecil dari normal

<STRIKE>…</STRIKE> Untuk memberi garis di tengah text

<SUP>…</SUP> Superscript text

<SUB>…</SUB> Subscript text

<CENTER>…</CENTER> Center document

Logical Formatting

Tag Description

<EM>…</EM> Text miring / <I>

<STRONG>…</STRONG> Text tebal / <B>

<DEL>…</DEL> Mencoret text / <STRIKE>

<INS>…</INS> Underline text / <U>

Quotes / Indentasi

Untuk membuat indentasi paragraph kita bisa menggunakan BLOCKQUOTE, untuk indentasi pendek anda bisa gunakan element Q. Contoh :

6. Preformatted text

Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya. Contoh:

7. Grouping element

Tag DIV dan SPAN di gunakan untuk mengelompokkan elementelement HTML. Span digunakan untuk mendefinisikan inline content sementara div digunakan untuk block-level content. Contoh:

B. CSS

Apa Itu CSS? CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan. Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur

format / tampilan suatu halaman HTML. Keuntungan Penggunaan CSS Jika anda memiliki beberapa halaman website dimana anda menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet. Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet.Jadi, keuntungan menggunakan CSS, lebih praktis! Kekurangan Penggunaan CSS Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser. Syntax CSS Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value. Format penulisan kalimat CSS:

selector { property: value }

Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat. Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur. Value adalah nilai dari pengaturannya. Contoh Syntax:

h1 { color: red }

Contoh di atas menunjukkan

Selector: h1

Property: color

Value: red Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke warna merah (red). Pengelompokan Selectors Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua menggunakan warna merah, maka kode CSS nya menjadi:

h1,h2,h3 { color: red }

Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma. Penggunaan Banyak Properties Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ). Contoh:

h1,h2,h3 { color:red; font-family:arial; font-size:150%;

}

CSS Comment Kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk member catatan pengingat. Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda.

/* Tulis komentar anda di sini */ p{

text-align: justify; /* Tulis komentar anda di sini */ color: blue; font-family: arial;

}

Pemasangan CSS didalam halaman HTML Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu:

Inline CSS

Embed atau memasang kode css ke dalam halaman HTML

Link ke external CSS

Import CSS file Dalam modul ini akan dibahas pemasangan CSS melalui Inline CSS dan Embed atau memasang CSS dalam halaman HTML Inline CSS Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS. Cara ini sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja. Contoh:

<p style=”color:blue”> Isi paragraf.

</p> Pada contoh di atas, elemen paragraf <P> di format agar tulisannya menggunakan warna biru. Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya. Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntax property: value. Embedded CSS Anda bisa juga menempelkan kode CSS di antara tag <head> dan </head> atau dapat juga diadalam body <body>dan</body>. Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>. Contoh:

<head> <style type="text/css" media=screen>

p {color:blue;} </style>

</head>

Dalam contoh di atas semua elemen <P> dalam halaman web tersebut akan diformat menggunakan font berwarna biru. Class dan ID Selektor Pada contoh-contoh di pelajaran sebelumnya, anda melihat penggunaan tag HTML sebagai selector. Misalkan anda membuat kode CSS untuk tag <h1>. Sekarang bagaimana jika anda ingin memformat tag <h1> dengan warna / property berbeda? Misalkan, anda ingin tag <h1> di kolom kiri berwarna biru sementara tag <h1> di kolom tengah berwarna hitam. Untuk kasus seperti ini, anda bisa menggunakan Class selector dan ID selector. Class Selector Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali. Cara penulisan Class Selector:

.nama-class {property:value;}

Untuk menempelkan class ke dalam tag HTML:

taghtml.nama-class {Property:value;}

Perhatikan tanda titik di setiap awal nama Class. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div class=nama-class> dan di akhiri dengan tag </div>. Contoh: Penulisan kode CSS:

.tengah {text-align:center;} p.tengah {color:red;} h1.kiri {color:blue;} h1.tengah {color:black;}

Pemakaian kode CSS <div class=tengah>

<p>Teks tengah akan berwarna merah.</p> <h1 > Tag H1 tengah akan berwarna hitam</h1>

</div> <h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>

Hasil:

Teks tengah akan berwarna merah.

Tag H1 tengah akan berwarna hitam Tag H1 kiri akan berwarna biru ID Selector ID Selector mirip dengan Class selector. Untuk membedakannya, gunakanlah ID selector untuk memformat bagian yang hanya muncul satu kali dalam satu halaman web, misalnya untuk memformat bagian menu / sidebar. Cara penulisan ID Selector:

#nama-ID {property:value;}

Untuk menempelkan ID selector ke dalam tag HTML:

taghtml#nama-ID {Property:value;} Perhatikan tanda # di setiap awal nama ID. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div id=nama-ID> dan di akhiri dengan tag </div>. CSS Refference Syntax css dibawah ini baru sebagian kecil dari syntax css yang ada. Silahkan untuk yang lainnya diexplore sendiri :

Syntax Values Default

font-family font yang terinstall Times (Win)

font-style normal | italic | oblique normal

font-variant normal | small-caps normal

font-weight normal | bold | bolder | lighter normal

font-size xx-small | x-small | small | medium | large | x-large | xx-large, atau pt atau %

12 pt

color semua kode warna hitam / #000

background-color semua kode warna putih / #fff

background-image url | none none

background-repeat Repeat | repeat-x | repet-y | no-repeat repeat

background-attachment Scroll | fixed scroll

text-decoration None | underline | overline | line-trough | blink none

text-align Right | left | center | justify left

vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom |

Middle

text-transform None | capitalize | uppercase | lowercase none

border-colapse None | colapse none

Margin (left,right,top,bottom) Px | em 0px

Padding (left,right,top,bottom) Px | em 0px Contoh:

C. PHP

Apa Itu PHP?

PHP adalah singkatan dari PHP : Hypertext Preprocessor PHP adalah bahasa scripting server-side, artinya di jalankan di server, kemudian

outputnya dikirim ke client (browser) PHP digunakan untuk membuat aplikasi web PHP mendukung banyak database (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL,

Generic ODBC, dll.)

Instalasi PHP

Untuk menjalankan PHP anda perlu Web Server seperti Apache, PHP Interpreter, MySQL sebagai database. Saat ini ada banyak paket PHP+Apache+MySQL yang memudahkan anda untuk instal PHP dengan mudah. Silahkan Download di salah satu situs-situs berikut, kemudian ikuti petunjuk instalasi masing-masing paket.

WAMP (http://www.wampserver.com/en/download.php) XAMP (http://www.apachefriends.org/en/xampp.html)

Kode PHP di jalankan di browser, terlebih dahulu harus dijalankan Apache Web Server, kemudian di browser dijalankan di localhost.

Sintaks PHP

Kode PHP di tulis di teks editor, sama halnya seperti HTML. Kode PHP bisa digabung atau disisipkan dengan kode HTML, Javascript, CSS dan script lainnya untuk membuat halaman web.

Penulisan kode PHP harus di awali dengan <?php dan diakhiri dengan ?> Untuk mengakhiri baris kode PHP harus diberi tanda titik koma (;) di akhir baris kode

PHP Untuk penulisan komentar di awali tanda // atau antara /* dan */ Contoh : <html> <body> <?php echo "Hello World"; //ini komentar, tidak akan dieksekusi ?> </body> </html>

Pada contoh di atas, di browser akan tercetak tulisan Hello World Contoh 2:

<?php $a=”5″; $b=”2″; $hasil=$a+$b; Echo($hasil); &hasil=$a*&b; Echo “<br><br>$hasil”; Echo “<br><br>”; if ($a> $b) {echo(“a lebih besar dari pada b “);} elseif ($a<$b); {echo ($a lebih kecil b”);} else {echo ($a sama dengan b”);} ?>

http://www.wampserver.com/en/download.php

http://www.apachefriends.org/en/xampp.html

Sumber :

http://caramembuat.mywapblog.com/apa-itu-website-mengenal-definisi-dan-pe.xhtml

http://faculty.petra.ac.id/dwikris/docs/desgrafisweb/html_dasar/0-apaitu_html.html

http://blog.codingwear.com/panduanphp/pengenalanphp.html

http://blog.uad.ac.id/nurandrisusanto/2011/10/13/contoh-php-penjumlahan-dan-

perkalian/

modul pemrograman web 2011 saintek UIN Sunan Kalijaga

MODUL PRAKTIKUM TIK PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI UNIVERSITAS ISLAM...

Documents

Transcript of MODUL PRAKTIKUM TIK PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI UNIVERSITAS ISLAM...