DEV Community: BELHARRADI JAMAL

How to separate public folder in laravel

BELHARRADI JAMAL — Sun, 16 Jan 2022 12:44:05 +0000

Hi,everyone know that is really difficult to host Laravel project on shared host because they give just one folder public_html, and is the only entry point folder. but the structure of Laravel entry point of laravel is not the** root of project ** is root_project/public.

So how can i host Laravel in this situation ??

The best solution is to separate public folder from Laravel project.
From structure

To structure

With new structure we move public folder outside src code.
so now we change the name of folder public to public_html to host the project.

First we should bind public_path in bootstrap/app.php

// add this before return $app;
$app->bind('path.public', function () {
    return base_path() . '/../public_html';
});

After that we need update path in server.php and *index.php
*

*server.php *

/**
 * Laravel - A PHP Framework For Web Artisans
 *
 * @package  Laravel
 * @author   Taylor Otwell <taylor@laravel.com>
 */

$uri = urldecode(
    parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH)
);

// This file allows us to emulate Apache's "mod_rewrite" functionality from the
// built-in PHP web server. This provides a convenient way to test a Laravel
// application without having installed a "real" web server software here.
if ($uri !== '/' && file_exists(__DIR__ . '/../public_html' . $uri)) {
    return false;
}

require_once __DIR__ . '/../public_html/index.php';

index.php in public_html


<?php

use Illuminate\Contracts\Http\Kernel;
use Illuminate\Http\Request;

define('LARAVEL_START', microtime(true));

/*
|--------------------------------------------------------------------------
| Check If The Application Is Under Maintenance
|--------------------------------------------------------------------------
|
| If the application is in maintenance / demo mode via the "down" command
| we will load this file so that any pre-rendered content can be shown
| instead of starting the framework, which could cause an exception.
|
*/

if (file_exists(__DIR__ . '/../src/storage/framework/maintenance.php')) {
    require __DIR__ . '/../src/storage/framework/maintenance.php';
}

/*
|--------------------------------------------------------------------------
| Register The Auto Loader
|--------------------------------------------------------------------------
|
| Composer provides a convenient, automatically generated class loader for
| this application. We just need to utilize it! We'll simply require it
| into the script here so we don't need to manually load our classes.
|
*/

require __DIR__ . '/../src/vendor/autoload.php';

/*
|--------------------------------------------------------------------------
| Run The Application
|--------------------------------------------------------------------------
|
| Once we have the application, we can handle the incoming request using
| the application's HTTP kernel. Then, we will send the response back
| to this client's browser, allowing them to enjoy our application.
|
*/

$app = require_once __DIR__ . '/../src/bootstrap/app.php';

$kernel = $app->make(Kernel::class);

$response = $kernel->handle(
    $request = Request::capture()
)->send();

$kernel->terminate($request, $response);

That all isn't simple !!!,now you can easily host laravel project on shared hosting any problem of storage or anything else.
you can clone an example from repo laravel-new-structure

I hope that you the article and see you again with another article.

How to transform any SPA/PWA web application into mobile app with CapacitorJs ??

BELHARRADI JAMAL — Sun, 11 Apr 2021 20:53:14 +0000

Hi all,web development become more powerful, web now is more easy we can build complex application with technology like Angular, VueJs and react those technology can build SPA/PWA.

What is SPA/PWA/Capacitorjs?? SPA is short of "single page application" is web application that can run in one page in the browser , the app don't need refresh to post or fetch data, we ajax nested of refreshing.

PWA is a SPA with capacity of work offline with "service worker" that cache asset file(js,css) in the browser means no need to download asset file from http server in the second request.

CapacitorJs is a cross-platform native runtime for web apps, means can transform web application into mobile app and run it in os, it take SPA/PWA and run it on a WebView in native application this native application can run anywhere in any os mobile like android and ios.

let take a example with a VueJs app
we suppose that you have already had a Vuejs app
if you don't now how to create a vue app please read this article Get started with Vuejs

The structure of Vue projet is like this

when you build your vuejs app you will find dist that contains of entrypoint of your SPA

if you open index.html in the browser will run your app,
note "verify the the path of assets in index.html"

Now let add CapacitorJs to our vue app.

Installing capacitorjs



npm install @capacitor/core @capacitor/cli

Init app for CapacitorJs



npx cap init

this command should ask about your name of your app,ID,...
and will generate capacitor.config.json for Capacitorjs config should be like that



{
  "appId": "com.app.app",
  "appName": "app",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    }
  },
  "cordova": {}
}

we will edit the value of attribute webDir from www into dist because Vuejs build your app into dist folder

now should will be like that



{
  "appId": "com.app.app",
  "appName": "app",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "dist",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    }
  },
  "cordova": {}
}

Now will should add platform can be android,ios or electron.

Let start with android



npx cap add android

That should create android folder in your root folder

Now let sync our web app with the android app



npx cap sync

by run this command will copy the dist folder to android app

Now our app is ready to run in android by open android folder in android studio and build our apk.

you can find the source code here vue-capacitorjs-example

Sorry for my bad English, Thanks you for reading.

Handing back-dnd validation errors

BELHARRADI JAMAL — Wed, 27 May 2020 16:35:11 +0000

hand validation errors

a simple library for handing back-end errors with front-end worked with angular,react and vuejs and native js

for exemple if you have a api you want sending data by httpClient you have to validate data in back-end and you have using framework like laravel if not valide will return a json errors something like
you have to hand this errors in check if filed hasErrors or not and return errors if field hasErrors

{
    message:'invalid data',
    errors :{
            firstName:['error 1','error 2'],
            lastName:['error 1','error 2'],
    }
}

Install

`npm install handerrors --save-dev`
    or use cdn
 <script src="https://unpkg.com/handerrors"></script>

methods api

handErrors(errors={}) // helpers return a object HandErrors
setErrors(errors) // set new errors to prop errors setErrors({firstName:['error 1','error 2']})
hasErrors(field) // return true if giving field is has errors hasErrors('firstName')
getErrors(field) // return array|string of field if exist else null
error(field) // return object with HasError/getErrors
controls // get field with errors exemple controls.firstName.errors/ controls.firstName.hasErrors // controls.firstName.remove();

How works ??


import handErrors from 'handerrors';

...

let erros  = handErrors();
errors.setErrors(
{
    message:'invalid data',
    errors :{
            firstName:['error 1','error 2'],
            lastName:['error 1','error 2'],
    }
}
);
if(errors.controls.someField.hasErrors){
// field has errors
  console.log(errors.controls.someField.errors)
} else {
  // not errors
}

Exemple with vuejs / laravel

<template>
   <div class="form-group">
        <label for="first_name">First Name</label>
        <input
          v-model="formdData.model.first_name"
          @blur="contorls.first_name.remove()"
          :class="{'is-invalid':contorls.first_name.hasErrors}"
          type="text"
          class="form-control"
          id="first_name"
          placeholder="Last Name"

        />
        <div v-if="contorls.first_name.hasErrors" class="error">
          <p v-for="msg in contorls.first_name.errors" :key="msg">{{msg}}</p>
        </div>
      </div>
     <div class="form-group">
        <label for="last_name">Last Name</label>
        <input
          v-model="formdData.model.last_name"
          @blur="contorls.last_name.remove()"
          :class="{'is-invalid':contorls.last_name.hasErrors}"
          type="text"
          class="form-control"
          id="last_name"
          placeholder="Last Name"

        />
        <div v-if="contorls.last_name.hasErrors" class="error">
          <p v-for="msg in contorls.last_name.errors" :key="msg">{{msg}}</p>
        </div>
      </div>
      <div class="form-group">
        <label for="username">=UserName</label>
        <input
          v-model="formdData.model.username"
          :class="{'is-invalid':contorls.username.hasErrors}"
          @blur="contorls.username.remove()"
          type="text"
          class="form-control"
          id="username"
          placeholder="UserName"
        />
        <div v-if="contorls.username.hasErrors" class="error">
          <p v-for="msg in contorls.username.errors" :key="msg">{{msg}}</p>
        </div>
      </div>
      <div>
       <div class="form-group">
        <label for="password">=password</label>
        <input
          v-model="formdData.model.password"
          :class="{'is-invalid':contorls.password.hasErrors}"
          @blur="contorls.password.remove()"
          type="text"
          class="form-control"
          id="password"
          placeholder="password"
        />
        <div v-if="contorls.password.hasErrors" class="error">
          <p v-for="msg in contorls.password.errors" :key="msg">{{msg}}</p>
        </div>
      </div>
      <div>
        <button @click="createUser()" type="button" class="btn btn-primary">
        <div v-if="formData.submited" class="spinner-grow text-warning" role="status">
          <span class="sr-only">Loading...</span>
        </div>
        <span v-else>Register</span>
      </button>
</template>
<script>
import handErrors from 'handerrors' 
import axios from 'axios';

export default {
  mounted() {
    this.init();
  },
  data: () => {
    return {
      formData: {
        model: {
          username: "",
          first_name: "",
          last_name: "",
          password: ""
        },
        errors: {},
        submited: false,
      }
    };
  },
  methods: {
    createUser() {
      this.formData.submited = true;
      axios.post('endpoint').then(
        res => {
           this.formData.submited = false;
            aler("ok");
        },
        err => {
          this.formData.submited = false;
          this.formData.errors = handErrors(err.body.errors);
        }
      );
    },
    controls(){
    return this.formData.errors;
  },

};
</script>

Java lambda expression

BELHARRADI JAMAL — Sat, 28 Dec 2019 17:06:00 +0000

Java is a language multiple platform that used by the most developers.
After java 8 oracle add a lot of features to java like lambda

All know anonymous class that we can implement method of class in time executing time

Lambda is just anonymous class that implement a one method of interface

Lambda syntax


// first
l = ()->{ statements };
// second
l = (arg,arg2,arg3,...args)->{ statements };
// third
l = (n)->n; is like (n)->{ return n;};

*** Lambda rules ***

lambda implement just a one interface and interface most have a one method
lambda can take 0,* args
lambda can be implement anywhere
lambda can be return by any method
lambda can not be returning by itself
lambda can be passed as args

** Let begin with simple example **



 interface  says {
     public void show();
 }

public class Lambda  {


    public static void main(String[] args) {

            says  msg = ()->{ System.out.println("hello world");};
            msg.show(); // hello world

    }



}

Lambda example with args


 interface  says {
     public void show(String name);
 }

public class Lambda  {


    public static void main(String[] args) {

           says msg = (name)->{ System.out.println("hello world "+ name );};
            msg.show("jamal"); // hello world jamal

    }



}

** Lambda with return by another method **





 interface  says {
     public void show(String name);
 }

public class Lambda  {

    public static says m(String msg){


        return (name)->{ System.out.println(msg+" "+name);};
    }


    public static void main(String[] args) {

         m("hello world").show("jamal");

         m("hello world").show("mohammed");

    }



}

** passing Lambda as arg of a method **




 interface  says {
     public void show(String name);
 }

public class Lambda  {

    public static void m(says l,String name){

        l.show(name);


    }


    public static void main(String[] args) {

         m((name)->{

                System.out.println(name);

         },"hello");

         m((name)->{

             for (int i=0;i<name.length();i++) {

                 System.out.println(name.charAt(i));

             }
         },"hello world");
    }



}

the last example is most used in practice

Java had do a effort to integrate lambda but it's just anonymous class ,
while JavaScript has arrow function that very easy to use