Web Developement Workshop (Oct 2009) Slides

Web Development BY : KARTIK : http://www.kar2905.wordpress.com PRATIK : http://pratik3d.blogspot.com SAURABH : saurabh-suman@hotmail.com

<html> <body> <ul> <li>HTML ( A Fast run through) </li> <li>MYSQL </li> <li>PHP </li> <li>Login Script Demonstration </li> </ul> </body> </html>

HYPER TEXT MARKUP LANGAUGE
DEVELOPED BY : World Wide Web Consortium & WHATWG
Type code : TEXT
Extended from : SGML
Extended to : XHTML
Standard(s) : W3C HTML 4.01 W3C HTML 3.2
In short it is the language used to design Web Pages

Use any text editor
Gedit, Notepad++, Notepad,..
Save as .htm or .html extension

A tag is : Non-hierarchical keyword or term assigned to a piece of information
< > - Opening Tag
</ > - Closing Tag

The element content is everything between the start and the end tag ( <p>Hello</p> )
Some HTML elements have empty content( <br /> )
Most HTML elements can have attributes
Its not case sensitive eg <p> means the same as <P> . But W3C (?) recommends lower case

<html>
<head>
<title> My first web page </title>
</head>
<body>
<h1>Hello everyone </h1>
</body>
</html>

The <html> element defines the whole HTML document.
The element has a start tag <html> and an end tag </html>
The element content is another HTML element (the body)

The <head> element defines the head of the HTML document
The element has a start tag <head> and an end tag </head>
The element content is another HTML element (title of the webpage)

The <body> element defines the body of the HTML document
The element has a start tag <body> and an end tag </body>
The element content is another HTML element (a paragraph)

<p> This is a paragraph </p>
<h1>This is a heading </h1>
<h2 ,3 .. 6 > Various headings </h2,3..6>
< a href=“google.com”>This is a link </a>
<img src=“the source” width=“104” />
<br/> : is used to give a line break
<hr/> : is used to give a horizontal line

<b> BOLD </b>
<i> ITALICS </i>
<big> Big Text </big>
This is<sub> subscript </sub> and <sup> superscript </sup>
<code>This is computer output</code>
<strong> BOLD </strong >
Many more tags .. http://www.w3schools.com/tags/default.asp

 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

 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

<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

UNORDERED LIST <ul> <li>Windows</li> <li>Linux</li> </ul> ORDERED LIST <ol> <li>Windows</li> <li>Linux</li> </ol> LIST

Windows
Linux

1.Windows 2.Linux

DEFINITION LIST <dl> <dt>Windows</dt> <dd>Vista</dd> <dt>Linux</dt> <dd>Fedora</dd> </dl> What it can do? Windows Vista Linux Fedora

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

SQL is a database computer language
MySQL is a relational database management system and is owned by SUN.
MySQL stands for My Structured Query Language.
So , WHY MySQL ???
The obvious answer :
MySQL is OPEN SOURCE ..
(GNUKHATA, National Internet Exchange of India (NIXI))

SQL stands for Structured Query Language
SQL lets you access and manipulate databases
SQL is an ANSI (American National Standards Institute) standard
Its not Case Sensitive
It is divided into two : DDL and DML

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

Data Manipulation Language
The query and update commands form the DML part of SQL:

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

Data Definition Language
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
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

The SELECT statement is used to select data from a database.
The result is stored in a result table, called the result-set.
Eg :
SELECT column_name(s) FROM table_name ;
USE ‘*’ in place of ‘column_name(s)’ to select all columns

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

SELECT Name FROM data ;

WHATS THE OUTPUT Name Kartik Saurabh Ankur

The DISTINCT keyword can be used to return only distinct (different) values.
Syntax :
SELECT DISTINCT column_name(s) FROM table_name ;
Eg :
SELECT DISTINCT City FROM data

City Manipal Indore

The WHERE clause is used to extract only those records that fulfill a specified criterion.
Syntax :
SELECT column_name(s) FROM table_name WHERE column_name operator value ;

SELECT Email FROM data WHERE Phone_No=9008420482;

WHATS THE OUTPUT Email [email_address]

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

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

The ORDER BY keyword is used to sort the result-set by a specified column.
The ORDER BY keyword sort the records in ascending order by default.
If you want to sort the records in a descending order, you can use the DESC keyword.
Syntax :
SELECT column_name(s) FROM table_name ORDER BY column_name(s) ASC|DESC

The INSERT INTO statement is used to insert a new row in a table.
Syntax : Two Forms
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,...)

INSERT INTO data VALUES (‘Pratik’, ‘pratik.preet@gmail.com ’,’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

The UPDATE statement is used to update existing records in a table.
Syntax :
UPDATE table_name SET column1=value, column2=value2,... WHERE some_column=some_value
Note : WHERE clause specifies which record or records that should be updated.
WARNING : If you omit the WHERE clause, all records will be updated!

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

The DELETE statement is used to delete rows in a table.
Syntax :
DELETE FROM table_name WHERE some_column=some_value
DELETE ALL ROWS :

DELETE FROM table_name
DELETE * FROM table_name

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

Overview

Basic introduction to PHP
The basic syntaxes
Arrays and strings
Flow of control
Functions
Forms and passing information between pages

PHP stands for HYPERTEXT PREPROCESSOR .
It is an open-source, server-side, HTML-embedded web-scripting language used in most of the web servers of the world.
Developed in the early 90s. Has now been updated upto Version 5
Support for major platforms and network protocols.

What is PHP ? Pratik Anand

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

Basic PHP Syntax

A simple Hello World program <?php echo “Hello World”; start of php code ?> end of php code termination

Basic PHP Syntax

Syntax like C/C++
Insensitive to whitespaces
Case -sensitive
Expression is made up of tokens (?)
Precedence, associativity, evaluation similar to C
No need of variable declaration
Both procedural/object-oriented programming

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

PHP Data types As said earlier, they are not explicitly defined.

Integers, float, string, boolean all are supported.
Strings can be defined as single quotes(') or double quotes (“).
echo “hello”; and echo 'hello'; both are correct.
Interconversion of variables is also easy.
$num_var=5; $num_var=”I am back”; Obviously, it takes last defined value.

Basic PHP Syntax

Arrays

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

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

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)

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)

Looping!

Looping

While
While continues to loop a statement till a given condition is satisfied.

while(condition) { statement; } ( PS: Write a code to demonstrate while looping)

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

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 )

Functions

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!)

Forms

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

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

Fedora
Ubuntu

method : ”GET” or “POST” . Defines the way to send data from a form to a url
Action : “url” . Defines the name of the file to send the content to .
Eg : <form name="input" action=“form_process.php" method="get">

Attributes of FORM

<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

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

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

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

ASSIGNMENT

Getting Started: PHP-MySQL