20
WebMatrix 3 Module 3 - Databases

WebMatrix 3

  • Upload
    conor

  • View
    56

  • Download
    0

Embed Size (px)

DESCRIPTION

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 - PowerPoint PPT Presentation

Citation preview

Page 1: WebMatrix 3

WebMatrix 3

Module 3 - Databases

Page 2: WebMatrix 3

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

Page 3: WebMatrix 3

The Web Application

• A Movie tracking app• Add, delete and change some basic

information on movies

Page 4: WebMatrix 3

Database TermsTable

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

RowsColumn, Field

Primary Key Column Name

Page 5: WebMatrix 3

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

Page 6: WebMatrix 3

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

Page 7: WebMatrix 3

Add some data …

Page 8: WebMatrix 3

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

Page 9: WebMatrix 3
Page 10: WebMatrix 3

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>

Page 11: WebMatrix 3

More code

• Inside the body element, add the following code:

<h1>Movies</h1> <div> @grid.GetHtml() </div>

<h1>Movies</h1><div> @grid.GetHtml()</div>

Page 12: WebMatrix 3
Page 13: WebMatrix 3

Display selected columns

• Replace the @grid.GetHtml() with the following:

@grid.GetHtml( columns: grid.Columns( grid.Column("Title"), grid.Column("Genre"), grid.Column("Year") ))

Page 14: WebMatrix 3

WebGrid Column Display

Page 15: WebMatrix 3

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>

Page 16: WebMatrix 3

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

Page 17: WebMatrix 3

Prettier web page

Page 18: WebMatrix 3

Add Paging

• var grid = new WebGrid(source: selectedData, rowsPerPage: 3);

Page 19: WebMatrix 3

Web Page with Paging

Page 20: WebMatrix 3

FINIS(The End)