Cov Khaub Ncaws Organizer: 13 Kauj Ruam

2024 Tus sau: John Day | [email protected]. Kawg hloov kho: 2024-01-30 09:27

Txawm hais tias nws tab tom yuav khaub ncaws lossis ib txwm raug nug kom qiv ib yam khoom, muaj qee lub sijhawm koj xav tias koj tuaj yeem nkag mus rau hauv koj lub txee dai khaub ncaws los ntawm txhua qhov chaw kom pom tias koj muaj qee yam zoo sib xws.

Nov yog lub khw muag khoom ib zaug thiab nthuav dav rau ntau lub hom phiaj. Kuv Lub Tsev Khaws Khaub Ncaws Khaub Ncaws yog kev sib xyaw ua ke ntawm Google Ntawv los ua SQL database, Google Cov Ntawv rau tuav cov ntaub ntawv, thiab Google WebApp rau lub vev xaib online rau cov ntaub ntawv no. Cov neeg siv kawg tuaj yeem pom txhua yam khoom, lim rau qee yam tshwj xeeb, kos cov khoom raws li qiv nyiaj, tswj lawv cov khaub ncaws, thiab txwv tsis pub niam los yuav koj lub tsho qub rau Christmas txhua xyoo*.

(*Tsis Muaj Kev Nyab Xeeb. Niam yuav yuav yam lawv xav tau txawm tias koj xav tau los tsis xav tau)

Ua nrawm nrawm ntawm lub vev xaib tsim hauv cov duab saum toj no, ib tus tuaj yeem paub qhov kev paub zoo. Tus Khaub Ncaws Hnav Organizer tau teeb tsa zoo li txhua lub vev xaib khaub ncaws hnav. Kev tawg los ntawm cov tuam tsev mus rau saum thiab cov ntxaij lim dej muab rau sab, qhov kev sib txuas no coj kev paub nrog kev ua haujlwm rau cov neeg siv yooj yim. THIAB nws yog qhov yooj yim siv.

Kauj Ruam 1: Teeb Koj Tus Kheej

Cia peb pib los ntawm kev tsim koj tus kheej daim qauv ntawm qhov haujlwm no.

Google Drive

Nyem rau kab ntawv txuas saum toj no coj koj mus rau kuv qhov tam sim no ntawm daim ntawv thov no.

Koj yuav pom 3 yam khoom hauv daim nplaub tshev no: A Google Form, a Google Sheet, and a Folder.

Txoj nyem rau ntawm Google Daim Ntawv thiab nyem Ua Luam.

Teev Qhov Chaw ntawm daim ntawv theej no rau koj tus kheej Drive.

Tom qab luam daim ntawv no, Google Daim Ntawv yuav raug txiav tawm hauv tib daim nplaub tshev uas koj tau txav Google Daim Ntawv.

Txhawm rau tsim daim nplaub tshev (qhov no yog qhov tsim nyog rau kev khaws cov ntawv rub tawm ntawm cov duab), nyem qhov theej theej tawm Google Form thiab cov lus ceeb toom yuav tshwm sim nug koj kom rov kho qhov chaw nplaub tshev rau uploads.

Tam sim no koj muaj daim ntawv theej ntawm daim ntawv no los ua haujlwm rau koj tus kheej!

Kauj ruam 2: Google Form Overview

Tam sim no koj muaj koj tus kheej version ntawm daim ntawv thov no, cia saib ib puag ncig.

Koj li Google Daim Ntawv tau teeb tsa los lees paub ntau yam khoom sib txawv. Txawm li cas los xij lub tsho, ris, hnav, thiab khau txhua qhov muaj qhov txwv sib txawv. Yog li ntawd ib ntu sib txawv ntawm daim ntawv no yuav tau ua kom tiav raws li lub tuam tsev koj xa koj cov khoom hauv qab no. Hauv kuv (Txiv Neej Kab Lus) tus qauv Kuv tau tsim 5 pawg sib txawv sib txawv. (Rau Cov Poj Niam Kab Lus, nyem rau ntawm no, muaj ntau yam ntxiv).

Hauv qab txhua ntu ntu, Kuv tsim lub npe tshwj xeeb rau txhua qhov ntsuas uas kuv yuav sau. Peb tsis xav kom muaj ntau kab nyob hauv peb lub database nrog lub npe "Loj" lossis peb yuav tsis tuaj yeem txiav txim siab seb hom khaub ncaws twg uas haum rau qhov loj me.

Qhov kawg ntawm txhua ntu, tus neeg siv tau hais qhia rau ntu kawg ntawm daim ntawv no: Qhov Chaw. Kuv tus kheej tau xaiv Ntxiv Qhov Chaw los txiav txim cov khoom ntawm Cov Khaub Ncaws Ntxhua Khaub Ncaws, hauv khaub ncaws, hauv lawv qhov chaw lossis cov khoom uas kuv tau cia ib tus phooj ywg qiv. Qhov no tso cai rau kuv kom muaj kev sib koom thiab tsis xav tias zoo li kuv tab tom poob ib daim khaub ncaws ntawm qhov chaw.

Raws li kuv tau hais los ntawm qhov pib, txoj haujlwm no tuaj yeem nthuav dav hauv ntau lab txoj hauv kev. Koj tuaj yeem siv nws rau cov khoom lag luam, cov cuab yeej koom nrog kom raug, lossis txhawm rau qiv cov khaub ncaws nruj. Cov teb thiab ntu uas koj tuaj yeem ntxiv tau yog qhov tsis muaj qhov kawg yog li tsis txhob xav tias muaj dab tsi hauv kuv daim ntawv. (Rau Cov Poj Niam Kab Lus Nyem qhov no)

Ua ntej koj mus upload qee qhov ntawm koj tus kheej cov khoom cia peb txav mus rau qib tom ntej kom ntseeg tau tias xa tawm kom raug.

Kauj Ruam 3: Google Sau Ntawv: (Server Code.gs) Ua ntej Saib Cov Ntaub Ntawv thiab Code

Nyem rau hauv Google Cov Ntawv Ntawv, koj yuav pom ntau kab ntawm cov ntaub ntawv (thiab qee kab, sab laug rau hauv kev ua qauv qhia). Thaum lub sijhawm xa daim ntawv qee ntu tau hla, qhov no tau pom los ntawm cov ntaub ntawv ploj hauv qee kab ntawv. Tab sis cov kab ntawv ntxiv xws li ID, Qhov Chaw Nyob Tsis Yog, Leej Twg, thiab Hloov Kho Tshiab tau ntxiv rau txhawm rau taug qab cov kev hloov pauv ntawm cov khoom no zoo dua.

Ib daim ID tau tsim thaum koj xa daim ntawv tso cai rau tus cim tshwj xeeb thaum hla cov ntaub ntawv no. Txhawm rau tsim cov haujlwm no, peb yuav tshuaj xyuas Script Editor los ntawm txhaj rau Cov Cuab Yeej> Tsab Ntawv Editor.

Nrog Script Editor qhib, koj yuav pom 8 cov ntaub ntawv nyob rau sab ntawm lub qhov rais tshiab no. Cov ntaub ntawv no pab tswj cov txheej txheem tom qab-kawg, cov lus qhia ua ntej-kawg, thiab kev ua haujlwm tom ntej-kawg. Peb yuav dhia mus rau txhua tus (yog tias koj nyob ib puag ncig) tab sis tam sim no nyem rau ntawm Server Code.

Hauv Server Code.gs cov ntaub ntawv muaj ntau txoj haujlwm:

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

onSubmit (e) - Lub luag haujlwm no yuav raug teeb tsa ua thawj qhov haujlwm kom khiav thaum Google Form xa. Koj tuaj yeem tso lwm txoj haujlwm hauv txoj haujlwm no kom tso cai rau ntau cov txheej txheem sib txawv kom tshwm sim.

onOpen (e) - Txoj haujlwm no hu ua thaum Google Sheets qhib. Nws nthuav tawm cov ntawv qhia zaub mov tshiab kom tso cai nkag tau sai rau cov ntawv thov txuas thiab saib.

doGet ()- Txoj haujlwm no hu rau ntawm Web App chaw nyob. Thaum tus neeg siv nkag mus rau qhov Web App luam tawm no tus lej no yuav qhia rau nplooj ntawv ntawd tias yuav tso saib li cas. Hauv qhov no, nws yog daim ntawv Application.html.

suav nrog (fileName) - Lub luag haujlwm no tau siv sab hauv ntawm nplooj ntawv HTML txhawm rau nyeem lwm cov ntawv thiab ntxig lawv cov ntsiab lus rau hauv hom HTML raug nyob hauv lwm nplooj ntawv. Peb siv nws rau peb cov ntaub ntawv CSS.html thiab JS.html.

openApplication () thiab openLaundryApp () - Cov haujlwm no muaj cov cai los ua haujlwm thaum tus neeg siv nyem rau ntawm cov ntawv qhia zaub mov khawm ntxiv rau Google Sheet toolbar.

changeValueOnSubmit (e) thiab setIDOnSubmit (e)- Cov no yog cov haujlwm peb yuav saib mus rau tam sim no. Lawv muaj lub luag haujlwm hloov kho qee yam haujlwm nrog qhov txiaj ntsig tsis raug thaum daim ntawv raug xa ua ntej.

Kauj ruam 4: Pab kom OnFormSubmit

Ob txoj haujlwm no, hloovValueOnSubmit (e) thiab setIDOnSubmit (e), yuav tsum txuas nrog tus neeg siv ua ntawm kev xa daim ntawv. Txhawm rau ua qhov no peb yuav tsum ua kom muaj Trigger.

Peb pab kom muaj qhov txhais los ntawm nyem Kho kom raug> Tam sim no txoj haujlwm ua rau. Qhov no qhib Google Developer Hub.

Hauv qab txoj cai kaum sab xis ntawm lub dashboard txhais yog lub pob Ntxiv tus txhais. Nyem qhov no.

Tam sim no peb yuav teeb tsa txoj haujlwm kom khiav thaum xa daim ntawv. Hauv peb qhov xwm txheej kuv muaj ntau txoj haujlwm (hloovValueOnSubmit (e) thiab setIDOnSubmit (e)) uas kuv tso rau hauv ib qho ntawm onSubmit () muaj nuj nqi yog li kuv tsuas yog teeb tsa 1 qhov ua rau. Yog li ntawd peb yuav xaiv onSubmit () thiab teeb tsa qhov no kom ua haujlwm Ntawm daim ntawv xa.

Tam sim no peb muaj daim ntawv ua haujlwm uas yuav nthuav tawm Google Sheet nrog cov cim tshwj xeeb thiab teeb tsa qhov txiaj ntsig.

Tam sim no koj tuaj yeem xa koj cov khoom siv Google Daim Ntawv. (Qhov no tsis yog qhov yuav tsum tau ua txuas ntxiv vim tias twb muaj qhov ua piv txwv tseem ceeb hauv). Tam sim no peb yuav dhia mus rau tus neeg siv interface.

Kauj Ruam 5: Teeb Tus Neeg Siv Kev Sib Tham

Nyob zoo! Thaum kawg peb tau mus txog qhov koj tuaj rau, Tus Neeg Siv Khoom Siv !!!!

Thawj zaug saib, tsis muaj dab tsi ntawm no. Peb tseem tsis tau hu xov tooj dua. Txhawm rau rub cov nplooj ntawv nrawm dua Kuv txiav txim siab tsis kis tus kab mob thawj nplooj nrog TXHUA yam khoom koj thiab tso cai rau koj nyem qhov koj xav pom sai dua. Txij li qhov no yog rooj plaub tsis muaj cov khoom hauv cov ntsiab lus tseem ceeb thiab tsis muaj cov ntxaij lim dej hauv lub sidebar. Cia peb nyem rau ntawm Txhua yam kom pom dab tsi hauv peb cov database.

Tam sim no peb tau thauj khoom txhua qhov hauv peb cov ntaub ntawv khaws cia rau hauv cov ntsiab lus tseem ceeb. Koj yuav pom cov duab, tus lej ID, xim, qhov ntau thiab tsawg thiab qhov chaw nyob. Qhov chaw nyob tuaj yeem hloov kho tshiab ntawm no! Yog tias koj txiav txim siab qiv nyiaj yam khoom koj tuaj yeem xaiv qhov kev xaiv ntawd, koj tuaj yeem tso nws hauv koj lub txee dai khaub ncaws, khaub ncaws hnav, lossis khaub ncaws.

Thiab hauv peb lub sidebar peb muaj txhua qhov ua tau rau txhua yam khaub ncaws hauv peb cov lus nug tshiab. Tsuas yog xav txog qhov muaj 20 qhov kev xaiv sib txawv ntawm cov kab ntawv no, nws yuav tsis muaj txiaj ntsig zoo, yog li cia peb nqaim peb tshawb fawb los ntawm nyem Accessories.

Tam sim no peb tau thauj khoom Accessories, saib ntawm lub sidebar. Nws tau hloov kho rau tsuas yog 3 thaj chaw, vim tias cov no yog cov ntsuas uas siv rau txhua yam hauv cov lus nug no. Kuv yuav ua ib hom xim. Los ntawm txhaj rau xim, ib lub thawv nco cia tshwm. Ntawm no kuv tuaj yeem xaiv hom xim kuv xav tau thiab tom qab ntawv xaiv nws, lossis yog tias kuv pom kuv qhov kev xaiv tam sim kuv yuav nyem rau nws. Kuv xaiv Liab rau qhov ua qauv qhia no. Nyem Thov Lim hauv qab ntawm kab ntawv no thiab cov ntsiab lus tseem ceeb yuav rov ua dua tshiab qhia koj cov khoom uas muaj xim Liab teeb raws li lawv cov xim ntsuas.

Kuv tau hais yav dhau los cov ntaub ntawv no pab kuv tswj hwm kuv cov khoom qiv nyiaj thiab hauv kuv lub khaub ncaws. Txhawm rau ua kom yooj yim me ntsis, tsis txhob siv tus kheej nyem rau txhua qhov chaw poob hauv nplooj ntawv tseem ceeb no kuv tau tsim Hom Khaub Ncaws. Rov qab mus rau Google nplooj ntawv nplooj ntawv thiab hauv qab App Saib koj yuav pom hom khaub ncaws. Qhov kev xaiv no yuav rub tus qauv me me uas qhia tsuas yog cov khoom nrog qhov chaw ntxhua khaub ncaws. Tam sim no kuv tuaj yeem kos txhua yam ntawm cov khoom no li Default uas yuav tso lawv rov qab rau hauv lawv qhov chaw uas lawv ib txwm khaws cia rau hauv.

Kauj ruam 7: Qhov project tiav

ZOO SIAB

Rau cov ntawm koj uas tsuas xav tau cov ntaub ntawv ua haujlwm los tswj koj cov khoom, zoo siab tos txais koj li Online Organizer. Rau cov neeg xav paub xav paub txog cov cai tom qab daim ntawv thov no. Nyob ib puag ncig thaum kuv tsoo nws.

*Koj muaj peev xwm tshem tawm cov khoom xeem tom qab koj nkag tsawg kawg ib ntawm koj tus kheej cov khoom rau hauv cov ntaub ntawv khaws tseg. (Kuv yuav piav qhia tom qab yog tias koj nyob ib puag ncig).

Kauj Ruam 8: Kauj Ruam 1: Back-End Code (Server Code.gs)

Nyuam qhuav pib peb tau qhib Server Code.gs cov ntaub ntawv thiab kuv tau muab nrawm nrawm ntawm txhua txoj haujlwm raws li lawv lub hom phiaj yog los pab txhua yam khoom koj nyuam qhuav teeb tsa tab sis tam sim no peb yuav rhuav lawv qee qhov ua haujlwm thiab siv tau hu ua ua kom txoj cai no ua tiav.

1) Cov lus hla:

var ss = SpreadsheetApp.getActiveS spreadsheet (); var sheet = ss.getSheetByName ("Daim Ntawv Teb 1"); var range = sheet.getRange (1, 1, sheet.getMaxRows ()); var rowNum = range.getLastRow ();

• Cov cai no yog lub hauv paus rau kev hla Google Daim Ntawv. Kuv hu daim ntawv los ntawm lub npe ntau dua li tus lej kom yog tias cov ntawv raug tshem tawm lossis rov kho dua los ntawm kev ua haujlwm tseem tuaj yeem ua haujlwm tau zoo.
• Hauv cov cai no kuv tab tom sau tsuas yog Range rau txhua cov ntaub ntawv hauv lub rooj.

2) Tus ID:

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

• Kuv tau nug yav dhau los tias qhov txiaj ntsig ntawm qhov kev tso tawm raug tso rau hauv lub rooj kom txog thaum tus neeg siv tau xa tsawg kawg ib tus nqi rau lawv tus kheej. Qhov no yog vim tias Auto ID generator tso siab rau tus nqi kawg hauv cov ntaub ntawv khaws cia.
• Kuv nqa zaum thib 2 txog kab kawg vim kab kawg yog peb tus nqi tshiab thiab kab 1 rau tus lej ID.
• Tom qab ntawd kuv tau tsim tus lej nruab nrab ntawm 5 thiab 15 thiab ntxiv nws mus rau tus nqi kawg. *
• Thaum kawg kuv tso tus nqi no hauv kab ID ntawm kab kawg.
• Tom ntej no peb hu rau changeValueOnSubmit (e) ua haujlwm.

* Kuv tau xaiv 5-15 kom tso npe rau yav tom ntej thiab Google Tsev sib koom ua ke kom cov lej yuav tsis nyob ze txaus kom ua rau tsis meej pem ntawm cov khaub ncaws lossis cov khaub ncaws lossis cov lej barcodes.

3) Hloov Tus Nqi URL:

var DataChange = e.namedValues ["Yam Duab"]; var DefaultLocation = e.namedValues ["Koj nyob qhov twg khaws cov kab lus no ntawm khaub ncaws?"]; var ColD = ColumnID _ ("Cov Duab Duab") +1; var ColLoc = ColumnID _ ("Default Location")+1; DataChange = DataChange.toString (). hloov ("qhib?", "uc? export = saib &"); e.source.getActiveSheet ().getRange (e.range.rowStart, ColD).setValue (DataChange); e.source.getActiveSheet ().getRange (e.range.rowStart, ColLoc).setValue (DefaultLocation);

• Thaum xa daim duab los ntawm Google Daim Ntawv URL tso rau hauv Google Cov Ntawv yog qhov txuas rau daim ntawv tiag. Hauv peb qhov xwm txheej, raws li peb tab tom tsim nplooj ntawv HTML peb xav kom qhov txuas tsuas yog cov duab.
• Los ntawm kev hloov qhov "qhib?" feem ntawm URL rau "uc? export = view &" peb tau tsim qhov txuas rau daim duab xwb.
• Peb yuav rov tso tus nqi tshiab no nyob rau qhov chaw ntawm Cov Duab Txuas Txuas tam sim no.
• Kuv tseem tab tom teeb tsa "Qhov Chaw Nyob" thiab "Qhov Chaw Nyob Tam Sim No" ntawm cov khoom mus rau tib yam hauv lub database. Qhov no yuav pab thaum sim siv kuv Hom Khaub Ncaws.

• Peb yuav dhia mus rau nws ntawm nplooj ntawv tom ntej tab sis qhov no yog peb thawj zaug saib ntawm ColumnID_ () muaj nuj nqi kuv tsim.

  Txoj haujlwm no siv Cov Npe Npe los txhais nws rau hauv kab ntawv sib txuas uas yog qhov muaj txiaj ntsig zoo rau Kev Hu Xov Tooj uas xav tau tus lej xov tooj ntau dua li lub npe

4) SpreadsheetApp.getUI ()

• Hauv daim duab thib ob koj tuaj yeem pom kev siv SpreadsheetApp.getUI () raws li nws siv los tsim Cov Ntawv Qhia Khoom Siv Ntxiv rau Google Ntawv.
• . GetUI () muaj nuj nqi kuj tseem pab tsim cov qauv uas tau siv rau hom khaub ncaws thiab ua qhov txuas nrawm rau lub vev xaib sib cuam tshuam.

5) HTMLService

• Muaj ob hom HTMLServices siv hauv tus lej no: Template thiab HTMLOutput
• Tus qauv tso cai rau tus lej nkag mus rau sab hauv ntawm tus lej HTML yog li cov ntaub ntawv los ntawm tus neeg rau zaub mov tuaj yeem muaj neeg nyob thaum nplooj ntawv raug hu.
• Cov Ntawv HTML tso tawm cov nplooj ntawv HTML yooj yim.
• Peb kuj tseem muaj cov () txheej txheem uas tso cai rau peb los tsim ntau cov ntaub ntawv HTML thiab sib txuas ua ke hauv ib daim ntawv HTML ua qauv los ntawm kev xa cov ntsiab lus ntawm cov ntawv hauv HTML hom ntau dua li txoj hlua.

Kuv tau txuas cov ntaub ntawv teeb tsa zoo li Google App Scripts Documentation coj los paub txog tias qhov chaws thiab kev ua haujlwm tau piav qhia li cas hauv Google Apps.

Kauj Ruam 9: Kauj Ruam 2: Back-End Code Part 2 (Server Calls.gs)

Tam sim no peb tau nkag mus rau Server Calls.gs. Cov haujlwm no tau siv feem ntau hauv HTML JavaScript yog li lawv tau sib cais los ntawm cov cai uas feem ntau siv nyob rau tom kawg uas nyob hauv Server Code.gs.

Daim duab 1) Kev Hloov Ntiaj Teb:

Daim duab 2) nqa cov khoom:

Daim duab 3) nqa cov khoom Qry

Daim duab 4) lim cov khoom

Daim duab 5) fetchFiltersWithQry

Daim duab 6) ColumnID, thiab CacheCalls

Muaj ntau yam los tham txog nrog txhua tus ntawm no. Thiab txhawm rau txhawm rau rhuav cov cai thiab piav qhia dab tsi tshwm sim Kuv xav tau chaw sau me ntsis ntxiv. Txuas nrog yog cov ntaub ntawv rau kev ua txhaum cai ntawm ServerCalls.gs

Cov ntawv no tau teeb tsa zoo li Google App Scripts Documentation thiab txawm tias txuas rau cov khoom sib xws.

Kauj ruam 10: Kauj Ruam 3: HTML Code (Application.html)

HTML code tau txais kev tsis txaus siab heev nyob rau hauv Cov Lus Qhia lub npov. Yog li thov ua raws nrog cov duab saum toj no.

1) Hauv nplooj ntawv ntawm nplooj ntawv Application.html peb tsim lub npe thiab hu rau peb nplooj ntawv CSS.html kom rub.

*Ua tus qauv HTML nplooj ntawv, peb tuaj yeem ntxiv cov cai ntxiv rau daim ntawv no yam tsis cuam tshuam rau lub vijtsam tam sim no los ntawm kev siv cov lus hais yav dhau los suav nrog (pageName) txoj hauv kev pom hauv Server Code.gs

Lub thawv ntawv lub hauv paus tseem pom nyob hauv daim duab no. Koj tuaj yeem hloov lub taub hau ntawm no thiab nkag mus "[Koj Lub Npe] Lub Tsev Khaub Ncaws" lossis lwm yam uas koj xav paub txog nplooj ntawv no.

2) Tsuas yog hauv qab lub taub hau yog peb cov lus qhia saum toj kawg nkaus.

Cov kab ntawv qhia no suav nrog txhua yam kab lus raws li tau teev tseg hauv kab ntawv hauv peb Google Sheets.

Ib txoj hauv kev ua haujlwm yog hu ua mus nqa cov kab ntawm cov khoom no. Tom qab ntawd lub voj tau khiav los suav nrog txhua qhov ntawm cov kev xaiv no ua cov ntawv qhia zaub mov, ua tiav nrog cov cai ua thaum thaum tus neeg siv nyem rau ntawm lub pob ntawv qhia zaub mov, cov khoom sib xws yuav tshwm nyob hauv cheeb tsam lub cev.

3) Lub cev tseem ceeb.

Muaj 4 ntu rau ntu no. Cov ntawv sau tawm, lub lim lim sab, lub cev tseem ceeb cov duab, thiab JS suav nrog.

Cov ntawv tso tawm tso cai rau tus neeg siv pom cov ntawv nyeem nrawm rau yam khoom ntawm yam khoom dab tsi uas lawv tab tom saib tam sim no tsis hais txog cov ntawv qhia zaub mov uas lawv xaiv.

Lub lim lim sab sau muaj ntau lub lim dej muaj rau hom khoom uas tus neeg siv tau xaiv. Cov ntxaij lim dej no cuam tshuam tag nrho cov kev xaiv muaj rau pawg no nrog rau pes tsawg yam khoom poob hauv qeb ntawd tus nqi. Lub sidebar no tau nyob nrog cov lej JavaScript (uas yuav tham tom ntej).

Lub cev tseem ceeb tam sim no tsis muaj dab tsi, tab sis zoo li cov ntxaij lim dej nws yuav tau ntim nrog cov thawv khoom nthuav dav Cov Khoom ID, Xim, Qhov Loj, thiab Qhov Chaw nrog cov duab suav nrog ib zaug tus neeg siv xaiv pawg thiab JavaScript Code nthuav tawm thaj chaw no.

Thaum kawg suav nrog (JS), cia saib qhov no ntawm cov kauj ruam tom ntej.

Kauj Ruam 11: Kauj Ruam 4: JavaScript Code (JS.html)

Yog tias koj xav tias Server Code yog ntu hnyav tau txais qhov no.

Nov peb muab peb cov HTML thiab SeverCode nrog cov neeg siv cuam tshuam. Txhua yam khoom uas tau nyem yuav tsum tau ua tiav ntawm no kom tau txais cov ntaub ntawv raug thiab xa rov qab rau hauv hom ntawv nyeem tau. Yog li cia saib ntawm peb thawj zaug hu:

Tsab ntawv hu: Kuv tab tom siv 3 lub tsev qiv ntawv sib txawv rau txoj haujlwm no; jquery, bootstrap, thiab tshwj xeeb bootstrap-xaiv ntxiv-on. Cov tsev qiv ntawv no tso cai rau kev teeb tsa cov khoom thiab hu yooj yim dua rau cov ntsiab lus hauv HTML code.

Kuv kab lus tseem ceeb tom ntej ntawm JavaScript yog hauv qab no:

$ (ntawv).keypress (muaj nuj nqi (xwm txheej) {yog (event.which == '13') {event.preventDefault (); }});

Ntawm no kuv tabtom xiam tus yuam sij nkag los ntawm kev ua rau ib qho ntawm cov ntawv. Raws li qhov xwm txheej no Google Web Apps tsuas yog muab rau lawv ib nplooj ntawv nkaus xwb. Kev nkag mus nkag yuav ntxiv cov ntaub ntawv mus rau qhov chaw nyob HTML thiab sim hloov tus neeg siv. Los ntawm kev xiam qhov no, koj tso cai rau koj tus lej JavaScript ua txhua txoj haujlwm.

muaj nuj nqi removeFilters () {google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure). ServerRemoveFilters (); }

muaj nuj nqi updateDBlocation (id, tus nqi) {google.script.run.withSuccessHandler (allGood).withFailureHandler (FailDBUpdate).updateLocation (id, tus nqi); }

Nov yog ob txoj haujlwm uas tau hu mus rau Server Code.gs file. Kab:

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

muaj ntau qhov ua haujlwm rau nws tab sis lub cev pob txha yog cag los ntawm "google.script.run" uas qhia rau nplooj ntawv HTML cov haujlwm hauv qab no yog ntawm tus neeg rau zaub mov.

• Qhov kawg me ntsis ntawm cov cai no yog kev ua haujlwm. Hauv qhov piv txwv no ServerRemoveFilter ()
• Los ntawm kev ntxiv nrogSuccessHandler () nplooj ntawv HTML tam sim no paub yuav ua li cas nrog cov ntaub ntawv uas tau xa rov qab, thiab qhov no yog los ua haujlwm nrog cov kab lus.
• Tib yam siv rau nrogFailureHandler ()

Tam sim no uas peb tau rhuav tshem Tus Neeg rau zaub mov Code hu, cia li saib nrawm ntawm qhov tshwm sim thaum cov neeg rau zaub mov hu ua tiav thiab ua tsis tiav.

muaj nuj nqi allGood (e) {console.log ("Ua tiav ntawm server"); } muaj nuj nqi onFailure (yuam kev) {$ ("#message-box"). html ("

Tsis tuaj yeem nqa Cov Khoom Khaub Ncaws ntawm lub sijhawm no. YAM: " + error.message +"

");} ua haujlwm FailDBUpdate (yuam kev) {$ ("#message-box "). html ("

Koj tsis muaj kev nkag mus hloov chaw. YAM: " + error.message +"

"); $ (". qhov chaw xaiv "). prop ('xiam oob qhab', 'xiam oob qhab');}

Kuv tsim lub cav yooj yim heev nkag mus rau qhov ua tiav thaum qhov chaw ua haujlwm tau khiav uas koj tuaj yeem pom zoo li allGood ().

Thaum tuav qhov ua tsis raug, ob txoj haujlwm no tso tawm cov lus yuam kev uas tus neeg siv tuaj yeem pom los ntawm kev siv jQuery hu rau cov khoom HTML nrog tus lej ID ntawm "xov-lub npov".

Tam sim no cia peb mus rau qhov ua haujlwm hnyav

Kauj Ruam 12: Kauj Ruam 5: JavaScript Code-Click Actions (JS.html)

Cov ntawv qhia zaub mov saum toj kawg nkaus muaj kev xaiv rau txhua kab lus. Cov haujlwm uas lawv khiav ntawm nyem yog:

muaj nuj nqi filterType (kab lus, id) {$ ("ul.navbar-nav li.active"). tshem tawm Class ("nquag"); $ ("#currentArticle"). html ("// HTML CODE NTAWM NO");

updateSideBar = tseeb;

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure).fetchItems ("Kab lus", kab lus); var newSelect = "#type-"+id; $ (newSelect).addClass ("nquag"); $ ("#myNavbar"). tshem tawm Class ("hauv"); }

Peb tuaj yeem pom hauv cov cai no peb muaj google.script.run uas hu rau Tus Neeg rau zaub mov kom khaws cov ntaub ntawv. Txoj haujlwm ua tiav rau qhov kev hu no yog updateItems ().

DUAB 1 (nrog rau qhov hnyav HTML code nyob rau hauv txoj haujlwm no nws nyuaj rau luam cov cai nruj me ntsis, yam tsis pom qhov tsis meej nyob hauv lub npov no)

Hauv qhov updateItems () code, peb muaj ntau yam tshwm sim. Ib zaug ntxiv peb yuav tsum hla dhau Lub Hom Phiaj uas tau rov qab los rau peb thiab ntxiv txhua qhov khoom rau peb nplooj ntawv tseem ceeb.

Tus lej HTML tau ntxiv rau hauv raws li Arrays txhawm rau txhawm rau txhawm rau txhawm rau ua kom yooj yim nyeem thiab pom qhov twg itemData raug ntxig.

Hauv lub voj ntawm txhua qhov khoom, Kuv tab tom tshem cov teb uas kuv tsis xav pom hauv qhov kev piav qhia xws li Lub Sijhawm, lub sijhawm, thiab daim duab URL. Kuv tshem daim duab URL los ntawm cov lus piav qhia vim tias nws tau raug ntxiv ua href rau ib qho tag xwb. Thaum cov ntaub ntawv no tau sib sau ua ke nws raug xa mus rau lub cev tseem ceeb siv jQuery.append () muaj nuj nqi.

Tom qab txhua yam khoom tau ntxiv rau nplooj ntawv, cov lus nug ntawm cov khoom no tau xa mus rau Server Code dua txhawm rau txheeb thiab xa cov lim xaiv raws li pom hauv daim duab 2.

DUAB 2 (hloov kho SideBar)

Zoo heev rau qhov hloov tshiabItems () muaj nuj nqi, peb ib zaug ntxiv muaj cov cim ntawm HTML code thiab lub voj rau txhua qhov kev xaiv lim. Tsuas yog qhov hloov pauv pom yog jQuery.selectpicker ('refresh'). Txoj haujlwm no los ntawm cov tsev qiv ntawv sau uas peb suav nrog hauv cov kauj ruam kawg. Nws tso cai rau tus kws sau ntawv xaiv qhov yooj yim xaiv HTML thiab cia lub tsev qiv ntawv hloov kho nws kom suav nrog kev ua haujlwm tshawb nrhiav nrog rau tus lej CSS.

DUAB 3 (lim nrog lub sidebar)

Thaum kawg peb muaj qhov hloov tshiab lim (formData) ua haujlwm. Qhov no yog siv thaum daim ntawv xa los ntawm lub sidebar. Peb pib los ntawm kev siv jQuery muaj nuj nqi.serializeArray () qhov no nyeem tus lej HTML ntawm cov ntsiab lus tau piav qhia hauv peb cov ntaub ntawv ib daim ntawv, thiab xa qhov txiaj ntsig hauv txoj hlua xa mus rau tus neeg rau zaub mov. Thiab peb pib txheej txheem los ntawm Daim Duab 1 tag nrho dua.

Kauj Ruam 13: Xaus…

Zoo, koj muaj nws; cov lus piav qhia ntxaws thiab ntxaws los pab koj teeb tsa koj tus kheej lub khaub ncaws online, lossis siv lub luag haujlwm tsim hauv kuv li Google Sau ntawv los nthuav koj tus kheej txoj haujlwm.

Nws tau taug txoj hauv kev coding txoj haujlwm no (thiab sau tseg los ntawm Cov Lus Qhia no) tab sis kuv tau nyiam cov txheej txheem thiab vam tias koj yuav txaus siab rau cov khoom. Kuv yuav nyiam hnov rov qab los ntawm ib tus neeg uas hloov kho raws li Michael Jordan hais "Lub qab nthab yog lub ru tsev" thiab kuv pom zoo daim ntawv thov no tsis muaj kev txwv.