CSE3310: Web training A JumpStart for Project. Outline Introduction to Website development Web...
17
CSE3310: Web training A JumpStart for Project
-
Upload
meghan-wilkinson -
Category
Documents
-
view
212 -
download
0
Transcript of CSE3310: Web training A JumpStart for Project. Outline Introduction to Website development Web...
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
• 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)
Static Vs Dynamic
• The type of page can also narrow down the languages that can be used for development.
Choosing a development Language
Commonly used languages / frameworks
Html (static)
PHP
Java / JSP
ASP
Python
C/C++/C#
Ruby on Rails
ColdFusion
Others..
HTML
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.
<html><body>
<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>
< ?phpecho "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 MySQLMySQL
Some SQL Queries*SELECT SELECT column_name(s)
FROM table_nameSELECT * SELECT *
FROM table_nameCREATE DATABASE
CREATE DATABASE database_name
CREATE TABLE CREATE TABLE table_name(column_name1 data_type,column_name2 data_type,column_name2 data_type,...)
GROUP BY SELECT column_name, aggregate_function(column_name)FROM table_nameWHERE column_name operator valueGROUP BY column_name
BETWEEN SELECT column_name(s)FROM table_nameWHERE column_nameBETWEEN value1 AND value2
ORDER BY SELECT column_name(s)FROM table_nameORDER BY column_name [ASC|DESC]
DELETE DELETE FROM table_nameWHERE some_column=some_value
or
DELETE FROM table_name (Note: Deletes the entire table!!)
DELETE * FROM table_name (Note: Deletes the entire table!!)
DROP DATABASE
DROP DATABASE database_name
DROP TABLE
DROP TABLE table_name
INSERT INTO
INSERT INTO table_nameVALUES (value1, value2, value3,....)orINSERT 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 "Please find the Regirstration Details below:<br>"; echo "Name: ".$_REQUEST["cname"]."<br>"; echo "Age: ".$_REQUEST["cage"]."<br>"; echo "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/dreamweaver.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.
