Web Training 101
advertisement
CSE3310: Web training
A JumpStart for Project
Outline
Introduction
to Website
development
Web
Development
Languages
How to build
simple Pages
in
PHP
Introduction
to Adobe
Dreamweaver
How to build
simple Pages
in
ASP.net
Introduction to Website development
Static Vs Dynamic
• Web pages that are only updated based on changes
in the source code. (Static)
• The contents can change due to change in
databases or other components even due to user
interaction. (Dynamic)
Choosing a development Language
• The type of page can also narrow down the
languages that can be used for development.
Commonly used languages / frameworks
Html (static)
PHP
Java / JSP
ASP
Python
C/C++/C#
Ruby on Rails
ColdFusion
Others..
HTML
<html>
<body>
Mostly used for Static Pages.
Directly Interpreted by HTML
browsers.
Simple but less powerful in terms of
creating dynamic and complex
pages.
The Sample Code contains two
different styles of text with an
image.
<p>
<font size="10" face="Times" color="Blue">
This is in Times-10 , with blue font color.
</font>
</p>
<p>
<font size="5" face="Arial" color="pink">
This paragraph is in Arail-5 with pink font color.
</font>
</p>
<img src="Koala.jpg" alt="Koala"/ width="700"
height="500">
</body>
</html>
PHP
HyperText Preprocessor
Tag-based
Need a Special Preprocessor to convert
the php code to html.
Can be directly embedded into HTML
text.
Provides good flexibility to connect
with different databases.
Open Source and free to use.
Sample:
<html>
< body>
< ?php
echo "Hello World";
?>
< /body>
< /html>
Development in PHP
Tools required:
• PHP pre-processor
• SQL server
We can use
• XAMPP [4]
• Notepad++ - Open Source [5]
• Adobe’s Dreamweaver [2]
Our System
REQUEST
MySQL
MySQL
Some SQL Queries*
SELECT
SELECT *
CREATE
DATABASE
CREATE TABLE
GROUP BY
BETWEEN
SELECT column_name(s)
FROM table_name
SELECT *
FROM table_name
CREATE DATABASE database_name
CREATE TABLE table_name
(
column_name1 data_type,
column_name2 data_type,
column_name2 data_type,
...
)
SELECT column_name,
aggregate_function(column_name)
FROM table_name
WHERE column_name operator value
GROUP BY column_name
SELECT column_name(s)
FROM table_name
WHERE column_name
BETWEEN value1 AND value2
ORDER BY
DELETE
SELECT column_name(s)
FROM table_name
ORDER BY column_name [ASC|DESC]
DELETE FROM table_name
WHERE some_column=some_value
or
DELETE FROM table_name
(Note: Deletes the entire table!!)
DROP
DATABASE
DROP
TABLE
INSERT
INTO
DELETE * FROM table_name
(Note: Deletes the entire table!!)
DROP DATABASE database_name
DROP TABLE table_name
INSERT INTO table_name
VALUES (value1, value2, value3,....)
or
INSERT INTO table_name
(column1, column2, column3,...)
VALUES (value1, value2, value3,....)
* Source : http://www.w3schools.com/sql/sql_quickref.asp
Some Basics in PHP*
<html>
<body>
<?php
//This is a comment
/* This is a comment block */
echo "Hello World <br>";
?>
<img src="images/Koala.jpg“ alt="Koala"/ width="700"
height="500">
</body>
</html>
Sample-II*
<html>
<body>
<?php
//This is a single line comment
/*
Multiple comments lines
*/
$temp="Welcome to CSE<br/>";
echo "Hello World<br>";
echo $temp;
if(Date("D")=="Mon")
echo "<br>Lets get going!!!<br>";
else
echo "Have a good day! <br>";
?>
<img src="Dock.jpg" alt="Dock"/ width="700" height="500">
<a href="http://www.google.com"> Wanna Search Google?</a>
</body>
</html>
Sample-III*
<html>
<body>
<?php
$temp="Welcome to CSE<br/>";
echo "Hello World<br>";
echo $temp;
$tmp=Date("D");
if(Date("D")=="Mon")
{
echo "<br><p>Lets get going!!!</p><br>";
}
else{
echo "<p>Have a good day</p>";
}
?>
<form action="RegisterUser.php" method=post">
Name: <input type="text" name="cname"/>
Weight: <input type="text" name="cweight" />
Age: <input type="text" name="cage" />
<input type="submit" value=”Submit Data”/>
</form>
<img src="images\Dock.jpg" alt="Dock"/ width="700" height="500">
</body>
</html>
Sample-III(b)*
<html>
<body>
<h1> Hello </h1>
<?php
$trycon=mysql_connect("127.0.0.1:3306","root",'xampp');
if(!$trycon)
{
die('Unable to Connect to Specified SQL server'.mysql_error());
}
else
echo "Connected to the MYSQL server<br>";
echo
echo
echo
echo
"Please find the Regirstration Details below:<br>";
"Name: ".$_REQUEST["cname"]."<br>";
"Age:
".$_REQUEST["cage"]."<br>";
"Weight:".$_REQUEST["cweight"]."<br>";
?>
</body>
</html>
Sample-III(c)*
<html>
<body>
<?php
$trycon=mysql_connect("127.0.0.1:3306","root",'xampp');
if(!$trycon)
{
die('Unable to Connect to Specified SQL server'.mysql_error());
}
else
echo "Connected to the MYSQL server<br>";
mysql_select_db("test", $trycon);
$insert_query="INSERT INTO temptest
VALUES('$_REQUEST[cname]','$_REQUEST[cage]','$_REQUEST[cweight]')";
mysql_query($insert_query);
$result=mysql_query("select * from temptest");
echo "<table border='1'>
<tr>
<th>Name of client</th>
<th>Age</th>
<th>Weight</th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['Name'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Weight'] . "</td>";
echo "</tr>";
}
echo "</table>";
?>
</body>
</html>
The Formatting and Creativity
Apply Cascade Style Sheets (CSS).
Style for each HTML element can be defined.
External, Internal or In-line CSS can be created and used for any
HTML file.
However, name of different properties should known along with
corresponding possible values.
Dreamweaver can simplify the overall process, once learned.
Development in ASP .net
Tools required:
• ASP .Net Development Server
• MySQL server
• Debugger
We can use
• MySQL
• Microsoft Visual Studio / Microsoft Web
Developer.
References:
[1]. http://www.w3schools.com/php/
[2].http://www.adobe.com/products/dreamwea
ver.html
[3]. http://www.w3schools.com/css/
[4]. http://sourceforge.net/projects/xampp/
[5]. http://notepad-plus-plus.org/
* Note: Some of the examples from [1] were modified to serve as Samples for this presentation for CSE3310 students.
