Lecture #1 - Introduction to IP

Discuss Projects, Labs, Class Mechanics

Web Resources:

W3schools.com, MDN, htmldog.com, TutorialRepublic References, tutorialspoint library
Microsoft Documentation, okta.com


This lecture is an introduction to the CSE686 - Internet Programming course. Today we discuss topics to be covered in this course, its projects, and grading, then cover an introduction to the web, client-side programming models, seperation of content from styling, and discuss this week's Lab material. Why take this course?
  1. Asp.Net Core MVC is the latest version of Microsoft's Asp.Net Framework. It's widely used and quite accessible.
  1. Syllabus describes topics to be covered, reading material for you to digest before coming to class, and due dates for the assigned projects.
  2. Grading Grades are based on:
    Final Project
    MidTerm Exam
    Final Exam
  3. Projects: Final Project #1, Final Project #2, Final Project #3
    You will do one of these - the choice of which is yours to make - and present at the end of the course.
    Additional Requirements
    You are expressly requested to refrain from using site editors like Wix, web.com, or other web designers. You may use any of the facilities of Visual Studio or any other text editor of your choice. This same rule applies to your lab submissions as well. For your Final Project demos you will be required to use only page links for navigation. You may host and demonstrate your labs in the built-in Visual Studio web server.
    All projects must use:
    • Asp.net core MVC - main site
    • Asp.net Web API - web service
    • Web API Client
    • SQL db storage
    • At least one static page that uses new features of HTML5, CSS3, and JavaScript6.
  4. Help Sessions: Every Friday morning from 9:00am to 10:30am
  5. Introductions:
    A Course in Two Acts CSE686 - Internet Programming is like a play with two acts:
    • Act #1 - Learn to Design and build web sites that serve infrequently changing content.
      • The site shares its content with all users.
      • Users have no way to modify or add new content.
      • Content is entirely static pages composed of HTML, CSS, and JavaScript.
      • These sites can be hosted anywhere, including from a local file system.
    • Act #2 - Build sites that support user interactions with stored content.
      • Content is assembled for each delivery
      • Some of the content is pulled from repositories that change frequently.
      • Users can post new information to the site repositories
      • Content is delivered and posted in a technology specific way.
      • In this course, for Act #2, we focus on Asp.Net MVC core.
      • That is a new cross-platform technology.`
    Introduction to CSE686 - IP, pptx Introduction to the Web, pptx
  6. Course Resources:
    General Resources Links
    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,
    Definition 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"
    • 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
    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
        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.
    Building Things
    Libraries Bootstrap, Foundation, Normalize, purecss.io, Bulma
    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.
    It 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 = {

    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
    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
    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
    Standard Web Components Building Components
    Web Components - MDN, Guide to Web Components - Modular Future
    Componet-based web Application - CodeProject
    Polymer Project
    Web Colors
    Asp.Net Core
    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
    Asp.Net Web API
    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
    Relational Databases
    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
    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
    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# 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
  7. Static Web Page Model
  8. Specifications:
  9. Demos of Static Programming Models:
  10. Web Server Page Models:
  11. Test Page
  12. Lab #1