laporan praktikum 1- novrizky (7210040041).doc

7/22/2019 LAPORAN PRAKTIKUM 1- Novrizky (7210040041).doc

1/19

Novrizky Dwi Prasetya/ 7210040041/ 3 D4 TB

INTERNET PROGRAING

Novrizky Dwi Prasetya

7210040041

3 D4 T! TE"E#O$NI#A%I B

POLITEKNIK ELEKTRONIKA

NEGERI SURABAYA

LAPORAN PRAKTIKUM 1


2/19


DESAIN WEB JUAL BELI IKAN HIAS

TUJUAN

Setelah membuat aplikasi web ini diharapkan mampu:

- Membuat tampilan web dengan tag HTML tabel, frame, dan sebagainya- Membuat aplikasi VRML untuk memperindah tampilan web

DASAR TEORI

HTML atau Hyper Text Markup Language. dalah bahasa yang digunakan untuk

mendesain dan memf!rmat halaman web. "ita mungkin sudah mendengar tentang bahasa pr!gram

seperti #, #$$, %a&a, dan Visual basi'. Masing-Masing bahasa ini terdiri dari perintah sintak dan

pr!gramming . Sintak ini adalah yang pr!grammer gunakan untuk memanggil k!de. Sangatlah

penting mengetahui bagaimana 'ara menulis k!de menggunakan bahasa yang rele&an. Lebih dari

itu, kita harus k!n&ensi!nal dengan aturan menyangkut bahasa tertentu.

(idalam HTML, sintak ini disebut tag.Tag ditulis dengan tanda-kurung bersudut. da

kel!mp!k tag yang sudah dikenal didalam HTML, yang mana digunakan untuk berbagai tu)uan.

Sebagai '!nt!h, dalam rangka mem!difikasi satu baris teks ke dalam *!ld, kita menerapkan tag

b!ld dengan suatu tag , kemudian tulis beberapa teks atau suatu paragrap yang berisi beberapateks,dan tutup tag menggunakan tag seperti dalam '!nt!h listing +. Semua tag didalam HTML harus

ditutup menggunakan sintak .Tetapi ada beberapa perke'ualian pada aturan ini, yang mana kita akan

mendiskusikanya nanti. "ita memakai tag ini sebab HTML bukanlah bahasa yang sensitip seperti

#$$ dan %a&a

I. BASIC TAG HTML

1.1 Struktur HTML Document

(!'ument HTML bisa di bagi me)adi tiga bagian utama:

o HTML

Setiap d!'ument HTML harus di awali dan di tutup dengan tag HTML

HTML HTML

o HEAD

Tag heading umumnya digunakan untuk membuat header pada halaman website. Tag untuk

heading terdiri dari tag sampai dengan tag . *agian header dari d!'ument HTML di apit

!leh tag H/(H/( di dalam bagian ini biasanya dimuat tag T0TL/ yang menampilkan

)udul dari halaman pada titlenya br!wser. Header )uga memuat tag M/T yang biasanya di gunakan

untuk menentukan inf!rmasi tertentu mengenai d!'ument HTML, anda bisa menentukan auth!r

name, keyw!rds, dan lainnya pada tag M/T.


3/19


o BODY

(!'ument b!dy di gunakan untuk menampilkan te1t, image link dan semua yang akan di

tampilkan pada web page. /lement ini untuk menampilkan isi d!kumen HTML. Tag b!dy dan

tagb!dy terletak di bawah tag head dan tag head. /lement *2(3 mempunyai attribute-

attribute yang menspesifikasikan khususnya warna dan latarbelakang d!kumen yang akan

ditampilkan pada br!wser.

1. Pem!orm"t"n P"#e Bre"k

Tag *R di gunakan untuk memulai baris baru pada d!'ument HTML, tag ini fungsinya mirip dengan

'arriage return.

o P"r"#r"$%

4ntuk membuat teks dalam sebuah paragraf pada d!kumen HTML digunakan tag

yang

merupakan tag pembuka dan diakhiri dengan tag penutup


4/19


'o(or

#!l!r merupakan attribute yang bisa anda tambahkan pada beberapa element seperti b!dy, f!nt, link dan

lainya. #!l!r di bagi dalam tiga keteg!ri warna primer yaitu red, green dan blue.

Masing-masing '!l!r didefinisikan dalam dua digit he1ade'imal number.)RR**BB

o A(+#nment

lign attribute digunakan untuk menentukan perataan !b)e't dalam d!'ument HTML baik berupa te1t,

!b)e't, image, paragraph, di&isi!n dan lain-lain.

1., &orm"t te-t


5/19


o P%/+c"( &orm"tt+n#

o Lo#+c"( &orm"tt+n#

o Pre!orm"tte0 te-t

Tag 9R/ di gunakan untuk menampilkan te1t sesuai dengan f!rmat aslinya.

1. H$er(+nk

o L+nk A00re//

Hyperlink atau link tautan; adalah sebuah teks atau gambar yang )ika di klik akan membuatbr!wser membuka halaman HTML lain. %ika sebuah link ditun)uk dengan m!use, biasanya kurs!r

akan berubah men)adi bentuk menyerupai tangan ke'il. 4ntuk membuat link digunakan tag .

o A2/o(ute A00re//

Merupakan full internet address 4RL; yang meliputi pr!t!'!l, netw!rk l!'ati!n dan path dan nama file.

o Re("t+! A00re//

4RL yang tidak menyebutkan pr!t!'!l dan netw!rk l!'ati!nya hanya path dan nama filenya ;.

Anc%or

n'h!r tag untuk menentukan hyperlink dalam d!'ument HTML. HR/6 pr!perty digunakan untuk

menentukan tu)uan dari hyperlink tersebut.

1.3 JA4AS'RIPT

%a&aS'ript merupakan bahasa pemr!graman berbasis 'lient, artinya bahasa ini ber)alan pada

sisi br!wser pengguna user; dan bukan pada ser&er. Salah satu keuntungan dari bahasa ini adalah

ringan karena ber)alan pada masing-masing br!wser dan peker)aan tidak di bebankan pada ser&er.

%ika di akses !leh +


6/19


9ada awalnya, %a&aS'ript digunakan dalam dunia web untuk menangani berbagai e&ent

pengguna dan melakukan &alidasi. Menangani e&ent pengguna misalnya menangani ketika

pengguna mengubah pilihan pada '!mb! b!1 sehingga sekarang dikenal dengan istilah %=, yang

memanfaatkan %a&aS'ript sebagai tekn!l!gi utama. begitu )uga dengan &alidasi pada halaman

website. %ika &alidasi dapat di lakukan !leh %a&aS'ript tentu akan efisien karena tidak perlu dilakukan dan di kirimkan ke ser&er. #!nt!h yang sering di pakai adalah untuk mendeteksi inputan

k!s!ng, 'ukup dilakukan !leh %a&aS'ript pada br!wser masing-masing pengguna.

%a&aS'ript biasanya dalam penggunaannya digabungkan dengan HTML, tu)uannya adalah

memperkaya HTML supaya lebih interaktif. 2leh karena itu %a&aS'ript sangat tergantung dengan

br!wser yang digunakan. %ika br!wser tidak mengi)inkan atau ter-disable untuk menggunakan

)a&aS'ript maka aplikasi yang menggunakan )a&aS'ript men)adi tidak maksimal atau bahkan bisa

men)adi err!r.

%a&aS'ript adalah suatu teks tulisan; yang di ba'a !leh br!wser kemudian di ter)emahkan

men)adi sekumpulan perintah yang di)alankan !leh br!wser. Saat ini tekn!l!gi %a&aS'ript sudah

berkembang pesat, baik digunakan untuk %=, Mapping, dan berbagai pustaka >40 seperti %?uery

40 dan sebagainya. %a&aS'ript berperan sebagai bahasa utama di dalam peng!ntr!l dan input

pengguna.

o 'onto% Pen##un""n JA4AS'RIPT

Maka akan mun'ul tampilan :


7/19


1.5 IMA*E

o &orm"t Im"#e

da banyak f!rmat image, tapi ada tiga )enis f!rmat yang paling sering digunakan :

+. >06 >raphi'al 0nter'hange 6!rmat; .>06;

@. %9/> %!int 9h!t!graphi' /1pert 0mage; .%9>;

A. 97> 9!rtable 7etw!rk >raphi's

0M> SR#BC4RLC

1.6 &ORM

o Ke#un""n &orm

*erikut ini beberapa '!nt!h kegunaan 6!rm dalam web:

+. memper!leh data-data user baik nama, alamat dan data lainnya

@. memper!leh inf!rmasi pembelian se'ara !nline

A. memper!leh feedba'k dari user mengenai website anda.

o &orm E(ement

Tag 62RM digunakan untuk membuat f!rm dalam d!'ument HTML.

1.7 TABLE

o Mem2u"t t"2(e


8/19


Tag T*L/ digunaka untuk membuat table dalam d!'ument HTML , bagian p!k!k dari table adalah 'ell

yang didefinisikan dengan menggunakan tag T(.

*erikutnya kal! anda ingin membuat beberapa baris 'ell dalam table gunakan tag TR.

o Men"m2"%k"n He"0+n# ce((

4ntuk menambahkan heading pada table tambahkan tag TH pada table yang sudah di buat.

o Pem!orm"t"n t"2(e

4ntuk memf!rmat perataan te1t di dalam table anda bisa gunakan attribute lign dan Valign &erti'al

lignment;

o Mer#e ce((

Tag T( memiliki atribut co(/$"n untuk merge '!lumn dan ro8/$"n untuk merge baris.

II. P EMROGRAMAN VRML

VRML adalah salah satu bahasa k!mputer untuk membuat m!del !b)ek A dimensi dalam dunia

&irtual. Tidak hanya itu, untuk mensimulasi !b)ek yang bergerakpun dapat dilakukan dengan

VRML. Dalau sebelumnya diperkirakan akan mati, tapi ternyata makin banyak aplikasi lain yang

mengintegrasikan dukungan f!rmat file VRML. Harus diakui masih sedikit t!!l auth!ring yang

mendukung penggenerasian VRML se'ara >40. Mungkin ini salah satu sebab yang membuat !rang

)arang memakai VRML bagi pr!yek multimedianya. 7amun di balik itu, di bidang pendidikan

ternyata banyak pr!yek-pr!yek yang memanfaatkan VRML guna melakukan animasi atau &erifikasi

se'ara &isual. 0ni tentu sa)a tidak lepas dari multifungsi VRML, yang salah satunya memudahkan

presentasi lewat media internet. Selain itu kemampuan VRML &ersi @.


9/19


k!munikasi antara !b)ek satu dengan lainnya )uga belum dimungkinkan. "elemahan ini segera

teratasi dengan dikeluarkannya spesifikasi baru VRML @.< pada tahun +EEG. (engan &ersi baru ini,

maka terbuka kemungkinan baru bagi penggunaan VRML, seperti yang banyak digunakan adalah

animasi. Versi ini sekarang )uga disebut dengan standar 0S2 VRMLE yang merupakan f!rmat file

grafik A( standar untuk aplikasi 0nternet maupun DDD. Se'ara prinsip tidak ada perbedaan antaraVRML @.< dengan VRMLE, sehingga kita akan menyebutnya VRMLE, dan spesifikasi inilah

yang akan digunakan sebagai referensi dalam artikel ini.

Seperti disinggung sebelumnya, isi dari file VRML adalah berupa teks yang dapat diba'a dan

dimengerti !leh kita se'ara langsung human readable;. Maka pada prinsipnya semua edit!r teks

dapat digunakan untuk membangun isi file ini. *agi yang ingin lebih pr!fesi!nal, dapat

menggunakan edit!r yang dibuat khusus untuk mengedit file VRML, yaitu 4rm(P"0 yang bisa

didapatkan dari situs www.parallelgraphi's.'!mpr!du'ts&rmlpad.Selain kitadengan 'ara Id!ing

it by handC;, dapat )uga digunakan pr!gram aplikasi untuk menggenerasi file VRML, biasanya

disebut t!!l auth!ring VRML. Salah satunya adalah 2pen 0n&ent!r dari T>S, seperti telah

disinggung sebelumnya, yang menyediakan t!!l grafik #$$ yang k!n!n paling banyak digunakan di

dunia untuk menggenerasi n!de dari VRML. 0ni tidak mengherankan, karena dilihat dari se)arahnya,

f!rmat yang dipakai !leh VRML adalah hasil tiruan dari f!rmat 2pen 0n&ent!r, dengan berprinsip

pada dont reinvent the wheel. Selain itu Pro9E, salah satu pr!gram aplikasi yang digunakan untuk

mengk!nstruksi di bidang teknik mesin dapat )uga menghasilkan file berf!rmat VRML. 7amun

pada ProE9:::+, hasil eksp!rtnya masih berf!rmat VRML +.


10/19


dengan bawah. Titik !rigin dari kedua sumbu tersebut berada tepat di pusat br!wser. Sedang sumbu

zmempunyai arah p!sitif dari m!nit!r ke arah mata kita!

Salah satu hal yang sangat penting dalam membuat dunia virtualadalah mengerti 'ara ker)a

sistem k!!rdinat yang digunakan. Sistem k!!rdinat ini di)adikan referensi setiap kali besaran gerak

dilakukan, baik !leh !byek ge!metri maupun ketika sedang berna&igasi. "ata Ibesaran gerakC

diartikan sebagai besaran yang berpindah dan yang diam. Termasuk dalam besaran gerak di sini

antara lain position, orientation, gerak translation maupun rotation. VRML menggunakan sistem

k!!rdinat kartesius, right-handed, 1,y,8. Sumbu 1 mempunyai arah p!sitif ke kanan, sedang arah

p!sitif dari sumbu y adalah ke atas. Sumbu 1 dan y ini membelah wind!w br!wser men)adi dua

bagian yang simetri, kiri dengan kanan dan atas dengan bawah. Titik !rigin dari kedua sumbu

tersebut berada tepat di pusat br!wser. Sedang sumbu 8 mempunyai arah p!sitif dari m!nit!r ke arah

mata kita.

2.2 TRANSLATION

Translasi memungkinkan kita untuk menempatkan !b)ek pada p!sisi tertentu di dunia &irtual.

Sebagai referensi pengukuran digunakan titik !rigin dari sistem k!!rdinat !b)ek, seandainya nilaicenterpada n!de Transformtidak didefinisikan. Seandainya nilai centerini bukan 0 0 0, maka

titik center digunakan sebagai titik referensi yang baru pada pengukuran p!sisi. 4ntuk pr!ses

translasi dan r!tasi, agar tidak membingungkan, kita tidak akan menggunakan field center dulu.

Hal ini akan di)elaskan pada bagian penskalaan. 2ke, kembali ke translasi

*"m2"r .,.Translationdari sistem k!!rdinat "< ke "+


11/19


2.3 ROTATION

9ada r!tasi, sistem k!!rdinat hanya akan diputar dengan sumbu dan nilai putar yang dapat

didefinisikan pada field rotation. Sumbu putar ini berupa &ekt!r yang arahnya ditentukan !leh A

nilai pertama pada &ariabel rotation. Sedang nilai ke-F menentukan nilai besarnya putaran.

*"m2"r ..Rotationdengan sumbu putar 8

. PENSKALAAN

"ita akan melakukan penskalaan dari sebuah !b)ek sepan)ang salah satu dari sumbu

diag!nalnya. 2ke, mula-mula kita harus membuat sistem k!!rdinat baru yang salah satu sumbunya

harus berhimpitan dengan sumbu diag!nal !b)ek yang diinginkan. Salah satu 'aranya adalah dengan

memutar sistem k!!rdinat !b)ek dengan sumbu putar z sebesar FJ dera)at. Lalu kita melakukan

penskalaan, misalnya sepan)ang sumbuyyang baru. Hasilnya terlihat pada gambar bagian ketiga.

*"m2"r .3. 9enskalaan sumbu 1 dan y

a; 9!sisi awal b; R!tasi FJ dera)at '; 9erubahan skala

*"m2"r .5. 9enskalaan denganfield scale


12/19


4ntuk pr!ses penskalaan hanya satu arah dapat di'apai dengan field center. Titik center ini

menspesifikasikan titik referensi baru sebagai pengganti titik !rigin dari !byek ge!metri yang

bersangkutan; sebelum dilakukan pr!ses dengan scale danscale. (engan kata lain, titik center ini

akan menggantikan fungsi titik !rigin se'ara temp!rar dalam pr!ses translation, rotationmaupun

penskalaan.

a; 9enskalaan @ kali b; 2byek asal '; Skala diperbesar *"m2"r .6. 9r!ses penskalaan dengan field 'enter

2byek k!tak atau gambar @..b; adalah !byek yang belum diskalakan. Sedang !byek gambar @..

a; adalah hasil penskalaan sepan)ang sumbu x dan y sebesar fakt!r @ tanpa field center seperti

sebelumnya. 9enskalaan ini menghasilkan !byek yang lebih besar dan simetris terhadap sumbu x

dany. 2byek pada gambar @..'; adalah hasil penskalaan sepan)ang sumbu dan dengan fakt!r yang

sama seperti pada [email protected];. Hanya sa)a tidak menggunakan titik !rigin dari sistem k!!rdinat

=


13/19


*"m2"r .7. 2byek k!tak dengan ukuran dan sistem k!!rdinatnya

9!sisi titik !rigin dari sistem k!!rdinat berada di pusat dari box, yaitu


14/19


a;. pinepada ekstrusi b;. Hasil ge!metri ekstrusi

*"m2"r .11.Hasilshapedengan ekstrusi

III. PRO*RAM

HTML

H/(

T0TL/ikan hiasT0TL/

style typeBNte1t'ssN

a:linkO'!l!r:redP

a:h!&erOba'kgr!und-'!l!r:QR247(: Qffffff5T/=T-L0>7: 'enterP

QsideOb!rder-right: teal Fp1 d!tted5*2R(/R-T29:

teal Fp1 d!tted5627T-D/0>HT:b!ld5*#">R247(: Qffffff5T/=T-L0>7: rightP

QsideOb!rder-right: bla'k @p1 s!lid59((07>-

R0>HT: +-

T29: +7: 'enterP

Qd!wnOb!rder-right: red @p1 s!lid59((07>-R0>HT:+-L/6T:

+HT: b!ld5*#">R247(:Qffffff59((07>-*2TT2M: +-T29: +7:

'enterP

style

H/(

*2(3

di& idBNheaderNb

'enter

s'ript typeBNte1t)a&as'riptN&ar HBpr!mptMasukkan nama nda;5

d!'ument.writeNbrN;5

d!'ument.writeNSelamat (atang N$H$N (i T!k! *eli

Satu %ual Seribu N;5

&ar /Bnew (ate5d!'ument.writeNbrN;5

d!'ument.writeNnda mengakses halaman ini pada:

N;5

d!'ument.write/;5


15/19


s'riptb

br

di&

'enter

di& idBN'!ntainerN

di& idBNmenuN

ul

lia hrefBNh!me.htmlNtitleBNH!meNH!meali

lia hrefBNN titleBN>alleryN>aleriaul

lia

hrefBNf!t!.htmlN titleBN0kan LautN0kan Lautali

lia hrefBNf!t!.htmlN titleBN0kan

TawarN0kan Tawarali

lia hrefBNf!t!.htmlN titleBN0kan

HiasN0kan Hiasali

ul

li

lia hrefBNN

titleBN"!ntakNTipsaul

lia

hrefBNN titleBN9akanN9akanali

lia hrefBNN titleBN*udidayaN*udi

(ayaali

ul

lilia hrefBNN

titleBN2rderN2rdera

di&f!ntbrbr

di& idBN'!ntentN

di& 'lassBN'!l+Nbr

b9r!filbbr

img sr'BNa'.)pgN heightBNA


16/19


di&

di&

di& idBNf!!terNf!nt '!l!rBNQ666666Nmar?uee*y X'!py5 @


17/19


(/6 M!&er 2rientati!n0nterp!lat!r O

key < un# "n# 0+2u"t $"0" 2"#+"n 8e2 /e$ert+ 2er+kut =

*"m2"r ,..6!rm daftar pengun)ung


18/19


An"(+/" D"t"

9ada pembuatan web %ual *eli 0kan Hias ini bertu)uan untuk mempermudah para k!nsumen

untuk mendapatkan ikan se'ara !nlen dan memberikan inf!rmasi kepada pengakses web ini tentang

ikan-ikan yang ada di dunia ini. 9ada web ini menggunakan beberapa te!ri seperti HTML,#SS danVRML. 9ada struktur HTML terdiri men)adi A seperti HTML sendiri, Heading dan b!dy. 9ada web

ini dibagi men)adi @ k!l!m selan)utnya )uga terdapat header dan f!!ter. Membagi k!l!m memakai

sintak #SS dengan 'ara membagi dengan frame yang masing Z masing si8e setiap k!l!m diatur

dengan sintak height dan width sehingga pada k!l!m-k!l!m tersebut dapat menampilkan sesuatu

yang dapat menarik. 9ada k!l!m + menampilkan pr!fil yang menginputkan gambar dan )uga

menampilkan suatu te1t input. 9ada k!l!m @ menampilkan suatu suatu gambar &rl yang memakai

sintak embed sr'BN+.wrlN widthB+J< heightB+


19/19


(aftar 9ustaka:

+. http:lathifsmager.w!rdpress.'!m@

laporan praktikum 1- novrizky (7210040041).doc

Documents