Database Communica/on in Visual Studio/C# using ASP.NET Web Forms Hans- PeBer Halvorsen, M.Sc.
Web Programming Hans- PeBer Halvorsen, M.Sc.
Web is the Present and the Future 3
History of the Web Internet (1960s) World Wide Web - WWW (1991) First Web Browser - Netscape, 1994 Google, 1998 Facebook, 2004 Smartphones, 2007 Tablets, 2010 4
The Web Browser O. Widder. (2013). geek&poke. Available: hbp://geek- and- poke.com Internet Explorer Firefox Opera Chrome Safari 5
Web Pages Examples 6
The Web Programming Triangle HTML Use HTML to define the content of web pages Web Programming CSS JavaScript Use CSS to specify the layout of web pages Use JavaScript to program the behavior of web pages
CSS JavaScript Web Server 8
Web Architecture Internet Explorer Chrome Firefox Opera Safari Client Web Browser HTML CSS JavaScript Server- side Web Server 9
Web Plaaorm The Web Browser creates the visual web page you see in the browser based on the HTML code <!DOCTYPE html> <html> <body> <h1>my First Heading</h1> <p>my first paragraph.</p> </body> </html> HTML, CSS, JavaScript Web Browser Client- side The code runs on the server and converted to HTML before sending to client (Web Browser) ASP.NET, PHP,... Web Server Web Page (HTML) Server- side Internet Informa/on Services (IIS), Apache, etc. 10
HTML HyperText Markup Language (HTML) The Visual appearnce of a Web Site Web Browser Language : All Web Browser understand HTML HTML 5 is the latest Maintened by W3C - World Wide Web Consor/um <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title of the document</ title> </head> <body> Content of the document... </body> </html> 11
CSS CSS Cascading Style Sheets Styles define how to display HTML elements CSS is used to control the style and layout of mul/ple Web pages all at once body { background-color: #d0e4fe; } h1 { color: orange; text-align: center; } p { } font-family: "Times New Roman"; font-size: 20px; 12
JavaScript JavaScript is the programming language of the Web. All modern HTML pages are using JavaScript. JavaScript is the default scrip/ng language in all modern browsers, and in HTML5. JavaScript is probably the most popular programming language in the world. It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more. JavaScript can Change HTML Elements! which makes it very powerful! 13
Why JavaScript? JavaScript is one of 3 languages all web developers must learn: 1. HTML to define the content of web pages 2. CSS to specify the layout of web pages 3. JavaScript to program the behavior of web pages This tutorial is about JavaScript, and how JavaScript works with HTML and CSS. 14
Web Server The term web server can refer to either the hardware (the computer) or the sohware (the computer applica/on) that helps to deliver web content that can be accessed through the Internet. The most common use of web servers is to host websites, but there are other uses such as gaming, data storage or running enterprise applica/ons. IIS - Internet Informa/on Services Microsoh Windows Apache Web Server Open Source Cross- plaaorm: UNIX, Linux, OS X, Windows,... Nginx (pronounced "engine x") - Has become very popular latly GWS (Google Web Server) 15
Web Server hbp://www.digi.no/921119/under- halvparten- bruker- apache 16
Web Programming HTML/HTML5 ASP.NET PHP AJAX JavaScript CSS... O. Widder. (2013). geek&poke. Available: hbp://geek- and- poke.com HTTP Error 500 Internal Server Error 17
Web Programming HTML IIS PHP JavaScript Web Services Web API ASP.NET XML AJAX CSS SQL JQuery 18
HTML CSS JavaScript Basic Web Programming For more Dynamic Web Programming we use e.g., ASP.NET SQL AJAX PHP etc. (But these are not part of this Tutorial) 19
Client- Server Example Client Web Browser Response Web Server Request Database Internet Informa/on Services (IIS), Apache, etc. 20
ASP.NET Hans- PeBer Halvorsen, M.Sc.
Web & ASP.NET Web Browser Server- side Client HTML JavaScript Web Server ASP.NET C#/VB.NET CSS.NET Framework 22
ASP.NET Web Sites Web Pages Web Forms MVC ASP.NET C#/VB.NET.NET Framework 23
ASP.NET Example Hans- PeBer Halvorsen, M.Sc.
ASP.NET WebForm App This is the WebForm App we are going to create: ASP.NET is a Web Framework available from Visual Studio. Easily explained, it is just a Template for crea/ng Web Pages using C# 25
Database This is our Example Database (Designed with ERwin) Students: Create the Tables in ERwin and implement the Tables in SQL Server 26
SQL Script - Tables if not exists (select * from dbo.sysobjects where id = object_id(n'[author]') and OBJECTPROPERTY(id, N'IsUserTable') = 1) CREATE TABLE [AUTHOR] ( [AuthorId] [int] IDENTITY(1, 1) NOT NULL PRIMARY KEY, [AuthorName] [varchar](50) NOT NULL UNIQUE, [Address] [varchar](50) NULL, [Phone] [varchar](50) NULL, [PostCode] [varchar](50) NULL, [PostAddress] [varchar](50) NULL, ) GO if not exists (select * from dbo.sysobjects where id = object_id(n'[publisher]') and OBJECTPROPERTY(id, N'IsUserTable') = 1) CREATE TABLE [PUBLISHER] ( [PublisherId] [int] IDENTITY(1, 1) NOT NULL PRIMARY KEY, [PublisherName] [varchar](50) NOT NULL UNIQUE, [Description] [varchar](1000) NULL, [Address] [varchar](50) NULL, [Phone] [varchar](50) NULL, [PostCode] [varchar](50) NULL, ) GO [PostAddress] [varchar](50) NULL, [EMail] [varchar](50) NULL, if not exists (select * from dbo.sysobjects where id = object_id(n'[category]') and OBJECTPROPERTY(id, N'IsUserTable') = 1) CREATE TABLE [CATEGORY] ( [CategoryId] [int] IDENTITY(1, 1) NOT NULL PRIMARY KEY, [CategoryName] [varchar](50) NOT NULL UNIQUE, [Description] [varchar](1000) NULL, ) GO if not exists (select * from dbo.sysobjects where id = object_id(n'[book]') and OBJECTPROPERTY(id, N'IsUserTable') = 1) CREATE TABLE [BOOK] ( [BookId] [int] IDENTITY(1, 1) NOT NULL PRIMARY KEY, [Title] [varchar](50) NOT NULL UNIQUE, [ISBN] [varchar](20) NOT NULL, [PublisherId] [int] NOT NULL FOREIGN KEY REFERENCES [PUBLISHER] ([PublisherId]), [AuthorId] [int] NOT NULL FOREIGN KEY REFERENCES [AUTHOR] ([AuthorId]), [CategoryId] [int] NOT NULL FOREIGN KEY REFERENCES [CATEGORY] ([CategoryId]), [Description] [varchar](1000) NULL, [Year] [date] NULL, [Edition] [int] NULL, [AverageRating] [float] NULL, ) GO 27
SQL Script Insert some Data into the Tables - - CATEGORY - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - INSERT INTO CATEGORY (CategoryName) VALUES ('Science') GO INSERT INTO CATEGORY (CategoryName) VALUES ('Programming') GO INSERT INTO CATEGORY (CategoryName) VALUES ('Novel') GO - - AUTHOR - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - INSERT INTO AUTHOR (AuthorName) VALUES ('Knut Hamsun') GO INSERT INTO AUTHOR (AuthorName) VALUES ('Gilbert Strang') GO INSERT INTO AUTHOR (AuthorName) VALUES ('J.R.R Tolkien') GO INSERT INTO AUTHOR (AuthorName) VALUES ('Dorf Bishop') GO - - PUBLISHER - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - INSERT INTO PUBLISHER (PublisherName) VALUES ('Prentice Hall') GO INSERT INTO PUBLISHER (PublisherName) VALUES ('Wiley') GO INSERT INTO PUBLISHER (PublisherName) VALUES ('McGraw- Hill') GO 28
SQL Script Insert some Data into the Tables - - BOOK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - INSERT INTO BOOK (Title, ISBN, PublisherId, AuthorId, CategoryId) VALUES ( 'Introduction to Linear Algebra', '0-07- 066781-0', (select PublisherId from PUBLISHER where PublisherName='Prentice Hall'), (select AuthorId from AUTHOR where AuthorName='Gilbert Strang'), (select CategoryId from CATEGORY where CategoryName='Science') ) GO INSERT INTO BOOK (Title, ISBN, PublisherId, AuthorId, CategoryId) VALUES ( 'Modern Control System', '1-08- 890781-0', (select PublisherId from PUBLISHER where PublisherName='Wiley'), (select AuthorId from AUTHOR where AuthorName='Dorf Bishop'), (select CategoryId from CATEGORY where CategoryName='Programming') ) GO INSERT INTO BOOK (Title, ISBN, PublisherId, AuthorId, CategoryId) VALUES ( 'The Lord of the Rings', '2-09- 066556-2', (select PublisherId from PUBLISHER where PublisherName='McGraw- Hill'), (select AuthorId from AUTHOR where AuthorName='J.R.R Tolkien'), (select CategoryId from CATEGORY where CategoryName='Novel') ) GO 29
ASP.NET Web Form Create a New Project in Visual Studio 30
Add a New Web Form ( Books.aspx ) Right- click in the Solu/ons Explorer and select Add New Item Books.aspx 31
Create the following GUI ( Books.aspx ) Header GridView (Drag and Drop from the Toolbox) 32
Create the following Code ( Books.aspx.cs ) using System.Web.Configuration; using DatabaseWebApp.Data;... Reference to our Class that communicates with the Database public partial class BookList : System.Web.UI.Page { private string connectionstring = WebConfigurationManager.ConnectionStrings["LibraryDBConnectionString"].ConnectionString; void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { FillBookGrid(); } } private void FillBookGrid() { List<Book> booklist = new List<Book>(); Book book = new Book(); booklist = book.getbooks(connectionstring); We shall create the Connec/on String to the Database in the Web.config page See next slides for implementa/on of the Book Class } } gridbooklist.datasource = booklist; gridbooklist.databind(); 33
Create Database Code Create a new Class ( Books.cs ) Books.cs 34
Create the Following Class in Books.cs using System.Data.SqlClient; using System.Data.SqlTypes; using System.Data; public class Book { public int BookId { get; set; } public string Title { get; set; } public string Isbn { get; set; } public string PublisherName { get; set; } public string AuthorName { get; set; } public string CategoryName { get; set; } public List<Book> GetBooks(string connectionstring) { List<Book> booklist = new List<Book>(); SqlConnection con = new SqlConnection(connectionString); string selectsql = "select BookId, Title, Isbn, PublisherName, AuthorName, CategoryName from GetBookData"; con.open(); SqlCommand cmd = new SqlCommand(selectSQL, con); SqlDataReader dr = cmd.executereader(); if (dr!= null) { while (dr.read()) { Book book = new Book(); GetBookData is a View (see next slide) } } book.bookid = Convert.ToInt32(dr["BookId"]); book.title = dr["title"].tostring(); book.isbn = dr["isbn"].tostring(); book.publishername = dr["publishername"].tostring(); book.authorname = dr["authorname"].tostring(); book.categoryname = dr["categoryname"].tostring(); booklist.add(book); } } return booklist; 35
SQL Script Views GetBookData IF EXISTS (SELECT name FROM sysobjects WHERE name = 'GetBookData' AND type = 'V') DROP VIEW GetBookData GO CREATE VIEW GetBookData AS SELECT BOOK.BookId, BOOK.Title, BOOK.ISBN, PUBLISHER.PublisherName, AUTHOR.AuthorName, CATEGORY.CategoryName FROM BOOK INNER JOIN AUTHOR ON BOOK.AuthorId = AUTHOR.AuthorId INNER JOIN PUBLISHER ON BOOK.PublisherId = PUBLISHER.PublisherId INNER JOIN CATEGORY ON BOOK.CategoryId = CATEGORY.CategoryId GO 36
Create Database Connec/on String in Web.config Your Database <connectionstrings> <add name="librarydbconnectionstring" connectionstring="data Source=macwin8;Initial Catalog=BOOKS;Persist Security Info=True;User ID=sa;Password=xxx" providername="system.data.sqlclient" /> </connectionstrings> Where xxx is your SQL Server Database Password Finally, Run your applica/on: UserName and Password for your SQL Server Congratula/ons! It works! 37
You are finished with the Exercise 38
Recommended LiBerature Tutorial: Introduc/on to Database Systems hbp://home.hit.no/~hansha/?tutorial=database Tutorial: Structured Query Language (SQL) hbp://home.hit.no/~hansha/?tutorial=sql Tutorial: Using SQL Server in C# Tutorial: Introduc/on to Visual Studio and C# hbp://home.hit.no/~hansha/?tutorial=csharp 39
Hans- PeSer Halvorsen, M.Sc. Telemark University College Faculty of Technology Department of Electrical Engineering, InformaYon Technology and CyberneYcs E- mail: hans.p.halvorsen@hit.no Blog: hsp://home.hit.no/~hansha/ 40