Web Design Web Design dandan WebWebProgramingProgramingKATA PENGANTARModu dengan |udu Web Desgn & Web Programng Web Desgn & Web Programng merupakan bahanacuan yang dgunakan sebaga panduan daam proses bea|ar menga|arpesertadkat SekoahMenengahKe|uruan(SMK) untuk membentuksaah satu bagan dar kompetens bdang keahan Teknoog Informasdan Komunkas.Modu n mencakup penguasaan konsepfle-flegrak, memahamdasar-dasar pemrogramanWeb, memaham perntah-perntahpemrogramanWeb, dan bagamana membangun sebuah apkaspemrograman berbass Web. Penyusun SMK NEGERI 3 BATU/TK|/2015 2 PERISTILAHAN/GLOSSARYAnimation: Anmas dar beberapa gambar dam dbuat sepert hdup tanpaada patah-patah daam pergerakannya.Banner: Merupakan kepaa atau bagan atas dar sebuah web ste.Downoad: Proses pengamban e atau mengcopy e.E!e"t: Tndakan yang dker|akan untuk menghauskan ataumemperndah anmas pada obyek.E#ent: Tndakan yang dakukan seteah adanya acton.E$%ort: Merubah |ens format ke bentuk yang an.&ormat: Bentuk ektens dar |ens e.&rame: Bagan dar Tmene.Gro'%ing: Mengumpukan beberapa obyek untuk d|adkan satu.HT(L: Hypertext Markup Language, bahasa penanda hpertextInsert: Memasukkan |ens e kedaam bdang ker|a SWSHmax.Instaation man'a: Petun|uk InstaasKe)*rame: Padadasarnyahampr samadenganframe. Hanyasa|auntukKey frame ebh menun|ukkan untuk satu frame.Li"ense Agreement : Persetu|uan sens penggunaan suatu software tertentu(o#ie: Fe yang dbuat daam SWSHmax.+b,e"t: Benda yang sedang dker|akan daam bdang ker|a SWSHmax.+%erand: data yang doperaskan atau dmanpuas.+%erator: smbo/tanda yang dgunakan untuk meakukan operas-operasmatemats atau operas strng. Pa)er: Untuk memankan anmas yang teah dbuat.Pre#iew: Mehat has yang teah dker|akan.S"ane: Satu move merupakan satu Scane.Sear"- Engine: Mesn bantu pencaran data.Ser#er: Peayan, Komputer nduk yang bertugas untuk meayankomputer-komputer ken.So*tware: Perangkat unak, program yang ber|aan dkomputer.So'r"e .ode : Kode as suatu program Time Line : Gars waktu atau pewaktuan yang terdapat daam SwSHmax.Web design: Pembuatan/desan haaman-haaman web.SMK NEGERI 3 BATU/TK|/2015 3BAB/ I PE(ELA0ARANa. Ren"ana Pemea,aranKompetens : Mengoperaskan Bahasa Pemrograman Berbass Web0enis KegiatanTangga

Wa1t'Tem%atBea,arAasanPer'ba-anTandaTangan G'r'Membuat struktur dokumen dengan bahasa HTMLMengena dan memahamtag-tag HTML yang meput pemformatan dokumen dan penambahan ob|ek, pembuatan tabe dan frame, serta pembuatan link. membuat, membuka, menympan e haaman web. Serta merangkakan tag-tag HTML dan memadukan ob|ek web annya sehngga men|ad haaman web yang menark.Mengena dan memahamscrpt-scrpt dan tur-tur Bahasa Pemrograman Berbass WebMengena dan memahamperntah-perntah dasar daam bass dataMerangkakan perntah-perntah bahasa pemro-graman, bass data dan bahasa pemrograman berbass webMeakukan pembuatan haaman Web dengan bahasa pemrograman berbass web dan bass data. 20enis KegiatanTangga

Wa1t'Tem%atBea,arAasanPer'ba-anTandaTangan G'r'Mempersapkan software bantu daam pembuatan haaman web.Meakukan pembuatan haaman web dengan software bantu. b. Kegiatan Bea,ar3/ Kegiatan Bea,ar 3:Memaham dasar-dasar pemrograman berbass weba/ T','an Kegiatan Pemea,aran1) Mengert tur-tursoftwarebahasapemrogramandanfungsnyauntuk mengeoa haaman web.2) Mampu membuat struktur dokumen dengan tag HTML.3) Peserta dkat dapat mengena dan memaham fungs obyek-obyekwebdantag-tagHTMLdaampembuatanhaaman-haamanwebyang meput: - Memformat dokumen dan menambahkan ob|ek- Membuat tabe dan frame- Membuat dan membangktkan Link4) Peserta dkat dapat mengena dan memaham tur-turpengeoaan e haaman web.5) Pesertadkat dapat meakukankombnas tag-tagHTMLdenganobyek-obyek an untuk membangun haaman web yang dsmpandaam format HTML.b/ 4raian (ateri 3/HT(L (Hypertext Markup Language)HTML atauHypertext MarksupLanguagemerupakansaahsatuformat yangdgunakandaampembuatandokumendanapkasyang ber|aan dhaaman web. Sebenarnya, dokumen HTMLhanyaah sebuah dokumen teks basa dan dsebut sebagaMarkupLanguageyakn bahasayangmengandungtanda(tag) tertentuyang dgunakan untuk mengatur format tampan suatu dokumen.HTTPatauHypertext Transfer Protokolmerupakanprotoko yangdgunakan untuk mentransfer data atau document yang berformatHTML dar webserver ke browser (Internet Exporer, Netscape 5Navgator, NeoPanet, d). Dengan HTTP nah yang memungknkanAnda men|ea|ah nternet dan mehat haaman web. Untuk membuat dokumen HTML hanya dbutuhkan sebuah apkasteks edtor basa. Namunsekarang n d pasaran terdapat banyakseka HTMLauthorng(softwareyangdgunakanuntukmembuatatau mendesan haaman web). Macromeda Dreamweaver, AdobeGoLve, MS FrontPage sekedar contohnya. Tetap tanpa mengetahudasar-dasarnya Anda tdak akan memperoeh has yang maksma.Mengapa? Karena waaupun software-software tersebut semaknmenawarkan kemudahan daammembuat haaman web, tetapbasanya seseorang mashperuuntuk mengedt haaman webtersebut secara manua. Terutama untuk haaman web yang sangatkompek.Daamtutora n Andaakankam a|akuntukmengetahu dasar-dasar dar desan web. Yang dbutuhkan hanya sebuah wordprocessor. AndabsamenggunakanNotepad, WordPad, MSWordatau yang annya.Tapyangpang mudah adaah menggunakanNotepad. Seteah anda memaham betu semua tag-tag dasar htm,dakhr nant kta akan bea|ar membuat haaman webdenganmenggunakan web too.Str'1t'r Dasar HtmDaam penggunaannya, sebagan besar kode HTML harus teretakd antara tag kontaner. Yatu dawa dengan dandakhr dengan(terdapat tanda"/"). Struktur dasardokumen HTML bers eemen-eemen atau tag sebaga berkut:

n bsa detakkan berbagapage attributesepertbg*olor+ba*kgroun!+ text+ link+ ,link+ alink+ leftmargin !an topmargin.1) Ba"1gro'nd= dgunakan untuk mengatur atar beakangdengan gambar/mage.2) Bg"oor = dgunakan untuk mengatur warna atarbeakang dokumen, dengan warna puth sebaga defaut-nya.3) Te1s = dgunakan untuk mengatur warna teksdokumen, dengan warna htam sebaga warna defaut.4) Lin1 = Untuk mengatur warna nk dokumen denganwarna bru sebaga warna defaut5) ?in1 = Untuk mengatur warna vsted nk dokumendengan defaut ungu6) Ain1 = dgunakan untuk mengatur warna actve nkdokumen dengan defaut merah.b/ Heading: 6Hn7//6/Hn7Dgunakanuntukmengatur ukuranhuruf pada header. "n" mempunya na antara 1 - 6 atau antara sampa , dengan merupakan ukuran terbesardan merupakan ukuran terkec. "onto-3@3/-tm

::: Headng Dokumen HTML0::

Headng Tngkat 1 Headng Tngkat 2 Headng Tngkat 3 Headng Tngkat 4 Headng Tngkat 5 Headng Tngkat 6

Hasnya akan terhat sepert0 33"/ Paragra%-Bar': 6P7Dgunakanuntukpndahaneaataumembuatparagraf baru.Tagn bsadber akhrantap|uga bsa tdak dber. Daam tag n |uga bsa dgunakan untukmengatur perataankr, tengah, kanandankr-kanan, yatudenganattrbut ALIGN.Attrbut agnmempunya na: LEFT,RIGHT, CENTER dan |USTIFY. d/ Line Brea1: 6BR7 Dgunakan untuk pndah ke bars baru. e/ NoLineBrea1: 6N+BR7 Badgunakantagn makateksyang pan|ang tdak secara otomats pndah bars bawahnya babars pertama sudah terau pan|ang. */ &ont 6&+NT7Dgunakanuntuk mengatur huruf dokumenHTML. Tag FONT mempunya attrbut, yatu: SIZE, FACE, COLOR. SIAE:Dgunakan untuk mengatur ukuran font. Ukuran fontyang dgunakan berksar antara 1 - 7 dengan 1 merupakanukuran terkec dan 7 merupakan ukuran terbesar. &A.E:Dgunakan untuk mengatur |ens atau nama font.Anda bsa memh maksma 3 |ens font yang masng-masng dpsahkan oeh koma. Ba terdapat spas yangteretak pada nama font maka harus dgunakan tanda garsbawah (_). Daam memh |ens font n harusdpertmbangkan apakah font yang kta gunakan padahaamanwebktanantnyaakanterdapat padakomputer 39penggunayangan(pengakseswebkta). Pendeknyaktatdakusahmenggunakanfont-font yangbentuknyaaneh-aneh, gunakan sa|a font standar. Tap ba Anda ngnmenggunakan font yang sedkt "aneh" Anda bsamenggunakan graphc. .+L+R:Dgunakan untuk mengatur warna font.Ddenskan dengan menggunakan na RGB/HEX atau bsa|uga angsung menggunakan nama warna (red msanya). "onto-3@9/-tm

::: Ukuran, |ens dan Warna Font0::

Ukuran font 1
Ukuran font 2
Ukuran font 3
Ukuran font 4
Ukuran font 5
Ukuran font 6
Ukuran font 7

Hasnya akan terhatContoh annya: 32 g/ Base&ont: 6BASE&+NT7Dgunakanuntuk mendenskan"defaut text". Attrbut samadenganattrbut FONT. TagFONTakan mengo,erwrite settng pada BASEFONT. Contoh0 Sean tag dan atrbut datas, mash terdapat ag tag-tag yangberhubungan dengan pengaturan teks, yatu0 Per-atian: Semua tag d bawah n membutuhkan tap penutup.6B7Bod te$t 6I7&tali* text647Underscore6TT7Typewrter6S7Strkeout - draws a ne through the text6PRE7Preformatted Text 6D&N7 1efnition6BLINK7Text berkedp (ebh bak |angan dgunakan)6STR+NG7Strong 6ADDRESS7 &tali*6.ITE71igunakan untuk 2uoting text 6.+DE7Monospaced font(dgunakan ba Anda ngnmeetakkan (memperhatkan) kode HTML padadokumen HTML Anda)6SA(P7Monospaced font(dgunakan ba Anda ngnmeetakkan (memperhatkan) kode HTML padadokumen HTML Anda) 6KBD7Monospaced font(dgunakan ba Anda ngnmeetakkan (memperhatkan) kode HTML padadokumen HTML Anda)6BIG7 Ukuran teks akan ebh besar satu ukuran6S(ALL7Ukuran teks akan ebh kec satu ukuran6S4P7Membuat tekssuperscrpt6S4B7membuat tekssub scrpt6ABBRE?7Abbrevatons6A.R+NB(7Untuk akronm6PERS+N7Dgunakan untuk ndexng6C7Membuat short nne quotaton6?AR7Membuat ,ariable name+ selalu !alam itali*s. 35-/ 6HR7, dgunakan untuk membuat gars horsonta. Tag n mempunya atrbut SIZE, WIDTH, ALIGN dan NOSHADE. Atrbut SIAE dgunakan untuk menentukan pan|ang gars daamsatuan pxe. AtrbutWIDTHdgunakan untuk menentukanketebaangars. AtrbutN+SHADEakanmenyatakanbahwagars tersebut dtampkan tanpa bayang-bayang 3-D."onto-3@2/-tm

::: Membuat Gars Horsonta0::

Seamat Datang

www.smkpgr3-mg.sch.d

Hasnya tampak sebaga berkut:i/ LISTSDaftar/st adaah merupakan kumpuan teks yang dsusunsedemkan rupa sehngga tem-tem yang ada memk nomorurut atau bsa |uga berupa tanda-tanda khusus/symbo.Terdapat tga tpe st yang dapat dgunakan, yatu0 4nordered Lists: 64L7Untuk membuat daftar temdengan tanda buet (tdak bernomor). Lst entres 38ddenskan dengan tag . Pada |ens n tdakmemerukan pengurutan data.Bentuk temtanda pada Unordered Lst dapat dubahdengan menggunakan atrbutTBPEkedaamtag64L7dengannaD"ir"eEuntuk bentuk ngkarantengahnyaputh,DsF'areEuntuk bentuk kotak padat htamdanDdis"E bentuk ngkaran pada warna htam."onto-3@5/-tm

::: Undordered Lst0::

Hob saya adaah0

Oahraga

Shurng

Makan Bakso

Has dar kode d atas adaah: 3: +rdered Lists: 6+L7|uga dgunakan untuk membuatdaftar tem bernomor, dengan tap tem dapatmenggunakanangkaarabatauromaw.Lst entres|ugaddenskan dengan tag. Atrbut yang ada padaOrdered Lst adaah TBPE dan START."onto-3@8/-tm

::: Ordered Lst0::

Penddkan saya adaah0

Sekoah DasarSekoah Lan|utan PertamaSekoah Lan|utan Atas

Unverstas Muhammadyah MaangUnverstas PGRI Maang

3;Has dar kode d atas adaah0 Untuk attrbut TYPE, dapat |uga menggunakan0 1- Defaut numbers, 1, 2, 3, etc.A- Huruf besar. A, B, C, etc.a- Huruf kec. a, b, c, etc.I- Romaw huruf besar. I, II, III, etc.- Romaw huruf kec , , , , etc. DeGnitionLists: 6DL7, dgunakanuntuk men|easkanstah-stah. Denton Lst dnyatakan dengan tag dan dantara tag tersebut dtambahkan tag DentonTermyatubaganstahyangd|abarkandantagDenton Data yang merupakan pen|abaran dar stah."onto-3@:/-tm

::: denton Lst0::

Bagan Pertama. Sub Bagan Pertama. Bagan Kedua. Sub Bagan Kedua

Has dar kode d atas adaah0 3< Pre*ormattedTe$t:6PRE7/Dgunakanuntukmengaturformat tampan agar sesua dengan asnya."onto-3@;/-tm the &t;pre> tag wthout the &t;pre> tag: here's some dtty specay done to ay t out a formatted and pretty. unfortunatey, that s a ths |unk reay meansbecause admt coudn't scraw poetry for beans. wth the &t;pre> tag: here's some dtty specay done to ay t out a formatted and pretty. unfortunatey, that s a ths |unk reay meansbecause admt coudn't scraw poetry for beans. Has dar kode d atas adaah0 3= E$tended C'otations: 6BL+.KC4+TE7, dgunakanuntuk membuat kutpan pan|ang, sehngga hasnyamen|orok ke daam."onto-3@Dgunakan untuk membuat nk/penghubung antara suatu haamandenganhaaman an, keURL an, |uga dgunakan daamsatuhaamanuntukberpndahkesub|udu yanganataukeokastertentu daam satu haaman yang sama. Sntak tag nk adaah sebaga berkut:6a -re*H'r@t','an7nama@in16/a7url$tu%uanberna okas atau nama e yang akan dtu|u.Sedangkanna!a$linkadaah na yang akan dtampkan dbrowsersebaga teksnkatautombo penghubung. Tusanyangteretakantara6A7dan6/A7akanterdapat garsbawahdanatrbut warnanya dapat datur daamtag6bod)7. Adapunmacam-macam nk adaah sebaga berkut:Lin1 1e Do1'men LainUntuk membuat nk/penghubung dengan target kedokumen/haamanyangberbeda, andaharusmembuat dokumenyang dtu|u/target dan dsmpan daam drektor tertentu, bak padadrektor yang sama atau berbeda dengan dokumen yang aktfsekarang. Untuk mencoba membuat nk, sahkan buat scrptberkut dan ber nama dengan link$"oku!en$lainht!l

::: Lathan Membuat Lnk Ke Dokumen Lan0::

.::: SMK PGRI 3 Maang0::.
Success By Dscpne| H o m e | Program Keahan | Ekstra Kurkuer |Seamat datang d web kam ...Buat ag e berkut dan ber nama dengan proliht!l::: Lnk Dokumen Lan0:: 93.::: SMK PGRI 3 Maang0::.
Success By Dscpne| H o m e| Program Keahan| Ekstra Kurkuer |Program Keahan0
Rekayasa Perangkat LunakTeknk Eektronka IndustrTeknk Pembangkt Tenaga LstrkTeknk Mekank OtomotfTeknk Bod OtomotfTeknk PemesnanTeknk LasUntukmeengkap athanka n, buat |ugaeberkut danbernama ekstraht!l ::: Lnk Dokumen Lan0::.::: SMK PGRI 3 Maang0::.
Success By Dscpne| H o m e | Program Keahan| Ekstra Kurkuer |Ekstra Kurkuer0
Sen Bea Dr Tapak SucKeagamaanSepak BoaBoa BasketKepenyaran 99Has dar kode-kode datas adaah sebaga berkut:|ka nk-nk tersebut d-klik, maka hasnya adaah sebaga berkut: 92Lin1 1e bagian tertent' daam do1'men )ang samaUntuk membuat nk ke bagan tertentu daam dokumen yang sama,harus dberkan nama an&hor Perbedaan dengan nk yang berbedadokumen adaah tu|uan/target nk, |ka daam dokumen yang samayang dtu|u adaah nama anchor tetapkaau dokumen yang bedayang dtu|u adaah nama e/dokumen yang bersangkutan.Untukmember namaanchor, atrbut yangdpaka adaahNA(Epada tag anchor dan untuk membuat nk cukup memberkantanda I seteah nama e daam URL. Msa: Bab 1 atau dapat dtus engkap: Bab 1 dan untuk nama anchornya:Ada apa dengan PHP?Lin1 1e aamat 4RL ata' WebsiteUntuk membuat nk ke aamat URL adaah dengan menambahkan:-tt%://nama@4RL/Contoh:www.dkt.orgwww.smkpgr3-mg.sch.d Lin1 1e Aamat EmaiLnk ema adaah membuat nk pada teks, |ka teks tersebut dkkmaka akan menampkan program pengrman ema yang terdapatpada komputer yang dpaka untuk mengakses data atau tekstersebut secara otomats.Untuk membuat nk ke aamat ema hanya menambahkan atrbutmaito:aamat@emai ke daam tag 6A HRE&7Msanya:Krm emaLin1 &ie )ang a1an didownoadLnk e daam ha n adaah apaba dkk pada teks tersebut makaproses sean|utnya adaah mendownoad e yang tercantum padadokumen 95tersebut. Format penusannya adaah 6a -re*Hnama@Ge7Msa:Downoad ant vrusDownoad athan HtmDownoad MYSOL5/(en)isi%1an Gambar/ImagesDgunakan untuk menampkan mage atau anmas gf padahaaman web Anda. Tag yang dgunakan adaah Attrbutyangdmk tagadaah:at, agn=(center, eft,rght), hspace, vspace, border, wdth dan heght. |ka attrbut ukurangambar tdak dtuskan,maka gambardtampkan sesuadenganukuran asnya. Untuk mengatur ukuran gambar, menggunakanattrbut wdth daan heght. Attrbut agn dgunakan untuk perataanposs gambar. Attrbut border, dgunakanuntukmember bngkapada gambar. Sedangkan at, dgunakan untuk member keteranganpada gambar |ka mouse berada datasnya.Untuk mengatur etakgambar dapat menggunakan attrbut hspace daan vspace. "onto-3@=/-tm::: menampkan mages0::Tampan dar contoh datas adaah sebaga berkut: 988/La)o't Haaman Web dengan Tabe JTabeKTabe merupakan cara untuk menampkan nformas daam haamanweb dengan bentuk koom dan bars. 9:Tabe dan La)o't Haaman WebHampr semua web ste yang berkuatas dan profesona,drancang dengan menggunakan Tabe. Layaknya sebuahspreadsheetyangmemk se danbers angka-angka, tabedaamweb|ugamempunya se yangbers nk, gambardantext.Gambat dbawah n adaah saah satu haaman web yangdrancang dengan oyout tabe: 9;cell cell cell(emb'at TabeTerdapat tga tag atau eemen utama yang dgunakan daampembuatantabe, yatu: , , dan. Yangperudngat adaah bahwa tag dan harus teretak d antaratag dan . 6TABLE7 Dgunakan untuk mendenskan pembuatan tabe. Memk attrbut0 aign - perataan0 rata kr (eft), tengah (center) atau kanan (rght). #aign - mengatur bentuk perataan secara vertka bg"oor - mengatur warna atar beakang (background) dar tabe. ba"1gro'nd - menentukan gambar yang dgunakan sebagabackground tabe "oor L Untuk mengatur warna suatu se daam tabe border - menentukan ukuran border tabe (daam pxe). rows%an - menggabungkan beberapa bars "os%an - menggabungkan beberapa koom "e%adding - |arak antara s ce dengan batas ce (daam pxe). "es%a"ing - mengatur spas/|arak antar ce (daam pxe). widt- - menentukan ebar tabe daam pxe atau percent. -eig-t - Menentukan tngg tabe 6TR7 Tag n dgunakan untuk membuat bars baru (pada tabe). Terdrdar atrbut: aign - perataan0 rata kr (eft), tengah (center) atau kanan (rght). bg"oor - warna atar beakang dar bars. #aign - perataan vertka0 top, mdde atau bottom. 6TD7Tag n dgunakan untuk membuat koom baru pada tabe. Attrbutnya adaah: aign - untuk menentukan perataan koom 9< ba"1gro'nd- untuk menentukan mage yang dgunakansebaga atar beakang dar koom. bg"oor - untuk menentukan warna atar beakang "os%an - hat gambar contoh -eig-t - untuk mengatur ukuran tngg ce daam pxes. nowra% - untuk membuat supaya s dar koom tetap berada pada satu bars. rows%an - hat gambar contoh #aign - untuk mengatur perataan vertka: top, mdde atau bottom. widt- - untuk menentukan ebar koom daam pxe atau percen. "onto-3@3>/-tm::: Pembuatan Tabe0::In contoh tabe sederhana tanpa borderIn contoh tabe sederhana dengan borderNo.NamaAamat1.|am 'Iyatu KhorBuubrangsLamongan2.Ar MuyanngshWrngn Anom 9= GreskHasnya adaah sebaga berkut: 2>"onto-3@33/-tm.::: Bea|ar Membuat Tabe0::. 23

Hasnya adaah:(enamba-1an 0'd' Tabe|udu daam tabe dbedakan men|ad tga macam, yatu |udu tabe,|udu koomtabe dan |udu bars tabe. |udu tabe atau basadsebut.APTI+Nteretakdbaganuar tabe yangbsaberadadbawah atau datas tabe. Secara defaut*aptiondetakkandbaganatas suatutabe, tetap |ugadapat detakkandbawahsuatu tabedengan menambahkan atrbutALIGNHB+TT+( padaeemen *aption tersebut. 29|udu koom atau |udu bars dbuat dengan eemen yang sama yatueemenTABLE HEADER6TH7/|udu koomteretak pada sedsebeahkr ataukoompertamasuatutabe, sedangkan|udubars teretak pada bars pertama suatu tabe. |udu bars atau |udukoom akan tercetak teba."onto-3@39/-tm

::: Pembuatan |udu Tabe0::

Daftar Aamat

No.NamaAamat

1.|am Iyatu KhorBuubrangs Lamongan

2.Ar MuyanngshWrngn Anom Gresk

Hasnya akan tampak sebaga berkut: 22"onto-3@32/-tm

::: Pembuatan |udu Tabe0::

Daftar Aamat

No.1.2.

Nama|am Iyatu KhorAr Muyanngsh

AamatBuubrangs LamonganWrngn Anom Gresk

Hasnya akan tampak sepert berkut:(engat'r Lebar dan Tinggi S'at' TabeLebar tabe datur dengan menggunakan atrbut WIDTH dan untukmengatur tnggtabe dengan atrbutHEIGHT.|ka atrbut WIDTHdan HEIGHT dgunakan daam eemen TABLE nanya menun|ukkan 25ebar dan tngg tabe terhadap BROWSER sedangkan |ka dgunakanpada eemen TH dan TD, nanya merupakan ebar dan tngg darsuatu tabe. Naatrbutmengunakanukuran%(max 100%)danukuran pxe. "onto-3@35/-tm

::: Mengatur Lebar dan Tngg Tabe0::

Daftar Aamat

No.NamaAamat

1.|am Iyatu KhorBuubrangs Lamongan

2.Ar MuyanngshWrngn Anom Gresk

Hasnya tampak sebaga berkut: 28Perataan daam TabePerataandaamtabe dkena duamacam, yatuperataansecarahorzonta dengan atrbut ALIGN dan perataan vertka denganatrbut VALIGN, serta untuk membuat suatu tabe possnya men|addtengah-tengah ayar browser."onto-3@38/-tm

::: Membuat Perataan Tabe0::

Daftar Aamat

No.NamaAamat

1.|am Iyatu KhorBuubrangs Lamongan

2.Ar MuyanngshWrngn Anom Gresk

Hasnya sepert gambar berkut: 2:(emb'at Warna Pada TabeDdaam pewarnaan tabe kta dapat mengatur warna atar beakangdantekssertawarnabordernya. Untukmenentukanwarnaatarbeakangpadasuatutabe, gunakanatrbutBGCOLORsedangkanuntuk warna border dapat menggunakan beberapa atrbut sbb:Atrib't &'ngsiBORDERCOLOR Mengubah warna keseuruhan borderBORDERCOLORLIGHTMengubah warna border bagan atas dan krBORDERCOLORDARKMengubah warna border bagan bawah dankananPenggab'ngan Baris/KoomUntuk menggabungkan bars/koom (merge/dgunakan atrbutCOLSPAN dan ROWSPAN.COLSPAN dgunakan untuk menggabung-kan beberapa koom men|ad 1 sedangan ROWSPANmenggabungkan beberapa bars men|ad 1..e%adding Dan .es%a"ingCELLPADDING dgunakan untuk mengatur spas antara borderdengan tusan, sedangkan CELLSPACING dgunakan untukmengatur spas antar dua buah se."onto-3@3:/-tm

::: Contoh Merge, Ce dan Pedd0:: 2;

KeasKeterangan

III

Ratna Bud SetyornWu|eng HandayanLunas

Hasnya adaah sebaga berkut::/ (emb'at &ramesFrame HTMLdapatdgunakanuntukmembuattampanhaaman HTML yang terbag-bag men|ad beberapa dokumen HTML,dmana setapbagan merupakan satu haaman HTML terpsah.Sehngga tampan haaman HTML yang saah satu atau beberapabagan bergant-gant snya sedangkan bagan an tetap sehnggadapat menghemat bandwdth nternet dan mempercepat prosesdownoad secara keseuruhan.Format:

"onto-3@99/-tm

::: Buku Tamu0::

BUKU TAMU

Nama:

Aamat:

Ema:

Webste:

Homepageku:

Bagus Seka

Bagus

Basa A|a

83

Hasnya adaah:"/ Rang1'man Seteah kta mempea|ar mater pertama n, kta dapat menarkkesmpuan,ternyata membuat/membangun haaman web tu mudahseka. Dengan hanya bermodakan edtor teks basa, kta sudah dapatbea|ar banyak tentang tag-tag htm yang dgunakan untuk membuatsebuah haaman web. Struktur HTML secara gars besar dbag men|ad dan .D bagan kta dapat menuskan semua kode htm yang akankta gunakan untuk membangun haaman web, yatu dantaranyapengaturan teks, pengaturan mage, hypernk, pembuatan tabe danpembuatan frame.Lan|utkan ke mater berkutnya agar pengetahuan anda daammembangun haaman web ebh banyak ag.d/ T'gas 1. Kun|ung beberapa webste (mnma 10 webste). Amatah websteyang teah anda kun|ung. Yang harus anda amat adaah meput: a. Layout' 89 Seberapa besar daya tark dan unsur sen dar web yang andaamat. Bagamanamode ayout webtersebut, berbentuktabe atauframe?b. .ontent/Isi, Apa sa|a s dar web tersebut.Sahkan catat has pengamatan anda.2. Tet pro sebuah organsas/embaga (msa: KUD, PemerntahKota, Sekoah dan an-an). Catat semua has penetan anda. Darhas penetan anda, sahkan buat webste stats yang snyaadaahproedar yangandatet. Baperutawarkanwebstebuatan anda kepada organsas/embaga tersebut. 3. Sahkancar dan!ownloa!tutora berbahasaInggrsd Internetyang berhubungan dengan web programmng,(msanya PHP, ASPdan an-an).e/ Tes &ormati* 1. |easkan masng-masng fungs dar tag-tag berkut:a) b) c)
d) 2. Apakah fungs dar nk, form dan frame daam pembuatan web?3. Apa perbedaan frame dan frameset?4. Apa perbedaan checkbox dan rado button?5. Apakah fungs dar tombo Submt dan Reset?6. Buatahhaamanwebsepert terhat d gambar. Daamgambartersebut, |ka adapenekanan tombokrm, makahasnyaakandkrmkan ke e-ma anda. 82

*/ K'n"i 0awaban &ormati* 31. Fungs dar tag:a. : dgunakanuntukmengatur ukuranhuruf padaheaderdengan angka 1 berart mempunya ukuran pangbesar.b. : dgunakan untuk berpndah anea atau membuatparagraf baruc.
: Dgunakan untuk pndah bars baru.d. : dgunakan untuk membuat gars horsonta2. Lnk, untuk meompat dar satu dokumen ke dokumen atau tempatyang an, dapat berupa teks maupun gambar.Form, dgunakanuntukmengumpukannformas dar pengun|ung(bernteraks dengan pengun|ung) karena form dapat berupa modesan yang harus ds pengun|ung dan akan dbca oeh pemk web.Frame, merupakan pembag haaman.3. Frameadaahdokumenyangterdapatd daamframesetdenganborder yangmengengnya. Sedangkanframeset, adaahsuatuframeyangdapat menampungbeberapaframeand daamnyadan dapat memk beberapa frameset yang annya. 854. Checkbox dan rado button memk fungs yang sama yatu untukmenentukan phan dar suatu daftar phan. Perbedaanya teretakpada |umah phan yang dapat dph. Pada checkbox, pengun|unghaamanwebdapatmemhbeberapadar daftarphan, namundenganradobutton, pengun|unghanya berhakmenentukan satuphan sa|a.5. Tombo submt berfungs untuk mengrmkan data yang teahdmasukkan daam form untuk sean|utnya doah oeh server. Dantombo reset berfungs untuk mengosongkan dan ataumengembakan ke na !efault data yang ada daam form.6. Kode untuk haaman web tersebut adaah:

::: Form Order0::

FORM ORDER BARANG

Iskan Data-data Anda

Nama DepanNama AkhrUmur

Bagamana Menghubung Anda?Aamat Rumah:

Kota:

Negara:

Kode Pos:

Nomor Teepon -

88

Credt CardVsaM/C

Tangga Berakhr:

|ens Barang

Pentum IVPentum IIIMontorCD-ROMKamera DgtaPrnterMouseScanner

Termakash Atas Order Anda!

g/ Lembar Ker,a 3Aat dan Ba-anPC(Personal %omputer) yangteahdengkap denganWebbrowserdan edtor teks Notepad. 8:Kese-atan dan Keseamatan Ker,a1) Berdoaah sebeum memua kegatan bea|ar.2) Bacaah dan paham petun|uk praktkumpada setap embarkegatan bea|ar.3) Pastkan komputer daam keadaan bak, semua kabe penghubungterhubung dengan benar.4) |angan meetakkan benda yang dapat mengeuarkan medaneektromagnetk d dekat komputer (magnet,han!phone, dansebaganya).5) Gunakanahkomputer sesua fungsnyadenganhat-hat, |anganberman game.6) Seteah seesa, matkan komputer sesua prosedur yang aman!Lang1a- Ker,a1) Sapkanah semua peraatan yang akan dgunakan!2) Perksa semua kabe penghubung pada PC.3) Nyaakan PC dan |aankan program edtor teks notepaddan Webbrowser Internet Exporer.4) Ker|akan Tugas 1 dan Tes Formatf 1 d atas.5) Apabamenemu kesutandaammemaham mater yangada,segera tanyakan kepada nstruktur.6) Seteah seesa, matkan komputer dan rapkan sepert semua. 8;Kegiatan Bea,ar 9:Membangun haaman web dengan bahasa pemrograman berbass web a/ T','an Kegiatan Pemea,aran1) Pesertadkat mampumengena ob|ek-ob|ekweb, tag-tagHTMLdan scrpt-scrpt pada pemrgraman berbass web.2) Pesertadkat mampumenggunakandanmenerapkanfungs danoperator agortma pemrograman pada apkas yang dbuat3) Peserta dkat mampu menentukan struktur data pada apkas yangdbuat4) Pesertadkatmampumenentukanbassdatapadaapkasyangdbuat5) Peserta dkat mampu meakukan kombnasob|ek-ob|ek web, tag-tagHTMLdanscrptyanganuntukmembuat haaman-haamanweb.6) Pesertadkat mampumembangunhaamanwebdenganbahasapemrograman berbass webb/ 4raian (ateri 3/ Penda-''anWebstedapatdbedakanmen|ad duayatuWeb'tatisdanWeb1inamis. WebStats adaah webyangbers nformas-nformasyangbersfat stats(tetap), sedangkanWebDnamsadaahwebyang menampkan nformas yang bersfat dnams (berubah-ubah)dan dapat sang bernteraks dengan user.Basanyauntukwebstats yangdton|okanadaahss tampanyangbanyakmengandunggrassehnggauntukmerancangwebstats tdak dperukan kemampuan pemrograman yang handa.Yang dbutuhkan hanya kemampuan desgn gras/web dan cta rasasen beaka. Sedangkan untuk web dnams yang banyak dton|okanadaahpengoahandatasehnggadbutuhkankemampuandaampemrograman web.Adadua |enspemrogramanweb,yatu'er,er 'i!eProgrammingdan%lient 'i!e Programming. Pada'er,er 'i!eProgrammng,semua sntaks dan perntah program yang dberkan akand|aankan/dproses d Web 'er,er, kemudan hasnya dkrmkan kebrowser pengguna daam bentuk HTML basa. Sehngga penggunatdak dapat mehat kode as yang dtus daam bentuk server sdeprogrammng tersebut. Yang tergoong daam server sde53programmngsepert: CGI/Per,>8/ pada a!!ress bar.PHPTriad .ontro Panedgunakan untuk meakukanpengaturan terhadap berbaga fastas yang ada pada PhpTrad.Seteahcontro pane d|aankan, akanmuncu tampan sepertpada gambar dbawah n. 57f. SeteahPhpTradContro Pane aktf, akukanangkahsebagaberkut: Kk Insta A%a"-e as Ser#i"e".Prosesn akanmeakukannstaas Apachesebaga servcesoftware. Kk Start A%a"-e".Proses n akan meakukan aktfas Apache sebaga webserver. Kk Start ()SCL".Phvers sstemoperas yangaktf dansesuakandenganvers yang ada pada komputer anda. Kk +%en Site w/ de*a't Browser".Bagann dgunakanuntukmengecekapakahPHPsebagasebuahservcesudahdapat dgunakan|kaberhas, makaakan muncu tampan sebaga berkut:58g. Langkah sean|utnya yang peru anda akukan adaah mengubahatau mengatur drektor/foder defaut untuk dokumen anda.Indakukan agar ketka kta membuka Internet Exporer danmengetkkan-tt%://o"a-ostpada address bar, maka yangakan dbuka adaah !o*ument root yang possnya d foder yangteahkta tentukan. |ka tdak kta atur, maka defaut untukdocument root adaah d drektor .:Oa%a"-eO-tdo"s". Artnya,dokumen yang dakses secara otomats oeh browser ketkamemangg ocahost adaah dokumen-dokumen yang beradapada foder tersebut. Dan secara otomats pua, e yangpertama ka d|aankan adaah e yang memk namainde$/-tmPatauinde$/-tmatauinde$/%-%yangterdapatdaam foder tersebut.Untuk mengatur document root, yang peru anda akukan adaah: Buat drektor/foder baruyangakankta|adkandocumentroot. Msanya: ":Oati-an". |aankan program apkas teks edtor Notepad. Kemudan bukae -tt%d/"on*" yang teretak d ":Oa%a"-eO"on*". Car teksDo"'mentRoot E.:OA%a"-eO-tdo"sEkemudangant tekstersebutdenganDo"'mentRoot E.:OLati-anE. Smpanen dan tutup kemba notepad anda. Sekarang anda bsa59membuat e-e PHP yang dsmpan daam drektor menurutseera anda sendr.h. Langkah terakhr yang tdak kaah pentngnya adaahmengaktfkan MySOL. |aankan wndows exporer kemudanmasuk ke drektor/foder.:Oa%a"-eOm)sFObindan car ewnmysqadmn.exe. |aankan e n untuk mengaktfkan MySq.|kaen beumpernahd|aankansebeumnya, makaakanmuncuwndow form yang memnta ke anda agar memasukkannama userdanpassword.Isah sesuadengankengnananda sendrdan |anganupa dcatatagar andatdak meupakannya. Seteahandamengsnya, kkok. Danwnmysq akansegeraaktf (terhat d taskbar sebeahkanandenganconberwarnah|au, |ka berwarna merah berart tdak |aan)60. Ok, proses nstaas semua software yang kta butuhkan sekarangteah seesa. Dan sekarang mar kta an|utkan ke materberkutnya.5/ Pen'isan S"ri%t PHPPastkan web server dan skrp PHP anda teah ber|aan dengan baksebeumandamemua pemrogramanPHP. Untukmembuat webdengan scrpt PHP, cukup anda persapkan edtor teks.Fungs-fungs yang ada d PHP'n"ase sensiti#e, tetapvarabenya"ase sensiti#e(membedakan huruf besar dan kec).Scrpt PHP dawa dengan tanda ebh kec ( < ) dan dakhr dengantanda ebh besar ( > ).Ada tga cara untuk menuskan scrpt PHPyatu: Scrpt PHP

Ha-ha yang harus dperhatkan daam penusan scrpt php, yatu: Scrpt PHP harus dsmpan denganekstensi PHP. Formatpenusannya adaahnamae.php, atau namae.php3 ataunamae.php4. Setap nstruks dpsahkan oeh tanda ttk koma (;"). Setapbars scrpt s harus ddahuu pernyataancetakyangdbedakan men|ad dua, yatu Print dan (&ho. Penusan komentar/&o!!entddahuu dengan /Q dan dakhrdenganQ/. Atau dawa dengan tanda///Sntaknya adaahsebaga berkut:/* komentar */// komentar# komentar Karakter adaah semua bentuk huruf, angka, spas, tanda kontroatau smbo yang terdapat daam tombo keyboard.618/ ?ariabe Varabe dgunakan untuk menympan data sementara dan nanyabsa berubah-ubah setap ka program d|aankan. Daam PHP setapnamavarabedawa tandadoar ($) dandkut dengannamavarabenya, tdak memandangdatatersebutapakahnteger, reamaupun strng, PHP otomats akanmengkonvers data menuruttpenya. MsanyanamavarabeadaamPHPdtusdenganRa.|ens suatuvarabedtentukanpadasaat |aannyaprogramdantergantung pada konteks yang dgunakan. Aturan penamaanvarabe daam PHP: Dawa dengan tanda doar ($) Penamaan varabe bersfat case senstve Nama varabe hanya bsa dawa dengan huruf atau garsbawah, barudapatdkut denganbeberapahuruf atauangkamaupun gars bawah yang pan|angnya tdak terbatas. Tdak boeh menggunakan tanda baca. Tdak boeh menggunakan reser,e! wor! PHP sepert msanyae*ho+ print+ dan an-an.Varabe daamPHP tdak harus ddekaraskan terebh dahuusebeum dgunakan.Contoh-contoh penusan varabe:Benar Saa-$varabe $var!abe$_ph $-ph$te93 $93te$n_tu $n-tu"onto-9@3/%-%

Varabe daam PHP

hasnya adaah::/ KonstantaKonstanta adaah varabe yang nanya tetap. Sntak:Dene (nama_konstanta","na_konstanta");Contoh:

>. Dengann makakedua layer akan ber|arak 100 pxe dar atas dokumen.157Kk d mana sa|a d daam dokumen untuk menghangkan sorotan.(ENG4BAH LAY(R (EN0ADI TABELSekarang Anda akan mengkonverslayer-layermen|ad tabe agardapat dtampkan pada browser vers 3.0.1. Ph (odi*) X La)o't (ode X .on#ert La)ers to Tabe.Kotak daog .on#ert La)ers to Tabe muncu.2. Padakotakdaog.on#ert La)erstoTabe, d bawahTabeLa)o'tyaknkan bahwaSmaest : .oa%se Em%t) .esdan4se Trans%arent GI&s daam keadaan terseeks.3. PadaLa)o't Toos, pastkanbahwaPre#ent La)er +#era%daam keadaan tercentang.4.Cck OK.Sekarang layer-layer teah dkonvers men|ad sebuah tabe..atatan : Dreamweaver mengatur spasantara koom tabedanbars tabe dengan menggunakantransparentGIFs. Seteahmengkonvers layer-layer men|ad sebuah tabe, Anda akan mehate transparent.gf pada root le,el dar stus fol!er Anda.|angan memndahkan e n; |ka Anda akukan, Anda akan mehatcongambar sangketkaAndamehat haamantersebut padasebuah browser.5. Tutup Layer palette.6. Smpan dokumen Anda.158(E(B4AT R+LL+?ER I(AGESSebuah rollo,er images adaah sebuah gambar yang akan berubah |kamouse pointermeewatnya. Anda dapat membuatrollo,er imagedengan menambahkan peraku (behavor) kepada sebuah gambar.1. Pada |endea dokumen, kk gambar Our Story untuk menyorotnya.2. Ph Window X Be-a#iors atau tekan F8 untuk membuka beha,iorinspe*tor, dmana bers semua peraku beha,ior yang teah dbuatuntuk eemen tertentu.3. Padamenupop-upE#ents&orPharus tampak2/>andLaterBrowsers. |ka tdak tampak, akukan pemhan.4. Untukmenambahkansebuahtndakankktombo pus(+) danph Swa% Image. Kotak daog Swa% Image muncu. Pada daftarImages, Anda akan mehat sebuah daftar yang bers semuagambar daam sebuah haaman, dengan gambar Our Story tersorot.In adaahgambar orgna, dmanaakandgant dengangambaran ketka mouse pointer meewatnya.5. KkBrowseuntuk menu|u foderS"a@site/Images, phbtn@o'rstor)@o#er/gi*, dan kemudan kk See"t.Gambar n akan menggantkan gambar orgna ketkamousemeewat gambar O'r Stor).1596. Terma settng standar untukPreoad ImagesdanRestoreImages on(o'se+'t.7. Kk+Kuntuk menutup kotak daogSwa% Imagedanmengapkaskan perubahan yang baru dbuat.8. Uang angkah ke-4 sampa ke 7 untuk gambar Products dan ThsWeek. Sorot gambar Products. Kemudan d kotak daogSwa%Image, atur Set So'r"e to : dengan btn@%rod'"ts@o#er/gi*. Sorot gambar Ths Week. Kemudan d kotak daogSwa%Image, aturSet So'r"e to :denganbtn@t-iswee1@o#er/gi*.9.Tutup )eha,ior inspe*tor.10. Tekan F12 untuk mehat dokumen anda pada Web browser. Andatdak peru menympan dokumen sebeum menampkannya.11. Pndahkan mouse pointerke gambar+'r Stor),Prod'"ts, danT-is Wee1 untuk mehat perubahannya.12. |kaandasudahmehatetersebut, tutupah|endeabrowseranda.13. Kemba ke Dreamweaver dan ph &ie X Sa#e untuk menympanperubahan yang anda buat.(ENGI(P+RT D+K4(EN HT(L (I.R+S+&T W+RDFeathanhaamanOur Storybers sebuahdokumenyangdbuatdengan menggunakan Mcrosoft Word dan d smpan sebaga dokumenHTML. Anda dapat mengmportdokumennke daamDreamweaver,dan membershkan banyak kode HTML yang tdak standar denganmenggunakan fastas Dreamweaver yatu .ean 4% Word HT(L.1601. Padasaat homepagemy_scaa_hometerbuka, ph&ieX Newuntuk membuka e baru.2. Ph&ieX Im%ort X Im%ort WordHT(Luntuk mengmpordokumen Word HTML.3.Pada kotak daogSee"t Word HT(L &ie to Im%ort,arahkanpada DW3_ourstory_word.htm, dan kemudan kk See"t.Anda darahkan untuk menympan dokumen anda.4. Kk +K.5. Untukathann, Andaakanmenermasemuasettngstandardaam kotak daog. Kk +K.Laporan .ean 4% Word HT(L muncu, bers semua has dar proses *leanup.1616.Kk +K.7.Ph &ie X Sa#e As untuk menympan dokumen Our Story; ber nama m)@o'rstor).(E(&+R(AT TEKS DENGAN HT(L STBLE|ka kta ngn mempermudah meakukan pengformatan adaah denganmenggunakanHTMLstyle. SebuahHTML'tyleterdr dar satuatauebh HTML tags d mana termasuk d daamnya warna, |ens huruf, dsb.Anda dapat membuat HTML style pada seuruh paragraf atau pada teksyang tertentu. |ka Anda teah membuat HTML style seka, maka andadapat menggunakannya pada beberapa haaman d stus tersebut.(enera%1an HT(L St)ePada athan n, Anda akan menggunakan HTML'tyleuntukmengformat teks pada dokumen +'r Stor).1. Ph Window X HT(L St)e. HT(L St)e palette muncu.2. Pastkan bahwa phan A%%) daam keadaan tercentang pada po|okkr bawah.3. Pada dokumen my_ourstory, tempatkan kursor pada paragraf pertama. Anda dapat menempatkan kursor d mana sa|a pada suatu paragraf untuk menerapkan suatu style pada sebuah paragraf.4. Pada HT(L St)e palette, kk style Bod).Teks pada paragraf pertama d format uang oeh style yang baru.5. Pasangah style Bod) pada paragraf-paragraf an daam dokumen n.(emb'at HT(L St)es162Sekarang, Andaakanmembuat HTMLstyleuntukmenon|okankata'*aal d daam dokumen.1. Kk i*on New St)e pada bagan bawah HT(L St)e palette.Kotak daog DeGne HT(L St)e muncu.2. Pada fel! Name : ketk s"aa.3. Pada phan A%%) To, ph See"tion.Ha n menyebabkanstyleakan dapkaskan pada teks yangtersorot bukan pada seuruh paragraf.4. UntukphanW-enA%%)ing, barkansesua settngyangadayatu.ear E$isting St)e,dmana akanmembershkan semuastyleyang dapkaskan pada teks yang tersorot ketka andamengapkaskan style baru.5. Untuk &ont Attrib'tes, ph : Font : AriaP He#eti"aP sansMseri* Sze : 2163 Coor:I..==22(ataugunakan*olorpi*keruntukmemhwarna emas) Stye : kk +t-er, dan kemudan ph Em%-asis/6. Kk +K.'tylebaru dtambahkan padaHT(L St)epalette. Perhatkanhurufaddepan styleS"aa;i*on nmengdentkaskanbahwasebuah style adaah sele*tion style dan bukan paragraph style.7. Pada |endea dokumen, sorot kata S"aa pada paragraph pertama.8. Ph style s"aa pada HT(L St)e palette.9. Gunakanstyles"aapadakatayangan, dankemudantutupHT(L St)e palette.10. Ph &ie X Sa#e untuk menympanperubahan yanganda buatpada dokumen m)@o'rstor).11. Ph &ie X .ose untuk menutup dokumen.(E(B4AT PETA SEB4AH SIT4SMenggunakan Dreamweaver'ite Mapakan memberkan gambarrepresentatf vsua dar struktur sebuah stus oka. Anda dapatmenggunakan peta stus (site map) untuk menambahkan e-e barudaamsuatustus; untuk menambah, menghangkandanmerubahlinks; dsb.Pada |endea peta stus,homepage sebuah stus seau akan berada datas sebuah peta stus; d bawah homepage anda akan mehat e-emana yang merupakan link dar homepage tersebut.Anda akan mengaturDW2@s"aa@-ome/-tmsebagahomepageuntuk stus m)@t'toria.Ada beberapa cara untuk menentukan sebuah homepage sebuah stus.Cara termudah untuk meakukannya adaah dengan menset homepagedengan menggunakan *ontext menu.1. Ph Window X Site &ies.2. Pada |endea stus, pada daftarLo*al #ol!er, sorot eDW2@s"aa@-ome/-tm. Kk kanan pada e tersebut.3. Ph Set as Home Page.4. Kk con Site (a% pada kr atas |endea stus.|endea stus sekarang muncu dengan dua tampan: pada sebeah kradaah peta stus, dmana dtampkan secara gras, dan pada sebeahkanan adaah daftar s dar foderfoder oka.164HomepageDW3_scaa_homesaat beumbeummempunyalink-link.Anda akan menambahkan nk-nk pada haaman n pada bagan andar athan n.Barkan |endea stus daam keadaan terbuka agar Anda dapat mehatperubahan ketka Anda menambahkan link-link pada homepage.(E(B4AT L-5/Ada beberapa cara untuk membuat nk dengan menggunakanDreamweaver. Pertama, Andaakanmembuat nkdar gambar OurStory ke haaman Our Story dengan menggunakan Property inspe*tor.1. Pada |endea stus, kk gandai*onDW3_scaa_home.htm. FeDW2@s"aa@-ome/-tm akan terbuka.2. Pada |endea dokumen, kk gambar Our Story untuk menyorotnya.|anganmeakukankkganda karena Anda akanmembuka kotakdaog See"t ImageSo'r"e.3. Ph Window X Pro%erties untuk membuka property inspe*tor babeumterbuka.&magePropertyinspe*tormenampkannformastentang gambar yang tersorot.165.atatan : Pada fel! Lin1 terdapat tanda angka (#), yang terbuatketka andamenggunakan swap image pada sebuah gambar. |anganmenghangkan tanda tersebut; tanda tu akan dgant dengan namadokumen yang akan Anda link.4. Pada Property inspe*tor, kk i*on foder d sebeah kanan fel! Lin1.5. PadakotakdaogSee"t&ie, sorotm)@o'rstor)/-tm, dankkSee"tuntukmemh e tersebut.Nama darfle tersebutmuncupada fel! Lin1 d Property inspe*tor.CarakeduamembuatlinkadaahdenganmenggunakanPropertyinspe*tor dan |endeastus. Sekarang Anda akan membuat nk padagambar Products dengan cara n.6. Kktitlebar(bars|udu) dar |endeastusuntukmen|adkannyaaktf, atau phWindowX Site &ies. Rubah ukuran |endeadokumenAnda, |kaperu, agar andadapat meetakkannyapadasebeah kr |endea dokumen dan d sebeah kanannya |endea stus.7. Pada |endea dokumen kk gambar %rod'"ts untuk menyorotnya.8. PadaProperty inspe*tor, tarki*on Point-to-#ile(berada dsebeahfel!Lnk) ke |endea stus, dan tempatkan pada eDW2@%rod'"ts@inde$/-tm, seteah tu epaskan mouse Anda.Nama e muncu pada fel! Lnk d Property inspe*tor.1669. Caraketgayatudenganmenggunakankkkanan. Pada|endeadokumenkkkananpadagambarT-isWee1danph.-angeLin1/10.Pada kotak daog See"t &ie, sorot DW2@t-iswee1/-tm dan kkSee"t.11. PadadokumenDreamweaver, sorot katapro!u*tspadaparagrafkedua.12. Kk kanan dan ph (a1e Lin1.13. Pada kotak daog See"t &ie, sorotDW2@%rod'"ts@inde$/-tmdan kk See"t/14. Ph &ie X Sa#e untuk menympan semua perubahan yang teahAnda buat d homepage n.15. Ph &ie X .ose untuk menutup haaman n.(ENERAPKAN SEB4AH 2(MPLA2(Anda dapat mengunakan template untuk membuat dokumen-dokumenyang mempunya struktur dan penampan yang sama. Template sangatberguna ketka Anda ngn agar semua haaman d daam sebuah stusberbag karakterstk yang sama.Pada kesempatan n Anda akan membuat sebuahtemplatedarhaaman produk yang sudah ada dan kemudan menggunakantemplate untuk membuat sebuah haaman produk yang baru.(emb'at 2e!plateAnda akan membuat sebuahtemplatedar vers athan haamanproduk Scaa compact dsk. Kemudan Anda akan menggunakantemplate n untuk membuat tambahan haaman produk yang an.1. Pada |endea stus, daam daftar Lo*al #ol!er, kk ganda i*onDW2@%rod'"ts@"d/-tm untuk membuka e tersebut.2. Ph &ie X Sa#e as Tem%ate.Kotak daog Sa#e As Tem%ate muncu.167Tempate yang sudah ada, product_page, sudah dbuat dandterapkanpadahaamanhaamanstusprodukScaa. Andaakanmembuat template vers Anda sendr3. Padafel!Sa#e Asrubahah namatemplatemen|adm)@%rod'"t@%age, dan kemudan kk Sa#e/Sebuah dokumen baru muncupada |endea dokumen. Perhatkanbahwa ada tanda template dmana e tersebut berakhran /dwt.(er'ba- te!plateSampa d sn,templatebaruAndasamadenganapayangteahAnda smpan.Tata etak beberapa area tertentu sama untuk setap|ens produk: fotoproduk, namaproduk, pen|easanproduk, danharga produk.Setaptemplateterdr dar baganyangd kunc danbaganyangdapat dedt. Bagan yang dkunc hanya dapat dedt pada templatetusendr; merekatampakdenganwarnayangebhterangpadasetaphaamantempattemplatedapkaskan. Baganyangdapatdedt bers sesuatu yang unk pada setap haaman d manatemplatedapkaskan. Pada sebuah tempate yang dapkaskan,bagan yang dedt berwarna terang.1. Pada template m)@%rod'"t@%age/dwt d |endea dokumen, phdanhapus gambar compact dsc; dankemudanketkInsertimage -ere pada se tabe tersebut.2.Sorot teks yang baru Anda ketk.1683. Ph (odi*) X Tem%ates X New Editabe Region.Kotak daog New Editabe Region muncu.4. Pada fel! Name, ketk Image sebaga nama untuk bagan n.5. Kk +K.Perhatkan bahwa teks sekarang berwarna terang, yangmenandakan bahwa n adaah bagan yang dapat dedt.6. Pada |endea dokumen, ph Scaa Sound," kemudan ph(odi*) X Tem%ates X New Editabe Region untuk membuatbagan n men|ad bagan yang dapat dedt.7. Padafel! Name dkotak daog New Editabe Region, ketkName dan kk +K. Pada |endea dokumen, bagan n berwarnaterang dan ddentkaskan dengan nama yang Anda berkan.8. Pada |endea dokumen, sorot teks deskrps, dan ph (odi*) XTem%ates X New Editabe Region untuk membuat bagan nmen|ad bagan yang dapat dedt.9. Padafel!Named kotakdaogNewEditabeRegion, ketkDes"ri%tiondankk+K. Pada |endeadokumen, bagannberwarna terang dan ddentkaskan dengan nama yang Andaberkan.10. Ph &ie X Sa#e untuk menympan template Anda. Kotak daog 4%date Pages muncu, menanyakan apakah Andangn mengup!ate semua dokumen d stus oka Anda. MemhBesberat meakukanperubahanpada haaman-haamandstus Scaa yang sudah engkap, dmana Anda tdak maumeakukan ha tu.11. Kk No, dan kemudan kk .ose untuk menutup kotak daog4%date Pages.12. Tutup template tersebut.169(enera%1an S'at' 2e!plateSekarang Anda akan mengunakan tempate untuk membuat haaman produk baru.1. Ph &ie X New *rom Tem%ate.Kotak daog See"t Tem%ate muncu.2. Padadaftartemplate, phm)@%rod'"t@%agesebagatemplateyang akan dgunakan dan kemudan kk See"t.Sebuah dokumen baru muncu.Bagan yang ebh geap dardokumen adaah bagan yang dapatdedt; bagan annya adaah bagan yang dkunc dan tdak dapatdedt.3. Smpanah dokumen Anda, dan ber namam)@%rod'"ts@m'g/-tm.(engedit Do1'men/1. Tempatkan kursor pada bagan gambar.2. PhInsertX Image, danpadakotakdaogyangmuncu phm'g/,%g. Kemudan kk See"t.3. Hapus teks Insert mage here".4. Pada |endea dokumen, d bagan Name, ketk sebuah nama untukproduk, sepert .omm'ter ('g, dan hapus tusan yang an.1705. Pada|endeadokumen, d baganDes"ri%tion, ketkteksyangbers pen|easan tentang mug dan hapus tusan yang an.6. Smpan dokumen Anda.7. Tutup dokumen tersebut.(E(B4AT >4MP M(54Sebuah?umpmenuadaahmenuphanpop-upyangmenglinkdanmembukae-epada|endeabrowser. Andaakanmembuat?umpmenuyangmenyebabkankonsumendapat denganmudahmenu|usuatu produk tertentu daam stus Scaa.1. Pada|endeastus, kkgandai*oneDW3_products_ndex.htmuntuk membuka e tesebut.2. Sorot dan hapus teks nsert |ump menu here".3. Pada poss kursor, ph Insert X &orm +b,e"t X 0'm% (en'.Kotak daog Insert 0'm% (en' muncu.4. Padafel!Te$t, ketkSee"t a %rod'"t. Teks n membawapengun|ung untuk mengamb suatu tndakan.5. Pada bagan +%tion, ph See"t &irst Item A*ter 4RL .-ange.6. Kk tombo pus (+) untuk menambah tem ?ump menu yang baru.7. Pada fel! Te$t, ketk .om%a"t dis".8. Padafel!W-enSee"tedP GoTo4RL, kkBrowsedanphDW2@%rod'"ts@"d/-tm. Kk See"t untuk memh e yang akandbuka ketka tem n dph.9. Kk tombo pus (+) untuk menambah tem ?ump menu yang baru.10. Pada fel! Te$t, ketk .o!ee m'g. Kemudan kk Browse dan phDW2@%rod'"ts@m'g/-tm. KkSee"tuntukmemheyangakan dbuka ketka tem n dph.Kotak daog Insert 0'm% (en' Anda harus sepert yang tampakpada gambar d bawah n :17111. Kk +K untuk menutup kotak daog.12. Smpan dokumen Anda. "ump menu tdak akan beker|a pada |endeadokumen, Anda harus mehatnya pada browser."/ Rang1'man 2MacromedaDreamweaveryangteahsampa padavers 2004(MX)merupakansoftwareWeb !esignyang teah memk banyakdukunganterhadapbanyakbahasapemrogramanweb. Pane-panepada wndow Dreamweaver MX memk peran masng-masng daammembangunsebuahhaamanwebyangcantk, sesua dengan|wasen s pemaka.d/ T'gas 21. Pea|arah setap fungs dar pane-pane daam wndowDreamweaver MX!2. Car dan pea|ar sumber bacaan atau buku refens yangmen|easkan secara deta tentang pengenaan too-too daamMacromeda Dreamweaver MX .e/ Tes &ormati* 21. Apakah yang anda ketahu tentang software Web !esign?2. Apa yang anda ketahu tentang pemrograman Web?3. Sebutkan beberapa software Web !esign yang anda ketahu!*/ K'n"i 0awaban &ormati* 21721. 'oftwareWeb!esign; perangkat unak yang berguna untukmembangun/membuat/mendsan haaman-haaman web, bak yangbersfat stats maupun dnams.2. Pemrograman web, adaah pembuatan haaman web yangddaamnya mengandungunsur bahasapemrogramandsampngtetap menggunakan tag-tag HTML. Basanya pemrograman webbertu|uan untuk membangun web-web dnams.3. 'oftwareWeb!esign0McrosoftFrontpage, MacromedaFreworks,MacromedaDreamweaver, AdobeImageReady, NamoWebe!itordan an - an.g/ Lembar Ker,a 2Aat dan Ba-anPersona Computer (PC).Kese-atan dan Keseamatan Ker,a1. Berdoaah sebeum memua kegatan bea|ar.2. Bacaah dan paham petun|uk praktkum pada setap embarkegatan bea|ar.3. Pastkan komputer daam keadaan bak, semua kabe penghubungterhubung dengan benar.4. Seteah seesa, matkan komputer sesua prosedur!Lang1a- Ker,a1. Sapkanah semua peraatan yang dbutuhkan!2. Perksa semua kabe penghubung pada komputer.3. Nyaakan komputer dan pastkan komputer tersebut teahterkoneks nternet dengan bak.4. Pastkan PC yang anda paka sudah memksoftwareWeb !esign,|kabeumakukanahnstaassoftwareyangdbutuhkan, yatu0Macromeda Dreamweaver MX .5. |aankanMacromedaDreamweaver MX, amat dancatat bagan-baganpadawndowDreamweaverMX. |kamengaam kesutan,tanyakan pada nstruktur.6. Seteah seesa, aporkan has ker|a Anda kepada nstruktur.7. Seteah dtet matkan komputer dan rapkan sepert semua.173BAB IIIE?AL4ASIA/ Tes T'is|awabah pertanyaan berkut n dengan sngkat dan |eas!1. |easkan masng-masng fungs dar tag-tag berkut:a. b. c.
d. 2. Apakah fungs dar nk, form dan frame daam pembuatan web?3. Apa perbedaan frame dan frameset?4. Apa perbedaan checkbox dan rado button?5. Apakah fungs dar tombo Submt dan Reset?6. Apa yang anda ketahu dengan =ariable dan Aonstanta ?.7. Sebutkan macam-macam statement kenda dan apa fungsnya ?B/ Tes Pra1te1Buatah haaman web dengan content yang engkap. Web yang anda buatdgunakan untuk mengeoa Sistem Administrasi Siswa sekoah anda.Sebeummembuat haamanwebtersebut terebhdahuuandaharusmerencanakan dsan dan ayout haaman web, struktur data danagortma program, serta menentukan mode dan skema data base (terdrdar tabe dan ed apa sa|a, reas dan query-nya). Seteah proyek andaseesa, sahkanmembuat aporandanserahkankegurupembmbnganda masng-masng.Ketentuanmnma dar programyangakananda buat adaahbahwaprogram anda nantnya mnmaakan dbuka/dakses oeh Admnstrator,Guru/karyawan, Sswa dan Orang Tua/wa Sswa. AdministratorMemk hak akses tertngg daam program tersebut. Data-data yangdapat dmasukkan dan dubah oeh admnstrator adaah:1. Data Proe Sekoah2. Data Guru/Karyawan3. Data Sswa4. Data Orang Tua/Wa Sswa5. Data |urusan6. Data Keas1747. Data Pea|aran8. Data Tempuh9. Data Absens10. Data Na Sswa11. Data User G'r'/1ar)awanUntuk user guru, data yang dapat dmasukkan dan dubah adaah:1. Data Na untuk mata pea|aran yang da|ar2. Ubah Passwordnya sendr SiswaUser sswa hanya memk hak akses untuk mehat na danabsensnya sendr. Dan dapat merubah password mk sswa tersebut. +rang T'a/wai SiswaUser Orang Tua/Wa memk hak akses untuk mehat na danabsens putranya. Dan dapat merubah password mknya sendr.Ketentuan datas adaah ketentuan mnma, sahkan dengkap sebagusmungkn. Sahkan meakukan stud kasus d sekoah anda sendr atau dsekoahanuntukmembantuandadaammeengkap content haamanweb dan untuk menentukan ed-ed dar tabe yang dperukan. ./ K'n"i 0awaban Tes T'is1. Fungs dar tag:a. : dgunakan untuk mengatur ukuran huruf pada headerdengan angka 1 berart mempunya ukuran pang besar.b. : dgunakanuntukberpndahaneaataumembuat paragrafbaruc.
: Dgunakan untuk pndah bars baru.d. : dgunakan untuk membuat gars horsonta2. Lnk, untukmeompat dar satudokumenkedokumenatautempatyang an, dapat berupa teks maupun gambar.Form, dgunakan untuk mengumpukan nformas dar pengun|ung(bernteraks denganpengun|ung) karenaformdapat berupamodesan yang harus ds pengun|ung dan akan dbca oeh pemk web.Frame, merupakan pembag haaman.3. Frame adaah dokumen yang terdapat d daamframeset denganborder yang mengengnya. Sedangkan frameset, adaah suatu frameyang dapat menampung beberapa frame an ddaamnya dan dapatmemk beberapa frameset yang annya.1754. Checkboxdanradobuttonmemk fungs yangsamayatuuntukmenentukan phandar suatu daftar phan. Perbedaanya teretakpada|umahphanyangdapat dph. Padacheckbox, pengun|unghaaman web dapat memh beberapa dar daftar phan, namundengan rado button, pengun|ung hanya berhak menentukan satuphan sa|a.5. Tombo submt berfungs untuk mengrmkan data yang teahdmasukkan daamformuntuk sean|utnya doahoehserver. Dantombo reset berfungs untuk mengosongkan dan atau mengembakanke na !efault data yang ada daam form.6. Varabe dgunakan untuk menympan data sementara dan nanya bsaberubah-ubah setap ka programd|aankan. DaamPHP, varabedawa dengan $ dan dkut dengan nama varabenya.Konstanta adaah varabe yang nanya tetap.7. Statement kenda terdr dar0a. Statement IF, dgunakan untuk meakukan eksekus suatu statementsecara bersyarat.b. Statement WHILE, dgunakanuntuk meakukanperuangandaamsebuah statement sampa konds tertentu terpenuh.c. Statement FOR, dgunakan untuk menguang se|umah bokstatement sampa |umahataukonds terpenuh. Fungsnyasamadengan statement whe. Bedanya, daamstatement for |umahperuangansudahdketahu dawa danharusdtuskanna awadan na akhr dar varabe penghtung.d. Statement SWITCH, dgunakan untuk membandngkan suatu varabedenganbeberapana sertamen|aankanstatement tertentu|kana varabe sama dengan na yang dbandngkan.e. Statement REOUIRE, dgunakanuntukmembacana varabedanfungs-fungs dar sebuah e an.f. Statement INCLUDE, dgunakan untuk menyertakan s suatu etertentu.176D/ Lembar Peniaian Tes Pra1te1 PED+(AN PENILAIANNama Peserta :No. Induk :Program Keahan :Nama |ens Peker|aan :No/As%e1 PeniaianS1or(a1sS1orPeroe-anKet/3 9 2 5 8I Peren"anaan1.1. Persapan Hardware dan Software51.2. Menganasa |ens desan 5Sub Tota 10? (emb'at La)o't2.1.Penyapan Layout 52.2. Menentukan warna dan gambar 5Sub Tota 10IN Proses JSistemati1a S .ara Ker,aK3.1. Cara Instaas program apkas 53.2. Cara menyapkan struktur data danagortma program53.3. Cara menyapkan Database 53.4. Cara kodng program 53.5. Cara meakukan ayout 53.6. Cara menetapkan warna 5Sub Tota 30N?IIK'aitas Prod'1 Ker,a4.1. Haaman Web Layut haaman web 2,5 Komposs warna dan gambar 2,54.2. Data Base Desan mode database 2,5 Reaton 2,5 Ouery 2,5177Web ProgramingTe1ni1 Kom%'ter dan 0aringanNo/As%e1 PeniaianS1or(a1sS1orPeroe-anKet/3 9 2 5 84.3. Bahasa Program Penggunaan server sde scrpt 2,5 Program dbuat dengan esen 2,54.4. SecurtyKeamanan Data Back up data 2,5 Sstem data og 2,5Keamanan A1ses Autentkas user 2,5 Pembatasan hak akses 2,54.5. Peker|aan dseesakan dengan waktu yang teah dtentukan2,5Sub Tota 30NNN?Si1a%/Etos Ker,a5.1.Tanggung |awab 25.2.Ketetan 35.3.Insatf 35.4.Kemandran 2Sub Tota 10NLILa%oran6.1. Sstmatka penyusunan aporan 46.2. Keengkapan bukt sk 6Sub Tota 10Tota 3>>178KRITERIA PENILAIANNo/As%e1 Peniaian Kriteria Peniaian S1orIPeren"anaan1.3. Persapan Hardware dan Software Hardware dan Software dsapkan sesua kebutuhan5 Hardware dan Software dsapkan sesua kebutuhan11.4. Menganasa |ens desan Merencanakan sesua tahapan/ proses desan5 Tdak merencanakan tahapan/ proses desan1?I(emb'at La)o't2.1.Penyapan Layout Layout web dsapkan sesua prosedur5 Layout web tdak dsapkansesua prosedur12.2. Menentukan warna dan gambar Haaman web dengkap dengan warna dan gambar5 Haaman web tdak dengkapa dengan warna dan gambar1NIProses JSistemati1a S .ara Ker,aK3.1. Cara Instaas program apkas Program apkas dnsta dengan benar sesua dengan kebutuhan5 Program apkas tdak dnsta dengan benar sesua dengan kebutuhan13.2. Cara menyapkan struktur data dan agortma program Struktur data dan agortma program dsapkan sesua dengan rencana5 Struktur data dan agortma program dsapkan tdak sesua dengan rencana13.3. Cara menyapkan Database Database dsapkan sesua dengan normasas database5 Database dsapkan tdak sesua dengan normasas database13.4. Cara kodng program Program d buat sesua 5179No/As%e1 Peniaian Kriteria Peniaian S1ordengan agortma program dan esen Program d buat tdak sesua dengan agortma program dan tdak esen13.5. Cara meakukan ayout Layout memenuh dasar-dasar estetka5 Layout tdak memenuh dasar-dasar estetka13.6. Cara menetapkan warna Penggunaan warna memenuh harmon warna5 Penggunaan warna tdak harmon1NNI?K'aitas Prod'1 Ker,a4.1. Haaman Web Layut haaman web Haaman web dbuat sesua dengan ayout2,5 Haaman web tdak dbuat sesua dengan ayout0,5 Komposs warna dan gambar Komposs warna dan gambar searas2,5 Komposs warna dan gambar tdak searas0,54.2. Data Base Dsan modedatabase Database dbuat mengguna-kan/sesua DMD2,5 Database dbuat tdak meng-gunakan/sesua DMD0,5 Reaton Menggunakan Database reas2,5 Tdak menggunakan database reas0,5 Ouery Menggunakan query data 2,5 Tdak menggunakan query data0,54.3. Bahasa Program Penggunaan serversde scrpt Web dbuat dengan teknoog/ bahasa server sde scrpt2,5 Web dbuat tdak dengan teknoog/bahasa server sde scrpt0,5 Program dbuatdengan esen Program dbuat se-esen mungkn2,5180No/As%e1 Peniaian Kriteria Peniaian S1or Program dbuat terau pan|ang0,54.4. SecurtyKeamanan Data Back up data Daam haaman web terdapat fastas apkas backup data2,5 Daam haaman web tdak terdapat fastas apkas backup data0,5 Sstem data og Terdapat fastas pencatatan sstem data og2,5 Tdak terdapat fastas pencatatan sstem data og0,5Keamanan A1ses Autentkas user Haaman web dber fastas autentkas user2,5 Haaman web tdak dber fastas autentkas user0,5 Pembatasan hakakses Pemaka dbedakan hak aksesnya2,5 Pemaka tdak dbedakan hak aksesnya0,54.5. Peker|aan dseesakan dengan waktu yang teahdtentukan Dseesakan tepat waktu 2,5 Dseesakan tdak tepat waktu0,5LIII Si1a%/Etos Ker,a5.1.Tanggung |awab Membereskan kemba aat dan bahan yang dpergunakan2 Tdak membereskan aat dan bahan yang dpergunakan0,55.2.Ketetan Tdak banyak meakukan kesaahan ker|a3 Banyak meakukan kesaahan ker|a0,55.3.Insatf Memk nsatf beker|a 3 Kurang/tdak memk nsatf ker|a0,55.4.Kemandran Beker|a tanpa banyak dperntah2 Beker|a dengan banyak dperntah0,5181No/As%e1 Peniaian Kriteria Peniaian S1orLNII La%oran6.1. Sstmatka penyusunan aporan Laporan dsusun sesua sstmatka yang teah dtentukan4 Laporan dsusun tanpa sstmatka16.2. Keengkapan bukt sk Meamprkan bukt sk has penyusunan6 Tdak meamprkan bukt sk2Kategor keuusan:70 - 79 : Memenuh krtera mnna. Dapat beker|a dengan bmbngan.80 - 89 : Memenuh krtera mnma. Dapat beker|a tanpa bmbngan.90 - 100 : D atas krtera mnma. Dapat beker|a tanpa bmbngan.182BAB I?PEN4T4PSeteah menyeesakan modu n dan menger|akan semua tugas sertaevauas makaberdasarkankrterapenaan, pesertadkat pesertadkatdapat dnyatakan uus/tdak uus. Apaba dnyatakan uus maka dapatmean|utkan ke modu berkutnya sesua dengan aur peta kedudukan modu,sedangkan apaba dnyatakan tdak uus maka peserta dkat harusmenguang modu n dan tdak dperkenankan mengamb modu sean|utnya.183DA&TAR P4STAKA1. Bmo Sunarfrhantono, ST, PHP "an MyS3L 4ntuk 1(+, And 20032. Bunat Nugroho, PHP ? MyS3L .engan ("itor .rea!,ea=er M@, And, 2004 3. McoPardos,+ahasa Pe!rogra!an-nternet'H2ML"an>a=as&ript,Indah, 20014. MADCOMS,Aplikasi Mana%e!en .ata*ase Pen"i"ikan +er*asis 1e*.engan PHP "an MyS3L, And, 20055. Sutarman, S.Kom, Me!*angun Aplikasi 1e* .engan PHP "an MyS3L,Graha Imu, 20036. Teguh Wahyono,PHP 2R-A. Fun"a!ental (Me!aha!i Pe!rogra!an1e* .engan PHP "an MyS3L "ala! 7A >a!)+ Gava Meda, 20057. Vsbooks, H2ML an" >a=aS&ript #or Bisual Learners, 8. Yahya Kurnawan, ST, Aplikasi 1e* .ata*ase "engan PHP "an MyS3L+Eex Meda Komputendo, 2003.9. http://www.mukomputer.com10. http://www.kk-kanan.com184