Example project

The project PHP7 2ITF with all course examples (and exercises) can be found in this Github repository.

REMARKS

An online version of this project (with previews of the solved exercises) can be found at https://php7.z01.be/
In this project, we have written our own small CSS framework to style the project pages. Although this is not the main topic of this course, it may be interesting to wander around in the project source files in order to brush up your (Sass, JavaScript/jQuery, ...) knowledge.

Clone the repo:
- Open a terminal window in C:\sites_laravel
- Execute the statement git clone https://github.com/jkwadraat/php_project.git
- Remove the .git folder
Open C:\vagrant\homestead\Homestead.yaml and adjust the configuration

folders:
  - map: C:/sites_laravel
    to: /home/vagrant/code
sites:
  - map: homestead.test
    to: /home/vagrant/code
  - map: php_project.test
    to: /home/vagrant/code/php_project/public_html

1
2
3
4
5
6
7
8

Open (as administrator!) the file C:\Windows\System32\drivers\etc\hosts
- Add a new domain: 192.168.10.10 php_project.test
Restart the Homestead server
(Tip: use option 2 in homestead.bat)

vagrant halt
vagrant up --provision

1
2

Open a terminal window in the project folder C:\sites_laravel\php_project
(Tip: open the project in PhpStorm and use the built-in terminal)
- Execute the command npm install
- Execute the command gulp (or npm run watch, which does the same)
  - If this doesn't work, you probably have to install gulp-cli: npm install --global gulp-cli
  - This command opens a browser window with URL http://localhost:5500, which serves as a proxy for http://php_project.test
  - The file jQuery.min.js is copied from the node_modules folder into the public_html/js folder
  - When changes are detected in relevant files (SCSS, JS, PHP), the page gets reloaded via Browsersync. When the Sass/SCSS files are changed, they are compiled and the resulting CSS file is copied into the public_html/css folder before the browser reload.

Homepage of php_project

# Example project

Example project