PHP For Beginners, Ep 3 - Your First PHP Tag

Summary

In this instructional video, the presenter guides viewers through setting up their first website using PHP. They start by creating a directory for the site, then proceed to build a basic HTML file named 'index.html'. The presenter emphasizes the importance of the 'index' filename for web servers. After demonstrating a simple 'Hello World' example, they transition to PHP by renaming the file to 'index.php' and introducing PHP blocks to create dynamic content. The tutorial concludes with an encouragement to practice PHP by echoing different strings across the document, aiming to familiarize users with PHP syntax and functionality.

Takeaways

• 🛠️ The video is a tutorial on setting up the initial steps for creating a website using PHP.
• 📂 The process begins by creating a directory for the website in the user's home directory, which can vary based on the operating system and the method of PHP installation.
• 🍻 If installed via Homebrew, websites can be stored anywhere, but other methods like MAMP might require specific directories.
• 📁 The user creates a 'websites' directory and then a 'demo' directory within it to house the project files.
• 🖥️ The user opens their chosen code editor to start working on the project files, emphasizing the importance of seeing only the project files for focus.
• 📝 The first file created is 'index.html', starting with basic HTML boilerplate and simplifying it for the tutorial.
• 🌐 The user mentions that understanding of HTML and CSS is assumed, suggesting to research basics if unfamiliar.
• 🔗 The video demonstrates how to view the HTML file in a browser, using PHP's built-in server with the command 'php -S localhost:8888'.
• 🔄 The importance of the 'index' filename is highlighted, as it is the default page served by the server.
• 📝 The tutorial transitions from static HTML to dynamic PHP by renaming 'index.html' to 'index.php'.
• 🔑 The user introduces PHP syntax, explaining how to create a PHP block and use 'echo' to output strings.
• 🎓 The tutorial concludes by encouraging practice with PHP 'echo' to become comfortable with the syntax and its usage in a webpage.

Q & A

What is the first step mentioned in the script for setting up a new website?

The first step is to open the terminal that was set up in the previous episode and create a directory for the new website.

How does the method of creating a new site depend on the installation of the environment?

The method of creating a new site depends on how you installed PHP and your server environment. For example, if you installed PHP using Homebrew, you can store website directories anywhere, but if you used MAMP, you should follow the specific directory instructions provided in the documentation.

What command is used to create a new directory in the terminal?

The command used to create a new directory is 'mkdir' followed by the name of the directory.

What is the significance of the 'index' filename in a web server context?

The 'index' filename is significant because it is the default file name that a web server looks for when serving a directory. If the index file is renamed, the server won't be able to find it upon a refresh.

How can you view the results of your HTML file directly in a browser?

You can view the results by either using the inline viewing functionality of your editor or by loading the file directly in a browser using the file's URL.

What command is used to start PHP's built-in web server?

The command to start PHP's built-in web server is 'php -S' followed by the server's hostname and port number, for example, 'php -S localhost:8888'.

Why is it recommended to stick with 'echo' instead of 'print' when writing PHP?

While both 'echo' and 'print' can be used to output strings in PHP, 'echo' is generally preferred as it is more commonly used and has some slight differences that make it more suitable for outputting strings.

What is the purpose of the PHP opening and closing tags in a PHP file?

The PHP opening and closing tags are used to designate that the code between them should be treated as PHP code, not HTML, allowing for dynamic content generation.

What should you do if the HTML content looks foreign to you according to the script?

If the HTML content looks foreign, it is recommended to pause the series and research HTML basics, such as 'HTML for Dummies', to get comfortable with HTML and CSS before proceeding with the PHP course.

What is the easiest way to print a string in PHP as mentioned in the script?

The easiest way to print a string in PHP is by using the 'echo' statement followed by the string in quotes and ending with a semicolon.

Outlines

00:00

📁 Setting Up the Development Environment

The speaker begins by ensuring that the tools for web development are in place and proceeds to guide the audience through setting up a directory for their first website. The process varies depending on the environment setup, such as using Homebrew or MAMP, and the speaker emphasizes checking the documentation for the specific installation path. They demonstrate creating a 'websites' directory in the home folder and then a 'demo' directory within it. The audience is instructed to open their chosen code editor and create a basic 'index.html' file with simple HTML boilerplate. The speaker also advises that if the HTML seems unfamiliar, the audience should first learn the basics of HTML and CSS before proceeding with the series.

05:00

🔧 Transitioning to PHP for Dynamic Content

The second paragraph focuses on transitioning from a static HTML page to a dynamic one using PHP. The speaker renames the 'index.html' file to 'index.php' and explains that while PHP's built-in web server will still serve the page, it now has the capability to process PHP code. The audience is guided to create a PHP block within the file and use the 'echo' statement to print 'Hello World'. The speaker clarifies that 'echo' is used to output text onto the page and is similar to the 'print' function, with minor differences. The goal is to become comfortable with PHP syntax and to practice inserting PHP blocks in various parts of the document to output different strings. The importance of the 'index' filename for default page serving is also highlighted.

Keywords

💡Tools

In the context of the video, 'tools' refer to the software and utilities necessary for web development, such as a code editor and a server environment. The script emphasizes that having these tools in place is a prerequisite for starting the project, indicating their fundamental role in the web development process.

💡Browser

The 'browser' is the application used to access and view web content. In the script, the browser is the medium through which the viewer will see the results of the web development process, highlighting its importance in testing and displaying web pages.

💡Terminal

The 'terminal' is a command-line interface for interacting with the operating system. In the script, the terminal is used for executing commands to set up the development environment and to start the web server, demonstrating its utility in web development tasks.

💡Directory

A 'directory' is a folder used to organize files on a computer. The script instructs the viewer to create a directory for their website, illustrating the importance of file organization in web development projects.

💡PHP

PHP is a server-side scripting language used for web development. The script discusses the installation of PHP and its use in creating dynamic web content, underscoring its role as a core technology for building websites.

💡HTML

HTML, or HyperText Markup Language, is the standard markup language for creating web pages. The script begins by creating a simple HTML file, 'index.html', to demonstrate the transition from static to dynamic web content using PHP.

💡Boilerplate

A 'boilerplate' is a template or pre-configured code that provides a starting point for a project. The script mentions using boilerplate for an HTML file to simplify the setup process and ensure a standard structure.

💡Echo

In PHP, 'echo' is a language construct used to output one or more strings. The script uses 'echo' to demonstrate how to display dynamic text on a web page, highlighting its use in generating content.

💡PHP Block

A 'PHP block' is a section of code enclosed within opening and closing PHP tags. The script introduces the concept of PHP blocks to differentiate PHP code from HTML, showing how to integrate PHP into a web page.

💡Development Server

A 'development server' is a local server used for testing and development purposes. The script explains how to start a PHP development server to preview the web page in a browser, emphasizing the importance of a server for running PHP scripts.

💡Index File

The 'index file' is the default file that a web server looks for when accessing a directory. In the script, the importance of the 'index' naming convention is discussed, as it ensures the server serves the correct file when the directory is accessed.

Highlights

Setting up tools for creating a website and starting with a simple step in the browser.

Creating a directory for the first website based on the user's environment setup.

Using Homebrew for PHP installation allows flexibility in choosing website directory locations.

Different installation paths may require specific directory structures for websites.

Navigating to the home directory on Mac using the tilde and forward slash.

Creating a 'websites' directory to organize all website projects.

Naming the first project 'demo' and creating a directory for it.

Opening the chosen editor to start working on the project files.

Creating a new file 'index.html' for a basic static HTML page.

Simplifying the HTML boilerplate by removing unnecessary meta tags.

Recommendation to learn HTML basics before proceeding with the series.

Using the terminal to start a PHP built-in web server for previewing the site.

Differences in server setup based on the environment, like MAMP including Apache or Nginx.

Renaming 'index.html' to 'index.php' to switch to dynamic PHP content.

Understanding the importance of the 'index' filename for web servers.

Writing PHP code within a PHP block to create dynamic content.

Using 'echo' to print a string in PHP and the importance of the semicolon.

Encouragement to practice inserting PHP echo statements in different parts of the document.

Building the first dynamic website using PHP and the importance of getting comfortable with PHP syntax.

Transcripts

okay so our tools are now in place which

means the next baby step is a little one

let's just see if we can get something

in the browser all right let's get going

all right so i hope you're working along

if so open up the terminal that you set

up in the last episode and i'd like to

create a directory for our first website

but real quick and this will apply

across the board for this series the way

you go about creating a new site will

slightly depend upon

how you installed your environment how

you installed php in your server so for

example if you went with homebrew like i

demonstrated in the last video

you can store your website directories

anywhere you want

on the other hand if you went with

something like map

have a look at the documentation i think

they will give you a specific directory

where you should create your new website

folders so again just look at the

documentation for whatever

installation path you chose and then

follow that in my case i used homebrew

so i can put my websites anywhere i want

in that case i will go to my home

directory and on the mac i can cd to

that home directory by using tilde

forward slash

for windows i believe it'll be something

like cd to sql in and then maybe users

your name and desktop i think that's

right okay let's make a directory for

all of our websites i can use this

command

mkdir make directory and we'll call it

websites

whatever you want some people call it

code it doesn't matter

okay now i can cd to that directory

change directory

to websites

okay so now yeah we can name this first

project anything we want i will just

call it demo so once again make

directory called demo and we'll cd into

that new folder

okay i think we're ready to get started

open up the editor that you chose in the

last episode

and then in my case i can choose open

here but for you it might be file and

open directory something like that

okay and if i open my home directory

sure enough i can see that websites

folder at the top and demo is the one i

want to open okay i'm excited so let me

click up here on the top left and i only

want to see my project files and we're

all set so let's right click and choose

new file

and to begin i'm going to call it

index.html

not php this is a simple static html

file now most editors will include any

number of snippets for common tasks in

my case i want some basic boilerplate

for an html file and this is what it

gives me but let's keep it super simple

i'm going to get rid of these two meta

tags and keep it like this

all right now actually a quick note if

what i've just done here in this html

looks foreign to you you may not be

ready for this particular series i would

hit the pause button and research

something like html for dummies go

through that get a little comfortable

learn a bit of css and then you're ready

for this course okay

so yeah let's just say h1 a heading one

and we'll say hello world

every series has to begin with a simple

hello world

okay so now i want to view it in the

browser so it may turn out that your

editor has some kind of functionality

for viewing the results inline like you

see here but why don't we just load it

directly in a browser so that we're all

on the same page

so to do that i will return to the

terminal and let's run php dash h this

brings up the help for php and have a

look right here bash s runs with a

built-in web server it sounds like this

is what we want but real quick once

again a discrepancy if you went with

something like mamp they will include a

server for you you probably have apache

or nginx and they will have instructions

for how to preview your website in the

browser otherwise you'll need to boot

one up yourself and that's what i need

to do here

so i can say php dash s and let's go

with localhost and a port how about 8888

all right we have a development server

running and in fact i should be able to

command click on this url to access it

otherwise just copy it and paste it into

a browser all right congratulations

you've now booted up a server and we're

displaying a static piece of html great

but i want you to notice that it

automatically worked and part of that is

because i named the file index so for

example if i were to rename this file

and on phpstorm i can go to refactor

rename or there's always a shortcut and

yeah if i changed it to anything else

well keep in mind as soon as i return to

the browser and refresh it won't be able

to find that so yeah you'll often find

that index is an important file name

okay but now i want this to be dynamic

i'm assuming you already have a little

experience building a static website at

least the basics to instead make it

dynamic i'm going to switch to php

so once again i will rename this file

to

index.php

now again notice if i don't change

anything at all because i'm running

php's built-in web server it'll still

work just like the previous example but

now we have the full power of php at our

fingertips so let's have a look here

let's clear up this h1 tag and let's

open up our first php block

we do that by typing less than sign

question mark php and then a space and

then another question mark and a greater

than sign

and i'll warn you it's really confusing

the first time you do it maybe the first

10 times you do it you'll have to look

at the keyboard to make sure you're

hitting the right keys but i promise

after a while you won't even think about

it okay so now we're basically

designating that whatever occurs between

or inside this php block should be

treated as not html but php

so for example if we just did something

like this and i once again wrote hello

world this is not going to work and in

fact if you have a good editor it'll let

you know hmm there's something going on

here

switch back to the browser reload it and

we get a parse error so notice we're

trying to interpret this php but it has

no clue what this is because it's not

html we have to write using the php

language

so i'll show you the easiest way to

simply print a string we can do that by

saying echo and then within quotes your

string hello world and then at the very

end add a semicolon and in fact i just

used the word string which can be a

little confusing at first whenever you

hear that word all i mean is basic text

a string of characters that mean exactly

what you read here they are not special

symbols or identifiers that the language

will understand it's literally text

okay all right so think about what's

going on here when the page loads we

display a heading level 1 tag and as its

text content we open up a php block and

we echo out the string hello world and

yeah i know echo can be a little

confusing think of it just like print

this text onto the page and in fact

print is something that we could use

here and it's mostly the same as echo

there's some slight differences but but

still

stick with echo most people do

all right so if we switch back give it a

refresh we get the exact same thing as

our static version but again i hope

you're excited by definition we are now

building our first dynamic website that

uses php and we'll keep taking this

further and further

so to finish up today's learning i want

you to play around with echoing

different strings hello universe um

hello town whatever you want practice

inserting that text in other areas of

the document maybe add a paragraph tag

where you echo out some gibberish string

the entire point is to become

comfortable with writing this awkward

sequence of characters you'll get it