01_Pengenalan Pemrograman Web

(1)

Pengenalan Pemrograman Web

Web Program m ing adalah adalah proses m enulis, m encoba, m em erik sa dan m em per baik i ( debug) , sert a m em elihara k ode unt uk m em buat sebuah program k om put er. Kode ini dit ulis dalam berbagai bahasa pem rogram an. Tuj uan dari pem rogram an adalah unt uk m em uat suat u program y ang dapat m elak uk an suat u perhit ungan at au proses sesuai dengan k einginan si pem r ogr am . Jadi Secara singk at unt uk Web progr am m ing adalah proses pem buat an program y ang out put ny a disaj ik an oleh Web Brow ser.

1 .2 Tu j u a n

Tuj uan pem belaj aran pada bab ini adalah: 1. Mem aham i k onsep pem r ogram an w eb

(2)

2 . SEJARAH SI N GKAT

m engek sekusi program y ang dik et ik an, perangk at lunak y ang digunak an sebagai int erpret er ini ant ara lain sem ua perangk at lunak y ang dik at agorik an sebagai Web Brow ser. dan dit elit i m ulai t ahun 1960an Dalam perk em bangan sej arahny a hingga t ahun 2000an ini int ernet digunak an lebih dari 600 m ily ar lebih penggunany a. Perk em bangan y ang cuk up fant ast is ini dipicu oleh penem uan prot ok ol HTTP y ang dit em uk an oleh Tim Berners- Lee pada t ahun 1989. Websit e y ang sek arang k it a nik m at i saat berselancar di int ernet t idak t erlepas dari j asa beliau, sehingga w eb berk em bang m enj adi dua j enis, st at is dan dinam is. Sebuah w eb dik at ak an sebagai w eb st at is j ik a infor m asi y ang dit am pilk an dalam w eb t ersebut t idak

Secaraum um j enispem rogram an w eb t erbagi 2 ( duay ait u client side script ing dan serv er side

script ing. Perbedaank eduaj enis script iniadalahbagaim anacar ak erj any adanpem rosesanny adilak uk andim ana. Aplik asiberbasis w eb

adalahaplik asi y ang arsit ek t urny aberbasis client - serv er. Mak sudnyaadalahaplik asi w eb dapat diolah di sisi client dan di sisi serv er.

(3)

Halaman3

Pemrograman Web /Pengenalan Pemrograman Web

Brawijaya University

2012

m engirim dat a m elalui j aringan, m ak a hal it u m em ak an w ak t u lebih sedik it , m enggunak an lebih k ecil bandw idt hdan m engurangi resik o k eam anan.

Client - side Script seringk ali dim asuk k an ( em bedded) di dalam dok um en HTML, t et api dapat j uga berada di dalam file t erpisah, y ang direferensik an oleh dok um en y ang m enggunak anny a. At as sebuah request , file y ang diper luk an dik irim k an oleh w eb serv er k epada k om put er user. Web br ow ser m ilik user m elak uk an ek sek usi t erhadap Script , lalu m enam pilk an dok um en, t erm asuk out put y ang dapat t erlihat dari Script . Client - side Script j uga dapat berisik an perint ah y ang harus diik ut i oleh w eb brow ser j ik a user berint erak si dengan dok um en dengan cara t ert ent u, cont ohny a k lik sebuah t om bol.

Berik ut adalah beberapa t ek nologi client side y ang sering digunak an:

• Act iv e X Con t r ols

Act iveX Cont rol adalah program y ang berdiri sendiri, y ang biasa disebut k om ponen y ang dit ulis dalam bahasa C+ + at au Visual Basic. Ket ik a dit am bahk an ke sebuah halam an w eb,

Act iveX cont rol dik em bangk an oleh Microsoft , dan m esk ipun k om pat ibel dengan HTML st andar, t api t idak di- support oleh Net scape brow ser y ang t anpa m enggunak an Act iv eX plug- in. Act iveX cont rol hany a dapat berfungsi di I nt ernet Ex plorer ( m esk ipun begit u beberapa fungsi Act iveX disediak an unt uk Net scape m elalui plug- in dari Ncom pass) .

• Ja v a Apple t s

Applet s adalah sebuah program y ang dit ulis dengan m enggunak an bahasa pem rogram an Jav a y ang bisa dim asuk k an k e dalam halam an HTML, sam a sepert i sebuah im age dim asuk k an k e halam an HTML. Ket ik a k it a m enggunak an brow ser dengan Jav a diak t ifk an unt uk m elihat halam an y ang m em uat applet , m ak a k ode applet dit ransfer k e sist em k it a dan diek sek usi oleh brow ser. Karena applet dit ulis dengan Jav a, m ak a applet ini m em puny ai k elebihan- kelebihan Jav a, sepert i bisa m enj adi st and- alone dan cross plat for m .

• Clie n t Side Scr ipt da n D H TM L

Client side script ing dik em bangk an unt uk m eny ediak an alt ernat if unt uk m engubah HTML y ang st at is m enj adi dinam is. Ket ik a brow ser m enem uk an inst ruk si- inst ruk si y ang berupa script y ang dit em pel di dalam k ode HTML, m ak a br ow ser ak an m ent erj em ahk anny a ke dalam HTML m urni ( dengan asum si brow ser m engert i bahasa script ing y ang dit em uk anny a) . I ni m em ungk ink an para pengem bang unt uk m em buat halam an w eb y ang int erak t if y ang lebih bany ak m em pu ny ai fungsi daripada sebuah HTML m urni.

(4)

Karak t erist ik client side script ing :

• Kode program didow nload bersam a dengan halam an w eb • Bersifat int erpret er dan dit erj em ahk an oleh br ow ser

• Model ek sek usiny a sim ple dan sk rip dapat dij adik an sat u dengan HTML Kelebihan j ik a m enggunak an client side script ing :

• Mudah unt uk dipelaj ari dan digunak an, art iny a unt uk m em pelaj ari client side script ing cuk up m udah

• Tidak m em but uhk an penget ahuan pem rogram an y ang t inggi at au pengalam an pem rogram an y ang cuk up ahli

• Perubahan dan pem rosesan k ode program ny a lebih cepat k arena langsung dilak uk an di sisi client / k om put er host t anpa perlu m elak uk an proses di sisi serv er m elalui j aringan int ernet .

• Mam pu m enam pilk an lay out dan desain halam an w eb y ang lebih int erak t if dan dan user friendly . User dapat berint erak si den gan halam an w eb m elalui for m isian y ang disediak an.

3 .2 Se r v e r Side Scr ipt in g

Server Side Program m ing adalah t ek nik pem rogram an w eb dim ana k it a m enulis program di k om put er server y ang k em udian pr ogram it u ak an diek sek usi di server dan hasilny a y ang sudah berupa HTML ak an dik irim balik k e client y ang request t erhadap halam an program y ang k it a buat t ersebut . Beberapa t ahun y ang silam , sat u- sat uny a solusi agar m enam pilk an dat a y ang dinam is k e web adalah dengan m enggunak an sesuat u y ang di sebut Com m on Gat ew ay I nt erface ( CGI ) . Dengan m eggunak an program CGI m em ungk ink an cara y ang relat if sederhana unt uk dapat m enerim a input dari user, m elak uk an query t erhadap dat abase, dan m engem balik an hasilny a k e brow ser .

Baik Microsoft m aupun Net scape t elah m engem bangk an API y ang cocok y ang bisa digunak an unt uk m em buat di dalam k ode proses unt uk m elay ani request - request w eb. Tek nologi server side t erbaru sek arang ini y ang dit aw ark an t erm asuk Act ive Server Page ( ASP) , Java Servlet s, Java Server Pages ( JSP) , PHP: Hy per t ex t Preprocessor ( PHP) , dan m asih bany ak lagi.

Berik ut adalah beberapa k eunggulan penggunaan server side script ing daripada k it a hany a m enggunak an t ek nologi client - side saj a :

• Mem inim alisasinet w ork t raffic denganm em bat asik ebut uhanbrow ser danserver unt uk t alk back diant arak eduany a.

• Wak t uloading ak anm enj adilebihsingk at k arena y ang didow nload hany ahalam an y ang m engandung HTML saj a.

• Masalahk om pat ibilit asbr ow ser dapat dihindari.

• Mem ungk ink ank it am em berik an dat a y ang t idak adapadasisiclient

• Lebih am an, k arena program diek sek usi di server sehingga k ode program t idak bisa dilihat dari br ow ser.

4 . KON SEP D ASAR W EB SERV ER

(5)

Halaman5

Pemrograman Web /Pengenalan Pemrograman Web

Brawijaya University

2012

I nt ernet ( ham pir 60% ) , sedangk an I I S ( I nt ernet I nform at ion Service) dari Microsoft digunak an di m esin ber basis NT dan PWS ( Personal Web Ser ver) digunak an di m esin Win98.

Web Serv er ak an m elay ani sebuah request dari Web Client dengan m engeluark an server response k e client berupa t ransfer file HTML y ang dit erim a oleh brow ser di client .

Gam bar 1. Cara kerj a Web Serv er

Apache m erupak an salah sat u dari w eb serv er open source y ang cukup handal. dik at ak an cuk up handal disebabk an selain dari apache m erupak an w eb serv er gr at isan, t et api apache m em ilik i perform a y ang t idak k alah baik dibanding w eb serv er lainny a

Selain perform any a y ang t idak k alah baik , apache w ebserv er j uga dapat dij alank an di berbagai m acam Operat ing Syst em sepert i Window s, Linux , FreBSD, dll. Selain it u, Apache m em ilik i fit ur- fit ur canggih sepert i pesan kesalahan y ang dapat dik onfigur( m elalui ht t pd) , aut ent ik asi berbasis sej um lah m enj adi m udah.

5 . PEN GEN ALAN H TM L

Hy perTex t Mark up Language ( HTML) adalah

(6)

m erupak an file HTML dapat dibuk a dengan m enggunak an brow ser w eb sepert i Mozilla Firefox at au Microsoft I nt ernet Ex plorer. HTML j uga dapat dik enali oleh aplik asi pem buk a em ail at aupun dari PDA dan program lain y ang m em ilik i k em am puan br ow ser.

Secara garis besar, t erdapat 4 j enis elem en dari HTML:

1. St ruct ural

Tanda y ang m enent uk an level at au t ingk at an dari sebuah t ek s ( cont oh, <h1>Golf</h1>

ak an m em erint ahk an brow ser unt uk m enam pilk an " Golf" sebagai t ek s t ebal besar y ang m enunj uk k an sebagai Heading 1

2. Present at ional.

Tanda y ang m enent uk an t am pilan dari sebuah t ek s t idak peduli dengan lev el dari t eks t ersebut ( cont oh, <b>boldface</b> ak an m enam pilk an bold. Tanda present at ional saat ini sudah m ulai digant ik an oleh CSS dan t idak direk om endasik an unt uk m engat ur t am pilan t ek s.

3. Hypert ex t

Tanda y ang m enunj ukk an pranala k e bagian dari dok um en t ersebut at au pranala k e dok um en lain ( cont oh, <a href="http://www.wikipedia.org/">Wikipedia</a>ak an m enam pilk an Wik ipedia sebagai sebuah hy perlink k e URL t ert ent u)

4. Elem en w idget , y ang m em buat obj ek - obj ek lain sepert i t om bol (<button>) , list (<li>) , dan garis horizont al (<hr>) .

Set iap dok um en HTML harus diaw ali t ag <HTML>. Tag ini digunak an oleh w eb serv er dan w eb brow ser unt uk berk om unik asi. Tag ini ak an m em berit ahuk an w eb brow ser bahw a y ang dik irim adalah dok um en HTML. Tag ini harus berada di baris pert am a pada dok um en HTML.

Tag <HTML> m em puny ai t ag penut up, t ag ini digunak an unt uk m em berit ahu brow ser ak hir dari dok um en HTML. Tag penut up unt uk t ag <HTML> adalah </HTML>. Tag penut up ini harus berada t erak hir pada dok um en HTML

• Tag HTML

• Tag <HTML> dan </HTML>

• Tag <HEAD> dan </HEAD>

• Tag <BODY>dan </BODY>

• Judul Page ( t ag <TITLE>)

• Pem buat an Paragraf (tag<p>)

Secara um um for m at t ag HTML t ersebut dapat dit ulisk an sebagai berik ut :

<TAG>Teks yang akan dipengaruhi oleh tag</TAG>

Sebagai cont oh k alau k it a ak an m em buat t ulisan dalam form at t ebal m ak a y ang harus k it a t ulisk an dalam ﬁle HTML adalah:

<B>Tulisan yang tercetak tebal</B>

Unt uk m endeﬁnisikan head, kita dapat menambahkan tag <HEAD>dan </HEAD> set elah penggunaan t ag <HTML>

(7)

Halaman7

Pemrograman Web /Pengenalan Pemrograman Web

Brawijaya University

2012

didefinisik an dengan m elet ak k an t ag <BODY> dan </BODY> di ant ara t eks y ang ak an k it a t am pilk an. St ruk t ur dasar sebuah page dapat

dit ulisk an sebagai :

Unt uk m endeﬁnisikan judul page (title) maka kita dapat melakukannya dengan meletakkan nask ah j udul di ant ara t ag <TITLE> dan </TITLE>. Judul ini ak an dit am pilk an pada t it le bar w eb brow ser . Misalk an k it a ak an m em buat sebuah page dengan j udul " Lat ihan HTML" m ak a k it a harus m enam bahk an:

<TITLE>Latihan HTML</TITLE>

Tag – Tag HTML

1.<FONT></FONT>

Tag ini m enerangk an bahw a sebuah t ulisan m em puny ai beberapa pelengk ap. Pelengk apny a adalah:

a. Uk uran ( Size) : Menerangk an ukuran dari t ulisan ant ara angk a 1- 7, t ergant ung k epada angk a 1 adalah y ang t erk ecil dan an gk a 7 adalah y ang t erbesar.

b. Jenis Tulisan ( FACE) : Menerangkan huruf ak t ual y ang Anda m au t am pilk an j ik a huruf ini t erinst al pada k om put er pengguna. I ni adalah huruf- huruf y ang populer. Cont oh : <FONT FACE="Helvetica, Times New Roman, Arial>

c. Warna ( COLOR) : Menerangk an w arna dah huruf dengan nam any a at au dengan k ode w arna. Cont oh: <FONT color="RED">

Cont oh penggunaan TAG :

<FONT SIZE="4" FACE="Arial" COLOR="Red"> BELAJAR HTML ITU MUDAH </FONT>

2. <b></b>Gay a Tulisan Huruf Tebal/ Miring dan Garis Baw ah

Unt uk m em for m at t ek s, gunak anlah t ag <b></b>unt uk m encet ak t ebal, t ag <u></u> unt uk cet ak m iring dan <u></u > unt uk m em buat t eks bergaris baw ah. Berik ut ini adalah cont oh penggunaan t ag- t ag t ersebut .

<u>This is underlined </u> <i>This is italic </i>

3.Perint ah Header digunak an unt uk m enam pilk an Judul Baba t au Sub bab dari isi dok um en. Uk uran header biasany a lebih besar dari uk uran isi body dok um en. Nam un disediak an j uga uk uran k ecil. HTML m eny ediak an hingga 6 ( enam ) uk uran header m ulai dari <H1>, <H2>,

(8)

Dibaw ah ini adalah t abe y ang biasa digunak ansepert i y ang diperlihat k anpadaTabel 1.1.

Tabel 1.1 Tag HTML

Ta g H TM L Ke t e r a n ga n

< ht m l> < / ht m l> Tag unt uk m engapit halam an HTML

< head> < / head> Tag y ang berisi infor m asi um um dari halam an

< t it le> < / t it le> Judul Halam an, berada didalam t ag < head> ...< / head>

< body > < / body > Kont en y ang ak an dit am pilk an di brow ser

< st y le> < / st y le> Unt uk CSS

< st rong> < / st rong> Unt uk m enebalk an t ek s

< div > < / div > Unt uk m em buat lay er

< a> < / a> Unt uk m em buat hy perlink

< p> < / p> Unt uk m em buat paragraf

< hn> < / hn> Unt uk m em buat header, n berupa angk a dari 1 – 5

< span> < / span> Unt uk inline st y le ( m anipulasi t ek s)

< ! > Kom ent ar

< br> Unt uk gant i baris

6 . PEN GEN ALAN CSS

Cascading St y le Sheet at au y ang disingk at CSS m em ungk ink an anda unt uk m endesain t am pilan dok um en ( Php dan HTML) dengan m em isahk an isi dari dok um en HTML dengan k ode unt uk m enam pilk anny a ( CSS) .

Didalam dunia desain w eb, lay out at au m engat ur let ak web, form at huruf, dan lain ny a y ang ada dalam sebuah w eb m enj adi bagian y ang am at pent ing bahk an bisa j adi y ang paling lam a dibanding dengan bagain desain web lainny a. Karena j ik a k it a m em bua lay out y ang salah, m ak a w eb k it a j uga ak an salah dit erj em ahk an oleh brow ser. Hal it u j uga bisa disebabk an k arena set iap brow ser m em illik i duk ungan bahasa( CSS) y ang berbeda dan t ent uny a default dari brow serny a sendiri y ang berbeda- beda. Brow ser y ang paling rew el soal lay out css adalah I E k arena k urang duk unganny a t erhadap CSS.

Jik a k it a m em ilik i bany ak file HTML, k it a hany a perlu sat u file CSS, sehingga k et ik a k it a m enggant i j enis huruf pada file CSS m ak a sem ua file HTML y ang berhubungan pada file CSS t ersebut ak an berubah. CSS dist andarisasi oleh W3C ( World Wide Web Consort ium ) . CSS dapat dipasang pada dik um en HTML y ang t elah j adi.

Ada em pat caraunt uk m em asuk k an script CSS k edalam w eb page anda y ait udengan :

• Ex t ernal St y le Sheet • I nt ernal St y le Sheet • I nline St y le

(9)

Halaman9

Pemrograman Web /Pengenalan Pemrograman Web

Brawijaya University

2012

6 .1

Ex t e r n a l St yle Sh e e t

Cara ini adalah cara y ang paling ideal unt uk m em buat CSS, dengan m enggunak an cara ini, anda hany a perlu m engubah sat u file sat u apabila anda m engingink an perubahan st y le pada CSS. Anda harus m em buat sat u file t ex t y ang berek st ensi css, file ini y ang nant iny a dihubungk an k edalam halam an w eb anda.

Cont oh :

File m y st y le.css

hr {color: sienna} p {margin-left: 20px}

body {background-image: url("images/back40.gif")}

Anda dapat m em asuk k anfilediat ask edalam halam an w eb page anda dengancarasebagaiberik ut :

<head>

</head>

Terlihat bahw alink file CSS t erlet ak diant ara t ag <head>

6 .2 I n t e r n a l St y le Sh e e t

Apabila anda m enggunak ancara ini m ak a anda harusm enggabungk anlangsung script CSS anda k edalam halam an w eb anda, cara ini t idakefisienapabila anda m engingink anperubahanpadasalahsat u st y le CSS anda y ang t erny at at erdapat padabeberapahalam an w eb anda, m ak a anda harusm engubahsem uahalam an

w eb page t ersebut .

Cont oh :

<head>

body {background-image: url("images/back40.gif")} </style>

</head>

6 .3 I n lin e St y le s

I nlinest y lesm engharusk an anda m enulisk an st y le y ang anda definisik ank epada t ag- t ag HTML y ang anda ingink ansat upersat u.

Cont oh :

<p style="color: sienna; margin-left: 20px"> This is a paragraph

</p>

6 .4 M u lt iple St y le She e t

(10)

REFEREN SI

Anonim . Modul Pengaj aran PPPGT Malang. 2006. Saput ra, Ridw an S. Pem rogram an HTML. 2010

PROPAGASI

A. La t ih a n da n D isk u si ( Pr opa ga si V e r t ik a l da n H or iz on t a l)

1. Buat sebuah halam an y ang m enam pilk an biodat a anda dengan form at HTML!

2. Berik an st y le CSS pada halam an t er sebut

B. Tu ga s ( Ev a lu a si m a n dir i)

1. Jelask an sej arah pem rogram an w eb!

2. Sebut k an dan j elask an cont oh client side script ing!