How to code your first website - Part 2

How to code your first website - Part 2

Hi there and welcome back to part 2 of this tutorial. In the first part of the tutorial how to build a website, we discussed servers and how to use it to display a simple HTML page. In this one we’re going to unveil the power of PHP to dynamically generate HTML page.

How to generate HTML with PHP

All PHP code you want to write have to be inside a file with .php extension, but that can be an easily change the server settings to accept also .html or .htm. For now, we’ll create files with .php extension.

<?php 
	// index.php
	echo "Hello world!";
?>

We just created an index.php file that is returning a simple text to the browser. As you can notice all PHP code must be inside <?php ....code... ?>.

Basic PHP syntax

<?php 
	// index.php
	echo "Text"; // prints text
	
	$var = 0; // a variable can hold any kind of data
	$foo = "Me";
	$bar = false;

	if ($bar) {
		echo $foo;
	}

	for ($i = 0; $i < 10; $i++) { // loop 10 times
		$var++; // increment $var by 1
	}

	$foo = $foo." & You"; // Me & You

	function testMe($number) {
		return $number * $number;
	}

	$var = testMe($var);
	echo $var;  // 100

	$container = []; // array

	while ($var > 0) { // loop while $var is bigger than 0 - make sure it will reach 0
		$container[] = $var;
		$var /= 2; // similar to $var = $var / 2;
		$var -= 10; // similar to $var = $var - 10;
	}

	echo $container[0]; // print the first element from array

	$hash = ["me" => "you"];
	echo $hash["me"]; // print 'you'

?>

Create a dynamic website with PHP

Having some basics about PHP, we can start creating our website.

<?php 
	
	// index.php

	function generateHtml($name) {
		echo "
			<html>
			<head>
				<title>{$name}</title>
			</head>
			<body>
				<p>Hello {$name}</title>
			</body>	
			</html>
		";
	}

	if (isset($_GET['name'])) {
		$name = $_GET['name'];
	} else {
		$name = 'World';
	}
	$name .= ' !';

	echo generateHtml($name);

?>

Now save the file and go to http://localhost/index.php and then try http://localhost/index.php?name=mykidocoder. Read the rest of the article to understand more about what you just did !

Learning about HTTP requests

An HTTP request is a package of data sent back and forth between browser and server. A request contains some properties from which the most important are: method, headers, status code. There are a lot of HTTP methods (you can read more about them here), but in this tutorial, we’re going to discuss only GET and POST.

GET method

Is the way of sending parameters to other pages with the help of URL. It is used only with nonsensitive data, for example, search function, showing a profile page etc.

POST method

Is a more safe method of sending data, used in functions like signup, sign in, payments, writing reviews etc. Why don’t we use only POST? You can’t see the URL, is slower, hard to refresh the page, impossible to bookmark a page etc.

Headers

Headers are a more advanced topic and really useful at this moment. The only thing worth mentioning now is that headers are mostly used for security, cache control, data types, agent information etc.

Status codes

Available in a response request the status codes will inform the browser/application if everything went well. Example of most common statuses:

  • 200 OK
  • 40x Client errors
  • 50x Server error

You can read here more about status codes

Reading Data from a GET & POST request

All URL variables can be read using the $_GET command. All variables sent with POST method can be read using the $_POST command.

<?php 
	
	// index.php

	function generateHtml($name) {
		echo "
			<html>
			<head>
				<title>{$name}</title>
			</head>
			<body>
				<p>Hello $name</title>
				<form method=\"post\" action=\"{$_SERVER['PHP_SELF']}\">
				<input type=\"text\" name=\"text\" />
				<input type=\"submit\" name=\"button\" value=\"Send\" />
				</form>
			</body>	
			</html>
		";
	}

	if (isset($_POST['text'])) {
		$name = $_GET['text'];
	} else {
		$name = 'World';
	}
	$name .= ' !';

	echo generateHtml($name);

?>

Because is not very convinient to write html code inside an echo, having to use \ all the time to escape closing quotes, I will show you another way that you can do it at an easy level. In a later post I will show you how to separate completely these languages and make coding more fun.

<?php 
	
	// index.php

	if (isset($_POST['text'])) {
		$name = $_GET['text'];
	} else {
		$name = 'World';
	}
	$name .= ' !';

?>

<html>
<head>
	<title><?= $name ?></title>
</head>
<body>
	<p>Hello <?= $name ?></title>
	<form method="post" action="<?= $_SERVER['PHP_SELF'] ?>">
	<input type="text" name="text" />
	<input type="submit" name="button" value="Send" />
	</form>
</body>	
</html>

Keep practicing around requests and basic PHP commands and see you on the next tutorial!

Share on

See Also
Send us a few words.
What would you like to see different on this blog?
👌
👎