Chapter 7. Working on the User Interface

In this chapter, you will discover how powerful Gii is as a tool. It provides support for CRUD actions, as well as creating a controller and its respective views.

We will cover the following topics related to the user interface in this chapter:

  • Using Gii to generate create, read, update, and delete (CRUD) actions:
    • For example – using CRUD to manage rooms, reservations, and customers using Gii
  • Customizing JavaScript and CSS:
    • For example – using JavaScript and CSS to display advertising columns that disappear if there is not enough space available
  • Using AJAX:
    • For example: reservation details loaded from customers' drop-down lists
  • Using the Bootstrap widget:
    • For example – using datepicker
  • Viewing multiple models in the same view:
    • For example – saving multiple customers at the same time
  • Saving linked models in the same view:
    • For example – creating a customer and reservation in the same view

It is now time for you to learn what Yii2 supports in order to customize the JavaScript and CSS parts of web pages. A recurrent use of JavaScript is to handle AJAX calls, that is, to manage widgets and compound controls (such as a dependent drop-down list) from jQuery and Bootstrap.

Finally, we will employ jQuery to dynamically create more models from the same class in the form, which will be passed to the controller in order to be validated and saved.

Using Gii to generate CRUD

We introduced Gii in Chapter 5, Developing a Reservation System, to generate models. Now we want to use Gii to create CRUD actions with a controller and views.

Type http://hostname/basic/web/gii in your browser to return to the Gii welcome page. Click on the Start button of the CRUD section. We have to fill out four fields:

  • Model Class: This is the ActiveRecord class associated with the table where CRUD will be built; this class should be provided using the fully qualified namespaced path, for example: appmodelsModelClass.
  • Search Model Class: This is the name of the search model class to be generated and extended from the model class; this class will provide useful methods and extensions to be used when searching the record. This should be provided using the fully qualified namespaced path, for example: appmodelsModelClassSearch.
  • Controller Class: This is the name of the controller class to be generated; this class should be provided using the fully qualified namespaced path and the CamelCase format for the name, starting with an uppercase letter, for example: appcontrollerMyCustomController.
  • View Path: This is the directory where the view created from the controller actions will be stored. We can use path, alias @app/views, to indicate the base path for the views file, for example: @app/views/myCustom to indicate the base path of the MyCustomController views, that will be filled by default to @app/views/controller-id.

Then, we can customize BaseControllerClass, the widget used in the index page, to enable the state of I18N and the code template, but it is okay to leave them with the default values.

Note

If we check Enable I18N, we must then look after the translations in app messages for each attribute label. This will be covered in a later chapter.

Example – using CRUD to manage rooms, reservations, and customers using Gii

In this example, we will create complete CRUD actions to manage rooms, reservations, and customers.

In the earlier chapter, we dealt with Gii CRUD actions to create a form. We must now repeat these instructions for all three models: the room, reservation, and customer model class. To distinguish files created with Gii from files created manually in the previous chapters, we will append the Gii suffix to the controller's class name.

Browse to the Gii welcome page at http://hostname/basic/web/gii, click on the Start button in the CRUD section, and fill out the fields with the following values to create CRUD actions for the Room model class:

  • Model Class: appmodelsRoom
  • Search Model Class: appmodelsRoomSearch
  • Controller Class: appcontrollersRoomsWithGiiController
  • View Path: @app/views/rooms-with-gii

Then, repeat this operation for the Reservation model class:

  • Model Class: appmodelsReservation
  • Search Model Class: appmodelsReservationSearch
  • Controller Class: appcontrollersReservationsWithGiiController
  • View Path: @app/views/reservations-with-gii

Finally, repeat them for the Customer model class:

  • Model Class: appmodelsCustomer
  • Search Model Class: appmodelsCustomerSearch
  • Controller Class: appcontrollersCustomersWithGiiController
  • View Path: @app/views/customers-with-gii

    Note

    Make sure that the View Path has a slash (/) in the path and not a backslash () as the namespaced path in the model class, search model class, and controller class.

The following screenshot shows the fields filled out to generate CRUD actions for the Room model class:

Example – using CRUD to manage rooms, reservations, and customers using Gii

CRUD Generator from Gii

While navigating in the folder structure, you will see that Gii has created three new files in basic/controllers, named RoomsWithGiiController.php, ReservationsWithGiiController.php, and CustomersWithGiiController.php.

Each of these files contains five actions:

  • actionCreate(): This action is used to create a new model object
  • actionView(): This action is used to view the details of a model object
  • actionUpdate(): This action is used to update an existing model object
  • actionDelete(): This action is used to delete an existing model object
  • actionIndex(): This action is used to display, using the grid layout, a list of model objects

Open the basic/models folder and you will find three new files: RoomSearch.php, ReservationSearch.php (which should already exist), and CustomerSearch.php.

Each of these files basically contains a search() method, which returns the ActiveDataProvider to be used to display data in GridView, passing some filter conditions.

Finally, open the basic/views folder and you will find three new folders: roomsWithGii, reservationsWithGii, and customersWithGii; each one containing six files:

  • _form.php
  • _search.php
  • create.php
  • index.php
  • update.php
  • view.php

View files that start with an underscore are considered by default in Yii2 as subviews, or rather views that are called by other views.

The first two files start with an underscore; effectively if we open create.php and update.php, we will notice that, at the end of these files, the render() method is called using the _form.php view. Both the create and update view will use the same _form view to display the form to edit fields.

The last four files, create.php, index.php, update.php, and view.php are views that refer to the same actions in the controller. By default, they all have a breadcrumb and a title for each page.

Make some tests that browse, for example, to http://hostname/basic/web/rooms-with-gii/index or http://hostname/basic/web/rooms-with-gii/index, to see some excellent works made by Gii.

This is the index action result of RoomsWithGiiController:

Example – using CRUD to manage rooms, reservations, and customers using Gii

The output of the RoomsWithGiiController index action

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.188.175.182