ANALISIS DAN PERANCANGAN SOSIAL NETWORKING BERBASIS WEBSITE MENGGUNAKAN PHP DAN GOOGLE MAPS
Naskah Publikasi
diajukan oleh : Uyock Anggoro Saputro 05.11.0927
kepada SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER AMIKOM YOGYAKARTA 2012
NASKAH PUBLIKASI
DESIGN AND ANALYSIS OF WEB BASED SOCIAL NETWORKING WITH PHP AND GOOGLE MAPS ANALISIS DAN PERANCANGAN SOSIAL NETWORKING BERBASIS WEBSITE MENGGUNAKAN PHP DAN GOOGLE MAPS Uyock Anggoro Saputro Jurusan Teknik Informatika STMIK AMIKOM YOGYAKARTA ABSTRACT Internet is one of computer and communication technology which currently growing and become very popular. Some of internet popular facility is a social networking website. Social networking sites allow their user to communicated each other without need to meet, just via internet. With that advantages, the author designed a social networking website which integrated with google maps. Google maps allow users to find out the location easier and detailed. This social networking is build using PHP programing language and MySQL database server. This social networking website allow users to find out the location on real world easier because of google maps integration. User of this social networking website can easily to send a message with each other, sharing a photos, and even comment to other user. This website is build with PHP and MySQL programming language that is dynamic website, it mean users can make any change the data as they like without need to change the script. Keyword : Internet programing, social networking, google maps.
1
1.
Pendahuluan Perkembangan teknologi dewasa ini memungkinkan seseorang untuk memperoleh
informasi secara cepat dan akurat. Internet merupakan suatu teknologi di bidang komputer dan komunikasi yang saat ini semakin berkembang dan populer. Internet dapat pula digunakan untuk membuat suatu jaringan sosial. Website - website jejaring sosial menjadi suatu tren di kalangan para pengguna internet beberapa tahun belakangan ini. Selain jaringan sosial aplikasi dalam internet yang cukup menarik dan fungisional adalah Google Maps. Dengan bantuan Google Maps kita bisa mengganti cara pemetaan konvensional dengan cara menggambar peta secara digital. Berdasar uraian di atas maka penulis bertujuan melakukan penelitian ini dengan mengambil judul “Analisis dan Perancangan Sosial Networking Menggunakan PHP dan Google Maps”. 2.
Dasar Teori
2.1.
Konsep Dasar Sistem
2.1.1. Pengertian Sistem Sistem diartikan sebagai konsep dasar atau elemen yang melakukan suatu kegiatan atau operasi secara bersama-sama untuk dapat mencapai sasaran atau tujuan tertentu. 2.1.2. Karakteristik Sistem a. Memiliki Komponen (Component) b. Memiliki Komponen (Component) c.
Memiliki Lingkungan (Environment)
d. Memiliki Penghubung (Interface) e. Memiliki Masukan (input) f.
Memiliki Keluaran (Output)
g. Memiliki Pengolah (Process) 2.2.
Konsep Dasar Informasi
2.2.1. Pengertian Informasi Menurut Davis (1999), informasi adalah data yang telah diolah menjadi sebuah bentuk yang berarti bagi penerimanya dan bermanfaat dalam pengambilan keputusan saat ini atau saat mendatang. 2.2.2. Siklus Informasi
2
Data ditangkap sebagai input, diproses lewat suatu model, dihasilkan informasi, ditangkap penerima untuk mengambil suatu keputusan tindakan, hasil tindakan kembali menjadi data dan seterusnya membentuk suatu siklus 2.2.3. Kualitas Informasi a. Akurat b. Tepat waktu c.
Relevan
2.2.4. Pengertian Sistem Informasi Sistem informasi didefinisikan sebagai sistem yang mempertemukan kebutuhan pengolahan transaksi harian, mendukung operasi, bersifat manajerial dan kegiatan strategis dari suatu organisasi dan menyediakan laporan-laporan yang diperlukan. 2.2.5. Komponen Sistem Informasi a. Komponen Input b. Komponen Output c.
Komponen Basis Data
d. Komponen model e. Komponen Teknologi f. 2.3.
Komponen Kontrol
Konsep Basis Data Database merupakan sekumpulan data yang saling terintegrasi satu sama lain dan
teroganisasi berdasarkan sebuah skema atau struktur tertentu dan tersimpan pada sebuah hardware komputer. 2.3.1. Pemodelan Proses Ada 3 (tiga) teknik/konsep dasar dalam OOA/D, yaitu pemodulan (encapsulation), penurunan (inheritance) dan polymorphism. 2.3.2. Pemodelan Data Data model adalah cara formal untuk menggambarkan data yang digunakan dan diciptakan dalam suatu sistem. 2.3.3. UML (Unified Modeling Language) UML (Unified Modeling Language) adalah sebuah bahasa yang berdasarkan grafik/gambar
untuk
memvisualisasi,
menspesifikasikan,
membangun,
dan
3
pendokumentasian dari sebuah sistem pengembangan software berbasis OO(ObjectOriented). 2.3.4. Use Case Diagram Use case diagram menggambarkan fungsionalitas yang diharapkan dari sebuah sistem. Yang ditekankan adalah “apa” yang diperbuat sistem, dan bukan “bagaimana”. Sebuah use case merepresentasikan sebuah interaksi antara aktor dengan sistem. 2.3.5. Class Diagram Class adalah sebuah spesifikasi yang jika diinstansiasi akan menghasilkan sebuah objek dan merupakan inti dari pengembangan dan desain berorientasi objek. Class menggambarkan keadaan (atribut/properti) suatu sistem, sekaligus menawarkan layanan untuk memanipulasi keadaan tersebut (metoda/fungsi). 2.3.6. Sequence Diagram Sequence diagram menggambarkan interaksi antar objek di dalam dan di sekitar sistem (termasuk pengguna, display, dan sebagainya) berupa message yang digambarkan terhadap waktu. Sequence diagram terdiri atar dimensi vertikal (waktu) dan dimensi horizontal (objek-objek yang terkait). 2.3.7. Normalisasi Normalisasi adalah teknik yang digunakan untuk memvalidasi model data. Serangkaian data model logis untuk meningkatkan pengaturanya. 2.3.8. SQL (Structured Query Language) SQL (Structured Query Language) adalah salah satu bahasa generasi level ke-4, bahasa yang bersifat requst oriented dan non-prosedural dan terdiri dari : a. DDL (Data Definition Language) b. DML (Data Manipulation Language) 2.4.
Konsep Dasar Internet
2.4.1. Definisi Internet Internet adalah jaringan dari banyak jaringan yang menghubungkan komputer dari seluruh dunia. 2.4.2. Jenis layanan Internet a. WWW (world wide web) b. Steraming c.
e-mail
4
d. Mailing list e. Usened/News Groups f.
Online Chat
g. File Transfer 2.5.
Dasar Teori Jejaring Sosial
2.5.1. User Generated Content User
Generated
Content
didefinisikan
sebagai
sebuah
teknologi
yang
memungkinkan para pengguna untuk menambahkan atau meninjau ulang halaman website mereka sendiri. 2.5.2. Jejaring Sosial Jejaring sosial adalah suatu struktur sosial yang dibentuk dari simpul-simpul (yang umumnya adalah individu atau organisasi) yang diikat dengan satu atau lebih tipe relasi spesifik seperti nilai, visi, ide, teman, keturunan, dll. 2.5.3. Website Jejaring Sosial Website jejaring sosial adalah sebuah website yang mengakomodasi seorang user untuk membuat profil online ataupun halaman pribadi yang digunakan untuk membangun jejaring sosial. Tiga aktivitas utama dalam website jejaring sosial adalah : identity, komunikasi, dan sharing. 2.5.4. Teori Sosialisasi Sosialisasi adalah satu konsep umum yang bisa dimaknakan sebagai sebuah proses dimana manusia belajar melalui interaksi dengan orang
lain, tentang cara
berpikir, merasakan, dan bertindak. 2.6.
Google Maps API Google Maps adalah sebuah jasa peta online gratis yang disediakan oleh google
dan dapat ditemukan di http://maps.google.com yang memberikan kemudahan, keuntungan kepada penggunanya untuk mencari tempat-tempat atau daerah yang diinginkan dengan cepat dan akurat. 2.6.1. Menggunakan Google Maps API Menulis program Google Map API dapat dilakukan dengan urutan sebagai berikut: a. Memasukkan Maps API JavaScript ke dalam HTML b. Membuat element div dengan nama map_canvas untuk menampilkan peta c.
Membuat beberapa objek literal untuk menyimpan property-properti pada peta
d. Menuliskan fungsi JavaScript untuk membuat objek peta
5
e. Meng-inisiasi peta dalam tag body HTML dengan event onload 2.6.2. Google Maps API Key Bentuknya kurang lebih seperti di bawah (dan berbeda-beda bagi tiap pengguna) ABQIAAAA8tt4eKTuBZMVnLJfP2BZrBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxS4Rz1 LFzG0odNPtk8VLkdrQF5grA Key yang digunakan di atas digunakan untuk computer local (localhost). 2.7.
Software Yang Digunakan
2.7.1. Web Server a. Apache b. MySQL c.
PHP (Hypertext Prepocessor
2.7.2. Web Browser Web Browser adalah suatu program yang digunakan untuk menjelajahi dunia Internet atau untuk mencari informasi tentang suatu halaman web yang tersimpan di komputer. 2.7.3. Web Editor Adobe Dreamwaver Cara kerja
Adobe Dreamweaver
didukung oleh penglolaan situs yang dapat
menyesuaikan link bila misalnya nama halaman atau tempatnya berubah. 2.7.4. Image Editor Adobe Photoshop Adobe Photoshop merupakan perangkat lunak pengolah foto dan grafis berkualitas tinggi. 2.7.5. Vector Image Editor Adobe Illustrator Adobe Illustrator
merupakan perangkat lunak pengolah gambar vektor secara
profesional. Adobe Illstrator
sangat bermanfaat untuk mendesain gambar yang
berkatitan dengan vektor. 3.
Analisis Dan Perancangan
3.1.
Analisis Sistem Informasi Tahap analisis sistem dilakukan sebelum tahap perncanaan sistem (system
planning) dan tahap desain sistem (system design). 3.1.1. Identifikasi Masalah
6
Di dalam analisis sistem, pengidentifikasian masalah merupakan langkah awal yang harus dilakukan. Masalah (problem) dapat didefinisikan sebagai suatu hal yang menghambat proses pencapaian tujuan. Permasalahan yang ada harus ditindaklanjuti untuk dicari pemecahannya sebagai salah satu alternatif agar sistem tersebut dapat berjalan sesuai dengan yang diharapkan dan sasaran atau tujuan sistem dapat tercapai. 3.1.2. Analisis Kebutuhan Sistem Pengembangan sistem ini agar menjadi sistem yang baik harus ditunjang dengan teknologi yang memadai dari perangkat keras dan perangkat lunak. 3.1.3. Analisis Kebutuhan Pengguna Sistem Karena program yang akan dibuat berbasis web/jaringan, maka sistem yang dibutuhkan user adalah sistem yang mampu menjangkau web dengan aplikasi internet browser. 3.2.
Perancangan Database
3.2.1. Normalisasi Normalisasi adalah merupakan proses pengelompokan elemen menjaid tabel-tabel yang menunjukkan entity atau relasinya. 3.2.2. Relasi antar tabel Relasi antar tabel merupakan gambaran hubungan antara tabel satu dengan tabel lainnya. Hubungan tersebut tandai melalui primary-key dan foreign-key.
Gambar 1 Relasi antar tabel
7
3.3.
Perancangan Struktur Tabel a. Tabel User
Gambar 2 Tabel User
b. Tabel Info
Gambar 3 Tabel Info
c.
Tabel Teman
Gambar 4 Tabel Teman
d. Tabel Pesan
Gambar 5 Tabel Pesan
8
e. Tabel Gambar
Gambar 6 Tabel Gambar
f.
Tabel Album
Gambar 7 Tabel Album
g. Tabel Komentar
Gambar 8 Tabel Komentar
3.4.
Rancangan Proses Perancangan proses disajikan dalam bentuk logic model dengan menggunakan
tools UML (Unified Modeling Language). 3.4.1. Aktor Menggambarkan pengguna software aplikasi. Aktor membantu member suatu gambaran jelas tentang apa yang akan dikerjakan software aplikasi. 3.4.2. Use Case Diagram
9
Daftar
Masukkan Data Diri
Lihat Index Tambah Album
Profil
Tambah Gambar
Login User
Ubah Data Diri Lihat Album Lihat Komentar
Cari Teman Kirim Pesan
Lihat Pesan
Tambah Teman
Kirim Komentar
Lihat Album
Gambar 9 User Case Diagram
3.4.3. Sequence Diagram Sequence diagram yang terdapat dalam website : a. Mendaftar situs b. Login user c.
Update data user
d. Lihat profil e. Tambah album f.
Tambah gambar
g. Ubah data diri h. Tambah teman
3.5.
i.
Kirim Pesan
j.
Kirim Komentar
Perancangan Tatap Muka Rancangan menu yang ada di halaman pengunjung/anggota antara lain : a. Rancangan halaman index b. Rancangan halaman daftar c.
Rancangan halaman daftar2
d. Rancangan halaman profil e. Rancangan halaman update data diri f.
Rancangan halaman pesan
g. Rancangan halaman album h. Rancangan halaman detail album i.
Rancangan halaman member
j.
Rancangan halaman detail member
k.
Rancangan halaman teman
l.
Rancangan halaman detail teman
10
4.
Implementasi Sistem Dan Pembahasan
4.1.
Implementasi Sistem Implementasi sistem merupakan tahap merealisasikan sistem yang baru
dikembangkan supaya nantinya sistem tersebut siap diimplementasikan sesuai dengan yang diharapkan. Adapun tujuan dalam tahap imlementasi ini adalah menyiapkan semua kegiatan penerapan sistem sesuai dengan rancangan yang telah ditentukan. 4.1.1. Implementasi Basis Data Setelah
perancangan
database
dibuat,
langkah
selanjutnya
yaitu
mengimplementasikan dengan sebuah database server. Untuk membangun website jejaring sosial ini, digunakan database server PhpMyAdmi yang berbasis MySql yang sering digunakan dengan PHP. 4.1.2. Impelmentasi Pembuatan Tabel a. Tabel user Tabel ini berisi informasi dasar milik user. b. Tabel info Tabel info berisi informasi lebih mendetail mengenai user. c.
Tabel pesan Semua pesan yang dibuat oleh user di dalam web akan tersimpan di tabel pesan.
d. Tabel komentar Tabel komentar menyimpan segala informasi mengenai komentar yang dikirimkan oleh user ke user lainnya. e. Tabel teman Tabel teman berisi data pertemanan masing masing user. f.
Tabel album Tabel album berguna untuk menyimpan informasi album gambar yang dibuat oleh user.
g. Tabel gambar Setelah membuat album maka user akan memasukkan gambar – gambar pada album tersebut, gambar – gambar tersebut akan didata dan dimasukkan di tabel gambar. 4.2.
Pemrograman dan pengujian Penulisan kode program merupakan kegiatan yang terbesar dalam tahap
implementasi sistem. Pemrograman adalah kegiatan menuliskan kode program yang
11
akan dieksekusi oleh komputer. Kode program yang akan ditulis oleh pemrogram harus berdasarkan dokumentasi yang disediakan oleh analis sistem dan hasil dari desain sistem secara rinci. 4.2.1. Pembahasan Program untuk Website a. Koneksi Setiap melakukan penulisan query ke dalam database, diperlukan perintah untuk koneksi ke database yang akan digunakan menggunakan file koneksi.php dengan script sebagai berikut :
b. Validasi halaman login user Agar dapat mengakses situs secara penuh maka pengunjung harus login terlebih dahulu dengan cara memasukkan username dan password, dijelaskan jika variabel username atau password belum diisi dan tetap melakukan login, maka akan muncul peringatan “Username atau Password belum diisi, silakan kembali” dan akan mengirimkan user kembali ke halaman utama/index.
Gambar 10 Validasi username dan password
c.
Menampilkan peta google maps Website jejaring sosial ini terintegrasi dengan google maps yang berguna untuk mendapatkan informasi tentang lokasi user yang mendafatarkan diri.
12
Gambar 11 Tampilan google maps dalam situs
d. Validasi prosses dan session Dalam website jejaring sosial ini terdapat beberapa proses yang seharusnya hanya bisa diakses oleh user aktif yang telah login atau terdaftar dalam session.
Gambar 12 Validasi hak akses pesan
4.3.
Implementasi Halaman Situs
4.3.1. Halaman Home atau Index Halaman home merupakan halaman utama dari website jejaring sosial yang akan dibuat. Halaman ini dapat diakses oleh seluruh pengunjung. 4.3.2. Halaman User a. Halaman daftar Halaman ini ditujukan bagi pengunjung yang belum memilik akun untuk mendaftarkan diri ke dalam sistem. b. Halaman daftar 2 Halaman ini ditujukan untuk user yang telah mendaftar di halaman daftar. Pada halaman ini user diminta memasukkan data lebih rinci tentang user.
13
Gambar 13 Tampilan halaman daftar2
c.
Halaman profil Halaman
ini
berisikan
informasi
yang
telah
diisikan
oleh
member
bersangkutan. Halaman ini merupakan halaman utama dari website jejaring sosial ini.
14
Gambar 14 Tampilan halaman profil
d. Halaman update data diri Halaman update data diri digunakan untuk mengubah data – data yang telah dimasukkan oleh user. e. Halaman member Halaman member berisi daftar member yang telah terdaftar di situ jejaring sosial. f.
Halaman pesan Halaman pesan berisi pesan – pesan yang dikirimkan oleh user lain yang telah menjadi teman.
g. Halaman album Halaman album berisikan album – album gambar milik user, di halaman ini user dapat menambahkan album baru ataupun menghapus album lama yang sudah tidak diinginkan. h. Halaman teman
15
Halaman ini berisi daftar member yang telah menjadi maupun meminta untuk menjadi teman dari user aktif. 5.
Penutup
5.1.
Kesimpulan Secara lebih rinci dapat diambil beberapa kesimpulan – kesimpulan pokok yaitu
sebagai berikut : a. Penggunaan google maps dalam jejaring sosial ini memudahkan pengguna untuk mengetahui lokasi secara mendetail tentang pengguna lainnya, b. Penguna website jejaring sosial ini dapat berkirim pesan kepada pengguna lainnya dengan mudah, c.
Pengguna website jejaring sosial ini dapat berbagi foto – foto terbaru dengan pengguna lainnya tanpa harus mencetak ataupun mengirimkannya secara langsung,
d. Website jejaring sosial ini dibangun dengan bahasa pemrograman PHP dan MySQL yang merupakan website dinamis, dimana data – data didalamnya dapat diubah – ubah sesuai dengan keinginan pengguna, e. Website jejaring sosial ini masih bersifat prototype, maka website ini belum bisa di-upload di web server internet. 5.2.
Saran Website jejaring sosial ini jauh dari kata sempurna oleh sebab itu untuk
menyempurnakan sistem yang telah dibuat, maka terdapat beberapa saran yang dapat disampaikan, antara lain : a. Jejaring sosial berbasis web ini sangat mungkin untuk dijadikan sebagai dasar dalam pengembangan Sistem Informasi berbasis web lainnya, b. Karena perkembangan website jejaring sosial saat ini cukup pesat maka sangat dimungkinkan untuk dapat ditambahkan modul – modul tambahan dalam website jejaring sosial ini, c.
Website jejaring sosial ini merupakan website yang terbuka penggunaan untuk umum, maka dari itu untuk faktor keamanan sangat dimungkinkan untuk menambah algoritma keamanan yang lebih aman dalam website jejaring sosial ini,
d. Pembuatan jejaring sosial telah terintegrasi dengan google maps, maka sangat dimungkinkan untuk bisa diaplikasikan pada perangkat mobile dengan dukungan GPS agar lebih memudahkan dalam menemukan lokasi.
16
DAFTAR PUSTAKA
Annex, 2008. Social Networking Qualitative research report, efcom office communication http://www.ofcom.org.uk, april 2008. Hakim, Lukman. 2008. Membongkar Trik Rahasia Para Master PHP. Yogyakarta : Penerbit Lokomedia. Hakim, Lukman. 2009. Trik Rahasia Master PHP Terbongkar Lagi. Yogyakarta : Penerbit Lokomedia. Hartono, Jogiyanto. 1999. Analisis dan Desain Sistem Informasi : Pendekatan Terstruktur Teori. Mcloud, Raymond Jr. 2001. Sistem Informasi Managemen Jilid 2(Edisi Bhs Indonesia). Jakarta : PT. Prenhalindo. http://www.id.scribd.com/doc/16846801/Tutorial-Dasar-Pemrograman-Google-Maps-API
