Creating Static And Dynamic Web Pages In Laravel

Creating Static And Dynamic Web Pages In Laravel

With Laravel, you can use the basic routing, controllers, and blade to create simple Dynamic Web Pages with pretty urls and no need to worry about complex configurations. Of course we can pass variable data to the views in several different ways to create dynamic web pages. This is what most web developers will be interested in, but it does make sense to learn about creating both static and dynamic content with Laravel. This will help us understand the various ways to pass variable data to views in Laravel.


Reading The Application Flow

When developing websites or web applications, it helps to visualize your way through the application process. It can be a very basic way to step yourself through the application and helps with design and debugging. So far, we’ve learned a bit about how a web request is handled in Laravel. The http request comes into the application and Route::get() determines what controller and method will be called. For the splash screen, that means visiting / triggers index() on WelcomeController.php. The index() function runs view() and renders a view file of welcome.blade.php. The visitor sees the new web page, and everyone is happy. In the next section, you will create your own static web page with Laravel.


Creating A Static Laravel Web Page

The first thing we’ll do is to create a static web page in Laravel. We will create the most basic of all web pages in addition to the most used mantra in programming. Hello World. We will make a web page that says nothing more than Hello World. It’s kind of funny in a way. It almost like using a formula one race car to visit the grocery store, but alas, our task we must complete.


First off, we’ll need a Route.

\app\Http\routes.php source


Next, we need a Controller.

We can see that our route helloworld is making reference to a HelloWorldController and an index method. We do not have either of these yet, so let’s go ahead and create them. With this, we will use the powerful code generating tool, Laravel Artisan.

vagrant@homestead:~/Code/laravel$ php artisan make:controller --plain HelloWorldController
Controller created successfully.
vagrant@homestead:~/Code/laravel$

Before we take a look at the code that was generated for us, let’s have a look at all the things artisan can create for us in the make namespace.

vagrant@homestead:~/Code/laravel$ php artisan list make
Laravel Framework version 5.0.6

Usage:
[options] command [arguments]

Options:
–help (-h) Display this help message
–quiet (-q) Do not output any message
–verbose (-v|vv|vvv) Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug
–version (-V) Display this application version
–ansi Force ANSI output
–no-ansi Disable ANSI output
–no-interaction (-n) Do not ask any interactive question
–env The environment the command should run under.

Available commands for the “make” namespace:
make:command Create a new command class
make:console Create a new Artisan command
make:controller Create a new resource controller class
make:event Create a new event class
make:middleware Create a new middleware class
make:migration Create a new migration file
make:model Create a new Eloquent model class
make:provider Create a new service provider class
make:request Create a new form request class
vagrant@homestead:~/Code/laravel$

In this instance, we are creating a controller, but as we work more with Laravel we see there are many other options available. It is worth spending some time learning about all of these tools to help with workflow. Let’s now look at the resulting code that was generated for us in our new HelloWorldController.

\App\Http\Controllers\HelloWorldController.php source

Note that we still need to create the index method on our own, and we did so as you can see. The make command did however create all the initial boilerplate, and took care of setting up our namespaces for us, which is really nice.


Finally, we need a view file.

We’ll just quickly create that ourselves in the resources folder.

\resources\views\helloworld.blade.php source


Test The Static Web Page

Let’s test our static web page. All we need to do is visit the route we created earlier. Remember that our route was helloworld in the routes file. This means we can visit http://homestead.app/helloworld and we should see the fruits of our labor.

Laravel Static Web Page

Success!


Creating A Dynamic Laravel Web Page

We have completed creating a static web page in Laravel. Maybe you have a project that will require 50 or 100 static web pages. You have the basic process down, so just follow those steps and build from there. Now we’re going to take a look at creating dynamic web pages with Laravel. This means, we will no longer hard code data into the view files, but rather pass dynamic data to them, and present them that way. Let’s see how we can do that. We are going to keep the same route, controller, and view. We will just update the code in them to demonstrate how this works.


The Codeigniter Way

People have been passing dynamic data to views since CakePHP first made it’s bloated appearance on the web development scene some moons ago. Passing dynamic data to views is so common, there have been some basic conventions about how to go about doing it. Perhaps made most famous by Codeigniter, is the concept of passing an array from the controller to the view. The keys of this array become the variable names in the view file. By convention, this array has usually used the name of $data. Let’s test it out.

\App\Http\Controllers\HelloWorldController.php source

\resources\views\helloworld.blade.php source

http://homestead.app/helloworld
dynamic data one

Great! It seems to be working just fine. Note that even though we only passed one variable value, it was still done so via an array. The second argument of the view() function must be an array, no matter the number of values you are trying to pass. With that in mind, let’s pass two values now.

\App\Http\Controllers\HelloWorldController.php source

\resources\views\helloworld.blade.php source

http://homestead.app/helloworld
dynamic data two

Nice. Note that you can keep adding as many keys to the array as you need. If you have 15 variables you need to pass, create 15 keys in the array and populate with your 15 values.


The Laravel with() Method

Laravel provides a really nice way to pass variables to view files using the with() method. Instead of passing an array as the second argument to the view() function, we can chain the with() method onto the view() call. This is one of those more modern ways to do things, and it makes for really nice code readability. Let’s check it out.

\App\Http\Controllers\HelloWorldController.php source

\resources\views\helloworld.blade.php source

http://homestead.app/helloworld
dynamic data one

Are you limited to passing only one variable to the view when using the with() method? Of course not. Just pass an array to that sucker and watch yourself profit.

\App\Http\Controllers\HelloWorldController.php source

\resources\views\helloworld.blade.php source

http://homestead.app/helloworld
dynamic data two


We can also combine the idea of building up an array before rendering the view, and then passing the data using the with() method. Let’s see how to do that here.

\App\Http\Controllers\HelloWorldController.php source

\resources\views\helloworld.blade.php source

http://homestead.app/helloworld
dynamic data three

Creating Static And Dynamic Web Pages In Laravel

In this episode, we started right at the beginning of creating static web pages with the Laravel Framework. We learned how routes hand of the request to a controller, which then renders a view. By starting with just static content, we can follow the flow of how this works really easily. In the second half of this episode, we took a look at introducing dynamic data into this process. The controller is the one to pass this dynamic data to views, and the view in turn presents the data to the user.