Web Dev – Coding for the Interwebs – What this covers

View Github Repository Open presentation in a new window

hack-rice

See all presentation from hack-rice

Web Dev – Coding for the Interwebs – What this covers

0 0

webdev

A presentation for hack.rice

On Github hack-rice / webdev

Web Dev

Coding for the Interwebs

Created by Sal Testa and Andrew Capshaw

What this covers

  • HTML for content
  • CSS for styling
  • Javascript for scripting
  • PHP for backend

HTML5

Defines Structure

Very Simple Site

<!DOCTYPE html>
<html>
    <head>
        <title>HackRice 2013 Project</title>
    </head>
    <body>
        <h1>Hello, world!</h1>
    </body>
</html>

Including CSS and Javascript

<!DOCTYPE html>
<html>
    <head>
        <title>HackRice 2013 Project</title>
        ...
        <link href="css/bootstrap.css" rel="stylesheet">
    </head>
    <body>
        ...
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="js/bootstrap.js"></script>
    </body>
</html>
Later listings take precedence

#id and .class

<div id="welcome-text">Welcome!</div>
<div class="container">
    <button class="button button-red" id="cancel">No</button>
    <button class="button button-blue" id="accept">Yes</button>
    <button class="button button-yellow" id="not-sure">Maybe</button>
</div>
Ids and classes are used by css and javascript to reference specific indvidual or groups of elements.

CSS3

Provides Style

Tag types

body {width: 500px;}
.tag-class {
    padding: 20px 40px;
    width: auto;
}
#tag-id {
    height: 100px;
    float: left;
}
Notice that "#" delimites an id and "." a class.

Spacing Tags

.tag-class {
    padding-top: 40px;
    width: auto;
}

Javascript

Builds Functionality

Basic Javascript

function biggest (numbers) {
    var current = numbers[0];
    for (var i = 0; i < numbers.length; i++) {
        if (numbers[i] > current) {
            current = numbers[i];
        }
    };
    return current;
}

JQuery

/* Run when the document is finished loading. */
$(document).ready(function() {
    $("#messageButton").click(function() {
        var name = $("#name").val();
        alert("Hello "+name+", it's nice to meet you!");
    }
});

AJAX via JQuery

function storeName(userName) {
    $.ajax({
        url:'./process_name.php', // destination
        type:'POST', // sending via POST or GET
        data: {
            'name':userName
        }
    });
}

AJAX with Response

function storeName(userName) {
    $.ajax({
        url:'./process_name.php',
        type:'POST',
        data: {
            'name':userName
        }
    }).done(function(data){
        var response = JSON.parse(data); // makes a map out of the data
        if(response['status'] == 'success') {
            alert("Everything is dandy!");
        } else {
            alert("Today is a dark day indeed!");
        }
    });
}

PHP

Move Data

Suggested Tools

Simple PHP function

<?php
function biggest($numbers) {
    $current = $numbers[0];   
    for ($i=0; $i < count($numbers); $i++) { 
        if(numbers[$i] > $current) {
            $current = numbers[$i];
        }
    }
    return $current;
}
?>

Example Config File

<?php /* config.php */
define( 'DB_HOST', 'localhost' );
define( 'DB_DATABASE', 'hackrice' );
define( 'DB_USER', 'root' );
define( 'DB_PASSWORD', 'password' );
?>
<?php /* other_thing.php */
require_once( 'config.php' );
...
?>

Database Retrieval

<?php
function get_user_by_id($uid) {
    $DB = new mysqli( DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE ); 
    $query = 'SELECT name FROM users WHERE uid = "'.$uid.'"';
    $result = $DB->query($query);
    $row = $result->fetch_assoc();
    return $row['name'];
}
?>

Database Insertion

<?php
/* process_name.php */
$name = $_POST['name'];
$DB = new mysqli( DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE ); 
$query = 'INSERT INTO users VALUES "'.$name.'"';
$DB->query($query);
$response = array();
$response['status'] = 'success';
echo json_encode($response);
?>

Happy hacking this weekend!