Project kali ini berkaitan erat dengan proyek DIY point-shoot camera. Selama ini saya menggunakan flash disk sebagai media penyimpanan foto maupun video. Sebenarya dengan flashdisk sudah sangat handy, sederhana dan mudah dishare. TInggal lepas flashdisk dan masukan ke HP via OTG atau langsung ke laptop maka foto dengan mudah ditransfer. Namun ada satu problem dengan flashdisk. Problem itu muncul karena saya pengguna iPhone yang tidak semudah android dalam hal photo sharing. Sehingga saya selalu membawa HP android kemana-mana untuk mentransfer foto. Untuk mengatasi problem itu saya lari ke solusi webserver.
Dengan webserver, saya harap begitu kamera menyimpan satu image hasil jepretan, maka saat itu juga saya bisa browse di webserver dan download. Skema sistemnya kira-kira begini.
Tahapannya cukup panjang dan saya bagi menjadi dua bagian. Bagian pertama mempersiapkan webserver, kedua menyiapkan photo gallery. Sebagai catatan, untuk setup dibawah ini kita butuh internet.
Bagian 1- Membuat Webserver
Webserver yang dibuat adalah lighttpd (link). Sebuah webserver yang ringan, dapat berjalan dengan baik di Raspberry Pi. ketikkan perintah dibawah ini untuk instalasi
sudo apt-get update sudo apt-get install lighttpd
setelah itu, kita install PHP dan aktifkan fastcginya. Setelah itu lakukan restart lighttpd.
sudo apt-get -y install php5-common php5-cgi php5 sudo lightly-enable-mod fastcgi-php sudo service lighttpd force-reload
Sampai tahap ini, webserver sudah terinstall dan untuk testing, ketahui dulu IP address dari Raspberry Pi
hostname -I
Jika misalnya muncul 192.168.0.100 Maka masukkan IP address ini di halaman browser perangkat lain (misalnya HP atau laptop ) yang terhubung dengan jaringan yang sama. Tampilan seperti dibawah ini akan muncul
Sekarang kita perlu memastikan bahwa user “pi” bisa melakukan read/wrote ke direktori webserver (/var/www). Direktori /var/www dimiliki oleh “root” user. Untuk itu kita membuat group “www-data” dan memasukan “www-data” kedalam group /var/www. Setelah itu tambahkan pi user kedalam group “www-data”
sudo chown www-data:www-data /var/www sudo chmod 775 /var/www sudo usermod -a -G www-data pi
lakukan reboot agar setting permission ini dijalankan.
Bagian 2 – Instalasi Single File PHP Gallery
Single File PHP Gallery adalah web gallery yang dibuat oleh Kenny Svalgaard (link). Cara kerjanya sangat sederhana, kita hanya perlu mengcopykan file PHP ke folder dan seketika kita punya web gallery. Thumbnail akan dibuat secara otomatis. Single File PHP Gallery ini sangat cocok dengan yang saya inginkan karena kita bisa browse, melihat file info, download bahkan menjalankan slideshow. Single File PHP Gallery membutuhkan webserver dan foto kita yang berada di webserver tersebut.
Agar thumbnail tercreate secara otomatis, kita membutuhkan php5-gd. Setelah instalasi selesai, lakukan restart.
sudo apt-get -y install php5-gd
Setelah itu kita buat folder photos di dalam folder webserver dan folder tersebut dapat diakses/write oleh www-data user
sudo mkdir /var/www/html/photos sudo chmod 775 /var/www/html/photos sudo chown www-data:www-data /var/www/html/photos

Selanjutnya kita download Single File PHP Gallery dari situs http://sye.dk/sfpg/Pada umumnya hasil download diletakkan dalam direktori Downloads. Kemudian lakukan unzip
sudo unzip Single_File_PHP_Gallery_4.7.0.zip -d /var/www/html/photos
Terdapat dua file yang diekstrak, yaitu index.php dan readme.txt
Filter index.php perlu sedikit update script agar terhindari dari error message.
sudo nano /var/www/html/photos/index.php
cari define(‘SECURITY_PHRASE’,”);
dan isi ‘ ‘ dengan apa saja, lihat contoh. Setelah itu save.
Sampai disini, setup Single File PHP Gallery sudah selesai. Sekarang kita tinggal mengisi folder /var/www/html/photos dengan foto. file yang disupport antara lain JPG, PNG dan GIF.
Untuk mengakses web gallery, tinggal memasukan IP address dalam web browser disertai nama direktori foto, misalnya 192.168.0.100/photos. Maka tadaaa….. kita sudah memiliki web photo gallery.
Jika salah satu foto di klik, maka akan muncul tanda loading untuk beberapa saat hingga tampilan foto diperbesar.
Webserver ini juga saya akses dengan Wifi Direct (lihat how to). Sehingga apapun yang saya foto langsung bisa saya browse di HP. Bahkan untuk teman yang ingin hasil fotonya, mereka tinggal mengakses access point yang dicreate oleh Raspberry Pi dan download fotonya. Sangat ringkas dan problem saya dengan iPhone beres, malah benefitnya nambah karena bisa diakses oleh multiple devices pada saat yang sama. Jadi ngga ada lagi namanya temen bilang “ntar share ya….”, karena kameranya seolah-olah bilang, “silahkan ambil sendiri”.
Selamat mencoba. Mohon berikan like, komentar atau share artikel ini sehingga berguna bagi orang lain.
Source:
“http://www.raspberrypi-spy.co.uk/2014/05/simple-raspberry-pi-camera-photo-gallery-using-php/”
Related post:
“http://andidinata.com/2017/04/wifi-direct-raspberry-pi/”
April 14, 2018 1:04 pm
Tutorial buat cctv dong mas dengan pi
April 19, 2018 12:59 pm
thank you untuk masukannya. ditunggu saja
April 19, 2018 12:59 pm
thank you untuk masukannya. ditunggu saja
June 12, 2018 12:01 pm
Kalo diapplikasikan utk whatsapp bisa kah mas? Jadi semua data yang ada di WA di simpan di hdd secara otomatis
June 12, 2018 3:14 pm
Harusnya bisa mas, cuma implementasi webserver saja kok
June 16, 2019 5:32 pm
Gan saya mau tanya, saya kan bikin program pengambilan foto otomatis menggunakan suara di raspberry pi 3, saya ingin hasil foto nya bisa dikirim ke webserver dan bisa diakses juga di hp, yang mau saya tanyakan gimana cara nya saya mengupload atau mengirim foto yg sudah ditangkap oleh kamera pada raspi ke web servernya?
Terimakasih sebelumnya
June 27, 2019 6:35 am
Dari pertanyaannya saya pahami jika foto diambil oleh Raspberry Pi. Raspberry Pi sendiri bisa dijadikan webserver yang berjalan saat program image capturenya berjalan. Pendekatan tersebut lebih streamlined. Pendekatan ini membuat kamera dan webservernya jauh lebih portabel. Begitu foto diambil, maka photo sharing bisa segera dilakukan dengan konek ke Pi sebagai wifi access point.
July 12, 2020 5:50 pm
Gan, saya udah coba tapi thumbnail nya tidak muncul kenapa ya ?
gambar secara keseluruhan tidak muncul tapi kalau di klik bisa muncul
July 30, 2020 10:34 pm
Mgk bisa ditelusur di area config untuk menampilkan thumbnail