PROG 11044 Advanced Web Applications With NET Session

PROG 11044 Advanced Web Applications With. NET Session 8. 1 -Course Overview -Intro to ASP. NET

Professor Info Wendi Jollymore Wendi. jollymore@sheridanc. on. ca Don’t use Web. CT Mail!!! Extension: 8797 Office: S 401 (top floor of SCAET) Office Hours: Monday: 12 pm – 2 pm Wednesday: 11 am – 1 pm Friday: 9 am – 11 am 9/17/2020 Wendi Jollymore, ACES 2

Course Materials Web site: http: //www-acad. sheridanc. on. ca/~jollymor/prog 11044 Bookmark this!! DO NOT use Web. CT!!! 9/17/2020 Wendi Jollymore, ACES 3

Course Prerequisites From Java: Basic programming concepts Control structures (iteration, selection) Data structures (variables, arrays) XML – tags, structure PROG 38081 (Java 3) is required From Database: Database access Database structure (tables, relationships) SQL 9/17/2020 Wendi Jollymore, ACES 4

Course Prerequisites From Web Technologies: HTML/XHTML XML CSS (Cascading Style Sheets) Java. Script Web concepts How web pages work over HTTP What a web server is Client vs. Server 9/17/2020 Wendi Jollymore, ACES 5

Course Co-requisites You should be taking the C# course while taking this one (or have already taken it or been given PLA or AS for it) What have you done in C# so far? 9/17/2020 Wendi Jollymore, ACES 6

Topics Covered Dynamic web pages, web applications ASP. NET Page structure and page object elements Controls and events and how they function differently in a web app State – cookies, sessions, etc Data binding (XML, database) ADO. NET Creating and setting up databases, tables, users Data pages and database-driven web pages User authentication and authorization Web Services Web service model Creating, testing, consuming 9/17/2020 Wendi Jollymore, ACES 7

Evaluation Assignments (2): 15% In-Class Exercises: 5%* Final Project: 25% Test #1: 25% Test #2: 30% All dates are already posted 9/17/2020 Wendi Jollymore, ACES 8

Software Visual Studio, if you have it Version? ? Web Developer Express 2008 Might want to try this instead Some students find it runs faster or crashes less than VS Doesn’t have a lot of the unnecessary junk that VS has FREE! Install instructions on web: www-acad. sheridanc. on. ca/~jollymor/prog 11044/intro. html#install 9/17/2020 Wendi Jollymore, ACES 9

Resources Web site (URL given earlier) Course materials, notes, links, discussion board, grades, etc Notes are organized by unit in the menu There is also a Topic/Lesson List in menu Textbook Use Books 24 x 7 See links on web site Other web sites or on-line tutorials 9/17/2020 Wendi Jollymore, ACES 10

Organizing Files You should store your project files in a separate folder E. g. courses/prog 11044/projects Each project you create requires its own folder You should organize in-class exercises and tutorials by week or session E. g. courses/prog 11044/projects/sess 8 -2 9/17/2020 Wendi Jollymore, ACES 11

Questions? About final project? About due dates? About C#? 9/17/2020 Wendi Jollymore, ACES 12

Exercise A Set up a course and project folder E. g: prog 11044 For your notes and other junk prog 11044/projects For your project directories 9/17/2020 Wendi Jollymore, ACES 13

Exercise B Go to the course web site Find the Books 24 x 7 link and click it Follow instructions to log into Books 24 x 7 Search for and add these books to your bookshelf: Beginning ASP. NET 3. 5: In C# and VB by Imar Spaanjaars, ISBN: 9780470187593 Microsoft ASP. NET 3. 5 Step by George Shepherd, ISBN: 9780735624269 Professional ASP. NET 3. 5: In C# and VB by Bill Evjen, Scott Hanselman and Devin Rader, ISBN: 9780470187579 9/17/2020 Wendi Jollymore, ACES 14

ASP. NET See notes: ASP. NET/Introduction What is it? Server side technology Used to create dynamic web pages and web applications Can be used with a technology like ADO. NET Uses a markup based on XHTML 9/17/2020 Wendi Jollymore, ACES 15

ASP. NET Try it out: Using VS or WD, start up a new “Web Project” or “Web Site” Select “ASP. NET” The project location should be on your own file system Change default directory to your own project directory Add a name for the project (will be folder name) Select C# for the language 9/17/2020 Wendi Jollymore, ACES 16

IDE Elements Solution Explorer Lists the files in your web site Properties Window Where you can view/edit component properties Toolbox Might be docked or hidden – usually on left side Main editor Has tabs for Source/Design view Might have a Split or other options 9/17/2020 Wendi Jollymore, ACES 17

Existing Code If you’re in source view, there’s already code in the editor First line is the page directive Some of that will seem obvious We’ll learn more about this later You’ll also see some standard XHTML DOCTYPE declaration, structure tags, etc 9/17/2020 Wendi Jollymore, ACES 18

First Steps Change the <title></title> tag value to something more interesting Note the default file names in the solution explorer Default. aspx This contains the page’s markup Expand this by clicking + sign Default. aspx. cs This contains the C# code for the page “code-behind” 9/17/2020 Wendi Jollymore, ACES 19

First Steps Change the file name from “default. aspx” to “index. aspx” Select default. aspx in the solution explorer In the properties window, locate the File Name property Change to index. aspx The. cs file will change automatically! 9/17/2020 Wendi Jollymore, ACES 20

First Steps Everything on your page will be inside the existing <form></form> tags Notice the runat=“server” attribute This is vital for any element or component that will be accessed on the server side! Add stuff inside the <div></div> tags: A heading, some text, and this: <p>Hello, World. The time is now <%= Date. Time. Now. To. String() %></p> 9/17/2020 Wendi Jollymore, ACES 21

First Steps Flip over to Design View You won’t see the result of the inline C# code here In the toolbar, select the START button Or you can press F 5 If you get a “debugging not enabled” message, select “Modify the web. config file…” and click OK 9/17/2020 Wendi Jollymore, ACES 22

First Steps Browser of preference should open with your page loaded Exercise: In your browser, look at the page source What are the differences between the page source and the source code in VS/WD? 9/17/2020 Wendi Jollymore, ACES 23

Some Basic Controls Labels System. Web. UI. Web. Controls. Label Text Boxes System. Web. UI. Web. Controls. Text. Box Buttons System. Web. UI. Web. Controls. Button You’ll find these in your toolbox You can drag them to a page in source or design view 9/17/2020 Wendi Jollymore, ACES 24

Control Properties Many controls share some of the same properties ID Text Back. Color, Fore. Color Border. Color, Border. Style, Border. Width Enabled, Visible Font (a collection of Font properties such as Font Name and Font Names) Css. Class – if you have a css file, you can put a class name in this property 9/17/2020 Wendi Jollymore, ACES 25

Other Controls Drop. Down. List System. Web. UI. Web. Controls. Drop. Down. List Items property references a List. Items. Collection object This is a collection of List. Item objects List. Box System. Web. UI. Web. Controls. List. Box Also has an Items propert that references the collection of List. Items Check out the source code for these when you add them to a page Check out the page source when the page has been loaded in the browser 9/17/2020 Wendi Jollymore, ACES 26

Other Controls Radio. Button and Check. Box System. Web. UI. Web. Controls. Radio. Butt on System. Web. UI. Web. Controls. Check. Box Group. Name property Set this to the same value for all controls in a group of Radio Buttons So you can only select one in a group 9/17/2020 Wendi Jollymore, ACES 27

Other Controls Radio. Button. List and Check. Box. List System. Web. UI. Web. Controls. Radio. Butt on. List System. Web. UI. Web. Controls. Check. Box List Easy way to make a group of radio buttons or check boxes Source for these are just like those for List. Box and Drop. Down. List! 9/17/2020 Wendi Jollymore, ACES 28

Other Controls Image Control System. Web. UI. Web. Controls. Image You won’t always use this when you have an image on a page This is only used for images that need to be server accessible E. g. if part of the page’s processing involves changing the image file displayed Otherwise, use regular <img /> tag 9/17/2020 Wendi Jollymore, ACES 29

Other Controls Panel and Place. Holder System. Web. UI. Web. Controls. Panel System. Web. UI. Web. Controls. Place. Holder Containers used to hold other controls or elements Useful to show/hide groups of controls or organize controls on the page Panel controls are rendered as <div></div> tags, but Place. Holders aren’t rendered at all If Panel is empty, it will show as white space Empty Place. Holder won’t take up space 9/17/2020 Wendi Jollymore, ACES 30

Simple Event Handling Create a new project and add a Label control and a Button control. Label: ID: lbl. Time Text: I don’t know what time it is. Format any way you wish Button: ID: cmd. Show. Time Text: What Time Is It? 9/17/2020 Wendi Jollymore, ACES 31

Simple Event Handling To access the button’s event handler, double-click it in design view protected void cmd. Show. Time_Click(object sender, Event. Args e) { } The event handler method sender = object that fired event e = information about the event 9/17/2020 Wendi Jollymore, ACES 32

Simple Event Handling Inside the braces, add the statement: lbl. Time. Text = "The time is now " + Date. Time. Now. To. String(); This should be pretty straightforward… Try it out! Check the page source before and after clicking the button! 9/17/2020 Wendi Jollymore, ACES 33

Exercises/Homework Do the 5 exercises at the end of the ASP. NET/Introduction Notes We’ll take some of these up in the next class 9/17/2020 Wendi Jollymore, ACES 34