26 $host = "localhost" ; 27 $user = "marcolg" ; 28 $password = "" ; 52 $connessione = new mysqli ($host, $user, $password );

Size: px
Start display at page:

Download "26 $host = "localhost" ; 27 $user = "marcolg" ; 28 $password = "" ; 52 $connessione = new mysqli ($host, $user, $password );"

Transcription

1 C:\Users\Marco\Documents\eqFTP Projects\Sito\stazione\statistiche.php: 1/5 1 <!DOCTYPE html> 2 <html lang="it"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <link rel="icon" href="icon.png"> 8 <meta http-equiv="refresh" content="600"> 9 <title>stazione Meteorologica</title> 10 <link href="css/bootstrap.min.css" rel="stylesheet"> 11 <link href="dashboard.css" rel="stylesheet"> <?php 16 $host = "localhost" ; 17 $user = "marcolg" ; 18 $password = "" ; 19 $connessione = new mysqli ($host, $user, $password ); 20 $connessione ->connect_errno; 21 $sql ="INSERT INTO my_marcolg.`accessi`(data,ip,disp,pagina,provenienza) VALUES (NOW(),\"".getenv ("REMOTE_A DDR")."\",\"".getenv ("HTTP_USER_AGENT" )."\",\"".getenv ("REQUEST_URI" )."\",\"".getenv ("HTTP_REFERER" )."\");" ; 22 $result = $connessione ->query ($sql ); 23 $connessione ->close (); 24?> 25 <?php 26 $host = "localhost" ; 27 $user = "marcolg" ; 28 $password = "" ; 29 $connessione = new mysqli ($host, $user, $password ); 30 if ($connessione ->connect_errno ) { 31 echo "Connessione fallita: ". $connessione ->connect_error. "." ; 32 exit (); 33 } $el="pressione" ; 36 $q=$_get["q" ]; 37 if($q=="p" ) $el="pressione" ; 38 else if($q=="t" ) $el="temperatura" ; 39 else if($q=="u" ) $el="umidita" ; function history ($inizio,$fine ){ $el="pressione" ; 44 $q=$_get["q" ]; 45 if($q=="p" ) $el="pressione" ; 46 else if($q=="t" ) $el="temperatura" ; 47 else if($q=="u" ) $el="umidita" ; $host = "localhost" ; 50 $user = "marcolg" ; 51 $password = "" ; 52 $connessione = new mysqli ($host, $user, $password ); 53 if ($connessione ->connect_errno ) { 54 echo "Connessione fallita: ". $connessione ->connect_error. "." ; 55 exit (); 56 } 57 $sql = "SELECT AVG(".$el.") FROM my_marcolg.stazione WHERE Data < NOW() - INTERVAL ".$inizio." HOUR AND Data > NOW() - INTERVAL ".$fine." HOUR" ; 58 $result = $connessione ->query ($sql ); 59 $row = $result ->fetch_assoc (); 60 $ph= $row ["AVG(".$el.")" ]; if ($ph==0) $ph="" ; 63 else if($q=="p" ) $ph =round ($ph/100,0); 64 echo $ph; 65 return ; 66 } 67?> 68 </head> <body onbeforeunload= "$('#loading').modal('show')" onload= "$('#loading').modal('hide')" >

2 71 <nav class= "navbar navbar-inverse navbar-fixed-top" > 72 <div class= "container-fluid" > 73 <div class= "navbar-header" > 74 <button type= "button" class= "navbar-toggle collapsed" data-toggle= "collapse" data-target= "#navbar" aria-exp anded= "false" aria-controls= "navbar" > 75 <span class= "sr-only" >Toggle navigation </span> 76 <span class= "icon-bar" ></span> 77 <span class= "icon-bar" ></span> 78 <span class= "icon-bar" ></span> 79 </button> 80 <a class= "navbar-brand" href= "" >Stazione Meteorologica </a> 81 </div> <div id= "navbar" class= "navbar-collapse collapse " > 85 <ul class= "nav navbar-nav navbar-right visible-xs" > 86 <li><a href= "index.php" >Condizione attuale <span class= "sr-only" >(current) </span></ a></li> 87 <li class= "active" ><a href= "statistiche.php?q=p" >Statistiche </a></li> 88 <li><a href= "archivio.php" >Archivio </a></li> 89 <li><a href= "informazioni.php" >Informazioni </a></li> 90 </ul> 91 </div> </div> 95 </nav> <div class= "container-fluid" > 98 <div class= "row" > 99 <div class= "col-sm-3 col-md-2 sidebar" > 100 <ul class= "nav nav-sidebar" > 101 <li><a href= "index.php" >Condizione attuale </a></li> 102 <li class= "active" ><a href= "statistiche.php?q=p" >Statistiche </a><span class= "sr-only" >(current) </span></li> 103 <li><a href= "archivio.php" >Archivio </a></li> 104 <li><a href= "informazioni.php" >Informazioni </a></li> 105 </ul> 106 </div> 107 <div class= "col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" > 108 <h1 class= "page-header" >Statistiche </h1> 109 <div class= "dropdown" > 110 <button class= "btn btn-default dropdown-toggle" type= "button" id="dropdownmenu1" data-toggle= "dropdo wn" aria-haspopup= "true" aria-expanded= "true" > 111 <?php 112 if($q=="u" ) echo "Umidità" ; 113 else echo $el; 114?> 115 <span class= "caret" ></span> 116 </button> 117 <ul class= "dropdown-menu" aria-labelledby= "dropdownmenu1" > 118 <li><a href= " >Temperatura </a></li> 119 <li><a href= " >Umidità </a></li> 120 <li><a href= " >Pressione </a></li> 121 </ul> 122 </div> <h3 class= "sub-header" >Grafico 12 ore </h3> 126 <div style= " width :100%;" > 127 <div> 128 <canvas id= "canvas" height= "30" width= "100%" ></canvas> 129 </div> 130 </div> 131 <?php 132 $sql = "SELECT ".$el." FROM my_marcolg.stazione ORDER BY Data DESC" ; 133 $result = $connessione ->query ($sql ); 134 $row = $result ->fetch_assoc (); 135 $p= $row [$el]; $sql = "SELECT MAX(".$el."), MIN(".$el.") FROM my_marcolg.stazione;" ; 138 $result = $connessione ->query ($sql ); 139 if ($result ->num_rows > 0) { 140 while ($row = $result ->fetch_assoc ()) { C:\Users\Marco\Documents\eqFTP Projects\Sito\stazione\statistiche.php: 2/5

3 141 $pmax = $row ["MAX(".$el.")" ]; 142 $pmin = $row ["MIN(".$el.")" ]; 143 }} $sql = "SELECT Data FROM my_marcolg.stazione WHERE ".$el." = ".$pmin.";" ; $result = $connessione ->query ($sql ); 148 $row = $result ->fetch_assoc (); 149 $dmin = $row ["Data" ]; $sql = "SELECT Data FROM my_marcolg.stazione WHERE ".$el." = ".$pmax.";" ; 152 $result = $connessione ->query ($sql ); 153 $row = $result ->fetch_assoc (); 154 $dmax = $row ["Data" ]; $sql = "SELECT AVG(".$el.") FROM my_marcolg.stazione" ; 157 $result = $connessione ->query ($sql ); 158 $row = $result ->fetch_assoc (); 159 $avg = $row ["AVG(".$el.")" ]; $connessione ->close (); 162?> 163 <script> 164 var linechartdata = { 165 labels : ["-12h", "-11h", "-10h", "-9h", "-8h", "-7h", "-6h", "-5h", "-4h", "-3h", "-2h", "-1h", "Ora"] 166, datasets : [ 167 { 168 label : "Pressione" 169, fillcolor : "rgba(220,220,220,0.2)" 170, strokecolor : "rgba(220,220,220,1)" 171, pointcolor : "rgba(220,220,220,1)" 172, pointstrokecolor : "#fff" 173, pointhighlightfill : "#fff" 174, pointhighlightstroke : "rgba(220,220,220,1)" 175, data: [<?php history(11,12)?>, <?php history(10,11)?>, <?php history(9,10)?>, <?php history(8,9)?>, <?php history(7,8)?>, <?php history(6,7)?>, <?php history(5,6)?>, <?php history(4,5)?>, <?php history(3,4)?>, <?php histo ry(2,3)?>, <?php history(1,2)?>, <?php history(0,1)?>, <?php if($q=="p") echo round($p/100,0); else echo $p?>] 176 } ] } window.onload = function () { 183 var ctx = document.getelementbyid("canvas").getcontext("2d"); 184 window.myline = new Chart(ctx).Line(lineChartData, { 185 responsive : true, 186 scaleoverride: true 187, scalesteps : <?php 188 if($q=="p") echo"6"; 189 else if($q=="t") echo"5"; 190 else if($q=="u") echo "10";?> 191, scalestepwidth : <?php 192 if($q=="p") echo"2"; 193 else if($q=="t") echo"6"; 194 else if($q=="u") echo"10";?> 195, scalestartvalue : <?php 196 if($q=="p" ) echo round (($p/100)-6,0); 197 else if($q=="t" ) echo round ($p-20,0); 198 else if($q=="u" ) echo 0;?> }); 201 } 202 </script> 203 <h3 class= "sub-header" >Statistiche </h3> 204 <table class= "table table-bordered" > 205 <thead> 206 <tr> 207 <th> Record </th> 208 <th> Valore ( 209 <?php 210 if($q=="p" ) echo "Pa" ; C:\Users\Marco\Documents\eqFTP Projects\Sito\stazione\statistiche.php: 3/5

4 211 else if($q=="t" ) echo " C" ; 212 else if($q=="u" ) echo "%" ;?>)</th> 213 <th>data e ora</th> 214 </tr> 215 </thead> 216 <tbody> <tr> 219 <td>minima</td> 220 <td> 221 <?php echo $pmin;?> 222 </td> 223 <td> 224 <?php $start = new DateTime($dmin); echo $start->format('d-m-y H:i:s');?> 225 </td> 226 </tr> 227 <tr> 228 <td> Massima </td> 229 <td> 230 <?php echo $pmax;?> 231 </td> 232 <td> 233 <?php $start = new DateTime($dmax); echo $start->format('d-m-y H:i:s');?> 234 </td> 235 </tr> 236 <tr> 237 <td> Media </td> 238 <td> 239 <?php echo $avg;?> 240 </td> 241 <td> - </td> 242 </tr> 243 </tbody> 244 </table> </div> 247 </div> </div> <div id= "loading" class= "modal fade bs-example-modal-sm" tabindex= "-1" role= "dialog" aria-labelledby= "mysmallmo dallabel" aria-hidden= "true" data-backdrop= "static" style= " display : none ;" > 252 <div class= "modal-dialog modal-sm" > 253 <div class= "modal-content " > 254 <div class= "modal-body" > 255 Caricamento <div class= "progress progress-striped active" > 257 <div class= "progress-bar progress-bar-info" role= "progressbar" aria-valuenow= "100" aria-valuemin= "0" ar ia-valuemax= "100" style= " width : 100%" > 258 </div> 259 </div> 260 </div> 261 </div> 262 </div> 263 </div> 264 <script> 265 (function (i, s, o, g, r, a, m) { 266 i['googleanalyticsobject'] = r; 267 i[r] = i[r] function () { 268 (i[r].q = i[r].q []).push(arguments) 269 }, i[r].l = 1 * new Date(); 270 a = s.createelement(o) 271, m = s.getelementsbytagname (o)[0]; 272 a.async = 1; 273 a.src = g; 274 m.parentnode.insertbefore(a, m) 275 })(window, document, 'script', ' 'ga'); ga('create', 'UA ', 'auto'); 278 ga('send', 'pageview'); 279 </script> 280 <script src="chart.js"></script> C:\Users\Marco\Documents\eqFTP Projects\Sito\stazione\statistiche.php: 4/5

5 281 <script src=" 282 <script src="js/bootstrap.min.js"></script> 283 </body> </html> C:\Users\Marco\Documents\eqFTP Projects\Sito\stazione\statistiche.php: 5/5

CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) CSS (Cascading Style Sheets) CSS (Cascading Style Sheets) is a language used to describe the appearance and formatting of your HTML. It allows designers and users to create style sheets that define how

More information

Front-End UI: Bootstrap

Front-End UI: Bootstrap Responsive Web Design BootStrap Front-End UI: Bootstrap Responsive Design and Grid System Imran Ihsan Assistant Professor, Department of Computer Science Air University, Islamabad, Pakistan www.imranihsan.com

More information

LAMPIRAN. Index.php. <?php. unset($_session["status"]); //session_destroy(); //session_destroy();

LAMPIRAN. Index.php. <?php. unset($_session[status]); //session_destroy(); //session_destroy(); LAMPIRAN Index.php unset($_session["status"]); //session_destroy(); //session_destroy();?>

More information

Create First Web Page With Bootstrap

Create First Web Page With Bootstrap Bootstrap : Responsive Design Create First Web Page With Bootstrap 1. Add the HTML5 doctype Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype. 2. Bootstrap 3 is mobile-first

More information

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space. HTML Summary Structure All of the following are containers. Structure Contains the entire web page. Contains information

More information

Responsive Web Design (RWD)

Responsive Web Design (RWD) Responsive Web Design (RWD) Responsive Web Design: design Web pages, so that it is easy to see on a wide range of of devices phone, tablet, desktop,... Fixed vs Fluid layout Fixed: elements have fixed

More information

Deccansoft Software Services

Deccansoft Software Services Deccansoft Software Services (A Microsoft Learning Partner) HTML and CSS COURSE SYLLABUS Module 1: Web Programming Introduction In this module you will learn basic introduction to web development. Module

More information

Multimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3

Multimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3 Multimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3 Instructions to use the laboratory computers (room B2): 1. If the computer is off, start it with Windows (all computers have a Linux-Windows

More information

,.., «..»

,.., «..» ,.., 2018. 09.03.03.19 - «..».... 2018 1 : - 39, 5, 1. : -. :,, -,. -.,,. 2 ... 4 1 -. 6 1.1 -... 6 1.2 -... 9 1.3 -... 11 1.4, -... 13 2. - «..»... 16 2.1.... 16 2.2 CMS WordPress... 17 2.3 -... 22...

More information

Lab 1: Introducing HTML5 and CSS3

Lab 1: Introducing HTML5 and CSS3 CS220 Human- Computer Interaction Spring 2015 Lab 1: Introducing HTML5 and CSS3 In this lab we will cover some basic HTML5 and CSS, as well as ways to make your web app look and feel like a native app.

More information

Building beautiful websites with Bootstrap: A case study. by Michael Kennedy michaelckennedy.net

Building beautiful websites with Bootstrap: A case study. by Michael Kennedy michaelckennedy.net Building beautiful websites with Bootstrap: A case study by Michael Kennedy DevelopMentor @mkennedy michaelckennedy.net Objectives Learn what Bootstrap has to offer web developers Install and use Bootstrap

More information

Networks and Web for Health Informatics (HINF 6220) Tutorial 13 : PHP 29 Oct 2015

Networks and Web for Health Informatics (HINF 6220) Tutorial 13 : PHP 29 Oct 2015 Networks and Web for Health Informatics (HINF 6220) Tutorial 13 : PHP 29 Oct 2015 PHP Arrays o Arrays are single variables that store multiple values at the same time! o Consider having a list of values

More information

Purpose of this doc. Most minimal. Start building your own portfolio page!

Purpose of this doc. Most minimal. Start building your own portfolio page! Purpose of this doc There are abundant online web editing tools, such as wordpress, squarespace, etc. This document is not meant to be a web editing tutorial. This simply just shows some minimal knowledge

More information

Structure Bars. Tag Bar

Structure Bars. Tag Bar C H E A T S H E E T / / F L A R E 2 0 1 8 Structure Bars The XML Editor provides structure bars above and to the left of the content area in order to provide a visual display of the topic tags and structure.

More information

Introduction to Computer Science Web Development

Introduction to Computer Science Web Development Introduction to Computer Science Web Development Flavio Esposito http://cs.slu.edu/~esposito/teaching/1080/ Lecture 14 Lecture outline Discuss HW Intro to Responsive Design Media Queries Responsive Layout

More information

Website Development with HTML5, CSS and Bootstrap

Website Development with HTML5, CSS and Bootstrap Contact Us 978.250.4983 Website Development with HTML5, CSS and Bootstrap Duration: 28 hours Prerequisites: Basic personal computer skills and basic Internet knowledge. Course Description: This hands on

More information

Web Programming BootStrap Unit Exercises

Web Programming BootStrap Unit Exercises Web Programming BootStrap Unit Exercises Start with the Notes packet. That packet will tell you which problems to do when. 1. Which line(s) are green? 2. Which line(s) are in italics? 3. In the space below

More information

Chapter 7: JavaScript for Client-Side Content Behavior

Chapter 7: JavaScript for Client-Side Content Behavior Chapter 7: JavaScript for Client-Side Content Behavior Overview and Objectives Create a rotating sequence of images (a slide show ) on the home page for our website Use a JavaScript function as the value

More information

Summary 4/5. (contains info about the html)

Summary 4/5. (contains info about the html) Summary Tag Info Version Attributes Comment 4/5

More information

INFS 2150 Introduction to Web Development

INFS 2150 Introduction to Web Development INFS 2150 Introduction to Web Development 6. Tables and Columns Objectives Explore the structure of a web table Create table heading and data cells Apply CSS styles to a table Create cells that span multiple

More information

WEB/DEVICE DEVELOPMENT CLIENT SIDE MIS/CIT 310

WEB/DEVICE DEVELOPMENT CLIENT SIDE MIS/CIT 310 WEB/DEVICE DEVELOPMENT CLIENT SIDE MIS/CIT 310 Project #4 Updating your class project to be more mobile friendly To gain a fuller appreciate for Responsive Design, please review Chapter 8. Another great

More information

INFS 2150 Introduction to Web Development

INFS 2150 Introduction to Web Development INFS 2150 Introduction to Web Development 6. Tables and Columns Objectives Explore the structure of a web table Create table heading and data cells Apply CSS styles to a table Create cells that span multiple

More information

UI Course HTML: (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) Introduction. The World Wide Web (WWW) and history of HTML

UI Course HTML: (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) Introduction. The World Wide Web (WWW) and history of HTML UI Course (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) HTML: Introduction The World Wide Web (WWW) and history of HTML Hypertext and Hypertext Markup Language Why HTML Prerequisites Objective

More information

Make a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1

Make a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Make a Website A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Overview Course outcome: You'll build four simple websites using web

More information

HTML TAG SUMMARY HTML REFERENCE 18 TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES MOST TAGS

HTML TAG SUMMARY HTML REFERENCE 18 TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES MOST TAGS MOST TAGS CLASS Divides tags into groups for applying styles 202 ID Identifies a specific tag 201 STYLE Applies a style locally 200 TITLE Adds tool tips to elements 181 Identifies the HTML version

More information

Chapter 7 BMIS335 Web Design & Development

Chapter 7 BMIS335 Web Design & Development Chapter 7 BMIS335 Web Design & Development Site Organization Use relative links to navigate between folders within your own site o Sometimes dividing your site into folders makes maintenance and updating

More information

Web Development and HTML. Shan-Hung Wu CS, NTHU

Web Development and HTML. Shan-Hung Wu CS, NTHU Web Development and HTML Shan-Hung Wu CS, NTHU Outline How does Internet Work? Web Development HTML Block vs. Inline elements Lists Links and Attributes Tables Forms 2 Outline How does Internet Work? Web

More information

Responsive Web Design and Bootstrap MIS Konstantin Bauman. Department of MIS Fox School of Business Temple University

Responsive Web Design and Bootstrap MIS Konstantin Bauman. Department of MIS Fox School of Business Temple University Responsive Web Design and Bootstrap MIS 2402 Konstantin Bauman Department of MIS Fox School of Business Temple University Exam 3 (FINAL) Date: 12/06/18 four weeks from now! JavaScript, jquery, Bootstrap,

More information

Django AdminLTE 2 Documentation

Django AdminLTE 2 Documentation Django AdminLTE 2 Documentation Release 0.1 Adam Charnock Jul 02, 2018 Contents 1 Contents 3 1.1 Quickstart................................................ 3 1.2 Templates & Blocks Reference.....................................

More information

Stamp Builder. Documentation. v1.0.0

Stamp  Builder. Documentation.   v1.0.0 Stamp Email Builder Documentation http://getemailbuilder.com v1.0.0 THANK YOU FOR PURCHASING OUR EMAIL EDITOR! This documentation covers all main features of the STAMP Self-hosted email editor. If you

More information

Static Webpage Development

Static Webpage Development Dear Student, Based upon your enquiry we are pleased to send you the course curriculum for PHP Given below is the brief description for the course you are looking for: - Static Webpage Development Introduction

More information

Project Part 2 (of 2) - Movie Poster And Actor! - Lookup

Project Part 2 (of 2) - Movie Poster And Actor! - Lookup Getting Started 1. Go to http://quickdojo.com 2. Click this: Project Part 2 (of 2) - Movie Poster And Actor! - Lookup This is an extension of what you did the last time (the Movie Poster lookup from Week

More information

Signs of Spring App. Release Notes Version 1.0

Signs of Spring App. Release Notes Version 1.0 Signs of Spring App Release Notes Version 1.0 App Parameters and Styling In your Caspio account, go to the App s Overview screen. On the right sidebar, click on Manage in the App Parameters area. Edit

More information

Mateen Eslamy 10/31/13

Mateen Eslamy 10/31/13 Mateen Eslamy 10/31/13 Tutorial In this tutorial, you ll learn how to create a webpage using Twitter Bootstrap 3. The goal of this tutorial is to create a responsive webpage, meaning that if the webpage

More information

Description: This feature will enable user to send messages from website to phone number.

Description: This feature will enable user to send messages from website to phone number. Web to Phone text message Description: This feature will enable user to send messages from website to phone number. User will use this feature and can send messages from website to phone number, this will

More information

PHPRad. PHPRad At a Glance. This tutorial will show you basic functionalities in PHPRad and

PHPRad. PHPRad At a Glance. This tutorial will show you basic functionalities in PHPRad and PHPRad PHPRad At a Glance. This tutorial will show you basic functionalities in PHPRad and Getting Started Creating New Project To create new Project. Just click on the button. Fill In Project properties

More information

Session 5. Web Page Generation. Reading & Reference

Session 5. Web Page Generation. Reading & Reference Session 5 Web Page Generation 1 Reading Reading & Reference https://en.wikipedia.org/wiki/responsive_web_design https://www.w3schools.com/css/css_rwd_viewport.asp https://en.wikipedia.org/wiki/web_template_system

More information

MUSE Web Style Guide DRAFT v3

MUSE Web Style Guide DRAFT v3 MUSE Web Style Guide 2016 DRAFT v3 STYLE GUIDE CONTENTS STYLE GUIDE PURPOSE COLOR PALETTE TYPOGRAPHY MOOD BOARD IMAGERY FOR CONCEPTUALIZING HEADER, FOOTER, NAVIGATION HOMEPAGE and DROP DOWN NAVIGATION

More information

GIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar

GIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover effect: You may create your button in GIMP. Mine is 122 pixels by 48 pixels. You can use whatever

More information

Web development using PHP & MySQL with HTML5, CSS, JavaScript

Web development using PHP & MySQL with HTML5, CSS, JavaScript Web development using PHP & MySQL with HTML5, CSS, JavaScript Static Webpage Development Introduction to web Browser Website Webpage Content of webpage Static vs dynamic webpage Technologies to create

More information

Name Related Elements Type Default Depr. DTD Comment

Name Related Elements Type Default Depr. DTD Comment Legend: Deprecated, Loose DTD, Frameset DTD Name Related Elements Type Default Depr. DTD Comment abbr TD, TH %Text; accept-charset FORM %Charsets; accept FORM, INPUT %ContentTypes; abbreviation for header

More information

Dingle Coderdojo 6. Project Part 2 (of 2) - Movie Poster And Actor! - Lookup. Week 6

Dingle Coderdojo 6. Project Part 2 (of 2) - Movie Poster And Actor! - Lookup. Week 6 Dingle Coderdojo 6 Week 6 Project Part 2 (of 2) - Movie Poster And Actor! - Lookup This is an extension of what you did the last time (the Movie Poster lookup from Week 5). Make sure you ve finished that

More information

Bootstrap 1/20

Bootstrap 1/20 http://getbootstrap.com/ Bootstrap 1/20 MaxCDN

More information

5 Snowdonia. 94 Web Applications with C#.ASP

5 Snowdonia. 94 Web Applications with C#.ASP 94 Web Applications with C#.ASP 5 Snowdonia In this and the following three chapters we will explore the use of particular programming techniques, before combining these methods to create two substantial

More information

Produced by. Agile Software Development. Eamonn de Leastar

Produced by. Agile Software Development. Eamonn de Leastar Agile Software Development Produced by Eamonn de Leastar (edeleastar@wit.ie) Department of Computing, Maths & Physics Waterford Institute of Technology http://www.wit.ie http://elearning.wit.ie Pacemaker

More information

web-sockets-homework Directions

web-sockets-homework Directions web-sockets-homework Directions For this homework, you are asked to use socket.io, and any other library of your choice, to make two web pages. The assignment is to create a simple box score of a football

More information

MySQL: Access Via PHP

MySQL: Access Via PHP MySQL: Access Via PHP CISC 282 November 15, 2017 phpmyadmin: Login http://cisc282.caslab. queensu.ca/phpmyadmin/ Use your NetID and CISC 282 password to log in 2 phpmyadmin: Select DB Clicking on this

More information

WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5

WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 In this chapter, you will learn how to... LEARNING OUTCOMES Code relative hyperlinks to web pages in folders within a website Configure

More information

GIMP WEB 2.0 MENUS. Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar.

GIMP WEB 2.0 MENUS. Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar. GIMP WEB 2.0 MENUS Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar. Standard Navigation Bar Web 2.0 Navigation Bar Now the all-important question

More information

Table-Based Web Pages

Table-Based Web Pages Table-Based Web Pages Web Authoring and Design Benjamin Kenwright Outline What do we mean by Table-Based Web Sites? Review Table Tags/Structure Tips/Debugging/Applications Summary Review/Discussion Submissions/Quizzes/GitHub

More information

WEBSI TE DESIGNING TRAINING

WEBSI TE DESIGNING TRAINING WEBSI TE DESIGNING TRAINING WHAT IS WEB DESIGN? We b s ite design m e a n s p l a n n i n g, c r e a t i o n and u p d a t i n g of websites. We bsite design also involves i n f o r m a t i o n a rchitecture,

More information

Tables & Lists. Organized Data. R. Scott Granneman. Jans Carton

Tables & Lists. Organized Data. R. Scott Granneman. Jans Carton Tables & Lists Organized Data R. Scott Granneman Jans Carton 1.3 2014 R. Scott Granneman Last updated 2015-11-04 You are free to use this work, with certain restrictions. For full licensing information,

More information

For instructions to change the logo, please refer to: ore

For instructions to change the logo, please refer to:   ore Header Note: VapeDay Theme have 2 versions. Version 1.0 with Left bar for long list of categories and Version 2.0 with No Left bar with categories in the header. While editing the theme files from template

More information

Using CSS for page layout

Using CSS for page layout Using CSS for page layout Advantages: Greater typographic control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control Increased accessibility

More information

GROUPER EVALUATION & REMEDIATION REPORT

GROUPER EVALUATION & REMEDIATION REPORT GROUPER EVALUATION & REMEDIATION REPORT Reviewer: Howard Kramer, hkramer@colorado.edu Technology Used: NVDA (ver. 2016.1), Firefox (ver. 48.0.2) on Windows 10 PC Background This report evaluates the Grouper

More information

About the Tutorial. Audience. Prerequisites. Copyright & Disclaimer. Material Design Lite

About the Tutorial. Audience. Prerequisites. Copyright & Disclaimer. Material Design Lite About the Tutorial Material Design Lite, MDL is a UI component library created with CSS, JavaScript, and HTML. MDL UI components helps in constructing attractive, consistent, and functional web pages and

More information

Wireframe :: tistory wireframe tistory.

Wireframe :: tistory wireframe tistory. Page 1 of 45 Wireframe :: tistory wireframe tistory Daum Tistory GO Home Location Tags Media Guestbook Admin 'XHTML+CSS' 7 1 2009/09/20 [ ] XHTML CSS - 6 (2) 2 2009/07/23 [ ] XHTML CSS - 5 (6) 3 2009/07/17

More information

Mobile Web Development

Mobile Web Development Mobile Web Development By Phil Huhn 2013-04-30 2013 Northern Software Group Agenda Web-site issues for mobile devices Responsive Design Media Queries Twitter Bootstrap As-is (themes) less variables.less

More information

appendix Introduction to Foundation, the front-end framework

appendix Introduction to Foundation, the front-end framework APPENDIX B appendix Introduction to Foundation, the front-end framework When prototyping responsive websites, building quickly is key. They don t call it rapid prototyping for nothing. Using a front-end

More information

Django Part II SPARCS 11 undead. Greatly Inspired by SPARCS 10 hodduc

Django Part II SPARCS 11 undead. Greatly Inspired by SPARCS 10 hodduc Django Part II 2015-05-27 SPARCS 11 undead Greatly Inspired by SPARCS 10 hodduc Previously on Django Seminar Structure of Web Environment HTTP Requests and HTTP Responses Structure of a Django Project

More information

Chapter6: Bootstrap 3. Asst.Prof.Dr. Supakit Nootyaskool Information Technology, KMITL

Chapter6: Bootstrap 3. Asst.Prof.Dr. Supakit Nootyaskool Information Technology, KMITL Chapter6: Bootstrap 3 Asst.Prof.Dr. Supakit Nootyaskool Information Technology, KMITL Objective To apply Bootstrap to a web site To know how to build various bootstrap commands to be a content Topics Bootstrap

More information

А «- - «Exellent»» 50, 18, «Exellent»., , -., -. -,, html -. - «Exellent»,.

А «- - «Exellent»» 50, 18, «Exellent»., , -., -. -,, html -. - «Exellent»,. А «- - «Exellent»» 50, 18, 21. - - «Exellent»., -. -. -. -, -., -. -,, html -. - «Exellent»,. А... 3 1 -... 5 1.1, -... 5 1.2 Э -... 8 1.3 -... 9 1.4, -... 16 1.4.1... 16 1.4.2... 18 1.4.3.... 18 2 - «Exellent»...

More information

CSS often uses hyphens in CSS property names but JavaScript uses camel case, e.g. color: blue; p { <!DOCTYPE html> <meta charset="utf-8" /> <head>

CSS often uses hyphens in CSS property names but JavaScript uses camel case, e.g. color: blue; p { <!DOCTYPE html> <meta charset=utf-8 /> <head> 1 of 9 CS1116/CS5018 Web Development 2 Dr Derek Bridge School of Computer Science & Information Technology University College Cork Recap To find nodes: queryselector, queryselectorall To create new element

More information

Basic Bootstrap Classes

Basic Bootstrap Classes .container Basic Bootstrap Classes sets fixed width to an element (which changes depending on a screen size to other fixed values, so it's still responsive) on all screen sizes except xs - on xs, the width

More information

HTML and CSS COURSE SYLLABUS

HTML and CSS COURSE SYLLABUS HTML and CSS COURSE SYLLABUS Overview: HTML and CSS go hand in hand for developing flexible, attractively and user friendly websites. HTML (Hyper Text Markup Language) is used to show content on the page

More information

Bootstrap Carousel. jquery Image Sliders

Bootstrap Carousel. jquery Image Sliders Bootstrap Carousel jquery Image Sliders Bootstrap Carousel Carousel bootstarp css js jquery js bootstrap.js http://getbootstrap.com/javascript/#carousel item ol.carousel-indicators li

More information

Configuring Ad hoc Reporting. Version: 16.0

Configuring Ad hoc Reporting. Version: 16.0 Configuring Ad hoc Reporting Version: 16.0 Copyright 2018 Intellicus Technologies This document and its content is copyrighted material of Intellicus Technologies. The content may not be copied or derived

More information

CSS: Layout Part 2. clear. CSS for layout and formatting: clear

CSS: Layout Part 2. clear. CSS for layout and formatting: clear CSS: Layout Part 2 Robert A. Fulkerson College of Information Science and Technology http://www.ist.unomaha.edu/ University of Nebraska at Omaha http://www.unomaha.edu/ CSS for layout and formatting: clear

More information

Building Responsive Layouts

Building Responsive Layouts Building Responsive Layouts by Zoe Mickley Gillenwater @zomigi zomigi.com December 5, 2012 CSS Dev Conf hello nice to meet you 2 I don t use a mobile phone I have a process for eating these why responsive

More information

http://nma.kcc.hawaii.edu/gargiulo/data/johndoe/spring/art128/2014/companyname1_step3/index.html 1 2 3 4 5 company Name 6 7

More information

Building Page Layouts

Building Page Layouts Building Page Layouts HTML & CSS From Scratch Slides 3.1 Topics Display Box Model Box Aesthetics Float Positioning Element Display working example at: h9ps://;nker.io/3a2bf Source: unknown. Please contact

More information

WEB DESIGNING COURSE SYLLABUS

WEB DESIGNING COURSE SYLLABUS F.A. Computer Point #111 First Floor, Mujaddadi Estate/Prince Hotel Building, Opp: Okaz Complex, Mehdipatnam, Hyderabad, INDIA. Ph: +91 801 920 3411, +91 92900 93944 040 6662 6601 Website: www.facomputerpoint.com,

More information

UX/UI Controller Component

UX/UI Controller Component http://www.egovframe.go.kr/wiki/doku.php?id=egovframework:mrte:ux_ui:ux_ui_controller_component_3.5 UX/UI Controller Component Outline egovframework offers the user an experience to enjoy one of the most

More information

/* ========================================================================== PROJECT STYLES

/* ========================================================================== PROJECT STYLES html { box-sizing: border-box; *, *:before, *:after { box-sizing: inherit; img { max-width: 100%; border: 0; audio, canvas, iframe, img, svg, video { vertical-align: middle; /* Remove gaps between elements

More information

Content Elements. Contents. Row

Content Elements. Contents. Row Content Elements Created by Raitis S, last modified on Feb 09, 2016 This is a list of 40+ available content elements that can be placed on the working canvas or inside of the columns. Think of them as

More information

Accessibility Crash Course for Web Developers. Dan Lewis Clemson University

Accessibility Crash Course for Web Developers. Dan Lewis Clemson University Accessibility Crash Course for Web Developers Dan Lewis Clemson University What is Web Accessibility? "Web accessibility means that people with disabilities can use the Web." W3C Web Accessibility Initiative

More information

@namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */ /* bidi */

@namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */ /* bidi */ / BEGIN LICENSE BLOCK Version: MPL 1.1/GPL 2.0/LGPL 2.1 The contents of this file are subject to the Mozilla Public License Version 1.1 (the "License"); you may not use this file except in compliance with

More information

JavaScript: Objects, BOM, and DOM CS 4640 Programming Languages for Web Applications

JavaScript: Objects, BOM, and DOM CS 4640 Programming Languages for Web Applications JavaScript: Objects, BOM, and DOM CS 4640 Programming Languages for Web Applications 1 Objects How group do variables Web and Apps functions fit to create in with a model the World Around Them? representing

More information

Building Web Applications

Building Web Applications Building Web Applications Mendel Rosenblum CS142 Lecture Notes - Building Web Applications Good web applications: Design + Implementation Some Design Goals: Intuitive to use Don't need to take a course

More information

LAMP Apps. Overview. Learning Outcomes: At the completion of the lab you should be able to:

LAMP Apps. Overview. Learning Outcomes: At the completion of the lab you should be able to: LAMP Apps Overview This lab walks you through using Linux, Apache, MySQL and PHP (LAMP) to create simple, yet very powerful PHP applications connected to a MySQL database. For developers using Windows,

More information

Intellicus Enterprise Reporting and BI Platform

Intellicus Enterprise Reporting and BI Platform Configuring Ad hoc Reporting Intellicus Enterprise Reporting and BI Platform Intellicus Technologies info@intellicus.com www.intellicus.com Copyright 2012 Intellicus Technologies This document and its

More information

COPYRIGHTED MATERIAL. Contents. Chapter 1: Creating Structured Documents 1

COPYRIGHTED MATERIAL. Contents. Chapter 1: Creating Structured Documents 1 59313ftoc.qxd:WroxPro 3/22/08 2:31 PM Page xi Introduction xxiii Chapter 1: Creating Structured Documents 1 A Web of Structured Documents 1 Introducing XHTML 2 Core Elements and Attributes 9 The

More information

Programmazione Web a.a. 2017/2018 HTML5

Programmazione Web a.a. 2017/2018 HTML5 Programmazione Web a.a. 2017/2018 HTML5 PhD Ing.Antonino Raucea antonino.raucea@dieei.unict.it 1 Introduzione HTML HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text

More information

Enhancing Responsive Layouts With

Enhancing Responsive Layouts With CSS Layouts Enhancing Responsive Layouts With JQuery Enhancing Responsive Layouts With JQuery You can do a lot with just HTML and CSS (particularly HTML5 and CSS3), and we can design beautiful and beautifully

More information

Web Programming Week 2 Semester Byron Fisher 2018

Web Programming Week 2 Semester Byron Fisher 2018 Web Programming Week 2 Semester 1-2018 Byron Fisher 2018 INTRODUCTION Welcome to Week 2! In the next 60 minutes you will be learning about basic Web Programming with a view to creating your own ecommerce

More information

Web UI. Survey of Front End Technologies. Web Challenges and Constraints. Desktop and mobile devices. Highly variable runtime environment

Web UI. Survey of Front End Technologies. Web Challenges and Constraints. Desktop and mobile devices. Highly variable runtime environment Web UI Survey of Front End Technologies Web UI 1 Web Challenges and Constraints Desktop and mobile devices - mouse vs. touch input, big vs. small screen Highly variable runtime environment - different

More information

Markup Language. Made up of elements Elements create a document tree

Markup Language. Made up of elements Elements create a document tree Patrick Behr Markup Language HTML is a markup language HTML markup instructs browsers how to display the content Provides structure and meaning to the content Does not (should not) describe how

More information

Professional PHP for working with MySQL

Professional PHP for working with MySQL Chapter 19 Professional PHP for working with MySQL PDO (PHP Data Objects) Pros Is included with PHP 5.1 and later and available for 5.0. Provides an object-oriented interface. Provides a consistent interface

More information

Web Software Model CS 4640 Programming Languages for Web Applications

Web Software Model CS 4640 Programming Languages for Web Applications Web Software Model CS 4640 Programming Languages for Web Applications [Robert W. Sebesta, Programming the World Wide Web Upsorn Praphamontripong, Web Mutation Testing ] 1 Web Applications User interactive

More information

Programming of web-based systems Introduction to HTML5

Programming of web-based systems Introduction to HTML5 Programming of web-based systems Introduction to HTML5 Agenda 1. HTML5 as XML 2. Basic body elements 3. Text formatting and blocks 4. Tables 5. File paths 6. Head elements 7. Layout elements 8. Entities

More information

Enhancing Koha s Public Reports Feature

Enhancing Koha s Public Reports Feature Enhancing Koha s Public Reports Feature A presentation to the Koha-Oz User Group Melbourne Athenaeum 18 August 2016 Bob Birchall / Chris Vella Reports in Koha can be made public FROM THE Koha MANUAL: Report

More information

Web Designing. Course Content. Basic HTML Tags. Getting started with CSS. Dealing with Images

Web Designing. Course Content. Basic HTML Tags. Getting started with CSS. Dealing with Images Web Designing Course Content Basic HTML Tags Basic HTML template Heading Tags Paragraph and Break tags Bold and Italics HTML lists Getting started with CSS Introduction to CSS CSS rules Where to put your

More information

ICT IGCSE Practical Revision Presentation Web Authoring

ICT IGCSE Practical Revision Presentation Web Authoring 21.1 Web Development Layers 21.2 Create a Web Page Chapter 21: 21.3 Use Stylesheets 21.4 Test and Publish a Website Web Development Layers Presentation Layer Content layer: Behaviour layer Chapter 21:

More information

$this->dbtype = "mysql"; // Change this if you are not running a mysql database server. Note, the publishing solution has only been tested on MySQL.

$this->dbtype = mysql; // Change this if you are not running a mysql database server. Note, the publishing solution has only been tested on MySQL. 0.1 Installation Prior to installing the KRIG publishing system you should make sure that your ISP supports MySQL (versions from 4.0 and up) and PHP (version 4.0 or later, preferably with PEAR installed.)

More information

Making a live edit contact list with Coldbox REST & Vue.js

Making a live edit contact list with Coldbox REST & Vue.js Tweet Making a live edit contact list with Coldbox REST & Vue.js Scott Steinbeck Mar 28, 2016 Today we will be making a contact database that you can quickly and easily manage using ColdBox and Vue.js.

More information

NAVIGATION INSTRUCTIONS

NAVIGATION INSTRUCTIONS CLASS :: 13 12.01 2014 NAVIGATION INSTRUCTIONS SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements CSS DROP-DOWN MENU

More information

HTML: Parsing Library

HTML: Parsing Library HTML: Parsing Library Version 4.1.3 November 20, 2008 (require html) The html library provides functions to read html documents and structures to represent them. (read-xhtml port) html? port : input-port?

More information

LA TROBE UNIVERSITY SEMESTER ONE EXAMINATION PERIOD. Subject Name: WEB DEVELOPMENT CAMPUS AW BE BU MI SH ALLOWABLE MATERIALS

LA TROBE UNIVERSITY SEMESTER ONE EXAMINATION PERIOD. Subject Name: WEB DEVELOPMENT CAMPUS AW BE BU MI SH ALLOWABLE MATERIALS LIBRARY USE LA TROBE UNIVERSITY SEMESTER ONE EXAMINATION PERIOD 2015 Student ID: Seat Number: Subject Code: CSE2WD Paper No: 1 Subject Name: WEB DEVELOPMENT Paper Name: Final examination Reading Time:

More information

PRÍLOHY PRÍLOHY. Príloha 1 Náhľady vybraných podstránok webovej stránky

PRÍLOHY PRÍLOHY. Príloha 1 Náhľady vybraných podstránok webovej stránky PRÍLOHY Príloha 1 Náhľady vybraných podstránok webovej stránky Príloha 2 Vybrané časti zdrojového kódu V Prílohe 3 sa nachádza len niekoľko vybraných častí zdrojového kódu projektu. Kompletný zdrojový

More information