Adım 1: Bir Google Formu Oluşturun. ...
Adım 2: Formun Bağlantılı Elektronik Tablosuna Bir Özet Ekleme. ...
Adım 3: HTML'yi Klonlama ve Budama. ...
<html> <head> <title>Untitled form</title> </head> <body> <h1>Untitled form</h1> <form action="
https://docs.google.com/forms/d/1pL3G7Kgew13J2q4U__ko5pfoCsnf-vRb-YCWGBhAbWY/formResponse" method="POST" id="ss-form" target="_self" onsubmit=""> Name: <input type="text" name="entry.1461826949" value="" id="entry_1461826949" title="" /> Cuisine: <select name="entry.1377210772" id="entry_1377210772"> <option value=""></option> <option value="Italian">Italian</option> <option value="Southwestern">Southwestern</option> </select> Food Selection: <select name="entry.1974131163" id="entry_1974131163"> <option value=""></option> <option value="Lasagna">Lasagna</option> <option value="Eggplant Parmesean">Eggplant Parmesean</option> <option value="Chili">Chili</option> <option value="Burritos">Burritos</option> </select> Satisfaction <input type="radio" name="entry.1566397078" value="Yes" id="group_1566397078_1" role="radio" />Yes <input type="radio" name="entry.1566397078" value="No" id="group_1566397078_2" role="radio" />No <input type="hidden" name="draftResponse" value="[,,"8762606666561239613"]"> <input type="hidden" name="pageHistory" value="0"> <input type="hidden" name="fbzx" value="8762606666561239613"> <input type="submit" name="submit" value="Submit" id="ss-submit"> </form> </body> </html>
Adım 4 : JSON'un Tanıtımı. ...
// declare a simple JSON object > var simple = {field1 : 4, field2 : "this is a string"} undefined // let's look at how to inspect the object > simple.field1 4 > simple.field1++ 4 > simple.field1 5 > simple { field1: 5, field2: 'this is a string' } // declare a nested object > var nested = {field1 : "test", field2 : 55, field3 : {nested1 : 7, nested2 : 8}} undefined // let's look at how to inspect it > nested { field1: 'test', field2: 55, field3: { nested1: 7, nested2: 8 } } > nested.field2 55 > nested.field3 { nested1: 7, nested2: 8 } > nested.field3.nested1 7 // now let's put an array into a JSON object: > var simplearray = {field1 : 4, field2 : ["a", "b", "c"]} // again, let's test it: > simplearray { field1: 4, field2: [ 'a', 'b', 'c' ] } > simplearray.field1 4 > simplearray.field2 [ 'a', 'b', 'c' ] > simplearray.field2[1] 'b' // now let's add an array of objects > var anotherarray = {field1 : 4, field2 : ["a", "b", "c"], field3 : [{a:"a"}, {b:3}]} undefined // and again, let's inspect it: > anotherarray { field1: 4, field2: [ 'a', 'b', 'c' ], field3: [ { a: 'a' }, { b: 3 } ] } > anotherarray.field3[0].b undefined > anotherarray.field3[0].a 'a'
Adım 5 : Özet Elektronik Tablonuzu Yayınlayın. ...
<link rel='edit' type='application/atom+xml' href='
https://spreadsheets.google.com/feeds/worksheets/10-CRK1Ct9xAiwC8OhLFfhDsADDG6XHnYW-pT1rYtaAY/private/full/od0ha5s/-36wdw2'/>
Adım 6 : JSON'u Getirmek için AJAX Kullanmak. ...
<!-- load jQuery... this should go at the top of the page --> <script src="scripts/jquery-2.1.1.min.js"></script> <!-- fetch the JSON for the summary, and print it to the console. This should go after the body tag closes, but before the html tag closes --> <script> // be sure to update this with *your* path var jsonPath = "
https://spreadsheets.google.com/fee...XHnYW-pT1rYtaAY/od0ha5s/public/basic?alt=json"; // request the data, and for now, just print it. $.get(jsonPath, function(data) { console.log(data); }); </script>
Adım 7 : Biraz jQuery.
// select the element with id="coolthing" var elt = $("#coolthing") // select all images with a "monkey" attribute and print them $("img[monkey]").each(function(index, img) { console.log(img); } ); // select all spans that are a child of the element whose id attribute is // "coolthing", and set all of their click handlers to cause a popup that // displays the span's contents $("#coolthing span").click(function(e) { window.alert($(this).text()); }); // select all "step" tags and add some css to them: $("step").css({"padding-left":"5px"}); // select all tags whose class is "customized" var custom = $(".customized");
Adım 8 : Formumuzu jQuery ile Çok Parçalı Hale Getirmek
<html> <head> <title>Untitled form</title> <!-- note that you'll need to get a copy of jQuery... there's a copy in use by the accompanying tutorial --> <script src="scripts/jquery-2.1.1.min.js"></script> </head> <body> <h1>Untitled form</h1> <form method="POST" id="ss-form" target="_self" onsubmit="" action="
https://docs.google.com/forms/d/1pL3G7Kgew13J2q4U__ko5pfoCsnf-vRb-YCWGBhAbWY/formResponse"> <div id="part1"> <span>Name:</span> <input type="text" name="entry.1461826949" value="" id="entry_1461826949" title="" /> <span>Cuisine:</span> <select name="entry.1377210772" id="entry_1377210772"> <option id="c00" value=""></option> <option id="c01" value="Italian">Italian</option> <option id="c02" value="Southwestern">Southwestern</option> </select> <!-- NB: button types must be "button" or they will cause the form to submit --> <button type="button" id="button1">Next</button> </div> <div id="part2"> <span>Food Selection:</span> <select name="entry.1974131163" id="entry_1974131163"> <option id="f00" value=""></option> <option id="f01" value="Lasagna">Lasagna</option> <option id="f02" value="Eggplant Parmesean">Eggplant Parmesean</option> <option id="f03" value="Chili">Chili</option> <option id="f04" value="Burritos">Burritos</option> </select> <button type="button" id="button2">Next</button> </div> <div id="part3"> <span>Satisfaction</span> <input type="radio" name="entry.1566397078" value="Yes" id="group_1566397078_1" role="radio" /> <span>Yes</span> <input type="radio" name="entry.1566397078" value="No" id="group_1566397078_2" role="radio" /> <span>No</span> <input type="hidden" name="draftResponse" value="[,,"8762606666561239613"]"> <input type="hidden" name="pageHistory" value="0"> <input type="hidden" name="fbzx" value="8762606666561239613"> <input type="submit" name="submit" value="Submit" id="ss-submit"> <button type="button" id="button3">Submit</button> </div> </form> </body> <script> // it's customary to leave all script code out of the above, and then // to wire everything up down here using javascript // we don't want to run any JavaScript until the page is fully loaded, // so we use a "document.load" function to register what we want to do $(document).ready(function() { // hide the second and third parts $("#part2").toggle(); $("#part3").toggle(); // hide and disable the submit button $("#ss-submit").toggle(); $("#ss-submit").attr('disabled', 'disabled'); // connect the buttons to their behaviors $("#button1").click(checkstep1); $("#button2").click(checkstep2); $("#button3").click(checkstep3); }); // validate the first part of the form: function checkstep1() { // make sure the name is valid var name = $("#entry_1461826949").val(); if (jQuery.trim(name).length === 0) { window.alert("invalid name"); return; } // make sure the cuisine choice is valid var cuisine = $("#entry_1377210772").children(":selected").attr("id"); if (cuisine === "c00") { window.alert("invalid cuisine"); return; } // all good... change to next part of form, and focus on next item $("#part2").toggle(); $("#part1").toggle(); $("#entry_1974131163").focus(); } // validate the second part of the form: function checkstep2() { // make sure the food choice is valid var cuisine = $("#entry_1974131163").children(":selected").attr("id"); if (cuisine === "f00") { window.alert("invalid food choice"); return; } // all good... change to the next part of form, and focus on next item $("#part3").toggle(); $("#part2").toggle(); $("#group_1566397078_1").focus(); } // validate the third part of the form function checkstep3() { // get the states of the "yes" and "no" buttons var y = $("#group_1566397078_1").prop("checked"); var n = $("#group_1566397078_2").prop("checked"); if (!y && !n) { window.alert("invalid satisfaction choice"); return; } // enable the submit button, submit the form, and then immediately // disable the button $("#ss-submit").removeAttr('disabled'); $("#ss-submit").click(); $("#ss-submit").attr('disabled', 'disabled'); } </script> </html>
Adım 9 : Elektronik Tablo Temizleme Üzerine Hızlı Bir Not
Adım 10 : JSON'unuzu Ayrıştırma
// be sure to update this with *your* path var jsonPath = "
https://spreadsheets.google.com/fee...XHnYW-pT1rYtaAY/od0ha5s/public/basic?alt=json"; // get the JSON and print it $.get(jsonPath, function(data) {
Adım 11 : Sonraki Adımlar
// be sure to update this with *your* path var jsonPath = "
https://spreadsheets.google.com/fee...XHnYW-pT1rYtaAY/od0ha5s/public/basic?alt=json"; // This will hold the data as a string of comma-separated values var dataRows = []; // each row of this will be an array var dataTable = []; // request the data, parse it, and print the parsed data $.get(jsonPath, function(data) { // get number of rows var stop = parseInt(data.feed.openSearch$totalResults.$t); // concatenate the title and content into a comma-separated form for (i = 0; i < stop; i++) { // pull in the row as a csv... this requires us to replace ": " with // ",", since the content is in the form "col_header: value, ..." dataRows
= data.feed.entry.title.$t + "," + data.feed.entry.content.$t.replace(/: /g, ","); } // print the rows console.log(dataRows); // split the text, just to show that we can get proper columns out of it for (i = 0; i < stop; i++) { var tmp = dataRows.split(","); dataTable = []; dataTable[0] = tmp[0]; dataTable[1] = tmp[2]; dataTable[2] = parseInt(tmp[4]); dataTable[3] = parseInt(tmp[6]); } // print the table, for easy browsing in the JavaScript Console console.log(dataTable); });
Bu eğitimde ele aldığımız her şeyi anladığınızdan emin olmak için aşağıdaki projeleri yapmaya çalışmalısınız:
Belirli seçenek etiketlerinde remove() işlevini kullanın, böylece çok parçalı formun ikinci bölümündeki seçimler, ilk bölümde yapılan seçim tarafından kontrol edilir.
Maksimum değerinde olan yiyecek seçimlerine karşılık gelen seçenek etiketlerini kaldırmak için Google E-Tablolar'dan alınan verileri kullanın.
Kullanıcıyı bir Google sayfasına yönlendirmemesi için form gönderimini işlemek için daha temiz bir yol bulun. Formun hedefini gizli bir IFRAME yapmak isteyebilirsiniz.
Doğrulama mekanizmasını iyileştirin. Adların, telefon numaralarının ve e-postaların düzgün biçimlendirilip biçimlendirilmediğini kontrol etmek için iyi normal ifadeler bulmaya çalışın.
Formun ilk kısmı yerine bir "yükleniyor" mesajı görüntüleyin ve JSON nesnesi alınana kadar kullanıcının herhangi bir şey doldurmasına izin vermeyin.
Sınıra neredeyse ulaşıldığında birkaç kişi sayfayı yüklediğinde "limit" sütununun (madde 2) ihlallerini önlemek için form göndermeden hemen önce ikinci bir JSON sorgusu ekleyin
Bu son kısım çok önemli... çünkü Google Formlar'ı bu şekilde genişletmek ne kadar düzgün olursa olsun, tamamen müşteri tarafında çalıştığımız için, sınırların aşılmadığını gerçekten garanti edemeyiz. Bazı iş yükleri için küçük bir güvenlik açığı penceresi kabul edilebilir. Ancak diğerleri için sunucu tarafı teknikleri kullanmamız gerekecek.
Alıtıdır: CSE 398 Google Form Hacks Tutorial