Web Development Tips for PL/SQL Programmers

How Does a PL/SQL Programmer Get Started with Web Development?

Learn FireFox’s Firebug or Chrome’s developer tool, HTML, CSS, DOM, AJAX, and JavaScript

Are you an expert server side software developer who needs to migrate to a browser based environment like Oracle Application Express (APEX)? Then this free tutorial is for you; it will help you to “break the back” on the somewhat steep learning curve that is required when you start learning how to effectively use client side browser tools like FireFox’s Firebug and Chrome’s developer tool. APEX expert and author Patrick Cimolini leads you, step by step, from a simple “hello world” web page to some real-world APEX pages; showing you along the way how to use the browser tools to inspect, test, and debug your HTML, CSS, DOM, AJAX, and JavaScript code.

The tutorial introduces the audience to the important browser development tools that are required in order to take advantage of the web’s browser based environment. Students are shown how to analyse and debug a web page by using the development tools that are built into the FireFox and Chrome browsers. The webinar starts with a simple “hello world” web page and then progresses, step by step, into real-world APEX pages where HTML, CSS, DOM, AJAX, and Javascript must be inspected, tested, and debugged. We’ll de-mystify the web tools and help you achieve a level of comfort and confidence when working with the client side web tools.

This free training is segmented into several separate lessons:

  1. Introduction & Agenda (2:11)
  2. Languages and Tools You Should learn (4:03)
  3. Demonstration: Use Google Chrome Inspect Element to Learn from the Experts (3:41)
  4. Using Hello World to Learn Chrome’s Inspect Element Tool (4:39)
  5. Adding CSS to Hello World (The Class and ID Selectors) (2:47)
  6. Demonstration: Adding CSS (5:56)
  7. A Word About Webkit (1:58)
  8. Introduction to and Debugging JavaScript (2:43)
  9. Demonstration: Debugging JavaScript (5:37)
  10. Inspecting AJAX Network Traffic (7:33) (click on video below)
  11. Oracle APEX Example: Borrowing HTML Elements from Existing Pages (8:41)
  12. CSS in APEX (1:37)

Date: Dec 17, 2013

For more Web Development Training see out HTML5, CSS3 and JavaScript class.

NOTE: Some corporate firewalls will not allow videos hosted by YouTube.


Inspecting AJAX Network Traffic

Web Developer Primer for PL/SQL


10. Inspecting AJAX Network Traffic


>> Patrick:  Inspecting the Network Traffic. What we’re going to do here is we’re not going to jump into AJAX code or syntax. What we’re going to do is we’re going to use an Oracle Application Express example and some AJAX traffic that was generated by some of the declarative aspects of APEX. 


Specifically, we’re going to show you a department dropdown list and when that value changes, the list of employees that comes back from the server is either the sales or accounting or research department. That is an example of cascading list of values that is based in AJAX under the hood. When you click on an employee name, you get their salary back which is again another AJAX call that was defined by a declarative dynamic action within Oracle Application Express. Let’s have a look at that so we could see that in action. 




I’ve got a little application here. Let’s have a look at this. Let’s run the application. This is Oracle Application Express application. 




No. Let’s keep this. Let’s run it again. We’re just going to concentrate here on department, employee name, and salary. What happens here is if I select the sales department, we end up with a list of salespeople. If I select accounting, we get a list of accountants. And if I select employee, I get their salary. 


That was all done without doing a full-page refresh. As I said earlier, a full page refresh is very expensive on the server side and you really don’t want to do that if you have hundreds or thousands of users using your application. You want things to be as efficient as possible. 




First thing you want to do – this is all working here. It’s fine. It’s very simple. But if you do have some sort of complicated AJAX call that’s doing something sophisticated and it’s not working correctly, one of the first things you want to do is isolate the bug either to your client side code in your browser or on your server side. The first thing you want to do there is inspect the network traffic that’s going back and forth to make sure that the values you’re passing back and forth are in fact correct. And the web developer tool allows you to inspect that traffic. So let’s have a look. 


First, let me shrink this down a little bit so we can see a bit better. If we right-click here almost anywhere, here our tools comes up. We’re not interested in the elements tab here. Funny enough, since we’re looking for network traffic we want to look on the network tab. And right now since we’ve just brought this up, there’s nothing here. When I click sales…




We’ve got something. It looks like a breakpoint in the APEX code. Let’s just click on that to bang through the code and let’s get back to the network tab. You could see here now we’ve got a post that resulted from our click on the development. So let’s inspect that by clicking here on the wv_flow_show and let’s go to the “Header” sub tab here. 


There’s a lot of information here. It goes on and on and on here. What we want to do is let’s collapse this “Request Headers” because we’re really not interested in that. There’s something down here below called “Response Headers.” We’re not interested in that. 


What we want to look at is the form data. This is the data that gets passed from a client to the server. It’s a little bit confusing here. You see here this p_flow_id? It is actually in fact our application ID. I think if you can see up here, in the developer toolbar application 444, that leads into a little bit of history lesson here with the Oracle Application Express. 


Back in 1999 and year 2000, in that era, Application Express was actually known as flows. That was the name inside Oracle at that time. A flow actually was an application. Here we have flow_step. The pages in that application were actually at that time known as steps, and that old, old terminology actually has survived under the hood in the APEX source code. That’s why you see that funny flow and step stuff down here. But there’s the application ID 444 and we’re on page 2. 


The interesting stuff is really not that. That is kind of like the housekeeping stuff. What I want to show you down here is the name value pairs here that are being passed to the server. This department dropdown list here that’s got sales in it, it’s actually p2_defno and the value that’s being passed for the sales department is actually 30. When you do have problems with your AJAX calls, one of the first things you do is inspect the network traffic to make sure that these values are in fact correct. 




This is the traffic going to the server. Now if I click on the response, I see the reply from the server and you can see here the list of names that belong to the sales department. Let’s see if that’s right. You have Blakey, James, Martin, Turner, and Ward, with their corresponding primary key IDs here. Again, if you have problems, what you want to do is inspect this data very carefully to make sure that things are being passed back correctly. If something is wrong here, indicate that you’ve got a problem on your server side code. 




One more tab here that’s interesting. If you’re dealing with the performance issue, you can look here and you can get a feel for the timing of your network calls. This also is a very useful tab. 


Let’s select Blakey here. Here’s that breakpoint again that’s in the APEX area. Now we’ve got another show here. Let’s click on that. And since we’ve asked for Blakey’s salary, let’s have a look. Let’s collapse this “Header Business” just to review the process. Collapse the “Response Headers” because we’re not interested. 


Here we have the p2_empno – that’s the employee dropdown together with the primary key. We’d inspect that and make sure that that is correct. You look at the response. There’s the 3,000 and then the timing page. That is inspecting AJAX network traffic.


Copyright 2017

Free Online Registration Required

The tutorial session you want to view requires your registering with us.

It’s fast and easy, and totally FREE.

And best of all, once you are registered, you’ll also have access to all the other 100’s of FREE Video Tutorials we offer!