Dasar2 Web Programming

rio astamal
DASAR- DASAR
WEB PROGRAMMING
Versi 1.0-aplha3
UNCENSORED
VERSION
Lisensidibawah:
CreativeCommons
AttributionShareAlike3.0
http://creativecommons.org
Madewith
LinuxUserGroup
STIKOMPSurabaya
http://rioastamal.net/
http://lug.stikom.edu/
DASAR- DASAR
WEB PROGRAMMING
Versi 1.0-alpha2
Februari 2008
Copyright 2008-2009
rio astamal (c0kr3x@gmail.com)
Lisensidibawah:
CreativeCommons
AttributionShareAlike3.0
http://creativecommons.org
LinuxUserGroup
STIKOMPSurabaya
Pendahuluan
UNDERCONSTRUCTION....
LUGSTIKOMSurabaya
BabIHTMLdanWorldWideWeb
BABI
HTMLdanWorldWideWeb
1.1CaraKerjaWWW
Ketikakitamengunjungisebuahsituskatakanlah,google.com,adasebuahprosesdibaliklayar
yangtidakandaketahui.Prosestersebutcukupkompleksnamun,jikadigambarkandalamsebuah
diagramsederhanakuranglebihakansepertiberikut:
REQUEST
Browser
INTERNET
User
Server
RESPONSE
Gambar1.1:CarakerjaWWW
Secarakronologisurutanprosespadadiagramdiatasadalah:
1.
2.
3.
4.
5.
Usermembukaalamatwebsitepadabrowser
BrowsermengirimHTTPRequestkeserver
ServermeresponHTTPRequestdaribrowser
ServermengirimHTTPResponsekebrowser
Browsermenampilkanhalamanwebsitekepadauser
1.2HTML
HTML/XHTMLmerupakanformattampilanyangdigunakanuntukmenampilkanhalamanwebsite.
HTMLterdiridarisimbolsimboltertentuyangseringdisebutdengantag.Sebuahhalamanwebsite
yangvalidselaludiapittag<html></html>.FileHTMLumumnyamemilikiakhiran*.htmatau
*.html.
TagtagpadaHTMLselaludiawalidengan<x>...</x>,dimanaxtagHTMLseperti<strong>,<p>,
<div>,danlainlain.DibawahiniadalahtabelbeberapatagHTMLyangseringdigunakan.
TagHTML
Keterangan
<html></html>
TaguntukmengapithalamanHTML
<head></head>
Tagyangberisiinformasiumumdarihalaman
<title></title>
JudulHalaman*
<body></body>
Akanditampilkandibrowser
<style></style>
UntukCSS*
<strong></strong>
Untukmenebalkanteks
<div></div>
Untukmembuatlayer
<a></a>
Untukmembuathyperlink
20082009RioAstamalHal.1
LUGSTIKOMSurabaya
<p></p>
Untukmembuatparagraf
<hn></hn>
Untukmembuatheader**
<span></span>
Untukinlinestyle(manipulasiteks)
<!>
Komentar
*Tagtersebutharusberadadidalamtag<head>...</head>
**ndapatberupaangkadari15,contoh<h1>...</h1>
PenerapanTeoriHTML
1. Bukaeditoranda(gedit(Linux),Notepad++(Windows),dsb))
2. Ketikkodeberikut:
1.
2.
3.
4.
5.
6.
7.
8.
<html>
<head>
<title>WebsitePertamaku</title>
</head>
<body>
<h1>HelloF**kingWorld!!</h1>
</body>
</html>
3. Simpanpadadengannamahelloworld.html
4. Bukabrowseranda(Firefox,IE,dsb)danbukafileyangbarusajaandabuat.
5. Hasilnyaakansepertigambar1.1
Gambar1.1:helloworld.html
1.3ManipulasiFont
Untukmemanipulasifontkitaakanmenggunakaninlinestyle/CSS(akandibahasdibagian
berikutnya).Kitatidakakanmenggunakantag<font>karenataginisudahkunoaliasdeprecated.
W3CsebagaipengembangHTMLsudahtidakmenyarankanuntukmenggunakantagfontlagi.
Sebagaigantinyadigunakantag<span>daninlinestyle.Inlinestyleadalahattributstyleyang
diberikanpadasebuahtagHTML.Contoh,untukmembuattampilantekstebalgunakancara
berikut:
<spanstyle=fontweight:bold>Akuadalahtekstebal</span>
LUGSTIKOMSurabaya
Output:
Akuadalahtekstebal
Padacontohdiataskitamemberikanattributstyle,yangberisifontweight:bold.Maksudnya
adalahkitaakanmengaplikasikanstyleboldpadateksyangdiapitolehtag<span></span>.
Pemberianstyletidakhanyaterbataspadasatubagiansaja.andadapatmemberikanbeberapastyle
sekaligusdenganmemberitandapemisahberupa;untuksetiapstyle.
<spanstyle=fontweight:bold;textdecoration:underline;fontstyle:italic>Aku
adalahtekstebal,bergarisbawahdanmiring</span>
Output
Akuadalahtekstebal,bergarisbawah,danmiring
Padacontohdiataskitamenerapkantigastylepadatagspan.Dapatdilihatkalausetiapstyle
dipisahkanolehtitikkoma.Intinyakitadapatmemberikanbanyakstylesekaliguspadasuatutag.
Attributstyletidakterbataspadatagspansaja,hampirsemuatagyangdigunakan
untukpresentasiteksdapatkitasisipitagstyle.
PenerapanTeoriManipulasiTeks
1. Bukagedit/Notepad++
2. KetikkodeHTMLberikutini
1. <html>
2. <head>
3.
<title>ManipulasiTeks</title>
4. </head>
5. <body>
6.
<h1style="color:red;textdecoration:underline">PENGUMUMAN!</h1>
7.
<spanstyle="color:#FF0000">
8.
Barangsiapayangmenemukandompetsaya,akansayaberi
9.
<spanstyle="fontweight:bold;fontstyle:italic">ISTRI,MOBIL,RUMAHdan
10.
SegalaSERTIFIKATTANAHSAYA</span>DIJAMIN!!!.</span>
11.</body>
12.</html>
3. Simpandengannamamanipulasiteks.html
4. Bukadenganbrowseranda
5. Hasilnyaakansepertigambar1.2
LUGSTIKOMSurabaya
Gambar1.2
1.4Hyperlink
Andatentuseringmelngklikgambaratautulisanyangmengarahkehalamanlainatauwebsite
lainnya.Yangandaklikituadalahhyperlinkataulebihdikenaldenganistilahlinksaja.Untuk
membuatlinkkitadapatmenggunakantag<a></a>.Duaattributyangpalingseringdigunakan
padatag<a>adalahhrefdantarget.
hrefdigunakanuntukmenentukanlokasitujuandarilink.DapatberuparelatifURLatauabsolut
URL.
targetdigunakanuntukmenentukanapakahhalamanakandibukapadajendela/windowbaruatau
tidak.Defaultnyaadalahselfdimanalinktidakdibukapadawindowbaru.Jikainginmembukapada
windowbarugunakannilai_blank.
Untuklebihmemahamicarakerjalink,kitaakanmembuatduafileyaituprofilku.htmldandaftar
situs.html.
1. <html>
2. <head>
3.
<title>ProfilJSL</title>
4. </head>
5. <body>
6.
<h2>ProfilKu</h2>
7.
<ul>
8.
<li><strong>NamaLengkap:</strong>JohnSeptianLennon<li>
9.
<li><strong>Tempat/Tgl.Lahir:</strong>Lipermboh,14September1940</li>
10.
<li><strong>Pekerjaan:</strong>RockerJalanan<li>
11.
<li><strong>Wafat:</strong>Tewastertembakolehpenggemardidepan
12.
kandangsapipada1980</li>
13.
</ul>
14.
<p>Inginlihatdaftarsitusfavoritsaya?<ahref="daftarsitus.html">
15.
klikdisini</a>.</p>
16.</body>
17.</html>
3. Simpandengannamaprofilku.html
LUGSTIKOMSurabaya
4. Buatfilebarulagi,kemudianketikkodeberikut:
1. <html>
2. <head>
3.
<title>DaftarsitusfavoritJSL</title>
4. </head>
5. <body>
6.
<h2>DaftarSitusfavoritku</h2>
7.
<ol>
8.
<li><atarget="_blank"href="http://www.google.com/">OmGoogle</a></li>
9.
<li><atarget="_blank"href="http://www.milw0rm.com">
10.
CacingUnderground</a></li>
11.
</ol>
12.
<p><ahref="profilku.html">Lihatprofillengkap</a></p>
13.</body>
14.</html>
5. Simpandilokasiyangsamadenganprofilku.htmldanberinamadaftarsitus.html
6. Bukafileprofilku.htmldenganbrowseranda,dancobakliklinkyangadauntukmemahami
carakerjanya
Gambar1.3
1.5MembuatTabel
Untukmembuattabelkitadapatmenggunakantag<table></table>.Dalambeberapatahunterakhir,
penggunaantabelsebagailayoutwebsitesudahtidakrelevanlagi,dandigantikanolehtagDIV.Saat
inipenggunaantabeldikhususkanhanyauntukmenampilkandatasecaratabularsajatidakuntuk
designhalaman.
Beberapatagyangseringdigunakansaatmembuattabeladalah:
Tag
Keterangan
<tr></tr>
Digunakanuntukmembuatbarisbaru
<th></th>*
Digunakanuntukmembuatheadertabel
<td></td>*
Digunakanuntukmembuatkolom
*Tagtersebutselaluberadadidalamtag<tr>...</tr>
Sepertihalnyataglainyangdigunakanuntukpresentasiteks,seperti<span>,andadapat
menggunakanattributstyleuntukmemformattampilantampilantabel.Berikutiniadalahcontoh
LUGSTIKOMSurabaya
pembuatantabelmenggunakanHTML.
1. Bukatekseditor(gedit/Notepad++)
1. <html>
2. <head>
3.
<title>TABELIPS/IPK</title>
4. </head>
5. <body>
6.
<h2>TabelIPSampaisemester4:</h2>
7.
<tablestyle="width:600px;"border="1">
8.
<trstyle="backgroundcolor:#cfcfcf">
9.
<th>SEMESTER</th>
10.
<th>IPS</th>
11.
</tr>
12.
<tr>
13.
<td>SEMESTER1</td><tdstyle="textalign:right">4.0</td>
14.
</tr>
15.
<tr>
16.
17.
</tr>
18.
<tr>
19.
20.
</tr>
21.
<tr>
22.
23.
</tr>
24.
<trstyle="textalign:right;backgroundcolor:#FFCB68;fontweight:bold">
25.
<tdstyle="textalign:center;">NILAIIPK>>></td>
26.
<tdstyle="textalign:inherit;">4.0</td>
27.
</tr>
28.
</table>
29.</body>
30.</html>
3. Simpandenannamatabel.html
4. Bukadenganbrowseranda,hasilnyaakannampaksepertigambar1.4
Gambar1.4
LUGSTIKOMSurabaya
>merupakanspecialcharacteruntuktanda>.DalamHTMLspecialcharacter
diawalitandaampersand&dandiakhiri;.Contohlainadalah<untuk<,
©untuk
1.6HTMLForm
HTMLFormseringdigunakanuntukmemintainputandariuseryangkemudiandiprosesoleh
serversidescriptingsepertiPHP,JSP,dansebagainya.FormHTMLdiapitolehtag<form></form>.
Duaattributyangpalingseringdigunakandalampenggunaanformadalah:
Action:Nilaidariattributinimenunjukkanlokasidarifilepemrosesdariform.Dapatberupa
relatifURI,contohfolderX/file.phpatauabsolutURI,contohhttp://contoh.com/file.php.
Method:Nilaidariattributmenentukanmetodedatayangdikirimkankefilepemroses,apakah
melaluimetodeGETatauPOST.
Contohpenggunaantagformsebagaiberikut:
<formaction=file.phpmethod=POST>
...
</form>
Tagformtidakbanyakbergunatanpaadanyataginputlain.Tagformberfungsihanyasebagai
wrapperyangmengelompokkandatayangakandikirim.Tagyangdigunakanbersamatagform
adalahtag<input>.
1.6.1Macammacaminput
Untukmenampilkantextbox,checkbox,radiobutton,danlainnyahanyadiperlukantag<input>.
Yangmembedakanoutputdarimasingmasingtampilanadalahnilaidariattributtype.Contoh
berikutmerupakanpenggunaantaginputuntukmenampilkantextbox:
<inputtype=textsize=16maxlength=16>
Berikutinidaftarnilaiyangdapatdigunakanpadaattributtype:
Nilaitype
Keterangan
text
Untukmenampilkantextbox
password
Untukmenampilkanpasswordfield
file
Untukmenampilkanprosesuploadfile(miripsepertitextboxnamun
dengantombolBrowse)
checkbox
Untukmenampilkantombolcheckbox(lebihdarisatupilihan)
radio
Untukmenampilkantombolradio/option(hanyasatupilihan)
submit
Tomboluntukmensubmitform(defaultbuttonuntuksubmit)
button
samadengansubmithanyasajabukandefaultbutton
reset
Untukmembersihkantampilkanform
LUGSTIKOMSurabaya
hidden
Inputtidakditampilkandibrowser.
Selaintag<input>masihadataglainyangbiasadigunakandalamformyaitutag<select>dan
<textarea>.
PENERARANTEORIHTMLFORM
1. Bukagedit/Notedpad++
1. <html>
2. <head>
3.
<title>Registrasi</title>
4. </head>
5. <body>
6.
<h2>FormRegistrasi</h2>
7.
<formaction=""method="POST">
8.
<label>Nama:</label>
9.
<inputtype="text"size="30"name="nama"><br>
10.
<label>Username:</label>
11.
<inputtype="text"size="16"name="uname"maxlength="16"><br>
12.
<label>Password:</label>
13.
<inputtype="password"size="16"name="pass"maxlength="16"><br>
14.
<label>JenisKelamin:</label>
15.
<inputtype="radio"name="jk"value="pria"checked><span>Pria</span>
16.
<inputtype="radio"name="jk"value="wanita"><span>Wanita</span>
17.
<br>
18.
<label>Hoby:</label><br>
19.
<inputtype="checkbox"name="hob"value="spkbola"><span>SepakBola</span>
20.
<inputtype="checkbox"name="hob"value="game"><span>Game</span>
21.
<inputtype="checkbox"name="hob"value="tidur"><span>Tidur</span><br>
22.
<label>Deskripsikandirianda:<label><br>
23.
<textareastyle="height:100px;width:400px"name="desc"></textarea>
24.
<hr><br>
25.
<label>Darimanaandamendengarkami?</label><br>
26.
<selectname="dengar">
27.
<optionvalue="kuburan">Daridalamkubur</option>
28.
<optionvalue="google">Google</option>
29.
<optionvalue="mimpi">Mimpi</option>
30.
</select><br>
31.
<inputtype="submit"value="DAFTAR">
32.
<inputtype="reset"value="RESET">
33.
</form>
34.</body>
35.</html>
3. Simpandengannamaform.html
4. Bukadenganbrowserfiletersebut.
Hasilnyamemangtidakbegitubaguskarenakitatidakmelakukanstylingpadaform.
LUGSTIKOMSurabaya
Gambar1.6
Dalamkasusrealworldnilaiyangadapadaattributnamedanvaluelahyangakandikirimkefile
pemroses.
1.7MenampilkanGambar
UntukmenampilkangambarpadahalamanHTMLdapatdigunakantag<img>.Beberapaattribut
yangseringdigunakanadalahsrc,height,danwidth.Attributsrcdigunakanuntukmenentukan
alamatdarigambaryangakanditampilkan,dapatberuparelatifURIatauabsolutURI.Attribut
heightdigunakanuntukmenentukantinggi,sedangkanwidthuntukmenentukanlebar.
Secaradefaultnilaiyangadapadaheightdanwidthadalahdalampixel,kecualiandamenambahkan
tanda%.Makalebaratautinggidiukurmenggunakanpersen.Jikaandatidakmenyertakan
attributheightdanwidth,makagambartersebutakanditampilkansesuaidenganukuranaslinya.
Untuklebihmemahaminyaikutilangkahberikut:
1.
2.
3.
4.
1.
2.
3.
4.
5.
6.
7.
8.
Siapkanduabuahgambardalamfolderyangsamadenganfilehtml
Dalamcontohinisayamenggunakan(1)stikom.jpgdan(2)joinrevolution.jpg
Bukagedit/Notepad++
Ketikkodeberikut:
<html>
<head>
<title>JoinTheRevolution</title>
</head>
<body>
<imgsrc="stikom.jpg"align="left">
<strongstyle="color:red">SHOULD</strong>
<imgsrc="joinrevolution.jpg"align="center">
LUGSTIKOMSurabaya
9. </body>
10.</html>
5. Simpandengannamagambar.html
Gambar1.7
1.8XHTMLdanDOCTYPE
ApakahXHTMLitu?apakahiaberbedadenganHTML?SebenarnyaXHTMLadalahHTMLhanya
sajaXHTMLmengikutiformatXMLsebagaistandarpenulisannya.Jadisetiaptagharusmemiliki
penutup.
Andatentupernahmengetiktagtagtanpapenutupseperti<br>,<img>,dan<input>pada
pembahasansebelumnya.PadaXHTMLsemuatagharusmemilikipenutup,jikatidakmaka
halamanyangandabuattidaksesuaidenganstandaryangtelahditentukandandianggaptidakvalid/
compliantdenganstandarW3C.
BerikutiniadalahbeberapacontohpenulisanyangvaliddiHTMLtapitidakdiXHTML.
SALAH
BENAR
<strong><span>HelloWorld</strong></
span>
<strong><span>Hello
World</span></strong>
<inputtype=radiochecked>
<inputtype=radiochecked=checked/>
<br>
<br/>atau<br></br>
<imgborder=1>
<imgborder=1/>
<inputtype=buttonvalue=GO>>>>
<inputtype=button
value=GO>>>/>
<STRONG>Hello</strong>
<strong>Hello</strong>
Mungkinandabertanya,lalubagaimanasayamemberitahubrowserbahwahalamansayaadalah
XHTML?SemuaituterletakpadaDOCTYPEhalamananda.DOCTYPEadalahpententutipe
LUGSTIKOMSurabaya
documentyanginginandagunakanapakahHTML4.01,XHTML1.0Transitional,XHTML1.0
Strictdanlainnya.
DOCTYPEjugaseringdisebutDTD(DocumentTypeDefinition).Berikutiniadalahcontoh
penggunaantipedokumenHTML4.01,
<!DOCTYPEHTMLPUBLIC"//W3C/DTDHTML4.01//EN""http://www.w3c.org/TR/html4/
strict.dtd">
JikaandatidakmenyebutkanDTDyangandagunakanasumsidarisatubrowserdenganbrowser
yanglainmungkinberbedabeda.JadijikamemangandainginmenggunakanHTMLmurnibukan
XHTMLgunakanlahDTD4.01.DeklarasiDOCTYPEharusdiletakkanpalingawalsebelumtag
<html>.
UntukXHTMLbeberapaDTDyangseringdigunakanadalah
1.<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
2.<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
3.<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd">
PerbedaanTransitionaldanStrictterdapatpadatoleransikesalahan.Padatransitionaljikamasihada
kesalahanstandarpenulisanmasihdiberikantoleransi,sedangkanStricttidakmemberikantoleransi
samasekali.ContohhalamanXHTMLyangvalidadalahsebagaiberikut:
<?xmlversion="1.0"encoding="UTF8"?>
<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN"
<htmlxmlns="http://www.w3.org/TR/xhtml1">
<head>
<title>Everydocumentmusthaveatitle</title>
</head>
<body>
<span>HelloWorld</span>
</body>
</html>
DalampembahasanselanjutnyakitaakanselalumenggunakanXHTMLbukanlagiHTML.
DeklarasiversiXMLpadaawalhalamantidakharusditulisnamunsangat
dianjurkanuntukditulis.Attributxmlnsharusditulisuntukmenentukan
namespaceyangdigunakan.
1.9CSS(CascadingStyleSheets)
CSSmerupakansuatuteknologiyangdigunakanuntukmempermudahpembuatansebuahwebsite.
DenganCSSkitadapatdengancepatmengaplikasikansuatustylepadatagtertentu.Bahkankita
dapatmeletakkanCSSpadasuatufilesehinggadapatdigunakanolehbanyakhalamansekaligus.
ItumerupakansalahsatukelebihanCSS.CSSdiapitolehtag<style></style>danberadadiantara
tag<head></head>.KelebihanlainnyaadalahandadapatmenyisipkankomentarpadaCSS,halini
LUGSTIKOMSurabaya
cukuppentingjikajumlahCSSandasangatbanyak.KomentarpadaCSSdiapitolehkarakter/*
*/.
Padapembahasanpembahasansebelumnyakitaseringmenggunakanattributstyleuntuk
memformattampilanatauseringdisebutinlinestyle.Apayangadapadaattributstyletersebut
sebenarnyaadalahCSSyangvalid,hanyasajaletaknyadidalamtag.
HampirsemuatagdapatdimanipulasimenggunakanCSSseperti<body>,<span>,<div>,<table>,
<p>,danmasihbanyaklagi.BerikutiniadalahcontohsederhanapenggunaanCSSpadatagbody.
body{fontface:Verdana;fontsize:11px}
Padacontohdiataskitamemformatsemuateksyangadapadatagbodymenjadiberjenishuruf
Verdanadenganukuran11pixel.Tagbodypadacontohdisebutselectorsedangkanattributstyle
didalamnyadisebutdeclaration.Declarationditandaidenganadanyakurungkurawal{...}.
PenerapanTeoriCSS
1. <?xmlversion="1.0"encoding="UTF8"?>
2. <!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN"
3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
4. <htmlxmlns="http://www.w3.org/TR/xhtml1">
5. <head>
6.
<title>CSSCascadingStyleSheets</title>
7.
<styletype="text/css">
8.
body{fontfamily:Verdana,Serif;fontsize:11px}
9.
div{
10.
border:2pxsolid#cccccc;
11.
padding:4px
12.
}
13.
h2{
14.
textdecoration:underline;
15.
fontstyle:italic;
16.
fontsize:18px
17.
}
18.
</style>
19.</head>
20.<body>
21.
<div>
22.
<h2>IniadalahcontohsederhanapenggunaanCSS</h2>
23.
</div>
24.</body>
25.</html>
3. Simpandengannamacss.html
4. Lalujalankanpadabrowser,hasilnyaakanterlihatsepertigambar1.8
LUGSTIKOMSurabaya
Gambar1.8:ContohpenggunaanCSS
DapatandalihatbahwatagyangkitadeklarasikanpadaCSSsecaraotomatisstyletagtersebut
mengikutiaturanCSSyangkitabuat.Dengandemikiankitadapatdenganmudahmemodifikasi
banyakelemensekaligushanyadarisebuahbarisCSS.
1.9.1CSSClassdanID
Jikaandacukupkreatif,sayaharapmemangdemikian:)makaandamungkinberfikirkalau
penggunaancarasepertipembahasansebelumnyatidaksepenuhnyabaik.Mengapa?Bayangkanjika
padabeberapabagianpadahalaman,andatidakinginmengaplikasikanstyletersebut.Laluapayang
andalakukan?Merubahnyasecaramanuallewatinlinestyle?Itumemangdapatdilakukantapitidak
efisien.
CarayangpalingefektifdanefisienadalahdenganmenggunakanclassdalamCSS.Dengan
menggunakanclasskitadapatmenentukanletakbagianyangharuskitaaplikasikansuatustyle.
Penggunakanclassdiawalidengantandatitik..Lihatcontohberikut:
.tebalmiring{fontweight:bold;fontstyle:italic}
div.error{color:red;fontweight:bold}
Barispertamamerupakangeneralclasskarenasemuatagdapatmenggunakannya.Sedangkanpada
bariskeduaadalahregularclasskarenaclasstersebuthanyaberlakupadatagdivsaja.Untuk
mengaplikasikanstyleyangadapadaclasskitaharusmemasukkannamaclasstersebutpadaattribut
class.
Caralainadalahdenganmenggunakannilaidariattributidpadasetiaptag.Nilaidariattributid
antaratagyangsatudengantagyanglaintidakbolehadayangsama.Tandayangdigunakanbukan
titikmelainkantandapagar#.
#main{border:1pxsolid#000000}
div#header{padding:4px}
OK,marikitabuatsebuahfileuntuklebihmemahaminya.
LUGSTIKOMSurabaya
5. <head>
6.
<title>CSSClass&ID</title>
7.
8.
9.
#main{
10.
11.
padding:4px
12.
}
13.
div.box{
14.
border:1pxsolidorange;
15.
backgroundcolor:#FFF8B9;
16.
padding:6px3px;
17.
color:#c60000;
18.
width:200px
19.
}
20.
.greenforce{
21.
fontweight:bold;
22.
color:green
23.
}
24.
</style>
25.</head>
26.<body>
27.
<divid="main">
28.
<divclass="box">
29.
I'mtheWalRUS...!!<br/>GOOGOOG'JOOB!!!
30.
</div>
31.
<spanclass="greenforce">Classgreenforcepadatagspan</span>
32.
<pclass="greenforce">Classgreenforcepadatagp</p>
33.
</div>
34.</body>
35.</html>
3. Simpandengannamacssclass.html
4. Hasilnyaakantampaksepertigambar1.9jikaandajalankanpadabrowser
Gambar1.9
1.9.2HyperlinkPseudoclass
Jikaandapernahmengunjungisuatuwebsitedanandamenggerakkanmouseandakearahsebuah
linklalulinktersebutberubahwarnadanmenjadibergarisbawahatausebaliknya.Apayanganda
lihattersebutadalahhasildarihyperlinkpseudoclassnyaCSS.
Sepertiyangsudahdibawassebelumnyauntukmembuatlinkkitamenggunakantag<a></a>.Oleh
LUGSTIKOMSurabaya
karenaitutaginiliahyangakankitamanipulasi.Formatpenulisanhyperlinkpseudoclassadalah
a:nama_aksi,dimananama_aksidapatberupa:
link:Tampilanlinkketikatidakdipiliholehuser(biasanyatidakperluditulis)
visited:Tampilanlinksetelahdiklik
active:Tampilanketikalinkdiklik
hover:Tampilanketikamousemelewatilink(lebihseringdigunakandaripadaactive)
Penasaran?langsungsajabuatfileuntukmencobanya.
5. <head>
6.
<title>HyperlinkPseudoclass</title>
7.
8.
9.
a:link{
10.
color:green;
11.
textdecoration:underline
12.
}
13.
a:visited{
14.
color:green;
15.
textdecoration:underline
16.
}
17.
a:active{
18.
fontweight:bold;
19.
textdecoration:none;
20.
color:#c60000
21.
}
22.
a:hover{
23.
fontstyle:italic;
24.
fontweight:bold;
25.
color:#c60000;
26.
textdecoration:none
27.
}
28.
</style>
29.</head>
30.<body>
31.
<div>
32.
<ahref="#">Link1</a><br/>
33.
<ahref="#">Link2</a><br/>
34.
<ahref="#">Link3</a>
35.
</div>
36.</body>
37.</html>
3. Simpandengannamapseudoclass.html
4. Bukabrowserandalalubukafiletersebut
LUGSTIKOMSurabaya
Gambar:1.10
1.9.3ExternalCSS
Sampaisaatiniandasudahtahubagaimanamudahnyamemodifikasistyledenganmenggunakan
CSS.AgardalampembuatanwebsitekitalebihefisienmakasebaiknyakitameletakkanfileCSS
kitapadasuatufiletersendiri.Sehinggakitadapatmeloadnyapadahalamanyangmembutuhkan
styeyangadapadafileCSStersebut.
FileCSSyangakankitaloadtidakharusberadasatukomputerdenganfileHTMLkita.FileCSS
tersebutdapatberadapadawebsitelain,inidimungkinkankarenakitadapatmenggunakanURL
padasaatpemanggilanfile.
AdaduametodeuntukmemanggilfileCSS,yangpertamaadalahdenganmenggunakantag<link>
danyangkeduaadalahmenggunakanstatement@importdidalamCSS.Carayanglebihsering
digunakanadalahmenggunakantag<link>.Tidakadayanglebihjelasdaripadalearningbydoing,
karenaitulangsungsajakitapraktikkan.
1. body{fontfamily:Verdana,Serif;fontsize:14px}
2. #main{
3.
4.
padding:4px
5. }
6. div.error{
7.
border:1pxsolid#c60000;
8.
borderleft:5pxsolid#c60000;
9.
color:#c60000;
10.
fontsize:14px;
11.
padding:4px6px;
12.
fontweight:bold;
13.
width:350px;
14.}
3. Simpandengannamamy.css
4. Buatfilebarulagi,kemudianketikkodeberikut:
1.
2.
3.
4.
5.
6.
<head>
<title>ExternalStylesheet</title>
LUGSTIKOMSurabaya
7.
<linkrel="stylesheet"type="text/css"href="my.css"/>
8. </head>
9. <body>
10.
<divid="main">
11.
<h2>ExternalStylesheet/CSS</h2>
12.
<divclass="error">
13.
WARNING!,memoryotakandasudah90%penuhsilahkankosongkanpikiran
14.
pikirankotoryangtidakdiperlukan...!!!
15.
</div>
16.
</div>
17.</body>
18.</html>
5. Simpandengannamaexternalcss.html
6. Jalankanpadabrowser,hasilnyaakanterlihatsepertigambar1.11
Gambar1.11
1.10MembuatLayoutdenganDIV
Sepertiyangsudahdisinggungpadapembahasantentangtabel,kalaupembuatandesignwebsite
yangmenggunakantabeldapatdikatakansudahtidakrelevanlagi.Sebagaipenggantidaritabel
adalahtagdiv.Tagdivmemangdikhususkanuntukmembagihalamankedalambeberapasegmen.
Jikakitagabungkandenganpenggunakanattributiddanclass,makadivdapatkitagunakanuntuk
layoutsebuahhalaman.
Secarakasarsetiaphalamanyangbaikpastimemilikibeberapabagaian,misalnyahalaman
tersebutterdiridariheader,kemudianbeberapakolomuntukcontentutama,dansebagainya.Semua
ituterserahpadadesignernya.
Padacontohkasusyangakankitabuatnantinya,kitaakanmembuatsebuahlayouthalamanyang
terdiridari:
1.
2.
3.
4.
5.
Headerutamahalaman
2Kolom
1untukcontentutama
1untukberitaataulainnya
lebarhalamantidaklebihdari800px(untukberjagajaga,karenamasihbanyakuseryang
resolusimonitornya800x600)
6. Footerhalaman
LUGSTIKOMSurabaya
Designhalamanyangakandibuattidakmelibatkanpenggunaangambar,karenaprioritaskitadisini
hanyalahbagaimanacaramengaturtataletakkomponenmenggunakantagdiv.OK,langsungsaja
tanpabanyakmendriblebola,lhokok?
1. *{padding:0;margin:0}
2. body{
3.
fontfamily:Verdana,Arial,Serif;
4.
fontsize:11px;
5.
color:#333;
6.
background:#fafafa;
7. }
8. /*pembatasutama*/
9. #container{
10.
margin:6pxauto;
11.
textalign:left;
12.
clear:both;
13.
background:#fff;
14.
border:2pxsolid#666;
15.
width:778px;
16.
padding:0;
17.}
18.#header{
19.
clear:both;
20.
margin:2px;
21.
background:#FFEA8C;
22.
border:1pxsolidorange;
23.
height:95px;
24.}
25.#headerh1{
26.
fontsize:2em;
27.
fontfamily:Arial;
28.
color:#c60000;
29.
margin:14px6px4px8px;
30.}
31.#menu{
32.
clear:both;
33.
padding:0;margin:0025px2px;
34.}
35.#menuul{
36.
float:left;
37.
border:none;
38.
liststyle:none;
39.
font:bold14pxArial;
40.}
41.#menuulli{
42.
display:inline;
43.}
44.#menuullia{
45.
paddingright:16px;
46.
borderbottom:4pxsolidorange;
47.}
48.#menuullia:hover{
49.
borderbottom:4pxsolid#c60000;
50.}
51.#menuullia.aktif{
52.
borderbottom:4pxsolid#c60000;
LUGSTIKOMSurabaya
53.}
54.#footer{
55.
position:relative;
56.
clear:both;
57.
height:40px;
58.
border:none;
59.
background:#cfcfcf;
60.
color:#fff;
61.
width:100%;
62.
textalign:center;
63.}
64.#footerspan{
65.
top:10px;
66.
position:absolute;
67.}
68.#content{
69.
margin:2px2px8px2px;
70.
float:left;
71.
width:485px;
72.
border:1pxsolid#ccc;
73.
padding:6px10px;
74.}
75.#contenth1{
76.
borderbottom:2pxdashed#ccc;
77.
marginbottom:16px;
78.}
79.#side{
80.
81.
float:right;
82.
margin:2px;
83.
width:250px;
84.
padding:2px;
85.}
86.#sideh1{
87.
borderbottom:1pxsolid#fafafa;
88.}
89.#sideh2{
90.
background:#cfcfcf;
91.
padding:3px;
92.
color:#333;
93.
textalign:center;
94.}
95.#sidep{
96.
97.
padding:4px;
98.}
99.a{textdecoration:none;color:#666}
100.a:visited{color:#666}
5. Simpandengannamalayout.css
6. Buatfilebaru,lanjutkandenganmengetikkodeberikut:
1.
2.
3.
4.
5.
6.
7.
<head>
<title>LayoutMenggunakanDIV</title>
<linkrel="stylesheet"type="text/css"href="layout.css"/>
LUGSTIKOMSurabaya
8. </head>
9. <body>
10.
<divid="container">
11.
<divid="header">
12.
<h1>R.I.PJohn</h1>
13.
</div>
14.
<divid="menu">
15.
<ul>
16.
<li><aclass="aktif"href="#">Home</a></li>
17.
<li><ahref="#">Books</a></li>
18.
<li><ahref="#">Search</a></li>
19.
<li><ahref="#">About</a></li>
20.
<li><ahref="#">ContactUs</a></li>
21.
</ul>
22.
</div>
23.
<divid="content">
24.
<h1>WorkingClassHero</h1>
25.
<p>Assoonasyou'reborntheymakeyoufeelsmall<br/>
26.Bygivingyounotimeinsteadofitall<br/>
27.Tillthepainissobigyoufeelnothingatall<br/>
28.Aworkingclassheroissomethingtobe<br/>
29.<br/>
30.Theyhurtyouathomeandtheyhityouatschool<br/>
31.Theyhatedyourcleveranddespisedafool<br/>
32.Tillyou'resofuckingcrazyyoucan'tfollowtheirrules<br/>
34.<br/>
35.Whenthey'vetorturedandscaredyoufortwentyhardyears<br/>
36.Thentheyexpectyoutopickacareer<br/>
37.Whenyoucan'treallyfunctionyou'resofulloffear<br/>
39.<br/>
40.KeepyoudopedwithreligionandsexandTV<br/>
41.Andyouthinkyou'resocleverandclasslessandfree<br/>
42.Butyou'restillfuckingpeasantsasfarasIcansee<br/>
45.<br/>
46.There'sroomatthetoptheyaretellingyoustill<br/>
47.Butfirstyoumustlearnhowtosmileasyoukill<br/>
48.Ifyouwanttobelikeallthefolksonthehill<br/>
49.<br/>
50.Ifyouwanttobeaherowelljustfollowme</p>
51.
</div>
52.
<divid="side">
53.
<h2>IMAGINE...</h2>
54.
<p>Imaginethere'snoheaven
55.It'seasyifyoutry
56.Nohellbelowus
57.Aboveusonlysky
58.Imagineallthepeople
59.Livingfortoday...
60.Imaginethere'snocountries
61.Itisn'thardtodo
62.Nothingtokillordiefor
63.Andnoreligiontoo
65.Livinglifeinpeace...
66.YoumaysayI'madreamer
67.ButI'mnottheonlyone
68.Ihopesomedayyou'lljoinus
LUGSTIKOMSurabaya
69.Andtheworldwillbeasone
70.Imaginenopossessions
71.Iwonderifyoucan
72.Noneedforgreedorhunger
73.Abrotherhoodofman
75.Sharingalltheworld...
76.YoumaysayI'madreamer
77.ButI'mnottheonlyone
78.Ihopesomedayyou'lljoinus
79.Andtheworldwillliveasone...</p>
80.
</div>
81.
<divid="footer">
82.
<span>19401980</span>
83.
</div>
84.
</div>
85.</body>
86.</html>
Gambar1.12
1.11Javascript
LUGSTIKOMSurabaya
Javascriptadalahsebuahbahasapemrogramanyangkhususdirancanguntukwebsite.Javascript
hanyaberjalandisisiklien,artinyapenggunaanjavascripthanyaterbataspadawebbrowseranda
saja,iatidakbisamelakukanmanipulasidatapadasisiserver.Saatinijavascriptmerupakansalah
satuelementterpentingdariteknologiwebterkini.AJAXadalahsalahsatucontohpenggunakan
javascriptyangsaatinibanyakdigunakanolehwebsiteWeb2.0.
Namunpadabukuinisayahanyamembahasjavascriptsepintassaja,untuktahulebihjauhtentang
javascriptandadapatmencarilewatgoogleatautunggubukusayaberikutnyahehehe...
1.11.1MenggunakanJavascript
Secarasederhanasebuahscriptjavascriptdiapitolehtag<script></script>,namununtuklebih
memperjelaspenggunaanjavascriptbiasanyaditambahkanattributlanguageatautype,contoh
sepertiberikut:
<scriptlanguage=javascript>
//javascriptkodedisini...
</script>
atau
<scripttype=text/javascript>
//javascriptkodedisini...
</script>
Kenapademikian?KarenajikaandapenggunabrowserIEmakaiamemilikisatubahasalagiselain
javascriptyaituvbscript.Namunpadakenyataannyahampirtidakadasitusyangmenggunakan
vbscript,jadisecaradefaultpunjikaandahanyamenggunakantag<script></script>makaIEakan
menganggapscripttersebutadalahjavascript.
Tag<script>dapatandaletakkanpadalevelglobalyaitupadatag<head></head>atausecaralokal
dimanapundalamtag<body></body>.OKlangsungsajakitacobascriptwongjowoini.
5. <head>
6.
<title>MenggunakanJavascript</title>
7.
<scriptlanguage="javascript">
8.
varnama=prompt("Masukkannama:","namaanda");
9.
vartanya=confirm(nama+",apakahandalakilaki?");
10.
if(tanya==true){
11.
alert("Halo"+nama+"kamuadalahlakilaki!");
12.
}else{
13.
alert("Halooo"+nama+"...kamucewekya...?ataujanganjangan...?");
14.
}
15.
</script>
16.</head>
17.<body>
LUGSTIKOMSurabaya
18.</body>
19.</html>
3. Simpandengannamajavascript.html
4. Jalankanpadabrowseruntukmelihathasilnya.
Gambar1.13:Javascriptprompt
Padacontohdiataskitameletakkanjavascriptpadalevelglobaldenganmeletakkannyapadatag
<head></head>.prompt,confirm,danalertadalahfungsifungsibuiltinjavascriptyangdapatkita
gunakanuntukberinteraksidenganuser.
JikaandafamiliardenganbahasasepertiJava,C++,C,atauanakcucunyamakaandatidakakan
terlaluberlamalamamenyesuaikandiridengansyntaxjavascript.Halitukarenasyntaxjavascript
sangatmiripdenganketigabahasayangtelahdisebutkandiatas.Untukmendeklarasikanvariabel
padajavascriptkitadapatmenggunakankeywordvar.
Javascriptversiterbarusudahmendukungpenggunaantipedatadalam
pendeklarasianvariabelsepertiint,string,dll.Namununtukmenjagakompatibilitas
sebaiknyatetapgunakankeywordvar.
1.11.2ManipulasiDOM
SalahsatufungsiutamajavascriptadalahkemampuannyauntukmemanipulasiDOM(Document
ObjectModel).DOMsendiriadalahsuatustrukturdidalamdokumenHTMLyangberbentukseperti
treeyangkomponenkomponennyaadalahelemenHTMLsepertitag.Karenakemampuaninilah
makadenganjavascriptkitadapatmenciptakanDHTMLEffect(DynamicHTMLEffect).
SalahsatucontohpengaplikasianDHTMLEffectadalahhideandshowsuatuelemenHTML.
Misal,jikasuatutomboldiklikmakatampilanhilangatautampil.Semuainidimungkinkankarena
javascriptdapatmelakukanmodifikasistyleCSSpadaelemensecaralangsungatauparageeky
lebihsukamenyebutnya:onthefly:).
Untuklebihmemahaminyasebaiknyakitalangsungsajamencobanyalewatcontoh.
LUGSTIKOMSurabaya
5. <head>
6.
<title>ManipulasiDOM</title>
7.
<scriptlanguage="javascript">
8.
functionberiWarna(){
9.
varkotak=document.getElementById('kotak');
10.
varwarna=document.getElementById('warna');
11.
//gantiCSSonthefly
12.
kotak.style.backgroundColor='#'+warna.value;
13.
}
14.
functionhideShow(){
15.
varkotak=document.getElementById('kotak');
16.
varstatus=kotak.style.display;
17.
//setCSSdisplaykeblockataunone
18.
if(status=='block'){
19.
kotak.style.display='none';
20.
}else{
21.
kotak.style.display='block';
22.
}
23.
}
24.
</script>
25.
26.
#kotak{
27.
border:3pxsolid#000;
28.
padding:4px;
29.
backgroundcolor:#ccc;
30.
fontsize:18px;
31.
fontweight:bold;
32.
width:300px;height:200px;
33.
}
34.
</style>
35.</head>
36.<body>
37.
<form>
38.
<label>Warna</label>
39.
#<inputtype="text"id="warna"name="warna"size="5"value="ccc"/>
40.
<inputtype="button"onclick="beriWarna()"value="GantiWarna"/>
41.
<inputtype="button"onclick="hideShow()"value="HideorShow"/>
42.
</form>
43.
<br/>
44.
<divid="kotak"style="display:block">
45.
SAYABUKANDUKUN,PESULAPATAUBAHKANBUNGLONTAPISAYABISABERUBAH
46.WARNADANMENGHILANG.HEBATKAHSAYA?TENTUTIDAK.YANGHEBATADALAH
47.YANGMENULISSAYABUKANBEGITU?:p
48.
</div>
49.</body>
50.</html>
3. Simpandengannamadom.html
4. Bukafilemenggunakanbrowseruntukmelihathasilnya.
Hasilnyakuranglebihakansamadengangambar1.14.
PenjalasanSingkatFiledom.html
Banyakhalbarumenyangkutpenggunaanjavascript,sepertipenggunaankeywordfunctiondan
LUGSTIKOMSurabaya
metodegetElementById.Jikatidakmengertiuntuksementaratelansaja:pkarenabukuinimemang
tidakmengharuskanandamenguasaijavascript.
Fungsipadajavascriptditandaidengankeywordfunction.Fungsimerupakanpengemlompokkan
sejumlahperintahuntukdieksekusipadasatuwaktuketikafungsiitudipanggil.Padacontohkita
membuatduafungsiyaituberiWarna()danhideShow().Objectyangakankitamodifikasistylenya
adalahobjectdenganelemenidbernamakotakdalamhalinielementersebutadalahsebuahdiv.
<divid="kotak"style="display:block">
Agarobjectdivtersebutdapatkitamanipulasimakakitaperlumembuatkansebuahwadahuntuk
menampungobjecttersebutdalamjavascript.UntukitudigunakanlahsalahsatufungsiDOMyaitu
getElementById.Setelahkitamendapatkanobjecttersebutmakakitabebasuntukmemodifikasinya.
Contohsederhanaadalahmengubahstylesheetdariobjecttersebut.Setiaptagyangdapat
dimanipulasidenganCSSmemilikiatributstyle.BedanyajikapadaCSSformatpenulisannyajika
terdiridariduakatamakadipisahdengantandacontoh:backgroundcolor,fontfamily,fontsize,
dansebagainya.TapipadajavascriptdigunakanmodelCapitalis,contoh:backgroundColor,
fontFamily,fontSizedansebagainya.
Warnayangdigunakanpadacontohadalahmenggunakanhexadecimal.Contohcontohwarnayang
dapatandagunakansebagaibahanujicobaadalah:90EE90,FFFF00,FFC0CB,danmasihbanyak
lagi.
Gambar1.14:ManipulasiDOM
LUGSTIKOMSurabaya
RingkasanBabI
PadababinikitatelahmempelajaridasardasarpenggunaanHTML,bagaimanamengunakantag
tagnya,memanipulasiteksdenganCSSdanmendesainlayoutsederhanamenggunakanCSSdan
DIV.HalyangperludiingatadalahkitaakanmenggunakanstandarXHTMLjadisetiaptagpasti
memilikipenutup.OlehkarenaituuntukpembahasanselanjutnyaDOCTYPEyangakankitapakai
adalahXHTMLTransitional.
Padababinikitajugasedikitmembahastentangpenggunakanjavascriptsecarasederhanauntuk
penyampaianinformasikeuserberupadialogboxdaninputbox.Selainitukitajugasedikit
membahasbagaimanamemanipulasiDOMmenggunakanjavascript.FungsiDOMtersebutadalah
getElementById.
LUGSTIKOMSurabaya
BabIIPengenalanPHP
BabII
PengenalanPHP
2.1ApaItuPHP?
PHP(akronimdariPHP:HypertextPreprocessor)adalahbahasaserversidescriptingyangdidesain
khususuntukweb.PadahalamanHTMLandadapatmenempelkan(embed)kodePHP.KodePHP
dieksekusidisisiserverbukandikomputerklien.DanhasilyangditampilkanadalahkodeHTML
murni.
PHPmerupakanhasilkerjaseorangbernamaRasmusLerdorfpada1995.NamunkemudianPHP
berkembangdantidakhanyamerupakanproyekpribadiRasmus.PHPditulisulangdandengan
banyakmenambahkanfungsifungsibaruolehZeevSuraskidanAndiGutmants(disingkatZend)
danlahirlahPHP3pada1998.
PHPmasihterusdikembangkan,padatahun2002PHPhadirdenganversike4.PHP4dilengkapi
denganZendEnginedanmengalamibanyakpeningkatanperforma.Danyangpalingakhirpada
tahun2005PHP5hadirdengandukunganZendEngine2.Banyakfiturbarukhususnyapada
OOP(ObjectOrientedProgramming)danXML
BerbedadengandenganPHP4,adopsiPHP5dikalanganindustrisangatlambat.Bahkanhingga
sekarangmasihcukupbanyakhostingyangbelummenyediakanPHP5.Halinidikarenakan
beberapafaktor,diantanranyakompatibilitasdenganversiPHP4.
PadasaatbukuiniditulisversiterakhirdariPHPadalahversi5.2.8untukPHP5danversi4.4.9
untukPHP4.PHP6jugasudahdikembangkanmeskipundalamtahapalpha.
Untuk instalasi PHP silahkan baca halaman pendahuluan.
2.2CaraKerjaPHP
CarakerjaPHPyangakankitabahaspadabukuiniadalahPHPsebagaibahasapemrogramanuntuk
mengembanganaplikasiberbasisweb.KarenaselainuntukwebprogrammingPHPjugadapat
digunakanuntukmengembanganaplikasiberbasisdesktopdanCLI(CommandLineInterface).
Browser
HTMLResponse
PHPRequest
HTTPRequest
RequestPHPFile
HTTPResponse
Web
Server
PHP
HTMLResponse
Gambar2.1:CarakerjaPHP
SecarasederhanacarakerjaPHPdapatdilihatpadagambar2.1diatas.Jikadiurutmakaproses
tersebutterdiridari:
1. UsermemintasebuahhalamanPHP
2. BrowsermengirimHTTPRequestkepadaWebServer,misalApache
3. WebServermengirimpermintaanfilePHPtersebutkePHPprocessor.PHPprocessordapat
LUGSTIKOMSurabaya
BabIIPengenalanPHP
berupamodul(bagiandariwebserver)atauterpisah(sebagaiCGI/FastCGI)
4. PermintaandiprosesolehPHPprocessorkemudianhasilnyadikirimkembalikewebserver
5. WebservermemaketkembalihasiltersebutdenganmenambahkanHTTPheaderdan
dikirimkembalikebrowser.
6. BrowsermemprosesHTTPpacketdanmenampilkannyasebagaiHTMLkepadauser.
2.3VariabelpadaPHP
Variabelmerupakanelemenyangsangatpentingdalambahasapemrograman.Hampirsetiap
bahasapemrogramanmengenalapaituyangnamanyavariabel.Variabelsendirimerupakan
suatubentukpenyimpanandatasementarapadamemorikomputeryangakandiolahlebih
lanjut.ContohvariabelpadaPHPantaranlain:
$nama='LUGSTIKOMPSurabaya';
$angka_1=1;
$angka_2=2;
$hasil=$angka_1+$angka_2;
Ketentuanketentuandalammembuatvariabel:
Variabeldapatterdiridarihuruf,angkadanunderscore(_)dantentusajatandadollar$.
Variabeltidakdapatdiawalidenganangka.
Variabelbersifatcasesensitiveartinyamembedakanhurufkecildanhurufbesar.
Variabel$namatidaksamadengan$NaMa.Untukituhatihatidalampenulisannama
variabel.
Padavariabelandadapatmengubahnilainya,contoh$angka_1=1dapatandaubahmenjadi
$angka_1=2saatsuatuscriptdijalankan.Iniberbedadengankonstanta(akandibahasberikutnya).
2.3.1TipeVariabel
PadaPHPkitatidakperlumendeklarasikantipevariabelsecaraeksplisit,istilahkerennyadynamic
typing.KarenaPHPsecaraotomatisdapatmenentukantipevariabelberdasarkannilaiyangada
padavariabeltersebut.BerikutiniadalahbeberapatipedatayangdikudungolehPHP.
Tabel2.1:MacammacamTipeData
TipeData
Keterangan
Integer
Digunakanuntuksemuaangka
String
Digunakanuntuksemuahuruf,angka,spasi,dansimbol
Double
Digunakanuntukbilanganreal
Boolean
DigunakanuntuknilaiTrueatauFalse
Array
Digunakanuntukmenampungbeberapadatasekaligus
Object
Digunakanuntukclass
2.3.2Konstanta
Hampirsamadenganvariabel,konstantajugadigunakanuntukpenyimpanannilaisementara.
Namunperbedaankonstantadenganvariabeladalahpadakonstantaandatidakdapatmengubah
LUGSTIKOMSurabaya
BabIIPengenalanPHP
nilainyajikasudahdideklarasikan.Carapendeklarasiannyapunberbedadenganvariabel.Pada
konstantadigunakankeyworddefineuntukmendeklarasikanvariabel.Konstantajugatidak
diawalidengantanda$(dollar).
define('HARGA',1500);
define('NAMA','LUGSTIKOMPSurabaya');
DapatdilihatpadakodediatasbahwakitaselalugunakanhurufKAPITALuntukkonstanta.Halini
tidakharusdilakukannamunsemacamperaturantidaktertulisjikakonstantamakasebaiknya
gunakanhurufkapital.
2.3.3PenerapanTeoriVariabeldanKonstanta
1.
2.
3.
4.
Jikabelumsilahkanbuatfolderbab2didalamfolderhtdocs/webpro.
PastikanApachesudahberjalan.
Bukagedit(Linux)/Notepad++(Windows)
Ketikkodeberikut:
4. <head>
5.
<title>VariabeldanKonstanta</title>
6. </head>
7. <body>
8. <?php
9.
$menu='Menu:NasiPecel';
10.
11.
12.
$menu='Menu:NasiRawon';
13.
14.
15.
echo$menu.'<br/>';
16.
echoHARGA;
17.?>
18.</body>
19.</html>
5. Simpandengannamavariabel.phppadafolderbab2
6. Arahkanbrowserandakealamathttp://localhost/webpro/bab2/variabel.html
7. Outputdarifiletersebutadalah
Menu:NasiRawon
2500
KlikkananbrowserandalaluklikViewSource(untukFirefox)untukmelihatkodeHTMLdari
halamantersebut.Perhatikanbahwatag<?phpdan?>yangadahanyalahkodeHTMLmurni.
PenjelasanScriptvariabel.php
Jikaandaperhatikan,samasepertipadababsebelumnyakitahanyamenulissebuahfilehtmlbiasa.
LUGSTIKOMSurabaya
BabIIPengenalanPHP
Namunadasedikitperbedaan,dimanapadafilevariabel.phpterdapatsebuahtagbaruyaitu<?php
dan?>.ScriptdalamtaginilahyangakandiprosesolehPHPprocessor.Semuatulisandiluartag<?
phpdan?>akandiabaikanolehPHP.
Carasepertiyangkitalakukanpadafilevariabel.phpadalahmenempelkanPHPpadaHTML.Jika
kumpulanmp3andaadalahwesternsongmungkinandalebihsukamendengarnyadengansebutan
embeddingPHPinsideHTML:).
Jikaandamasihingatteorisebelumnyatentangvariabel,dapatdilihatbahwavariabel$menukita
deklarasiulangdannilainyadiubahmenjadi'Menu:NasiRawon'(Baris:12).Namunhaltersebut
tidakberlakupadakonstanta,padabaris13kitadeklarasikanulangkonstantaHARGA.Nilaidari
konstantatersebuttidakberubah.
Halituditunjukkanketikakitamencetaknilaidari$menudanHARGA.$menuberubahmenjadi
'NasiRawon'dankonstantatetap2500.
PadaPHPuntukmencetaksesuatudapatdigunakanperintahecho.Contohpenggunaandapatdilihat
padabaris15dan16.Padakonstantatidakperludiberitanda$.
TIPS:
Selainperintahechoandajugadapatmenggunakanperintahprintuntukmencetak
output.
2.4Komentar
Komentarpadascriptbertujuanuntukmemberitahupembacanya,baikoranglainataupunanda
sendiri.Biasanyakomentardigunakanuntukmenjelaskantujuandituliskannyascripttersebut,siapa
penulisnya,kapanditulisdansebagainya.Komentarjugabergunabagiandasendiriketikasuatu
waktuandalupamengapaandamenulisfileini,fungsifungsinyauntukapadanbanyaklainnya.
PHPakanmengabaikansemuatextdidalamkomentar.Jaditidakakanberpengaruhpadajalannya
suatuscript.
PHPmengenaltigajenisgayakomentar.PertamamodelbahasaC(banyakbaris/multiline),
biasanyadapatdiletakkanpadabagianatasscript.Lihatlahscriptdibawahini.
1. <?php
2.
3. /*
4.
Filename:db.php
5.
Author:RioAstamal
6.
Created:2002200918:22
7.
Updated:2205200916:11
8.
Desc:FileyangmenyimpankonfigurasiuntukkoneksikeMySQLDatabase
9. */
10.
11.?>
YangkeduaadalahmodelC++,sepertiyangditunjukkandibawahini.
echo$nama;//cetaknama
LUGSTIKOMSurabaya
BabIIPengenalanPHP
Yangketigaadalahmodelshellscript.
echoHARGA;#cetakharga
Sekarangcobamodifikasifilevariabel.phptersebutdenganmenambahkankomentarlalulihat
hasilnya.Apakahmasihsamaatautidak.
2.5Operator
Operatormerupakansimbolyangdapatdigunakanuntukmemanipulasinilaidanvariabel.Pada
bagiansebelumnyakitasudahmenggunakanbeberapaoperatordiantaranya=,==,<,.,+,*dan
lainnya.Selanjutnyakitakanmembahasoperatoropratorinidanoperatorlainnyalebihdetillagi.
2.5.1OperatorAritmatik
Pastiandasudahbanyakmengenalberbagaimacamoperatoraritmatik.Jikaandapernhah
mengenyampendidikanyangbernamaSekolahDasaratauSDpastiandaseringmenulisoperator
operatorinipadabukuanda:).
Tabel2.2:OperatorAritmatik
Operator
Nama
Contoh
Penambahan
$a+$b
Pengurangan
$a$b
Perkalian
$a*$b
Pembagian
$a/$b
Modulus
$a%$b
YangmungkinbapakatauIbuguruSDkitalupamengajarkanadalahtentangmodulus.Modulus
merupakansisapembagiandariduabilangan.Lihatcontohberikutuntuklebihjelas.
1. <?php
2.
3. $bil1=10;
4. $bil2=5;
5. $bil3=3;
6.
7. echo$bil1%$bil2;//output0
10.
11.?>
2.5.2OperatorKombinasi
Sayasendiribingungmenjelaskanoperatorini,sayatakutkatakatasayamenyesatkanpikiran
anda:).Jadilebihbaikkitalangsunglihatcontohsajabiarlebihjelas.
Tabel2.3:OperatorKombinasi
Operator
Penggunaan
Samadengan
+=
$a+=$b
$a=$a+$b
$a=$b
$a=$a$b
LUGSTIKOMSurabaya
BabIIPengenalanPHP
*=
$a*=$b
$a=$a*$b
/=
$a/=$b
$a=$a/$b
%=
$a%=$b
$a=$a%$b
Penggunaanoperatorkombinasimemangfavoritparaprogrammerkarenamemangmerekaini
orangorangyangcenderungmalas.Waduh,sayajugatermasukkelihatannya:).
2.5.3OperatorPerbandingan
Operatorperbandingandigunakanuntukmembandingkanduanilai.Penggunaanekspressiini
jugaakanmenghasilkannilaitrueataufalsetergantingdariperbandingan.
Tabel2.4:Operatorperbandingan
Operator
Nama
Penggunaaan
==
samadengan
$a==$b
===
identik(harusbertipesama)
$a===$b
!=
tidaksamadengan
$a!=$b
<>
tidaksamadengan
$a<>$b
<
kurangdari
$a<$b
>
lebihdari
$a>$b
<=
kurangdariatausamadengan
$a<=$b
>=
lebihdariatausamadengan
$a>=$b
Operatorperbandinganbiasanyadigunakanpadastrukturkontrolsepertipercabangandan
perulangan.
2.5.4OperatorLogika
Operatorlogikadigunakanuntukmelakukantesterhadapsebuahkondisilogikadariduaataulebih
perbandingan.Sebagaicontoh,kitamungkinmenemukankasusnilaidarivariabel$aberada
diantara0sampai10.Untukmengeteskondisi$a>=0dan$a<=10,kitagunakanoperatorAND.
Tabel2.5:OperatorLogika
Operator
Nama
Penggunaaan
Keterangan
NOT
!$a
TRUEjika$aadalahFALSE,berlaku
sebaliknya
||
OR
$a||$b
TRUEjika$aatau$bbernilaiTRUEatau
keduanyabernilaiTRUE
&&
AND
$a&&$b
TRUEjika$adan$bbernilaiTRUE
xor
XOR
$axor$b
TRUEjika$aatau$bbernilaiTRUE,
tapitidakkeduanya
2.5.5OperatorIncrement/Decrement
Operatorincrement/decrementdigunakanuntukmenambah/mengurangainilaidarisuatuvariabel
dengansatu.Incrementmemilikisimbol++(doubleplus)sedangkandecrement(doubleminus).
LUGSTIKOMSurabaya
BabIIPengenalanPHP
Tabel2.5:OperatorIncrement/Decrement
Nama
Contoh
Keterangan
PreIncrement
++$a
Tambah$adengansatu,lalukembalikannilainya
PostIncrement
$a++
Kembalikannilai$a,lalutambah$adengansatu
PreDecrement
$a
Kurangi$adengansatu,lalukembalikannilainya
PostDecrement
$a
Kembalikannilai$a,lalukurangi$adengansatu
Mungkinakanlebihjelasjikaandamelihatcontohdibawahini.
1. <?php
2.
3. echo"<h3>Postincrement</h3>";
4. $a=5;
5. echo"Seharusnya5:".$a++."<br/>";
6. echo"Seharusnya6:".$a."<br/>";
7.
8. echo"<h3>Preincrement</h3>";
9. $a=5;
10.echo"Seharusnya6:".++$a."<br/>";
11.echo"Seharusnya6:".$a."<br/>";
12.
13.echo"<h3>Postdecrement</h3>";
14.$a=5;
17.
18.echo"<h3>Predecrement</h3>";
19.$a=5;
22.
23.?>
2.5.6OperatorString
Sebenarnyapadacontohcontohsebelumnyaoperatorstringinisudahseringkitagunakan.Operator
stringyangdimaksudadalahtanda.(titik).Tandatitikinidapatdigunakanuntukmenggabung
string.
1. <?php
2.
3. $a='LUG';
4. $b='STIKOMP';
5. $c=$a.''.$b;//hasil:LUGSTIKOMP
6.
7. //ataudengankombinasi
8. $a.='STIKOMP';//hasil:LUGSTIKOMP
9.
10.?>
2.6EscapeCharacter
Padasaatmenuliskodeandaakansangatseringmenjumpaisuatukondisidimanakitaharus
mencetaktandapetikbaikpetiksatumaupunpetikdua.Permasalahannyatandatersebutsudah
LUGSTIKOMSurabaya
BabIIPengenalanPHP
digunakansebagaipenandauntukmencetakstring.Lalu,bagaimanapemecahannya?Adabeberapa
solusiuntukmencetakpetikdidalampetikitusendiri:
1. Gunakanpetiksatu(')sebagaipenutupstringjikainginmencetakpetikdua()dan
sebaliknya.
2. MenggunakanEscapeCharacter\(backslash)
Berikutiniadalahcontohpenyelesaiandarikeduasolusidiatas.
<?php
/*
SOLUSINo.1
============
Jikainginmencetakpetiksatugunakanpetikduasebagaipenutupstring
Jikainginmencetakpetikduagunakanpetiksatusebagaipenutupstring
*/
$a='JohnSays:"Mydear,ILoveYou."<br/>';
$b="TheGirlSays:'GotoHell...!!!'<br/>";
echo$a.$b.'<br/>';
/*
SOLUSINo.2
============
Gunakanescapecharacter\(backslash)
*/
$a="JohnSays:\"Mydear,ILoveYou.\"<br/>";
$b='TheGirlSays:\'GotoHell...!!!\'<br/>';
echo$a.$b;
?>
2.7SpecialCharacter
Pembahasaninisebenarnyatidakbegitukrusialjikadihubungkandenganpembuatantampilanweb.
Namunakansangatbergunadalamprosespencariankesalahanketikakitamendesainsuatuhalaman
website.Bingung?Samasayajugabingungdenganapayangsayatulis:p.
PadaintinyaHTMLmengabaikansemuakarakterwhitespace(spasi,tab,barisbaru)dan
menggantinyahanyadengansatuspasiketikaditampilkan.Specialcharacterdisnimencakup
Barisbaru(\n)
Tab(\t)
Sebenarnyamasihbanyakkarakterspesiallainnyaseperti\r,\0,\bdanlainlain.Untuklebih
jelasnyacobalahcontohberikut.
1.
2.
3.
4.
5.
6.
7.
8.
9.
<?php
echo"INI\t\tBANYAK\t\tSPASI<br/>";
echo"INIBARISSATU<br/>";
echo"INIBARISDUA<br/>";
echo"INIBARISTIGA<br/>";
echo"\n\n<br/>\n\n";
echo"INIBARISSATU<br/>\nINIBARISDUA<br/>\nINIBARISTIGA";
LUGSTIKOMSurabaya
BabIIPengenalanPHP
10.
11.?>
Outputdarikodediataskuranglebihsepertiberikut:
INIBANYAKSPASI
INIBARISSATU
INIBARISDUA
INIBARISTIGA
INIBARISSATU
INIBARISDUA
INIBARISTIGA
Jikadilihatdaribrowsertidakadayangberbedadarigroup1dangroup2yangadapadakode
diatas.TapijikaandamelihatsourceHTMLdengancaraklikkananViewSource(Firefox)akan
terlihatperbedaannya.
TIPS:
Untukmencetakspecialcharacterseperti\n,\t,\rdansebagainyaharusmenggunakan
petikduasebagaipenutupstring.
LUGSTIKOMSurabaya
BabIIPengenalanPHP
RingkasanBabII
PadaBabIIkitatelahmembahassejarahsingkattentangPHPyangdiciptakanolehRasmusLerdorf
dankemudiandikembangkanolehZend.KitajugatelahmembahashalhaldasarseputarPHPyang
meliputi:
Variabel
Konstanta
Operator
SpecialCharacter
LUGSTIKOMSurabaya
BabIIIStrukturKontrol
BabIII
StrukturKontrol
StrukturKontrolmerupakansebuahstrukturdalambahasapemrogramanyangmembolehkan
kitauntukmengontrolalurdarieksekusisuatuprogramatauscript.Strukturkontrol
mencakupstrukturkondisidanstrukturpengulanganataulooping.Strukturkondisiterdiridari
beberapastatementyaitu:
if...
if...else...
if...elseif...else...
switch...case...break...
Sedangkanstrukturperulanganterdiridari:
for...
while...
do...while...
foreach...
3.1StrukturKondisi
3.1.1Statementif...
Kitadapatmenggunakanstatemenifuntukmembuatsebuahkeputusan.Andaharusmemberiif
sebuahkondisiuntukmembuatkeputusan.Jikakondisibernilaitruemakablokifakandieksekusi.
Statemenifdikelilingiolehtanda{}(kurungkurawal).Syntaxdasarpenulisanstatemenifadalah:
if(kondisi){
//kodeyangdieksekusi
}
JikakondisibernilaiTRUEmakaperintahyangadablokpada{}akandieksekusi.Perhatikan
contohdibawah.
1.
2.
3.
4.
5.
6.
7.
8.
<?php
$nama='LUGSTIKOMP';
if($nama=='LUGSTIKOMP'){
echo'OK,andabolehmasuk.';
}
?>
Padacontohdiataskitamenggunakanvariabelnamasebagaikondisi,dimanajikanilaivariabel
$namasamadenganLUGSTIKOMPmakablokperintahakandieksekusi.Ingat,bahwaoperator
perbandinganuntuksamadenganadalah==bukan=.
Contohlainjikakitamenggunakanangkauntukperbandinganadalah:
1. <?php
2.
LUGSTIKOMSurabaya
3.
4.
5.
6.
7.
8.
9.
$usia=21;
$black_list=FALSE;
if($usia>=21&&$black_list==FALSE){
echo'OK,andasudahdewasa.Silahkanmasuk.';
}
?>
Padacontohkeduaini,blokifhanyaakandieksekusijikanilaidariusialebihdariatausama
dengan21DANnilaidariblack_listsamadenganfalse.
TIPS:
Andadapatmeletakkanifdidalamif(ifbersarang).Inijugaberlakuterhadapsemua
strukturkontrollain.
3.1.2Statementif...else...
Statementinihampirsamadenganifhanyasajapadaifelsekitadiberikanopsialternatifuntuk
menentukanaksiyangdilakukanjikakondisibernilaifalse.Statementiniakansangatseringanda
gunakandibandingpenggunakanifsaja.Syntaxpenulisanstatementif...else...adalahsebagai
berikut:
if(kondisi){
//kodeyangdieksekusijikakondisitrue
}else{
//kodeyangdieksekusijikakondisifalse
}
Contohstatementif...else...sederhanadapatandalihatberikutini.
1. <?php
2.
3. $peghasilan=5000000;
4. if($penghasilan>=3000000){
5. echo'PakToyib:"Nakjohn,kamubolehmenikahiputrisaya:)"';
6. }else{
7. echo'PakToyib:"Maukamukasihmakanapaputrisayananti!!!"';
8. }
9.
10.?>
Alurdariscriptdiatassudahjelas,dimanajikanilaidari$penghasilanlebihdari3.000.000maka
johndiperbolehkannikahdenganputrinyaPakToyib:).Namunjikakurangdari3.000.000alamat
kenamarahPakToyib:(.
3.1.3Statemenif...elseif...else...
Jikastatemenif...else...hanyadapatmenggunakansatualternatifjikakondisiawalbernilaifalse.
Statemenif...elseif...memberilebihdarisatuaksialternatif.Halinimemungkinkankitauntuk
memilihaksidaribanyakkemungkinankondisi.Syntaxdasarpenulisanif...elseif...adalahsebagai
berikut:
if(kondisi_1){
LUGSTIKOMSurabaya
}elseif(kondisi_2){
}elseif(kondisi_3){
}elseif(kondisi_4){
}else{
}
Andadapatmenulisstatementelseifdenganspasi,yaituelseif.Keduanyasamasamadianggap
validolehPHP.
3.1.4PenerapanTeoriif...elseif...else...
HalyangpalingseringdilakukanolehPHPsebagaibahasaserversidescriptingadalahmemproses
HTMLForm.PadacontohiniadalahintiawalandamemahamitugasPHPsebagaipemrosesHTML
Form.KitaakanmembuatduafileyangpertamaadalahfileHTMLmurnisebagaiinputdatabagi
user(HTMLForm).DanfileyangkeduaadalahfilePHPyangbertugasmemprosesdatayang
dikirimolehfileHTML.
1.
2.
3.
4.
5.
Jikabelumsilahkanbuatfolderbab3padafolderhtdocs/webpro
PastikanApachesudahberjalan
Bukagedit/Notepad++
Simpanfiletersebutdengannamaformtoko.html
Ketikkodeberikut:
4. <head>
5. <title>PembelianOnline</title>
6. </head>
7. <body>
8. <h3>LUGONLINESTORE</h3><hr/>
9. <formaction="formproses.php"method="post">
10.<label>StickerLinux(Rp7.500,)</label><br/>
11.<label>Jumlah:</label>
12.<inputtype="text"name="sticker"value="0"size="4"/><br/><br/>
13.
14.<label>KaosLinux(Rp35.000,)</label><br/>
16.<inputtype="text"name="kaos"value="0"size="4"/><br/><br/>
17.
18.<label>JacketLinux(Rp35.000,)</label><br/>
20.<inputtype="text"name="jacket"value="0"size="4"/><br/><br/>
21.
22.<inputtype="submit"value="Proses"/>
23.</form>
24.</body>
25.</html>
6. Savekembalifiletersebut
7. Sekarangbuatfilebaru
8. Simpandengannamaformproses.phpmasihdifolderyangsama.
LUGSTIKOMSurabaya
1. <?php
2.
3. //buatvariabeluntukmenampungdatadarifileformtoko.html
4. $sticker=$_POST['sticker'];//datasticker
5. $kaos=$_POST['kaos'];//datakaos
6. $jacket=$_POST['jacket'];//datajacket
7.
8. //hargadarimasingmasingproduk
9. define('HARGA_STCIKER',7500);
10.define('HARGA_KAOS',35000);
11.define('HARGA_JACKET',55000);
12.
13.//totalharga
14.$total=(HARGA_STICKER*$sticker)+(HARGA_KAOS*$kaos)+
15.(HARGA_JACKET*$jacket);
16.
17.$diskon=0;
18.$pesan_diskon='0%';
19.
20.//cektotaluntukmenentukandiskon
21.if($total>=50000&&$total<75000){
22.$diskon=0.05;//diskon5%
24.}elseif($total>=75000&&$total<100000){
27.}elseif($total>=100000){
30.}
31.$subtotal=$total($total*$diskon);
32.
33.?>
35."http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
36.<htmlxmlns="http://www.w3.org/TR/xhtml1">
37.<head>
38.<title>PembelianOnline</title>
39.<styletype="text/css">
40..tanda{backgroundcolor:#cfcfcf;}
41.</style>
42.</head>
43.<body>
44.<strong>LUGONLINESTOREDATAPEMBELIAN</strong><hr/>
45.<tableborder="1">
46.<trclass="tanda">
47.<th>Barang</th><th>Jumlah</th><th>Total</th>
48.</tr>
49.<tr>
50.<td>Sticker</td>
51.<td><?phpecho$sticker;?></td>
52.<td><?phpecho($sticker*HARGA_STCIKER);?>
53.</tr>
54.<tr>
55.<td>Kaos</td>
56.<td><?phpecho$kaos;?></td>
57.<td><?phpecho($kaos*HARGA_KAOS);?>
58.</tr>
59.<tr>
60.<td>Jacket</td>
LUGSTIKOMSurabaya
61.<td><?phpecho$jacket;?></td>
62.<td><?phpecho($jacket*HARGA_JACKET);?>
63.</tr>
65.<tdcolspan="2">TOTAL</td>
66.<td><?phpecho$total;?></td>
67.</tr>
69.<tdcolspan="2">Diskon</td>
70.<td><?phpecho$pesan_diskon;?></td>
71.</tr>
73.<tdcolspan="2">SUBTOTAL</td>
74.<td><?phpecho$subtotal;?></td>
75.</tr>
76.</table>
77.</body>
78.</html>
10. Simpankembalifiletersebut
11. Bukabrowserandadanarahkankehttp://localhost/webpro/bab3/formtoko.html
12. Hasilnyaterlihatsepertigambar3.1dan3.2
Gambar3.1
Gambar3.2
Penjelasansingkatformtoko.htmldanformproses.php
Kitamulaidarifileformtoko.htmlterlebihdulu.Padafileiniyangperludiperhatikanadalahdata
yangterletakpada<form>dan</form>.Perhatikancuplikanscriptformberikut:
<formaction="formproses.php"method="post">
Perhatikannilaidariaction,fileyangdiberikehormatanuntukmenjalankantugasmemproses
datayangdikirimolehformadalahfileformproses.php.Letakfiletersebutsatufolderdengan
formtoko.html.MetodeyangdigunakanadalahPOSTbukanGET.
LUGSTIKOMSurabaya
<inputtype="text"name="sticker"value="0"size="4"/>
Artidarikodediatasadalahdatayangakankitakirimkankefileformproses.phpbernamasticker.
Jadipadafileformproses.phpkitamengambilnyadengancara:
$sticker=$_POST['sticker'];//datasticker
Kodediatasberartikitamenangkapdatayangdikirimdenganmetodepostdandatatersebut
bernamasticker.Isidari$_POSTharussamadenganisidarinamepadaform.Namavariabel
penampungtidakharussamaakantetapilebihmudahjikasamadengandatayangdipost.
TIPS:
PHPtidakmemperdulikantataletakkodeanda.Jadidesainlahkodeandasenyaman
mungkinuntukdibaca.
3.1.5Statementswitch...case...break
Sebenarnyastatementswitch...case...breaksamadenganif...elseif...dimanakitadapatmemilihlebih
dariduakondisiataulebih.Selainitupadaswitchkitadapatmemilihkondisitidakhanyapadanilai
trueataufalsesajatetapikitajugadapatmemilihdariberbagaitipelainsepertiinteger,boolean,
stringdanlainlain.Syntaxpenulisanstatementswitchadalahsebagaiberikut.
switch($kondisi){
casekondisi_1:
break;
casekondisi_2:
break;
casekondisi_3:
break;
default:
//kodeyangdieksekusijikatidakadayangmemenuhi
break;
}
Blockdefaultpadaswitchsamadenganelsepadastatementif...elseif...else....Yaitublokyangakan
dieksekusijikasemuakondisitidakterpenuhi.Sebagaicontohandadapatmenggantikodepada
formproses.phpbaris2130dengankodeberikut:
21.switch($total){
22.case$total>=50000&&$total<75000:
25.break;
26.case$total>=75000&&$total<100000:
29.break;
30.case$total>=100000;
LUGSTIKOMSurabaya
33.break;
34.}
3.2StrukturPerulangan(Looping)
Salahsatukelebihankomputeradalahmelakukanpekerjaanselamaberulangulangtanparasabosan
sedikitpun.Berbedadenganmanusia,tidakdapatdibayangkanjikakomputertibatibabosanketika
menjalankanperintah:D.Dalampemrogramanperulanganatauloopingadalaheksekusisuatublok
kodeselamasuatukondisiloopingmasihterpenuhi.Iniberbedadenganstrukturkontrolyanghanya
mengeksekusiblokkodesatukalisaja.
Agarpengertianloopingmudahdicerna,sepertimakanansajadicerna:p,kitaakanmembuatsebuah
fileHTMLstaticyangkemudianakankitabuatduplikatnyatetapimenggunakanloop.
1.
2.
3.
4.
Bukagedit/Notepad++
Buatfilebaru
Simpandengannamabensin.htmlletakkanpadafolderhtdocs/webpro/bab3
Ketikkodeberikut:
4. <head>
5. <title>BensinStatic</title>
6. </head>
7. <body>
8. <tablecellpadding="4">
9. <trstyle="backgroundcolor:#cfcfcf">
10.<th>Bensin(Liter)</th><th>Harga(Rp)</th>
11.</tr>
12.<tr>
13.<td>5</td><td>22500</td>
14.</tr>
15.<tr>
16.<td>10</td><td>45000</td>
17.</tr>
18.<tr>
19.<td>15</td><td>67500</td>
20.</tr>
21.<tr>
22.<td>20</td><td>90000</td>
23.</tr>
24.<tr>
25.<td>25</td><td>112500</td>
26.</tr>
27.</table>
28.</body>
29.</html>
6. Savekembalifilebensin.html
7. Bukafiletersebutpadabrowser,http://localhost/webpro/bab3/bensin.html
8. Hasilnyaakanterlihatsepertigambar3.3
LUGSTIKOMSurabaya
Gambar3.3
3.2.1Statementfor...
Bentukperulanganpertamayangakankitabahasadalahperulangandenganfor.Bentukpenulisan
loopingforadalahsebagaiberikut.
for(ekspresi1;kondisi;ekspresi2){
//kodeyangakandieksekusi
}
Keterangan:
ekspresi1:dieksekusisatukalisaatloopmulaidieksekusi,biasanyauntukinisialisasi
variabelcounter
kondisi:diceksetiaploopapakahkondisimasihtrue,jikayamakablokkodetetap
dieksekusi,berlakusebaliknyajikafalse
ekspresi2:dieksekusisetiapakhirloop,disinibiasanyadigunakanuntukmengubahnilai
variabelcounter
3.2.2PenerapanTeorifor...
Sepertiyangpernahdisinggungsebelumnya,bahwakitaakankanmenduplikasifilebensin.html
tetapidenganmenggunakanperulangan,dalamhalinikitagunakanfor.
1.
2.
3.
4.
1.
2.
3.
4.
5.
6.
7.
8.
9.
Bukagedit/Notepad++
Buatfilebaru
Simpan dengan nama bensin_for.php pada folder htdocs/webpro/bab3
Ketikkodeberikut:
<head>
<title>BensinFor</title>
</head>
<body>
<tablecellpadding="4">
LUGSTIKOMSurabaya
11.</tr>
12.<?php
13.$harga=4500;//semogatidaknaiklagi:p
14.
15.//lakukanloopdengankelipatan5sampaidengan25
16.for($liter=5;$liter<=25;$liter+=5){
17.echo"<tr>\n";
18.echo"<td>$liter</td><td>".($harga*$liter)."</td>\n";
19.echo"</tr>\n";
20.}
21.?>
22.</table>
23.</body>
24.</html>
6. Simpankembalifilebensin_for.php
7. Arahkanbrowserandakehttp://localhost/webpro/bab3/bensin_for.php
8. Hasilnyaakansamapersissepertigambar3.3
PenjelasanSingkatFilebensin_for.php
Nilaivariabel$literawalkitaset5,kondisiyangingincekadalahjika$liter<=25.Selamamasih
terpenuhi(kondisitrue)makablokkodeakantetapdieksekusi.Setiapselesaieksekusinilaidari
variabelcounteryaitu$literkitatambahdengan5.
Loopingakanberhentijikasudahmencapaistep6.Karenapadasaatitunilai$litersudahmencapai
30danitutidakmemenuhisyaratkondisidimana$liter<=25.
3.2.3Statementwhile...
Berbedadenganforpadawhilekitatidakbisameletakkaninisialisasivariabel,kondisi,dancounter
padasatubarissaja.Syntaxpenulisanwhileadalahsebagaiberikut.
while(kondisi){
//blokkodeyangdieksekusi
}
Jadiselamakondisimasihtruemakablokkodeakanterusdieksekusi.Whilebiasadigunakanjika
kitatidaktahubatasakhirkapansuatuperulanganharusdihentikan.
3.2.4PenerapanTeoriwhile...
Kitamasihtetapmenggunakanfilebensin.htmlsebagaiacuanoutputyangakandiselesaikan
menggunakanwhile.
1.
2.
3.
4.
Bukagedit/Notepad++
Buatfilebaru
Simpandengannamabensin_while.phppadafolderhtdocs/webpro/bab3
Ketikkodeberikut:
LUGSTIKOMSurabaya
4. <head>
5. <title>BensinWhile</title>
6. </head>
7. <body>
8. <tablecellpadding="4">
9. <trstyle="backgroundcolor:#cfcfcf">
11.</tr>
12.<?php
13.$harga=4500;//semogatidaknaiklagi:p
14.$liter=5;//inisialisasi$literdiluarloop
15.
16.//lakukanloopdengankelipatan5sampaidengan25
17.while($liter<=25){
18.echo"<tr>\n";
19.echo"<td>$liter</td><td>".($harga*$liter)."</td>\n";
20.echo"</tr>\n";
21.$liter+=5;//tambahcounter
22.}
23.?>
24.</table>
25.</body>
26.</html>
6. Cobalihathasilnya,http://localhost/webpro/bab3/bensin_while.php
7. Hasilnyaakanterlihatsepertigambar3.3sebelumnya
3.2.5Statementdo...while
Berbededengandualoopsebelumnya,dimanapadafordanwhilepengecekankondisidilakukan
padaawalsebelumblokkodedieksekusi.Padado...whilepengecekandilakukandiakhireksekusi
kode.Jadisetidaktidaknyablokkodedo...whilepastidieksekusiminimalsatukali.Syntaxdasar
darido...whileadalahsebagaiberikut.
do{
}while(kondisi)
Blokkodedoakandieksekusiselamakondisiwhilemasihbernilaitrue.
3.2.6PenerapanTeorido...while
1.
2.
3.
4.
1.
2.
3.
4.
5.
6.
7.
8.
Bukagedit/Notepad++
Buatfilebaru
Simpandengannamabensin_do_while.phppadafolderhtdocs/webpro/bab3
Ketikkodeberikut:
<head>
<title>BensinDoWhile</title>
</head>
<body>
<tablecellpadding="4">
LUGSTIKOMSurabaya
9.
10.
<th>Bensin(Liter)</th><th>Harga(Rp)</th>
11.
</tr>
12.
<?php
13.
$harga=4500;//semogatidaknaiklagi:p
14.
$liter=5;//inisialisasi$literdiluarloop
15.
16.
//lakukanloopdengankelipatan5sampaidengan25
17.
do{
18.
echo"<tr>\n";
19.
echo"<td>$liter</td><td>".($harga*$liter)."</td>\n";
20.
echo"</tr>\n";
21.
$liter+=5;//tambahcounter
22.
}while($liter<=25)
23.
?>
24.
</table>
25.</body>
26.</html>
6. Arahkanbrowserkehttp://localhost/webpro/bab3/bensin_while.phpuntukmelihathasilnya
Jikaandamasihpenasarandengankatakataminimaldieksekusisatukalicobagantinilai$liter
dari5menjadi30saatinisialisasi.Kodepastiakandieksekusisatukalikemudianselesai.Halini
tidakberlakuuntukfordanwhile.
Jikaditanyakapankitamenggunakando...while,susahjugajawabnya.Yangjelassecaranalurinanti
andaakanmenggunakannyatanpadisuruhsuruhoranglain:p.
TIPS:
Loopingforbiasadigunakanjikakitatelahmengetahuibatasawaldanakhirdarisuatu
perulangan.
Untuksementarakitatidakmenbahasduluforeachkarenaloopinididesainkhususuntuk
penggunaandidalamarray.Jadipembahasanforeachakankitalakukansaatmembahastentang
array.
LUGSTIKOMSurabaya
RingkasanBabIII
PadababIIIinikitatelahmembahasaspekterpentingdaribahasapemrogramanstrukturkontrol.
Strukturkontrolterdaridaristrukturpercabangan(branching)danperlulangan(looping).PadaPHP
percabanganterdiridari:
if...
if...else...
if...elseif...else...
switch...case...break...
Sedangkanstrukturperulanganterdiridari:
for...
while...
do...while...
foreach...
LUGSTIKOMSurabaya
BabIVFiledanArray
BabIV
FiledanArray
4.1BerinteraksidenganFile
Filemerupakansalahsatuaspekpentingdalamsebuahaplikasi.Seringkalisebuahfiledibuatuntuk
berbagaitujuanmisalnya,menyimpankonfigurasi,temporaryfile,cachedanmasihbanyaklagi.
InteraksiPHPdenganfilesangatmiripdenganbahasaC.Prosesumumyangdilakukanadalah:
Membuatresourcedenganperintahfopen()
Menulis(fwrite())/membacafile
Menutupfilefclose()
4.1.1MenyimpanFile
Dibandingdenganpenyimpananpadadatabasepenyimpananpadafilerelatifsederhana.Namun
memilikibanyakkekuranganterutamajikamenyangkutmasalahkeamanandankecepatanakses
data.PadaPHPlangkahlangkahuntukmenyimpansebuahfileadalah:
Membukafiledenganfopen()
Menulisfiledenganfwrite()
Menutupfiledenganfclose()
fopen()minimalmemerlukanduaparameteryaitu1)stringnamafiledan2)stringmode.Yangperlu
diperhatikandisiniadalahmodedarifile.Syntaxyangdigunakanadalah:
Parameter 1
fopen(string_nama_file,string_mode);
Parameter 2
Modeyangdapatdigunakanpadafopenadalah:
Mode
Deskripsi
'r'
Bukafilehanyauntukbacasaja;pointerfilediletakkandiawalfile.
'r+'
Bukafileuntukbacadantulis;ponterfilediletakkandiawalfile.
'w'
Bukafileuntuktulissaja;pointerdiletakkandiawalfilelalutruncate(overwrite);jika
filetidakada,buatfiletersebut.
'w+'
Bukafileuntukbacadantulis;pointerdiletakkandiawalfilelalutruncate(overwrite);
jikafiletidakada,buatfiletersebut.
'a'
Bukafileuntuktulissaja;pointerdiletakkandiakhirfile(append);jikafiletidakada,
buatfiletersebut.
'a+'
Bukafileuntukbacadantulis;pointerdiletakkandiakhirfile(append);jikafiletidak
ada,buatfiletersebut.
Copyright2009RioAstamalHal.49
LUGSTIKOMSurabaya
BabIVFiledanArray
TIPS:
AgarkompatibelantarsistemoperasiyangmemilikiendinglineyangberbedaLinux
(\n),MacOS(\r),danWindows(\r\n)tambahkanopsi'b',misal'wb'.(b=binarymode)
Kitaakanmenggunakancontohformtoko.htmlyangterdapatpadabab3.Formatpenyimpanan
yangkitagunakanadalah:
jml_kaosSticker#harga_kaos#jml_kaosKaos#harga_kaos#jml_jacketJacket#
harga_jacket#total#diskon#subtotal
OK,langsungajakitacobauntukmenulisfile.
4.1.3PenerapanTeoriPenyimpananFile
Sebelummemulaipastikanandasudahmembuatfolderbarudidirektorihtdocsandadengannama
bab4.Kitaakanmenyimpanfiletersebutdidalamfolderbab4dengannamafaktur.txt.Ikutilangkah
langkahberikut:
1. Copyfileformtoko.htmldanformprosesdarifolderbab3kebab4
2. Modifikasifileformproses.php(padabab4)agarmenampilkanlinkkehalamanfaktur.
1.<?php
2.//buatvariabeluntukmenampungdatadarifileformtoko.html
3.$sticker=$_POST['sticker'];//datasticker
4.$kaos=$_POST['kaos'];//datakaos
5.$jacket=$_POST['jacket'];//datajacket
6.//hargadarimasingmasingproduk
7.define('HARGA_STICKER',7500);
8.define('HARGA_KAOS',35000);
9.define('HARGA_JACKET',55000);
10.//totalharga
11.$total=(HARGA_STICKER*$sticker)+(HARGA_KAOS*$kaos)+
12.(HARGA_JACKET*$jacket);
13.$diskon=0;
15.//cektotaluntukmenentukandiskon
16.if($total>=50000&&$total<75000){
19.}elseif($total>=75000&&$total<100000){
22.}elseif($total>=100000){
25.}
26.$subtotal=$total($total*$diskon);
27.//tuliskefile,modeyangdigunakanadalah'a'=>append
28.//filefaktur.txtakandibuatotomatisjikabelumada
29.$fp=fopen('faktur.txt','a');
30.$isi_file="$stickerSticker#".(HARGA_STICKER*$sticker)."#".
31."$kaosKaos#".(HARGA_KAOS*$kaos)."#".
32."$jacketJacket#".(HARGA_JACKET*$jacket)."#".
33."$total#$pesan_diskon#$subtotal\n";
34.fwrite($fp,$isi_file);
35.fclose($fp);
LUGSTIKOMSurabaya
BabIVFiledanArray
36.?>
40.<head>
42.<styletype="text/css">
43..tanda{backgroundcolor:#cfcfcf;}
44.</style>
45.</head>
46.<body>
47.<strong>LUGONLINESTOREDATAPEMBELIAN</strong><hr/>
48.<tableborder="1">
50.<th>Barang</th><th>Jumlah</th><th>Total</th>
51.</tr>
52.<tr>
53.<td>Sticker</td>
54.<td><?phpecho$sticker;?></td>
55.<td><?phpecho($sticker*HARGA_STCIKER);?>
56.</tr>
57.<tr>
58.<td>Kaos</td>
59.<td><?phpecho$kaos;?></td>
60.<td><?phpecho($kaos*HARGA_KAOS);?>
61.</tr>
62.<tr>
63.<td>Jacket</td>
64.<td><?phpecho$jacket;?></td>
65.<td><?phpecho($jacket*HARGA_JACKET);?>
66.</tr>
68.<tdcolspan="2">TOTAL</td>
69.<td><?phpecho$total;?></td>
70.</tr>
72.<tdcolspan="2">Diskon</td>
73.<td><?phpecho$pesan_diskon;?></td>
74.</tr>
76.<tdcolspan="2">SUBTOTAL</td>
77.<td><?phpecho$subtotal;?></td>
78.</tr>
79.</table>
80.<p><ahref="faktur.php">LihatFaktur</a></p>
81.</body>
82.</html>
3. Simpankembalifileformproses.php
4. Buatsebuahdokumenbarudengannamafaktur.php
5. Isidarifilefaktur.phpadalah:
4.<head>
6.</head>
7.<body>
8.<h2>DataFakturPembelian</h2>
9.<pre>
LUGSTIKOMSurabaya
BabIVFiledanArray
10.<?php
11.//bacaseluruhisifile
12.readfile('faktur.txt');
13.?>
14.</pre>
15.<ahref="formtoko.html">KembalikeForm</a>
16.</body>
17.</html>
6. Simpankembalifilefaktur.php
7. Bukaalamathttp://localhost/webpro/bab4/formtoko.htmluntukmelihatproses
penyimpananfile.
Gambar4.1:TambahanlinkLihatFaktur
Gambar4.2:Databeberapafakturtransaksiyangtercatat
4.1.4PenjelasanSingkatPenerapanTeoriPenyimpananFile
LUGSTIKOMSurabaya
BabIVFiledanArray
Padafileformproses.phpmodifikasiyangdilakukandapatdilihatmulaidaribaris2735danjuga
bariske80.Padabaris2735yangkitalakukanadalahmelakukanpenulisansebuahfiledengan
namafaktur.txt.Karenakitatidakmenyertakanpathuntukdirektorifilemakadiasumsikanfile
faktur.txtakanditulispadadirektoriyangsama.
Modefileyangkitagunakanadalah'a',agardatafakturfaktursebelumnyayangsudahtertulistidak
tertimpa/overwritemelainkankitatambahkandiakhir(append).Separatoryangdigunakanuntuk
setiapitemadalah#.Formatiniakantetapkitagunakan,karenapadapembahasanarraykita
akanmengextractsetiapitemberdasarkanseparatortersebut.
Padafilefaktur.phppembacaanfiledilakukandenganmemanggilfungsireadfile().Fungsireadfile
akanmembacasebuahfiledanlangsungmenampilkannyakeoutput.Karenasetiapbarisdipasahkan
dengankarakter\nmakakitaperlutagpreformattedtext<pre>agarfileditampilkanapaadanya.
4.1.5FungsifungsiLain
Beberapafungsilainyangdapatdigunakanuntukmanajemenfilediantarnyabacadanhapusantara
lainfungsifile_get_contents(),fread(),danunlink().
a.file_get_contents()
Fungsifile_get_contents()digunakanuntukmembacasebuahfiledanmenyimpannyasebagai
string.Sebagaicontohkitadapatmenggantifungsidarireadfile()padafilefaktur.phpdengan
perintahberikut:
$data=file_get_contents('faktur.txt');
echo$data;
b.fread()
Padafungsifread()terdapatduaparameteryangharusdisertakanyaitupointer/resourceyangdibuka
denganfopendanpanjangbytesdaridatayangakandibaca.Contohpenggantireadfile()padafile
faktur.phpadalahsebagaiberikut:
$fp=fopen('faktur.txt','r');
$ukuran=filesize('faktur.txt');
$data=fread($fp,$ukuran);
echo$data;
fclose($fp);
atau
$data='';
while(!feof($fp)){
$data.=fread($fp,2048);
}
fclose($fp);
echo$data;
Fungsifilesize()digunakanuntukmengetahuiukuransebuahfiledalambytes.Sedangkanfungsi
feof()digunakanuntukmegecekapakahakhirsebuahfilesudahtercapaiEOF(EndofFile).Pada
contohdiataskitamembacasebanyak2048bytesatau2kbsetiaploop.
LUGSTIKOMSurabaya
BabIVFiledanArray
c.fgets()
Penggunaanfungsifgets()hampirsamadenganfread()padametodeyangkedua.
$data='';
while(!feof($fp)){
$data.=fgets($fp,2048);
}
fclose($fp);
echo$data;
d.unlink()
Berbedadenganbeberapafungsisebelumnya,fungsiunlink()digunakanuntukmenghapussebuah
file.Contohpenggunaanunlinkadalahsebagaiberikut:
if(unlink('faktur.txt'))
echoFilefaktur.txtberhasildihapus;
else
echoFilefaktur.txtgagaldihapus;
Fungsiunlink()akanmengembalikannilaibooleanmengenaistatuspenghapusandarisebuahfile.
TRUEjikafileberhasildihapusdanFALSEjikagagaldihapus.
TIPS:
Masalahyangseringmunculjikamenyangkutpembuatandanpenghapusanfileadalah
masalahpermission(hakakses).Haliniumumterjadipadasistemoperasiberbasis
UNIX.Jadiperhatikanpermissiondaridirektori/fileyangmenjadiobjek.
4.2ArraypadaPHP
Arraymerupakansalahsatuaspekterpentingdalambahasapemrograman.Sebenarnyaapasiharray
itu?Secarasederhanaarraymerupakansuatuvariabelyangdapatmenyimpanbeberapanilai
sekaligus.Berbedadenganvariabelbiasayanghanyadapatmenampungsebuahnilaisaja.Array
jugadapatberisiarraylainnya(arraydidalamarray),arraysepertiiniseringdisebutarraymulti
dimensi.
PadaPHPdikenalduatipearrayberdasarkancarapengaksesannyayaituarrayindexnumerikdan
arrayindexstring(associativearray).Bingung?Yesakhirnyasayabisamembuatandabingung:p.
OK,biarandatidakstresslangsungsajakitabahasyangpertamaduluyaituarraiindexnumerik.
4.2.1ArraydenganIndexNumerik
Kitaakantetapmenggunakancontohprodukpadababasebelumnyayaitusticker,kaos,danjacket
dalampembahsancontoh.Sebuaharraydenganindexnumerikdiberiindexmulaidari0,1,2,3,...dan
seterusnya.Untukmembuatsebuaharraydenganindexnumericterdapatbeberapacaradiantaranya:
Cara1
$produk=array('sticker','kaos','jacket');
LUGSTIKOMSurabaya
BabIVFiledanArray
Perintahdiatasberartikitamembuatsebuaharraydengannama$produkdengantigabuahelemen
didalamnya.Indexakandiberikanotomatisdimulaidari0yaitusticker,1adalahkaosdan2adalah
jacket.
Cara2
$produk[0]='sticker';
$produk[1]='kaos';
$produk[2]='jacket';
Caradiatasadalahsebuahcaramanualyaitudenganmemberiindexlangsungpadaarray.
Cara3
$produk[]='sticker';
$produk[]='kaos';
$produk[]='jacket';
Caraketigahampirsamadenganyangpertama,hanyaberbedacarapenulisansaja.Carainisangat
bergunasaatkitaakanmemberisebuahnilaipadaarraysaatloopingdimanaindexakanbertambah
secaraotomatis.
4.2.3MengaksesIsiArray
Untukmengaksessebuaharrayhalyangdiperlukanadalahnamaarraytersebutdanindexnya.
Dimanapenulisanindexdiapitolehtandakurungsiku[].Perhatikancontohberikut:
echo$produk[0].''.$produk[1].''.$produk[2];
Outputdariperintahdiatasadalah:
Output1
stickerkaosjacket
Untukarraydenganjumlahyangbisadihitungdenganjaripengaksesansecaramanualmungkin
tidakmasalah.Namunjikajumlaharraymencapaipuluhanbahkanratusan?Solusinyayapakai
looping.
4.2.4LoopingArrayIndexNumerik
Padababbabawalkitasudahmembahaspenggunaanlooping.Loopingsangatbergunauntuk
mengaksesarraydalamjumlahbesar.Padabagianinikitajugaakanmembahasforeach()satu
satunyaperintahloopingyangbelumdibahas.Outputdariperintahperintahloopingberikutakan
mengacupadaoutput1.Haliniditujukanagarmemudahkanandamemahamicarakerjaarraydan
loopingitusendiri.
a.LoopingArraydenganfor()
//setvariabelindexke0
LUGSTIKOMSurabaya
BabIVFiledanArray
for($i=0;$i<3;$i++){
echo$produk[$i];
}
Hasilyangditampilkanakansamadenganoutput1.
b.LoopingArraydenganwhile()
//setvariabelindexke0
$i=0;
while($i<3){
echo$produk[$i];
$i++;//increment$i
}
c.LoopingArraydenganforeach()
Nah,inilahsaatyangtepatkitaberkenalandengansiforeach().Loopinginimemangkhusus
dirancanguntukdigunakandenganarray.Jadijikamemungkinkansebaiknyagunakanlooptipeini
dibandingyanglainjikamengaksesarray.
Syntaxdasardariforeachadalah:
foreach(ekspresi1as[eskpresi2=>]ekspresi3){
//kodeyangakandieksekusi
}
dimana:
ekspresi1:variabelarrayyangakandimanipulasi
ekpsresi2(opsional):variabelbarutempatmenyimpanindexarray
ekspresi3:variabelbarupenampungnilaidarielemenarray
Untukmenghasilkanoutputsepertioutput1,makapenulisanforeachyangdigunakanadalah:
foreach($produkas$prd){
echo$prd;
}
Padacontohdiataskitahanyamenuliskanekspresi1danekspresi3.Penggunaanekspresi2dapat
andalihatpadacontohberikut:
foreach($produkas$index=>$prd){
echo$index:$prd<br/>;
}
Outputyangditampilkanadalah:
0:sticker
1:kaos
2:jacket
4.2.5PenerapanTeoriArrayIndexNumerik
Untukcontohkaliinikitaakancobamenampilkanisidarifaktur.txttapidengantampilanyanglebih
LUGSTIKOMSurabaya
BabIVFiledanArray
baik.Tidakhanyasekedarisinyasecaralangsung.Ikutilangkahlangkagberikut:
1. Bukagedit(Linux)/Notepad++(Windows)
2. Buatfilebarudidalamdirektorihtdocs/bab4dengannamafaktur2.php
4.<head>
6.</head>
7.<body>
8.<h2>DataFakturPembelian</h2>
9.<tableborder="1"cellpadding="4">
10.<trstyle="background:#ccc">
11.<th>No.</th>
12.<th>JmlSticker</th>
13.<th>TotalSticker</th>
14.<th>JmlKaos</th>
15.<th>TotalKaos</th>
16.<th>JmlJacket</th>
17.<th>TotalJacket</th>
18.<th>Total</th>
19.<th>Diskon</th>
20.<th>SubTotal</th>
21.</tr>
22.<?php
23.//pecahsetiapbarismenjadiarraydenganfungsifile()
24.$baris=file('faktur.txt');
25.//bacaarray
26.foreach($barisas$nomor=>$isi){
27.echo"<tr>\n";
28.echo"<td>".++$nomor."</td>\n";//incrementkarenadimulaidari0
29.//extractdatapadasetiapbarisdenganseparator'#'
30.$data=explode('#',$isi);//$datasekarangberupaarray
31.foreach($dataas$data_item){
32.echo"<td>$data_item</td>\n";
33.}
34.echo"</tr>\n";
35.}
36.?>
37.</table>
38.</body>
39.</html>
4. Simpankembalifilefaktur2.php
5. Arahkanbrowserandapadaalamathttp://localhost/webpro/bab4/faktur2.php
6. Hasilnyaakanterlihatsepertigambar4.3.
TIPS:
Andadapatbereksperimendenganperintahexplode(),misalnyatidakmenggunakan
fungsifileuntukmemecahbarismelainkandenganexplode()denganseparator\n.
LUGSTIKOMSurabaya
BabIVFiledanArray
Gambar4.3:Tampilandatafakturlebihbaikdarisebelumnya
4.2.6ArraydenganIndexString(AssociativeArray)
Padakasustertentupenggunaanassociativearraylebihbaikdibandingkandenganarrayindex
numerik.Padaassociativearray,pengaksesanbukandenganindexangkamelainkanstringsesuai
dengankeinginankita.Sebagaicontohkitaakanmembuatsebuaharray$produksepertisebelumnya
namundenganassociativearray.
Cara1
$produk=array('stc'=>'sticker','ks'=>'kaos','jkt'=>'jacket');
Padacontohdiataskitamemberiindexpadastickerdenganstc,kaosdenganksdanjacketdengan
jkt.
Cara2
$produk=array('stc'=>'sticker');
$produk=array('ks'=>'kaos');
$produk=array('jkt'=>'jacket');
Cara3
$produk['stc']='sticker';
$produk['ks']='kaos';
$produk['jkt']='jacket';
4.2.7MengaksesAssociativeArray
Sebenarnyapengaksesanassociativearraysamadenganarrayindexnumerik.Halyangdiperlukan
tentunamadariarraydannamaindexyangakandiakses.Perhatikancontohberikut,output
tampilandibawahakansamadenganoutput1padabahasansebelumnya.
echo$produk['stc'].''.$produk['ks'].''.$produk['jkt'];
atau
echo{$produk['stc']}{$produk['ks'}{$produk['jkt']};
LUGSTIKOMSurabaya
BabIVFiledanArray
Jikaakanmencetakassociativearraydalamsuatustringmakagunakantanda{}(kurungkurawal)
sebagaipembungkusarray.
4.2.8LoopingpadaAssociativeArray
Karenapadaassociativearraytidakmenggunakanangkasebagaiindex,makakitatidakdapat
menggunakanloopingforpadaarraytipeini.
a.Loopingdenganforeach()
Associativearraymemangsangatcocokdigunakandenganloopforeach.Kesederhanaansyntax
foreachmembuatlebihmudahdibaca.
foreach($produkas$index=>$prd){
echo$index::$prd<br/>;
}
Outputdariscriptdiatasadalahsebagaiberikut:
stc :: sticker
ks :: kaos
jkt :: jacket
tobecontinue...

Dasar2 Web Programming

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

Dasar2 Web Programming

Diunggah oleh

Hak Cipta:

Format Tersedia

rio astamal

rio astamal (c0kr3x@gmail.com)

Anda mungkin juga menyukai