Skip to content

Commit

Permalink
Merge branch '2017-2018' of https://github.com/hogeschool/Development-5…
Browse files Browse the repository at this point in the history 
… into 2017-2018
  • Loading branch information
@a-omar
a-omar committed Oct 11, 2018
2 parents ef16c13 + 3fad07e commit ebded97
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 32 deletions.
48 changes: 24 additions & 24 deletions Lectures/Lecture4/practice.ipynb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,58 +5,58 @@
"metadata": {},
"source": [
"\n",
"# Activities"
"# Activities (Optional)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"In this practice you will learn how to setup an MVC application with a template engine. The template engine that we will use is called Razor. Razor is a __markup syntax__ that allows to embed server-based code into web pages by means of C#.\n",
"In this practicum you will learn how to setup an MVC application with a template engine. The template engine that we will use is called Razor. Razor is a __markup syntax__ that allows to embed server-based code into web pages by means of C#.\n",
"\n",
"\n",
"\n",
"Before showing how to setup such a project we will first take a look at what is HTML. This is necessary to understand the fundamental components that are necessary to build the View entity in our MVC.\n",
"Before showing how to setup such a project we will first take a look at what is HTML. This is needed to understand the fundamental components that are necessary to build the View entity in our MVC.\n",
"\n",
"#### Introduction to HTML\n",
"HTML (Hyper Text Markup Language) is a markup language (so it is not a programming langauge) for creating _static_ web pages. Markups are a set of tags that describe how text should be diplayed on a web page.\n",
"HTML (Hyper Text Markup Language) is a markup language (so it is not a programming langauge) for creating _static_ web pages. Markups are a set of tags that describe how text should be displayed on a web page.\n",
"\n",
"Every HTML page is made by the following items:\n",
" - Head, contains info about the webpage\n",
" - Body, contains the actual body to display on the screen\n",
" \n",
"<img src=\"1.JPG\">\n",
"\n",
"When we run the code above the out on your browser will be:\n",
"When we run the code above the output on your browser will be:\n",
"\n",
"<img src=\"2.JPG\">\n",
"\n",
"\n",
"Since pages in HTML are static typical programming elements such as while loops, calling a function, etc. are not found. Reason why to allow dynamism in pages we need expressive tools, such as a programming langauge. The choice of where to simulate such dynamic behavior is currently not trivial, since we are simulating the behavior of distributed applications. The possible options to run code in a html are different and depend on the context.\n",
"Since pages in HTML are static, typical programming elements such as while loops, calling a function, etc. are not found. This is the reason why to allow dynamism in pages we need expressive tools, such as a programming language. The choice of where to simulate such dynamic behavior is currently not trivial, since we are simulating the behavior of distributed applications. The possible options to run code in a html are different and depend on the context.\n",
"Code could be executed completely on the browser (client side), completely on the server, or a trade-off. Today we will see the second option, that is how to run code on the server. \n",
"\n",
"\n",
"In order to achieve this, we will use Razor together with ASP.net. In Razor a template file, which is made of a mix of literal text (a sort of HTML), is mixed up with C# statements (not all C# statements are allowed [1]). When all required data for a view are available the template engine will take care of embedding this data into the template and send the resulting page to the client. The page comes in the shape of a HTML page that can be interpreted by a common browser. ___In a template file Razor syntax starts with the __@__ sign. This sign will be used to automatically start parsing a statement by the engine, otherwise the HTML code will be directly pushed without any further processing. ___\n",
"In order to achieve this, we will use Razor together with ASP.net. In Razor a template file is made of a mix of literal text (a sort of HTML) and C# statements (not all C# statements are allowed [1]). When all required data for a view are available, the template engine will take care of embedding this data into the template and send the resulting page to the client. The page comes in the shape of a HTML page that can be interpreted by a common browser. __In a Razor template file, C# statements starts with the __@__ sign. This sign will be used to automatically start parsing a statement by the engine, otherwise the HTML code will be directly pushed without any further processing. __\n",
"\n",
"\n",
"<img src=\"0.jpg\">\n",
"\n",
"#### Setting up an MVC application with Razor\n",
"\n",
"\n",
"In the following we see some example on how to use Razor in a basic web application. In the end we will see how to use present our Movie model with Razor in an MVC application.\n",
"In the following we see a few examples of how to use Razor in a basic web application. In the end we will see how to present our Movie model with Razor in an MVC application.\n",
"\n",
"\n",
"##### Simple \"datetime\" view in Razor\n",
"\n",
"To create a basic razor project call the command `dotnet new razor` and then `dotnet restore`.\n",
"To create a basic Razor project call the command `dotnet new razor -o Practicum4Razor` (the option -o will give the project the name specified, in this case 'Practicum4Razor') and then `dotnet restore`.\n",
"\n",
"To test the code of this sample remove first the content of the _Index.cshtml_ file present in the _Pages_ folder and ad to it the following code.\n",
"To test the code of this sample, remove first the content of the _Index.cshtml_ file present in the _Pages_ folder and add to it the following code:\n",
"\n",
"\n",
"```\n",
"@page\n",
"@using razorapp\n",
"@using Practicum4Razor\n",
"@model IndexModel\n",
"\n",
"<h1>Hello World</h1>\n",
Expand All @@ -65,7 +65,7 @@
"</h3>\n",
"```\n",
"\n",
"In the code above the statement _@page_ converts the file into an MVC action, which means that it handles requests directly, without going through a controller. \n",
"In the code above, the statement _@page_ converts the file into an MVC action, which means that it handles requests directly, without going through a controller. \n",
"In addition when the index page is loaded a __Hello World__ message is presented with an additional message that comes from the model (_@Model.Message_). The message comes from the model which is defined in the file called _Index.cshtml.cs_. In this file we will define the shape of our model and how to access it.\n",
"\n",
"Now we will add a value to the message to print on the screen together with the _Hello World_ message. More precisely, we will print the current time. Open the file _Index.cshtml.cs_ and copy the following code.\n",
Expand All @@ -79,7 +79,7 @@
"using Microsoft.AspNetCore.Mvc;\n",
"using Microsoft.AspNetCore.Mvc.RazorPages;\n",
"\n",
"namespace razorapp.Pages\n",
"namespace Practicum4Razor.Pages\n",
"{\n",
" public class IndexModel : PageModel\n",
" {\n",
Expand All @@ -96,15 +96,15 @@
"\n",
"```\n",
"\n",
"We can attach more data to present to the view by means of the _ViewData_ object, so we do not use the message property as in the previous example. _ViewData_ is a dictionary that can carry additional data that are not directly binded in the models' properties. In the following example in the model we assign add information to _ViewData_ the current time and a _Hello World_ message (surrounded by a html tag) respectively. \n",
"We can attach more data to present to the view by means of the _ViewData_ object, so we do not use the message property as in the previous example. _ViewData_ is a dictionary that can carry additional data that are not directly binded in the models' properties. In the following example in the model we assign as information to _ViewData_ the current time and a _Hello World_ message (surrounded by a html tag) respectively. \n",
"\n",
"```\n",
"namespace razorapp.Pages\n",
"namespace Practicum4Razor.Pages\n",
"{\n",
" public class IndexModel : PageModel\n",
" {\n",
"\n",
" public string Message { get; private set; } = \"Razor Is Awesome\"\n",
" public string Message { get; private set; } = \"Razor Is Awesome\";\n",
"\n",
" public void OnGet()\n",
" {\n",
Expand All @@ -117,11 +117,11 @@
"\n",
"```\n",
"\n",
"To visualise the data when the index page is opened use the following code. In the following code print the message contained in the message property of our model, the time, and the hello world message. Note to interpret the hello world message as HTML we use the _@Html.Raw_, which will take care of interpreting the string content as HTML.\n",
"To visualize the data when the index page is opened use the following code. In the following code we print the message contained in the message property of our model, the time, and the hello world message. Note that to interpret the hello world message as HTML we use the _@Html.Raw_, which will take care of interpreting the string content as HTML.\n",
"\n",
"```\n",
"@page\n",
"@using razorapp\n",
"@using Practicum4Razor\n",
"@model IndexModel\n",
"\n",
"<h2>Separate page model</h2>\n",
Expand All @@ -140,11 +140,11 @@
"\n",
"##### Conditional logic and loops in Razor\n",
"\n",
"Since we are in practice using C# we can manipulate more articulated data structures in Razor. For example in the following example we add a new attribute to our model that containes a collection of data time. The collection is populated with new values everytime we call the models' page.\n",
"Since we are in practice using C# we can manipulate more articulated data structures in Razor. For instance, in the following example we add a new attribute to our model that contains a collection of data time. The collection is populated with new values everytime we call the models' page.\n",
"\n",
"\n",
"```\n",
"namespace razorapp.Pages\n",
"namespace Practicum4Razor.Pages\n",
"{\n",
" public class IndexModel : PageModel\n",
" {\n",
Expand All @@ -167,7 +167,7 @@
"\n",
"```\n",
"@page\n",
"@using razorapp\n",
"@using Practicum4Razor\n",
"@model IndexModel\n",
"\n",
"<h2>Separate page model</h2>\n",
Expand All @@ -186,11 +186,11 @@
"\n",
"```\n",
"\n",
"We can let our page interact with the model by means of forms. In the following example a form is made with an input box that manipulates the Name property of our model. THe effect of the manipulation become persistent the moment we press the button submit, which takes care of selecting the correct post method.\n",
"We can let our page interact with the model by means of forms. In the following example a form is made with an input box that manipulates the Name property of our model. The effect of the manipulation become persistent the moment we press the button submit, which takes care of selecting the correct post method.\n",
"\n",
"```\n",
"@page\n",
"@using razorapp\n",
"@using Practicum4Razor\n",
"@model IndexModel\n",
"\n",
"<h2>Separate page model</h2>\n",
Expand Down Expand Up @@ -256,7 +256,7 @@
"```\n",
"\n",
"\n",
"##### MVC and REST-style pages for the movie model\n",
"##### MVC and REST-style pages for the movie model (unrevised)\n",
"\n",
"In this last section we will create an actual MVC project that will show the movies/actors made previously in Razor. More specifically we will be able to see all the movies/actors present in the database, create/delete movies/actors, and select movies that satisfy some predicates.\n",
"\n",
Expand Down
16 changes: 8 additions & 8 deletions Lectures/Lecture4/theory.ipynb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"# Activities"
"# Activities (Optional)"
]
},
{
Expand All @@ -18,9 +18,9 @@
"- Discuss the fact that we now want some requests to return pages instead of just JSON data\n",
"- The REST API remains intact, but we also return pages to match the REST API with something human-readable\n",
"- This means that the server-side application will need to generate HTML from the requested data\n",
"- Generating HTML will require embedding some dynamic elements (depending on the data) with som estatic elements (depending on the page)\n",
" - For example, consider a page which say: `The current time is HH:MM`, where `HH:MM` is the current time\n",
" - The string `The current time is ` is static, meaning that it does not mean when and how we visit the page: it will always be the same\n",
"- Generating HTML will require embedding some dynamic elements (depending on the data) with some static elements (depending on the page)\n",
" - For example, consider a page which says: `The current time is HH:MM`, where `HH:MM` is the current time\n",
" - The string `The current time is ` is static, meaning that it does not matter when and how we visit the page: it will always be the same\n",
" - `HH:MM`, on the other hand, is dynamic: it needs to be recomputed whenever the user visits the page\n",
"- The core mechanism to achieve this is the Razor template, which outputs HTML starting from a _template_ containing C# and HTML mixed together\n",
" - HTML for the static part\n",
Expand All @@ -34,7 +34,7 @@
"<p>Hello World</p>\n",
"```\n",
"\n",
"- The `@` character is used to denote C# code inside the razor template, escape as `@@`\n",
"- The `@` character is used to denote C# code inside the Razor template:\n",
"\n",
"```\n",
"<p>@DateTime.Now</p>\n",
Expand Down Expand Up @@ -74,15 +74,15 @@
"```\n",
"@if (value % 2 == 0)\n",
"{\n",
" <p>The value was even</p>\n",
" <p>The value is even</p>\n",
"}\n",
"else if (value >= 1337)\n",
"{\n",
" <p>The value is large.</p>\n",
"}\n",
"else\n",
"{\n",
" <p>The value was not large and is odd.</p>\n",
" <p>The value is not large and is odd.</p>\n",
"}\n",
"```\n",
"\n",
Expand Down Expand Up @@ -115,7 +115,7 @@
"</html>\n",
"```\n",
"\n",
"- Notice that `@RenderBody()` specify where to place the output of the Razor templates using this template\n",
"- Notice that `@RenderBody()` specifies where to place the output of the Razor templates using this template\n",
"- The individual template can specify which layout to use by:\n",
"\n",
"```\n",
Expand Down

0 comments on commit ebded97

Please sign in to comment.