Introductions:

Introduction to Web Applications on WWW

Picture of Web Application Architecture

Web Application Standard on WWW


Brief History of WWW and Evolution of Markup Languages


World Wide Web Consortium (W3C) Reference Sites:

Official World Wide Web Consortium (W3C) Standard for Markup Languages: HTML/HTML5/XHTML
XHTML1 XHTML2 is on the way !

Official W3C Site for Standard HTML/HTML5
Official HTML/HTML5 Syntax


Useful Online Tutorial Sites:
Tutorial Point
W3C Schools Tutorial
MDN (Mozzilla Developers Network)
HTML/HTML5 Syntax by W3 Consortium



Class Lectures:

HTML/HTML5, XHTML, CSS, URL, Java Script


HTML:

Class Note_1: Introduction to HTML with New Web Application Platforms
Class Note_1_2: HTML Example: How html Works !
Class Note_1_3: Overview of Web Application Components: HTML/XHTML, CSS, Java Script, CGI, PHP (Traditional Web Application Platforms)

W3C Tutorial Site: Introduction to HTML

XHTML:

XHTML Basics: Main Syntax Differences Between HTML5 vs XHTML
HTML5 and Comparison to XHTML
XHTML Syntax Quick Summary from the official W3C Site


Html Element Examples
Html Atrribute Examples


HTML References:
HTML Element List
HTML Attribute LIST
Global HTML Attribute LIST
HTML Event Attribute LIST

Examples of HTML Elelents and Attributes:
Table Element Examples
Examples of Table Formats in Web Applications
List Element Examples
Style Attribute Examples
Style Element Examples
DIV Element Examples
SPAN Element Examples

Link Element Examples
Image Element Examples
Button Examples
Button with event attribute and alert fn Examples

HTML Form Element Examples
HTML Form with Input Type Examples
HTML Form with Input Type with Reset Examples
HTML Form with Input Type Radio Button

HTML Select Element Examples
HTML Select Element with Submit

Iframe Elelent Examples
Iframe Elelent with target attribute Examples

List of HTML Event Attributes with Form and Input Elements


HTML5:

Basic Review For Image Files:
Basics on Digitizing Images
Basics on Color Representation
HTML Color Code Picker

New Multimedia Elements Available in HTML5:

Class Note_2_1: Intro to HTML5 for Multimedia Processing on the Web
HTML5 New Element List
Video Element Examples
Canvas Element Examples
Canvas Context
Canvas Example: Fill Canvas with Image
Canvas Example 2: Fill Canvas with Drawing
You can create animation in Canvas with Java Script ! -- Lecture for Animation will Come later
Simpe Example for Creating Animation using Canvas
MDN Tutorial:Multimedia_and_embedding Examples

Image Map Examples
Input datetime
Date Picker (available only in latest HTML5)
Geolocation
Drag and Drop

Local Storage
How to Request HTML5 Offline Storage in Google Chrome
Sample Java Scripts for HTML5 Objects


Useful Site for MIME Type


CSS:

Class Note_1_4: Letcture Notes CSS
Basic Html CSS Tutorial with Examples
CSS Example To Start
Full CSS Example Site

CSS Example: Changing Colors of Link element Per Event
CSS Example: Create a Table with Two different Looks
CSS Example:How to Add a Caption to Image

Full CSS Tutorial Site From Beginning to Advanced


Examples of Table Formats in Web Applications


Responsive Webpage: BootStrap

Lectures:

Class Note_14: Responsive Web Design
Bootstrap Getting Started
Quick Bootstrap Code Summary

CSS Bootstrap Overview:
Tutorial: Intro to Responsive Webpage
Bootstrap Viewport

Code Examples:

Bootstrap Getting Stared

Grid:
Two basic Bootstrap pages: Container
Two basic Bootstrap pages: Container-fluid
Bootstrap Grid Basics Bootstrap Grid System and its classes: 12 columns and xm, sm, md, lg
Grid unequal coulmns

Table and Button:
Bootstrap: Table
Contextual Table
Responsive Table
Bootstrap example: Button Group
Nesting Button Group Drop Down List

Form and Input Sizing:
Bootstrap example: Form
Bootstrap example: Form - Bootstrap Horizontal Form
Bootstrap example: Form Control Select
Bootstrap example: Form Inputs
Bootstrap example: Form input Group Size Control
Bootstrap Input Sizing
Bootstrap Foam Group Sizing

@Media Query and Breakpoint:
@media query and Rules
Responsive CSS: Adding CSS Breakpoint
Example: Adding CSS Breakpoint
Example : Adding multiple Breakpoints


Other Useful Features:
bootstrap carousel (slider)




URLs:

Class Note_1_5: Letcture Notes on URLs
HTML URL Encoding
URL Query Parameter Example with Form Element
How Your Personal Webpage Works with the Webserver on the EECS Host in URL
HTML File Path Rules in URL
Difference Between URI (Uniform Rresource Indentifier) and URL (Uniform Rresource Locator)

JavaScript Basics:
Class Note_2_1: Letcture Notes JavaScript Basics
Tutorial of JavaScript
JS typeof operator
JS Data Types
Difference Between null and undefined

JS Function
Example:JS Function Invocations with () operator
Example2:JS Function Invocations with ()
Example3:JS Function Invocations ()
Example4:JS Function Invocation without ()

JS Object
JS this Object and its Method Invocation
JS Date Object
JS Array Object

JS RegExp
RegExp: ignoreCase property of i modifier
JS Error Handling
JS Global Functions
JS Sample Codes for Input Validation

JavaScript Code Examples:
Style display None Property
Javascript Timing methods

CSS with JavaScript Example: How to Create a Slide Show



JavaScript Programming

Class Note_2_2: Letcture Notes JavaScript Programming Only for the Part Covered in Class
JS this object
First Class Function Example








Debugging Functions for Javascript in Web Browser:

console.log
console.assert()
console.error
console.trace







Document Structure - Document Object Model (DOM):

Official Document Object Model (DOM) for HTML/XHTML/XML by W3 Consortium

DOM Lectures:

Class Note_3_1: Example Picture of DOM Tree of Web Browser for HTML and Java Script
Example of Document Object Model (DOM) for HTML and Java Script
Class Note_3: Intro to Document Object Model (DOM) for HTML and Java Script

Node Types of DOM Tree: (From W3C Schools Tutorial on HTML DOM)

DOM Document Node Type for Document object of HTML window object
DOM Element Node Types and Methods/Properties
DOM Attribute Node Type and Properties
DOM Text Node Type

Mozilla Developers Network (MDN): HTML DOM Object
MDN: Useful Example Sites of DOM Objects

DOM References:
Document Object Model (DOM) Specification for HTML/XHTML/XML by W3 Consortium

Code Examples:
Example of DOM property InnerHtml
Example of How to Find DOM Objects: getElementByTagName
Example of How to Access DOM objects and values: childen element count
Difference between DOM Element children and childNodes properties:

Difference between DOM Element children (Element children only) and childNodes (All the Child Nodes -- Element Nodes, Text Nodes, Comment Nodes)
Exampe: DOM Element children (Element children only)
Example: DOM Element children (Element children only)

Difference between DOM Element children (Element children only) and childNodes (All the Child Nodes -- Element Nodes, Text Nodes, Comment Nodes)
Example of DOM Element childNodes (All the Child Nodes -- Element Nodes, Text Nodes, Comment Nodes but No Attribute Nodes)
Example of DOM Element childNodes (All the Child Nodes -- Element Nodes, Text Nodes, Comment Nodes)
Example of DOM Element Select with childNodes (All the Child Nodes -- Element Nodes, Text Nodes, Comment Nodes starting from an empty Text Node as index 0)
But
Example of DOM Element Select with childNodes (Example before Changes?)



Example of HTML DOM Object with button
Element.className
How to set an attribute value of a DOM element

Example of How to Access DOM Atrributes: namednodemap: getnameditem
Examples of HTML DOM Object creation
Examples of HTML DOM Object Create and Append
Example of How to Create Text Node
How to create DOM Objects and Replace: replaceChild


Form Element in DOM: How to Access User input values in Form Element

Understanding Form Element with Http Get method to send parameter values from Client site html page (by Web Browser) to a Serverside program (with Web Server)

Form object and Submit Type with get Method
How to Access an attribute value of Form Element
How to Create Form object

Example of HTML DOM Object - div
Example of HTML DOM Object - date



Useful DOM Tree Query Features:

Document.querySelector with CSS Selector or Rex
XPath in Java Script


Webpage Processing Tool:
DOM Example: Webscrapping with Python BeautifulSoup
DOM Example: Python BeautifulSoup Documentation


Summary of Example Codes (Above) of DOM Objects: Input and Function to access value
Summary of Example Codes (Above) on How to Use DOM objects and Functions to Manipulate DOM Objects



Window Object of html page:

DOM Window Object of your html and Full List of Its Methods/Properties

Examples: Methods of Window object
alert method of Window Object
confirm method of Window Object

Examples: Properties of Window object:
Property location of Window Object
Property parent of Window Object
Exampel Code: parent of Window Object
Property top of Window Object
Example of Window Object Local Storage

Debugging Methods: Console object Methods to access Browswer's degugging console
Console Object and Its Methods
Example of console.log Method
assert method of Console object for Debugging
error method of Console object for Debugging
trace method of Console object for Debugging


How to Debug HTML, JavaScript, DOM, XPath in a Google Chrome (Any Web Browser Has the Same Debugging Features)




Animation:

Class Note_7: Lecture Notes On Drawing Vector Graphics on Web
Canvas Element Examples
Canvas Context Element
Canvas Context

Class Note_7_2: Lecture Notes on Animation
Class Note_7_3: Lecture Notes On Animation using Loop


MIME (Multi-Purpose Internet Mail Extensions) Type for Internet Media Type:
MIME Type/Internet Media File Exchange Type Guides
Internet Media File Type validator







Event:

Class Note_4: Event
Example: Three Ways to specify HTML DOM Onclick Event with Java Script
addEventListener() Method

Examples:

HTML DOM event OnChange
Onclick Dropdown
HTML Form Event: OnChange
HTML DOM event Onkeyup Onkeydown
addEventListener and removeEventListener

HTML DOM Event Attributes List

HTML DOM Event Attributes List on Window Object, Elements, and Mouse/Keyboard Event Attributes
HTML DOM Event attribute: onerror

DOM Event List and Event Object Properties:

HTML DOM Event List and Event Object Property List

Event Object Properties: target element
Mouse Event object Properties: clientX, clientY

Things to Know in Event Programming in JavaScript:
Tutorial: Things to Know in Event with Java Script
cannot assign more than one event handler using HTML only as there’s only one onclick property (scroll down to see the example for)
common mistakes in Event with Java Script event handler function should be assigned without () operator

Multiple Events on One Elelement:

HTML DOM Javascript addEventListener
Multiple Event Handlers on one Element
Multiple addEventListener on One Elelment
addEventListener: Passing Parameters

Multiple Events on Nested Elelements:

Event Execution Sequence For Nested Elements with Their Event Handler Functions

HTML DOM Javascript addEventListener with Capturing and Bubbling flagScroll down for the examples
Execution Sequence of EventListeners: Bubbling Mode and Capturing Mode
Event object Method: stoppropagation method

Execution Sequence Explained with Examples for Multiple Events on Nested Elelements :

Good Examples of Event Execution Rules with Bubbling and Capturing on the Nested Elements
Explained with the Exampe for Event object's currentTarget(this) and Target Elements

Architecture of Web Application on Internet

Semi-Structured Data Processing in Web Applications

Universal Data Exchange Formats in Semi-Structured Model between Web Applications

Lecture Note on Semi-Structured Data Model with XML and JSON


Universal Data Exchange Formats in Internet Between Web Applications As Client and Server -- Platform Independent

Client Server Communications in a Web Application


HTTP (HyperText Transfer Protocol):
Protocol in that your Web Browser as a Client Communicates with a Webserver

Lectures:

HTTP: How to Communicate between a Web Browser and a Web Server:

Class Note_17: Introduction to HTTP Protocol on How a Web Browser Brings(Requests) Source Files (in URL) in HTML and JavaScript from a Web Server
Lecture Note_5_1: more on HTTP

This a Form element Example and an Example of an AJAX request to be transformed to a http request by the web browser.
Example: From Form Element to HTTP Request by a Web Browser


How to write HTTP (in your Java Script with HTML) to Communicates (Request Files as a Client) with a Webserver

AJAX (Asynchronous Java Script and XML):

Lectures:

Class Note_18: Controller as Server Communication with Client in JavaScript Using AJAX

AJAX Intro
AJAX XMLHttpRequest Object with Methods and Properties
Class Note_11_2: AJAX Intro and Syntax Quick Summary


AJAX Code Examples:

A form element like this is transformed to an AJAX request like this by a web browser.

Client Request:

AJAX Send a Request to a Sever with GET/POST methods
AJAX Examples - XMLHttpRequest
URL Query Parameter Example: GET method
AJAX Examples - POST method

Server Response:

AJAX Server Response (Scoll Down to Look at the Example for Using a Callback Function)
AJAX Examples - Callback Function
AJAX Example - retrieving Server Response
AJAX Examples - Processing XML Response
Example with a Callback Function for ResponseText Handling
AJAX Examples - Accessing Server Response Header


AJAX and JSON Data Processing:
AJAX and JSON Data Processing
AJAX and JSON Array Processing


AJAX XML Processing:
AJAX Example for XML File Processing
When cd_catalog.xml file looks like cd_catalog.xml
Example with a Callback Function for Response XML File processing
AJAX with XML Example navigate Server XML Response
Summary of AJAX Examples with Response Handler for File Processing

XML Processing Examples in Java Script with AJAX:
XML File Example: cd_catalog.xml
AJAX XML File Processing Examples
AJAX Examples - XML File Processing
AJAX XML Processing Example


AJAX Event Handling :

Class Note_11_3: Lecture on AJAX Asynchronous Event Handling
Example of Asynchronous AJAX Request and Handling Server Response Data (Scoll Down to Look at the Example for Using a Callback Function)
Class Note_11_3: Example of AJAX Asynchronous Event Handling Sequence
AJAX Example for Navigating with Server's XML Response


HTTP Basics on MDN









Same Origin Policy:

HTTP Communication Protocols on File Request from Same Origin Domain (SOP) and Cross Origin Domain (CORS) for Web Security:

Server Side Programming (as CGI) with PHP on Apache Webserver


Architecture for Web Application: Model-View-Controller (MVC)

Building 3-Tier Web Service in Model-View-Controller (MVC)

There are So Many New Web Frameworks Come and Go Constantly...
Class Note_16:Building 3-tier Web Service with MVC Architecture and 4 common Platforms

Class Note_18: Controller Server Communication
Class Note_19: Introduction to Web Server




CGI (common Gateway Interface):

Class Note_1_1: Letcture Notes on Introduction to CGI and Serverside Scripts
Class Note_8: CGI Tutorial and REST API Example with Perl




Simple Serverside Script Code Examles of AJAX with Server Side Script in PHP/ASP:

AJAX with PHP in Server side
AJAX Examples Processing Server Response text
Summary of Examples of Server Side Script in AJAX with ASP
Summary of Server Side Script Examples

Code Examles of AJAX with ASP Server Side:
AJAX with ASP in Server Side
AJAX ASP Example











Server Side Programming (as CGI) with PHP, Apache Webserver, and WITH MySQL Database Server:

Architecture for Web Application: Model-View-Controller (MVC)

Building 3-Tier Web Application in Model-View-Controller (MVC) on WAMP/LAMP Server Platform

Class Note_16:Building 3-tier Web Service with MVC Architecture and 4 common Platforms



Three Sides Communications Need to be Set Up on Server Side on Any Web Application Platform

For Example with WAMP/LAMP Server Platform:

1) Communication Between Web Browser and Apache Webserver on Server side to Listen HTTP Request on the Default Port:80 -- Remote Connection

2) Communication Between Apache Webserver and Your Server Program (Usually on the Same Server Side Host) -- (For PHP Server through Global System Variables)

3) Communication Between Your Server Program and Database Server on either on the Same Domain or Different Host within LAN (For Example, MySql Server of WAMP Server to Listen on the Default Port:3308)



PHP Tutorials for Server Progarmming:

Class Note_9: Introduction to PHP: Summary of Syntax ***

Class Note_9_2: Basic PHP Syntax and Database Programming Using PHP ***


Usefule PHP Tutorial Sites with Examples:

Note that You don't download PHP from the Php.net site for Project5. We will download an Open Source WAMP/LAMP Server Platform that has a PHP Server in the package.
The detailed Instruction to set up a WAMP Server with PHP will be given in the Lab5 Section


PHP Getting Started:
Read All in this Section: Most Important Lectures for Project 5 !!

How to start the first Php script on the Server

Two Sides Communications Need to be Implemented as Server Side Codes:
Example Codes for Two Side Communications in PHP Server Codes:

1) Communication Between Apache Webserver and Your PHP Server Codes through Global System Variables Usually on the Same Server Side Host

Dealing with Form element in PHP ***
PHP Predefined Super Global Variables ***
How to get PHP Server Info ***
How to get PHP Server Info: php.ini ***
Where to find/print the PHP Server Info: phpinfo(); to find php.ini file path ***

How to get PHP Server Configuration file content php.ini

2) Communication Between PHP Server and MySql Databse Server Using ODBC: (For Example, MySql Server of WAMP Server to Listen on the Default Port:3308) on either on the Same Domain or Different Host within LAN

PHP Basic Example Codes with ODBC(Open Database Connectivity) mysqli to Connect to MySql ***
PHP Basic Tutorial with ODBC(Open Database Connectivity) mysqli to Connect to MySql ***
All the Important MySqli for PHP and MySQL Communication using ODBC ***
Tutorial: PHP MySQL Connect/Login using ODBC ***



Quick PHP Tutorial with Code Examples for Connection to MySQLNote that the version of PHP in this tutorial is old ***

More PHP Programming Tutorial


Useful PHP Features:

File I/O:
PHP File I/O Tutorial
Useful PHP Filesystem Functions
PHP: file_get_contents()
PHP: file()
PHP for creatng File Upload
Useful PHP Programming Tutorial

Index Page to Useful PHP Features

XML Related Features:
XML Related Features
PHP with XML: simplexml_load_file()
PHP with XML: simple xml parser functions
Tutorial: PHP with DOM Document for XML
PHP with DOM Document Class

Database Related Features for ODBC (Open Database Connectivity):
mysqli basic example code
All the Important MySqli for PHP and MySQL Communication using ODBC
Three Different ODBC APIs to Choose for PHP Server and MySQL Communication using ODBC ***
PDO (PHP Data Object) related

PHP MySQL ODBC API Guide - MySQLi: How to Install a Driver to Set Up
All the Database Related Feature List

Other:
Command Line Usage
text Processing Features
XDebug

PHP Manual/Documentation with Examples (Note that You don't download PHP from this site for Project5. We will download a WAMP/LAMP Server Platform that has PHP in the package)

Index Page to Useful PHP Features by category
Index Page to Useful PHP Features in Alphabetical Order

Building 3-Tier Web Application in Model-View-Controller (MVC) on WAMP/LAMP Server Platform

WAMP/LAMP Server Platform

Server Side Programming with PHP with Apathe Webserver and Relational Database Server- MySQL or MS SQL Server

Server Side Programming with Database Server:

Class Note_22: Database Server


Basic Database Query Examples in MS SQL Server: DDL to Create a Table Scheme, DML to Insert/Update/Delete Rows, and SQL to Query
Noet that you have to "Create Database" first before "Create Table"


MySQL Tutorials:

MySQL Tutorial
MySql: How To Connect and Log into MySQL Server
MySql: How To Create Database and Use it
MySql: How To Create a Table
MySql: How to Load/Insert MySQL table
MySql: How to Select/Retrieve Table Records
MySql: SQL Examples

How to Create a Database From Visual Studio in ASP.NET
Summary Lecture on How to Create and Query Database Tables




Lectures on JDBC(Java Database Connectivity/ODBC(Open Database Connectivity) to Connect To a Database Server from Your Serverside codes:


JDBC(Java Database Connectivity) for Communication to MySql Databse Server in a Java based Server (Controller):

MySQL Applications Using Java & JDBC ***
Summary of Database Creation, SQL, Programming with JDBC and Java with Example Codes(Scroll Down for JDBC Codes)


ODBC(Open Database Connectivity) for Communication Between PHP Server and MySql Database Server:
For Example, MySql Server of WAMP Server to Listen on the Default Port:3308 on either on the Same Domain or Different Host within LAN

List of All the ODBC MySqli Classes and Methods with Code Examples for PHP Server and MySQL Server Communication ***

PHP Basic Example Codes Using ODBC(Open Database Connectivity) mysqli to Connect to MySql ***

ODBC MySqli: Connection class ***

ODBC MySqli: Statement class ***

ODBC MySqli: Prepared Statement class ***
ODBC MySqli: Prepared Statement with parameter binding ***
ODBC MySqli: Prepared Statement and Accessing the SQL Result of Prepared Statement ***

ODBC MySqli for Stored Procedure in MySQL ***

ODBC MySqli: (SQL) Result Class with Examples for Accessing SQL Result ***

Three ODBC(Open Database Connectivity) APIs to Choose for PHP Server to Communicate To MySql Database Server





Sample Codes of Web Applications in MVC with Server Side Examples on WAMP Server:

Example of Server Side PHP Script to Connect to MySql on WAMP Server:

PHP Application Code Examples 1: Search Music by Name (This sample codes shown here are only a part of a full web application project files)

Lab Guide with Set Up instruction for WAMP Server (2017) and Simple Example Codes for Building Web Application with PHP and Mysql

Note that the PHP ODBC API for MySQL Used here is an OLD Version (deprecated) ! Use the Most Updated Mysqli or PDO (See the PHP Database Features Above)

source script of index.html
source php script of search_musicapp.php
source php script of search_musicapp1.php



Full Web Application Example with PHP, Bootstrap, AJAX on WAMP Server : Online Book Store Catalogue Search*** (the Most Related Sample Web Application Codes to Look up !!!)

Online Book Store: Example of Web Application with PHP, AJAX and BootStrap, and How to Create a Database Table from a XML file in a Serverside Script



Simple Examples of PHP Codes with MySql:

PHP Code Examples for a Simple Search Funtion with PHP and Mysql

Example 3: Simple Search Funtion with PHP, Mysql and Bootstrap
Example 4: for Building a Web Based Automatic maintenance of Database for Insert/Update with PHP and Mysql Stored Procedures
Example 5 for Building Web Application with PHP and Mysql Calling Stored Procedure to a Database Server for Database Insert and Update
Example 2: Cross Doman Server side Code Example to Generate JSON Output with PHP, Mysql


Example Server Controller Codes as Rest API Based Web Application on .Net Framework as a MS Client Using ODBC to Map to CRUD Operations in SQL Server


Examples of Database Programming: How to Create Stored Procedure in a Database Server
Example Code of Stored Procedure for CRUDE in MS SQL Database Server
Stored Procedure, View, Trigger in MySql for CRUDE Operations


Supplementary Database Guides:

Processing Multimedia with Databases Server:
Class Note_11: Lecture Notes on ODBC and PHP
Example Codes to Insert and Retrieve Image Data in Oracle DB with JDBC and JAVA
Example on How to Store and Retrieve Image Data in MySql with PHP

How to Design Web Application Server

Better Way to Build Web Service:

RESTful (Representional State Transfer) API: Framework to Provde a Design Approach for Architecture of Web Application Server to Communicte in HTTP

Stateless Communication Protocol between Client and Server:

Class Note_18: Controller Server Communication in HTTP and Rest API
Class Note_19: Introduction to Web Server (Handling HTTP Requests)

Web Server Implementation in NodeJS:

Lecture: Webserver with Express (Node JS Webserver Framework) and Design in REST API
Example Codes of a Simple Webserver (in Node JS with Express)
Example Codes of Express Routing (in Node JS with Express)

See the NodeJS Section below For more on NodeJS App with Express !



REST API Based Web Application Server Side Design Means:

REST API Requires All the Components for Web Framework:

Adding Web Browser and Web Server in HTTP for Stateless Communication Protocol between Client and Server

Rest API Web Application Module Design Guide:
What is Rest API? ***

REST API Basic Guides
More Descriptions of Rest API in wiki ***

REST API Tutorials with Examples in Different Languages

Lecture Note_5_1: HTTP Overview for Stateless Communication between Client and Server Used in Rest API Web Applications




Design Guide of REST API Based Web Application Server Implementation with Database Server:

1. One Server Module to Handle Resources (objects/records, files, or blocks) for Each HTTP Method Type to Handle Get/Post/Put/Delete Requests
2. Mapping Each Method to each CRUD (Create/Retrieve/Update/Delete) Operation in Database Server with Stored Procedures

Client HTTP Request Method Types Handled by the Corresponding REST API Based Web Application Server Modues that Maps to CRUD Operations in Stored Procedures in Database Server

JavaScript Framework for Web Application Design:

Web Application Design:

Lectures:

Class Note_13: Single Page Application
Class Note_15: Web Apps



Integrated Lectures on Angular JS to Build a Application Server in the Java based Platform Will be Given Below !
Angular JS :

Class Note_12: Introduction to Angular JS
Class Note_12_1: Quick Angular JS Summary to Start
W3School: Angular JS Tutorial Site
Tutorial Point: Angular JS Tutorial Site
Good Angular JS Tutorial Site
Angular JS Site
Angular JS Example Sets:
Angular JS Example Set


The Site for the Code Examples Used in the Lecture on Angular JS


Lectures of Each Component with Examples:
Angular JS Expression
Angular JS Module
Angular JS Directives
Angular JS Model
Angular JS Model: Data valiation
Angular JS Model: model application status
Angular JS Data Binding
Angular JS Data Binding Example with Input Value
Angular JS Data Binding with Controller
Angular JS Data Binding Example with Check Box and attribute
Angular JS Data Binding Example with Form
Angular JS Controller
Angular JS Scope
Angular JS Example
Angular JS Example with http

Angular JS Filters
Angular JS: Example to Add a Custom Filter
Angular JS Services
Angular JS AJAX http
Angular JS Example with http
Angular JS Include

Example shows that Server side script controlls the cross domain file access by adding Acess-Control-Allow-Origin to the header of Response to tell the Browser in a Client side to allow a JS script read/display this file.
Example: Cross Doman Server side Code Example to Generate JSON Output with PHP, Mysql
Angular Example: Cross Domain File Include
jsonp

Angular JS Table
Angular JS Select
Angular JS SQL
Angular JS DOM
Angular JS Event
Angular JS Form
Angular JS API

Angular JS Routing
Angular JS Routing Summary with Examples
Angular JS Routing Example
Angular JS Routing Example with templateUrl
Angular JS Routing Example with templateUrl
Angular JS $routeParams

Class Note_24: Angular Input validation
Angular JS Validation


Good Tutorial Site for Angular JS
Good Tutorial Site for Angular JS

Java Based Web Application Platform

Building 3-Tier Web Service on Java Based Web Application Platform for Model-View-Controller (MVC)
Class Note_16:Building 3-tier Web Service with MVC Architecture and 3 common Platforms

Java Based Web Application Platform and Sample Application Codes:

How to Create a Web Application with Java Based Application Server with MS SQL Server:

ASP.NET Platform

Building 3-Tier Web Service in C# in ASP.NET for Model-View-Controller (MVC)

Building Web Service in C# in ASP.NET with MS SQL Database Server and ODBC on IIS Webserver:

Set up ASP.NET with local IIS Web server : How to Create Webserver site in local host in ASP .NET
How to Create Webpage in ASP .NET
Quick Tutorial: How to Create WebPage with Action in ASP .NET

How to Start to Create the first project for MVC Web Application in ASP .NET
How to Create the first project for MVC Web Application in ASP .NET
Adding a Controller
Adding a View


Sample Web Application Code Exampes in C# in ASP.NET (WebForm in Old Framework):

Fraternity Membership Management Application:
Buiding Fraternity Membership Management Site for How to Create a Web Service in ASP .NET with SQL Server
How to Connect to a Database in SQL Server From ASP .NET
Set Up Example in SQL Server From Visual Studio in ASP .NET


Sample Web Application Code Eamples in C# with Web Matrix/GRidview in ASP.NET (Old Framework):

Hotel Room Reservation Service:
Example Codes 4_1: Hotel Room Reservation Service - Building Web Application with SQL Server, GridView and MS IIS Manager in ASP .NET
Example Codes 4_2: Hotel Room Reservation Service with Calling Stored Procedure in SQL Server and WebMatrix on ASP .NET FrameWork
Example of Stored Procedure in Database Server


NEW ASP.NET Web Application Framworks:

Set Up ASP .NET Platform with Entity Framework6 Using MVC5:

How To Set Up Web Aplication From Visual Studio in ASP .NET with SQL Server
Getting Started with MVC Entity Framework: Setting up Database NEW !
How to Create a Web Application Project in Visual Studio in ASP .NET
ODBC Setup to Add MS SQL Server in ASP .NET (Managing the Database Driver and Data Source)


Web Application Code Examples Entity Framework6 Using MVC5:
How to Create CRUD Operations in ASP .NET


Sample Web Application Codes using Entity Framework6 with MVC5 in ASP.NET:

Course Enrollment System:
Course Enrollment System: Sample Codes for Controlling Courses in C# in ASP .NET with Entity Framwork6 Using MVC5 and Linq
Note that the sample code doesnot show entire codes and design for simplicity.


How to Publish Your Web Application on ASP.NET with IIS Web Server:
Set Up Instruction for Deploying Web Application with IIS


Creating a Database Using AZURE Cloud:
Quick Tutorial: How to Create a Database on Azure Cloud
Quick Tutorial 2: How to Create a Database on Azure Cloud

Object Relational Mapping Framework in ASP.NET:
Linq TutorialNote that the example in this note is an old version of Entity Framwork. See the example codes above for the most recent version of Entity Framework with Linq

Web Server Programming with Node JS and Mongo DB (MEAN Stack)

Serverside Java Script Framework: NODE JS

Class Note_18: Controller Server Communication
Class Note_19: Introduction to Web Server
Class Note_20: Introduction to Node JS
Class Note_21: Express

Good Node JS/Express Tutorial Site
Express Basic Routing
Angular route Parameters




NodeJS Set Up Guide

NodeJS Setup Guide
NodeJS Site
NodeJS Download
NodeJS Package Manager Download
NodeJS Installation Tutorial on Window
NodeJS Installation Tutorial on MacOS
NodeJS Installation Tutorial on Ubuntu/Linux

Another NodeJS new source site for NodeJS Set Up
NodeJS Download





NodeJS Frameworks: Express
Node JS Framework: Express
Express Set Up: Getting Started

Express Coding Guide:
Express Example: How to Create a Simple App
Express Tool to Generate an Express App
Express Basic Routing
Angular route Parameters
Express Guide: Routing to Write
Node JS HTTP Methods to Write

Basic Express Built In Frameworks/Middleware:
Node JS Documentation: Global variables
Node JS Documentation: _dirname, _filename
Express Guide: API Methods: res.json()
Express Guide: Writing a Server Side Code:Middleware
Express Guide: Integrating a Database
Express Guide: Static File Server
Node JS: server.address()
How to Know your server address on Window
Node JS: multer for file upload
Node JS: bodyparser.urlencoded with extended false/true
Node JS: bodyparser.urlencoded with qs
Node JS: bodyparser.urlencoded

Node JS: request object
Node JS: Node JS: response object
Node JS: setting response object
Node JS: http API




NODEJS SAMPLE APPLICATION CODES

Web Server Code Examples with NodeJS and Express :

Good Node JS Express Tutorial Site
Tutorial for Express Basic Routing
First Node App





NodeJS works with Most of Databases:
Example Codes for Connectivity to Each Database in NodeJS

Database Connectivity in NodeJS

Node Package Manager (NPM) for Database Connectivity

Microsoft SQL Server: Database Connectivity in NodeJS
MySql: Database Connectivity in NodeJS
Postgre: Database Connectivity in NodeJS



Application Code Examples with Node JS with Database Server MongDB or MySql :

Simple Node Application Codes with MongoDB

Node Application Codes in MVC with MongoDB

Node Application Codes in MVC with MySql




Other Resourses:
Node JS Documentation
Framework Built on Node JS Express
Free Tutorial Sites on NodeJS and MEAN Stack




Set up Guide for MEAN Stack: Also See Project 3 Section For Node JS Set up Guide
Node JS with Mongo DB Setup Guide
Node JS with Mongo DB Setup Guide
Angular JS with Node JS with Setup Guide

Node JS API for MongoDB:
NodeJS: Integrating to MongoDB
Mongoose: Node JS API for MongoDB: For connecting/querying to MongoDB:
Mongoose To Set Up
Mongoose Guide



How to Call (Integrate) a Python Script/App from NodeJS with Express:
Codes for How to Call a Python Script in NodeJS with Express Routing
Codes: How to Call a Python Script in NodeJS with Express Routing
Three Ways to Call a Python Script in NodeJS with Express




Integrating a Database Server with Node JS: MySQL/MongoDB/PostgreSQL/SQL Server:

Class Note_22: Database Server

Node API for MySQL:
NodeJS: Integrating to MySQL
Node-MySQL

NOSQL Database: Object Relational Mapping for Semi Structured Database

MongoDB:

MongoDB Installation:

MongoDB Installation: Either Enterprise Version or Community Version:
MongoDB Download and Installation
MongoDB Enterprise Version Download
MongoDB Installation Guides on Window
Or
MongoDB Community Version Installation
MongoDB Installation on Window

MongoDB GUI Compass Download


Mongo DB Setup:
Full Menu of MongoDB Manuals for Getting Started
MongoDB Cilent: Mongo Shell to start
Start your mongo Shell (client) and Connect to MongoDB Server
MongoDB Site: How to Import Data Set


MongoDB CRUD Operations

Introduction to Mongo DB
Mongo DB: Databases/Collections
Mongo DB: Document Format
Mongo DB: CRUD Operations
Mongo DB Getting started
Mongo DB Mapping Chart to Compare to SQL

Mongo DB Query: Select Operation
Mongo DB: Aggregations
Mongo DB Query Examples Comparison with SQL
Mongo DB Join Operator: lookup with unwind for array

Class Note_22_3: MongoDB Resources
Mongo DB Documentation


Application Examples Built with Node JS
Sample Web Application Using Node JS with Mongo DB
Sample Web Application with Angular JS and MS SQL Server

Security on Web Applications on Internet:

Class Note_29: Lecture on Web Security
Class Note_20: Malicious Javascript
Class Note_21: Lecture on NetworkAttacks
Class Note_22: Lecture on SessionAttacks
Class Note_23: Lecture on Code Injection
Class Note_24: Lecture on Phishing Attacks
Class Note_25: Lecture on DOS Attacks

Cloud Computing

Class Note_21: Large Scale WebApps I
Class Note_22: Large Scale WebApps II

Multimedia Service on Cloud
Mobile, Multimedia and Cloud Computing
Class Note_11:Lecture Note on Cloud Computing


Amazon Cloud Service:

Amazon AWS RDS (Relational Database Service)
Amazon AWS Elastic Cloud Computing (EC2) for Web service
How to Create Amazon AWS Virtual Hosting (EC2) with a Web Server and Amazon Database Server (RDS)

Microsoft Cloud Service Azure

Trial account for Microsoft AZURE Cloud
AZURE Cloud
Tutorial for MS AZURE Cloud
Sample Project on Microsoft AZURE Cloud
How to Create/Retrieve a Table in Microsoft AZURE Cloud
How to Create/Retrieve BLOB data in Microsoft AZURE Cloud
How to Create a SQL Database Server in Microsoft AZURE Cloud

Project Presentation
Project Presentation Scedule