Penganjur Almari Pakaian: 13 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:09

Sama ada berbelanja pakaian atau selalu diminta untuk meminjam barang apa pun, ada kalanya anda mahu memasukkan ke dalam almari anda dari mana sahaja untuk melihat sama ada anda mempunyai sesuatu yang serupa. Organizer Almari pakaian melakukan itu dan LEBIH!

Ini adalah kedai sehenti dan luas untuk pelbagai tujuan lain. My Wardrobe Organizer adalah gabungan Lembaran Google sebagai pangkalan data SQL, Skrip Google untuk mengendalikan data, dan Google WebApp untuk portal dalam talian untuk data ini. Pengguna akhir dapat melihat semua item, menapis sesuatu yang spesifik, menandakan item sebagai pinjaman, menguruskan cucian mereka, dan menghentikan ibu daripada membeli baju yang sama untuk Krismas setiap tahun *.

(* Tanpa Jaminan. Ibu akan membeli barang yang mereka mahukan sama ada anda memerlukannya atau tidak)

Melihat sekilas reka bentuk laman web pada gambar di atas, seseorang mungkin mengenali susun atur yang sudah biasa. Wardrobe Organizer disediakan seperti laman web pakaian biasa. Dipecah oleh jabatan di bahagian atas dan penapis yang disediakan di sebelahnya, antara muka ini membawa keakraban dengan fungsi kepada pengguna kasual. DAN senang digunakan.

Langkah 1: Menyiapkan Salinan Anda Sendiri

Mari mulakan dengan membuat salinan projek anda sendiri.

Google Drive

Klik pada Pautan di atas untuk membawa anda ke versi aplikasi saya sekarang.

Anda akan melihat 3 item dalam folder ini: Borang Google, Lembaran Google, dan Folder.

Klik kanan pada Helaian Google dan klik Buat Salinan.

Tetapkan Lokasi salinan ini ke Drive anda sendiri.

Setelah menyalin dokumen ini, Google Form akan dihasilkan secara automatik di folder yang sama dengan yang anda pindahkan Google Sheet.

Untuk membuat Folder (ini diperlukan untuk mengumpulkan muat naik gambar item), klik Google Form yang disalin dan akan muncul prompt yang meminta anda memulihkan lokasi folder untuk muat naik.

Anda kini mempunyai salinan dokumen ini untuk diusahakan sendiri!

Langkah 2: Gambaran Keseluruhan Borang Google

Sekarang anda mempunyai versi aplikasi ini sendiri, mari kita lihat.

Borang Google anda disediakan untuk menerima pelbagai jenis item. Walau bagaimanapun, baju, seluar, gaun, dan kasut semuanya mempunyai had ukuran yang berbeza. Oleh itu, bahagian yang berbeza dari borang ini akan diisi berdasarkan bahagian yang anda failkan. Dalam templat (Artikel Lelaki) saya telah membuat 5 kategori ukuran yang berbeza. (Untuk Artikel Wanita, klik di sini, ada banyak lagi).

Di bawah setiap bahagian ukuran, saya menetapkan tajuk unik untuk setiap parameter yang akan saya kumpulkan. Kami tidak mahu mempunyai banyak lajur dalam pangkalan data kami dengan nama "Ukuran" atau kami tidak dapat menentukan jenis pakaian yang sesuai dengan ukuran tersebut.

Pada akhir setiap bahagian, pengguna diarahkan ke bahagian akhir borang ini: Lokasi. Saya secara peribadi memilih untuk menambah Lokasi untuk menentukan barang di Dry Cleaners, di dobi, di tempat mereka atau barang-barang di mana saya telah membiarkan rakan meminjam. Ini membolehkan saya teratur dan tidak pernah merasa seperti saya kehilangan sehelai pakaian di suatu tempat.

Seperti yang saya nyatakan sejak awal, projek ini dapat dikembangkan dengan sejuta cara yang berbeza. Anda boleh menggunakannya untuk persediaan, alat organisasi yang lebih tepat, atau untuk meminjam pakaian dengan ketat. Medan dan bahagian yang boleh anda tambahkan tidak berkesudahan jadi jangan merasa terbatas pada apa yang ada dalam borang saya. (Untuk Artikel Wanita klik di sini)

Sebelum anda memuat naik beberapa item anda sendiri, mari beralih ke langkah seterusnya untuk memastikan penyerahan yang betul.

Langkah 3: Skrip Google: (Server Code.gs) Lihat Pertama pada Data dan Kod

Mengklik dokumen Google Helaian, anda akan melihat banyak lajur data (dan beberapa baris, ditinggalkan untuk demonstrasi). Semasa penghantaran borang, beberapa bahagian dilangkau, ini dapat dilihat dari data yang hilang di beberapa lajur. Tetapi lajur tambahan seperti ID, Lokasi Lalai, Siapa, dan Dikemas kini telah ditambahkan untuk mengesan pengeditan item ini dengan lebih baik.

Medan ID telah dibuat semasa anda menyerahkan borang untuk membolehkan pengecam unik semasa melintasi pangkalan data ini. Untuk membuat bidang ini, kita akan melihat Editor Skrip dengan mengklik Alat> Editor Skrip.

Dengan Skrip Editor terbuka, anda akan melihat 8 dokumen di bar sisi tetingkap baru ini. Dokumen-dokumen ini membantu mengawal proses back-end, paparan front-end, dan fungsi front-end. Kami akan menerjah setiap satu (jika anda bertahan) tetapi sekarang klik pada Kod Pelayan.

Dalam fail Server Code.gs terdapat banyak fungsi:

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

onSubmit (e) - Fungsi ini akan dikonfigurasikan sebagai fungsi pertama yang dijalankan ketika Google Form menyerahkan. Anda boleh meletakkan fungsi lain di dalam fungsi ini untuk membolehkan banyak proses berlainan berlaku.

onOpen (e) - Fungsi ini dipanggil semasa Helaian Google dibuka. Ini mengisi pilihan menu baru untuk membolehkan akses cepat ke pautan dan pandangan aplikasi.

doGet () - Fungsi ini dipanggil semasa panggilan alamat Aplikasi Web. Semasa pengguna melayari Aplikasi Web yang diterbitkan, kod ini akan memberitahu halaman apa yang hendak dipaparkan. Dalam kes ini, ini 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 sesuai dalam halaman lain. Kami menggunakannya untuk fail CSS.html dan JS.html kami.

openApplication () dan openLaundryApp () - Fungsi ini mengandungi kod untuk dijalankan apabila pengguna mengklik butang menu yang ditambahkan ke bar alat Google Sheet.

changeValueOnSubmit (e) dan setIDOnSubmit (e) - Ini adalah fungsi yang akan kita perhatikan sekarang. Mereka bertanggungjawab untuk mengemas kini bidang tertentu dengan nilai lalai ketika borang awalnya dihantar.

Langkah 4: Mengaktifkan OnFormSubmit

Kedua fungsi ini, changeValueOnSubmit (e) dan setIDOnSubmit (e), perlu dihubungkan dengan tindakan pengguna untuk menghantar borang. Untuk melakukannya, kita perlu mengaktifkan Pencetus.

Kami mengaktifkan pencetus dengan mengklik Edit> Pencetus projek semasa. Ini membuka Hab Pembangun Google.

Di sudut kanan bawah papan pemuka pemicu terdapat butang Tambahkan pemicu. Tekan di sini.

Kami sekarang akan menetapkan fungsi untuk dijalankan ketika borang dihantar. Dalam kes kami, saya mempunyai beberapa fungsi (changeValueOnSubmit (e) dan setIDOnSubmit (e)) yang saya masukkan ke dalam fungsi onSubmit () jadi saya hanya perlu menyediakan 1 pencetus. Oleh itu kami akan memilih onSubmit () dan menetapkan pencetus ini untuk menjalankan On form submit.

Kami sekarang mempunyai borang kerja yang akan mengisi Lembaran Google dengan pengecam unik dan menetapkan nilai lalai.

Anda kini boleh memuat naik item anda sendiri menggunakan Google Form. (Ini tidak perlu diteruskan kerana sudah ada nilai demo). Kami sekarang akan menyelami antara muka pengguna.

Langkah 5: Menyiapkan Antara Muka Pengguna

SELAMAT DATANG! Kami akhirnya mencapai bahagian yang anda inginkan, antara muka pengguna !!!!

Pada pandangan pertama, tidak ada apa-apa di sini. Kami belum membuat sebarang panggilan. Untuk memuatkan halaman dengan lebih pantas, saya memutuskan untuk tidak menjangkiti halaman pertama dengan SEMUA item anda dan membolehkan anda mengklik yang anda mahu lihat dengan lebih pantas. Oleh kerana ini tidak ada item di bidang konten utama dan tidak ada penapis di bar sisi. Mari klik Semua untuk melihat apa yang ada di pangkalan data kami.

Kami kini memuatkan setiap item dalam pangkalan data kami ke dalam bidang kandungan utama. Anda akan melihat gambar, nombor ID, warna, saiz, dan lokasi. Medan lokasi boleh dikemas kini di sini! Sekiranya anda memutuskan untuk meminjam barang tersebut, anda boleh memilihnya, anda boleh meletakkannya di almari, almari, atau dobi anda.

Dan di bar sisi kami mempunyai setiap bidang yang mungkin untuk setiap item pakaian dalam pertanyaan baru kami. Bayangkan sahaja mempunyai 20 pilihan ukuran yang berbeza di bar sisi ini, itu tidak akan sangat berkesan, jadi mari sempit carian kami dengan mengklik Aksesori.

Setelah memuatkan Aksesori, lihat bar sisi. Ini hanya disesuaikan dengan 3 bidang, karena ini adalah parameter yang berlaku untuk setiap item dalam pertanyaan ini. Saya akan melakukan jenis mengikut warna. Dengan mengklik warna, kotak drop down muncul. Di sini saya boleh memasukkan warna yang saya mahukan dan kemudian memilihnya, atau jika saya melihat pilihan saya dengan segera, saya hanya akan mengkliknya. Saya memilih Red untuk demonstrasi ini. Klik Terapkan Penapis di bahagian bawah bar sisi ini dan kandungan utama akan disegarkan menunjukkan item yang mempunyai warna Merah sebagai parameter warna mereka.

Saya sebelum ini menyebut bahawa pangkalan data ini membantu saya menguruskan barang saya secara pinjaman dan di dobi saya. Untuk menjadikannya sedikit lebih mudah, bukannya mengklik secara manual setiap lokasi dropdown di halaman utama ini, saya membuat Mode Dobi. Kembali ke halaman Lembaran Google dan di bawah Paparan Aplikasi, anda akan melihat Mod Dobi. Pilihan ini akan menggunakan modal yang lebih kecil yang hanya menunjukkan item dengan lokasi Dobi. Sekarang saya dapat menandakan semua item ini sebagai Lalai yang akan meletakkannya kembali di lokasi mereka yang biasanya disimpan.

Langkah 7: Projek Selesai

TAHNIAH

Bagi anda yang hanya mahukan pangkalan data yang berfungsi untuk menguruskan item anda, selamat datang ke Penganjur Dalam Talian anda. Bagi mereka yang ingin tahu berminat dengan kod di sebalik aplikasi ini. Ikut semasa saya memecahnya.

* Anda bebas untuk menghapus item ujian SELEPAS anda memasukkan sekurang-kurangnya satu item anda sendiri ke dalam pangkalan data. (Saya akan menerangkan kemudian jika anda berpegang teguh).

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

Sebelumnya kami membuka fail Server Code.gs dan saya memberikan cepat fungsi dari setiap fungsi kerana tujuannya adalah untuk melayani setiap item yang baru anda siapkan tetapi sekarang kami akan memecahkannya beberapa fungsi dan utiliti yang disebut untuk menjayakan kod ini.

1) Jadual melintasi:

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

• Kod ini adalah asas untuk melintasi Google Sheet. Saya memanggil helaian dengan nama dan bukannya nombor sehingga jika helaian dihapus atau disusun mengikut fungsi masih dapat beroperasi dengan baik.
• Dalam kod ini saya mengumpulkan hanya Julat untuk semua data dalam jadual.

2) Memberi ID:

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

• Saya sebelum ini meminta agar nilai demo ditinggalkan dalam jadual sehingga pengguna menyerahkan sekurang-kurangnya satu nilai untuk diri mereka sendiri. Ini kerana penjana ID Auto bergantung pada nilai terakhir dalam pangkalan data untuk diisi.
• Saya mengambil baris ke-2 hingga yang terakhir kerana baris terakhir adalah nilai baru kami dan lajur pertama untuk nilai ID.
• Saya kemudian menghasilkan nombor secara rawak antara 5 dan 15 dan menambahkannya ke nilai terakhir. *
• Akhirnya saya meletakkan nilai ini di ruangan ID baris terakhir.
• Seterusnya kita memanggil fungsi changeValueOnSubmit (e).

* Saya memilih 5-15 untuk membolehkan pelabelan di masa depan dan penyatuan Google Home sehingga jumlahnya tidak cukup dekat sehingga menimbulkan kekeliruan pada penyangkut baju atau label pakaian atau kod bar.

3) Menukar Nilai URL:

var DataChange = e.namedValues ["Item Item"]; var DefaultLocation = e.namedValues ["Di mana anda menyimpan artikel pakaian ini?"]; var ColD = ColumnID _ ("Gambar Item") +1; var ColLoc = ColumnID _ ("Lokasi Lalai") + 1; DataChange = DataChange.toString (). ganti ("buka?", "uc? export = view &"); e.source.getActiveSheet ().getRange (e.range.rowStart, ColD).setValue (DataChange); e.source.getActiveSheet ().getRange (e.range.rowStart, ColLoc).setValue (DefaultLocation);

• Semasa menghantar foto melalui Borang Google, URL yang dimasukkan ke dalam Helaian Google adalah pautan ke dokumen yang sebenarnya. Dalam kes kami, semasa kami membuat halaman HTML, kami mahu pautan itu hanya gambar.
• Dengan menukar "buka?" bahagian URL untuk "uc? export = view &" kami telah membuat pautan ke gambar sebagai gantinya.
• Kami sekali lagi akan meletakkan nilai baru ini di lokasi pautan Gambar Item semasa.
• Saya juga menetapkan "Lokasi Lalai" dan "Lokasi Semasa" item ke perkara yang sama dalam pangkalan data. Ini akan membantu ketika cuba menggunakan Mod Dobi saya.

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

  Fungsi ini menggunakan Nama Lajur untuk menerjemahkannya ke dalam bilangan bulat yang berguna untuk panggilan Range yang memerlukan nombor lajur dan bukannya nama

4) SpreadsheetApp.getUI ()

• Pada gambar kedua, Anda dapat melihat penggunaan SpreadsheetApp.getUI () seperti yang digunakan untuk membuat menu Menu Toolbar ke Google Sheet.
• Fungsi.getUI () juga membantu membuat pop timbul mod yang digunakan untuk mod Dobi dan sebagai pautan cepat ke antara muka laman web.

5) Perkhidmatan HTML

• Terdapat dua jenis Perkhidmatan HTML yang digunakan dalam kod ini: Templat dan HTMLOutput
• Templat membolehkan kod dimasukkan ke dalam kod HTML sehingga maklumat yang berasal dari pelayan dapat diisi ketika halaman dipanggil.
• Output HTML memaparkan halaman HTML yang mudah.
• Kami juga memiliki metode include () yang memungkinkan kami untuk membuat banyak file HTML dan menggabungkannya dalam satu file HTML template dengan mengembalikan isi file dalam format HTML dan bukan string.

Saya telah melampirkan dokumen yang disiapkan seperti Dokumentasi Skrip Aplikasi Google untuk membiasakan diri bagaimana penjelasan kod sumber dan fungsi dalam Google Apps.

Langkah 9: Langkah 2: Kod Bahagian Belakang Bahagian 2 (Server Calls.gs)

Sekarang kita telah memasukkan Server Calls.gs. Fungsi-fungsi ini digunakan terutamanya dalam JavaScript HTML sehingga mereka telah dipisahkan dari kod yang terutama digunakan di bahagian belakang yang terletak di Server Code.gs.

Gambar 1) Pembolehubah Global:

Gambar 2) mengambil Item:

Gambar 3) fetchItemsQry

Gambar 4) Item penapis

Gambar 5) fetchFiltersWithQry

Gambar 6) ColumnID, dan CacheCalls

Terdapat banyak perkara untuk dibincangkan dengan masing-masing. Dan untuk memecahkan kod dan menjelaskan apa yang berlaku, saya memerlukan sedikit ruang menaip. Dilampirkan adalah dokumen untuk pemecahan kod ServerCalls.gs

Dokumen ini disediakan seperti Dokumentasi Skrip Aplikasi Google dan bahkan membuat pautan ke objek serupa.

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

Kod HTML menjadi sangat tidak senang dalam kotak dialog Instructable. Oleh itu, sila ikuti gambar-gambar di atas.

1) Pada tajuk halaman Application.html kami menetapkan tajuk dan memanggil halaman CSS.html kami untuk dimuat.

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

Kotak tajuk utama juga terdapat dalam gambar ini. Anda boleh menukar header di sini dan memasukkan "Wardrobe [Nama Anda]" atau apa sahaja yang anda mahu kenali halaman ini sebagai.

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

Bar navigasi ini merangkumi semua jenis artikel seperti yang tertera pada helaian Artikel di dalam Helaian Google kami.

Fungsi sebaris dipanggil untuk mengambil pelbagai item ini. Kemudian gelung dijalankan untuk memasukkan setiap pilihan ini sebagai butang menu, lengkap dengan kod tindakan sehingga ketika pengguna mengklik butang menu, item masing-masing akan muncul di kawasan badan.

3) Badan utama.

Terdapat 4 bahagian untuk bahagian ini. Output teks, penapis bar sisi, gambar badan utama, dan JS termasuk.

Output teks membolehkan pengguna melihat paparan teks cepat untuk jenis item apa yang sedang mereka lihat dan bukannya merujuk kepada pilihan menu yang mereka pilih.

Penapis bar sisi mengandungi banyak penapis yang tersedia untuk jenis item yang telah dipilih oleh pengguna. Penapis ini menggambarkan semua pilihan yang tersedia untuk kategori ini serta berapa banyak item yang berada di bawah nilai kategori tersebut. Bar sisi ini diisi dengan kod JavaScript (yang akan dibincangkan seterusnya).

Badan utama pada masa ini kosong, tetapi seperti penapis, ia akan diisi dengan kotak item yang memperincikan ID Item, Warna, Ukuran, dan Lokasi dengan gambar yang disertakan setelah pengguna memilih kategori dan Kod JavaScript mengisi kawasan ini.

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

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

Sekiranya anda menganggap Kod Pelayan adalah bahagian yang berat, dapatkan ini.

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

Skrip memanggil: Saya menggunakan 3 perpustakaan yang berbeza untuk projek ini; jquery, bootstrap, dan add-on pilih khas bootstrap. Perpustakaan ini memungkinkan pemformatan objek dan panggilan lebih mudah ke elemen dalam kod HTML.

Garis JavaScript penting saya yang seterusnya adalah di bawah:

$ (dokumen).keypress (fungsi (acara) {if (event.which == '13') {event.preventDefault (); }});

Di sini saya melumpuhkan kunci enter daripada mencetuskan sebarang bentuk. Seperti dalam hal ini Google Web Apps hanya diberi alamat satu halamannya. Tekan enter akan menambahkan data ke alamat HTML dan cuba mengarahkan pengguna. Dengan melumpuhkan ini, anda membenarkan kod JavaScript anda melakukan semua kerja.

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

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

Berikut adalah dua fungsi yang membuat panggilan ke fail Code.gs Server. Garisan itu:

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

mempunyai banyak bahagian yang berfungsi tetapi kerangka itu berakar dari "google.script.run" yang memberitahu halaman HTML fungsi berikut ada di pelayan.

• Bit terakhir kod 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 adalah untuk menjalankan fungsi dengan kurungan.
• Perkara yang sama berlaku dengan withFailureHandler ()

Sekarang kita telah memecahkan panggilan Kod Pelayan, mari kita melihat sekilas apa yang berlaku apabila panggilan pelayan ini berjaya dan gagal.

fungsi allGood (e) {console.log ("Kejayaan di pelayan"); } fungsi onFailure (ralat) {$ ("# message-box"). html ("

Tidak dapat Mengambil Item Pakaian buat masa ini. RALAT: "+ error.message +"

Fungsi FailDBUpdate (ralat) {$ ("# message-box"). html ("

Anda tidak mempunyai akses untuk mengubah lokasi. RALAT: "+ error.message +"

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

Saya membuat log konsol yang sangat sederhana untuk menandakan kejayaan apabila fungsi lokasi dijalankan yang dapat anda lihat sebagai allGood ().

Ketika menangani kesalahan, kedua fungsi ini mengeluarkan pesan kesalahan di mana pengguna dapat melihat dengan menggunakan panggilan jQuery ke objek HTML dengan ID "message-box".

Sekarang mari kita pergi ke kerja yang kotor

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

Bar menu atas mempunyai pilihan untuk setiap jenis artikel. Fungsi yang mereka jalankan adalah:

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

kemas kiniSideBar = true;

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

Kita dapat melihat dalam kod ini kita mempunyai google.script.run yang memanggil Pelayan untuk mengambil maklumat. Fungsi kejayaan untuk panggilan ini adalah updateItems ().

GAMBAR 1 (dengan kod HTML berat dalam fungsi ini, sukar untuk menyalin kod dengan ketat, tanpa muncul kekacauan di dalam kotak ini)

Dalam kod updateItems (), kita mempunyai banyak perkara yang berlaku. Sekali lagi kita mesti melintasi Objek yang dikembalikan kepada kita dan menambahkan setiap item ke halaman utama badan kita.

Kod HTML ditambahkan sebagai Arrays untuk memecah kod dan memudahkan membaca dan melihat di mana itemData dimasukkan.

Dalam gelung setiap item, saya membuang medan yang tidak ingin saya lihat dalam keterangan seperti Lalai, cap waktu, dan URL gambar. Saya mengalih keluar URL gambar dari keterangan kerana sebagai tambahan ditambahkan sebagai href ke tag. Setelah maklumat ini dikumpulkan, ia dihantar ke badan utama menggunakan fungsi jQuery.append ().

Setelah semua item ditambahkan ke halaman, pertanyaan item ini akan dihantar ke Kod Pelayan sekali lagi untuk menyusun dan mengembalikan pilihan penapis seperti yang terlihat pada Gambar 2.

GAMBAR 2 (mengemas kini SideBar)

Sangat serupa dengan fungsi updateItems (), kami sekali lagi mempunyai susunan kod HTML dan gelung untuk semua pilihan penapis. Satu-satunya perubahan yang ketara ialah jQuery.selectpicker ('refresh'). Fungsi ini berasal dari pustaka skrip yang kami sertakan pada langkah terakhir. Ini membolehkan pengaturcara menulis HTML pilih sederhana dan membiarkan perpustakaan memperbaruinya untuk memasukkan fungsi yang dapat dicari serta kod CSS.

GAMBAR 3 (menapis dengan bar sisi)

Terakhir kita mempunyai fungsi updateFilter (formData). Ini digunakan semasa borang dihantar dari bar sisi. Kita mulakan dengan menggunakan fungsi jQuery.serializeArray () ini membaca kod HTML elemen yang ditentukan dalam kes kita bentuk, dan mengembalikan nilai dalam rentetan untuk dikirim ke pelayan. Dan kami memulakan proses dari Gambar 1 sekali lagi.

Langkah 13: Akhir….akhirnya

Baik di sana anda memilikinya; penjelasan yang lengkap dan menyeluruh untuk membantu anda menyediakan almari pakaian dalam talian anda sendiri, atau menggunakan fungsi yang dibuat dalam Skrip Google saya untuk mengembangkan projek anda sendiri.

Sudah menjadi perjalanan pengekodan projek ini (dan pendokumentasian melalui Instructable ini) tetapi saya telah menikmati prosesnya dan berharap anda dapat menikmati produk tersebut. Saya ingin mendengar kabar dari sesiapa sahaja yang membuat penyesuaian kerana Michael Jordan mengatakan "Siling adalah bumbung" dan saya setuju bahawa aplikasi ini tidak mempunyai had.