Seminar Nasional Teknologi Informasi dan Multimedia 2015 STMIK AMIKOM Yogyakarta, 6-8 Februari 2015

ISSN : 2302-3805

1

PEMBUATAN SITUS WEB UNTUK GREENERATION FOUNDATION

Bima Bayu Aji1)

, Fernando Jeremia Fredrik2)

, Muhammad Yusuf Muttaqien3)

Pradahlan Sindu

Mardiko4)

1), 2), 3) Teknik Informatika Jurusan Teknik Informatika dan Komputer Politeknik Negeri Jakarta

4)Teknik Multimedia dan Jaringan Jurusan Teknik Informatika dan Komputer Politeknik Negeri Jakarta

Jl Prof Dr. GA Siwabessy Kampus-UI Depok

Email : bimabayuaji19@gmail.com1), fernandositumeang94@gmail.com2 ), muhammadyusuf250@gmail.com3)

sindu.dahlan@gmail.com4)

Abstrak

Media website merupakan cara untuk melakukan

promosi sesuatu hal baik barang , jasa atau hal

lainnya.Saat ini media website sedang mengalami

peningkatan drastis baik dari sisi tampilan maupun dari

sisi kinerja website atau biasa disebut backend.Selain

sebagai media promosi, dapat juga digunakan dalam melakukan kampanye seperti koin peduli prita atau

menanam seribu pohon dan lain-lain.Salah satu yang

bergerak dalam melakukan kampanye untuk sebuah

penghijauan yaitu Greeneration.Gerakan ini mengajak

pemuda agar bisa peduli terhadap linkungan seperti

melakukan penghematan listrik ,menanam pohon dan

tidak hanya itu .Antara lain yang di lakukan juga

melakukan edukasi terhadap warga bagaimana cara

mengolah sampah organik menjadi kompos.

Hal positif ini akan membantu melestarikan lingkungan sekitar kita dan akan berdampak besar jika kegiatan

yang ada tersebar luas dalam media website.Maka dari

itu dibuat media website untuk Greeneration.Sehingga

semakin banyak orang yang melihat maka semakin

banyak pula yang tergerak dalam aktivitas peduli

lingkungan.Dalam pembuatan website , tampilan sisi

desain menggunakan framework css : Bootstrap flat

desain.Lalu untuk sistem kinerja admin dari website

menggunakan framework php : Yii.Dengan website yang

dibuat untuk greeneration , diharapkan dapat

menjangkau gerakan peduli lingkungan lebih luas .

Kata kunci: Greeneration, website,Bootstrap,flat

design,Framework Yii

1. Pendahuluan

Greeneration merupakan sebuah yayasan yang bergerak

dibidang lingkungan hijau, visi dan misi dari

greeneration sudah jelas menyampaikan ke seluruh

masyarakat untuk hidup hijau. Permasalahan yang

timbul dari greeneration adalah kurangnya sosialisasi

untuk menghimpun masyarakat yang hidup hijau dengan

cara menyuarakan melalui website, untuk itu perubahan

sistem yang dilakukan sejak lama haru digeser dengan yang baru yaitu membuat sebuah web master untuk

greeneration yang simpel dan mampu memberikan

informasi serta jadwal event untuk mengajak masyarakat

hidup berhijau. GF dibentuk sebagai bagian pencapaian

misi besar Perkumpulan Greeneration Indonesia, yakni

membantu Dunia untuk mencapai Green Attitude

(perilaku hijau) dan Green Environment (konservasi

lingkungan).

2. Tinjauan Pustaka

Dalam pembuatan proyek Greeneration ini akan di buat menggunakan website.Website adalah kumpulan dari

halaman - halaman situs, yang terangkum dalam sebuah

domain atau subdomain, yang tempatnya berada di

dalam World Wide Web ( WWW ) di dalam Internet.

Sebuah halaman web biasanya berupa dokumen yang

ditulis dalam format HTML ( Hyper Text Markup

Language ), yang selalu bisa diakses melalui HTTP,

yaitu sebuah protokol yang menyampaikan informasi

dari server website untuk ditampilkan kepada para

pemakai melalui web browser. Dengan adanya teknologi

website membuat pengguna internet dapat memberikan informasi yang ingin di sampaikan.

Teknologi dalam tampilan Website Greeneration yaitu

Framework Bootstrap.Framework Bootstrap adalah

sebuah alat bantu untuk membuat sebuah tampilan

halaman website yang dapat mempercepat pekerjaan

seorang pengembang website ataupun pendesain

halaman website.Jika menggunakan Framework

Bootstrap , website akan mempunyai bentuk tampilan

seperti Twitter, dan hal ini sedang naik daun karena

mempunyai kecanggihan dapat responsif dalam berbagai

alat Smart Phone.

Kemudian selain desain, Website Greeneration

mempunyai sistem untuk mengatur data yang ada pada

website, maka digunakanlah Framework Yii.Framework

Yii adalah kerangka kerja PHP berbasis-komponen

dengan performansi tinggi untuk pengembangan aplikasi

Web berskala-besar.Dengan memakai konsep

MVC(Model-Controller-View) pada Yii, akan

mempermudah pengembang aplikasi website untuk

mengembangkan sistem yang diinginkan.

3. Metode Penelitian

Dalam penilitian yang dilakukan , kami menggunakan

teknik wawancara kepada narasumber yang terkait.Pada

Greeneration Foundation dalam kebutuhannya , adanya

suatu website yang dapat mempublikasi setiap kegiatan

Seminar Nasional Teknologi Informasi dan Multimedia 2015 STMIK AMIKOM Yogyakarta, 6-8 Februari 2015

ISSN : 2302-3805

2

dan program yang sudah aada sebelumnya.Melihat

potensi website masih sangat naik daun maka digunakan

kesempatan ini. Dalam pembuatan website

dibagi menjadi 2 bagian yaitu :

1. Desain Website

2. Sistem Website

Untuk desain website terdapat beberapa kriteria

yang dibutuhkan :

1. Desain Website – Halaman Home

2. Desain Website – Halaman about

3. Desain Website – Project Map

4. Desain Website – Calender

Kemudian untuk sistem website terdapat

beberapa kriteria dibutuhkan :

1. Sistem Website – Log-in

2. Sistem Website – Peta Lokasi Kegiatan

Greeneration

3. Desain Website – Data Artikel Kegiatan

Greeneration

4. Desain Website – Log-out

Dengan penjabaran setiap konten yang

dibutuhkan untuk website maka, dalam

pembuatan Website Greeneration menjadi jelas

dan mempermudah dalam pembuatannya.

Selanjutnya akan dilakukan perancangan dari desain dan sistem pada Website Greeneration

Project.

4. Hasil dan Pembahasan

4.1 Perancangan Sistem

Dalam pembuatan website , baik

tampilan dan sistem yang ada , dilakukan

perancanggan lebih dahulu dalam

pembuatannya.Berikut perancangan sistem

website .

Gambar 1.Gambaran Sistem Lokasi Admin

Gambar 2.Gambaran Sistem Artikel Admin

4.2 Perancangan Database

Lalu untuk masuk pada database, hal ini

berhubungan dengan sistem admin dalam

mengelola data yang di input oleh website.Berikut

tabel-tabel yang ada dan penjelasannya.

Gambar 3.Sistem Basis Data pada Web Greeneration

4.3.Perancangan Sistem

4.3.1 Usecase Diagram

Seminar Nasional Teknologi Informasi dan Multimedia 2015 STMIK AMIKOM Yogyakarta, 6-8 Februari 2015

ISSN : 2302-3805

3

Gambar 3.Usecase Web Greeneration

Penjelasan:

1. Terdapat 2 aktor yang terlibat dalam web

ini yaitu user dan admin

2. User atau bisa dikatakan pengunjung web

mempunyai fungsi umum untuk melihat

informasi yang ada di dalam website

3. Admin mempunyai fungsi khusus untuk

mengendalikan data yang akan di

tampilkan dalam website

4.3.2.Activity Diagram Dalam menjelaskan detail dari sistem admin

yang ada dalam website akan di deskripsikan ke

diagram akitvitas .Dengan begitu dapat di ketahui

alur yang ada dalam sistem.

Gambar 4.Activity Diagram Sistem Lokasi Admin

Gambar 5.Activity Diagram Sistem Artikel Admin

4.3.3.Tampilan Website Setelah dibuat alur sistem pada website ini,

sudah terdapat tampilan baik halaman untuk user dan

admin.

Halaman Admin

Pada tampilan halaman admin, admin dapat mengupdate kegiatan atau schedule greeneration

yang telah berlangsung. Admin dapat mengubah

bahkan menghapus apabila terdapat tulisan yang

salah.

Gambar 6.Halaman Sistem Admin pada Website

Greeneration

Halaman Event

Pada tampilan halaman Calender (Event) ini

merupakan tampilan user yang dapat melihat event

apa saja yang berlangsung dan sesudah.

Seminar Nasional Teknologi Informasi dan Multimedia 2015 STMIK AMIKOM Yogyakarta, 6-8 Februari 2015

ISSN : 2302-3805

4

Gambar 7.Contoh Tampilan Halaman User (Event)

Halaman Project Map Pada tampilan halaman Project Map ini merupakan

tampilan user yang dapat melihat lokasi kantor

greeneration

Gambar 8.Contoh Tampilan Halaman Project Map

Halaman Calender

Pada tampilan halaman Calender ini merupakan tampilan user yang dapat melihat jadwal kegiatan

Greeneration

Gambar 9. Contoh Tampilan Halaman Calender

Halaman Contact

Pada tampilan halaman Contact ini merupakan

tampilan user yang dapat melihat Contact

Greeneration Foundation

Gambar 10.Contoh Tampilan Halaman Contact

5. Kesimpulan

Berikut beberapa kesimpulan yang dapat

Dibuat dalam pengerjaan Website

Greeneration :

1. Penggunaan teknologi website sebagai

media informasi merupakan cara yang

tepat bagi Greeneration foundation

untuk melakukan kampanye peduli

terhadap lingkungan.

2. Pemanfaatan teknologi framework yaitu Bootsrap dan Yii, memberikan

kemudahan dalam pembuatan Website

Greeneration, hal ini memberikan nilai

lebih dalam pengerjaan website yang

tidak memakan waktu lama.

3.Website Greeneration akan terus

berkembang sesuai dengan komitmenn-

ya dalam peduli lingkungan , artinya

semakin banyak kegiatan yang dilakukan

terhadap lingkungan maka semakin

banyak pula konten-konten yang menar- ik untuk ditampilkan ke dalam website.

Seminar Nasional Teknologi Informasi dan Multimedia 2015 STMIK AMIKOM Yogyakarta, 6-8 Februari 2015

ISSN : 2302-3805

5

Daftar Pustaka

[1] nugroho, Bunafit, “Database Relasional Dengan

MySQL,” Andi Publisher, 518, Gudang Penerbit, July

2009.

[2] Praharjo, Budi, “Belajar Otodidak Membuat Database

menggunakan MySQL”, Indonesia: Informatika,

Desember 2011.

[3] Sidik, Ir Betha, “Pemrograman Web dengan HTML

(Edisi Revisi Ketiga),” , Informatika, 2010.

[4] Sugiri., A.Md., S.Pd, "Desain Web

Menggunakan HTML dan CSS", Andi Publisher,

2007.

Biodata Penulis

Bima Bayu Aji, saat ini sedang menempuh

pendidikan Diploma Empat (D4) Politeknik Negeri

Jakarta Jurusan Teknik Informatika dan Komputer

Program Studi Teknik Informatika. Awal masuk

Politeknik Negeri Jakarta tahun 2011 dan sebentar

lagi akan memasuki tingkat akhir dalam proses

pembuatan tugas akhir dan lulus tahun 2015 agar

dapat memperoleh gelar Sarjana Terapan (SST) .

Fernando Jeremia Fredrik, saat ini sedang

menempuh pendidikan Diploma Empat (D4)

Politeknik Negeri Jakarta Jurusan Teknik

Informatika dan Komputer Program Studi Teknik

Informatika. Awal masuk Politeknik Negeri Jakarta

tahun 2011 dan sebentar lagi akan memasuki tingkat

akhir dalam proses pembuatan tugas akhir dan lulus

tahun 2015 agar dapat memperoleh gelar Sarjana

Terapan (SST) .

Muhammad Yusuf Muttaqien, saat ini sedang menempuh pendidikan Diploma Empat (D4)

Politeknik Negeri Jakarta Jurusan Teknik

Informatika dan Komputer Program Studi Teknik

Informatika. Awal masuk Politeknik Negeri Jakarta

tahun 2011 dan sebentar lagi akan memasuki tingkat

akhir dalam proses pembuatan tugas akhir dan lulus

tahun 2015 agar dapat memperoleh gelar Sarjana

Terapan (SST) .

Pradahlan Sindu Mardiko, saat ini sedang

menempuh pendidikan Diploma Empat (D4) Politeknik Negeri Jakarta Jurusan Teknik

Informatika dan Komputer Program Studi Teknik

Multimedia dan jaringan. Awal masuk Politeknik

Negeri Jakarta tahun 2011 dan sebentar lagi akan

memasuki tingkat akhir dalam proses pembuatan

tugas akhir dan lulus tahun 2015 agar dapat

memperoleh gelar Sarjana Terapan (SST).