1. CSC 330 E-Commerce Teacher Ahmed Mumtaz Mustehsan Ahmed Mumtaz Mustehsan GM-IT CIIT Islamabad GM-IT CIIT Islamabad CIIT Virtual Campus, CIIT COMSATS Institute of Information TechnologyT2-Lecture-12

2. ASP.NET Part - III For Lecture Material/Slides Thanks to: www.w3schools.com

3. ASP.NET Part III WebPages (Continued) Introduction to SQL Thank You

4. Objectives WebPages Databases WebPages Helpers WebPages WebGrid WebPages Charts WebPages Email WebPages PHP WebPages Publish Introduction to SQL T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1-4

5. WebPages Databases

6. Displaying Data from Database With Web Pages, data can easily be displayed from a database. Connect to an existing database, or create a new database from scratch. The following example will demonstrate to connect to an existing SQL Server Compact database. T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1-6

7. Displaying Data from Database @{ var db = Database.Open("SmallBakery"); var query = "SELECT * FROM Product"; } Small Bakery Products Id Product Description Price.. T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1-7 @foreach(var row in db.Query(query)) { @row.Id @row.Name @row.Description @row.Price } In the "DemoWebPages" folder, create a new CSHTML file named "Products.cshtml". Replace the code in the file with the code from the example below:

8. Output of the above Example IdProductDescriptionPrice 1BreadBaked fresh every day2.99 2Strawberry Cake Made with organic strawberries 9.99 3Apple Pie Second only to your mom's pie 12.99 4Pecan Pie If you like pecans, this is for you 10.99 5Lemon Pie Made with the best lemons in the world 11.99 6CupcakesYour kids will love these9.99 T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1-8 Small Bakery Products

9. Example Explained The Database.Open(name) method will connect to a database in two steps: ◦ First, it searches the application's App_Data folder for a database that matches the name (Small bakery) parameter without the file-name extension. ◦ If no file is found, it looks for a "connection string" in the application's Web.config file. (A connection string contains information about how to connect to a database? It can include a file path, or the name of an SQL database, with full user name and password) This two-step search makes it possible to test the application with a local database, and run the application on a web host using a connection string. T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1-9

10. WebPages Helpers

11. ASP.NET Web Pages - Helpers Web Helpers greatly simplifies web development and common programming tasks. ASP.NET Helpers ASP.NET helpers are components that can be accessed by single lines of Razor code. You can build your own helpers using Razor syntax stored as.cshtml files, or use built-in ASP.NET helpers. T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 11

12. Razor helpers: The WebGrid Helper The WebGrid helper simplifies the way to display data: Automatically sets up an HTML table to display data Supports different options for formatting Supports paging (First, next, previous, last) through data Supports sorting by clicking on column headings T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 12

13. The Chart Helper The "Chart Helper" can display chart images of different types with many formatting options and labels. T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 13

14. The WebMail Helper The WebMail helper provides functions for sending email messages using SMTP (Simple Mail Transfer Protocol). T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 14

15. The WebImage Helper The WebImage helper provides functionality to manage and manipulate images in a web page. Keywords: flip, rotate, resize, watermark. T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 15

16. WebPages WebGrid

17. ASP.NET Web Pages - The WebGrid Helper WebGrid - One of many useful ASP.NET Web Helpers. We have already learnt to display database data by using razor code, and using the HTML markup. T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 17

18. ASP.NET Web Pages ( Displaying Data from Database previous Method) Database Example @{ var db = Database.Open("SmallBakery"); var selectQueryString = "SELECT * FROM Product ORDER BY Name"; } Small Bakery Products Id Product Description Price T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 18 @foreach(var row in db.Query(selectQueryString)) { @row.Id @row.Name @row.Description @row.Price }

19. Output of the above Example IdProductDescriptionPrice 1BreadBaked fresh every day2.99 2Strawberry Cake Made with organic strawberries 9.99 3Apple Pie Second only to your mom's pie 12.99 4Pecan Pie If you like pecans, this is for you 10.99 5Lemon Pie Made with the best lemons in the world 11.99 6CupcakesYour kids will love these9.99 T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 19 Small Bakery Products

20. Using The WebGrid Helper Using the WebGrid helper is an easier way to display data from Database. The WebGrid helper: ◦ Automatically sets up an HTML table to display data ◦ Supports different options for formatting ◦ Supports paging through data ◦ Supports Sorting by clicking on column headings T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 20

21. WebGrid Example @{ var db = Database.Open("SmallBakery") ; var selectQueryString = "SELECT * FROM Product ORDER BY Name"; var data = db.Query(selectQueryString); var grid = new WebGrid(data); } Displaying Data Using the WebGrid Helper Small Bakery Products @grid.GetHtml() T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 21

22. WebGrid Example - Output T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 22 Small Bakery Products IdNameDescriptionPrice 1Bread Baked fresh every day 2,99 3Pecan Pie If you like pecans, this is for you 12,99 2Strawberry Cake Made from organic strawberries 9,99 4Lemon Pie Made with the best lemons in the world 11,99 5Cupcakes Your kids will love these 7,99

23. The Chart Helper The "Chart Helper" can display chart images of different types with many formatting options and labels. It can create standard charts like area charts, bar charts, column charts, line charts, and pie charts, along with more specialized charts like stock charts. The data you display in a chart can be from an array, from a database, or from data in a file. T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 23

24. The Chart Helper – Chart from an Array Example: code needed to display a chart from an array of values: @{ var myChart = new Chart(width: 600, height: 400).AddTitle("Employees").AddSeries(chartType: "column", xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" }, yValues: new[] { "2", "6", "4", "5", "3" }).Write(); }Employee T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 24

25. The Chart Helper T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 25 new Chart creates a new chart object and sets its width and height the AddTitle method specifies the chart title the AddSeries method adds data to the chart the chartType parameter defines the type of chart the xValue parameter defines x-axis names the yValues parameter defines the y-axis values the Write() method displays the chart

26. WebPages Email

27. ASP.NET Web Pages The WebMail Helper The WebMail Helper makes it easy to send an email from a web application using SMTP (Simple Mail transfer Protocol). Scenario: Email Support To demonstrate the use of email, we will create an input page for support, let the user submit the page to another page, and send an email about the support problem. T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 27

28. First: Edit Your AppStart Page Add in the page called _AppStart.cshtml (already learnt) contain the following contents: _AppStart.cshtml @{ WebSecurity.InitializeDatabaseConnection("Users", "UserProfile", "UserId", "Email", true); } T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 28

29. First: Edit Your _AppStart Page Add the following entries: SmtpServer: The name the SMTP server that will be used to send the emails. SmtpPort: The port the server will use to send SMTP transactions (emails). EnableSsl: True, if the server should use SSL (Secure Socket Layer) encryption. False otherwise UserName: The name of the SMTP email account used to send the email. Password: The password of the SMTP email account. From: The email to appear in the from address (often the same as UserName). T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 29

30. First: Edit Your AppStart Page How to add the WebMail properties to AppStart page: _AppStart.cshtml @{ WebSecurity.InitializeDatabaseConnection("Users", "UserProfile", "UserId", "Email", true); WebMail.SmtpServer = "smtp.example.com"; WebMail.SmtpPort = 25; WebMail.EnableSsl = false; WebMail.UserName = "support@vcomsats.edu.pk"; WebMail.Password = “******************"; WebMail.From = “user@vcomsats.edu.pk"; } T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 30

31. Second: Create an Email Input Page Then create an input page, and name it Email_Input: Email_Input.cshtml Request for Assistance Username: Details about the problem: The purpose of the input page is to collect information, then submit the data to a new page that can send the information as an email. T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 31

32. Third: Create An Email Send Page Then create the page that will be used to send the email, and name it Email_Send: Email_Send.cshtml @{ // Read input var customerEmail = Request["customerEmail"]; var customerRequest = Request["customerRequest"]; try { // Send email WebMail.Send(to:" support@vcomsats.edu.pk ", subject: "Help request from - " + customerEmail, body: customerRequest ); } catch (Exception ex ) { @ex } } T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 32

33. WebPages Publish

34. ASP.NET Web Pages - Publishing the Website Publish Your Application Without Using WebMatrix An ASP.NET Web Pages application can be published to a remote server by using the Publish commands in WebMatrix (or Visual Studio). This function copies all your application files, cshtml pages, images, and all the required DLL files for Web Pages, for Razor, for Helpers, and for SQL Server Compact (if a database is used). T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 34

35. Publish Your Application Without Using WebMatrix To perform a web copy, you need to know how to include the right files, what DDL files to copy, and where store them. Follow these steps: 1. Use the Latest Version of ASP.NET Before you continue, make sure your hosting computer runs the latest version of ASP.NET (4.0 or 4.5). 2. Copy the Web Folders Copy your website (all folders and content) from your development computer to an application folder on your remote hosting computer (server). T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 35

36. Publish Your Application Without Using WebMatrix 3. The DLL Files Make sure the bin folder, on your remote hosting computer, contains the same dll files as on your development computer. After copying the bin folder, it should contain files like this: Microsoft.Web.Infrastructure.dll NuGet.Core.dll System.Web.Helpers.dll System.Web.Razor.dll System.Web.WebPages.Administration.dll System.Web.WebPages.Deployment.dll System.Web.WebPages.dll System.Web.WebPages.Razor.dll WebMatrix.Data.dll WebMatrix.WebData T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 36

37. Publish Your Application Without Using WebMatrix 4. Copy Your Data If your application contains data or a database. For instance an SQL Server Compact database (a.sdf file in App_Data folder), consider the following: Do you want to publish your test data to the remote server? Usually not. (We do testing locally before publishing) If you have test data on your development computer, it may overwrite production data on your remote hosting computer. If you have to copy an SQL database (.sdf file), you may delete everything in the database, and then copy the empty.sdf file from your development computer to the server. T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 37

38. The End ASP.NET T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 38

39. Introduction to SQL T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 39

40. What is SQL? SQL stands for Structured Query Language SQL lets you access and manipulate databases SQL is an ANSI (American National Standards Institute) standard T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 40

41. What Can SQL do? SQL can execute queries against a database SQL can retrieve data from a database SQL can insert records in a database SQL can update records in a database SQL can delete records from a database SQL can create new databases SQL can create new tables in a database SQL can create stored procedures in a database SQL can create views in a database SQL can set permissions on tables, procedures, and views T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 41

42. Using SQL in Your Web Site To build a web site that shows data from a database, you will need: An RDBMS database program (i.e. MS Access, SQL Server, MySQL) To use a server-side scripting language, like PHP or ASP To use SQL to get the data you want To use HTML / CSS T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 42

43. RDBMS RDBMS stands for Relational Database Management System. RDBMS is the basis for SQL, and for all modern database systems such as MS SQL Server, IBM DB2, Oracle, MySQL, and Microsoft Access. The data in RDBMS is stored in database objects called tables. A table is a collection of related data entries and it consists of columns and rows. T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 43

44. Database Table A database most often contains one or more tables. Each table is identified by a name (e.g. "Customers" or "Orders"). Tables contain records (rows) with data. In this Lecture we will use the sample database picked up from W3schools Tutorial. Below is a selection from the "Customers" table: T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 44 CustomerIDCustomerNameContactNameAddressCityPostalCodeCountry 1Alfreds FutterkisteMaria AndersObere Str. 57Berlin12209Germany 2 Ana Trujillo Emparedados y helados Ana Trujillo Avda. de la Constitución 2222 México D.F.05021Mexico 3 Antonio Moreno Taquería Antonio MorenoMataderos 2312México D.F.05023Mexico 4Around the HornThomas Hardy120 Hanover Sq.LondonWA1 1DPUK 5Berglunds snabbköpChristina BerglundBerguvsvägen 8LuleåS-958 22Sweden

45. SQL Statements Most of the actions you need to perform on a database are done with SQL statements. The following SQL statement selects all the records in the "Customers" table: Example SELECT * FROM Customers; Keep in Mind That... SQL is NOT case sensitive: select is the same as SELECT T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 45

46. The Most Important SQL Commands SELECT - extracts data from a database UPDATE - updates data in a database DELETE - deletes data from a database INSERT INTO - inserts new data into a database CREATE DATABASE - creates a new database ALTER DATABASE - modifies a database CREATE TABLE - creates a new table ALTER TABLE - modifies a table DROP TABLE - deletes a table CREATE INDEX - creates an index (search key) DROP INDEX - deletes an index T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 46

47. The SQL SELECT Statement The SELECT statement is used to select data from a database. The result is stored in a result table, called the result- set. SQL SELECT Syntax SELECT column_name,column_name FROM table_name; SELECT * FROM table_name; T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 47

48. Semicolon after SQL Statements? Some database systems require a semicolon at the end of each SQL statement. Semicolon is the standard way to separate each SQL statement in database systems that allow more than one SQL statement to be executed in the same call to the server. Use semicolon at the end of each SQL statement. T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 48

49. Demo Database Below is a selection from the "Customers" table:A sample database. T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 49 CustomerIDCustomerNameContactNameAddressCityPostalCodeCountry 1Alfreds FutterkisteMaria AndersObere Str. 57Berlin12209Germany 2 Ana Trujillo Emparedados y helados Ana Trujillo Avda. de la Constitución 2222 México D.F.05021Mexico 3 Antonio Moreno Taquería Antonio MorenoMataderos 2312México D.F.05023Mexico 4Around the HornThomas Hardy120 Hanover Sq.LondonWA1 1DPUK 5Berglunds snabbköpChristina BerglundBerguvsvägen 8LuleåS-958 22Sweden

50. SELECT Column Example The following SQL statement selects the "CustomerName" and "City" columns from the "Customers" table: Example SELECT CustomerName,City FROM Customers; SELECT * The following SQL statement selects all the columns from the "Customers" table: SELECT * FROM Customers; T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 50

51. The SQL SELECT DISTINCT Statement In a table, a column may contain many duplicate values; and sometimes you only want to list the different (distinct) values. The DISTINCT keyword can be used to return only distinct (different) values. SQL SELECT DISTINCT Syntax SELECT DISTINCT column_name,column_name FROM table_name; Or SELECT DISTINCT City FROM Customers; The above SQL statement selects only the distinct values from the "City" columns from the "Customers" table: T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 51

52. The SQL WHERE Clause The SQL WHERE Clause The WHERE clause is used to extract only those records that fulfill a specified criterion. SQL WHERE Syntax SELECT column_name,column_name FROM table_name WHERE column_name operator value; Example SELECT * FROM Customers WHERE Country='Mexico'; The above SQL statement selects all the customers from the country "Mexico", in the "Customers" table: T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 52

53. Text Fields vs. Numeric Fields SQL requires single quotes around text values (most database systems will also allow double quotes). However, numeric fields should not be enclosed in quotes: Example SELECT * FROM Customers WHERE CustomerID=1; T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 53

54. Operators in The WHERE Clause The following operators can be used in the WHERE clause: T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 54 OperatorDescription =Equal <> Not equal. Note: In some versions of SQL this operator may be written as != > Greater than < Less than >=Greater than or equal <=Less than or equal BETWEENBetween an inclusive range LIKESearch for a pattern INTo specify multiple possible values for a column

55. The SQL AND & OR Operators The AND operator displays a record if both the first condition AND the second condition are true. The OR operator displays a record if either the first condition OR the second condition is true. AND Operator Example SELECT * FROM Customers WHERE Country='Germany‘ AND City='Berlin'; The above SQL statement selects all customers from the country "Germany" AND the city "Berlin", in the "Customers" table: T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 55

56. OR Operator Example Example SELECT * FROM Customers WHERE City='Berlin‘ OR City='München'; The above SQL statement selects all customers from the city "Berlin" OR "München", in the "Customers" table: T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 56

57. Combining AND & OR You can also combine AND and OR (use parenthesis to form complex expressions). Example SELECT * FROM Customers WHERE Country='Germany' AND (City='Berlin' OR City='München'); The above SQL statement selects all customers from the country "Germany" AND the city must be equal to "Berlin" OR "München", in the "Customers" table: T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 57

58. The SQL ORDER BY Keyword The ORDER BY keyword is used to sort the result-set by one or more columns. The ORDER BY keyword sorts the records in ascending order by default. To sort the records in a descending order, you can use the DESC keyword. SQL ORDER BY Syntax SELECT column_name,column_name FROM table_name ORDER BY column_name,column_name ASC|DESC; Example: SELECT * FROM Customers ORDER BY Country; The above SQL statement selects all customers from the "Customers" table, sorted by the "Country" column: T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 58

59. ORDER BY DESC Example Example SELECT * FROM Customers ORDER BY Country DESC; The above SQL statement selects all customers from the "Customers" table, sorted DESCENDING by the "Country" column: ORDER BY Several Columns Example Example SELECT * FROM Customers ORDER BY Country,CustomerName; The above SQL statement selects all customers from the "Customers" table, sorted by the "Country" and the "CustomerName" column: T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 59

60. The SQL INSERT INTO Statement The INSERT INTO statement is used to insert new records in a table. SQL INSERT INTO Syntax It is possible to write the INSERT INTO statement in two forms. The first form does not specify the column names where the data will be inserted, only their values: INSERT INTO table_name VALUES (value1,value2,value3,...); The second form specifies both the column names and the values to be inserted: INSERT INTO table_name (column1,column2,column3,...) VALUES (value1,value2,value3,...); T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 60

61. INSERT INTO Example Assume we wish to insert a new row in the "Customers" table. We can use the following SQL statement: Example INSERT INTO Customers (CustomerName, ContactName, Address, City, PostalCode, Country) VALUES ('Cardinal','Tom B. Erichsen','Skagen 21','Stavanger','4006','Norway'); T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 61

62. Insert Data Only in Specified Columns It is also possible to only insert data in specific columns. The following SQL statement will insert a new row, but only insert data in the "CustomerName", "City", and "Country" columns (and the CustomerID field will of course also be updated automatically): Example INSERT INTO Customers (CustomerName, City, Country) VALUES ('Cardinal', 'Stavanger', 'Norway'); T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 62

63. The SQL UPDATE Statement The UPDATE statement is used to update existing records in a table. SQL UPDATE Syntax UPDATE table_name SET column1=value1,column2=value2,... WHERE some_column=some_value; SQL UPDATE Example Assume we wish to update the customer "Alfreds Futterkiste" with a new contact person and city. We use the following SQL statement: UPDATE Customers SET ContactName='Alfred Schmidt', City='Hamburg‘ WHERE CustomerName='Alfreds Futterkiste'; T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 63

64. Update Warning! Be careful when updating records. If we had omitted the WHERE clause, in the example above, like this: UPDATE Customers SET ContactName='Alfred Schmidt', City='Hamburg'; T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 64

65. The SQL DELETE Statement The DELETE statement is used to delete rows in a table. SQL DELETE Syntax DELETE FROM table_name WHERE some_column=some_value; SQL DELETE Example Assume we wish to delete the customer "Alfreds Futterkiste" from the "Customers" table. We use the following SQL statement: DELETE FROM Customers WHERE CustomerName='Alfreds Futterkiste' AND ContactName='Maria Anders'; T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 65

66. Delete All Data It is possible to delete all rows in a table without deleting the table. This means that the table structure, attributes, and indexes will be intact: DELETE FROM table_name; or DELETE * FROM table_name; Note: Be very careful when deleting records. You cannot undo this statement! T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 66

67. End ASP.NET Part III Introduction to SQL Thank You

68. Visual Studio Express 2012/2010 Visual Studio Express is a free version of Microsoft Visual Studio. Visual Studio Express is a development tool tailor made for Web Forms (and MVC). Visual Studio Express contains: ◦ MVC and Web Forms ◦ Drag-and-drop web controls and web components ◦ A web server language (Razor using VB or C#) ◦ A web server (IIS Express) ◦ A database server (SQL Server Compact) ◦ A full web development framework (ASP.NET) ◦ Vista or XP) T2-Lecture-12 Ahmed Mumtaz Mustehsan www.w3schools.com 1- 68