Web Developement Workshop (Oct 2009) Slides

1. Web Development BY : KARTIK : http://www.kar2905.wordpress.com PRATIK : http://pratik3d.blogspot.com SAURABH : [email protected]

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. HYPER TEXT MARKUP LANGAUGE

4. DEVELOPED BY : World Wide Web Consortium & WHATWG

5. Type code : TEXT

6. Extended from : SGML

7. Extended to : XHTML

8. Standard(s) : W3C HTML 4.01 W3C HTML 3.2

9. In short it is the language used to design Web Pages

10. Use any text editor

11. Gedit, Notepad++, Notepad,..

12. Save as .htm or .html extension

13. A tag is : Non-hierarchical keyword or term assigned to a piece of information

14. < > - Opening Tag

15. </ > - Closing Tag

16. The element content is everything between the start and the end tag ( <p>Hello</p> )

17. Some HTML elements have empty content( <br /> )

18. Most HTML elements can have attributes

19. Its not case sensitive eg <p> means the same as <P> . But W3C (?) recommends lower case

20. <html>

21. <head>

22. <title> My first web page </title>

23. </head>

24. <body>

25. <h1>Hello everyone </h1>

26. </body>

27. </html>

28. The <html> element defines the whole HTML document.

29. The element has a start tag <html> and an end tag </html>

30. The element content is another HTML element (the body)

31. The <head> element defines the head of the HTML document

32. The element has a start tag <head> and an end tag </head>

33. The element content is another HTML element (title of the webpage)

34. The <body> element defines the body of the HTML document

35. The element has a start tag <body> and an end tag </body>

36. The element content is another HTML element (a paragraph)

37. <p> This is a paragraph </p>

38. <h1>This is a heading </h1>

39. <h2 ,3 .. 6 > Various headings </h2,3..6>

40. < a href=“google.com”>This is a link </a>

41. <img src=“the source” width=“104” />

42. <br/> : is used to give a line break

43. <hr/> : is used to give a horizontal line

44.

45. <b> BOLD </b>

46. <i> ITALICS </i>

47. <big> Big Text </big>

48. This is<sub> subscript </sub> and <sup> superscript </sup>

49. <code>This is computer output</code>

50. <strong> BOLD </strong >

51. Many more tags .. http://www.w3schools.com/tags/default.asp

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="value"  Standard attributes :  class ,id , style ,title Attributes

53.  style="background-color:yellow"  style="font-size:10px"  style="font-family:Times"  style="text-align:center”  Examples :  <body style="background-color:yellow">  <p style="font-family:courier new; color:red; font-size:20px">  <a href=“url" style="background-color:red">Last Page</a> Style Attribute

54. <table border="1"> <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. UNORDERED LIST <ul> <li>Windows</li> <li>Linux</li> </ul> ORDERED LIST <ol> <li>Windows</li> <li>Linux</li> </ol> LIST Windows

56. Linux 1.Windows 2.Linux

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. The data is sent to the url specified through GET or POST as specified in the method attribute .

59. The data is processed by a server side script/page which acts upon the data (eg . Saves it to the database through MYSQL ) Where is the DATA?

60. SQL is a database computer language

61. MySQL is a relational database management system and is owned by SUN.

62. MySQL stands for My Structured Query Language.

63. So , WHY MySQL ???

64. The obvious answer :

65. MySQL is OPEN SOURCE ..

66. (GNUKHATA, National Internet Exchange of India (NIXI))

67. SQL stands for Structured Query Language

68. SQL lets you access and manipulate databases

69. SQL is an ANSI (American National Standards Institute) standard

70. Its not Case Sensitive

71. It is divided into two : DDL and DML

72. MySQL can add , delete,update , retrieve data / records from a database

73. Data Manipulation Language

74. The query and update commands form the DML part of SQL: SELECT - extracts data from a database

75. UPDATE - updates data in a database

76. DELETE - deletes data from a database

77. INSERT INTO - inserts new data into a database

78. Data Definition Language

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. CREATE DATABASE - creates a new database

80. ALTER DATABASE - modifies a database

81. CREATE TABLE - creates a new table

82. ALTER TABLE - modifies a table

83. DROP TABLE - deletes a table

84. CREATE INDEX - creates an index (search key)

85. DROP INDEX - deletes an index

86. The SELECT statement is used to select data from a database.

87. The result is stored in a result table, called the result-set.

88. Eg :

89. SELECT column_name(s) FROM table_name ;

90. USE ‘*’ in place of ‘column_name(s)’ to select all columns

91. Create a database student with table 'data'. 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. SELECT Name FROM data ; WHATS THE OUTPUT Name Kartik Saurabh Ankur

93. The DISTINCT keyword can be used to return only distinct (different) values.

94. Syntax :

95. SELECT DISTINCT column_name(s) FROM table_name ;

96. Eg :

97. SELECT DISTINCT City FROM data City Manipal Indore

98. The WHERE clause is used to extract only those records that fulfill a specified criterion.

99. Syntax :

100. SELECT column_name(s) FROM table_name WHERE column_name operator value ;

101. SELECT Email FROM data WHERE Phone_No=9008420482; WHATS THE OUTPUT Email [email_address]

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. The AND operator displays a record if both the first condition and the second condition is true.

104. The OR operator displays a record if either the first condition or the second condition is true.

105. The ORDER BY keyword is used to sort the result-set by a specified column.

106. The ORDER BY keyword sort the records in ascending order by default.

107. If you want to sort the records in a descending order, you can use the DESC keyword.

108. Syntax :

109. SELECT column_name(s) FROM table_name ORDER BY column_name(s) ASC|DESC

110. The INSERT INTO statement is used to insert a new row in a table.

111. Syntax : Two Forms

112. The first form doesn't 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,...)

113. INSERT INTO data VALUES (‘Pratik’, ‘[email protected] ’,’Mumbai’,999999) ; Name Email City Phone_No. Kartik [email_address] Manipal 9008420482 Saurabh [email_address] Manipal Ankur [email_address] Indore Prateek [email_address] Mumbai 999999

114. The UPDATE statement is used to update existing records in a table.

115. Syntax :

116. UPDATE table_name SET column1=value, column2=value2,... WHERE some_column=some_value

117. Note : WHERE clause specifies which record or records that should be updated.

118. WARNING : If you omit the WHERE clause, all records will be updated!

119. UPDATE data SET Phone_No=9810098100 WHERE Name=‘ankur’; 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. The DELETE statement is used to delete rows in a table.

121. Syntax :

122. DELETE FROM table_name WHERE some_column=some_value

123. DELETE ALL ROWS : DELETE FROM table_name

124. DELETE * FROM table_name

125. DELETE FROM data WHERE Name=‘Saurabh’; Name Email City Phone_No Kartik [email_address] Manipal 9008420482 Ankur [email_address] Indore 9810098100 Prateek [email_address] Mumbai 999999

126. Overview Basic introduction to PHP

127. The basic syntaxes

128. Arrays and strings

129. Flow of control

130. Functions

131. Forms and passing information between pages

132. PHP stands for HYPERTEXT PREPROCESSOR .

133. It is an open-source, server-side, HTML-embedded web-scripting language used in most of the web servers of the world.

134. Developed in the early 90s. Has now been updated upto Version 5

135. Support for major platforms and network protocols. What is PHP ? Pratik Anand

136. What it can do? 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......

137. Basic PHP Syntax A simple Hello World program <?php echo “Hello World”; start of php code ?> end of php code termination

138. Basic PHP Syntax Syntax like C/C++

139. Insensitive to whitespaces

140. Case -sensitive

141. Expression is made up of tokens (?)

142. Precedence, associativity, evaluation similar to C

143. No need of variable declaration

144. Both procedural/object-oriented programming

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. PHP Data types As said earlier, they are not explicitly defined. Integers, float, string, boolean all are supported.

147. Strings can be defined as single quotes(') or double quotes (“).

148. echo “hello”; and echo 'hello'; both are correct.

149. Interconversion of variables is also easy.

150. $num_var=5; $num_var=”I am back”; Obviously, it takes last defined value. Basic PHP Syntax

151. Arrays

152. Arrays What is an array ? $person = array("Dave", "Adam", "Ralph"); 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. Associative arrays Arrays can also be associated in values implicitly. These are called associative arrays. $food = array("Monday" => "Apples", "Tuesday" => "Bananas"); $myArray["Monday"] = "Apples"; $myArray["Tuesday"] = "Bananas"; Arrays

154. Flow of control

155. Flow of control If-else 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. Flow of control Switch 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. Looping!

158. Looping While

159. While continues to loop a statement till a given condition is satisfied. while(condition) { statement; } ( PS: Write a code to demonstrate while looping)

160. Looping Do-while 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. Looping For 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. Functions

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

165. <form> First name: <input type="text" name="firstname" /> <br /> Last name: <input type="text" name="lastname" /> </form> Forms First name: Last name:

166. <form> <input type="radio" name=“Fedora" value=“Fedora" /> Fedora <br /> <input type="radio" name=" Ubuntu" value=“Ubuntu“/> Ubuntu </form> Forms:Radio Buttons Fedora

167. Ubuntu

168. method : ”GET” or “POST” . Defines the way to send data from a form to a url

169. Action : “url” . Defines the name of the file to send the content to .

170. Eg : <form name="input" action=“form_process.php" method="get"> Attributes of FORM

171. <form> I use Fedora: <input type="checkbox" name="vehicle" value="Fedora" /> <br /> I use Ubuntu: <input type="checkbox" name="vehicle" value="Ubuntu" /> <br /> I dont use Windows: <input type="checkbox" name="vehicle" value="Windows" /> </form> Checkboxes

172. Form Handling

173. Form Handling GET <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. Form Handling POST <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. 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. ASSIGNMENT

177. Getting Started: PHP-MySQL Create a Connection to a MySQL Database

178. mysql_connect(servername,username,password);

179. Eg; <?php

180. $con = mysql_connect("localhost","peter","abc123");

181. if (!$con)

182. {

183. die('Could not connect: ' . mysql_error());

184. }

185. // some code

186. ?>

187. Closing the Connection mysql_close($con); $sql=”CREATE DATABASE database_name”; mysql_select_db("my_db", $con);

188. $sql = "CREATE TABLE Persons

189. (

190. personID int NOT NULL AUTO_INCREMENT,

191. PRIMARY KEY(personID),

192. FirstName varchar(15),

193. LastName varchar(15),

194. Age int

195. )";

196. mysql_query($sql);

197. All other MySQL commands can be executed like :

198. $sql= The command here

199. $mysql_query($sql);

200. Other Commands $sql= MySQL command;

201. $result=mysql_query($sql);

202. $row=mysql_fetch_array($result);

203. $num=mysql_num_rows($result);

204. SESSIONS AND COOKIES Used to identify a user

205. Cookies are saved in the client's computer

206. Sessions are destroyed once the browser is closed

207. COOKIES setcookie(name, value, expire, path, domain);

208. <?php

209. setcookie("user", "Alex Porter", time()+3600);

210. ?>

211. echo $_COOKIE["user"];

212. if (isset($_COOKIE["user"]))

213. setcookie("user", "", time()-3600);

214. SESSIONS session_start();

215. $_SESSION['views']=1;

216. if(isset($_SESSION['views']))

217. { echo $_SESSION['views'] ; }

218. unset($_SESSION['views']);

219. session_destroy();

220. LOGIN SCRIPT DEMONSTRATION ....from scratch

Web Developement Workshop (Oct 2009) Slides

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Web Developement Workshop (Oct 2009) Slides (20)

Recently uploaded (20)

Web Developement Workshop (Oct 2009) Slides