Cara Membuat Edit InLine Table Laravel

Cara Membuat Edit InLine Table Laravel

Postingan ini akan memberikan Anda contoh Cara Membuat Edit InLine Table Laravel. Anda akan belajar cara edit inline table sederhana dari laravel ajax.

Untuk contoh studi kasusnya, saya akan menampilkan daftar pengguna/user dan anda mengedit nama dan emailnya menggunakan x-editable js.

Peninjau :

Langkah 1 : Install Laravel

Pertama-tama kita perlu untuk menginstall Laravel terlebih dadulu, menggunakan perintah dibawah ini :

composer create-project --prefer-dist laravel/laravel blog

Langkah 2 : Tambahkan Pengguna Dummy


Pada langkah ini, kita akan menambahkan beberapa pengguna dummy menggunakan factory.

php artisan tinker 
User::factory()->count(10)->create()

Langkah 3 : Buat Route

Kita perlu membuat beberapa rute untuk fungsi.

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\UserController;
  
/*
|--------------------------------------------------------------------------
| 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('users', [UserController::class, 'index'])->name('users.index');
Route::post('users', [UserController::class, 'update'])->name('users.update');


Langkah 4 : Buat Controller


Pada langkah ini, kita perlu untuk membuat UserController dan menambahkan kode seperti dibawah ini :
<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Models\User;
  
class UserController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {
        $users = User::paginate(10);
          
        return view('users', compact('users'));
    }
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function update(Request $request)
    {
        if ($request->ajax()) {
            User::find($request->pk)
                ->update([
                    $request->name => $request->value
                ]);
  
            return response()->json(['success' => true]);
        }
    }
}


Langkah 5 : Buat File Blade


Pada langkah ini kita akan membuat tampilan untuk menampilkan data users.
resource/views/users.blade.php
<!DOCTYPE html>
<html>
<head>
    <title>Cara Membuat Edit InLine Table Laravel - SarjanaIT.com</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jquery-editable/css/jquery-editable.css" rel="stylesheet"/>
    <script>$.fn.poshytip={defaults:null}</script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jquery-editable/js/jquery-editable-poshytip.min.js"></script>
</head>
<body>
      
<div class="container">
    <h1>Laravel Table Inline Editing Example - ItSolutionStuff.com</h1>
    <table class="table table-bordered data-table">
        <thead>
            <tr>
                <th>No</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            @foreach($users as $user)
                <tr>
                    <td>{{ $user->id }}</td>
                    <td>
                        <a href="" class="update" data-name="name" data-type="text" data-pk="{{ $user->id }}" data-title="Enter name">{{ $user->name }}</a>
                    </td>
                    <td>
                        <a href="" class="update" data-name="email" data-type="text" data-pk="{{ $user->id }}" data-title="Enter email">{{ $user->email }}</a>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>
     
</body>
     
<script type="text/javascript">
    $.fn.editable.defaults.mode = 'inline';
  
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': '{{csrf_token()}}'
        }
    }); 
  
    $('.update').editable({
           url: "{{ route('users.update') }}",
           type: 'text',
           pk: 1,
           name: 'name',
           title: 'Enter name'
    });
</script>
</html>

Selesai, sekarang anda bisa menjalankan perintah dibawah ini untuk menjalankan contoh yang sudah kita buat :

php artisan serve

Jika sudah jalankan, anda dapat membuka URL dibawah ini pada browser Anda :

localhost:8000/user

Sekian untuk tutorial kali ini, jika anda masih bingung atau mengalami error silahkan bertanya pada kolom komentar dibawah ini.
Cara Membuat Credit Link Template Footer Tidak Bisa Dirubah

Cara Membuat Credit Link Template Footer Tidak Bisa Dirubah

Halo sobat, pada kesempatan kali ini. omjuan.com akan membagikan sebuah tutorial yang sangat menarik, dimana kita akan Membuat Credit Link Template Footer Tidak Bisa Dirubah. Sesuai dengan judulnya credit link yang kita buat ini tidak bisa di ganti linknya, apabila di ganti maka secara otomatis akan redirect ke website kita nantinya.  

Mari kita langsung ke tutorialnya saja, silahkan ikuti langkah-langkahnya dibawah ini dengan baik :

Langkah 1. 

Copy script dibawah ini, kemudian letkan diatas tag </body>

Ganti link http://www.sarjanait.com dengan link situs kalian.

<script type='text/javascript'>
$(document).ready(function () { if ($("#change,.change").attr("href") != "http://www.sarjanait.com/") {
        window.location.href = "http://www.sarjanait.com"; }});
</script>
Untuk menyembunyikan script javascript di atas, kita bisa gunakan Javascript Obfuscator

Langkah 2.

Contoh kode footer kalian seperti dibawah ini.
<footer id='footer-wrapper'>
<div class='credit-link'> Template By <a class='change' href='http://www.sarjanait.com/' id='change' title='TUTORIAL PROGRAMMING'>sarjanait.com</a>
</div>
</footer>

Ganti link dan title diatas dengan link dan title situs kalian. Jika sudah silahkan save template kalian.

Jika footer kalian berbeda dengan kode yang atas, kalian bisa untuk hanya menambahkan class credit-link didalam footer kalian.

Oke sobat itulah tutorial tentang Cara Membuat Credit Link Template Footer Tidak Bisa Dirubah semoga tutorial ini bermanfaat untuk sobat yang membutuhkan. Jangan lupa untuk share ya sobat, Terimakasih.

Cara Memasang Rating Bintang di blogger

Cara Memasang Rating Bintang di blogger


Hai semua pada kesempatan kali ini saya membagikan tutorial yang menarik, yaitu Cara Memasang Rating Bintang di blog, dimana kita akan menambahkan kode schema markup ada setiap psotingan yang di index mendapatkan rating.


Apa sih gunanya rating itu? mempercantik pengidexan artikel dan pengunjung akan berfikir bawah postingan kalian lebih menarik sehingga dapat meningkatkan pengunjung pada situs kalian.


Lalu bagimana sih Cara Memasang Rating Bintang di blog, oke langsung saja mari kita kerjakan. Perhatikan langkah-langka dibawah ini:


1. Buka Blogger > Theme/Tema>Edit HTML

2. Jika sudah silahkan taruh script dibawah ini ke dalam <head> dan </head>

<script type="application/ld+json">
{ "@context": "https://schema.org/", 
"@type": "CreativeWorkSeries", 
"name": "<data:blog.pageName/>", "aggregateRating": 
{ "@type": "AggregateRating", 
"ratingValue": "4.8", 
"bestRating": "5", 
"ratingCount": "302" } }
</script> 

3.  Jika sudah, silahkan teman-teman simpan/save.

4. Setelah itu cek atu link artikel di https://search.google.com/structured-data/testing-tool/u/0/ apabila CreativeWorkSeries tidak ada kesalahan maka lanjut ke tahap berikut. 




5.  Jika sudah sudah tidak ada kesahalan maka reindex ulang pada artikel anda dan tunggu hingga 5 menit, kemudian lihat hasilnya.

6. Selesai.

Oke teman-teman, kurang lebih tutorial kali ini tentang Cara Memasang Rating Bintang di blogger. Jika kalian masih bingung silahkan komentar dibawah saja. Terimakasih.

Membuat Syntax Highlighter Pada Blogger

Membuat Syntax Highlighter Pada Blogger

Hai semua, kali ini saya akan membagikan tutorial yang cukup menarik buat kalian. kita bakal membuat Syntax Highlighter keren untuk blogger ya teman-teman. Apa itu Syntax Highlighter? sebelum kita mulai saya akan jelasin sedikit tentang apa itu Syntax Highlighter?


Syntax Highlighter merupakan sebuah fitur khsusus untuk proses pemindahan kode bahasa pemrograman tertentu dengan tulisan, warna teks, posisi sama persis dengan yang terdapat pada kode bahasa pemrograman untuk dipindahkan maupun di copas kedalam bentuk tulisan lain supaya kita lebih mudah dalam membaca atau mempelajarinya.


Nah itu dia teman-teman kurang lebih penjelasan sinkat tentang apa itu Syntax Highlighter. 


Langsung saja kita ke tutorialnya ya teman-teman.

  1. Login Blogger > Template > Klik Edit HTML 
  2. Letakan kode dibawah ini tepat diatas </head> kemudian simpan 
  3. Letakan kode dibawah ini tepat diatas </head> kemudian simpan

<style>
/* POJOAQUE STYLE www.omjuan.com */
pre code{display:block;padding:0.5em;color:#DCCF8F;background:url(https://sites.google.com/site/problogiz/home/pojoaque.jpg) repeat scroll left top #181914}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .lisp .string,pre .javadoc{color:#586e75;font-style:italic}
pre .keyword,pre .css .rule .keyword,pre .winutils,pre .javascript .title,pre .method,pre .addition,pre .css .tag,pre .clojure .title,pre .nginx .title{color:#B64926}
pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#468966}
pre .title,pre .localvars,pre .function .title,pre .chunk,pre .decorator,pre .built_in,pre .lisp .title,pre .clojure .built_in,pre .identifier,pre .id{color:#FFB03B}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#b58900}
pre .css .attribute{color:#b89859}
pre .css .number,pre .css .hexcolor{color:#DCCF8F}
pre .css .class{color:#d3a60c}
pre .preprocessor,pre .pi,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata{color:#cb4b16}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#073642}
</style>

Atau

<style>
/* SOLARIZED DARK STYLE www.omjuan.com */
pre code{display:block;padding:0.5em;background:#002b36;color:#839496}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#586e75;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#859900}
pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#2aa198}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#b58900}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title{color:#cb4b16}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#073642}
</style>

Jika sudah memasang style atau tema Syntax Highlighter yang kalian suka pada template kalian, silahkan simpan/save template kalian.

Cara Penggunaan Syntax Highlighter

Silahkan kalian gunakan markup HTML di bawah ini mengaktifkan Syntax Highlighter pada saat kalian ingin menampilkan source code kalian, seperti : HTML, CSS, JAVASCRIPT, PHP dan markup HTML pada postingan kalian.

<pre><code>
Isi Kode jQuery, Javascript atau Kode CSS atau Kode HTML di sini
</code></pre>

Oke teman-teman, kurang lebih begitu untuk tutorial kita kali ini tentang Cara Membuat Syntax Highlighter Keren Pada Blogger, terimakasih.

Cara Menggunakan SMTP Gmail pada Laravel 8

Cara Menggunakan SMTP Gmail pada Laravel 8


Pada tutorial kali ini saya akan membagikan Cara Menggunakan SMTP Gmail pada Laravel 8, ini merupakan sebuah contoh sederhana untuk mengirim email menggunakan server smtp google gmail pada laravel 8.

Langsung saja mari ikuti langkah-langkah dibawah ini dengan seksama :

  1. Buat Konfigurasi ( Make Configuration )
    Pada langkah ini kita akan menambahkan konfigurasi (Configuration) kirim email menggunakan driver email sebagai server gmail. Masuk ke file .env dan cari yang bagian konfigurasi email dan isi seperti dibawah ini :
    MAIL_MAILER=smtp
    MAIL_HOST=smtp.gmail.com
    MAIL_PORT=587
    MAIL_USERNAME=testing@gmail.com
    MAIL_PASSWORD=wyhejkhudsnimqge
    MAIL_ENCRYPTION=tls
    MAIL_FROM_ADDRESS="nesiasite@gmail.com"
    MAIL_FROM_NAME="${APP_NAME}"

    Kemudian kita akan mengaktifkan sandi aplikasi pada akun google yang kita masukan pada konfigurasi diatasm. Masuk ke akun google lalu pilih Keamanan dan pilih Sandi Aplikasi


  2. Buat Mail ( Make Mail)
    Pada langkah ini kita akan membuat class mail TestMail untuk pengiriman email.Untuk membuat untuk cukup ketikan php artisan make:mail TestMail pada terminal anda

    app\Mail\TestMail.php

    <?php
      
    namespace App\Mail;
      
    use Illuminate\Bus\Queueable;
    use Illuminate\Contracts\Queue\ShouldQueue;
    use Illuminate\Mail\Mailable;
    use Illuminate\Queue\SerializesModels;
      
    class TestMail extends Mailable
    {
        use Queueable, SerializesModels;
      
        public $details;
      
        /**
         * Create a new message instance.
         *
         * @return void
         */
        public function __construct($details)
        {
            $this->details = $details;
        }
      
        /**
         * Build the message.
         *
         * @return $this
         */
        public function build()
        {
            return $this->subject('Mail from nesiasite.com')
                        ->view('emails.TestMail');
        }
    }


  3. Buat view ( Create View )
    Kita akan membuat file blade untuk tampilan email yang akan di kirim
    <!DOCTYPE html>
    <html>
    <kepala>
        <title> ItsolutionStuff.com </title>
    </head>
    <tubuh>
        <h1> {{ $details['title'] }} </h1>
        <p> {{ $details['body'] }} </p>
       
        <p> Terima kasih </p>
    </tubuh>
    </html>

  4. Tambahkan Rute ( Add Route )
    Langkah terakhir ini kita akan menambahkan rute untuk mengirim email testing kita.
    route/web.php

    Rute :: get ( 'send-mail' , function () {   
       
        $detail = [ 
            'title' => 'Surat dari nesiasite.com' ,  
            'body' => 'Ini untuk menguji email menggunakan smtp'  
        ];
       
        \Mail :: ke ( 'email-kamu@gmail.com' )-> kirim ( new \App\Mail\TestMail ( $details ));
       
        dd ( "Email sudah terkirim." );
    });


    Oke sekarang kita dapat menjalankan dan memeriksanya. Silahkan ketik php artisan serve lalu buka http://email.test/send-mail/ atau http://localhost:8000/send-mail/ 

Oke teman-teman kurang lebih seperti itu ya, untuk tutorial kita kali ini. Semoga tutorial dapat bermanfaat untuk kita semua.
Cara generate password acak di Laravel

Cara generate password acak di Laravel


Pada tutorial kali ini, saya akan membahas tentang Cara generate password acak di Laravel, untuk tutorial ini sangatlah mudah dan pendek.

Disini kita akan menghasilkan string acak, laravel memiliki sebuah pembantu class bernama Str::random($lenght). Kemudian untuk menyimpan password ke database kita dapat menggunakan hash. Jika kita gunakan keduanya maka akan seperti ini Hash::make($lenght).

Untuk mengasilkan password dengan panjang 6 atau 8 simbol kita dapat membuatnya seperti dibawah ini

$random_password = Hash::make(Str::random(8));

Tidak lupa untuk kita menambahkan

use Illuminate\Support\Facades\Hash; 
use Illuminate\Support\Str;

Jika sudah maka kata sandi yang akan di hasilkan seperti dibawah ini :

fnR360cx
2351sorbfo
HPgAic0
Dan jika digabungkan dengan Hash, maka akan seperti bawah ini :

$ 2y $ 10 $ E1.y.jjmr7ecmMAiwFF5MO6gXn0scLB2hvVBbx8cny.7REZ6xdDMW
$ 2y $ 10 $ pVOI0me9sLPRbyQnxNQrDursoJS4sE6ngu6VVOsMDF8qusqUPy
$ 10jvApqUPy $ 10jv $ 2 $ 2 ApqUPy $ 10j

Nah kurang lebih seperti itu Cara generate password acak di Laravel, jika kalian ada yang masih bingung silahkan bertanya pasa kolom komentar dibawah ini, semoga artikel ini bermanfaat.
Cara Hapus File Gambar dengan Laravel 8

Cara Hapus File Gambar dengan Laravel 8

Pada tutorial kali ini saya akan membahas tentang cara menghapus File Gambar dengan laravel. Sebelumnya kita sudah belajar membuat crud pada laravel 8 & upload file, namum kita belum menambahkan fungsi hapus untuk filenya sendiri.


Bagi anda yang belum punya project crud bisa langsung ikuti tutorialnya di samping ini Membuat CRUD dengan Laravel 8, untuk anda yang sudah ada project bisa langsung ikuti langkah-langkah dibawah ini 


Buka file controller anda kemudian pergi ke bagian paling bawah, jika anda menggunakan resource maka akan secara otomatis dibuatkan public function destroy($id). Jika belum ada silahkan buat saja sendiri seperti contoh dibawah ini :


public function destroy($id)
    {
        $product = Product::find($id);
        File::delete($product['file']);
        $product->delete();
        return back()->with('success', 'Data berhasil di hapus!');
    }


Koding diatas merupakan kodingan untuk menghapus data di database dan juga file pada folder public di aplikasi kita.


Jangan lupa untuk tambahkan class use Illuminate\Support\Facades\File; pada bagian atas kodingan kita.


Nah kurang lebih seperti itu ya Cara untuk menghapus file dengan laravel, jika anda masih bingung silahkan langsung bertanya di kolom komentar dibawah ini.

Cara Membuat Symlink Laravel pada cPanel Hosting Niagahoster

Cara Membuat Symlink Laravel pada cPanel Hosting Niagahoster

Apa itu Symbolic Link? mungkin ada yang belum tau atau paham tentang Symbolic Link, nah symbolic link adalah salah saru teknik untuk pemanggilan file atau folder, dari folder satu ke yang lain. Jika di sederhanakan seperti shortcut dalam pemanggilan file atau folder. 


Sebagai contoh jika kita menggunakan Framework Laravel, ada yang namanya folder storage yang isinya bisa gambar dan file lainnya dimana ada proses pemanggilan file pada folder tersebut. Perintah yang sering digunakan untuk memanggilnya adalah php artisan storage:link untuk langsung setting symlink-nya, namun hal tersebut tidak berlaku untuk beberapa penyedia hosting.


Oleh karena itu, disini saya akan membagikan pengalaman solusi yang saya lakukan ketika mendapatkan masalah seperti ini. Saya membuat symlink manual melalui SSH/Terminal cPanel.


Anda bisa ikuti langkah-langkah dibawah ini :


  1. Login dulu ke cPanel hosting kalian.
  2. Buka terminal kalian dulu

  3. Jika sudah silahkan masuk ke folder tujuan anda, sebagai contoh saya akan membuat link dari folder laravel/storage/app/public ke laravel/public kita akan gunakan perintah
    ln -s /home/u2458090/public_html/jeames.site/storage/app/public storage



    ln -s/home/usernamecpanel/public_html/namafolderaplikasikalian/storage/app/public storage
Nah cukup mudah bukan, jika anda masih bingung silahkan bertanya di kolom komentar dibawah ini. Semoa tutorial ini bermanfaat untuk kita semua.