Contoh Proyek PHP Laravel untuk Pemula

oleh Vincy. Terakhir diubah pada 27 Juli 2021.

Laravel adalah salah satu kerangka kerja PHP populer untuk membangun situs web dinamis. Ini menggunakan arsitektur MVC.

Ada banyak alasan untuk memilih Laravel di antara daftar kerangka kerja PHP yang tersedia. Salah satunya adalah kesederhanaannya dan pemula dapat mempelajarinya dengan cepat.

Jangan khawatir jika Anda baru mengenal Laravel. Artikel ini akan memandu Anda tentang cara memulai Laravel dengan proyek contoh sederhana.

Contoh ini adalah untuk memandu cara melakukan tindakan membuat, membaca, memperbarui, menghapus dengan database.

Kami dapat memisahkan artikel ini menjadi dua bagian.

  1. Membuat lingkungan pengembangan untuk menjalankan contoh PHP Laravel dengan database.
  2. Membuat contoh Laravel untuk membuat, membaca, memperbarui, dan menghapus catatan basis data.

Laravel memiliki pangsa pasar yang lebih tinggi di antara framework PHP lainnya. Juga, ia menyediakan paket untuk membangun situs web.

tren google php laravel

Prasyarat

Bagian ini memberitahu TODO untuk mempersiapkan pengembangan untuk menjalankan aplikasi PHP Laravel.

Pastikan Anda memiliki ekosistem PHP di komputer Anda. Instal PHP dan MySQL atau MariaDB terbaru dengan server web seperti Apache.

Jika Anda belum memiliki PHP di komputer Anda, pilihannya adalah menggunakan salah satu tumpukan seperti WAMP, LAMP. Saya menggunakan bundel XAMPP untuk menginstal PHP.

Contoh ini menggunakan Laravel 8, versi terbaru yang diluncurkan pada September 2020. Artikel ini menjelaskan cara membuat aplikasi PHP Laravel di root server melalui Composer.

Bagian 1: Membuat lingkungan pengembangan untuk menjalankan contoh PHP Laravel dengan database.

Ini adalah langkah-langkah untuk membuat lingkungan pengembangan untuk menjalankan proyek PHP Laravel.

  1. Membuat file aplikasi Laravel
  2. Buat database dan skema
  3. Konfigurasikan lingkungan aplikasi Laravel
  4. Migrasi skema ke dalam database
  5. Mulai server pengembangan

Langkah 1: Membuat file aplikasi Laravel

Jalankan perintah berikut di jendela terminal Anda. Itu membuat aplikasi PHP Laravel di jalur root pengembangan


composer create-project laravel/laravel php-laravel-project-crud


Itu menciptakan proyek Laravel php-laravel-project-crud dalam struktur MVC.

Langkah 2: Buat database dan skema

Buat database menggunakan PhpMyAdmin atau klien lain yang biasa Anda gunakan. Contoh ini menggunakan php-laravel-crud database seperti yang dikonfigurasi dalam aplikasi .env.

Kita harus menggunakan perintah migrasi untuk menyiapkan kelas migrasi database untuk tabel target. Sintaks menunjukkan perintah ini di mana dapat diganti.


php artisan make:migration create_<table-name>_table


Ikuti konvensi untuk penamaan nama tabel proyek PHP Laravel.

  • Itu harus dalam huruf kecil semua.
  • Itu harus dalam bentuk jamak dari nama Model yang sesuai

php artisan make:migration create_products_table


Ini akan membuat kelas migrasi PHP Laravel di basis data/migrasi jalur.

Itu telah menyertakan id pembuatan otomatis dan stempel waktu secara default. Kami harus memodifikasinya untuk menambahkan bidang tambahan ke produk tabel basis data. Lihat modifikasi yang dilakukan dengan Skema::buat fungsi.

2021_07_17_054329_create_products_table.php


<?php

use IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateSupportFacadesSchema;

class CreateProductsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            
            /* Add additional fields */
            $table->text('title');  // product title
            $table->text('description');   // description
            $table->text('short_notes');   // short notes
            $table->decimal('price', 10, 2); // price
            $table->text('image'); // product image
            $table->text('slug'); // product slug
            
            
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
}


Langkah 3: Konfigurasikan lingkungan aplikasi Laravel

Di root proyek (Misalnya /php-laravel-project-crud) berisi file .env.

Ini adalah file konfigurasi aplikasi untuk mengatur nama aplikasi, home-url dan lainnya. Lihat detail database yang dikonfigurasi dengan .env di bawah ini.

.env (Konfigurasi Basis Data)


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


Langkah 5: Migrasikan skema ke dalam database

Ini untuk membuat tabel ke dalam database seperti yang didefinisikan. Perintah CLI ini akan membuat tabel yang sesuai dengan skema kelas migrasi yang ditentukan.


php artisan migrate


Langkah 5: Mulai server pengembangan

Dengan demikian kita memiliki file dan database aplikasi Laravel. Jadi, langkah awal berhasil dilakukan.

Sekarang, saatnya memulai server pengembangan untuk menjalankan aplikasi PHP Laravel.

Perintah ini akan melakukan ini dan mengembalikan URL untuk menjalankan aplikasi.


php artisan serve


Dengan menjalankan URL yang dikembalikan, ini akan menjadikan halaman selamat datang sebagai halaman arahan default.

Struktur File

Setelah aplikasi Laravel dibuat, ia memiliki struktur file berikut. Ini menunjukkan file aplikasi dalam struktur MVC.

NS aplikasi direktori termasuk model, controller, HTTP/Console kernel dan lebih banyak file. Pengontrol melakukan perutean dan Model lebih banyak tentang logika backend.

Pengontrol khusus rute mengembalikan respons HTTP dalam bentuk tampilan UI atau apa pun.

Struktur File Proyek PHP Laravel

Kita akan melihat cara membuat model dan pengontrol proyek PHP Laravel. Itu untuk entitas produk yang diambil misalnya untuk membuat database mentah untuk pemula.

Alur Permintaan

Diagram berikut menunjukkan siklus hidup aliran permintaan proyek PHP Laravel. Ini menunjukkan siklus permintaan-respons HTTP dari aplikasi Laravel. Laravel menggunakan HTTP atau kernel konsol berdasarkan permintaan.

Diagram siklus hidup ini menunjukkan bagaimana kernel bersiap untuk memproses permintaan. Ini memuat penyedia dan mendefinisikan middleware yang diperlukan untuk memproses permintaan.

Misalnya, Penyedia Layanan Rute memuat semua rute yang dibuat untuk aplikasi. Rute dipetakan dengan middleware yang sesuai untuk menyaring permintaan. Sebuah middleware dapat ditugaskan ke beberapa rute.

Siklus Hidup Permintaan PHP Laravel

Bagian 2: Membuat contoh Laravel untuk membuat, membaca, memperbarui, dan menghapus baris database

Kami telah melihat sekilas struktur kerangka kerja PHP Laravel dan penanganan permintaan. Mari kita buat contoh sederhana untuk membuat, membaca, memperbarui, dan menghapus operasi dengan database.

Membuat Model PHP Laravel, Pengontrol

Buat Model proyek Laravel menggunakan PHP artisan membuat model memerintah. Penamaan model memiliki konvensi untuk membiarkannya dengan kata-kata tunggal dimulai dengan huruf besar.


php artisan make:model Product


Perintah di atas akan membuat kelas Model berikut ke dalam direktori app/Model. Ini memiliki array bidang yang dapat diisi yang dilindungi dari entri data yang tidak benar.

UI formulir tambahan produk akan menampilkan input untuk ketiga bidang ini untuk menerima data pengguna.


<?php

namespace AppModels;

use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateDatabaseEloquentModel;

class Product extends Model
{
    use HasFactory;
    
    protected $fillable = ['title', 'short_notes', 'price'];
}


Membuat pengontrol aplikasi PHP Laravel juga memiliki konvensi penamaan yang sama. Tapi, itu harus dengan akhiran ‘Controller’. Contoh: ProductController.php. Perintah tukang PHP untuk membuat pengontrol adalah,


php artisan make:controller ProductController


Kelas pengontrol mencakup fungsi-fungsi berikut untuk melakukan tindakan membaca, menyimpan, memperbarui, menghapus. Setiap fungsi dikaitkan dengan metode permintaan dan jalur rute yang sesuai.

Nilai di dalam tanda kurung kurawal {} di URI adalah pengidentifikasi unik untuk mengambil catatan.

Nama Fungsi Metode Permintaan Keterangan
indeks() DAPATKAN Daftar hasil.
URI: /produk
membuat() DAPATKAN Tampilkan formulir tambah.
URI: /produk/buat
toko() POS Tambahkan baris baru ke dalam database.
URI: /produk/buat
menunjukkan() DAPATKAN Lihat catatan berdasarkan ID.
URI: /produk/{produk}
edit() DAPATKAN Tampilkan formulir edit dengan mengisi bidang.
URI: /produk/{produk}/edit
memperbarui() TARUH Simpan data yang dimodifikasi ke baris tertentu.
URI: /produk/{produk}
menghancurkan() POS Hapus catatan.
URI: /produk/{produk}

<?php

namespace AppHttpControllers;

use AppModelsProduct;
use IlluminateHttpRequest;

class ProductController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return IlluminateHttpResponse
     */
    public function index()
    {
        $products = Product::all(); //fetch all products from DB
        return view('product.list', ['products' => $products]);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return IlluminateHttpResponse
     */
    public function create()
    {
        return view('product.add');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  IlluminateHttpRequest  $request
     * @return IlluminateHttpResponse
     */
    public function store(Request $request)
    {
        $newPost = Product::create([
            'title' => $request->title,
            'short_notes' => $request->short_notes,
            'price' => $request->price
        ]);
        
        return redirect('product/' . $newPost->id . '/edit');
    }

    /**
     * Display the specified resource.
     *
     * @param  AppModelsProduct  $product
     * @return IlluminateHttpResponse
     */
    public function show(Product $product)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  AppModelsProduct  $product
     * @return IlluminateHttpResponse
     */
    public function edit(Product $product)
    {
        return view('product.edit', [
            "https://phppot.com/php/php-laravel-project-example/product" => $product,
        ]);
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  IlluminateHttpRequest  $request
     * @param  AppModelsProduct  $product
     * @return IlluminateHttpResponse
     */
    public function update(Request $request, Product $product)
    {
        $product->update([
            'title' => $request->title,
            'short_notes' => $request->short_notes,
            'price' => $request->price
        ]);
        
        return redirect('product/' . $product->id . '/edit');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  AppModelsProduct  $product
     * @return IlluminateHttpResponse
     */
    public function destroy(Product $product)
    {
        $product->delete();
        return redirect('product/');
    }
}


Tata letak dan tampilan bangunan

Ini adalah halaman selamat datang yang didesain ulang. Contoh ini menggunakan Laravel app.layout untuk semua halaman.

Templat anak halaman selamat datang adalah selamat datang.blade.php. Dan HTML ditampilkan di bawah ini. Ini menautkan halaman tampilan template daftar produk.

Semua file template dalam contoh ini menggunakan pernyataan {}} Laravel blade. Ini menerapkan PHP htmlspecialchars() pada nilai yang akan dicetak. Ini membantu untuk menghindari serangan XSS.

resources/views/welcome.blade.php


@extends('layouts.app')
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-12 text-center pt-5">
                <h1 class="display-one mt-5">PHP Laravel Project - CRUD</h1>
                <p>Welcome to the PHP Laravel project demo for beginners</p>
                <br>
                <a href="https://phppot.com/php/php-laravel-project-example/product" class="btn btn-outline-primary">Show Products</a>
            </div>
        </div>
    </div>
@endsection

Ini memperluas tata letak induk di awal. Itu membungkus HTML konten anak di dalam enklosur @section-@ensection.

Halaman selamat datang menggunakan app.layout default. Tata letak ini dilengkapi dengan direktori sumber daya/tampilan PHP Laravel. Kami juga dapat membuat tata letak dan templat tambahan.

Layar Selamat Datang Proyek Laravel

Daftar Produk

Pengguna akan mencapai halaman ini dari navigasi halaman selamat datang. Tautan navigasi memetakan rute yang ditetapkan ke halaman daftar produk.

Halaman daftar memiliki semua kontrol untuk melakukan tindakan membuat, mengedit, menghapus produk. Ini menampilkan tiga kolom dari database produk.

Ini melewati unik untuk menangani tindakan database untuk produk tertentu.

Tautan tombol Hapus akan menampilkan dialog konfirmasi. Ini memposting permintaan penghapusan dengan pengidentifikasi yang sesuai setelah pengguna mengonfirmasi.

Tampilan template untuk menampilkan daftar produk dinamis ditunjukkan di bawah ini. Ini menggunakan pernyataan loop PHP Laravel sebelumnya untuk mengulangi array produk.

resources/views/product/list.blade.php


@extends('layouts.app') @section('content')
<div class="container">
	<div class="row">
		<div class="col-12 text-center pt-5">
			<h1 class="display-one m-5">PHP Laravel Project - CRUD</h1>
			<div class="text-left"><a href="https://phppot.com/php/php-laravel-project-example/product/create" class="btn btn-outline-primary">Add new
				product</a></div>

			<table class="table mt-3  text-left">
				<thead>
					<tr>
						<th scope="col">Product Title</th>
						<th scope="col" class="pr-5">Price (USD)</th>
						<th scope="col">Short Notes</th>
						<th scope="col">Action</th>
					</tr>
				</thead>
				<tbody>
					@forelse($products as $product)
					<tr>
						<td>{!! $product->title !!}</td>
						<td class="pr-5 text-right">{!! $product->price !!}</td>
						<td>{!! $product->short_notes !!}</td>
						<td><a href="product/{!! $product->id !!}/edit"
							class="btn btn-outline-primary">Edit</a>
							<button type="button" class="btn btn-outline-danger ml-1"
								onClick='showModel({!! $product->id !!})'>Delete</button></td>
					</tr>
					@empty
					<tr>
						<td colspan="3">No products found</td>
					</tr>
					@endforelse
				</tbody>
			</table>
		</div>
	</div>
</div>


<div class="modal fade" id="deleteConfirmationModel" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-body">Are you sure to delete this record?</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" onClick="dismissModel()">Cancel</button>
				<form id="delete-frm" class="" action="" method="POST">
                    @method('DELETE')
                    @csrf
                    <button class="btn btn-danger">Delete</button>
                </form>
			</div>
		</div>
	</div>
</div>

<script>
function showModel(id) {
	var frmDelete = document.getElementById("delete-frm");
	frmDelete.action = 'product/'+id;
	var confirmationModal = document.getElementById("deleteConfirmationModel");
	confirmationModal.style.display = 'block';
	confirmationModal.classList.remove('fade');
	confirmationModal.classList.add('show');
}

function dismissModel() {
	var confirmationModal = document.getElementById("deleteConfirmationModel");
	confirmationModal.style.display = 'none';
	confirmationModal.classList.remove('show');
	confirmationModal.classList.add('fade');
}
</script>
@endsection

Daftar Produk Proyek Laravel

Dialog Konfirmasi

Produk tambahkan atau edit template

Template tambah dan edit keduanya memiliki HTML yang sama. Layar edit mengisi mengisi detail produk.

Formulir tambah dan edit mendapatkan input untuk bidang produk Judul, Catatan singkat, dan Harga. Itu ditambahkan sebagai bidang yang bisa diisi dalam model aplikasi PHP Laravel.

resources/views/product/list.blade.php


@extends('layouts.app') @section('content')
<div class="container">
	<div class="row">
		<div class="col-12 text-center pt-5">
			<h1 class="display-one mt-5">PHP Laravel Project - CRUD</h1>
			<div class="text-left"><a href="https://phppot.com/product" class="btn btn-outline-primary">Product List</a></div>

			<form id="add-frm" method="POST" action="" class="border p-3 mt-2">
				<div class="control-group col-6 text-left">
					<label for="title">Title</label>
					<div>
						<input type="text" id="title" class="form-control mb-4" name="title"
							placeholder="Enter Title" required>
					</div>
				</div>
				<div class="control-group col-6 text-left mt-2">
					<label for="body">Short Notes</label>
					<div>
						<textarea id="short_notes" class="form-control mb-4" name="short_notes"
							placeholder="Enter Short Notes" rows="" required></textarea>
					</div>
				</div>
				<div class="control-group col-6 text-left mt-2">
					<label for="body">Price</label>
					<div>
						<input type="text" id="price" class="form-control mb-4" name="price"
							placeholder="Enter Price" required>
					</div>
				</div>

				@csrf

				<div class="control-group col-6 text-left mt-2"><button class="btn btn-primary">Add New</button></div>
			</form>
		</div>
	</div>
</div>
@endsection


Tambahkan Tata Letak Tampilan

resources/views/product/list.blade.php


@extends('layouts.app') @section('content')
<div class="container">
	<div class="row">
		<div class="col-12 text-center pt-5">
			<h1 class="display-one mt-5">PHP Laravel Project - CRUD</h1>
			<div class="text-left"><a href="https://phppot.com/product" class="btn btn-outline-primary">Product List</a></div>

			<form id="edit-frm" method="POST" action="" class="border p-3 mt-2">
				<div class="control-group col-6 text-left">
					<label for="title">Title</label>
					<div>
						<input type="text" id="title" class="form-control mb-4" name="title"
							placeholder="Enter Title" value="{!! $product->title !!}"
							required>
					</div>
				</div>
				<div class="control-group col-6 mt-2 text-left">
					<label for="body">Short Notes</label>
					<div>
						<textarea id="short_notes" class="form-control mb-4" name="short_notes"
							placeholder="Enter Short Notes" rows="" required>{!! $product->short_notes !!}</textarea>
					</div>
				</div>

				<div class="control-group col-6 mt-2 text-left">
					<label for="body">Price</label>
					<div>
						<input type="text" id="price" class="form-control mb-4" name="price"
							placeholder="Enter Price" value="{!! $product->price !!}"
							required>
					</div>
				</div>

				@csrf 
				@method('PUT')
				<div class="control-group col-6 text-left mt-2"><button class="btn btn-primary">Save Update</button></div>
			</form>
		</div>
	</div>
</div>
@endsection


Tampilan Edit Laravel

Kesimpulan

Jadi, kami telah membuat proyek PHP Laravel sederhana dengan intervensi database. Itu memiliki tautan navigasi untuk membuat, membaca, memperbarui, dan menghapus tindakan.

Langkah-langkah yang diplot di atas akan membuat Anda membangun aplikasi Laravel Anda sendiri dari awal. Kebutuhan dasar tidak lebih dari ekosistem PHP.

Coba dengan kerangka Laravel dan bagikan komentar dan pertanyaan Anda di bawah ini.

Kembali ke Atas


Source link