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
Posted on

How to start, stop, and restart a cron job

CategoriesBack End, Development, Linux

Start a cron job

A cron job is started the moment it is added to the crontab. Note that the task may fail to run if the cron daemon isn’t started. To start the cron service on your Linux machine, run one of the following commands, depending on your Linux distro.

sudo /etc/init.d/cron start

Stop a cron job

You can stop a single cron job by removing its line from the crontab file. To do that, run the crontab -e command and then delete the line for the specific task. Alternatively, you can stop the cron job by commenting it out in the crontab file.

To stop all cron jobs at once and maybe resume them later, you can stop the cron daemon using the following commands:

sudo /etc/init.d/cron stop

Restart a cron job

To restart the cron daemon, run the following commands:

sudo /etc/init.d/cron restart