Laravel vodič za početnike

Što je Laravel?

Laravel je web MVC okvir otvorenog koda za PHP. Laravel je robustan okvir koji omogućuje jednostavan razvoj PHP web aplikacija sa značajkama kao što je modularni sustav pakiranja s namjenskim upraviteljem ovisnosti, pristupom relacijskim bazama podataka i drugim uslužnim programima za implementaciju i održavanje aplikacija.

Laravel je stvorio Taylor Otwell. Od svog prvog izdanja u lipnju 2011. (verzija 1), stalno je rastao i postajao sve popularniji u sektoru PHP okvira u industriji web razvoja. Velik dio ove popularnosti može se pripisati mnogim značajkama koje su prvenstveno usmjerene na programere, a koje dolaze s njim standardno.

Zašto Laravel?

Oko 2000., većina PHP kod bio je proceduralan i mogao se pronaći u obliku "skripti" koje bi imale zamršenu zbrku špageti koda. Čak su i najjednostavnije stranice imale br razdvajanje koncerna, i stoga je bilo prilično lako da aplikacija brzo preraste u noćnu moru održavanja. Svijetu je trebalo nešto bolje. Upoznajte PHP verziju 5 i razne PHP okvire koji pokušavaju donijeti prijeko potrebnu strukturu i bolja rješenja za razne probleme web aplikacija.

Od tada smo vidjeli mnogo objavljenih frameworkova koji su utrli put popularnim frameworkovima koji se danas koriste. Danas bi (po našem mišljenju) prva tri bila Zend Framework, Symfony i naravno Laravel. Iako je svaki od ovih frameworkova utemeljen na sličnim principima i usmjeren je na rješavanje (u osnovi) istih uobičajenih problema, njihove ključne razlike leže u implementacijama. Svaki od njih ima svoje specifičnosti u načinu rješavanja problema. Kada pogledate kod koji je svaki od njih proizveo, vidjet ćete da postoji prilično čvrsta linija koja ih međusobno razdvaja. Po našem skromnom mišljenju, Laravel framework je najbolji.

Saznajte više o razlika između Laravela i Codeupaljač.

Kako preuzeti i instalirati Laravel s Composerom

Bilješka: Ovaj vodič je napisan za Laravel 5.8, ali koncepti usmjeravanja, kontrolera, zahtjeva i Bladea ostaju isti u trenutnim izdanjima. Od 2026. godine, najnovija verzija je Laravel 13 (objavljena u ožujku 2026.), koja zahtijeva PHP 8.3 ili noviji, dok Laravel 12 zahtijeva PHP 8.2.

Bilješka: Pretpostavlja se da već imate instaliranu kopiju PHP-a na svom lokalnom sustavu. Ako ne, možete pročitati kako ga instalirati ovdje.

Composer je i upravitelj paketa i ovisnosti. Da biste ga instalirali, otvorite terminal i CD u novi direktorij. Pokrenite ovu naredbu:

curl -Ss getcomposer.org/installer | php

Rezultati ove naredbe će izgledati ovako:

Bilješka: Za opširnije upute o postavljanju Laravela, pogledajte Laravel dokumentaciju ovdje.

Vidjet ćete kako preuzima i kompajlira skriptu composer.phar, koju koristimo za instalaciju Laravela. Iako postoje brojni načini za postavljanje nove Laravel aplikacije, mi ćemo to učiniti putem Laravel skripte composer. Za instalaciju ove skripte pokrenite:

composer global require laravel/installer

Što će izgledati otprilike ovako:

Ovim ćete preuzeti i instalirati sve datoteke okvira, kao i sve potrebne ovisnosti. Paketi će biti spremljeni unutar direktorija dobavljača. Nakon što se preuzme i instalira, jednostavno je kao izdavanje sljedeće naredbe:

laravel new uploadApp

Vidjet ćete nešto poput sljedećeg izlaza:

Composer instalira sve pakete koji su Laravelu potrebni za rad. Može potrajati nekoliko minuta, stoga budite strpljivi. Nakon što završi, pokrenite naredbu ls -al kako biste vidjeli što je instalirano.

Ovdje je kratka analiza direktorija u uobičajenoj Laravel aplikaciji:

• aplikacija/ : Ovo je izvorna mapa u kojoj se nalazi naš aplikacijski kod. Svi kontroleri, pravila i modeli nalaze se unutar ove mape.
• bootstrap/ : Sadrži skriptu za pokretanje aplikacije i nekoliko datoteka mape klasa.
• konfiguracija/: Sadrži konfiguracijske datoteke aplikacije. One se obično ne mijenjaju izravno, već se oslanjaju na vrijednosti postavljene u .env (environment) datoteci u korijenu aplikacije.
• baza podataka/ : Sadrži datoteke baze podataka, uključujući migracije, početne vrijednosti i tvornice testiranja.
• javno/ : Javno dostupna mapa koja sadrži kompilirane resurse i, naravno, datoteku index.php.
• resursi/ : Sadrži front-end resurse kao što su JavaDatoteke skripti, jezične datoteke, CSS/SASS datoteke i svi predlošci korišteni u aplikaciji (nazvani predlošci blade-a).
• rute/ : Sve rute u aplikaciji nalaze se ovdje. Postoji nekoliko različitih "opsega" ruta, ali onaj na koji ćemo se usredotočiti je datoteka web.php.
• pohrana/ : Sve privremene datoteke predmemorije koje koristi aplikacija, datoteke sesije, kompilirane skripte prikaza i datoteke zapisnika.
• testovi/ : Sadrži testne datoteke za aplikaciju, kao što su jedinični testovi i funkcionalni testovi.
• dobavljač/ : Svi paketi ovisnosti instalirani su s composerom.

Sada ćemo izgraditi ostatak aplikacije i pokrenuti je posebnom naredbom artisan (kako bismo si uštedjeli muke s instaliranjem i konfiguriranjem web poslužitelja poput Apachea ili nginxa). .env datoteka sadrži sve konfiguracijske vrijednosti koje datoteke u direktoriju /config koriste za konfiguriranje aplikacije.

Dizajn aplikacije: Kratak pregled naših zahtjeva

U ovom online vodiču za Laravel gradit ćemo vrlo jednostavnu aplikaciju koja će raditi samo dvije stvari:

1. rukovanje učitavanjem datoteka s web obrasca
2. prikazati prethodno prenesene datoteke na drugoj stranici.

Za ovaj projekt, naša aplikacija bit će samo za pisanje, što znači da korisnik može samo pisati datoteke i pregledavati popis datoteka koje je prenio. Ova je aplikacija izuzetno osnovna, ali bi trebala poslužiti kao dobra praksa za početak izgradnje vaših Laravel vještina i znanja. Imajte na umu da smo radi kratkoće isključili modeliranje baze podataka, migracije i autentifikaciju, ali u stvarnoj aplikaciji to su dodatne stvari koje ćete htjeti uzeti u obzir.

Ovdje je popis komponenti koje će nam trebati kako bi aplikacija radila kako se očekuje:

• A put što će omogućiti vanjskom svijetu (internetu) korištenje aplikacije, kao i odrediti krajnju točku koja će pokazivati ​​na mjesto gdje se nalazi logika za spremanje prenesene datoteke.
• A kontrolor koji obrađuje tok od zahtjeva do odgovora.
• A Predložak koji će se koristiti za prikaz popisa prethodno prenesenih datoteka i samog obrasca za prijenos.
• A zatražiti koje će kontroler koristiti za validaciju podataka proslijeđenih iz web obrasca.

Što je ruta?

Ruta u Laravelu je u osnovi krajnja točka određena URI-jem koji djeluje kao "pokazivač" na neku funkcionalnost koju nudi aplikacija. Najčešće, ruta jednostavno pokazuje na metodu na kontroleru i također diktira koje HTTP metode mogu pogoditi taj URI. Ruta ne znači uvijek ni metodu kontrolera; ona može samo proslijediti izvršavanje aplikacije definiranoj funkciji zatvaranja ili anonimnoj funkciji.

Zašto koristiti rutu?

Rute su pohranjene unutar datoteka u mapi /routes unutar korijenskog direktorija projekta. Prema zadanim postavkama, postoji nekoliko različitih datoteka koje odgovaraju različitim "stranama" aplikacije ("strane" dolaze iz metodologije heksagonalne arhitekture). Oni uključuju:

• web.php: javno dostupne rute temeljene na "pregledniku". To su najčešće rute koje web preglednik obrađuje. Prolaze kroz grupu web middlewarea i sadrže i mogućnosti za CSRF zaštita (što pomaže u obrani od zlonamjernih napada temeljenih na obrascima) i općenito sadrže određeni stupanj „stanja“ (pod tim mislimo da koriste sesije).
• api.php: rute koje odgovaraju API grupi i stoga imaju API middleware omogućen prema zadanim postavkama. Ove rute su bez stanja i nemaju sesije ili memoriju za unakrsne zahtjeve (jedan zahtjev ne dijeli podatke ili memoriju s bilo kojim drugim zahtjevom; svaki je samoenkapsuliran).
• console.php: ove rute odgovaraju prilagođenim artisan naredbama koje ste kreirali za svoju aplikaciju.
• channels.php: registrira rute za emitiranje događaja.

Ključna datoteka o kojoj trebamo voditi računa u ovom trenutku je specifična za preglednik, web.php. Već postoji jedna ruta definirana prema zadanim postavkama, a to je ona koju odaberete prilikom navigacije do web korijena vaše aplikacije (web korijen se nalazi u javnom direktoriju). Trebat će nam tri različite rute da bi naša aplikacija za prijenos funkcionirala:

• /upload: ovo će biti URI glavne stranice koja prikazuje naš web obrazac za prijenos datoteka.
• /process: ovo će biti mjesto gdje obrazac koji se nalazi na /upload URI-ju objavljuje podatke poslane iz obrasca („akcija“) obrasca.
• /list: ovo će prikazati sve datoteke prenesene na stranicu.

Bilješka: Krajnja točka /list možda neće biti potrebna ako želimo staviti svu logiku za prikaz obrasca za prijenos i popisa datoteka na jednu stranicu; međutim, za sada smo ih zadržali odvojeno kako bismo dodali malo više sadržaja temi o kojoj je riječ.

//inside routes/web.php
Route::get('/upload', 'UploadController@upload')->name('upload');
Route::get('/download', 'UploadController@download')->name('download');
Route::post('/process', 'UploadController@process')->name('process');
Route::get('/list', 'UploadController@list')->name('list');

U ovom tutorijalu za Laravel framework, za svaku željenu rutu, eksplicitno ćemo je navesti u datoteci ruta web.php koristeći jednu od dostupnih HTTP-specifičnih metoda zahtjeva (get(), post(), put(), delete(), patch() ili options()). Za detaljniji pregled svake od njih, pogledajte to van. Ove metode određuju kojim HTTP glagolima je dopušten pristup toj danoj ruti. Ako vam je potrebno da ruta može prihvatiti više od jednog HTTP glagola (što bi mogao biti slučaj ako koristite jednu stranicu za prikaz početnih podataka i podataka obrasca nakon slanja), možete koristiti metodu Route::any().

Drugi argument metodama Route::get() i Route::post() (i bilo kojoj drugoj metodi povezanoj s HTTP-glagolom na fasadi Route) je naziv određenog kontrolera i metode smještene unutar tog kontrolera koja se izvršava nakon što se dosegne krajnja točka rute s dopuštenim HTTP zahtjevom (GET, POST, PATCH, itd.). Koristimo UploadController za sve rute i odredili smo ih na sljedeći način:

Posljednja metoda koju pozivamo na svakoj ruti je njezina funkcija name(), koja prihvaća jedan niz znakova kao argument i koristi se za manje-više "označavanje" određene rute lako pamtljivim imenom (u našim slučajevima, upload, process i list). Možda se ne čini kao sjajna značajka dati svakoj ruti vlastito ime kada je URL zove se potpuno isto, ali stvarno dobro dođe kada imate određenu rutu poput /users/profile/dashboard/config, koju bi bilo lakše zapamtiti kao profile-admin ili user-config.

Napomena o fasadama:

• Fasade pružaju „statičko“ sučelje klasama koje su dostupne u servisnom kontejneru aplikacije.
• Oni pružaju sažetu, pamtljivu sintaksu koja vam omogućuje korištenje Laravelovih značajki bez pamćenja dugih naziva klasa koje morate ručno umetnuti ili konfigurirati.

U gornjim definicijama ruta koristimo fasadu Route umjesto ručnog instanciranja novog objekta Illuminate/Routing/Router i pozivanja odgovarajućih metoda na tom objektu. To je samo prečac koji štedi vrijeme.pingFasade se intenzivno koriste u cijelom Laravel frameworku; možete i trebali biste se bolje upoznati s njima. Dokumentacija za Fasade može se pronaći ovdje.

Što je kontrolor?

Kontroler je "C" u "MVC" (Model-View-Controller) arhitekturi, na čemu se temelji Laravel. Posao kontrolora može se svesti na ovu jednostavnu definiciju: prima zahtjev od klijenta i vraća odgovor klijentu. Ovo je osnovna definicija i ujedno minimalni zahtjev za bilo koji kontrolera. Ono što radi između te dvije stvari općenito se smatra "radnjom" kontrolera (ili "implementacijom rute"). Djeluje kao druga točka ulaska u aplikaciju (prva je zahtjev) za klijenta, koji šalje sadržaj zahtjeva (o kojem ćemo kasnije) aplikaciji, očekujući neku vrstu odgovora (u obliku stranice uspjeha, preusmjeravanja, stranice pogreške ili bilo koje druge vrste HTTP odgovora).

Kontroler radi (u osnovi) istu stvar kao i definicija rute s anonimnom funkcijom postavljenom kao "akcija" kada se ta ruta pogodi. Razlika je u tome što kontroler dobro podnosi odvajanje briga, dok je ruta definirana u skladu sa stvarnom rutom. URL definiciju, što u osnovi znači da spajamo dodijeljeni URI rute s implementacijom rute ili kodom koji se izvršava kada se ta ruta pogodi.

Na primjer, sljedeća dva dijela koda postići će istu stvar:

Primjer #1: Definicija i implementacija rute unutar jednog poziva metode (u web.php datoteci ruta)

//inside routes/web.php
<?php
Route::get('/hello-world', function(Request $request) {
$name = $request->name;
return response()->make("<h1>Hello World! This is ".$name, 200);
});

Primjer br. 2: Definicija rute nalazi se unutar datoteke routes/web.php, ali njezina implementacija nalazi se unutar klase /app/Http/Controllers/HelloWorldController

//inside routes/web.php
<?php

Route::get('/hello-world', 'HelloWorldController@index')->name('hello-world');

------------------------------------------------------------------------------------
//inside app/Http/Controllers/HelloWorldController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;

class HelloWorldController extends Controller
{
public function index(Request $request)
{
$name = $request->name;
return response()->make("<h1>Hello World! This is ".$name, 200);
}
}

Iako se Laravel primjer #2 čini kao puno više posla (što nije, samo malo više koda), pogledajte prednosti koje dobivamo stavljanjem naše logike akcije za zadanu rutu "hello-world" unutar kontrolera umjesto s definicijom rute kao funkcijom povratnog poziva:

1. Naša logika je jasno odvojena u vlastitu klasu (razdvajanje interesa).
2. Naš kontroler je postavljen za kasnije proširenje ako mu bude potrebno dodati dodatne mogućnosti. Recimo da želimo dodati značajku "zbogom svijetu". U tom slučaju bismo preimenovali kontroler u generičkiji "HelloController", a zatim definirali dvije odvojene metode, zdravo() i Doviđenja(). Također bismo trebali definirati dvije odvojene rute koje su mapirale /zdravo i / Doviđenja URI-je do odgovarajuće metode na kontroleru. To je poželjno u usporedbi s povećanjem datoteke ruta s implementacijom svake rute definiranom kao funkcija povratnog poziva.
3. Laravel ima ugrađenu mogućnost predmemoriranja svih definicija ruta u aplikaciji tako da ubrzava vrijeme potrebno za pronalaženje dane rute (povećava performanse aplikacije); međutim, To ćete moći iskoristiti samo ako su sve vaše definirane rute unutar aplikacije konfigurirane pomoću mape specifične za kontroler.pings (vidi primjer br. 2 gore).

Pokrenimo ovu naredbu koja će nam generirati novi kontroler.

// ...inside the project's root directory:
php artisan make:controller UploadController

U osnovi, ova naredba generira stub za kontroler pod nazivom "UploadController" unutar glavnog direktorija kontrolera na /app/Http/Controllers/UploadController.php. Slobodno otvorite tu datoteku i pogledajte je. Vrlo je jednostavno jer je to samo stubbed verzija kontrolera, s ispravnom putanjom imenskog prostora i potrebnim klasama iz kojih se proširuje.

Generiranje zahtjeva

Prije nego što nastavimo s ovim PHP Laravel tutorialom i napravimo nekoliko promjena u generiranom stubu UploadControllera, imat će više smisla prvo stvoriti klasu zahtjeva. To je zato što metoda kontrolera koja obrađuje zahtjev mora naznačiti tip objekta zahtjeva u svom potpisu, što joj omogućuje automatsku validaciju dolaznih podataka obrasca (kako je navedeno u metodi rules(); više o tome kasnije). Za sada, ponovno upotrijebimo naredbu artisan za generiranje našeg stuba zahtjeva:

php artisan make:request UploadFileRequest

Ova naredba će generirati datoteku pod nazivom UploadFileRequest unutar app/Http/Requests/UploadFileRequest. Otvorite stub i pogledajte. Vidjet ćete da je vrlo jednostavna, sadrži samo dvije metode, authorize() i rules().

Stvaranje logike provjere valjanosti

Izmijenimo zahtjevnu tabelu kako bismo zadovoljili potrebe naše aplikacije. Izmijenimo datoteku tako da izgleda ovako:

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class UploadFileRequest extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return true;
}

/**
* Get the validation rules that apply to the request.
*
* @return array
*/
public function rules()
{
return [
'fileName' => 'required|string',
'userFile' => 'required|file'
];
}
}

Nije puno promjena, ali primijetite da metoda authorize() sada vraća true umjesto false. Ova metoda odlučuje hoće li dopustiti zahtjevu da uđe u aplikaciju ili ne. Ako je postavljena na false, sprječava ulazak zahtjeva u sustav. Ovo bi bilo vrlo korisno mjesto za postavljanje bilo kakvih provjera autorizacije korisnika ili bilo koje druge logike koja može odlučiti može li se zahtjev proslijediti kontroleru. Za sada ovdje samo vraćamo true kako bismo dopustili svemu i svačemu da koristi zahtjev.

Druga metoda, rules(), je mjesto gdje sva magija dolazi do izražaja u vezi s validacijom. Ideja je jednostavna: vratiti niz koji sadrži skup pravila u obliku:

'formFieldName' => 'constraints this field has separated by pipe characters (|)'

Postoji mnogo različitih ograničenja provjere valjanosti koje Laravel podržava odmah po vađenju iz kutije. Potpuni popis potražite u mrežnoj dokumentaciji ovdjeZa našu aplikaciju za prijenos, postojat će dva polja koja se prosljeđuju putem POST zahtjeva iz obrasca na prednjem kraju. Parametar fileName mora biti uključen unutar tijela obrasca (tj. obavezan) i koristi se kao naziv datoteke pod kojim ćemo pohraniti datoteku u pohranu (to se radi u kontroleru; doći ćemo do toga malo kasnije). Također određujemo da naziv datoteke mora biti niz znakova dodavanjem znaka okomite crte (|) i riječi 'string'. Ograničenja su uvijek odvojena okomitim crtama, što vam omogućuje da odredite bilo koje dodatne kriterije za zadano polje u jednom retku.

Drugi parametar, userFile, je stvarna datoteka koju korisnik prenosi s obrasca na web stranici. userFile je također obavezan i morate biti datoteka. Bilješka: Ako bismo očekivali da prenesena datoteka bude slika, koristili bismo ograničenje slike, koje bi ograničilo vrste datoteka koje se prihvaćaju kao jedna od popularnih vrsta slika (jpeg, png, bmp, gif ili svg). Budući da želimo dopustiti korisniku da prenese bilo koju vrstu datoteke, držat ćemo se ograničenja validacije datoteke.

To je otprilike sve što objekt zahtjeva nudi. Njegov glavni zadatak je jednostavno držati prihvatljiv skup kriterija (ograničenja) koje parametri tijela obrasca moraju zadovoljiti kako bi se moglo dublje proći u aplikaciji. Također treba napomenuti da ova dva polja (userFile i fileName) također moraju biti navedena unutar HTML koda u obliku polja za unos (s nazivom polja koji odgovara nazivu unutar objekta zahtjeva).

Možda se pitate: ovo definira karakteristike onoga što bi zahtjev za obrascem trebao sadržavati, ali gdje se vrši stvarna provjera tih ograničenja? O tome ćemo kasnije.

Modificiranje kontrolera

Otvorite aplikaciju/Http/Controllers/UploadController i napravite sljedeće promjene u njoj:

<?php

namespace App\Http\Controllers;

use Illuminate\Contracts\Container\BindingResolutionException;
use Illuminate\Http\Request;
use App\Http\Requests\UploadFileRequest; //our new request class
use Illuminate\Support\Facades\Storage;

class UploadController extends Controller
{
/**
* This is the method that will simply list all the files uploaded by name and provide a
* link to each one so they may be downloaded
*
* @param $request : A standard form request object
* @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
* @throws BindingResolutionException
*/
public function list(Request $request)
{
$uploads = Storage::allFiles('uploads');

return view('list', ['files' => $uploads]);
}

/**
* @param $file
* @return \Symfony\Component\HttpFoundation\BinaryFileResponse
* @throws BindingResolutionException
*/
public function download($file)
{
return response()->download(storage_path('app/'.$file));
}

/**
* @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
* @throws BindingResolutionException
*/
public function upload()
{
return view('upload');
}

/**
* This method will handle the file uploads. Notice that the parameter's typehint
* is the exact request class we generated in the last step. There is a reason for this!
*
* @param $request : The special form request for our upload application
* @return array|\Illuminate\Http\UploadedFile|\Illuminate\Http\UploadedFile[]|null
* @throws BindingResolutionException
*/
public function process(UploadFileRequest $request)
{
//At this point, the parameters passed into the $request (from form) are
//valid--they satisfy each of the conditions inside the rules() method

$filename = $request->fileName; //parameters have already been validated
$file = $request->file('userFile'); //so we don't need any additional isset()

$extension = $file->getClientOriginalExtension(); //grab the file extension
$saveAs = $filename . "." . $extension; //filename to save file under

$file->storeAs('uploads', $saveAs, 'local'); //save the file to local folder

return response()->json(['success' => true]); //return a success message
}
}

Dakle, to je prilično jednostavan pristup spremanju prenesenih datoteka na disk. Evo detaljnog opisa metode process() iznad:

• U metodi kontrolera upišite klasu zahtjeva koja izvršava glavnu funkcionalnost kako bismo mogli automatski validirati dolazne podatke.
• Preuzmite datoteku iz (sada validiranog) objekta zahtjeva unutar metode kontrolera.
• Iz zahtjeva preuzmite naziv datoteke.
• Generirajte konačni naziv datoteke koji će se koristiti za spremanje datoteke pod. Metoda getClientOriginalExtension() jednostavno hvata originalni nastavak učitane datoteke.
• Pohranite datoteku u lokalni datotečni sustav koristeći njegovu storeAs() metodu, prosljeđujući imenovani put unutar direktorija /storage kao prvi argument i naziv datoteke pod koji će se spremiti kao drugi.
• Vrati JSON odgovor koji označava da je zahtjev bio uspješan.

Predložak oštrice

Posljednji veliki dio ove slagalice je predložak blade-a, koji će sadržavati sav HTML, CSS i JavaSkripta za našu jednostavnu aplikaciju. Evo koda; objasnit ćemo ga kasnije.

<body>
<h1>Upload a file</h1>
<form id="uploadForm" name="uploadForm" action="{{route('process')}}" enctype="multipart/form-data">
@csrf
<label for="fileName">File Name:</label>
<input type="text" name="fileName" id="fileName" required /><br />
<label for="userFile">Select a File</label>
<input type="file" name="userFile" id="userFile" required />
<button type="submit" name="submit">Submit</button>
</form>
<h2 id="success" style="color:green;display:none">Successfully uploaded file</h2>
<h2 id="error" style="color:red;display:none">Error Submitting File</h2>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$('#uploadForm').on('submit', function(e) {
e.preventDefault();
var form = $(this);
var url = form.attr('action');
$.ajax({
url: url,
type: "POST",
data: new FormData(this),
processData: false,
contentType: false,
dataType: "JSON",
success: function(data) {
$("#fileName").val("");
$("#userFile").val("");
}
}).done(function() {
$('#success').css('display', 'block');
window.setTimeout(()=>($("#success").css('display', 'none')), 5000);
}).fail(function() {
$('#error').css('display', 'block');
window.setTimeout(()=>($("#error").css('display', 'none')), 5000);
});
});
</script>
</body>
</html>

Evo što je naše / Učitaj stranica izgleda ovako:

Ovo je vrlo tipičan primjer blade datoteke koja sadrži HTML obrazac i JavaSkripta/jQuery za dodavanje asinkrone funkcionalnosti (kako se stranica ne bi osvježavala). Postoji osnovni oznaka bez atributa metode (što ćemo objasniti za trenutak) i s neobičnim atributom akcije s vrijednošću {{route('process')}}. U bladeu je to ono što je poznato kao Direktiva. Direktiva je samo otmjeno ime za funkciju; to su funkcije specifične za predloške blade alata koje izvode različite operacije uobičajene za izradu web stranica i web aplikacija. Za bolje razumijevanje svih korisnih stvari koje blade alat može učiniti, pogledajte dokumentaciju. ovdjeU gornjem slučaju, koristimo direktivu rute za generiranje URL za slanje našeg obrasca.

Imajte na umu da smo ranije u aplikaciji definirali naše rute unutar web.php datoteke, navodeći lako pamtljivo ime za svaku od njih. Direktiva {{route()}} prihvaća ime rute, pretražuje ga unutar interno pohranjenog popisa ruta i generira puni URL na temelju definicije te rute u datoteci web.php. U ovom prvom slučaju navodimo da želimo da obrazac šalje svoje poslane podatke u /process URL naše aplikacije, koja je definirana kao POST ruta.

Sljedeće što ste možda primijetili je oznaka @csrf odmah ispod oznake za otvaranje obrasca. U Bladeu, ova oznaka generira parametar _token na obrascu, koji se provjerava unutar aplikacije prije nego što se dopusti obrada podataka obrasca. To osigurava da su podaci unutar obrasca valjanog porijekla i sprječava napade krivotvorenja zahtjeva s više web-mjesta. Za više informacija o tome pogledajte docs.

Nakon ovoga definiramo naš obrazac kao normalan; međutim, imajte na umu da su nazivi parametara obrasca, userFile i fileName, potpuno isto kako je definirano unutar našeg objekta zahtjeva. Ako bismo zaboravili uključiti unos za zadani parametar koji je definiran u objektu zahtjeva (ili bismo ga krivo napisali), zahtjev bi propao i vratila bi se greška, što bi spriječilo da izvorni zahtjev za obrascem ikada dođe do metode kontrolera koja se nalazi na UploadController@process.

Samo naprijed, isprobajte i pošaljite nekoliko datoteka aplikaciji pomoću ovog obrasca. Nakon toga, idite na /popis da biste vidjeli sadržaj mape za učitavanje, s datotekama koje ste učitali navedenima u tablici:

Veću sliku

Napravimo korak unatrag i pogledajmo što smo napravili u ovom Laravel tutorialu.

Ovaj dijagram prikazuje aplikaciju u trenutnom stanju (isključeni su detalji visoke razine):

Trebali biste se sjetiti da objekt zahtjeva koji smo konstruirali na početku ovog Laravel tutoriala treba imati iste parametre definirane u svojoj metodi pravila kao i na obrascu u predlošku bladea (ako ne, ponovno pročitajte odjeljak "Stvaranje logike validacije"). Korisnik unosi obrazac na web stranici koja se prikazuje putem mehanizma predložaka bladea i šalje obrazac. jQuery kod predloška na dnu zaustavlja zadano slanje (koje bi automatski preusmjerilo na zasebnu stranicu), stvara ajax zahtjev, učitava zahtjev s podacima obrasca i prenesenom datotekom te šalje cijelu stvar u prvi sloj naše aplikacije: zahtjev.

Objekt zahtjeva popunjava se povezivanjem parametara unutar metode rules() s poslanim parametrima obrasca, a zatim validira podatke prema svakom navedenom pravilu. Ako su sva pravila zadovoljena, zahtjev se prosljeđuje bilo kojoj metodi kontrolera koja odgovara vrijednostima definiranim u datoteci rute web.php. U ovom slučaju, metoda process() UploadControllera obavlja posao. Nakon što dođemo do kontrolera, već znamo da je zahtjev prošao validaciju, tako da ne moramo ponovno testirati je li zadani naziv datoteke doista niz znakova ili parametar userFile zapravo sadrži neku vrstu datoteke. Možemo nastaviti kao i obično.

Metoda kontrolera zatim uzima validirane parametre iz objekta zahtjeva, generira puni naziv datoteke spajanjem unesenog parametra fileName s izvornom ekstenzijom userFile, pohranjuje datoteku unutar direktorija u našoj aplikaciji, a zatim vraća jednostavan JSON kodiran odgovor kojim se potvrđuje da je zahtjev bio uspješan. Odgovor prima jQuery logika, koja obavlja još nekoliko zadataka povezanih s korisničkim sučeljem, kao što je prikazivanje poruke o uspjehu (ili pogrešci) 5 sekundi, zatim njezino skrivanje, kao i brisanje prethodnih unosa obrasca. To je kako bi korisnik sa sigurnošću znao da je zahtjev bio uspješan i mogao prenijeti drugu datoteku ako želi.

Također, obratite pozornost na gornji dijagram gdje se povlači granica između klijenta i poslužitelja. Ovaj koncept je apsolutno ključan za razumijevanje i pomoći će vam u rješavanju problema koje biste mogli imati u budućnosti prilikom žongliranja, na primjer, s više asinkronih zahtjeva koji se mogu pojaviti u bilo kojem trenutku. Razdvajanje je točno na granici objekta zahtjeva. Sam objekt zahtjeva može se smatrati "ulazom" u ostatak aplikacije. On obavlja početnu validaciju i registraciju vrijednosti obrasca proslijeđenih iz web preglednika. Ako se smatraju valjanima, tada se nastavlja prema kontroleru. Sve prije toga nalazi se na prednjem kraju ("klijent" doslovno znači "na korisnikovom računalu"). Odgovor se vraća iz aplikacije natrag na klijentsku stranu, gdje naš jQuery kod strpljivo osluškuje njegov dolazak i obavlja nekoliko jednostavnih UI zadataka nakon što ga primi.

Također smo obradili mnoga važna često postavljana pitanja Pitanja za intervju vezana uz Laravel i PHP za brucoše kao i iskusne kandidate kako bi dobili pravi posao.

Pitanja i odgovori