Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Yii
Code

Pemograman dengan Yii2: Membangun Komunitas dengan Voting, Komentar, dan Berbagi

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called How to Program With Yii2.
Programming With Yii2: Building a RESTful API
Programming With Yii: Generating Documentation

Indonesian (Bahasa Indonesia) translation by Kurniawan Sugi Purwanto (you can also view the original English article)

Final product image
What You'll Be Creating

Dalam seri Pemrograman Dengan Yii2 ini saya memandu para pembaca tentang penggunaan Framework Yii2 untuk PHP. Anda mungkin juga tertarik dengan Perkenalan Framework Yii2 saya, yang mengulas manfaat Yii dan mencakup juga ikhtisar tentang hal-hal yang baru di Yii 2.x.

Pendahuluan

Dalam tutorial hari ini saya akan menunjukkan Anda cara memperluas Yii supaya dengan mudah meniru situs seperti Reddit dengan voting, komentar, dan berbagi.

Baru-baru ini saya bekerja untuk menciptakan ekstensi personal saya sendiri dari templat tingkat lanjut Yii yang hebat. Templat tersbeut menyediakan registrasi pengguna dan autentikasi internal serta multi situs untuk front-end dan website administratif.

Saya membuat beberapa episode Twitter API terbaru saya di versi yang lebih awal platform ini, mengikuti teman atas nama pengguna dan menganalisis para pengikut kita. Situs yang saya deskripsikan di situ, Twixxr, membentuk dasar kerja pengubahsuaian Yii saya.

Artinya menambahkan fungsionalitas inti seperti voting, komentar, dan berbagi jauh lebih masuk akal. Seiring Anda mengekspansi codebase Yii dengan fitur-fitur ini, membuat situs baru akan lebih cepat, lebih mudah, dan semakin kuat.

Memulai

Saya akan memandu Anda menggunakan tiga plugin Yii2:

Plugin-plugin tersebut membuat pengembangan komunitas sosial di Yii2 relatif cepat dan mudah.

Saya telah membuat model yang dinamai Item yang mewakili suatu objek yang Anda ingin pengguna melakukan voting, berkomentar, dan membagikannya.

Sejujurnya, setelah membuat halaman-halaman item dengan berbagai fitur ini di platform saya, rasanya Yii lebih mengesankan lagi dari sebelum-sebelumnya... lebih mengesankan daripada yang saya rasakan ketika membuat seri startup saya. Sangat banyak yang bisa Anda lakukan dengan framework ini.

Mari kita gali lebih jauh.

Memasang Ekstensi

Pertama, mari menambahkan ketiga ekstensi tersebut sekaligus ke composer.json:

Lalu jalankan composer update.

Menambahkan Voting

Vladimir Babin adalah Chiliec, dan saya sangat menyukai cara dia dan yang lain berkolaborasi dalam menciptakan plugin ini. Semua fitur dasar yang Anda inginkan sudah tercakup, dan Anda bisa dengan mudah mengubahsuainya, secara khusus mengabaikan tampilannya. Mereka memiliki dokumentasi yang hebat dan terus memperbaruinya juga.

Berikut adalah animasi gif yang berguna dari fitur default plugin yang di-host di GitHub. Saya memasang suatu gambar statis di bawah ini (Envato Tuts+ tidak mendukung gif di tutorial-tutorial kita).

Programming With Yii - Voting Plugin Default Example

Tentu saja saya memutuskan untuk mengubahsuai tampilannya dan mengeliminasi voting, dan ini cukup mudah.

Konfigurasi

Berikutya, kita tambahkan plugin voting ke /active/config/main/php supaya dimuat di mana saja di bootstrap dan dikonfigurasi untuk aplikasi kita:

Anda bisa melihat saya menonaktifkan voting tamu sehingga orang disyaratkan untuk mendaftar agar bisa memberikan suara pada item-item.

Integrasi Database

Berikutnya Anda harus menjalankan migrasi database untuk membuat tabel yang melacak pemberian suara.

Penting untuk diingat agar migrasi ini dijalankan ketika memasang server produk Anda! Langkah ini lumayan mudah dilupakan.

Menampilkan Widget Voting

Model item saya adalah bagian dari model koleksi yang dinamai Topic, supaya Anda bisa menemuan tampilan parsial widget voting saya di 

Indeks Topic menampilkan kisi-kisi yang menampilkan _item.php sebagai suatu baris. Saya tidak ingin menampilkan peringkat, hanya total suara yang positif, jadi saya atur ke false.

Untuk menimpa (override) tampilannya saya membuat /views/vote/vote.php:

Tidak terlalu banyak plugin menjadikan penimpaan (overriding) begitu mudah.

Saya menghapus ikon vote down dan mengubah ikon vote up ke chevron. Berikut adalah penampakannya sekarang:

Programming With Yii - Voting Widget

Saya tahu ini terlihat seperti memiliki banyak lapisan, tetapi sesungguhnya tidak butuh waktu terlalu lama bagi saya untuk menjadikannya bekerja.

Menambahkan Komentar Disqus

Berikutnya saya membuat suatu situs Disqus untuk website yang akan datang ActiveTogether.org yang akan tersedia agar Anda melihat fitur-fitur ini beraksi ketika Anda membaca ini. Dengan demikian, nama singkat situs Disqus adalah 'active-together'.

Saya mulai menggunakan widget 2Amigos sebelum mengintegrasikan ekstensi sosial Kartik (dibahas di bawah ini), yang juga menawarkan komentar Disqus.

Membuat Identifier Unik untuk Tiap Papan Komentar

Ketika suatu item baru dibuat, action Item::beforeSave() membuat identifier unik bagi Disqus untuk menautkan komentar juga. Anda juga bisa bergantung pada URL suatu halaman, tetapi secara umum ini lebih bisa dipredikis.

Dengan kata lain, Disqus menyusun semua komentar untuk tiap item secara terpisah, dan itu membantu dalam penataan papan komentar tiap itemnya.

Menampilkan Komentarnya

Kemudian, papan komentar dengan mudah ditampilkan di dasar tampilan Iten di /active/views/Item.php:

Perhatikan bagaimana widget membutuhkan shortname dan identifier untuk menyediakan Disqus untuk komentar-komentarnya.

Berikut adalah contoh penampakan papan komentar:

Programming With Yii - Item Page with voting sharing and comments board

Index View Dengan Hitungan Komentar

2Amigos juga menjadi daya ungkit pustaka JavaScript Disqus karena menampilkan hitungan komentar. Tetapi ada beberapa keping yang perlu disatukan untuk melakukannya.

Pertama, saya membuat suatu skrip jQuery untuk meminta hitungan komentar satu item. Apabila ada banyak item di satu halaman, Anda harus memintanya dengan reset: true;:

Lalu saya membuat file TopicAsset.php untuk memuat file .js:

Kemudian, file /active/views/Topic.php meregistrasi TopicAsset bundle:

Berikutnya, tiap parsial _item.php mengandung suatu penghitung komentar:

Dan parsial _social menampilkannya seperti ini dengan menggunakan masing-masing Item->identifier:

Agar Disqus bisa menemukan lokasi untuk memperbarui elemen dengan hitungan komentar, tiap tautan harus diakhiri dengan #disquss_thread.

Berikut adalah penampakan halamannya.Tiap item memiliki hitungan komentar yang berbeda yang dimuat dengan mereferensikan identifier-nya:

Programming With Yii - Index page of with voting and social comments and sharing

Mari kita lanjutkan ke tombol berbagi media sosial yang sudah Anda lihat.

Menambahkan Berbagi ke Media Sosial

Kartik telah melakukan kerja yang hebat dengan widget sosialnya yang membangun konfigurasi dasar untuk koneksi ke sejumlah perusahaan media sosial seperti Twitter, Disqus, dan Facebook. Untuk saat ini, saya hanya menggunakan tombol berbagi Facebook. Tombol berbagi Twitter secara estetika tidaklah sangat bagus, jadi saya menggantinya dengan suatu tautan web intent HTML.

Berikut adalah kode saya untuk pasangan tombol di samping hitungan komentar di /active/views/topic/_social.php:

Kelihatannya sederhana, kecuali menyejajarkan secara vertikal widget Facebook membutuhkan beberapa penyesuaian CSS. Saya meletakkan penyesuaian tersebut di  /active/views/topic/_grid.php:

Penyesuainnya harus dilakukan setelah semua file CSS lainnya dimuat.

Dan di file site.css, saya menempatkan ini untuk mendapatkan tampilan presisi seperti yang saya inginkan:

Kesimpulan

Sejujurnya, saya sangat senang akan betapa mudahnya menggunakan Yii dan secara esensial membuat kloning sosial mini. Ini adalah plugin-plugin hebat untuk framework yang hebat, dan secara umum pengembang Yii dan komunitas pengembang pluginnya bersikap responsif di GutHub terhadap berbagai pertanyaan dan isu.

Saya harap Anda bersemangat untuk memeriksa ActiveTogether dan mencoba framework ini untuk diri Anda sendiri.

Jika Anda ada pertanyaan atau saran, silakan kirimkan dalam komentar di bawah ini. Jika Anda ingin terus mengikuti tutorial Envato Tuts+ saya di kemudian hari dan juga seri-seri yang lain, silakan kunjungi halaman instruktur saya atau ikuti @lookahead_io. Pastikan mengecek seri startup saya dan Meeting Planner.

Tautan-Tautan Terkait

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.