Beginner PHP Tutorial - 157 - Protecting Email with String to Image Part 1 Video Lecture | PHP for Absolute Beginners: From Novice to PHP Master - Web Development

hello this is Alex from PHP academy' de
org and this is a PHP video tutorial for
the new Boston now in this video we're
going to be looking at how we can
convert a email address by processing it
dynamically in a well in this index.php
file and we want to generate an image
version of this text so convert the text
to graphic so a graphical representation
of the text in this generate PHP file
and we're going to do this using the PHP
GD library if you don't already have the
GD library installed or you don't think
you have installed follow on with the
tutorial and see if you have any output
if you don't you can or alternatively
you can use PHP info to check whether
it's installed now if it's not installed
I do recommend you use a package such as
xampp anyway this will already include
the GD library in your PHP installation
otherwise head over to Google Google for
it and you'll be able to download it ok
so we need to go through a variety of
stages in order to complete this the
first thing we need to do is we need to
change the header information of the
page what's going to happen is when we
visit this generator PHP page in our
browser our browser is then going to
interpret this as an image as a whole so
what we're not going to be able to do is
write our code here to produce the image
and then say have HTML data outside of
this so let me just talk a bit about why
you might need to do this as well so
email address is stored in plain text
format on a web page could be insecure
because you could be looking at bots
robots that will be going through web
pages looking for email addresses
themselves now this isn't a hundred
percent secure method obviously because
what we're doing is wherever we are
displaying text data whether it be in
plain text or an image format we're
still having the risk of
but being able to read our image data as
well and process this graphical image
data and convert it back to text so this
is just a way that you can add something
to your website that gives a certain
level of peace of mind to your users so
the first thing I mentioned that we need
to do remember working in this generate
PHP file and we're going to display the
image from index.php our users are never
going to visit generate dot PHP on its
own we're going to be doing everything
from index in the index page so the
first thing we need to do is change the
header and we do this with the PHP
header function so you may have seen
things like header location etc but what
you can do is change the content type
from this function so we can just type
in here o content type and then we can
choose a content type so if you've
looked at file types before and you know
what's returned from file types you know
that for a jpg file which is the format
we're going to be creating our image in
is image and then forward slash JPEG so
what this is done now is it's changed
the data type of our page let's just
open our browser we're already on
generate PHP we're going to refresh ok
so nothing's come up as of such to let
us know that this data type has been
successful but what happens if we come
down here and type some text down here
so now let's refresh our page and you
can see that we're not getting the text
output up even though we're just
specifying HTML content outside our tags
now we can successfully say that our
content type has been changed more or
less successfully so that it's been
changed so we've changed the content
type of our page which is extremely
important because we are going to be in
the end using a function called image
JPEG and we're going to be outputting
our created JPEG image to the page so
this stage here in the header is very
important so the next thing we need to
do is specify the email and also the
email length now the email address ml
length will come in two
into context later when we use this
length to determine how wide the image
is going to have to be so for now let's
just specify the email now what I'm
going to do for now is specify this as
just a static variable with static text
we're not going to be using dynamics
later we're going to be using the get
get you know we're going to be using get
in the browser to to process this so it
will look something like dollar
underscore get email but for now just so
it's easy to test as we go through our
program I'm just going to say example at
example.com so now what we need to do is
grab the length of this email so that's
basically the string length and what
this is going to do is we're going to
see how big our font creates each
character to be and multiply it by the
width of our image to be like that for
example if we had let's just say we had
Alex the text we were outputting was
Alex and the width of each character was
let's say I know five pixels we'd end up
with a five ten fifteen twenty to twenty
pixel in width image hopefully that
makes sense if not later when we use the
function you'll understand a bit more
about that so let's just put our full
email address in here so example example
comm and now let's create a new variable
called email length and that is going to
equal STR length we're using the STR Len
function and getting the length of the
email so let's just echo that out and
test that out let's get rid of this
header so we can test comment content
onto the page so 19 that sounds about
right so that's worked
okay so what do we need to do next well
we need to work out the font size that
we're going to be using and then we're
going to need to work out the width and
the height of the image now the height
of the image is absolutely fine that can
be just the individual height of the
characters that we're using so we're
going to use a function called image
font width and image font height to grab
the width and the height but for the
width we need to multiply it by the
length of this email address like I
demonstrated earlier the height can just
remain the same because we we don't need
to make it any bigger than the actual
text itself so let's choose a font size
so we can create a new variable called
font underscore size and for now I'm
going to choose that too for I was
playing around with this earlier and the
value for seemed like the most the most
sort of webpage like font size that I
could find without condensing the text
size too small to make it look too bold
or making it too big to make it look too
thin you know I had to play around with
it and I guess you can do too when
you've finished your program so the font
size is equal to four now what we need
to do is we need to determine the image
width and the height before we actually
create our canvas that we can start
painting on our text and our background
color