Posted on

Passing data to controller

CategoriesBack End, Development, Laravel

First Method

In your controller (PostsController), edit one of the functions to pass a variable like this:

public function index($id)
{
    return "its working ".$id;
}

Edit your routes to accept the variable like so:

Route::get('/post/{id}', [PostsController::class, 'index']);

Second Method

Add your controller as a resource like this:

Route::resource('posts', PostsController::class);

Then type this into terminal to find which method accepts variables like this:

php artisan route:list

GET|HEAD        posts ........................................... posts.index › PostsController@index  
  POST            posts ........................................... posts.store › PostsController@store  
  GET|HEAD        posts/create .................................. posts.create › PostsController@create  
  GET|HEAD        posts/{post} ...................................... posts.show › PostsController@show  
  PUT|PATCH       posts/{post} .................................. posts.update › PostsController@update  
  DELETE          posts/{post} ................................ posts.destroy › PostsController@destroy  
  GET|HEAD        posts/{post}/edit ................................. posts.edit › PostsController@edit

Method show accepts a variable. So edit the show function in PostsController to display the variable on screen:

public function show($id)
{
    return "hi ".$id;
}
Posted on

Target class controller does not exist – Laravel 8

CategoriesBack End, Development, Laravel

In previous releases of Laravel, the RouteServiceProvider contained a $namespace property. This property’s value would automatically be prefixed onto controller route definitions and calls to the action helper / URL::action method. In Laravel 8.x, this property is null by default. This means that no automatic namespace prefixing will be done by Laravel.

Laravel 8.x Docs – Release Notes

You need to use the Fully Qualified Class Name for your Controllers when referring to them in your routes when not using the namespace prefixing.

use App\Http\Controllers\UserController;

Route::get('/users', [UserController::class, 'index']); 
// or 
Route::get('/users', 'App\Http\Controllers\UserController@index');
Posted on

Create new Laravel project

CategoriesBack End, Development, Laravel

Create the project

Typical way

Open cmd or git bash and find the directory you want to install the Laravel project into. Then just add this line:

composer create-project laravel/laravel example-app

This will create a new project that’s inside folder example-app. When its done installing you will go into the folder to access the project

Quicker Way

Add this to git bash:

composer global require laravel/installer

To update this after its installed do this:

composer global update laravel/installer

Now write the name of your new project:

laravel new example-app

Create Database

Create a new database in PHPMySQL

Add that info into the .env file so project can access the database.

Open in Visual Studio Code

Right click on project folder and choose Open with Code

Type this in the terminal:

php artisan serve
Posted on

Adding Google Analytics 4 (GA4) Tracking to React App

CategoriesDevelopment, Front End, Google Analytics, Online, ReactJS, Tools

Install the React GA4 library

npm i react-ga4

On the top level initialize the tracking ID:

import React, { Suspense } from 'react';
import { BrowserRouter } from 'react-router-dom';

import Routes from './Routes';

import ReactGA from 'react-ga4';
const TRACKING_ID = "G-XXXXXXXXXX"; // OUR_TRACKING_ID
ReactGA.initialize(TRACKING_ID);

function App() {
	return (
		<Suspense fallback={<div>Loading...</div>}>
			<BrowserRouter>
				<Routes ReactGA={ReactGA} />
			</BrowserRouter>
		</Suspense>
	);
}
export default App;

Track pages on Routes.js, then start the Google Event Tracker:

import React, { useEffect, lazy } from 'react';
import {Route, Routes as Switch, useLocation} from 'react-router-dom';
import GoogleAnalyticsEventTracker from './components/GoogleAnalyticsEventTracker/GoogleAnalyticsEventTracker';
 
const Home = lazy(() => import('./pages/Home/Home'));
const Page1 = lazy(() => import('./pages/Page1/Page1'));
const Page2 = lazy(() => import('./pages/Page2/Page2'));
const NotFound = lazy(() => import('./pages/NotFound/NotFound'));


const Routes = props => {
	const url = useLocation();
	useEffect(() => {
		document.title = url.pathname;
		props.ReactGA.pageview(url.pathname + url.search);
	}, [url.pathname]);
	const gaEventTracker = GoogleAnalyticsEventTracker('all_custom_events');

	return (
		<Switch>
			<Route path='/' element={<Home gaEventTracker={gaEventTracker.bind(this)}/>} />
			<Route path='/page1' element={<Page1 gaEventTracker={gaEventTracker.bind(this)}/>} />

			<Route path='/page2/*' element={<Page2 gaEventTracker={gaEventTracker.bind(this)}/>} />

			<Route element={<NotFound/>} />
		</Switch>
	);
}
export default Routes;

Inside your page you’ll add an event for any click events, functions that finish, etc.

import React from 'react'

const Page1 = props => {
	const gaEventTracker = props.gaEventTracker;
    return ( 	
	<button 
		className="button" 
		onClick={e => {
			gaEventTracker('click_button');
		}}
	>
		Click button
	</button>
    );  
}  
export default Page1
Posted on

How to set state with dynamic key-value pair in React

CategoriesDevelopment, Front End, ReactJS

With a dynamic key-value array you can save all form values without needing to create a separate variable for each form element.

import React, { useEffect, useState } from 'react'

const Form = props => {
	const [state, setState] = React.useState({});
	function handleFieldChange(event) {
		setState({ ...state, [event.target.name]: event.target.value });
	}
    return (  
	<div className="form">
            <div className="row g-3 mb-3">
                <div className="col">
                    <input name="firstname" onChange={handleFieldChange} />
                </div>
                <div className="col">
                    <input name="email" onChange={handleFieldChange} />
                </div>
            </div>
            <div className="row g-3 mb-3">
                    <div className="col">
                        <textarea name="message" onChange={handleFieldChange}></textarea>
                </div>
            </div>
        </div>
    );  
}
export default Form