Dr Martin White
Mobile Web 3D Applications
AJAX, JQuery and JSON
Copyright By cscodehelp代写 加微信 cscodehelp
Dynamic update with AJAX, JQuery & JSON
Table of Contents
Convert Lab 5 to an AJAX, JQuery and JSON version 3
Steps to convert Lab 5 to an AJAX version in Lab 6 3
Setting up Lab 6 3
Create the data model 4
New functionality for your 3D App 7
Create your AJAX update code 10
Update your index.html file home contents 13
Update your index.html file coke, sprite and pepper contents 18
Tidy up your CSS and redesign your HTML 5 layout 22
Redesign the HTML layout and add more interaction input 25
Redesign the input controls for the X3D models 25
Redesign the X3D model contents HTML layout 29
Connect up the X3D model interaction control buttons 32
X3DOM hiding and switching visible nodes 38
Add 3D images to your 3D App 38
Finish Off 39
Lab 7 MVC, JQuery, AJAX, JSON, PHP and SQLite 40
Appendix — Review Week 5 Results 41
This tutorial will be brief, primarily intended to spend some time to tidy up your code so far and adding some more functionality. The tutorial will follow a series of key steps and point you to the completed example and its components so that you can examine with the Chrome Developer Tools, as usual. However, don’t forget to make sure you have finished Lab 5 before you attempt this week’s tutorial, see Appendix — Review Week 5 Results.
The goal of Part 1 of this week’s lab is to convert your Lab 5 template into a dynamic version that takes content from a backend data store. The data store for this lab will be a simple JSON file, which in effect emulates a JSON packet being returned from the web server. We will utilise the jQuery.getJSON() method, which you can learn more about here:
We will largely only use this shorthand version, because we will mostly be retrieving data from the backend, to create an AJAX request on the server (JSON file). I say mostly because during your final assignment you may wish to add extra functionality that writes data to the back end, e.g. to add more objects into the database, or update existing database contents.
You should take the time at this stage to tidy up any CSS, and connect up any buttons, e.g. camera, model load, animation, etc. to execute any associated functionality.
Convert Lab 5 to an AJAX, JQuery and JSON version
You should have already completed Lab 5, but don’t forget your version may be slightly different to this example, if so this tutorial will form a guide. If you have followed Lab 5 exactly as in that tutorial, then you can carry on implementing the following Lab 6 instructions.
Steps to convert Lab 5 to an AJAX version in Lab 6
We shouldn’t, of course, forget that we have already used AJAX to construct the 3D Image Gallery. But, instead of using XMLHttpRequest, we are now we are going to use JQuery’s AJAX methods to dynamically update the front-end view from a back-end JSON file.
Setting up Lab 6
Follow these steps to convert your Lab 5 template into an AJAX based version:
1. Create a Lab 6 folder and copy over your Lab 5 site — use your Windows file manager to do this. While you are doing this, reflect on the file structure. There will be code and files there, which are not needed anymore. For example, you can dump:
· The examples folder, you can dump.
· The gallery folder assuming that you have now integrated the gallery coded properly into your 3D App SPA.
· You don’t need the texts folder in assets anymore, as you have already used this text. In this tutorial, you are going to transfer the text into a JSON file anyway, which you can copy from the HTML.
· There will be JS and CSS files form the distribution you installed that you don’t need, clean them out.
2. As before, I suggest using a lightweight code editor such as NotePad++, Brackets, Sublime Text, etc. to edit your Lab 6 code. I am using Visual Studio Code, as we did for Labs 1, 4 and 5.
· When you have your Lab 5 site copied, and tided up, to your Lab 6 site, test it to make sure it still works.
· You should have an index.html. You should also have an assets folder containing your images (gallery_images and site_images) and x3d models, a scripts (js and php) folder and a css folder, etc. Figure 3 illustrates something like what you should have if you have organised your site as you processed through these labs using Bootstrap — I have opened most of the folders, so you can check you are in the right space.
· Note in Figure 1 we have put the hook.php file in a php folder inside your scripts folder as part of deploying our gallery code. Similarly, we have placed the gallery_generator.js in the scripts folder and the gallery images are inside the assets folder in a gallery_images subfolder, and tidied all other images into the site_images subfolder. This means we need to modify the paths in the hook.php and gallery_generator.js and other files (inex.html and custom.css) files accordingly.
· As usual, you can examine all this code in the Live Feedback Site using the Chrome Dev Tools > Inspect
Figure 1: Your Lab 5 3D App site copied to Lab 6 ready to add the JSON backend, etc.
Create the data model
3. We will need to create a model of the data we want to fetch (or get) from the backend server. So, create a folder for your model (call it model) at the same level as your scripts or assets folder.
4. Create a JSON file to store your data. When you have create your JSON file make sure you validate your JSON code with one of the online JSON validation tools, see Figure 2.
· A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
· An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.”
· You can see from Figure 2 how to organise your data. In this case we can see a pageTextData Object with an array of 4 pageTextdata records composed of the names: title, subtitle and description with their corresponding data values. Take some time to do some background research on JSON
· Again, using the Chrome Developer Tools, you can inspect this file and create your own. Place your data.json file in the model folder.
· Make sure when you create this data.json file that you do not create a line return in the text string, this will cause a silent error. Figure 2 simply shows the text cropped as an image so you can better see the structure, but I have word wrap turned on in Visual Studio Code, so don’t make the mistake of forcing a line return.
· Further, as already mentioned, make sure that you validate your data.json file with one of many of the online JSON validators because, as again as already mentioned JSON fails silently. Figure 3 shows the validator (JSONLint) and this particular data.json file as being valid.
Figure 2: The new model folder and data.json file in Visual Studio Code
Figure 3: Creating and validating the data.json file.
5. Save and close your data.json file, we’ll need it later.
New functionality for your 3D App
6. It is worthwhile reflecting on what additional functionality we can include in our 3d App besides dynamic update of contents. There are several simple additions we can add to the functionality of your Lab 5 results, some are essential to make the 3D App dynamic and others may be optional, but only because you might think of better functions that you can add, and some are highly recommended:
· Recommended: Rearrange your HTML layout and modify any associated CSS, i.e. rebranding your 3D App. You will need to do this for your assignment hand in Week 11 anyway. If you hand in an assignment in Week 11 that is virtually the same thing as given the labs Lab you will end up with basic threshold marks.
· Recommend (strongly) investigating the Bootstrap 4 Cards; this component appears to be very powerful!
· Optional: Apply the PHP functions that are described in the Lab 6 Notes, i.e. header and footer includes, which you can use to separate out your header and footer code into separate files — this is more useful when you have many files and you want to update just a single file to reflect across all pages. For example, although we want to use a single page layout, in practice we might do this for the model pages, have a separate home, about, contacts, statement of originality, and so on pages. So, using PHP to manage this is useful.
· Recommended: Create some 3D images of your 3D models to use as extra media contents. Link these 3D images to your home page column images, and your 3D Image Gallery.
· Recommend: As always, towards the end of this tutorial, consider tweaking or tidying up your CSS if necessary.
Figure 4: Use w3schools to try out effects, e.g. JQuery show(), hide(), fadeIn(), fade(), etc. methods
Create your AJAX update code
Figure 5: The getJsonData.js file.
· Here is what it does:
· Line 5 exploits the JQuery $.getJSON () method, check out w3schools to experiment with this method, which is used to make an AJAX request and output the returned result, which is a JSON object. You need to provide a URL to send the request to, which in this case is simply the data.json file in the model folder. But, this could effectively be an api call to an api method, PHP or otherwise, located on some server ‘somewhere, could be anywhere, …’. A JSON object is then returned, i.e. the function(jsonObj), which you need to write a handler to strip out the data from the JSON object
· Tip, if you want to observe the data being returned in the jsonObject, you can use console.log(jsonObj), see Figure 6, and view this is the Chrome Developer Tools.
Figure 6: Use the console.log() function to debug, comment it out when finished
· Once you have created the getJsonData.js file you will need to link it to the index.html file, as well as the jQuery libraries, which you already have, see Figure 7.
· Also, the slim version of JQuery does not include the AJAX methods and other animation effects, so you need to change to the full version if you are not already using the full version. see Figure 7.
Figure 8: Examine the jsonObj with the console log in Chrome Developer Tools.
Update your index.html file home contents
Bootstrap — replaced the HTML for the main_text sub-components, with the three new id selectors
Bootstrap — Here’s the result, it’s the same as before, except the main text content is now asynchronously loaded from the backend data.json file
Figure 9: We are now using the id’s for title_home, subtitle_home and description_home to dynamically insert the corresponding data with an AJAX request
· To walk you through this, Figure 10 shows the JSON data in the data.json file in the model directory, for the main_text box.
Figure 10: The main_text box data in the data.json file on the backend web server.
· And, clearly Figure 11 shows the corresponding part of the JQuery handler code that gets this data from the jsonObject, builds the HTML, with the JQuery .html method and returns it to the front-end HTML file via the associated ID.
Figure 11: The associated JQuery handler code that gets this data from the jsonObject
· So the title data gets dropped into the div tag with the id=“title_home”, and so on for the subtitle and description.
· And, remember, your CSS rules in custom.css will now style the contents according to the rules you specified in your main_text for the h2, h3 and p tags.
9. Finish connecting the home contents for the backend to the frontend.
· Notice, in Figure 5 we have written the AJAX based code to request data for the left, centre and right columns. We now need to modify the HTML to insert the data contents for the home page (i.e. home contents section) left, centre and right columns. Figure 12 shows you the modified HTML code for the column contents. For example, we now use the ID selectors for title_left, subtitle_left, description_left to drop the contents for the left column into the
· In addition, we have created a new CSS class called drinksText to allow us to have more control over the styling of these contents. You will need to create the drinksText class in your custom.css file. You will need to set up CSS rules for the h2, h3 and p tags being inserted into the index.html file. If you get stuck here, check out the Live Feedback Site and navigate to the Lab 6 results, then use the Chrome Dev Tool > Inspect to examine the custom.css file
· You are now beginning to see that the frontend 3D App SPA will eventually have no hardwired contents in the frontend. All contents will all be loaded asynchronously from the backend web server.
· Figure 13 illustrates the home page, now with contents loaded dynamically, and clicking on the Coca Cola image.
Figure 12: Index.html page updated to inject the home page column contents
Figure 13: The home page with contents loaded dynamically and new CSS rules to style the text
Update your index.html file coke, sprite and pepper contents
10. Connect up the backend contents for the coke, pepper and sprite contents.
· We now need to add code to include dynamic data for the coke, sprite and pepper contents. Figure 14 shows the partially completed getJsonData.js code, I say partially because it only provides dynamic contents for a title, sub-title, and a description for the coke, sprite and pepper contents
· If, like me, you have other contents, e.g. titles, sub-titles and descriptions for the 3D model and gallery .card classes, you will need to accommodate this in your data.json file and associated getJsonData.js file. But, I will leave you to do that.
Figure 14: Completed Lab 6 getJsondata.js file
· Figure 15 shows the completed code for one of the 3D models, i.e. the coke model contents. Here you can see all the Bootstrap components that make up the coke contents where all these contents are loaded dynamically form the backend server, i.e. the data.json file.
· Well, this is not exactly quite true, there are some bits of data that could still go in the backend. You could organise the button names to come from the backend, also the X3D model paths could be stored in the backend, and the logo could be populated from the backend too. I’ll leave you to think about that.
Figure 15: The coke contents with the X3D model inline, camera buttons, gallery and the descriptions dynamically loaded
· Obviously, the sprite and pepper code should be very similar. Again, if you get stuck, look at the Live Feedback Site.
11. You should now be able to see how to exploit AJAX using the JQuery.getJson() method to dynamically update the frontend with data from a backend server. Given this you should be able to complete the Lab 6 template to include all data that could be updated dynamically, for example, you should have:
· Dynamically updated the text data in the three columns on the home page
· You can also add paths to images in the data.json file — you should definitely do this for the final assignment.
· You can also add paths to the 3D assets in the data.json file, you should definitely do this for the final assignment.
· Make sure you complete the dynamic update for the Sprit and Pepper contents.
· Note, in your final assignment you will swap the data.json file for a SQLite database
Tidy up your CSS and redesign your HTML 5 layout
· In particular, Lab 5 did not have some .subtitle classes for some of the .card classes. I have now introduced these in lab 6 just to consid
程序代写 CS代考 加微信: cscodehelp QQ: 2235208643 Email: email@example.com