How to build a Website— Part II: Introduction

This second part of the introduction introduces PHP and JavaScript.

JavaScript is a powerful client-side language that can do everything from sending a form to altering text to writing to the HTML itself. JavaScript syntax consists of several main styles:

1. Braces. Braces are basically action containers or objects. function func() {alert("hello world");}

2. Parentheses. Parentheses are versatile, from function parameters to content: alert(hello);

3. Semicolons. Semicolons must end any line or command except: –an empty line –a line ending in a closing brace.

4. Properties. Properties, such as .css or .send, are signaled by a dot after the target (usually a variable).

JavaScript variables are signaled by the var keyword followed by a space and the variable name, then an equal sign and the variable's value. JavaScript constants are signaled by the const keyword and cannot be changed, unlike variables. JavaScript functions are essentially actions that are only run by a direct call:

function callMe() {

alert("I was called");

location.assign("somewhere.html");

}

~––––––––––––––––––––––––––~

<button onClick="callMe();">This button calls a JavaScript function.</button>

This code consists of a button that, when clicked, calls the function callMe(), which displays an alert and redirects the user. The location.assign() command here is useful for redirecting the user on the fly without a direct user trigger required. The HTML onClick attribute is used to run JavaScript when the element is clicked. I will mention now an amazing JS resource called jQuery. JQuery allows you to easily change and select elements without using a lot of code. For example, a normal element selection would look like:

var element = document.getElementById("anElement").value;

, whereas the same thing using jQuery would be:

var element = $("#anElement");

JQuery will be described in more detail later on.

PHP is a powerful server-side scripting language. Its power lies in its ability to handle form data and alter databases. PHP uses 'statements' applied to objects:

$hash = hash("Look at this");

echo($hash);

PHP variables, as seen above, are declared by prepending a dollar sign to the variable name. Thus, thy can be referenced in strings: echo("hello $name");

The PHP echo(); statement is perhaps the most important feature. This statement outputs its contents onto the screen. Why is this useful? PHP can actually echo variables directly into the HTML output. Thus, one can query the database, then promptly display the value in an element. PHP code is signaled by a php tag: <?php echo("$variable") ?>

The PHP is technically server instruction and intervention; it can be placed in the middle of a source with little effect. Combined with if statements, PHP is very powerful:

if($name == $nameQueryResult) {

if($password == $passwordQueryResult) {

echo("<p>Welcome $name!</p>")

} else {

echo("<p class="badge-danger">Wrong password</p>");

}

} else {

echo("<p class="badge-danger">Wrong username</p>");

}

This is actually a full-fledged authentication detector (though not a very secure one). It detects if the name entered is correct, and if it is, continue; otherwise, tell the user that their name is wrong. If the name is correct, check the password. if it is also correct, display a success message; otherwise, display an error message.

PHP is a very powerful tool; its many functions include a database query:

$connect = mysqli_connect("serverName", "username", "password", "databaseName");

if(!$connect) {

die("Connection Failure");

} else{

}

$query = mysqli_query($connect, "SELECT `columnName` FROM `tableName` WHERE condition...");

$queryRow = mysqli_fetch_row($query);

$rowValue = $queryRow[0];

echo($rowValue);

This script runs a full SQL query.

IMPORTANT: These examples use a MySQL structure on an Apache server.

First, we connect to the database, ending the script and displaying an error on failure. Next, we run the query, using our database connection, on a table in our database. We SELECT a column FROM the table WHERE a condition is true. Then, we get the row containing the desired data as an array by column. We then get that value into a normal variable.

This only scratches the surface of PHP, but there is one last important concept. The $_SESSION variable is a storage array that stores data in a session. The file must be begun by session_start(); to access $_SESSION data. An example:

<?php

session_start();

$_SESSION['data1'] = $rowValue;

//This saves the data to $_SESSION

?>

––––––––––IN ANOTHER FILE–––––––––

<?php

session_start();

~~~~~~~~~~~~~~~~~~~~~

$savedData = $_SESSION['data1'];

?>

Saving and retrieving $_SESSION data is fairly simple.

That's all for now; the next section will be on the text editor, so you can experiment with HTML files. Valete, as the Romans would say!

__RESOURCES__

http://www.minecaptain.com—This isn't really a resource, but it is one of the only places to contact me.

A blank HTML starter file— will be linked to in every post.

Well, that's all for now!

Link