Course

prework
v3.0

1
 Agenda

1. Before you start the prework 10. Learning HTML and CSS
2. What and when? - the right order of completing 11. HTML and CSS workshops
the prework 12. Learning how to use Linux
3. Preparing your computer for work 13. Introduction to PHP programming
4. Ubuntu installation 14. PHP workshops
5. macOS installation 15. IDE: your future work tool
6. Alternative – VirtualBox 16. What can you do if you have some time left?
7. Installation of the necessary software 17. Sites that may interest you: a list of useful links
8. PHPStorm basics
9. Learning GIT

2
Before you start
the prework

3
 Fast typing

You will be able to benefit much more from However, if your score is below 200
the course if you do not have problems with characters per minute, then you should
fast typing. This skill will also be required from practice fast typing.
you at work. We recommend using the following sites:
So take this test, to check your typing speed: http://www.keybr.com
Speed Typing Online
If your score is over 200 characters per
minute, you do not have to worry about
anything: you will easily cope with fast typing
during the course.

4
 How do web browsers work?

Before the course, you should become Do you want to learn more?
familiar with the way modern web browsers Read this article:
work. http://www.html5rocks.com/en/tutorials/interna
ls/howbrowserswork
This is very clearly explained in the article that
you will find on the following page:
How does web browser works?

5
What and when?
- the right order
of completing the
prework

6
 Step-by-step: How to go through the prework?

It is important to go through the prework in detail. You will need the knowledge from prework from
the very first day of the course, so you cannot neglect anything.

Preferably, you should go through the prework in

the following order: Remember that the HTML and CSS workshops
must be completed 2 weeks before the course
1. Preparing your computer for work.
starts. Their successful completion is a
2. Learning GIT (a version-control tool). prerequisite for admission to the course.
3. Learning HTML and CSS.
4. HTML and CSS workshops.
5. Learning how to use Linux.
6. Learning PHP.
7. PHP workshops.

7
Preparing your
computer for
work

8
 Preparing your computer for work

This part of prework should take you about one hour.

9
 Preparing your computer for work

In order to work on a back-end course, you will need a computer with the Linux system and the
LAMP stack. On the following slides you will learn:

What is LAMP? If you have a computer with the macOS, go to

the slide entitled “Installing macOS”.
How to install Linux on your computer?
In this case, it is not necessary to install the
How to verify the installation for correctness? Linux system.

10
 What is LAMP?

LAMP is an acronym made up of the first letters of the name of the software that we will use for learning
and that is the basis for PHP programming. More specifically:

(L) LINUX: Linux is a family of operating
systems. Most of the servers on which
websites are hosted are based on these
systems and most of the programmers work
with them. There are many Linux systems.
(A) Apache: Apache is the most widely used
server in the world. Its main advantages are:
multithreading, scalability and security.
(M) MySQL: MySQL is one of the most
popular databases. During the course you will
learn how to work with MySQL and its SQL
language.
(P) PHP: PHP is one of the most widely used
languages for server-side programming.

11
 Linux installation
NOTE

Remember, the installation of the second operating system is complicated. However, if you follow
our instructions and read and understand all messages, then the installation should be completed
successfully.
Nevertheless, data loss is possible, so we recommend you to make a backup copy of all
important files from your computer before installation.
If, for any reason, you do not want to install the Linux system on your computer, you can always use a
virtual machine – VirtualBox (described in chapter "Alternative – VirtualBox"). This solution, however, can
be much slower and make it very difficult for you to work during the course.

12
 Ubuntu
installation

13
 Linux installation

If you already have the Linux system installed, you can go straight to the installation of the necessary
software (described in chapter "Installation of the necessary software").

Your system must fulfill the following requirements for our installer to work:
have the APT-GET package manager,
have the packages for PHP 7.

14
 Linux installation

Linux installation is very simple. It is best if you use Ubuntu 18.04.1 LTS – it is one of the simplest
systems from the user perspective.
The system works on both PCs and Macs.
In order to install it, you have to go through the following steps:
Preparation of the USB installation disc.
Installation next to the existing system.
Verification of installation.

15
 Preparation of the installation disc.

Before installation, download an ISO file with the system:

http://www.ubuntu.com/download/desktop
If you do not know how to check if your computer is 32-bit or 64-bit, you can find the instructions here:
http://www.computerhope.com/issues/ch001121.htm

Then you need to create the USB installation media with the system.
You will find how-to instructions here:
On the Windows system:
http://www.ubuntu.com/download/desktop/create-a-usb-stick-on-windows
On the macOS:
http://www.ubuntu.com/download/desktop/create-a-usb-stick-on-mac-osx

16
 Booting from a USB device

On PCs:
If your computer is on, start by connecting your installation media and restart the computer.
Most computers will allow you to temporarily change the order of startup devices. You can do it by pressing a
specific key, usually F12, but sometimes also Esc or another function key. To be sure, check the information on
the screen, or check your computer manufacturer’s website.
Press F12 (or other suitable key) and select the installation media: usually it will be USB-HDD or a string that
contains the word USB, but the words used may vary. If you choose incorrectly, your computer will probably start
as usual. In this case, restart your computer, and try to choose a different option.
Right after selecting the correct installation media, on the screen you should see a list of options to choose
from. Select Install Ubuntu. If you do not see any options, just wait. Ubuntu should start automatically – in
this case you will find the installer icon on your desktop. Click it.

17
 During installation

All installation steps are described here:

http://www.ubuntu.com/download/desktop/install-ubuntu-desktop

During installation, select the installation option next to the existing system.

In this way, you will be able to choose which system you want to run when you start your
computer. Once you complete the course, you will be able to regain the space taken by this
system.

If you cannot see the option, stop installing the system

and contact your mentor!

18
 After installing the system

Following installation, you should see the system selection menu (also known as GRUB) when you start
your computer. After choosing the Ubuntu option, the new system should start.
If everything works correctly and you can log into both systems, you can proceed to the installation of
PHP and other components needed for the course (described in chapter "Installation of the necessary
software").

19
 macOS
installation

20
 macOS installation

If you have the macOS installed already, then on subsequent slides you will learn how to use our
installation script to prepare your computer for work.

Your system must fulfill the following requirements for our installer to work:
have a terminal,
you have to know your account password to be able to install packages as root,
during installation, you must have the Internet access.

21
Alternative –
VirtualBox

22
 VirtualBox

An alternative to installing Linux next to your regular system is to use the VirtualBox software.
VirtualBox is a special software program that can create a virtual machine on our computer. A virtual
machine simulates a real computer that has separate access to the resources of our computer.
Virtual machines are characterized by high security (they cannot make any changes on our real
computer), but also inferior performance (they are simulations and have access only to some of our
computer’s resources).

23
 VirtualBox – installation

VirtualBox installation is extremely easy. It is enough to download the installation file from:
https://www.virtualbox.org/wiki/Downloads and run it.
The wizard will guide us through the installation steps.

24
 VirtualBox – creating a new machine

After installing the VirtualBox software program, we will have to create a new virtual machine. To this end,
run the program and select the New option in the top application bar.

25
 VirtualBox – creating a new machine

Then enter the name of our machine (it can be any name, but you cannot have two machines with the
same name), and select:
Type: Linux
Version: Ubuntu

26
 VirtualBox – creating a new machine

The next step is to allocate RAM to which our machine will have access. The higher the allocation size,
the faster the machine operation will be. The optimal size is ¾ of the total RAM.

27
 VirtualBox – creating a new machine

The next step is to allocate space on the hard disk to which our machine will have access. It should be at
least 30 GB. We do this by selecting the option:
Create a virtual hard disk now.

28
 VirtualBox – creating a new machine

Then the software program will guide us through a few questions concerning the creation of a virtual hard
disk for our machine. Select the following options:
File type: VDI (VirtualBox Disk Image)
Storage on physical hard disk: Dynamically allocated
File location and size:
It will be best if the file name is the same as the name of the machine.
The size should be at least 30 GB.
Once these steps are completed, your virtual machine should be ready for action.

29
 Increasing the performance of your virtual machine

In order to increase the performance of our virtual machine, we can increase the allocation of the
graphics memory. In order to do this, follow these steps:
1. run the virtual machine settings (right-click on
the name of your machine and select
Settings),
2. go to the Display tab,
3. move the slider of the Video memory to the
right so that the machine can use
approximately ¾ of the memory available for
your computer.

30
 Installing Linux on a virtual machine

When you first start your virtual machine, VirtualBox will prompt you to specify the installation media from
which it will install the Linux system. Select the CD ISO image file for the Ubuntu system.

The Ubuntu installer will launch automatically, and

the wizard will take you through all the necessary
steps.

31
 Installing Linux on a virtual machine

During installation, select the option: Erase disk and install Ubuntu.

This will format the Virtual Machine disk, not the

actual disk in the computer.

32
 After installation

After installing the operating system, you can install additional software on your Virtual Machine. This will
boost the performance, as well as add clipboard sharing and automatic screen resize functionalities.
To install Guest additions, you have to:
start your virtual machine,
click Devices in the top menu of the virtual machine that is running,
click Install Guest Additions CD Image...,
restart your virtual machine.
If everything works correctly and you can run your virtual machine, you can proceed to the installation of
PHP and other components needed for the course described in chapter "Installation of the necessary
software").

33
Installation of the
necessary
software

34
 LAMP installation

For now, you have the new Linux/macOS installed. But we still need to install other necessary
components, namely:
1. PHPStorm (the IDE in which you will work),
2. PHP interpreter,
3. MySQL and the PHPMyAdmin administration tool,
4. Apache/nginx server,
5. Postfix server (for sending e-mails with the use of PHP),
6. Xdebug
7. and other useful software programmes

35
 LAMP Installation – information for Linux

The installation process is very simple. First you need to download the installation script:
Ubuntu – save the page content from the given address as install.sh or create a file with this name
and paste the page content into it.

To use the script, you have to:

1. Open the terminal and then enter the following
commands:
2. Go to the directory with the downloaded files by
typing:
cd Downloads – for an English version of
the system
cd Pobrane – for a Polish version of the
system
Press Enter after each command line.
3. Assign execute permission to the file by
entering the command (once you enter the
command, the system will prompt you to enter
the password – it is normal if the characters
you type are not displayed):
sudo chmod 777 ./install.sh
4. Run the file by entering the command (your
computer must be connected to the Internet):
sudo ./install.sh

36
 Verification of installation – information for Linux

After installation, check if all components have been successfully installed. To do this, run the newly
installed system, and check:
1. Has the Workspace directory appeared in your home directory?
2. Do you see an empty file list after entering http://localhost?
3. When you add any file to the Workspace directory, does the file appear on the list located at
http://localhost (obviously, after the page is refreshed)?
4. When you enter http://localhost/phpmyadmin do you see the login page of PHPMyAdmin? – if there
are errors on the page, refresh it – it is often the case that several information is displayed during the
first run.

37
 Installation – information for macOS

The installation process is very simple. First you need to download the installation script:
macOS – save the page content from the given address as install_macOS.sh or create a file with
this name and paste the page content into it.
To do this, enter the given address in Safari, then select the save the page option from the menu and
save the file on the desktop as install_macOS.sh – you will find screenshots from subsequent stages
of the installation on the next slides.
The installation file has been prepared for the macOS Sierra version.

38
 Installation – information for macOS

To use the script, you have to:

3. Assign execute permission to the file by
1. Open the terminal and then enter the following entering the command (once you enter the
commands: command, the system will prompt you to enter
2. Go to the directory with the downloaded files by the password – it is normal if the characters
typing: you type are not displayed):
chmod 777 ./install_macOS.sh
cd Desktop – for an English version of
the system 4. Run the file by entering the command (your
computer must be connected to the Internet):
cd Pulpit – for a Polish version of the ./install_macOS.sh
system

Press Enter after each command line.

39
Installation – downloading the file

After entering the address, we will be redirected to

the appropriate address.

40
Installation – downloading the file

We choose the file save option, with data settings

as shown on the screen.

41
Installation – downloading the file

In the pane displayed, we choose Don't append

Next, we use the console to go to the desktop and
run the script.

42
Installation – confirmations

During the installation process, we will first be

asked to confirm the installation of special console
tools. We confirm by clicking on Install, and then
accept the licence agreement and wait for the
installation to complete.

43
Installation – further installation

After completing the Xcode installation, we click on

Done, and then go to the console and press Enter.

44
Installation – further installation

We need to monitor what is happening in the

console, because it can prompt us to enter the
password – then we enter the password and press
Enter.
A password request may appear several times.

45
Installation – finishing installation

Once the installation process is complete, a

relevant message will appear in the console.
Close the console. The installation process has
been completed.

46
 Verification of installation – information for macOS

After installation, check if all components have been successfully installed. To do this, restart your
computer and check:
1. Is PHPStorm installed?
2. Has the Workspace directory appeared in your home directory?
3. Do you seen an empty file list after entering http://localhost?
4. When you add any file to the Workspace directory, does the file appear on the list located at
http://localhost (obviously, after the page is refreshed)?
5. When you enter http://localhost/phpmyadmin do you see the login page of PHPMyAdmin? – if there
are errors on the page, refresh it – it is often the case that several information is displayed during the
first run).
6. When you enter http://localhost and select the file test_error.php is an error displayed as shown
on the next slide?

47
Verification of installation – Xdebug

The error shown here should appear after opening

the file test_error.php, and means that
Xdebug has been successfully installed and set up
in PHP.
The error does not have to contain the same
message, it is about the appearance of the table
and its colours.

48
PHPStorm installation

Our IDE during the course will be PHPStorm.

It should be downloaded from the manufacturer’s
website.
An archive will be downloaded to your computer. It
should be unpacked in the target location of
PHPStorm.

49
PHPStorm installation

1. Open the terminal, and use the command:

cd path/to/directory
to go to the directory where the archive has
been unpacked.

2. Use the command:

cd bin
to go to the bin directory.

3. Execute the command:

./phpstorm.sh

PHPStorm will be launched.

50
PHPStorm installation

You will receive PHPStorm activation codes from

your mentor. The codes will be valid for 7 months
after their activation.
Do not enter them during the first run!
First activate a 30-day free evaluation version, and
only then, after the trial period, activate PHPStorm
using the code received.

51
 Issues

If something has gone wrong during the installation process, write to your mentor.

Do not leave the installation process to the last minute!

52
 If you do not want to install Linux

If, for some reason, you do not want to install Ubuntu, you can prepare your system for the coursework in
a different way. You must then install and set up the following:
Apache2/nginx
PHP version 7.0 (with PDO, MySQL, bcrypt Also, remember that if you configure your
and curl add-ons) computer on your own, the teacher will not always
Xdebug (configured to work with be able to help you if you encounter non-standard
PHPStorm) errors during the course.
MySQL
PHPMyAdmin
Git
Composer
Symfony

53
PHPStorm basics

54
PHPStorm – new project
Creating a new project
1. From the toolbar, open the File menu.
2. Choose New project...
3. A window will be displayed like the one on the
left. There select:
from the left-hand menu: PHP Empty
Project,
the project location,
PHP version,
Interpreter (if there is no interpreter on the
list, add it by using the “More options”
button).
4. Confirm the creation of a new project.

55
PHPStorm – new project from existing sources
Creating a new project from existing sources
From the Files menu, select the option: New
Project From Existing Files....
A window will be displayed like the one on the left.
There select the right option. If you have used our
installation script, select the first option: the Web
server is installed locally, source files are located
under its document root.

56
PHPStorm – new project from existing sources

Creating a new project from existing sources

Select the folder where the existing files are
located and mark it as Project Root.

57
PHPStorm – new project from existing sources

Creating a new project from existing sources

Select the server installed locally.

58
PHPStorm – new project from existing sources

Creating a new project from existing sources

Enter the access path to the project and confirm its
creation.

59
PHPStorm – documentation

Documentation
Full documentation for PHPStorm can be found
here.

60
Learning GIT

61
 Learning GIT

This part of the prework should take you between 3 and 6 hours.

62
 Learning GIT

Before the course, you need to be well acquainted with GIT version control system. You will use it to
download assignments during classes, and to send your answers so that the mentor can check them.
1. Go through online courses: 3. If you have time:
Ideally, you should go through the following GIT If you still have time and want to learn more
course online: about the GIT system, you can look through
Git Tutorial – Try Git one of these books:
Remember: during the course, note down all https://git-scm.com/book/pl/v1 - the book
commands and what they do. They will come in by the creators of GIT. It explains the
handy! operation of the entire system.
2. Read our presentation: “GIT – version https://www.git-tower.com/learn/git/ebook -
control system”: it introduces the reader to the use of GIT
It will introduce you to the basic uses of GIT – from the bottom up.
you will understand why we use it.

63
Learning HTML
and CSS

64
 Learning HTML and CSS

This part of the prework should take you between 10 and 15 hours.

65
 Learning HTML and CSS

Although you are going to attend a back-end course, knowledge of HTML and CSS will be
necessary. That is why you should:
1. Read our “HTML and CSS” presentation. 3. If you have time:
It will introduce you to the basics of HTML and If you still have time and want to create nice-
CSS. looking HTML pages, it will be good if you
Remember to copy every example from the check out some frameworks. The most popular
presentation to an HTML file and run it. In this are:
way, you will remember more. Bootstrap: http://getbootstrap.com/getting-
2. Check your knowledge of CSS selectors. started/
If you have gone through our presentation, you Foundation:
can easily check your knowledge of CSS http://foundation.zurb.com/sites/getting-
selectors here: http://flukeout.github.io/ started.html

66
HTML and CSS
workshops

67
 HTML and CSS workshops

This part of the prework should take you about 10 hours.

68
 HTML and CSS workshops

To test your knowledge of HTML and CSS (and to show off to your mentor), do the exercises on
GitHub:
1. Access to exercises:
To get access to the exercises, you have to Remember that this part of the prework is
send the following information to your mentor:
obligatory. You must send the exercises to the
the name of your account on GitHub,
mentor not later than 2 weeks before the start
the date of the course you are going to
attend. of your course!

2. Read the presentation: “How to do

exercises?”
The presentation will explain how to do
exercises and how to send them to your
mentor.

69
Learning how to
use Linux

70
 Learning how to use Linux

This part of prework should take you about 15 hours.

71
 Learning how to use Linux

The Internet is almost entirely based on Linux systems. Just like your system or virtual machine.
That is why you have to learn at least the basics of the system (and using the console only):
1. Watch the video tutorials. 2. Read the presentation: “The Basics of
The easiest way to learn how to work in the Linux” and do the accompanying exercises.
Linux console is to watch someone else using The presentation will once again guide you
it. That is why you should watch: through the basics of Linux, and will also
https://goo.gl/C0z6KD introduce you to more advanced topics that
may come in handy in the future.

72
Introduction to
PHP
programming

73
 Learning the basics of PHP

Before the course, you should go through the presentation on the basics of PHP programming.

Read our presentation: “The basics of PHP If you have time:

programming”.
It will introduce you to the basics of the PHP
language.
Remember to copy every example from the
presentation to a .php file and run it. In this way,
you will remember more.
If you have any problems or something is unclear,
write to your mentor.
Prior to the course, go through a basic course in
the PHP language, available at: learn-php
In this way, the classes will go faster and
smoother, and you will benefit more from the
course.

74
PHP workshops

75
 PHP workshops

To test your knowledge of the basics of PHP (and to show off to your mentor), do the exercises
on GitHub:
1. Access to exercises:
To get access to the exercises, you have to Remember that this part of the prework is
send the following information to your mentor:
obligatory. You must send the exercises to the
the name of your account on GitHub,
mentor not later than 2 weeks before the start
the date of the course you are going to
attend. of your course!

2. Read the presentation: “How to do

exercises?”.
The presentation will explain how to do
exercises and how to send them to your
mentor.

76
IDE: your future
work tool

77
 IDE

What is IDE ?
IDE (Integrated Development Environment) is an
application that supports the code writing process.
A good IDE offers many functions, and the most
important of them are:
Project management – IDE will help us
maintain order in our projects, separating
them from one another.
Intelligent code completion – IDE will be
able to give us hints about the code that we
want to write. However, we must remember
that IDE is not infallible – sometimes it can
lead us astray.
Debugger– IDE should be able to support the
error search process.

78
 IDE
The most popular IDEs
There are many IDEs for the PHP language. The NetBeans – free IDE, adapted for many
programming languages, including PHP. It can
most popular are: be used on Windows, Linux and macOS.
PHPStorm – considered the most powerful
IDE for PHP. It assists connecting to the
database and the server. Unfortunately, the
licence is paid. You will receive a seven-month
licence for the duration of the course.
phpDesigner – free IDE for PHP and
HTML5. Unfortunately, there are no versions
for systems other than Windows.

79
 PHPStorm
During the course, we recommend using
PHPStorm as your IDE.
It is one of the most complex environments for
writing and managing programs written in
PHP.
The environment offers numerous useful
functions. If you master it, it can be very
helpful and considerably speed up software
development.
80
You can download it here:
https://www.jetbrains.com/phpstorm/download
It is best if you become familiar with the
program before the classes.
However, if you prefer to use a different
environment, then no problem. Remember,
however, that the teacher may not be able to
help you in certain situations (such as
debugging).
What can you do
if you have some
time left?

81
 HTML and CSS revision

Although we learn server programming during the course, it is still good for a back-end developer to know
front-end technologies. That is why it will be good if you learn things at:
http://flukeout.github.io/ http://getbootstrap.com/getting-started/
A tutorial that offers a smooth introduction to Bootstrap is a CSS framework which makes it
the CSS markup language. The knowledge easier to create a user-friendly and responsive
will be extremely useful during the 3rd week of website.
the course. http://foundation.zurb.com/sites/getting-
https://css-tricks.com/snippets/css/a-guide-to- started.html
flexbox/ Foundation competes with Bootstrap.
A tutorial that explains what Flexbox is about
(a technology introduced in CSS3).
Choose the framework that you like more.

82
 Sites that may
interest you: a
list of useful links

83
 Sites devoted to PHP topics

Here are the sites where you can find a lot of cool information about PHP. It would be good if you visit
them often, also during the course:

http://php.net/ – documentation of the PHP language. All official changes are announced here.

84
 PHP people

It is also advisable to follow people with a strong presence in the PHP world. Here you can find a list of
such people:

Rob Allen – One of the co-creators of the Fabien Potencier – One of the co-creators of
Zend framework. the Symfony framework.
Blog: https://akrabat.com/ Blog: http://fabien.potencier.org/
Twitter: https://twitter.com/akrabat Twitter: https://twitter.com/fabpot

Sebastian Bergmann – The creator of the

PHPUnit testing framework (which you will
learn during the course).
Blog: https://sebastian-bergmann.de/
Twitter: https://twitter.com/s_bergmann

85
 General websites

Here you can find websites with lots of cool information related to the course which are worth visiting:

https://developers.google.com/web/ – https://blog.codinghorror.com/ - a tongue-in-

webpage hosted by Google with great topics
related to web development.
cheek blog. Not just about programming, but
rather IT in general.
https://www.smashingmagazine.com/ - One of
the most popular websites about trends in
software design and development.

86