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

Membangun Startup Anda: Menyesuaikan Tampilan Rapat

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Muhammad Gufron (you can also view the original English article)

Final product image
What You'll Be Creating

Pengenalan

Tutorial ini adalah bagian dari Seri Membangun Startup Anda dengan PHP pada Envato Tuts +. Dalam seri ini, saya memandu Anda melalui peluncuran startup dari konsep ke realitas menggunakan aplikasi Meeting Planner saya sebagai contoh nyata. Setiap langkah di sepanjang jalan, aku akan melepaskan kode Meeting Planner sebagai open source contoh Anda dapat belajar dari. Saya juga akan menangani masalah-masalah startup yang terkait dengan bisnis ketika mereka muncul.

Mengapa Gap dalam seri ini?

Anda mungkin menyadari bahwa telah ada kesenjangan yang besar dalam waktu antara episode terakhir dan yang satu ini. Pada April tahun 2015, aku didiagnosis dengan tumor otak yang diperlukan operasi dan radiasi. Saya sangat beruntung secara keseluruhan untuk memiliki perawatan yang baik, dan semuanya berjalan dengan baik — banyak orang tidak memiliki akses ke kualitas sumber daya bedah saraf yang tersedia bagi saya dengan asuransi kesehatan di Pacific Northwest Saya telah menulis lagi untuk Envato Tuts + sejak terakhir jatuh, tapi itu menyenangkan untuk akhirnya kembali fokus ke seri startup, dan saya harap Anda menikmatinya.

Apa Penutup Episode Ini?

Dalam tutorial ini, kita akan membahas fitur kustom yang diperlukan untuk memberikan view yang berbeda tergantung pada yang melihat pertemuan undangan. Sebelum kami mulai mengirim undangan ke peserta melalui email, kami harus memiliki pandangan yang siap dengan fungsi yang berpotensi dibatasi untuk dibagikan dengan mereka. Pada dasarnya, kami membuat yakin tampilan Rapat adalah persis apa yang dibutuhkan untuk pemilik Rapat dan peserta rapat. Ikuti terus untuk mempelajari apa yang dibutuhkan.

Semua kode untuk Meeting Planner ditulis dalam rangka Yii2 untuk PHP, yang memiliki built-in mendukung I18n. Jika Anda ingin mempelajari lebih lanjut tentang Yii2, check out kami seri paralel Pemrograman Dengan Yii2 di Envato Tuts +.

Yang menarik, seorang calon angel investor baru-baru ini mendekati saya tentang kontribusi sumber daya untuk mempercepat proses pengembangan situs kami—dia melihat nilai dalam konsep tersebut. Saat saya memilah jalur yang tepat untuk terus maju, saya akan terus mengeposkan Anda. Jika ada, saya harap ini menciptakan topik tutorial baru yang menarik di sekitar mengelola proses investasi sebagai seorang pengusaha.

Sekadar mengingatkan, saya berpartisipasi dalam rangkaian komentar di bawah ini. Saya terutama tertarik jika Anda memiliki pendekatan yang berbeda, ide tambahan atau ingin menyarankan topik untuk tutorial selanjutnya. Anda juga dapat menghubungi saya di Twitter @reifman.

Persyaratan Meeting View

Ini menarik - segera, Meeting Planner akan mengirimkan undangan kepada peserta yang diundang. Namun, untuk mendukung itu, kita perlu memastikan bahwa pertemuan melihat halaman adalah dikonfigurasi dengan benar. Jika Anda membuat pertemuan, Anda memiliki kekuatan tertentu, seperti mengundang peserta, menambahkan tempat-tempat pertemuan yang diusulkan, tanggal dan waktu, dan memilih pilihan akhir Dalam beberapa kasus, penyelenggara mungkin ingin menawarkan beberapa atau semua kekuasaan tersebut kepada peserta juga.

Pada dasarnya, kita harus membuat aplikasi mengetahui siapa yang melihat halaman meeting dan kemudian menyesuaikan penampilan dan perintah yang tersedia. Yii membuat sebagian besar dari ini cukup mudah, tetapi ada banyak detail yang terlibat.

Peringatan Singkat Tentang User Experience

Dan biarkan aku mengatakan depan, ada banyak pengguna pengalaman ulang dan Polandia yang perlu dilakukan iteratively dari waktu ke waktu di jalan untuk produk layak minimum (MVP). Sebagian besar apa yang sedang saya bangun sekarang adalah fungsionalitas inti untuk mendapatkan Alfa menjalankan untuk penggunaan yang sebenarnya. Aku tahu itu tampak kasar di tempat dan tidak akan selalu tampak seperti intuitif seperti yang Anda inginkan. Ada juga coding inefisiensi yang perlu dioptimalkan di masa depan. Silakan memposting pemikiran dan komentar Anda di bawah ini dan saya akan mempertimbangkannya untuk pekerjaan yang sedang berlangsung.

Tampilan Meeting yang Aktif

Berikut ini tampilan tampilan meeting yang ada yang dibuat oleh pembuat (atau pemilik):

Customizing Meeting View - The Existing Codes Meeting View

Tombol Send email undangan pertemuan dengan pilihan saat ini terbuka untuk peserta bagi mereka untuk menawarkan umpan balik. Kotak centang di bawah You dan Them memungkinkan pemirsa untuk mengungkapkan Apakah lokasi (s) dan kali bekerja untuk mereka. Choose checkbokes memungkinkan pengunjung untuk menentukan tempat terakhir dan terakhir kalinya. Tombol Finalize menempatkan pertemuan jadwal dengan pilihan tempat dan pilihan waktu.

Tentu saja, sebagai produk matang, kita akan ingin meningkatkan pengalaman pengguna dalam beberapa cara dan memoles banyak, tapi di sini ada beberapa elemen fungsional yang kami ingin memodifikasi untuk peserta:

  • Tombol Send tidak akan diperlukan setelah pemilik memberikan undangan.
  • Peserta mungkin atau mungkin tidak diizinkan untuk Finalize Rapat pilihan.
  • Peserta tidak akan dapat Edit (ikon pencil) pertemuan detail teks.
  • Peserta tidak akan dapat menambahkan People saat ini (untuk MVP kami).
  • Peserta mungkin atau mungkin tidak diizinkan untuk menambahkan Places (ikon plus).
  • Peserta mungkin atau mungkin tidak diizinkan untuk menambahkan Date & Times (ikon plus).
  • Dalam Panel tempat dan Dates & Times, kita akan ingin menunjukkan pilihan pemirsa saat ini di bawah kolom You dan orang lain data di Them.
  • Di kedua Places dan Dates & Times panel, peserta mungkin atau tidak dapat Memilih lokasi dan waktu akhir.

Semua pilihan ini perlu ditangani dalam pekerjaan kita hari ini. Mari kita telusuri apa yang diperlukan untuk membangun fitur ini.

Persyaratan Implementasi

Jika Anda mengikuti kode ini, pembaruan yang dijelaskan di sini termasuk dalam rilis ini di GitHub.

Siapa Pemirsa Saat Ini

Kerangka Yii menyediakan user_id saat ini untuk pemirsa di sini:

Model Meeting memiliki $owner_id properti dan fungsi isOwner untuk membantu menentukan apakah penonton saat ini benar-benar meeting creator. Jika tidak, pemirsa akan memiliki kontrol yang kurang kondisional atas pertemuan tersebut.

Saya telah membuat beberapa fungsi helper dalam model Meeting untuk membuat ini lebih cepat:

Ini mengkonfigurasi properti $owner_id dan $viewer dalam model Meeting.

Bangunan untuk Pengaturan Rapat

Setiap meeting yang Anda buat akan memiliki karakteristik yang berbeda. Terkadang, Anda ingin membatasi peserta dari menyarankan waktu dan tempat yang berbeda atau menyelesaikan detail. Di lain waktu, Anda tidak akan peduli. Ketika kita akhirnya membuat template Meeting untuk menggunakan jenis umum dari pertemuan, misalnya pagi pertemuan bisnis kopi, template mungkin perlu untuk mempertahankan jenis-jenis pengaturan khusus juga. Bagaimana seharusnya kita menerapkan ini?

Pertama, saya ingin membuat satu set preferensi default untuk pengguna pertemuan mereka buat.

Kemudian, saya akan membuat satu set MeetingSettings untuk setiap pertemuan. Ketika pertemuan dibuat dari awal, mereka akan mewarisi preferensi default dari pengguna yang membuat itu. Mengedit pengaturan untuk pertemuan individu dapat ditunda nanti.

Di masa depan, ketika kami menerapkan Template Meeting, kami akan menambahkan pengaturan Meetng untuk template juga. Namun, ini dapat juga diabaikan.

Berikut adalah preferensi yang ingin kami buat untuk memulai:

  • Memungkinkan para peserta untuk menambah tempat.
  • Memungkinkan para peserta untuk menambahkan Tanggal & Waktu.
  • Memungkinkan para peserta untuk memilih tempat.
  • Memungkinkan para peserta untuk memilih Tanggal & Waktu
  • Memungkinkan para peserta untuk menyelesaikan meeting.

Karena kita semua kembali ke seri setelah beberapa waktu karena ketidakhadiran kesehatan saya, saya akan membahas sedikit lebih detail tentang beberapa pekerjaan.

Pertama, kita akan membuat Meeting Settings migrasi:

Yang menciptakan file migrasi yang kita perlu menulis kode yang membangun tabel database menurut skema kami:

Setiap pertemuan pada dasarnya memiliki deretan MeetingSettings dengan boolean properti untuk berbagai pilihan peserta saya telah ditunjukkan di atas.

Kemudian, kita menginstruksikan Yii untuk migrasi dan membuat tabel:

Foreign key membuat hubungan antara tabel Rapat dan tabel MeetingSetting.

Selanjutnya, kita akan menggunakan Yii di Gii untuk auto-generate kode untuk melihat dan memperbarui pengaturan. Untuk memulai, saya kembali ke http://localhost:8888/mp/index.php/gii/. Kita akan mulai dengan membuat model:

Customizing Meeting View - Yiis Gii Model Generator for Meeting Setting

Kemudian, kita akan menghasilkan Create, Read, Update, Delete kode (CRUD):

Customizing Meeting View - The Gii CRUD Generator

Karena kita tidak perlu semua kode yang sekarang, Gii memungkinkan kita pilih hanya fungsi-fungsi yang kita perlu: controller, view, _form dan update:

Customizing Meeting View - Manually limiting files to overwrite

GII menunjukkan kepada Anda daftar dari file yang dibuat dengan setiap langkah:

Customizing Meeting View - List of generated files by Gii

Tetapi bagaimana dengan pengaturan pertemuan standar pengguna? Pada dasarnya, preferensi pertemuan khas mereka?

Memperluas User Preferences

Untuk itu, kami akan menambahkan paralel Rapat menyeting properti ke tabel user_setting. Sekali lagi, kita akan membuat migrasi:

Berikut adalah kolom yang perlu kita tambahkan:

Kemudian, kami akan menjalankan migrasi:

Daripada memaksakan menimpa model UserSetting.php kami dengan Gii, kita akan menggunakan Gii diff option:

Customizing Meeting View - Using Giis diff rather than overwriting

Dan, dari sana, kami akan menyerahkan memilih tambahan baru ke file dan pastekan:

Customizing Meeting View - Diff view to copy and paste necessary changes

Fungsional, kami akan menambahkan pertemuan tab setting halaman properti Update Your Settings:

Customizing Meeting View - User settings with the existing two tabs

Kami akan menambahkan kode berikut ke /frontend/views/user-setting/_form.php untuk mendukung properti baru kami:

Inilah form yang diperbarui:

Customizing Meeting View - User settings with meeting preferences

Inisialisasi New Meeting Sessions

Setiap kali pengguna menciptakan pertemuan baru, kita harus memuat pengaturan default mereka dan menyalinnya ke pengaturan pertemuan individu. initializeMeetingSetting disebut pertemuan baru yang dibuat untuk melakukan hal ini:

Dengan pengaturan meeting selesai, kita sudah siap untuk melanjutkan dengan bagian besar pekerjaan hari ini, custom view Rapat untuk pemilik dan peserta.

Review Meeting Owner View

Sekarang, mari kita mempertimbangkan keadaan view Rapat kami berdasarkan Rapat creator atau owner. Berikut adalah undangan pertemuan baru-baru ini saya buat untuk mengundang teman saya Rob untuk minuman:

Customizing Meeting View - The Current Meeting View

Command Bar

Sebelumnya Send dan Finalize harus diaktifkan, harus ada orang yang mengundang dan setidaknya satu tempat dan waktu. Jika ada lebih dari satu tempat dan waktu, satu harus dipilih untuk rapat yang akan diselesaikan.

Cancel (X icon) dan Edit (pencil icon) meeting tombol juga diaktifkan untuk kreator.

People

Untuk MVP, kami membatasi undangan pertemuan kepada satu peserta pada awalnya. Jadi, setelah seseorang telah diundang, tombol Add (plus icon) dinonaktifkan.

Tempat dan Date & Times

Pencipta dapat menambah Places dan Date & Times sampai maksimum situs kami (misalnya tujuh per meeting) dan mereka dapat menunjukkan ketersediaan dan penerimaan mereka. Dan, akhirnya, ketika ada lebih dari satu, mereka dapat memilih lokasi dan waktu yang akan digunakan.

Catatan

Pencipta selalu dapat menambahkan catatan meeting. Catatan memungkinkan creator dan participant untuk berkomunikasi satu sama lain.

Pada akhirnya, kami akan menempatkan sebagian besar pekerjaan kami ke dalam meningkatkan fungsionalitas AJAX sehingga sebagai pemilik memilih tempat dan waktu, tombol Send dan Finalize yang benar diaktifkan (atau cacat dalam beberapa kasus).

Berikut adalah contoh dari pertemuan dengan kemungkinan dua kali. Tombol Finalize tidak dapat diaktifkan sampai satu kali dipilih:

Customizing Meeting View - Another Meeting View Scenario

Setelah pilihan dilakukan, kami ingin mengaktifkan tombol Finalize melalui AJAX, tanpa menggunakan refresh halaman.

Review Participant View

Ketika kami melihat undangan dari sudut pandang peserta, ada jauh lebih sedikit initial capability:

Customizing Meeting View - The Participant View

Peserta dapat cencel (X ikon) kehadiran mereka ke pertemuan dan mereka dapat menentukan apakah tempat dan waktu yang diterima mereka, tetapi mereka tidak dapat memilih tempat terakhir atau Finalize pertemuan. Juga, data You dan Them kolom sekarang beralih. Dan, peserta panel tersembunyi seperti itu tidak diperlukan.

Selain itu, katakanlah pertemuan dibuat dengan pengaturan yang memungkinkan peserta untuk memilih lokasi, tanggal dan waktu tapi tidak menyelesaikan pertemuan. Yang akan perlu untuk terlihat seperti ini:

Customizing Meeting View - The Participant View with Participant Choice

Karena ada hanya satu tempat, Herkimer Coffee, ada tidak perlu untuk pemilih pilihan. Tapi, di mana ada dua kemungkinan waktu, Anda sekarang dapat melihat Choose selector. Namun, ada tidak ada tombol Finalize.

Ternyata bahwa mendukung semua ini membutuhkan banyak kode baru untuk memperbarui sistem, tetapi ini mulai menyelam ke jantung produk-pengalaman pengguna pertemuan penjadwalan. Saya akan memandu Anda melalui beberapa perubahan yang diperlukan.

Coding Meeting Requirement

Menerapkan Meeting Settings

Di panel waktu pertemuan dan tempat pertemuan, kita perlu menggunakan meeting settings untuk menentukan jika kita perlu menunjukkan pilihan pemilih. Dalam view  _panel.php, tampak seperti ini:

Kami akan memeriksa pengaturan peserta dan melewat mereka sebagai parameter ke tampilan berikutnya _list.php, yang terlihat seperti ini:

Jika view adalah creator atau peserta diperbolehkan untuk memilih terakhir kalinya, mereka akan melihat sesuatu seperti ini, kemampuan untuk Choose di kolom kanan:

Customizing Meeting View - The Choice Selector for Dates Times

Pemirsa dapat Mengirim dan Menyelesaikan pertemuan

Saya membuat fungsi canSend() dan canFinalize(), yang mendukung kode umumnya dan AJAX permintaan untuk menentukan keadaan aktif mengirim dan menyelesaikan tombol.

Berikut canSend():

Penyelenggara tidak dapat mengirim undangan pertemuan sampai ada participant(s), tempat dan waktu.

Berikut canFinalize();

Ini pertama memeriksa jika pertemuan bisa dikirim, karena jika tidak, itu tidak dapat diselesaikan. Kemudian, ia memeriksa untuk memastikan bahwa tempat dan waktu telah dipilih. Dan kemudian, ia memeriksa jika viewer adalah penyelenggara atau pengaturan Rapat memungkinkan peserta untuk menyelesaikan pertemuan.

Pada dasarnya, sebagai perubahan dilakukan, Anda akan melihat keadaan Send dan Finalize tombol perubahan:

Customizing Meeting View - The Command Bar with Send and Finalize

Dalam Rapat view.php, saya telah tertanam JavaScript untuk mendukung AJAX update kepada negara tombol Kirim dan Finalize karena pengguna mengubah pengaturan untuk pertemuan mereka. Bila pilihan tempat Tempat dan Waktu dilakukan, refreshSend() dan refreshFinalize() yang disebut dan tombol-tombol yang tepat diubah:

Membalikkan Place and Time Status penyeleksi

Dalam antarmuka pengguna saat ini, kami menunjukkan pemirsa place dan waktu pilihan di kolom paling kiri atau pertama. Kode harus disesuaikan untuk membalikkan ini ketika peserta melihat:

Customizing Meeting View - The You and Them Columns for Selection Data

Untuk mendukung menampilkan data yang berbeda di kolom Anda dan mereka pertemuan lihat untuk waktu dan tempat, waktu pertemuan dan tempat pertemuan _list.php file yang diperlukan harus diperbarui untuk secara dinamis menentukan apa data untuk menampilkan:

Untuk sekarang, saya meletakkan fungsi-fungsi ini jarak _panel.php, yang panggilan _list.php, karena mereka mengandalkan memiliki widget SwitchInput termasuk dalam konteks:

Penyesuaian Mendatang

Pada akhirnya, ada banyak perbaikan untuk membuat kode ini ke depan. Di tempat, saya membuat panggilan AJAX ke server dua atau tiga kali ketika saya bisa kode ini lebih efisien ke dalam satu permintaan. Di tempat lain, aku bisa melakukan di lokal dengan JavaScript. Antarmuka pengguna akan perlu untuk terus meningkatkan dan kode akan perlu untuk mengubah untuk beradaptasi dengan itu. Namun, dari perspektif fungsional, hari ini bekerja mewakili banyak keseluruhan kemajuan MVP.

Apa berikutnya?

Dengan pengaturan meeting dan lihat persyaratan untuk penyelenggara dan peserta, saya siap untuk melanjutkan untuk mengirimkan undangan pertama. Episode berikutnya akan mengeksplorasi email undangan untuk peserta dan mengimplementasikan tampilan konten, fungsional perintah link dalam email, dan mengelola hak akses untuk pengguna yang belum mendaftar. Tonton tutorial yang akan datang dalam Building Your Startup Anda Dengan seri PHP — ini semakin mengasyikkan!

Silahkan jangan ragu untuk menambahkan pertanyaan dan komentar di bawah ini; Saya biasanya berpartisipasi dalam diskusi. Anda juga dapat menghubungi saya di Twitter @reifman.

Link 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.