Laravel Tabel Locations

Kelompok 6
Anggota :
- Abril Dhea
- Robby Prawira
- Sonia Putri
- Vera Kristina
Laravel Tabel Locations

1. Langkah - Langkah Import SQL
1.1. Siapkan file sql
1.2. Nyalakan Apache dan Mysql pada XAMPP
Lalu masuk ke dalam phpMyAdmin dengan link http://localhost/phpmyadmin/ atau

klik Admin pada MySQL
1.3. Membuat database baru

Jika belum membuat database untuk impor, buat terlebih dahulu
1.4. Masuk ke pilihan Impor
Silahkan pilih database mana yang ingin dimasuki file .sql. Intinya database ini nanti
akan menyimpan database yang telah di eksport sebelumnya (file.sql).
Setelah memilih database, silahkan klik Menu Import. Lalu klik Choose File untuk memilih
file .sql. Kemudian scroll ke bawah dan klik Kirim.
1.5. Verifikasi Proses Import Berhasil
Waktu proses import bergantung pada besar file database Anda. Silakan tunggu
hingga muncul pesan berhasil seperti gambar di bawah ini.
Jika terdapat error, silakan cek kembali sesuai petunjuk yang telah kami berikan.
2. Langkah langkah installasi laravel project
2.1. Masuk Command Prompt
Setelah Install composer, Langkah pertama dalam install Laravel adalah masuk Command
Prompt. Caranya adalah klik Win+R lalu ketik cmd dan klik OK
2.2. Masuk ke Folder XAMPP

Sebelum melakukan instalasi Laravel, arahkan Command Prompt atau terminal menuju
direktori file server. Lokasi file server pada XAMPP secara default berada pada direktori
xampp/htdocs. Masukan perintah ini pada jendela Command Prompt untuk masuk ke
direktori htdocs.
2.3. Mulai Proses Install Laravel
Selanjutnya jika sudah masuk direktori htdocs, Anda harus membuat request untuk
mengambil (serta menginstall) file Laravel yang telah disediakan dalam repositori Github.
Gunakan perintah ini untuk melakukan request:
composer create-project --prefer-dist laravel/laravel nama_projectmu
Jika perintah telah berhasil dimasukkan, Composer akan mulai melakukan proses
pengambilan data serta instalasi Laravel ke dalam direktori yang telah Anda tentukan.
Pastikan bahwa koneksi internet dalam keadaan stabil agar tidak terjadi gangguan pada saat
proses pengambilan data Laravel.
2.4. Cek Instalasi Laravel di Web Browser
Setelah proses download file Laravel selesai, nantinya akan ada folder baru pada direktori
file server dengan nama sesuai nama project yang telah Anda tentukan sebelumnya pada
folder /xampp/htdocs.
Untuk memastikan bahwa Laravel sukses terinstall dan siap untuk digunakan, arahkan
Command Prompt atau Terminal menuju direktori yang telah Anda buat sebelumnya. Lalu,
masukkan perintah berikut ke dalam Command Prompt atau Terminal:
Php artisan serve
Jika muncul tulisan Laravel development server started pada Command Prompt atau Terminal,
langkah selanjutnya adalah membuka link yang telah disediakan oleh Laravel. Secara
default, Anda akan diarahkan menuju alamat server,yaitu 127.0.0.1:8000. Nantinya, akan
muncul tampilan homepage dengan tulisan Laravel di bagian tengah seperti pada gambar
di bawah ini:
Jika muncul seperti pada tampilan di atas, proses instalasi Laravel telah berhasil.
3. Setting Template Bootstrap
Sebelum setting template bootstrap pastikan anda telah menginstal laravelnya.
Ini adalah folder laravel yang telah di install
3.1. Langkah pertama yang kita lakukan adalah copy atau pindahkan folder bootsrap,
css, js, plugins, scss template ample admin lite master ke dalam folder public sbb :
3.2. Setelah itu Buat sebuah file di folder layouts yang ada didalam folder views dan
beri nama app2.blade.php file ini berfungsi sebagai layouts dari templates yang akan
kita gunakan.
Lalu anda copykan seluruh isi dari file dashboard.html yang dapat anda temukan di
template ample admin lite master ke app2.blade.php.
<!DOCTYPE html>
<html dir="ltr" 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">
<meta name="keywords"
content="wrappixel, admin dashboard, html css dashboard, web dashboard, bootstrap 5 admin, bootstra
p 5, css3 dashboard, bootstrap 5 dashboard, Ample lite admin bootstrap 5 dashboard, frontend, responsive b
ootstrap 5 admin template, Ample admin lite dashboard bootstrap 5 dashboard template">
<meta name="description"
content="Ample Admin Lite is powerful and clean admin dashboard template, inpired from Bootstrap Fr
amework">
<meta name="robots" content="noindex,nofollow">
<title>Ample Admin Lite Template by WrapPixel</title>
<link rel="canonical" href="https://www.wrappixel.com/templates/ample-admin-lite/" />

<link rel="icon" type="image/png" sizes="16x16" href="plugins/images/favicon.png">

<link href="plugins/bower_components/chartist/dist/chartist.min.css" rel="stylesheet">
<link rel="stylesheet" href="plugins/bower_components/chartist-plugin-tooltips/dist/chartist-plugin-
tooltip.css">

<link href="css/style.min.css" rel="stylesheet">
</head>
<body>



<div class="preloader">
<div class="lds-ripple">
<div class="lds-pos"></div>
</div>
</div>



<div id="main-wrapper" data-layout="vertical" data-navbarbg="skin5" data-sidebartype="full"
data-sidebar-position="absolute" data-header-position="absolute" data-boxed-layout="full">



<header class="topbar" data-navbarbg="skin5">
<nav class="navbar top-navbar navbar-expand-md navbar-dark">
<div class="navbar-header" data-logobg="skin6">



<a class="navbar-brand" href="dashboard.html">

<b class="logo-icon">

<img src="plugins/images/logo-icon.png" alt="homepage" />
</b>


<span class="logo-text">

<img src="plugins/images/logo-text.png" alt="homepage" />
</span>
</a>






<a class="nav-toggler waves-effect waves-light text-dark d-block d-md-none"
href="javascript:void(0)"><i class="ti-menu ti-close"></i></a>
</div>



<div class="navbar-collapse collapse" id="navbarSupportedContent" data-navbarbg="skin5">




<ul class="navbar-nav ms-auto d-flex align-items-center">



<li class=" in">
<form role="search" class="app-search d-none d-md-block me-3">
<input type="text" placeholder="Search..." class="form-control mt-0">
<a href="" class="active">
<i class="fa fa-search"></i>
</a>
</form>
</li>



<li>
<a class="profile-pic" href="#">
<img src="plugins/images/users/varun.jpg" alt="user-img" width="36"
class="img-circle"><span class="text-white font-medium">Steave</span></a>
</li>


</ul>
</div>
</nav>
</header>






<aside class="left-sidebar" data-sidebarbg="skin6">

<div class="scroll-sidebar">

<nav class="sidebar-nav">
<ul id="sidebarnav">

<li class="sidebar-item pt-2">
<a class="sidebar-link waves-effect waves-dark sidebar-link" href="dashboard.html"
aria-expanded="false">
<i class="far fa-clock" aria-hidden="true"></i>
<span class="hide-menu">Dashboard</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link waves-effect waves-dark sidebar-link" href="profile.html"
<i class="fa fa-user" aria-hidden="true"></i>
<span class="hide-menu">Profile</span>
</a>
</li>
<a class="sidebar-link waves-effect waves-dark sidebar-link" href="basic-table.html"
<i class="fa fa-table" aria-hidden="true"></i>
<span class="hide-menu">Basic Table</span>
</a>
</li>
<a class="sidebar-link waves-effect waves-dark sidebar-link" href="fontawesome.html"
<i class="fa fa-font" aria-hidden="true"></i>
<span class="hide-menu">Icon</span>
</a>
</li>
<a class="sidebar-link waves-effect waves-dark sidebar-link" href="map-google.html"
<i class="fa fa-globe" aria-hidden="true"></i>
<span class="hide-menu">Google Map</span>
</a>
</li>
<a class="sidebar-link waves-effect waves-dark sidebar-link" href="blank.html"
<i class="fa fa-columns" aria-hidden="true"></i>
<span class="hide-menu">Blank Page</span>
</a>
</li>
<a class="sidebar-link waves-effect waves-dark sidebar-link" href="404.html"
<i class="fa fa-info-circle" aria-hidden="true"></i>
<span class="hide-menu">Error 404</span>
</a>
</li>
<li class="text-center p-20 upgrade-btn">
<a href="https://www.wrappixel.com/templates/ampleadmin/"
class="btn d-grid btn-danger text-white" target="_blank">
Upgrade to Pro</a>
</li>
</ul>
</nav>

</div>

</aside>






<div class="page-wrapper">



<div class="page-breadcrumb bg-white">
<div class="row align-items-center">
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
<h4 class="page-title">Dashboard</h4>
</div>
<div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
<div class="d-md-flex">
<ol class="breadcrumb ms-auto">
<li><a href="#" class="fw-normal">Dashboard</a></li>
</ol>
<a href="https://www.wrappixel.com/templates/ampleadmin/" target="_blank"
class="btn btn-danger d-none d-md-block pull-right ms-3 hidden-xs hidden-sm waves-
effect waves-light text-white">Upgrade
to Pro</a>
</div>
</div>
</div>

</div>






<div class="container-fluid">



<div class="row justify-content-center">
<div class="col-lg-4 col-md-12">
<div class="white-box analytics-info">
<h3 class="box-title">Total Visit</h3>
<ul class="list-inline two-part d-flex align-items-center mb-0">
<li>
<div id="sparklinedash"><canvas width="67" height="30"
style="display: inline-block; width: 67px; height: 30px; vertical-align: top;
"></canvas>
</div>
</li>
<li class="ms-auto"><span class="counter text-success">659</span></li>
</ul>
</div>
</div>
<h3 class="box-title">Total Page Views</h3>
<li>
<div id="sparklinedash2"><canvas width="67" height="30"
"></canvas>
</div>
</li>
<li class="ms-auto"><span class="counter text-purple">869</span></li>
</ul>
</div>
</div>
<h3 class="box-title">Unique Visitor</h3>
<li>
"></canvas>
</div>
</li>
<li class="ms-auto"><span class="counter text-info">911</span>
</li>
</ul>
</div>
</div>
</div>
============================================================== -->


<footer class="footer text-center"> 2021 © Ample Admin brought to you by <a
href="https://www.wrappixel.com/">wrappixel.com</a>
</footer>



</div>



</div>






<script src="plugins/bower_components/jquery/dist/jquery.min.js"></script>

<script src="bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/app-style-switcher.js"></script>
<script src="plugins/bower_components/jquery-sparkline/jquery.sparkline.min.js"></script>

<script src="js/waves.js"></script>

<script src="js/sidebarmenu.js"></script>

<script src="js/custom.js"></script>


<script src="plugins/bower_components/chartist/dist/chartist.min.js"></script>
<script src="plugins/bower_components/chartist-plugin-tooltips/dist/chartist-plugin-
tooltip.min.js"></script>
<script src="js/pages/dashboards/dashboard1.js"></script>
</body>
</html>
3.3. Dari file yang telah anda copykan ada beberapa file yang akan kita include, maka
kita harus siapakan file – file yang di include antaralain sbb:
- header.blade.php
- sidebar.blade.php
- mainmenu.blade.php
- footer.blade.php
dan simpan semua file tersebut kedalam folder layouts
3.4. Pertama kita akan cut file mulai dari tag head sampai dengan penutup header
kedalam folder header.blade.php yang sudah dibuat tadi.
Header.blade.php berfungsi untuk menampung section head.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords"
content="wrappixel, admin dashboard, html css dashboard, web dashboard, bootstrap 5 admin, bootstra
p 5, css3 dashboard, bootstrap 5 dashboard, Ample lite admin bootstrap 5 dashboard, frontend, responsive b
ootstrap 5 admin template, Ample admin lite dashboard bootstrap 5 dashboard template">
<meta name="description"
content="Ample Admin Lite is powerful and clean admin dashboard template, inpired from Bootstrap Fr
amework">
<meta name="robots" content="noindex,nofollow">
<title>Ample Admin Lite Template by WrapPixel</title>
<link rel="canonical" href="https://www.wrappixel.com/templates/ample-admin-lite/" />

<link rel="icon" type="image/png" sizes="16x16" href="plugins/images/favicon.png">

<link href="plugins/bower_components/chartist/dist/chartist.min.css" rel="stylesheet">
<link rel="stylesheet" href="plugins/bower_components/chartist-plugin-tooltips/dist/chartist-plugin-
tooltip.css">

<link href="css/style.min.css" rel="stylesheet">
</head>
<body>



<div class="preloader">
<div class="lds-ripple">
</div>
</div>



<div id="main-wrapper" data-layout="vertical" data-navbarbg="skin5" data-sidebartype="full"
data-sidebar-position="absolute" data-header-position="absolute" data-boxed-layout="full">



<header class="topbar" data-navbarbg="skin5">
<nav class="navbar top-navbar navbar-expand-md navbar-dark">
<div class="navbar-header" data-logobg="skin6">



<a class="navbar-brand" href="dashboard.html">

<b class="logo-icon">

<img src="plugins/images/logo-icon.png" alt="homepage" />
</b>


<span class="logo-text">

<img src="plugins/images/logo-text.png" alt="homepage" />
</span>
</a>






<a class="nav-toggler waves-effect waves-light text-dark d-block d-md-none"
href="javascript:void(0)"><i class="ti-menu ti-close"></i></a>
</div>



<div class="navbar-collapse collapse" id="navbarSupportedContent" data-navbarbg="skin5">




<ul class="navbar-nav ms-auto d-flex align-items-center">



<li class=" in">
<form role="search" class="app-search d-none d-md-block me-3">
<input type="text" placeholder="Search..." class="form-control mt-0">
<a href="" class="active">
<i class="fa fa-search"></i>
</a>
</form>
</li>


<li>
<a class="profile-pic" href="#">
<img src="plugins/images/users/varun.jpg" alt="user-img" width="36"
class="img-circle"><span class="text-white font-medium">Steave</span></a>
</li>


</ul>
</div>
</nav>
</header>


3.5. Kemudian cut file mulai dari tag aside sampai dengan penutupnya kedalam
folder sidebar.blade.php.
Sidebar.blade.php ini berfungsi untuk menampung sidebar
<aside class="left-sidebar" data-sidebarbg="skin6">

<div class="scroll-sidebar">

<nav class="sidebar-nav">
<ul id="sidebarnav">

<li class="sidebar-item pt-2">
<a class="sidebar-link waves-effect waves-dark sidebar-link" href="dashboard.html"
<i class="far fa-clock" aria-hidden="true"></i>
<span class="hide-menu">Dashboard</span>
</a>
</li>
<a class="sidebar-link waves-effect waves-dark sidebar-link" href="profile.html"
<i class="fa fa-user" aria-hidden="true"></i>
<span class="hide-menu">Profile</span>
</a>
</li>
<a class="sidebar-link waves-effect waves-dark sidebar-link" href="basic-table.html"
<i class="fa fa-table" aria-hidden="true"></i>
<span class="hide-menu">Basic Table</span>
</a>
</li>
<a class="sidebar-link waves-effect waves-dark sidebar-link" href="fontawesome.html"
<i class="fa fa-font" aria-hidden="true"></i>
<span class="hide-menu">Icon</span>
</a>
</li>
<a class="sidebar-link waves-effect waves-dark sidebar-link" href="map-google.html"
<i class="fa fa-globe" aria-hidden="true"></i>
<span class="hide-menu">Google Map</span>
</a>
</li>
<a class="sidebar-link waves-effect waves-dark sidebar-link" href="blank.html"
<i class="fa fa-columns" aria-hidden="true"></i>
<span class="hide-menu">Blank Page</span>
</a>
</li>
<a class="sidebar-link waves-effect waves-dark sidebar-link" href="404.html"
<i class="fa fa-info-circle" aria-hidden="true"></i>
<span class="hide-menu">Error 404</span>
</a>
</li>
<li class="text-center p-20 upgrade-btn">
<a href="https://www.wrappixel.com/templates/ampleadmin/"
class="btn d-grid btn-danger text-white" target="_blank">
Upgrade to Pro</a>
</li>
</ul>
</nav>

</div>

</aside>
3.6. Kemudian cut file mulai dari tag footer sampai dengan penutupnya kedalam
folder footer.blade.php.
footer.blade.php ini berfungsi untuk menampung footer
</footer>
</footer>
3.7. Selanjutnya setelah file – file tadi sudah dipisahkan maka akan menjadi sbb :
Untuk memanggil file yang sudah kita pisahkan tadi maka kita gunakan @include
- @include(views.header) berfungsi untuk memanggil header

- @include(views.sidebar) berfungsi untuk memanggil sidebar
- @include(views.footer) berfungsi untuk memanggil footer
<!DOCTYPE html>
<html dir="ltr" lang="en">
@include('layouts.header')




@include('layouts.sidebar')






<div class="page-wrapper">



<div class="page-breadcrumb bg-white">
<div class="row align-items-center">
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
<h4 class="page-title">Dashboard</h4>
</div>
<div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
<ol class="breadcrumb ms-auto">
<li><a href="#" class="fw-normal">Dashboard</a></li>
</ol>
<a href="https://www.wrappixel.com/templates/ampleadmin/" target="_blank"
class="btn btn-danger d-none d-md-block pull-right ms-3 hidden-xs hidden-sm waves-
effect waves-light text-white">Upgrade
to Pro</a>
</div>
</div>
</div>

</div>






<div class="container-fluid">



<div class="row justify-content-center">
<h3 class="box-title">Total Visit</h3>
<li>
<div id="sparklinedash"><canvas width="67" height="30"
"></canvas>
</div>
</li>
<li class="ms-auto"><span class="counter text-success">659</span></li>
</ul>
</div>
</div>
<h3 class="box-title">Total Page Views</h3>
<li>
"></canvas>
</div>
</li>
<li class="ms-auto"><span class="counter text-purple">869</span></li>
</ul>
</div>
</div>
<h3 class="box-title">Unique Visitor</h3>
<li>
"></canvas>
</div>
</li>
<li class="ms-auto"><span class="counter text-info">911</span>
</li>
</ul>
</div>
</div>
</div>



<div class="row">
<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
<div class="white-box">
<h3 class="box-title">Products Yearly Sales</h3>
<ul class="list-inline d-flex ms-auto">
<li class="ps-3">
<h5><i class="fa fa-circle me-1 text-info"></i>Mac</h5>
</li>
<li class="ps-3">
<h5><i class="fa fa-circle me-1 text-inverse"></i>Windows</h5>
</li>
</ul>
</div>
<div id="ct-visits" style="height: 405px;">
<div class="chartist-tooltip" style="top: -17px; left: -12px;"><span
class="chartist-tooltip-value">6</span>
</div>
</div>
</div>
</div>
</div>

</div>






@include('layouts.footer')



</div>



</div>






<script src="plugins/bower_components/jquery/dist/jquery.min.js"></script>

<script src="bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/app-style-switcher.js"></script>
<script src="plugins/bower_components/jquery-sparkline/jquery.sparkline.min.js"></script>

<script src="js/waves.js"></script>

<script src="js/sidebarmenu.js"></script>

<script src="js/custom.js"></script>


<script src="plugins/bower_components/chartist/dist/chartist.min.js"></script>
<script src="plugins/bower_components/chartist-plugin-tooltips/dist/chartist-plugin-
tooltip.min.js"></script>
<script src="js/pages/dashboards/dashboard1.js"></script>
</body>
</html>
3.8. Agar dapat kita coba di browser jangan lupa tambahkan routes nya di file
web.php sbb :
Route::get('/', function () {
return view('layouts/app2');
});
3.9. Dan Setting Template Bootstrap telah berhasil dilakukan

4. Langkah Langkah CRUD
4.1. Setting File Env
Buka file .env pada project kalian meggunakan text editor ,lalu rubah pada bagian:
 DB_DATABASE = nama database yang digunakan
 DB_USERNAME = nama username mysql kalian
 DB_PASSWORD = password mysql kalian
Disini database yang saya gunakan bernama hr, dan username mysql saya
“root”,sedangkan password mysql saya tidak ada jadi saya kosongin
4.2. Buat Model
Buat file model untuk tabel yang akan digunakan, disini saya akan menggunakan tabel
locations, countries, dan regions. Berikut cara pembuatan model menggunakan artisan.
Ketikan perintah php artisan make:model Locations di folder project anda, maka file
model Locatios akan terbuat
4.3. Konfigurasi Model

Setelah file model terbentuk kita harus mengkonfigurasinya agar sesuai dengan tabel
kita. File model ada di folder app / Models
1. Konfigurasi file model Locations.php
2. Konfigurasi file model Regions.php

3. Konfigurasi file model Countries.php
4.4. Buat Controller
Buat Controller untuk menghandle proses.Ketikan perintah php artisan make:controller
LocationsController di folder project anda, maka file controller LocatiosController akan
terbuat
4.5. Konfigurasi File Route
Buka file web.php pada folder routes
4.6. Buat Halaman Untuk CRUDS
Buat folder locations, regions, dan countries di dalam folder resources / views
Lalu buat file index.blade.php, add.blade.php dan edit.blade.php pada setiap folder
1. Folder Locations
a. File index
b. File add
c. File edit
2. Folder Regions
a. File Index
b. File add
c. File Edit
3. Folder Countries
a. File index
b. File add
c. File Edit
4.7. Konfigurasi File Controller
Kita akan mengkonfigurasi file controller agar bisa menghandle proses CRUD
1. Konfigurasi file LocationsController.php
2. Konfigurasi file RegionsController.php
3. Kofigurasi file CoutriesController
Menangani Upload File
Pertama kita harus meyiapkan colum utuk menyimpan lokasi dari file yang akan di upload,
disini kita juga akan menggunakan fitur storage Laravel
1. Membuat kolom img_src di tabel locations untuk menyimpan lokasi file yang di
upload
2. Menambahkan input file di halaman add pada folder locations

3. Merubah function sendData di halaman add pada folder locations
4. Merubah function store pada LocationsController.php, file gambar akan tersimpan

pada folder storage / public / images
5. Menjalankan perintah php artisan storage:link agar bisa mengakses folder storage
6. Menambahkan input file dan img di halaman edit pada folder locations
7. Merubah function sendData di halaman edit pada folder locations
8. Merubah fuction update di file LocationsController.php
9. Merubah fucntion delete di file LocationsController.php

Laravel Tabel Locations

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Laravel Tabel Locations

Diunggah oleh

Hak Cipta:

Format Tersedia

Kelompok 6

Laravel Tabel Locations

1.2. Nyalakan Apache dan Mysql pada XAMPP

Lalu masuk ke dalam phpMyAdmin dengan link http://localhost/phpmyadmin/ atau

1.3. Membuat database baru

1.5. Verifikasi Proses Import Berhasil

2.2. Masuk ke Folder XAMPP

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

2.4. Cek Instalasi Laravel di Web Browser

Php artisan serve

Ini adalah folder laravel yang telah di install

dan simpan semua file tersebut kedalam folder layouts

- @include(views.header) berfungsi untuk memanggil header

3.9. Dan Setting Template Bootstrap telah berhasil dilakukan

4.3. Konfigurasi Model

1. Konfigurasi file model Locations.php

2. Konfigurasi file model Regions.php

2. Menambahkan input file di halaman add pada folder locations

4. Merubah function store pada LocationsController.php, file gambar akan tersimpan

9. Merubah fucntion delete di file LocationsController.php

Anda mungkin juga menyukai