all.one.dev.txt

-----------------------------------------------------------
-----------------------------------------------------------
Searching key words: 

Rails6:

Core php: 
      php api, 

Symfony6:
      session, form, flesh message, api, sqlite3, database, child template,
      symfony6 bundle, vue js , react js, fixture

Cakephp4:

Laravel8:

Codeigniter4: 

Javascript: Object

ES6: promise

Vue Js 2.0: vue js form,

Vue Js 3.0: store,

React js : react form, e.target.value in function component,
           redux store,

Angular: template driven form, reactive form,

Computer: cluster

SSH : windows to github, key-generate

-----------------------------------------------------------
-----------------------------------------------------------
----> MyGitHub <-------
https://github.com/astechedu/
https://github.com/astechedu/zend3
https://github.com/astechedu/Laminas
https://github.com/astechedu/laravel7
https://github.com/astechedu/yii2basic
https://github.com/astechedu/phpjwt
https://github.com/astechedu/paypal
https://github.com/astechedu/cakephp4
https://github.com/astechedu/codeigniter4
https://github.com/astechedu/corephpapis
https://github.com/astechedu/corephp
https://github.com/astechedu/laravel8-jetstream-inertia 
https://github.com/astechedu/laravel8-jetstream-livewire
https://github.com/astechedu/Laravel8-breeze-auth
https://github.com/astechedu/laravel8-basics-beginners
https://github.com/astechedu/laravel8-ui-auth 
https://github.com/astechedu/taiwind-tutorial 
https://github.com/astechedu/bootstrap-tutorial 
https://github.com/astechedu/gittutorial
https://github.com/astechedu/vue2api
https://github.com/astechedu/vue3api
https://github.com/astechedu/angularapi
https://github.com/astechedu/reactapi
https://github.com/astechedu/laravel8reactinertiaspa 
https://github.com/astechedu/laravel8vueinertiaspa
https://github.com/astechedu/htmlcssjquerytutorial
https://github.com/astechedu/htmlcssjavascripttutorial 
https://github.com/astechedu/html5css3tutorial 
https://github.com/astechedu/htmlcsstutorial
-------------------X-----------------------------------------
-------------------------------------------------------------
-------------------------------------------------------------
//YouTube Videos Links
   ----> AsTechEdu <----

Playlists :
----------

React App (new playlist created): 
https://youtube.com/playlist?list=PLxAEnUvHtm9NCBIlCWt38zCPPUu2Hzxkh

VueJs app: 
https://youtube.com/playlist?list=PLxAEnUvHtm9MCnsROqNBot4yxlbasdVww

Angular App: 
https://youtube.com/playlist?list=PLxAEnUvHtm9PtdrYsSxK-sa-gD-Mu-YUJ

Express: 
https://youtube.com/playlist?list=PLxAEnUvHtm9NRbbTyahOfUwGfME4dWFv-

NodeJs:
https://youtube.com/playlist?list=PLxAEnUvHtm9PX3BV5ThIJzhqgrHoxwWBH

MongoDB:
https://youtube.com/playlist?list=PLxAEnUvHtm9PZQ6ujDRB78pGeiy7qE6hQ

Ruby Programs: 
https://youtube.com/playlist?list=PLxAEnUvHtm9O0XehRGH-5fE9i466NVMod

PHP Built-in Functions: 
https://youtube.com/playlist?list=PLxAEnUvHtm9OLtEjvO216Fuf3jt5K7Ps7


Vedios Links: 




-----------------------------------------------------------------------
-----------------------------------------------------------------------

Github Images: 

//More option of images, squares, ticks
https://stackoverflow.com/questions/47344571/how-to-draw-checkbox-or-tick-mark-in-github-markdown-table/55523035

Tutorial (All in one): 
https://www.w3schools.io/file/markdown-images/



  How to show images on github page

  //Without size  
  ![](https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png)

  //With size
  ![](https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png | width=100)
OR
<img src="https://your-image-url.type" width="300" height="100">

<img src="#" width="200" height="200">



Tick or check mark images: 

:heavy_check_mark:  
:white_check_mark: 
:heavy_check_mark:

[x] row
[ ] row 

<input type="checkbox" disabled checked /> works  
<input type="checkbox" disabled /> works here too 
.........................................................

:white_large_square
:white_check_mark
:red_circle
:heavy_plus_sign

:x:
:+:

mailto links in markdown:
[Contact Us](mailto:admin@cloudhadoop.com)

document in markdown:
[go to heading](#heading)

<a name="heading">
   My Heading
</a>


Links with title:
Links title example [example link](URL "link title text")

Create a link with target blank in markdown:
<a href="url" target="_blank">link</a>


Reference Links: 
It is reference links [emphasis tutorials][myexample]
[myexample]: /file/markdown-emphasis "markdown emphasis tutorials"


How to add link part of the same document in markdown.
[go to heading](#heading)


Relative Links in markdown:
[links text](relative Url)
[About Us](/about)
<a href="/about">About Us</a>

Inline or External Links in markdown:
[links text](Links Url)
<a href="#">links text</a>


Inline images:
![alt text](image url "image Title")
<img src="image url" alt="alt text" title="image Title" />




..........................................................
//Create tables on README.md
https://www.thecodebuzz.com/display-table-readme-md-file-git-github-markup-format-table/

1.

| FirstName     | LastName      | City     |
| ------------- | ------------- | -------- |
| John          | Test1         | NewYork  |
| Bob           | Test2         | Toronto  |


2.

| FirstName     | LastName      | City   
| ------------- | ------------- | --------    |
| `John`        | Test1         | `NewYork`   |
| `Bob`         | Test2         | `Toronto`   |


3.

Right align     ---:
Left align       :---
Center align    :---:

| FirstName     | LastName      | City  |
| :------------ |   :---:       | --------: |
| `John`        | Test1         | `NewYork`   |
| `Bob`         | Test2         | `Los Angeles`   |



Table List Example: 

| SNo.     | Steps      |
| ------------- | ------------- |
| 1         | Installation of Laravel Application        |
| 2           | Install Breeze        |
| 3           | Run Migration        |
| 4           | Breeze Authentication Controllers        |
| 5           | Breeze Authentication Routes        |
| 6           | Breeze Authentication Views        |
| 7           | Application Testing        |


....................................................

&check; - html checkbox example
:white_check_mark: - emoji checkbox example
&#9746; - unicode checkbox example

    Html item using ✓
    Emojis using white_check_mark
    Unicode using ☒

.....................................
> #### Heading in blockquotes text
> **bold text**
> _italic text_
> ~~strikethrough text~~
> `code element`

    Heading in blockquotes text

    bold text

    italic text

    strikethrough text

    code element
...........................................................

> HelloWorld.java:
>
> ```java
> class HelloWorld {
>    public static void main(String[] args) {
>       System.out.println("Simple hello world program"); 
>   }
>}
> 



Output is

    HelloWorld.java:

    class HelloWorld {
       public static void main(String[] args) {
          System.out.println("Simple hello world program"); 
      }
    }
..............................................................

**It is Bold text**
__It is Bold text__

Following displayed content will be shown to the browser.
It is Bold text
It is Bold text


<strong>It is Bold text</strong>
<strong>It is Bold text</strong>

------------------------------------------
*It is Italic text*
_Underscore text_








--------------------------------------------------------------













-------> Laravel 8 Basics For Beginners <---------

=> Remove Specified Post(delete) <=
=> Flash Message <=  

1) Install laravel-8  composer global require laravel/installer
                      laravel new <AppName>

                    --OR--
             composer create-project laravel/laravel <AppName>

2)  cd <AppName>         & create migrations

3) php artisan migrate 

4) Database configration (env file)

5)  php artisan serve

6) php artisan make:controller PostController

7) back to index view with message 

8)
Route (Web.php) :
use App\Http\Controllers\PostController;

Route::post('posts/delete/{id}', [PostController::class, 'distroy'])->name('posts.distroy');







public function edit($id)
 {
    $posts = Post::find($id);
    return view('posts.edit', compact('posts'));
 }

public function update(Request $request, $id)
 {
    $posts = Post::find($id);
    $posts->name = $request->input('title');
    $posts->email = $request->input('description');   
    $posts->update();
    return redirect()->route('index');     
 }










//Success Flash Message

@if(Session::has('success'))
    <div class="alert alert-success">
        {{Session::get('success')}}
    </div>
@endif

//Error Flash Message
@if(Session::has('fail'))
    <div class="alert alert-danger">
       {{Session::get('fail')}}
    </div>
@endif

//Warning Flash Message
@if(Session::has('warning'))
    <div class="alert alert-danger">
       {{Session::get('warning')}}
    </div>
@endif

//Info Flash Message
@if(Session::has('info'))
    <div class="alert alert-danger">
       {{Session::get('info')}}
    </div>
@endif


return redirect('posts')->with('status', 'Profile updated!'); 





------------------------------------------------
<table class="table table-striped">
  <thead>
    <tr>
      <th>Id</th>
      <th>Title</th>
      <th>Description</th>
      <th>Actions</th>
    </tr>
  </thead>
    @foreach($posts as $post)
    <tr>
      <td>{{ $post['id'] }}</td>
      <td>{{ $post['title'] }}</td>
      <td>{{ $post['description'] }}</td>
      <td>
        <a href="{{ route('posts.index') }}">Edit</a>
      </td>
    </tr>
        @endforeach
  <tbody>
  </tbody>
</table>


    <div class="d-flex justify-content-center">
        {{ $posts->links() }}
    </div>




App Middleware:
use Illuminate\Pagination\Paginator;
Paginator::useBootstrap();






-------------------------------------------------

//default.blade.php


<html>
    <head>
        <title>App Name - @yield('title')</title>
    </head>
    <body>   
        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

--------------------------------------------------

//Extending A Layout:


@extends('layouts.app')

@section('title', 'Page Title')


@section('content')
    <p>This is my body content.</p>
@endsection

---------------------------------------------------



<link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet">




public function index(){
  
  return view('index');
}





---------------------------------------
    public function create(){

      return view('posts.create');
    }

    public function store(Request $request){

      $validated = $request->validate([
          'title' => ['required', 'unique:posts', 'min:5'],
          'description' => ['required', 'min:10'],
      ]);

       $posts = new Post;
       $posts->title = $request->title;
       $posts->description = $request->description;
       $posts->save();
       //session()->flash('success',"Data successfully inserted");
       return redirect()->route('index');       
    }  

    ---------------------------------------------------------------------------





-----------------------------------------------------------------------------------------------
   ===========>    Install Laravel 9    <==============
-----------------------------------------------------------------------------------------------


To install Laravel 9.0 you need to launch composer create-project as usual and then you need to set the “dev-develop” version of the “laravel/laravel” package:

----------------------------------------------------------------------------
composer create-project --prefer-dist laravel/laravel laravel-dev dev-master
----------------------------------------------------------------------------

                          O R

             -------------------------------
              laravel new laravel-dev --dev
             -------------------------------


$ cd laravel-dev

$ php artisan --version

Laravel Framework 9.x-dev

php artisan serve









------------------------------------------------


--------> Laravel 8 Route Parameters <-------------------

Install Laravel:

laravel new AppName
       OR
composer create-project --prefer-dist laravel/laravel AppName
------------------------------------------------------------------

//Required Parameters:

Route::get('/user/{id}', function ($id) {
    return 'User '.$id;
});


//Optional Parameters:

Route::get('/user/{name?}', function ($name = null) {
    return $name;
});


//Regular Expression Constraints:

Route::get('/user/{id}', function ($id) {
    
})->where('id', '[0-9]+');

-------------------------------------------------------------------






-----------> Bootstrap 5 <-------------

What is Bootstrap:

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites. Bootstrap 5 is the newest version of Bootstrap.


<!-- Required meta tags -->

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">


CSS:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">


JS:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

OR

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>









----------------------------------------------------------------------------------------------------

--------> Tailwind CSS <--------------






























---------------->>>>  Laravel8 Articles  <<<<----------------

https://onlinewebtutorblog.com/laravel-8-authentication-using-jetstream-with-livewire/


Find More on Laravel 8 Articles here

    How to Create Multi Language Website in Laravel 8
    How To Read XML File in Laravel 8 – Example
    How To Upload And Save XML Data in Laravel 8
    Laravel 8 Ajax Post Request Tutorial
    Laravel 8 Authentication using Jetstream with Inertia Js
    Laravel 8 Authentication using Jetstream with Livewire
    Laravel 8 Authentication with Breeze Tutorial
    Laravel 8 Clear Cache of Route, View & Config
    Laravel 8 Cron Job Task Scheduling Tutorial
    Laravel 8 DataTable Ajax Pagination with Search And Sort
    Laravel 8 Firebase Push Notification Tutorial
    Laravel 8 Form Validation Methods
    Laravel 8 Installation Guide – PHP Framework
    Laravel 8 Layouts And Views Complete Guide
    Laravel 8 Routing Tutorial Step by Step Guide
    Laravel 8 Send Mail using Gmail SMTP Server
    Laravel 8 Send Push Notification to Android Using Firebase
    Laravel 8 Send Push Notification to IOS Using Firebase
    Laravel 8 Stub Customization

    Related Posts:

    Laravel 8 Authentication using Jetstream with Inertia Js
    Jetstream Login Register Email Verification in Laravel 8
    File or Image Upload Using Livewire Laravel 8 Tutorial
    Laravel 8 Livewire Notification Tutorial with Example
    Work with Laravel 8 Livewire Wizard Form Guide
    API Authentication using Laravel 8 Sanctum Tutorial

---------------x Laravel8 Articles End x---------------------






























----------------> Laravel 8 Badic For Beginnrs ( Middleware ) <-----------------------------

Middleware provide a convenient mechanism for inspecting and 
filtering HTTP requests entering your application.


Defining Middleware:

To create a new middleware, use the:-    

        1. php artisan make:middleware CheckRole 
        2. php artisan make:middleware CheckAge   


1. The application's route middleware.
2. The application's global HTTP middleware stack.
3. The application's route middleware groups



Changes in files: 

app/Http/Middleware/CheckRole       OR     app/Http/Middleware/CheckAge
app/Http/Kernel.php
routes/web.php


//Expression:  ->where('id', '[0-9]+');     ->where('name', '[A-Za-z]+');
------------------------------------------------------------------------













--------------------------------------------------------------------------


//App\Http\Middleware\checkAge;


class checkAge
{    
    public function handle(Request $request, Closure $next)
    {
        if($request->id == 5){
            echo "hi:";
            return $next($request);
        }
        
        //return response()->json('Your account is inactive');
        return redirect('welcome');
    }
}
...............



//routes / web.php

use App\Http\Middleware\checkAge;



Route::get('/', function () {
    return view('welcome');
});


Route::middleware([checkAge::class])->group(function(){ 

  Route::get('/users/{id}', function ($id) {
      echo $id;
  });


  Route::get('/posts/{name?}', function ($name = null) {
      return $name;
  });


  Route::get('/employee/{id}', function ($id) {
      echo $id;
  })->where('id', '[0-9]+');


  Route::get('/ajay/{id}', function ($id) {
      echo $id;
  });


    Route::get('home', [UserController::class,'contact']); 

});



Route::get('/welcome', function () {
    return view('index');
});

..............




//App\Http\Kernel.php

    protected $routeMiddleware = [
        
        'checkage' => \App\Http\Middleware\checkAge::class,
    ];




----------------------> X <-------------------------------------


3. The application's route middleware groups



$ php artisan make:middleware CountryCheck



//.. Other routes

Route::view("noaccess", "noaccess");

Route::get("route-1", function(){ echo "<h3>Welcome To Route 1</h3>"; });

// Protected group by middleware
Route::group(["middleware" => ["apprestrict"]], function(){

   Route::get("route-2", function(){ echo "<h3>Welcome To Route 2</h3>"; });
  
   Route::get("route-3", function(){ echo "<h3>Welcome To Route 3</h3>"; });
});

---------------------------------------------------------

protected $middlewareGroups = [
   ...

   'apprestrict' => [ 
       \App\Http\Middleware\CountryCheck::class,
    ],

   ...
];

-----------------------------------------------------


class CountryCheck
{

    public function handle(Request $request, Closure $next)
    {
        if ($request->country && !in_array($request->country, array("us", "in", "afg"))) {
            return redirect("noaccess");
        }
        return $next($request);
    }
}
-------------------------------------------------------------



--------> Laravel 8 Breeze <---------

1) Install laravel-8  
      
  >By Installer: 
    composer global require laravel/installer
    laravel new <AppName>

  >By Composer:
      composer create-project laravel/laravel <AppName>


2)    composer require laravel/breeze --dev

3)    php artisan breeze:install

4)   npm install

5)   npm run dev

6)   php artisan migrate


* If Problem: 
  npm install Or npm run dev  (Not Working)

* Solution: 
  npm remove laravel-mix                 <- Remove
  npm install laravel-mix --save-dev   <- Install
-------------------------------------------------------------------------------------



--------> Laravel8 Basic For Beginners (Global Middleware) <---------

1) Install laravel-8  
      
    >By Installer:
        composer global require laravel/installer
        laravel new <AppName>

    >By Composer:
        composer create-project laravel/laravel <AppName>

        cd AppName
2) 
   php artisan serve

3) php artisan make:controller UserController
4) php artisan make:controller AdminController

5) php artisan make:middleware CheckCountry

6) Kernel.php : Create Global 'Country' & Register in $middleware

7) web.php

   ->middleware('checkCountry');


    if ($request->country && !in_array($request->country, array("us", "in", "afg"))) {

          return redirect("noaccess");
    }

-----------------------------------------------------------------






django Environment (env): 

Run env 

D:/django>env/Stripgs/activate

(env) D:/django>

(env) D:/django> pip install django

(env) D:/django> django-admin mydjango
(env) D :/django> django-admin startproject mydjango (AppName Or ProjectName)
(env) D :/django> cd myapp
(env) D :/django> cd myapp> python manage.py runserver


--------------------------------





Jenkins initial setup is required. An admin user has been created and a password generated.
Please use the following password to proceed to installation:

cdc3d4d3881f4077a6adeb0ac57abe97

This may also be found at: C:\Users\Ajay\.jenkins\secrets\initialAdminPassword

java -jar D:\Softwares\jenkin\jenkins.war

12.0.0.1:8080


Software:  Jenkins, Terraform, Kubernetes, Git, Docker 



Gaurav Sharma:


In Jenkins: 

  myproject-build
  myproject-test
  myproject-deploy
  myproject-deploy-prod



----------------------------------------------------------------

---------------------------------------------------------------

Clean C drive: 

  click (win + r) keym or 'run' window type temp, %temp% & prefetch, cleanmgr and delete all files

------------------------------------------------------------------























----------------------------------------------------------------------------------------

>>>>>>>>>   laravel 8 ui auth    <<<<<<<<<<


//Run the bolow commands to install laravel ui package

//1.
laravel new laravel-vue         Or    composer create-project laravel/laravel laravel-vue
composer require laravel/ui
php artisan ui vue --auth
npm install && npm run dev
php artisan migrate                  


//2.
laravel new laravel-bootstrap    Or    composer create-project laravel/laravel laravel-bootstrap
composer require laravel/ui 
php artisan ui bootstrap --auth 
npm install && npm run dev
php artisan migrate                   


//3.
laravel new laravel-react         Or    composer create-project laravel/laravel laravel-react
composer require laravel/ui  
php artisan ui react --auth 
npm install && npm run dev
php artisan migrate













--------------------------------------------------------------

>>>>>>>>>   laravel 8 Jetstream ( Livewire )   <<<<<<<<<<




laravel new laravel-jet-livewire       Or    composer create-project laravel/laravel laravel-jet-livewire 

composer require laravel/jetstream


php artisan jetstream:install livewire

php artisan jetstream:install livewire --teams


npm install && npm run dev

php artisan migrate                  





............................................

use Illuminate\Support\Facades\Schema;
Schema::defaultStringLength(191);


--------------------------------------------
































--------------> Ruby On Rails 7 <---------------------------------

Installing Rails: 

1. Ruby
2. SQLite3
3. Node.js
4. Yarn
----------------------------
Installing Ruby:
$ ruby --version

Installing SQLite3:
$ sqlite3 --version

Installing Node.js and 
$ node --version

Installing Yarn:
$ yarn --version
---------------------------

---------------------------
gem install rails   

--------------------------
rails new blog

bin/rails server
------------------------------------------------------------



bin/rails generate controller Articles index --skip-routes
bin/rails generate model Article title:string body:text
bin/rails generate model Comment commenter:string body:text article:references



Cli commands: 
 
 > which postgres

 > brew install postgres
 > rails db:create                     Or rack db:create
 


----------------------------------------------------------



--------> Symfony 6.0 <-----------


Before creating your first Symfony application you must:

1. Install PHP 8.0.2 or higher and these PHP extensions         
   -----------------
           Ctype, iconv, PCRE, Session, SimpleXML, and Tokenize



2. Install Composer, which is used to install PHP packages.
   ----------------
                     

3. Optionally, you can also install Symfony CLI
       
                            -------------------


symfony new my_project_directory --webapp        //  The number of packages installed by default

symfony new my_project_directory                 // API


composer create-project symfony/skeleton:"^6.0" my_project_directory

composer create-project symfony/skeleton:"^6.0" symfony6


-----------------------------------


  * Run your application:
    1. Go to the project directory
    2. Create your code repository with the git init command
    3. Download the Symfony CLI at https://symfony.com/download to install a development web server

  * Read the documentation at https://symfony.com/doc


-----------------------------------------------------------------------------------------------------

--------> Symfony 6.0 <-----------



Before creating your first Symfony application you must:


1. Install PHP 8.0.2 or higher and these PHP extensions         
   -----------------
           Ctype, iconv, PCRE, Session, SimpleXML, and Tokenize



2. Install Composer, which is used to install PHP packages.
   ----------------
                     

3. Optionally, you can also install Symfony CLI
       
                            -------------------



symfony new my_project_directory --webapp        //  The number of packages installed by default

symfony new my_project_directory                 // API



-----------------------------------


  * Run your application:
    1. Go to the project directory



-------------------------------------------------------------------------------------
>>>>>>>>>> JavaScript <<<<<<<<<<<
-------------------------------------------------------------------------------------

>>>>> ECMAScript <<<<<<

---------------------------------------------------------------------

ECMAScript 6 (  or ECMAScript 2015 ) Or ES6


ECMAScript 2015 was the second major revision to JavaScript.

ECMAScript 2015 is also known as ES6 and ECMAScript 6.


    ECMA-262 5.1 edition, June 2011

    ECMA-262, 6th edition, June 2015     
    ECMA-262, 7th edition, June 2016     
    ECMA-262, 8th edition, June 2017     
    ECMA-262, 9th edition, June 2018     
    ECMA-262, 10th edition, June 2019
    ECMA-262, 11th edition, June 2020


The newer version of JavaScript that was introduced in 2015.

ECMAScript is the standard that JavaScript programming language uses. 
ECMAScript provides the specification on how JavaScript programming language should work.


What is ES6 JavaScript used for?

JavaScript ES6 brings new syntax and new awesome features to make your code more modern and more readable.
It allows you to write less code and do more.
ES6 introduces us to many great features like arrow functions, template strings, class destruction, Modules...etc.


1. Const & Let :- 
   ...........


//ES5
  var myBtn = document.getElementById('mybtn');


//ES6 
 const myBtn = document.getElementById('mybtn');

    let name = "Ajay";
    let name = "Aryan";

    cnsole.log(name);

    //Output: Aryan

-----------------------------------


2. Arrow functions :-
   ................

    //ES5

    function myFunc() {
      return 'Hello' + name;
    }

    console.log(myFunc('said'));

    // Output
    // Hello Said


    //ES6

    const myFunc = name =>{
      return `Hi ${name}`;
    }

    console.log(myFunc('said'));      // output Hi Said

    //OR

    const myFunc = name => `Hi ${name}`;

    console.log(myFunc('Said'));      // output Hi Said



3. map, filter, and reduce

4. Template Literals


5.  Default parameters
6.  Array and object destructing
7.  Import and export
8.  Promises
9.  Rest parameter and Spread operator
10. Classes





















---------------------------------------------------------------------


>>>>>> TypeScript <<<<<<<<


---------------------------------------------------------------------

______________     _______________________      ______________
|            |     |                     |      |            |
| TypeScript |  __ | TypeScript Compiler |  __  | JavaScript | 
|   .ts      |     |                     |      |   .js      |
|____________|     |_____________________|      |____________|


TypeScript is a super set of JavaScript.


TypeScript adds additional syntax to JavaScript to support a tighter 
integration with your editor. Catch errors early in your editor.


TypeScript code converts to JavaScript, which runs anywhere JavaScript runs
In a browser, on Node.js or Deno and in your apps.


TypeScript understands JavaScript and uses 
type inference to give you great tooling without additional code.








Why TypeScript:

The main goals of TypeScript are:

    Introduce optional types to JavaScript.
    Implement planned features of future JavaScript, a.k.a. ECMAScript Next or ES Next to the current JavaScript.



TypeScript uses the JavaScript syntaxes and adds additional syntaxes for supporting Types.



1) TypeScript improves your productivity while helping avoid bugs


function add(x, y) {

   return x + y;

}



let result = add(input1.value, input2.value);

console.log(result); // result of concatenating strings


//Result 1020           //input1.value = 10, input2.value=20


......................................................................................


//When you use ( TypeScript ) to explicitly specify the type for the parameters like this:




function add(x: number, y: number) {

   return x + y;

}





let result = add(input1.value, input2.value);


//Result 30           //input1.value = 10, input2.value=20


----------------------------------------------------------------------------


interface Point {
  num1:number;
  num2:number;
}

function addPoint(p:Point) {
  let s:number =0;
      s = p.num1 + p.num2;
  console.log(`${s}`);
}

const Point = {num1:10, num2:12}

addPoint(Point);


<!DOCTYPE html>
<html>
<head>
    <meta lang="utf-8">
  <title>HTML CSS Tutorial</title>
  <script src="new.js"></script>
</head>
<body>

<h1>Hellow Typescript</h1>

</body>
</html>

















------------------------------------------------------------------------------------------------------
>>>>>>>>>> End of JavaScript <<<<<<<<<<<
------------------------------------------------------------------------------------------------------







Windows 10 Shortcuts: 

win + E (open explorer)
win + x (open side menu)
win + A (oepn settings)






Key combinations:

Fn + F5 (open bluetooth on 'or' of)
Fn + F8 ( to increase the laptop volume on the keyboard shown below)
Fn + F8 ()
Fn + F6 (mute volume)
Fn + B: This key combination has the same function as the Break key on a conventional external keyboard.
Fn + K: This key combination has the same function as the ScrLK or Scroll Lock key on a conventional external keyboard.
Fn + P: This key combination has the same function as the Pause key on a conventional external keyboard.
Fn + S: This key combination has the same function as the SysRq key on a conventional external keyboard.
Fn + 4: Press Fn+4 to put the computer into Sleep mode. To wake up the computer, press any key or the power button.
Fn + Space Bar: If the computer supports keyboard backlight, press Fn + Spacebar to switch between the different keyboard backlight status (off, low, or high).


The default function can be changed in the Keyboard Properties window.

F1: Mute or unmute the speakers. ...
F2: Decrease the speaker volume.
F3: Increase the speaker volume.
F4: Mute or unmute the microphones. ...
F5: Darken the computer (LCD) display.
F6: Brighten the computer (LCD) display.

F7: Manage external displays to enable clone or extended desktop.
F8: Enable or disable the built-in wireless features.
F9: Multifunction depending on installed operating system:
– Windows 7: Open Control Panel.
– Windows 10: Open the Settings window.

F10: For Windows 10, enable or disable the built-in Bluetooth features.
F11: Open a keyboard setting page.
F12: For Windows 10, the key invokes the function defined by the user. If no function is defined, press this key to open the Cortana personal assistant. To define or change the action for the F12 key, do the following:
--------------------------------------------








Build:

Build refers to the standalone software artifact generated after converting the source code to an executable code that can be run on a computer. A release, on the other hand, is the distribution of the final version of an application.

-------------------------------------------------------------------------------------------------------------------

1. DevOps Team 2022 Tools: 

    JIRA.
    Kubernetes.
    Azure DevOps.
    Ansible.
    GitHub.
    Jenkins.
    Slack.
    Nagios.
    Prometheus
    New Relic


2. Agile project management:

    monday.com.
    Nifty.
    Wrike.
    SpiraTeam.
    ClickUp.
    Teamwork.
    Freshservice.
    Atlassian Jira.
    Active Collab
    Agilo for Scrum
    SpiraTeam
    Pivotal Tracker
    VSTS
    Icescrum
    Gravity
    SprintGround
    VersionOne
    Taiga
    Quire
    Toggl Plan
    Hive

----------------------------------------------

 >>>>>>>>     N o d e . j s     <<<<<<<<
 ---------------------------------------------

 Creating HTTP Server
 Module: http

 Using: 
       The Built-in HTTP Module, which allows Node.js to transfer data over the Hyper Text Transfer Protocol (HTTP).


Node.js as a Web Server:

       The HTTP module can create an HTTP server that listens to server ports and gives a response back to the client.

      Use the createServer() method to create an HTTP server:

//Add an HTTP Header:
//res.writeHead(200, {'Content-Type': 'text/html'});


var http = require('http');
//create a server object:

http.createServer(function (req, res) {
  res.write('Hello World!');             //write a response to the client
  res.end();                             //end the response
}).listen(8080);                         //The server object listens on port 8080... 




--------------------------------------------------------------------------



----------------------------------------------

 >>>>>>>>     N o d e . j s     <<<<<<<<
 ---------------------------------------------

Path Module: 

const path = require('path')


The path module provides a lot of very useful functionality to access and interact with the file system.
There is no need to install it. Being part of the Node.js core, it can be used by simply requiring it:
const path = require('path')


var baseName = path.basename('/nodejstutorial/http.js');
var dirName = path.dirname('/nodejstutorial/http.js');
var extName = path.extname('/nodejstutorial/http.js');

console.log("BaseName:->" + baseName);
console.log("DirName:-> " + dirName);
console.log("ExtName:-> " + extName);

var baseName = path.basename('/nodejstutorial/http.js');
console.log(basepath);


require('path').parse('/users/http.txt')

//results in:

{
  root: '/',
  dir: '/users',
  base: 'test.txt',
  ext: '.txt',
  name: 'test'
}


----------------------------------------------------------------------------------


----------------------------------------------

 >>>>>>>>     N o d e . j s     <<<<<<<<
 ---------------------------------------------

The Built-in URL Module:

The URL module splits up a web address into readable parts.

URL module, use the require() method
                    .........

var url = require('url'); 


Example: 

Split a web address into readable parts:

var url = require('url');
var adr = 'http://localhost:8080/nodejstutorial.htm?year=2022&month=march';
var q = url.parse(adr, true);

console.log(q.host);         //returns 'localhost:8080'
console.log(q.pathname);     //returns '/default.htm'
console.log(q.search);       //returns '?year=2017&month=february'

var qdata = q.query;         //returns an object: { year: 2017, month: 'february' }
console.log(qdata.month);    //returns 'february'



---------------------------------------------------------------------------------------

----------------------------------------------

 >>>>>>>>     N o d e . j s     <<<<<<<<
 ---------------------------------------------



  nodemon:

      Nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.



        npm install -g nodemon 

                   

        npm install --save-dev nodemon











---------------------------------------------------------------------------------------
----------------------------------------------

 >>>>>>>>     N o d e . j s     <<<<<<<<
 ---------------------------------------------

  Node.js File System Module:

  The Node.js file system module allows you to work with the file system on your computer.

  To include the File System module, use the require() method:

  var fs = require('fs'); 
     

    Common use for the File System module:

    Read files    : fs.readFile()
    Create files  : fs.appendFile(), fs.open(), fs.writeFile()
    Update files  : fs.appendFile(), fs.writeFile()
    Delete files  : fs.unlink()
    Rename files  : fs.rename() 



file01.html
<html>
<body>
<h1>My Header</h1>
<p>My paragraph.</p>
</body>
</html>




Example:

// Read Files

var http = require('http');
var fs = require('fs');
http.createServer(function (req, res) {
  fs.readFile('demofile1.html', function(err, data) {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(data);
    return res.end();
  });
}).listen(8080); 



//Delete Files

var fs = require('fs');

//Delete the file mynewfile2.txt:
fs.unlink('mynewfile2.txt', function (err) {
  if (err) throw err;
  console.log('File deleted!');
});


//Update Files
var fs = require('fs');

fs.appendFile('mynewfile1.txt', ' This is my text.', function (err) {
  if (err) throw err;
  console.log('Updated!');
}); 



//Rename Files

var fs = require('fs');

fs.rename('mynewfile1.txt', 'myrenamedfile.txt', function (err) {
  if (err) throw err;
  console.log('File Renamed!');
}); 



//Create File

var fs = require('fs');

fs.appendFile('mynewfile1.txt', 'Hello content!', function (err) {
  if (err) throw err;
  console.log('Saved!');
});











---------------------------------------------------------------------------
----------------------------------------------

 >>>>>>>>     N o d e . j s     <<<<<<<<
 ---------------------------------------------


 Module : events

  Every action on a computer is an event. 
  Like when a connection is made or a file is opened.


 var events = require("events");

 var eventEmitter = new events.EventEmitter();




Example:

var fs = require('fs');
var rs = fs.createReadStream('./fileName.txt');
rs.on('open', function () {
  console.log('The file is open');
}); 


Example:

var events = require('events');
var eventEmitter = new events.EventEmitter();

//Create an event handler:
var myEventHandler = function () {
  console.log('I hear a Open!');
}

//Assign the event handler to an event:
eventEmitter.on('open', myEventHandler);

//Fire the 'open' event:
eventEmitter.emit('open');

------------------------------------------------------------------------------

----------------------------------------------

 >>>>>>>>     N o d e . j s     <<<<<<<<
 ---------------------------------------------


 Nodemon (Third Party Package)


    nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.




 Adding script in packages.json file

  "scripts": {

    "watch": "nodemon nodemon.js"
 },

 

 >>>>>>>>     N o d e . j s     <<<<<<<<
 ---------------------------------------------


Module : querystring

   const querystring = require('querystring');

 
   The Query String module provides a way of parsing the URL query string.



    querystring = require('querystring'); 

    1.  
    const obj1=querystring.parse('name=sonoo&company=javatpoint');  
    console.log(obj1); 


    2. 
    const qs1=querystring.stringify({name:'sonoo',company:'javatpoint'});  
    console.log(qs1);  























------->>>> Nginx Setting for windows <<<<------------

-----------------------------------------
1. Download binaries of nginx & php8
                         (D:)   (C:)

2. Downlod 'runHiddenConsole' from internet

3. Create nginx start, stop & restart .bat 
   (nginx-start.bat, nginx-stop.bat & nginx-restart.bat)
-----------------------------------------


Create nginx start, stop & restart .bat:


Create file "nginx-start.bat", edit file with down below, make your php-cgi.exe port same as in nginx.conf 


@ECHO OFF

    ECHO Starting PHP FastCGI...
    C:\RunHiddenConsole.exe C:\php8\php-cgi.exe -b 127.0.0.1:9999

    ECHO Starting NGINX
    start nginx.exe

    popd
    EXIT /b

 OR 


 #This is working when nginx in d: drive & php8 in c: drive
 @ECHO OFF

    ECHO Starting PHP FastCGI...
    RunHiddenConsole.exe C:\php8\php-cgi.exe -b 127.0.0.1:9000

    ECHO Starting NGINX... 

    cd D:\nginx
    START nginx.exe
    cd ..

    popd
    EXIT /b 
..............................

Create file "nginx-stop.bat", edit with this:


@ECHO OFF
    taskkill /f /IM nginx.exe
    taskkill /f /IM php-cgi.exe
    EXIT /b

...............................

Create file "nginx-restart.bat":


@ECHO OFF
    call nginx-stop.bat
    call nginx-start.bat
    EXIT /b  

................................


How to Start, Stop, and Restart MySQL Server

    To start MySQL server: sudo service mysqld start.
    To stop MySQL server: sudo service mysqld stop.
    To restart MySQL server: sudo service mysqld restart.


   ------------------------------------------------------------------------------



  >>>>>>>>> Web Server <<<<<<<<<<<<<<<<<

  
  Download nginx, php and mysql binaries And set environment varible

  C:\WebServer\nginx            (Binary)
  C:\WebServer\php              (Binary)
  C:\WebServer\mysql\bin        (Binary)


  Launch a command prompt as a Administrator and we can now initialize the MySQL setup.

  cd C:/WebServer/mysql/bin
    mysqld --initialize-insecure


  You can then run the mysql using this command. Make sure to Allow Access when it asked for permission.

  cd C:/WebServer/mysql/bin
    mysqld 
      'OR'
    mysqld --console              



  You need to open a new command prompt window to login to our MySQL. (Do not close the previous command prompt or else you’ll get an error saying ‘error 2003 (HYOO): Can’t connect to MySQL server on ‘localhost’ (10061))

  cd C:/WebServer/mysql/bin
  mysql -u root


  To enable it back to native, we have to set your root password with mysql_native_password.

  ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '';
  FLUSH PRIVILEGES;


  To see if it works, try running these commands using the Windows Powershell or Command Prompt.

  php -v
  mysqld -V
  nginx -v


 Wrap up:

  PHP:

  php.ini-production to php.ini file 
  extension=/path/to/extension/mysqli.so
  extension=C:\WebServer\php\ext\php_mysqli.dll

  extension=C:\WebServer\php\ext\php_curl.dll
  extension=C:\WebServer\php\ext\php_pdo_mysql.dll
  extension=C:\WebServer\php\ext\php_mbstring.dll
  extension=C:\WebServer\php\ext\php_gd.dll
  extension=C:\WebServer\php\ext\hp_soap.dll


  ; On windows:
  extension_dir = "c:\WebServer\php\ext\"


   RunHiddenConsole.zip:
   At C:\WebServer\nginx, unzip the RunHiddenConsole.zip.


   C:\WebServer\nginx\myserver.bat   (create)


    @echo off
    cd C:\WebServer\nginx


    IF "%1" == "stop" (
      GOTO STOPSERVER
    )else IF "%1" == "start" (
      GOTO STARTSERVER
    )else (
      echo Use these commands:
      echo.
      echo myserver start
      echo myserver stop
    )
    GOTO END

    :STARTSERVER
    QPROCESS * | find /I /N "mysqld.exe">NUL
    IF "%ERRORLEVEL%"=="0" (
      echo MYSQLD is already running.
    )else (
      RunHiddenConsole.exe mysqld --console
      echo MYSQLD is now running.
    )

    QPROCESS * | find /I /N "nginx.exe">NUL
    IF "%ERRORLEVEL%"=="0" (
      echo NGINX is already running.
    )else (
      RunHiddenConsole.exe nginx
      echo NGINX is now running.
    )

    QPROCESS * | find /I /N "php-cgi.exe">NUL
    IF "%ERRORLEVEL%"=="0" (
      echo PHP-CGI is already running.
    )else (
      RunHiddenConsole.exe php-cgi -b 127.0.0.1:9000
      echo PHP-CGI is now running.
    )

    echo.
    echo To stop, type "myserver stop"

    GOTO END

    :STOPSERVER

    QPROCESS * | find /I /N "mysqld.exe">NUL
    IF "%ERRORLEVEL%"=="0" (
      taskkill /F /IM mysqld.exe>NUL
      echo MYSQLD ended successfully.
    )else (
      echo MYSQLD is not running
    )

    QPROCESS * | find /I /N "nginx.exe">NUL
    IF "%ERRORLEVEL%"=="0" (
      ::nginx -s stop
      taskkill /F /IM nginx.exe>NUL
      echo NGINX ended successfully.
    )else (
      echo NGINX is not running
    )

    QPROCESS * | find /I /N "php-cgi.exe">NUL
    IF "%ERRORLEVEL%"=="0" (
      taskkill /F /IM php-cgi.exe>NUL
      echo PHP-CGI ended successfully.
    )else (
      echo PHP-CGI is not running
    )

    :END



After that, you can now use these commands for starting and stopping your server at the Command Prompt.

    myserver start – It will start Nginx, and PHP
    myserver stop – It will stop all instances of Nginx and PHP


But before running the commandline above, we have to edit some blocks on our C:/WebServer/nginx/conf/nginx.conf.

First we have to make sure index.php is been recognized by our nginx. find the location / {} block and change it with the following:

        location / {
            root   html;
            index  index.php index.html index.htm;
        }

Next is we have to make sure nginx know where to run the php files. Find and uncomment the block that says location ~ .php$ {}, the one that says “pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000”. Change it with the following:

        location ~ \.php$ {
              root           html;
    
        fastcgi_pass   127.0.0.1:9000;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;
        }




-- Done --




  myserver start


  MYSQLD is now running.
  NGINX is now running.
  PHP-CGI is now running.

  To stop, type "myserver stop"






-------------------------------------------------------------------------------





Node js config in nginx

  location /api {
     proxy_pass http://location:3000;
  }


  OR


  location /public {
     proxy_pass /usr/local/var/www;
  }

I:\YouTubeTutorials\react-app\public
I:/YouTubeTutorials/react-app/public

  location /public {
     proxy_pass I:/YouTubeTutorials/react-app/public
  }

server {
        listen 81;
        server_name localhost;
        access_log C:\var\log\nginx\access.log;
                location ~ ^/(javascripts|stylesheets|images) {
                root I:/YouTubeTutorials/react-app/public;
                expires max;
        }
        location / {
                proxy_pass http://localhost:3000;
        }
       }
        
-------------------------------------------------------------------




>>>>> Symfony 6 (The Symfony MakerBundle) <<<<<<<<<<<


Installation:

composer require --dev symfony/maker-bundle

compose  r require symfony/maker-bundle --dev

Usage: ( make: )


php bin/console list make


 make:command            Creates a new console command class
 make:controller         Creates a new controller class
 make:entity             Creates a new Doctrine entity class

  [...]

 make:validator          Creates a new validator and constraint class
 make:voter              Creates a new security voter class


php bin/console make:controller --help
 -------------------------------------------------------------------------











//"doctrine/doctrine-bundle": "^2.5",
//"doctrine/doctrine-migrations-bundle": "^3.2",
//"doctrine/orm": "^2.11",



https://medium.com/q-software/symfony-5-the-rest-the-crud-and-the-swag-7430cb84cd5


























----------------------------------------------------------------------
I:\YouTubeTutorials\symfony6>

>>>>> Symfony 6 API <<<<<<<<<<<<<

API ( Representational State Transfer )

  POST — Create (insert data)
  GET — Read (retrieve data)
  PUT /PATCH— Update (modify data)
  DELETE — Delete (delete data)


* Symfony 6.0
* Faker


* symfony new project-name
  OR
* composer create-project symfony/website-skeleton project-name


* symfony server:start

* composer require --dev symfony/maker-bundle
* composer require symfony/orm-pack


* php bin/console make:migration
* php bin/console doctrine:migrations:migrate


* composer require --dev orm-fixtures




DATABASE_URL=mysql://root:@127.0.0.1:3306/symfony6?serverVersion=8.0

* php bin/console make:entity


public function toArray()
{
    return [
        'id' => $this->getId(),
        'firstName' => $this->getFirstName(),
        'lastName' => $this->getLastName(),
        'email' => $this->getEmail(),
        'phoneNumber' => $this->getPhoneNumber()
    ];
}


* php bin/console make:migration
* php bin/console doctrine:migrations:migrate

* composer require --dev orm-fixtures
* php bin/console doctrine:fixtures:load
* composer require annotations



//AppFixtures.php file


class AppFixtures extends Fixture
{
    public function load(ObjectManager $manager)
    {
        $faker = Factory::create();

        for ($i = 0; $i < 50; $i++) {
            $customer = new Customer();
            $customer->setFirstName($faker->firstName);
            $customer->setLastName($faker->lastName);
            $customer->setEmail($faker->email);
            $customer->setPhoneNumber($faker->phoneNumber);
            $manager->persist($customer);
        }

        $manager->flush();
    }
}


* php bin/console doctrine:fixtures:load

* composer require annotations


class CustomerController
{
    private $customerRepository;

    public function __construct(CustomerRepository $customerRepository)
    {
        $this->customerRepository = $customerRepository;
    }

    /**
     * @Route("/customers/", name="add_customer", methods={"POST"})
     */
    public function add(Request $request): JsonResponse
    {
        $data = json_decode($request->getContent(), true);

        $firstName = $data['firstName'];
        $lastName = $data['lastName'];
        $email = $data['email'];
        $phoneNumber = $data['phoneNumber'];

        if (empty($firstName) || empty($lastName) || empty($email) || empty($phoneNumber)) {
            throw new NotFoundHttpException('Expecting mandatory parameters!');
        }

        $this->customerRepository->saveCustomer($firstName, $lastName, $email, $phoneNumber);

        return new JsonResponse(['status' => 'Customer created!'], Response::HTTP_CREATED);
    }
}

............................


class CustomerRepository extends ServiceEntityRepository
{
    private $manager;

    public function __construct
    (
        ManagerRegistry $registry,
        EntityManagerInterface $manager
    )
    {
        parent::__construct($registry, Customer::class);
        $this->manager = $manager;
    }

    public function saveCustomer($firstName, $lastName, $email, $phoneNumber)
    {
        $newCustomer = new Customer();

        $newCustomer
            ->setFirstName($firstName)
            ->setLastName($lastName)
            ->setEmail($email)
            ->setPhoneNumber($phoneNumber);

        $this->manager->persist($newCustomer);
        $this->manager->flush();
    }
}

...................

/**
 * @Route("/customers/{id}", name="get_one_customer", methods={"GET"})
 */
public function get($id): JsonResponse
{
    $customer = $this->customerRepository->findOneBy(['id' => $id]);

    $data = [
        'id' => $customer->getId(),
        'firstName' => $customer->getFirstName(),
        'lastName' => $customer->getLastName(),
        'email' => $customer->getEmail(),
        'phoneNumber' => $customer->getPhoneNumber(),
    ];

    return new JsonResponse($data, Response::HTTP_OK);
}


....................


/**
 * @Route("/customers", name="get_all_customers", methods={"GET"})
 */
public function getAll(): JsonResponse
{
    $customers = $this->customerRepository->findAll();
    $data = [];

    foreach ($customers as $customer) {
        $data[] = [
            'id' => $customer->getId(),
            'firstName' => $customer->getFirstName(),
            'lastName' => $customer->getLastName(),
            'email' => $customer->getEmail(),
            'phoneNumber' => $customer->getPhoneNumber(),
        ];
    }

    return new JsonResponse($data, Response::HTTP_OK);
}

............................


/**
 * @Route("/customers/{id}", name="update_customer", methods={"PUT"})
 */
public function update($id, Request $request): JsonResponse
{
    $customer = $this->customerRepository->findOneBy(['id' => $id]);
    $data = json_decode($request->getContent(), true);

    empty($data['firstName']) ? true : $customer->setFirstName($data['firstName']);
    empty($data['lastName']) ? true : $customer->setLastName($data['lastName']);
    empty($data['email']) ? true : $customer->setEmail($data['email']);
    empty($data['phoneNumber']) ? true : $customer->setPhoneNumber($data['phoneNumber']);

    $updatedCostumer = $this->customerRepository->updateCustomer($customer);

    return new JsonResponse($updatedCostumer->toArray(), Response::HTTP_OK);
}

........................


public function updateCustomer(Customer $customer): Customer
{
    $this->manager->persist($customer);
    $this->manager->flush();

    return $customer;
}

........................


/**
 * @Route("/customers/{id}", name="delete_customer", methods={"DELETE"})
 */
public function delete($id): JsonResponse
{
    $customer = $this->customerRepository->findOneBy(['id' => $id]);

    $this->customerRepository->removeCustomer($customer);

    return new JsonResponse(['status' => 'Customer deleted'], Response::HTTP_NO_CONTENT);
}

.................


public function removeCustomer(Customer $customer)
{
    $this->manager->remove($customer);
    $this->manager->flush();
}

................

----------------------------------------------------------------------        

>>>>>> Symfony 6  API Without Any api's Packages <<<<<<<<<

API ( Representational State Transfer )



use App\Entity\Product;
use Doctrine\Persistence\ManagerRegistry;
use Symfony\Component\HttpFoundation\Request;

http://localhost/products

{
 "name":"soap",
 "price":"40",
 "qty":"3"
}


//Adding Products

    /**
     * @Route("/add_products", name="product_add")
     */
    public function add_product(ManagerRegistry $doctrine, request $request):Response
    {
        $product = new Product();
        $parameter = json_decode($request->getContent(), true);
        $product->setName($parameter['name']);
        $product->setPrice($parameter['price']);
        $product->setQty($parameter['qty']);

        $em = $doctrine->getManager();
        $em->persist($product);
        $em->flush($product);

        return $this->json([
            'product' => "Saved"
        ]);
    }














--------------------------------------------------------------------------


>>>>>>>>>>> Rails CRUD <<<<<<<<<<<<<<


//https://medium.com/@nancydo7/ruby-on-rails-crud-tutorial-899117710c7a


rails new dog-app -T

cd dog-app/

rails g model dog name motto


app/models/dog.rb
db/migrate/[date_time]_create_dogs.rb


rails g controller dogs index show new edit

  index.html.erb
  show.html.erb
  new.html.erb
  edit.html.erb


config/routes.rb

Rails.application.routes.draw do
  get 'dogs/index'
  get 'dogs/show'
  get 'dogs/new'
  get 'dogs/edit'
end


config/routes.rb:

Rails.application.routes.draw do
  resources :dogs
end


class CreateDogs < ActiveRecord::Migration[5.2]
  def change
    create_table :dogs do |t|
      t.string :name
      t.string :motto
      
      t.timestamps
    end
  end
end


db/migrate/seeds.rb

Dog.create(name: 'Nala', motto: 'Born to be wild')
Dog.create(name: 'Alex', motto: 'Calm as can be')
Dog.create(name: 'Leroy', motto: 'Life of the pawty')
Dog.create(name: 'Belle', motto: 'Miss Independent')


Run rake db:seed to add the dogs to the database.

rails console or rails c



rails routes

app/controllers/dogs_controller.rb

def index
   @dogs = Dog.all
end


Index — views/dogs/index.html.erb

<ul>
  <% @dogs.each do |dog| %>
    <li><%= link_to dog.name, dog_path(dog)  %></li>
  <% end %>
</ul>



Show — views/dogs/show.html.erb

<%= link_to 'Remove', @dog, method: :delete, data: { confirm: 'Are you sure?' } %>


New — views/dogs/new.html.erb


<h3>Create a Dog</h3>
<%= form_with model: @dog do |form| %>
  <%= form.text_field :name, placeholder: "name" %>
  <%= form.text_field :motto, placeholder: "motto" %>
  <%= form.submit %>
<% end %>

<!-- <%= form_for @dog do |form| %>
  <%= form.text_field :name, placeholder: 'name' %>
  <%= form.text_field :motto, placeholder: 'motto' %>
  <%= form.submit %>
<% end %> -->



Edit — views/dogs/edit.html.erb

<h3>Update Dog Details</h3>
<%= form_with model: @dog do |form| %>
  <%= form.text_field :name, placeholder: "name" %>
  <%= form.text_field :motto, placeholder: "motto" %>
  <%= form.submit %>
<% end %>



Show — views/dogs/show.html.erb

Show — views/dogs/show.html.erb
Add to your current code:

<h1><%= @dog.name %></h1>
<h4>"<%= @dog.motto %>"</h4>



Let’s refactor the Controller file:


class DogsController < ApplicationController

  before_action :current_dog, only: [:show, :edit, :update, :destroy]

  def index
    @dogs = Dog.all
  end

  def show

  end

  def new
    @dog = Dog.new
  end

  def create
    dog = Dog.create(dog_params)

    redirect_to dog_path(dog)
  end

  def edit

end

  def update
    @dog.update(dog_params)

    redirect_to dog_path(@dog)
  end

  def destroy
    @dog.destroy

    redirect_to dogs_path
  end

  private

  def dog_params
    params.require(:dog).permit(:name, :motto)
  end

  def current_dog
    @dog = Dog.find(params[:id])
  end

  end




index.erb:

  <table>
  <% @dogs.each do |dog| %>
    <tr>
      <td><%= link_to dog.name, dog_path(dog) %></td>
      <td><%= button_to 'Edit', edit_dog_path(dog), method: 'get'%></td>
      <td><%= button_to 'Remove', dog_path(dog), method: 'delete', data: { confirm: 'Are you sure?' } %></td>
  <% end %>
</table>
<%= link_to "Add a New Dog", new_dog_path %>



------------------------------------------------------------------------------------






>>>>>>>>>>>>> All Templates <<<<<<<<<<<<<<<<<<<<<


Ruby On Rails:



--> ( Model ) <---

//app/models/article.rb

class Article < ApplicationRecord
  belongs_to :author, default: -> { Current.user }
  has_many :comments

  has_one_attached :avatar
  has_rich_text :content, encrypted: true
  enum status: [ :drafted, :publised ]

  scope :recent, -> { order(created_at: :desc).limit(25)}

  after_save_commit :deliver_later, if: :publised?

  def byline
    "Written by #{author.name} on #{created_at.to_s(:short)}"
  end

  def deliver_later
    Article::DeliveryJob.perform_later self
  end
end




--> ( Controller ) <--

//app/controllers/articles_controller.rb

class ArticleController < ApplicationController

  def index
    @articles = Article.recent
  end

  def show
    @article = Article.find(params[:id])
    fresh_when etag: @article
  end

  def create
    article = Article.create!(article_params)
    redirect_to article
  end
  
  private
    def article_params
      params.require(:article).permit(:title, :content)
    end

end



--> ( Views ) <-- 

//app/views/articles/show.html.erb


<h1><%= @article.title %></h1>

<%= image_tag @article.creator.avatar.url %>
<p><%= @article.content %></p>

<%= link_to "Edit", edit_article_path(@article) if Current.user.admin? %>



--> ( Routes ) <--

//config/routes.rb

Rails.application.routes.draw do
  resource :article do     # /articles, /article/1

    resources :connents    # /articles/1/comments, /comments/1
  end

  root to: "articles#index" # /
  
  get '/users/:id', to: 'user#show', as: 'user'

end



.......................


Template: 
<ul>
   <% @products.each do |p| %>
      <li><%=  @p.name %></li>
   <% end %>
</ul>

<%=h @user_entered_notes %>











>>>>>>>>>>>>> All Templates <<<<<<<<<<<<<<<<<<<<<


Python:


------> Django <------


 Templates Settings

//Templates Directory
 TEMPLATE_DIR = os.path.join(BASE_DIR, "templates")

//In settings.py file
'DIRS': [TEMPLATE_DIR]

'OR'
'DIRS': [BASE_DIR / 'templates']

.......


---> ( Routes: urls.py file ) <---

//Sending the request to the right view (urls.py)

urlpatterns = [
  path('admin/', admin.site.urls),
  path('contact', views.contact, 'contact.html'),
  path('book/<int:id>/', views.book_detail, name='book_detail'),
  path('catalog/', include('catalog.urls')), re_path(r'^([0-9]+)/$', views.best),
]

........

---> ( Views ) <---

//Handling the request (views.py)

from django.http import HttpResponse
from django.shortcuts import render

def index(request):
  return HttpResponse('Hello from Django!')
end

'OR'

def index(request):
  my_dict = {"insert_me": "I am "}
  return render(request, 'index.html', my_dict)
end

.........

//templates/admin/base_site.html

{% extends "admin/base_site.html" %}

{% block branding %}
  <img src="link/to/logo.png" alt="logo">
    {{ block.super}}
    {% endblock %}


..........

---> ( Model ) <---

//Defining data models (models.py)

from django.db import models

class Team(models.Model):

  team_name = models.CharField(max_length=40)

    TEAM_LEVELS = (
      ('U09', 'Under 09s'),
      ('U10', 'Under 10s'),
      ('U11', 'Under 11s'),
    )

  team_level = models.CharField(max_length=3,
    choices=TEAM_LEVELS, default='U11')

............




HTML Template:

<a href="{% url 'index' %}">Home</a>.


<!DOCTYPE html>
<html lang="en">
<head>
  {% block title %}<title>Local Library</title>{% endblock %}
</head>
<body>
  {% block sidebar %}<!-- insert default navigation text for every page -->{% endblock %}
  {% block content %}<!-- default content text (typically empty) -->{% endblock %}
</body>
</html>



{% extends "base_generic.html" %}

{% block content %}
  <h1>Local Library Home</h1>
  <p>Welcome to LocalLibrary, a website developed by <em>Mozilla Developer Network</em>!</p>
{% endblock %}







------------------------------------------------------------




>>>>> Python Flask <<<<<<<<

from flask import Flask, render_template, redirect, url_for

app = Flask(__name__)

@app.route("/")                 
def index():                 
   return render_template('index.html')

@app.route("/home")                 
def home():                 
    return "This is home."

@app.route("/<name>")                 
def index(name):                 
   return render_template('index.html', content=['aja','yes','no'])



if __name__=="__main__":

  app.run()






--->Folder Structure <---

myflask
    templates
    venv
    app.py




flaskr/templates/base.html

<!doctype html>
<title>{% block title %}{% endblock %} - Flaskr</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<nav>
  <h1>Flaskr</h1>
  <ul>
    {% if g.user %}
      <li><span>{{ g.user['username'] }}</span>
      <li><a href="{{ url_for('auth.logout') }}">Log Out</a>
    {% else %}
      <li><a href="{{ url_for('auth.register') }}">Register</a>
      <li><a href="{{ url_for('auth.login') }}">Log In</a>
    {% endif %}
  </ul>
</nav>
<section class="content">
  <header>
    {% block header %}{% endblock %}
  </header>
  {% for message in get_flashed_messages() %}
    <div class="flash">{{ message }}</div>
  {% endfor %}
  {% block content %}{% endblock %}
</section>








-------------------------------------------------------  


Rails: 

Redirect: 
     redirect_to action: 'show'
     redirect_to action: 'show', id:2
     redirect_to :controller => 'user', :action => 'index'
     redirect_to :action => 'index', :format => 'html'



GemFile:
    gem 'mysql2', '~> 0.5.2'

Install:
    gem install mysql2 -v 0.5.2


Sqlite3: 

  db:create
  rails dbconsole
  db:migrate


--------------------------------------





-----------------------------------------------------
Django Model: 

from django.db import models
from django.utils import timezone
from django.contrib.auth.models import User

class Post(models.Model):
  title = models.CharField(max_length=100)
  content = models.TextField()
  date_posted = models.DateTimeField(auto_now_add=True)
   OR
  date_posted = models.DateTimeField(default)
   OR
  date_posted = models.DateTimeField(default=timezone.now)

  author = models.ForeignKey(User, on_delete)
   OR
  author = models.ForeignKey(User, on_delete=models.CASCADE)


 //python manage.py makemigrtions
// python manage.py sqlmigrate blog 0001


--------------------------------------------------



>>>> MEAN Stack <<<<<<<


1. Frontend (Angular)

2. Backend  (Express js)        // http://localhost:3005

3. Database (MongoDB)










https://jsonplaceholder.typicode.com/users





















3.

MongoDB Atlas: 

const uri = mongodb+srv://astechedu:<password>@cluster0.wx4ui.mongodb.net/users?retryWrites=true&w=majority















----------------------------------------------------------------------------


>>>> Angular Api <<<<<

//--> app.module.ts file

import { HttpClientModule } from '@angular/common/http';
 
@NgModule({

    imports: [
        HttpClientModule
    ],

})
export class AppModule { }
 


//--> app.component.ts file

import { HttpClient } from '@angular/common/http';

export class AppComponent {
 
  apiUrl='http://localhost:3005';
  apiData;
  
  constructor(public http: HttpClient) {

  }  

  ngOnInit(){
    this.http.get(this.apiUrl).subscribe((data)=>{
         //console.log(data);
         this.apiData = data
    })
  }

}

----------------------------------------------------------------












>>>>>>>> Node js ( MySql ) <<<<<<<<<<<<

Node.js can be used in database applications.


--> npm install mysql 

var mysql = require('mysql'); 

Node.js can use this module to manipulate the MySQL database:


------------------
Create Connection :
------------------
Start by creating a connection to the database.
Use the username and password from your MySQL database.


//db_connection.js
var mysql = require('mysql');

var con = mysql.createConnection({
  host: "localhost",
  user: "yourusername",
  password: "yourpassword"
});

con.connect(function(err) {
  if (err) throw err;
  console.log("Connected!");
})




//C:\Users\Your Name>node db_connection.js 


con.connect(function(err) {
  if (err) throw err;
  console.log("Connected!");
  con.query("CREATE DATABASE mydb", function (err, result) {
    if (err) throw err;
    console.log("Database created");
  });
});

-----------------------------------------------------


con.connect(function(err) {
  if (err) throw err;
  console.log("Connected!");
  var sql = "CREATE TABLE customers (name VARCHAR(255), address VARCHAR(255))";
  con.query(sql, function (err, result) {
    if (err) throw err;
    console.log("Table created");
  });
});
----------------------------------------
con.connect(function(err) {
  if (err) throw err;
  console.log("Connected!");
  var sql = "INSERT INTO customers (name, address) VALUES ('Company Inc', 'Highway 37')";
  con.query(sql, function (err, result) {
    if (err) throw err;
    console.log("1 record inserted");
  });
});
---------------------------------------

con.connect(function(err) {
  if (err) throw err;
  con.query("SELECT * FROM customers", function (err, result, fields) {
    if (err) throw err;
    console.log(result);
  });
});
-----------------------------------------
-----------------------------------------------------------------------

>>>>>>>> English <<<<<<<

such as, during, With this done
-----------------------------------------
-----------------------------------------------------------------------
https://medium.com/@oliver.seq/creating-a-rest-api-with-rails-2a07f548e5dc





>>>>>> REST API with Rails 7 <<<<<<<


 rails new rest-api-guide --api --database=postgresql


 Models:
    rails generate model User username:string password:string

 Controller:
    rails generate model Fact user:references fact:string likes:integer




  rails db:setup
  rails db:migrate


  Controllers:
    rails g controller api/v1/Users
    rails g controller api/v1/Facts


    rails routes


  http://localhost:3000/api/v1/users


rails c (Rail Console):

oliver = User.create( username: 'Oliver', password: 'password' )

fact_one = Fact.create( fact: 'Wiley Hardeman Post was the first pilot to fly solo around the world.', likes: 1, user_id: 1 )

fact_two = Fact.create( fact: 'The Symphony No1 in E flat major, K.16, was written by Wolfgang Amadeus Mozart at the age of 8.’ likes: 2, user_id: 1 )


http://localhost:3000/api/v1/facts




------------------

Models: 

class User < ApplicationRecored
  has_many :facts
end

------------------

class Facts < ApplicationRecored
  blongs_to :user
end


//schema.rb
create_table "facts", force :: cascade do |t|
  t.bigint "user_id"
  t.string "fact"
  t.datetime "created_at", null: false
  t.datetime "updated_at", null: false
  t.index ["user_id"], name: "index_facts_on_user_id"
end

create_table "users", force :: cascade do |t|
  t.string "username"
  t.string "password"
  t.datetime "created_at", null: false
  t.datetime "updated_at", null: false
end


add_foreign_key "facts", "users"

end
-----------------------------------------------


//config/routes.rb

Rails.application.routes.draw do 
  namespace :api do 
    namespace :v1 do
      resources :users do 
        resources :facts
      end
    end
  end
end


//Controller
//UsersController

class Api::V1::UsersController < ApplicationController
  #skip_before_action :verify_authenticity_token  #For Stop Authentication

# GET /users
def index
  @users = User.all
  render json: @users
end

# GET /user/:id
def show
  @user = User.find(params[:id])
  render json: @user
end

# POST /users
def create
    @user = User.new(user_params)
    if @user.save
        render json: @user
    else
      render error: { error: 'Unable to create User.'}, status: 400
    end
end

# PUT /users/:id
def update
    @user = User.find(user_params)
    if @user
       @user.update(user_params)
        render json: { message: 'User successfully updated.'}, status: 200
    else
      render json: { error: 'Unable to update User.'}, status: 400
    end
end

# DELETE /users/:id
def destroy
    @user = User.find(params[:id])
    if @user
       @user.destroy
        render json: { message: 'User successfully deleted.'}, status: 200
    else
      render json: { error: 'Unable to delete User.'}, status: 400
    end
end

private

def user_params
  params.require(:user).permit(:username, :password)
end

end
-------------------------------

//Controller
//UsersController

class Api::V1::FactsController < ApplicationController

before_action :find_fact, only: [:show, :update, :destroy]
#skip_before_action :verify_authenticity_token  #For Stop Authentication


def index
  @facts = Facts.all
  render json: @facts
end

def show
  render json: @fact
end

def create
    @fact = Fact.new(fact_params)
    if @fact.save
        render json: @fact
    else
      render error: { error: 'Unable to create Fact.'}, status: 400
    end
end

def update
    if @fact
       @fact.update(user_params)
        render json: { message: 'Fact successfully updated.'}, status: 200
    else
      render json: { error: 'Unable to update Fact.'}, status: 400
    end
end

def destroy
    if @fact
       @fact.destroy
        render json: { message: 'User successfully deleted.'}, status: 200
    else
      render json: { error: 'Unable to delete Fact.'}, status: 400
    end
end

private

def fact_params
  params.require(:fact).permit(:fact, :likes, :user_id)
end

def find_fact
  @fact = Fact.find(params[:id])
end

end



//http://localhost:3000/api/v1/users


Adding Data:


$ rails c.

$ oliver = User.create( username: 'Oliver', password: 'password' )

$fact_one = Fact.create( fact: 'Wiley Hardeman Post was the first pilot to fly solo around the world.', likes: 1, user_id: 1 )

$ fact_two = Fact.create( fact: 'The Symphony No1 in E flat major, K.16, was written by Wolfgang Amadeus Mozart at the age of 8.’ likes: 2, user_id: 1 )



Rails.application.routes.draw do 
  namespace :api do 
    namespace :v1 do
      resources :users 
      resources :facts      
    end
  end
end




------------------------------------------------------------

<<<< Node js ( nodemailer module ) >>>>>


npm install nodemailer

var nodemailer = require('nodemailer'); 


Send an Email: 

var nodemailer = require('nodemailer');

var transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: 'youremail@gmail.com',
    pass: 'yourpassword'
  }
})


var mailOptions = {
  from: 'youremail@gmail.com',
  to: 'myfriend@yahoo.com',
  subject: 'Sending Email using Node.js',
  text: 'That was easy!'
};

transporter.sendMail(mailOptions, function(error, info){
  if (error) {
    console.log(error);
  } else {
    console.log('Email sent: ' + info.response);
  }
}); 

----------------

Multiple Receivers: 

var mailOptions = {
  from: 'youremail@gmail.com',
  to: 'myfriend@yahoo.com, myotherfriend@yahoo.com',
  subject: 'Sending Email using Node.js',
  text: 'That was easy!'
} 

------------------


Send HTML: 


var mailOptions = {
  from: 'youremail@gmail.com',
  to: 'myfriend@yahoo.com',
  subject: 'Sending Email using Node.js',
  html: '<h1>Welcome</h1><p>That was easy!</p>'
} 



-----------------------------------------------------------------------


>>>>> Node js ( Mangoose ) <<<<<<<<

mongodb+srv://astechedu:<password>@cluster0.wx4ui.mongodb.net/myFirstDatabase?retryWrites=true&w=majority

npm install mangoose



------------------------------------------------------------------------

//https://medium.com/codingthesmartway-com-blog/the-mern-stack-tutorial-building-a-react-crud-application-from-start-to-finish-part-1-d8d701c2995

>>>>>>> Mern Stack <<<<<<<<<<<


Install Bootstrap : 

  npm install bootstrap
  import "bootstrap/dist/css/bootstrap.min.css";

  npm install react-router-dom
  import { BrowserRouter as Router, Route, Link } from "react-router-dom";

............................................................
import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";class App extends Component {
  render() {
    return (
      <Router>
        <div className="container">
          <h2>MERN-Stack Todo App</h2>
          <Route path="/" exact component={TodosList} />
          <Route path="/edit/:id" component={EditTodo} />
          <Route path="/create" component={CreateTodo} />
        </div>
      </Router>
    );
  }
}export default App;
................................................


Creating Components:

    todos-list.component.js
    edit-todo.component.js
    create-todo.component.js



//todos-list.component.js:

import React, { Component } from 'react';export default class TodosList extends Component {
    render() {
        return (
            <div>
                <p>Welcome to Todos List Component!!</p>
            </div>
        )
    }
}



//edit-todo.component.js:

import React, { Component } from 'react';export default class EditTodo extends Component {
    render() {
        return (
            <div>
                <p>Welcome to Edit Todo Component!!</p>
            </div>
        )
    }
}


//create-todo.component.js:

import React, { Component } from 'react';export default class CreateTodo extends Component {

  constructor(props) {
          super(props);        
          this.state = {
              todo_description: '',
              todo_responsible: '',
              todo_priority: '',
              todo_completed: false
          }
  this.onChangeTodoDescription = this.onChangeTodoDescription.bind(this);
          this.onChangeTodoResponsible = this.onChangeTodoResponsible.bind(this);
          this.onChangeTodoPriority = this.onChangeTodoPriority.bind(this);
          this.onSubmit = this.onSubmit.bind(this);          
  }

  onChangeTodoDescription(e) {
          this.setState({
              todo_description: e.target.value
          });
      }    onChangeTodoResponsible(e) {
          this.setState({
              todo_responsible: e.target.value
          });
      }    onChangeTodoPriority(e) {
          this.setState({
              todo_priority: e.target.value
          });
  }

  onSubmit(e) {
          e.preventDefault();
          
          console.log(`Form submitted:`);
          console.log(`Todo Description: ${this.state.todo_description}`);
          console.log(`Todo Responsible: ${this.state.todo_responsible}`);
          console.log(`Todo Priority: ${this.state.todo_priority}`);
          
          this.setState({
              todo_description: '',
              todo_responsible: '',
              todo_priority: '',
              todo_completed: false
          })
  }

    render() {
        return (
            <div>
                <p>Welcome to Create Todo Component!!</p>
            </div>
        )
    }
}

...............................................

Creating The Basic Layout & Navigation:



import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";import "bootstrap/dist/css/bootstrap.min.css";import CreateTodo from "./components/create-todo.component";
import EditTodo from "./components/edit-todo.component";
import TodosList from "./components/todos-list.component";import logo from "./logo.png";class App extends Component {
  render() {
    return (
      <Router>
        <div className="container">
          <nav className="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="https://codingthesmartway.com" target="_blank">
              <img src={logo} width="30" height="30" alt="CodingTheSmartWay.com" />
            </a>
            <Link to="/" className="navbar-brand">MERN-Stack Todo App</Link>
            <div className="collpase navbar-collapse">
              <ul className="navbar-nav mr-auto">
                <li className="navbar-item">
                  <Link to="/" className="nav-link">Todos</Link>
                </li>
                <li className="navbar-item">
                  <Link to="/create" className="nav-link">Create Todo</Link>
                </li>
              </ul>
            </div>
          </nav>
          <br/>
          <Route path="/" exact component={TodosList} />
          <Route path="/edit/:id" component={EditTodo} />
          <Route path="/create" component={CreateTodo} />
        </div>
      </Router>
    );
  }
}
export default App;

........................................


>>>>>>> Rails 7 Database ( Sqlite3 ) <<<<<<

rails dbconsole

CREATE TABLE users (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  name varchar(50),
  email varchar(100),
  created_at datetime,
  updated_at datetime
);

insert into users(id, name, email) values(1, "ajay", "a@gmail.com");
insert into users(id, name, email) values(2, "sumit", "s@gmail.com");
insert into users(id, name, email) values(3, "rohit", "r@gmail.com");
insert into users(id, name, email) values(4, "zubin", "z@gmail.com");
insert into users(id, name, email) values(5, "ram", "ram@gmail.com");

//Conroller: 
----------
class UserController < ApplicationController
  def index
    @user = User.find(x) # x = given id
  end
end


//Model:      //user.rb
------
class User < ActiveRecord::Base
end


//View:  //index.html.rb
------

<!DOCTYPE html>
<html>
<head>
  <title>Index</title>
</head>
<body>
  <h1>This is index html page</h1>
    <% @user.each do |user| %>
      <%= user.id %>
      <%= user.name %>
    <% end %>
</body>
</html>


--------------------------------------------------------------------

<<<< Rails 7 REST API <<<<<<<


//UsersController

class UsersController < ApplicationController
  skip_before_action :verify_authenticity_token  #For Stop Authentication

# GET /users
def index
  @users = User.all
  render json: @users
end

# GET /user/:id
def show
  @user = User.find(params[:id])
  render json: @user
end

# POST /users
def create
    @user = User.new(user_params)
    #@user = User.create(user_params)
    if @user.save
        render json: @user
    else
      render error: { error: 'Unable to create User.'}, status: 400
    end
end

# PUT /users/:id
def update
    @user = User.find(params[:id])
    if @user
       @user.update(user_params)
        render json: { message: 'User successfully updated.'}, status: 200
    else
      render json: { error: 'Unable to update User.'}, status: 400
    end
end

# DELETE /users/:id
def destroy
    @user = User.find(params[:id])
    if @user
       @user.destroy
        render json: { message: 'User successfully deleted.'}, status: 200
    else
      render json: { error: 'Unable to delete User.'}, status: 400
    end
end

private

  def user_params  
     params.require(:user).permit(:name, :email)  
     #params.permit(:name, :email) 
  end

  def sign_up_params
    params.permit(:email, :password, :password_confirmation)
  end 

  #Redirection
  def contact
    #redirect_to action: 'services', id: 2    
  end


end

Flash In Controller: 
-------------
    flash[:success] = "The to-do item was successfully destroyed."
    redirect_to todos_url
--------------

//Routes: routes.rb

Rails.application.routes.draw do
  root "user#index"
  post '/users/create', to: 'user#create'
  get '/users/show/:id', to: 'user#show'
  put '/users/update/:id', to: 'user#update'   
  delete '/users/delete/:id', to: 'user#delete'
end

OR  

resources :users     # OR resources :user



Rails.application.routes.draw do
  get '/users', to: "user#index"
  get '/users/:id', to: "user#show"
  get '/users/new', to: "user#new"
  post '/users', to: "user#create"
  get '/users/:id/edit', to: "user#edit"
  put '/users/:id', to: "user#update"
  delete '/users/:id', to: "user#destroy"
end


Rails.application.routes.draw do
  get '/categories', to: "user#index"
  get '/categories/:id', to: "user#show"
  get '/categories/new', to: "user#new"
  post '/categories', to: "user#create"
  get '/categories/:id/edit', to: "user#edit"
  put '/categories/:id', to: "user#update"
  delete '/categories/:id', to: "user#destroy"
end


-------
Rails.application.routes.draw do 
  namespace :api do  
    namespace :v1 do   
      resources :articles    #resources :article      
  end 
end

# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html

end
------------------------
resources :secret_menu_items, only: [:index, :show, :create, :update, :destroy]


  rails db:setup
  rails db:migrate


{
  "id":4,
  "name":"rahul",
  "email":"n4@gmail.com"
}


--------------------------------------

---------------------------------------------------------------------

>>>>>> Rails 7 REST API Without Any Packages <<<<<<<<<<<<<<

Table: users


Models:
    rails generate model User

Controller:
    rails generate controller User


    rails routes

  http://localhost:3000
  http://localhost:3000/users


Model: 

class User < ApplicationRecored  
end

------------------


create_table "users", force :: cascade do |t|
  t.string "username"
  t.string "password"
  t.datetime "created_at", null: false
  t.datetime "updated_at", null: false
end


//User Controller 

class UserController < ApplicationController
  skip_before_action :verify_authenticity_token
  #before_action :find_fact, only: [:show, :update, :destroy]

  # GET /users
  def index
     @user = User.all() # find(x) # x = given id
     render json: @user
  end

    # GET /users/id
  def show
    @user = User.find(params[:id])
      if @user        
          render json: @user
      else
        render error: { error: 'Unable to create User.'}, status: 400
      end
  end

    # POST /users
  def create
      @user = User.new(user_params) 
      if @user
        @user.save
          render json: @user
      else
        render error: { error: 'Unable to create User.'}, status: 400
      end
  end

  # PUT /users/id
  def update
      @user = User.find(params[:id])
      if @user
         @user.update(user_params)
          render json: { message: 'User successfully updated.'}, status: 200
      else
        render json: { error: 'Unable to update User.'}, status: 400
      end 
  end

    # DELETE /users/id
  def destroy
      @user = User.find(params[:id])
      if @user
         @user.destroy()
          render json: { message: 'User successfully deleted.'}, status: 200
      else
        render json: { error: 'Unable to delete User.'}, status: 400
      end
  end

    private

  def user_params  
     params.require(:user).permit(:name, :email)  
     #params.permit(:name, :email) 
  end

  #def contact
    #redirect_to action: 'services', id: 2    
  #end
end


---------> End Conroller <----------------------------


Rails.application.routes.draw do
  get '/users', to: "user#index"
  get '/users/:id', to: "user#show"
  get '/users/new', to: "user#new"
  post '/users', to: "user#create"
  get '/users/:id/edit', to: "user#edit"
  put '/users/:id', to: "user#update"
  delete '/users/:id', to: "user#destroy"
end


 -- OR --

 Rails.application.routes.draw do
   resources :users      #OR resource :user
end


{
  "id":4,
  "name":"rahul",
  "email":"n4@gmail.com"
}


-------------------------------------------------------
-------------------------------------------------------
>>>>>>> Sqlite3 <<<<<<<<

create database users;
create table users(
  id integer primary key autoincrement,
  name varchar(20) NOT NULL,
  email varchar(50) NOT NULL
);


//CMD Commands in Sqlite3
.schema users    //Showing table's structue
.databases
.tables


select *from users


-------------------------------------------------------

-------------------------------------------------------


>>>>>> Rails 7 REST API ( Api/v1 ) <<<<<<<<<<<<<<




Controller:
    rails g controller api/v1/Post

Model: 
    rails g model api/v1/Post


    rails routes

  http://localhost:3000/api/v1/users



routes.rb:
---------

  namespace :api do  
    namespace :v1 do         
    resources :post
    end
  end 

  ------------------


post_controller.rb
------------------


class Api::V1::PostController < ApplicationController
    skip_before_action :verify_authenticity_token
  #before_action :find_fact, only: [:show, :update, :destroy]

  # GET /posts
  def index
     @post = Post.all() # find(x) # x = given id
     render json: @post
  end

    # GET /posts/id
  def show
    @post = Post.find(params[:id])
      if @post        
         render json: @post
      else
        render error: { error: 'Unable to create Post.'}, status: 400
      end
  end

    # POST /posts
  def create
      @post = Post.new(post_params) 
      if @post
        @post.save
          render json: @post
      else
        render json: { error: 'Unable to create Post.'}, status: 400
      end
  end

  # PUT /posts/id
  def update
      @post = Post.find(params[:id])
      if @post
         @post.update(post_params)
          render json: { message: 'Post successfully updated.'}, status: 200
      else
        render json: { error: 'Unable to update Post.'}, status: 400
      end 
  end

    # DELETE /posts/id
  def destroy
      @post = Post.find(params[:id])
      if @post
         @post.destroy()
          render json: { message: 'Post successfully deleted.'}, status: 200
      else
        render json: { error: 'Unable to delete Post.'}, status: 400
      end
  end

    private

  def post_params  
     params.require(:post).permit(:title, :description)  
     #params.permit(:title, :description) 
  end

  #def contact
    #redirect_to action: 'services', id: 2    
  #end

end



Model: 
------
class Api::Vi::Post < ApplicationRecord
end

---------------------------------------------------------------
-------------------------------------------------------------
-------------------------------------------------------------
>>>>> Symfony 6 Rest API Basic <<<<<<<<<


Tables     : Products
Entity     : Pruduct
Controller : ProductController



//Controller: 
-------------

<?php
namespace App\Controller;

use App\Entity\Product;
use Doctrine\Persistence\ManagerRegistry;
//use App\Repository\ProductRepository;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;

class ProductController extends AbstractController
{ 
    #[Route('/', name: 'list_products')]
    public function index(ManagerRegistry $doctrine): Response
    {
        $product = $doctrine->getRepository(Product::class)->findAll();

        return $this->json([
            'product' => $product
        ]);
    }
   
    /**
     * @Route("/add_products", name="product_add")
     */
    public function add_product(ManagerRegistry $doctrine, request $request):Response
    {
        $product = new Product(); 

        $parameter = json_decode($request->getContent(), true);

        $product->setName($parameter['name']);
        $product->setPrice($parameter['price']);
        $product->setQty($parameter['qty']);

        $product_create = $doctrine->getRepository(Product::class)->add($product);

        // -- OR --
        //$em = $doctrine->getManager();
        //$em->persist($product);
        //$em->flush($product);

        return $this->json([
            'product' => "Saved"
        ]);
    }

    /**
     * @Route("/show/{id}", name="product_show")
     */
    public function show(ManagerRegistry $doctrine, int $id): Response
    {
        $product = $doctrine->getRepository(Product::class)->find($id);

        if (!$product) {
            throw $this->createNotFoundException(
                'No product found for id '.$id
            );
        }

        //return new Response('Check out this great product: '.$product->getName());

        return $this->json([
            'product' => $product
        ]);    
    }

    /**
     * @Route("/update_product/{id}", name="product_update")
     */
    public function update(ManagerRegistry $doctrine, request $request, $id):Response
    {        
        $entityManager = $doctrine->getManager();
        $product = $entityManager->getRepository(Product::class)->find($id);

        /*
        if (!$product) {
            throw $this->createNotFoundException(
                'No product found for id '.$id
            );
        }
        */        

        $parameter = json_decode($request->getContent(), true);

        $product->setName($parameter['name']);
        $product->setPrice($parameter['price']);
        $product->setQty($parameter['qty']);

        $entityManager->flush();

        //$product_create = $doctrine->getRepository(Product::class)->add($product);

        return $this->json([
            'product' => "Updated"
        ]);
    }

    /**
     * @Route("/delete_product/{id}", name="product_delete")
     */
    public function delete_product(ManagerRegistry $doctrine, request $request, $id):Response
    {        
        $entityManager = $doctrine->getManager();
        $product = $entityManager->getRepository(Product::class)->find($id);

        /*
        if (!$product) {
            throw $this->createNotFoundException(
                'No product found for id '.$id
            );
        }
        */        

        $entityManager->getRepository(Product::class)->remove($product);

        return $this->json([
            'product' => "Deleted"
        ]);
    }

    -------------------------------------------------------------------------

Entity: 

<?php

namespace App\Entity;

use App\Repository\ProductRepository;
use Doctrine\ORM\Mapping as ORM;

#[ORM\Entity(repositoryClass: ProductRepository::class)]
class Product
{
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column(type: 'integer')]
    public $id;

    #[ORM\Column(type: 'string', length: 255)]
    public $name;

    #[ORM\Column(type: 'float')]
    public $price;

    #[ORM\Column(type: 'integer')]
    public $qty;

    public function getId(): ?int
    {
        return $this->id;
    }

    public function getName(): ?string
    {
        return $this->name;
    }

    public function setName(string $name): self
    {
        $this->name = $name;

        return $this;
    }

    public function getPrice(): ?float
    {
        return $this->price;
    }

    public function setPrice(float $price): self
    {
        $this->price = $price;

        return $this;
    }

    public function getQty(): ?int
    {
        return $this->qty;
    }

    public function setQty(int $qty): self
    {
        $this->qty = $qty;

        return $this;
    }
}

//src/Repository/ProductRepository: 

<?php

namespace App\Repository;

use App\Entity\Product;
use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
use Doctrine\ORM\OptimisticLockException;
use Doctrine\ORM\ORMException;
use Doctrine\Persistence\ManagerRegistry;

/**
 * @method Product|null find($id, $lockMode = null, $lockVersion = null)
 * @method Product|null findOneBy(array $criteria, array $orderBy = null)
 * @method Product[]    findAll()
 * @method Product[]    findBy(array $criteria, array $orderBy = null, $limit = null, $offset = null)
 */
class ProductRepository extends ServiceEntityRepository
{
    public function __construct(ManagerRegistry $registry)
    {
        parent::__construct($registry, Product::class);
    }

    /**
     * @throws ORMException
     * @throws OptimisticLockException
     */
    public function add(Product $entity, bool $flush = true): void
    {
        $this->_em->persist($entity);
        if ($flush) {
            $this->_em->flush();
        }
    }

    /**
     * @throws ORMException
     * @throws OptimisticLockException
     */
    public function remove(Product $entity, bool $flush = true): void
    {
        $this->_em->remove($entity);
        if ($flush) {
            $this->_em->flush();
        }
    }


}


// Views: templates/base.html.twig

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
        {# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
        {% block stylesheets %}
            {{ encore_entry_link_tags('app') }}
        {% endblock %}

        {% block javascripts %}
            {{ encore_entry_script_tags('app') }}
        {% endblock %}
    </head>
    <body>
        {% block body %}
           <h1>This is base twig template rendering</h1>
        {% endblock %}
    </body>
</html>

-------------------------------------------------------------
-------------------------------------------------------------
-------------------------------------------------------------

>>>>>>>> Symfony 6 Form >>>>>>>>>>>>


composer require symfony/form


//
namespace App\Form

use App\Entity\User;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

class UserType extends AbstractType
{
  public function buildform(FormBuilderInterface $builder, array $options)
  {
    $builder
          ->add('name')
          ->add('email');
  }

  public function configureOptions(OptionsResolver $resolver)
  {
    $resolver->setDefaults([
      'data_class' => User::class,
    ]);
  }
}


//--------> Controller <-------------

use App\Entity\User;
use App\Form\UserType;

class UserController extends AbstractController
{
  /**
  * @Route("/", name="form")
  */
  public function index()
  {
    $user = new User();
    $user->setName('amit');
    $user->setEmail('amit@gmail.com');
    $form = $this->createForm(UserType::class, $user);

    return $this->render('users/index.html.twig',[
      'form' => $form->createView()
    ]);
  }
}

//View file: 

{% block body %}
   {{ form(user_form) }}
{% endblock %}


Creating Form Classes:

// src/Form/Type/UserType.php
namespace App\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\DateType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;

class UserType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('name', TextType::class)
            ->add('email', EmailType::class)              
            ->add('save', SubmitType::class)
        ;
    }
}

...........

// src/Controller/UserController.php
namespace App\Controller;

use App\Form\Type\UserType;
// ...

class UserController extends AbstractController
{
    public function new(): Response
    {
        // creates a user object and initializes some data for this example
        $user = new User();
        $user->setName('rohan');
        $user->setEmail('rohan@gmail.com');

        $form = $this->createForm(UserType::class, $user);

        // ...
    }
        return $this->renderForm('users/new.html.twig', [
            'form' => $form,
        ]);    
}

...........

// src/Form/Type/UserType.php
namespace App\Form\Type;

use App\Entity\User;
use Symfony\Component\OptionsResolver\OptionsResolver;
// ...

class UserType extends AbstractType
{
    // ...

    public function configureOptions(OptionsResolver $resolver): void
    {
        $resolver->setDefaults([
            'data_class' => User::class,
        ]);
    }
}

....
{# templates/users/new.html.twig #}
{{ form(form) }}


....

Processing Forms:

// src/Controller/UserController.php

// ...
use Symfony\Component\HttpFoundation\Request;

class UserController extends AbstractController
{
    public function new(Request $request): Response
    {
        // just set up a fresh $user object (remove the example data)
        $user = new User();

        $form = $this->createForm(UserType::class, $user);

        $form->handleRequest($request);
        if ($form->isSubmitted() && $form->isValid()) {
            // $form->getData() holds the submitted values
            // but, the original `$user` variable h as also been updated
            $user = $form->getData();

            // ... perform some action, such as saving the user to the database

            return $this->redirectToRoute('user_success');
        }

        return $this->renderForm('users/new.html.twig', [
            'form' => $form,
        ]);
    }
}

............

//Form in controller:  It is working.

<?php

namespace App\Controller;

use App\Entity\User;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;

use Symfony\Component\Form\Extension\Core\Type\DateType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\Extension\Core\Type\EmailType;
use Symfony\Component\Form\Extension\Core\Type\NumberType;

use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class UserController extends AbstractController
{
    #[Route('/', name: 'app_index')]
    public function index(Request $request): Response
    {
        // creates a task object and initializes some data for this example
        $user = new User();      
        $form = $this->createFormBuilder($user)
            ->add('name', TextType::class)
            ->add('email', EmailType::class)
            ->add('save', SubmitType::class, ['label' => 'Create User'])
            ->getForm();        

        return $this->renderForm('users/index.html.twig', [
            'form' => $form,
        ]);                
    }
}

// In view: index.html.twig; 

{% block body %}
{{ form(form) }}
{% endblock %}

-------------------------------------------------------------
-------------------------------------------------------------
-------------------------------------------------------------
>>>>>>>> Symfony 6 Form >>>>>>>>>>>>

composer require symfony/form


table : users
src / Controller / UserController.php
src / Entity / User.php
templates / users / index.html.twig

 {{ form(form) }}


use Symfony\Component\Form\Extension\Core\Type\DateType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\Extension\Core\Type\EmailType;
use Symfony\Component\Form\Extension\Core\Type\NumberType;

class UserController extends AbstractController
{
    #[Route('/', name: 'app_index')]
    public function index(Request $request): Response
    {
        // creates a task object and initializes some data for this example
        $user = new User();
        $form = $this->createFormBuilder($user)
            ->add('name', TextType::class)
            ->add('email', EmailType::class)
            ->add('save', SubmitType::class, ['label' => 'Create User'])
            ->getForm();        

        return $this->renderForm('users/index.html.twig', [
            'form' => $form,
        ]);            
    }
}


//When form is submitted


      if($form->isSubmitted() && $form->isValid()){
          //$user = $form->getData();
          //print_r($user);
          $entityManager->persist($user);
          $entityManager->flush();
          return new Response("User added");

          //return $this->redirectToRoute('user_success');
      }

-------------------------------------------------------------------
-------------------------------------------------------------------


>>>>> Django Form <<<<<<<<


from django import forms

class NameForm(forms.Form):
    your_name = forms.CharField(label='Your name', max_length=100)

..........

from django.http import HttpResponseRedirect
from django.shortcuts import render

from .forms import NameForm

def get_name(request):
    # if this is a POST request we need to process the form data
    if request.method == 'POST':
        # create a form instance and populate it with data from the request:
        form = NameForm(request.POST)
        # check whether it's valid:
        if form.is_valid():
            # process the data in form.cleaned_data as required
            # ...
            # redirect to a new URL:
            return HttpResponseRedirect('/thanks/')

    # if a GET (or any other method) we'll create a blank form
    else:
        form = NameForm()

    return render(request, 'name.html', {'form': form})
-------------------------------------------------------------------
-------------------------------------------------------------------



<<<< Symfony 6 >>>>>>

How to Use the submit() Function to Handle Form Submissions:

use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
// ...

public function new(Request $request): Response
{
    $task = new Task();
    $form = $this->createForm(TaskType::class, $task);

    if ($request->isMethod('POST')) {
        $form->submit($request->request->get($form->getName()));

        if ($form->isSubmitted() && $form->isValid()) {
            // perform some action...

            return $this->redirectToRoute('task_success');
        }
    }

    return $this->renderForm('task/new.html.twig', [
        'form' => $form,
    ]);
}

..........

public function new(Request $request): Response
{
    // ...

    if ($request->isMethod('POST')) {
        // '$json' represents payload data sent by React/Angular/Vue
        // the merge of parameters is needed to submit all form fields
        $form->submit(array_merge($json, $request->request->all()));

        // ...
    }

    // ...
}


'OR'

$form->get('firstName')->submit('Fabien');

//'email' and 'username' are added manually to force their validation
$form->submit(array_merge(['email' => null, 'username' => null], $request->request->all()), false);

.............



.........................................
# config/packages/security.yaml
security:
    # ...

    providers:
        app_user_provider:
            entity:
                class: App\Entity\User
                property: email


public function toArray()
{
    return [
        'id' => $this->getId(),
        'firstName' => $this->getFirstName(),
        'lastName' => $this->getLastName(),
        'email' => $this->getEmail(),
        'phoneNumber' => $this->getPhoneNumber()
    ];
}
.........................................
.........................................
.........................................


<<<<< Symfony 6 Save Data into Database <<<<<<<<<

    #[Route('/', name: 'app_index')]
    public function index(ManagerRegistry $doctrine, Request $request): Response
    {
        // creates a task object and initializes some data for this example
        $user = new User();    
        //$user->setName('rohan');
        //$user->setEmail('rohan@gmail.com');  
        //echo "<pre>";print_r($user);
        $form = $this->createForm(UserType::class, $user);
        $form->handleRequest($request);

   if ($request->isMethod('POST')) {
        //$form->submit($request->request->get($form->getName()));
         //echo "<pre>";print_r($form->getData());
        if ($form->isSubmitted() && $form->isValid()) {
          $em = $doctrine->getManager();          
          $em->persist($form->getData());
          $em->flush();
        }
         echo "Saved";
    }        

        return $this->renderForm('users/index.html.twig',[
          'form' => $form
        ]);            
    }
-------------------------------------------------------------------------------------
---------------------------------------------------------------------
---------------------------------------------------------------------



<<<<<< Symfony 6 CRUD <<<<<<<<<<<<<<


index, show, new, 


//Listing Data

    #[Route('/', name: 'list_products')]
    public function index(ManagerRegistry $doctrine): Response
    {        
      $products = $doctrine->getRepository(Product::class)->findAll();

      return $this->render('users/index.html.twig', ['products'=>$products]);  
    }

//Adding Data

    /**
     * @Route("/add_products", name="product_add")
     */
    public function add_product(ManagerRegistry $doctrine, request $request):Response
    {
        $product = new Product();   
        $product->setName($parameter['name']);
        $product->setPrice($parameter['price']);
        $product->setQty($parameter['qty']);

        $form = $this->createForm(ProductType::class, $product);
        $form->handleRequest($request);

         if ($request->isMethod('POST')) {
              //$form->submit($request->request->get($form->getName()));
              
              if ($form->isSubmitted() && $form->isValid()) {
                $em = $doctrine->getManager();          
                $em->persist($form->getData());
                $em->flush();
              }
               echo "Saved";
          }  


        return $this->render('users/add.html.twig');  

    }


//Show by id

    /**
     * @Route("/show/{id}", name="product_show")
     */

    public function show(ManagerRegistry $doctrine, int $id): Response
    {
        $product = $doctrine->getRepository(Product::class)->find($id);

        if (!$product) {
            throw $this->createNotFoundException(
                'No product found for id '.$id
            );
        }

        return $this->render('users/show.html.twig', ['product'=>$product]);    
    }

//Update 


    /**
     * @Route("/update_product/{id}", name="product_update")
     */
    public function update(ManagerRegistry $doctrine, request $request, $id):Response
    {    

        $entityManager = $doctrine->getManager();
        $product = $entityManager->getRepository(Product::class)->find($id);      

        //$product->setName($parameter['name']);
        //$product->setPrice($parameter['price']);
        //$product->setQty($parameter['qty']);

       //$entityManager->flush();
        $product_create = $doctrine->getRepository(Product::class)->add($product);
        return $this->render('users/index.html.twig'); 
    }

//Remove 

    /**
     * @Route("/delete_product/{id}", name="product_delete")
     */
    public function delete_product(ManagerRegistry $doctrine, $id):Response
    {        
        $entityManager = $doctrine->getManager();
        $product = $entityManager->getRepository(Product::class)->find($id);

        /*
        if (!$product) {
            throw $this->createNotFoundException(
                'No product found for id '.$id
            );
        }
        */        

        $entityManager->getRepository(Product::class)->remove($product);

        return $this->render('users/index.html.twig'); 
    }


////Attributes in form's input control

    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('name', TextType::class, ['attr' =>['class'=>'form-control']])
            ->add('email', EmailType::class, ['attr' =>['class'=>'form-control']])         
            ->add('save', SubmitType::class, ['attr' =>['class'=>'btn btn-success form-control mt-3']]);
    }

------------------------------------------------------------------
------------------------------------------------------------------

//Symfony 6 Patent or base template 'extends'

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
        {# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
        {% block stylesheets %}
            {{ encore_entry_link_tags('app') }}
        {% endblock %}

        {% block javascripts %}
            {{ encore_entry_script_tags('app') }}
        {% endblock %}
    </head>
    <body>
        {% block body %}
            <div id="sidebar">
                {% block sidebar %}
                    <ul>
                        <li><a href="app_index">Home</a></li>
                        <li><a href="app_contact">Blog</a></li>
                    </ul>
                {% endblock %}
            </div>

            <div id="content">
                {% block content %}{% endblock %}
            </div>
        {% endblock %}
    </body>
</html>


>>> Child Template >>>

{% extends 'layout/base.html.twig' %}
{% block title %}UserIndex!{% endblock %}

{% block content %}
    <h1>Index</h1>
    <p class="important">
        Welcome on my awesome homepage.
    </p>
{% endblock %}


//Controller

    #[Route('/', name: 'app_index')]
    public function index()
    {
        return $this->render('users/index.html.twig');            
    }
    #[Route('/contact', name: 'app_contact')]
    public function contact()
    {
        return $this->render('users/contact.html.twig');            
    }


--------------------------------------------------------------------------------



>>>> Symfony 6 Form Submit <<<<<


Save data into database


1. Table: User
2. Controller: UserController
3. View: add_user.html.twig



composer require symfony/asset
 <link rel="stylesheet" href="/styles/app.css">
 <link rel="stylesheet" href="{{ asset('styles/app.css') }}">

 {% extends 'layout/base.html.twig' %}
{% block title %}UserIndex!{% endblock %}

{% block content %} 

  <h1>Users</h1>

  <table border="1" class="">
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
          {% for user in users %}
        <tr>
          <td>{{ user.id}}</td>
          <td>{{ user.name}}</td>
          <td>{{ user.email}}</td>
        </tr>
        {% endfor %}
      </tbody>
  </table>
{% endblock %}



//Include 
{{ include('blog/_user_profile.html.twig') }}

--------------------------------------------------------------------
--------------------------------------------------------------------

>>> Symfony 6 Flass Message <<<<<

Table: user (mysql)
Controller: src/Controller/UserController
View: users/index.html.twig


Flash Messages: 


$this->addFlash(
  'notice',
  'Your changes were saved!'
);


{# read and display just one flash message type #}

{% for message in app.flashes('notice') %}

    <div class="flash-notice">
        {{ message }}
    </div>
{% endfor %}


-------------------------------------------------------------------------
>>> Symfony 6: Managing Errors and 404 Pages <<<

use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;

// ...
public function index(): Response
{
    // retrieve the object from database
    $product = ...;
    if (!$product) {
        throw $this->createNotFoundException('The product does not exist');

        // the above is just a shortcut for:
        // throw new NotFoundHttpException('The product does not exist');
    }

    return $this->render(...);
}
// this exception ultimately generates a 500 status error
throw new \Exception('Something went wrong!');

--------------------------------------------------------------------------


>>>> Symfony 6 Session <<<<<<<


use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\HttpFoundation\Session\SessionInterface;


public function index(SessionInterface $session): Response
{
    // stores an attribute for reuse during a later user request
    $session->set('foo', 'bar');

    // gets the attribute set by another controller in another request
    $foobar = $session->get('foobar');

    // uses a default value if the attribute doesn't exist
    $filters = $session->get('filters', []);

    // ...
}


--------------------------------------------------------------------------
--------------------------------------------------------------------------

>>>>>> Symfony 6 Form Validation <<<<<<<<



//The Basics of Validation//

// src/Entity/Author.php
namespace App\Entity;

// ...
use Symfony\Component\Validator\Constraints as Assert;

class Author
{
    /**
     * @Assert\NotBlank
     */
    private $name;
}

//Using the Validator Service//

// ...
use App\Entity\Author;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Validator\Validator\ValidatorInterface;

// ...
public function author(ValidatorInterface $validator)
{
    $author = new Author();

    // ... do something to the $author object

    $errors = $validator->validate($author);

    if (count($errors) > 0) {
        /*
         * Uses a __toString method on the $errors variable which is a
         * ConstraintViolationList object. This gives us a nice string
         * for debugging.
         */
        $errorsString = (string) $errors;

        return new Response($errorsString);
    }

    return new Response('The author is valid! Yes!');  
}



//You could also pass the collection of errors into a template//

if (count($errors) > 0) {
    return $this->render('author/validation.html.twig', [
        'errors' => $errors,
    ]);
}


//Inside the template, you can output the list of errors exactly as needed:

{# templates/author/validation.html.twig #}

<h3>The author has the following errors</h3>
<ul>
{% for error in errors %}
    <li>{{ error.message }}</li>
{% endfor %}
</ul>



//Basic Constraints

    NotBlank
    Blank
    NotNull
    IsNull
    IsTrue
    IsFalse
    Type



--------------------------------------------------------------------------
--------------------------------------------------------------------------


>>>>> Rails Form <<<<<<<<


<%= form_with url: "/search", method: :get do |form| %>
  <%= form.label :query, "Search for:" %>
  <%= form.text_field :query %>
  <%= form.submit "Search" %>
<% end %>


<%= form.check_box :pet_dog %>
<%= form.label :pet_dog, "I own a dog" %>
<%= form.check_box :pet_cat %>
<%= form.label :pet_cat, "I own a cat" %>

------------------------------------------

------------------------------------------
------------------------------------------

>>>> Symfony6 Bundle <<<<<<<<<<<<<<


//Creating a Bundle:

// src/Acme/TestBundle/AcmeTestBundle.php
namespace App\Acme\TestBundle;

use Symfony\Component\HttpKernel\Bundle\Bundle;

class AcmeTestBundle extends Bundle
{
}

.............

// config/bundles.php
return [
    // ...
    App\Acme\TestBundle\AcmeTestBundle::class => ['all' => true],
];

......................
//Bundle Directory Structure

Controller/                e.g. RandomController.php
DependencyInjection/
Resources/config/          e.g. routing.yaml
Resources/views/           e.g. Random/index.html.twig
Resources/public/          web assets (images, stylesheets, etc) 
Tests/                     Holds all tests for the bundle. 


------------------------------------------
------------------------------------------
------------------------------------------

https://zetcode.com/symfony/vue/

------------------------------------------

>>>>>>>> Symfony 6 Vue js <<<<<<<<<<

symfony new symfony6vue
composer require --dev symfony/maker-bundle
composer require doctrine/annotations
composer require symfony/twig-bundle

composer require symfony/webpack-encore-bundle

npm install && npm run dev-server



//assets/app.js

import Vue from 'vue'

Vue.config.productionTip = false

const app = new Vue({    
    el: '#app',    
    render: h => h(App)
});

export default app;



//templates/base.html.twig
<!DOCTYPE html>
<html>
    <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
        <meta charset="UTF-8">
        <title>{% block title %}Home{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
    </head>
    <body>
        {% block content %}{% endblock %}
        {% block javascripts %}{% endblock %}
    </body>
</html>


//templates/app.html.twig

{% extends 'base.html.twig' %}
{% block stylesheets %}
    {{ encore_entry_link_tags('app') }}
{% endblock %}
{% block content %}
    <div id="app">
    </div>
{% endblock %}
{% block javascripts %}
     {{ encore_entry_script_tags('app') }}
{% endblock %}




------------------------------------------------
























 symfony new symvue
 cd symvue
 composer require maker --dev
 composer req annot twig
 composer require encore

 npm install
 npm i vue vue-loader vue-template-compiler
 npm run dev
 symfony serve


localhost:8000/home page














------------------------------------------------------------------
------------------------------------------------------------------

https://www.cloudways.com/blog/symfony-react-using-webpack-encore/
https://symfonycasts.com/screencast/vue/vue-install
------------------------------------------------------------------

>>>>>>>> Symfony 6 React js <<<<<<<<<<

//React js


composer create-project symfony/website-skeleton symfony-react-starter
cd symfony-react-starter
php bin/console server:run



composer require symfony/webpack-encore-pack
yarn add --dev react react-dom prop-types babel-preset-react
yarn install
php bin/console make:controller Default
yarn run encore dev --watch
php bin/console server:run












------------------------------------------
------------------------------------------

>>>>>> Symfony 6 DataFixures <<<<<<<<<<<<

* composer require --dev orm-fixtures
* php bin/console doctrine:fixtures:load


//AppFixtures.php file

class AppFixtures extends Fixture
{
    public function load(ObjectManager $manager)
    {
        $faker = Factory::create();

        for ($i = 0; $i < 50; $i++) {
            $customer = new Customer();
            $customer->setFirstName($faker->firstName);
            $customer->setLastName($faker->lastName);
            $customer->setEmail($faker->email);
            $customer->setPhoneNumber($faker->phoneNumber);
            $manager->persist($customer);
        }

        $manager->flush();
    }
}



------------------------------------------
------------------------------------------
{% block javascripts %}
     <script src="{{ asset('build/js/app.js') }}"></script>
Or
     {{ encore_entry_script_tags('app') }}
{% endblock %}


{% block stylesheets %}
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
               'OR'
    {{ encore_entry_link_tags('app') }}
{% endblock %}



//assets/app.js
import Vue from 'vue'
//import App from './components/App'
import Example from './components/Example'
Vue.config.productionTip = false

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

export default app
..................................



import Vue from 'vue';
import App from './components/App';
import '../css/app.css';

new Vue({
    el: '#app',
    render: h => h(App)
});


<button @click="counter++">Click me{{ counter }}</button>


data:() =>{
  counter: 0
}




FIX  To load Vue files:
        1. Add Encore.enableVueLoader() to your webpack.config.js file.
        2. Install vue & vue-loader & vue-template-compiler to use enableVueLoader()
           npm install vue@^2.5 vue-loader@^15.9.5 vue-template-compiler --save-dev


{{ twig_variable }}   {# renders a Twig variable #}
${ vuejs_variable }$  {# renders a Vue.js variable #}

@{{ foo }}




Vue.component('todo-item', {
  template: '<li>This is a list item</li>'
})

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <ol>
    <todo-item></todo-item>
  </ol>
  <p>{{ message }}</p>

.......................

<template>
  <li>This is a list item</li>
</template>

<script>
  export default {
    name: 'todo-item'
  }
</script>

import TodoItem from './components/todo-item'

 new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  components: {
    TodoItem
  }
})

.........................


//Using Vue (^2.0.0-rc.6) + Browserify, entry point is index.js:

import Vue from 'vue'
import App from './containers/App.vue'

new Vue({ // eslint-disable-line no-new
  el: '#root',
  render: (h) => h(App)
})
.................
Hello.vue:

<template>
  <div class="hello">
    <h1>\{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello Vue!'
    }
  }
}
</script>
.....................

import Vue from 'vue/dist/vue.js'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})
.......................

<template>
    <v-app>
        <v-main>
            <v-container fluid>
                <router-view>

        <!---             <router-link to="<my_route>">My Component</router-link> -->
                </router-view>
            </v-container>
        </v-main>
    </v-app>
</template>
<script>
export default {
    name: "App"
}
</script>
<style scoped>

</style>
..............................
import Vue from 'vue'
import Vuetify from 'vuetify';
import Routes from './routes.js';
import App from './views/App';
import 'vuetify/dist/vuetify.min.css'


Vue.config.productionTip = false
Vue.use(Vuetify);

const app = new Vue({
    vuetify: new Vuetify(),
    el: '#app',
    router: Routes,
    render: h => h(App)
});

export default app;
........................



--------------------------------------------------------

>>>>>> Vue Js Form <<<<<<<<<<


<div id="vueRoot">
  <form ref="form">
    <input name="vitalInformation" v-model="store.vital">
    <a href="#" v-on:click="submit">SUBMIT</a>
  </form>
</div>




var store = {vital:''};
vm = new Vue({
  el : "#vueRoot",
  data : {store : store},
  methods : {
    submit : function(){
      this.$refs.form.$el.submit()
    }
  }
});


this.$refs.submit.click();

...................
  
  data: function(){
     return {
       name: "",
       price: "",
   }
},
 methods: {
    addProduct(e){
      e.preventDefault() // it prevent from page reload
      // console.log(this.name, this.price);
    }
  }
 

<form v-on:submit="addProduct">
    <input type="text" v-model="name" placeholder="Product Name" >
    <input type="number"  v-model="price" placeholder="Price" >
    <button type="submit">Add</button>
</form>


this.$refs.form.submit()
this.$refs.submit.click();
...............................


-------------------------------------------------------------------------
-------------------------------------------------------------------------

>>>>>>> Vue js 2 <<<<<<<<<<


<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

................


<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})
......................

<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})
..................

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})


.....................


<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

.....................





-------------------------------------------------------------------------
-------------------------------------------------------------------------
//Vue Form Validation
https://v2.vuejs.org/v2/cookbook/form-validation.html?redirect=true
-------------------------------------------------------------------------
-------------------------------------------------------------------------



>>>>> Vue js 3 <<<<<<<<




import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')


<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

............................


//Single-File Components 


<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>
.............................









>>>>>>>> Vue Js Form <<<<<<<<<<<<<

npm run serve



<template>
  <h1>User Form</h1>
<form
  id="app"
  @submit="checkForm"s
  +
  action="https://vuejs.org/"
  method="post"
>

  <p v-if="errors.length">
    <b>Please correct the following error(s):</b>
    <ul>
      <li v-for="error in errors" v-bind:key='error'>{{ error }}</li>
    </ul>
  </p>

  <p>
    <label for="name">Name</label>
    <input
      id="name"
      v-model="name"
      type="text"
      name="name"
    >
  </p>

  <p>
    <label for="age">Age</label>
    <input
      id="age"
      v-model="age"
      type="number"
      name="age"
      min="0"
    >
  </p>

  <p>
    <label for="movie">Favorite Movie</label>
    <select
      id="movie"
      v-model="movie"
      name="movie"
    >
      <option>Star Wars</option>
      <option>Vanilla Sky</option>
      <option>Atomic Blonde</option>
    </select>
  </p>

  <p>
    <input
      type="submit"
      value="Submit"
    >
  </p>

</form>
</template>

<script>
export default {
  data() {
    return {
      errors: [],
      name: null,
      age: null,
      movie: null
    }
  },
  methods:{
    checkForm: function (e) {
      if (this.name && this.age) {
        return true;
      }

      this.errors = [];

      if (!this.name) {
        this.errors.push('Name required.');
      }
      if (!this.age) {
        this.errors.push('Age required.');
      }

      e.preventDefault();
    }
  }
}
</script>

// --> Vue Form Validation <--

<template>
  <div class="container">
  <div class="row">   
  <div class="col-lg-4">
  <div id="result"></div>
  </div>
  <div class="col-lg-4">
  <h1>User Form</h1>
  <form id="app" @submit.prevent = "" action="/" method="post">
  <p v-if="errors.length">
  <ul v-for="error in errors" v-bind:key="error">
  <li class="text-danger">{{ error }}</li>
  </ul>
  </p>
  <input id="name" type="text" v-model="name" placeholder="Name" class="form-control" autocomplete="off">   

  <input id="password" type="text" v-model="password" min="0" placeholder="Password" class="mt-3 form-control" autocomplete="off">

  <input id="age" type="submit" value="Submit" class="btn btn-lg btn-success mt-3 form-control">
  <button ref="btn" v-on:click="submit()">Submit</button>
  </form>
  </div>
  </div>
  </div>

</template>
<script>
export default{
  data() {    
    return{
    uname:"ajay",
    upass:"ajay123",
        name:"",
        password:"",
        errors:[],
    }
  },
  methods:{
  submit: function () {
  this.errors = [];
      if (this.name && this.password) {
        return true;
      }   

      if (!this.name) {
        this.errors.push('Name required.')
      }      

      if (!this.password) {
        this.errors.push('Password required.')      
      } 
  }
  },
  mounted(){
  console.log('hihi')
  },
  updated(){
  //this.$refs.btn.click()
  }
  
}
</script>

---------------------------------------------------------------------
---------------------------------------------------------------------

>>>>>> Vue Js Props <<<<<<<

1. Parent to Child Component
2. Child to Parent Component

............................
1. Parent to Child component

//Parent Component
<template>
  <Child :userName=username/>
</template>

<script>
import Child from './components/Child.vue'  
export default {
  data(){
   return {
     username:"Ajay Sisaudiya"
   }
  }
}
</script>

//Child Component
<template>
  {{ userName }}
</template>
<script>
export default {
  props:['userName'],
  data(){
   return {    
   }
  }
}
</script>

.............................
2. Child to Parent Component

//Parent Component
<template>   
 <Form @title="getTitle" />  
</template>
<script>
import Form from './components/Form.vue'
export default {
  name: 'App',
  components: {
  Form
  },
  methods:{
   getTitle:function(value){
    console.log(value)
   }
  }
}
</script>

//Child Component
<template>  
<button v-on:click="child()" class="btn btn-lg btn-success mt-3 form-control">Child</button>  
</template>
<script>
export default{
  data() {    
    return{
    title:"This is from child component",    
    }
  },
  methods:{
    child: function(){
      console.log(this.$emit('title',this.title))
    }
  }  
}
</script>

---------------------------------------------------------------------
---------------------------------------------------------------------
//https://www.vuemastery.com/blog/vue-router-a-tutorial-for-vue-3/

>>>>>> Vue cli Router <<<<<<<<

//src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

//src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
//import Index from '@/components/Index.vue'
import Form from '@/components/Form.vue'
import Contact from '@/components/Contact.vue'
//import Register from '@/components/Register.vue'
import Child from '@/components/Child.vue'
import Parent from '@/components/Parent.vue'
const routes = [
  {
    path: '/',
    name: 'Form',
    component: Form
  },
  {
    path: '/contact',
    name: 'Contact',
    component: Contact
  },
  {
    path: '/child',
    name: 'Child',
    component: Child
  },  
   {
    path: '/parent',
    name: 'Parent',
    component: Parent
  },  
]
const router = createRouter({ history: createWebHistory(), routes })
export default router

//src/App.js
<template>  
  <div id="nav">
      <router-link to="/">Form</router-link> |
      <router-link to="/about">Contact</router-link> |
      <router-link to="/child">Child</router-link>
  </div>
  <router-view />

  <h1>Vue Js</h1>
<!--<Child />-->
</template>

<script>
import './assets/bootstrap.css'
//import Child from './components/Child.vue'  
export default {
  name: 'App',
  components: {
  //Child
  }
}
</script>


//src/components
Form.vue, 
Child.vue, 
Contact.vue
Parent.vue

//Example: 
<template>   
<h1>Child</h1>
</template>
<script>
export default {
  name: 'Child',
  props: [],
  data(){
   return {  
   }
  },
  methods: {   
  }
}
</script>


----------------> End of Vue Router <------------------------------
---------------------------------------------------------------------
---------------------------------------------------------------------
---------------------------------------------------------------------
//React Form
https://reactjs.org/docs/forms.html#the-textarea-tag
//React Form Validation
https://www.freecodecamp.org/news/add-form-validation-in-react-app-with-react-hook-form/
---------------------------------------------------------------------
---------------------------------------------------------------------


>>>> React Form <<<<<<<<<<<<<<<

npm run start


import React from 'react';
//import { useState } from 'react';

//Basic 
class className extends React.Component{
  constructor(props){
    super(props);
  }
  render() {
      return {

      }
  }
}
.............

<form>
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="Submit" />
</form>


//Controlled Components:

import React from 'react';
//import { useState } from 'react';

class Form extends React.Component{
  constructor(props){
    super(props);
    this.state = {name:'', password:''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);    
  }

  handleChange(event) {    
    this.setState({
      [event.target.name]:event.target.value
    });  
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.name + "; " + this.state.password);
    event.preventDefault();
  }

  render() {
      return (   
       <div className="row">
       <div className="col-lg-4">   
       </div>

        <div className="col-lg-4">   
        <h1 class="mt-5" >User Form</h1>  
      <form onSubmit={this.handleSubmit} >        
        <input type="text" value={this.state.name} name="name" onChange={this.handleChange}
        placeholder="Name" className="form-control" />

        <input type="text" value={this.state.password} name="password" placeholder="password" 
        onChange={this.handleChange} className="form-control mt-3" />

        <input type="submit" value="Submit" 
        className="form-control btn btn-lg btn-success mt-3" />
      </form> 
     </div>
    </div>     
      );
  }
}

export default Form;

..............................

//The textarea Tag 

<textarea>
  Hello there, this is some text in a text area
</textarea>


//Controled Component

class EssayForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {      
      value: 'Please write an essay about your favorite DOM element.'    
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    
    this.setState({value: event.target.value});  
  }

  handleSubmit(event) {
    alert('An essay was submitted: ' + this.state.value);
    event.preventDefault();
}

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Essay:
          <textarea value={this.state.value} onChange={this.handleChange} />        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

.......................

//Controlled Input Null Value :


ReactDOM.createRoot(mountNode).render(<input value="hi" />);

setTimeout(function() {
  ReactDOM.createRoot(mountNode).render(<input value={null} />);
}, 1000);

-------------------------------------------------------------------------
-------------------------------------------------------------------------

>>>>> Symfony 6 Validation <<<<<<<<<<<<<<



composer require symfony/validator 




// src/Entity/User.php
namespace App\Entity;

// ...
use Symfony\Component\Validator\Constraints as Assert;

class User
{
    /**
     * @Assert\NotBlank
     */
    private $name;
}

.........................

  /**
    * @Assert\NotBlank
    * @Assert\Length(min=3)
  */
........................


-----------------------------------------------------------------



>>>>>>>> Angular Template Driver Form <<<<<<<<<<<


// app.module.ts

import { FormsModule } from '@angular/forms';


   imports: [ 
      FormsModule,      
   ],


//app.component.html

<form #userlogin = "ngForm" (ngSubmit) = "onClickSubmit(userlogin.value)" >
   <input type = "text" name = "emailid" placeholder = "emailid" ngModel>
   <br/>
   <input type = "password" name = "passwd" placeholder = "passwd" ngModel>
   <br/>
   <input type = "submit" value = "submit">
</form>

//app.component.ts

   




//Example 02:   (Template driven form)

Template-driven forms are just model-driven forms but driven by directives in the the template versus code in the component.
In template-driven we use directives to create the model.

In model-driven we create a model on the component and then use directives to map elements in the template to our form model.

>>Important<<

Remove all the formGroup, formGroupName, formControl and formControlName directives from our template, these are from the ReactiveFormsModule and used for model-driven forms. 










------------------------------------------------------------------
------------------------------------------------------------------
>>>>>>> Cluster <<<<<<<<

Website:

https://www.studyfry.com/%E0%A4%95%E0%A5%8D%E0%A4%B2%E0%A4%B8%E0%A5%8D%E0%A4%9F%E0%A4%B0-%E0%A4%95%E0%A4%82%E0%A4%AA%E0%A5%8D%E0%A4%AF%E0%A5%82%E0%A4%9F%E0%A4%BF%E0%A4%82%E0%A4%97-%E0%A4%95%E0%A5%8D%E0%A4%AF%E0%A4%BE




-------------------------------------------------------------------
-------------------------------------------------------------------


>>>> Javascript <<<<<<<

Important JavaScript Functions Every Web Developer Should Know

1. Shorten the console log

const log = console.log.bind(document)
log("does it work?")
log("yes")
log(5)

2. Merge two arrays into one

const array1 = ["one", "two", "three"]
const array2 = ["four", "five", "six"]
const merged = array1.concat(array2)
console.log(merged)  //"One", "Two", "Three", "Four", "Six"

3. Merge two objects into one

const user = {
  name: 'Paul Knulst',
  gender: 'Male'
};

const article = {
  title: 'Javascript tips',
  data: '2022-01-20'
};

const summary = {...user, ...article}
console.log(summary)

4. Shorten an array

cosnt big_array = ["one", "two", "three", "Four", "Five", "Six"]
big_array.length = 3
console.log(big_array)

5. Shuffle an array
const array = ["one", "two", "three", "Four", "Five", "Six"]
array.sort( conpareFn: function(){ return Math.random() - 0.5 })
console.log(array)

6. Use isNum to verify a number
function isNull(n) { return !isNaN(parseFloat(n)) && isFinite(n);}

console.log(isNum(n:1337))         //true
console.log(isNum(n:13.37))        //true
console.log(isNum(n:"JavaScript")) //true

7. Use isStr to verify a string

console.log(isStr(value:'JavaScript')) //true
console.log(isStr(value:345))          //false
console.log(isStr(value:true))         //false

8. Use isNull

const isNull = value => === null || value === undefind;
console.log(isNull(value:null))  //true
console.log(isNull())            //true
console.log(isNull(value:123))   //false
console.log(isNull(value:"J"))   //false

9. Calculate the performance of a function
const start = performance.now();
//some program
const end = performance.now();
const total = start -end
console.log("function takes " +  "milisecond");

10. Remove duplicates from an array

const delDuplicates = array => [...new Set(array)]
console.log(delDuplicates(array:["One", "Two", "Three", "Two", "Four",
                                 "Five", "Four", "Three", "One", "Five",
                                 "Five", "Three", "Four", "One", "Two"]))

//Output: 
//"One", "Two", "Three", "Four", "Five"

11. Use logical AND/OR for conditions

const input = 2 
input == 5 && console.log("it is 5")
input == 5 || console.log("it is not 5")

'Or'

function defalultsTo(arg) {
  arg = arg || 5;
  console.log(arg)
}

let arg1 = 2 
let arg2 = null
defaultsTo5(arg1) //2
defaultsTo5(arg2) //5

12. Ternary operator

function temperature(temp) {
  return (temp > 39 || temp < 35.5) ? 'Visit Doctor'
     : (temp < 37.5 && temp > 36.5) ? 'Go Out and Play!!'
        : (temp <= 39 && temp >= 35.5) ? 'Take Some Rest!' : ''
}

-------------------------------------------------------------





>>>>> Simple React Form Validation <<<<<<<<<<<<

import React from 'react'

class Form extends React.Component {
  constructor(props){
   super(props);
   this.state={
    name="", 
    password="",
    nameError="",
    passwordError="",
   }
  }

valid(){
  if(!this.state.includes("@") && this.state.password.length<5){
    this.setState({nameError:"Invalid Name",passwordError:"Password length should be more than 5"})
  }else if(this.state.name.includes("@")){
    this.setState(
     { nameError:"Invalid Name"}
    )
  }else if(this.password.length<5){
    this.setState(
     { passwordError:"Password Length should be more than 5"}
    )
  }else{
    return true
  }
}

submit(this.valid()){
  this.setState({nameError:"",passwordError:""})

  alert("Form has been submitted")
}
  render() {
    return (
     <div className="Form">
      <h1>Form Validation</h1>
      <input type="text" onChange={(event)=>{this.setState({name:envent.target.value})}} />
      <p>{this.state.error}</p>
      <input type="password" onChange={(event)=>setState({password:envent.target.value})}} />
      <p></p>
      <button onClick={()=>{this.submit()}}>Submit</button>
     </div>
    );
  }

}

export default Form;

---------------------------------------------------


>>>>>>>> React <<<<<<<<<<<


import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"  
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

--------------------------------------------------------
--------------------------------------------------------
--------------------------------------------------------

>>>> Life Cycle Hooks, lifecycle, lyfecycle<<<<<

1. Vue
2. React 
3. Angular


//1. Vue Lifecycle hooks, lifecycle

1. Create
2. Mount
3. Update
4. Unmount

Methods:
beforeCreate()-->created()-->beforeMount()-->
mounted()-->beforeUpdate()-->updated()-->
beforeMounte()-->mounted()



//2. React Lifecycle hooks

Mounting : Birth of your component
Update: Growth of your component
Unmount: Death of your component

Methods:
render()-->
componentDidMount()-->
componentDidUpdate()-->
componentWillUnmount()


//3. Angular lifecycle hooks

Methods: 

constructor-->ngOnChanges-->ngOnIt-->
ngDoCheck-->ngAfterContentInit-->ngAfterContentChecked-->
ngAfterViewInit-->ngAfterViewChecked-->ngOnDestroy

------------------------------------------------------------------
------------------------------------------------------------------
>>>>> React Props <<<<<<<<<<<

1. Parent to child component
2. Child to parent component


//1. Parent to child component

//Parent Component

  const user={name:"ajay",age:23}
  return (
    <div className="container">
      <Form user={user} />
    </div>
  );



//Child Component

<h1>{ this.props.user.name }</h1>

//2. Child to Parent
https://javascript.plainenglish.io/how-to-pass-props-from-child-to-parent-component-in-react-d90752ff4d01

//Parent Component
import { useState } from "react";
import Child from "./child";
const App = () => {
  const [Name, setName] = useState("Parent");

  return (
    <>
      <h1>{Name}</h1>
      <Child Changedata={(Name) => setName(Name)} />
    </>
  );
};

export default App;

//Chid Component


const Child = (props) => {
  return (

   <button 
   onClick={() => props.Changedata("Child")}>
   Change</button>

  )
};

export default Child;



//Example 2 Props (Child To Parent Component)

//Parent Component 

import React, { useState } from 'react';
import Child from './components/Child';

function App() {
  const [name, setName] = useState("aja")
  return (    
    <div className="container">   
     { name }
     <Child changeName={(name) => { setName(name) } } />     
    </div>
  );
}
export default App;


//Child Component

import React from 'react';
function Child(props) { 
  return (
    <div className="container"> 
      <button 
       onClick={() => props.changeName("Sohan")}>
       Change</button>
    </div>
  );
}
export default Child;

-------------------------------------------------------------

--------------------------------------------------------------------
--------------------------------------------------------------------
https://ultimatecourses.com/blog/component-events-event-emitter-output-angular-2

>>>>>>> Angular Props <<<<<<<<


1. Parent to child
2. Child to parent 



1.
//

@Component({
  selector: 'app-root',
  template: `
    <div class="app">
      <counter [count]="initialCount"></counter>
    </div>
  `
})
export class AppComponent {
  initialCount: number = 10;
}


.....
//

import { Component, Input } from '@angular/core';

@Component({...})
export class CounterComponent {

  @Input()
  count: number = 0;

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }

}


''OR''

@Component({
  selector: 'app-root',
  template: `
   <div class="app">
      <counter [init]="initialCount"></counter>
    </div>
  `
})
export class AppComponent {
  initialCount: number = 10;
}

//
@Component({...})
export class CounterComponent {

  @Input()
  count: number = 0;

  // ...

}

//
@Component({...})
export class CounterComponent {

  @Input('init')
  count: number = 0;

  // ...

}

----------------




@Component({
  selector: 'app-root',
  template: `
    <div class="app">
      Parent: {{ myCount }}
      <counter
        [count]="myCount"
        (update)="countChange($event)">
      </counter>
    </div>
  `
})
export class AppComponent {
  myCount: number = 10;
  countChange(event) {
    this.myCount = event;
  }
}

//
@Component({...})
export class CounterComponent {

  // ...

  @Output('update')
  change: EventEmitter<number> = new EventEmitter<number>();

  increment() {
    this.count++;
    this.change.emit(this.count);
  }

  decrement() {
    this.count--;
    this.change.emit(this.count);
  }

}


https://ultimatecourses.com/blog/component-events-event-emitter-output-angular-2
-----------------------------------------------------------


>>>>>>> Angular Set Title <<<<<<<

//app.component.ts

import { Title } from '@angular/platform-browser';
 

export class AppComponent {

  constructor(private titleService: Title) { }

  setTitle(newTitle: string) {
  this.titleService.setTitle(newTitle);
  }
}


//app.component.html 
 {{ setTitle("MyTitle") }}

--------------------------------------------------------------
--------------------------------------------------------------

>>>>>> Angular Passing Data <<<<<<<<


1. Parent To Child Component
2. Child To Parent Component



//1. Parent to child component


//1. Prepare Child component to emit data

// Child.ts

...

export class InputBookComponent implements OnInit {
  @Output() bookTitleCreated = new EventEmitter<{ title: string }>();
  bookTitle: string;
  ...

  onAddTitle() {
    this.bookTitleCreated.emit({ title: this.bookTitle });
  }
}


// Child.html

<div>
  <input type="text" placeholder="Write a title" [(ngModel)]="bookTitle">
  <button (click)="onAddTitle()">Add Title</button>
</div>



//2. Bind Property in Parent Component template


// Parent.html

...

<child-selector (bookTitleCreated)=onBookAdded($event)></child-selector>


//3. Use Property in Parent Component class

// Parent.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'BindingUp';
  favBooks = [
    { title: 'Principles' },
    { title: 'The Story of Success' },
    { title: 'Extreme Economies' },
  ];

  onBookAdded(eventData: { title: string }) {
    this.favBooks = this.favBooks.concat({
      title: eventData.title,
    });
  }
}

--------------------------------------------------------------
--------------------------------------------------------------
--------------------------------------------------------------
>>>>>> Angular Passing values Between Components <<<<<<<<<

ng g c user
ng generate component user

1. Parent To Child
2. Child To Parent


//1.Parent To Child

app.component.ts        //Parent Component

 name = "Ajay Sisaudiya"

 data = {
  name: "Sohan",
  age: 23,
  address: "Raipur Road Dehradun"
 }

 record=[
  "Aryan Singh",
  "24",
  "Meerut"
 ]

//app.component.html    

<user-root [username]="name" [user]="data" [record]="record"></user-root>


//user.component.ts     //Child Component

import { Component, Input, OnInit } from '@angular/core';

 @Input() username
 @Input() user
 @Input() record

 constructor(){}

 ngOnInit(): void {
  
 }


//user.component.html

<h1>This is User HTML</h1>
User Name From Parent : {{ username }} <br>

<div>
<h4>Object Data From Parent</h4>
User Name: {{ user.name }}<br>
User Age: {{ user.age }}  <br>
User Address: {{ user.address }}<br>
</div>

<h4>Array From Parent</h4>
<div *ngFor="let d of record">
  {{ d }}
</div>
..............................
-------------------> End <-------------------------


-------------------> Start Forms <-----------------------------------------
//https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/
-----------------------------------------------------------------

>>>>>> Angular Passing Data <<<<<<<<<<<

1. parent to child  (done)

2. Child To Parent


//app.component.ts file

parentFun(data){
  console.log(data)
}


//app.component.html file

<h1>App Component HTML</h1>
<user-root (parentFun)="getName($event)"></user-root>

//Child Component

//child.component.ts

import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';

 @Output() parentFun:EventEmitter<any>=new EventEmitter()

 constructor(){}

 ngOnInit(): void {
  this.parentFun.emit("Hi from child")
 }
"OR"

let item={name:"ajay",age:33}
sendData(){
  this.parentFun.emit(item)
}

//child.component.html

<button (click)="sendData()">Send Data To Parent</button>


-------------------------------------------------------------------------








--------------------------------------------------------------------
--------------------------------------------------------------------
--------------------------------------------------------------------
https://www.simplilearn.com/tutorials/angular-tutorial/angular-forms
--------------------------------------------------------------------
>>>>>> Angular Form <<<<<<<<<<<

1. Template driven form
2. Reactive form


//1. Template driven form

//src/app/hero.ts

export class Hero {

  constructor(
    public id: number,
    public name: string,
    public power: string,
    public alterEgo?: string
  ) {  }

}


//src/app/hero-form/hero-form.component.ts (v1) file

import { Component } from '@angular/core';

import { Hero } from '../hero';
import { NgForm } from '@angular/forms'; 

@Component({
  selector: 'app-hero-form',
  templateUrl: './hero-form.component.html',
  styleUrls: ['./hero-form.component.css']
})
export class HeroFormComponent {

  powers = ['Really Smart', 'Super Flexible',
            'Super Hot', 'Weather Changer'];

  model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');

  //submitted = false;
  //onSubmit() { this.submitted = true; }

  ngOnInit(): void {
    //console.log('My hero is called ' + this.model.name); // "My hero is called SkyDog"
  }

  onSubmit(formData : NgForm){
    //console.log("Form Submitted !" + this.model.name)
    //console.log("Form Submitted !" + this.model.alterEgo)
    console.log(formData.value)

  }
}



//src/app/app.module.ts


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HeroFormComponent } from './hero-form/hero-form.component';

@NgModule({
  imports: [
    BrowserModule,
    //CommonModule,
    FormsModule
  ],
  declarations: [
    AppComponent,
    HeroFormComponent
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }


//src/app/app.component.html

<app-hero-form></app-hero-form>

//src/styles.css

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');

//src/app/hero-form/hero-form.component.html (powers)

<div class="form-group">
  <label for="power">Hero Power</label>
  <select class="form-control" id="power" required>
    <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
  </select>
</div>


//Bind input controls to data properties
//src/app/hero-form/hero-form.component.html (excerpt)

<input type="text" class="form-control" id="name"
       required
       [(ngModel)]="model.name" name="name">
TODO: remove this: {{model.name}}

//Access the overall form status

//src/app/hero-form/hero-form.component.html (excerpt)


'OR'
<form (ngSubmit)="onSubmit(formData)" #formData="ngForm">
  <label for="name">Name</label>
  <input type="text" class="form-control" id="name"
         required
         [(ngModel)]="model.name" name="name" #name="ngModel">

</form>

'OR'
<button (click)="onSubmit(formData)">Submit</button>






//2. Reactive form:

Example 01: 

//src/app/app.module.ts file

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})
export class AppModule { }



//src/app/name-editor/name-editor.component.ts file

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-name-editor',
  templateUrl: './name-editor.component.html',
  styleUrls: ['./name-editor.component.css']
})
export class NameEditorComponent {
  name = new FormControl('');       
}


//src/app/name-editor/name-editor.component.html file 

<label for="name">Name: </label>
<input id="name" type="text" [formControl]="name">


//src/app/app.component.html (name editor) file

<app-name-editor></app-name-editor>



//src/app/name-editor/name-editor.component.html (control value) file

<p>Value: {{ name.value }}</p>


//src/app/name-editor/name-editor.component.ts (update value) file

updateName() {
  this.name.setValue('Nancy');
}


//src/app/name-editor/name-editor.component.html (update value) file

<button type="button" (click)="updateName()">Update Name</button>
.....


//Example 02: Angular Reactive Form (Working)

//app.component.ts file

import { ReactiveFormsModule } from '@angular/forms';
import { UserComponent } from './user/user.component';

@NgModule({
  declarations: [
    UserComponent,
  ],
  imports: [
    ReactiveFormsModule,
  ],  
}]

//app.component.html

<h1>App Component HTML</h1>
<user-root></user-root>

//user.component.ts

import { FormControl,FormGroup} from "@angular/forms";

@Component({
  selector: 'user-root',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})

 constructor(){} 
 ngOnInit(){}

  userForm = new FormGroup({
    username:new FormControl('ajay'),
    password:new FormControl('ajay123')
  })

  loginuser(){
    console.log(this.userForm.value);
  }

//user.component.html

<h4>Child: User</h4>

<form [formGroup]="userForm" (ngSubmit)="loginuser()">
  <input type="text" formControlName="username" placeholder="Enter Name"> <br>
  <input type="text" formControlName="password" placeholder="Enter Password"> <br>
  <input type="submit" name="submit" value="Login">
</form>

OR
<button (ngSubmit)="loginuser()">Login</button>

......

//Example 03: Angular Reactive form (Not cheked)


<h1>{{ title }}</h1>
<form [FormGroup]="loginForm" (ngSunmit)="loginuser()">
  <input type="text" placeholder="Enter Name" name="user" formControlName="user"> <br>
  <input type="password" placeholder="Enter Password" name="password" formControlName="password"> <br>
  <button>Login</button>
</form>

//app.modules.ts file

import { ReactiveFormsModule } from '@angular/forms'

@import:[ReactiveFormsModule]


//app.component.ts file

import {FormControl, FormGroup} from "@angular/forms"

export class AppComponent {
  title="Angular Reactive Form";

  loginForm = new FormGroup({
    user:new FormControl("ajay"),
    password:new FormControl("ajay123")
  })

 loginuser(){
  console.log(this.loginForm.value)
 }

}



//Some more 

console.log(this.loginForm['name'].value)
console.log(this.loginForm[0].value)
console.log(this.loginForm.formControl['name'])


--------> End of Angular Reactive Form <-----------













>>>>>> Next Js Installation <<<<<<<<<<


Next. js is a React framework that gives you building blocks to create web applications. 
By framework, we mean Next. js handles the tooling and configuration needed for React, 
and provides additional structure, features, and optimizations for your application.

SSR

SEO


npx react-next-app@latest


Manually: 

npm run react react-dom next











----------------------------------------------------





>>>>>> Nuxt JS Installation <<<<<<<<<<


Nuxt(NuxtJs) is a frontend framework built upon Vue. js that offers great development features such as server side rendering, automatically generated routes, improved meta tags managing and SEO improvement.

>>Using create-nuxt-app:

yarn create nuxt-app <project-name>

cd <project-name>
yarn dev

..................................
npm init nuxt-app <project-name>

cd <project-name>
npm run dev

...................................
npx create-nuxt-app <project-name>




>>Manual Installation:


mkdir <project-name>
cd <project-name>


Create the package.json file:

Install Nuxt 

npm install nuxt
yarn add nuxt


Create your first page:

mkdir pages

pages/index.vue

<template>
  <h1>Hello world!</h1>
</template>

yarn dev

npm run dev

http://localhost:3000


----------------------------------------------------


>>>>> Nest Js App Installation <<<<<

SSR (Server Side Rendering)
SSG (Static-Site Generating)
SEO (Search Engine Obtinization)
Introduction. Nest (NestJS) is a framework for building efficient, scalable Node.

$ npm i -g @nestjs/cli
$ nest new project-name

Alternatives:

$ git clone https://github.com/nestjs/typescript-starter.git project
$ cd project
$ npm install
$ npm run start

------------------------------------------------------------------------------------


>>> React Loop <<<<<<

updatedNums(){
  this.state.records.map((number) => {
   return "<li>" + {number} + "</li>"
  })
}
..............
const products = ['orange', 'apple', 'watermelon']
const list = []

products.forEach((product) => {
  list.push(<li>{product}</li>)
})

return (
 <div>
  {list}
 </div>
)
................

//Product is non unique

const list = products.map(product => <li key={product}>{product}</li>)
return (
 <div>
  {list}
 </div>
)

//with key

const list = products.map(({info, key}) => <li key={key}>{info}</li>)


//React Lifecycle Methods: 

1. Mounting  //Birth of your component
2. Update    //Growth of your component
3. Unmount   //Death of your component


render(), componentDidMount(), componentDidUpdate(), 
componentWillUnmount(), 

//
shouldComponentUpdate(), 

//static new
getDrivedStateFromProps()

getSnapshotBeforeUpdate()



// axios

const baseURL="https://jsonplacehoder.typicode.com/posts"

axios.get('${baseURL}/1').then((response) => setPost(response.data))



//mysql connection 
------------------------------------------------


>>>> React Function Component <<<<<<<

Form Controls: e.target.value


import React, {useState} from 'react';
import '../style.css';

function Registration() { 
  const [firstname, setFirstname] = useState("");
  const [lastname, setLastname] = useState("");
  const [password, setPassword] = useState("");

  //const [confirmPassword, setConfirmPassword] = useState("");

    return(
    <> 
    <form>
      <h1>User Form</h1>
                   
      <input type="text" name="firstname" value={firstname} placeholder="First Name" onChange={(e) => setFirstname(e.target.value)} className="form-control mt-5" />      
      <input type="text" name="lastname" value={lastname} placeholder="LastName" onChange={(e) => setLastname(e.target.value)} className="form-control mt-2" />             
      <input type="password" name="password" value={password} placeholder="Password" onChange={(e) => setPassword(e.target.value)} className="form-control mt-2" />             
      <input type="submit" name="submit" value="Register" className="form-control mt-2 btn btn-info" />
        
    </form> 
    First Name: {firstname}<br />
    Last Name: {lastname} <br/>
    Password: {password}
    </>   
    );
         
}
export default Registration;



-------------------------------------------------

>>>>> React Loop <<<<

1. 

 <ul>

     {items.map((item,index)=>{

         return <li key={index}>{item}</li>

     })}

 </ul>

------
2. JSX

let itemList=items.map((item,index)=>{

  return <li key={index}>{item}</li>

})

------
3. 

useEffect(()=>{

    axios.get('https://reqres.in/api/users?page=2')

      .then(res=>{

        console.log(res.data.data);

        setUserData(res.data.data)

      })

      .catch(err=>{

        console.log(err);

      })

 },[])

-----
4.
 return (

    <>

    {userData.map((data,id)=>{

      return <div key={id}>

        <h2>{data.first_name} {data.last_name}</h2>

        <p>{data.email}</p>

      </div>

    })}


    </>

  );

}

------
5.
  const users=userData.map((data,id)=>{

    return <div key={id}>

      <h2>{data.first_name} {data.last_name}</h2>

      <p>{data.email}</p>

    </div>

  })

  return (

    <>

    {users}


    </>

  );

}


----------------------------------------------

-------------------------------------------------------



>>>>> Javascript Predefined Functions <<<<<<<<<<


map(), filter(), reduce(), some(), every(), includes(), slice(), splice().

‎map(), filter(), reduce(), slice()

eval(), parseInt(), parseFloat(), escape(), unscape(), 

write(), alert()



1. Shorten the console log

const log = console.log.bind(document)
log("does it work?")
log("yes")
log(12)

2. Merge two arrays into one

 const array1 = ["one", "two", "three"]
 const array2 = ["four", "five", "six"]
 const merged = array1.concat(array2)

 console.log(merged) // "one", "two", "three", "four", "five", "six"

3. Merge two objects into one

 const User = {
    name: "ajay sisaudiya",
    gender: "Male"
 };

 const article = {
    title: "Javascript tips",
    data: '2022-06-01'
 };

 const summary = {...User, ...article}

 4. Shorten an array
 const array1 = ["One", "Two", "Three", "Four", "Five", "Six"]
 big_array.length = 3
 console.log(big_array)  //["One", "Two", "Three"]
 
 5. Shuffle an array
 const array1 = ["One", "Two", "Three", "Four", "Five", "Six"]
 array.sort(compareFn: function(){ return Math.random() - 0.5})
 console.log(array)

 6. Use isNum to verify a number

 console.log(isNum(n:1338))  //true
 console.log(isNum(n:13.38))  //true
 console.log(isNum(n:"Javascript"))  //false

 7. Use isStr to verify a string

 const isStr = value => typeof value === 'string';

 console.log(isStr(value:'JavaScript'));   //true
 console.log(isStr(value:346));           //false
 console.log(isStr(value:true));         //false

8. Use isNull

const isNull = value => value === null || value === undefinced;

console.log(isNull(value:null))     // true
console.log(isNull())              //  true
console.log(isNull(value:123))    //   false
console.log(isNull(value:"J"))   // false

9. Calculate the performance of a function

const start = performance.now();
//some program
const end = performance.now();
const total = start - end
console.log("function takes " + total + " milisecond");

10. Remove duplicates from an array

const delDuplicates = array => [...new Set(array)]
console.log(delDuplicates(array:["One", "Two", "Three", "Two", "Four",
                                 "Five", "Four", "Three", "One", "Five",
                                 "Five", "Three", "Four", "One", "Two"
                                 ]))

11. Use logical AND/OR for conditions

const input = 2 
input === 5 && console.log("it is 5")
input === 5 || console.log("it is not 5")

or for assigning values:

function defaultsTo5(arg){
  arg = arg || 5; arg will have 5 as a default value if not set
  console.log(arg)
}

let arg1 = 2
let arg2 = null
defaultsTo5(arg1) //2
defaultsTo5(arg2) //5


12. Ternary operator

function temperature(temp) {
  return (temp > 39 || temp < 35.5) ? 'Visit Doctor!'
    : (temp < 37.5 && temp > 36.5) ? 'Go Out and Play!!'
      : (temp <= 39 && temp >= 35.5) ? 'Take Some Rest!' : ''
}

console.log(temperature(temp:38))   // Take Some Rest!
console.log(temperature(temp:36))   // Take Some Rest!
console.log(temperature(temp:39.1)) // Visit Doctor!
console.log(temperature(temp:35.1)) // Visit Doctor!
console.log(temperature(temp:37))   // Go Out and Play



1.Spread operator
2.for…of iterator
3.includes()
4.some()
5.every()
6.filter()
7.map()
8.reduce()


1. Spread operator

const favouriteFood = ['Pizza', 'Fries', 'Swedish-meatballs'];
console.log(...favoriteFood);

//Pizza Fries Swedish-meatballs

2. for…of iterator

const toolBox = ['Hammer', 'Screwdriver', 'Ruler']

for(const item of toolBox){
  console.log(item)
}

//Hammer
//Screwdrive
//Ruler

3. Includes() method

const garage = ['BMW', 'AUDI', 'VOLVO'];
const findCar = garage.includes('BMW');

console.log(findCar)      // true

4. Some() method

ES5:

 const age = [15, 13, 17];
 age.some(function(person){
   return person >= 17
 })                              //true

ES6: 

 const age = [15, 13, 17];
 age.some((person) => person >= 17)    //true

5. Every() method

ES5: 

const age = [15, 20, 19];
   age.every(function(person){
    return person >= 18;
   })                           //Output: false


ES6: 

const age = [15, 20, 19];
age.every((person) => person >= 18); //Output: false

6. Filter() method

ES5: 

const prices = [25, 30, 15, 55, 40, 10];
prices.filter(function(){
  return price >= 30;
});                   //Output: [30, 55, 40]


ES6:

const prices = [25, 30, 15, 55, 40, 10];
prices.filter((price) => price >= 30)

// [30, 55, 40]


7. Map() method

ES5:

const productPriceList = [200, 350, 1500, 5000];
productPriceList.map(function(item){
  return item * 0.75;
});

// [150, 262.5, 1125, 3750]

ES6: 

const productPriceList = [200, 350, 1500, 5000];
productPriceList.map((item) => item * 0.75);

// [150, 262.5, 1125, 3750]


8. Reduce() method

ES5: 

const weeklyExpresses = [200, 350, 1500, 5000, 450, 680, 350]

weeklyExpensses.reduce(function(first, last){
  return first + last;
});

//8530

ES6: 

const weeklyExpresses = [200, 350, 1500, 5000, 450, 680, 350]

weeklyExpensses.reduce((first, last) => first + last);

//8530




https://www.freecodecamp.org/news/7-javascript-methods-that-will-boost-your-skills-in-less-than-8-minutes-4cc4c3dca03f/

---------------------------------------------------------------

------------------------------------------------------------------


>>> Next Js <<<<

Two forms of Pre-rendering:

Next.js has two forms of pre-rendering: Static Generation and Server-side Rendering. The difference is in when it generates the HTML for a page.

    Static Generation (Recommended): The HTML is generated at build time and will be reused on each request.
    Server-side Rendering: The HTML is generated on each request.

---------------------------------------------------------------------
---------------------------------------------------------------------


>>>>> Next Js Routing <<<<<<<<<<


Routing:

Index routes:

  pages/index.js → /
  pages/blog/index.js → /blog


Nested routes:

  pages/blog/first-post.js → /blog/first-post
  pages/dashboard/settings/username.js → /dashboard/settings/username







----------------------------------------------------------------------

JavaScript:

In JavaScript, the fetch() method is used to make asynchronous requests to the server and load the information that is returned by the server onto the web pages.

Syntax:

fetch(URL, options);


Code:

fetch('https://reqres.in/api/products')

  .then(res => res.json())

  .then(data => console.log(data))

  .error(e => console.error(e))

.............................................


Init (optional): Any further options such as:

  Method: The request method is either GET or POST.
  Headers
  Body: The body can be any of the following: Body.array.Buffer(), Body.Blob(), Body.formData(), Body.json(), Body.text().
  Mode
  Credentials
  Cache

.........................

  Example:

  fetch('url', {
  Method: 'POST',
  Headers: {
    Accept: 'application.json',
    'Content-Type': 'application/json'
  },
  Body: body,
  Cache: 'default'
})

....................................

 GetImage().catch(error => {
      console.error(error);
 });

  async function GetImage(){
       const response = await fetch('/anim.jpg');
       const blob = await response.blob();
       document.getElementById('flower').src=URL.createObjectURL(blob);
  }

....................................

  getData();

  async function getData(){
       const response= await fetch('https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita%’)
       console.log(response);
       const data= await response.json();
       console.log(data);
       length=data.drinks.length;
       console.log(data);
       var temp="";
       for(i=0;i<length;i++)
       {
          temp+="<tr>";
          temp+="<td>"+data.drinks[i].strDrink+"</td>";
          temp+="<td>"+data.drinks[i].strInstructions+"</td>";
       }

    document.getElementById("data").innerHTML=temp;
  }


................................

Using fetch() to POST JSON Data:

Object {
  title: "",
  body: "",
  id: 101
}

body: ""

id: 101

title: ""


var form=document.getElementById('form')

form.addEventListener('submit', function(e){
 e.preventDefault()

 var name=document.getElementById('name').value
 var body=document.getElementById('body').value

 fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title:name,
    body:body,

  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  }
  })
  .then(function(response){ 
  return response.json()})
  .then(function(data)
  {console.log(data)
  title=document.getElementById("title")
  body=document.getElementById("bd")
  title.innerHTML = data.title
  body.innerHTML = data.body  
}).catch(error => console.error('Error:', error)); 
});

-------------------------------------------------------------------------












-------------------------------------------------------------------



>>> Next Routing <<<<





-------------------------------------------

Wht is Typescript: 

TS not a new programming lanuglar 
ts is a yped superset of js
developed by Microsoft
Object Oriented


Current Version: 
Initial release in 1 Obtober 2012
Development by Microsoft




easy code management
support ecmascript
we can use data types, classes, interface etc
ide support


Node js and npm
a mordern code editor
a basic idea about js












-------------------------------------------------------------------
-------------------------------------------------------------------

>>>>> Nuxt Js Routing <<<<<<<




<template>
  <NuxtLink to="/">Home page</NuxtLink>
</template>



.................

<template>
  <main>
    <h1>Home page</h1>
    <NuxtLink to="/about">
      About
    </NuxtLink>
    <a href="/about">About</a>
  </main>
</template>











-------------------------------------------------------------------
-------------------------------------------------------------------

Development words: 

Portability
Time Saving
Agility
Light weight
Cloud Provider Support



-------------------------------------------------------------------
-------------------------------------------------------------------

-------------------------------------------------------------------
-------------------------------------------------------------------

>>>>>> Nest Routing <<<<<<<<<<


//Create users controller

src / users.controller.ts



//Config users controller

src / app.module.ts





-------------------------------------------------------------------
-------------------------------------------------------------------




<<<<<<<  React Redux <<<<<<<<<<

Store: 


npm install --save redux react-redux



mkdir src\actions
echo "" > src\actions\startAction.js
echo "" > src\actions\stopAction.js


src/actions/startAction.js

export const startAction = {
  type: "rotate",
  payload: true
};


src/actions/stopAction.js

export const stopAction = {
  type: "rotate",
  payload: false
};


mkdir src\reducers
echo "" > src\reducers\rotateReducer.js



export default (state, action) => {
  switch (action.type) {
    case "rotate":
      return {
        rotating: action.payload
      };
    default:
      return state;
  }
};



echo "" > src\store.js


import { createStore } from "redux";
import rotateReducer from "reducers/rotateReducer";

function configureStore(state = { rotating: true }) {
  return createStore(rotateReducer,state);
}

export default configureStore;



Add a .env file into your app like so:

echo "NODE_PATH=./src" > .env

npm install -g cross-env


"start": "NODE_PATH=./src react-scripts start",

import { connect } from "react-redux";

export default connect()(App);


import { startAction } from "actions/startAction";
import { stopAction } from "actions/stopAction";



    mapStateToProps: this is used to retrieve the store state
    mapDispatchToProps: this is used to retrieve the actions and dispatch them to the store



So let’s write inside our App.js (at the end of the file if you may):

const mapStateToProps = state => ({
  ...state
});

const mapDispatchToProps = dispatch => ({
  startAction: () => dispatch(startAction),
  stopAction: () => dispatch(stopAction)
});



After this, let’s add them inside our connect function like so:

export default connect(mapStateToProps, mapDispatchToProps)(App);



Let’s change the img tag to:

<img 
  src={logo} 
  className={
    "App-logo" + 
    (this.props.rotating ? "":" App-logo-paused")
  } 
  alt="logo" 
  onClick={
    this.props.rotating ? 
      this.props.stopAction : this.props.startAction
  }
/>


For this, we go inside src/index.js, we import a Provider from react-redux, and the newly created store like so:

import { Provider } from "react-redux";

import configureStore from "store";


Provider: makes the Redux store available to any nested components that have been wrapped in the connect function


ReactDOM.render(
  <Provider store={configureStore()}>
    <App />
  </Provider>,
  document.getElementById('root')
);



So, your index.js should look like this:


import React from 'react';
import ReactDOM from 'react-dom';
// new imports start
import { Provider } from "react-redux";

import configureStore from "store";
// new imports stop

import './index.css';

import App from './App';
import * as serviceWorker from './serviceWorker';

// changed the render
ReactDOM.render(
  <Provider store={configureStore()}>
    <App />
  </Provider>,
  document.getElementById('root')
);
// changed the render

serviceWorker.unregister();


Using action creators:


echo "" > src\actions\rotateAction.js


const rotateAction = (payload) => {
  return {
    type: "rotate",
    payload
  }
}
export default rotateAction;


import rotateAction from "actions/rotateAction";

onClick={() => this.props.rotateAction(!this.props.rotating)}


rotateAction: (payload) => dispatch(rotateAction(payload))





----------------------------------------------------------------------------

----------------------------------------------------------------------------


<<<<<< ECMAScript <<<<<<<<<<


In September 1995, a Netscape programmer named Brandan Eich developed a new scripting language in just 10 days. It was originally named Mocha, but quickly became known as LiveScript and, later, JavaScript.

Microsoft - Internet Explorer: JScript  


Why JavaScript is called ECMAScript?
A confusing bit of history is that JavaScript was created in 1996. It was then submitted to Ecma International in 1997 for standardization, which resulted in ECMAScript. At the same time, because JavaScript conformed to the ECMAScript specification, JavaScript is an example of an ECMAScript implementation.


What does ECMAScript stand for *?
Image result for what is ecmascript
European Computer Manufacturers Association Script
ECMAScript (European Computer Manufacturers Association Script) is a scripting language based on JavaScript. Invented by Brendan Eich at Netscape, ECMAScript made its first appearance in the Navigator 2.0 browser.


What is ES6 JavaScript?
JavaScript ES6 (also known as ECMAScript 2015 or ECMAScript 6) is the newer version of JavaScript that was introduced in 2015. ECMAScript is the standard that JavaScript programming language uses. ECMAScript provides the specification on how JavaScript programming language should work.


Why is ES6 better than JavaScript?
JavaScript ES6 brings new syntax and new awesome features to make your code more modern and more readable. It allows you to write less code and do more. ES6 introduces us to many great features like arrow functions, template strings, class destruction, Modules… and more.


What are the versions of JavaScript?
Till date, ES has published nine versions and the latest one (9th version) was published in the year 2018.

    ES1 1997.        ECMA-262
    ES2 1998.      
    ES3 1999.      
    ES4 Abandoned.
    ES5 2009.
    ES6 2015.         ECMAScript 2015
    ES7 2016.         ECMAScript 2016
    ES8 2017.
    ES9 2018
    ES10 2019
    ES11 2020
    ES12 2021
    ES13 2022         ECMAScript 2016

    

-------------------------------------------------------------------------
-------------------------------------------------------------------------
-------------------------------------------------------------------------



>>>>>> Next Js <<<<<<<<<<
 

> getStaticProps

> Fetch Data

// posts will be populated at build time by getStaticProps()

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

export async function getStaticProps(context) {

  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {}, // will be passed to the page component as props
  }
}




-----------------------------------------------------------------------
-----------------------------------------------------------------------
-----------------------------------------------------------------------
-----------------------------------------------------------------------

>>>>> ECMAScript 6 ( ES6 ) 2015 <<<<<<<<<<<<<<<


1. The let keyword
2. The const keyword


JavaScript let:
The let keyword allows you to declare a variable with block scope.

Example: 
<h2>Redeclaring a Variable Using let</h2>

<p id="demo"></p>

<script>
let  x = 10;
// Here x is 10

{  
  let x = 2;
  // Here x is 2
}

// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>

............................

JavaScript const:
The const keyword allows you to declare a constant.


Example: 
<h2>Declaring a Variable Using const</h2>

<p id="demo"></p>

<script>
var  x = 10;
// Here x is 10
{  
  const x = 2;
  // Here x is 2
}
// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>







>> ES6 <<<<<<<


Arrow Function: 

let myFunction = (a, b) => a * b;


hello = () => {
  return "Hello World!";
} 

...............

Arrow Functions Return Value by Default:

<p id="demo"></p>

var hello;

hello = () => "Hello World!";

document.getElementById("demo").innerHTML = hello();

................


Arrow Function With Parameters:

<p id="demo"></p>

var hello;

hello = (val) => "Hello " + val;

document.getElementById("demo").innerHTML = hello("Universe!");

..................


Arrow Function Without Parentheses:

var hello;

hello = val => "Hello " + val;

document.getElementById("demo").innerHTML = hello("Universe!");

...................




-----------------------------------------------------------------------

New Features in ES6

    The let keyword
    The const keyword
    Arrow Functions
    For/of
    Map Objects
    Set Objects
    Classes
    Promises
    Symbol
    Default Parameters
    Function Rest Parameter
    String.includes()
    String.startsWith()
    String.endsWith()
    Array.from()
    Array keys()
    Array find()
    Array findIndex()
    New Math Methods
    New Number Properties
    New Number Methods
    New Global Methods
    Object entries
    JavaScript Modules


-------------------------------------------------------------------------


>>>>> ES6 <<<<<<<


- The For/Of Loop -

The JavaScript for/of statement loops through the values of an iterable objects.


for (variable of iterable) {
  // code block to be executed
}


#Looping over an Array

Example:

const cars = ["BMW", "Volvo", "Mini"];
let text = "";

for (let x of cars) {
  text += x + " ";
}


#Looping over a String

Example:

let language = "JavaScript";
let text = "";

for (let x of language) {
    text += x + " ";
}


--------------------------------------------


-- ES6 --

== Map Objects ===

var map = new Map();  
    map.set('user01', 'author');  
    map.set('user02', 'publisher');  
    map.set('user03', 'subscriber');  
    map.set('user04', 'Distributor');  
        
console.log(map.size);  


// Create Objects
const apples = {name:"Apples", age:23};
const bananas = {name: 'Bananas',age:55};
const oranges = {name: 'Oranges',age:9};

// Create a new Map
const fruits = new Map();

// Add the Objects to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);


let text = "";  

for(const k of fruits.entries()){
   console.log(k);
  text += k[0].name + "<br>";
 //console.log(k.name);
 //console.log(`${k[0].name}: ${k[1]}`);

};

// Display Object Type
document.getElementById("es6").innerHTML = text;


---------------------------------------------------------

----- ES6 -------

--> WeakMap() <--


        ++++ const wm = new WeakMap() ++++


Weak Maps:
.........
A weak map is identical to a map with the following exceptions −

    Its keys must be objects.

    Keys in a weak map can be Garbage collected. Garbage collection is a process of clearing the memory occupied by unreferenced objects in a program.

    A weak map cannot be iterated or cleared.

Example : Weak Map

'use strict' 
let weakMap = new WeakMap(); 
let obj = {}; 
console.log(weakMap.set(obj,"hello, Ajay"));  
console.log(weakMap.has(obj));// true




---------------------------------------------------

>>>> ES6 <<<<<

--> Set() & WeakSet() <---


A JavaScript Set is a collection of unique values.
A Set can hold any value of any data type.
Each value can only occur once in a Set.


// create Set
const set1 = new Set(); // an empty set
console.log(set1); // Set {}

// Set with multiple types of value
const set2 = new Set([1, 'hello', {count : true}]);
console.log(set2); // Set {1, "hello", {count: true}}



//create WeakSet
const ws = new WeakSet()

------------------------------------------------


<<<<< ES6 <<<<<<

 --> Class <--


ECMAScript 2015, also known as ES6, introduced JavaScript Classes.
JavaScript Classes are templates for JavaScript Objects.


Syntax:

class ClassName {
  constructor() { ... }
}


Example:

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

 ----------------------------------------------------


<<<< ES6 <<<<<<

Promise: 

const promise  = new Promise();

const promise  = new Promise((Resolve, Reject) => {
  
});


------------------------------------------------------


>>>> PHP API <<<<<<

//Content Type

//-----Content Types In PHP--------------

//header("Content-Type:application/json");
//header("Content-Type:application/pdf");
//header("Content-Type:image/png");
//header("Content-Type:video/mp4");

//header('Access-Control-Allow-Origin:*')
//header('Access-Control-Allow-Methods: GET, POST')
//header('Access-Control-Allow-Headers: ')

//-----Content Types In PHP -------------


//Password Hashing


//echo md5("Ajay Sisaudiya"); echo "<br>";
//echo sha1("Ajay Sisaudiya"); echo "<br>";
//echo crypt("Ajay Sisaudiya",10); echo "<br>";
//echo base64_encode("Ajay Sisaudiya"); echo "<br>";
//echo base64_decode("QWpheSBTaXNhdWRpeWE="); echo "<br>";
//echo password_hash("Ajay Sisaudiya",PASSWORD_DEFAULT); echo "<br>";
//echo password_hash("Ajay Sisaudiya", PASSWORD_BCRYPT ); echo "<br>";
//echo password_hash("Ajay Sisaudiya", PASSWORD_ARGON2I ); echo "<br>";
//echo password_hash("Ajay Sisaudiya", PASSWORD_ARGON2ID ); echo "<br>";

//password_verify() - Verifies that a password matches a hash
//crypt() - One-way string hashing
//» userland implementation
//sodium_crypto_pwhash_str() - Get an ASCII-encoded hash





-----------------------------------------------------


>>>> Ajax + PHP <<<<<<

//Files: phpajax.php & index.php in same folder

//Send request to phpajax.php with id 
//Check id's value call specifed function with switch statement

Code:

index.php:

<?php 
declare(strict_types=1); // strict requirement
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>

<body>

<ul id="menu">
  <li id="java">Java</li>
  <li id="cpp">C++</li>
  <li id="es6">es6</li>
  <li id="main">main</li>
</ul>

<div id="php"></div>

<button>Post</button>

</body>
</html>

<script src="jquery.min.js"></script>
<script>

$(function(){     
   
$('#menu li').on('click', function(){
  let id = $(this).attr('id');

    $.get('phpajax.php', {id:id}, function(data){
        $('#php').html(data); //do something with whatever data is returned
    });
});

});


</script>



phpajax.php:


<?php
$id = $_GET['id'];

switch ($id) {
  case 'java':
    java();
    break;
  case 'cpp':
    cpp();
    break;
  case 'es6':
    es6();
    break;  
  case 'main':
    main();
    break;      
  default:
    # code...
    break;
}

function java(){
   include 'java.php';
}

function cpp(){
   include 'cpp.php';
}
function es6(){
   include 'es6.php';
}

function main(){
   include 'main.php';
}


?>

---------------------------------------------------------


---------------------------------------------------------

----------> Core PHP API <-------------------------------

>>>> Core PHP Api <<<<<<<

Two Files: DbConnection.php & api.php

1. DbConnection.php


<?php
/**
* Database Connection 
*/
class DbConnection {
  private $server = 'localhost';
  private $dbname = 'phpreactapi';
  private $user = 'root';
  private $pass = '';

  public function connect() {
    try{
      $conn = new PDO('mysql:host=' .$this->server.';dbname='.$this->dbname,$this->user,$this->pass);
      $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
      return $conn;     
    }catch(\Exception $e) {
      echo "Database Error: " . $e->getMessage();
    }
  }
}
?>



2. api.php

<?php
header("Acess-Control-Allow-Origin:*");
header("Acess-Control-Allow-Headers:*");
include 'DbConnect.php';
$db = new DbConnection();
$conn = $db->connect();
//var_dump($conn);

$method = $_SERVER['REQUEST_METHOD'];
switch($method){
    case "POST":
    $user = file_get_contents('php://input');

    $sql = "INSERT INTO users(id, name, email, mobile, created_at) VALUES(null, :name, :email, :mobile, :created_at)";  
    $stmt = $conn->prepare($sql);
    $stmt->bindParam(':name', $user->name);
    $stmt->bindParam(':email', $user->email);
    $stmt->bindParam(':mobile', $user->mobile);
    $stmt->bindParam(':created_at', $user->created_at);
    if($stmt->execute()){
        $response = ['status' => 1, 'message' => 'Record Created Successfully'];
    }else{
        $response = ['status' => 0, 'message' => 'Failed to create record'];
    }
    break;

    case "GET":
    break;

    default : echo "Error In Database or any...";
}

?>

--------> End of PHP API <----------------------------

-------------------------------------------------------



>>> Jquery Events <<<<



Mouse Events    : click, dblclick, dblclick, mouseleave

Keyboard Events : keypress, keydown, keyup

Form Events     : submit, change, focus, blur

Document/Window : load, resize, scroll, unload



Event Methods:

$("p").click();

$("p").click(function(){
     // action goes here!!
}); 


Example:

$("p").click(function(){
  $(this).hide();
});


Example:

$("p").dblclick(function(){
  $(this).hide();
});


Example:

$("#p1").mouseenter(function(){
  alert("You entered p1!");
});

Example:

$("#p1").mouseleave(function(){
  alert("Bye! You now leave p1!");
});

Example:
$("#p1").mousedown(function(){
  alert("Mouse down over p1!");
});

Example:
$("#p1").mouseup(function(){
  alert("Mouse up over p1!");
});

Example:
$("input").focus(function(){
  $(this).css("background-color", "#cccccc");
});

Example:
$("p").on({
  mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
  mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
}); 
-----------> End Of Jquery Events <-------------

----------------------------------------------

----------------------------------------------

-----------------------------------------------
>>>> PHP (Calling php function by ajax)

Two File: index.php, myphp.php

1. index.php

<input type="text" id="name" onblur="fajax()">


<button>Calling php fun from ajax</button>
</body>
</html>

<script src="jquery.min.js"></script>
<script type="text/javascript">

function fajax() {
  var name = document.getElementById('name').value;
  $.ajax({
    url:'http://localhost/api.php',
    data:{name:name,fun_name:"test"},
    type:"POST",
    success:function(res){
        console.log(res);
    }
  });
}

</script>

2. myphp.php

<?php

if($_POST['fun_name'] == 'test'){
  $name = $_POST['name'];
  echo test($name);
  exit(0);
}

function test($name){
  return "Hello! ".$name;
}


?>



-----------------------------------------------


>>>> Jquery Effetct <<<<<<<

                  Sytax: 

  hide()         - $(selector).hide(speed,callback);
  show()         - $(selector).show(speed,callback); 
  toggle()       - $(selector).toggle(speed,callback); 

  fadeIn()       - $(selector).fadeIn(speed,callback);
  fadeOut()      - $(selector).fadeOut(speed,callback);
  fadeToggle()   - $(selector).fadeToggle(speed,callback);
  fadeTo()       - $(selector).fadeTo(speed,opacity,callback);


 slideDown()     $(selector).slideDown(speed,callback);
 slideUp()       $(selector).slideUp(speed,callback);
 slideToggle()   $(selector).slideToggle(speed,callback);

Syntax:

  $(selector).hide(speed,callback);
  $(selector).show(speed,callback);

  Example:

  $("#hide").click(function(){
    $("p").hide();
  });

  $("#show").click(function(){
    $("p").show();
  }); 


  toggle()


Syntax:

  $(selector).toggle(speed,callback);

Example:

  $("button").click(function(){
    $("p").toggle();
  }); 



--------------------------------------------------



>>>> Stop, Callback & Chaining <<<<


$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});


#panel, #flip {
  padding: 8px;
  font-size: 18px;
  text-align: center;
  background-color: #555;
  color: white;
  border: solid 1px #666;
  border-radius: 5px;
}

#panel {
  padding: 50px;
  display: none;
}

-----------------------------------------------



>>> Jquery <<<<<

Get:
1. Get Content and Attributes

    a. Get Content: 
        text(), html(), and val()

    b. Get Attributes:
        attr();


Example: 

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});

Example:

$("button").click(function(){
  alert($("#w3s").attr("href"));
});
......................................

Set: 
2. Set
  a. Set Content:
     text(), html(), and val()

  b. Set Attributes:
     attr()


Example:

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

Example: 

$("button").click(function(){
  $("#w3s").attr("href", "https://www.w3schools.com/jquery/");
});


Example:

$("button").click(function(){
  $("#w3s").attr({
    "href" : "https://www.w3schools.com/jquery/",
    "title" : "W3Schools jQuery Tutorial"
  });
});


------------------------------------------------------------------



>>>> Add & Remove <<<<<<<<<<



 Add Elements:

    append() - Inserts content at the end of the selected elements
    prepend() - Inserts content at the beginning of the selected elements
    after() - Inserts content after the selected elements
    before() - Inserts content before the selected elements



 Elements/Content: 

    remove() - Removes the selected element (and its child elements)
    empty() - Removes the child elements from the selected element



Add Element Examples: 

  $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
  });

  $("#btn1").click(function(){
    $("p").prepend("<b>Prepended text</b>. ");
  });

  $("img").after("Some text after");

  $("img").before("Some text before");


  $("#btn1").click(function(){
    $("img").before("<b>Before</b>");
  });

  $("#btn2").click(function(){
    $("img").after("<i>After</i>");
  });



Elements/Content Examples: 

$("#div1").remove();


$("#div1").empty();


$("p").remove(".test");

$("p").remove(".test, .demo"); 



--------------------------------------------


>>>> Get and Set CSS Classes >>>>>

jQuery Manipulating CSS:

    addClass() - Adds one or more classes to the selected elements
    removeClass() - Removes one or more classes from the selected elements
    toggleClass() - Toggles between adding/removing classes from the selected elements
    css() - Sets or returns the style attribute


.important {
  font-weight: bold;
  font-size: xx-large;
}

.blue {
  color: blue;
}

$("button").click(function(){
  $("h1, h2, p").addClass("blue");
  $("div").addClass("important");
});


$("button").click(function(){
  $("#div1").addClass("important blue");
});

$("button").click(function(){
  $("h1, h2, p").removeClass("blue");
});

$("button").click(function(){
  $("h1, h2, p").toggleClass("blue");
});




-------------------------------------------------




>>> jQuery Dimension Methods <<<<<<<<<<<



    width()
    height()
    innerWidth()
    innerHeight()
    outerWidth()
    outerHeight()

Example:

$("button").click(function(){
  var txt = "";
  txt += "Width: " + $("#div1").width() + "</br>";
  txt += "Height: " + $("#div1").height();
  $("#div1").html(txt);
}); 

Example:
$("button").click(function(){
  var txt = "";
  txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
  txt += "Inner height: " + $("#div1").innerHeight();
  $("#div1").html(txt);
}); 

Example:
$("button").click(function(){
  var txt = "";
  txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
  txt += "Outer height: " + $("#div1").outerHeight();
  $("#div1").html(txt);
}); 

Example:
$("button").click(function(){
  var txt = "";
  txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
  txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
  $("#div1").html(txt);
}); 

Example:
$("button").click(function(){
  var txt = "";
  txt += "Document width/height: " + $(document).width();
  txt += "x" + $(document).height() + "\n";
  txt += "Window width/height: " + $(window).width();
  txt += "x" + $(window).height();
  alert(txt);
}); 

Example:
$("button").click(function(){
  $("#div1").width(500).height(500);
}); 



-------------------------------------------------------------


>>>> jQuery Traversing <<<<<<<


Traversing the DOM:


1. Traversing - Ancestors

    Traversing Up the DOM Tree:

    parent()
    parents()
    parentsUntil()

2. Traversing - Descendants

    Traversing Down the DOM Tree

    children()
    find()


Example:                       --> Ancestors

$(document).ready(function(){
  $("span").parent();
}); 

Example:
$(document).ready(function(){
  $("span").parents();
}); 

Example:
$(document).ready(function(){
  $("span").parents("ul");
}); 

Example:
$(document).ready(function(){
  $("span").parentsUntil("div");
}); 


Example:                        --> Descendants
$(document).ready(function(){
  $("div").children();
}); 

Example:
$(document).ready(function(){
  $("div").children("p.first");
}); 

Example:
$(document).ready(function(){
  $("div").find("span");
}); 

Example:
$(document).ready(function(){
  $("div").find("*");
}); 

------------------------------------------------





 >>>>> jQuery Traversing - Siblings <<<<<<<<


 Traversing Sideways in The DOM Tree:

    siblings()
    next()
    nextAll()
    nextUntil()
    prev()
    prevAll()
    prevUntil()

Example
$(document).ready(function(){
  $("h2").siblings();
}); 

Example
$(document).ready(function(){
  $("h2").siblings("p");
}); 

Example
$(document).ready(function(){
  $("h2").next();
}); 

Example
$(document).ready(function(){
  $("h2").nextAll();
}); 

Example
$(document).ready(function(){
  $("h2").nextUntil("h6");
}); 



-----------------------------------------------


>>>>>> jQuery Traversing - Filtering <<<<<<<<<<<<<


The first(), last(), eq(), filter() and not() Methods


Example
$(document).ready(function(){
  $("div").first();
}); 


Example
$(document).ready(function(){
  $("div").last();
}); 


Example
$(document).ready(function(){
  $("p").eq(1);
}); 


Example
$(document).ready(function(){
  $("p").filter(".intro");
}); 


Example
$(document).ready(function(){
  $("p").not(".intro");
}); 



------------------------------------------------------



>>>>>> jQuery - AJAX Introduction <<<<<<<<<<<<



What is AJAX?

AJAX = Asynchronous JavaScript and XML.

AJAX is about loading data in the background and display it on the webpage, without reloading the whole page.


Examples of applications using AJAX: 
       Gmail, Google Maps, Youtube, and Facebook tabs.

jQuery provides several methods for AJAX functionality.


    responseTxt - contains the resulting content if the call succeeds
    statusTxt - contains the status of the call
    xhr - contains the XMLHttpRequest object


jQuery - AJAX load() Method:

Syntax:
$(selector).load(URL,data,callback); 


Here is the content of our example file: 
"ajaxdemo.txt":

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>


Example
$("#div1").load("ajaxdemo.txt"); 

Example
$("#div1").load("ajaxdemo.txt #p1"); 


Example
$("button").click(function(){
  $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
    if(statusTxt == "success")
      alert("External content loaded successfully!");
    if(statusTxt == "error")
      alert("Error: " + xhr.status + ": " + xhr.statusText);
  });
}); 


-----------------------------------------------------------------------



 <<<<<<< jQuery - AJAX get() and post() Methods <<<<<<<<<<<<<


 HTTP Request: GET vs. POST

    GET - Requests data from a specified resource
    POST - Submits data to be processed to a specified resource

1.
jQuery $.get() Method:
The $.get() method requests data from the server with an HTTP GET request.

Syntax:
$.get(URL,callback); 


Example
$("button").click(function(){
  $.get("demo_test.asp", function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
  });
}); 


2.
jQuery $.post() Method:
The $.post() method requests data from the server using an HTTP POST request.

Syntax:
$.post(URL,data,callback); 

Example
$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name: "Donald Duck",
    city: "Duckburg"
  },
  function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
  });
}); 




-------------------------------------------------------------------


>>>>>>> JavaScript <<<<<<<<<<<<<<


Variables, Loops, Objects


Variable: 

var x = 4;
let y = 5;
const z = 10;


Loops:



Object: 


const car = {type:"Fiat", model:"500", color:"white"};

Or 

const car = {
  type:"Fiat", 
  model:"500", 
  color:"white"
};




//Other example

const car = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

person.firstName;
person["firstName"]


console.log(perons.firstName);

































--------------------------------------------------------------------

--------------------------------------------------------------------

>>>> SSH <<<<<<<<<<<<<<


-> SSH Github to windows 10

Generate ssh key with github:

Steps: 

//Copy command in cmd or power shell or git ON windows 10
ssh-keygen -t rsa -b 4096 -C "astech.youtube@gmail.com"

//Got this in cmd..
SHA256:H2Dde0k0yJ2iS+K4G41W8CQYWebtwbbW7qc62JFX+X0 astech.youtube@gmail.com

Commands: 
ls !/.ssh


eval $(ssh-agent -s)


//Add to system (Register)
ssh-add -k ~/.ssh/id_rsa

//
Now add public key to Github

//
cat ~/ssh/id_rsa.pub

//Check connection is stablished or not 
ssh -t git@github.com

--------------------------------------------------------------------
--------------------------------------------------------------------

----------------------------------------------------------

>>>>>> ES6 <<<<<<<<<<


Promise: 


Promise Syntax:

let p = new Promise(function(resolve,reject){
   let workDone = true; // some time consuming work
      if(workDone){
      //invoke resolve function passed
      
    resolve('success promise completed')
   }
   else{
      reject('ERROR , work could not be completed')
   }
});


Example 01: 
----------

   function add_positivenos_async(n1, n2) {
      let p = new Promise(function (resolve, reject) {
         if (n1 >= 0 && n2 >= 0) {
            //do some complex time consuming work
            resolve(n1 + n2)
         }
         else
            reject('NOT_Postive_Number_Passed') 
         })
         return p;
   }

   add_positivenos_async(10, 20)
      .then(successHandler) // if promise resolved
      .catch(errorHandler);// if promise rejected

   add_positivenos_async(-10, -20)
      .then(successHandler) // if promise resolved
      .catch(errorHandler);// if promise rejected

   function errorHandler(err) {
      console.log('Handling error', err)
   }
   function successHandler(result) {
      console.log('Handling success', result)
   }

   console.log('end')





   Promises Chaining:
   ------------------
Example: 02:

   function add_positivenos_async(n1, n2) {
      let p = new Promise(function (resolve, reject) {
         if (n1 >= 0 && n2 >= 0) {
            //do some complex time consuming work
            resolve(n1 + n2)
         }
         else
            reject('NOT_Postive_Number_Passed')
      })
      return p;
   }

   add_positivenos_async(10,20)
   .then(function(result){
      console.log("first result",result)
      return add_positivenos_async(result,result)
   }).then(function(result){
   console.log("second result",result)
      return add_positivenos_async(result,result)
   }).then(function(result){
      console.log("third result",result)
   })

   console.log('end')



promise.all() : 
--------------
This method can be useful for aggregating the results of multiple promises.

Syntax:
Promise.all(iterable);

Example 03: 

   function add_positivenos_async(n1, n2) {
      let p = new Promise(function (resolve, reject) {
         if (n1 >= 0 && n2 >= 0) {
            //do some complex time consuming work
            resolve(n1 + n2)
         }
         else
            reject('NOT_Postive_Number_Passed')
      })

      return p;
   }
   //Promise.all(iterable)

Promise.all([add_positivenos_async(10,20),add_positivenos_async(30,40),add_positivenos_async(50,60)])
   .then(function(resolveValue){
      console.log(resolveValue[0])
      console.log(resolveValue[1])
      console.log(resolveValue[2])
      console.log('all add operations done')
   })
   .catch(function(err){
      console.log('Error',err)
   })
   console.log('end')




promise.race(): 
--------------

This function takes an array of promises and returns the first promise that is settled.


Syntax:
Promise.race(iterable)

Examp   function add_positivenos_async(n1, n2) {
      let p = new Promise(function (resolve, reject) {
         if (n1 >= 0 && n2 >= 0) {
            //do some complex time consuming work
            resolve(n1 + n2)
         } else
            reject('NOT_Postive_Number_Passed')
      })

      return p;
   }

   //Promise.race(iterable)
   Promise.race([add_positivenos_async(10,20),add_positivenos_async(30,40)])
   .then(function(resolveValue){
      console.log('one of them is done')
      console.log(resolveValue)
   }).catch(function(err){
      console.log("Error",err)
   })

   console.log('end')le 04: 

   function add_positivenos_async(n1, n2) {
      let p = new Promise(function (resolve, reject) {
         if (n1 >= 0 && n2 >= 0) {
            //do some complex time consuming work
            resolve(n1 + n2)
         } else
            reject('NOT_Postive_Number_Passed')
      })

      return p;
   }

   //Promise.race(iterable)
   Promise.race([add_positivenos_async(10,20),add_positivenos_async(30,40)])
   .then(function(resolveValue){
      console.log('one of them is done')
      console.log(resolveValue)
   }).catch(function(err){
      console.log("Error",err)
   })

   console.log('end')



Understanding AsyncCallback: 
----------------------------

   function notifyAll(fnSms, fnEmail) {   
      setTimeout(function() {   
         console.log('starting notification process');   
         fnSms();   
         fnEmail();   
      }, 2000);   
   }   
   notifyAll(function() {   
      console.log("Sms send ..");   
   },  
   function() {   
      console.log("email send ..");   
   });   
   console.log("End of script"); //executes first or not blocked by others   



multiple callbacks: 
------------------

   setTimeout(function() {   
      console.log("one");   
      setTimeout(function() {   
         console.log("two");   
         setTimeout(function() {   
            console.log("three");   
         }, 1000);   
      }, 1000);   
   }, 1000);



Basic Example : 
-------------
var promise = new Promise(function(resolve , reject) {    
   // do a thing, possibly async , then..  
   if(/*everthing turned out fine */)    resolve("stuff worked");  
   else     
   reject(Error("It broke"));  
});  

//return promise;

// Give this to someone



Example:  (Get Sum)

function getSum(n1, n2) {   
   varisAnyNegative = function() {   
      return n1 < 0 || n2 < 0;   
   }   
   var promise = new Promise(function(resolve, reject) {   
      if (isAnyNegative()) {   
         reject(Error("Negatives not supported"));   
      }   
      resolve(n1 + n2)
   });   
   return promise;   
} 


getSum(5, 6)   
.then(function (result) {   
   console.log(result);   
},   
function (error) {   
   console.log(error);   
});




-----------------------------------------------------------
-----------------------------------------------------------
-----------------------------------------------------------




>>>>>> Javascript Object <<<<<<<<<<

//Details: Website Links
//https://www.digitalocean.com/community/tutorials/how-to-use-object-methods-in-javascript

--> Operations On Objects

Object.assign(obj,objnew);
Object.create(obj);
Object.keys(obj);
Object.values(obj);
Object.entries(obj);  
Object.freeze(obj);
Object.seal(obj)
Object.getPrototypeOf(obj)


Example 01:
----------- 
           //Object.create();

// Initialize an object with properties and methods
const job = {
    position: 'cashier',
    type: 'hourly',
    isAvailable: true,
    showDetails() {
        const accepting = this.isAvailable ? 'is accepting applications' : "is not currently accepting applications";

        console.log(`The ${this.position} position is ${this.type} and ${accepting}.`);
    }
};

// Use Object.create to pass properties
const barista = Object.create(job);

barista.position = "barista";
barista.showDetails();


Example 02: 
-----------
           //Object.keys()

// Initialize an object
const employees = {
  boss: 'Michael',
  secretary: 'Pam',
  sales: 'Jim',
  accountant: 'Oscar'
};

// Get the keys of the object
const keys = Object.keys(employees);

console.log(keys);


// Iterate through the keys
Object.keys(employees).forEach(key => {
    let value = employees[key];

   console.log(`${key}: ${value}`);
});


Example 03:
----------
              // Object.values()

// Initialize an object
const session = {
    id: 1,
    time: `26-July-2018`,
    device: 'mobile',
    browser: 'Chrome'
};

// Get all values of the object
const values = Object.values(session);

console.log(values);


Example 04: 
             // Object.entries()

// Initialize an object
const operatingSystem = {
    name: 'Ubuntu',
    version: 18.04,
    license: 'Open Source'
};

// Get the object key/value pairs
const entries = Object.entries(operatingSystem);

console.log(entries);


// Loop through the results
entries.forEach(entry => {
    let key = entry[0];
    let value = entry[1];

    console.log(`${key}: ${value}`);
});

----------------------------------------------------
----------------------------------------------------



>>> Vite + Vue3 Installation <<<<<<<

//Package.json

{
  "name": "vitevue",
  "private": true,
  "version": "0.0.0",
  "type": "module",

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

  "dependencies": {
    "vue": "^3.2.37"
  },

  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.0",
    "vite": "^3.0.0"
  }
}

------------------------------------------


src/main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')
=================================


In main dir: vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})


Main dir: index.html 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>


----------------------------------------------

Migrate to vite: 

  These are the steps we will follow to migrate.

    Update your package.json.
    Add a Vite config.
    Update your tsconfig.json file.
    Install all the packages.
    Move your index.html file.
    Update the index.html contents.
    Update all your env vars.



  Vue Cli To Vite






================================================================


>>>>> React Redux <<<<<<<

Website: 

https://scriptverse.academy/tutorials/reactjs-redux-example.html


npm i react-redux
npm i redux
npm i redux-thunk


reducer.js. 



// reducer.js
const INITIAL_STATE = {
  name: '',
  books: []
}

export default (state = INITIAL_STATE, action={}) => {
  switch(action.type) {
    case "SET_DATA":
      return {
        ...state,
        ...action.content
      };
    default:
      return state;
  }
};


--> 

// action.js

const setData = (content) => {
  return {
    type: "SET_DATA",
    content
  }
}

const appendData = (obj) => {
  return (dispatch) => {
    dispatch(setData(obj));
  }
}

export {
  appendData
}


--> 




// store.js
import { createStore, applyMiddleware } from "redux";
import thunk from 'redux-thunk';
import reducer from "./reducer";

const store = createStore(
  reducer,
  applyMiddleware(thunk)
);

export default store;


--> 



// Books.js
import React from "react";
import { connect } from "react-redux";
import { appendData } from "./action";

class Library extends React.Component {
  componentDidMount() {
    let name = 'Anastasia';
    let arr = [];

    arr.push({
      book_id: 1,
      title: 'Dune',
      author: 'Frank Herbert',
      year: 1965
    });

    arr.push({
      book_id: 2,
      title: 'Hyperion',
      author: 'Dan Simmons',
      year: 1989
    });

    this.props.appendData({
      name: name,
      books: [...this.props.books, ...arr]
    });
  }

  render() {
    const { name, books } = this.props;

    let booksList = books.length > 0
      && books.map((item, i) => {
      return (
        <li key={i} value={item.book_id}>
          {item.title} by {item.author} ({item.year})
        </li>
      )
    }, this);

    return (
      <div>
        <h1>Hello {name}!</h1>
        <ol>
          { booksList }
        </ol>
      </div>
    );
  }
}

const mapDispatchToProps = {
  appendData
}

const mapStateToProps = state => ({
  name: state.name,
  books: state.books
});

export default connect(mapStateToProps, mapDispatchToProps)(Library);


--> 



// index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import Books from "./Books";
import store from "./store";

const App = () => {
  return (
    <div>
      <Books/>
    </div>
  );
}

const rootElement = document.getElementById("root");

ReactDOM.render(
  <Provider store={store}>
    <App/>
  </Provider>,
  rootElement
);




---------------------------------------------------


>>>> Box Boxes <<<<<



  _______     ________    __________
 |_______|   |________|  |__________|


  _______     ________    __________
 |_______|   |________|  |__________|


  _______     ________     __________
 |       |   |        |   |          |
 |_______|   |________|   |__________|


  _______       ________       __________
 |       | ==> |        | ==> |          |
 |_______|     |________|     |__________|

 
 
  

--------------------------------------------------




------------------------------------------



>>>>>>>> Vue Store (Vuex) <<<<<<<<<<<<

------------------------------------------