Javascript Basics

JavaScript is the world’s most popular programming language. Some of the advantages of javascript are given below:

  • Client side execution
  • Validation on browser
  • Easy language

Disadvantages:

  • It is comparatively less secure.
  • No hardware access

Ways of adding javascript:

Inline – We can javascript inside the head tag or the body tag between <script>…</script>.

External – We can create a javascript file externally and link it inside the head tag or the body tag between <script>…</script>.

To link a java file to html file:-

<script src=”abc.js” type=”text/script”> </script>

Some of the functions of javascript is given below:-

  • Write function

*document.write()

  • It displays the content into page.
  • If we use this function in the end of the HTML document it will delete all existing HTML.
  • It is used only for testing purpose.

Ex:- document.write(variable); , document.write(4+2);

  • Alert function

*window.alert()

  • It displays the data in the alert box.
  • It should be used when you want the user to stop and see the alert.

Ex:- window.alert(“hello world”); , window.alert(“4+2);

  • Identifiers

It is a name having few letters, numbers and special characters.

It is used to identify var, function, symbolic constant and so on.

Ex:- X2 , PI , Sigma

  • Variable

It is an identifier or a name which is used to refer a value.

It is written with a combination of letters, numbers and special character with first letter being alphabet (Underscore & Dollar) also.

Ex:- C , fact , b33 , total_amount

  • Data type

In javascript we do not have to specify type of variable.

“Var” can hold any type of data like string , number , boolean etc

Primitive data types:

Data TypeDescription
Stringrepresents sequence of characters e.g. “hello”
Numberrepresents numeric values e.g. 100
Booleanrepresents boolean value either false or true
Undefinedrepresents undefined value
Nullrepresents null i.e. no value at all

Non-Primitive data types:

Data TypeDescription
Objectrepresents instance through which we can access members
Arrayrepresents group of similar values
RegExprepresents regular expression
  • Declaring Variable

var roll;

roll= name;

Here ‘roll’ is the variable name and ‘name’ is assigning value to variable.

If a variable is declared without a value then its value will be undefined.

Important points in Javascript:-

  • Statements are executed one by one as they are written.
  • Javascripts program and statements are often called Javascripts code.
  • Semicolons separates javascript statements.
  • Ending statement with semicolon is not required but it is highly recommended.
  • Javascript ignores multiple spaces.

LARAVEL CRUD

Laravel crud operation:-(version 5.8)

1st step:-First we have to download laravel (version-5.8).to download laravel we have to go to command prompt, and then go to the folder path in which you want to download laravel. After  this run the composer command.(command givel below):-

composer create-project laravel/laravel=5.8 crud –prefer-dist

2nd step:- After downloading laravel, we have to make MySql database.

3rd step:- now open .env file of the model and configure like the image given below:

4th step:- Make the migration folder by the writing the        command given below on command prompt:

      php artisan make:migration create_crud_table –create=crud

This command make a migration file in database\migration in this file we have to define the required column which we want to create in the database table.

The code for migration:-

                     <?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateCrudsTable extends Migration

{

    /**

     * Run the migrations.

     *

     * @return void

     */

    public function up()

    {

        Schema::create(‘cruds’, function (Blueprint $table) {

            $table->bigIncrements(‘id’);

            $table->string(‘first_name’);

            $table->string(‘last_name’);

            $table->string(‘image’);

            $table->timestamps();

        });

    }

    /**

     * Reverse the migrations.

     *

     * @return void

     */

    public function down()

    {

        Schema::dropIfExists(‘cruds’);

    }

}

Now we have to migrate the table to the database. The command to migrate the table to tahe database is:-

            Php artisan migrate

Write the above code in command prompt. 

5th step:- Now make a model by using the command

                 Php artisan make:moedel model_name –m

By the above command a new file is created with .php extension in app folder.

6th step:- Paste the code given below in the file created in               5th step

     <?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class crud extends Model

{

  protected $fillable =[

      ‘first_name’, ‘last_name’, ‘image’

  ];

}

7th step:- Now create controller. The code to create controller is given below

   Php artisan make:controller CrudController –resource

Note: crud of CrudController is name of the model.

8th step:- This is the most important step. In this step we set up the route for all the CrudController class  method. Write the below code in route\web.php file.

     <?php

/*

|————————————————————————–

| Web Routes

|————————————————————————–

|

| Here is where you can register web routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| contains the “web” middleware group. Now create something great!

|

*/

Route::get(‘/’, function () {

    return view(‘welcome’);

});

Route::resource(‘crud’,’CrudsController’);

9th step:- Now code the view file in resource\views folder. All the html,css and javascript code is written in this file.

We make new file for the view in resource\views\filename.blade.php

Code is given below

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Document</title>

</head>

<body>

@extends(‘Crud.parent’)

@section(‘main’)

<div align=”right”>

    <a href=”{{route(‘crud.create’)}}”class=”btn btn-success btn-sm”>Add</a>

</div>

@if ($message = Session::get(‘success’))

<div class=”alert alert-success”>

<p>{{$message}}</p>

</div>

@endif

<table class=”table table-bordered table-striped”>

 <tr>

  <th width=”10%”>Image</th>

  <th width=”35%”>First Name</th>

  <th width=”35%”>Last Name</th>

  <th width=”30%”>Action</th>

 </tr>

 @foreach($data as $row)

  <tr>

   <td><img src=”{{ URL::to(‘/’) }}/images/{{ $row->image }}” class=”img-thumbnail” width=”75″ /></td>

   <td>{{ $row->first_name }}</td>

   <td>{{ $row->last_name }}</td>

   <td>

        <a href=”{{route(‘crud.show’, $row->id) }}” class=”btn btn-primary”>Show</a>

        <a href=”{{route(‘crud.edit’, $row->id) }}” class=”btn btn-warning”>Edit</a>

        <form action=”{{route(‘crud.destroy’,$row->id) }}”

        method=”post”>

        @csrf

        @method(‘DELETE’)

        <button type=”submit” class=”btn btn-danger”>Delete</button>

        </form>

   </td>

  </tr>

 @endforeach

</table>

{!! $data->links() !!}

@endsection

</body>

</html>

10th step:- Now code the controller.

 Code for the controller

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Crud;

class CrudsController extends Controller

{

    /**

     * Display a listing of the resource.

     *

     * @return \Illuminate\Http\Response

     */

    public function index()

    {

        $data = Crud::latest()->paginate(5);

        return view(‘Crud.index’, compact(‘data’))

                ->with(‘i’, (request()->input(‘page’, 1) – 1) * 5);

    }

    /**

     * Show the form for creating a new resource.

     *

     * @return \Illuminate\Http\Response

     */

    public function create()

    {

        return view(‘Crud.create’);

    }

    /**

     * Store a newly created resource in storage.

     *

     * @param  \Illuminate\Http\Request  $request

     * @return \Illuminate\Http\Response

     */

    public function store(Request $request)

    {

        $request->validate([

            ‘first_name’    =>  ‘required’,

            ‘last_name’     =>  ‘required’,

            ‘image’         =>  ‘required|image|max:2048’

        ]);

        $image = $request->file(‘image’);

        $new_name = rand() . ‘.’ . $image->getClientOriginalExtension();

        $image->move(public_path(‘images’), $new_name);

        $form_data = array(

            ‘first_name’       =>   $request->first_name,

            ‘last_name’        =>   $request->last_name,

            ‘image’            =>   $new_name

        );

        Crud::create($form_data);

        return redirect(‘crud’)->with(‘success’, ‘Data Added successfully.’);

    }

    /**

     * Display the specified resource.

     *

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

    public function show($id)

    {

        $data = Crud::findOrFail($id);

        return view(‘Crud.view’, compact(‘data’));

    }

    /**

     * Show the form for editing the specified resource.

     *

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

    public function edit($id)

    {

        $data = Crud::findOrFail($id);

        return view(‘Crud.edit’, compact(‘data’));

    }

    /**

     * Update the specified resource in storage.

     *

     * @param  \Illuminate\Http\Request  $request

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

    public function update(Request $request, $id)

    {

         $image_name = $request->hidden_image;

        $image = $request->file(‘image’);

        if($image != ”)

        {

            $request->validate([

                ‘first_name’    =>  ‘required’,

                ‘last_name’     =>  ‘required’,

                ‘image’         =>  ‘image|max:2048’

            ]);

            $image_name = rand() . ‘.’ . $image->getClientOriginalExtension();

            $image->move(public_path(‘images’), $image_name);

        }

        else

        {

            $request->validate([

                ‘first_name’    =>  ‘required’,

                ‘last_name’     =>  ‘required’

            ]);

        }

        $form_data = array(

            ‘first_name’       =>   $request->first_name,

            ‘last_name’        =>   $request->last_name,

            ‘image’            =>   $image_name

        );

        Crud::whereId($id)->update($form_data);

        return redirect(‘crud’)->with(‘success’, ‘Data is successfully updated’);

    }

    /**

     * Remove the specified resource from storage.

     *

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

    public function destroy($id)

    {

        $data = Crud::findOrFail($id);

        $data->delete();

        return redirect(‘crud’)->with(‘success’, ‘Data is successfully deleted’);

    }

}

Code for index file

resources/views/index.blade.php

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Document</title>

</head>

<body>

@extends(‘Crud.parent’)

@section(‘main’)

<div align=”right”>

    <a href=”{{route(‘crud.create’)}}”class=”btn btn-success btn-sm”>Add</a>

</div>

@if ($message = Session::get(‘success’))

<div class=”alert alert-success”>

<p>{{$message}}</p>

</div>

@endif

<table class=”table table-bordered table-striped”>

 <tr>

  <th width=”10%”>Image</th>

  <th width=”35%”>First Name</th>

  <th width=”35%”>Last Name</th>

  <th width=”30%”>Action</th>

 </tr>

 @foreach($data as $row)

  <tr>

   <td><img src=”{{ URL::to(‘/’) }}/images/{{ $row->image }}” class=”img-thumbnail” width=”75″ /></td>

   <td>{{ $row->first_name }}</td>

   <td>{{ $row->last_name }}</td>

   <td>

        <a href=”{{route(‘crud.show’, $row->id) }}” class=”btn btn-primary”>Show</a>

        <a href=”{{route(‘crud.edit’, $row->id) }}” class=”btn btn-warning”>Edit</a>

        <form action=”{{route(‘crud.destroy’,$row->id) }}”

        method=”post”>

        @csrf

        @method(‘DELETE’)

        <button type=”submit” class=”btn btn-danger”>Delete</button>

        </form>

   </td>

  </tr>

 @endforeach

</table>

{!! $data->links() !!}

@endsection

</body>

</html>

Code for create file

resources/views/create.blade.php

   <!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Document</title>

</head>

<body>

@extends(‘Crud.parent’)

@section(‘main’)

@if($errors->any())

<div class=”alert alert-danger”>

 <ul>

  @foreach($errors->all() as $error)

  <li>{{ $error }}</li>

  @endforeach

 </ul>

</div>

@endif

<div align=”right”>

 <a href=”{{ route(‘crud.index’) }}” class=”btn btn-default”>Back</a>

</div>

<form method=”post” action=”{{ route(‘crud.store’) }}” enctype=”multipart/form-data”>

 @csrf

 <div class=”form-group”>

  <label class=”col-md-4 text-right”>Enter First Name</label>

  <div class=”col-md-8″>

   <input type=”text” name=”first_name” class=”form-control input-lg” />

  </div>

 </div>

 <br />

 <br />

 <br />

 <div class=”form-group”>

  <label class=”col-md-4 text-right”>Enter Last Name</label>

  <div class=”col-md-8″>

   <input type=”text” name=”last_name” class=”form-control input-lg” />

  </div>

 </div>

 <br />

 <br />

 <br />

 <div class=”form-group”>

  <label class=”col-md-4 text-right”>Select Profile Image</label>

  <div class=”col-md-8″>

   <input type=”file” name=”image” />

  </div>

 </div>

 <br /><br /><br />

 <div class=”form-group text-center”>

  <input type=”submit” name=”add” class=”btn btn-primary input-lg” value=”Add” />

 </div>

</form>

@endsection

</body>

</html>

Code for view file

resources/views/view.blade.php

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Document</title>

</head>

<body>

@extends(‘parent’)

@section(‘main’)

<div class=”jumbotron text-center”>

 <div allign=”right”>

  <a href=”{{ route(‘crud.index’) }}” class=”btn btn-default”>Back</a>

 </div>

 <br />

 <img src=”{{ URL::to(‘/’) }}/images/{{ $data->image }}” class=”img-thumbnail” />

 <h3>First Name – {{ $data->first_name }} </h3>

 <h3>Last Name – {{ $data->last_name }}</h3>

</div>

@endsection

</body>

</html>

  Code for edit file

resources/views/edit.blade.php

      <!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Document</title>

</head>

<body>

@extends(‘parent’)

@section(‘main’)

            @if ($errors->any())

                <div class=”alert alert-danger”>

                    <ul>

                        @foreach ($errors->all() as $error)

                            <li>{{ $error }}</li>

                        @endforeach

                    </ul>

                </div>

            @endif

            <div align=”right”>

                <a href=”{{ route(‘crud.index’) }}” class=”btn btn-default”>Back</a>

            </div>

            <br />

     <form method=”post” action=”{{ route(‘crud.update’, $data->id) }}” enctype=”multipart/form-data”>

                @csrf

                @method(‘PATCH’)

      <div class=”form-group”>

       <label class=”col-md-4 text-right”>Enter First Name</label>

       <div class=”col-md-8″>

        <input type=”text” name=”first_name” value=”{{ $data->first_name }}” class=”form-control input-lg” />

       </div>

      </div>

      <br />

      <br />

      <br />

      <div class=”form-group”>

       <label class=”col-md-4 text-right”>Enter Last Name</label>

       <div class=”col-md-8″>

        <input type=”text” name=”last_name” value=”{{ $data->last_name }}” class=”form-control input-lg” />

       </div>

      </div>

      <br />

      <br />

      <br />

      <div class=”form-group”>

       <label class=”col-md-4 text-right”>Select Profile Image</label>

       <div class=”col-md-8″>

        <input type=”file” name=”image” />

              <img src=”{{ URL::to(‘/’) }}/images/{{ $data->image }}” class=”img-thumbnail” width=”100″ />

                        <input type=”hidden” name=”hidden_image” value=”{{ $data->image }}” />

       </div>

      </div>

      <br /><br /><br />

      <div class=”form-group text-center”>

       <input type=”submit” name=”edit” class=”btn btn-primary input-lg” value=”Edit”/>

      </div>

     </form>

@endsection

</body>

</html>

Eloquent and Model in Laravel

Here we will discuss about the eloquent ORM and insertion of data to database table via Model.

Eloquent model included with Laravel provides a simple, active record implementation for working with database. Each database table has a corresponding “model” which is used to interact with the table.

Model allows us to query for data in our tables and also insert new records into the table.

First of all we need to create a model and to create a model we can run the command given below:

php artisan make:model Product -a

This command will create a model , controller , migration and factory.

Once the model is created we can find the model under apps as shown in the image below:

Now moving forward we can insert details under the migration folder and migrate it in the database:

To migrate the data we know we need to execute php artisan migrate command and a table will be created in the database:

Now to insert data in the database we need to provide it in the controller:

After executing the command we can run the server and see the output in our browser and we can see the name in the page and also the details will be saved in the database.

You can see the video given below for more information:

Tagged :

AJAX Setup/ Installation

Ajax is a web development technique designed to create highly responsive/ interactive websites. To have a better understanding of AJAX we need to have knowledge of javascript and somewhat XML.

The easiest way of implementing AJAX, is by using jQuery.

To add jQuery

We can use the downloaded version from (jquery.com/download/) and we need to include the file location of the file in the script under the header tag, or we can use the CDN in the head of HTML as

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

After we are good to go with the operations we need to perform. If we wanna test that the CDN works fine we can use the function below in the body of the HTML script

<script>
$(document).ready(function(){
    alert("jQuery Works")
});
</script>

If we see the jQuery works alert, That mean we can congratulate ourselves on our success.

For knowing what is AJAX and its procedure https://www.scmgalaxy.com/tutorials/a-brief-description-of-ajax/

Tagged : / / /

A Brief Description of AJAX

AJAX stands for Asynchronous JavaScript And XML.

It is a web development technique that helps to create a highly responsive website. by the use of AJAX, we get desktop-like software experience on the web browser. It is used in the web pages to be updated asynchronously by changing data with a web server behind the scene (in the background). This makes it possible to update parts of a web page, without reloading the whole page. It is the use of the XMLHttpRequest object to communicate with server-side scripts.

The easiest way of implementing AJAX, especially if we’re planning on communicating with servers is by using jQuery.

Most people get confused with the concept that ajax is a programming language. So, let’s be very clear that

Ajax is not a programming language, it is a web development technique designed to create highly responsive/ interactive websites. To have a better understanding of AJAX we need to have knowledge of javascript and somewhat XML.

Javascript is a scripting language that helps to make web pages interactive, CSS (Cascading style sheet) style sheet to the makeup of the webpage and XML (extensible markup language ) is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable. here javascript and CSS are essentials and XML is less essential for the beginners

Why use AJAX

  1. A whole page reload is not required on each request made.
  2. Sends and receives data in the background.
  3. Improves speed and performance.
  4. Provides a better user experience.

How AJAX works

Ajax uses XMLHttpRequest object (also called XHR objects) to achieve this

  1. When the user sends a request from the interface then the javascript directs to the XMLHttpRequest object.
  2. Then the HTTP Request is made to the server by XMLHttpRequest object.
  3. Then the server interacts with the database using the JSP, PHP, Servlet, ASP.net, etc.
  4. When there is a match for the request then the Data is retrieved from the database.
  5. Then the Server sends XML data or JSON data to the XMLHttpRequest callback function.
  6. Finally, when all the things are good to go then the web-page made (with HTML and CSS) is displayed on the browser.
How AJAX works

For knowing the installation/setup procedure link is given below https://www.scmgalaxy.com/tutorials/ajax-setup-installation/

Tagged : / /