DEV Community: Judith ☁ Oiku

lntroduction to Laravel Livewire

Judith ☁ Oiku — Mon, 30 Aug 2021 08:12:59 +0000

Introduction
This article introduces Livewire and how it can be implemented into a Laravel application.

A modern full-stack web app can be a bit complex to build especially with tools like Vue and React and this is the problem Livewire aims to solve.

Livewire is a full-stack framework for Laravel that enables a developer to build a dynamic interface that is less complex within the Laravel environment.

Prerequisites
Basic knowledge of Laravel is needed

Takeaways
After going through this article, you will understand:

What Livewire is?
What problem does Livewire aim to solve, and
How to get started with Livewire

with that being said, the following steps will enable us to get started with Livewire and how we can implement it into our Laravel application.

Steps
a) Install a new Laravel project using
composer create-project laravel/laravel laravel-livewire
b) cd into laravel-livewire
c) Run composer require livewire/livewire
d) Include @livewireStyles and @livewireScripts in the head and body tag of your views/welcome.blade.php file.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel | Livewire</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

        <!-- Styles -->

        <style>
            body {
                font-family: 'Nunito', sans-serif;
            }
        </style>
        @livewireStyles
    </head>
    <body class="antialiased">


        @livewireScripts
    </body>
</html>

once that is done, we have all we need to start using Livewire in our Laravel application.

e) Next, run php artisan serve
f) Let make our first Livewire component for a simple counter to increase and decrease a value using the php artisan make livewire counter command.

if that is successful, you should see a screen like the one below in your terminal

Looking into our project structure, the above command created two new files in app/Http/Livewire/Counter.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public function render()
    {
        return view('livewire.counter');
    }
}

and resources\views/livewire/counter.blade.php

<div>
    ....
</div>

g) Next, we want to render a simple text to our browser to ensure our component is working, modify your counter Livewire blade file

<div>
    <h1>I am learning Livewire</h1>
</div>

h) Before that, we need to include <livewire: counter /> component in our welcome blade file

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel | Livewire</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

        <!-- Styles -->

        <style>
            body {
                font-family: 'Nunito', sans-serif;
            }
        </style>
        @livewireStyles
    </head>
    <body class="antialiased">

        <livewire:counter /> 

        @livewireScripts
    </body>
</html>

we can now preview it on our browser

Whola!, we have our component rendered to the browser successfully.
i) We can now implement our simple counter

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

    public function increase()
    {
        $this->count++;
    }

    public function decrease()
    {
        $this->count--;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

Here, we declared a public property $count initialized to zero, a method to increase and decrease the number. Public property in Livewire is automatically made available to the view.

<div style="text-align: center">
  <h1>Counter using Laravel Livewire</h1>
  <button type="submit" wire:click="increase">+</button>
  <button type="submit" wire:click="decrease">-</button>
    <h2>{{$count}}</h2>
</div>

we used the livewire template directive in our buttons to increase and decrease the number.

we have successfully implemented a simple counter to increase and decrease numbers using Livewire.

A lot can be still be gotten from Livewire to enable you to build that full-stack modern web application.

To read and get more on Livewire, visit livewire documentation

The code snippet for this tutorial can be found in my GitHub repo

Feel free to say hi via LinkedIn

How to Grow as a Developer

Judith ☁ Oiku — Sat, 08 May 2021 11:35:28 +0000

Growth is a paramount aspect of our lives, and as developers, we desire to grow in our code journey.

In this article, I will share various tips that have helped me grow as a developer and I hope you find it resourceful as well.

"Do the best you can until you know better. Then when you know better, do better." - Maya Angelou

Coding project: taking up a coding project is very important, why? because you get to learn a lot. You get to make research, debug and most importantly understand code structure and technique.
Read books: not everybody loves reading, but I encourage you to cultivate the habit of reading. Books contain useful information that can enable you to improve more on your skill as a developer.
Documentation: documentation is a very important tool and I cannot over-emphasize it. Most tools or plugin we use in our project is backed with well-written documentation that contains: installation guide, usage etc.
Knowing how to read documentation can also help you grow as a developer.
Articles: another tip is articles, there are lots of articles out there, that explains whatever challenge you may have.
Stay updated: keeping up with the latest news and trend with your related programming tools is another tip, why? because it helps you know the latest changes, security fix, tools that are deprecated etc.

I hope you are able to get a thing or two from the above tips, if you have any tip that is also beneficial, feel free to leave it as a comment.

Original post on my blog

How to change your last commit Author in Git

Judith ☁ Oiku — Sat, 16 Jan 2021 09:15:13 +0000

The following steps can be used to change Author in Git:

launch terminal.
run git commit --ammend --author="Author's name<email address>". This opens the vim editor to edit and save changes.
press esc on your keyboard to switch to command mode.
press: (colon) to open the prompt bar at the bottom of the vim editor.
type x after the colon and press enter.

This will save the changes made and exit the vim editor.

visit my blog for more related articles.

How to Import Curl into Postman and Test Requests

Judith ☁ Oiku — Sat, 09 Jan 2021 16:04:44 +0000

What is Curl?

Curl is a command line tool and library for transferring data with URLs.

Steps

The following steps can be used to test Curl in Postman:

open postman.
click import tab on the top left side.
select the raw test tab.
paste the raw text, then click continue.
confirm the name , format and Import as
if step 5. is correct, click import.

This automatically imports Curl into Postman.

To read more on Curl, visit curl.se

follow me on twitter

Original article posted on my blog

Reset or Change Password in Laravel

Judith ☁ Oiku — Mon, 04 Jan 2021 10:49:58 +0000

Reset or change password functionality is part of most web app authentication system that enables a user to change their forgotten password.

Implementing this feature is part of the laravel core setup , all you need do is to configure Laravel authentication into your project. visit the laravel documentation if you need a quick guide.

If the installation is successful, all the necessary files (views, controllers, migrations e.t.c) are automatically added to your project.

In this article, I am going to be showing you how to activate the default laravel reset password feature and how to avoid the error of email not being sent.

Prerequisite

I assume you already have your project set up as well as the laravel default authentication installed.

Steps

The following are the required steps to enable your user reset their password and receive email to complete the process.

make sure you have your database set up and you have successfully migrated your tables.
verify that your App\User model implements use Illuminate\Contracts\Auth\CanResetPassword
verify that your database contains the password_resets_table.

Run your localhost url and navigate to the login screen, on the login display form, click on change password, that should redirect you to a page for you to enter your email address (make sure, it is the same email you used while registering).

If that is successful, you will get an email redirecting you to the change password form, requesting you to enter your new password.

if, for whatever reason, you are not getting the email, add the following to your .env file

mail_from_address
mail_from_sender

To read more about resetting password in laravel , visit the laravel reset password documentation.

Original article posted on my blog

Difference between the assignment , equality & identity operator in PHP

Judith ☁ Oiku — Wed, 16 Dec 2020 11:28:12 +0000

There are several operators used in PHP to carry out programming operations.
= is the assignment operator, this assigns a value

e.g $x = 'hello world

== is the equality operator , it is used to test for equality

<?php
    $day = "Monday";
        if ($day == "Monday") echo "It is work day" 
?>

Since $day = Monday and satisfies the condition, we have the output - It is work day

=== is the identity operator that is use to test if they are equal and of the same type

<?php
    $a = "1000";
    $b = 1000;
        if ($a === $b) 
            {
                echo "identical" ;
            } 
        else 
        {
            echo  "not identical"
        }
?>

outputs not identical because $a is a string and $b is numerical, in other words they are of different type.

PHP Date/Time Cheat Sheet

Judith ☁ Oiku — Mon, 07 Dec 2020 11:12:24 +0000

PHP uses the standard UNIX timestamp, which is the number of seconds since the start of January 1, 1970.

Date/Time appear in different parts of our application, be it a blog application, membership or forum website and so on.

The table below shows the different ways we can format date/time in PHP.

format	description	value
z	day of the year	01 to 365
N	day of the week from Monday to Sunday	1 to 7
j	day of the month with no leading zero	1 to 31
S	Suffix for the day of the month	st, nd, rd or th
d	two digit day of the month with leading zero	01 to 31
D	three letters day of the week	Mon to Sun
l	full names of the day of the week	Sunday to Saturday
W	number of the week of the year	01 to 52
y	year in two digit	00 to 99
Y	year in four digit	0000 to 9999
t	number of days in a specific month	28 to 31
F	full name of the month	January to December
m	number of the month with leading zero	01 to 12
M	names of the month in three letters	Jan to Dec
n	number of the month with no leading zero	1 to 12
w	day of the week from Sunday to Saturday	0 to 6
i	minutes with leading zero	00 to 59
s	Seconds	00 t0 59
A	uppercase	AM to PM
a	lowercase	am to pm
g	12-hour format with no leading zero	1 to 12
G	24-hour format with no leading zero	0 to 23
h	12-hour format with leading zero	01 to 12
H	24-hour format with leading zero	00 to 23

For further reading check out the PHP date/time documentation

Original article posted on my blog

PDOException::SQLSTATE[42000]: Incorrect table definition; there can be only one auto column and it must be defined as a key

Judith ☁ Oiku — Tue, 24 Nov 2020 09:25:43 +0000

Syntax error or access violation on database migration

This likely occurs when you are trying to migrate a pivot table in Laravel in which there is an incorrect table definition, the way to solve it by changing the data type of the foreign keys as shown with the code below:

User Table

    Schema::create('users', function (Blueprint $table) {
            $table->id()->unsigned();
            $table->string()->name();
            $table->timestamps();
        });

Role Table

    Schema::create('roles', function (Blueprint $table) {
            $table->id()->unsigned();
            $table->string()->name();
            $table->timestamps();
        });

Pivot Table

    Schema::create('users_roles', function (Blueprint $table) {
            $table->biginteger('user_id')->unsigned();
            $table->biginteger('role_id')->unsigned();
        });

        Schema::table('users_roles', function (Blueprint $table) {
            $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
            $table->foreign('role_id')->references('id')->on('roles')->onDelete('cascade');
        });

What is Vuex

Judith ☁ Oiku — Mon, 23 Nov 2020 08:34:49 +0000

Introduction

vuex is a state management library for vue that makes it less cumbersome to share and distribute data within the vueJs application.

Prerequisite

Basic knowledge of Vue is required

What next

Without vuex, we can simply distribute data between components using props, but as the application gets larger, managing data can be quite a handful.

To solve this problem, we make use of the vuex, here we have a centralized store, and from that store our components can access our state directly.

A typical store folder looks like this


  import Vue from 'vue'
  import Vuex from 'vuex'

  Vue.use(Vuex)

  export const= new 
  Vuex.Store({
   state:{
   },
   getters:{
   },
   mutations:{
   },
   actions:{
   }
})

Store : This holds out state in our application, and this can be accessed using

this.$store

State : This is the data that will be shared in the application. so instead passing it via props. we can simply have it in our store and have our components access them directly.

Getters: According to the Vuex documentation, we think of getters as the computed property for store and it has an helper , which is the mapGetters Helper that simply takes out store getters to out component computed property.

Mutations: State can only be changed in a vuex store by commiting a mutation. A mutation cannot be called directly. Inorder to do so, you need to use store.commit. Instead of committing a mutation in a component methods, we simply dispatch an action on the mutation.

Actions : Action commits a mutation using the contex.comitand dispatch the action using store.dispatch. We also have the mapAction helpers.

Understanding the basic concept of vuex can help us structure and maintain our code effectively

For further reading , check out the vuex documentation to read more on the core and advance concepts of vuex

Original article was published on my blog

How to append an icon to show/hide password with vuetify

Judith ☁ Oiku — Mon, 16 Nov 2020 15:07:13 +0000

template

<v-text-field
  id="password"
  name="password"
  label="password" 
  :type="show ?'text': 
  'password'"
  :append-icon="show ?'mdi-eye':'mdi-eye-off'"   
  @click:append="show=!show">
</v-text-field>

script

<script>
export default {
  data() {
    return {
       show:false
          }
       }
     }
</script>

For further reading , check out the vuetify documentation

How to solve laravel 500 internal server error deployed via shared hosting

Judith ☁ Oiku — Thu, 23 Apr 2020 10:18:00 +0000

500 internal server error can be frustrating after deploying an application, this was the case when I deployed a laravel application via shared hosting.

After deploying the project, I was getting a 500 internal server error , after much checks here and there, I was able to resolve it

What I did was to change the PHP version in my c-panel to a higher version, after doing that, my project become live...

I hope you find this resourceful

visit my blog

follow me on twitter

Debugging As a Developer

Judith ☁ Oiku — Tue, 14 Apr 2020 13:24:55 +0000

Developers are faced with one area of their coding journey that can be quite frustrating DEBUGGING

Debugging is the process of finding and resolving defects or problems within a computer program that prevents correct operation of computer software or a system - Wikipedia

This is an inevitable phase in development, as you constantly encounter bugs in one way or the other; this may take days or weeks to debug... Not to scare you, especially if you are just starting out LOL

But bugs actually doesn't make you less of a programmer, what is happening basically, is that, there is a missing piece in that puzzle you have to unravel or solve and this in return make you better as a developer

How Are Bugs Introduced

There are couple of ways bugs are introduced in our computer program which are as follows:

when you don't understand the program structure.
breaking changes in computer program versions.
syntax errors from programmers such as missing a closing parenthesis etc.
and lots more.

Tools For Debugging

The most readily available tool for debugging is the Developer Debugger Tool which is available on most commonly used browsers.

We have IDE's like VS Code's. This has an built-in debugger that helps accelerate your edit, compile and debug loop. You can also apply breakpoints and check for errors in your computer program

Other Ways Of Approaching Bugs

So what are the best ways we can approach our computer program when there are bugs

Documentation: this is a very important tool that can help you solve problem in any computer program.
Understanding: you have to understand what you are coding, what are your expectations and that gives you an hint on how to find a possible solution.
Go online: there are online platforms that are very helpful when it comes to proffering solutions in any programming language such as Stackoverflow and a lot of developers can testify to that, and other similar platform, take for example, if you are a Laravel developer like myself, you will find Laracats, appdividend very useful. YouTube is another useful tool I find it very interesting, you get to see the practical demo.
Research: check out for breaking changes like change in version especially if you are coding from a tutorial video and use the program documentation to cover up for any error.
Reach out: yeah, call a friend , your mentor and discuss your problem with them, your can go further by sharing your screen with them or in any forum like Github by dropping a message or issue or checking out for solved issues.
Relax: fatigue on the part of the developer can cause him or her to mess things up, so leave the code and do other things you find interesting, when you feel refreshed, come back. Am sure you will begin to see things from a different picture.

Basically, I have highlighted most of the ways that works for me as a developer, I hope they work for you as well

Feel free to share your experience or ways you approach bugs in your computer program

Original article was published on my blog