Instalasi Laravel 5.8 di MacOS Melalui Composer

Sebelum melakukan instalasi atau membuat project dengan framework laravel, pastikan composernya sudah di instalkan terlebih dahulu. Jika composernya sudah di instal maka kita bisa melanjutkan ke proses instalasi laravel.

Buka terminal untuk memasukan command line. Masukan perintah untuk mengecek composer sudah ada atau belum bisa di cek melalui perintah ini.

php composer.phar -v

Composer version 2.2.17 …

file composer.phar lokasi di sesuaikan ketika instalasi.

selanjutnya masukan perintah berikut untuk melakukan instalasi laravelnya

php composer.phar create-project --prefer-dist laravel/laravel laravel_master

Ketika di enter, proses download file laravel akan di eksesusi tunggu hingga proses selesai. Setelah selesai copy folder laravel_master ke htdocs. Kemudian di terminal masuk ke folder laravel_master nya. Jalankan pertintah php artisan serve.

php artisan serve
Laravel development server started: <http://127.0.0.1:8000>

Laravel development server started: http://127.0.0.1:8000, alamat di browser untuk bisa mengakses project laravel.

Untuk menghentikan php artisan server caranya dengan menekan tombol ctrl + c, dengan otomatis project laravel berhenti berjalan.

Database Mysql Tidak Mau Jalan di XAMPP Manager-oSX

Ketika mysql tidak mau running ketika di tekan start di Manager osx maka langkah yang bisa dilakukkan adalah dengan menambahkan setting di my.cnf di lokasi file

/Applications/XAMPP/xamppfiles/etc

Tambahkan setting di bawah ini

innodb_force_recovery = 1

Coba start kembali mysql server.

sudo /Applications/XAMPP/bin/mysql.server start 

Semoga bermanfaat. Wassalam.

Memperbaiki Error di MySQL Ketika Import SQL ERROR 2002 (HY000) at line in file:

Mungkin untuk anda yang mengalami tiba-tiba muncul pesan error ketika import sql dengan data yang banyak seperti kasus ini.

Query OK, 1 row affected (0.000 sec)

Query OK, 1 row affected (0.000 sec)

No connection. Trying to reconnect…
ERROR 2002 (HY000) at line 1773 in file: '/Users/macbookair/Downloads/barcode.sql': Can't connect to local MySQL server through socket '/Applications/XAMPP/xamppfiles/var/mysql/mysql.sock' (61)
ERROR at line 1773 in file: '/Users/macbookair/Downloads/barcode.sql': Can't connect to the server

Hal yang perlu di coba untuk memperbaikinya adalah dengan merubah konfigurasi dengan menambahkan setting baris berikut.

di my.cnf di lokasi file

/Applications/XAMPP/xamppfiles/etc

Tambahkan setting di bawah ini

innodb_buffer_pool_size = 256M

Setingan nilai 256M bisa di sesuaikan dengan kebutuhan.

Semoga bermanfaat wassalam.

Sticky Navbar Di Bootstrap

Membuat navbar sticky atau tetep muncul meskipun di scroll pada bagian tertentu. Berikut kode untuk membuatnya.

....    
    <!-- Bootstrap -->
    <link href="bootstrap-4.0.0/bootstrap.min.css" rel="stylesheet">
    <style>
    .sticky {
      position: fixed;
      top: 0;
      width: 100%;
    }
    .sticky + .content {
     padding-top: 90px;
    }
    </style>
    </head>
    
    <!-- Tag Body Navbar-->
    <div id="navbar" class="page-nav">
      <div class="container">
        <nav class="navbar navbar-expand-lg navbar-dark">
          <a class="navbar-brand" href="#">Endang Cahya Permana</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Produk</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Blog</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Kontak Kami</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap-4.0.0/bootstrap.min.js"></script>
    <!-- script javascript sticky navbar -->
    <script>
    window.onscroll = function() {myFunction()};

    var navbar = document.getElementById("navbar");
    var sticky = navbar.offsetTop;

    function myFunction() {
      if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
      } else {
        navbar.classList.remove("sticky");
      }
    }
    </script>

Semoga bermanfaat, wassalam.

Template Dasar Tag HTML dengan Bootstrap

Berikut adalah template dasar tag HTML yang bisa di pergunakan untuk membuat sebuah halaman web dengan komposisi bootstrap di dalamnya. Tidak perlu ketik cukup copy paste di file html atau 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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Kode diatas, bisa di dapatkan di web resmi bootstrap.

Laravel Menampilkan View Melalui Controller

Untuk lokasi penyimpanan file view terdapat pada direktori resources/views. Misal kita sudah membuat tampilan html file view index.blade.php, cara untuk pemanggilan di controllernya adalah dengan kode adalah sebagai berikut.

<?php

namespace App\Http\Controllers;

class IndexController extends Controller
{
    public function index()
    {
        // view
        return view('index');
    }

}

kemudian di bagian file routes/web.php.

Route::get('/', 'IndexController@index')->name('Home');

Untuk mengirimkan variabel ke view dari controller.

<?php

namespace App\Http\Controllers;

class IndexController extends Controller
{
    public function index()
    {
        // view
        return view('index', ['web_title' => 'Hallo Laravel']);
    }

}

Adapun penulisan di viewnya

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

    <body>
        <div class="flex-center position-ref full-height">
            <div class="content">
                {{ $web_title }}
            </div>
        </div>
    </body>
</html>

Laravel Koneksi ke Database

Edit pada bagian file .env di folder root seperti dibawah.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

Pada bagian file controller kode nya adalah berikut.

<?php

namespace App\Http\Controllers;

use Illuminate\Support\Facades\DB;

class WelcomeController extends Controller
{
    public function index()
    {
        $web_conf = DB::table('web_conf')
            ->get();

        $conf = array();
        foreach($web_conf as $key => $row) {
            echo $row->web_conf_value;
        }
    }

}

Laravel Cara Sederhana Menggunakan Controller

Langkah dasar dalam pembuatan program di laravel yaitu mengetahui cara penggunaan controller. berikut contoh pemanggunaan controller dan dengan kaitannya di router. File controller ini nantinya akan tersimpan di alamat app/Http/Controllers. Sedangkan untuk router akan tersimpan di alamat routers/web.php.

Contoh controller dengan nama file controller welcomeController.php.

class WelcomeController extends Controller
{
    public function index()
    {
    	echo "Halo";
    }
}

Untuk penulisan di routernya sebagai berikut. Buka file web.php dan masukan script.

Route::get('/', 'WelcomeController@index')->name('Home');

Installasi Composer di MacOS

Composer adalah dependency manager pada php (dependency artinya adalah ketergantungan). Ketergantungan maksudnya adalah project php yang di gunakan memerlukan library dari luar.

Adapun cara installasi di mac adalah dengan cara melalui terminal. masukan kode di bawah kedalam terminal, lalu eksekusi.

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === '55ce33d7678c5a611085589f1f3ddf8b3c52d662cd01d4ba75c0ee0459970c2200a51f492d557530c71c15d8dba01eae') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

Tunggu sampai proses selesai. Untuk mengecek versi masukan kode berikut.

php composer.phar -V

Semoga bermanfaat, wassalam.

Css Background Image Gradient

Background image gradient tidak selalu harus menggunakan image jpg atau png. Bisa juga memanfaatkan kode css, seperti pada contoh di bawah ini.

<html>
<head>
<title>Latihan CSS</title>
<style>
body {
    background-image : linear-gradient(to right, #ff5722, #ff9800);
}
</style>
</head>
<body>

</body>
</html>

Kode css yg di gunakan pada bagian ini

body {
    background-image : linear-gradient(to right, #ff5722, #ff9800);
}

Silahkan mencoba semoga berhasil, wassalam.