Mudahnya membuat aplikasi CRUD menggunakan php LARAVEL 5.

membuat web dengan laravel untuk pemula

 

membuat web dengan laravel untuk pemula

Framework yang satu ini merupakan framework yang lagi tren 2018. Di buktikan dengan digunakan oleh beberapa vendor besar seperti gojek,grab dll , ya karena platform nya yang maksimal untuk sisi website.dengan kombinasi Node Package Module (NPM) membuat framework yang satu ini support dengan beberapa bahasa pemrograman, di sisi lain penggunaan framework ini sendiri sangat lambat dan tidak ekonomis (harus menggunakan vps).

 

APA saja yang di butuhkan.

  1. Xampp
  2. Composer
  3. Browser + internet
  4. Pengetahuan dasar pemrog PHP.
  5. Kopi + rokok.

 

Langkah pengerjaan

  1. Menginstal laravel
  2. Setup Virtual host.
  3. Set Up database.
  4. Set Up tampilan dan memulai
  5. Membuat action tambah data
  6. Membuat action edit data
  7. Membuat action hapus data

 

Disini saya akan memakai xampp 3.2.2 dengan OS win 10 dan di sini saya asumsikan composer telah terintall dengan baik pada komputer.

Ok langsung saja kita buat aplikasi yang akan kita buat.biar nggak ngawang.

 

  1. Install laravel
    • Buka CLI dengan akses administrator pada windows (tahan shift + ctrl dan klik cmd), ketikan perintah di bawah ini.
    • composer create-project --prefer-dist laravel/laravel tutorial "5.5.*"

      cara install laravel terbaru di pc

      2. SetUp Virtual Host.

  2. 1 buka c:\xampp\apache\conf\extra\http-vhosts.conf lalu tambahkan berikut , setelah di tambahkan,jangan lupa save.

 

<VirtualHost *:80>
    ServerAdmin webmaster@localhost
    DocumentRoot "C:/xampp/htdocs/tutorial/public"
    <Directory "C:/xampp/htdocs/tutorial/public">
        Options All
        AllowOverride All
        Order Allow,Deny
        Allow from all
    </Directory>
</VirtualHost>

 

Lalu buka browser dan ketikan localhost , maka hasilnya adalah seperti di bawah ini.

tampilan awal laravel 5

3. Set Up Database

Menyiapkan database untuk aplikasi yang akan di gunakan. Buka browser dan ketikan localhost/phpmyadmin

3.1 Membuat database tutorial_lara.

membuat database mysql di phpmyadmin

 

3.3. Setelah database terbuat,kita klik database tsb dan buat table sebagai media latihan seperti di bawah ini.

buat table di database mysql phpmyadmin

 

3.4 membuat data percobaan dalam table. Masukan sources code insert di bawah ini pada phpmyadmin.

INSERT INTO `users` (`id`, `first_name`, `last_name`) VALUES (NULL, 'bapak', 'budi'), (NULL, 'ibu', 'budi');

 

3.5 konfigurasi database dengan laravel.

3.4.1. buka file di c:\xampp\htdocs\tutorial\config\database.php pada text editor yang ada.

3.4.2. ganti line MYSQL database yang ada dan username sesuai dengan password dan username pada komputer Mu.

 

'mysql' => [
    'driver' => 'mysql',
    'host' => env('DB_HOST', '127.0.0.1'),
    'port' => env('DB_PORT', '3306'),
    'database' => env('DB_DATABASE', 'tutorial_lara'),
    'username' => env('DB_USERNAME', 'root'),
    'password' => env('DB_PASSWORD', ''),
    'unix_socket' => env('DB_SOCKET', ''),
    'charset' => 'utf8mb4',
    'collation' => 'utf8mb4_unicode_ci',
    'prefix' => '',
    'strict' => true,
    'engine' => null,
],

 

3.4.5 buka dan edit file pada file .env yang berada pada webroot (tutorial/) directory menjadi

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

4.Membuat Tampilan

Untuk membuat tampilan ini,akan saya gunakan bootstrap 4 sebagai media layouting awal pada tutorial ini.

Ok,saya rencakan akan membuat template seperti berikut ini.

membuat layout website bootstrap

 

Ok.setelah kita rencanakan designya langsung saja, kita buat source code nya dan konfigurasinya.

  • Buat folder template pada directory resources/views/
  • buat file pada directory resources/views/template/master.blade , lalu paste sources code di bawah ini.
 <!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>{{ $title_web }}</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
        <!—load css bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <!—load js bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <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/app.js') }}"></script>
        <!-- Styles -->
        <style>
           
        </style>
    </head>
    <body>
           @section('navbar')
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
          <a class="navbar-brand" href="#">sinar-soft.com</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
 </nav>
      
           @show
           <div class="container mt-2">
              @yield('content')
           </div>
    </body>
</html>

 

  • meng EDIT file welcome.blade yang tersedia secara default pada laravel pada directory resources/views/ dengan menambahkan sources code di bawah ini.
@extends('template.master')
@section('content')
        <div class="container mt-2">
            <a class="btn btn-primary float-right" href="{{ url('/adduser') }}">add</a>
            <table class="table table-border">
               <table class="table">
                  <thead>
                    <tr>
                      <th scope="col">#</th>
                      <th scope="col">First</th>
                      <th scope="col">Last</th>
                      <th scope="col">Handle</th>
                    </tr>
                  </thead>
                  <tbody>
                    <?php
                    foreach ($show_db as $user)  {
                        ?>
                    
                    <tr>
                      <th scope="row"><?php  echo $user->id; ?></th>
                      <td><?php  echo $user->first_name; ?></td>
                      <td><?php  echo $user->last_name; ?></td>
                      <td><a href="edituser/<?php echo $user->id ?>" class="btn btn-warning">Edit</a> <a href="deleteuser/<?php echo $user->id ?>" class="btn btn-danger">Delete</a></td>
                 </tr>
              <?php
                    }
                    ?>
                  </tbody>
            </table>
        </div>
@stop

 

mari buat controller dengan nama user dengan cara membuka cli (tahan shift + ctrl dan klik cmd ) dan pindah ke directory tutorial lalu ketikan

php artisan make:controller Users

membuat controller pada laravel 5

 

membuat source code pada user controller, buka file yang ada pada app/Http/Controller/user.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use DB;
class UserController extends Controller
{
  static protected $title = 'belajar laravel';

    public function index(){
    	$results = DB::select('select * from users');
    	return view('welcome',['title_web'=> self::$title ,'show_db' => $results , 'error' => null]);
    }
}

 

menyambungkan controller dan views menggunakan route , buka route pada folder routes/web.php dan edit source code dan ganti seperti di bawah ini , lalu simpan.

 

Route::get('/', 'Users@index');

Melihat hasil ,select .buka browser dan ketikan localhost.

hasil data select database pada laravel 5

  1. Membuat action tambah data.
    • Membuat link routes.
      • Pada tombol tags anchor buat link dengan link adduser,sehingga menjadi.
<a href=”adduser” class=”btn btn-primary” >add</a>
  • buat file route dengan sambungan pada controller users
Route::get('adduser', 'Users@form_add_user'); //route load tampilan
Route::post('action_add_user','Users@action_add_user'); //route aksi save data

 

  • membuat form input tampilan, buat file dengan nama blade.php lalu simpan di directory resources/views/ .
@extends('template.master')

@section('content')

        <h5>Tambah User</h5>
         <form action="/action_add_user" method="POST">

          <div class="form-group">
            <label for="exampleInputFirstname">First_name</label>
            <input type="text" class="form-control" aria-describedby="Firstname" name="firstname" placeholder="Firstname">
            <small lass="form-text text-muted">Firstname</small>
          </div>
          <div class="form-group">
            <label for="exampleInputFirstname">Last_name</label>
            <input type="text" class="form-control" aria-describedby="Lastname" name="lastname" placeholder="Lastname">
            <small lass="form-text text-muted">lastname</small>
          </div>
          
        <div class="form-group">
         <?php echo $error_msg ?>
          
        </div>
        <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
          <button type="submit" class="btn btn-primary float-right">Submit</button>
        </form>

        <a href="/">kembali</a>
@stop

 

menambahkan syntax load form dan action save pada file user yang terdapat pada controller , buka file app/http/users dan di dalam class tambahkan seperti berikut ini.

class UserController extends Controller
{	

  /*
  Di bawah fungsi index
  */

  public function form_add_user(){
  return view('form_add',['title_web'=> 'form tambah data' , 'error_msg' => null ]);
    	}
    /* masukan baris di bawah INI */
    public function action_add_user(Request $request){
    	//cek jika tidak kosong pada input firstname dan lastname
    	if(!empty($request->input('firstname')) && !empty($request->input('lastname'))){
    		$id = DB::table('users')->insertGetId(
          ['first_name' => $request->input('firstname'), 'last_name' => $request->input('lastname')]
      );
      if($id != null){
        $error_msg = '<div class="alert alert-success"><strong>Success!</strong> Indicates a successful or positive action.</div>';
    			
      }else{
        $error_msg = '<div class="alert alert-danger"><strong>Danger!</strong> Indicates a dangerous or potentially negative action.</div>';	
      }	
    	}else{
    		$error_msg = '<div class="alert alert-info"><strong>Info!</strong> Indicates a neutral informative change or action.</div>';
    	}
    		return view('form_add',['title_web'=> 'action tambah data' , 'error_msg' => $error_msg]);
    	
    }  
   /* sampai dengan sini */
}

 

melihat hasil form add yang telah di buat.

membuat form tambah data pada laravel 5

 

 

Untuk versi lengkapnya silakan download di sini

untuk hasil dari source code di sini

 

NOTE

Jika masih terdapat error padahal script sudah berubah maka dalam penggunaan laravel perlu mengubah . menghapus cache yang ada.

 

  1. membuka cli (tahan shift + ctrl dan klik cmd ) dan pindah ke directory tutorial lalu ketikan.
a.	php artisan view:clear
b.	php artisan route:clear
c.	php artisan config:clear
d.	php artisan cache:clear
e.	php artisan clear-compiled

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.