Getting Started with Yii 2 PHP Framework
Nowadays, many developers are using frameworks when designing websites. This has led to improved production speeds. PHP is a server-side scripting language that can be embedded in HTML. <!--more-->
Introduction
Yii 2 is a generic PHP framework used for developing web applications with many ties. Yii 2 implements the MVC (Model, View, and Controller) development principle.
Model, View, and Controller help web developers work with a single part of the website at a time. To learn more on MVC, click here.
Prerequisites
To follow along with this tutorial, you need to have the following:
- A code editor like Visual Studio Code.
- Knowledge of PHP, HTML, and CSS.
- Apache Web server. Download it here. After installation, a folder
/opt/lampp
will be created but not a folder/opt/xampp
. This folder is only created in Linux OS like Ubuntu.
Step 1 - Install Yii 2
Yii 2 can be installed from an archive file.
This involves the following steps:
-
Downloading the archive file from yiiframeworks.com. Download the advanced application template.
-
Move the archive file to the
/htdocs
inside where Xampp was installed. In my case it is/opt/lampp/htdocs
.
$ sudo mv yii-advanced-app-2.0.39.tgz /opt/lampp/htdocs
- Using the terminal, open the
/opt/lampp/htdocs
and unzip the yii-2-advanced file. After unzipping, a folder namedadvanced
will be created.
$ sudo tar -xvzf yii-advanced-app-2.0.39.tgz
Click here if you encounter any problem.
- Initialize your project by entering the following command in
/opt/lampp/htdocs/advanced.
$ sudo php init
To initialize your application, you should select 0 (Development environment).
At this point, you have installed Yii 2 Advanced Template. Open your browser and navigate to http://localhost/advanced/frontend/web.
When the Congratulations page is displayed on your browser, it means that the installation was successful.
Step 2 - Understanding the folder structure and directories
Below are the folders inside the advanced
. Open /opt/lampp/htdocs/advanced
folder using your favorite code editor to see them.
.
├── backend
├── codeception.yml
├── common
├── composer.json
├── composer.lock
├── console
├── docker-compose.yml
├── environments
├── frontend
├── init
├── init.bat
├── LICENSE.md
├── README.md
├── requirements.php
├── vagrant
├── Vagrantfile
├── vendor
└── yii.bat
In this advanced
folder, we have three main directories:
- backend
- common
- frontend
Let us look at the work of the folders above:
Folder 1. backend
The backend directory serves the admin services, which are restricted to the users.
Inside this backend
folder, we have the following main directories.
/assets
: This directory consists of asset configurations. It has an AppAsset.php
file, that contains the configurations of the CSS and the JAVASCRIPT. This is where we will be adding our CSS and JAVASCRIPT files.
/controllers
: Yii 2 Controller is written in this folder. Yii 2 takes the convention of <NameController> to name the controllers.
/models
: In Yii 2, processing data and manipulating the values takes place here. In this directory, we have classes that link to the databases. Tables in databases and the models have one to one mapping.
/views
: In Yii 2, the views directory is used to store files that will be displayed in the browser as HTML. The code placed in this directory is always in PHP format but shown in the browser in HTML format.
Inside the view
folder, we have two directories:
-
views/layout
: The layout directory contains the application's views. These views are displayed on all website pages, and their files are inmain.php
. For instance, most websites store their footer and header files in this directory. So, all pages on that website contain a similar footer and header. -
views/site
: Unlike files in layout, files in the site are not fixed. That is, one page does not have the same view as another page. The only similar thing is the header and the footer since they were placed inmain.php
.
Folder 2: common
Here, we have files that are common to both the backend and frontend directory. For instance, database configurations in /common/config
takes place here.
Folder 3: frontend
The /frontend
project contains the contents displayed to the users. This folder has similar directories to those of /backend
.
Step 3 - Creating our first web application using Yii 2
To create a web page, we need to change the different parts of our website to fit our preferences. Let us change the footer of our website. Replace the whole <footer>
in /frontend/views/layout/main.php
with the following code:
// ...
<footer class="footer">
<div class="container">
<div class="col-md-6">
<div>
<h5>This is a classic footer</h5>
</div>
</div>
</div>
</footer>
//...
Step 4 - Configure CSS and JavaScript
All CSS files in a project are stored under /web/CSS
, and all JavaScript is stored under /web/js
.
Let us customize the footer we created above. Create a footer.css
under /web/css
and put the code below.
h5:hover{
color: blue;
}
h5{
color: white;
}
Then register the styles above in assets/AppAsset.php
.
/* ... */
{
public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [
'css/site.css',
'css/footer.css',
];
/* ... */
}
Step 5 - Modifying site contents
Now let us change the contents of our website. Replace the contents of frontend/views/site/index.php
with the following code:
<?php
/* @var $this yii\web\View */
$this->title = 'My Yii Application';
?>
<div class="site-index">
<div class="jumbotron">
<h1>Hello World!</h1>
<p>My first webpage using yii2.</p>
<h2>Look at my <a href="<?= Yii::$app->urlManager->createUrl(['site/portfolio'])?>">Portfolio<a> </h2>
</div>
</div>
Open your browser and navigate to http://localhost/advanced/frontend/web
for testing.
You should have a page like the one below:
The code above replaces the default homepage content with bootstrap jumbotron. We also add a link that points to a portfolio page using the PHP URL manager. The URL Manager is used to link pages throughout Yii 2 framework. On clicking the link, you get a 404 error as the portfolio page does not exist. Let us now create the portfolio page.
Step 6 - Adding a new page to our website
To add a new page to our website, we need to create a view and an action. A view is an interface that the user will see on the browser. Create a new file, frontend/views/site/portfolio.php
, and paste the following code in it.
<?php
/* @var $this yii\web\View */
$this->title = 'My Website';
?>
<div class="site-index">
<div class="jumbotron">
<h1>Hello World!</h1>
<p>My first yii2 powered site.</p>
<h2>This is my portfolio</a></h2>
</div>
</div>
For the view code above to work, we need to create an action. We will put Actions in controllers.
To display the portfolio page, we need to declare an action to show the portfolio page. Open frontend/controllers/SiteController.php
and add the following:
<?PHP
// ...
class SiteController extends Controller
{
// ...
/**
* Displays portfolio page
*
* @return mixed
*/
public function actionPortfolio()
{
$this->layout='main';
return $this->render('portfolio');
}
}
After creating the action and the view, you can access the new page by clicking on "Portfolio" link on the main page.
You should have a page like the one below:
Conclusion
Congratulations! Now you have a better understanding of the basics of the Yii 2 framework. Yii 2 pushes you to create a securable and testable site by doing a lot of the heavy lifting for you. I encourage you to use Yii 2 in your next project.
In this article;
- We have installed Yii 2 framework.
- We have looked at Yii 2 directories.
- We have created a portfolio page using yii2.
Happy Yii 2 coding ahead
Peer Review Contributions by Wanja Mike