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

Membangun Startup Anda: Meningkatkan Bootstrap, Ajax, dan jQuery

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup With PHP: Bootstrap Your Home Page
Building Your Startup: Using Routes for Schedule With Me

Indonesian (Bahasa Indonesia) translation by Kurniawan Sugi Purwanto (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 di Envato Tuts+. Dalam seri ini, saya akan memandu Anda dalam perintisan usaha rintisan dari konsep hingga kenyataan dengan menggunakan aplikasi Meeting Planner saya sebagai contoh di kehidupan nyata. Untuk setiap langkah di sepanjang perjalanan, saya akan merilis kode Meeting Planner sebagai contoh sumber terbuka yang Anda bisa mempelajarinya. Saya juga akan menunjukkan isu-isu terkait usaha rintisan ketika isu tersebut muncul.

Menggunakan Daya Ungkit Bootstrap, Ajax, dan jQuery

Melalui seri startup kami, Meeting Planner dan Simple Planner telah berevolusi secara sangat hebat dalam waktu yang lama. Baru-baru ini saya telah mencoba untuk masuk ke area-area yang terperinci agar layanan untuk menjadwalkan pertemuan bisa dimanfaatkan dengan cara yang semakin lama semakin mudah.

Jika Anda ingat episode kami sebelumnya Membangun Usaha Rintisan Anda: Dynamic Ajax Form untuk Penjadwalan (Envato Tuts+), Anda mengetahui betapa bermanfaatnya Ajax dan jQuery terhadap usability (kebergunaan). Menjadwalkan secara interaktif dengan Ajax telah mengubah kebergunaan situs tersebut.

Berikutnya, saya ingin meningkatkan satu titik yang menyakitkan yang selama digunakan. Jujur saja, lumayan menghabiskan waktu mengirimkan undangan untuk menyarankan berbagai pilihan tanggal dan waktu. Tiap kali saya mengirim undangan rapat untuk usaha rintisan saya sendiri, saya harus secara manual membuat dua atau tiga pilihan tanggal/waktu—dan itu lumayan mengganggu.

Dalam episode hari ini, saya akan memandu Anda melalui cara saya menyederhanakan penjadwalan rapat dengan beberapa tanggal dan waktu terkait menjadi satu langkah tunggal. Secara khusus saya akan menjelaskan cara menggunakan Bootstrap, Ajax, dan jQuery untuk menyelesaikan masalah memilih tanggal dan waktu.

Bootstrap memudahkan untuk mendesain fitur bagi desktop, tablet, dan perangkat selular. Sedangkan Ajax dan jQuery membuatnya cepat dan interaktif.

Jika Anda belum mencoba Meeting Planner atau Simple Planner, lanjutkan dan jadwalkan rapat pertama Anda. Carilah topik di tutorial ini sembari memilih opsi tanggal dan waktu.

Saya benar-benar berpartisipasi dalam utas komentar di bawah ini, jadi beritahu saya apa yang Anda pikirkan! Anda juga bisa menghubungi saya di Twitter @lookahead_io. Saya secara khusus tertarik jika Anda ingin menyarankan fitur-fitur atau topik-topik baru untuk tutorial-tutorial yang akan datang .

Sebagai pengingat, semua kode Meeting Planner ditulis dalam Framework Yii2 untuk PHP. Jika Anda ingin belajar lebih banyak tentang Yii2, silakan cek seri paralel kami Pemrograman Dengan Yii2.

Mendesain Solusi

Building Your Startup - My Design Sketch for Date Time Repetition

Menggunakan Meeting Planner untuk beberapa waktu, secara berkala saya menginginkan suatu cara untuk membuat serangkaian tanggal dan waktu dalam satu barus, seperti tiga hari ke depan jam 8.30 pagi atau tiga pekan ke depan, hari Rabu jam 7 malam. Orang akan dimudahkan untuk menjadwal jika Anda memiliki banyak pilihan kapan Anda akan bertemu.

Begitu saya menggali lebih dalam untuk memperindah antar muka pengguna, akhirnya saya punya waktu sendiri untuk berfokus pada isu ini. Sebelum saya menulis kode apapun, saya memutuskan untuk membuat sketsa bebas apa yang saya inginkan.

Saya memutuskan untuk membuat kuantitas berulang, seperti tiga atau lima ke depan, dan unit waktu berulang seperti jam, hari, atau pekan.

Dengan kata lain, katakan saja saya mengundang asisten editorial droid Tom McFarlin untuk minum kopi bersama dan saya ingin menawarkan waktu hingga tiga pagi ke depan, maka saya memilih dua dan hari untuk mengulangi hari yang saya pilih.

Menjadikannya Tetap Sederhana

Saya tidak menginginkan orang selalu dihadapkan pada formulir yang kompleks untuk menjadwalkan rapat, jadi saya memisahkan fitur pengulangan tanggal dan waktu dengan tautan opsi tingkat lanjut (advanced options) sebagaimana ditunjukkan di bawah ini. Menyentuh atau mengklik tautan ini membuka formuir yang ditunjukkan di bawah ini:

Building Your Startup - Advanced Date Time Repetition in Mobile

Memulai untuk Menulis Kode

Untuk mendesain form yang akan dikerjakan di perangkat desktop dan selular, saya menggunakan daya ungkit Bootstrap. Secara esensial, saya membuat banyak baris untuk form dengan berbagai lebar kolom yang menciut di perangkat selular. Mari kita lihat.

Sebagian besar keajaiban HTML terjadi di sini, di /frontend/views/meeting-time/_form.php. Pertama, inilah baris dengan tautan Date (tanggal), Time (waktu), Duration (durasi), dan advanced options:

Dengan menggunakan dimensi kolom yang sukses di Bootstrap seperti ini, barisnya meluas di desktop (ditampilkan di bawah ini) dan menciut dengan sendirinya jadi tiga baris di selular (ditampilkan di atas):

Building Your Startup - Advanced Date Time Repetition on Desktop

toggleTimeAdvanced() jQuery untuk tautan advanced options membuka form pengulangan dengan membuang kelas hidden:

Note: Semua jQuery bisa ditemukan di /frontend/web/js/meeting.js.

Ini juga akan menyetel ulang pengaturan pengulangan ke nol apabila Anda menutupnya—begitulah keputusan desain untuk mencegah orang membuat duplikat jika mereka menutup advanced form.

Berikut adalah sub formulir timeAdvanced:

Bootstrap yang saya gunakan tampil satu baris di desktop dan dua baris di perangkat selular.

Berikut adalah penampakannya setelah menambahkan 3 opsi tambahan untuk hari yang berturut-turut jam 9 pagi:

Building Your Startup - Advanced Date Time Repetition Form

Berikutnya, saya memperbarui fungsi addTime() untuk menangkap dan mengirimkan isian repeat_quantity dan repeat_unit ke kontroller berbasis PHP:

Startup itu sulit karena Anda selalu tergesa-gesa menyelesaikan fitur-fitur baru. Sebagai contoh, seseorang (kemungkinan ini saya, karena sayalah satu-satunya penulis kodenya) tidak pernah durasi yang dipilih; jadi saya menambahkannya juga. Sampai dengan hari ini, semua rapat berdurasi satu jam saja apapun yang diminta oleh pengguna. Cukup demikian. #startuplife.

Lalu, saya beralih ke kode MVC di Framework Yii saya yang berbasis /frontend/controllers/MeetingTimeController.php. Berikut ini, Anda bisa melihat metode AJAX actionAdd yang merespon pengajuan jQuery:

Pada dasarnya, saya membuat putar ulang (loop) dengan menggunakan suatu penghitung, $cnt, untuk menaikkan pilihan waktu mulai dan berakhir MeetingTime dengan $repeat_unit, misalnya jam, hari, atau pekan:

Jadi inilah hasilnya saya menambahkan tiga slot waktu tambahan tiap hari jam 9 pagi.

Building Your Startup - Results of Date Repitition Over Four Days

Sekarang menjadwalkan rapat dengan orang lain akan lebih mudah dan menawarkan pada mereka beberapa opsi tanggal dan waktu berturut-turut sebagai pilihan untuk bersama-sama.

Penutupan

Saya harap ini bisa membantu Anda untuk melihat bagaimana Bootstrap bisa digunakan untuk membuat formulir yang lebih baik dan bisa dikombinasikan dengan Ajax dan jQuery untuk membuat pengalaman interaktif sederhana yang lebih baik bagi para pengguna Anda.

Jika Anda belum melakukannya sebelumnya, cobalah menjadwalkan rapat dengan Meeting Planner dengan mengulangi opsi tanggal/waktu dan beritahu saya apa yang Anda pikirkan.

Anda punya pemikiran? Ide? Umpan balik? Anda selalu bisa menghubungi saya di Twitter @lookahead_io secara langsung. Lihat tutorial yang akan datang di sini di seri Membangun Usaha Rintisan Anda Dengan PHP.

Dalam beberapa pekan ke depan, saya akan lanjut memperbaiki pengalaman pengguna untuk membuat layanannya semudah mungkin digunakan. Sebagai contoh, Anda mungkin mendapati bahwa catatan rapat sekarang memiliki tab tersendiri:

Building Your Startup - The New Discussion Tab

Dan, untuk menghilangkan kebingungan orang ketika melihat di antara kolom availability (kesediaan) dengan tombol alih ya/tidak (yes/no) dan kolom kedua untuk memilih tempat akhir, saya memisahkannya menjadi tombol sub-panel yang lebih rendah, Finalize the Time (Tetapkan Waktunya). Hanya penyelenggara dan partisipan yang dtitetapkan oleh penyelenggara bisa melihat panel yang lebih rendah ini, menyederhanakan tampilan umtum untuk partisipan biasa.

Building Your Startup - Finalize the Time via Buttons instead of Choose Switches

Bootstrap, jQuery, dan Ajax diikat secara parsial atau keseluruhan untuk membangun kedua fitur tersebut.

Saya harap sampai titik ini di seri ini, Anda memiliki ide usaha rintisan Anda sendiri dan memikirkan tentang penulisan sejumlah kode. Tetaplah bersama kami untuk belajar lebih banyak tentang cara saya membuat dan meluncurkan aplikasi saya.

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.