Basic of Ajax Jquery - CRUD in Laravel | Shahul Hameed

 Overview Image






Step 1: Create Blade - tasks_main.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>TO-DO List</title>
    <!-- Bootstrap link -->
    <link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
  integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
</head>

<body>
<section style="padding-top:60px;">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
            <div class="card-header">
                 To-do Lists
                 <a href="" class="btn btn-primary float-right"
                 data-toggle="modal" data-target="#addModal">Add New</a>
            </div>
            </div>
            <div class="card-body">
                <table class="table" id="taskTable">
                    <thead>
                        <tr>
                            <th scope="col">No</th>
                            <th scope="col">Name</th>
                            <th scope="col">Description</th>
                            <th scope="col">Category</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($list as $data)
                        <tr>
                            <td>{{$data->id}}</td>
                            <td>{{$data->name}}</td>
                            <td>{{$data->description}}</td>
                            <td>{{$data->category}}</td>
                            <td>
              <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button"
                id="dropdownMenuButton"   data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="false">Options</button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item editNote" href="#" data-id="{{$data->id}}">
                  Edit</a>
                <a class="dropdown-item deleteNote" href="#" data-id="{{$data->id}}">
                  Delete</a>
                                </div>
                            </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>        
</section>

<!-- Start Add To-Do Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add To-DO</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
     
        <form name ="" method="post" id="addTodo">
            @csrf
            <div class="row mb-3">
                <label class="col-sm-2 col-form-label">Name</label>
                <div class="col-sm-10">
                <input type="text" class="form-control" name="name">
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-form-label">Description</label>
                <div class="col-sm-10">
                <input type="text" class="form-control" name="description">
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-form-label">Category</label>
                <div class="col-sm-10">
                <input type="text" class="form-control" name="category">
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </form>
      </div>
     
    </div>
  </div>
</div>
<!-- End Add To-Do Modal -->


<!-- Start Edit To-Do Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Edit To-DO</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
     
        <form name ="" method="post" id="editTodo">
            @csrf
            <!-- {{ method_field('PUT') }} -->
            <input type="hidden" class="form-control" id="id" name="id">
            <div class="row mb-3">
                <label class="col-sm-2 col-form-label">Name</label>
                <div class="col-sm-10">
                <input type="text" class="form-control" id="name" name="name">
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-form-label">Description</label>
                <div class="col-sm-10">
                <input type="text" class="form-control" id="description"
                name="description">
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-form-label">Category</label>
                <div class="col-sm-10">
                <input type="text" class="form-control" id="category" name="category">
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </form>
      </div>
     
    </div>
  </div>
</div>
<!-- End Edit To-Do Modal -->

</body>

<!-- Jquery Link -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<!-- Optional Links PopUp -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>

<script src="{{ asset('js/script.js') }}"></script>
</html>



Step 2 : ScriptJs - script.js 

$(document).ready(function(){

    //Insert ajax
    $('#addTodo').on('submit',function(event){
        event.preventDefault();
        // Get Alll Text Box Id's
        // name = $('#name').val();
        // description = $('#description').val();
        // category = $('#category').val();
       
        $.ajax({
          url: "/add-tasks",
          type:"POST",
          data:$('#addTodo').serialize(),
          // {
          //     "_token": "{{ csrf_token() }}",
          //     name:name,
          //     description:description,
          //     category:category,
          // },
          //Display Response Success Message
          success: function(data){
              //console.log('end');
              $('#addModal').modal('hide');
              location.reload();
          },
          error:function(error)
          {
            console.log(error);
          }
        });
    console.log("It failed");
    });
    //End Insert ajax

  //Delete industry threat
  $(".deleteNote").click(function(){
    var id = $(this).attr('data-id');
     //console.log(id);
     
     $.ajax({
          url: '/delete-tasks/'+ id,
          type: 'get',
          dataType:"JSON",
          data:{
             id:id
          },
          success:function(data)
          {
            //console.log('deletd');
            location.reload();
            }
         
       });
    });
    //End delete industry threat

  //Edit ajax
  $(".editNote").click(function(){
    var id = $(this).attr('data-id');
     
      //console.log(id);
      $('#editModal').modal('show');
      $tr = $(this).closest('tr');
      var data = $tr.children('td').map(function(){
      return $(this).text();
        }).get();
        console.log(data);
        $('#id').val(data[0]);
        $('#name').val(data[1]);
        $('#description').val(data[2]);
        $('#category').val(data[3]);
      });

  $('#editTodo').on('submit',function(event){
        event.preventDefault();
       
        var id = $('#id').val();
   
        $.ajax({
          url: '/edit-tasks/'+ id,
          type:"post",
          data:$('#editTodo').serialize(),
   
          //Display Response Success Message
          success: function(data){
              //console.log('end');
              $('#editModal').modal('hide');
              location.reload();
          },
          error:function(error)
          {
            console.log(error);
          }
        });
  });
});


Step 3: Controller - php artisan make: controller TasksController

<?php
namespace App\Http\Controllers;
use DB;
use Illuminate\Http\Request;
class TasksController extends Controller
{
    public function index()
    {
        $data = DB::table('tasks')
                ->get();
        return view('tasks_main',['list'=>$data ]);
    }
    public function insertData(Request $req)
    {
        $data = DB::table('tasks')
                ->insert([
                    'name' => $req->name,
                    'description' => $req->description,
                    'category' => $req->category
                ]);
         if ($data) {
            return response()->json([
                'status' => true,
                'message' => 'New Alerts Added Successfully ',
            ]);
        } else {
            return response()->json([
                'status' => false,
                'message' => 'Internal server error please try again.',
            ]);
        }
    }
    public function deleteNote($id)
    {  
     
        $delete_id = $id;
        $delete_query = DB::table('tasks')->where('id', $delete_id)->delete();
        if($delete_query){
             return response()->json([
             'message' => 'Record has been deleted successfully!',
             'status'  => true
            ]);
        }
        else{
            return response()->json([
                'message' => 'Internal Error',
                'status'  => false
            ]);
        }
    }
    public function viewEditNote(Request $req, $id)
    {  
     
        $data = DB::table('tasks')
        ->where('id',$id)
        ->update([
            'name' => $req->name,
            'description' => $req->description,
            'category' => $req->category
        ]);
       
       
    if ($data) {
        return response()->json([
        'status' => true,
        'message' => 'New Alerts Added Successfully ',
    ]);
    }
    else {
        return response()->json([
        'status' => false,
        'message' => 'Internal server error please try again.',
    ]);
    }
}
}


Step 4: Route - web.php


Route::get('/tasks','TasksController@index');

Route::post('/add-tasks','TasksController@insertData');

Route::get('delete-tasks/{id}', 'TasksController@deleteNote');

Route::post('edit-tasks/{id}', 'TasksController@viewEditNote');

Comments

Post a Comment

Popular posts from this blog

Using Burp Suite - Brute Force payloads using XSS Validator(Extension) | Shahul Hameed

Image
XSS Brute Force Payloads using Burp Suite  Step 1: Get the parameter variable from the scope URL. Step 2: Intercept the parameter value using the burp suite application as shown in the below screenshot. Step 3: Clear and add the variable position which goes to perform an attack on the brute force of XSS payloads. Step 4: Install xssValidator extension in the burp suite and we can also add custom payloads in the below payloads box. Step 5: Set the following options in the Payloads option. Step 6: In Intruder clear, the Grep-Match and Grep-Payloads checked option search responses for payload strings. Step 7: Copy the grep phase from xssValidator and paste it into the intruder grep-match. Step 8: Unchecked the option from the payload encoding. Step 9: Start the attack and check the results with the grep value is 1 manually in the web browser which exploited the XSS attack payload.
Read more

Janus Vulnerability Exploitation

Image
  Janus Vulnerability(Exploitation) In brief, Applications that are signed only with v1 when installed on devices having an android version(5.0–8.0) are vulnerable to Janus Vulnerability. Step 1: Use the  apksigner tool and verify the signature v1 is only true , Hence it's highly possible to exploit the Janus vulnerability in the android application. CMD: apksigner verify -verbose h5.apk(Victim app) Before that we need to make sure that this application can be made to run on vulnerable Android versions  5.x, 6.x, 7.x & 8.0 (i.e., api level 21–26). Step 2:  Now let's check with min android version running on the application use apktool . CMD: apktool -s d H5.apk && cat H5/apktool.yml | grep minSdk The below application can be run on API Level 15(Android 4.0.4 Ice Cream Sandwich), so we can choose any device from  5.x, 6.x, 7.x & 8.0  to exploit it. A serious vulnerability in Android allows attackers to inject a DEX file into an APK file without affecting the sig
Read more

SQL Basics | Shahul Hameed

Image
  SQL _Queries   Resource: https://balanced-quince-db1.notion.site/SQL-7347f5956fe347f887b4132c716cd236#17bc403a1add453db519621da47c1de3 Database queries CREATE DATABASE LOGICFIRST; -- creates a new database -- TO DELETE A DATABASE DROP DATABASE LOGICFIRST; DROP SCHEMA LOGICFIRST; -- same as above. u can use DATABASE Or SCHEMA DROP SCHEMA IF EXISTS LOGICFIRST; -- prevents error if db not found   SHOW DATABASES; -- shows all the databases SHOW SCHEMAS; -- same as above. shows schemas/db   USE SYS; -- uses this database for all further commands SHOW TABLES;-- shows all tables in the database being used Table - Create,Delete,Alter primary key - uniquely identifies a row in a table //creating a table CREATE TABLE student(                id INT PRIMARY KEY,     name VARCHAR(30),     gpa DECIMAL(3,2) ); -- ----or----- CREATE TABLE student(                id INT,     name VARCHAR(30),     gpa DECIMAL(3,2),     PRIMARY KEY(id) );  
Read more