AgusFikri.com: September 2018

Mengenal MVC Laravel + Project Sederhananya

Unknown September 19, 2018 2 comments

Assalamualaikum.Wr.WB
Hallo everyone :) , Masih dalam topik bahasan yang sama yaitu framework Laravel. Nah pada artikel kali ini kita akan mengenal yang namanya MVC, Apa sih itu MVC ? dan penerapan MVC dalam Laravel itu bagaimana ? simak penjelasan berikut ini.

Sekilas Tentang MVC

MVC adalah konsep arsitektur dalam pembangunan aplikasi berbasis web yang membagi aplikasi web menjadi 3 bagian besar. Yang mana setiap bagian memiliki tugas-tugas serta tanggung jawab masing-masing. Tiga bagian tersebut adalah: model, view dan controller.

Model: Bertugas untuk mengatur, menyiapkan, memanipulasi dan mengorganisasikan data (dari database) sesuai dengan instruksi dari controller.
View: Bertugas untuk menyajikan informasi (yang mudah dimengerti) kepada user sesuai dengan instruksi dari controller.
Controller: Bertugas untuk mengatur apa yang harus dilakukan model, dan view mana yang harus ditampilkan berdasarkan permintaan dari user. Namun, terkadang permintaan dari user tidak selalu memerlukan aksi dari model. Misalnya seperti menampilkan halaman form untuk registrasi user.

Penerapan MVC Pada Framework Laravel

Pada contoh project kali ini saya akan membuat Web Daftar Mahasiswa.

Langkah 1: Membuat Project Laravel

Pastikan anda sudah menginstall Composer terlebih dahulu.

[ Baca Juga : Mengenal Laravel dan Cara Penggunaannya ]

Buka cmd dan ketikan perintah :

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

Silahkan ganti mahasiswa dengan nama project laravel anda

jika proses installasi selesai silahkan menuju direktori project laravel anda dengan menegtikan perintah ini di cmd :
```
cd mahasiswa
```
Silahkan ganti mahasiswa dengan nama project laravel anda
Jika sudah coba jalankan project tersebut dengan mentikan perintah ini di cmd :
```
php artisan serve
```
Jika semua berjalan lancar silahkan buka di browser anda http://localhost:8000 maka akan tampil seperti tampilan di bawah ini.

Langkah 2 : Membuat Model

Model dalam laravel digunakan untuk database. Oleh karena itu silahkan anda buat terlebih dahulu databsenya di localhost/phpmyadmin.

Databse yang saya buat adalah Users dengan nama table mahasiswa. Setelah selesai membuat database silahkan buka file .env dan isikan data dari database anda.
DB_DATABASE = (Nama Database Anda)
DB_USERNAME = (Username Database Anda)
DB_PASSWORD = (Password Database Anda)

Silahkan buka project laravel anda dengan text editor terbaik anda (Disini saya menggunakan atom)

Di bagian file project silahkan buka direktori App. Disinilah letak file model Laravel (Secara default akan ada file model User.php)

Jika anda ingin membuat file model baru anda bisa memanfaatkan fungsi php artisan. Dengan cara ketikan perintah ini di cmd (Pastikan masih di dalam folder direktori project laravel anda)
```
php artisan make:model NamaModel
```
Ganti NamaModel menjadi nama dari model anda

Dalam tutorial kali ini saya menggunakan file model default yang sudah ada yakni User.php. Silahkan buka file tersebut (App\User.php) dan replace semua isi di User.php menjadi kode di bawah ini dan simpan.

<?php

namespace App;

use Illuminate\Notifications\Notifiable;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Database\Eloquent\SoftDeletes;

class User extends Authenticatable
{
  use SoftDeletes;

  protected $dates = ['deleted_at'];
  protected $table = 'mahasiswa';

  protected $guarded = ['created_at','updated_at','deleted_at'];
}

Maka File Model anda sudah bisa digunakan dan sudah terhubung dengan database.

Langkah 3 : Membuat View

View di dalam Laravel berada di direktori Resource\views\.. Anda bisa membuat tampilan untuk web anda di dalam folder ini.

Silahkan buat folder master di dalam direktori views. Dan buat file layout.blade.php di dalam folder master. (File ini berfungsi sebagai templating master dari web). Silahkan isi file layout.blade.php dengan kode di bawah ini.

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>@yield('title')</title>
    <meta name="description" content="@yield('description')">
    <link rel="stylesheet" href="/css/style.css">
</head>

<body>
    <header>
        <nav>
            <ul>
                <li><a href="{{route('home')}}">Beranda</a></li>
                <li><a class="daftar" href="{{route('mahasiswa')}}">Daftar Mahasiswa</a></li>
                <li><a class="tambah" href="{{route('tambah-mahasiswa')}}">Tambah Mahasiswa</a></li>
            </ul>
        </nav>
    </header>
    @yield('content')
    <footer>
        &copy; 2018 Pengembangan Aplikasi berbasis Web
    </footer>
</body>

</html>

Silahkan kembali ke folder views dan buat file index.blade.php , edit.blade.php , lihat-mahasiswa.blade.php , mahasiswa.blade.php , tambah.blade.php.

Silahkan isi index.blade.php dengan kode di bawah ini.

@extends('master.layout')
@section('title','Daftar Mahasiswa Universitas Islam Indonesia')
@section('description','Platform yang berisikan data mahasiswa Universitas Islam Indonesias')
@section('content')
<section id="Home">
<h1>Selamat Datang, Di Daftar Mahasiswa</h1>
<div class="garis-merah"></div>
<h1>Universitas Islam Indonesia</h1>
</section>
@endsection

Silahkan isi edit.blade.php dengan kode di bawah ini.

@extends('master.layout')
@section('title','Daftar Mahasiswa Universitas Islam Indonesia')
@section('description','Platform yang berisikan data mahasiswa Universitas Islam Indonesias')
@section('content')
<section id="Home">
<div class="card">
<form action="{{route('mahasiswa')}}/{{$mahasiswa->id}}" method="post">
    {{csrf_field()}}
  <div class="input-group">
    <label>Nim</label>
    <input type="number" name="nim" value="{{$mahasiswa->nim}}" required>
  </div>
  <div class="input-group">
    <label>Nama</label>
    <input type="text" name="nama" value="{{$mahasiswa->nama}}" required>
  </div>
  <div class="input-group">
    <label>Jurusan</label>
    <input type="text" name="jurusan" value="{{$mahasiswa->jurusan}}" required>
  </div>
  <div class="input-group">
    <label>Kelas</label>
    <input type="text" name="kelas" value="{{$mahasiswa->kelas}}" required>
  </div>
    <input type="hidden" name="_method" value="PUT">
  <input type="submit" name="submit" class="submit" value="SAVE">

</form>
</div>
</section>
@endsection

Silahkan isi lihat-mahasiswa.blade.php dengan kode di bawah ini.

@extends('master.layout')
@section('title','Daftar Mahasiswa Universitas Islam Indonesia')
@section('description','Platform yang berisikan data mahasiswa Universitas Islam Indonesias')
@section('content')
<section id="Home">
<table>
  <tr>
    <th>No</th>
    <th>Nim</th>
    <th>Nama</th>
    <th>Jurusan</th>
    <th>Kelas</th>
    <th>Action</th>
  </tr>
  <tr>
    <td>{{$mahasiswa->id}}</td>
    <td>{{$mahasiswa->nim}}</td>
    <td>{{$mahasiswa->nama}}</td>
    <td>{{$mahasiswa->jurusan}}</td>
    <td>{{$mahasiswa->kelas}}</td>
    <td>
      <a href="{{route('mahasiswa')}}/{{$mahasiswa->id}}/edit" class="Edit">Edit</a>
      <form action="{{route('mahasiswa')}}/{{$mahasiswa->id}}/delete" method="post">
        {{csrf_field()}}
        <input type="submit" name="submit" value="Delete">
        <input type="hidden" name="_method" value="DELETE">
      </form>
    </td>
  </tr>
</table>
</section>
@endsection

Silahkan isi mahasiswa.blade.php dengan kode di bawah ini.

@extends('master.layout')
@section('title','Daftar Mahasiswa Universitas Islam Indonesia')
@section('description','Platform yang berisikan data mahasiswa Universitas Islam Indonesias')
@section('content')
<section id="Home">
<table>
  <tr>
    <th>Nim</th>
    <th>Nama</th>
    <th>Jurusan</th>
    <th>Kelas</th>
    <th>Action</th>
  </tr>
@foreach ($mahasiswa as $mhs)
  <tr>
    <td>{{$mhs->nim}}</td>
    <td>{{$mhs->nama}}</td>
    <td>{{$mhs->jurusan}}</td>
    <td>{{$mhs->kelas}}</td>
    <td>
      <a href="{{route('mahasiswa')}}/{{$mhs->id}}" class="Lihat">Lihat</a> |
      <a href="{{route('mahasiswa')}}/{{$mhs->id}}/edit" class="Edit">Edit</a>
      <form action="{{route('mahasiswa')}}/{{$mhs->id}}/delete" method="post">
        {{csrf_field()}}
        <input class="delete" type="submit" class="Edit" name="submit" value="Delete">
        <input type="hidden" name="_method" value="DELETE">
      </form>
    </td>
  </tr>
@endforeach
</table>
</section>
@endsection

Silahkan isi tambah.blade.php dengan kode di bawah ini.

@extends('master.layout')
@section('title','Daftar Mahasiswa Universitas Islam Indonesia')
@section('description','Platform yang berisikan data mahasiswa Universitas Islam Indonesias')
@section('content')
<section id="Home">
<div class="card">
<form action="{{route('mahasiswa')}}" method="post">
    {{csrf_field()}}
  <div class="input-group">
    <label>Nim</label>
    <input type="number" name="nim" value="" required>
  </div>
  <div class="input-group">
    <label>Nama</label>
    <input type="text" name="nama" value="" required>
  </div>
  <div class="input-group">
    <label>Jurusan</label>
    <input type="text" name="jurusan" value="" required>
  </div>
  <div class="input-group">
    <label>Kelas</label>
    <input type="text" name="kelas" value="" required>
  </div>
    <input type="hidden" name="_method" value="PUT">
  <input type="submit" name="submit" class="submit" value="TAMBAH">

</form>
</div>
</section>
@endsection

Jangan Lupa untuk mempercantik tampilan silahkan buat file CSS nya. Silahkan buka direktori public\css\ dan buat style.css . Silahkan isi Style.css dengan kode di bawah ini.

body {
  margin-top: 100px;
  font-size: 24px;
  font-family: ARIAL;
}

header nav {
  width: 70%;
  margin: 0 auto;
  background: #7263be;
  height: auto;
  padding: 20px;
}
header nav ul {
  text-align: center;
}
header nav ul li {
  display: inline;
}
header nav ul li a {
  padding: 10px;
  color: white;
  line-height: 1.5;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  background-color: #da4b4b;
}

.daftar {
  background-color: #13b17a;
}

.tambah {
  background-color: #1855bb;
}

footer {
  font-size: 20px;
  color: white;
  background: #7263be;
  padding: 20px;
  text-align: center;
  width: 70%;
  margin: 0 auto;
}

#Home {
  margin: 0 auto;
  width: 70%;
  background: #dbdbdb;
  padding: 20px;
}
#Home h1 {
  text-align: center;
}
#Home .garis-merah {
  border-bottom: 5px solid #da4b4b;
  width: 50px;
  margin: 0 auto;
}

input[type=submit] {
  border-radius: 2px;
  background-color: #da4b4b;
  padding: 5px;
  color: white;
  text-decoration: none;
}

table {
  border: 2;
  width: 90%;
  margin: 0 auto;
}
table th {
  background: #7263be;
  color: white;
}
table td {
  text-align: center;
  background: white;
}
table td .Lihat {
  color: #13b17a;
  text-decoration: none;
}
table td .Edit {
  color: #7263be;
  text-decoration: none;
}
table td .Delete {
  color: #da4b4b;
  text-decoration: none;
}

.card {
  background-color: white;
  padding: 50px;
  margin: 0 auto;
  width: 500px;
}

.input-group {
  padding: 10px;
}
.input-group label {
  width: 100px;
  margin-right: 20px;
  clear: both;
}
.input-group input {
  padding: 7px;
}

.submit {
  background-color: #13b17a;
  padding: 5px;
  color: white;
}

FIle Views anda sudah bisa digunakan

Langkah 4: Membuat Controller

File Controller berada di direktori app\Http\Controllers .

Anda bisa memanfaatkan artisan untuk membuat Controller dengan memasukan perintah.
```
php artisan make:controller main
```
Ganti main dengan nama controller yang anda inginkan
Jika Sudah maka buka file Controller tersebut dan ganti semua isinya menjadi kode di bawah ini.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;

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

    public function mahasiswa()
    {
      $mahasiswa = User::all();
      return view('mahasiswa',['mahasiswa'=>$mahasiswa]);
    }

    public function show($id){
      $mahasiswa = User::find($id)->first();
      return view('lihat-mahasiswa',['mahasiswa'=>$mahasiswa]);
    }

    public function delete($id)
    {
      User::find($id)->delete();
      return redirect('mahasiswa');
    }

    public function tambah(){
      return view('tambah');
    }

    public function prosestambah(Request $request)
    {
      User::create([
        'nim' => $request->nim,
        'nama' => $request->nama,
        'jurusan' => $request->jurusan,
        'kelas' => $request->kelas
      ]);
      return redirect('mahasiswa');
    }

    public function edit($id)
    {
      $mahasiswa = User::find($id);
      return view('edit',['mahasiswa'=>$mahasiswa]);
    }

    public function prosesedit(Request $request,$id)
    {
      User::find($id)->update([
        'nim' => $request->nim,
        'nama' => $request->nama,
        'jurusan' => $request->jurusan,
        'kelas' => $request->kelas
      ]);
      return redirect('mahasiswa');
    }
}

Controller anda sudah bisa digunakan.

Langkah 5: Mengatur Route

Laravel memiliki sebuah fitur yang digunakan untuk mendaftarkan semua URI yang bisa diakses oleh pengguna aplikasi berdasarkan respon dari HTTP . Nah fitur inilah yang dinamakan route.

Route laravel berada di dalam folder Route\web.php . Silahkan buka file tersebut dan ganti seluruh isinya dengan kode di bawah ini.

<?php


Route::get('/','main@index') -> name('home');
Route::get('/mahasiswa','main@mahasiswa')->name('mahasiswa');
Route::delete('/mahasiswa/{id}/delete','main@delete')->name('delete-mahasiswa');
Route::get('/mahasiswa/tambah','main@tambah')->name('tambah-mahasiswa');
Route::put('/mahasiswa','main@prosestambah');
Route::get('/mahasiswa/{id}','main@show')->name('lihat-mahasiswa');
Route::get('/mahasiswa/{id}/edit','main@edit')->name('edit-mahasiswa');
Route::put('/mahasiswa/{id}','main@prosesedit');

Anda Juga Bisa Mengunduh Project Tersebut di github saya di https://github.com/ikrydev/daftar-mahasiswa/ atau klik link disini

Terima kasih.
Jika ada yang kurang paraham atau ingin ditanyakan silahkan komentar di bawah ini.
Wassalamualaikum.Wr.Wb.

Mengenal XAMPP dan Cara Menginstallnya

Unknown September 12, 2018 Comment

Assalamualaikum Wr.Wb

Di artikel sebelumnya membahas tentang pengenalan website, Nah tentu kita tidak cukup mengenal saja karena jika kenal tapi tidak mendalami itu kurang afdol :D. jadi, Dalam membangun sebuah website hal penting yang harus yaitu web server. Dalam tahap pengembangan tentu developers tidak langsung melakukan "coding" di server yang sudah publik alias sudah online, Tetapi menggunakan web server lokal. Nah, pada kesempatan kali ini kita akan mengenal apa itu XAMPP dan panduan dalam menginstallnya.

Sekilas Tentang Web Server

Web server adalah perangkat lunak yang berfungsi sebagai penerima permintaan yang dikirimkan melalui browser kemudian memberikan tanggapan permintaan dalam bentuk halaman situs web atau lebih umumnya dalam dokumen HTML.

Apa Itu XAMPP

XAMPP adalah perangkat yang menggabungkan tiga aplikasi kedalam satu paket,yaitu Apache,MySQL,dan PHPMyAdmin,Dengan Xampp pekerjaan anda sangat dimudahkan karena dapat menginstalasi dan mengkonfigurasi ketiga aplikasi tersebut dengan sekaligus dan otomatis

Fungsi XAMPP

Fungsi XAMPP sendiri adalah sebagai server yang berdiri sendiri (localhost), yang terdiri beberapa program antara lain : Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP sendiri merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP dan Perl. Program ini tersedia dalam GNU General Public License dan bebas, merupakan web server yang mudah untuk digunakan yang dapat menampilkan halaman web yang dinamis. Untuk mendapatkanya XAMPP anda dapat mendownload langsung dari web resminya. Dan berikut beberapa definisi program lainnya yang terdapat dalam XAMPP.

Panduan Install XAMPP

Langkah 1 : Mengunduh XAMPP

Hal yang perlu dilakukan adalah mengunduh XAMPP installer di situs XAMPP berikut ini.
Pilih installer yang sesuai dengan sistem operasi anda.

Langkah 2 : Menginstall XAMPP

Buka file installer yang telah diunduh. Setelah installer terbuka silahkan tekan next saja.

Pada tampilan selanjutnya akan muncul pilihan mengenai komponen mana dari XAMPP yang ingin dan tidak ingin Anda instal (optional) . Bagian penting (untuk menjalankan website) untuk anda pilih adalah Apache dan PHP . dan yang penting untuk centang jika anda ingin menggunakan database server adalah MySQL dan phpMyAdmin, untuk pilihan lainnya biarkan saja.

Berikutnya silakan pilih folder tujuan dimana XAMPP ingin Anda instal, pada tutorial ini pada direktori C:\xampp.

Pada halaman selanjutnya, akan ada pilihan apakah Anda ingin menginstal Bitnami untuk XAMPP, dimana nantinya dapat Anda gunakan untuk install WordPress, Drupal, dan Joomla seccara otomatis. Klik link yang tersedia jika ingin menginstall Bitnami (optional) dan klik next.

Maka proses instalasi XAMPP dimulai dan Setelah berhasil diinstal, akan muncul notifikasi untuk langsung menjalankan control panel. Silakan klik Finish.

Langkah 3 : Menjalankan XAMPP

Silakan buka aplikasi XAMPP kemudian klik tombol Start pada Apache dan MySQL. Jika berhasil dijalankan, Apache dan MySQL akan berwarna hijau seperti gambar di bawah ini.

Untuk melakukan pengecekan, silakan akses link berikut melalui browser Anda http://localhost/

Wassalamualaikum.Wr.Wb

AgusFikri.com

Blog Personal Yang Membahas Tentang Technology

Rabu, 19 September 2018

Mengenal MVC Laravel + Project Sederhananya

Sekilas Tentang MVC

Penerapan MVC Pada Framework Laravel

Rabu, 12 September 2018

Mengenal Laravel dan Cara Penggunaannya

Apa Itu Laravel ?

Panduan Install Laravel

Cara Install Framework Laravel

Cara Mengakses Project Laravel