Transcript 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
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)