Mick Redman

Thursday, 13 June 2024

Create a basic API using Laravel 11

This post is specific to Laravel 11, which has a sightly different way of setting up it's API to previous versions.

Pre-requisites

I'll assume that you have Laravel set up to use laravel commands.

Make sure you have SQLite installed.

Basic Steps

Run:

laravel new basic-test

To question 'Would you like to install a starter kit?', select 'No starter kit'.

To question 'Which testing framework do you prefer?', select 'Pest'.

To question 'Would you like to initialize a Git repository?', select 'yes'.

To question 'Which database will your application use?', select 'SQLite'.

To question 'Would you like to run the default database migrations?', select 'yes'.

To question 'Would you like to create it?', select 'yes'.

Run:

cd basic-test

Run:

php artisan install:api

Within routes/api.php, add the following lines below the 'use' statements:

Route::get('/', function () {

return response()->json(['message' => 'Hello World']);

});

Run:

php artisan serve

Open a web browser, and add http://127.0.0.1:8000/api/ to the address bar.

You should see some JSON showing the message 'Hello world'.

Monday, 11 December 2023

PHP Unit test cheat sheet

See here.

Friday, 1 December 2023

Tuesday, 28 November 2023

Revisit "How to make the entire page fade in on load" using Vue.js

index.html

<!DOCTYPE html>

<head>

</head>

<body>

<h1>Hello World!</h1>

</transition>

</body>

</html>

style.css

.fade-enter-active,

.fade-leave-active {

transition: opacity 1s;

}

.fade-enter-from,

.fade-leave-to {

opacity: 0;

}

app.js

const app = Vue.createApp({});

app.mount("body");

Revisit "Simple tab navigation using jQuery" using Vue.js

This is the first of a series in which I revisit old blog posts which made use of JavaScript and jQuery. I attempt to implement them, this time using Vue.js in order to improve my Vue.js skills.

First up is one from 2010 titled Simple tab navigation using jQuery.

index.html

<head>

<title>Tabbed Navigation</title>

body {

font-family: Sans-serif;

}

#subSystem {

margin: 0 auto;

width: 400px;

}

#subNav a.subMenu {

display: block;

text-decoration: none;

float: left;

text-align: center;

width: 5rem;

height: 2.5rem;

padding-top: 1rem;

border-top: 0.0625rem solid #ccc;

border-left: 0.0625rem solid #ccc;

border-right: 0.0625rem solid #ccc;

color: #000;

}

#subNav a.subMenu:hover {

background: #a3a3a3;

color: #fff;

}

.menuSelected {

background: #ccc;

color: #fff;

}

#subContent {

clear: left;

min-height: 25rem;

height: 25rem;

border: 0.0625rem solid #ccc;

}

</style>

</head>

<body>

<a class="subMenu menuSelected" click="loadContent" href="./subPage1.html">First</a>

<a class="subMenu" click="loadContent" href="./subPage2.html">Second</a>

<a class="subMenu" click="loadContent" href="./subPage3.html">Third</a>

</div>

</div>

</body>

</html>

app.js

const app = Vue.createApp({

methods: {

loadContent(event) {

event.preventDefault();

const href = event.target.getAttribute("href");

fetch(href)

.then((response) => response.text())

.then((data) => {

document.getElementById("subContent").innerHTML = data;

})

.catch((error) => {

console.error("Error loading content:", error);

});

mounted() {

// Simulate a click on the first tab when the page loads

const firstTab = document.querySelector(".subMenu.menuSelected");

if (firstTab) {

firstTab.click();

}

});

app.mount("#subSystem");