Proposal Membuat Web

1.        PENDAHULUAN

Kebutuhan dan gaya hidup masyarakat pada era saat ini menimbulkan munculnya perkembangan dalam berbagai bidang salah satunya teknologi. Pesatnya kemajuan teknologi tidak bisa dipungkiri dengan semakin memanjakan manusia, contohnya dalam hal berkomunikasi. Berkomunikasi merupakan suatu hal yang tidak dapat dipisahkan dalam kehidupan manusia untuk menjalin sosialisasi dengan manusia yang lain. Dengan pesatnya kemajuan teknologi, komunikasi atau interaksi menjadi semakin mudah dan sangat membantu. Dan saat ini yang sedang marak bahkan menjadi fenomena di masyarakat yaitu social networkingatau lebih dikenal dengan jejaring sosial[1].

Jejaring sosial mampu menciptakan sebuah dunia baru yang memungkinkan setiap manusia berkomunikasi atau berinteraksi satu sama lain tanpa perlu bertatap muka. Selain untuk berkomunikasi atau berinteraksi  sebagai fungsi utamanya, jejaring sosial dapat juga berfungsi untuk berdagang, menyebarkan hasil karya, dan mempromosikan berbagai macam hal. Berdasarkan latar belakang tersebut, penulis bertujuan untuk membuat sebuah jejaring sosial yang bersifat general purpose dan mengimplementasikannya sebagai sarana untuk memperkenalkan atau mempromosikan tempat-tempat wisata yang terdapat di Indonesia. Target pengguna dari web based application ini ditujukanuntuk perusahaan travel, tempat-tempat wisata, tempat penginapan yang berada di sekitar tempat wisata, maupun personal user dan berbagai macam enterprise lainnya yang membutuhkan jejaring sosial sebagai sarana marketing.

2.      PEMBAHASAN

Secara teknis, website ini dibangun menggunakan 3 jenis framework. Pada sisi server, segala jenis pemrosesan di kelola menggunakan Laravel PHP Framework, pemrograman di sisi client di tangani oleh Angular JavaScript Framework, dan tampilannya di desain menggunakan Bootstrap HTML Framework. Database yang digunakan adalah MYSQL. Sampai proporsal ini dikumpulkan, tampilan aplikasi hanya di optimalkan untuk tampilan desktop dengan browser Goggle Chrome.

2.1.   LARAVEL PHP FRAMEWORK

Pada pembuatan aplikasi ini, Laravel bertanggung jawab sebagai PHP framework yang menangani request dari client menuju server apakah request tersebut untuk meminta data dari database (GET)  atau memasukkan data ke database (POST). Setiap tabel entitas pada database, memiliki satu ‘Model’ untuk berinteraksi dengan tabel tersebut. Laravel memiliki fitur Object Relational Mapping (ORM) bernama Eloquent yang mempermudah proses interaksi antara aplikasi dan database. Dengan Eloquent memungkinkan untuk memanipulasi data dalam database hanya dengan 1 baris perintah. Selanjutnya setelah Laravel medapatkan atau memasukkan data ke dalam database, Laravel akan mengirim response dari request tersebutkembali ke client. Response tersebut berupa data yang diformat dalam bentuk JSON. Sebagai contoh, URL untuk menampilkan halaman userprofile pada aplikasi ini formatnya adalah http://www.timesquare.dev/{username}jadi jika pada URL browser diketikkan (request)http://www.timesquare.dev/rancakadityo, Laravelakan mengambil seluruh data yang berhubungan dengan user rancakadityo dari database, lalu mengirimkannya (response) menuju client dan dimuat kedalam halaman yang didedikasikan khusus untuk user profile. Data tersebut berupa profile, foto, followers dan following dari user tersebut. Terdapat juga API yang membantu proses pengembangan pada sisi Laravel, yaitu Intervention/Image. Intervention/Image adalah API yang dibangun untuk menangani proses pengunggahan dan pemberian nama pada foto[2].

2.2.   ANGULAR JAVASCRIPT FRAMEWORK

Sementara Laravel bekerja sebagai server-side framework, di sisi client terdapat AngularJs yang berfungsi untuk menangkap data yang di kirim dari server menggunakan Laravel. AngularJs adalah framework yang digunakan untuk menangani segala pemrosesan web di sisi client yang di tulis dengan bahasa pemrograman JavaScript. Karena data yang dikirim dari Laravel berbentuk JavaScript Object Nation (JSON), maka data yang dikirim dapat langsung di manipulasi oleh AngularJs. AngularJs juga berperan penting dalam beberapa proses pengambilan dan pemasukkan data menggunakan teknik Asynchronous JavaScript and XML (AJAX). AJAX adalah suatu teknik yang memungkinkan untuk mengambil atau mengirim data dari atau menuju server tanpa harus memuat ulang keseluruhan halaman. Pada search box dan tag user box proses pengambilan data user dilakukan dengan menggunakan teknik AJAX, pada comment box proses memasukkkan comment, menampilkan comment yang baru di masukkan, dan menghapus comment dilakukan menggunakan teknik AJAX. Begitupun juga dengan proses memberikan sticker pada foto. Setiap data pada proses tersebut dikirim dari client menggunakan teknik AJAX yang ditangani oleh AngularJs, menuju server yang di tangani oleh Laravel, lalu dari server dimasukkan menuju Database. Proses untuk pengambilan data pun dilakukan dengan cara yang sama. Laravel mengambil data dari database, lalu data tersebut dikirim dalam format JSON, kemudian dikirim menuju client dan ditangkap oleh AngularJs. Adapun beberapa API JavaScript yang digunakan untuk menangani proses di sisi client[3].

·         UI-BOOTSTRAP

API Bootstrap.js yang ditulis sepenuhnya menggunakan AngularJS. API ini digunakan untuk membuat popover pada sticker dan searchbox.

·         NG-IMG-CROP

API yang digunakan untuk menangani proses cropping foto pada avatar dan foto user.

·         JQUERY

Library JavaScript yang digunakan untuk memberikan efek animasi pada beberapa elemen HTML.

·         SELECT2

API yang digunakan untuk membuat fitur user tagging pada saat upload foto.

·         MOMENT

API yang digunakan untuk memanipulasi tanggal dan waktu pada JavaScript. Moment berperan untuk menampilkan format tanggal dan waktu menjadi format yang mudah dibaca oleh manusia. Contoh: 2 minutes ago, a few seconds ago, two days ago.

2.3.   BOOTSTRAP HTML FRAMEWORK

Selain PHP dan JavaScript, tentunya sebuah website juga tidak akan lepas dari HTML untuk pembuatan halaman webnya. Disini pengembang menggunakan Bootstrap untuk membuat desain dasar tampilan halamannya. Hampir setiap element HTML pada halaman di desain menggunakan Bootstrap[3].

2.4.   DATABASE MODEL DIAGRAM

Gambar 1 Database Model Diagram Jejaring Sosial

·         USERS

Tabel users pada aplikasi digunakan untuk menyimpan data utama pada user, dimana data tersebut jarang mengalami perubahan. Tabel users ini adalah tabel utama pada database, karena seluruh tabel di dalam database memiliki relasi dengan tabel users. Tabel users memiliki relasi 1:1 dengan tabel profiles, M:N unary dengan tabelnya sendiri sehingga menghasilkan tabel pivot yaitu user_friend, M:N dengan tabel stickers,1:N polimorfis dengan tabel photos, dan1:N dengan tabel comments, albums, dan stickerables.

·         USER_FRIEND

Tabel ini adalah tabel pivot yang dihasilkan dari relasi M:N unary tabel users, yang artinya 1 user dapat berteman dengan banyak user lainnya. Digunakan untuk menyimpan data followers dan following.

·         PROFILES

Tabel ini adalah tabel anak dari relasi 1:1 dengan tabel induknya yaitu tabel users. Sebenarnya dapat dijadikan dalam 1 tabel dengan tabel users, namun pengembang memisahkan antara data yang bersifat utama dan optional untuk memudahkan proses pengembangan ke depannya jika terdapat banyak data yang bersifat optional.

·         ALBUMS

Tabel ini memiliki 2 relasi, yaitu N:1 dengan tabel users, dan 1:N polimorfis dengan tabel photos. Relasinya dapat dibaca seperti, 1 user dapat memiliki banyak album, dan setiap album dapat memiliki banyak foto.

·         PHOTOS

Tabel ini bersifat 1:N polimorfis dengan tabel users dan album. Artinya tabel ini adalah anak dari tabel users dan albums, karena 1 orang user dapat memiliki banyak foto (tanpa album), dan 1 album yang dimiliki oleh seorang user juga dapat memiliki banyak foto. Sehingga tabel ini menyimpan foto dari users dan albums. Field photoable_id digunakan sebagai foreign key dari tabel users dan albums, dimana field photoable_type digunakan untuk menyimpan ‘model’nya apakah itu ‘User’ atau ‘Album’[4].

·         COMMENTS

Tabel ini memiliki 2 jenis relasi, yang pertama adalah N:1 dengan tabel users dan N:1 polimorfis dengan tabel photos dan albums. Relasinya dapat dibaca seperti, 1 user dapat memberikan banyak komentar pada 2 entitas yang berbeda yaitu photos dan albums.

·         STICKERS

Tabel ini adalah tabel yang bersifat statis, atau jarang mengalami perubahan. Digunakan untuk menyimpan data stickers. Memiliki relasi M:N dengan tabel users, dan M:N polimorfis dengan tabel photos dan albums sehigga menghasilkan tabel pivot polimorfis bernama stickerables[4].

·         STICKERABLES

Tabel terakhir adalah tabel stickerables. Tabel ini adalah tabel pivot polimorfis. Tabel ini dihasilkan dari 2 relasi sekaligus, yaitu M:N antara tabelusers dan stickersdan M:N polimorfis dengan tabel photos dan albums. Secara keseluruhan relasi pada tabel ini dapat disebutkan, Setiap user dapat memberikan tiap-tiap sticker yang disediakan, untuk diberikan pada 2 entitas yang berbeda, yaitu photos dan albums.

2.5.   STRUKTUR NAVIGASI

Timeline

Profil

Followers

Following

Photos

Logout

Show Photos

 

Pada saat user atau pengguna mengakses http://www.timesquare.hol.es  maka akan muncul timeline dari aplikasi tersebut. Di dalam timeline terdapat profil dari user dan tombol untuk keluar dari user yang sedang dipakai. Pada profil, terdapat list atau daftar foto yang telah diupload, followers dan following. User juga dapat memilih foto pada list foto untuk melihat foto nya lebih jelas, serta melihat komentar dari user lain tentang foto tersebut.

2.6.   TAMPILAN APLIKASI

Gambar 2. Tampilan Form Create Account

Gambar 1 merupakan tampilan form create account, dimana didalam form tersebut terdapat username, email, password dan confirm password.

Gambar 3. Tampilan Form Sign in

Gambar 2 merupakan tampilan form sign in, dimana didalam form tersebut terdapat username dan password

Gambar 4. Tampilan Timeline

Gambar 3 merupakan tampilan timeline pada timesquare, didalam timeline terdapat foto yang diupload oleh beberapa user.

Gambar 5. Tampilan Profile

Gambar 5 merupakan tampilan profile, didalamnya terdapat foto profile, bio, dan waktu user mendaftar.

Gambar 6. Tampilan Edit Profile

Gambar 6 merupakan tampilan edit profile, pada tampilan ini user dapat merubah name, bio website, dan mengganti foto profile.

Gambar 7. Tampilan Search

Gambar 7 merupakan tampilan untuk mencari user lain

Gambar 8. Tampilan Upload Photo

Gambar 8 merupakan tampilan untuk mengupload foto, men-tag user lain, serta mengisi caption.

Gambar 9. Tampilan List Foto By User

Gambar 9 merupakan tampilan list foto yang diupload oleh user

Gambar 10. Tampilan List Foto By Others

Gambar 10 merupakan tampilan list foto yang diupload oleh user lain dan di tag kepada user yang memiliki profile tersebut.

Gambar 11. Tampilan Followers

Gambar 11 merupakan tampilan followers.

Gambar 12. Tampilan Sticker

Gambar 12 merupakan tampilan sticker, user dapat memberi sticker pada gambar timeline.

Gambar 13. Tampilan Comment

Gambar 13 merupakan tampilan untuk memberi comment pada foto.

DAFTAR PUSTAKA

[1]Abrar, Ana Nadya. 2003. Perspektif Ilmu Komunikasi. LESFI, Yogyakarta.

[2] Rohman,Abdul. 2014. Mengenal Framework Laravel. Tangerang.

[3] Stephen Radford. 2015.Learning Web Development with Bootstrap and AngularJS.Pack Publishing.Birmingham.

[4] Taylor Otwell. 2015. Eloquent Relationship. http://laravel.com/docs/5.2/eloquent-relationships.