LARAVEL

My First Simple Image-File UPLOAD-EDIT

Project with MySql

Hello Dear Reader,

Before starting,

Please check all of my ebooks on Amazons Kindle Direct Publishing.

( more information , please click on it!. )

Visit Amazons TANER PERMAN Page http://www.amazon.com//e/B00IJHZBJG

If you dont know how to install Laravel , please first read my e-book
How Do I Use Laravel To Make Money?
(http://www.amazon.com/How-Use-Laravel-Make-Money/dp/1518786138/
) on Amazon

Laravel is very strong web platform.
You can use it to realize your dreams.
After you read this e-book,
You will be able learn to use Image-File UPLOAD-EDIT Operations in
Laravel 5.

Lets start

1. Create buttonstore Project

( Note: If you did not have composer you can download it from this address
http://getcomposer.org/composer.phar )
Please pay attention, Before we type our command, you must be on localhost directory
like that

If you didnt have Xampp program to run php,apache,..programmes,

go to this address https://www.apachefriends.org/index.html
you will see the page like that


After you download Xampp programme on your computer,
Open command prompt programme,



Type this command
composer create-project laravel/laravel buttonstore prefer-dist










When you go to http://localhost/buttonstore/public/ address, you will able to see this
picture

2. Create Database for buttonstore












3. Database setup for buttonstore
Now You can go buttonstore/.env and open the .env file and you must change
the configuration like that

You must change your DB_DATABASE name + DB_USERNAME +

DB_PASSWORD on this file.
When you set your values on the file, You must save this file as .env by using
double quotes like that .env

Then open config/database.php file and set the database settings like that


4. Create ButtonController for buttonstore

Type this command line on your Project folder like that

php artisan make:controller ButtonController

You can also follow ButtonController.php file from here
<?php namespace App\Http\Controllers;

use App\Button;

use App\Http\Requests;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class ButtonController extends Controller {

public function index() {
$buttons = Button::all();
return view(buttons.index,compact(buttons));
}

public function create() {
return view(buttons.create);
}

public function store(Request $request) {

$this->validate($request, [

title => required
]);

if ($request->hasFile(image)) {

$file = $request->file(image);
$file_name = $file->getClientOriginalName();
$random_name = rand(1,999999999999999999999);
$file_name = $random_name.-.$file->getClientOriginalName();
$file->move(img/, $file_name);

$data[image] = $file_name;

}
Button::create($data);
return redirect()->route(buttons.index);
}

public function show($id) {
$button = Button::find($id);
return view(buttons.show,compact(button));
}

public function edit($id) {

$button = Button::find($id);
return view(buttons.edit,compact(button));
}

public function update(Request $request, $id) {

$this->validate($request, [
title => required

]);

Button::find($id)->update($request->all());
$button = Button::find($id);

// Image Update codes
if ($request->hasFile(image)) {

$file = $request->file(image);
$file_name = $file->getClientOriginalName();

 $random_name = rand(1,999999999999999999999);
$file_name = $random_name.-.$file->getClientOriginalName();
$file->move(img/, $file_name);
$button->image = $file_name;
}
$button->save();
return redirect()->route(buttons.index);
}
public function destroy($id) {
Button::find($id)->delete();
return redirect(buttons);
}
}




5. Create Button model
Type this command like that
Php artisan make:model Button

6. Install Form and Html Facades
Type this command Composer require illuminate/html

Then open config/app.php file and add in providers
Illuminate\Html\HtmlServiceProvider,

like that



Also add these codes in aliases in the same file like that
Form => Illuminate\Html\FormFacade,
Html => Illuminate\Html\HtmlFacade,




7. Setting Routes.php file

Open routes.php file buttonstore/app/http/routes.php

Type this command in routes.php file like that
Route::resource(buttons,ButtonController);



8. Insert imaginary data

You can also follw these codes from here

INSERT INTO `buttons` (`id`, `title`, `image`, `created_at`, `updated_at`) VALUES
(1, Title1, image1.JPG, 2014-08-06 05:45:25, 2015-12-01 09:31:19),
(2, Title2, image2.JPG, 2014-09-06 05:45:25, 2015-12-02 09:31:19),
(3, Title3, image3.JPG, 2014-10-06 05:45:25, 2015-12-03 09:31:19),
(4, Title4, image4.JPG, 2014-11-06 05:45:25, 2015-12-04 09:31:19),
(5, Title5, image5.JPG, 2014-12-06 05:45:25, 2015-12-05 09:31:19);

9.Create layout Folder for buttonstore


Then write these codes to create a template.blade.php under layout folder.

You can also follow these codes from here.






<!doctype html>
<html lang=en>
<head>
<meta charset=UTF-8>

<title>Button Store</title>
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap
/3.3.4/css/bootstrap.min.css>
</head>
<body>
<div class=container>
@yield(content)
</div>
</body>
</html>

10.Create buttons folder under views

buttonstore/resources/views/buttons like that

Then Create index.blade.php file under buttons folder like that


You can also follow the codes from here
@extends(layout/template)
@section(content)
<h1>Button Store</h1>
<a href={{url(/buttons/create)}} class=btn btn-success>Create Button</a>
<hr>
<table class=table table-striped table-bordered table-hover>
<thead>
<tr class=bg-info>
<th>Id</th>
<th>Title</th>
<th>Images</th>
<th colspan=3>Actions</th>
</tr>

</thead>
<tbody>
@foreach ($buttons as $button)
<tr>
<td>{{ $button->id }}</td>
<td>{{ $button->title }}</td>

<td><img src={{asset(img/.$button->image)}} height=35 width=30></td>
<td><a href={{url(buttons,$button->id)}} class=btn btn-primary>Read</a></td>
<td><a href={{route(buttons.edit,$button->id)}} class=btn btnwarning>Update</a></td>
<td>
{!! Form::open([method => DELETE, route=>[buttons.destroy, $button->id]]) !!}
{!! Form::submit(Delete, [class => btn btn-danger]) !!}
{!! Form::close() !!}
</td>
</tr>
@endforeach
</tbody>
</table>
@endsection








Then Create show.blade.php file under buttons folder like that


You can also follow the codes from here

@extends(layout/template)
@section(content)
<h1>Button Show</h1>
<form class=form-horizontal>
<div class=form-group>
<label for=image class=col-sm-2 control-label>Image {{ $button->id }}</label>
<div class=col-sm-10>
<img src={{asset(img/.$button->image)}} height=180 width=150 class=imgrounded>
</div>
</div>
<div class=form-group>
<label for=title class=col-sm-2 control-label>Title</label>
<div class=col-sm-10>
<input type=text class=form-control id=title placeholder={{$button->title}}
readonly>
</div>

</div>
<div class=form-group>
<div class=col-sm-offset-2 col-sm-10>
<a href={{ url(buttons)}} class=btn btn-primary>Back</a>
</div>
</div>
</form>
@stop

To Create create.blade.php file under buttons folder like that

You can also follow the codes from here

@extends(layout.template)
@section(content)
<h1>Create New Button</h1>

{!! Form::open(array(route => buttons.store,class => form,files => true)) !!}

<div class=form-group>
{!! Form::label(Title, Title:) !!}
{!! Form::text(title,null,[class=>form-control]) !!}
</div>

<div class=form-group>
{!! Form::label(Image, Image:) !!}
{!! Form::file(image,null,[class=>form-control]) !!}
</div>
<div class=form-group>
{!! Form::submit(Save, [class => btn btn-primary form-control]) !!}
</div>
{!! Form::close() !!}
@stop

To Create edit.blade.php file under buttons folder like that

You can also follow the codes from here

@extends(layout.template)
@section(content)
<h1>Update Button</h1>

{!! Form::model($button,[route => [buttons.update, $button->id], files => true,
method => PUT]) !!}


<div class=form-group>
{!! Form::label(Title, Title:) !!}
{!! Form::text(title,null,[class=>form-control]) !!}
</div>

<div class=form-group>
{!! Form::label(Image, Image:) !!}
{!! Form::file(image, null) !!}
</div>
<div class=form-group>
{!! Form::submit(Update, [class => btn btn-primary]) !!}
</div>
{!! Form::close() !!}
@stop

Note : Also you must create a new folder called img under

buttonstore/public/ folder to put images files. Like that

Visit Amazons TANER PERMAN Page http://www.amazon.com//e/B00IJHZBJG