Penyelenggara Lemari Pakaian: 13 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:56

Baik itu berbelanja pakaian atau selalu diminta untuk meminjam barang apa pun, ada kalanya Anda berharap dapat mengintip ke dalam lemari Anda dari mana saja untuk melihat apakah Anda memiliki sesuatu yang serupa. Wardrobe Organizer melakukan hal itu DAN LEBIH BANYAK LAGI!

Ini adalah toko serba ada dan luas untuk banyak tujuan lainnya. My Wardrobe Organizer adalah kombinasi dari Google Sheets sebagai database SQL, Google Scripts untuk menangani data, dan Google WebApp untuk portal online untuk data ini. Pengguna akhir dapat melihat semua item, memfilter untuk sesuatu yang spesifik, menandai item sebagai pinjaman, mengelola cucian mereka, dan menghentikan ibu membelikan Anda baju yang sama untuk Natal setiap tahun*.

(*Tidak Ada Jaminan. Ibu akan membeli apa yang mereka inginkan apakah Anda membutuhkannya atau tidak)

Melihat sekilas desain situs web pada gambar di atas, orang mungkin mengenali tata letak yang sudah dikenal. Wardrobe Organizer diatur seperti situs web pakaian biasa. Dipecah oleh departemen di bagian atas dan filter disediakan di samping, antarmuka ini menghadirkan keakraban dengan fungsionalitas bagi pengguna biasa. DAN mudah digunakan.

Langkah 1: Menyiapkan Salinan Anda Sendiri

Mari kita mulai dengan membuat salinan proyek ini sendiri.

google Drive

Klik Tautan di atas untuk membawa Anda ke versi aplikasi saya saat ini.

Anda akan melihat 3 item di folder ini: Google Form, Google Sheet, dan Folder.

Klik kanan pada Google Sheet dan klik Make A Copy.

Atur Lokasi salinan ini ke Drive Anda sendiri.

Setelah menyalin dokumen ini, Formulir Google akan dibuat secara otomatis di folder yang sama dengan tempat Anda memindahkan Google Sheet.

Untuk membuat Folder (ini diperlukan untuk mengumpulkan unggahan gambar item), klik Formulir Google yang disalin dan sebuah prompt akan muncul meminta Anda untuk mengembalikan lokasi folder untuk unggahan.

Anda sekarang memiliki salinan dokumen ini untuk dikerjakan sendiri!

Langkah 2: Ikhtisar Formulir Google

Sekarang setelah Anda memiliki versi aplikasi ini sendiri, mari kita lihat-lihat.

Formulir Google Anda disiapkan untuk menerima berbagai jenis item. Namun kemeja, celana, gaun, dan sepatu semuanya memiliki batasan ukuran yang berbeda. Oleh karena itu, bagian lain dari formulir ini akan diisi berdasarkan departemen tempat Anda mengajukan item Anda. Dalam template (Artikel Pria) saya, saya telah membuat 5 kategori ukuran yang berbeda. (Untuk Artikel Wanita, klik disini, masih banyak lagi).

Di bawah setiap bagian ukuran, saya membuat judul unik untuk setiap parameter yang akan saya kumpulkan. Kami tidak ingin memiliki banyak kolom di database kami dengan nama "Ukuran" atau kami tidak akan dapat menentukan jenis pakaian yang sesuai dengan ukuran tersebut.

Di akhir setiap bagian, pengguna diarahkan ke bagian akhir formulir ini: Lokasi. Saya pribadi memilih untuk menambahkan Lokasi untuk menentukan barang-barang di Pembersih Kering, di binatu, di tempat mereka, atau barang-barang yang saya pinjam oleh teman. Hal ini memungkinkan saya untuk terorganisir dan tidak pernah merasa seperti saya kehilangan sepotong pakaian di suatu tempat.

Seperti yang saya sebutkan dari awal, proyek ini dapat diperluas dengan jutaan cara yang berbeda. Anda dapat menggunakannya untuk inventaris, alat organisasi yang lebih tepat, atau untuk meminjam pakaian secara ketat. Bidang dan bagian yang dapat Anda tambahkan tidak terbatas jadi jangan merasa terbatas pada apa yang ada di formulir saya. (Untuk Artikel Wanita klik disini)

Sebelum Anda mengunggah beberapa item Anda sendiri, mari kita lanjutkan ke langkah berikutnya untuk memastikan pengiriman yang benar.

Langkah 3: Google Script: (Server Code.gs) Pertama Lihat Data dan Kode

Mengklik ke dalam dokumen Google Sheets, Anda akan melihat banyak kolom data (dan beberapa baris, dibiarkan untuk demonstrasi). Pada saat penyerahan formulir beberapa bagian dilewati, hal ini terlihat dari data yang hilang pada beberapa kolom. Namun kolom tambahan seperti ID, Lokasi Default, Siapa, dan Diperbarui telah ditambahkan untuk melacak pengeditan item ini dengan lebih baik.

Bidang ID telah dibuat saat Anda mengirimkan formulir untuk memungkinkan pengidentifikasi unik saat melintasi database ini. Untuk membuat bidang ini, kita akan melihat Editor Skrip dengan mengklik Alat> Editor Skrip.

Dengan Script Editor terbuka, Anda akan melihat 8 dokumen di sidebar jendela baru ini. Dokumen-dokumen ini membantu mengontrol proses back-end, tampilan front-end, dan fungsionalitas front-end. Kami akan melompat ke masing-masing (jika Anda tetap tinggal) tetapi sekarang klik pada Kode Server.

Dalam file Server Code.gs ada banyak fungsi:

onSubmit(e), onOpen(), doGet(), include(fileName), openApplication(), openLaundryApp(), changeValueOnSubmit(e), setIDOnSubmit(e)

onSubmit(e) - Fungsi ini akan dikonfigurasi sebagai fungsi pertama yang dijalankan saat Formulir Google dikirimkan. Anda dapat menempatkan fungsi lain di dalam fungsi ini untuk memungkinkan banyak proses yang berbeda terjadi.

onOpen (e) - Fungsi ini dipanggil saat Google Spreadsheet dibuka. Ini mengisi opsi menu baru untuk memungkinkan akses cepat ke tautan dan tampilan aplikasi.

doGet()- Fungsi ini dipanggil pada panggilan alamat Web App. Saat pengguna menelusuri Aplikasi Web yang diterbitkan, kode ini akan memberi tahu halaman itu apa yang harus ditampilkan. Dalam hal ini, itu adalah dokumen Application.html.

include(fileName) - Fungsi ini digunakan di dalam halaman HTML untuk membaca dokumen lain dan memasukkan isinya ke dalam format HTML yang tepat di halaman lain. Kami menggunakannya untuk file CSS.html dan JS.html kami.

openApplication() dan openLaundryApp() - Fungsi-fungsi ini berisi kode untuk dijalankan saat pengguna mengklik tombol menu yang ditambahkan ke toolbar Google Sheet.

changeValueOnSubmit(e) dan setIDOnSubmit(e)- Ini adalah fungsi yang akan kita lihat untuk saat ini. Mereka bertanggung jawab untuk memperbarui bidang tertentu dengan nilai default saat formulir pertama kali dikirimkan.

Langkah 4: Mengaktifkan OnFormSubmit

Kedua fungsi ini, changeValueOnSubmit(e) dan setIDOnSubmit(e), perlu dihubungkan ke tindakan pengguna saat mengirimkan formulir. Untuk melakukannya kita perlu mengaktifkan Trigger.

Kami mengaktifkan pemicu dengan mengklik Edit > Pemicu proyek saat ini. Ini akan membuka Pusat Pengembang Google.

Di sudut kanan bawah dasbor pemicu adalah tombol Tambahkan pemicu. Klik disini.

Kami sekarang akan mengatur fungsi untuk dijalankan ketika formulir dikirimkan. Dalam kasus kami, saya memiliki beberapa fungsi (changeValueOnSubmit(e) dan setIDOnSubmit(e)) yang saya masukkan ke dalam fungsi onSubmit() jadi saya hanya perlu menyiapkan 1 pemicu. Oleh karena itu kami akan memilih onSubmit() dan mengatur pemicu ini untuk menjalankan On form submit.

Kami sekarang memiliki formulir kerja yang akan mengisi Google Sheet dengan pengidentifikasi unik dan menetapkan nilai default.

Anda sekarang dapat mengunggah item Anda sendiri menggunakan Formulir Google. (Ini tidak perlu dilanjutkan karena sudah ada nilai demo di dalamnya). Sekarang kita akan menyelami antarmuka pengguna.

Langkah 5: Menyiapkan Antarmuka Pengguna

SELAMAT DATANG! Kami akhirnya mencapai bagian yang Anda inginkan, Antarmuka Pengguna!!!!

Pada pandangan pertama, tidak ada apa-apa di sini. Kami belum melakukan panggilan apa pun. Untuk memuat halaman lebih cepat saya memutuskan untuk tidak mengganggu halaman pertama dengan SEMUA item Anda dan memungkinkan Anda untuk mengklik apa yang ingin Anda lihat lebih cepat. Karena ini masalahnya, tidak ada item di bidang konten utama dan tidak ada filter di bilah sisi. Mari kita klik Semua untuk melihat apa yang ada di database kita.

Kami sekarang telah memuat setiap item dalam database kami ke bidang konten utama. Anda akan melihat gambar, nomor ID, warna, ukuran, dan lokasi. Bidang lokasi dapat diperbarui di sini! Jika Anda memutuskan untuk meminjamkan barang, Anda dapat memilih opsi itu, Anda dapat meletakkannya di lemari, meja rias, atau binatu Anda.

Dan di bilah sisi kami, kami memiliki setiap bidang yang memungkinkan untuk setiap item pakaian dalam kueri baru kami. Bayangkan saja memiliki 20 pilihan ukuran yang berbeda di sidebar ini, itu tidak akan terlalu efektif, jadi mari kita persempit pencarian kita dengan mengklik Aksesoris.

Sekarang kita telah memuat Accessories, lihat sidebar. Ini telah disesuaikan hanya 3 bidang, karena ini adalah parameter yang berlaku untuk setiap item dalam kueri ini. Saya akan melakukan pengurutan berdasarkan warna. Dengan mengklik warna, kotak drop-down muncul. Di sini saya dapat mengetikkan warna yang saya inginkan dan kemudian memilihnya, atau jika saya langsung melihat opsi saya, saya akan mengkliknya. Saya memilih Merah untuk demonstrasi ini. Klik Terapkan Filter di bagian bawah bilah sisi ini dan konten utama akan disegarkan yang menunjukkan kepada Anda item yang memiliki warna Merah ditetapkan sebagai parameter warnanya.

Saya sebelumnya menyebutkan basis data ini membantu saya mengelola barang-barang saya dengan pinjaman dan di binatu saya. Untuk membuatnya sedikit lebih mudah, daripada mengklik secara manual setiap lokasi dropdown di halaman utama ini, saya membuat Mode Binatu. Kembali ke halaman Google Sheet dan di bawah App View Anda akan melihat Laundry Mode. Opsi ini akan memunculkan modal yang lebih kecil yang hanya menampilkan item dengan lokasi Binatu. Saya sekarang dapat menandai semua item ini sebagai Default yang akan mengembalikannya ke lokasi mereka biasanya disimpan.

Langkah 7: Proyek Selesai

SELAMAT

Bagi Anda yang hanya ingin database yang berfungsi untuk mengelola item Anda, selamat datang di Penyelenggara Online Anda. Bagi mereka yang penasaran tertarik dengan kode di balik aplikasi ini. Tetap di sekitar saat saya memecahnya.

*Anda bebas menghapus item tes SETELAH Anda memasukkan setidaknya satu item Anda sendiri ke dalam database. (Saya akan menjelaskannya nanti jika Anda tetap tinggal).

Langkah 8: Langkah 1: Kode Back-End (Server Code.gs)

Sebelumnya kami membuka file Server Code.gs dan saya memberikan gambaran singkat dari masing-masing fungsi karena tujuannya adalah untuk melayani setiap item yang baru saja Anda siapkan, tetapi sekarang kami akan memecahnya beberapa fungsi dan utilitas yang disebut untuk membuat kode ini sukses.

1) Tabel melintasi:

var ss = SpreadsheetApp.getActiveSpreadsheet();var sheet = ss.getSheetByName("Respons Formulir 1"); var range = sheet.getRange(1, 1, sheet.getMaxRows()); var rowNum = range.getLastRow();

• Kode ini adalah dasar untuk melintasi Google Sheet. Saya memanggil lembar dengan nama daripada nomor sehingga jika lembar dihapus atau disusun ulang berdasarkan fungsi masih dapat beroperasi dengan baik.
• Dalam kode ini saya hanya mengumpulkan Range untuk semua data dalam tabel.

2) Menetapkan ID:

var LastID =range.getCell(rowNum-1, 1);var CellValue = Nomor(LastID.getValue());var ColA = 1; var maks = 15; var menit=5; CellValue = CellValue+ Math.round((Math.random()* (max - min) + min)); e.source.getActiveSheet().getRange(range.getLastRow(), ColA).setValue(CellValue); changeValueOnSubmit(e);

• Saya sebelumnya meminta agar nilai demo dibiarkan di tabel sampai pengguna mengirimkan setidaknya satu nilai untuk diri mereka sendiri. Ini karena generator ID Otomatis bergantung pada nilai terakhir dalam database untuk diisi.
• Saya mengambil baris ke-2 terakhir ke baris terakhir karena baris terakhir adalah nilai baru kita dan kolom ke-1 untuk nilai ID.
• Saya kemudian secara acak menghasilkan angka antara 5 dan 15 dan menambahkannya ke nilai terakhir. *
• Akhirnya saya menempatkan nilai ini di kolom ID baris terakhir.
• Selanjutnya kita memanggil fungsi changeValueOnSubmit(e).

* Saya memilih 5-15 untuk memungkinkan pelabelan dan integrasi Google Home di masa mendatang sehingga angkanya tidak akan cukup dekat untuk menyebabkan kebingungan pada gantungan atau label pakaian atau kode batang.

3) Mengubah Nilai URL:

var DataChange = e.namedValues["Gambar Barang"];var DefaultLocation = e.namedValues["Di mana Anda menyimpan pakaian ini?"]; var Cold = ColumnID_("Item Gambar") +1; var ColLoc = ColumnID_("Lokasi Default")+1;DataChange = DataChange.toString().replace("open?", "uc?export=view&"); e.source.getActiveSheet().getRange(e.range.rowStart, Cold).setValue(DataChange); e.source.getActiveSheet().getRange(e.range.rowStart, ColLoc).setValue(DefaultLocation);

• Saat mengirimkan foto melalui Formulir Google, URL yang dimasukkan ke dalam Google Spreadsheet adalah tautan ke dokumen sebenarnya. Dalam kasus kami, saat kami membuat halaman HTML, kami ingin tautannya hanya berupa gambar.
• Dengan mengubah "terbuka?" bagian dari URL ke "uc?export=view&" kami telah membuat tautan ke gambar sebagai gantinya.
• Kami akan kembali menempatkan nilai baru ini di lokasi tautan Item Picture saat ini.
• Saya juga mengatur "Lokasi Default" dan "Lokasi Saat Ini" dari item ke hal yang sama di database. Ini akan membantu ketika mencoba menggunakan Mode Binatu saya.

• Kami akan membahasnya di halaman berikutnya tetapi ini adalah pandangan pertama kami pada fungsi ColumnID_() yang saya buat.

  Fungsi ini menggunakan Nama Kolom untuk menerjemahkannya ke dalam bilangan bulat kolom yang berguna untuk panggilan Rentang yang memerlukan nomor kolom daripada nama

4) SpreadsheetApp.getUI()

• Pada gambar kedua Anda dapat melihat penggunaan SpreadsheetApp.getUI() seperti yang digunakan untuk membuat tambahan Menu Toolbar ke Google Sheet.
• Fungsi.getUI() juga membantu membuat popup modal yang digunakan untuk mode Binatu dan sebagai tautan cepat ke antarmuka situs web.

5) Layanan HTML

• Ada dua jenis Layanan HTML yang digunakan dalam kode ini: Template dan HTMLOutput
• Template memungkinkan kode untuk disisipkan di dalam kode HTML sehingga informasi yang berasal dari server dapat diisi saat halaman dipanggil.
• Output HTML menampilkan halaman HTML sederhana.
• Kami juga memiliki metode include() yang memungkinkan kami membuat beberapa file HTML dan menggabungkannya dalam satu file HTML template dengan mengembalikan konten file dalam format HTML daripada string.

Saya telah melampirkan dokumen yang disiapkan seperti Dokumentasi Skrip Aplikasi Google untuk memahami bagaimana kode sumber dan fungsionalitas dijelaskan dalam Google Apps.

Langkah 9: Langkah 2: Kode Back-End Bagian 2 (Server Calls.gs)

Sekarang kita telah masuk ke Server Calls.gs. Fungsi-fungsi ini digunakan terutama dalam JavaScript HTML sehingga telah dipisahkan dari kode yang terutama digunakan di bagian belakang yang terletak di Server Code.gs.

Gambar 1) Variabel Global:

Gambar 2) mengambil Item:

Gambar 3) fetchItemsQry

Gambar 4) filterItem

Gambar 5) fetchFiltersWithQry

Gambar 6) ColumnID, dan CacheCalls

Ada begitu banyak hal untuk dibicarakan dengan masing-masing. Dan untuk memecah kode dan menjelaskan apa yang terjadi, saya membutuhkan lebih banyak ruang mengetik. Terlampir adalah dokumen untuk pemecahan kode ServerCalls.gs

Dokumen ini diatur seperti Dokumentasi Skrip Aplikasi Google dan bahkan membuat tautan ke objek serupa.

Langkah 10: Langkah 3: Kode HTML (Application.html)

Kode HTML menjadi sangat tidak senang di dalam kotak dialog Instructable. Jadi silakan ikuti bersama dengan gambar-gambar di atas.

1) Di header halaman Application.html kita membuat judul dan memanggil halaman CSS.html kita untuk dimuat.

*Menjadi halaman HTML dengan templat, kita dapat menambahkan lebih banyak kode ke dokumen ini tanpa mengacaukan layar saat ini dengan menggunakan metode include(pageName) yang disebutkan sebelumnya yang ditemukan di Server Code.gs

Kotak header utama juga ditemukan di gambar ini. Anda dapat mengubah tajuk di sini dan memasukkan "Lemari [Nama Anda]" atau apa pun yang Anda ingin kenali sebagai halaman ini.

2) Tepat di bawah tajuk adalah bilah navigasi teratas kami.

Bilah navigasi ini mencakup semua jenis artikel seperti yang tercantum pada lembar Artikel di dalam Google Spreadsheet kami.

Fungsi sebaris dipanggil untuk mengambil larik item ini. Kemudian loop dijalankan untuk memasukkan masing-masing opsi ini sebagai tombol menu, lengkap dengan kode tindakan sehingga ketika pengguna mengklik tombol menu, item masing-masing akan muncul di area tubuh.

3) Tubuh utama.

Ada 4 bagian untuk bagian ini. Output teks, filter sidebar, gambar tubuh utama, dan JS termasuk.

Output teks memungkinkan pengguna untuk melihat tampilan teks cepat untuk jenis item apa yang sedang mereka lihat alih-alih merujuk ke opsi menu yang mereka pilih.

Filter bilah sisi berisi banyak filter yang tersedia untuk jenis item yang dipilih pengguna. Filter ini mencerminkan semua opsi yang tersedia untuk kategori ini serta berapa banyak item yang termasuk dalam nilai kategori tersebut. Sidebar ini diisi dengan kode JavaScript (yang akan dibahas selanjutnya).

Badan utama saat ini kosong, tetapi seperti halnya filter, ia akan diisi dengan kotak item yang merinci ID Item, Warna, Ukuran, dan Lokasi dengan gambar yang disertakan setelah pengguna memilih kategori dan Kode JavaScript mengisi area ini.

Akhirnya termasuk(JS), mari kita lihat ini pada langkah selanjutnya.

Langkah 11: Langkah 4: Kode JavaScript (JS.html)

Jika Anda mengira Kode Server adalah bagian yang berat, dapatkan beban ini.

Di sini kami menggabungkan HTML dan SeverCode kami dengan interaksi pengguna. Setiap item yang diklik harus diproses di sini untuk mendapatkan data yang tepat dan mengembalikannya dalam format yang dapat dibaca. Jadi mari kita lihat panggilan pertama kami:

Script memanggil: Saya menggunakan 3 perpustakaan berbeda untuk proyek ini; jquery, bootstrap, dan add-on khusus bootstrap-select. Pustaka ini memungkinkan pemformatan objek dan panggilan yang lebih mudah ke elemen dalam kode HTML.

Baris penting JavaScript saya berikutnya ada di bawah:

$(dokumen).tekanan tombol(function(event){ if (event.which == '13') { event.preventDefault(); } });

Di sini saya menonaktifkan tombol enter agar tidak memicu salah satu formulir. Seperti dalam kasus ini, Google Web Apps hanya diberikan satu alamat halaman. Tekan enter akan menambahkan data ke alamat HTML dan mencoba mengarahkan pengguna. Dengan menonaktifkan ini, Anda mengizinkan kode JavaScript untuk melakukan semua pekerjaan.

function removeFilters(){ google.script.run.withSuccessHandler(updateItems).withFailureHandler(onFailure). ServerRemoveFilters(); }

function updateDBlocation(id, nilai){ google.script.run.withSuccessHandler(allGood).withFailureHandler(FailDBUpdate).updateLocation(id, nilai); }

Berikut adalah dua fungsi yang melakukan panggilan ke file Server Code.gs. Garis:

google.script.run.withSuccessHandler(updateItems).withFailureHandler(onFailure). ServerRemoveFilters();

memiliki banyak bagian yang berfungsi tetapi kerangkanya di-root dari " google.script.run" yang memberi tahu halaman HTML fungsi berikut ada di server.

• Bit terakhir dari kode ini adalah fungsi untuk dijalankan. Dalam contoh ini ServerRemoveFilter()
• Dengan menambahkan withSuccessHandler() halaman HTML sekarang tahu apa yang harus dilakukan dengan data yang dikembalikan, dan ini untuk menjalankan fungsi dengan tanda kurung.
• Hal yang sama berlaku untuk withFailureHandler()

Sekarang kita telah memecah panggilan Kode Server, mari kita lihat sekilas apa yang terjadi ketika panggilan server ini berhasil dan gagal.

function allGood(e){ console.log("Berhasil di server"); } function onFailure(error){ $("#message-box").html("

Tidak Dapat Mengambil Item Pakaian saat ini. KESALAHAN: " + error.message +"

"); } function FailDBUpdate(error){ $("#message-box").html("

Anda tidak memiliki akses untuk mengubah lokasi. KESALAHAN: " + error.message +"

"); $(".location-selects").prop('disabled', 'disabled'); }

Saya membuat log konsol yang sangat sederhana untuk menandakan keberhasilan ketika fungsi lokasi dijalankan yang dapat Anda lihat sebagai allGood().

Saat menangani kesalahan, kedua fungsi ini menampilkan pesan kesalahan di mana pengguna dapat melihat dengan menggunakan panggilan jQuery ke objek HTML dengan ID "kotak pesan".

Sekarang mari kita turun ke pekerjaan yang sulit

Langkah 12: Langkah 5: Tindakan Klik Kode JavaScript (JS.html)

Bilah menu atas memiliki opsi untuk setiap jenis artikel. Fungsi yang mereka jalankan saat klik adalah:

function filterType(artikel, id){ $("ul.navbar-nav li.active").removeClass("active"); $("#currentArticle").html(" //KODE HTML DI SINI");

updateSideBar = benar;

google.script.run.withSuccessHandler(updateItems).withFailureHandler(onFailure).fetchItems("Artikel", artikel); var newSelect = "#type-"+id; $(newSelect).addClass("aktif"); $("#myNavbar").removeClass("dalam"); }

Kita dapat melihat dalam kode ini kita memiliki google.script.run yang memanggil ke Server untuk mengambil informasi. Fungsi sukses untuk panggilan ini adalah updateItems().

GAMBAR 1 (dengan kode HTML yang berat di dalam fungsi ini, sulit untuk menyalin kode secara ketat, tanpa terlihat berantakan di kotak ini)

Dalam kode updateItems(), kami memiliki banyak hal yang terjadi. Sekali lagi kita harus melintasi Object yang dikembalikan kepada kita dan menambahkan setiap item ke halaman tubuh utama kita.

Kode HTML ditambahkan sebagai Array untuk memecah kode dan membuatnya lebih mudah untuk membaca dan melihat di mana itemData dimasukkan.

Di loop setiap item, saya menghapus bidang yang tidak ingin saya lihat dalam deskripsi seperti Default, stempel waktu, dan URL gambar. Saya menghapus URL gambar dari deskripsi karena itu ditambahkan sebagai href ke tag sebagai gantinya. Setelah informasi ini dikumpulkan, informasi tersebut dikirim ke badan utama menggunakan fungsi jQuery.append().

Setelah semua item ditambahkan ke halaman, kueri item ini dikirim ke Kode Server lagi untuk mengurutkan dan mengembalikan opsi filter seperti yang terlihat pada Gambar 2.

GAMBAR 2 (memperbarui SideBar)

Sangat mirip dengan fungsi updateItems(), kita sekali lagi memiliki larik kode HTML dan loop untuk semua opsi filter. Satu-satunya perubahan yang terlihat adalah jQuery.selectpicker('refresh'). Fungsi ini berasal dari pustaka skrip yang kami sertakan di langkah terakhir. Ini memungkinkan programmer untuk menulis HTML pilih sederhana dan membiarkan perpustakaan memperbaruinya untuk memasukkan fungsi yang dapat dicari serta kode CSS.

GAMBAR 3 (memfilter dengan sidebar)

Terakhir kita memiliki fungsi updateFilter(formData). Ini digunakan ketika formulir dikirimkan dari bilah sisi. Kami mulai dengan menggunakan fungsi jQuery.serializeArray() ini membaca kode HTML dari elemen yang didefinisikan dalam kasus kami formulir, dan mengembalikan nilai dalam string untuk dikirim ke server. Dan kami memulai proses dari Gambar 1 dari awal lagi.

Langkah 13: Akhir….akhirnya

Nah itu dia; penjelasan lengkap dan menyeluruh untuk membantu Anda menyiapkan lemari pakaian online Anda sendiri, atau memanfaatkan fungsi yang dibuat di Google Script saya untuk memperluas proyek Anda sendiri.

Ini merupakan perjalanan yang mengkode proyek ini (dan mendokumentasikan melalui Instruksi ini) tetapi saya menikmati prosesnya dan berharap Anda akan menikmati produknya. Saya akan senang mendengar kabar dari siapa pun yang membuat penyesuaian seperti yang dikatakan Michael Jordan "Langit-langit adalah atapnya" dan saya setuju bahwa aplikasi ini tidak memiliki batasan.