vi
ABSTRAK
website pengolahan citra digital dibuat untuk menjaring masyarakat, terutama masyarakat yang memiliki hobi dibidang fotografi untuk bergabung dan dapat saling berinteraksi dengan sesamanya melalui foto. Foto yang di-post oleh pengguna dapat diolah, ditampilkan, diberi status like, dan diberi komentar. Tujuan lain dari pembuatan website ini adalah untuk menyediakan media pengolah citra secara online yang bisa diakses dimana saja selama ada koneksi internet. Pengguna tidak perlu memasangkan aplikasi pengolah citra tambahan pada computer yang relative mahal dan berkapasitas besar. Aplikasi website ini dibuat dengan menggunakan teknologi HTML5 dan PHP. HTML 5 dan Javascript digunakan untuk melakukan proses pengolahan citra dan PHP digunakan untuk melakukan interaksi aplikasi dengan database.
vii
ABSTRACT
Digital image processing website created to attract people, especially people who have a hobby in photography to join and be able to interact with each other through photos. The photos are posted by the user can be processed, displayed, given the like status, and given the comments. Another goal of making this website is to provide online media image processing that can be accessed anywhere as long as there is internet connection. Users do not need to install additional image processing application on a computer that is relatively expensive and large capacity.This web application will built using HTML5 and PHP technologies. HTML 5 and Javascript are used to perform image processing and PHP is used for interaction with database applications.
viii
DAFTAR ISI
LEMBAR PENGESAHAN ... i
PERNYATAAN ORISINALITAS LAPORAN PENELITIAN ... ii
PERNYATAAN PUBLIKASI LAPORAN PENELITIAN ... iii
PRAKATA ... iv
DAFTAR KODE PROGRAM ... xiii
BAB I PENDAHULUAN ... 1
1.1 Latar Belakang ... 1
1.2 Rumusan Masalah ... 2
1.3 Tujuan ... 2
1.4 Batasan Masalah ... 2
1.5 Sistematika Pembahasan ... 3
BAB II DASAR TEORI ... 4
2.1 Pengolahan Citra Digital ... 4
2.2 HTML 5 ... 9
BAB III ANALISA DAN PEMODELAN ... 19
3.1 Cara Kerja Website ... 19
3.2 Desain Antarmuka Halaman Utama ... 21
3.3 Desain Antarmuka Halaman Set up ... 21
3.4 Desain Antarmuka Halaman Registerasi Anggota ... 23
3.5 Desain Antarmuka Halaman Sign In ... 24
3.6 Desain Antarmuka Halaman Profile Anggota ... 25
3.6.1 Diagram Aktifitas Mencari Anggota ... 26
3.6.2 Diagram Aktifiats Mengelola Teman ... 27
3.6.3 Diagram Aktifitas Mengelola Anggota ... 28
3.7 Desain Antarmuka Halaman News Feed ... 30
3.7.1 Mengelola Status Like ... 31
3.7.2 Mengelola Komentar ... 32
3.7.3 Mengelola Report ... 33
3.8 Desain Antarmuka Halaman Pix It ... 34
3.8.1 Proses Meng-upload Foto ... 35
3.8.2 Mengolah Foto Dengan Control Component ... 35
3.8.3 Mengolah Foto Dengan Filter ... 37
3.9 Desain Antarmuka Halaman Favourite ... 37
3.10 Desain Antarmuka Halaman Notification ... 38
3.11 Desain Antarmuka Halaman Mengelola Anggota Oleh Admin ... 38
ix
3.13 Entity Relationship Diagram ... 40
BAB IV PERANCANGAN DAN IMPLEMENTASI ... 42
4.1 Implementasi Desain Antarmuka Halaman Utama ... 42
4.2 Implementasi Desain Antarmuka Halaman Set up ... 42
4.3 Implementasi Desain Antarmuka Halaman Registerasi Anggota ... 45
4.4 Implementasi Desain Antarmuka Halaman Sign In ... 49
4.5 Implementasi Desain Antarmuka Halaman Profile Anggota ... 51
4.5.1 Implementasi Proses Mencari Anggota ... 52
4.5.2 Implemetasi Proses Mengelola Anggota ... 53
4.5.3 Implementasi Proses Mengelola Teman ... 58
4.6 Implementasi Desain Antarmuka Halaman News Feed ... 60
4.6.1 Implementasi Proses Mengelola Status Like ... 60
4.6.2 Implementasi Proses Mengelola Komentar ... 62
4.6.3 Implementasi Proses Mengelola Report... 64
4.7 Implementasi Desain Antarmuka Halaman Pix It ... 65
4.7.1 Implementasi Proses Meng-upload Foto ... 65
4.7.2 Implementasi Proses Mengolah Foto Dengan Conrol Component ... 67
4.7.3 Implementasi Proses Mengolah Foto Dengan Filter ... 73
4.8 Implementasi Desain Antarmuka Halaman Favourite ... 79
4.9 Implementasi Desain Antarmuka Halaman Notification ... 79
4.10 Implementasi Desain Antarmuka Halaman Halaman Mengelola Anggota ... 80
4.11 Implementasi Desain Antarmuka Halaman Mengelola Foto ... 82
4.12 Implementasi Penyimpanan Data ... 83
4.12.1 Tabel Kategori Anggota ... 83
4.12.2 Tabel Anggota ... 83
5.2 Pengujian Form Registerasi ... 86
5.3 Pengujian Form Sign In ... 87
5.4 Pengujian Form Edit Profile ... 88
5.5 Pengujian Fungsi Brightness ... 90
5.6 Pengujian Fungsi Contrast ... 90
5.7 Pengujian Fungsi Saturation... 91
5.8 Pengujian Fungsi Grayscale ... 91
5.9 Pengujian Fungsi Black And White ... 92
5.10 Pengujian Fungsi Sepia ... 92
BAB VI SIMPULAN DAN SARAN ... 93
6.1 Simpulan ... 93
6.2 Saran ... 93
DAFTAR PUSTAKA ... 94
LAMPIRAN A – KAMUS DATA ... 1
x
DAFTAR GAMBAR
Gambar 2.1 Skema HTML (Kadir, 2002) ... 11
Gambar 2.2 Skema PHP (Kadir, 2002) ... 12
Gambar 2.3 Entitas ... 13
Gambar 2.4 Relasi ... 14
Gambar 3.1 Usecase Diagram ... 20
Gambar 3.2 Desain Antarmuka Halaman Utama ... 21
Gambar 3.3 Desain Antarmuka Halaman Set up ... 22
Gambar 3.4 Diagram Aktifitas Set up Account ... 22
Gambar 3.5 Desain Antarmuka Halaman Registerasi Anggota ... 23
Gambar 3.6 Diagram Aktifitas Registerasi Anggota ... 24
Gambar 3.7 Desain Antarmuka Halaman Sign In... 24
Gambar 3.8 Diagram Aktifitas Sign In ... 25
Gambar 3.9 Diagram Aktifitas Logout ... 25
Gambar 3.10 Desain Antarmuka Halaman Utama Anggota ... 26
Gambar 3.11 Diagram Aktifitas Mencari Anggota ... 26
Gambar 3.12 Diagram Aktifitas Menambah Teman (Follow) ... 27
Gambar 3.13 Diagram Aktifitas Menghapus Teman (Un-Follow) ... 28
Gambar 3.14 Diagram Aktifitas Mengubah Data Anggota ... 29
Gambar 3.15 Diagram Aktifitas Menghapus Data Anggota ... 30
Gambar 3.16 Desain antarmuka halaman news feed ... 30
Gambar 3.17 Diagram Aktifitas Menambah Status Like ... 31
Gambar 3.18 Diagram Aktifitas Menghapus Status Like ... 31
Gambar 3.19 Diagram Aktifitas Manambah Komentar ... 32
Gambar 3.20 Diagram Aktifitas Menghapus Komentar ... 33
Gambar 3.21 Diagram Aktifitas Menambah Report Pada Foto... 33
Gambar 3.22 Diagram Aktifitas Menghapus Report Pada Foto ... 34
Gambar 3.23 Desain Antarmuka Halaman Pix It ... 35
Gambar 3.24 Diagram Aktifitas Meng-upload Foto ... 35
Gambar 3.25 Diagram Aktifitas Mengolah Foto Dengan Control Component ... 36
Gambar 3.26 Diagram Aktifitas Mengolah Foto Dengan Filter ... 37
Gambar 3.27 Desain Antarmuka Halaman Favourite ... 37
Gambar 3.28 Desain Antarmuka Halaman Notification ... 38
Gambar 3.29 Desain Antarmuka Halaman Mengelola Anggota Oleh Admin ... 38
Gambar 3.30 Diagram Aktifitas Mengubah Status Aktif Anggota ... 39
Gambar 3.31 Diagram Aktifitas Menghapus Foto... 39
Gambar 3.32 Diagram Aktifitas Menghapus Foto Oleh Admin ... 40
Gambar 3.33 Entity Relationship Diagram ... 40
Gambar 4.1 Implementasi Desain Antarmuka Halaman Utama ... 42
Gambar 4.2 Implementasi Desain Antarmuka Halaman Set up ... 43
Gambar 4.3 Tampilan kesalahan jika email sudah pernah terdaftar ... 43
Gambar 4.4 Tampilan Kesalahan Jika Format Email Tidak Sesuai ... 43
Gambar 4.5 Implementasi Desain Antarmuka Halaman Registarasi Anggota .... 46
Gambar 4.6 Tampilan Pesan Kesalahan Jika Data Kosong ... 46
Gambar 4.7 Tampilan Pesan Kesalahan Jika Password Tidak Sama ... 46
Gambar 4.8 Tampilan Pesan Kesalahan Jika Pixaphoria Id Sudah Dipakai ... 47
Gambar 4.9 Implementasi Desain Antarmuka Halaman Sign In ... 49
Gambar 4.10 Tampilan Pesan Kesalahan Jika Textbox Kosong ... 49
Gambar 4.11 Tampilan Pesan Kesalahan Jika Data Tidak Ada Di Database ... 50
xi
Gambar 4.13 Desain Antarmuka Tampil Following atau Follower ... 52
Gambar 4.14 Tampilan Untuk Search People ... 52
Gambar 4.15 Form Edit User Profile ... 54
Gambar 4.16 Pesan Kesalahan Jika Pixaphoria Id Kosong ... 54
Gambar 4.17 Pesan Kesalahan Jika Pixaphoria Id Sudah Terdaftar ... 54
Gambar 4.18 Form Untuk Mengubah Password Anggota ... 55
Gambar 4.19 Tampilan Pesan Kesalahan Untuk Ubah Password ... 55
Gambar 4.20 Pesan Konfirmasi Untuk Menghapus Data Anggota ... 57
Gambar 4.21 Tampilan Profile Anggota Yang belum di-Follow ... 58
Gambar 4.22 Tampilan Profile Anggota Yang Sudah di-Follow ... 59
Gambar 4.23 Implementasi Desain Antarmuka Halaman News Feed ... 60
Gambar 4.24 Implementasi Menambah Status Like ... 61
Gambar 4.25 Implementasi Menghapus Status Like ... 61
Gambar 4.26 Implementasi Proses Menambah Komentar ... 62
Gambar 4.27 Tampilan Ketika Komentar Sudah Ditambah ... 63
Gambar 4.28 Tampilan Ketika Tombol Delete Ditekan ... 63
Gambar 4.29 Implementasi Desain Antarmuka Halaman Pix It ... 65
Gambar 4.30 Tampilan Halaman Pix It Setelah Upload foto ... 66
Gambar 4.31 Hasil Penambahan Brightness ... 68
Gambar 4.32 Hasil Pengurangan Brightness ... 68
Gambar 4.33 Hasil Penambahan Kontras ... 69
Gambar 4.34 Hasil Pengurangn Kontras ... 69
Gambar 4.35 Hasil Penambahan Saturasi ... 70
Gambar 4.36 Hasil Pengurangan Saturasi ... 70
Gambar 4.37 Hasil Penambahan Sharpness ... 72
Gambar 4.38 Hasil Filter Grayscale ... 74
Gambar 4.39 Hasil Filter Black And White ... 75
Gambar 4.40 Hasil Filter Sephia ... 76
Gambar 4.41 Hasil Filter Blur ... 77
Gambar 4.42 Implementasi Halaman Favourite ... 79
Gambar 4.43 Implementasi Halaman Notification ... 80
Gambar 4.44 Implementasi Halaman Mengelola Anggota ... 80
Gambar 4.45 Pesan Konfirmasi Untuk Ban Anggota ... 81
Gambar 4.46 Pesan Konfirmasi Untuk Mengaktifkan Anggota ... 81
xii
DAFTAR TABEL
Tabel 2.1 Kardinalitas ... 14
Tabel 2.2 Pengenalan Perintah-Perintah admin MySQL ... 15
Tabel 2.3 Tabel penjelasan Simbol Use Case ... 16
Tabel 2.4 Tabel penjelasan simbol Activity Diagram ... 17
Tabel 4.1 Tabel Kategori Anggota ... 83
Tabel 4.2 Tabel Anggota ... 83
Tabel 4.3 Tabel Foto ... 84
Tabel 4.4 Tabel Komentar ... 84
Tabel 4.5 Tabel Like ... 84
Tabel 4.6 Tabel Follow... 84
Tabel 4.7 Tabel Foto Temporer ... 85
Tabel 4.8 Tabel Report ... 85
Tabel 5.1 Pengujian Form Set up ... 86
Tabel 5.2 Pengujian Form Registrasi ... 87
Tabel 5.3 Pengujian Form Sign In ... 88
Tabel 5.4 Pengujian Form Edit Profile ... 89
Tabel 5.5 Pengujian Form Set up ... 90
Tabel 5.6 Pengujian Fungsi Contrast ... 91
Tabel 5.7 Pengujian Fungsi Saturation ... 91
Tabel 5.8 Pengujian Fungsi Grayscale ... 92
Tabel 5.9 Pengujian Fungsi Black And White ... 92
xiii
DAFTAR KODE PROGRAM
Kode Program 4.1 Potongan Kode Program Validasi Data Set up ... 44
Kode Program 4.2 Potongan Kode Program Halaman Set up ... 45
Kode Program 4.3 Potongan Kode Program Validasi Registerasi anggota ... 48
Kode Program 4.4 Potongan Kode Program Proses Registerasi Anggota ... 48
Kode Program 4.5 Potongan Kode Program Validasi Halaman Sign In ... 50
Kode Program 4.6 Potongan Kode Program Halaman Sign In ... 51
Kode Program 4.7 Potongan Kode Program Search People ... 53
Kode Program 4.8 Kode Program Validasi Form Edit User Profile ... 56
Kode Program 4.9 Kode Program Proses Edit User Profile ... 57
Kode Program 4.10 Potongan Kode Program Untuk Hapus Data Anggota ... 58
Kode Program 4.11 Potongan Kode Program Menambah Data Teman ... 59
Kode Program 4.12 Potongan Kode Program Menghapus Data Teman ... 60
Kode Program 4.13 Potongan Kode Program Menambah Status Like ... 61
Kode Program 4.14 Potongan Kode Program Menghapus Status Like ... 62
Kode Program 4.15 Potongan Kode Program Menambah Komentar ... 63
Kode Program 4.16 Potongan Kode Program Menghapus Komentar ... 64
Kode Program 4.17 Potongan Kode Program Menambah Flag ... 65
Kode Program 4.18 Potongan Kode Program Meng-upload Foto ... 67
Kode Program 4.19 Potongan Kode Program Menggambar Foto Pada Canvas 67 Kode Program 4.20 Implementasi Rumus Brightness Pada Javascript ... 68
Kode Program 4.21 Implementasi Rumus Kontras Pada Javascript ... 70
Kode Program 4.22 Implementasi Rumus Saturasi Pada Javascript... 71
Kode Program 4.23 Implementasi Rumus Sharpness Pada Javascript ... 73
Kode Program 4.24 Implementasi Rumus Grayscale Pada Javascript ... 74
Kode Program 4.25 Implementasi Rumus Black And White Pada Javascript ... 75
Kode Program 4.26 Implementasi Rumus Sephia Pada Javascript ... 76
Kode Program 4.27 Implementasi Rumus Blur Pada Javascript ... 78
Kode Program 4.28 Implementasi Menambah Data Foto ... 79
Kode Program 4.29 Implementasi Mengubah Status Aktif Anggota ... 82
1
BAB I
PENDAHULUAN
1.1 Latar Belakang
Aplikasi pengolahan citra dan galeri foto merupakan aplikasi berbasis
website dimana pengguna dapat melakukan posting berupa foto. Foto tersebut
dapat diolah sebelum di-post oleh pengguna. Proses pengolahan citra ini dibuat untuk memanipulasi foto yang telah diunggah sesuai selera pengguna. Aplikasi website ini ditujukan untuk pengguna dari berbagai kalangan masyarakat. Namun
tujuan utama dari website ini adalah untuk menjaring masyarakat khususnya yang memiliki hobi di bidang fotografi untuk bergabung. Masyarakat dapat bergabung menjadi anggota sehingga dapat saling berinteraksi satu sama lain melalui foto. Tujuan berikutnya adalah membuat media pengolah foto yang dapat digunakan dimanapun selama ada koneksi ke internet. Kelebihan dari aplikasi ini pengguna tidak perlu memasangkan aplikasi pengolahan citra khusus pada komputernya yang cenderung berkapasitas besar, membutuhkan spesifikasi komputer yang tinggi, dan aplikasinya berbayar atau pengguna perlu mengeluarkan uang lebih untuk membeli aplikasi tersebut.
Proses pengolahan citra pada website ini akan dibuat dengan dua metode yaitu konvolusi atau image filtering dimana pengguna hanya tinggal memilih filter mana yang hendak mereka tampilkan pada sebuah gambar dan yang kedua adalah metode dengan mengunakan control component seperti untuk mengatur terang gelap, kontras, ketajaman, saturation, temperature dari sebuah gambar.
Website ini akan dibuat dengan menggunakan teknologi HTML 5 dan
Javascript untuk melakukan pengolahan citra, dan PHP untuk interaksi dengan
server atau database. Alasan menggunakan HTML 5 adalah sebagai berikut.
Pertama karena HTML 5 merupakan versi terbaru dari HTML yang memiliki fitur canvas. Canvas inilah yang dapat digunakan untuk melakukan pengolahan citra
digital. Kedua Javascript untuk HTML 5 sudah mendukung untuk membuat website pengolahan citra digital tanpa menggunakan aplikasi tambahan seperti
Flash.
2
kapasitas browser akan dimampatkan sehingga tidak melebihi kapasitas dan tidak memakan bandwith yang terlalu besar untuk melakukan proses pengolahan citra tersebut.
1.2 Rumusan Masalah
1. Bagaimana memanfaatkan HTML5 dan PHP untuk membuat aplikasi pengolahan citra dan galeri foto?
2. Bagaimana memanfaatkan HTML5, Javascript, dan PHP untuk membuat control component pada Website ini?
3. Bagaimana memanfaatkan HTML5, Javascript, dan PHP untuk melakukan konvolusi pada sebuah gambar?
1.3 Tujuan
1. Untuk memanfaatkan HTML5 dan PHP dalam membuat aplikasi pengolahan citra dan galeri foto.
2. Untuk memanfaatkan HTML5, Javascript, dan PHP dalam membuat control component pada Website ini.
3. Untuk memanfaatkan HTML5, Javascript, dan PHP dalam melakukan konvolusi pada sebuah gambar.
1.4 Batasan Masalah
1. Website ini dapat diakses dengan tampilan terbaik di Google Chrome.
2. Control component akan dibuat dengan dua tipe, yaitu control component dan
apply filter.
3. Control component yang akan di buat antara lain brightness, contrast,
saturation, sharpness dan temperature. Sedangkan filter yang dapat
digunakan adalah grayscale, black and white, sephia, blur.
3
1.5 Sistematika Pembahasan
BAB I. PENDAHULUAN
Bab ini berisi tentang penjelasan latar belakang, rumusan masalah, tujuan, batasan masalah, sistematika pembahasan.
BAB II. DASAR TEORI
Bab ini berisi tentang teori penunjang, algoritmaataumetode, dan teknologi yang digunakan dalam pembuatan aplikasi ini.
BAB III. ANALISIS DAN PEMODELAN
Bab ini berisi tentang deskripsi umum perangkat lunak, arsitektur aplikasi yaitu perancangan sistem, DFD, ERD, dan lain-lain, Layout dan storyboard dari aplikasi yang dibuat, dan creative strategy.
BAB IV. PERANCANGAN DAN IMPLEMENTASI
Bab ini berisi tentang kumpulan screenshot dari proyek yang dibuat beserta penjelasan dari tiap fungsi utama yang dibuat.
BAB V. PENGUJUIAN
Bab ini berisi pengujian seriap fungsi-fungsi yang dibuat dengan menggunakan metode whitebox testing dan blackbox testing.
BAB VI. SIMPULAN DAN SARAN
Bab ini berisi tentang jawaban dari tujuan yang talah dirancangkan pada bab I, baik berupa pembuktian atau penegasan pada kasus tersebut. Dan pada bagian saran merupakan hal baru yang dapat diunakan untuk mengembangkan karya ilmiah ini.
DAFTAR PUSTAKA
93
BAB VI
SIMPULAN DAN SARAN
6.1 Simpulan
Beberapa kesimpulan yang yang dapat ditarik setelah melakukan analisis, perancangan dan implementasi dari aplikasi yaitu:
1. Aplikasi pengolahan citra digital dapat diimplementasikan dengan memanfaatkan HTML 5.
2. Control component untuk melakukan pengolahan citra digital dapat diimplementasikan dengan menggunakan HTML5 dan javascript.
3. Konvolusi dapat dilakukan dengan HTML 5 dan javascript, tetapi terdapat perbedaan hasil. Hal tersebut karena banyaknya matriks untuk konvolusi yang dapat digunakan.
4. Compability pada setiap browser berbeda-beda. Jika dibuka pada Internet
Explorer tampilan CSS sedikit berubah, dan tag-tag HTML 5 yang digunakan
masih belum dapat diaplikasikan di setiap browser seperti contohnya input type range / slider tidak dapat digunakan pada Mozilla Firefox.
6.2 Saran
Saran yang dapat dibuat setelah pembuatan aplikasi:
1.
Aplikasi ini dapat dikembangkan lebih jauh mengenai filter-filter dan efekgambar yang beranekaragam.
94
DAFTAR PUSTAKA
Ballard, P., & Moncur, M. (2009). Teach Yourself Ajax, Javascript and PHP. Indianapolis: Sams.
Gilmore, W. J. (2004). Begining PHP 5 and MySQL From Novice to Professional . Berkely: Apress.
Hakim, L. (2011). Trik Dahsyat Menguasai Ajax dengan Jquery. Yogyakarta: Lokomedia.
html5/html5_webstorage.asp. (n.d.). Retrieved 05 27, 2012, from
www.w3schools.com: www.w3schools.com/html5/html5_webstorage.asp Ir. Fatansyah. (2007). Basis Data. Bandung: Informatika.
Kadir, A. (2002). Dasar Pemrograman Web Dinamis Menggunakan PHP. Yogyakarta: Andi.
lee, C. (2011). Referensi Ringkas HTML 5. Jakarta: Elex Media Komputindo. Munir, R. (2004). Pengolahan Citra Digital dengan Pendekatan Algoritmik.
Bandung: Informatika.
Pressman, R. S. (2002). Rekayasa Perangkat Lunak Pendekatan Praktisi (Buku I). In R. S. Pressman, Rekayasa Perangkat Lunak Pendekatan Praktisi (Buku I). Yogyakarta: Andy.
Rapidtabels.com Online Reference & Tools. (2007, Febuary). Retrieved from
http://www.rapidtabels.com
