Developing a Web Application

Developing a Web Application
Develop a basic web application to graph results from the database
and style it using HTML/CSS.
Rabab Gomaa & Abdel Rahman El Beheri
IEEE Young Professional Workshop
December 2nd, 2017
https://www.slideshare.net/RababGomaa/
Rabab Gomaa : @RubysDo Abdel Rahman Elbeheri : @abdz91

Content
Part 1: Creating a static web page in HTML/CSS by Rabab
● HTML
● CSS
● WET/Graph
Part2 : PHP - Making Web pages dynamic by Abdel Rahman
● Why PHP?
● PHP Operation Simplified
● PHP - Getting Started
● PHP - Sample code “Hello, World”
● PHP - Embedded with HTML
● PHP - Our application
@RubysDo “Creating a Static Web Page in HTML/CSS” https://www.slideshare.net/RababGomaa/

Part 1: Creating a page with graphs in HTML/CSS
Rabab Gomaa, Web Accessibility Expert
● Experience of web development / web design /web
integration.
● Works for the Federal Government
● Active in the web accessibility community
○ Presented in several conferences: The Accessibility Conference
of University of Guelph 2014 & 2016, 2017, CodeFest4 (2016),
a11yYOW 2014 and a11yQC 2016.
○ Co-organizer of Ottawa Digital Accessibility and Inclusive
Design http://meetup.com/a11yOttawa/

Part 1: Creating a page with graphs in HTML/CSS
What we need to start
1. A Browser
2. An HTML editor
Dreamweaver CC (trial version)
http://www.adobe.com/ca/products/dreamweaver/free-trial-download.html
3. WET 4
http://wet-boew.github.io/wet-boew/docs/versions/dwnld-en.html

HTML
What is HTML?
● Hyper Text Markup Language
● HTML describes the structure of a web page
● Browsers use HTML to render the content of a web page
● HTML does not have a logic (not a programming language)
Learn More - HTML Crash Course For Absolute Beginners retrieved from https://www.youtube.com/watch?v=UB1O30fR-EE

HTML Syntax and Structure
HTML Syntax
● <tagname>Content goes here...</tagname>
Start tag Element content End tag
<h1> My First Heading </h1> Simple element
<table> table structure </table> element with structure
HTML Page Structure
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<h1>Pool Results for 2017</h1>
</body>
</html>

Exercise 1: Create your own HTML page
<!doctype html>
<html>
<head>
<title>Ottawa Voting Corner - IEEE Young
Professional</title>
</head>
<body>
<p>Although the competition between choices, Ottawa
citizens have made their mind on the best of this 2017
year!!</p>
<h2>Ottawa's official food in 2017</h2>
</body>
</html>
Pool Results for 2017………………...

CSS
What is CSS?
● CSS describes how HTML elements should be displayed.
Inserting CSS in HTML
● External style sheet
<link rel="stylesheet" type="text/css" href="mystyle.css">
● Internal style sheet
<head>
<style>
h1 {color: blue;}
</style>
</head>
● Inline style
<h1 style="color: blue;">Pool Results for 2017</h1>

Exercise 2: Write your own styles
<!doctype html>
<html>
<head>
<title>Ottawa Voting Corner - IEEE
Young Professional</title>
<style>
h1 {background-color: #9CF;}
</style>
</head>
<body>
</body>
</html>
<title>
<h1>
<p>
<h2>

Use of WET to create graph
What is WET?
● Front-end framework for building websites
● A collection of flexible and themeable templates and reusable components
Charts Working Example
http://wet-boew.github.io/v4.0-ci/demos/index-en.html

Exercise 3: Code results table and view chart
<h2>Ottawa's official food in 2017</h2>
<table class="wb-charts wb-charts-donut table">
<caption> What is Ottawa's official food?</caption>
<thead>
<tr>
<td></td>
<th>Shawarma</th>
<th>Beavertail</th>
<th>Sushi</th>
<th>Burger</th>
</tr>
</thead>
<tbody>
<tr>
<th></th>
<td>10</td>
<td>23</td>
<td>3</td>
<td>6</td>
</tr>
</tbody>
</table>

PART 2: PHP - Making Web pages dynamic

Part 2: PHP - Making Webpages Dynamic
Abdel Rahman El Beheri, Malware Test Engineer
● Experience of Web programming /Web design
● WordPress Developer
● Experience Network Analysis and Security
● Previous Nokia Inc. Malware Test Engineer
@abdz91 “PHP - Making Web pages dynamic” https://www.slideshare.net/RababGomaa/

Why PHP?
First, What is PHP?
● A computer general-purpose scripting language (Server Side).
● Originally designed for producing dynamic web pages
● It is a free, open-source software and runs most operating software.
● URL: http://www.php.net

So again, why PHP?
● As mentioned before, PHP produces dynamic web pages.
● No need to hard code changes, every time a change is needed.
● Output is real-time hence changes “dynamically”
● However it needs a server to run. (ex. Apache, ILS, etc)

PHP Operation Simplified
● PHP can be embedded in the
html code.
● PHP code is executed on the
server, generating HTML then
sent to the client
● To the client, only the html code
and tag appear as shown in the
figure.

1. On Windows OS, download and install WAMP. URL:
http://www.wampserver.com
2. On Mac OSX, download and install MAMP. URL:
http://www.mamp.info/en/index.html
3. WAMP or MAMP provide Apache webserver, database server, and php
PHP - Getting Started

● PHP is enclosed in <?php … //code here … ?>
● “echo” statement is basically a print out to console or web page
● Tip: PHP is case sensitive. Very annoying when assigning variables! :)
PHP - Sample Code “Hello, World”

PHP - Embedded with HTML (Spagetti Way)
● Just add the php tag within the html code
to start.
● Assigning variables in PHP starts with “$”
● Variables have many types (ex. String,
Int, Arrays, etc.)
● Conditional statements (ex. If, while, do
while, elseif, etc.)

PHP - Our application
● Connecting to MySql database
<?php
//Step1
$db = mysqli_connect('localhost','root','root','alidb')
or die('Error connecting to MySQL server.');
?>
● Then grab what is in the database
<?php
//Start of PHP code (another segment)
//Step2
$query = "SELECT * FROM table1";

● Query the database for the values in it using PHP
//Step3
$result = mysqli_query($db, $query);
● Then we go through all the values using a loop
while ($row = mysqli_fetch_array($result)) {
//Step4
$RFID_names[$i] = $row['RFID'];
$BA_values[$i] = $row['ButtonA'];
$BB_values[$i] = $row['ButtonB'];
$BC_values[$i] = $row['ButtonC'];
….
$i++;
}

● Finally, connection to the database must be closed
//Step 5
mysqli_close($db);
//end of PHP code
?>

Thank you for your time!
Rabab Gomaa & Abdel Rahman El Beheri
@RunysDo & @abdz91
https://www.slideshare.net/RababGomaa/

Developing a Web Application

More Related Content

What's hot

Similar to Developing a Web Application

More from Rabab Gomaa

Recently uploaded

Developing a Web Application