2019 | SigitPriadi

Home Archives for 2019

Selasa, 17 Desember 2019

Implementasi ReactJS dengan Laravel

Tutorial Web_Development lebah ganteng 08.57 Tidak ada komentar

Dipostingan kali ini, saya akan melanjutkan materi CRUD Laravel yang diimplementasikan dengan ReactJS.

Sebelum itu, ada beberapa yang harus dipersiapkan, antara lain:

1. Komputer kalian sudah terinstal Node.js

2. Komputer kalian sudah terinstal composer

3. Terminal

3. Teks Editor (saya menggunakan Visual Studio Code)

4. Standby internet, karena nanti ada beberapa library yang kita instal mungkin membutuhkan koneksi internet.

5. Komputer kalian sudah terinstal Xampp

Langsung saja kita buat projeknya.

1. Install node.js, jika belum, silahkan download di link https://nodejs.org/en/

2. Buat projek laravel kalian sesuai dengan direktori yang kalian inginkan dengan mengetik diterminal

composer create-project --prefer-dist laravel/laravel crud-react

3. Jika sudah selesai, masuk ke direktori laravel yang kalian buat dan ketik

composer require laravel/ui --dev

4. Silahkan menunggu karena ini membutuhkan waktu yang agak sedikit lama.

5. Jika sudah selesai, ketik

php artisan ui react

Setelah sukses, ketik

npm install

6. Setelah selesai, ketik

npm install axios –save

7. Buka 2 terminal, karena 1 terminal untuk npm dan satu lagi untuk laravel. Karena Visual Studio Code sudah ada terminal, maka saya cukup buka 1 terminal command prompt.

8. Buka xampp-controlpanel yang sudah kalian install, lalu start Apache dan MySql nya.

9. Buka web browser kalian, masuk ke localhost/phpmyadmin, kemudian buat database kalian. (disini saya membuat database dengan nama hr yang sudah ada tabel tabel nya).

Disini saya hanya menggunakan tabel employees, departments, dan jobs saja yang sudah terisi data-datanya.

10. Kemudian buka project kalian dieditor, masuk ke di direktori resource/views, lalu buat folder baru dengan nama

layouts

11. Kemudian didalam folder layouts, buat file baru dengan nama

app.blade.php

12. Isikan script berikut ini

	<!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>
	<link href="{{ asset('/css/app.css') }}" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

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

	<!-- Styles -->
	</head>
	<body>
	<div class="container">
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
	<a class="navbar-brand" href="#">Navbar</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
	<div class="navbar-nav">
	<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
	<a class="nav-item nav-link" href="/employees">Employees</a>
	</div>
	</div>
	</nav>
	</div>
	@yield('content')

	<script src="/js/app.js"></script>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
	</body>
	</html>

view raw app.blade.php hosted with ❤ by GitHub

13. Kemudian pada direktori resourse/views, ganti isi file welcome.blade.php menjadi seperti berikut ini.

	@extends('layouts.app')

	@section('content')
	<div class="container mt-5">
	<div class="container-fluid justify-content-center">
	<div class="row">
	<div class="jumbotron">
	<h1 class="display-4">Hello, world!</h1>
	<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
	<hr class="my-4">
	<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
	<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
	</div>
	</div>
	</div>
	</div>
	@endsection

view raw welcome.blade.php hosted with ❤ by GitHub

14. Kemudian pada direktori resourse/views, buat 3 file, yaitu :

create.blade.php

edit.blade.php

employees.blade.php

15. Pada create.blade.php ketikan script berikut ini

	@extends('layouts.app')

	@section('content')
	<div class="container-fluid justify-content-center">
	<div class="row">
	<div id="create" class="col-lg-12 mt-5"></div>
	</div>
	</div>
	@endsection

view raw create.blade.php hosted with ❤ by GitHub

16. Pada edit.blade.php ketikan script berikut ini

	@extends('layouts.app')

	@section('content')
	<div class="container-fluid justify-content-center">
	<div class="row">
	<div id="edit" class="col-lg-12 mt-5" data-id="{!! $id !!}"></div>
	</div>
	</div>
	@endsection

view raw edit.blade.php hosted with ❤ by GitHub

17. Pada employees.blade.php ketikan script berikut ini

	@extends('layouts.app')

	@section('content')
	<div class="container-fluid justify-content-center">
	<div class="row">
	<div id="app" class="col-lg-12 mt-5"></div>
	</div>
	</div>
	@endsection

view raw employees.blade.php hosted with ❤ by GitHub

18. Kemudian pada directory app/Http/Controllers, buat folder baru dengan nama Api

19. Buka terminal untuk laravel (saya cukup buka di Visual Studio Code), ketik script berikut ini untuk membuat controller dan model nya.

20. Kita akan mengisi script untuk model, Employee terlebih dahulu. Masuk kedirektori app, buka Employee.php isikan script berikut

	<?php

	namespace App;

	use Illuminate\Database\Eloquent\Model;

	class Employee extends Model
	{
	protected $primaryKey = 'employee_id';
	public $timestamps = false;
	protected $fillable = ['employee_id', 'first_name', 'last_name', 'email', 'phone_number', 'hire_date', 'job_id', 'salary', 'commission_pct', 'manager_id', 'department_id'];
	}

view raw Employee.php hosted with ❤ by GitHub

21. Masuk kedirektori app, buka Department.php isikan script berikut

	<?php

	namespace App;

	use Illuminate\Database\Eloquent\Model;

	class Department extends Model
	{
	protected $primaryKey = 'department_id';
	protected $fillable = ['department_id', 'department_name', 'manager_id', 'location_id'];
	}

view raw Department.php hosted with ❤ by GitHub

22. Masuk kedirektori app, buka Job.php isikan script berikut

	<?php

	namespace App;

	use Illuminate\Database\Eloquent\Model;

	class Job extends Model
	{
	// protected $primaryKey = 'job_id';
	protected $fillable = ['job_id', 'job_title', 'min_salary', 'max_salary'];
	}

view raw Job.php hosted with ❤ by GitHub

23. Maaf saya ada yg lupa, kita koneksikan dulu projek Laravel kita ke Database dengan menyeting file .env nya.

24. Yang saya kotakin dan garis bawahi, sesuaikan dengan set Database kalian.

25. Okey lanjut lagi

26. Buka terminal kalian, kita akan membuat controller yg mengontrol view nya saja. Ketik script berikut ini

27. Masuk ke direktori app/Http/Controllers, pada EmployeesController.php isikan script berikut ini

	<?php

	namespace App\Http\Controllers;

	use Illuminate\Http\Request;

	use App\Employee;
	use App\Job;
	use App\Department;

	class EmployeesController extends Controller
	{
	/**
	* Display a listing of the resource.
	*
	* @return \Illuminate\Http\Response
	*/
	public function index()
	{
	return view('employees');
	}

	/**
	* Show the form for creating a new resource.
	*
	* @return \Illuminate\Http\Response
	*/
	public function create()
	{
	return view('create');
	}

	/**
	* Store a newly created resource in storage.
	*
	* @param \Illuminate\Http\Request $request
	* @return \Illuminate\Http\Response
	*/
	public function store(Request $request)
	{
	//
	}

	/**
	* Display the specified resource.
	*
	* @param int $id
	* @return \Illuminate\Http\Response
	*/
	public function show($id)
	{
	//
	}

	/**
	* Show the form for editing the specified resource.
	*
	* @param int $id
	* @return \Illuminate\Http\Response
	*/
	public function edit($id)
	{
	return view ('edit', compact('id'));
	}

	/**
	* Update the specified resource in storage.
	*
	* @param \Illuminate\Http\Request $request
	* @param int $id
	* @return \Illuminate\Http\Response
	*/
	public function update(Request $request, $id)
	{
	//
	}

	/**
	* Remove the specified resource from storage.
	*
	* @param int $id
	* @return \Illuminate\Http\Response
	*/
	public function destroy($id)
	{
	//
	}
	}

view raw EmployeesController.php hosted with ❤ by GitHub

28. Masuk ke direktori app/Http/Controllers/Api, pada EmployeesController.php isikan script berikut ini

	<?php

	namespace App\Http\Controllers\Api;

	use App\Employee;
	use App\Job;
	use App\Department;
	use App\Http\Controllers\Controller;
	use Illuminate\Http\Request;

	class EmployeesController extends Controller
	{
	/**
	* Display a listing of the resource.
	*
	* @return \Illuminate\Http\Response
	*/
	public function index()
	{
	$employees = Employee::all();
	return response()->json($employees);
	}

	/**
	* Show the form for creating a new resource.
	*
	* @return \Illuminate\Http\Response
	*/
	public function create()
	{
	$employees = Employee::all();
	$jobs = Job::all();
	$departments = Department::all();
	return response()->json(
	array(
	'employees' => $employees,
	'jobs' => $jobs,
	'departments' => $departments,
	)
	);
	}

	/**
	* Store a newly created resource in storage.
	*
	* @param \Illuminate\Http\Request $request
	* @return \Illuminate\Http\Response
	*/
	public function store(Request $request)
	{
	$employees = Employee::orderBy('employee_id', 'DESC')->first();
	$employee_id = $employees->employee_id + 1;

	Employee::create([
	'employee_id' => $employee_id,
	'first_name' => $request->first_name,
	'last_name' => $request->last_name,
	'email' => $request->email,
	'phone_number' => $request->phone_number,
	'hire_date' => $request->hire_date,
	'job_id' => $request->job_id,
	'salary' => $request->salary,
	'commission_pct' => $request->commission_pct,
	'manager_id' => $request->manager_id,
	'department_id' => $request->department_id
	]);
	}

	/**
	* Display the specified resource.
	*
	* @param \App\Employee $employee
	* @return \Illuminate\Http\Response
	*/
	public function show(Employee $employee)
	{
	return response()->json($employee);
	}

	/**
	* Show the form for editing the specified resource.
	*
	* @param \App\Employee $employee
	* @return \Illuminate\Http\Response
	*/
	public function edit(Employee $employee)
	{
	$employees = Employee::all();
	$jobs = Job::all();
	$departments = Department::all();
	return response()->json(
	array(
	'employees' => $employees,
	'jobs' => $jobs,
	'departments' => $departments,
	)
	);
	}

	/**
	* Update the specified resource in storage.
	*
	* @param \Illuminate\Http\Request $request
	* @param \App\Employee $employee
	* @return \Illuminate\Http\Response
	*/
	public function update(Request $request, Employee $employee)
	{
	// return $request;
	Employee::where('employee_id', $employee->employee_id)
	->update([
	'first_name' => $request->first_name,
	'last_name' => $request->last_name,
	'email' => $request->email,
	'phone_number' => $request->phone_number,
	'hire_date' => $request->hire_date,
	'job_id' => $request->job_id,
	'salary' => $request->salary,
	'commission_pct' => $request->commission_pct,
	'manager_id' => $request->manager_id,
	'department_id' => $request->department_id
	]);
	return response()->json($request);
	}

	/**
	* Remove the specified resource from storage.
	*
	* @param \App\Employee $employee
	* @return \Illuminate\Http\Response
	*/
	public function destroy(Employee $employee)
	{
	// return response()->json($employee);
	Employee::destroy($employee->employee_id);
	// // return $employee;
	return response()->json('Employee Deleted Successfully!');
	}
	}

view raw EmployeesController.php hosted with ❤ by GitHub

29. Masuk ke direktori routes, pada api.php isikan script berikut ini

	<?php

	use Illuminate\Http\Request;

	/*
	\|--------------------------------------------------------------------------
	\| API Routes
	\|--------------------------------------------------------------------------
	\|
	\| Here is where you can register API routes for your application. These
	\| routes are loaded by the RouteServiceProvider within a group which
	\| is assigned the "api" middleware group. Enjoy building your API!
	\|
	*/

	Route::middleware('auth:api')->get('/user', function (Request $request) {
	return $request->user();
	});

	Route::resource('employees', 'Api\EmployeesController');

view raw api.php hosted with ❤ by GitHub

30. Masuk ke direktori routes, pada web.php isikan script berikut ini

	<?php

	/*
	\|--------------------------------------------------------------------------
	\| 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('/', function () {
	return view('welcome');
	});

	Route::resource('employees', 'EmployeesController');

view raw web.php hosted with ❤ by GitHub

31. Selanjutnya kita akan membuat file Javascriptnya. Buka direktori resource/js/components, buat 3 file baru yaitu : Create.js | Edit.js | Employee.js

32. Buka file Create.js yang sudah dibuat, lalu isikan script berikut ini

	import React from 'react';
	import ReactDOM from 'react-dom';

	export default class Create extends React.Component{
	constructor(){
	super();
	this.state = {
	first_name : '',
	last_name : '',
	email : '',
	phone_number : '',
	hire_date : '',
	job_id : '',
	salary : '',
	commission_pct : '',
	manager_id : '',
	department_id : ''

	}
	}

	componentDidMount() {
	let $this = this;

	axios.get('/api/employees/create').then(response => {
	$this.setState({
	jobs: response.data.jobs,
	employees: response.data.employees,
	departments: response.data.departments
	})
	}).catch(error => {
	console.log(error)
	})
	}

	handleFirstNameChange(e){
	this.setState({
	first_name: e.target.value
	})
	}
	handleLastNameChange(e){
	this.setState({
	last_name: e.target.value
	})
	}
	handleEmailChange(e){
	this.setState({
	email: e.target.value
	})
	}
	handlePhoneNumberChange(e){
	this.setState({
	phone_number: e.target.value
	})
	}
	handleHireDateChange(e){
	this.setState({
	hire_date: e.target.value
	})
	}
	handleJobIdChange(e){
	this.setState({
	job_id: e.target.value
	})
	}
	handleSalaryChange(e){
	this.setState({
	salary: e.target.value
	})
	}
	handleCommissionChange(e){
	this.setState({
	commission_pct: e.target.value
	})
	}
	handleManagerIdChange(e){
	this.setState({
	manager_id: e.target.value
	})
	}
	handleDepartmentIdChange(e){
	this.setState({
	department_id: e.target.value
	})
	}

	handleSubmit(e){
	e.preventDefault();
	console.log(this.state)

	axios.post('/api/employees', this.state).then(response => {
	window.location = "/employees"
	}).then(error => {
	console.log(error)
	})
	}

	render(){
	return(
	<div className="container col-5">
	<h2 className="mb-3">Add New Employee</h2>
	<form className="mb-5" onSubmit={this.handleSubmit.bind(this)}>
	<div className="form-group">
	<label htmlFor="first_name">First Name</label>
	<input type="text" className="form-control" id="first_name" name="first_name" value={this.state.first_name} onChange={this.handleFirstNameChange.bind(this)}/>
	</div>
	<div className="form-group">
	<label htmlFor="last_name">Last Name</label>
	<input type="text" className="form-control" id="last_name" name="last_name" value={this.state.last_name} onChange={this.handleLastNameChange.bind(this)}/>
	</div>
	<div className="form-group">
	<label htmlFor="email">Email</label>
	<input type="email" className="form-control" id="email" name="email" value={this.state.email} onChange={this.handleEmailChange.bind(this)}/>
	</div>
	<div className="form-group">
	<label htmlFor="phone_number">Phone Number</label>
	<input type="number" className="form-control" id="phone_number" name="phone_number" value={this.state.phone_number} onChange={this.handlePhoneNumberChange.bind(this)}/>
	</div>
	<div className="form-group">
	<label htmlFor="hire_date">Hire Date</label>
	<input type="date" className="form-control" id="hire_date" name="hire_date" value={this.state.hire_date} onChange={this.handleHireDateChange.bind(this)}/>
	</div>
	<div className="form-group">
	<label htmlFor="job_id">Job Name</label>
	<select className="custom-select" defaultValue={'DEFAULT'} name="job_id" onChange={this.handleJobIdChange.bind(this)}>
	<option value="DEFAULT">Open this select menu</option>
	{this.state.jobs && this.state.jobs.map(jobs =>
	<option value={jobs.job_id}>{jobs.job_id}</option>
	)}
	</select>
	</div>
	<div className="form-group">
	<label htmlFor="salary">Salary</label>
	<input type="number" className="form-control" id="salary" name="salary" value={this.state.salary} onChange={this.handleSalaryChange.bind(this)}/>
	</div>
	<div className="form-group">
	<label htmlFor="commission_pct">Commision Pct</label>
	<input type="number" className="form-control" id="commission_pct" name="commission_pct" step="any" min="0" max="100" value={this.state.commission_pct} onChange={this.handleCommissionChange.bind(this)}/>
	</div>
	<div className="form-group">
	<label htmlFor="manager_id">Manager Name</label>
	<select className="custom-select" defaultValue={'DEFAULT'} name="manager_id" onChange={this.handleManagerIdChange.bind(this)}>
	<option value="DEFAULT">Open this select menu</option>
	{this.state.employees && this.state.employees.map(employees =>
	<option value={employees.employee_id}>{employees.first_name} {employees.last_name}</option>
	)}
	</select>
	</div>
	<div className="form-group">
	<label htmlFor="department_id">Department Name</label>
	<select className="custom-select" defaultValue={'DEFAULT'} name="department_id" onChange={this.handleDepartmentIdChange.bind(this)}>
	<option value="DEFAULT">Open this select menu</option>
	{this.state.departments && this.state.departments.map(departments =>
	<option value={departments.department_id}>{departments.department_name}</option>
	)}
	</select>
	</div>
	<button type="submit" className="btn btn-primary float-right mb-5">Submit</button>
	</form>
	</div>
	)
	}
	}

	if(document.getElementById('create')){
	ReactDOM.render(<Create/>, document.getElementById('create'))
	}

view raw Create.js hosted with ❤ by GitHub

33. Buka file Edit.js yang sudah dibuat, lalu isikan script berikut ini

	import React from 'react';
	import ReactDOM from 'react-dom';

	export default class Edit extends React.Component{
	constructor(){
	super();
	this.state = {
	first_name : '',
	last_name : '',
	email : '',
	phone_number : '',
	hire_date : '',
	job_id : '',
	salary : '',
	commission_pct : '',
	manager_id : '',
	department_id : ''

	}
	}

	componentWillMount(){
	// let $this = this;
	let id = this.props.id

	axios.get("/api/employees/"+id).then(response => {
	console.log(response.data)

	var employee = response.data;

	this.setState({
	first_name : employee.first_name,
	last_name : employee.last_name,
	email : employee.email,
	phone_number : employee.phone_number,
	hire_date : employee.hire_date,
	job_id : employee.job_id,
	salary : employee.salary,
	commission_pct : employee.commission_pct,
	manager_id : employee.manager_id,
	department_id : employee.department_id
	})
	}).catch(error => {
	console.log(error)
	})
	}

	componentDidMount() {
	// let $this = this
	let id = this.props.id

	axios.get("/api/employees/"+id+"/edit").then(response => {
	this.setState({
	jobs: response.data.jobs,
	employees: response.data.employees,
	departments: response.data.departments
	})
	}).catch(error => {
	console.log(error)
	})
	}

	handleFirstNameChange(e){
	this.setState({
	first_name: e.target.value
	})
	}
	handleLastNameChange(e){
	this.setState({
	last_name: e.target.value
	})
	}
	handleEmailChange(e){
	this.setState({
	email: e.target.value
	})
	}
	handlePhoneNumberChange(e){
	this.setState({
	phone_number: e.target.value
	})
	}
	handleHireDateChange(e){
	this.setState({
	hire_date: e.target.value
	})
	}
	handleJobIdChange(e){
	this.setState({
	job_id: e.target.value
	})
	}
	handleSalaryChange(e){
	this.setState({
	salary: e.target.value
	})
	}
	handleCommissionChange(e){
	this.setState({
	commission_pct: e.target.value
	})
	}
	handleManagerIdChange(e){
	this.setState({
	manager_id: e.target.value
	})
	}
	handleDepartmentIdChange(e){
	this.setState({
	department_id: e.target.value
	})
	}

	handleSubmit(e){
	e.preventDefault();
	console.log(this.state)

	let id = this.props.id
	// console.log(id)

	axios.patch('/api/employees/'+id, this.state).then(response => {
	window.location = "/employees"
	console.log(response.request)
	}).then(error => {
	console.log(error)
	})
	}

	render(){
	return(
	<div className="container col-5">
	<h2 className="mb-3">Add New Employee</h2>
	<form className="mb-5" onSubmit={this.handleSubmit.bind(this)}>
	<div className="form-group">
	<label htmlFor="first_name">First Name</label>
	<input type="text" className="form-control" id="first_name" name="first_name" value={this.state.first_name \|\| ''} onChange={this.handleFirstNameChange.bind(this)}/>
	</div>
	<div className="form-group">
	<label htmlFor="last_name">Last Name</label>
	<input type="text" className="form-control" id="last_name" name="last_name" value={this.state.last_name \|\| ''} onChange={this.handleLastNameChange.bind(this)}/>
	</div>
	<div className="form-group">
	<label htmlFor="email">Email</label>
	<input type="email" className="form-control" id="email" name="email" value={this.state.email \|\| ''} onChange={this.handleEmailChange.bind(this)}/>
	</div>
	<div className="form-group">
	<label htmlFor="phone_number">Phone Number</label>
	<input type="number" className="form-control" id="phone_number" name="phone_number" value={this.state.phone_number \|\| ''} onChange={this.handlePhoneNumberChange.bind(this)}/>
	</div>
	<div className="form-group">
	<label htmlFor="hire_date">Hire Date</label>
	<input type="date" className="form-control" id="hire_date" name="hire_date" value={this.state.hire_date \|\| ''} onChange={this.handleHireDateChange.bind(this)}/>
	</div>
	<div className="form-group">
	<label htmlFor="job_id">Job Name</label>
	<select className="custom-select" value={this.state.job_id \|\| ''} name="job_id" onChange={this.handleJobIdChange.bind(this)}>
	<option value="DEFAULT">Open this select menu</option>
	{this.state.jobs && this.state.jobs.map(jobs =>
	<option value={jobs.job_id}>{jobs.job_id}</option>
	)}
	</select>
	</div>
	<div className="form-group">
	<label htmlFor="salary">Salary</label>
	<input type="number" className="form-control" id="salary" name="salary" value={this.state.salary \|\| ''} onChange={this.handleSalaryChange.bind(this)}/>
	</div>
	<div className="form-group">
	<label htmlFor="commission_pct">Commision Pct</label>
	<input type="number" className="form-control" id="commission_pct" name="commission_pct" step="any" min="0" max="100" value={this.state.commission_pct \|\| ''} onChange={this.handleCommissionChange.bind(this)}/>
	</div>
	<div className="form-group">
	<label htmlFor="manager_id">Manager Name</label>
	<select className="custom-select" value={this.state.manager_id \|\| ''} name="manager_id" onChange={this.handleManagerIdChange.bind(this)}>
	<option value="DEFAULT">Open this select menu</option>
	{this.state.employees && this.state.employees.map(employees =>
	<option value={employees.employee_id}>{employees.first_name} {employees.last_name}</option>
	)}
	</select>
	</div>
	<div className="form-group">
	<label htmlFor="department_id">Department Name</label>
	<select className="custom-select" value={this.state.department_id \|\| ''} name="department_id" onChange={this.handleDepartmentIdChange.bind(this)}>
	<option value="DEFAULT">Open this select menu</option>
	{this.state.departments && this.state.departments.map(departments =>
	<option value={departments.department_id}>{departments.department_name}</option>
	)}
	</select>
	</div>
	<button type="submit" className="btn btn-primary float-right mb-5">Update</button>
	</form>
	</div>
	)
	}
	}

	if(document.getElementById('edit')){
	var id = $("#edit").data("id");
	ReactDOM.render(<Edit id={id}/>, document.getElementById('edit'))
	}

view raw Edit.js hosted with ❤ by GitHub

34. Buka file Employee.js yang sudah dibuat, lalu isikan script berikut ini

	import React from 'react';
	import ReactDOM from 'react-dom';

	export default class Employee extends React.Component{
	constructor(){
	super();
	this.state = {
	data: []
	}
	}

	componentDidMount(){
	let $this = this;

	axios.get('/api/employees').then(response => {
	$this.setState({
	data: response.data
	})
	}).catch(error => {
	console.log(error)
	})
	}

	render(){
	return(
	<div>
	<h2>List Employee</h2>
	<a href="/employees/create" className="btn btn-primary mt-3 mb-3">Add Employee</a>
	<table className="table table-bordered">
	<thead>
	<tr>
	<th scope="col">#</th>
	<th scope="col">Name</th>
	<th scope="col">Email</th>
	<th scope="col">Phone Number</th>
	<th scope="col">Hire Date</th>
	<th scope="col">Job Id</th>
	<th scope="col">Salary</th>
	<th scope="col">Commission Pct</th>
	<th scope="col">Manager Id</th>
	<th scope="col">Department Id</th>
	<th scope="col">Action</th>
	</tr>
	</thead>
	<tbody>
	{this.state.data.map((employee, i) => (
	<EmployeeRow key={i} i={i} employee={employee} object={this}/>
	))}
	</tbody>
	</table>
	</div>
	)
	}
	}

	class EmployeeRow extends React.Component{
	deleteEmployee(employee, object){
	console.log(employee)

	var $this = object
	axios.delete('/api/employees/'+employee.employee_id).then(response => {

	const newState = $this.state.data.slice();
	newState.splice(newState.indexOf(employee), 1)
	$this.setState({
	data: newState
	})
	// console.log(response)

	}).catch(error =>{
	console.log(error)
	})
	}

	render(){
	return(
	<tr key={this.props.i}>
	<th scope="row">{this.props.i+1}</th>
	<td>{this.props.employee.first_name} {this.props.employee.last_name}</td>
	<td>{this.props.employee.email}</td>
	<td>{this.props.employee.phone_number}</td>
	<td>{this.props.employee.hire_date}</td>
	<td>{this.props.employee.job_id}</td>
	<td>{this.props.employee.salary}</td>
	<td>{this.props.employee.commission_pct}</td>
	<td>{this.props.employee.manager_id}</td>
	<td>{this.props.employee.department_id}</td>
	<td>
	<a href={"/employees/"+this.props.employee.employee_id+"/edit"} className="btn btn-primary">Edit</a> \|\| <a href="javascript:;" className="btn btn-danger" onClick={this.deleteEmployee.bind(this, this.props.employee, this.props.object)}>Delete</a>
	</td>
	</tr>
	)
	}
	}

	if(document.getElementById('app')){
	ReactDOM.render(<Employee/>, document.getElementById('app'))
	}

view raw Employee.js hosted with ❤ by GitHub

35. Buka direktori resource/js, buka file app.js lalu isikan script berikut ini

	/**
	* First we will load all of this project's JavaScript dependencies which
	* includes React and other helpers. It's a great starting point while
	* building robust, powerful web applications using React + Laravel.
	*/

	require('./bootstrap');

	window.axios = require('axios');

	/**
	* Next, we will create a fresh React component instance and attach it to
	* the page. Then, you may begin adding components to this application
	* or customize the JavaScript scaffolding to fit your unique needs.
	*/

	require('./components/Employee');
	require('./components/Create');
	require('./components/Edit');

view raw app.js hosted with ❤ by GitHub

36. Buka terminal untuk npm, jalankan perintah
npm run watch

37. Buka terminal untuk laravel, jalankan perintah
php artisan serve
kemudian copy alamat nya kebrowser

38. Selesai.

Cukup sekian di postingan kali ini, jika ada error, silahkan tulis dikolom komentar.
Oh iya, ini hanya program sederhana, mungkin kalian bisa mengembangkannya kembali :D
Selamat mencobaaa...
Sayonaraaaa ^_^

Kamis, 17 Oktober 2019

Implementasi MVC Lanjutan

Tutorial Web_Development lebah ganteng 10.07 Tidak ada komentar

Dipostingan kali ini saya akan melanjutkan materi dari postingan sebelumnya karena postingan sebelumnya belum terdapat model pada laravelnya.
Disini saya menggunakan sistem operasi Windows, MySql sebagai database servernya yang ada pada aplikasi xampp, dan menggunakan editor Visual Studio Code.
Saya asumsikan kalian sudah paham mengenai script-script dalam struktur database

1. Buat database dengan nama databasenya
hr

2. Buat 3 tables, yaitu jobs, departments dan employees dengan struktur seperti berikut ini

3. Create laravel baru, disini saya sudah menginstal laravel secara global maka saya cukup membuat preject laravel baru didalam file htdocsnya dengan cara menulis script di terminal seperti berikut ini:
c:\xampp\htdocs>laravel new laravel-hr

Jika kalian belum install laravel secara global, cukup membuat script berikut ini
c:\xampp\htdocs> composer cereate-project –prefer-dist laravel/laravel namaprojekkalian

dan tunggu sampai selesai

4. Kemudian buka terminal nya lagi, kita akan membuat controller dan model untuk table departments dengan menulis script berikut ini berdasarkan direktori file laravel kita :
c:\xampp\htdocs\unpas\laravel-hr>php artisan make:controller DepartmentsController -r -m Department

5. Kemudian buka terminal nya lagi, kita akan membuat controller dan model untuk table jobs dengan menulis script berikut ini berdasarkan direktori file laravel kita :
c:\xampp\htdocs\laravel-hr>php artisan make:controller JobsController -r -m Job

6. Kemudian buka terminal nya lagi, kita akan membuat controller dan model untuk table employees dengan menulis script berikut ini berdasarkan direktori file laravel kita :
c:\xampp\htdocs\laravel-hr>php artisan make:controller EmployeesController -r -m Employee

7. Kemudian buka editor kalian, selanjutnya kita akan lanjut ngoding file yg kita buat. Disini saya menggunakan Visual Studio Code

8. Pada folder resources>views buat 2 folder baru, yang pertama itu nama foldernya
layout ->ini akan berisi template semua file yang akan di panggil
yang kedua itu nama foldernya
employees ->ini akan berisi halaman yang berhubungan dengan data-data employees

9. Pada folder layout tadi, buat file baru dengan nama filenya main.blade.php

isi script berikut ini
<script src="https://gist.github.com/sigitprd23/ccc153e0bec9312997181eeee5f20b90.js"></script>

	<!doctype html>
	<html lang="en">

	<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

	<title>@yield('title')</title>
	</head>

	<body>
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
	<div class="container">
	<a class="navbar-brand" href="{{ url('/') }}">MyData</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
	<div class="navbar-nav">
	<a class="nav-item nav-link active" href="{{ url('/') }}">Home</a>
	<a class="nav-item nav-link" href="{{ url('/about') }}">About</a>
	<a class="nav-item nav-link" href="{{ url('/employees') }}">Employees</a>
	<a class="nav-item nav-link" href="{{ url('/departments') }}">Departemens</a>
	</div>
	</div>
	</div>
	</nav>

	@yield('container')

	<!-- Optional JavaScript -->
	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
	</body>

	</html>

view raw sigit--layout--main.blade.php hosted with ❤ by GitHub

10. Selanjutnya buat 2 file baru yaitu index.blade.php dan about.blade.php didalam folder resources>views

11. Pada index.blade.php tulis script berikut ini
<script src="https://gist.github.com/sigitprd23/f5c65767ff3b67cd05d7bae3f4e9a9c0.js"></script>

	@extends('layout/main')

	@section('title', 'Web Programming Laravel')

	@section('container')
	<div class="container">
	<div class="row">
	<div class="col-10">
	<h1 class="mt-2">Hello, world!</h1>
	</div>
	</div>
	</div>
	@endsection

view raw sigit--views--index.blade.php hosted with ❤ by GitHub

12. Pada about.blade.php tulis script berikut ini
<script src="https://gist.github.com/sigitprd23/a55a964abb30e9fb8eb8b91566ab222a.js"></script>

	@extends('layout/main')

	@section('title', 'About-Web Programming Laravel')

	@section('container')
	<div class="container">
	<div class="row">
	<div class="col-10">
	<h1 class="mt-2">Hello, {{$nama}}!</h1>
	</div>
	</div>
	</div>
	@endsection

view raw sigit--views--about.blade.php hosted with ❤ by GitHub

13. Selanjutnya buka terminal kalian, kita akan membuat controller baru untuk sebagai pengontrol halaman index.blade.php dan about.blade.php dengan mengetik script berikut ini diterminal kalian

c:\xampp\htdocslaravel-hr>php artisan make:controller PagesController

14. Selanjutnya buka file PagesController yang berada didalam folder app>Http>Controllers>PagesController

15. Kemudian isi script berikut ini

	<?php

	namespace App\Http\Controllers;

	use Illuminate\Http\Request;

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

	public function about()
	{
	return view('about', ['nama' => 'Sigit Priadi']);
	}
	}

view raw sigit--PagesController hosted with ❤ by GitHub

16. Selanjutnya buka file web.php yang berada di folder routes>web.php

17. Isi script berikut ini

	<?php

	/*
	\|--------------------------------------------------------------------------
	\| 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('/', 'PagesController@home');
	Route::get('/about', 'PagesController@about');

view raw sigit--routes hosted with ❤ by GitHub

18. Kemudian buat tiga file baru didalam folder employees yaitu create.blade.php, index.blade.php, dan show.blade.php

19. Pada file resources>views>employees>index.blade.php

tulis script berikut ini
<script src="https://gist.github.com/sigitprd23/50b22aca95470f946e268d8a0ae202e9.js"></script>

	@extends('layout/main')

	@section('title', 'List Employees')

	@section('container')
	<div class="container">
	<div class="row">
	<div class="col-6">
	<h1 class="mt-3 mb-2">List Employees</h1>

	<a href="/employees/create" class="btn btn-primary my-3">Add Data</a>

	<br>
	@if (session('status'))
	<div class="alert alert-success">
	{{ session('status') }}
	</div>
	@endif

	<ul class="list-group">
	@foreach( $employees as $kry )
	<li class="list-group-item d-flex justify-content-between align-items-center">
	{{ $kry->first_name }} {{ $kry->last_name}}
	<a href="/employees/{{$kry->employee_id}}" class="badge badge-info">Detail</a>
	</li>
	@endforeach
	</ul>
	</div>
	</div>
	</div>
	@endsection

view raw employees--index.blade.php hosted with ❤ by GitHub

20. Kemudian buka file EmployeesController yang berada di folder app>Http>Controllers>EmployeesController

kemudian pada method index tuliskan script berikut ini

21. Pada file web.php yang berada di folder routes>web.php

tambahkan script berikut ini

22. Selanjutnya kita akan mengkoneksikan database kita di project laravel. Disini saya menggunakan database server MySql dari xampp

23. Pada file .env

pada baris ke 12, ganti DB_DATABASE dengan nama databsenya

24. Selanjutnya buka file create.blade.php yang berada di folder resources>views>employees>create.blade.php

isikan script berikut ini

	@extends('layout/main')

	@section('title', 'Form Create Employee')

	@section('container')
	<div class="container">
	<div class="row">
	<div class="col-8">
	<h1 class="mt-3 mb-4">Form Create Employee</h1>

	<form method="post" action="/employees">
	@csrf
	<div class="form-group">
	<label for="employee_id">Employe Id</label>
	<input type="number" class="form-control @error('employee_id') is-invalid @enderror" id="employee_id" placeholder="" name="employee_id" value="{{$employees->max('employee_id')+1}}" readonly="false">
	@error('employee_id')
	<div class="invalid-feedback">{{ $message }}</div>
	@enderror
	</div>
	<div class="form-group">
	<label for="first_name">First Name</label>
	<input type="text" class="form-control @error('first_name') is-invalid @enderror" id="first_name" placeholder="" name="first_name">
	@error('first_name')
	<div class="invalid-feedback">{{ $message }}</div>
	@enderror
	</div>
	<div class="form-group">
	<label for="last_name">Last Name</label>
	<input type="text" class="form-control @error('last_name') is-invalid @enderror" id="last_name" placeholder="" name="last_name">
	@error('last_name')
	<div class="invalid-feedback">{{ $message }}</div>
	@enderror
	</div>
	<div class="form-group">
	<label for="email">Email</label>
	<input type="email" class="form-control @error('email') is-invalid @enderror" id="email" placeholder="" name="email">
	@error('email')
	<div class="invalid-feedback">{{ $message }}</div>
	@enderror
	</div>
	<div class="form-group">
	<label for="phone_number">Phone Number</label>
	<input type="text" class="form-control @error('phone_number') is-invalid @enderror" id="phone_number" placeholder="" name="phone_number">
	@error('phone_number')
	<div class="invalid-feedback">{{ $message }}</div>
	@enderror
	</div>
	<div class="form-group">
	<label for="hire_date">Hire Date</label>
	<input type="date" class="form-control @error('hire_date') is-invalid @enderror" id="hire_date" placeholder="" name="hire_date">
	@error('hire_date')
	<div class="invalid-feedback">{{ $message }}</div>
	@enderror
	</div>
	<div class="form-group">
	<label for="job_id">Job Id</label>
	<select class="form-control @error('job_id') is-invalid @enderror" id="job_id" name="job_id">
	@foreach( $jobs as $job )
	<option value="{{ $job->job_id }}">{{ $job->job_title }}</option>
	@endforeach
	</select>
	@error('job_id')
	<div class="invalid-feedback">{{ $message }}</div>
	@enderror
	</div>
	<div class="form-group">
	<label for="salary">Salary</label>
	<input type="number" class="form-control @error('salary') is-invalid @enderror" id="salary" placeholder="" name="salary">
	@error('salary')
	<div class="invalid-feedback">{{ $message }}</div>
	@enderror
	</div>
	<div class="form-group">
	<label for="commission_pct">Commission Pct</label>
	<input type="number" class="form-control" id="commission_pct" placeholder="" name="commission_pct">
	</div>
	<div class="form-group">
	<label for="manager_id">Manager Id</label>
	<select class="form-control @error('manager_id') is-invalid @enderror" id="manager_id" name="manager_id">
	@foreach( $employees as $emp )
	<option value="{{ $emp->employee_id }}">{{ $emp->employee_id }}</option>
	@endforeach
	</select>
	@error('manager_id')
	<div class="invalid-feedback">{{ $message }}</div>
	@enderror
	</div>
	<div class="form-group">
	<label for="department_id">Department Id</label>
	<select class="form-control @error('department_id') is-invalid @enderror" id="department_id" name="department_id">
	@foreach( $departments as $dpt )
	<option value="{{ $dpt->department_id }}">{{ $dpt->department_name }}</option>
	@endforeach
	</select>
	@error('department_id')
	<div class="invalid-feedback">{{ $message }}</div>
	@enderror
	</div>
	<button type="submit" class="btn btn-primary">Add Data</button>
	</form>

	</div>
	</div>
	</div>
	@endsection

view raw employees--create.blade.php hosted with ❤ by GitHub

25. Kemudian buka file EmployeesController yang berada di folder app>Http>Controllers>EmployeesController

tambahkan script berikut ini pada method create dan store

26. Pada file web.php yang berada di folder routes>web.php

tambahkan script berikut ini

27. Selanjutnya buka model Employee yang berada di dalam folder app>Employee.php

isikan script berikut ini

28. Selanjutnya buka file show.blade.php yang berada di folder resources>views>employees>show.blade.php

isikan script berikut ini

	@extends('layout/main')

	@section('title', 'Daftar Karyawan')

	@section('container')
	<div class="container">
	<div class="row">
	<div class="col-6">
	<h1 class="mt-3 mb-4">Detail Employees</h1>
	<div class="card">
	<div class="card-body">
	<h5 class="card-title">{{ $employee->first_name }} {{ $employee->last_name }}</h5>
	<h6 class="card-subtitle mb-2 text-muted">Employee Id : {{ $employee->employee_id }}</h6>
	<p class="card-text">Email : {{ $employee->email }}</p>
	<p class="card-text">Phone Number : {{ $employee->phone_number }}</p>
	<p class="card-text">Hire Date : {{ $employee->hire_date }}</p>
	<p class="card-text">Job Id : {{ $employee->job_id }}</p>
	<p class="card-text">Salary : {{ $employee->salary }}</p>
	<p class="card-text">Commission Pct : {{ $employee->commission_pct }}</p>
	<p class="card-text">Manager Id : {{ $employee->manager_id }}</p>
	<p class="card-text">Department Id : {{ $employee->department_id }}</p>

	<a href="/employees" class="card-link">Back</a>
	</div>
	</div>
	</div>
	</div>
	</div>
	@endsection

view raw employees--show.blade.php hosted with ❤ by GitHub

29. Kemudian buka file EmployeesController yang berada di folder app>Http>Controllers>EmployeesController

tambahkan script berikut ini pada method show

30. Pada file web.php yang berada di folder routes>web.php

tambahkan script berikut ini

31. Selanjutnya save all

32. Kemudian buka terminal kalian, jalankan

c:\xampp\htdocs\laravel-hr> php artisan serve

copy alamat servernya dan paste kan di browse kalian lalu jalankan

33. Silahkan kalian mencoba mengiput data baru. Oh iya, pada tables departments dan jobs, kalian isi terlebih dahulu data-datanya, agar memudahkan menginout data employeesnya pada web kalian.

Cukup sekian dulu ya, postingan kali ini.

Sampai jumpa di postingan selanjutnya and sayonaraaa.. ^_^

**tambahan, jika ada yg tidak jelas atau script ada yg kosong, kemungkinan githubnya tidak muncul

Langganan: Postingan ( Atom )

SigitPriadi

Selasa, 17 Desember 2019

Implementasi ReactJS dengan Laravel

Kamis, 17 Oktober 2019

Implementasi MVC Lanjutan

Formulir Kontak

Pos Terpopuler

Category

Arsip