added web app materials

chapmanbe · Dec 6, 2017 · d0135c6 · d0135c6
1 parent 97b9751
commit d0135c6
Show file tree

Hide file tree

Showing 6 changed files with 933 additions and 0 deletions.
diff --git a/modules/M18-WebApps/LectureMaterials/MVC.ipynb b/modules/M18-WebApps/LectureMaterials/MVC.ipynb
@@ -0,0 +1,160 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from IPython.display import YouTubeVideo\n",
+    "\n",
+    "YouTubeVideo(\"1fEf7T9fGB4\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Model View Controller Architecture\n",
+    "[This is largely drawn from Wikipedia](http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)\n",
+    "\n",
+    "* MVC is a General Principle of User Interface design and is not specific to web applications.\n",
+    "* The general idea is breaking your program into three parts\n",
+    "    * Model\n",
+    "    * View\n",
+    "    * Controller\n",
+    "    "
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "internals": {
+     "slide_helper": "subslide_end",
+     "slide_type": "subslide"
+    },
+    "slide_helper": "subslide_end",
+    "slideshow": {
+     "slide_type": "subslide"
+    }
+   },
+   "source": [
+    "![MVC](http://upload.wikimedia.org/wikipedia/commons/f/fd/MVC-Process.png)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "internals": {
+     "slide_helper": "subslide_end",
+     "slide_type": "subslide"
+    },
+    "slide_helper": "subslide_end",
+    "slideshow": {
+     "slide_type": "subslide"
+    }
+   },
+   "source": [
+    "## MVC: Model\n",
+    "\n",
+    "* The **model** is the domain problem your program is addressing. What data are you interested in? How are you representing it?\n",
+    "* In Web applications, like Flask, you think of your model in terms of **classes and database tables**\n",
+    "    * A class corresponds to a table in the database\n",
+    "    * An attribute of the class corresponds to a column in the table"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "internals": {
+     "slide_helper": "subslide_end",
+     "slide_type": "subslide"
+    },
+    "slide_helper": "subslide_end",
+    "slideshow": {
+     "slide_type": "subslide"
+    }
+   },
+   "source": [
+    "## MVC: View\n",
+    "\n",
+    "* The **view** is how we present information (e.g. models) to the user.\n",
+    "    * You want to keep logic out of the view.\n",
+    "    * In web applications, the view is the web page\n",
+    "        * We'll use **templates** to create dynamic HTML pages (pages where values are changed based on the state of the program)\n",
+    "        "
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "internals": {
+     "slide_helper": "subslide_end",
+     "slide_type": "subslide"
+    },
+    "slide_helper": "subslide_end",
+    "slideshow": {
+     "slide_type": "subslide"
+    }
+   },
+   "source": [
+    "## MVC: Controller\n",
+    "\n",
+    "* The controller is the logic of the program function.\n",
+    "* The controller asks and answers questions about how the model is modified based on input from the user. It also controls the flow of the program.\n",
+    "    * For example, if the user enters value $Y$, display page $a$ otherwise display page $b$"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "internals": {
+     "slide_type": "subslide"
+    },
+    "slideshow": {
+     "slide_type": "subslide"
+    }
+   },
+   "source": [
+    "## Resources\n",
+    "* [Model View Controller tutorial](https://realpython.com/blog/python/the-model-view-controller-mvc-paradigm-summarized-with-legos/)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "internals": {
+     "slide_helper": "subslide_end"
+    },
+    "slide_helper": "slide_end",
+    "slideshow": {
+     "slide_type": "-"
+    }
+   },
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 2",
+   "language": "python",
+   "name": "python2"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 2
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython2",
+   "version": "2.7.13"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 1
+}
diff --git a/modules/M18-WebApps/LectureMaterials/MVC.md b/modules/M18-WebApps/LectureMaterials/MVC.md
@@ -0,0 +1,63 @@
+
+
+```python
+from IPython.display import YouTubeVideo
+
+YouTubeVideo("1fEf7T9fGB4")
+```
+
+
+
+
+
+        <iframe
+            width="400"
+            height="300"
+            src="https://www.youtube.com/embed/1fEf7T9fGB4"
+            frameborder="0"
+            allowfullscreen
+        ></iframe>
+        
+
+
+
+#Model View Controller Architecture
+[This is largely drawn from Wikipedia](http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)
+
+* MVC is a General Principle of User Interface design and is not specific to web applications.
+* The general idea is breaking your program into three parts
+    * Model
+    * View
+    * Controller
+
+
+![MVC](http://upload.wikimedia.org/wikipedia/commons/f/fd/MVC-Process.png)
+
+## MVC: Model
+
+* The **model** is the domain problem your program is addressing. What data are you interested in? How are you representing it.
+* In Web applications, like Flask, you think of your model in terms of **classes and database tables**
+    * A class corresponds to a table in the database
+    * An attribute of the class corresponds to a column in the table
+
+## MVC: View
+
+* The **view** is how we present information (e.g. models) to the user.
+    * You want to keep logic out of the view.
+    * In web applications, the view is the web page
+        * We'll use **templates** to create dynamic HTML pages (pages where values are chaned based on the state of the program)
+
+
+## MVC: Controller
+
+* The controller is the logic of the program function.
+* The controller asks and answers questions about how the model is modified based on input from the user. It also controls the flow of the program.
+    * If the user enters value $Y$, display page $a$ otherwise display page $b$
+
+## Resources
+* [Model View Controller tutorial](https://realpython.com/blog/python/the-model-view-controller-mvc-paradigm-summarized-with-legos/)
+
+
+```python
+
+```