part 1, in web client

• jquery is also used.
• prepare html content

table content from data

dog name

dog color

code as below:

description

• This is a html page,
• simulate a rest get request, to get data back in json,
• parse the string into js object in json notation
• extract data from the js object.
• Two ways to extract is demonstrated here.
• loop each data row, prepare its html table row.
• append each table row into the existing html table.

part 2, in PHP web server

• Php language is used to prepare the HTML contents, and echo a page with the contents.
• Simply go to a new php file.

lab

part 3, in nodejs web server

Javascript is used to prepare the HTML contents, and return a page with the contents

section 3.1 get nodejs started ------------

• I use window 7 for nodejs. I also use mac for nodejs with mobile apps.
• In this demo, window 7 is used.
• I use Visual studio Code as IDE.
• I installed nodejs earlier.
• I use cmd command to open window shell. enter node --version to verify.
• I created a new folder, expapp_1, for the demo app.
• open vs code ide, drag and drop the folder into it.
• in the ide, under the app folder, insert a new file, app311.js
• add one line of javascript code, console.log("hello world");
• in the window shell, navigate to folder expapp_1
• This is a regular app, not web server app.
• nodejs alone can be for web server.
• enter node app311.js to start the app, not web server,you'll see the greeting, hello world.
• why nodejs - heavy load, flexible, adaptive
• how it works - event-driven

section 3.2 using express -------

• Package express makes things easier.
• create app32.js, code
• open my window shell, enter npm install express --save
• in mac enter npm install express -save
• in the shell, start the app your own web servernode app32.js
• var app = express(); to create a express instance variable.
• There are many methods for this variable.
• The first impression is to have your code more readable.
• The method, app.get("/"); is an example of routes. Express is extensible.

section 3. using embedded javascript as the view engine -------

• Open the app in the ide, under the app folder, insert a new folder views.
• The folder name, views, is reserved by nodejs.
• Under folder views, insert a new file, index.ejs
• copy a simple html code into it.
• This ejs file expects two pieces data, passed from the application js file.
• adding some embedded javascript code accordingly
• create another application file, app33.js
• set its view engine to ejs.
• set the route to the root.
• render the ejs with two pieces data
• in the window shell,npm install express --save
• also, npm install ejs --save
• launch the server, node app33.js
• in the browser, enter localhost:3000, see the page returned from the server.

code for index33.ejs

code for app33.js

 
            console.log("enter app3.js, test 1");

            var express = require("express");
            var app = express();

            app.set("view engine", "ejs");

            console.log("location 1");

            app.get("/", function(req, res){
                var drinkList = [
                    { name: 'draft beer', drunkness: 1 },
                    { name: 'Martini', drunkness: 2 },
                    { name: 'Scotch', drunkness: 3 }
                ];
                res.render("index.ejs", 
                           {
                               greeting: "hello world",
                               drinks: drinkList
                           }
                );
            });

            console.log("location 2");

            app.listen(3000, function(){
                console.log("the server is listening port 3000")
            });

            console.log("location 3");

            

• In this demo, the main activity is in the web server.
• When a request arrives to the server,the coresponding routing handler is invoked.
• Then you render the ejs file with passing data.
• The ejs file present the html content,
• and, extract the passing data, and present them accordingly.

section 3.4 mysql -------------

• create app34.js
• code as below
• npm install mysql --save
• Unlike php, mysql for nodejs is a package, not language extension.
• The code content is the typical database access code as below:
• create database connection
• query the data from a table, some rows with special type are returned.
• You have to convert them into a javascript array
• then pass the array into ejs
• Two tasks are involved.
  The first is to get data from the database server.
  The second is to pass the returning rows to ejs.
  The code flow is to make sure the right sequence.
  If the data is not ready, empty content will be sent to the ejs.
• in index34.ejs file, you can see html and js code mix together

partial code for app34.js

var mysql = require("mysql");

app.get("/", function(req, res){
    var connection = mysql.createConnection({
          host: 'xxxxx.com',user: 'xxxxx',password: 'xxxxx',database :'xxxxx'       
    }); 
    connection.connect(function(err){
        if(!err) {console.log("db connected.");} else {console.log("db not connected.");};
    });  
    connection.query('SELECT * from dogs', function(err, rows, fields) {
            var dogArray = [];
            if (err) throw err;
            
            rows.forEach(function(dog){
                console.log("dog_name = " + dog.dog_name + "  dog_color = " + dog.dog_color);
                var little = {};
                little.dog_name = dog.dog_name;
                little.dog_color = dog.dog_color;
                console.log("little name = " + little.dog_name);
                dogArray.push(little);
            });
            connection.end();
            console.log("db disconnected");  
            console.log("dogArray.length = " + dogArray.length);
            res.render("index4.ejs", 
            {
                   dogs: dogArray,
                   greeting: "hello world"
            });
    });     
});
            

code for index34.ejs