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

Membina Stratup Anda: Borang Ajax Dinamik untuk Penjadualan

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup: Preparing for Reminders
Building Your Startup: Sending Reminders

Malay (Melayu) translation by Meyria (you can also view the original English article)

Final product image
What You'll Be Creating

Tutorial ini adalah sebahagian daripada Membina Startup Anda Dengan siri PHP pada Envato Tuts+. Dalam siri ini, saya membimbing anda melalui melancarkan permulaan dari konsep ke realiti menggunakan aplikasi Perancang Mesyuarat saya sebagai contoh kehidupan sebenar. Setiap langkah di sepanjang jalan, saya akan melepaskan kod Perancang Mesyuarat sebagai contoh sumber terbuka yang boleh anda pelajari. Saya juga akan menangani isu-isu perniagaan yang berkaitan dengan permulaan apabila ia timbul.

Pengenalan

Dalam tutorial hari ini, saya akan memandu anda melalui set permulaan perubahan komprehensif kepada antara muka penjadualan mesyuarat. Tujuan saya adalah untuk menggunakan Ajax untuk memungkinkan semua aktiviti penjadualan biasa tanpa refresh Laman apa-apa. Beberapa aspek ini bertukar menjadi mudah dan lain-lain yang agak rumit. Dalam episod ini, saya akan memberi tumpuan kepada bahagian yang mudah: bagaimana untuk membina permintaan Ajax UX pada dasarnya pada aplikasi Yii berasaskan PHP anda.

Di bahagian kedua, saya akan menutupi perkara yang lebih sukar-menyahpecah Ajax dan memulakan semula widget Bootstrap selepas beban halaman awal. Saya juga akan berkongsi bagaimana saya menggunakan konsol pemaju Chrome Chrome Google untuk membantu saya mengenal pasti kod pecah.

Terus terang, sementara kemas kini awal berjalan lancar, saya berlari ke dalam sekatan jalan raya dan kesulitan yang terdapat saat-saat di mana saya fikir saya mungkin terpaksa menyerah pada matlamat untuk pembebasan beta.

Anehnya, terdapat laluan kod yang seolah-olah membuat saya hampir selesai dan kemudian memukul jalan keluar yang tidak dapat diatasi-dan saya perlu bermula dengan pendekatan baru. Anehnya, terdapat laluan kod yang seolah-olah membuat saya hampir selesai dan kemudian memukul jalan keluar yang tidak dapat diatasi-dan saya perlu bermula dengan pendekatan baru.

Ikutilah hari ini kerana saya membimbing anda melalui bahagian teras kerja.

Sekiranya anda belum mencuba Perancang Mesyuarat, teruskan dan jadualkan pertemuan pertama anda dengan keupayaan interaktif baru. Saya mengambil bahagian dalam benang komen di bawah, jadi beritahu saya apa yang anda fikirkan! Anda juga boleh menghubungi saya di Twitter @reifman. Saya sangat berminat jika anda ingin mencadangkan ciri atau topik baru untuk tutorial masa depan.

Sebagai peringatan, Semua kod bagi Perancang Mesyuarat ditulis dalam rangka Yii2 untuk PHP. Sekiranya anda ingin mengetahui lebih lanjut mengenai Yii2, lihat siri selari Pengaturcaraan dengan Yii2.

Memperkemaskan UX dalam penjadualan

Matlamat utama saya untuk tahap produk ini adalah untuk melaksanakan semua ciri penjadualan utama dengan Ajax dan untuk menghapuskan penyegaran halaman yang diperlukan saat ini untuk menyunting subjek, menambahkan peserta, menambahkan masa dan tempat dan nota tarikh.

Latar belakang

Kerana saya telah membina beberapa Ajax ke dalam laman web tadi, saya mempunyai beberapa idea tentang apa yang akan berlaku dengan baik dan apa yang akan menjadi sukar.

Sertai saya seperti yang saya berjalan melalui unsur-unsur permulaan ajaxifying penjadualan.

Mengedit Subjek Mesyuarat

Startups Ajax - The Meeting Subject Panel Loaded via Ajax

Saya bermula dengan mengedit panel subjek mesyuarat kerana ia terdiri daripada beberapa medan statik, satu input dan satu textarea. Walau bagaimanapun, bidang subjek menggunakan sebuah widget Typeahead jQuery. Widget boleh merumitkan perkara kerana anda perlu menginisialisasinya dengan Ajax.

Dalam kes ini, saya pramuat borang yang tersembunyi dan memuatkan perpustakaan widget bersama-sama dengannya. Terdapat tiada kerumitan yang sebenar kepadanya. Dalam episod seterusnya, anda akan melihat bahawa widget Bootstrap suis pada panel masa dan tempat tarikh membuat ini lebih keras.

Preloading semua JavaScript

Jadi, untuk memudahkan ajaxifying setiap panel penjadualan (peserta, subjek, masa tarikh, tempat dan nota), saya akan memuatkan mereka di depan dan memperluas kandungan awal meeting.js.

Saya juga memperluaskan definisi MeetingAsset.php untuk memasukkan lebih banyak JavaScript:

MeetingAsset dimuatkan oleh fail view.php mesyuarat itu:

Memuatkan Panel Subjek

Mata pelajaran dan butir-butir Mesyuarat adalah sebahagian daripada _panel_what.php yang separa. Berikut, saya sediakan ia disembunyikan pada beban dalam #editWhat:

Saya mengaitkan butang edit (dengan ikon pensil) di _panel_what.php untuk memanggil JavaScript showWhat() yang berfungsi untuk menonjol atau menyembunyikan borang penyuntingan. Berikut adalah kod itu:

Fungsi showWhat() dari meeting.js ditunjukkan di bawah:

Berikut adalah bahagian atas /frontend/views/meeting/_form.php bahawa ia menyembunyikan dan menunjukkan. Di sinilah input dan medan textarea muncul:

Mengemas kini Butiran dan Butiran Mesyuarat melalui Ajax

Apabila pengguna mengemaskini borang mesyuarat, Ajax berikut dipanggil:

Fungsi actionUpdatewhat berada dalam MesyuaratController.php:

Notis Yii::$app->jawapan->format = \yii\web\Response::FORMAT_JSON; yang konfigurasikan kaedah Yii JSON, HTML tidak kembali.

Juga, fungsi Meeting:isAttendee() adalah pemeriksaan pengesahan untuk memastikan pengguna log masuk adalah peserta sebelum mengemas kini data mesyuarat.

Apa Yang Saya Pelajari Begitu Jauh

Seperti yang anda lihat, ia mengambil sedikit kod untuk membuat ajaxify semua kepingan ini.

Salah satu cabaran adalah manusia cuba untuk beralih antara banyak fail pada masa yang sama dan dua bahasa yang berbeza. PHP dan JavaScript mempunyai cara yang berbeza untuk melakukan sesuatu. Contohnya, penyambungan rentetan dilakukan dengan tempoh dalam PHP dan tanda tambah dalam JavaScript. Beralih cepat antara bahasa kadang-kadang cuba untuk membina rentetan parameter pertanyaan boleh menyebabkan kesilapan.

Terdapat juga keperluan pemeriksaan keselamatan intensif dalam fungsi Ajax berasaskan PHP saya. Dalam tutorial hari ini, anda melihat permulaan ini, tetapi saya perlu menambah pemeriksaan lebih menyeluruh sebelum membuat kod hidup sepenuhnya.

Dan akhirnya, semasa saya pergi, saya cuba menggunakan semula notasi dan pendekatan struktur supaya semua kod mempunyai komposisi dan terminologi yang serupa dengannya-walaupun bekerja dengan elemen data yang berbeza.

Menghantar Nota Mesyuarat

Startups Ajax - The Meeting Notes Panel Loaded via Ajax

Nota mesyuarat juga merupakan medan textarea statik. Walau bagaimanapun, boleh jadi benang nota berterusan yang perlu dikemas kini pada halaman apabila seseorang ditambah (cth. Bukan hanya subjek mesyuarat tunggal). Dan penting untuk memberitahu pengguna bahawa kami akan memberitahu peserta tentang nota itu.

Sebagai contoh, saya telah menghilangkan butang UX di dalam penjadualan supaya perancangan cepat dan cekap. Pengguna Perancang Mesyuarat baru sering keliru dengan ini jadi saya telah menambah isyarat untuk memberitahu mereka bahawa kami akan mengurusnya.

Startups Ajax - Meeting Notes Ajax Success Alert

Mengekod Nota melalui Ajax

Pertama, terdapat _panel.php untuk nota Mesyuarat. Saya pra-membina notifikasi ralat tersembunyi yang boleh dipaparkan melalui jQuery seperti yang diperlukan. Saya merancang untuk memudahkan dan menyeragamkan ini pada masa akan datang, termasuk memudahkan untuk menggunakan penyetempatan bagi mesej.

Dalam contoh di bawah, kedua noteMessage1 dan noteMessage2 dimuatkan sebagai tersembunyi.

Inilah jQuery yang mencari nota kosong, memaparkan ralat yang sesuai atau menyerahkan kandungan melalui Ajax untuk meminta kemas kini thread catatan, dan memaparkan amaran kejayaan:

Salah satu to-dos yang ada untuk menangani kesalahan di Ajax. Ia bukanlah mudah untuk melakukannya dan memerlukan seni bina yang agak terperinci di mana-mana dapat menyokong ini — sekarang, aku sudah masa hadapan tanpa pengendalian ralat jenis ini.

Inilah fungsi JavaScript displayAlert() yang saya gunakan dan dibina untuk semua panel dan mesej amaran mereka:

Mengemaskini Thread of Notes

Apabila pengguna menyerahkan nota baru, MeetingNoteController.php actionUpdatethread() dipanggil melalui Ajax. Inilah PHP:

Saya pada masa-masa bereksperimen dengan hanya kembali item Tempahan kandungan (iaitu Nota terbaru) dan memasukkan ke atas perkara-perkara yang terdahulu. Walau bagaimanapun, ini terbukti menyusahkan, terutamanya dengan tarikh masa dan tempat yang muncul dalam Jadual baris.

Sekarang, saya Gantikan benang dikemas kini seluruh kandungan dan menggantikan panel penuh melalui Ajax. Inilah _thread.php yang separa yang memuatkan semua nota, termasuk yang baru:

Saya harap itu cukup untuk belajar dan cuba untuk hari ini.

Saya secara harfiah membelanjakan kira-kira lima hingga tujuh hari pengekodan panjang termasuk semua yang lebih ringan untuk menyelesaikan semua kod di belakang kedua-dua episod ini dan yang akan datang. Saya tidak menarik semua yang lebih baik dalam beberapa tahun. Namun, hasilnya memberi inspirasi.

Jadi, Apa yang Seterusnya?

Saya berharap ia amat berguna untuk melihat asas-asas pembangunan Ajax Yii dan PHP. Saya pasti banyak belajar melalui proses ini, dan perubahan telah membuat mesyuarat penjadualan lebih cepat dan lebih mudah daripada sebelumnya.

Dalam episod berikutnya, saya akan menutup ciri-ciri yang masih lagi yang menambah masa dan tempat tarikh dan menggunakan alat debugging Penyemak Imbas Google untuk membantu saya.

Semasa anda sedang menunggu episod seterusnya, jadwal mesyuarat pertama anda dan cuba ciri penjadualan Ajax. Juga, saya akan menghargai jika anda berkongsi pengalaman anda di bawah komen, dan saya sentiasa berminat dengan cadangan anda. Anda juga boleh menghubungi saya di Twitter @reifman secara langsung.

Perasmian pratonton Perancang Mesyuarat kini hidup. Tidak apa-apa sekarang untuk berkongsi dengan kawan-kawan dan rakan-rakan anda untuk digunakan.

Akhirnya, saya mula bereksperimen dengan WeFunder berdasarkan pelaksanaan peraturan crowdfunding SEC yang baru. Anda boleh mengikuti profil kami di sana jika anda mahu. Saya juga akan menulis lebih lanjut mengenai ini dalam tutorial masa depan.

Tonton tutorial yang akan datang dalam Membina Permulaan Anda Dengan siri PHP.

Pautan Berkaitan

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.