TUGAS AKHIR BIDANG MINAT WEB DESAIN

IMPLEMENTASI CSS DAN DRUPAL DALAM SOSIALISASI GO GREEN

Kelompok : Ni Wayan Mona Rosita Luh Sukma Widiasari Cok Istri Oka Diah Anggaraeni I Wayan Angga Pratama A. A. Ngurah Oka Abhina Amitaba (0908605013) (0908605038) (0908605039) (0908605058) (???????????)

PROGRAM STUDI TEKNIK INFORMATIKA JURUSAN ILMU KOMPUTER FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS UDAYANA 2011

KATA PENGANTAR

DAFTAR ISI .

DAFTAR GAMBAR .

industri.1 Latar belakang Isu Pemanasan global dan Perubahan Iklim (Climate Change) bukan lagi sekadar isapan jempol belaka. Hal tersebut tidaklah keliru dan berlebihan bila melihat fakta dan hasil-hasil penelitian para ahli yang menunjukkan bahwa ada kecenderungan jumlah kadar gas rumah kaca seperti CO2 di atmosfer telah kelewat batas. serta ternyata sangat berkorelasi positif dengan semakin tingginya aktivitas manusia di bumi yang dihasilkan dari berbagai kegiatan. kemudian gelombang panas akan mengacaukan iklim dan menimbulkan badai dahsyat yang dapat memporakporandakan bangunan di berbagai kota. . angin ribut. Menurut para ahli. Kenaikan suhu udara ini dipicu oleh semakin tingginya kadar gas rumah kaca (GRK) di atmosfer. tapi sudah menunjukan bentuk dan wujud yang sebenarnya kehadapan umat manusia di bumi dengan semakin tidak nyamannya bumi sebagai tempat tinggal ataupun hunian makhluk hidup. rumah sakit.50°C. ataupun kampus). Seperti diketahui perubahan iklim (climate change) adalah gejala naiknya suhu permukaan bumi akibat naiknya intensitas efek rumah kaca yang kemudian menyebabkan terjadinya pemanasan global. dan batubara) yang banyak digunakan untuk industri. dalam waktu 70 tahun sejak tahun 1940 suhu udara rata-rata di bumi diperkirakan mengalami kenaikan sekitar 0. kantor. seperti iklim yang kacau. Berbagai fenomena alam yang cenderung mengalami penyimpangan (anomali) akhir-akhir ini. panas yang ekstrim berkepanjangan. dimana semakin hari jumlahnya dan konsentrasinya terus membumbung tinggi. gas. diantaranya oleh CO2 yang banyak dihasilkan dari aktivitas manusia. seperti kegiatan pembakaran bahan bakar fosil (misalnya minyak. pembangkit. dan puting beliung banyak dikaitkan dengan isu pemanasan global tersebut. yang terus menerus dimuntahkan dari bumi. transportasi. rumah tangga. sekolah.BAB I PENDAHULUAN 1. dll. transportasi. antara lain rumah tangga (termasuk institusi. intensitas curah hujan yang kelewat tinggi (diluar normal). Pemanasan global akan mengakibatkan terjadinya perubahan iklim dan kenaikan permukaan air laut akibat mencairnya es di kutub. dan lain-lain. banjir.

1. Kondisi ini semakin diperparah dengan semakin tingginya laju pemusnahan vegetasi atau pohon-pohon oleh manusia yang ada di bumi.Plastik adalah salah satu polimer yang paling sukar terurai secara alami.Sehingga masalah terbesar yang ditimbulkan dari kemasan plastik adalah masalah sampah. tetapi juga pada penghematan konsumsi plastik pada kehidupan sehari-hari. Botol air minum dapat menjadi karsinogenik jika digunakan lebih dari satu kali. dimana setiap hari kita saksikan jutaan industri dan kendaran bermotor memuntahkan gas-gas polutan ke atmosfer khususnya CO2.Disadari atau tidak.7 juta ton plastik dunia digunakan untuk pembotolan air tiap tahun. 2. Hal ini sama dengan bahan bakar untuk 100. yang tidak diimbangi dengan upaya-upaya pemulihan dan pelestarian.reusablebags. fakta mengenai permasalahan botol plastik antara lain adalah: 1. botol akan terus bersama kita selamanya karena tidak dapat terurai secara biologis (non biodegradable). Orang Amerika membeli rata-rata 25 milyar minuman botol plastik per tahun dan 22 milyar botol akan berakhir di tempat sampah. seperti pembalakan hutan yang seakan tiada hentinya. . sehingga diluar kemampuan alam untuk menetralisir dan mendaurulang kembali gasgas tersebut.Beberapa sumber menyatakan rata-rata plastik memerlukan waktu ratusan tahun untuk terurai secara alami. 2. Kondisi atmosfer kita saat ini ibaratnya seperti keranjang sampah raksasa. yang berfungsi sebagai wadah dari bermacam-macam gas yang dimuntahkan dari bumi. 3. Seperti semua plastik. Pembotolan air adalah pemborosan. Botol akan terpecah menjadi serpihan kecil yang meracuni tanah dan air. 4.000 mobil amerika untuk satu tahun. karena mengandung polyethylene terephthalate. Ungkapan Go green bukan hanya sebatas pada penghematan energi.com. Konsumen membayar $ 7 milyar untuk air botolan di Amerika tiap tahun. 6.5 juta barrel minyak digunakan untuk memproduksi botol plastik untuk Amerika. Sebagai contoh menurut www.Sampah plastik menjadi salah satu polutan yang sangat mengancam kelestarian lingkungan. fenomena pemanasan global tersebut sebagian besar adalah akibat dari ulah aktivitas manusia di bumi yang kelewat tinggi sejalan dengan trend gaya hidup manusia modern. 5.

yang termasuk sumber alam yang tidak dapat diperbaharui. Sebanyak 120 juta barel minyak mentah . Dalam bulan Juni 2006. Perancis. Mumbai Scotlandia. diperlukan untk produksi satu trilion kantong plastik setiap tahun diseluruh dunia. Kantong plastik dianggap sebagai produk yang dapat dibuang dan tidak hancur ditempat pembuangan.7.000 sampah plastik mengambang dilautan.permasalahan utama plastik yang terkait dengan kelestarian lingkungan antara lain adalah: 1. dan lingkungan kelautan. 5. Denmark. 4. program lingkungan PBB memperkirakan setiap mil persegi ada 46. Sampah botol akan menjadi polutan. Jerman. Diperkirakan 1 juta burung laut menelan atau terjerat jaring plastik atau sampah lainnya setiap tahun. yaitu minyak dan menciptakan polusi mulai dari pembuatan sampai pembuangannya. Switzerland. Hanya 0. 2. Afrika . Sampah plastik yang dibuang sembarangan menyumbat saluran air dan menyebabkan banjir. Sampah tas plastik yang dibuang ke saluran air mengakibat kan genangan air yang menjadi sarang pembiak an nyamuk penyebab pe nyakit demam berdarah. Negara dan kota-kota yang telah melarang atau mengurangi penggunaan kan tong plastik adalah San Francisco.000 tahun bagi plastik untuk terurai dan hancur. Hong Kong. Australia. Diperlukan 1. Tanzania. Singapura.com.6% s/d 1% kantong plastik yang dapat didaur ulang diseluruh dunia. sisanya tetap mengendap ditanah. Sekitar 80% sampah dilautan berasal dari daratan. 8. 7. 6. pantai. dan hampir 90% adalah plastik. Tas plastik dibuat dari sumber daya alam yang langka. Sedangkan menurut sumber dari www.coolcitibag. Irelandia. Sebanyak 47% sampah yang terbawa angin dari tempat pembuangan akhirmerupakan sampah kantong plastik 3. Suatu laporan mengenai sampah plastik di laut di dunia oleh Greenpeacemenyatakan bahwa sedikitnya 267 jenis biota laut telah menderita dari jeratan atau mencerna sampah laut.Taiwan. sungai dan saluran air. Plastik menimbulkan masalah sampah di jalan-jalan .

serta kebiasaan. Dapatturut menjaga kelestarian lingkungan dengan mensosialisasikan kepada masyarakat mengenai gerakan go green dengan lebih praktis dan mudah . bagaimanakah implementasi dari penggunaan aplikasi Drupal dan CSS di dunia nyata? 2. seperti upaya mendukung penghematan energi. Pembuatan website itu dapat diwujudkan dengan menggunakan aplikasi pembuat web yang sederhana.3 Tujuan Adapun tujuan dari penulisan karya tulis ini yaitu: 1. dimulai dari diri sendiri. Dapat mengetahui tentang implementasi dari penggunaan aplikasi HTML dan CSS di dunia nyata 2. Pada masyarakat.Selatan. Bagaimanakah cara untuk turut menjaga kelestarian lingkungan dengan mensosialisasikan kepada masyarakat mengenai gerakan go green dengan lebih praktis dan mudah? 1. dan CSS sebagai style sheet daridesign webyang akan dibahas lebih lanjut pada karya tulis ini. sampai negara atau pemerintah. masyarakat. misalnya tradisi-tradisi yag sudah diwariskan nenek moyang sejak dahulu. seperti produk-produk ramah lingkungan dan tips-tips mengenai gaya hidup ramah lingkungan. yaitu membuat sebuah website mengenai infohal-hal yang mendukung gerakan go green. keluarga. seperti Drupal sebagai Content Management System (CMS) dari bahasa pemrograman HTML. Upaya mengurangi pemanasan global tersebut juga dapat diwujudkan dengan memanfaatkan teknologi Internet. pengetahuan dan budaya yang pada dasarnya sangat baik dalam pelestarian lingkungan. Dengan kondisi atmosfer dan limbah plastik di bumi kita yang demikian. Pengenaan cukai sebesar 15 sen atas tas belanja plastik di Republik Irlandia telah menurunkan pemakaian nya sampai dengan 90%. 1.10. lantas hal-hal apa kiranya yang dapat kita lakukan dalam upaya mengantisipasi atau minimal memperlambat fenomena pemanasan global dan pencemaran lingkungan tersebut sehingga tidak semakin parah? Sebetulnya kita semua dapat berperan dalam upaya mengurangi pemanasan global tersebut. Philippina.2 Rumusan Masalah 1.

5 Ruang lingkup . seperti memberi informasi mengenai produk-poduk yang ramah lingkungan. dan memberikan tips-tips mengenai gaya hidup ramah lingkungan dengan memanfaatkan kemajuan teknologi jaman sekarang.4 Manfaat Sesuai dengan tujuan yang telah disebutkan. manfaat dari penulisan karya tulis ini adalah selain penulis dapat mengmplementasikan penggunaan aplikasi HTML dan CSS3.1. penulis juga dapat turut ambil alih dalam menjaga kelestarian lingkungan. berusaha menarik minat masyarakat untuk menggunakan produk-produk yang ramah lingkungan. sehingga dapat dilakukan dengan lebih praktis dan mudah 1.

seperti mengatur posisi. terdapat istilahSelector. dan CSS sebagai style sheet dari design web ini. 2.hiasan. dan Element. image. penulis menggunakan beberapa aplikasi. (titik koma) . Berikut merupakan formula dari penulisan CSS. atau biasa disingkat CSS berfungsi untuk menata dokumen HTML yangsudah dibuat sebelumnya. dan Value. Selector {property:value.Ada beberapa istilah pada HTML. posisi text.} P {font-family:verdana. Dengan CSS.1 Cascading Styles Sheet (CSS) Cascading Styles Sheet. list. diantaranya TAG. Selector adalah sesuatu yang akan diberikan style. dan form. Attribute. Property adalah sesuatu yang akan diimplementasikan pada selector. link. warna. Sedangkan value adalah nilai yang diberikan untuk property. Contoh dari property adalah:warna. jenis huruf. atau apa saja yang berhubungan dengan penampilan dari dokumen HTML yang sudah dibuat. atau pada selector tersebut akan diimplementasikanCSS. dan bingkai.Sedangkan padaCSS. Content.BAB II TINJAUAN PUSTAKA Dalam projek pembuatan website mengenai gerakan go green ini. Property.dokumen yang telah dibuat dengan HTML sebelumnya dapat diatur. color:red} Keterangan: y y y y Letak property dan value berada didalam tanda { dan } Didalam selector bisa ada lebih dari satu property Pemisah antara property dan value adalah tanda : (titik dua) Pemisah antar poperty adalah . table. diantaranya Drupal sebagai Content Management System (CMS) dari bahasa pemrograman HTML. Hal-hal yang biasa terdapat pada sebuah dokemen HTMLyaitu: text.

Dengan cara ini berarti tidak menggunakan selector. 2.Ada beberapa cara yang digunakan untuk mengimplementasikan CSS pada dokumen HTML. tapididefinisikan didalam selector. karena TAG dianggap sebagai selectornya. Contoh: <html> <head> <style> h1 { color : blue.1In-line Style Sheets Implementasi CSS pada HTML dengan caraIn-line Style Sheets adalah denganmengimplementasikan Property secara langsung pada TAG HTML.font-size:11px. diantaranya In-line Style Sheets.1. Caranaya. <h2 style="color:red.1. dengan meletakanproperty-propertyyang ingin diimplementasikan didalam attribute style. Linked atau External Style Sheets. } </style> </head> <body> <h1>Ini Text Pertama</h1> <p>Ini Text Kedua</p> <h1>Ini Text Ketiga</h1> <p>Ini Text Kempat</p> .font-family:vardana. maka digunakan tanda . Linked dengan import. Contoh implementasi CSS: Format: attributestyle<tag style="property:value">content</tag>: Contoh: <p style="color:red">Contoh Inline</p> Jika jumlah property yang dimplementasikan pada TAG HTML lebih dari satu. font-family dan font-size pada TAG h2. (titik koma) sebagai tanda pemisah antar property. } p { color : red.2 Embeded atau Internal Style Sheets Internal Style Sheets mengimplementasikan property tidak secara langsung pada TAG HTML. Contoh berikut ini mengimplementasikan property color.Definisi CSS ini terletak didalam TAG style yang terletak didalamTAG head.">content</h2> 2. Embeded atauInternal Style Sheets.

3 Linked/External Style Sheets Linked/External Style Sheets mendefinisikan selector.css.Berikut ini adalah contoh menggunakan file CSS yangmempunyai nama style.com/us.html <html> <head> <link rel="stylesheet" type="text/css" href="style.js1.css h1 { color : blue.css pada dokumen HTML: <link rel="stylesheet" type="text/css" href="style.</body> </html> 2.yimg.yimg. Contoh berikut ini terdiri dari 2 buah file.1. } p { color : red.css). yaitu index. </style> .css"> Berikut ini adalah contoh meggunakan css dengan caraLinked/External Style Sheets.com/lib/reg/css/yregml_200507281400. dan value pada sebuah file yangterpisah dengan file dokumen HTML.4 Linked dengan Import Untuk link <style type="text/css" media="all"> @import url(http://us.html dan filestyle.1. property.css"> </head> <body> <h1>Ini Text Pertama</h1> <p>Ini Text Kedua</p> </body> </html> 2. } Isi file index.Untuk menggunakan file yang berisi CSS ini pada dokumen HTML dengan menggunakan TAG link.TAG linkyang terletak didalam TAG head. Isi file style.

Contoh : p {font-weight: bold. 2.Dapat digunakan salah satunya. Contoh: p {font-size:12px.} y letter-spacing Value : normal | < length > Property ini digunakan untuk memberikan tambahan space antara huruf.} y text-decoration Value: none | [ underline || overline || line-through || blink ] ini digunakan untuk mendekorasi text. Contoh: p {text-decoration: overline. atau dikombinasikan ketiganya.1 Text y font-size Value: xx-small | x-small | small | medium | large | x-large | xx-large larger | smaller|12px| Property ini digunakan untuk menentukan ukuran font. Contoh: p {font-style:italic.} y font-weight Value: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 Property ini digunakan untuk ketebalan font.} y text-transform Value: none | capitalize | uppercase | lowercase Property ini digunakan untuk menentukan besar kecilnya huruf.} y word-spacing Value: normal | < length > .1. Contoh : p {text-transform: capitalize. Contoh : p {letter-spacing: 12px.} y font-style Value: normal | italic | oblique Property ini digunakan untuk membuat font italic atau tidak.3.

} y line-height Value: normal | < number > | < length > | < percentage > Property ini digunakan untuk menentukan tinggi baris diantara text.} y text-indent Value: < length > | < percentage > Property ini digunakan untuk mengatur indent baris pertama.Property ini digunakan untuk memberikan tambahan space antara kata.} y Ukuran Berikut ini adalah beberapa cara penulisan value untuk ukuran: Value em px % pt y background Ada beberapa property yang dapat digunakan untuk memanipulasi background. P {text-indent: 0. Contoh : td {vertical-align: top. y background-image Value: <url> | none Property ini digunakan untuk menentukan lokasi file yang akan dijadikan background image.5cm. Keterangan sama dengan tinggi character M Unit dalam pixel Prosentase Unit dalam point Contoh font-size: 2em font-size: 12px font-size: 80% font-size: 12pt . P {text-align: justify.} y vertical-align Value: top | middle | bottom Property ini digunakan untuk mengatur posisi text pada element secara vertical .} y text-align Value: left | right | center | justify Property ini digunakan untuk mengatur posisi text pada element secara horizontal. P {word-spacing: 12em. P {line-height:5em.

Contoh: p {background-position: center} y background-attachment Value: scroll | fixed Property ini digunakan untuk menentukan apakah background dapat discroll bersama dokumen atau tidak.} y background Value: < background-color > || < background-image > || < background-repeat > || < background-attachment > || < background-position > Property ini digunakan untuk menentukan apakah background property ini merupakan Shorthand Propertydari background. borderstyle. Contoh : body {background-color: red} y background-repeat Value: repeat | repeat-x | repeat-y | no-repeat Property ini digunakan untuk menentukan perulangan penampilang image. Contoh : p {background-attachment: fixed. border- .Contoh : p {background-image: url(µfile gambar¶)} y background-color Value: < color > | transparent Property ini digunakan untuk menentukan warna latarbelakang element HTML. dan color. y Border Value: < border-width > || < border-style > || < color > property ini digunakan untuk membuat bingkai disekitar element. Sama seperti margin dan padding.Border memiliki 3 nilai. Contoh : p {background-repeat: repeat-x. Property border digunakan untuk mensetting ke-empat sisi dari element(top. yaitu: border-width. right. border-width digunakan untukmenentukan ketebalan bingkai. left).} y background-position Value : [< percentage > | < length >] | [top | center | bottom] || [left | center | right] Property ini digunakan untuk menentukan posisi background. bottom.

styledigunakan untuk menentukan bentuk bingkai. CSS juga menyediakan property untukmengatur emapat sisi tersebut secara sendiri-sendiri. left = 4em . right = 2em. bottom. margin-bottom. Color digunakanuntuk menentukan warna bingkai. y border-color Value: < color > Property ini digunakan untuk warna bingkai. margin-right."> Ini sebuah paragaf yang menggunakan border property </p> y margin Value : < length > | < percentage > | auto Property ini digunakan untuk memberikan spasi disisi luar element. bottom = 3em.margin-left. Contoh: body { margin: 5em } Keterangan : setting semua sisi dengan margin 5em p { margin: 2em 4em } Keterangan : setting top dan bottom 2em. left) element sekaligus. Contoh implementasi dari ketiganya adalah : <p style="border: 1px solid blue. right.ketigavalue border tersebut dapat diimplementasikan tersendiri. Contoh : y border-style Value: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ] Property ini digunakan untuk jenis bingkai. yaitu: margin-top.Property margin digunakan untukmengatur empat sisi (top. y border-width Value : [ thin | medium | thick | < length > ] Property ini digunakan untuk ketebalan bingkai. right dan left 4em div { margin: 1em 2em 3em 4em } Keterangan : top = 1em.

} . color:red. text-decoration:underline. right dan left 4em div { padding: 1em 2em 3em 4em } Keterangan: top = 1em. bottom = 3em.Property padding digunakan untuk mengatur empat sisi element.Sama seperti margin. text-decoration:none.} a:active { font-size:15px. color:blue. padding-left.} a:visited { font-size:15px. text-decoration:underline.padding-right. color:green. Contoh: body { padding: 5em } Keterangan: setting semua sisi dengan padding 5em p { padding: 2em 4em } Keterangan: setting top dan bottom 2em. right = 2em. text-decoration:underline. padding-bottom.} a:hover { font-size:20px. color:green. left = 4em Contoh Pseudo Class Berikut ini adalah contoh penggunaan pseudo class: <style> a:link { font-size:15px.Nilai auto akan menyebabkan pengaturan posisi diatur otomatis (biasanya menyebabkan posisinya element menjadi ketengah) y padding Value : < length > | < percentage > Property ini digunakan untuk memberikan spasi pada sisi dalam sebuah element. font-weight:bold.Property individunya adalah padding-top.

untuk menggunakannya pada TAG tertentu. sebuah class selector adalah nama yang didahului dengan tanda titik (. } Bila akan membuat class dan id selector. Class dan Id selectorhanya bisa digunakan pada Embeded/Internal Style Sheets dan Linked/External Style Sheets. biasanya diimplementasikan pada link dengan Menggunakan Tag a: 1. tapi memilikitampilan yang berbeda. Jadi. dapat ditambahkan class pada: misalnya padaa:hover.Untuk link yang pernah dikunjungi 3.). Selectoryang didefiniskan sendiri ini disebut dengan class dan id selector.Berikut ini adalah contoh mendefinisi class selector (dengan nama intro yang didahului dengan tanda #)dan id selector (dengan nama top yang didahului dengan tanda . Keuntungan dari mendefinisikan sendiri adalah dapat memiliki HTML element yang sama. anda harusmenambahkan attribute class atau id dengan nilai sesuai dengan nama id dan class selector yangsudah anda buat sebelumnya (intro dan top).Keadaan ketika link mendapatkan focus 4. dalam hal ini.Keadaan ketika cursor berada diatas link y Class dan ID Selector Pada pembahasan sebelumnya. Dalam CSS.) : #top { border: 1px solid blue.html" class=´link´>Home</a></div> Keterangan : Ada 4 pseudo class. } dan untuk memanggilnya tinggal anda tambahkan class di <a href =´´> <div align="center"><a href="index. link . Dalam CSS. digunakan untuk memberikan ciri tertentu terhadap TAG HTML yang ingindiimplementasikan CSS. property diimplementasikan pada Selector. } . visited. selector yangdimaksud adalah TAG HTML. selector juga dapat didefinisikan sendiri.link { font-size:20px.intro { border: 1px solid red.Untuk link yang belum pernah dikunjungi 2. sesuai dengan definisi CSS pada class atau id selectornya. maka. Berikut ini adalah contoh memanfaatkan definisi class dan id selector: <div id="top"> . active. hover . sedangkan id selectoradalah nama yang didahului dengan pager (#).</style> Untuk penggunaan class. class danid selector ini.

Anda harus menambahkan classAttribute yang diikuti dengan nama class selectornya y Grouping Grouping adalah memberikan property yang sama pada selector yang berbeda tanpa harus mengulangnya.Caranya denan menambahkan tanda koma (.pse:first-letter { font-size: 3em. } Contoh : <html> <head> <style> p. Contoh : BODY. seperti huruf pertama dari sebuah paragraph. padding-right:5px. } p. } y Pseudo Element Pseudo element mengacu kepada bagian dari element. float: left.) pada nama selector yang ingin mempunyai property yang sama.pse:first-line { font-weight: bold.INPUT.Pseudoelement yang dapat digunakan adalah first-line dan first-letter. Untuk dapat menggunakan class selector pada TAG HTML. Untuk menggunakan id selector. yang kemudian diikuti dengan namaselectornya. Format : selector:pseudoelement { property : value.<p class="intro">Test intro</p> </div> Keterangan: Untuk medefinisikan sebuah id selector didahului dengan tanda # yang kemudian dikuti dengannama selectornya. } .A { font-family : Verdana. font-size : 10px. anda harus menambahkan attribute id yang diikuti dengan nama idselectornya pada TAG HTML yang ingin menggunakan CSS yang sudah didefinisikan pada idselector tersebut. Cara menggunakannya denganmenambahkan tanda titik dua (:) dan nama pseudo element pada tag HTML.). Pendefinisian class selector didahului dengan tanda titik (.Arial.TD.TEXTAREA.

</style> </head> <p class="pse"> Latihan terakhir </p> 2. PostgreSQL. namun dengan modul API-nya Drupal juga dapat digunakan sebagai CMF dalam membangun aplikasi berbasis Web Drupal dapat digunakan untuk membangun: y y y y y y y y y y Portal Web Komunitas Forum Diskusi Website Perusahaan Aplikasi Internal Website Personal atau Blog Aplikasi Komersial E-commerce Kumpulan Sumber Informasi Situs Jaringan Sosial Jaringan intranet Surat Kabar (Newsletter) Drupal memiliki beberapa keunggulan. mengatur dan mengorganisir berbagai jenis dari isi/konten pada website.MariaDB dan juga MsSQL. SQLite. Web server yang mendukung. drupal dapat dipasang pada beberapa jenis database.2 Drupal Drupal adalah sebuah perangkat lunak Content Management System (CMS)atau sistem manajemen konten yang bebas dan terbuka yang di distribusikan dibawah lisensi GPL. IIS yang berjalan pada sistem operasi Microsoft Windows. Linux dan FreeBSD. seperti MySQL. Kemampuannya tidak sekedar sebagai CMS. Dibuat dengan bahasa pemrograman PHP. pengembangan dan perawatannya dilakukan oleh ribuan komunitas pengguna dan pengembang di seluruh dunia. sehingga memungkinkan setiap orang baik secara individu maupun komunitas untuk mempublikasi. diantaranya: . Nginx. Mac OS X. diantaranya Apache. Dapat diunduh secara bebas dan dapat digunakan secara bebas juga.

Jika Clean URL tidak diaktifkan. maupun Flash. Kumpulan node inilah yang membentuk keseluruhan konten dalam sebuah website berbasis Drupal. Nama Taxonomy diambil dari ilmu klasifikasi. SQLite.y y y y y y y y CMS (Content Management Systems) Sistem Manajemen Konten CMF (Content Management Framework) Sistem Platform Blog Pengguna tunggal dan pengguna jamak Built-inForumsengine Multi situs hanya dengan satu instalasi Multi bahasa. PostgreSQL. Dalam Drupal terdapat modul Taxonomy yang digunakan untuk mengkategorisasikan konten. Nginx. berita. y Menu. y Comment. halaman statis. bukan hanya pengaturan hak akses jenis konten bahkan bisa memberikan hak akses tiap field data y Bisa membuat jenis konten baru yang tipe datanya sesuai keinginan pengguna Konsep dari Drupal ini adalah: y Node. merupakan tanggapan terhadap sebuah node yang dituliskan oleh user (Komentar). Cara mengklasifikasikan konten sepenuhnya diserahkan kepada pengguna yang punya hak untuk mengatur Taksonomi. gambar. seperti misalnya Forum dan Image Gallery. audio. Sains. Ekonomi. dalam drupal adalah sistem penanganan request melalui URL. Dengan demikian setiap satuan konten bisa disebutkan apakah berkategori Politik. . y Taxonomy. video. Modul-modul lain juga menggunakan modul Taxonomy untuk mengklasifikasikan konten tertentu. IIS dan Lighttpd Pengaturan hak akses pengguna tak terbatas. adalah satuan konten yang terdapat dalam Drupal. maka setiap query string yang berbentuk ?q= akan ditangani oleh sistem menu. topik forum. atau Agama. MsSQL dan MariaDB y y Bisa dipasang dengan webserver Apache. sudah mendukung bahasa Indonesia dan Bahasa Jawa. Node yang begitu banyak perlu dikategorikan sesuai topik masing-masing. Sebuah node dapat merupakan blog. Konten Multimedia Mendukung banyak jenis database seperti MySQL.

penempatan block. setiap modul dapat menambah menu baru dengan cara mendefinisikan fungsi modul_menu. y Theme.0 2001 Ya PHP Ya TinyMice.Whizzywig Tidak terbatas MySQLPostgreMsSQLSQLite Ya Ya (id. Theme dapat diubah-ubah dengan memilih theme yang tersedia dalam direktori /themes maupun /sites/all/themes. yang akan menjamin Drupal tidak lupa memperhitungkan keberadaan menu tersebut ketika diperlukan. y Hook. jv. dengan cara mengaitkan fungsi tertentu tersebut pada hook yang dimiliki sistem Drupal.CKEditor. adalah penampakan luar dari sebuah website Drupal. Website Drupal dapat ditambah dengan modul-modul tertentu sesuai keperluan. Fitur Lisensi Versi Terakhir Tahun pembuatan Blog Bahasa program Forum Teks editor User rule Database Multisite Multilanguage Ukuran paket (zip) Ukuran file terpasang Joomla GPL 1. Misalnya modul Organic Groups untuk memberi fungsi group/mailing list seperti layaknya Google Groups ataupun Yahoo Groups. Sistem theme akan mengatur bagaimana website ditampilkan.6 2005 Ya PHP Tidak (dg modul tambahan) TinyMice terbatas MySQL Tidak Ya (id. dan sebagainya. style. Modul Images untuk mengijinkan user mengupload gambar sebagai node. layout halaman.0 2003 Ya PHP Tidak (dg modul tambahan) TinyMice terbatas MySQL Tidak Ya (id. jv) 7.y Module. jv) 3MB 12MB . Modul adalah satuan program yang ditulis dalam PHP yang jika diaktifkan akan menambah fungsi tertentu. User tidak pernah menyadari keberadaan konsep ini dalam Drupal.6MB 29MB Wordpress GPL 3. Hook adalah metoda yang digunakan Drupal agar setiap modul dapat menambahkan fungsi tertentu. kecuali mereka adalah developer. Sebagai contoh. su) 3MB 11MB Drupal GPL 7.

BAB III METODE PENELITIAN .

misalnya untuk pembuatan website untuk menggalakkan gerakan go green. dengan beberapa contentyang berisi informasi tentang tips-tips gerakan go green ini. pekerjaan. dan sebagainya. About Us. Di sini diberitahukan bagaimana cara menghubungi pembuat web. dan Contact Us. user dapat memperoleh informasi mengenai upaya pelestarian lingkungan dan gerakan go green. terdapat artikel-artikel yang berhubungan dengan gerakan go green. .1 Home Pada content ini. dapat dibuat sebuah website yang cukup menarik. dapat dilihat pada content ini. atau saran. sehingga dapat memudahkan user jika ingin mencari suatu artikel dari websiteini dengan cara memasukkan keyword dari artikel yang ingin dicari. 4.3 Contact Us Content ini berfungsi untuk membantu user bila ingin menghubungi pembuat web. diantaranya Home.Sehingga bila user ingin mengetahui tentang pembuat web. Beberapa content yang ada pada web ini. 4. bisa langsung menghubungi pembuat web dengan cara yang tertera pada content ini.2 About Us Content ini berisi tentang pembuat website. sehingga bila ada pertanyaan.Pada content ini. 4. kritik. misalnya siapa pembuat web. Dengan menggunakan softwareini.Pada content ini juga terdapat mesin pencari.BAB IV PEMBAHASAN Penggunaan CSS dan Drupal dapat dimanfaatkan dalam dunia nyata.

BAB V KESIMPULAN DAN SARAN .

Diakses tanggal 1 Mei 2011.DAFTAR PUSTAKA http://id.org/wiki/Drupal.pdf. Diakses tanggal 1 Mei 2011.wikipedia. . http://nasrul.nurulfikri.com/CSS.