Home | About | View All Posts

16 Sept 2016

Understanding Yii2 model view and controller functionality in simplest way

As we know Yii2 is PHP framework and based on MVC architecure. Here is the example based basic explanation for the Yii2 MVC structure.
We will create a news reader sample application in this tutorial. We are using Yii2 advanced template for this tutorial. Following steps can be followed for learning the Yii2 functionality for model view and controller functionality using static data -
  1. Creating model, controller and view file manually in the yii2 frontend
  2. Creating Sample News Data in HTML and PHP format
  3. Converting News data in array format
  4. Passing News data from controller into view
  5. Showing news data using model, controller and view as real application
  6. Showing news item detail view

  1. Creating model, controller and view file manually in the yii2 frontend
    Creating Model :
    We will create a model file in our application. Since there is no any dynamic news data involvment in this tutorial, there fore model file is just for symbolic to follow the mvc architecure. We will use this file when we will use dynamic news data from database.
    Model File - News.php
    Path - frontend/models/News.php
    Code -
    namespace frontend\models;
    use Yii;
    class News extends \yii\db\ActiveRecord
        { 
        public static function tableName()
        {
            return '';
        }    
    }
    
    Creating Controller:
    Controller File - NewsController.php
    Path - frontend/controllers/NewsController.php
    Code -
    namespace frontend\controllers;
    use Yii;
    use yii\web\Controller;
    use frontend\models\news;
    
    class NewsController extends Controller{
    function actionIndex(){
    return $this->render('list');
    }
    }
    
    Creating View:
    View File - list.php
    Path - frontend/views/news/list.php
    Code -
    <p>You are browsign news view file.</p>
    

    Now browse the news view file using the url below -
    http://hostname.com/frontend/web/index.php?r=news/index
    Here r refers Yii routes to module, controller and the action requested : ModuleID/ControllerID/ActionID where ModelID is treated as optional so generally the format is ControllerID/ActionID

    You will get output at below for browsing the above url if everything is successfully implemented.
    You are browsing news view file.
    
  2. Creating Sample News Data in HTML and PHP format
    Below are the visual sample that we will use and show in the yii2 application for this news show tutorial.



    HTML code for the above visual -
    <h1>
    Latest News</h1>
    <div class="media">
    <div class="media-left">
    <a href="Section 1.10.33 of " de="" finibus="" bonorum="" et="" malorum",="" written="" by="" cicero="" in="" 45="" bc"="">
    <img class="media-object" src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg" style="width: 64px; height: 64px;">
    </a>
    </div>
    <div class="media-body">
    <h4 class="media-heading">
    <em>2016-03-24 18:03:28</em> | <a href=""><strong>Section 1.10.33 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</strong></a></h4>
    <p>
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos 
    <a href="">Read More...</a></p>
    </div>
    </div>
    <div class="media">
    <div class="media-left">
    <a href="The standard Lorem Ipsum passage, used since the 1500s">
    <img class="media-object" src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg" style="width: 64px; height: 64px;">
    </a>
    </div>
    <div class="media-body">
    <h4 class="media-heading">
    <em>2016-03-24 18:03:28</em> | <a href=""><strong>The standard Lorem Ipsum passage, used since the 1500s</strong></a></h4>
    <p>
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    <a href="">Read More...</a></p>
    </div>
    </div>
    <div class="media">
    <div class="media-left">
    <a href="What is Lorem Ipsum?">
    <img class="media-object" src="https://images.pexels.com/photos/433539/pexels-photo-433539.jpeg" style="width: 64px; height: 64px;">
    </a>
    </div>
    <div class="media-body">
    <h4 class="media-heading">
    <em>2016-03-24 18:03:28</em> | <a href=""><strong>What is Lorem Ipsum?</strong></a></h4>
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley... 
    <a href="">Read More...</a></p>
    </div>
    </div>
    <div class="media">
    <div class="media-left">
    <a href="Where can I get some?">
    <img class="media-object" src="https://images.pexels.com/photos/46974/muscari-common-grape-hyacinth-blossom-bloom-46974.jpeg" style="width: 64px; height: 64px;">
    </a>
    </div>
    <div class="media-body">
    <h4 class="media-heading">
    <em>2016-03-24 18:03:28</em> | <a href=""><strong>Where can I get some?</strong></a></h4>
    <p>
    There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form 
    <a href="">Read More...</a></p>
    </div>
    </div>
    <div class="media">
    <div class="media-left">
    <a href="Where does it come from?">
    <img class="media-object" src="https://images.pexels.com/photos/237018/pexels-photo-237018.jpeg" style="width: 64px; height: 64px;">
    </a>
    </div>
    <div class="media-body">
    <h4 class="media-heading">
    <em>2016-03-24 18:03:28</em> | <a href=""><strong>Where does it come from?</strong></a></h4>
    <p>
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC 
    <a href="">Read More...</a></p>
    </div>
    </div>
    <div class="media">
    <div class="media-left">
    <a href="Why do we use it?">
    <img class="media-object" src="https://images.pexels.com/photos/630756/flower-rose-macro-nature-630756.jpeg" style="width: 64px; height: 64px;">
    </a>
    </div>
    <div class="media-body">
    <h4 class="media-heading">
    <em>2016-03-24 18:03:28</em> | <a href=""><strong>Why do we use it?</strong></a></h4>
    <p>
    It is a long established fact that a reader will be distracted by the readable content of a page when 
    <a href="">Read More...</a></p>
    </div>
    </div>
    

    As you can see 'repeatition of html - <div class="media"></div> in the above html code that are showing different news title, image, short description etc. Now We will use single "<div class="media"></div>" as placeholder for showing news data in the view file using array of title, image, short decription etc.
  3. Converting News data in array format
    We will use title, date, descripion etc as array element. Below is the code in array data format -
    <?php 
    $newsitems_latest = [
     [
     'title' => 'The quick brown fox jumps right over the lazy little dog.', 
     'date' => '21/12/2019',
     'short_description' => 'It is a long established fact that a reader will be distracted by the readable. It is a long established fact that a reader will be distracted by the readable. It is a long established fact that a reader will be distracted by the readable. It is a long established fact that a reader will be distracted by the readable ',
     'full_description' => 'Content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a        more-or-less normal distribution. It is a long established fact that a reader will be distracted by the readable',
     'feature_picture' => 'https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg'
     ],
     [
     'title' => 'The quick brown fox jumps right over the lazy little dog.', 
     'date' => '21/12/2019',
     'short_description' => 'It is a long established fact that a reader will be distracted by the readable ',
     'full_description' => 'Content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution',
     'feature_picture' => 'https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg'
     ],
     [
     'title' => 'The quick brown fox jumps right over the lazy little dog.', 
     'date' => '21/12/2019',
     'short_description' => 'It is a long established fact that a reader will be distracted by the readable ',
     'full_description' => 'Content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution',
     'feature_picture' => 'https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg'
     ]
    ];
    
    foreach ($newsitems_latest as $newsitem_latest){ ?>
    <div class="media">
    <div class="media-left">
    <a href="<?php echo $newsitem_latest['title']; ?>">
    <img class="media-object"  src="<?php echo $newsitem_latest['feature_picture'];?>"  style="width: 64px; height: 64px;">
    </a>
    </div>
    <div class="media-body">
    <h4 class="media-heading"><em><?php //echo $newsitem_latest['date']; ?>2016-03-24 18:03:28</em> | <a href=""><strong><?php echo $newsitem_latest['title']; ?></strong></a></h4>
    <p><?php echo $newsitem_latest['short_description']; ?>
    <br/>
    <a href="">Read More...</a></p>
    </div>
    </div>
    <?php } ?>
    

    You can paste and use this array data and html code in the view file and run the news application using the url as you had done previously -
    http://hostname.com/frontend/web/index.php?r=news/index

    But this is not recommended in Yii2 MVC application. We always use design and code separation technique using controller and view architecture in the Yii2 MVC application. Therefore we will separate the array element from view file and place it in the controller file.
  4. Passing News data from controller into view
    We will make new function "newsItems()"in the controller file for holding the news data in array format. Finally this array data is passed into view file using the render() function. Below is the code for conroller file -
    namespace frontend\controllers;
    use Yii;
    use yii\web\Controller;
    class TestController extends Controller{
    public function newsItems()
    {
    $newsRows = [
     [
     'title' => 'The quick brown fox jumps right over the lazy little dog.', 
     'date' => '21/12/2019',
     'short_description' => 'It is a long established fact that a reader will be distracted by the readable. It is a long established fact that a reader will be distracted by the readable. It is a long established fact that a reader will be distracted by the readable. It is a long established fact that a reader will be distracted by the readable ',
     'full_description' => 'Content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a        more-or-less normal distribution. It is a long established fact that a reader will be distracted by the readable',
     'feature_picture' => 'https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg'
     ],
     [
     'title' => 'The quick brown fox jumps right over the lazy little dog.', 
     'date' => '21/12/2019',
     'short_description' => 'It is a long established fact that a reader will be distracted by the readable ',
     'full_description' => 'Content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution',
     'feature_picture' => 'https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg'
     ],
     [
     'title' => 'The quick brown fox jumps right over the lazy little dog.', 
     'date' => '21/12/2019',
     'short_description' => 'It is a long established fact that a reader will be distracted by the readable ',
     'full_description' => 'Content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution',
     'feature_picture' => 'https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg'
     ]
    ];
    return $newsRows;
    }
        function actionIndex(){
        $newsitems_latest = $this->snewsItems();
        return $this->render('list', ['newsitems_latest' => $newsitems_latest]);
        }
    }
    

    Final view file code -
    <h1>Latest News</h1>
    <?php foreach ($newsitems_latest as $newsitem_latest){ ?>
    <div class="media">
    <div class="media-left">
    <a href="<?php echo $newsitem_latest['title']; ?>">
    <img class="media-object"  src="<?php echo $newsitem_latest['feature_picture'];?>"  style="width: 64px; height: 64px;">
    </a>
    </div>
    <div class="media-body">
    <h4 class="media-heading"><em><?php //echo $newsitem_latest['date']; ?>2016-03-24 18:03:28</em> | <a href=""><strong><?php echo $newsitem_latest['title']; ?></strong></a></h4>
    <p><?php echo $newsitem_latest['short_description']; ?>
    <br/>
    <a href="">Read More...</a></p>
    </div>
    </div>
    <?php } ?>
    

    Now again run the news application using the url as you had done previously -
    http://hostname.com/frontend/web/index.php?r=news/index

    This will show same output as you had viewed above in the image visual.

  5. Showing news data using model, controller and view as real application
    Finally we will use news data from database instead of static array data element. First we will create 'news' table in application database and insert sample news data into 'news' table.

    Below is the code for creating the table 'news' and inserting the sample news data. We can create CRUD for news data entry and update at backend of the application.

    CREATE TABLE news (
    id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(120) NOT NULL,
    short_description VARCHAR(200) NOT NULL,
    description longtext,
    date TIMESTAMP,
    feature_picture VARCHAR(500)
    )
    INSERT INTO `news` (`id`, `title`, `short_description`, `description`, `date`, ‘feature_picture’) VALUES (1, 'The quick brown fox jusmpr', 'sdfdsoifds sdfodsfjds', 'sdfnodsfndsofd osdfdosfjdsf', CURRENT_TIMESTAMP, ‘https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg’);
    INSERT INTO `news` (`id`, `title`, `short_description`, `description`, `date`, ‘feature_picture’) VALUES (1, 'The quick brown fox jusmpr', 'sdfdsoifds sdfodsfjds', 'sdfnodsfndsofd osdfdosfjdsf', CURRENT_TIMESTAMP, ‘https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg’);
    INSERT INTO `news` (`id`, `title`, `short_description`, `description`, `date`, ‘feature_picture’) VALUES (1, 'The quick brown fox jusmpr', 'sdfdsoifds sdfodsfjds', 'sdfnodsfndsofd osdfdosfjdsf', CURRENT_TIMESTAMP, ‘https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg’);
    INSERT INTO `news` (`id`, `title`, `short_description`, `description`, `date`) VALUES (4, 'The quick brown fox jusmpr', 'sdfdsoifds sdfodsfjds', 'sdfnodsfndsofd osdfdosfjdsf', CURRENT_TIMESTAMP);
    INSERT INTO `news` (`id`, `title`, `short_description`, `description`, `date`, ‘feature_picture’) VALUES (1, 'The quick brown fox jusmpr', 'sdfdsoifds sdfodsfjds', 'sdfnodsfndsofd osdfdosfjdsf', CURRENT_TIMESTAMP, ‘https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg’);
    

    We will modify the news model and controller file. We will use "news" table in the news model file. Below is the modified news model file -
    namespace frontend\models;
    use Yii;
    class News extends \yii\db\ActiveRecord
    {  
        public static function tableName()
        {
            return 'news';
        }    
    }
    

    We will use the 'news' table based object in the controller file and generate the news data row array element. This array element will be passed into view of the news file. Below is the modified controller file code -
    namespace frontend\controllers;
    use Yii;
    use yii\web\Controller;
    use frontend\models\news;
    class NewsController extends Controller{
        function newsData(){
         $query = News::find();
         $newsitems = $query->orderBy('title')->limit('10')->all();
         return $newsitems;
       }
       function actionIndex(){     
         $newsitems_latest = $this->newsData();
         return $this->render('list', ['newsitems_latest' => $newsitems_latest]);
       }
    }
    

    Now again run the news application using the url as you had done previously -
    http://hostname.com/frontend/web/index.php?r=news/index

    Same output will be shown as you have it in news screenshot visual as below -


  6. Showing news item detail view
    We will add one more view file for showing the news data detail page.

    Detail View file - detail.php
    Path - Path - frontend/views/news/detail.php
    Code -
    <div class="panel panel-default">
    <div class="panel-heading"><?php echo Yii::$app->formatter->asDatetime($item['date'], "php:d/m/Y"); ?></div>
    <div class="panel-body">
    <p><img src="<?php echo $item['feature_picture'] ?>" width="90%"/></p>
    <p><strong><?php echo $item['title'] ?></strong></p>
    <p><?php echo $item['description'] ?></p>
    </div>
    </div>
    

    We have modified news list file for enabling the news detail page url for every news title link. Below is the modified code for news list view file -
    <h1>Latest News</h1>
      <?php foreach ($newsitems_latest as $newsitem_latest){ ?>
      <div class="media">
      <div class="media-left">
      <a href="<?php echo $newsitem_latest['title']; ?>">
      <img class="media-object"  src="<?php echo $newsitem_latest['feature_picture'];?>"  style="width: 64px; height: 64px; ">
      </a>
      </div>
      <div class="media-body">
      <h4 class="media-heading"><em><?php echo Yii::$app->formatter->asDatetime($newsitem_latest['date'], "php:d/m/Y"); ?></em> | <a href="<?php echo Yii::$app->urlManager->createUrl(['news/detail' , 'id'
      => $newsitem_latest['id']]) ?>"><strong><?php echo $newsitem_latest['title']; ?></strong></a></h4>
      <p><?php echo $newsitem_latest['short_description']; ?>
      <br/>
      <a href="<?php echo Yii::$app->urlManager->createUrl(['news/detail' , 'id'
      => $newsitem_latest['id']]) ?>">Read More...</a></p>
      </div>
      </div>
      <?php } ?>
    
    

    We will add news data detail action in the controller file which will pass the news detail array at detail view file via render() function. Below is the modified code for controller file.

    namespace frontend\controllers;
    use Yii;
    use yii\web\Controller;
    use frontend\models\news;
    class NewsController extends Controller{
        function newsData(){
         $query = News::find();
         $newsitems = $query->orderBy('title')->limit('10')->all();
         return $newsitems;
       }
       function actionIndex(){     
         $newsitems_latest = $this->newsData();
         return $this->render('list', ['newsitems_latest' => $newsitems_latest]);
       }
       function actionDetail($id)
       {
         $newsList = $this->newsData();
         $item = null;
         foreach($newsList as $n)
         {
         if($id == $n['id']) $item = $n;
         }
         return $this->render('detail', ['item' => $item]);
         }
    }
    

Tags :

0 comments:

Post a Comment