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

Membangun Startup Anda Dengan PHP: Menjadwalkan Pertemuan

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup With PHP: User Settings, Profile Images and Contact Details
Building Your Startup With PHP: Scheduling Availability and Choices

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 pada 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, kami akan merilis kode Perencana Pertemuan sebagai contoh sumber terbuka yang dapat Anda pelajari. Kami 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 kami Pemrograman dengan Yii2 di Tuts+. Anda juga mungkin ingin melihat situs basis pengetahuan saya untuk pertanyaan Yii2, Pertukaran Pengembang Yii2.

Dalam enam tutorial terakhir, kami telah meletakkan dasar-dasar dukungan aplikasi dalam berbagai cara: pengguna, tempat, kontak, pengaturan, dan lokalisasi. Saya yakin Anda akan sama bergairahnya dengan saya karena kami akhirnya siap untuk mulai membuat jadwal fungsi pertemuan. Terima kasih atas kesabaran Anda karena saya telah membangun infrastruktur untuk bersenang-senang, bagian integral dari aplikasi ini.

Namun, tutorial pengkodean untuk mendukung fungsi pertemuan jadwal akan membentang setidaknya empat episode. Dua episode berikutnya akan fokus terutama pada membangun dukungan untuk pengalaman pengguna dasar, memilih peserta, tempat dan tanggal dan waktu untuk rapat, dan menyimpan ini dalam database. Setelah itu, kami akan membahas pengiriman permintaan pertemuan melalui email. Kami akan kembali nanti dalam rangkaian untuk mengoptimalkan dan memoles antarmuka pengguna, karena sangat penting bagi keberhasilan produk ini; tugas utama untuk pembaruan ini nanti adalah menghilangkan halaman yang disegarkan dalam proses penjadwalan rapat.

Membangun fungsionalitas untuk tutorial ini membutuhkan banyak kode—beberapa dihasilkan secara otomatis oleh Yii's Gii, dan banyak dengan tangan. Karena kerumitan pengiriman bagian awal fitur ini, saya berfokus pada antarmuka pengguna yang belum sempurna yang akan saya gosok secara berulang-ulang.

Membangun fitur ini menyentuh begitu banyak aspek pemrograman dalam Kerangka Yii2: migrasi Rekaman Aktif, relasi dan validasi, pembuatan kode Gii, Bootstrap, ekstensi dan widget Yii2 JQuery UI, AJAX, tampilan parsial rendering, praktik koding DRY, dll. Sulit untuk memilih apa yang akan dibahas di sini. Anda akan melihat banyak perubahan pada repositori dari episode-episode tutorial sebelumnya.

Jika Anda memiliki pertanyaan atau komentar, silakan mempostingnya di bawah ini. Saya berpartisipasi dalam diskusi.

Laman Rapat

Tab Bootstrap

Salah satu hal pertama yang harus saya lakukan adalah membuat tab yang berbeda untuk Rapat di masa depan, lalu dan dibatalkan.

The Meetings Page with Tabs for Upcoming Past and Canceled

Menerapkan ini hanyalah contoh lain tentang betapa hebatnya Bootstrap dan seberapa kuat integrasi Yii2 dengan Bootstrap 3.x. Bootstrap memiliki tab yang dibuat sebelumnya.

Di MeetingController, kami melakukan pra-pemuatan queri untuk masing-masing jenis rapat dan merender tampilan indeks:

Kemudian, dalam tampilan indeks, kami menerapkan kode bootstrap kami dengan panel tab:

Saat kami lebih dalam seri ini, saya akan meninggalkan banyak tempat kerja untuk dikerjakan. Salah satunya adalah dengan mengimplementasikan panel tab ini melalui AJAX sehingga kami tidak memuat tiga kueri di depan.

Pelacakan tiket

Saya juga akan mulai membuat tiket di aplikasi pelacakan masalah Lighthouse untuk pekerjaan saya di masa depan agar lebih mudah dilacak. Saya akan berbicara tentang Lighthouse dalam tutorial masa depan.

Lighthouse Issue Tracker AJAXify Meeting Page Tabs

Apa yang Dibalik Penjadwalan Pertemuan?

Tugas sederhana menciptakan kerangka kerja untuk menjadwalkan pertemuan ternyata cukup rumit dan terperinci di bawah kap mesin. Saya akan memoles ini secara bertahap saat kita bergerak melalui seri.

Tujuan pertama saya adalah membangun kerangka dasar sehingga saya bisa mulai menguji fitur-fitur penjadwalan rapat.

Rapat terdiri dari beberapa model data ActiveRecord, mis. Peserta, MeetingTime, MeetingPlace, MeetingNote, dll. Awalnya, saya hanya ingin menggunakan pembuatan kode Yii untuk membuat CRUD untuk masing-masing model ini dan kemudian mengintegrasikannya ke dalam satu halaman penjadwalan.

Idenya adalah menggunakan MVC untuk membangun semua tindakan ini, berpegang teguh pada metodologi DRY sebanyak mungkin. Awalnya, antarmuka akan bekerja melalui penyegaran halaman, tetapi nantinya kami akan kembali dan mengintegrasikan semua model ini melalui AJAX menggunakan kode MVC yang sama.

Formulir Buat Pertemuan

Untuk banyak model, saya mulai dengan melalui proses yang dijelaskan dalam tutorial sebelumnya menggunakan generator kode Yii, Gii, untuk membangun CRUD. Kemudian saya menyesuaikannya sesuai kebutuhan. Untuk saat ini, saya menempel dengan sangat dasar membuat formulir pertemuan—itu bahkan belum termasuk alamat email peserta. Ini memungkinkan saya untuk dengan cepat membuat catatan pertemuan dasar dan bekerja di halaman penjadwalan.

The Create a Meeting Form

Setelah formulir dikirim, Anda dapat melihat halaman Rapat. Tentunya, saya akan memodifikasi formulir ini dan proses awal tepat waktu.

Halaman Rapat

Ingatlah mockup saya untuk tutorial pertama dalam seri ini:

The Original Meeting Planner Mockup for Scheduling a Meeting

Ini adalah unduhan awal di formulir yang telah saya kerjakan:

The Current Form of Meeting Planners Schedule a Meeting Feature

Ada banyak infrastruktur, kode (baik yang dihasilkan secara otomatis, dihasilkan secara manual) dan widget pihak ketiga yang terlibat dalam pembuatan ini terjadi. Saya akan memandu Anda melalui bagian demi bagian.

Bootstrap Panels and Tables

Meskipun tidak mungkin desain akhir, saya memilih untuk menggunakan Bootstrap Panels untuk mengatur halaman antara properti, tempat, tanggal dan waktu dan catatan. Halaman itu sendiri diberikan oleh tindakan controller View Rapat dan panggilan untuk pandangan parsial ke model tertentu untuk masing-masing.

Saya tidak perlu membangunnya dengan cara ini, tetapi saya dengan sengaja ingin menggunakan semua kerangka MVC built-in Yii dan mengintegrasikan hal-hal sebanyak mungkin. Harapan saya adalah bahwa di masa depan akan lebih mudah untuk AJAXify seluruh halaman, mengurangi refresh halaman dan meningkatkan kesederhanaan kode sumber dan pemeliharaan.

Beginilah cara kerja controller View Rapat berfungsi. Ini memuat ActiveDataProviders untuk masing-masing model, dan kemudian membuat file tampilan Rapat:

View Sebagian

Dengan menggunakan semua pandangan di masing-masing model yang terkait, cukup mudah untuk menampilkan seluruh halaman jadwal dengan tampilan parsial MVC. Tampilan Rapat menampilkan semua tampilan _panel untuk model lainnya. Anda dapat meninjau dokumentasi untuk metode render Yii2 di sini.

Model yang Hilang

Dalam membangun fungsi ini, saya menyadari bahwa saya telah mengabaikan beberapa model yang diperlukan: MeetingPlaceChoice dan MeetingTimeChoice. Ini diperlukan untuk menyimpan penyelenggara dan participant(s) ketersediaan untuk MeetingPlaces dan MeetingTimes tertentu.

Inilah migrasi untuk MeetingPlaceChoice:

Berikut adalah migrasi untuk MeetingTimeChoice:

Migrasi ActiveRecord Yii memudahkan pemrograman untuk memperluas skema basis data Anda saat produk Anda berkembang.

Model ini menentukan status widget sakelar (yang mencerminkan ketersediaan pengguna) yang Anda lihat di atas dalam baris untuk setiap tempat dan waktu tanggal. Dalam tutorial berikut, saya akan memandu Anda melalui cara kami menginisialisasi widget tersebut dan menggunakan AJAX di Yii untuk memperbarui statusnya tanpa penyegaran laman.

Penjadwalan Alert

PrepareView menentukan status pertemuan dan jika perlu memperingatkan pengguna bahwa undangan belum dikirim:

Yii memiliki dukungan bawaan untuk menampilkan Bootstrap Alerts, yang disebut flashes:

Meeting Planner setFlash Bootstrap alerts

Tombol Perintah

Berikut ini kode untuk contoh tampilan Rapat kontainer dengan tombol perintah yang ditunjukkan di atas:

Setiap tombol dibuat dengan gaya pembantu HTML Yi dan gaya tombol Bootstrap:

Untuk membatalkan dan mengedit tombol properti, saya menggunakan Glyphicons. Glyphicons cantik dan bebas disertakan dengan Bootstrap dan terintegrasi dengan Yii2.

Apa yang Dilakukan Perintah-Perintah Ini?

Setelah pengguna menambahkan peserta dan setidaknya satu tempat dan tanggal dan waktu, dia dapat mengirim undangan. Fungsi ini akan memberikan undangan rapat kepada pengguna melalui email yang akan saya jelaskan dalam tutorial yang akan datang segera.

Tombol Finalize memungkinkan penyelenggara (atau peserta) untuk mengubah keadaan rapat dari perencanaan menjadi mendatang. Idenya adalah bahwa sekali tempat dan tanggal waktu dipilih, rapat dapat "finalized". Sebelum ini, peserta akan memiliki kesempatan untuk secara opsional menyarankan tempat lain dan waktu tanggal dan penyelenggara (atau keduanya) akan memiliki pilihan untuk memilih tempat terakhir dan waktu tanggal.

Tombol Cancel akan membatalkan pertemuan dan memindahkannya ke tab yang dibatalkan pada halaman Rapat.

Peserta

Selanjutnya, pengguna akan menambahkan orang.

Meeting Planner Participant Panel

Catatan: Dalam produk minimum saya yang layak, hanya satu peserta yang diizinkan tetapi kami mungkin menambahkan lebih banyak nanti.

Jika Anda mengingat tabel Teman yang kami buat di tutorial sebelumnya, saya mengizinkan pengguna untuk memasukkan alamat email baru atau mempercepat entri mereka dengan pengisian otomatis yang dimuat dari teman-teman mereka yang ada dan rapat sebelumnya.

Meeting Planner invite a participant with autocomplete

Di masa depan, kami akan memiliki lebih banyak opsi antarmuka pengguna di sini—termasuk peserta yang sering.

Di bagian atas pengontrol Peserta, kami memuat teman-teman ke dalam larik yang akan digunakan oleh widget pelengkapan otomatis JQuery—dukungan untuk yang lagi, dibangun ke Yii2:

Berikut adalah _form.php di \frontend\views\participant:

Saya membuat keputusan desain untuk menyimpan semua peserta dalam tabel Pengguna. Saya mungkin menyesali ini—belum yakin. Tapi itu sangat menyederhanakan proses memungkinkan orang untuk mulai menggunakan situs dengan cepat dan menyederhanakan model data secara keseluruhan.

Ketika seorang pengguna mengundang seseorang yang tidak dikenal ke sistem (alamat email baru), kami mendaftarkannya secara pasif di tabel Pengguna.

Kami membuat nama pengguna berdasarkan alamat email mereka. Saya menggunakan generator slug Yii dalam Inflector helper. Kami membuat kata sandi acak untuk saat ini menggunakan asisten Keamanan Yii. Jika saya menggunakan PHP vanilla, saya mungkin harus mengintegrasikan fungsi lain untuk kemampuan ini. Sebaliknya, itu dibangun tepat.

Mari kita lanjutkan dengan menambahkan tempat.

Tempat

Ada keuntungan besar untuk menggunakan MVC Yii untuk setiap kontroler dan model daripada mengkodekan semua fungsi ini ke dalam controller Meeting. Itu membuat pemahaman dan mengelola kode lebih sederhana dan lebih terorganisir.

Saya perhatikan dengan cepat, bagaimanapun, bahwa saya harus menyesuaikan runut tautan default untuk menautkan kembali ke halaman pertemuan saat ini daripada indeks atau tampilan untuk model tertentu.

Add a Meeting Place Breadcrumbs

Kami benar-benar menggunakan MeetingPlace model untuk menambah tempat ke pertemuan. Di \frontend\views\meeting-place\create.php, aku hanya menyesuaikan link di daerah breadcrumbs:

Menambahkan Dukungan untuk Langsung Menambah Google Places

Add a Meeting Place from Your Places or via Google Places Autocomplete

Saya tidak hanya ingin menyesuaikan bentuk pembuatan Place bagi pengguna untuk menambahkan tempat yang sebelumnya digunakan tetapi juga bagi mereka untuk menambahkan Google Places baru dengan cepat.

Pada dasarnya saya harus mereplikasi dukungan yang kami bangun di tutorial Google Places di sini dalam pembuatan MeetingPlace:

Saya juga perlu menggunakan lebih banyak dukungan validasi canggih Yii2. Dalam model MeetingPlace di bawah ini, kami menggunakan validasi unik Yii2 untuk melaporkan kesalahan jika seseorang mencoba ke tempat yang sudah disarankan untuk rapat:

Saya juga menambahkan kondisi kesalahan kustom di MeetingPlaceController membuat tindakan untuk jika pengguna memilih tempat dari daftar mereka serta Google Place—meskipun mungkin ini akan menjadi fitur opsional untuk tetap masuk (memiliki pendapat? Posting di komentar di bawah):

Saya menggunakan metode addErrors Yii2.

Saya juga memperbaiki bug dari episode tiga yang membuat beberapa kotak peta setiap kali ada orang yang mengubah pilihan Google Place. Pemeriksaan untuk jumlah anak-anak yang ada di pemilih article tetap ini:

Di masa depan, formulir kreasi ini akan menyertakan sejumlah fitur penting:

  • Izinkan pengguna menambahkan geolokasi mereka saat ini.
  • Sarankan tempat yang sering disarankan oleh pengguna.
  • Berikan akses cepat ke tempat favorit pengguna.
  • Sarankan tempat terdekat (berjarak sama) pengguna dan peserta.
  • Sarankan tempat bersponsor dari pengiklan berbayar.
  • Izinkan tempat dan waktu tanggal untuk dihapus oleh penyelenggara—mungkin dengan syarat bahwa mereka tidak pernah dilihat atau ditanggapi oleh participant(s).

Mungkin juga berguna untuk memungkinkan pengguna membuat catatan di tempat dan tanggal tertentu. Misalnya, saya mungkin menunjuk bahwa "tempat ini akan bekerja dengan baik untuk saya pada Kamis pagi tetapi tidak Jumat sore" atau "jika Anda memilih waktu ini, dapatkah kami melakukannya di Caffe Vita di Capitol Hill". Jika Anda memiliki pendapat tentang fitur ini (yang akan menambah kerumitan) silakan tulis komentar di bawah ini.

Menampilkan Panel

Untuk setiap model kami menggunakan hirarki serupa dilihat dan komponen Yii2. Controller Rapat menuliskan tampilan untuk _panel.php di \frontend\views\meeting-place:

Garis besar tabel Bootstrap-compatible ada di _panel.php. Kemudian kami menggunakan widget Yii2 Listview untuk menampilkan setiap baris data dalam bentuk tabel. ItemView parsial ada di _list.php.

Perhatikan bahwa kami melewati variabel khusus yang disebut placeCount melalui viewParams. Ini berguna untuk mengonfigurasi tombol di tabel.

Inilah tampilan _list.php yang akan saya bahas lebih detail dalam tutorial berikutnya, termasuk widget input switch dan implementasi AJAX.

Tanggal & Waktu

Untuk menambahkan Tanggal dan Waktu, kami mengintegrasikan alat pilih Tanggal Waktu JQuery Bootstrap melalui 2Amigos Yii2 Date Time extension

MeetingPlanner Suggest a Meeting Time

Ada beberapa peningkatan yang ingin saya buat untuk widget ini di masa depan. Saya ingin membuatnya terbuka secara otomatis pada beban, yang saat ini tampaknya tidak memiliki pengaturan untuk.

Sekali lagi, kami menggunakan validator unik untuk memastikan tanggal dan waktu spesifik belum ditambahkan ke pertemuan:

Pada halaman tampilan Rapat, panel Tanggal & Kali dibuat sama dengan Places:

Berikut adalah tampilan _list.php:

Catatan

Catatan Rapat memungkinkan pengguna untuk berkomunikasi bolak-balik seperti yang mereka sarankan dan memilih tempat dan waktu tanggal, tanpa harus saling mengirim email secara terpisah.

Add a Meeting Note

Inilah yang terlihat seperti catatan di halaman Rapat:

Meeting View Page with Meeting Note

Pelaksanaan catatan hampir identik dengan di atas pelaksanaan tempat dan tanggal kali. Anda dapat meninjau controller MeetingNote dan file tampilan \frontend\views\meeting-note untuk informasi lebih lanjut.

Apakah Selanjutnya?

Saya harap Anda telah belajar sesuatu yang baru dengan tutorial ini. Tonton tutorial yang akan datang dalam seri Membangun Startup Anda Dengan PHP—ada banyak fitur menyenangkan yang akan muncul.

Dalam tutorial berikutnya, saya akan membahas lebih mendalam tentang penerapan pilihan Place and Date Time dengan AJAX. Setelah itu, kami akan mulai membangun pesan email untuk mengirim undangan pesan, mengumpulkan tanggapan peserta di halaman jadwal, dan menyelesaikan rapat untuk dunia nyata.

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.