Adding a Dropdown List to a View

If you look at the /bookings/create screen which was generated by the scaffolder

This is all very well but for the foreign key fields which reference the primary key fields in the member table and courts tables there is merely the possibility of entering a numeric value by which to identify the respective member or court.

This creates a number of issues. For one thing it is not very user friendly members may have to look up their userid and court id before they are able to book a court. Another issue is that if a user enters a member id that does not exist in the member table it will violate the foreign key referential integrity constraint and cause an error.

Much better here would be a dropdown list for the member id and court id. Ideally the member's name would appear for each row in the table while the member id would be the data which would be passed back by the form on submission. Similarly the court should display some details helping to identify the court in the list while submitting the court id.

To achieve this, we first need to modify the the Member.php and Court.php classes in the models folder. In each of them we need to include a __toString( ) function which will return some sensible value when the object is treated as a string. Include a __toString( ) function in the Member model class which will return the member's fullname - i.e. firstname concatenated with surname with a space in between. Include a __toString( ) function in the Court.php model which will return the courtID( ) together with the type of surface and the word "lights" if it has lights and "no lights" if it does not have lights.

In order that an array of member objects and court object be available to the bookings/create view we need to retrieve these arrays of objects from the database and pass them to the create view. To do this, first add the use statements, which are highlighted in the red box below, to the top of the /app/Http/controllers/bookingController.php file as follows.

Next we need to modify the create function in the /app/Http/controllers/bookingController.php file. Replace the code you find for the create function with the following code:

public function create()
     //Find all members from the DB and return as an array of Member.php objects
     $members = Member::all();
     //Find all courts from the DB and return as an array of Court.php objects
     $courts = Court::all();
     //return the bookings.create view with $members and $courts as view variables
     return view('bookings.create')->with('members',$members)->with('courts',$courts);

The line $members = Members::all( ); retrieves all the members of the tennisclub from the members table as an array of Member objects and assigns this to the variable $members. The line $courts = Court::all( ); does the same thing with the Courts. These two arrays of objects are then passed to the bookings.create view in the next line of code. The with function effectively passes these arrays of objects as "view variables" they will now be available on the bookings.create view as $members and $courts respectively.

Next edit the /resources/views/bookings/fields.blade.php view. The view contains blade helper which produce appropriate HTML Input tags. Replace the blade helper which produces the input tag for the Member ID (boxed in red in this screenshot)

with the following snippet of code outlined in red

<!-- Memberid Field -->
<div class="form-group col-sm-6">
    <select name="memberid" class="form-control">
        @foreach($members as $member)
            <option value="{{$member->id}}">{{$member}}</option>


Notice how we can now use the array of objects called $members which was passed to use from the bookingsController in the create function in order to create a dropdown list full of members. The {{$member}} blade variable will display whatever the __toString( ) function from the Member model dictates.

Create a similar dropdown list for the courtid which is the next field in the fields.blade.php view. The bookings/create view should now look as follows:

Verify that this view still works properly by creating a new booking for one of the members

Leave a Reply