Prerequisites:

  1. Asynchronous Javascript. Read my article here
  2. Promises in JavaScript
  3. Objects In JavaScript
  4. Jquery and Bootstrap might be used in this article.

(Knowledge of these would help improve your understanding but is not necessary)

Link to the Project Repository — here.

A BRIEF INTRODUCTION

“In a nutshell, Axios is a Javascript library used to make HTTP requests from node.js or XMLHttpRequests from the browser that also supports the ES6 Promise API. — What is Axios.js and why should I care? By @Eric Kolleger. To know more about Axios I’d recommend the article as a read.

What I want to do…


Prerequisites

A basic understanding of Html, CSS and Javascript will go a long way here

You can get the link to the project file here

Quick Introduction

You can store data in your browser and this data can be used for various purposes later. The data is persistent such that after reloading the page data stored is not lost.

Getting Started

HTML:

I’m initializing my html with the following (Using Bootstrap):

<div class=”mb-3">
<input type=”text” class=”form-control” id=”nameField”>
<p class=”lead”>Your Name:</p>
<button type=”submit” class=”btn btn-secondary”>Submit</button>
</div>

We have an input field and a button. What we want is to save the name of the user and…


PREREQUISITES:

Have the following installed on the system you use:

  • XAMPP (running)
  • Composer
  • Visual Studio Code (or any code editor with terminal)

What You Will Learn:

  • Adding Images to your Database
  • Handling Image Upload
  • Fetching and Displaying Image

Getting Started

The first step is to create a Laravel form, I have an article on how to use Laravel Collective for forms here but you can either use blade components or HTML syntax it works fine.

Opening Form Tag

Laravel Collective:

{!!Form::open([‘action’ => ‘App\Http\Controllers\BookController@store’, ‘method’ => ‘post’, ‘enctype’ => ‘multipart/form-data’, ‘class’ => ‘container’]) !!}

HTML

<form action=”App\Http\Controllers\BookController@store”, method=”POST” enctype=”multipart/form-data”>

Explanation:

We open a form tag and the action is where we send the data, I…


A simple project for React beginners

Pre-requisites

  • Code Editor (Visual Studio Code)
  • Nodejs installed
  • Basic Understanding Of React’s Props and State

Getting Started

`ReactJS Illustration

Create a React app

If you haven’t installed React before, you have to install it globally by running this in a command terminal

npm install -g create-react-app

After that, simply install an app by running these commands

npx create-react-app sidenav-app
cd sidenav-app
npm start


Prerequisites:

Basic understanding of JavaScript Arrays and Objects

No matter your level in JavaScript be it Class C or Grandmaster, you must have at one point or the other heard of AJAX and maybe like me so many times it almost got annoying. Let me answer your first question:

AJAX (Short for Asynchronous JavaScript) is a technique for loading data into part of a page without having to refresh the entire page. The data is often sent in a format called JavaScript Object Notation (or JSON).


And avoid tutorial loop

Web Development

This year has seen a massive shift in the way things are done web-wise. With changes to Modular design,

Responsive design, Motion UI and Accelerated mobile pages to name a few.

Unfortunately not many(myself included) are at the forefront of these concepts.

I’ve done my best to study hard to make sure I stay relevant and the fact that you’re reading this article, tells me you’re actively doing the same thing! GREAT JOB!

To stay relevant, you might have had to take up a ton of projects and tutorials and study materials. Which can prove overwhelming…


Using Laravel Collective

It is assumed that you already have a sufficient database and Controllers set up. If not check out my article on databases here.

As usual, you need:

XAMPP and Visual Studio Code

Let’s Get Started

While you can use natural HTML syntax, Laravel has introduced Laravel Collective, to use for forms visit here to see the full documentation.

Laravel Collective

In case you do not understand the documentation, which is understandable, I will be going through it step by step.

Installing Laravel Collective Forms

The first step is to run this in your console making sure you are in your project directory:

composer require laravelcollective/html

One of…


What You Will Learn:

  • Creating Databases
  • Adding tables to your database
  • Adding Data to Table
  • Displaying Table Data

Prerequisites:

Have the following installed on the system you use:

XAMPP

Composer

Visual Studio Code(or any code editor with terminal)

Creating a Database

Open your XAMPP and start running Apache and MySQL, then in your browser type localhost/phpmyadmin/ and then click on “database” and then create a database. Simple! For those unfamiliar with XAMPP. The good news is that is all we need to do there.


(Things to watch out for)

In this article you will learn,

  • How to compile SASS in Laravel
  • How to use Font Awesome icons in your Laravel Project

Alright so a quick intro for those who do not know already, Laravel is a PHP framework and in my opinion one of the best out there. It is relatively easy to learn and while not absolutely necessary, I do suggest you have an understanding of basic PHP concepts.


Every day as a Web Designer the conversation is ever shifting, we’ve gone from just knowing how to build WEBSITES, to knowing how to build RESPONSIVE websites. and everyday new frameworks are coming out, new ways to experiment with the old features to help achieve this one ubiquitous goal and achieve this is the shortest time possible.

Early this year, while working on a company's website, I discovered a strategy to help with this discussion.

Emmanuel Unyime

I am a Web Developer that plays Chess daily. I am interested in ReactJs and LaravelPHP Let's connect!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store