Dr Martin White
Mobile First Web 3D Applications
Interactivity with JavaScript and PHP
Copyright By PowCoder代写 加微信 powcoder
Interactivity with JavaScript and PHP
Table of Contents
Introduction 2
Review Week 4 Results 4
Laboratory 5 Results 5
Simple HTML, JavaScript and PHP Examples 6
Hello World 6
JavaScript Content Swapping 9
JavaScript countUp and changeLook examples 11
Create a Single Page Application — 3D App 16
Single Page Web3D App with JavaScript 17
Create an Image Gallery using JavaScript, JQuery and PHP 21
Step 1: Set up your site 21
Step 2: PHP Hook 24
Step 3: Creating the JavaScript Controller 27
Step 4: Creating the HTML File for Testing the Gallery 33
Step 5: Create some CSS rules to style the gallery 35
Step 6 the gallery results 35
Integrate the Gallery into your simple 3D App 37
Restyle the 3D App 42
Lab 5 Results 44
Lab 6 — Exploit AJAX with JQuery and JSON 45
Appendix 46
Appendix 1 — Lab 4 Results 46
Appendix — CSS Selector IDs 47
Appendix — Self-Directed Learning 48
JavaScript tutorials 48
X3DOM tutorials 49
Introduction
This Lab 5 tutorial will focus on adding interactivity to the basic 3D App created in Lab 4. It is important that undergraduates complete this lab during week 5, so you will need to put some time in to catch up if you are behind. Further, we are now starting to get to grips with some JavaScript and soon we will use JavaScript to manipulate out X3DOM models (X3D in the HTML DOM) so you will need to put in extra time to more familiar with the technologies we are using, see Appendix — Self-directed Learning.
In Lab 5 we will create some simple JavaScript functionality that converts your Lab 4 basic 3D App into a single page application (SPA) in the form of a 3D App. Although we are using modern frameworks such as Bootstrap, and libraries such as jQuery, we will create this initial SPA the old fashioned way with just plain JavaScript using the document.getElementById(id) function to swap contents — some of you may already be familiar with this function from previous modules.
Along the way we will also implement a simple gallery interface using JavaScript, a little JQuery, a bit of PHP, and AJAX using XMLHttpRequest. “All modern browsers have a built-in XMLHttpRequest object to request data from a server.”[footnoteRef:1] You can use this simple gallery interface as a thumbnail gallery, but where should your images come from? An obvious choice is to delve into 3ds Max a bit more and render some photorealistic 3D images of your models — this extra work is a good way to get into the so called ‘going beyond what is taught’ marks! [1: https://www.w3schools.com/xml/xml_http.asp]
So, in this lab, you will get an initial taste of a full technology stack minus the data store:
· JavaScript,
· AJAX using XMLHttpRequest,
· and PHP.
Where the XMLHttpRequest object is effectively used as an API call to transfer data (i.e. images to a gallery interface) between your web browser (3D App) and a web server (the ITS web server) — the images are stored on the web server.
You may, or may not use the resulting gallery interface in your assignment later, indeed you may swap this gallery code for a Bootstrap gallery component instead. However, This gallery ‘hand crafted’ component if suitably extended and refined could serve as a component that gains extra marks.
Lab 5 will introduce you to the concept of browser (or client-side) scripting using JavaScript and give you a hint at the role of PHP for server-side scripting (the gallery interface). Scripting allows you to manipulate the web page contents in ways that cannot be done with HTML or CSS.
To achieve a good level of dynamic control and interactivity on the web page you need to use a scripting language, in this lab we will focus on utilising JavaScript, which allows you to add functionality such as buttons and forms, etc., communicate with the server, make calculations, write interactive games, add special effects, and generally make your web pages smarter.
However, we won’t cover all this functionality (this isn’t a JavaScript module, after all), just the stuff that may prove useful for your assignments — you will need to discover more about JavaScript yourself to provide even more interesting functionality!
In laboratory 5 you should complete the following tasks:
1. Convert your Lab 4 basic 3D App from four web pages to one webpage with the same content using a JavaScript ‘content swapping’ function by exploiting the JavaScript document.getElementById(id) function, which has cross bowser support.
· The document.getElementById(id) function is a very powerful JavaScript function that enables you to manipulate HTML elements in JavaScript.
· It allows you to do something with an HTML element, e.g. a div tag, such as display the contents of that div tag or not, or change properties such as background color, font style, etc. In order to restyle a page interactively.
2. Create, and integrate into your 3D App, a simple image gallery interface, which (perhaps for your assignment) you could repurpose as a 3D object selection gallery utilising both PHP and JavaScript. Other uses could be to select larger images, perhaps displayed in a ‘light box’ — you should note, however, that this could also be done with the Bootstrap .img-thumbnail class along with a Modal to create a sort of lightbox, or use the Bootstrap gallery component. In lab 6, you will see I used rendered images and a modal component for the gallery interface, see the Live Feedback Site. These principles could also be used to generate image-based buttons for selecting different camera views, and so on.
3. You should also take the opportunity in this lab to tidy up your CSS and create a JavaScript function to restyle dynamically your 3D App.
4. And, of course, we need to connect up your camera views, animation, and light buttons to their associated inline X3D code nodes, if you can’t figure this out I show you how in Lab 6 again. Remember, we showed you how to do this in Lab 3.
5. At the end of this laboratory we also suggest that you read around and experiment with JavaScript in general by trying out the resources indicated in Canvas to familiarise yourself some more with JavaScript. Some suggested resources to look at include, but are not limited to:
· W3C Schools JavaScript Tutorial
· JavaScript Tutorials for Beginner’s
· JavaScript for the Total Non-Programmer
Having said that most of the examples we give you are sufficient to create a reasonably interactive Web3D App!
6. Further, you should investigate the X3DOM tutorials, which should enable you to appreciate how X3D is integrated and manipulated in the HTML DOM (Document Object Model) on the webpage —using JavaScript.
· X3DOM Tutorials
· X3DOM Examples
Review Week 4 Results
You should have 4 key sets of results from the previous 4 laboratories. You can see in the Appendix the Lab Results expected for Lab 4. This is critical, you need these results for this Lab 5. If you have not finished these or achieved these results you need to correct or catch up. The Live Feedback Site gives you the correct results and codes so that you can compare and contrast, its link is in the Module Canvas home page.
Laboratory 5 Results
Figure 1 illustrates something like how we expect your Lab 5 result to look like, i.e. a new version of the Lab 4 template, that has been converted into a single web page using the JavaScript ‘content swapper’ code developed in this Lab 5, including a theme restyle button and the new gallery. Note, this represents some nominal use of JavaScript, to gain marks in the assignment associated with a ‘deeper understanding’ you would be expected to go significantly beyond this level of Java Script coding — see assignment details on Canvas for further information.
Figure 1: Example single page layout, fluid grid and CSS styling.
Simple HTML, JavaScript and PHP Examples
First things first, while this is not a module that teaches JavaScript and PHP per se, we do need to have a play around in this JavaScript and PHP pond to get our feet wet a bit. Let’s start by completing the examples discussed in your Lab 5 Notes — make sure you read these first.
Hello World
In the Lab 5 Notes we show you a simple HTML, JavaScript and PHP example that renders Hello World to the HTML web page.
1. Create a new folder for your Lab 5 results. As you already know, I am using Visual Studio Code, Figure 2 illustrates the evolving site structure for all the 3D App labs so far. Here you can see that I have created an exampleScripts folder for these ‘simple HTML, JavaScript and PHP examples’. You should create the same sub folder, e.g. exampleScripts, in your folder structure to hold the examples scripts we will create.
2. Create a new file and save your file as helloworld.php in your exampleScripts folder. Note, all PHP files need to have the extension .php. If you use any other text editor, e.g. Notepad++, Sublime Text, you will save as a .php file.
Tip! By the time we get to lab 5 it is not unusual to have thrown file discipline out the window resulting in a well and truly mashed up site with lots of extraneous files and folders as you have progressed through the weekly laboratories, so now might be an opportunity to tidy up your site.
Your well-maintained site, however, should look something like that shown in Figure 3 at this point — I repeat, take the opportunity to tidy up if you have to! The LHS of Figure 2 shows my site structure in Visual Studio Code, and the RHS shows the same structure in my Windows 10 Laptop. If you have copied over your Lab 4 work to your Lab 5 folder, and created your exampleScripts folder and helloworld.php file, you should have something similar to that shown in Figure 3.
Lab folder and file structure in Visual Studio Code
Same in Mac Finder
Figure 2: Site structure for Mobile Web 3D Applications.
Note the nicely laid out Lab 1, Lab 2 (this only contains the 3ds Max stuff), Lab 3, with my converted models, Lab 4, which we completed last week — this contains the 4 HTML pages for Home Coke, Sprite and Pepper, and we will be using parts of this code along with the associated CSS, scripts, assets, etc. for Lab 5 — I have copied Lab 4 results to my Lab 5 folder to start the conversion to a SPA based 3D App). And finally, the new lab 5 with the helloworld.php file just created.
3. Recalling the example in the Lab Notes 5 document, you can write the following code, Figure 3, to render hello world:
Figure 3: Hello world in HTML, JavaScript and PHP
4. When you have finished writing the code, save it and copy the file from your local directory to your public_html directory somewhere so that it is live on the web, e.g. public_html/3dapp/lab5/exampleScripts, or something like that.
5. Now run the helloworld.php file. How do you do this? Can you drag the file onto a web browser and does it run then? You should find it won’t run because it is a PHP file, and a PHP file needs a server environment to run, which is also PHP enabled. You might see the code rendered, or you might get asked to download the file depending on where you are trying to run the code. So, you need to check it runs by typing its URL into the web browser
6. Open up a web browser, e.g. Chrome, and enter the URL where you have placed the code, for example on the ITS Web or test it on a localhost:
· http://localhost:8888/3dapp/lab5/exampleScripts/helloworld.php
· http://users.sussex.ac.uk/~martinwh/3dapp/3D_Apps_2019/lab5/js/exampleScripts/helloworld.php
You can also comment out the PHP part, and save the file as an HTML file. Figure 4 shows the output.
Figure 4: helloworld.php file rendering Hello World with HTML, JavaScript and PHP in Google Chrome on a Mac in a localhost
Next we will create a simple JavaScript swap function using the document.getElementById(id) function to create a single page 3D App.
JavaScript Content Swapping
If you check out the Lab 5 Notes, we discuss the concept of using JavaScript to swap content using the document.getElementById(id) function. The getElementById() method accesses the first element with the specified id. This selector id is the id that you apply to a div tag, for example, you might create a div tag something like:
In which case, the id is ‘coke’. Let’s try out the actual example we illustrated in the Lab 5 Notes:
1. Create a new HTML file (note we are not using any PHP code now) and enter the code you were given in the Lab 5 Notes, however let’s make it a bit more compatible with your basic 3D App from Week 4, see Figure 6 for the code you need to enter:
Figure 5: JavaScript content swap example
2. Once you have this code entered and saved you can view it in a web browser. For those of you who are awake, you will notice the counter variable is not used yet. Because this is an HTML file, you can simply drag it onto a web browser, but it is better to get into the habit of testing on a server. So, copy it to your exampleScripts folder (or to whatever folder structure you have created) as before and access it that way. Figure 6 illustrates the results — as you can see, I am using a localhost to test.
Figure 6: JavaScript content swap results
3. What you have essentially created here is a menu for the Home Page, Coca Cola, Sprite and Dr Pepper page contents, but instead of linking to other web pages you are selecting new content by ‘swapping’ (i.e. enabling the selected by id) div tags. This is achieved by blanking out all the div tags by setting style.display = ‘none’; and then selecting the required content by passing the id associated with the required div tag to the document.getElementById(selected).style.display = ‘block’; which then displays that div tags content as a block element. It should be obvious that this swap function will be very useful for creating a single page application (SPA), i.e. your basic 3D App.
Let’s try some other simple examples.
JavaScript countUp and changeLook examples
1. Create the other two examples discussed in the Lab 5 Notes, but don’t bother to create a new file, just build the examples into the content swap file (jsContentSwap.html). The code is illustrated in Figure 7.
2. The countUP example could be adapted to change a texture or colour on your 3D model — you will find examples that do just this on www.x3dom.org, or you could adapt it to cycle through web page styles or brands in combination with the changeLook function.
3. The changeLook function is quite interesting — you can adapt this concept to change the them.
4. Figure 8 illustrates the result.
5. Test the countUp and changeLook functions work, you should see something like that illustrated in Figures 9, 10 and 11 after clicking ‘here’ several times, and clicking the Click me! Button to restyle the page.
6. You can see that the text was re-styled to ‘pink’, and background changed to ‘grey’, etc.
7. Remember, as discussed in the Lab 5 Notes, that JavaScript loses its context (the changes) when you refresh or reload the page — it does not maintain state. Refresh the page to return to the original style, etc.
8. You can apply these simple scripts to your basic 3D App, and you should do some more research on JavaScript to see if there are any other interactive functionality that might prove interesting in your final 3D App.
Figure 7: Adding the JavaScript countUp and changeLook function
Figure 8: The results showing the Home page, click on the other pages links to see the other pages
Figure 9: The count clicked 6 times
Figure 10: Clicking on the ‘Click me!’ button to change the page style
You can add other simple JavaScript functions, for example, try changing the text color, see
Figure 10, which also shows ‘Some text here’ after clicking the green button. Now that you have a good understanding of these simple JavaScript functions, you should adapt them modify to your basic 3D App from Lab 4. Note, you are expected to show a deeper understanding in your assignment that show you have significantly gone beyond these nominal examples.
Now that you have finished these scripting experiment, crste a scripts folder move your exampleScripts folder into your new scripts folder, you might like to move your ‘js’ folder to ‘scripts’ to signify you don’t just have javaScript code in that folder, and as such create a php flder under the scripts folder too. You will also need to update your paths in your html files.
Check your Lab 4 work copied to your Lab 5 with the new scripts structure still works.
Create a Single Page Application — 3D App
Now that we have a good idea of how these simple scripting functions work, let’s apply them to update our Lab 4 results. We will write JavaScript and PHP functions to implement:
· A single page application (SPA) design
· A new image gallery
· A restyle option
When you have finished, your 3D App will look something like that shown in Figure 13, based on Bootstrap. Note there is no pepper.html file, this will be 3D App based on a SPA!
Figure 11: Note the single web page denoted by the index.html URL
Single Page Web3D App with JavaScript
Now, I am not going to go through this step by step, because we just went through the underlying code needed in the last section. Instead, I will offer some pointers, while at the same time I will also point out that while JQuery probably has more efficient code to do the same, JQuery is really an abstract on top of JavaScript.
However, putting JQuery aside for the moment, you should now apply the simple JavaScript functions learnt above to convert your basic 3D App to a single page version and add a colour theme. To get started on re-developing your basic 3D App with a single page using the document.getElementById(id) function and methods you will:
1. We need to create 4 new fluid grid layout block elements with associated selector ids: home, coke, sprite and pepper contents — note that selector IDs have to be unique. See Appendix — CSS Selector IDs for an explanation on the use of selector IDs.
Figure 12: TML5 layout for the SPA to incorporate home, coke, sprite and pepper contents.
2. The home page contents block element already exists, just add the home id. Then created new block elements for the Coke, Sprite and Pepper contents. The structure should look something like that shown in Figure 12.
3. You will need to implement the JavaScript swap function (leave placeholder text for the contents as indicated in Figure 12) and test it so that you know that the JavaScript swap function is set up correctly as given in the example.
4. If you are using Bootstrap you will use a Bootstrap .row class for the main contents on each of the home, coke, sprite and pepper pages. You will also need any CSS and JavaScript libraries that were used for the X3D, etc.
· Test one page at a time as you create the new contents
5. You can look at the Live Feedback Site to get an idea of what the result looks like, see Figure 13.
Bootstrap 4.3 2019 version
Bootstrap 4.4 2020 version
Figure 13: Home page, i.e. index.html
At this stage, if you have the structure right your Bootstrap should show an index.html as the home page — only one page now. Don’t forget to copy over the X3D libraries into the index.html page, or you won’t see your 3D!
Figure 14: The sprite contents, note index.html. The coke and pepper should be the same
If you get stuck you may examine the Live Feedback Site. Note these URLs will show the final result, not partial results
Ok, so you should now have a single page application of your 3D App using Bootstrap components, make sure this works properly before you proceed to the next stage. Once it works, you can remove your coke.html, sprite.html and pepper.html files from this lab 5 folder.
You should now only have the index.html file and your Lab 5 folder should look like that shown in Figure 15. You can check the Live Feedback Site for more details. Note all extraneous
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com