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

Membangun Startup Anda Dengan PHP: Menjadwalkan Ketersediaan dan Pilihan

by
Difficulty:AdvancedLength:LongLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup With PHP: Scheduling a Meeting
Using the Mailgun Store(): A Temporary Mailbox for Your App's Incoming Email

Indonesian (Bahasa Indonesia) translation by Ilham Saputra (you can also view the original English article)

Final product image
What You'll Be Creating

Tutorial ini adalah bagian dari seri Membangun Startup Anda Dengan PHP on Tuts+. Dalam seri ini, saya memandu Anda melalui peluncuran startup dari konsep ke realitas menggunakan aplikasi Meeting Planner saya sebagai contoh kehidupan nyata. Setiap langkah di sepanjang jalan, saya akan merilis kode Perencana Pertemuan sebagai contoh open source yang dapat Anda pelajari. Saya juga akan membahas masalah bisnis terkait startup saat muncul.

Semua kode untuk Perencana Pertemuan ditulis dalam Kerangka Yii2 untuk PHP. Jika Anda ingin mempelajari lebih lanjut tentang Yii2, periksa seri paralel saya Pemrograman dengan Yii2 di Tuts+. Anda juga mungkin ingin melihat situs basis pengetahuan saya untuk pertanyaan Yii2, Pertukaran Pengembang Yii2.

Pengkodean untuk fungsi pertemuan jadwal membentang setidaknya empat episode. Ini adalah yang kedua dari empat episode ini, yang berfokus pada penambahan AJAX ke halaman penjadwalan untuk memungkinkan pengguna mengatur ketersediaannya dan memilih tempat, tanggal dan waktu. Jika Anda melewatkan tutorial sebelumnya tentang menjadwalkan pertemuan, silakan kembali dan baca sebelum melanjutkan.

Dalam tutorial berikutnya, kami akan membahas pengiriman permintaan pertemuan melalui email. Kami akan kembali nanti untuk mengoptimalkan dan memoles antarmuka pengguna, karena ini sangat penting untuk keberhasilan produk ini.

Menampilkan Ketersediaan Dari Basis Data

The Meeting Scheduling View Page

Tampilan jadwal pertemuan relatif kompleks untuk kode. Tata letak visual dari kolom tabel tidak secara langsung berhubungan dengan cara kami menyimpan data terkait dalam database dan skema kami. Untungnya, setiap pertemuan tidak memiliki kumpulan besar tempat dan opsi waktu tanggal, jadi ini tidak menghadirkan masalah kinerja tertentu.

Dalam skema kami, ketersediaan tempat untuk penyelenggara dan peserta (yaitu apakah suatu tempat dapat diterima untuk rapat ini) disimpan dalam tabel MeetingPlaceChoice. Menggunakan model relasional kami, setiap Pertemuan memiliki banyak MeetingPlaces yang memiliki banyak MeetingPlaceChoices.

Jangan bingung tabel MeetingPlaceChoice dengan pilihan akhir untuk tempat yang disimpan dalam MeetingPlace->status.

Tabel yang ditunjukkan di atas akan muncul berbeda ketika penyelenggara melihatnya:

  • Tempat 1 | Organizer | Peserta MeetingPlace.choice
  • Tempat 2 | Organizer | Peserta MeetingPlace.choice

Dari saat peserta melihatnya:

  • Tempat 1 | Peserta Organizer | (mungkin bisa membuat MeetingPlace.choice)
  • Tempat 2 | Peserta Organizer | (mungkin bisa membuat MeetingPlace.choice)

Sekarang mari kita bahas cara mengimplementasikan tabel ini dalam tampilan.

Menampilkan Tabel Dengan Bootstrap

Untuk saat ini, saya memilih untuk menampilkan setiap area, misalnya. tempat atau tanggal dan waktu, di panel Bootstrap sendiri dengan tabel.

Di \frontend\views\meeting\view.php, Anda akan melihat masuknya untuk panel tempat seperti ini:

Ini adalah bagian dari file tampilan panel meeting-place. Ini mengatur grid tabel dan menyertakan widget tampilan daftar untuk menampilkan baris:

Mari kita lihat lebih dekat pada tampilan daftar meeting-place.

Menampilkan Baris Dengan Widget Beralih Bootstrap

Yii Listview akan menampilkan deretan data untuk setiap Tempat. Kode bekerja hampir identik untuk waktu tanggal.

Saya menggunakan Masukan Masukan Widget Yii2 Krajee untuk Bootstrap Switch di tempat kotak centang membosankan dan kotak kombo:

Examples of The Bootstrap Switch Input

Saya suka cara opsi tri-state memungkinkan kita untuk menunjukkan kepada peserta suatu keadaan yang unik sebelum mereka membuat pilihan; itu juga memungkinkan kami untuk menunjukkan kepada penyelenggara bahwa peserta belum membuat pilihan.

Mari kita berjalan melalui kolom kode dengan kolom. Inilah panel Place dan tabel yang kami terapkan:

The Place Panel

Kolom Tempat

Di kolom pertama, saya menggunakan helper tautan Yii Html untuk menautkan nama tempat ke halaman tampilan sendiri—perhatikan bagaimana kami menggunakan siput tempat.

Kolom Penyelenggara

Untuk menemukan pilihan organiser, kami mengulang melalui array MeetingPlaceChoices, mencocokkan user_id dengan meeting-> owner_id:

Untuk memilih ketersediaan Anda di tempat tertentu, kami menggunakan mode kotak centang switch input, yaitu tempat ini berfungsi untuk Anda (di) atau tidak (nonaktif).

Properti value menetapkan saklar pada beban. ID yang sesuai dengan MeetingPlaceChoice->id digunakan untuk AJAX di bawah ini untuk mengidentifikasi switch khusus ini.

Anda mungkin juga memperhatikan bahwa kami menggunakan glyphicons untuk yes dan no in place of labels.

Kolom Peserta

Kode untuk peserta mengimplementasikan switch tri-state. yaitu tempat ini berfungsi untuk Anda (on), tidak (off) atau Anda belum mengindikasikan (indeterminate):

Ketika kami menambahkan dukungan untuk pertemuan yang memungkinkan peserta untuk menyarankan tempat dan waktu tanggal, kami akan menambahkan widget tri-state ke kolom organizer juga.

Menampilkan Tempat Pilih dan Tanggal Waktu Beralih

Jika penyelenggara melihat rapat, kami akan memungkinkan mereka memilih lokasi pertemuan terakhir dan waktu tanggal. Segera, kami juga akan menambahkan dukungan untuk pertemuan untuk memungkinkan peserta memilih ini.

Dalam hal ini, pengguna membuat pilihan di seluruh baris (memilih salah satu tempat yang terdaftar). Ini mengharuskan kita menggunakan input switch dalam mode tombol radio. Untuk acara AJAX bagi para pemilih, kita cukup dengarkan di properti nama—tidak diperlukan id, karena hanya ada satu pilihan untuk panel.

Saya juga ingin tombol pilihan tampil berbeda dari sakelar ketersediaan, jadi saya membuatnya lebih lebar dan menggunakan warna yang berbeda.

Sekarang saya akan memandu Anda melalui cara kami menerapkan dukungan AJAX untuk semua pemilih ini.

Mengimplementasikan Dukungan AJAX

Tentunya, saya ingin menghindari mengharuskan pengguna untuk menyimpan perubahan pada formulir ini. Sebaliknya, saya ingin switch untuk mengubah keadaan melalui AJAX tanpa refresh halaman.

Kode ini dibagi antara mengatur pendengar acara untuk bereaksi terhadap perubahan negara dan tindakan pengontrol untuk mencatat perubahan dalam basis data kami. Ini juga sedikit berbeda untuk switch kotak centang versus switch radio.

Membangun Pendengar Acara

Kami membuat event listener untuk mengeksekusi kode setiap kali keadaan tombol diubah. Acara mendengarkan adalah kode JavaScript yang dihasilkan oleh PHP dalam tampilan panel (untuk seluruh tabel opsi).

Berikut adalah kode di bawah \frontend\views\meeting-place\_panel.php:

By the way, jika ada yang bisa memberi tahu saya nama singkatan blok JS untuk PHP, posting di bagian komentar. Saya ingin tahu. Beberapa hal sulit dicari.

Fungsi registerJs dalam Yii membuat skrip untuk $position tertentu pada halaman. Dalam hal ini, ini adalah acara siap.

Kode di atas menyiapkan acara pendengar untuk semua tombol radio tempat-pemilih untuk semua tempat oleh properti nama. Nilai target acara akan mewakili id ​​tempat pertemuan yang dipilih. Saya akan berbicara lebih banyak tentang fungsi AJAX sebentar lagi.

Dengan kata lain, peristiwa radio switch menanggapi penyelenggara (umumnya) memilih tempat atau waktu tanggal untuk menyelesaikan rapat, mentransmisikan id tempat pertemuan atau id rapat-waktu.

Berikut kode untuk mendengarkan perubahan ketersediaan dengan kotak centang sakelar masukan:

Pendengar diatur untuk semua properti nama meeting-place-choice tetapi harus melewati id untuk menunjukkan dengan tepat yang mana MeetingPlaceChoice sedang diubah.

Untuk memperjelas, pendengar acara untuk mengaktifkan kotak centang input memungkinkan pengguna untuk mengatakan bahwa mereka tersedia atau tidak untuk suatu tempat atau tanggal waktu. Mereka mengirim id meeting-place-choice atau id meeting-place-time.

Sekarang, mari kita lihat lebih dekat bagaimana peristiwa AJAX memanggil tindakan pengontrol berbasis PHP kami untuk merekam perubahan status dalam database.

Membangun Tindakan Pengontrol

Ini kode lagi untuk pemilih tombol radio meeting-place:

URL menunjukkan jalur ke tindakan memilih controller MeetingPlace:

$id masuk mewakili meeting_id. Nilai tersebut mewakili id ​​MeetingPlace yang dipilih. STATUS_SELECTED menunjukkan bahwa tempat telah dipilih, sedangkan STATUS_SUGGESTED hanya menunjukkan bahwa itu telah disarankan (tidak dipilih).

Kode ini berputar di setiap tempat pertemuan pertemuan dan memperbarui keadaan tempat yang dipilih.

Mari kita lihat kode untuk kotak centang sakelar masukan lagi yang menentukan apakah seseorang tersedia untuk tempat tertentu:

Peristiwa ini memanggil tindakan set kontrol MeetingPlaceChoice dengan string yang sufiksnya berisi id dari catatan MeetingPlaceChoice yang perlu diperbarui:

Mengamankan Permintaan AJAX

Untuk alasan keamanan, kami perlu memverifikasi bahwa permintaan AJAX telah dimulai oleh pengguna yang sebenarnya yang dapat melakukan perubahan ini. Kode ini melakukan itu:

and

Tanpa pemeriksaan ini, akan mudah bagi peretas untuk menulis skrip guna mengubah pengaturan rapat untuk siapa saja dan semua orang.

Kode AJAX untuk menunjukkan ketersediaan untuk waktu tanggal dan membuat pilihan hampir identik.

Mendukung Pengaturan Ketersediaan

Untuk mendukung semua fitur di atas, kami juga perlu menambahkan kode yang menambahkan catatan ke meja MeetingPlaceChoice dan MeetingTimeChoice setiap kali peserta, tempat dan waktu tanggal ditambahkan. Untuk ini, kami menggunakan acara afterSave Yii.

Ketika seorang peserta ditambahkan, kita perlu menambahkan baris MeetingPlaceChoice baru untuk setiap MeetingPlace dan baris MeetingTimeChoice baru untuk setiap MeetingTime. Berikut kode dalam model Berpartisipasi yang menangani ini secara otomatis untuk kami:

Ketika tempat baru ditambahkan, MeetingPlaceChoices baru diperlukan untuk setiap peserta:

Demikian pula, ketika waktu tanggal baru ditambahkan, entri baru diperlukan untuk MeetingTimeChoice untuk setiap peserta:

Diasumsikan bahwa ketika penyelenggara rapat menambahkan tempat atau tanggal waktu, yang berfungsi untuk mereka awalnya.

Memilih Tempat Akhir, Tanggal dan Jam

Setelah ada setidaknya satu peserta yang diundang, satu tempat dan satu kali, penyelenggara rapat dapat menyelesaikan rapat. Di masa depan, kami juga akan memungkinkan peserta untuk menyelesaikan rapat.

Sementara kode ini akan sedikit berubah, ada fungsi dalam model Rapat yang memberi tahu pandangan apakah akan mengaktifkan tombol Finalize:

Berikut tampilan kode:

Setelah pertemuan selesai, MeetingPlanner akan mengubah mode dari mendukung perencanaan untuk memfasilitasi kehadiran peserta melalui berbagai fitur keren yang akan kami bahas di tutorial mendatang.

Masalah pengkodean yang saya temui

Saya ingin menyebutkan beberapa masalah yang saya hadapi ketika menulis kode untuk bagian yang relatif rumit ini.

Jenis AJAX

Status SwitchInput dikirim melalui JavaScript sebagai jenis boolean, mis. benar atau salah, tetapi saya perlu mengonversi ini ke nilai integer agar berhasil mengirimkannya melalui AJAX ke controller.

Overlapping ID

ID numerik dari widget MeetingPlaceChoice dan MeetingTimeChoice tumpang tindih. Butuh beberapa saat untuk mencari tahu mengapa widget saklar berhenti merender dengan benar untuk saya ketika saya menambahkan kemampuan pilihan. Karena ada id yang tumpang tindih, widget saklar hanya diberikan untuk objek pertama.

Itu perlu menambahkan awalan seperti mpc- atau mtc- ke id dan menghapusnya dalam tindakan pengontrol.

Di sinilah kita menghapus awalan di controller untuk memuat model:

Swith Input Widget Radio Button Memuat State

Butuh beberapa saat untuk menemukan cara mengatur keadaan/nilai beban awal untuk widget masukan sakelar dalam mode tombol radio. Tidak ada dokumentasi yang menunjukkan bagaimana melakukan ini. Saya akhirnya menulis penjelasan di sini untuk orang lain: Setting Status Switch Tombol Radio Input Widget.

Apa berikutnya?

Sekarang setelah semua AJAX berjalan dan berfungsi, saatnya untuk menyelesaikan beberapa area tersisa dari tampilan perencanaan rapat untuk mempersiapkan undangan yang telah disampaikan dan perlu dilihat oleh peserta.

Misalnya, tampilan jadwal pertemuan yang dilihat peserta akan berbeda dalam tata letak dibandingkan penyelenggara, dan itu akan berbeda tergantung pada apa yang dilimpahkan oleh penyelenggara.

Misalnya, kolom Anda dan mereka perlu diubah dari penerapannya saat ini. Diperlukan perluasan pengaturan model Pertemuan yang menentukan apakah peserta dapat menyarankan tempat dan waktu tanggal serta menyelesaikan pertemuan.

Lebih jauh ke masa depan, saya mungkin ingin mengizinkan beberapa peserta dan perlu menampilkan lebih banyak kolom ketersediaan untuk tampilan pengorganisasian—fungsi ini bukan bagian dari produk minimum yang layak (MVP) kami.

Saya juga perlu menyelesaikan implementasi MeetingLog yang akan mencatat setiap perubahan yang dibuat untuk pertemuan selama proses perencanaan. Ini akan memberikan semacam sejarah perencanaan untuk setiap pertemuan. Saya bisa menggunakan event afterSave() untuk ini juga.

Tonton tutorial yang akan datang dalam seri Membangun Startup Anda Dengan PHP—daftar topik yang akan datang sekarang diposting di Daftar Isi kami.

Silakan tambahkan pertanyaan dan komentar Anda di bawah ini; Saya biasanya berpartisipasi dalam diskusi. Anda juga dapat menghubungi saya di Twitter @reifman atau kirimi saya email secara langsung.

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.