Web Developement Workshop (Oct 2009) Slides

1,644 views
1,573 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,644
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
103
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web Developement Workshop (Oct 2009) Slides

  1. 1. Web Development BY : KARTIK : http://www.kar2905.wordpress.com PRATIK : http://pratik3d.blogspot.com SAURABH : saurabh-suman@hotmail.com
  2. 2. <html> <body> <ul> <li>HTML ( A Fast run through) </li> <li>MYSQL </li> <li>PHP </li> <li>Login Script Demonstration </li> </ul> </body> </html>
  3. 3. <ul><li>HYPER TEXT MARKUP LANGAUGE
  4. 4. DEVELOPED BY : World Wide Web Consortium & WHATWG
  5. 5. Type code : TEXT
  6. 6. Extended from : SGML
  7. 7. Extended to : XHTML
  8. 8. Standard(s) : W3C HTML 4.01 W3C HTML 3.2
  9. 9. In short it is the language used to design Web Pages </li></ul>
  10. 10. <ul><li>Use any text editor
  11. 11. Gedit, Notepad++, Notepad,..
  12. 12. Save as .htm or .html extension </li></ul>
  13. 13. <ul><li>A tag is : Non-hierarchical keyword or term assigned to a piece of information
  14. 14. < > - Opening Tag
  15. 15. </ > - Closing Tag </li></ul>
  16. 16. <ul><li>The element content is everything between the start and the end tag ( <p>Hello</p> )
  17. 17. Some HTML elements have empty content( <br /> )
  18. 18. Most HTML elements can have attributes
  19. 19. Its not case sensitive eg <p> means the same as <P> . But W3C (?) recommends lower case </li></ul>
  20. 20. <ul><li><html>
  21. 21. <head>
  22. 22. <title> My first web page </title>
  23. 23. </head>
  24. 24. <body>
  25. 25. <h1>Hello everyone </h1>
  26. 26. </body>
  27. 27. </html> </li></ul>
  28. 28. <ul><li>The <html> element defines the whole HTML document.
  29. 29. The element has a start tag <html> and an end tag </html>
  30. 30. The element content is another HTML element (the body) </li></ul>
  31. 31. <ul><li>The <head> element defines the head of the HTML document
  32. 32. The element has a start tag <head> and an end tag </head>
  33. 33. The element content is another HTML element (title of the webpage) </li></ul>
  34. 34. <ul><li>The <body> element defines the body of the HTML document
  35. 35. The element has a start tag <body> and an end tag </body>
  36. 36. The element content is another HTML element (a paragraph) </li></ul>
  37. 37. <ul><li><p> This is a paragraph </p>
  38. 38. <h1>This is a heading </h1>
  39. 39. <h2 ,3 .. 6 > Various headings </h2,3..6>
  40. 40. < a href=“google.com”>This is a link </a>
  41. 41. <img src=“the source” width=“104” />
  42. 42. <br/> : is used to give a line break
  43. 43. <hr/> : is used to give a horizontal line
  44. 44. <!-- this is a comment --> </li></ul>
  45. 45. <ul><li><b> BOLD </b>
  46. 46. <i> ITALICS </i>
  47. 47. <big> Big Text </big>
  48. 48. This is<sub> subscript </sub> and <sup> superscript </sup>
  49. 49. <code>This is computer output</code>
  50. 50. <strong> BOLD </strong >
  51. 51. Many more tags .. http://www.w3schools.com/tags/default.asp </li></ul>
  52. 52.  HTML elements can have attributes  Attributes provide additional information about the element  Attributes are always specified in the start tag  Attributes come in name/value pairs like: name=&quot;value&quot;  Standard attributes :  class ,id , style ,title Attributes
  53. 53.  style=&quot;background-color:yellow&quot;  style=&quot;font-size:10px&quot;  style=&quot;font-family:Times&quot;  style=&quot;text-align:center”  Examples :  <body style=&quot;background-color:yellow&quot;>  <p style=&quot;font-family:courier new; color:red; font-size:20px&quot;>  <a href=“url&quot; style=&quot;background-color:red&quot;>Last Page</a> Style Attribute
  54. 54. <table border=&quot;1&quot;> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> Tables
  55. 55. UNORDERED LIST <ul> <li>Windows</li> <li>Linux</li> </ul> ORDERED LIST <ol> <li>Windows</li> <li>Linux</li> </ol> LIST <ul><li>Windows
  56. 56. Linux </li></ul><ul>1.Windows 2.Linux </ul>
  57. 57. DEFINITION LIST <dl> <dt>Windows</dt> <dd>Vista</dd> <dt>Linux</dt> <dd>Fedora</dd> </dl> What it can do? Windows Vista Linux Fedora
  58. 58. <ul><li>The data is sent to the url specified through GET or POST as specified in the method attribute .
  59. 59. The data is processed by a server side script/page which acts upon the data (eg . Saves it to the database through MYSQL ) </li></ul>Where is the DATA?
  60. 60. <ul><li>SQL is a database computer language
  61. 61. MySQL is a relational database management system and is owned by SUN.
  62. 62. MySQL stands for My Structured Query Language.
  63. 63. So , WHY MySQL ???
  64. 64. The obvious answer :
  65. 65. MySQL is OPEN SOURCE ..
  66. 66. (GNUKHATA, National Internet Exchange of India (NIXI)) </li></ul>
  67. 67. <ul><li>SQL stands for Structured Query Language
  68. 68. SQL lets you access and manipulate databases
  69. 69. SQL is an ANSI (American National Standards Institute) standard
  70. 70. Its not Case Sensitive
  71. 71. It is divided into two : DDL and DML </li></ul>
  72. 72. MySQL can add , delete,update , retrieve data / records from a database
  73. 73. <ul><li>Data Manipulation Language
  74. 74. The query and update commands form the DML part of SQL: </li><ul><li>SELECT - extracts data from a database
  75. 75. UPDATE - updates data in a database
  76. 76. DELETE - deletes data from a database
  77. 77. INSERT INTO - inserts new data into a database </li></ul></ul>
  78. 78. <ul><li>Data Definition Language
  79. 79. The DDL part of SQL permits database tables to be created or deleted. It also define indexes (keys), specify links between tables, and impose constraints between tables. </li><ul><li>CREATE DATABASE - creates a new database
  80. 80. ALTER DATABASE - modifies a database
  81. 81. CREATE TABLE - creates a new table
  82. 82. ALTER TABLE - modifies a table
  83. 83. DROP TABLE - deletes a table
  84. 84. CREATE INDEX - creates an index (search key)
  85. 85. DROP INDEX - deletes an index </li></ul></ul>
  86. 86. <ul><li>The SELECT statement is used to select data from a database.
  87. 87. The result is stored in a result table, called the result-set.
  88. 88. Eg :
  89. 89. SELECT column_name(s) FROM table_name ;
  90. 90. USE ‘*’ in place of ‘column_name(s)’ to select all columns </li></ul>
  91. 91. <ul><li>Create a database student with table 'data'. </li></ul>create database student; Use student; Create table data(name varchar(20) NOT NULL,email varchar(20),Place varchar (20),Number int(10)); Name Email City Phone_No Kartik [email_address] Manipal 9008420482 Saurabh [email_address] Manipal Ankur [email_address] Indore
  92. 92. <ul><li>SELECT Name FROM data ; </li></ul>WHATS THE OUTPUT Name Kartik Saurabh Ankur
  93. 93. <ul><li>The DISTINCT keyword can be used to return only distinct (different) values.
  94. 94. Syntax :
  95. 95. SELECT DISTINCT column_name(s) FROM table_name ;
  96. 96. Eg :
  97. 97. SELECT DISTINCT City FROM data </li></ul>City Manipal Indore
  98. 98. <ul><li>The WHERE clause is used to extract only those records that fulfill a specified criterion.
  99. 99. Syntax :
  100. 100. SELECT column_name(s) FROM table_name WHERE column_name operator value ; </li></ul>
  101. 101. <ul><li>SELECT Email FROM data WHERE Phone_No=9008420482; </li></ul> WHATS THE OUTPUT Email [email_address]
  102. 102. Operator Description = Equal <> Not equal > Greater than < Less than >= Greater than or equal <= Less than or equal BETWEEN Between an inclusive range LIKE Search for a pattern IN If you know the exact value you want to return for at least one of the columns
  103. 103. <ul><li>The AND operator displays a record if both the first condition and the second condition is true.
  104. 104. The OR operator displays a record if either the first condition or the second condition is true. </li></ul>
  105. 105. <ul><li>The ORDER BY keyword is used to sort the result-set by a specified column.
  106. 106. The ORDER BY keyword sort the records in ascending order by default.
  107. 107. If you want to sort the records in a descending order, you can use the DESC keyword.
  108. 108. Syntax :
  109. 109. SELECT column_name(s) FROM table_name ORDER BY column_name(s) ASC|DESC </li></ul>
  110. 110. <ul><li>The INSERT INTO statement is used to insert a new row in a table.
  111. 111. Syntax : Two Forms
  112. 112. The first form doesn't specify the column names where the data will be inserted, only their values: </li><ul><li>INSERT INTO table_name VALUES (value1, value2, value3,...) </li></ul><li>The second form specifies both the column names and the values to be inserted: </li><ul><li>INSERT INTO table_name (column1, column2, column3,...) VALUES (value1, value2, value3,...) </li></ul></ul>
  113. 113. <ul><ul><li>INSERT INTO data VALUES (‘Pratik’, ‘pratik.preet@gmail.com ’,’Mumbai’,999999) ; </li></ul></ul>Name Email City Phone_No. Kartik [email_address] Manipal 9008420482 Saurabh [email_address] Manipal Ankur [email_address] Indore Prateek [email_address] Mumbai 999999
  114. 114. <ul><li>The UPDATE statement is used to update existing records in a table.
  115. 115. Syntax :
  116. 116. UPDATE table_name SET column1=value, column2=value2,... WHERE some_column=some_value
  117. 117. Note : WHERE clause specifies which record or records that should be updated.
  118. 118. WARNING : If you omit the WHERE clause, all records will be updated! </li></ul>
  119. 119. <ul><li>UPDATE data SET Phone_No=9810098100 WHERE Name=‘ankur’; </li></ul>Name Email City Phone_No Kartik [email_address] Manipal 9008420482 Saurabh [email_address] Manipal Ankur [email_address] Indore 9810098100 Prateek [email_address] Mumbai 999999
  120. 120. <ul><li>The DELETE statement is used to delete rows in a table.
  121. 121. Syntax :
  122. 122. DELETE FROM table_name WHERE some_column=some_value
  123. 123. DELETE ALL ROWS : </li><ul><li>DELETE FROM table_name
  124. 124. DELETE * FROM table_name </li></ul></ul>
  125. 125. <ul><li>DELETE FROM data WHERE Name=‘Saurabh’; </li></ul>Name Email City Phone_No Kartik [email_address] Manipal 9008420482 Ankur [email_address] Indore 9810098100 Prateek [email_address] Mumbai 999999
  126. 126. Overview <ul><li>Basic introduction to PHP
  127. 127. The basic syntaxes
  128. 128. Arrays and strings
  129. 129. Flow of control
  130. 130. Functions
  131. 131. Forms and passing information between pages </li></ul>
  132. 132. <ul><li>PHP stands for HYPERTEXT PREPROCESSOR .
  133. 133. It is an open-source, server-side, HTML-embedded web-scripting language used in most of the web servers of the world.
  134. 134. Developed in the early 90s. Has now been updated upto Version 5
  135. 135. Support for major platforms and network protocols. </li></ul>What is PHP ? Pratik Anand
  136. 136. What it can do? <ul>Though the areas of its application are infinite, the operations : • Collect form data, • Generate dynamic page content, • Send and receive cookies, • Maintain database contents. and much more...... </ul>
  137. 137. Basic PHP Syntax <ul>A simple Hello World program </ul><?php echo “Hello World”; start of php code ?> end of php code termination
  138. 138. Basic PHP Syntax <ul><li>Syntax like C/C++
  139. 139. Insensitive to whitespaces
  140. 140. Case -sensitive
  141. 141. Expression is made up of tokens (?)
  142. 142. Precedence, associativity, evaluation similar to C
  143. 143. No need of variable declaration
  144. 144. Both procedural/object-oriented programming </li></ul>
  145. 145. Basic PHP Syntax Comments // --> used for single line commenting /*.....*/ --> multi-line commenting Variables $var ---- is the way of naming variable No need of declaration. Is declared and assigned as soon as we use it in code
  146. 146. PHP Data types As said earlier, they are not explicitly defined. <ul><li>Integers, float, string, boolean all are supported.
  147. 147. Strings can be defined as single quotes(') or double quotes (“).
  148. 148. echo “hello”; and echo 'hello'; both are correct.
  149. 149. Interconversion of variables is also easy.
  150. 150. $num_var=5; $num_var=”I am back”; Obviously, it takes last defined value. </li></ul>Basic PHP Syntax
  151. 151. Arrays
  152. 152. Arrays What is an array ? $person = array(&quot;Dave&quot;, &quot;Adam&quot;, &quot;Ralph&quot;); Assingning values, $person[“Dave”] = ”Mumbai”; So, on echo-ing we get output as Mumbai . echo $person[“Dave”]; PS: Ask public , defn of array and describe arrays on blackboard
  153. 153. Associative arrays Arrays can also be associated in values implicitly. These are called associative arrays. $food = array(&quot;Monday&quot; => &quot;Apples&quot;, &quot;Tuesday&quot; => &quot;Bananas&quot;); $myArray[&quot;Monday&quot;] = &quot;Apples&quot;; $myArray[&quot;Tuesday&quot;] = &quot;Bananas&quot;; Arrays
  154. 154. Flow of control
  155. 155. Flow of control <ul><li>If-else </li></ul>The syntax is if (test) statement-1 else Statement-2 (PS: 1.explannation of the functioning to be given to public 2. give ideas of cascading and nesting in quick way)
  156. 156. Flow of control <ul><li>Switch </li></ul>Switch statements are used to handle multiple optional statements. switch(expression) { case value1: statement1; Statement2; break; Case value2:................... Break; default: default-statement; } (PS: discuss break and continue also)
  157. 157. Looping!
  158. 158. Looping <ul><li>While
  159. 159. While continues to loop a statement till a given condition is satisfied. </li></ul>while(condition) { statement; } ( PS: Write a code to demonstrate while looping)
  160. 160. Looping <ul><li>Do-while </li></ul>The do-while construct is similar to while except that it executes the statement atleast once even if the condition is not satisfied. do { Statement; } while (expression); (PS: modify the earlier while example to demonstrate do-while) notice the ; here
  161. 161. Looping <ul><li>For </li></ul>Similar to while , but iteration is provided in the loop condition itself. for (initial-expression; termination-check; loop-end-expression) { statement; } ( PS: show a proper for loop example ,infinite loop and also for loop in string array )
  162. 162. Functions
  163. 163. Functions Functions are snippets of code which are used can be called anywhere in the program. Users can define their functions as they do in C. Apart from that , PHP has got a bunch of in-built functions for various tasks. (In short, making life easier for web developers!)
  164. 164. Forms
  165. 165. <form> First name: <input type=&quot;text&quot; name=&quot;firstname&quot; /> <br /> Last name: <input type=&quot;text&quot; name=&quot;lastname&quot; /> </form> Forms First name: Last name:
  166. 166. <form> <input type=&quot;radio&quot; name=“Fedora&quot; value=“Fedora&quot; /> Fedora <br /> <input type=&quot;radio&quot; name=&quot; Ubuntu&quot; value=“Ubuntu“/> Ubuntu </form> Forms:Radio Buttons <ul><li>Fedora
  167. 167. Ubuntu </li></ul>
  168. 168. <ul><li>method : ”GET” or “POST” . Defines the way to send data from a form to a url
  169. 169. Action : “url” . Defines the name of the file to send the content to .
  170. 170. Eg : <form name=&quot;input&quot; action=“form_process.php&quot; method=&quot;get&quot;> </li></ul>Attributes of FORM
  171. 171. <form> I use Fedora: <input type=&quot;checkbox&quot; name=&quot;vehicle&quot; value=&quot;Fedora&quot; /> <br /> I use Ubuntu: <input type=&quot;checkbox&quot; name=&quot;vehicle&quot; value=&quot;Ubuntu&quot; /> <br /> I dont use Windows: <input type=&quot;checkbox&quot; name=&quot;vehicle&quot; value=&quot;Windows&quot; /> </form> Checkboxes
  172. 172. Form Handling
  173. 173. Form Handling <ul><li>GET </li></ul><form method=' GET ' action='form1.php'> What's your name?<BR> <input type='text' name='txt1' value='Enter'> <input type='submit' name='submit' value='Submit'> </form> Address bar will be like this : http://localhost/form1.php?txt1=Enter&submit=Submit PS: Will have to teach about forms and input types first like submit, radio button etc Pratik Anand
  174. 174. Form Handling <ul><li>POST </li></ul><form method=' GET ' action='form1.php'> What's your name?<BR> <input type='text' name='txt1' value='Enter'> <input type='submit' name='submit' value='Submit'> </form> Address bar will be like this (notice no data is visible) : http://localhost/form1.php
  175. 175. Form Handling To access GET and POST values in the php page, use variable-array $_GET or $_POST respectively. e.g. <? php $name=$_GET['txt1']; echo $name; ?> name of textbox
  176. 176. <ul>ASSIGNMENT </ul>
  177. 177. Getting Started: PHP-MySQL <ul><li>Create a Connection to a MySQL Database
  178. 178. mysql_connect(servername,username,password);
  179. 179. Eg; <?php
  180. 180. $con = mysql_connect(&quot;localhost&quot;,&quot;peter&quot;,&quot;abc123&quot;);
  181. 181. if (!$con)
  182. 182. {
  183. 183. die('Could not connect: ' . mysql_error());
  184. 184. }
  185. 185. // some code
  186. 186. ?> </li></ul>
  187. 187. Closing the Connection <ul>mysql_close($con); $sql=”CREATE DATABASE database_name”; mysql_select_db(&quot;my_db&quot;, $con); </ul>
  188. 188. <ul><li>$sql = &quot;CREATE TABLE Persons
  189. 189. (
  190. 190. personID int NOT NULL AUTO_INCREMENT,
  191. 191. PRIMARY KEY(personID),
  192. 192. FirstName varchar(15),
  193. 193. LastName varchar(15),
  194. 194. Age int
  195. 195. )&quot;;
  196. 196. mysql_query($sql); </li></ul>
  197. 197. <ul><li>All other MySQL commands can be executed like :
  198. 198. $sql= The command here
  199. 199. $mysql_query($sql); </li></ul>
  200. 200. Other Commands <ul><li>$sql= MySQL command;
  201. 201. $result=mysql_query($sql);
  202. 202. $row=mysql_fetch_array($result);
  203. 203. $num=mysql_num_rows($result); </li></ul>
  204. 204. SESSIONS AND COOKIES <ul><li>Used to identify a user
  205. 205. Cookies are saved in the client's computer
  206. 206. Sessions are destroyed once the browser is closed </li></ul>
  207. 207. COOKIES <ul><li>setcookie(name, value, expire, path, domain);
  208. 208. <?php
  209. 209. setcookie(&quot;user&quot;, &quot;Alex Porter&quot;, time()+3600);
  210. 210. ?>
  211. 211. echo $_COOKIE[&quot;user&quot;];
  212. 212. if (isset($_COOKIE[&quot;user&quot;]))
  213. 213. setcookie(&quot;user&quot;, &quot;&quot;, time()-3600); </li></ul>
  214. 214. SESSIONS <ul><li>session_start();
  215. 215. $_SESSION['views']=1;
  216. 216. if(isset($_SESSION['views']))
  217. 217. { echo $_SESSION['views'] ; }
  218. 218. unset($_SESSION['views']);
  219. 219. session_destroy(); </li></ul>
  220. 220. <ul>LOGIN SCRIPT DEMONSTRATION ....from scratch </ul>

×