Pembangunan Website Rumah Pohon Dengan Menggunakan PHP MYSQL

(1)

1 1.1 Latar Belakang Masalah

Teknologi Internet bukan lagi sesuatu yang baru, bahkan sudah merupakan bagian dari kehidupan kita sehari-hari. Hal ini dikarenakan internet merupakan media yang relatif murah, efektif dan efisien seperti halnya mengirim surat ( e-mail), mencari informasi suatu produk / jasa, melihat profil suatu perusahaan dan lain sebagainya. Web Site sebagai suatu bagian dari teknologi Internet yang dapat digunakan untuk menampilkan informasi yang kita inginkan secara online.

Rumah Pohon merupakan salah satu perusahaan yang bergerak dibidang perfilman yang membutuhkan promosi berupa informasi secara cepat. Informasi yang ingin ditampilkan tidak hanya berupa dukungan atau sekedar pengenalan terhadap perusahaan Rumah Pohon tapi sebagai perusahaan yang jasanya dibutuhkan oleh perusahaan lain.

Berdasarkan hasil penelitian di Rumah Pohon, selain kesulitan dalam melakukan promosi, pihak Rumah Pohon juga mengalami kesulitan dalam melakukan pengenalan ke lingkungan masyarakat yang lebih luas. Padahal seringkali Rumah Pohon melakukan kegiatan syuting pembuatan video klip atau iklan di luar pulau jawa tapi baru beberapa perusahaan yang memakai jasa Rumah Pohon ini.

Masalah yang dihadapi oleh pihak Rumah Pohon tidak hanya dalam pengenalan atau promosi ke masyarakat luas, tetapi juga tidak adanya sistem informasi yang dimiliki. Promosi atau pengenalan sistem informasi yang di pakai masih lewat jejaring sosial sedangkan untuk memenuhi target butuh pengenalan yang lebih luas dan akurat.

(2)

menyajikan keseluruhan kegiatan dari Rumah Pohon itu sendiri dan tidak mendukung untuk melakukan promosi, sehingga diperlukan suatu sistem informasi sebagai pembaharuan bentuk dari sistem informasi yang biasa digunakan melalui jejaring sosial yang sudah ada.

Hasil wawancara juga menyatakan bahwa pihak Rumah Pohon menginginkan suatu sistem informasi yang bukan hanya mampu mengatasi dalam hal promosi tetapi juga mampu membuat perusahaan-perusahaan lain ataupun masyarakat tertarik untuk menggunakan jasa dari Rumah Pohon. Oleh sebab itu, maka perlu dibangun sebuah website sistem informasi Rumah Pohon dengan menggunakan PHP dan MySQL.

1.2 Perumusan Masalah

Dari latar belakang ditemukan beberapa masalah yang dirumuskan dalam suatu rumusan masalah yaitu bagaimana cara membuat suatu profil mengenai Rumah Pohon yang berbasiskan web, sehingga dapat memperkenalkan Rumah Pohon kepada seluruh lapisan masyarakat secara cepat dan akurat.

1.3 Maksud dan Tujuan 1.3.1 Maksud

Ada pun maksud dari pembuatan aplikasi berbasis website ini adalah untuk membuat suatu program aplikasi berbasis web tentang profil Rumah Pohon yang bersifat dinamis dan interaktif.

1.3.2 Tujuan

Situs ini dibangun dengan tujuan – tujuan, antara lain : 1) Membuat profil Rumah Pohon dalam bentuk website. 2) Menyediakan sarana informasi.

(3)

1.4 Batasan Masalah

Berikut ini adalah batasan – batasan masalah dalam pembangunan website Rumah Pohon:

1) Memfokuskan perancangan profil berbasis web, dimana isinya hanya memuat informasi Rumah Pohon.

2) Pembuatan profil berbasis web ini menggunakan bahasa pemrograman PHP.

1.5 Metodologi Penelitian

Metodologi penelitian yang digunakan untuk membangun aplikasi sistem informasi Rumah Pohon menggunakan metode analisis deskriptif yaitu suatu metode yang bertujuan untuk mendapatkan gambaran yang jelas tentang hal-hal yang diperlukan, melalui tahapan pengumpulan data sebagai berikut:

a. Studi lapangan / Observasi

Yaitu suatu metode pengumpulan data dengan melakukan peninjauan secara langsung, objek penelitian sebagaimana arahan dan bimbingan dari pihak perusahaan.

b. Wawancara

Yaitu teknik pengumpulan data untuk memperoleh keterangan dengan cara tatap muka melakukan tanya jawab serta diskusi antara penulis dengan staf dan pembimbing lapangan.

c. Studi Kepustakaan

Yaitu metode yang digunakan untuk mengumpulkan data dengan mencari dan mempelajari buku-buku atau literature yang ada hubungannya dengan pembuatan laporan kerja praktek ini.

1.6 Sistematika Penulisan

(4)

BAB I PENDAHULUAN

Semua yang berhubungan dengan dasar – dasar penulisan laporan kerja praktek ada pada bab ini. Bagian – bagian dari bab pertama ini meliputi latar belakang masalah, perumusan masalah, maksud dan tujuan, batasan masalah, metode penelitian, dan sistematika penulisan.

BAB II TUJUAN PUSTAKA

Mengenalkan pihak perusahaan dan sejarah tempat kerja praktek sangatlah penting untuk menambah informasi, baik bagi diri sendiri maupun bagi pembaca. Dalam bab ini juga membahas tentang landasan teori yang berhubungan dengan membangun website ini.

BAB III PEMBAHASAN

Mengenai kegiatan kerja praktek tentang perancangan dan pembuatan website akan dijelaskan di bab yang ketiga ini.

BAB IV KESIMPULAN DAN SARAN

(5)

5

2.1 Profil Tempat Kerja Praktek 2.1.1 Sejarah Perusahaan

Rumah Pohon didirikan pada tahun 2009, oleh Ursula Tumiwa, Bince Mulyono, Sidik Ilmawan dan Dodid Wijanarko dengan masing-masing latar belakang dan pengalaman mereka di dunia audiovisual.

Dengan semangat kebebasan berekspresi dan keberagaman mencoba mengembangkan program-program yang berkarakter kebangsaan nasionalisme dan menjadi latar belakang yang kemudian membentuk sebuah warna-warni dalam perjalanan kreativitas kami dalam menghasilkan sebuah karya agar dapat dinikmati ooleh masyarakat.

Walaupun usia Rumah Pohon masih terbilang muda kami percaya bahwa dengan pemikiran positif, pengalaman dan tim yang solid akan membawa program-program kami diperhitungkan di dunia perfilman saat ini dan di masa mendatang.

2.1.2 Logo Perusahaan

(6)

2.1.3 Moto Perusahaan

Dengan keberagaman kami berkaya, dengan keberagaman kami berkreativitas, dan dengan keberagaman kami bersama.

2.1.4 Profil Perusahaan

Nama Badan Usaha : PT RUMAH POHON

Berdiri Sejak : Tahun 2009

Bidang Usaha : Perfilman Dan Periklanan

Wilayah Syuting : Indonesia

Alamat (Pusat) : Jakarta Selatan

2.1.5 Pengembangan Usaha

Saat ini Rumah Pohon melakukan pembuatan film atau iklan di sekitaran wilayah Indonesia seperti Aceh, Lombok, NTT, Bali, dll. Pengembangan kedepan Rumah Pohon akan memperluas perjalanannya sampai ke luar negeri.

2.1.6 Struktur Organisasi dan Job Description 2.1.6.1 Struktur Organisasi

(7)

2.1.6.2 Job Description

1) Pendiri Rumah Pohon

Pendiri Rumah Pohon mempunyai tugas pokok memimpin,

mengendalikan, dan mengkordinasikan kegiatan dari Rumah Pohon dalam melaksanakan sebagian tugas di bidang pemantauan, pengecekan pegawai, perlengkapan barang, penyebaran informasi pembangunan dan komunikasi dialogis antara pemerintah dan masyarakat, serta pengelolaan pengembangan perusahaan.

2) Administrasi/Personalia

Manajer administrasi/personalia mempunyai tugas pokok melaksanakan, mengelola administrasi kantor, keuangan operasional, kepegawaian, hubungan kemasyarakatan, rumah tangga dan perlengkapan, dan menyusun rencana kegiatan dan anggaran.

3) Keuangan

Keuangan mempunyai tugas pokok melaksanakan penyusunan kebijakan dan pengelolaan keuangan.

Adapun fungsi administrasi adalah, sebagai berikut :

a) Pelaksanaan kegiatan penyusunan kebijakan dan

pengelolaan keuangan.

b) Evaluasi dan pelaporan hasil pelaksanaan kegiatan.

4) Programmer

Programmer mempunyai tugas pokok melaksanakan kegiatan

penyusunan program sebagai broadcast dan sebagai lembaga usaha.

Adapun fungsi programmer adalah sebagai berikut :

a) Pelaksanaan kegiatan pembuatan program sebagai

broadcast dan sebagai lembaga usaha

b) Evaluasi dan pelaporan hasil pelaksanaan kegiatan

5) Music Director

(8)

Adapun fungsi Music Director adalah :

a) Pelaksanaan kegiatan penyusun materi dan jenis musik yang akan digunakan untuk keperluan syuting.

b) Evaluasi dan pelaporan hasil pelaksanaan kegiatan.

6) Script Writter

Script Writter mempunyai tugas menyusun dan membuat skenario untuk film atau iklan yang akan dibuat.

Adapun fungsi dari Script Writter adalah sebagai berikut : a) Kegiatan penyusunan skenario

b) Evaluasi dan pelaporan hasil pelaksanaan kegiatan. 7) Operator

Operator mempunyai tugas pokok melaksanakan kegiatan operasional dan perawatan peralatan alat syuting.

Adapun fungsi operator adalah sebagai berikut : a) Operasional dan perawatan peralatan syuting. b) Evaluasi dan pelaporan hasil pelaksanaan kegiatan

2.2 Landasan Teori

Dalam Landasan Teori akan dibahas tentang teori - teori yang berhubungan dengan sistem informasi yang akan dibuat.

2.2.1 Definisi Website

(9)

Terminologi website adalah kumpulan dari halaman-halaman situs, yang biasanya terangkum dalam sebuah domain atau sub domain, yang tempatnya berada didalam World Wide Web (WWW) di Internet. Sebuah halaman web

adalah dokumen yang ditulis dalam format HTML (Hyper Text Markup

Language), yang hampir selalu bisa diakses melalui HTTP, yaitu protokol yang menyampaikan informasi dari server website untuk ditampilkan kepada para pemakai melalui web browser. Semua publikasi dari website - website tersebut dapat membentuk sebuah jaringan informasi yang sangat besar.

Halaman-halaman dari website akan bisa diakses melalui sebuah URL yang biasa disebut Homepage. URL ini mengatur halaman - halaman situs untuk menjadi sebuah hirarki, meskipun, hyperlink - hyperlink yang ada di halaman tersebut mengatur para pembaca dan memberitahu mereka sususan keseluruhan dan bagaimana arus informasi ini berjalan.

Beberapa website membutuhkan sub skripsi (data masukan) agar para user bisa mengakses sebagian atau keseluruhan isi website tersebut. Contohnya, ada beberapa situs - situs bisnis, situs - situs e-mail gratisan, yang membutuhkan subkripsi agar kita bisa mengakses situs tersebut.

Website ditulis, atau secara dinamik di konversi menjadi HTML dan diakses melalui sebuah program software yang biasa disebut dengan web browser, yang dikenal juga dengan HTTP Client. Halaman web dapat dilihat atau diakses melalui jaringan komputer dan internet, perangkatnya bisa saja berupa Personal Computer, Laptop Computer, PDA ataupun Cellphone.

2.2.2 Pengertian Sistem

Dalam perancangan suatu sistem informasi diarahkan kepada pemanfaatan teknologi secara maksimal yang terdiri dari beberapa elemen atau komponen yang membentuk jaringan kerja dan mempunyai tujuan yang ingin dicapai. Pendekatan yang menekankan pada prosedur, mendefinisikan sebuah sistem sebagai berikut : “Suatu sistem adalah suatu jaringan kerja dari prosedur-prosedur yang saling

berhubungan, berkumpul bersama-sama untuk melakukan suatu kegiatan atau

(10)

Dari pengertian diatas dapat diambil suatu kesimpulan bahwa suatu sistem merupakan elemen yang saling berkaitan dan saling mempengaruhi dalam melakukan kegiatan bersama untuk mencapai suatu tujuan tertentu.

2.2.3 Konsep Dasar Sistem

Perancangan Suatu program aplikasi terdiri dari satu kesatuan sistem.Terdapat dua kelompok pendekatan di dalam mendefinisikan sistem, yaitu yang menekankan pada prosedur dan yang menekankan pada komponen. Pendekatan sistem yang lebih menekankan pada prosedur mendefinisikan pada prosedur mendefinisikan sistem sebagai berikut:

“Sistem adalah suatu jaringan kerja dari prosedur-prosedur yang

salingberhubungan, berkumpul bersama-sama untuk melakukan suatu kegiatan

atau menyelesaikan suatu sasaran tertentu”

Pengertian dari prosedur itu sendiri menurut Richard F. Neuschel adalah suatu urutan-urutan operasi tulis menulis biasanya melibatkan beberapa orang di dalam satu atau lebih departemen yang diterapkan untuk menjamin penanganan yang seragam dari transaksi-transaksi yang terjadi.

Lebih lanjut Ferry Fitz Gerald, Andra F. Fitz Gerald dan Warren D. Stalling, Jr mendefinisikan prosedur sebagai berikut:

“Prosedur adalah urutan-urutan yang tepat dari tahapan-tahapan

instruksi yang menerapkan apa (what) yang harus dikerjakan, siapa (who) yang

mengerjakan, kapan (when) dikerjakan dan bagaimana (how) mengerjakan”

Pendekatan sistem yang lebih menekankan pada elemen atau komponen mendefinisikan sistem sebagai berikut :

“Sistem adalah kumpulan dari elemen-elemen yang berinteraksi untuk

mencapai suatu tujuan tertentu” .

2.2.4 Karakteristik Sistem

Suatu sistem mempunyai karakteristik atau sifat-sifat tertentu yaitu: 1. Komponen sistem (Components)

(11)

Komponen sistem dapat berupa sub sistem yang merupakan bagian dari sistem yang lebih besar.

2. Batasan Sistem (Boundary)

Merupakan suatu daerah yang membatasi suatu sistem dengan sistem yang lain / lingkungan luar, dan dengan batasan ini kita bisa mengetahui ruang lingkup suatu sistem.

3. Lingkungan Luar Sistem (Environtment )

Apapun yang berada diluar batas sistem yang mempengaruhi operasi suatu sistem.

4. Penghubung Sistem (Interface)

Merupakan media penghubung antara satu sub sistem dengan sistem lainnya. Dengan penghubung ini akan mengalir data–data antar sub sistem dimana keluaran (output) dari sistem akan menjadi masukan (input) untuk sub sistem yang lain, sehingga antara sistem dan sub sistem akan saling berinteraksi membentuk satu kesatuan.

5. Masukan Sistem (Input)

Merupakan energi yang dimasukkan kedalam sistem, dimana masukan ini dapat berupa masukan perawatan ( maintenance input) dan masukan sinyal (signal input).

6. Keluaran Sistem (Output)

Merupakan hasil dari energi yang diolah dan diidentifikasikan menjadi keluaran yang berguna dan mampu menjadi masukan baru / informasi yang dibutuhkan.

7. Pengolahan Sistem (Process)

Setiap sistem pasti mempunyai pengolahan data masukan untuk diolah menjadi sebuah informasi.

8. Sasaran Sistem (Object)

(12)

2.2.5 Klasifikasi Sistem

Sistem memiliki sasaran yang berbeda untuk setiap kasus yang terjadi, oleh karena itu sistem dapat diklasifikasikan kedalam beberapa sudut pandang, yaitu:

1. Sistem Abstrak adalah sistem yang berupa pemikiran atau ide-ide yang tidak tampak secara fisik, misalnya: sistem teologia, yaitu sistem yang berupa pemikiran-pemikiran hubungan antara manusia dengan tuhan.

2. Sistem Fisik merupakan sistem yang ada secara fisik, misalnya sistem komputer, sistem akuntansi dan lain sebagainya.

3. Sistem Alamiah (natural sistem) adalah sistem yang terjadi melalui proses alam, misalnya: perputaran bumi.

4. Sistem Buatan Manusia (human made sistem) adalah sistem yang dirancang manusia. Sistem yang melibatkan interaksi antara manusia dengan mesin disebut human-machine sistem/man-machine system, misalnya: sistem informasi.

5. Sistem Tertentu (deterministic sistem) adalah sistem yang beroperasi dengan tingkah laku yang sudah dapat diprediksi, misal: sistem computer.

6. Sistem Tak Tentu adalah sistem yang kondisinya masa depannya tidak dapat diprediksi karena mengandung unsur probabilitas.

7. Sistem Tertutup (closed sistem) merupakan sistem yang tidak berhubungan dengan dan tidak berpengaruh dengan lingkungan luarnya.

8. Sistem terbuka adalah sistem yang berhubungan dan terpengaruh dengan lingkungan luarnya.

2.2.6 Definisi Sistem Informasi

Informasi merupakan hal yang sangat penting bagi manajemen dalam mengambil suatu keputusan. Suatu informasi dapat diperoleh dari system informasi atau juga disebut dengan processing system atau information processing system atau information-generating system. Sistem informasi didefinisikan oleh Robert A. Leitchdan K. Roscoe Davis adalah “suatu system didalam sebuah organisasi yang mempertemukan kebutuhan pengolahan transaksi harian,

(13)

organisasi dan menyediakan pihak luar tertentu dengan laporan-laporan yang

diperlukan”.

2.2.7 Konsep Dasar Sistem Informasi

Sebuah sistem informasi merupakan kumpulan dari perangkat keras dan perangkat lunak komputer serta perangkat manusia yang akan mengolah data menggunakan perangkat keras dan perangkat lunak tersebut. Informasi merupakan hal yang sangat penting dalam pengambilan keputusan, permasalahannya adalah dimana informasi tersebut didapat. Informasi dapat diperoleh dari sistem informasi. Robert A Leitch dan K. Roscoe Davis mendefinisikan sistem informasi sebagai berikut:

“Sistem informasi adalah suatu sistem di dalam suatu organisasi yang

mempertemukan kebutuhan pengolahan transaksi harian, mendukung operasi,

bersifat manajerial dan kegiatan strategi dari suatu organisasi dan menyediakan

pihak luar tertentu dengan laporan-laporan yang diperlukan.”

2.2.8 Perancangan Sistem

Perancangan sistem dapat berarti membuat sistem yang baru untuk menggantikan sistem yang lama secara keseluruhan atau memperbaiki sistem yang sudah ada. Dalam merancang sebuah sistem biasanya menggunakan alat bantu berupa :

2.2.8.1 Entity Relationship Diagram (ERD)

ERD merupakan notasi grafis dalam pemodelan data konseptual yang mendeskripsikan hubungan antara penyimpanan. ERD digunangan untuk memodelkan struktur data dan hubungan antar data, karena hal ini relative kompleks. Dengan ERD kita dapat menguji model dengan mengabaikan proses yang dilakukan.

(14)

1. Entity

Entity adalah suatu objek yang dapat di identifikasi dalam lingkaran pemakai, sesuatu yang penting bagi pemakai dalam konteks sistem yang akan dibuat.

Gambar 2.3 Entitas

2. Attribut

Entity mempunyai elemen yang disebut atribut dan berfungsi mendeskripsikan karakter entity.

Gambar 2.4 Attribut

3. Relasi

Relasi merupakan gugusan entitas yang berhubungan antar entitas atau beberapa entitas.

Gambar 2.5 Relasi

2.2.8.2Diagram Konteks (Context Diagram)

Diagram konteks digambarkan dengan sebuah lingkaran yang menjelaskan tentang batasan sistem yang saling berhubungan dengan kesatuan luar (external

entity) yang akan memberikan masukan dan menerima keluaran dari sistem

tersebut.

Definisi diagram konteks adalah sebagai berikut :

“Diagram konteks adalah diagram yang tidak detail dari sebuah sistem

informasi yang menggambarkan aliran-aliran data masuk dan keluar dari sistem.

(15)

batasan sistem yang saling berhubungan dengan kesatuan luar (external entity )

yang akan memberikan masukan dan menerima keluaran dari sistem tersebut

yang dihubungkan dengan aliran yang menghubungkan sebuah sistem dengan

lingkaran sistem”. (Sidharta, Sistem Informasi Bisnis,1995).

2.2.8.3Diagram Aliran Data (DFD-Data Flow Diagram)

DAD atau DFD adalah suatu diagram yang menggambarkan arus data sistem dan cara kerja yang dilakukan oleh sistem. DFD ini menjelaskan mengenai aliran data, informasi proses, basis data dan sumber atau tujuan data yang dilakukan sistem. Keuntungan dari diagram arus data adalah memungkinkan pengembangan sistem dari level yang paling tinggi dan memecah menjadi level yang lebih rendah.

Beberapa simbol yang digunakan DFD adalah sebagai berikut : a. Kesatuan Luar (External Entity)

Kesatuan luar (external entity) adalah kesatuan (entity) di lingkungan luar sistem yang memberikan masukan atau menerima keluaran dari sistem. Kesatuan luar bisa dapat berupa orang atau instansi, bagian dari organisasi sebagai pemberi input atau penerima output.Bentuk dari kesatuan luar sebagai berikut :

Gambar 2.6 Kesatuan luar

b. Proses (Process)

Proses adalah kegiatan / kerja yang dilakukan oleh manusia, mesin atau komputer yang akan mengolah masukan menjadi keluaran dalam bentuk arus data.Bentuk dari Proses sebagai berikut :

(16)

c. Arus Data (Data Flow)

Arus data ini menunjukkan arus data yang dapat berupa masukan untuk sistem atau hasil dari proses sistem. Arus data dapat berupa formulir, laporan cetak dan surat. Bentuk dari Arus Data sebagai berikut :

Gambar 2.8 Arus Data

d. Simpanan Data (Data Store)

Simpanan data (data store) merupakan simpanan dari data yang dapat berupa file atau database di sistem komputer, arsip atau catatan manual, kotak tempat data, tabel acuan manual dan suatu agenda atau buku. Bentuk dari Simpanan data sebagai berikut :

Gambar 2.9 Simpanan Data

2.2.9 Analisis Sistem

Analisis sistem (sistem analis) merupakan tahapan yang sangat kritis dan penting karena kesalahan dalam tahap ini dapat mempengaruhi tahapan selanjutnya, Analisa sistem didefinisikan sebagai berikut :

“Penguraian dari suatu sistem informasi yang utuh kedalam bagian-bagian

komponennya dengan maksud untuk mengidentifikasikan dan mengevaluasi

permasalahan-permasalahan, kesempatan-kesempatan, hambatan-hambatan

yang terjadi dan kebutuhan-kebutuhan yang diharapkan sehingga dapat

diusulkan perbaikan-perbaikannya”.

Dalam tahap analisis terdapat langkah-langkah sebagai berikut: a. Identify yaitu mengidentifikasi masalah.

b. Understand yaitu memahami kerja dari sistem yang ada. c. Analyze yaitu menganalisis sistem.

(17)

2.3 Software Pendukung

Dalam membangun sistem informasi diperlukan software pendukung yang menunjang dalam proses pembuatannya.

Software pendukung yang digunakan dalam pembuatan sistem informasi

ini adalah Macromedia Dreamweaver sebagai software editor HTML dan AppServ untuk PHP serta MySQL sebagai DBMS.

2.3.1 HTML

HTML (HyperText Markup Language) adalah suatu format data yang digunakan untuk membuat dokumen hypertext yang dapat dibaca dari satu platform ke platform lainnya tanpa melakukan suatu perubahan apapun. Dokumen HTML disebut markup language karena mengandung tanda – tanda tertentu yang digunakan untuk menentukan tampilan teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen, contoh struktur bahasa HTML :

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

………Syntax program

</body>

(18)

2.3.2 Macromedia Dreamweaver 8

Macromedia Dreamweaver adalah sebuah HTML editor profesional untuk mendesain secara visual dan mengelola situs web maupun halaman web. Bilamana kita menyukai untuk berurusan dengan kode-kode HTML secara manual atau lebih menyukai bekerja dengan lingkungan secara visual dalam melakukan editing, Dreamweaver membuatnya menjadi lebih mudah dengan menyediakan tool-tool yang sangat berguna dalam peningkatan kemampuan dan pengalaman kita dalam mendesain web.

Dreamweaver dalam hal ini digunakan untuk web desain. Dreamweaver mengikutsertakan banyak tool untuk kode-kode dalam halaman web beserta fasilitas-fasilitasnya, antara lain : Referensi HTML, CSS dan Javascript, Javascript debugger, dan editor kode ( tampilan kode dan Code inspector) yang mengizinkan kita mengedit kode Javascript, XML, dan dokumen teks lain secara langsung dalam Dreamweaver. Teknologi Dreamweaver Roundtrip HTML mampu mengimpor dokumen HTML tanpa perlu memformat ulang kode tersebut dan kita dapat menggunakan Dreamweaver pula untuk membersihkan dan memformat ulang HTML bila kita menginginkannya.

Selain itu Dreamweaver juga dilengkapi kemampuan manajemen situs, yang memudahkan kita mengelola keseluruhan elemen yang ada dalam situs. Kita juga dapat melakukan evaluasi situs dengan melakukan pengecekan broken link, kompatibilitas browser, maupun perkiraan waktu download halaman web.

(19)

Bagian-bagian workspace tersebut sebagai berikut :

a. Insert bar berisi tombol-tombol untuk memasukkan berbagai type

“object”, seperti image, table, dan layer, ke dalam dokumen

Dreamweaver. Setiap object merupakan bagian dari code HTML yang memungkinkan Anda untuk melakukan berbagai macam setting atribut object yang Anda masukkan tersebut. Sebagai contoh, Anda bisa memasukkan table HTML dengan cara click tombol Table yang ada di Inser bar. Jika Anda suka cara lain, Anda pun bisa memasukkan object HTML dengan melalui menu Insert yang ada diatas Insert bar.

b. Document toolbar berisi tombol-tombol dan menu pop-up yang

menyediakan view Document window, berbagai view untuk option, dan beberapa perintah operasional seperti preview kedalam browser document window untuk menampilkan document sekarang ini yang sedang Anda buat atau sedang Anda kembangkan (editing). Panel groups merupakan sekumpulan panel group yang secara bersama-sama dalam satu heading. Untuk melihat lebih detail lagi panel ini (expand), lakukan click tanda panah expander yang ada di kiri group nama panel tersebut. Untuk mejadikan undock panel group ini, lakukan drag tanda gripper yang ada di tepi kiri dari judul group bar ini.

c. Tag selector memperlihatkan ke Anda relevansi tag HTML sesuai yang Anda pilih (selected) di Document window. Anda dapat memilih bagian-bagian document lain dengan cara cukup melakukan click di nama tag dalam Tag selector.

(20)

memilih dari menu ‘Window’ di screen Dreamweaver bagian atas dan kemudian pilih uncheck submenu Property yang ada di menu tersebut. e. Saat ada bagian text yang terpilih (selected) di Document window, maka

secara otomatis panel akan menampilkan fasilitas untuk setting yang dapat digunakan oleh text terpilih tesebut, dimana berisi fasilitas : font, text size, color, atribut text seperti bold dan italic, text alignment, dan lain-lain. Selain itu panel juga bisa menampilkan informasi asosiasi hyperlink dalam bagian text yang terpilih tersebut.

f. Property inspector untuk image ditunjukkan seperti gambar dibawah ini. Dengan toolbar ini, Anda bisa melakukan setting lebar dan tinggi (width – height) dari suatu image, merubah asosiasi lokasi hyperlink saat image tersebut di-click, dan alignment image terhadap keseluruhan window page saat ditampilkan di browser.

g. Files panel yang terlihat di sebelah kanan ini, memberikan fasilitas bagi Anda agar mampu memanage file-file hasil develop web Anda beserta informasi folder-foldernya, dimana bisa merupakan bagian dalam satu PC di Dreamweaver (localdisk) ataupun merupakan remote server. Files panel juga menyediakan kemampuan untuk mengakses semua file di localdisk, seperti layaknya Window Explorer.

(21)

2.3.3 MySQL

My SQL adalah relational database management sistem yang didistribusikan secara gratis disebuah lisensi GPL. Dimana setiap orang bebas untuk menggunakan MySQL, namun tidak boleh dijadikan produk turunan yang bersifat komersial. My SQL sbenarnya merupakan turunan salah satu konsep utama dalam database sejak lama. SQL (Structured Query Language). SQL adalah sebuah konsep pengoperasian database, terutama untuk pemilihan seleksi dan memasukan data yang memungkinkan pengoperasian data dikerjakan dengan mudah secara otomatis.

Keandalan suatu sistem database (BBMS) dapat diketahui dengan cara optimasinya dalam melakukan proses perintah-perintah SQL yang dibuat oleh user maupun program-program aplikasinya sebagai database server, MySQL dapat dikatakan lebih unggul dibandingkan dengan database server lainnya dalam query data. My SQL adalah satu dari sekian banyak dalam database, My SQL merupakan solusi yang tepat dalam aplikasi database sehingga database server MySQL yang memiki konsep database moderen, My SQL banyak memiliki keistimewaan antara lain portabilitas, open source, multiuser, performance training, client and tool dan masih banyak lagi.

Menurut ANSI (American National Standars Institut), bahasa ini merupakan standar untuk relational database management sistem (RDBMS). Pertanyataan-pernyataan SQL digunakan untuk melakukan beberapa tugas seperti: update data pada database, atau menampilkan data dari database. Beberapa software RDBMS dan dapat menggunakan SQL seperti Oracle, Sybase, Microsoft SQL server, Microsoft Access, dan sebagainya. Setiap software database mempunyai bahasa perintah atau sintak yang berbeda, namun pada prinsipnya mempunyai arti dan fungsi yang sama.

Perintah-perintah tersebut antara lain:

1. Create, yaitu digunakan untuk membuat tabel baru.

2. Select, yaitu digunakan untuk menampilkan data sesuai kriteria yang kita tentukan.

(22)

5. Delete, yaitu digunakan untuk menghapus baris atau record data dalam tabel. 6. Drop, yaitu digunakan untuk menghapus tabel.

Contoh penggunaan MySQL :

2.3.4 PHP

PHP adalah bahasa scripting server – side, artinya bahasa yang digunakan pada server dengan tanpa perlu melakukan kompilasi tetapi cukup menuliskan tulisan dalam bentuk ASCII-nya saja. PHP sangat mirip dengan bahasa C, juga mempunyai karakteristik yang mirip dengan Perl. PHP dapat digunakan untuk mengolah data dari berbagai macam database, contoh struktur bahasa PHP adalah sebagai berikut :

<?php

echo ” Syntax Program”;

?>

CREATE TABLE user (

users varchar(20) NOT NULL,

password varchar(32) NOT NULL,

PRIMARY KEY (users)

(23)

2.3.5 WAMPServer

WAMP adalah paket program yang dibuat secara independent yang dapat diinstall pada komputer yang menggunakan sistem operasi Windows. Program ini memungkinkan untuk melayani halaman web dinamis suatu jaringan komputer, seperti internet atau jaringan pribadi.

WAMP adalah suatu singkatan yang terbentuk dari sistem operasi

(24)

24

3.1 Sistem Kerja Praktek 3.1.1 Jadwal Kerja Praktek

Kerja praktek dilaksanakan sesuai dengan kebutuhan serta kesempatan yang diberikan pihak perusahaan, dan pelaksanaan kerja praktek di Rumah Pohon dilaksanakan sejak tanggal 2 Agustus 2011 sampai dengan selesai. Adapun waktu mulai kerja praktek disesuaikan dengan ketentuan yang diberikan perusahaan tempat kerja praktek, yaitu terhitung dari hari Senin s/d hari Jum’at, pukul 15.00 WIB sampai dengan jam 21.00 WIB.

3.1.2 Tinjauan Umum Perusahaan

Peserta kerja praktek melakukan kegiatan pengerjaan website di kantor Rumah Pohon yaitu dalam merancang ”PEMBANGUNAN WEBSITE RUMAH

POHON DENGAN MENGGUNAKAN PHP DAN MYSQL”.

Adapun tahapan - tahapannya adalah, sebagai berikut :

1) Observasi

Melakukan penelusuran pustaka dan sumber lainnya mengenai segala sesuatu yang dibutuhkan dalam merancang suatu website. Dalam mengerjakan laporan kerja praktek ini banyak sekali referensi yang diperoleh. Untuk memperoleh informasi yang berhubungan dengan materi laporan kerja praktek melalui buku - buku, bahan kuliah dan bacaan lainnya yang memiliki relevansi dengan analisis dan pembuatan website.

2) Analisa Masalah

(25)

3.2 Analisis Sistem

Analisis sistem merupakan tahap yang kritis dan sangat penting, karena apabila terjadi kesalahan dalam tahap ini, akan mengakibatkan kesalahan pada tahap selanjutnya.

3.2.1 Analisa Website

Semua perusahaan memiliki media untuk menyajikan informasi - informasi yang dibutuhkan oleh masyarakat, begitu pula halnya dengan Rumah Pohon. Sebagai salah satu perusahaan yang bergerak di bidang periklanan dan perfilman tentu saja memiliki informasi - informasi yang perlu disajikan untuk kepentingan perusahaan itu sendiri.

Namun, sayangnya Rumah Pohon belum memiliki media informasi yang dapat di sajikan di dunia maya untuk di perkenalkan kepada masyarakat luas.

Oleh karena itu penulis di minta oleh perusahaan untuk membangun website Rumah Pohon. Website yang dibuat oleh penulis hanya sekedar untuk memberikan sebuah informasi yang berada di dalam Rumah pohon. Informasi tersebut ditujukan bukan hanya untuk perusahaan-perusahaan lain yang membutuhkan jasa dari Rumah Pohon, tetapi untuk semua kalangan yang ada di Indonesia. Informasi tersebut hanya dapat dilihat di dunia maya, karena informasi tersebut berupa sebuah website.

Informasi ini akan di publikasikan setelah mendapat persetujuan dari pihak Rumah Pohon. Aplikasi yang dimiliki Rumah Pohon akan bekerja secara manual, karena website tersebut akan selalu diawasi oleh seorang admin. Seorang admin akan merawat, mengembangkan, dan menjalankan website sistem informasi milik Rumah Pohon ini.

3.2.2 Analisis Kebutuhan Non Fungsional

(26)

3.2.2.1 Analisis Perangkat Keras

Kebutuhan perangkat keras yang digunakan pada perancangan dan pembuatan website Rumah Pohon ini antara lain :

a) Processor Minimal (1,8 GHz)

b) Memory Minimal 128

c) VGA Onboard

d) HDD minimal 20 GB

e) Mouse dan Keyboard

3.2.2.2 Analisis Perangkat Lunak

Kebutuhan perangkat lunak yang digunakan untuk membuat website Rumah Pohon ini antara lain :

a) Sistem Operasi Windows

b) Webserver WAMPServer 2.0

c) Apache Webserver 2.2.11

d) MySQL database 5.0.5

e) phpMyAdmin Database Manager 5.3.0

f) Macromedia Dreamweaver 8

g) Adobe Photoshop cs

Sedangkan kebutuhan minimum perangkat lunak untuk mengakses website baik sebagai admin atau pengunjung adalah Google Chrome, Mozilla Firefox, Opera atau web browser lain.

3.2.2.3 Analisis Pengguna / User

(27)

Tipe Pengguna Hak Akses Keterampilan

Admin Full, dapat melakukan

semua operasi di dalam Back End Site

Menguasai komputer, pemahaman yang cukup untuk mengelola data dalam web serta memiliki pengetahuan tentang internet.

Pengunjung Mengakses Front End

Site saja

Mampu mengoprasikan komputer dan dapat melakukan browsing di internet.

3.2.3 Analisis Kebutuhan Fungsional 3.2.3.1 Prosedur yang sedang berjalan

Prosedur yang sedang berjalan untuk mempromosikan Rumah Pohon adalah :

a. Melalui berbagai macam media.

b. Melakukan kegiatan syuting di wilayah Indonesia.

Prosedur yang sedang berjalan untuk penyampaian informasi di Rumah Pohon yaitu masih dari mulut ke mulut.

3.2.3.2 Permasalahan yang terjadi

Permasalahan yang terjadi di proses promosi yang ada sekarang adalah :

1. Perlunya media lain sebagai promosi agar lebih efektif.

2. Dengan teknologi internet, promosi bisa dilakukan ke masyarakat yang lebih luas.

(28)

3.2.4 SKPL (Spesifikasi Kebutuhan Perangkat Lunak)

Berdasarkan analisis masalah yang dibutuhkan oleh perangkat lunak, maka perangkat lunak harus memenuhi kriteria - kriteria berikut :

1. Website yang akan dibangun harus menampilkan sejarah perusahaan.

2. Website yang akan dibangun harus menampilkan gallery perusahaan, dimana di dalam gallery terdapat beberapa album dan di dalam album terdapat banyak gambar.

3. Website yang akan dibangun harus menampilkan video yang memiliki kategori.

3.2.5 Analisis Data

Setiap sistem informasi membutuhkan data untuk menghasilkan informasi yang dibutuhkan. Data yang ada saling berhubungan atau berelasi antara satu dengan yang lain untuk menyajikan informasi yang benar. Apabila data yang ada tidak berelasi, maka tidak akan terbentuk suatu pengolahan data menjadi informasi. Untuk memodelkan relasi data dalam model analisis perangkat lunak terstruktur digunakan sebuah alat bantu berupa sebuah diagram yang disebut diagram E-R (Entity-Relationship). Adapun diagram E-R dari Rumah Pohon adalah sebagai berikut:

Album

(29)

3.2.5.1 Diagram Konteks

Diagram konteks merupakan suatu model yang menjelaskan secara global bagaimana data digunakan dan ditransformasikan untuk proses atau dengan kata lain merupakan gambaran umum mengenai sistem yang menggambarkan aliran data kedalam dan keluar sistem. Adapun diagram konteks dari sistem yang akan dibangun adalah sebagai berikut:

Admin Website

Gambar 3.2 Diagram konteks Rumah Pohon

3.2.5.2 Data Flow Diagram Level 1

Data Flow Diagram (DFD) adalah representasi dari suatu sistem yang menggambarkan bagian-bagian dari sistem tersebut beserta seluruh keterlibatan diantara bagian yang ada. Arus data pada Data Flow Diagram (DFD) dapat berupa masukan untuk sistem ataupun keluaran dari sistem, sehingga akan menghasilkan sebuah keluaran yang akan disampaikan kepada pengguna sistem.

(30)

Admin

3.2.5.3 Data Flow Diagram Level 2 Proses 1

Diagram data pada proses login adalah sebagai berikut:

Verifikasi

(31)

3.2.5.4 Data Flow Diagram Level 2 Proses 2

Diagram data pada proses pengolahan data kategori adalah sebagai berikut:

Gambar 3.5 DFD Level 2 proses 2

3.2.5.5 Data Flow Diagram Level 2 Prosses 3

Diagram data pada proses pengolahan data video adalah sebagai berikut:

Hapus Video

(32)

Hapus Album

Diagram data pada proses pengolahan data album adalah sebagai berikut:

Hapus Galeri

(33)

3.2.5.8 Spesifikasi Proses

Untuk menjelaskan lebih lanjut tentang proses-proses yang ada di dalam diagram alir data dibuatlah spesifikasi proses. Adapun spesifikasi proses untuk diagram alir data sistem informasi Rumah Pohon adalah sebagai berikut:

Tabel 3.1 Spesifikasi proses pada DFD sistem informasi Rumah Pohon

No. Proses Keterangan

1 No. Proses 1

Nama Proses Login

Source (sumber) Tabel Admin

Input Data Login Admin

Output 1. Info login invalid

2. Info login sebagai admin Destination (tujuan) Tabel Admin

Logika Proses 1. pengguna memasukan data login sesuai hak akses.

2. sistem memanggil data penguna sesuai data login.

3. jika nama pengguna dan kata kunci ada, maka antar muka terbuka sesuai hak akses. 4. jika nama pengguna dan kata kunci tidak ada

atau salah, maka antar muka tetap seperti awal dan data login dihapus.

2 No. Proses 1.1

Nama Proses Verifikasi Username

Input 1. Data Admin

(34)

Output 1. Data Admin 2. Info Login Destination (tujuan) Admin

Logika Proses 1. Admin memasukkan username.

2. database akan merespon sesuai data masukan.

3 No. Proses 1.2

Nama Proses Verifikasi Password

Input 1. Data Admin

2. Info Admin

Output 1. Info login Invalid

2. Info login sebagai admin Destination (tujuan) Admin

Logika Proses 1. Admin memasukkan password.

2. database akan merespon sesuai data masukan. 3. jika username dan password sudah benar atau

valid, maka pengguna akan login sebagai admin.

4 No. Proses 2

Nama Proses Pengolahan Data Kategori

Source (sumber) Tabel Kategori

Input 1. Data Kategori

2. Info kategori

Output 1. Data kategori

(35)

Destination (tujuan) 1. Admin 2. Pengunjung

Logika Proses 1. Admin masuk ke pengolahan data kategori. 2. Data kategori yang ingin diolah akan masuk ke

tabel kategori.

3. Apabila data kategori selesai diolah, maka info pengolahan data kategori langsung menuju ke admin dan pengunjung.

5 No. Proses 2.1

Nama Proses Tambah Data Kategori

Source (sumber) Tabel Kategori

Input Data Kategori

Output Info Kategori

Destination (tujuan) Pengunjung

Logika Proses 1. admin menambah data kategori ke dalam tabel kategori.

2. data yang di tambahkan akan masuk ke database.

3. database akan merespon sesuai data masukan. 4. jika data yang di tambahkan benar, maka data

masukan akan mucul di tabel kategori.

5. dan jika data yang di tambahkan salah, maka akan muncul pesan error.

6 No. Proses 2.2

Nama Proses Edit Data Kategori

(36)

Input Data Kategori

Output Info Kategori

Logika Proses 1. admin mengedit data kategori di dalam tabel kategori.

2. data yang di edit akan masuk ke database. 3. database akan merespon sesuai data masukan. 4. jika data berhasil di edit, maka data yang di

edit atau diubah akan mucul di tabel kategori. 5. dan jika data tidak berhasil di edit, maka akan

muncul pesan error.

No Proses Keterangan

7 No. Proses 3

Nama Proses Pengolahan Data Video

Source (sumber) Tabel Video

Input 1. Data video

2. Data kategori 3. Info video

Output 1. Data video

2. Info video Destination (tujuan) 1. Admin

2. Pengunjung

Logika Proses 1. Admin masuk ke pengolahan data video. 2. Di dalam pengolahan data video terdapat data

kategori

(37)

4. Apabila data video selesai diolah, maka info pengolahan data video langsung menuju ke admin dan pengunjung

8 No. Proses 3.1

Nama Proses Tambah Data Video

Input Data Video

Output Info Video

Logika Proses 1. admin menambah data video ke dalam tabel video.

2. di dalam tambah video, ada menu pilih kategori.

3. kategori yang di pilih akan masuk ke database data tabel kategori.

4. data yang di tambahkan akan masuk ke database tabel data video.

5. jika data yang di tambahkan benar, maka data masukan akan mucul di tabel video.

9 No. Proses 3.2

Nama Proses Edit Data Video

Input Data Video

(38)

Logika Proses 1. admin mengedit data video di dalam tabel video.

edit atau diubah akan mucul di tabel kategori. 5. dan jika data tidak berhasil di edit, maka akan

muncul pesan error.

10 No. Proses 3.3

Nama Proses Hapus Data Video

Input -

Output Data Video

Logika Proses 1. Admin masuk ke tabel video.

2. Admin mengklik menu hapus pada data yang akan dihapus.

3. Data akan terhapus di database dan di tabel video.

11 No. Proses 3.4

Nama Proses View Video

Input Data Video

(39)

12 No. Proses 4

Nama Proses Pengolahan Data Album

Source (sumber) Tabel Album

Input 1. Data album

2. Data galeri 3. Info album

Output 1. Data album

2. Info album Destination (tujuan) 1. Admin

2. Pengunjung

Logika Proses 1. Admin masuk ke pengolahan data album. 2. Di dalam pengolahan data album terdapat data

galeri

3. Data album yang ingin diolah akan masuk ke tabel album.

4. Apabila data video selesai diolah, maka info pengolahan data video langsung menuju ke admin dan pengunjung

13 No. Proses 4.1

Nama Proses Tambah Data Album

Logika Proses 1. Pengunjung masuk ke menu video

(40)

Input Data Album

Output Info Album

Logika Proses 1. admin menambah data album ke dalam tabel album.

3. database akan merespon sesuai data masukan. 4. jika data yang di tambahkan benar, maka data

masukan akan mucul di tabel album.

14 No. Proses 4.2

Nama Proses Edit Data Album

Input Data Album

Output Info Album

Logika Proses 1. admin mengedit data album di dalam tabel album.

(41)

muncul pesan error.

15 No. Proses 4.3

Nama Proses Hapus Data Album

Input -

Output Data Album

Logika Proses 1. Admin masuk ke tabel album.

2. Admin mengklik menu hapus pada data yang akan dihapus.

3. data akan terhapus di database dan di tabel album.

16 No. Proses 4.4

Nama Proses View album

Source (sumber) Tabel album

Input Data album

Output Info album

Destination (tujuan) pengunjung

Logika Proses 1. Pengunjung masuk ke menu gallery 2. Pengunjung melihat beberapa album

17 No. Proses 5

(42)

Source (sumber) Tabel Galeri

Input 1. Data galeri

2. Data album 3. Info galeri

Output 1. Data galeri

2. Info galeri Destination (tujuan) 1. Admin

2. Pengunjung

Logika Proses 1. Admin masuk ke pengolahan data galeri. 2. Di dalam pengolahan data galeri terdapat data

album

3. Data galeri yang ingin di olah akan masuk ke tabel galeri.

4. Apabila data galeri selesai diolah, maka info pengolahan data galeri langsung menuju ke admin dan pengunjung

18 No. Proses 5.1

Nama Proses Tambah Data Galeri

Input Data Galeri

Output Info Galeri

Logika Proses 1. admin menambah data galeri di dalam tabel galeri.

(43)

masukan akan mucul di tabel galeri.

19 No. Proses 5.2

Nama Proses Edit Data Galeri

Input Data Galeri

Logika Proses 1. admin mengedit data galeri di dalam tabel galeri.

edit atau diubah akan mucul di tabel galeri. 5. dan jika data tidak berhasil di edit, maka akan

muncul pesan error.

20 No. Proses 5.3

Nama Proses Hapus Data Galeri

Input -

Output Data Galeri

Logika Proses 1. Admin masuk ke tabel galeri.

(44)

akan dihapus.

3. data akan terhapus di database dan di tabel galeri.

21 No. Proses 5.4

Nama Proses View Galeri

Input Data Galeri

Destination (tujuan) pengunjung

Logika Proses 1. Pengunjung masuk ke menu gallery 2. Pengunjung mengklik salah satu album 3. Pengunjung melihat tampilan gambar atau

galeri

3.2.5.9 Kamus Data

Kamus data dibuat agar dapat digunakan sebagai panduan dalam membuat program. Dalam kamus data tercantum tabel-tabel yang ada dalam basis data beserta detailnya.

Tabel 3.2 Kamus data pada DFD sistem informasi Rumah Pohon

Nama Data Login Admin

Where used / how used

1. Admin – proses 1 (masukan) 2. Tabel Admin (masukan)

3. Auterifikasi username – proses 1.1 (masukan) 4. Proses 1.1 (keluaran)

5. Auterifikasi password – proses 1.2 (masukan) 6. Proses 1.2 (keluaran)

7. Proses 1 (keluaran)

(45)

Struktur Data id+username+password+id session

Nama Data Kategori

Where used / how used

1. Admin – proses 2 (masukan) 2. Tabel kategori (masukan)

3. Tambah kategori – proses 2.1 (masukan) 4. Proses 2.1 (keluaran)

5. Tabel kategori (keluaran)

6. Edit kategori – proses 2.2 (masukan) 7. Proses 2.2 (keluaran)

8. Proses 2 (keluaran) Deskripsi Berisi data kategori

Struktur Data id kategori+Nama kategori+aktif

id kategori 2. Tabel video (masukan)

3. Tambah – proses 3.1 (masukan) 4. Proses 3.1 (keluaran)

5. Tabel video (keluaran)

6. Edit video – proses 3.2 (masukan) 7. Proses 3.2 (keluaran)

8. Hapus video – proses 3.3 (masukan) 9. Proses 3.3 (keluaran)

10. Proses 3 (keluaran) Deskripsi Berisi data video

Struktur Data id video+id+Judul+ id kategori+ Video+Gambar+ keterangan+size file+timestamp

(46)

id 2. Tabel Album (masukan)

3. Tambah album – proses 4.1 (masukan) 4. Proses 4.1 (keluaran)

5. Tabel album (keluaran)

6. Edit album – proses 4.2 (masukan) 7. Proses 4.2(keluaran)

8. Hapus album – proses 4.3 (masukan) 9. Proses 4.3 (keluaran)

10.Proses 4(keluaran) Deskripsi Berisi data album

Struktur Data id album+id+nama album+gambar album

id_album 2. Tabel Galeri (masukan)

3. Tambah galeri – proses 5.1 (masukan) 4. Proses 5.1 (keluaran)

5. Tabel galeri (keluaran)

6. Edit galeri – proses 5.2 (masukan) 7. Proses 5.2(keluaran)

(47)

10.Proses 5(keluaran)

Deskripsi Berisi data galeri

Struktur Data id_galeri+id_album+id+nama_gambar+gambar_galeri +keterangan

id_galeri id_album id

nama_gambar gambar_galeri keterangan

[A-Z | a-z | 0-9] [A-Z | a-z | 0-9] [A-Z | a-z | 0-9] [A-Z | a-z | 0-9] -

[A-Z | a-z | 0-9]

3.3 Perancangan 3.3.1 Front End Website

Front End adalah tampilan website kita yang nantinya akan dilihat oleh para user. Penilaian terhadap sebuah web sangat dipengaruhi oleh design web itu sendiri.

Satu hal yang sangat penulis ingat, yaitu bahwa konsep/perancangan yang baik akan menghasilkan sebuah sistem yang baik pula, begitu juga sebaliknya, sebuah sistem tanpa konsep/perancangan yang jelas dalam pembuatannya akan berakhir dengan kegagalan sistem.

3.3.1.1 Rancangan Dasar

(48)

Header/Judul Website Top/Atas

Isi/Content Menu Kanan

Footer

Gambar 3.9 Kerangka Website

1) Header/Judul

Header merupakan keterangan pada bagian margin atas dan berlaku untuk setiap halaman. Dalam website Rumah Pohon ini header diisi dengan gambar yang menginformasikan tentang Rumah Pohon.

2) Top/Atas

Top berisi tambahan menu yang digunakan dalam pembuatan website ini. Di top terdapat beberapa menu yang berfungsi sebagai main menu yang berisi tentang informasi Rumah Pohon. Terdapat beberapa bagian yang terdapat di menu ini, yaitu :

a. Home, berisi tentang sejarah dari Rumah Pohon.

b. Gallery, berisi tentang photo-photo kegiatan Rumah Pohon. c. Videos, berisi tentang video kegiatan syuting Rumah Pohon. d. Contact, berisi form untuk saran atau kritik.

3) Footer

Biasanya berupa catatan – catatan kecil yang berisi penjelasan singkat mengenai website seperti nama dan alamat website.

3.3.1.2 Module Dan Component Yang Dipakai

(49)

1) Abstract-studio

Module ini berfungsi sebagai template di dalam website.

2) Simpleviewer_213

Component yang digunakan untuk mengatur dan mengolah gambar

di dalam website.

3) Component jwplayer

Component yang digunakan untuk mengatur dan mengolah video.

3.3.2 Skema Relasi

Model data relasional merupakan model data di mana hubungan antar data, arti data dan batasannya dijelaskan dengan baris dan kolom. Secara formal, ke semuanya itu digambarkan ke dalam skema relasi dan diagram skema. Adapun diagram skema dari sistem informasi admin Rumah Pohon yaitu:

Kategori

(50)

3.3.3 Struktur Tabel

Tabel 3.3 Data Admin

Tabel admin adalah tabel yang digunakan untuk menyimpan user id dan password administrator, sehingga untuk dapat mengganti user dan password dapat masuk ke halaman administrator.

Tabel 3.4 Data Kategori

Nama tabel : Kategori

Primary key : id_kategori

No Field Type Panjang Null Keterangan

1 Id_kategori Integer 50 no Primary key

2 nama Varchar 20 no Nama kategori

6 aktif enum(Y,N) - no Status aktif/tidak

Nama Tabel : admin

Primary key : id

No Field Type Panjang Null Keterangan

1 id integer 10 No id admin

2 username varchar 20 No admin

3 password varchar 50 No password

(51)

Tabel 3.5 Data Video

Nama tabel : video

Primary key : id_video

No Field Type Panjang null keterangan

1 id_video Integer 11 No Primary key

2 id Integer 10 No FK, Ref admin (id)

3 Judul Varchar 100 No Judul video

4 Video varchar 255 No Nama

5 gambar varchar 255 No Gambar video

6 id_kategori int 11 No FK, Ref kategori

(id kategori)

7 keterangan text - No -

8 Size_file varchar 50 No Ukuran

9 Timestamp timestamp - No -

Tabel 3.6 Data Album

Nama tabel : Album

Primary key : id_album

No Field Type Panjang Null keterangan

1 id_album Integer 11 No Primary key

2 id integer 10 No FK, Ref admin (id)

(52)

4 Gambar_album varchar 255 No tampilan album

Tabel 3.7 Data Galeri

Nama tabel : Galeri

Primary key : id_galeri

No Field Type Panjang Null keterangan

1 id_galeri Integer 11 No Primary key

2 id_album integer 11 No FK, Ref album

(id album)

3 id integer 10 No FK, Ref admin (id)

4 Nama_gambar varchar 255 No Nama/judul gambar

5 Gambar_galeri varchar 255 No Tampilan/gambar

6 keterangan text - No -

3.3.4 Perancangan Menu

3.3.4.1 Perancangan Menu Login Admin

(53)

3.3.4.2 Perancangan Menu Pengunjung

Gambar 3.12 Perancangan Menu pengunjung

3.3.5 Perancangan Interface

Perancangan interface dibuat untuk kebutuhan interface dengan user, perancangan ini dibuat untuk interface umum, superadmin, dan admin. Berikut rinciannya ditampilkan dibawah ini:

3.3.5.1 Perancangan Interface Pengunjung

T01 Navigasi

1. Klik home menuju

halaman utama (profile)

2. Klik gallery menuju

halaman gallery T02

3. Klik video menuju

halaman video T03

4. Klik contact menuju

halaman contact T04

(54)

Header

Footer

Home Gallery Video Contact

album album album album

1. Klik album untuk

menuju halaman album

T05

Ukuran layar 100% dari layar user

Header

Footer

video1 video2

Categorie sport education

music

1. Klik video1 akan

menuju Tampilan video

T06

2. Klik categori sport untuk

menuju halaman T07

3. Klik categori education

untuk menuju halaman

T08

4. Klik categori music

T09

(55)

Header

Footer Home Gallery

Tampilan contact rumah pohon

Video Contact

1.Klik contact untuk

menampilkan contact

rumah pohon

Header

Footer Home Gallery

Tampilan album foto

Video Contact

1. Pada saat klik galery

terdapat pilihan album

dan saat klik album maka

akan menampilkan

tampilan album

(56)

Header

Footer Home Gallery

Tampilan video1

Video Contact

Categorie sport education

music

1. Pada saat klik video

terdapat pilihan video1

dan video2, saat klik

video1 maka akan

menampilkan tampilan

video1

2. Klik categori sport untuk

menuju halaman T07

3. Klik categori education

T08

4. Klik categori music

T09

(57)

Header

Footer

video1 video2

Sport Real madrid Liverpool

1. Pada saat setelah klik

categori sport maka akan

tampil video 1 dan

video2

2. Klik video1 akan

menampilkan halaman

video

Header

Footer

video1 video2

Education

categori education

maka akan tampil video

1 dan video2

2. Klik video1 akan

menampilkan halaman

video

(58)

Header

Footer

video1 video2

Music

categori music maka

akan tampil video 1 dan

video2

2. Klik video1 akan

menampilkan halaman

video

3.3.5.2 Perancangan Interface Admin

Header

Footer LogIn

username

password Login

1. Login dengan memasukan

username dan password

(59)

Header

Footer Home

kategori

video

album

Gambar

logout

1. Klik home

menuju halaman

home admin

2. Klik kategori

untuk menuju

halaman T03

3. Klik video

untuk menuju

halaman T04

4. Klik album

untuk menuju

halaman T05

5. Klik gambar

untuk menuju

halaman T06

6. Klik log out

untuk keluar

halaman admin

(60)

no Nama status aksi

Edit

1. Pada saat setelah

klik kategori maka

akan tampil button

tambah dan menu

edit

2. Klik button tambah

menuju halaman

T07

3. Klik menu edit

menuju halaman

T08

no judul kategori aksi

Edit Hapus

klik video maka

akan tampil button

tambah, menu edit

dan menu hapus

menuju halaman

T09

(61)

menuju halaman

T10

4. Klik menu hapus

maka data video

akan terhapus

no Nama album aksi

Edit Hapus

klik album maka

akan tampil button

tambah, menu edit

dan menu hapus

menuju halaman

maka data album

akan terhapus

(62)

no Nama gambarNama album aksi

Edit Hapus

klik gambar maka

akan tampil button

tambah, menu edit

dan menu hapus

menuju halaman T13

3. Klik menu edit

menuju halaman T14

4. Klik menu hapus

maka data gambar

akan terhapus

1. Untuk tambah

kategori, masukkan

nama, lalu klik

simpan maka data

yang di tambah akan

tersimpan di

database

(63)

ingin menambah

data kategori dan

kembali ke tampilan

T03

1. Untuk edit kategori,

masukkan nama

kategori, lalu klik

update maka data

kategori akan

status kategori dan

pilih N jika ingin

me-Non-aktifkan

status kategori.

(64)

1. Untuk Tambah

video, masukkan

judul, pilih

kategori, video dan

gambar video dapat

di cari melalui

button browse,

kemudian isi

keterangan.

2. klik kirim maka

data tambah video

akan tersimpan di

database.

3. Klik Batal jika

tidak ingin

menambah data

video dan kembali

ke tampilan T04

(65)

1. Untuk edit video,

ubah ID video,

judul, lalu pilih

kategori. Kemudian

isi keterangan video

yang baru di edit.

2. klik simpan maka

data video akan

tersimpan di

database.

3. Klik Batal jika tidak

ingin mengubah

data video dan

kembali ke tampilan

T04

(66)

1. Untuk tambah

album, masukkan

nama album, lalu

gambar dapat di cari

melalui button

browse.

2. klik simpan maka

data album yang di

tambah akan

tersimpan di

database.

3. Klik batal jika tidak

ingin menambah

data album dan

kembali ke tampilan

T05

(67)

1. Untuk edit album,

ubah ID album dan

nama album lalu

cari gambar dengan

klik button browse.

Kemudian klik edit

maka data album

akan berubah dan

tersimpan di

database.

2. klik button batal

jika tidak ingin

mengubah data

album dan kembali

ke tampilan T05

(68)

4. Untuk Tambah

gambar, pilih

album, masukkan

nama gambar, lalu

cari gambar dengan

mengklik button

(69)

1. Untuk edit gambar,

ubah ID gambar,

pilih album dan

gambar dapat di cari

melalui button

browse, lalu isi

keterangan tentang

gambar yang ingin

di simpan.

4. klik simpan maka

data kategori akan

tersimpan di

database.

5. Klik batal jika tidak

ingin mengubah

data album dan

kembali ke tampilan

T06

(70)

3.3.6 Instalasi Wamp Server

Gambar 3.13 Wizard Setup Wamp

Lalu muncul kotak dialog, pilih I Accept the Agreement lalu klik Next.

Gambar 3.14 License Agreement

(71)

Gambar 3.15 Drive dan Folder untuk menyimpan program

Kemudian ada dua pilihan Additional Tasks, kita langsung klik Next.

Gambar 3.16 Select Additional Tasks

(72)

Gambar 3.17 Siap untuk dimulai Install

Jika browser yang ada lebih dari satu browser, maka akan muncul pertanyaan untuk default browser with WampServer2. Lalu piliih Yes.

Gambar 3.18 Firefox akan dijadikan default browser

(73)

Gambar3.19 Nama server dan Email yang dipakai

Pilih Launch WampServer2 now untuk langsung memulai menjalankan service yang ada di Wamp, lalu tekan tombol Finish.

Gambar 3.20 Launch Wamp

(74)

Gambar 3.21 Tampilan localhost di Wamp

Untuk mendesign database klik phpmyadmin dan akan muncul seperti pada gambar di bawah ini, atau pada address bar ketikkan http://localhost/phpmyadmin/ dan enter.

(75)

3.4 Implementasi 3.4.1 Database

3.4.1.1 Tabel Struktur Admin

3.4.1.2 Tabel Struktur Kategori

3.4.1.3 Tabel Struktur Video

(76)

3.4.1.5 Tabel Struktur Galeri

3.4.2 Capture Layar 3.4.2.1 Menu Home

Tampilan home berisi tentang sejarah atau asal usul dari terbentuknya Rumah Pohon.

(77)

3.4.2.2 Menu Gallery

Menu gallery berisi foto-foto dari kegiatan syuting Rumah Pohon

Gambar 3.24 Tampilan menu album

3.4.2.3 Menu Video

Pada tampilan ini terdapat beberapa kategori video.

(78)

3.4.2.4 Lihat Video

Gambar 3.26 Tampilan lihat video

3.4.2.5 Log In Admin

User admin terlebih dahulu memasukkan ussername dan password untuk bisa masuk ke halaman administrator

(79)

3.4.2.6 Halaman Admin

Pada halaman ini terdapat beberapa fungsi yang dapat membantu admin untuk bisa melakukan beberapa aksi seperti tambah kategori, edit kategori, tambah video, edit video, hapus video, tambah album, dan ganti password

Gambar 3.28 Tampilan utama admin

3.4.2.7 Menu Kategori

Pada tampilan ini admin bisa mengedit dan menambah kategori.

Gambar 3.29 Tampilan kategori

Tambah Kategori

(80)

Edit Kategori

Gambar 3.31 Tampilan edit kategori

3.4.2.8 Menu Video

Pada tampilan ini admin bisa menambah, mengedit, dan menghapus video

Gambar 3.32 Tampilan menu video

Tambah Video

(81)

Edit Video

Gambar 3.34 Tampilan edit video

3.4.2.9 Menu Album

Pada tampilan ini admin bisa menambah, mengedit, dan menghapus video

Gambar 3.35 Tampilan menu album

Tambah Album

(82)

Edit Album

Gambar 3.37 Tampilan edit album

3.4.2.10 Menu Gambar

Pada tampilan ini admin bisa menambah, mengedit, dan menghapus gambar.

Gambar 3.38 Tampilan menu gambar

Tambah Gambar

(83)

Edit Gambar