One place for hosting & domains

      Custom

      How To Create a Custom Template For Your Laravel Application Using Bulma CSS



      Part of the Series:
      How To Build a Links Landing Page in PHP with Laravel and Docker Compose

      Laravel is an open-source PHP framework that provides a set of tools and resources to build modern PHP applications. In this project-based tutorial series, you’ll build a Links Landing Page application with the Laravel framework, using a containerized PHP development environment managed by Docker Compose.

      At the end, you’ll have a one-page website built with Laravel and managed via Artisan commands where you can share relevant links to an audience on social channels and presentations.

      So far, you’ve seen how to set up the application’s MySQL database tables using migrations, how to create an Eloquent model to interact with the links table, and how to create Artisan commands to manage links in the database. You’ll now see how to create a custom Blade template to show your links in the application’s front-end. To facilitate styling this page while keeping it minimal, for this series we are going to use Bulma, a single-file CSS framework.

      The default route set up within the Laravel web routes file points to an example template that you can find at resources/views/welcome.blade.php. You’ll create a new index.blade.php file within that same directory, and edit the main routes file so that the / route points to this template instead. In the route definition, you’ll also need to obtain a list of all links that you want to show in the new index template.

      Start by updating the routes file of your Laravel application. Open the routes/web.php file using your text or code editor of choice:

      Your current / route points to the example page that comes with Laravel by default:

      Route::get('/', function () {
          return view('welcome');
      });
      

      To make the proposed changes, first you’ll use the Link Eloquent model to fetch all links from the database, and sort them in decreasing order to make sure any new links you create are listed first, and thus will be shown at the top of the page.

      $links = Link::all()->sortDesc();
      

      The view helper function will look for a template file named welcome.blade.php, in the root of the resources/views directory, and return the rendered result to the browser. You’ll change this to point to a new index.blade.php template. Additionally, you’ll pass the $links variable along as template data.

          return view('index', [
              'links' => $links
          ]);
      

      The following code implements the discussed changes for the / route. Replace the contents in your routes/web.php file with:

      routes/web.php

      <?php
      
      use IlluminateSupportFacadesRoute;
      use AppModelsLink;
      
      /*
      |--------------------------------------------------------------------------
      | Web Routes
      |--------------------------------------------------------------------------
      |
      | Here is where you can register web routes for your application. These
      | routes are loaded by the RouteServiceProvider within a group which
      | contains the "web" middleware group. Now create something great!
      |
      */
      
      Route::get('/', function () {
          return view('index', [
              'links' => Link::all()->sortDesc()
          ]);
      });
      

      Save and close the file when you’re done.

      The routes file is all set, but if you try to access your main application’s page right now you will get an error message because the index.blade.php template doesn’t exist yet. You’ll create it now.

      You can base your template on the Bulma starter template, which provides a minimal HTML page structure with a title, a subtitle, and a main content area. Later on, you’ll include some CSS styling to customize the appearance of this page.

      To get started, create a new index.blade.php template using your text or code editor of choice:

      • nano resources/views/index.blade.php

      Apart from the HTML boilerplate code, which creates the page structure and the static elements that you may want to use (such as headers and other information), you’ll need to show the list of links that was passed along as template data —a collection of Link objects.

      You can use Blade’s foreach loop to loop through the links in the collection, and output them to the page:

                  @foreach ($links as $link)
                      <li>
                          <a href="https://www.digitalocean.com/community/tutorials/{{ $link->url }}" target="_blank" title="Visit Link: {{ $link->url }}">{{ $link->description }}</a>
                      </li>
                  @endforeach
      

      Include the following content in your index.blade.php file. Feel free to customize the title and other information in the page as you wish:

      resources/views/index.blade.php

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Sammy's Awesome Links</title>
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
      </head>
      <body>
      <section class="section">
          <div class="container">
              <h1 class="title">
                  Check out my awesome links
              </h1>
              <p class="subtitle">
                  You can include a little description here.
              </p>
      
              <ul>
                  @foreach ($links as $link)
                      <li>
                          <a href="https://www.digitalocean.com/community/tutorials/{{ $link->url }}" target="_blank" title="Visit Link: {{ $link->url }}">{{ $link->description }}</a>
                      </li>
                  @endforeach
              </ul>
          </div>
      </section>
      </body>
      </html>
      

      Save the file when you’re done.

      Now go to your browser to check the results. You should be able to access your application at port 8000 of either localhost or your remote server’s IP address, in case you are using a remote server as a development platform.

      http://localhost:8000
      

      You’ll see a page like this, showing all links present in your database from latest to first:

      Landing Laravel Demo Application - Initial Version

      Your application is now fully-functional, but you can still improve the appearance of this starter page to make it more appealing to your audience.

      Styling and Customizing the Template (Optional)

      Now that the base template is ready, you can include a few optional CSS customizations to style the page using some of the features available in Bulma, in addition to custom styles.

      To give this page a new look, you can start by setting up a full page background. In this guide, we’ll use a DigitalOcean Wallpaper, but as an alternative you can also use a personal image or an image from a free stock photo website such as unsplash. You’ll need to obtain the image URL and use it to set up the background CSS property for the html element. A few other properties can be adjusted to make sure the image is centralized.

      html {
                  background: url("https://i.imgur.com/BWIdYTM.jpeg") no-repeat center center fixed;
                  -webkit-background-size: cover;
                  -moz-background-size: cover;
                  -o-background-size: cover;
                  background-size: cover;
              }
      

      To style the list of links, you might want to replace the <li> elements for each link with box components, and include the link URL as a paragraph under the link description.

                  @foreach ($links as $link)
                      <div class="box link">
                          <h3><a href="https://www.digitalocean.com/community/tutorials/{{ $link->url }}" target="_blank" title="Visit Link: {{ $link->url }}">{{ $link->description }}</a></h3>
                          <p>{{$link->url}}</p>
                      </div>
                  @endforeach
      

      Finally, you can create a couple additional CSS styles to customize the appearance of the link text.

              div.link h3 {
                  font-size: large;
              }
      
              div.link p {
                  font-size: small;
                  color: #718096;
              }
      

      The following Blade template contains all suggested implementations. Replace your current index.blade.php file contents with:

      resources/views/index.blade.php

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Sammy's Awesome Links</title>
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
      
          <style>
              html {
                  background: url("https://i.imgur.com/BWIdYTM.jpeg") no-repeat center center fixed;
                  -webkit-background-size: cover;
                  -moz-background-size: cover;
                  -o-background-size: cover;
                  background-size: cover;
              }
      
              div.link h3 {
                  font-size: large;
              }
      
              div.link p {
                  font-size: small;
                  color: #718096;
              }
          </style>
      </head>
      <body>
      <section class="section">
          <div class="container">
              <h1 class="title">
                  Check out my awesome links
              </h1>
              <p class="subtitle">
                  You can include a little description here.
              </p>
      
              <section class="links">
                  @foreach ($links as $link)
                      <div class="box link">
                          <h3><a href="https://www.digitalocean.com/community/tutorials/{{ $link->url }}" target="_blank" title="Visit Link: {{ $link->url }}">{{ $link->description }}</a></h3>
                          <p>{{$link->url}}</p>
                      </div>
                  @endforeach
              </section>
          </div>
      </section>
      </body>
      </html>
      

      Save the file when you’re done.

      Now reload your browser and you’ll see the updated page:

      Landing Laravel Demo Application - Final Version



      Source link

      How To Build a Custom Terraform Module


      Introduction

      Terraform modules encapsulate distinct logical components of your infrastructure by grouping their resources together. You can reuse them later with possible customizations, without repeating the resource definitions each time you need them, which is beneficial to large and complexly structured projects. You can customize module instances using input variables you define as well as extract information from them using outputs. Aside from creating your own custom modules, you can also use the pre-made modules published publicly at the Terraform Registry. Developers can use and customize them using inputs like the modules you create, but their source code is stored in and pulled from the cloud.

      In this tutorial, you’ll create a Terraform module that will set up multiple Droplets behind a Load Balancer for redundancy. You’ll also use the for_each and count looping features of the Hashicorp Configuration Language (HCL) to deploy multiple customized instances of the module at the same time.

      Prerequisites

      Note: This tutorial has specifically been tested with Terraform 0.13.

      Module Structure and Benefits

      In this section, you’ll learn what benefits modules bring, where they are usually placed in the project, and how they should be structured.

      Custom Terraform modules are created to encapsulate connected components that are used and deployed together frequently in bigger projects. They are self contained, bundling only the resources, variables, and providers they need.

      Modules are typically stored in a central folder in the root of the project, each in its respective subfolder underneath. In order to retain a clean separation between modules, always architect them to have a single purpose and make sure they never contain submodules.

      It is useful to create modules from your resource schemes when you find yourself repeating them with infrequent customizations. Packaging a single resource as a module can be superfluous and gradually removes the simplicity of the overall architecture.

      For small development and test projects, incorporating modules is not necessary because they do not bring much improvement in those cases. Modules, with their ability for customization, are the building element of complexly structured projects. Developers use modules for larger projects because of the significant advantages in avoiding code duplication. Modules also offer the benefit that definitions only need modification in one place, which will then be propagated through the rest of the infrastructure.

      Next you’ll define, use, and customize modules in your Terraform projects.

      Creating a Module

      In this section, you’ll define multiple Droplets and a Load Balancer as Terraform resources and package them into a module. You’ll also make the resulting module customizable using module inputs.

      You’ll store the module in a directory named droplet-lb, under a directory called modules. Assuming you are in the terraform-modules directory you created as part of the prerequisites, create both at once by running:

      • mkdir -p modules/droplet-lb

      The -p argument instructs mkdir to create all directories in the supplied path.

      Navigate to it:

      As was noted in the previous section, modules contain the resources and variables they use. Starting from Terraform 0.13, they must also include definitions of the providers they use. Modules do not require any special configuration to note that the code represents a module, as Terraform regards every directory containing HCL code as a module, even the root directory of the project.

      Variables defined in a module are exposed as its inputs and can be used in resource definitions to customize them. The module you’ll create will have two inputs: the number of Droplets to create and the name of their group. Create and open for editing a file called variables.tf where you’ll store the variables:

      Add the following lines:

      variables.tf

      variable "droplet_count" {}
      variable "group_name" {}
      

      Save and close the file.

      You’ll store the Droplet definition in a file named droplets.tf. Create and open it for editing:

      Add the following lines:

      droplets.tf

      resource "digitalocean_droplet" "droplets" {
        count  = var.droplet_count
        image  = "ubuntu-18-04-x64"
        name   = "${var.group_name}-${count.index}"
        region = "fra1"
        size   = "s-1vcpu-1gb"
      }
      

      For the count parameter, which specifies how many instances of a resource to create, you pass in the droplet_count variable. Its value will be specified when the module is called from the main project code. The name of each of the deployed Droplets will be different, which you achieve by appending the index of the current Droplet to the supplied group name. Deployment of the Droplets will be in the fra1 region and they will run Ubuntu 18.04.

      When you are done, save and close the file.

      With the Droplets now defined, you can move on to creating the Load Balancer. You’ll store its resource definition in a file named lb.tf. Create and open it for editing by running:

      Add its resource definition:

      lb.tf

      resource "digitalocean_loadbalancer" "www-lb" {
        name   = "lb-${var.group_name}"
        region = "fra1"
      
        forwarding_rule {
          entry_port     = 80
          entry_protocol = "http"
      
          target_port     = 80
          target_protocol = "http"
        }
      
        healthcheck {
          port     = 22
          protocol = "tcp"
        }
      
        droplet_ids = [
          for droplet in digitalocean_droplet.droplets:
            droplet.id
        ]
      }
      

      You define the Load Balancer with the group name in its name in order to make it distinguishable. You deploy it in the fra1 region together with the Droplets. The next two sections specify the target and monitoring ports and protocols.

      The highlighted droplet_ids block takes in the IDs of the Droplets, which should be managed by the Load Balancer. Since there are multiple Droplets, and their count is not known in advance, you use a for loop to traverse the collection of Droplets (digitalocean_droplet.droplets) and take their IDs. You surround the for loop with brackets ([]) so that the resulting collection will be a list.

      You’ve now defined the Droplet, Load Balancer, and variables for your module. You’ll need to define the provider requirements, specifying which providers the module uses, including their version and where they are located. Since Terraform 0.13, modules must explicitly define the sources of non-Hashicorp maintained providers they use; this is because they do not inherit them from the parent project.

      You’ll store the provider requirements in a file named provider.tf. Create it for editing by running:

      Add the following lines to require the digitalocean provider:

      provider.tf

      terraform {
        required_providers {
          digitalocean = {
            source = "digitalocean/digitalocean"
          }
        }
        required_version = ">= 0.13"
      }
      

      Save and close the file when you’re done. The droplet-lb module now requires the digitalocean provider.

      Modules also support outputs, which you can use to extract internal information about the state of their resources. You’ll define an output that exposes the IP address of the Load Balancer, and store it in a file named outputs.tf. Create it for editing:

      Add the following definition:

      outputs.tf

      output "lb_ip" {
        value = digitalocean_loadbalancer.www-lb.ip
      }
      

      This output retrieves the IP address of the Load Balancer. Save and close the file.

      The droplet-lb module is now functionally complete and ready for deployment. You’ll call it from the main code, which you’ll store in the root of the project. First, navigate to it by going upward through your file directory two times:

      Then, create and open for editing a file called main.tf, in which you’ll use the module:

      Add the following lines:

      main.tf

      module "groups" {
        source = "./modules/droplet-lb"
      
        droplet_count = 3
        group_name    = "group1"
      }
      
      output "loadbalancer-ip" {
        value = module.groups.lb_ip
      }
      

      In this declaration you invoke the droplet-lb module located in the directory specified as source. You configure the input it provides, droplet_count and group_name, which is set to group1 so you’ll later be able to discern between instances.

      Since the Load Balancer IP output is defined in a module, it won’t automatically be shown when you apply the project. The solution to this is to create another output retrieving its value (loadbalancer_ip). Save and close the file when you’re done.

      Initialize the module by running:

      The output will look like this:

      Output

      Initializing modules... - droplet-lb in modules/droplet-lb Initializing the backend... Initializing provider plugins... - Using previously-installed digitalocean/digitalocean v1.22.2 Terraform has been successfully initialized! You may now begin working with Terraform. Try running "terraform plan" to see any changes that are required for your infrastructure. All Terraform commands should now work. If you ever set or change modules or backend configuration for Terraform, rerun this command to reinitialize your working directory. If you forget, other commands will detect it and remind you to do so if necessary.

      You can try planning the project to see what actions Terraform would take by running:

      • terraform plan -var "do_token=${DO_PAT}"

      The output will be similar to this:

      Output

      ... An execution plan has been generated and is shown below. Resource actions are indicated with the following symbols: + create Terraform will perform the following actions: # module.groups.digitalocean_droplet.droplets[0] will be created + resource "digitalocean_droplet" "droplets" { ... + name = "group1-0" ... } # module.groups.digitalocean_droplet.droplets[1] will be created + resource "digitalocean_droplet" "droplets" { ... + name = "group1-1" ... } # module.groups.digitalocean_droplet.droplets[2] will be created + resource "digitalocean_droplet" "droplets" { ... + name = "group1-2" ... } # module.groups.digitalocean_loadbalancer.www-lb will be created + resource "digitalocean_loadbalancer" "www-lb" { ... + name = "group1-lb" ... } Plan: 4 to add, 0 to change, 0 to destroy. ...

      This output details that Terraform would create three Droplets, named group1-0, group1-1, and group1-2, and would also create a Load Balancer called group1-lb, which will manage the traffic to and from the three Droplets.

      You can try applying the project to the cloud by running:

      • terraform apply -var "do_token=${DO_PAT}"

      Enter yes when prompted. The output will show all the actions and the IP address of the Load Balancer will also be shown:

      Output

      module.groups.digitalocean_droplet.droplets[1]: Creating... module.groups.digitalocean_droplet.droplets[0]: Creating... module.groups.digitalocean_droplet.droplets[2]: Creating... ... Apply complete! Resources: 4 added, 0 changed, 0 destroyed. Outputs: loadbalancer-ip = ip_address

      Because you’ll modify the configuration significantly in the next step, destroy the deployed resources by running:

      • terraform destroy -var "do_token=${DO_PAT}"

      Enter yes when prompted. The output will end in:

      Output

      .. Destroy complete! Resources: 4 destroyed.

      In this step, you’ve created a module containing a customizable number of Droplets and a Load Balancer that will automatically be configured to manage their ingoing and outgoing traffic. You’ll now deploy multiple instances of a module from the same code using for_each and count.

      Deploying Multiple Module Instances

      In this section, you’ll use count and for_each to deploy the droplet-lb module multiple times, with customizations.

      Using count

      One way to deploy multiple instances of the same module at once is to pass in how many to the count parameter, which is automatically available to every module. Open main.tf for editing:

      Modify it to look like this:

      main.tf

      module "groups" {
        source = "./modules/droplet-lb"
      
        count  = 3
      
        droplet_count = 3
        group_name    = "group1-${count.index}"
      }
      

      By setting count to 3, you instruct Terraform to deploy the module three times, each with a different group name. When you’re done, save and close the file.

      Plan the deployment by running:

      • terraform plan -var "do_token=${DO_PAT}"

      The output will be long, and will look like this:

      Output

      ... An execution plan has been generated and is shown below. Resource actions are indicated with the following symbols: + create Terraform will perform the following actions: # module.groups[0].digitalocean_droplet.droplets[0] will be created ... # module.groups[0].digitalocean_droplet.droplets[1] will be created ... # module.groups[0].digitalocean_droplet.droplets[2] will be created ... # module.groups[0].digitalocean_loadbalancer.www-lb will be created ... # module.groups[1].digitalocean_droplet.droplets[0] will be created ... # module.groups[1].digitalocean_droplet.droplets[1] will be created ... # module.groups[1].digitalocean_droplet.droplets[2] will be created ... # module.groups[1].digitalocean_loadbalancer.www-lb will be created ... # module.groups[2].digitalocean_droplet.droplets[0] will be created ... # module.groups[2].digitalocean_droplet.droplets[1] will be created ... # module.groups[2].digitalocean_droplet.droplets[2] will be created ... # module.groups[2].digitalocean_loadbalancer.www-lb will be created ... Plan: 12 to add, 0 to change, 0 to destroy. ...

      Terraform details in the output that each of the three module instances would have three Droplets and a Load Balancer associated with them.

      Using for_each

      You can use for_each for modules when you require more complex instance customization, or when the number of instances depends on third-party data (often presented as maps) and is not known while writing the code.

      You’ll now define a map that pairs group names to Droplet counts and deploy instances of droplet-lb according to it. Open main.tf for editing by running:

      Modify the file to make it look like this:

      main.tf

      variable "group_counts" {
        type    = map
        default = {
          "group1" = 1
          "group2" = 3
        }
      }
      
      module "groups" {
        source   = "./modules/droplet-lb"
        for_each = var.group_counts
      
        droplet_count = each.value
        group_name    = each.key
      }
      

      You first define a map called group_counts that contains how many Droplets a given group should have. Then, you invoke the module droplet-lb, but specify that the for_each loop should operate on var.group_counts, the map you’ve defined just before. droplet_count takes each.value, the value of the current pair, which is the count of Droplets for the current group. group_name receives the name of the group.

      Save and close the file when you’re done.

      Try applying the configuration by running:

      • terraform plan -var "do_token=${DO_PAT}"

      The output will detail the actions Terraform would take to create the two groups with their Droplets and Load Balancers:

      Output

      ... An execution plan has been generated and is shown below. Resource actions are indicated with the following symbols: + create Terraform will perform the following actions: # module.groups["group1"].digitalocean_droplet.droplets[0] will be created ... # module.groups["group1"].digitalocean_loadbalancer.www-lb will be created ... # module.groups["group2"].digitalocean_droplet.droplets[0] will be created ... # module.groups["group2"].digitalocean_droplet.droplets[1] will be created ... # module.groups["group2"].digitalocean_droplet.droplets[2] will be created ... # module.groups["group2"].digitalocean_loadbalancer.www-lb will be created ...

      In this step, you’ve used count and for_each to deploy multiple customized instances of the same module, from the same code.

      Conclusion

      In this tutorial you’ve created and deployed Terraform modules. You’ve used modules to group logically linked resources together and customized them in order to deploy multiple different instances from a central code definition. You’ve also used outputs to show attributes of resources contained in the module.

      If you would like to learn more about Terraform, check out our How To Manage Infrastructure with Terraform series.



      Source link

      Consuming a Custom API with React


      This tech talk will be streaming live on Thu, Jun 23, 2020 1:00 PM – 2:00 PM ET.
      RSVP for free on GotoWebinar here

      About the Talk

      We have built a custom API with Strapi in the past. Now that we have some data, a dashboard, and a REST API, let’s use JavaScript and React to consume that API.

      We will build a simple app and talk about grabbing data from our new API.

      Key takeaways

      • Building a Custom API with Strapi lets us focus on our frontend code
      • Using React to grab data from an API

      This talk is designed for

      Developers that have their own APIs and want to consume their APIs with React and JavaScript.

      Prerequisites

      Some knowledge of JavaScript and how APIs work is a plus.

      About the Presenter

      Chris Sevilleja (@chrisoncode) is the founder of scotch.io and Senior Developer Advocate at DigitalOcean. He loves trying to figure out the most efficient and practical way to build apps that we can ship to our customers.

      How to Join

      This tech talk is free and open to everyone. Join the live event on Thu, Jun 23, 2020 1:00 PM – 2:00 PM EDT by registering on GotoWebinar here and Chris will be answering questions at the end.

      If you can’t make the live event, the recording and transcript will be published here as soon as it’s available.





      Source link