Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Open Database Connectivity wikipedia , lookup
Entity–attribute–value model wikipedia , lookup
Concurrency control wikipedia , lookup
Functional Database Model wikipedia , lookup
Microsoft Jet Database Engine wikipedia , lookup
Clusterpoint wikipedia , lookup
Relational model wikipedia , lookup
Extensible Storage Engine wikipedia , lookup
WebMatrix 3 Module 3 - Databases Objectives • • • • • Build a database and database tables Add data to a database Display data from a database on a web page Run SQL commands Customize the WebGrid helper The Web Application • A Movie tracking app • Add, delete and change some basic information on movies Database Terms Table Primary Key Column Name Column, Field Rows A database may contain many tables. A Table is a collection of rows. A Row is a collection of columns. Column contents are homogeneous (strings, numerics, boolean, etc.) Creating a database • • • • Open WebMatrix Create an Empty Site called WebPageMovies Click on Databases in the left pane Click on New Database in the Ribbon – WebMatrix creates WebPageMovies.sdf database Create a Table • In the ribbon, click New Table. • Enter “Movies” as the Table Name • Design the columns by entering data as shown below (be exacting – read your work) • Ctrl+S or Save in Quick Access Add some data … Display data with the WebGrid Helper • Click the Files workspace in the left pane – Note the App_Data folder created by WebMatrix – This is where the .sdf file you created resides • Create a new file – New (in ribbon) – Choose cshtml file type to create – Name the new page “Movies.cshtml” • Note the skeleton code generated automatically Code for the WebGrid Helper • Razor code, insert between the curly braces {} • Code walkthru var db = Database.Open("WebPagesMovies"); var selectedData = db.Query("SELECT * FROM Movies"); var grid = new WebGrid(source: selectedData); Set the page title to “Movies” inside the <head> element head> <meta charset="utf-8" /> <title>Movies</title> </head> < <h1>Movies</h1> <div> @grid.GetHtml() </div> More code • Inside the body element, add the following code: <h1>Movies</h1> <div> @grid.GetHtml() </div> Display selected columns • Replace the @grid.GetHtml() with the following: @grid.GetHtml( columns: grid.Columns( grid.Column("Title"), grid.Column("Genre"), grid.Column("Year") ) ) WebGrid Column Display Change the look of the grid • Add the following <style> element to the <head> tag: <style type="text/css"> .grid { margin: 4px; border-collapse: collapse; width: 600px; } .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; } .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; } .alt { background-color: #E8E8E8; color: #000; } </style> Change the look of the grid … • Change the grid.GetHtml() to the following: @grid.GetHtml( tableStyle: "grid", headerStyle: "head", alternatingRowStyle: "alt", columns: grid.Columns( grid.Column("Title"), grid.Column("Genre"), grid.Column("Year") ) ) Prettier web page Add Paging • var grid = new WebGrid(source: selectedData, rowsPerPage: 3); Web Page with Paging FINIS (The End)