Laporan 1

DESAIN WEB Order n sharing Online Shop SHEderhana DENGAN HTML,VRML dan Database Ms.
Access
Disusun Oleh : YASIFA RAKHMA HIDAYANTI 7211040034
PROGRAM STUDI TEKNIK TELEKOMUNIKASI POLITEKNIK ELEKTRONIKA NEGERI SURABAYA SURABAYA 2013
DESAIN WEB
Order n sharing Online Shop SHEderhana DENGAN HTML,VRML DAN DATABASE MS.ACCESS
TUJUAN Setelah membuat aplikasi web ini diharapkan mampu: Membuat tampilan web dengan tag HTML tabel, frame, ,list, entitas karakter dan link Menambahkan image dan aplikasi VRML untuk memperindah tampilan web
DASAR TEORI
I. BASIC TAG HTML 1.1 Struktur HTML Document Document HTML bisa di bagi mejadi tiga bagian utama: o HTML
Setiap document HTML harus di awali dan di tutup dengan tag HTML <HTML> </HTML> o HEAD Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di dalam bagian inibiasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser. Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi tertentu mengenai document HTML, anda bisa menentukan author name, keywords, dan lainnya pada tag META. o BODY
Document body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page. 1.2 Pemformatan Page Break Tag <BR> di gunakan untuk memulai baris baru pada document HTML, tag ini fungsinya mirip dengan carriage return. o Font
Dengan tag <FONT> anda bisa menentukan format tampilan font dalam document HTML seperti color, size, style dan lainya. Contoh:
Color o 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
Alignment
Align attribute digunakan untuk menentukan perataan object dalam document HTML baik berupa text, object, image, paragraph, division dan lain-lain.
1.3 Format text o Physical Formatting
Logical Formatting
Preformatted text
Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya. 1.4 Hyperlink o o Link Address Absolute Address
Merupakan full internet address (URL) yang meliputi protocol, network location dan path dan nama file.
o o
Relatif Address
URL yang tidak menyebutkan protocol dan network locationya ( hanya path dan nama filenya ). Anchor
Anchor tag <A> untuk menentukan hyperlink dalam document HTML. HREF property digunakan untuk menentukan tujuan dari hyperlink tersebut.
1.5 TABLE o Membuat table
Tag <TABLE> digunaka untuk membuat table dalam document HTML , bagian pokok dari table adalah cell yang didefinisikan dengan menggunakan tag <TD>. Berikutnya kalo anda ingin membuat beberapa baris cell dalam table gunakan tag <TR>. o o Menambahkan Heading cell
Untuk menambahkan heading pada table tambahkan tag <TH> pada table yang sudah di buat. Pemformatan table
Untuk memformat perataan text di dalam table anda bisa gunakan attribute Align dan Valign (vertical Alignment)
Merge cell
Tag <TD> memiliki atribut colspan untuk merge column dan rowspan untuk merge baris. 1.6 IMAGE o Format Image
Ada banyak format image, tapi ada tiga jenis format yang paling sering digunakan : 1. GIF (Graphical Interchange Format) (.GIF) 2. JPEG (Joint Photographic Expert Image) (.JPG) 3. PNG (Portable Network Graphics <IMG SRC=URL>
II. PEMROGRAMAN VRML

VRML adalah salah satu bahasa komputer untuk membuat model objek 3 dimensi dalam dunia virtual. Tidak hanya itu, untuk mensimulasi objek yang bergerakpun dapat dilakukan dengan VRML. Virtual Reality Modeling Language, di tahun 1994 VRML versi pertamanya diperkenalkan. VRML, seperti halnya HTML adalah bahasa skrip dalam format teks polos ( ASCII pada versi 1.0 ataupun
utf8 pada versi 2.0). Bedanya VRML digunakan untuk menggambarkan scene 3 dimensi dalam
ruangan virtual. Disebut ruangan virtual karena kita seakan-akan berada dalam ruangan yang bisa melihat objek 3D dari sudut pandang yang kita inginkan, tidak dengan berjalan kaki, tapi dengan memanfaatkan interface komputer dalam berinteraksi dengan monitor, seperti contohnya dengan menggunakan mouse. Dengan versi VRML 2.0 pada tahun 1996, maka terbuka kemungkinan baru bagi penggunaan VRML, seperti yang banyak digunakan adalah animasi. Versi ini sekarang juga disebut dengan standar ISO VRML97 yang merupakan format file grafik 3D standar untuk aplikasi Internet maupun WWW. Isi dari file VRML adalah berupa teks yang dapat dibaca dan dimengerti oleh kita secara langsung (human readable). Maka pada prinsipnya semua editor teks dapat digunakan untuk membangun isi file ini. Bagi yang ingin lebih profesional, dapat menggunakan editor yang dibuat khusus untuk mengedit file VRML, yaitu VrmlPad yang bisa didapatkan dari situs www.parallelgraphics.com/products/vrmlpad. Selain kita (dengan cara doing it by hand), dapat juga digunakan program aplikasi untuk menggenerasi file VRML, biasanya disebut tool authoring VRML. Salah satunya adalah Open Inventor dari TGS, seperti telah disinggung sebelumnya, yang menyediakan tool grafik C++ yang konon paling banyak digunakan di dunia untuk menggenerasi node dari VRML. 2.1 SISTEM KOORDINAT
Untuk menyatakan posisi sebuah benda di dalam ruang, dibutuhkan suatu sistem koordinat yang memiliki pusat koordinat (origin) dan sumbu koordinat (axis). Sistem koordinat yang paling dasar/sederhana adalah kartesian. Koordinat kartesian 3 dimensi yang berpusat di O dan memiliki sumbu x, y dan z. Pada gambar 2.1, titik P dapat dinyatakan dalam x, y dan z. OP adalah jarak titik P ke pusat O.
Gambar 2.1. Koordinat kartesian 3 dimensi (x, y, z) Salah satu hal yang sangat penting dalam membuat dunia virtual adalah mengerti cara kerja sistem koordinat yang digunakan. Sistem koordinat ini dijadikan referensi setiap kali besaran
gerak dilakukan, baik oleh obyek geometri maupun ketika sedang bernavigasi. Kata besaran gerak 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 koordinat kartesius, right-handed, x,y,z. Sumbu x mempunyai arah positif ke kanan, sedang arah positif dari sumbu y adalah ke atas. Sumbu x dan y ini membelah window browser menjadi dua bagian yang simetri, kiri dengan kanan dan atas dengan bawah. Titik origin dari kedua sumbu tersebut berada tepat di pusat browser. Sedang sumbu z mempunyai arah positif dari monitor ke arah mata kita. Gambar 2.2 ilustrasi dari sistem koordinat.
Gambar 2.2. Sistem koordinat VRML (Comp.soft-sys.matlab, 2005) 2.2 TRANSLATION
Translation digunakan untuk menempatkan obyek pada position tertentu di dunia virtual. Sebagai referensi pengukuran digunakan titik origin dari sistem koordinat obyek, seandainya nilai center pada node Transform tidak didefinisikan. Sedangkan bila nilai center ini bukan 0 0 0, maka titik center digunakan sebagai titik referensi yang baru pada pengukuran position. Gambar 2.3 mengilustrasikan proses translation tanpa menggunakan field center.
Gambar 2.3. Translation dari sistem koordinat K0 ke K1
Sistem koordinat K0 adalah sistem koordinat di luar node Transform. Sedang sistem koordinat K1 adalah sistem koordinat di dalam node Transform yang menjadi sistem koordinat lokal yang baru bagi obyek yang didefinisikan di dalam node Transform.
2.3 ROTATION
Pada rotation, sistem koordinat hanya akan diputar dengan sumbu dan nilai putar yang dapat didefinisikan pada field rotation. Sumbu putar ini berupa vektor yang arahnya ditentukan oleh tiga nilai pertama pada variable rotation. Sedang nilai keempat menentukan nilai besarnya putaran. Gambar 2.4 mengilustrasikan proses rotation. Rotasi pada gambar 2.4 adalah rotasi sebesar 45 derajat atau 0,785 radian dengan sumbu putar z, dari sistem koordinat X0, Y0, Z0 (bergaris penuh) ke sistem koordinat X1, Y1, Z1 (bergaris putusputus). Nilai untuk rotasi yang sepadan dengan rotasi di gambar 2.4 adalah 0 0 1 0.785.
Gambar 2.4. Rotation dengan sumbu putar z 2.4 PENSKALAAN
Pada proses translation dan rotation pada gambar 2.3 dan 2.4, sistem koordinat dari obyek selalu dijadikan referensi, karena variabel center tidak didefinisikan. Variabel center akan digunakan pada proses penskalaan. Hal ini dapat pula langsung diterapkan terhadap kedua proses translation dan rotation. Tiga field bertanggung jawab dalam proses penskalaan, yaitu center, scale dan scale. Field scale bisa mengubah ukuran obyek geometri ke arah x, y maupun z dengan menuliskan baris scale x y z. Faktor skala ini harus positif, karena prosesnya akan diterapkan ke kedua arah dari sumbu. Nilai pada variable scale akan dikalikan dengan ukuran obyek yang dihitung dari titik origin obyek yang bersangkutan. Gambar 2.5 menjelaskan proses penskalaan sepanjang sumbu x dan y masing-masing sebesar faktor 2.
Gambar 2.5. Penskalaan sumbu x dan y
Pada gambar 2.6.(a) dan (b) adalah cara memutar sistem koordinat obyek dengan sumbu putar z sebesar 45 derajat. kemudian melakukan penskalaan, misalnya sepanjang sumbu y yang baru. Hasilnya terlihat pada gambar 2.6(c).
(a) Posisi awal
(b) Rotasi 45 derajat (c) Perubahan skala Gambar 2.6. Penskalaan dengan field scale
Untuk proses penskalaan hanya satu arah dapat dicapai dengan field center. Titik center ini menspesifikasikan titik referensi baru (sebagai pengganti titik origin dari obyek geometri yang bersangkutan) sebelum dilakukan proses dengan scale dan scale. Dengan kata lain, titik center ini akan menggantikan fungsi titik origin secara temporar dalam proses translation, rotation maupun penskalaan.
(a) Penskalaan 2 kali (b) Obyek asal (c) Skala diperbesar Gambar 2.7. Proses penskalaan dengan field center
Obyek kotak atau gambar 2.7.(b) adalah obyek yang belum diskalakan. Sedang obyek gambar 2.7.(a) adalah hasil penskalaan sepanjang sumbu x dan y sebesar faktor 2 tanpa field center seperti sebelumnya. Penskalaan ini menghasilkan obyek yang lebih besar dan simetris terhadap sumbu x dan y. Obyek pada gambar 2.7.(c) adalah hasil penskalaan sepanjang sumbu dan dengan faktor yang sama seperti pada gambar2.7.(a). Hanya saja tidak menggunakan titik origin dari sistem koordinat X0,Y0 sebagai referensinya, melainkan memakai titik origin dari sistem koordinat yang baru, yaitu X1,Y1, yang didefinisikan pada field center yaitu -1 -1 0.
2.5 OBYEK GEOMETRI DASAR
Obyek geometri dasar adalah obyek yang simpel dan obyek geometri lanjutan adalah obyek 3D yang lebih kompleks. Obyek geometri dasar terdiri dari node Box, Cone, Cylinder, Sphere, dan Text. Sesuai dengan namanya, node ini dipakai untuk membuat obyek kotak, kerucut, silinder, bola dan text. Field yang dimiliki oleh node ini tentu saja tidak sama, karena untuk membuat obyek yang berbeda ini harus digunakan parameter yang berlainan. Namun yang harus diperhatikan di sini adalah position titik origin dari sistem koordinat obyek. Setiap obyek yang dibuat selalu mempunyai sistem koordinat yang dijadikan referensi setiap melakukan besaran gerak. Node Box Node Box digunakan untuk membuat kotak dengan panjang, lebar dan tinggi. Node ini hanya mempunyai satu field berupa vektor yang menentukan ukuran dari kotak ini.
Gambar 2.8. Obyek kotak dengan ukuran dan sistem koordinatnya

Posisi titik origin dari sistem koordinat berada di pusat dari box, yaitu (0,0,0) dari sistem koordinat lokal. Sedang elemen pertama dari ukurannya adalah panjang pada sumbu x, elemen kedua panjang pada sumbu y dan elemen ketiga panjang pada sumbu z.
Node Cylinder Node Cylinder dipakai untuk membuat obyek silinder. Selain mempunyai field height dan radius sebagai parameter obyek, node ini mempunyai 3 field lainnya masing-masing dari tipe SFBool, yaitu top, bottom dan side yang mengindikasikan apakah sisi yang disebut dalam field nyata atau tidak. Letak sistem koordinat dan parameter geometri dari obyek ini ditampilkan pada gambar 2.9.
Gb 2.9. Obyek silinder dengan ukuran dan sistem koordinatnya
2.6 EKSTRUSI Ekstrusi adalah node yang memungkinkan untuk menentukan bentuk yang sangat kompleks dengan menggunakan point yang sangat sedikit. Dasar bentuk ekstrusi adalah penampang 2-D dari bentuk akhir. Contoh, obyek kubus dengan potongan/sisi penampang adalah persegi. Bagian Cross didefinisikan pada bidang XZ. Cross section untuk kubus dapat didefinisikan seperti pada gambar 2.10.
Gambar 2.10. Penampang 2D
Pada gambar 2.10 arah sumbu Z positif ke bawah, bukan ke atas. Dalam 3D, dengan menggunakan standar bahwa titik yang menuju kita memiliki nilai Z lebih tinggi dari titik lebih jauh. Cross section adalah [ -1 -1, -1 1, 1 1, 1 -1, -1 -1]. Konsep lain yang diperlukan dalam ekstrusi adalah spine. Spine mendefinisikan jalan dimana penampang akan melakukan perjalanan untuk menciptakan shape. Dalam contoh gambar 2.11, mencoba membangun kubus, di mulai dengan titik-titik spine (0, -1,0) dan (0,1,0). Gambar 2.11 menunjukkan spine untuk kubus, jalur masing-masing untuk cross section dan hasil geometri ekstrusi.
(a). Spine pada ekstrusi (b). Hasil geometri ekstrusi Gambar 2.11. Hasil shape dengan ekstrusi
PROGRAM
Main Program : a.html
<html> <head> <title>SHEderhana</title> </head> <frameset rows="180,*" cols="*" frameborder="yes" border="6" bordercolor="#000FFF" framespacing="2"> <frame src="upg.html" name="topFrame" scrolling="NO" noresize> <frameset rows="*" cols="300,*" framespacing="10" frameborder="yes" border="6" bordercolor="#000FFF"> <frame src="left.html" name="leftFrame" scrolling="no" noresize> <frame src="main.html" name="mainFrame"> </frameset> </frameset><noframes></noframes> </body> </html>
Frame Atas Upg.html

<html> <head> <title>Frame Top</title> </head> <body bgcolor="blue" background="UP.jpg" width="1000" height="10" align="center" > <div align="center"><b><font color="#FF00FF" size="24" face="Bleeding Cowboys" align="center">SHE</font><font color="#FF66FF" size="24" face="Bleeding Cowboys" align="center"><font color="#CC33FF">derhana</font></font></b></di v> <MARQUEE direction="right"> <div align="center"><font color="aqua" size="5px"><strong>.<font color="#9966FF">..Make your own beauty by your side...</font></strong></font></div> </MARQUEE> <p align="center"> <b> <SCRIPT LANGUAGE = "JavaScript"> <!-var DD=new Date(); document.write (DD); var tanggal=DD.getDate(); //--> </SCRIPT> </b> </p> <div align="center"><a href="main.html" target="mainFrame" title="Home"><font color="#FFFF00" face="Georgia, Times New Roman, Times, serif"><strong><font color="#00CCFF">Home</font></strong></font> </a><font color="#00CCFF" face="Verdana, Arial, Helvetica, sans-serif"> </font><font color="#00CCFF"> </font> & nbsp; & nbsp; <strong><font color="#993399" face="Georgia, Times New Roman, Times, serif"><a href="Images_Slideshow.html" target="mainFrame" title="Gaya Hidup"><font color="#CC00FF">Gaya Hidup </font></a><font color="#CC00FF"> </font></font><f ont color="#CC00FF" face="Verdana, Arial, Helvetica, sansserif"> </font></strong><font color="#CC00FF"> </font> & nbsp; & nbsp; <font color="#66FFFF"><strong><font face="Georgia, Times New Roman, Times, serif"><a href="r_Slideshow.html" target="mainFrame" title="Tips&trik">Woman must know</a> </font></str ong></font> & nbsp; & nbsp; <strong><a href="mmk.html" target="mainFrame" title="Man must know"><font color="#CC0066" face="Georgia, Times New Roman, Times, serif">Man must know </font></a></strong> <strong><a href="form.html" target="mainFrame"><font color="#9900CC" face="Georgia, Times New Roman, Times, serif">Order&Share</font></a></strong> & nbsp; & nbsp; & nbsp; <br> <br> <br> </div> </body> </html>
Frame Kiri Left.html

<html> <head> <title>Left</title> </head> <body background="l.jpg"> <strong><center><font color="pink">Biodata Admin</font></strong></center></strong>
<p><center><img src="me.JPG" width="100" height="120"></center></p> <center> <p>Yasifa Rakhma Hidayanti <br> Mojokerto,7 Januari 1994 <br> EEPIS's student </p> </center> <pre> Menurut Anda tentang wanita Indonesia : <input type="checkbox" name="Hobby" value="Baik">Baik<br> <input type="checkbox" name="Hobby" value="Cukup Baik">Cukup Baik<br> <input type="checkbox" name="Hobby" value="Kurang terdidik">Kurang terdidik<br> <input type="checkbox" name="Hobby" value="Tertindas">Tertindas<br> <input type="checkbox" name="Hobby" value="Kurang Baik">Kurang Baik<br> </pre> </body> </html>
Frame tengah Main.html

(Saat di klik home) <html> <head> <title>Main</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script src="js/jquery-min.js" type="text/javascript"></script> <script src="js/s3slider.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#slider').s3Slider({ timeOut: 3000 }); }); </script> <style type="text/css"> <!-.style2 { font-size: 16px; font-family: "Courier New", Courier, monospace; color: #999999; font-weight: bold; } .style3 {font-size: 16px; font-family: "Courier New", Courier, monospace; color: #000000; fontweight: bold; } --> </style> </head> <body background="u.jpg" bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">  <center>
<div align="center"><embed src="test.wrl" align="middle" width="50%" hight="50%"></div> <br> <br> <p align="center" class="style3">Karena wanita begitu istimewa bukan membingungkan Anda </p> <p align="center" class="style2">Karena wanita begitu berharga namun bukan juga berarti sulit tuk didapatkan </p> <p align="center" class="style3">Karena SHEderhana akan menjawab masalah Anda tentang SHE </p> <br> <br> </body> </html>
Images_Slideshow.html (Saat di klik Gaya hidup)

<!DOCTYPE html> <html> <head> <title> Cara Membuat Images Slideshow Pada Dokumen HTML </title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script src="js/jquery-min.js" type="text/javascript"></script> <script src="js/s3slider.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#slider').s3Slider({ timeOut: 3000 }); }); </script> <style type="text/css"> <!-.style1 { font-family: "Bleeding Cowboys"; font-size: 18px; font-weight: bold; } --> </style> </head> <body bgcolor="blue" background="u.jpg" width="1000" height="10000" align="center" > <table align="center"> <tr> <td height="965"> <div style="width:500px;-moz-border-radius: 5px; border: 1px inset; margin: 0px; padding: 10px 15px;-webkit-border-radius: 5px; border: 1px inset; margin: 0px; padding: 10px 15px;"> style="border:0;" /> <span class="top"><strong>Rak Buku Unik</strong></span> </li> <li class="sliderImage"> <a href="ds.html"><img src="is/4.jpg" alt="4" style="border:0;" /> <span class="bottom"><strong>Menjadi Diri Sendiri di Dunia Kencan Maya</strong></span> </li> <li class="sliderImage"> <a href="gg.html"><img src="is/5.jpg" alt="5" style="border:0;" /> <span class="top"><strong>Gaya Gaul: Menyambut Musim Semi a la Selebriti</strong></span> </li> <li class="sliderImage"> <a href="ide.html"><img src="is/6.jpg" alt="6" style="border:0;" /> <span class="top"><strong>10 Ide Kreatif Wadah Tanaman</strong></span> </li> <div class="clear sliderImage"></div> </ul> </div>  </div> </div> </div>
<div style="textalign:center;background:#EFEFEF;color:white;text -align:center;font-weight:bold;margin:0 0 0px 0;padding:0px 0 0px;border-top:#000 solid 1px;border-bottom:#000 solid 1px;">  <div id="slider"> <ul id="sliderContent"> <li class="sliderImage"> <a href="pd.html"><img src="is/1.jpg" alt="1" style="border:0;"/> <span class="top"><strong>Perawatan Diri: Harga Diri atau Narsisisme?</strong></span> </li> <li class="sliderImage"> <a href="dd.html"><img src="is/2.jpg" alt="2" style="border:0;" /> <span class="top"><strong>Demam Denim</strong></span> </li> <li class="sliderImage"> <a href="ru.html"><img src="is/3.jpg" alt="3"
<p class="style1">Now Update : </p> <table width="533" height="101" border="no" align="center" bordercolor="#FFFFFF"> <tr bordercolor="#FFFFFF"> <th scope="col"><p><a href="pd.html"><img src="is/1.jpg" width="261" height="173"></p> <p>Perawatan Diri: Harga Diri atau Narsisisme?</p></th> <th rowspan="2" scope="col"><div align="center"> <p><a href="dd.html"><img src="is/2.jpg" width="269" height="183"></p> <p>Demam Denim</p> </div> <p><a href="gg.html"><img src="is/5.jpg" width="268" height="168"></p> <p align="center"><strong>Gaya Gaul: Menyambut Musim Semi a la Selebriti</strong></p></th> <th scope="col"><p><a href="ru.html"><img src="is/3.jpg" width="255" height="154"></p> <p>Rak Buku Unik</p></th> </tr> <tr> <th scope="row"><a href="ds.html"><p><img src="is/4.jpg" width="254" height="162"></p> <p>Menjadi Diri Sendiri di Dunia Kencan Maya</p></th> <td><div align="center"> <p><a href="ide.html"><img src="is/6.jpg" width="213" height="169"></p> <p><strong>10 Ide Kreatif Wadah Tanaman</strong></p> </div></td> </tr> </table></td> </tr> </table> </body> </html>
r_Slideshow.html (saat di klik Woman must know)

<!DOCTYPE html> <html> <head> <title> Cara Membuat Images Slideshow Pada Dokumen HTML </title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script src="js/jquery-min.js" type="text/javascript"></script> <script src="js/s3slider.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#slider').s3Slider({ timeOut: 3000 }); }); </script> <style type="text/css"> <!-.style1 { font-family: "Bleeding Cowboys"; font-size: 18px; font-weight: bold; } --> </style> </head> <body bgcolor="blue" background="bg.jpg" width="1000" height="10000" align="center" > <table align="center" bordercolor="#FF0099"> <tr> <td width="569" height="965"> <div style="width:500px;-moz-border-radius: 5px; border: 1px inset; margin: 0px; padding: 10px 15px;-webkit-border-radius: 5px; border: 1px inset; margin: 0px; padding: 10px 15px;"> <div style="textalign:center;background:#EFEFEF;color:white;text -align:center;font-weight:bold;margin:0 0 0px 0;padding:0px 0 0px;border-top:#000 solid 1px;border-bottom:#000 solid 1px;">  <div id="slider"> <ul id="sliderContent"> <li class="sliderImage"> <a href="do.html"><img src="gh/do.png" alt="1" style="border:0;"/> <span class="top"><strong>Do&Don't</strong></span> </li> <li class="sliderImage"> <a href="r.html"><img src="gh/r1.png" alt="2" style="border:0;" /> <span class="top"><strong>6 Bahan Alami Pancarkan Sinar</strong></span> </li> <li class="sliderImage"> <a href="selfie.html"><img src="gh/s0.png" alt="3" style="border:0;" /> <span class="top"><strong>How to Get a Perfect Selfie</strong></span> </li> <div class="clear sliderImage"></div> </ul> </div>  </div> </div> </div> <p class="style1">Now Update : </p> <table width="701" border="5" bordercolor="#FF66FF"> <tr> <th width="100" scope="col"><div align="center"> <blockquote> <p><a href="do.html"><img src="gh/do.png" width="203" height="139"></p> </blockquote> </div></th> <th width="490" scope="col"><p><a href="do.html"><strong>Do&Dont</strong>< /p> <p>Recommended BANGET buat para mahasiswi yang akan menjadi/ sedang menjadi JobSeeker </p></th> </tr> <tr> <th scope="row"><a href="r.html"><img src="gh/r1.png" width="188" height="145"></th> <td><div align="center"><a href="r.html"><strong>6 Bahan Alami Pancarkan Sinar</strong></div> <p align="center">Karena berkilau bisa dari mana saja </p></td> </tr> <tr> <th scope="row"><a href="KUL.html"><img src="gh/kul.png" width="211" height="181"></th> <td><a href="KUL.html"><p align="center"><strong>Cantik tapi Simple di kampus ? GAMPANG!!</strong></p> <p align="center">Cantik =! norak. <em>Remember it ! </em></p></td> </tr> <tr> <th scope="row"><a href="selfie.html"><img src="gh/s0.png" width="233" height="130"></th> <td><a href="selfie.html"><p align="center"><strong>How to Get a Perfect Selfie</strong></p> <p align="center">Kini bukan tergantung seberapa cantik kita tapi seberapa kita membuat diri kita untuk cantik </p></td> </tr> <tr> <th scope="row"><a href="tips.html"><img src="gh/tips.png" width="245" height="152"></th> <td><div align="center"><a href="tips.html"><strong>Tips Cerah tanpa Masalah </strong></div> <p align="center">Cerah belum tentu tak bermasalah, cek this out buat yang ingin aman </p></td> </tr> </table><p class="style1"> </p></td> </tr> </table> </body> </html>
Mmk.html (Saat di klik Man Must Know)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Man Must Know</title> <link href="file://" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-.style1 { font-family: "Bleeding Cowboys"; font-weight: bold; font-size: 24px; color: #FF0066; } .style2 { font-family: "Bleeding Cowboys"; font-size: 24px; color: #0099FF; font-weight: bold; } .style3 { font-size: 24px; font-family: "Bleeding Cowboys"; font-weight: bold; } .style4 { font-size: 36px; font-family: "Bleeding Cowboys"; } .style23 {color: #0000FF} --> </style> <title>Man must know</title> </head> <body bgcolor="blue" background="u.jpg" width="1000" height="10" align="center" > <p align="center" class="style4">Man must know what a little thing SHE need </p> <table width="886" height="217" border="3" align="center" bordercolor="#0099FF"> <tr> <th width="303" bordercolor="#0099FF" bgcolor="#F0F0F0" scope="col"><p><strong><img src="love.jpg" width="200" height="140" /></strong></p> <p class="style1">LOVE</p> </th> <th width="269" bordercolor="#0099FF" bgcolor="#D6F5FC" scope="col"><p><strong><img src="@alilamalang-744x1024.jpg" width="200" height="140" /></strong></p> <p class="style2">SAFENESS</p></th> <th width="288" bordercolor="#000000" bgcolor="#FF99FF" scope="col"><p> </p> <p><strong><img src="Screen_20140311_222024.jpg" width="200" height="140" /></strong></p> <p class="style3">Make her feel complete </p></th> </tr> </table> <div align="center"> <div align="center"><span class="style23"><a href="klik.html" target="mainFrame" title="Click here"><font face="Georgia, Times New Roman, Times, serif"><strong>Click here to learn it more</strong></font></a><font face="Verdana, Arial, Helvetica, sansserif"> </font> </span>&nbsp ; &nbsp ; </div> </body> </html>
(Saat di klik Click here to learn it) Masuk ke file klik.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> <!-.style1 { font-family: Georgia, "Times New Roman", Times, serif; color: #FF00CC; font-weight: bold; } .style2 {font-family: Georgia, "Times New Roman", Times, serif; color: #33CCFF; fontweight: bold; } .style3 {font-family: Georgia, "Times New Roman", Times, serif; color: #6600CC; fontweight: bold; } .style4 { font-family: "Bleeding Cowboys"; color: #FF0000; font-weight: bold; font-size: 36px; } body { background-color: #EAEAEA; } --> </style> </head> <body> <SCRIPT LANGUAGE = "JavaScript"> <!-window.alert("Happy Shopping"); //--> </SCRIPT>
<p align="center" class="style3">These are the answer of what that you must know from her !!</p> <p align="center" class="style2">give your LOVE, make her feel safeness and make her complate with her hijab</p> <p align="center" class="style4">WANNA ??? </p> <p align="center" class="style1">Send your biodata by click "Order&Share" </p> <div align="center"> <table width="200" border="1"> <tr> <th scope="col"><p><img src="html/Hoodie bolak-balik 2 warna ( 45 rb ).jpg" width="206" height="206" /></p> <p>Kode : A </p></th> <th scope="col"><p><img src="html/hoodie.jpg" width="222" height="205" /></p> <p>Kode : B </p></th> <th scope="col"><p><img src="html/Grosir min 37 (min 6)_ grosir 40 (min 3)_ ecer 47.jpg" width="219" height="206" /></p> <p>Kode : C </p></th> <th scope="col"><p><img src="html/Kusut pompom Siapa yg mau 21 rb.jpg" width="224" height="206" /></p> <p>Kode : D </p></th> </tr> <tr> <th scope="row"><p><img src="html/Pasmina Kerut.jpg" width="202" height="179" /></p> <p>Kode : E </p></th> <td><p><img src="html/Ready 15warna.jpg" width="245" height="183" /></p> <p align="center"><strong>Kode : F </strong></p></td> <td><p><img src="html/Ready ORI sirya amalia kerancang by ilham 53.jpg" width="218" height="184" /></p> <p align="center"><strong>Kode : G </strong></p></td> <td><div align="center"> <p><img src="html/shadiyah.jpg" width="196" height="188" /></p> <p><strong>Kode : H </strong></p> </div></td>
</tr> <tr> <th scope="row"><p><img src="html/Siria Ethnic Dayak.jpg" width="205" height="178" /></p> <p>Kode : I </p></th> <td><div align="center"> <p><img src="html/Syira Blaster keren cuy.jpg" width="204" height="182" /></p> <p><strong>Kode : J </strong></p> </div></td> <td><div align="center"> <p><img src="html/syiria kupu barang ori djamin bagus 40 rb reseller.jpg" width="210" height="187" /></p> <p><strong>Kode : K </strong></p> </div></td> <td><div align="center"> <p><img src="html/syiria shiren.jpg" width="189" height="186" /></p> <p><strong>Kode : L </strong></p> </div></td> </tr> <tr> <th scope="row"><p align="center"><img src="html/syiria tulip seri.jpg" width="209" height="199" /></p> <p align="center">Kode : M </p></th> <td><p align="center"><img src="html/syria DG&.jpg" width="242" height="205" /></p> <p align="center"><strong>Kode : N </strong></p></td> <td> <p align="center"><img src="html/bergo lengan casmira.jpg" width="202" height="202" /></p> <p align="center"><strong>Kode : O </strong></p></td> <td> <p align="center"><img src="html/pashmina cashmire.jpg" width="221" height="202" /></p> <p align="center"><strong>Kode : P </strong></p></td></tr> </table> <a href="form.html"> Go to Order&Share </a><br> </div> </body> </html>
Form.html (Saat diklik Order&Share)

<html> <head> <Title> Form </Title> </head> <body> <body background="u.jpg" bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <p align="center"><Font face="Bleeding Cowboys" color="grey" size="7">Order&Share </font> <a href="share.php"><p align="center"><img src="index_03_.jpg" width="128" height="123"> <form action = "share.php" method="post" enctype="MULTIPART/FORM-DATA"> <p align="center"> </p> <tr><td> </td> </tr> </body> </html>
Saat diklik Forum maka akan konek ke share.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Order&Share</title> </head> <body> <body background="u.jpg" bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <p align="center"><Font face="Bleeding Cowboys" color="grey" size="7">Order&Share </font>
<table> <form action = "save.php" method = "post" enctype = "MULTIPART/FORM-DATA"> <tr> <td><label for="Nama"> Nama</label></td> <td><input type="text" name="Nama" id="Nama"></td> </tr> <tr> <td><label for="Usia">Usia (th)</label></td> <td><input name="Usia" id="Usia" type="number"> </td> </tr> <tr> <td><label for="Jenis_Kelamin">Jenis Kelamin</label></td> <td><input name="Jenis_Kelamin" id="Jenis_Kelamin" type="text"> </td> <tr> <td><label for="Email">Email</label></td> <td><input name="Email" id="Email" type="text"> </td> <tr> <td>What Do You Want</td> <td><textarea rows="4" cols="50" id="Whatdoyouwant" name="Whatdoyouwant"></textarea> <label for="Whatdoyouwant"></label> </td> </tr> <tr><td></td> <td> <input type="submit" value="Submit" name="submit"> <input type="reset" value="Reset"> <input type="reset" name="Delete" value="Delete" onClick="parent.location='/share/del.php'";> <input type="reset" name="submit2" value="Show All" onClick="parent.location='/share/testakses.php'";> </td> </tr> </form> </table>
</body> </html>
Pada saat diklik delete maka akan masuk ke Cobadel.html

<html> <head> <title> Halaman Pencarian </title> </head> <body bgcolor="blue" background="UP.jpg" width="1000" height="10" align="center" > <p align="center"><Font face="Bleeding Cowboys" color="grey" size="7">Are You Sure to Delete ? </font> <form name="form1" method="post" action="delnama.php" enctype="multipart/form-data"> <table align="center"> <tr> <td width="48" align="right">EMAIL<b>:</b></td> <td width="250" align="center" valign="bottom"><input name="Email" type="text" size="25" maxlength="35"></td> <td align="center" valign="bottom"><input type="submit" name="delete" value="Delete"> <input type="reset" name="submit2" value="batal" onClick="parent.location='share.php'";></td> <tr> <td></td> <td align="left" valign="bottom"></td> </tr> </table> </form> </body> </html>
delnama.php
<?php error_reporting(E_ALL ^ (E_NOTICE | E_WARNING)); $user = ""; $pass = ""; $conn = odbc_connect("share", $user, $pass); $Nama = $_POST['Nama']; $query = "DELETE FROM share WHERE Nama=('$Nama')"; $hasil = odbc_exec($conn, $query); if ($hasil) echo "Delete data sukses"; else echo "Delete data gagal"; ?>
Pada saat diklik submit akan masuk ke save.php

<?php $user = ""; $pass = ""; $conn = odbc_connect("share", $user, $pass); $Nama = $_POST['Nama']; $Usia = $_POST['Usia']; $Jenis_Kelamin = $_POST['Jenis_Kelamin']; $Email = $_POST['Email']; $Whatdoyouwant = $_POST['Whatdoyouwant']; $query = "INSERT INTO share VALUES ('$Nama', '$Usia', '$Jenis_Kelamin', '$Email', '$Whatdoyouwant')"; $hasil = odbc_exec($conn, $query); if ($hasil) echo "Input data berhasil"; else echo "Input data gagal"; ?>
Pada saat diklik show all maka akan masuk ke testakses.php

<?php $username = ""; $password = ""; $share = odbc_connect("share", $username, $password); if (! $share) die("Database tidak dapat dibuka<br>\n"); $permintaan = "SELECT Nama, Usia, Jenis_Kelamin, Email, Whatdoyouwant " . "FROM share ORDER BY Nama"; $hasil = odbc_do($share, $permintaan); print("<TABLE BORDER=1 align=center>\n"); print("<TR BGCOLOR=PINK><TH>Nama</TH><TH>Usia</TH><TH>Jenis
Kelamin</TH><TH>Email</TH><TH>What Do You Want</TH>"); while (odbc_fetch_row($hasil)) { print("<TR BGCOLOR=AQUA>"); $Nama = odbc_result($hasil, 1); print("<TD>$Nama</TD>"); $Usia = odbc_result($hasil, 2); print("<TD>$Usia</TD>"); $Jenis_Kelamin = odbc_result($hasil, 3); print("<TD>$Jenis_Kelamin</TD>"); $Email = odbc_result($hasil, 4); print("<TD>$Email</TD>"); $Whatdoyouwant = odbc_result($hasil, 5); print("<TD>$Whatdoyouwant</TD>"); print("</TR>\n"); } print("</TABLE>"); odbc_close($share); ?>
V. TAMPILAN Home
Frame atas (upg.html)
Frame left (left.html)
Frame main (main.html)
Gaya Hidup
Woman Must Know
Man Must Know
Saat di klik maka akan muncul javascript seperti :
Setelah javascript diklik OK maka akan muncul tampilan :
Bila ingin melakukan Pemesanan atau Sharing maka di klik Order&Share
Setelah diklik Forum maka web HTML akan terhubung dengan database share.php :
Submit data :
Tanpa input data telah berhasil :
Untuk melihat aktifitas forum klik Show all dan akan terhubung dengan testakses.php dengan tampilan :
Bila ingin melakukan delete data :
Tanda bahwa delete data telah berhasil :
Pengecekan apakah data sudah dihapus :
V. ANALISA Pada praktikum kali ini dicoba untuk membuat desain web dengan menggunakan pemrograman HTML. Tema yang diambil untuk pembuatan web kali ini adalah tentang Online Shop namun tidak hanya berisi tentang jual beli namun juga tentang sharing masalah-masalah soal wanita atau yang menanyakan tentang wanita. Terdapat beberapa file html disini. File utamanya adalah a.html. Dimana didalamnya terdapat syntax : <frame src="upg.html" name="topFrame" scrolling="NO" noresize> upg.html merupakan file web tujuan yang akan ditampilkan pada frame, topFrame merupakan nama dari frame tempat dimana file upg.html akan ditempatkan.Karena pada frame atas ini digunakan scrolling=NO maka frame bagian atas ini tidak dapat discroll. Maksud dali digunakannya upg.html sebagai TopFrame ini adalah file upg.html digunakan sebagai header dari web SHEderhana ini. Dibawah header SHEderhana terdapat sebuah teks berjalan yang berisi tentang sebuah kalimat khas dari web yaitu "..Make your own beauty by your side... <MARQUEE direction="right"> <div align="center"><font color="aqua" size="5px"><strong>.<font color="#9966FF">..Make your own beauty by your side...</font></strong></font></div> </MARQUEE> Dari syntax diatas dapat diketahui bahwa untuk membuat teks bisa berjalan digunakan perintah MARQUEE. Pada upg.html dibawah kata khas dari web terdapat beberapa kata yang mana bila kata tersebut diklik maka akan membuka file html lain yang ditampilkan pada Frame main. Untuk menampilkan data dengan tujuan frame main digunakan syntax :
<a href="form.html" target="mainFrame"><font color="#9900CC" face="Georgia, Times New Roman, Times, serif">Order&Share</font></a>
Pada sisi kiri halaman web terdapat left.html yang berisi tentang biodata shederhana admin dan juga list
Selanjutnya untuk tampilan frame paling besar bila diketik home maka akan muncul main.html yang berisi logo dari web yang bergerak memutar berbentuk box. Dalam hal ini digunakan VRML untuk membuat animasi bergerak dengan bentuk box dengan syntax :
Dari syntax diatas dapat dilihat bahwa dibuat kotak berukuran 6 6 6 artinya panjangnya 6 cm, lebar 6 cm dan tingginya 6 cm. Pada saat diklik Gaya hidup hampir sama dengan Woman must know dimana saat dibuka akan tampak image slide show dengan menggunakan css dan dibawahnya terdapat gambar-gambar dengan memanfaatkan table dimana bila diklik akan membuka file dan melanjutkan membaca lengkap. Sedangkan Pada saat diklik Man must know maka yang muncul pertama adalah 3 gambar berjajar dengan memanfaatkan table, dan saat diklik maka akan muncul Happy Shopping yang memanfaatkan javascript dan kemudian akan muncul barang-barang yang sedang ready untuk diorder Bila berminat untuk order atau ingin melakukan sharing maka diklik Order Share, masuk forum dan komunikasi pengunjung akan terrekam pada database yang telah dibuat oleh admin. VI. KESIMPULAN Pemanggilan file-file HTML berbeda untuk dijadikan menjadi 1 web lebih memudahkan programmer untuk mengidentifikasi kesalahan ataupun dalam melakukan modifikasi file Perintah-perintah dasarHTML dapat dimanfaatkan untuk membuat web sesuai yang kita inginkan MARQUEE : merupakan perintah untuk membuat text menjadi berjalan Pemisahan bagian-bagian pada web tidak hanya bisa memanfaatkan table tapi bisa juga menggunakan table VII. DAFTAR PUSTAKA 1. Zainuddin, Ahmad.Laporan praktikum DESAIN WEB SISTEM INFORMASI PARIWISATA BUDAYA INDONESIA DENGAN HTML DAN VRML. Surabaya. 2. http://plasa.msn/

Laporan 1

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Laporan 1

Diunggah oleh

Hak Cipta:

Format Tersedia

DESAIN WEB Order n sharing Online Shop SHEderhana DENGAN HTML,VRML dan Database Ms.

Disusun Oleh : YASIFA RAKHMA HIDAYANTI 7211040034

1.3 Format text o Physical Formatting

1.5 TABLE o Membuat table

II. PEMROGRAMAN VRML

Gambar 2.2. Sistem koordinat VRML (Comp.soft-sys.matlab, 2005) 2.2 TRANSLATION

Gambar 2.3. Translation dari sistem koordinat K0 ke K1

Gambar 2.4. Rotation dengan sumbu putar z 2.4 PENSKALAAN

Gambar 2.5. Penskalaan sumbu x dan y

(a) Posisi awal

2.5 OBYEK GEOMETRI DASAR

Gambar 2.8. Obyek kotak dengan ukuran dan sistem koordinatnya

Gb 2.9. Obyek silinder dengan ukuran dan sistem koordinatnya

Gambar 2.10. Penampang 2D

Frame Atas Upg.html

Frame Kiri Left.html

Frame tengah Main.html

Images_Slideshow.html (Saat di klik Gaya hidup)

r_Slideshow.html (saat di klik Woman must know)

Mmk.html (Saat di klik Man Must Know)

(Saat di klik Click here to learn it) Masuk ke file klik.html

Form.html (Saat diklik Order&Share)

Saat diklik Forum maka akan konek ke share.php

Pada saat diklik delete maka akan masuk ke Cobadel.html

Pada saat diklik submit akan masuk ke save.php

Pada saat diklik show all maka akan masuk ke testakses.php

Frame left (left.html)

Frame main (main.html)

Woman Must Know

Man Must Know

Saat di klik maka akan muncul javascript seperti :

Setelah javascript diklik OK maka akan muncul tampilan :

Bila ingin melakukan Pemesanan atau Sharing maka di klik Order&Share

Tanpa input data telah berhasil :

Bila ingin melakukan delete data :

Tanda bahwa delete data telah berhasil :

Pengecekan apakah data sudah dihapus :

Anda mungkin juga menyukai