Assignment 1
This assignment explores some of the different methods to incorporating dynamic content into a website using ASP.NET. This document is for both internal and external students. Your task is to create a dynamic webpage that focuses around Health or Sport. This may be based on an existing website of your choice (to utilise their content) or health/sport content of your own creation (so long as it is not too offensive to others!). Your task is to re-create the page using the following 3 different approaches:
• Traditional declarative Web Forms (using Drag and Drop and server controls)
• Model bound Web Forms (using LINQ/Lambda)
• Model View Controller
You need to re-create the same page using all 3 approaches so that you can compare/contrast the differences. If you are feeling adventurous, then feel free to make 3 different pages using different tables and data from your database. You need to make sure your pages are styled using bootstrap (and not just copying the practicals!).
Requirements
There are several tasks you are required to complete:
• Create a new ASP.NET Web Application
In this case it is best to use the ASP.NET MVC project as your base and include the Web Forms options (as per the practicals). This will save you a lot of time! You will need to update your application to make use of bootstrap V4 and not the current v3 it defaults to.
• Create a new Web Forms Master Page and MVC Layout Template with Styles
Some sites don’t bother using a template and this can result in pages with completely different layouts. Sometimes the site uses a templating mechanism but the developer (or customer!) screws it up. Your task is to translate the basic layout of the website or the page you decide into the Master Page and Layout master that makes use of the various HTML5 Semantic tags. Your layout should look modern and make the most of the various bootstrap styles. It is a requirement that you use modern HTML5 and CSS3 standards. It should look as professional as possible.
• Create three new pages and add your Dynamic component (50%)
You need to create pages that fix a page from the original website. These new pages must make use of your new Master Page template.
•
•
•
• Traditional Data Binding dynamic content (15%)
• Your Traditional Page page will need to include:
• An example of dynamic content utilising a template data control (FormView or Repeater) supported by one or more SqlDataSources
• A Custom Database (not just the one grabbed from the practical). It must have an appropriate name, one or more tables with appropriate columns and test data. It must be connected by an appropriately named connection string
• All data elements must be named and styled appropriately.
• If the dynamic content includes an input form then it must include HTML5 validation and visually appealing (as forms can be!). If a record is inserted, it should be displayed back to the user or appropriate feedback given on a successful save.
• Model Binding dynamic content (15%)
This is an exact copy of the above page except it must use the Entity Framework object relational mapper and the data controls must make use of model binding instead of the traditional eval() and bind() expressions. You will need to write your own supporting LINQ/Lambda queries to populate the data controls
• Model View controller (20%)
This is an exact copy of the above two pages except it must use the MVC design pattern in conjunction with the Entity Framework. You may need to write your own supporting LINQ/Lambda queries to populate the view depending on how you set this up. You may also need to modify the _Layout.cshtml file and the view file to get it to look like the other pages.
• Incorporate JavaScript and CSS3 components (30%)
• CSS3 Transition/Animation (10%)
A CSS3 Transition or Animation on your new dynamic pages that fits with the website or is likely to improve user experience. Random animations/transitions you copied off the web will not gain any marks. This must include at least two CSS selectors that incorporate CSS style rules – “bootstrap transitions and effects” are not included and will not receive marks. The CSS should be in a separate file linked to your pages.
• JavaScript (20%)
To obtain full marks in the assignment you must include some useful JavaScript (not just using the JQuery library). Again, this must be fitting with the website and/or improve user experience. Random dialogue boxes will not gain marks.
• Implement an event listener using plain JavaScript that modifies an element on your new dynamic page in some constructive way. It should provide visual feedback to the user that something is about to happen and should toggle a bootstrap style on/off from an element or similar. It should demonstrate you know how to use basic JavaScript to respond to an event. You must include at least 4+ lines of JavaScript
• Implement an event listener using JQuery and include a JQuery animation using .animate(). This could be some sort of fancy visual feedback such as an animation/transition in response to user interactions. The script should demonstrate that you know how to select and manipulate specific elements within the HTML document and how to respond to an event using JQuery (clicking on an element, or hover etc). You must include at least 4+ lines of JQuery JavaScript.
• HTML and Validation (20%)
Your pages will need to be constructed from valid HTML. We suggest you use the W3C HTML validator to check this! You need to use HTML5 semantic tags, use appropriate class names and IDs.
General layout and presentation. This includes:
• Master Page, _Layout creation and setup
• Use of HTML5 Semantic tags where appropriate
• Presentation and basic CSS –use of bootstrap V4 CSS framework.
Due Date: Tuesday 30th April 9:00am
You must present your work during the week 7 practical to obtain your marks. The uploaded website will be used for in class assessment.