CSE686 - Internet Programming

Resources:

Course Scope:

Eight laboratory exercises are required and completed, under the supervision of the instructor and TAs, during the second class meeting each week. A large final project is also required. In this project you will create a web site that serves web pages and provides web services. Your clients will be both browsers and custom applications.

Recommended Texts, Links, and Notes:

1. Books

   Asp.Net Core 2.0 MVC & Razor Pages
   C# 7.0 in a Nutshell: The Definitive Reference
   Professional ASP.NET MVC 5, Gallaway et. al.
   Bulletproof Web Design, The Zen of CSS, DOM Scripting: JavaScript and the DOM
   Transcending CSS
   Beginning JavaScript Development with DOM Scripting and Ajax
   Discusses both standard JavaScript as well as browser inconsistencies, and work-arounds.
2. Course References:
   General Resources Links

   Standards

   All Standards and Drafts - W3.org
   HTML ver 5.2 specification
   Cascading Style Sheets (CSS3) specifications, CSS3 specification - MDN
   JavaScript (ES6) specification

   Books

   How to code in HTML5 and CSS3
   Eloquent JavaScript - the book, Re-intro to JavaScript - MDN
   Asp.Net Core Book - gitbooks

   Tutorials

   Tutorials - MDN, TutorialRepublic References, tutorialspoint library

   References

   MSDN, W3schools.com, MDN, htmldog.com
   Microsoft Documentation
   .Net Core Guide, Introduction to Asp.Net Core - MSDN, Asp.Net Core Documentation - MSDN
   
   Design

   Design for Developers
   dribble.com/dhg, behance.net/gallery
   jonsuh.com, Juice-Interactive
   Programming Environments

   Visual Studio

   Visual Studio is an Integrated Development Environment (IDE) supporting projects and tool-chains for developing projects on Windows with the programming languages: C++, C#, JavaScript, and a variety of other .Net languages.

   Project types

   • Console applications
   • Static website development with HTML, CSS, JavaScript, and TypeScript - starts with blank solution.
   • Asp.Net Core web sites and web services
   • node.js applications
   • Python applications.

   Download Visual Studio Community Edition I will be presenting code in class most often with Visual Studio.
   Visual Studio Help pdf

   Getting Started

   .Net Core and Core SDK Tutorials
   Tutorials for Visual Studio 2017, Visual Studio Code, Visual Studio for Mac, and .Net Core CLI tools
   Visual Studio, Visual Studio Documentation
   Getting Started Videos
   

   Visual Studio Code

   Visual Studio Code is not Visual Studio. It is an IDE based on the Electron JavaScript library, and runs on every platfrom supporting node.js, a message dispatching framework hosting a modern JavaScript environment. That includes Windows, Linux, and the Mac OS's .

   Project Types

   • JavaScript and TypeScript
   • node.js
   • C++ with pluggins
   • C# and .Net with pluggins
   • Java, Python, and Go with pluggins

   Download Visual Studio Code .Net Core and Core SDK Tutorials
   Tutorials for Visual Studio 2017, Visual Studio Code, Visual Studio for Mac, and .Net Core CLI tools
   

   Getting Started

   Visual Studio Code, Getting Started with VS Code, Create a snippet in VS Code
   

   Working with C# and .Net Core in VS Code

   dotnet command
   Net Core Tutorials, Using .Net Core in Visual Studio Code, Working with C#

   Configuring VS Code

   Integrated Terminal, VS Code variables reference, User and Workspace Settings, Custom Tasks

   Working with C++ in VS Code

   Building C++ with Visual Studio Code, C++ for Visual Studio Code, Make for Windows

   VS Code Videos
   

   Visual Studio for Mac

   Visual Studio for Mac has support for Asp.Net Core MVC and Web API. Download Visual Studio for Mac .Net Core and Core SDK Tutorials
   Tutorials for Visual Studio 2017, Visual Studio Code, Visual Studio for Mac, and .Net Core CLI tools
   

   .Net Framework and .Net Core

   The .Net Framework is a set of libraries that support C# and other managed code development on the Windows platform.

   ---

   .Net Core is a slimmed-down port of the .Net Framework, with some new features, for Windows, Linux, and Macs. We will be using the Core Framework exclusively in this course. .Net Framework Guide
   Choosing between .Net Core and .Net Framework
   What's new in .Net Core
   .Net Core and Core SDK Tutorials
   Tutorials for Visual Studio 2017, Visual Studio Code, Visual Studio for Mac, and .Net Core CLI tools
   .Net Core packages
   

   dotnet CLI

   dotnet CLI is a command line interface for the .Net Core framework. It allows us to build, from the command line, C# console applications and Asp.Net Core Web applications.

   ---

   Once you've installed the .Net Core SDK you can explore dotnet CLI capabilities with the command: dotnet /h. Tutorial on .Net CLI - tutorialsteacher.com, Quick Tour of the .Net CLI - build scripts, Exploring dotnet CLI - Scott Hanselman
   .Net Core and Core SDK Tutorials
   Tutorials for Visual Studio 2017, Visual Studio Code, Visual Studio for Mac, and .Net Core CLI tools What's new in .Net Core, .Net Core packages .Net Core CLI Tools, .Net Core SDK and tools, .Net CLI and AWS Lambda

   VirtualBox

   VirtualBox is a virtual machine host that can be installed on any platform that supports Java, including Windows, Linux, and MacOS's. Mac users may wish to set up VirtualBox and install a Windows guest along with Visual Studio. Download VirtualBox, Installing VirtualBox

   PowerShell

   PowerShell is a command line facility with a powerful scripting language. But it's hard to learn well. I may use powershell for some demos in class.

   ---

   Hints: try opening PowerShell and typing: get-help, get-help commands, get-help objects,
   get-help About_methods, get-help About_properties, get-help About Tutorial - tutorialspoint.com, PowerShell Execution Policy,
   functions, passing arguments to cmdlets
   Create and Edit Profile, psEdit, PowerShell Profile, PowerShell Profiles
   Set-PSReadLineOption, Change console colors, Change prompt,
   HTML5

   Definition

   HTML ver 5.2 specification

   HyperText Markup Language (HTML) is a language for structuring content on a web page. It is based on Elements that have opening and closing tags and bodies with content.

     <htmltag>              <!-- any of the standard html tags, e.g., div -->
       <custom-childtag>    <!-- a user defined tag with some semantic meaning -->
         "literal text"
       </custom-childtag>
     </htmltag>
   

   • The HTML5 standard requires that all custom tags are hypenated, as shown above, to avoid clashes with future standard tags.
   • A body, everything between opening and closing tags, may consist of text or markup or both.

   Tutorials

   Tutorial - w3schools.com, Tutorial - tutorialspoint.com, Introduction - MDN, HTML5 Tutorial

   References

   HTML5 Reference - w3schools.com, HTML Reference - MDN, htmlreference.io
   HTML tag reference, HTML global attributes, HTML event attributes
   HTML5 Tags - tutorialspoint.com
   

   Understanding

   html5test.com, html5-demos run with Chrome, HTML5 Canvas demos
   Semantic Markup Pragmatic value of semantic markup

   Building Things

   FileSystem APIs - html5rocks.com, FileSystem - MDN, Intro to File and Directory Entries API - MDN, File API - w3.org
   CSS

   Definition

   Cascading Style Sheets (CSS3) specifications, CSS3 specification - MDN Cascading Style Sheets (CSS) provide a declarative language for specifying styles to apply to HTML elements. Each style is a list of key-value pairs. Styles are applied based on selectors that identify particular HTML elements or classes of elements. Style Sheets are collections of styles of the form:

       selectors { style-property : value; ... }
   
       example: body { padding:5%; background-color: #ddd; }
   
     where selectors are combinations of:
   
       htmltags:         body, div, span, img, ...
       custom-tags:      nav-keys, spacer-10, ... 
       .classnames:      .indent, .undent, .photo, ...
       #idnames:         #placeHolder, #mastheadPhoto, ...
       psuedo-classes:   a:link, a:hover, ...
       psuedo-elements:  p::first-letter, p::first-line, ...  
       attributes:       [attr], [attr=value], ...
   
     Selectors can be combined:
   
       s1, s2, ...      applied to s1 and s2 and ...
       s1 s2            applied to s2 if it has s1 ancestor
       s1 > s2          applied to s2 if it has s1 parent
       s1 + s2          applied to s2 if it has adjacent sibling s1
       s1 ~ s2          applied to s2 if it has sibling s1
   
     Examples:
       ol, ul { margin-top:10px; margin-bottom: 10px; }  // all ordered and unordered lists
       div li { background-color: #dddddd; }             // all list items with div ancestor
       div.indent > p { color: #333333; }                // all paragraphs that are children
                                                         //   of div with class indent
   
     Note: If any part of a style specification is invalid, the whole specification is invalid
           and will not be applied to it's selectors.  So styles can silently fail.
   

   • CSS Properties Reference - MDN
   • Selectors specification
   • Pseudo classes - w3schools.com
   • Psuedo elements - w3schools.com
   • StylesTemplate.css linked to this page

   Tutorials

   Tutorial - w3schools.com, Intro to CSS - MDN, Tutorial - tutorialspoint.com, CSS Tutorial - w3.org

   References

   CSS Reference - w3schools.com, CSS Reference - MDN, cssreference.io, CSS - tympanus.net

   Understanding

   units of measure - W3C
   stylinwithcss.com
   Box Shadow, Introduction to CSS Shapes
   Learn CSS Grid, CSS-Tricks Snippets
   Guide to Flexbox
   Learn CSS Grid, CSS Grid by Example, Complete Guide to Grid, Things I learded reading the CSS Grid Spec , The CSS Fractional Unit (fr)

   Building Things

   CSS dropdown menus, Hoverable Dropdown, Dropdown menu - w3schools.com
   Simple manual slide show - w3schools.com, Auto play slide show

   Miscellaneous

   CSS user-select, Css display property, HTML DOM parentElement property

   Libraries

   Bootstrap, Foundation, Normalize, purecss.io, Bulma
   JavaScript

   Definition

   JavaScript (ES6) specification A programming language based on objects composed of key-value pairs. Keys are names, and values may be a function (pointer), a literal, or another object.

   ---

   

   JavaScript uses a prototype model to support specialization. If a function call can't be resolved on an object, function lookup walks up the object's prototype chain.

   Jim = {
     "Name":"Fawcett",
     "Job":"Instructor,
     ...
   }

   ---

   

   When a JavaScript function is called its context (a JavaScript object) is loaded into an Execution Stack. When an event fires the context of its event handler function is enqueued in an Event Message Queue. Handlers don't execute until all functions have completed. Then, its context is loaded into the Execution Stack for processing.

   Books and Blogs

   Eloquent JavaScript - the book
   Re-intro to JavaScript - MDN
   

   Tutorials

   Tutorial - javascript.info, Tutorial - GeeksforGeeks.org, Tutorials - dyn-web/com
   

   References

   Reference - MDN, Reference - javascript-reference.info, Reference - w3shools.com, quirksmode.org
   

   Understanding

   ES6 Syntax and Features - taniarascia.com
   Understanding Classes, Understanding Events, How to use Object Methods
   Details of the Object Model - MDN
   Beginners guide to variables and datatypes
   Understanding the DOM - taniarascia.com
   ES6 Overview in 350 Bullet Points
   You don't know JavaScript
   Fetch API - replaces XMLHttpRequest,
   JavaScript Templating without a Library
   Transducers - Data Processing Pipelines

   Building Useful Things

   Building a Collection Object

   Technical Details

   JavaScript jit, Just in time compilers, Mozilla's JavaScript engine,
   Execution Context, Understanding Execution, Order of execution,
   Details of the object model
   Memory model, Call Stack

   Miscellaneous

   createElement, addEventListener
   JSON

   Definition

   JavaScript Object Notation - data structure composed of a collection of key-value pairs, where a value can be another collection of key-value pairs.

   Tutorials

   JSON - Wikipedia, JSON Introduction - w3schools.com

   References

   json.org, JSON - MDN
   AJAX

   Definition

   Asynchronous JavaScript and XML (AJAX), used in browser-based JavaScript to get (and put) data from a website without loading a new page. Data may be strings, JSON, or XML.

   Tutorials

   AJAX - w3schools.com AJAX - Wikipedia
   Fetch API - replaces XMLHttpRequest
   JavaScript Templating without a Library
   JavaScript Frameworks

   jQuery

   jQuery.js, jQuery API, jQuery Tutorial - w3schools.com
   

   node.js

   node.js, about node.js, node.js tutorial - w3schools.com
   Creating first app with Node.js, Read file in node.js, First API with Node.js and Express, REST API with Node.js and PostgreSQL
   Create a Node.js and React app in Visual Studio

   React.js

   React.js, Getting Started with React, React tutorial - reactjs.org, Components and Props - reactjs.org
   Four ways to style React components
   CRUD app in react with hooks, Create a Node.js and React app in Visual Studio

   React Native

   Animated Toggle in Native React
   

   JSX and TypeScript

   Getting started with JSX, What is JSX, babeljs.io, babel plugin to transform JSX, webpack.js.org, TypeScript loader for Webpack, TypeScript loader, You might not need to transpile your JavaScript,

   Vue

   Vue.js, Vue guide
   

   Angular

   Angular.js, Angular docs - angular.io, Learn Angular the right way, Angular Tutorial - w3schools.com, Angular for Beginners Guide
   

   Bootstrap

   Bootstrap - CSS, JavaScript, and HTML Framework, Bootstrap Documentation
   

   Drawing with JavaScript and HTML5 canvas

   Drawing - fabricjs.com, Drawing - paperjs.org, 2D Drawing - two.js
   JavaScript diagramming libs - modeling-languages.com, html5 canvas libraries - ihatetomatoes.net
   Standard Web Components

   Building Components
   Web Components - MDN, Guide to Web Components - Modular Future
   Componet-based web Application - CodeProject
   Polymer Project
   
   Web Colors

   Web colors
   Color picker - w3schools.com
   Color picker and harmonies - htmlcolorcodes.com
   clrs.cc, Color chart - websafecolors.info
   How colors work on the web - digital.com
   Asp.Net Core

   Definition

   Asp.Net is a platform for delivering web content. Asp.Net applications respond to requests by dynamically assembling web pages from control models and data, often from a database. Asp.Net was originally a Windows only platform. Asp.Net Core extends that to Linux and Mac platforms as well.

   ---

   The Model-View-Controller (MVC) architecture has three major part types:

   

   Views display information to the user and transmit user actions back to a controller. Controller instances are created for each request. They coordinate responses to the request by collecting data from the model and assembling it into a view for the response. Models manage data and often provide application logic to simplify controller operations.

   Books

   Asp.Net Core Book - gitbooks

   Tutorials

   Introduction to Asp.Net Core - MSDN, Razor Pages Tutorial - MSDN
   Asp.Net Core - Dependency Injection - tutorialsteacher.com

   References

   .Net Core Guide, Asp.Net Core Documentation - MSDN
   Using .Net Core in Visual Studio Code
   Razor syntax reference - MSDN, Create Razor Pages application
   App startup, Static files in Asp.Net Core
   File Uploads in Asp.Net Core

   Understanding

   Asp.Net Core demystified, Asp.Net Core Demystified - Razor Pages
   Asp.Net Core MVC Pipeline, View Layout
   Configure Asp.Net Core services, Configure to use static files
   Use Dependency Injection in Asp.Net Core, Dependency Injection Demystified, Dependency injection in Asp.Net Core
   Dependency Injection Best Practices,

   Building things

   Build a CRUD App with Web API and Angular
   Asp.Net Core Arch, Asp.Net Core Hidden Gems - Scott Hanselman
   HttpContext, HttpRequest Class, HttpResponse Class
   REST Client, HttpClient Class
   file upload and download, File Uploads in Asp.Net Core
   Authentication

   Role-base Authorization in Asp.Net Core - MSDN, Getting Started with Identity and Role - MSDN
   Custom user roles and authorization
   Dynamic Role-Based Authorization - CodeProject Authorization with roles
   Asp.Net Web API

   Definition

   Asp.Net Web API provides a platform for building web services, e.g., web content that is consumed by code in other applications. Like REST applications, the Asp.Net Web API actions are based on HTTP verbs, GET, PUT, POST, and DELETE. Content is managed by controllers with data provided by models (often wrappers for a database).

   Tutorials

   Asp.Net MVC - Web API - tutorialspoint.com, Getting Started with Asp.Net Web API
   Create a web API with Asp.Net Core MVC Tutorial - MSDN,

   Reference

   Asp.Net Web API - asp.net, .Net API Browser - MSDN
   

   Building things

   Build a CRUD App with Web API and Angular
   Web API Clients

   Definition

   Asp.Net Web API Clients are applications that consume Asp.Net API services. They may be console applications, Windows Presentation Application (WPF) programs, or other Web Applications.

   Survey

   Asp.Net Core Clients
   

   Console Apps

   Web API Console client, Asp.Net Web API Console Client, Console Applications
   

   WPF

   WPF Client for Asp.Net Web API, Consuming Asp.Net Web API in WPF
   WPF Client for Asp.Net Web API, wpftutorial.net, WPF Tutorial - tutorialspoint.com
   

   Using Angular and React

   CRUD with React and Asp.Net Core, CRUD with React.js and Entity Framework Core
   Angular Client for Asp.Net Web API, Build CRUD App for Asp.Net Web API with Angular.js
   

   Android

   React Native
   Xamarin.Android Applications
   Relational Databases

   Definition

   Relational databases store data in tables with relationships between tables definded by primary and foreign keys. Most relational databases support Structured Query Language (SQL) used to create, manage, and delete tables and extract information using queries that may join information from multiple tables.

   Tutorials

   SQL - w3schools.com, SQL - tutorialspoint.com
   MS SQL Server Tutorial - tutorialspoint.com, SQL Server Tutorial - techonthenet.com
   Working with SQL Server LocalDB, Connection String
   Tutorials for SQL Server Mgmt Studio
   

   Reference

   SQL Server Functions - w3schools.com, SQL Server Documentation - MSDN
   SQL Server Tools for VS, Visual Studio Server Mgmt Studio

   MySql

   MySQL for Visual Studio,

   Building things

   Create SQL Project with Visual Studio
   
   NoSQL Databases

   Definition

   NoSQL databases do not store data in tables. Rather, they use key-value or graph-based document stores. They use queries that are less formal than SQL and don't provide data consistency guarantees, of the kind supported by SQL.

   Summaries

   Wikipedia, mongoDB, couchbase.com, AWS - Amazon.com, nosql-database.org
   Entity Framework

   Definition

   Entity Framework is part of the Asp.Net platform. It provides classes to wrap Relational tables and a context to store application specific data-centric information like db connection strings.

   Tutorials

   Entity Framework Tutorial, Entity Framework Core
   EF 6 Tutorial, Entity Core Tutorial - stackify.com
   

   References

   Entity Framework Documentation - MSDN,

   Building things

   EF Core - Data First - MSDN, Generate Model from db
   C#

   Definition

   C# is a programming language that supports managed code, with structure very similar to Java. It is supported by the .Net Framework libraries which wrap most of the Windows API as well as provide language support for strings, delegates, presentation, and communication.

   Tutorials

   tutorialspoint.com, C# Tutorials - MSDN

   References

   C# Reference - MSDN, C# Programming Guide - MSDN

   Building things

   10 Most Common Mistakes
3. Web sites with interesting designs and designers:

   csszengarden.com alistapart.com, airbagindustries.com, andybudd.com, clearleft.com, cameronmoll.com, clagnut.com, meyerweb.com, Behance.net, woodst.com
4. Other Web Sites

   simplebits.com, CSSZenGarden, adactio.com
   Introduction to Asp.Net Core - MSDN
   .Net Core Guide, Introduction to Asp.Net Core - MSDN, Asp.Net Core Documentation - MSDN
   Asp.Net Core Book - gitbooks Asp.Net Core demystified
   Razor syntax reference - MSDN, Razor Pages Tutorial - MSDN
   Create Razor Pages application, Asp.Net Core Demystified - Razor Pages
   Intro to ASP.net MVC4 website - MSDN, Intro to Asp.Net MVC 5 - MSDN
   Mozilla Developer Network (MDN)
   Excellent source for information about most of the important web programming topics.
   Catalog of free resources - Syncfusion.com
   StuffAndNonsense.co.uk
   Intersting discussion of design and implementation of pages.
   LearningWebDesign.com
   Good examples of page layout and design.
   onlinetools.org
   wait-till-i.com-Blog
   CSS play
5. Class Notes and Code:
   Presentations, Code

Prerequisites:

Syllabus, Spring 2019: