WebMatrix 3
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
Table
Database Terms
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)
