Upload
novrizky-dwi-prasetya
View
228
Download
0
Embed Size (px)
Citation preview
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
7/22/2019 LAPORAN PRAKTIKUM 1- Novrizky (7210040041).doc
2/19
Novrizky Dwi Prasetya/ 7210040041/ 3 D4 TB
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.
7/22/2019 LAPORAN PRAKTIKUM 1- Novrizky (7210040041).doc
3/19
Novrizky Dwi Prasetya/ 7210040041/ 3 D4 TB
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
7/22/2019 LAPORAN PRAKTIKUM 1- Novrizky (7210040041).doc
4/19
Novrizky Dwi Prasetya/ 7210040041/ 3 D4 TB
'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
7/22/2019 LAPORAN PRAKTIKUM 1- Novrizky (7210040041).doc
5/19
Novrizky Dwi Prasetya/ 7210040041/ 3 D4 TB
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 +
7/22/2019 LAPORAN PRAKTIKUM 1- Novrizky (7210040041).doc
6/19
Novrizky Dwi Prasetya/ 7210040041/ 3 D4 TB
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/22/2019 LAPORAN PRAKTIKUM 1- Novrizky (7210040041).doc
7/19
Novrizky Dwi Prasetya/ 7210040041/ 3 D4 TB
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
7/22/2019 LAPORAN PRAKTIKUM 1- Novrizky (7210040041).doc
8/19
Novrizky Dwi Prasetya/ 7210040041/ 3 D4 TB
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 @.
7/22/2019 LAPORAN PRAKTIKUM 1- Novrizky (7210040041).doc
9/19
Novrizky Dwi Prasetya/ 7210040041/ 3 D4 TB
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 +.
7/22/2019 LAPORAN PRAKTIKUM 1- Novrizky (7210040041).doc
10/19
Novrizky Dwi Prasetya/ 7210040041/ 3 D4 TB
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 "+
7/22/2019 LAPORAN PRAKTIKUM 1- Novrizky (7210040041).doc
11/19
Novrizky Dwi Prasetya/ 7210040041/ 3 D4 TB
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
7/22/2019 LAPORAN PRAKTIKUM 1- Novrizky (7210040041).doc
12/19
Novrizky Dwi Prasetya/ 7210040041/ 3 D4 TB
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
=
7/22/2019 LAPORAN PRAKTIKUM 1- Novrizky (7210040041).doc
13/19
Novrizky Dwi Prasetya/ 7210040041/ 3 D4 TB
*"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
7/22/2019 LAPORAN PRAKTIKUM 1- Novrizky (7210040041).doc
14/19
Novrizky Dwi Prasetya/ 7210040041/ 3 D4 TB
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
7/22/2019 LAPORAN PRAKTIKUM 1- Novrizky (7210040041).doc
15/19
Novrizky Dwi Prasetya/ 7210040041/ 3 D4 TB
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
7/22/2019 LAPORAN PRAKTIKUM 1- Novrizky (7210040041).doc
16/19
Novrizky Dwi Prasetya/ 7210040041/ 3 D4 TB
di&
di&
di& idBNf!!terNf!nt '!l!rBNQ666666Nmar?uee*y X'!py5 @
7/22/2019 LAPORAN PRAKTIKUM 1- Novrizky (7210040041).doc
17/19
Novrizky Dwi Prasetya/ 7210040041/ 3 D4 TB
(/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
7/22/2019 LAPORAN PRAKTIKUM 1- Novrizky (7210040041).doc
18/19
Novrizky Dwi Prasetya/ 7210040041/ 3 D4 TB
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+
7/22/2019 LAPORAN PRAKTIKUM 1- Novrizky (7210040041).doc
19/19
Novrizky Dwi Prasetya/ 7210040041/ 3 D4 TB
(aftar 9ustaka:
+. http:lathifsmager.w!rdpress.'!m@