Bootstrap Tutorial : Grid System Bootstrap

Grid System Bootstrap - Bootstrap tutorial for beginner how to understand with System Grid in bootstrap templates, What is Bootstrap Grid System? In Bootstrap 3 introduces the responsive mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases (max columns is 12).

On previews lessons, we have learn how to getting started using Bootstrap templates, just go to this link.

Understanding Grid System

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

1. Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
2. Use rows to create horizontal groups of columns.
3. Content should be placed within columns, and only columns may be immediate children of rows.
4. Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
5. Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
6. The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
7. Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
8. If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
9. Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.

More references here http://getbootstrap.com/css/
We will learn about Grid System in bootstrap for step by step

#Three Column Bootstrap Layouts

Following this HTML source code

   <div class="container">
      <!--Row with three equal columns-->
      <div class="row">
        <div class="col-sm-4">
          it's left column
        </div>
        <div class="col-sm-4">
          it's middle column
        </div>
        <div class="col-sm-4">
          it's right column
        </div>
      </div>
    <!--Row with three columns divided in 1:4:1 ratio-->
    <div class="row">
        <div class="col-md-2">
          this is left column
        </div>
        <div class="col-md-8">
          this is middle column
        </div>
        <div class="col-md-2">
          this is right column
        </div>
      </div>
    </div>

#Bootstrap Layouts with Column Wrapping Feature

We will need Wrapping Feature for work with viewport size, The following example will create a three column layout on medium devices like laptops and desktops, as well as on tablets (e.g. Apple iPad) in landscape mode.

First, add an simple css in our idex.html file

<style type="text/css">
      /* Some custom styles to beautify this example */
      .demo-content{
          padding: 15px;
          font-size: 18px;
          min-height: 300px;
          background: #dbdfe5;
          margin-bottom: 10px;
      }
      .demo-content.bg-alt{
          background: #abb1b8;
      }
      /* Some custom media query to make
         this example even better */
      @media screen and (max-width: 991px){
          .flexible{
              min-height: 150px;
          }
      }
    </style>

Next, add wrapping feature

<div class="container">
      <!-- Bootstrap Layouts with Column Wrapping Feature -->
      <div class="row">
        <div class="col-sm-3 col-md-2">
          <div class="demo-content">.col-sm-3 .col-md-2</div>
        </div>
        <div class="col-sm-9 col-md-8">
          <div class="demo-content">.col-sm-9 .col-md-8</div>
        </div>
        <div class="col-sm-12 col-md-2">
          <div class="demo-content">.col-sm-12 .col-md-2</div>
        </div>
      </div>
    </div>

Bootstrap Grid Options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

Video tutorial Grid System Bootstrap

See you next Lessons

Bootstrap Tutorial : Getting Started Using Framework Bootstrap

Bootstrap 3 Tutorial - What is Bootstrap? Framework Bootstrap is the most popular front end framework since one time earlier. How to install bootstrap? this lessons will explaint how we strated to create web responsive design using bootstrap.

Getting Strated

First step, we need to download Bootstrap files from offical website http://getbootstrap.com/getting-started/#download

Next, create new project in your localhost/server and open it with your Text editor, we will create new file (index.html) and add basic template using bootstrap.

Bootstrap Basic Template

<!DOCTYPE html>
<html 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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>My First Bootstrap Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

now, just execute and try our index.html page, you will get an first bootstrap page, that have a responsive design using desktop or mobile.

Video tutorial Getting Started Using Framework Bootstrap

See you next time

AngularJS Tutorial : AngularJS 2.0 Released, What’s New?

AngularJs Tutorial - As we know, JavaScript Framework AngularJS has become one of the most popular open source in the world in this year. AngularJS has matured into a client-side MVW framework (Model-View-Whatever) for the building of complex single-page applications. It places equal importance on application testing and application writing, while simplifying the development process.

At the previews lessons, we have learn how to install AngularJs 1.5.2, please read on this link.

What's New in AngularJS 2.0?

The current version of Angular is 1.3. This version is both stable and performant and is used by Google (the framework’s maintainers) to power a great many of their applications (it’s estimated that that there are over 1600 apps inside of Google running on Angular 1.2 or 1.3).

AtScript

AtScript is a superset of ES6 and it’s being used to develop Angular 2.0. It’s processed by the Traceur compiler (along with ES6) to produce ES5 code and uses TypeScript’s type syntax to generate runtime type assertions instead of compile time checks. However, AtScript isn’t compulsory—you will still be able to use plain JavaScript/ES5 code instead of AtScript to write Angular apps.
Improved Dependency Injection (DI)

Dependency injection (a software design pattern in which an object is passed its dependencies, rather than creating them itself) was one of the factors that initially differentiated Angular from its competitors. It is particularly beneficial in terms of modular development and component isolation, yet its implementation was plagued with problems in Angular 1.x. Angular 2.0 will will address these issues, as well as adding missing features such as child injectors and lifetime/scope control.

Annotations

AtScript provides tools for associating metadata with functions. This facilitates the construction of object instances by providing the required information to the DI library (which will check for associated metadata when calling a function or creating an instance of a class). It will be also easy to override parameter data by supplying an Inject annotation.

Child Injectors

A child injector inherits all the services of its parent with the capability of overriding them at the child level. According to requirement, different types of objects can be called out and automatically overridden in various scopes.

Instance Scope

The improved DI library will feature instance scope control, which will become even more powerful when used with child injectors and your own scope identifiers.

Templating and Data Binding

Let’s take a look at templating and data binding as they go hand in hand when developing apps.

Dynamic Loading

This is a feature which is missing from the current version of Angular. It will be addressed by Angular 2.0, which will let developers add new directives or controllers on the fly.

Templating

In Angular 2.0, the template compilation process will be asynchronous. As the code is based on the ES6 module spec, the module loader will load dependencies by simply referencing them in the component definition.

Directives

In Angular 2.0 there will be three kinds of directives:

1. Component Directives – These will create reusable components by encapsulating logic in JavaScript, HTML or an optional CSS style sheet.
2. Decorator Directives – These directives will be used to decorate elements (for example adding a tooltip, or showing/hiding elements using ng-show/ng-hide).
3. Template Directives – These will turn HTML into a reusable template. The instantiating of the template and its insertion into the DOM can be fully controlled by the directive author. Examples include ng-if and ng-repeat.

Routing Solution

The initial Angular router was designed to handle just a few simple cases, yet as the framework grew, more and more features were bolted on. The router in Angular 2.0 has been reworked to be simple, yet extensible. It will include the following basic features:

1. Simple JSON-based Route Config
2. Optional Convention over Configuration
3. Static, Parameterized and Splat Route Patterns
4. URL Resolver
5. Query String Support
6. Use Push State or Hashchange
7. Navigation Model (For Generating a Navigation UI)
8. Document Title Updates
9. 404 Route Handling
10. Location Service
11. History Manipulation

Now, let’s check out the features which make the improved router a catalyst to take Angular 2.0 to new heights.

Child Router

The child router will convert each component of the application into a smaller application by providing it with its own router. It will help encapsulate entire feature sets of an application.
Screen Activator

This will give developers finer control over the navigation lifecycle, via a set of can* callbacks:

1. canActivate – Allow/Prevent navigating to the new controller.
2. activate – Respond to successful navigation to the new controller.
3. canDeactivate – Allow/Prevent navigation away from the old controller.
4. deactivate – Respond to successful navigation away from the old controller.

These callbacks will allow the developer to return Boolean values, a Promise for that value, or a Navigation Command (for a lower level control).

Design

All of this logic is built using a pipeline architecture which makes it incredibly easy to add one’s own steps to the pipeline or remove default ones. Moreover, its asynchronous nature will allow developers to a make server request to authenticate a user or load data for a controller, while still in the pipeline.

Logging

Angular 2.0 will contain a logging service called diary.js—a super useful feature which measures where time is spent in your application (thus enabling you to identify bottlenecks in your own code).

Scope

$scope will be removed in Angular 2.0 in favor of ES6 classes.

Conclusion

There is a lot of excitement and buzz around Angular 2.0 at the moment and this will only heighten as its release date nears. The beginning of March will see the next ng-conf take place where it’s likely that more details of the next version will emerge.

Meanwhile opinion remains divided as to whether breaking change is a good thing. Proponents claim there are hard limits on the improvements that can be made to 1.x, whilst opponents are understandably nervous at the apparent lack of a migration plan.

Resources : https://www.sitepoint.com/whats-new-in-angularjs-2/

See you next lessons..

Python 3 Tutorial : IF ELIF ELSE Conditionals Statements in Python 3

Python 3 Tutorial - In python 3 languages, else statement can be combined with an if/elif statement. Else statement has mean the block of code that will executes if the conditional expression resolves to 0 or a FALSE value in the if statement or an function.

At the previews lessons, we have learn about python 3, please read :

1. Basics Syntax in Python 3
2. Create First Program with Python 3
3. How to Install Python Tools for Visual Studio 2015

Next, we will learn how to use IF ELIF ELSE Conditionals Statements in Python 3, The else statement is an optional statement and there could be at most only one else statement following if syntax :

IF ELSE Statement

#!/usr/bin/python3
if expression:
   our statement(s)
else:
   our statement(s)

for more example using the if else statement in python 3

#!/usr/bin/python3
data = int(input("Enter any integer : "))
if data < 6000:
    price = data * 1.14
    print ("the price is ",price)
else:
    price = data * 2
    print ("the price is ",price)
print ("All Price is :",data - price)

try to debugging your application, then tell me what're you getting.

IF ELIF ELSE Statements

In python 3 language, elif statement will allows you to check multiple expressions for TRUE and execute a block of code as soon as one of the conditions evaluates to TRUE.

To try using if elif else statement, following this python syntax code :

if expression-1:
   our statement(s)
elif expression-2:
   our statement(s)
elif expression-3:
   our statement(s)
else:
   our statement(s)

for example

#!/usr/bin/python3
data = int(input("Enter any integer : "))
if data < 6000:
    price = data * 1.14
    print ("the price is ",price)
elif data < 3000:
    discount= data * 1
    print ("the price is ",price)
else:
    price = data * 2
    print ("the price is ",price)
print ("All Price is :",data - price)

if you still confused, or you use python 2, go to this page "Python 2 Tutorial".

see you next lessons ......

Python 3 Tutorial : Basics Syntax in Python 3

Python 3 tutorial - in Python 3 or python 2, we has many similarities to C, and Java programming languages.

At the previews lessons, we have learn about python 3, please read

1. How to install python tools for visual studio
2. How to create "Hello World" program using python 3

in this lessons, we will Explain about Basics Syntax that can use in Python 3.

Start writing Code

As we know, to print simple string with python 3, just following this script

print ("Hello World!")

When you execute that file (helloworld.py) on your command or debugging from visual studio, you will get this result :

Hello World!

Lines and Indentation

To indicate an blocks of a code in the class in python 3, that doesn't use an braces({}). For this point, python 3 not same with other programming language, see code line below.

if True:
    print ("It's True statement")
else:
    print ("It's False statement")

Multi-Line Statements

Multi line Statements in Python 3  typically end with a new line. Python does, however, allow the use of the line continuation character (\) to denote that the line should continue.

data  = variable1 + \
        variable2 + \
        variable3

or, more example we can try use array in python 3

days  = ['Monday', 'Tuesday', 'Wednesday',
        'Thursday', 'Friday']

Quotation in Python

Python 3 programming language accepts single ('), double (") and triple (''' or """) quotes to denote string literals, as long as the same type of quote starts and ends the string.

just following this python simple code below :

word      = 'word'
sentence  = "This is a sentence."
paragraph = """This is a paragraph. It is
            made up of multiple lines and sentences."""

Comments in Python

To add comment in python 3 programming languages A hash sign (#) that is not inside a string literal begins a comment. All characters after the # and up to the end of the physical line are part of the comment and the Python interpreter ignores them.

#!/usr/bin/python3
# First comment
print ("Hello World!") # next comment
print ('let me introduce myself') # this, comment too,
# this comment to print ("My name is Harison, I work at an Private Company in Indonesia.")
print ("'CV.Delta Microtech' as a .Net Programmer since 2010.")
print ("Please Subscribe and Follow Our Social Medias 'Sector Code' to get Latest tutorials and will be send to your email everyday for free!,")
print ('Nice to meet you and Happy coding :) all ^^')

Multiple Statements on a Single Line

in python 3 programming language, The semicolon ( ; ) will allows for multiple statements on the single line given that neither statement starts a new code block. Here is a sample snip using the semicolon :

import sys; a = 'string'; sys.stdout.write(a + '\n')

Multiple Statement Groups as Suites

A group of individual statements, which make a single code block are called suites in Python. Compound or complex statements, such as if, while, def, and class require a header line and a suite.

Header lines begin the statement (with the keyword) and terminate with a colon ( : ) and are followed by one or more lines which make up the suite. For example, following this python code :

if expression : 
   suite
elif expression : 
   suite 
else : 
   suite

See you next Lessons..

Python 3 Tutorial : Create First Program with Python 3

Python 3 tutorial - Print Hello world and create your first program using python 3 programming languages. at previews lessons, we have learned how to install python tools in visual studio, please read How to Install Python Tools for Visual Studio 2015.

Next, we will create your first simple console application made with python 3 language,

"Hello World!" Program in Python 3

First step, please open your visual studio and create new python project, File > New > Project > Python > Python Application > create python project name "FirstPythonApp" and ok.

Add python source code in the FirstPythonApp.py

#!/usr/bin/python3
print ("Hello World!")
print ('let me introduce myself')
print ("My name is Harison, I work at an Private Company in Indonesia.")
print ("'CV.Delta Microtech' as a .Net Programmer since 2010.")
print ("Please Subscribe and Follow Our Social Medias 'Sector Code' to get Latest tutorials and will be send to your email everyday for free!,")
print ('Nice to meet you and Happy coding :) all ^^')

Next, try to debugging your program with pres "F5" key.

Video tutorial Create First Program with Python 3

See you next lessons ...

Python 3 Tutorial : How to Install Python Tools for Visual Studio 2015

Python 3 Tutorial - What's new in Python 3? Python 3 version released in 2008. Python 3.0 version is supposed to be backward incompatibles, later on many of its important features have been backported to be compatible with version 2.7.

This tutorial gives enough understanding on Python 3 version and We can learn step by step how to code with Python programming language using visual studio 2015.

How to Install Python Tools for Visual Studio 2015

First step - you must have visual studio on your computer before, i'm using visual studio 2015 Enterprise version.

Open your visual studio, on the top menu click file > new project > Python Templates > Install Python Tools for Visual Studio > Install

Next, we were told to waiting installation / update session. Please wait until installation process is finished.

Mybe, after python tools for visual studio was installed, you need to restarting your system and open your visual studio again.

Video Tutorial How to Install Python Tools for Visual Studio 2015

See you next lessons ...

#Part10 laravel 5 Blog Tutorial : Adding Bootsrtap Theme in Laravel 5.3

Create blog using Laravel 5.3 - This lesson bout how to add Bootstrap theme into Laravel project, at the privews lessons, we have learn about Bootstrap theme in Laravel 5.3, please read Adding Bootstrap Theme to Laravel 5.3.

What we needed?

1. Download Bootstrap file - to download bootstrap theme going here http://getbootstrap.com/
2. next, we will add Bootstrap theme into our project, stored on \public folder
3. create new page for master template (master.blade.php)
4. create bootstrap theme for all pages

After you hasbeen downloaded the Bootstrap files, please extract it into our project >> in the "public folder".

Next, we will create an master page, that using bootstrap theme, create new page stored on \resources\views and rename it with "master.blade.php"

master.blade.php

<!DOCTYPE html>
<html 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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <title>My First Blog</title>
    <!-- Bootstrap core CSS -->
    <link href="{{ asset('/css/bootstrap.min.css') }}" rel="stylesheet">
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="{{ asset('/css/ie10-viewport-bug-workaround.css') }}" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="{{ asset('/css/blog.css') }}" rel="stylesheet">
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="{{ asset('/js/ie-emulation-modes-warning.js') }}"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="blog-masthead">
      <div class="container">
        <nav class="blog-nav">
          <a class="blog-nav-item active" href="/blog">Home</a>
          <a class="blog-nav-item" href="#">New features</a>
          <a class="blog-nav-item" href="#">Press</a>
          <a class="blog-nav-item" href="#">New hires</a>
          <a class="blog-nav-item" href="#">About</a>
        </nav>
      </div>
    </div>
    <div class="container">
      <div class="blog-header">
        <h1 class="blog-title">My First Blog</h1>
        <p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>
      </div>
      <div class="row">
        <div class="col-sm-8 blog-main">
          <div class="blog-post">
            @yield('content')
          </div><!-- /.blog-post -->
        </div><!-- /.blog-main -->
        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
          <div class="sidebar-module sidebar-module-inset">
            <h4>About Us</h4>
            <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
          </div>
          <div class="sidebar-module">
            @yield('sidebar2')
          </div>
        </div><!-- /.blog-sidebar -->
      </div><!-- /.row -->
    </div><!-- /.container -->
    <footer class="blog-footer">
      <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
      <p>
        <a href="#">Back to top</a>
      </p>
    </footer>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"></script>')</script>
    <script src="{{ asset('/js/bootstrap.min.js') }}"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="{{ asset('/js/ie10-viewport-bug-workaround.js') }}"></script>
  </body>
</html>

After done, your bootsrap master has created, next we will change all pages to make Bootstrap theme.

index.blade.php

@extends('master')
{{ Session::get('message') }}
@section('content')
<h1>My First Blog</h1>
@foreach ($blogs as $blog)
  <h2><a href="/blog/{{ $blog->id }}">{{ $blog->title }}</a></h2>
  {{ date('F d, Y', strtotime($blog->created_at)) }}
  <p>{{ $blog->description }}</p>
  <a href="/blog/{{ $blog->id }}/edit">Edit this Post</a><br>
  <form class="" action="/blog/{{ $blog->id }}" method="post">
    <input type="hidden" name="_method" value="delete">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <input type="submit" name="name" value="delete">
  </form>
  <hr>
@endforeach
{!! $blogs->links() !!}
@stop
@section('sidebar2')
  <h4>Archives</h4>
  @foreach ($blogs as $blog)
    <ol class="list-unstyled">
      <li><a href="/blog/{{ $blog->id }}">{{ $blog->description }}</a></li>
    </ol>
  @endforeach
@stop

edit.blade.php

<!-- @if (count($errors) > 0)
  <ul>
    @foreach ($errors->all() as $error )
      <li>{{ $error }}</li>
    @endforeach
  </ul>
@endif -->
@extends('master')
@section('content')
  <h2>Edit Article Post</h2>
  <form class="" action="/blog/{{ $blog->id }}" method="post">
    <input type="text" name="title" value="{{ $blog->title }}" placeholder="this is title"><br>
    {{ ($errors->has('title')) ? $errors->first('title') : '' }} <br>

    <textarea name="description" rows="8" cols="40" placeholder="this is description">{{ $blog->description }}</textarea><br>
    {{ ($errors->has('description')) ? $errors->first('description') : '' }} <br>

    <input type="hidden" name="_method" value="put">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <input type="submit" name="name" value="edit">
  </form>
@stop
// or you can add some links in your sidebar

next, on the single page

detail.blade.php

@extends('master')
@section('content')
  <h2>{{ $blog->title }}</h2>
  <p>
    {{ $blog->description }}
  </p>
@stop

Create.blade.php

<!-- @if (count($errors) > 0)
  <ul>
    @foreach ($errors->all() as $error )
      <li>{{ $error }}</li>
    @endforeach
  </ul>
@endif -->
@extends('master')
@section('content')
  <h2>Add new post</h2>
  <form class="" action="/blog" method="post">
    <input type="text" name="title" value="" placeholder="this is title"><br>
    {{ ($errors->has('title')) ? $errors->first('title') : '' }} <br>
    <textarea name="description" rows="8" cols="40" placeholder="this is description"></textarea><br>
    {{ ($errors->has('description')) ? $errors->first('description') : '' }} <br>
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <input type="submit" name="name" value="post">
  </form>
@stop

Video Tutorial Adding Bootsrtap Theme in Laravel 5.3

See you next lessons ....

#Part9 laravel 5 Blog Tutorial : Pagination with Eloquent & Query Builder in Laravel 5.3

How to create blog using Laravel 5.3 - How to create Pagination (paginate method) using Eloquent and using Query builder in laravel 5.3.

Previews lessons, we have learned about simple CRUD operation in laravel 5.3, strarting from Create new data/post into database, edit the data, delete data from databases, validation and more.

if you still confused, just read our previews lessons :

1. Deleting Data Using Eloquent Method in Laravel 5.3
2. Update Database Recorded in laravel 5.3
3. Create Data, Validation, Redirect Page and Flash Message

Pagination with Eloquent & Query Builder in Laravel 5.3

To create pagination in laravel project, we two method to do that, first Pagination using Query builder and next pagination using Eloquent.

Pagination with Query Builder

at the our controller (BlogController.php) edit the Index function like this

BlogController.php

public function index()
    {
        // we will create index function
        // we need to show all data from "blog" table
        // $blogs = Blog::all();
        // first, pagination using query builder
        $blogs = DB::table('blog_post')->paginate(2);

        // pagination using Eloquent
        // $blogs = Blog::paginate(2);

        // show data to our view
        return view('blog.index',['blogs' => $blogs]);
    }

Pagination with Eloquent ORM

BlogController.php

public function index()
    {
        // we will create index function
        // we need to show all data from "blog" table
        // $blogs = Blog::all();
        // first, pagination using query builder
        // $blogs = DB::table('blog_post')->paginate(2);

        // pagination using Eloquent
        $blogs = Blog::paginate(2);

        // show data to our view
        return view('blog.index',['blogs' => $blogs]);
    }

Next, at the our index add link to pagination,

index.blade.php

{{ Session::get('message') }}

<h1>My First Blog</h1>
@foreach ($blogs as $blog)
  <h2><a href="/blog/{{ $blog->id }}">{{ $blog->title }}</a></h2>
  {{ date('F d, Y', strtotime($blog->created_at)) }}

  <p>{{ $blog->description }}</p>
  <a href="/blog/{{ $blog->id }}/edit">Edit this Post</a><br>
  <form class="" action="/blog/{{ $blog->id }}" method="post">
    <input type="hidden" name="_method" value="delete">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <input type="submit" name="name" value="delete">
  </form>
  <hr>
@endforeach

{!! $blogs->links() !!}

Video Tutorial Pagination with Eloquent & Query Builder in Laravel 5.3

See you Next Lessons ..............

#Part8 laravel 5 Blog Tutorial : Deleting Data Using Eloquent Method in Laravel 5.3

Create blog using laravel 5.3 part8 - this lessons about how to Deleting Data Using Eloquent Method in Laravel 5.3 apps/blog. At the previews lessons, we have learned about displaying data from database, make a new form to create new data and save it into database, validation, create single page, error valitaion in laravel 5.3, you just read that tutorial read previews lessons :

1. Update Database Recorded in laravel 5.3
2. Create Single Page and 404 Page in laravel 5.3

How to Delete data with Eloquent Syntax

First, we need to create new function to delete data in our database, in our controller (BlogController.php) add "destory" function like this :

BlogController.php

public function destroy($id)
    {
        $blog = Blog::find($id);
        $blog->delete();
        return redirect('blog')->with('message','data hasbeen deleted!');
    }

Next, we will create a link or a button delete in our index page, just edit your index page (index.blade.php)

index.blade.php

{{ Session::get('message') }}

<h1>My First Blog</h1>
@foreach ($blogs as $blog)
  <h2><a href="/blog/{{ $blog->id }}">{{ $blog->title }}</a></h2>
  {{ date('F d, Y', strtotime($blog->created_at)) }}

  <p>{{ $blog->description }}</p>
  <a href="/blog/{{ $blog->id }}/edit">Edit this Post</a><br>
  <form class="" action="/blog/{{ $blog->id }}" method="post">
    <input type="hidden" name="_method" value="delete">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <input type="submit" name="name" value="delete">
  </form>
  <hr>
@endforeach

Video Tutorial Deleting Data Using Eloquent Method in Laravel 5.3

See you next Lessons ....

#Part7 laravel 5 Blog Tutorial : Update Database Recorded in laravel 5.3

Create blog using laravel 5.3 part7 - this lessons about how to Update data into Database Recored in laravel 5.3 apps/blog. At the previews lessons, we have learned about displaying data from database, make a new form to create new data and save it into database, validation, create single page, error valitaion in laravel 5.3, you just read that tutorial read previews lessons :

1. Create Single Page and 404 Page in laravel 5.3
2. Insert Data, Validation, Redirect Page and Flash Message
3. Etc..

Next, we will learn how to edit and delete data/articel using Eloquent Orm method.
Updating Database Record

at the our Controller (BlogController.php) we need add some function, that is "edit function" dan "update function"

Edit Function

public function edit($id)
    {
        // edit function here
        $blog = Blog::find($id);

        // return to 404 page
        if(!$blog){
          abort(404);
        }
        // display the article to single page
        return view('blog.edit')->with('blog',$blog);
    }

Update Function

public function update(Request $request, $id)
    {
      // we will create validation function here
      $this->validate($request,[
          'title'=> 'required',
          'description' => 'required',
      ]);

      $blog = Blog::find($id);
      $blog->title = $request->title;
      $blog->description = $request->description;
      // save all data
      $blog->save();
      //redirect page after save data
      return redirect('blog')->with('message','data hasbeen edited!');
    }

Next, add new views in the \resources\views\blog folder (edit.blade.php)

edit.blade.php

<h2>Edit Article Post</h2>
<form class="" action="/blog/{{ $blog->id }}" method="post">
  <input type="text" name="title" value="{{ $blog->title }}" placeholder="this is title"><br>
  {{ ($errors->has('title')) ? $errors->first('title') : '' }} <br>

  <textarea name="description" rows="8" cols="40" placeholder="this is description">{{ $blog->description }}</textarea><br>
  {{ ($errors->has('description')) ? $errors->first('description') : '' }} <br>

  <input type="hidden" name="_method" value="put">
  <input type="hidden" name="_token" value="{{ csrf_token() }}">
  <input type="submit" name="name" value="edit">
</form>

Next, to create a link to the edit pages, we need update our Index page (index.blade.php)

index.blade.php

{{ Session::get('message') }}

<h1>My First Blog</h1>
@foreach ($blogs as $blog)
  <h2><a href="/blog/{{ $blog->id }}">{{ $blog->title }}</a></h2>
  <p>{{ $blog->description }}</p>
  <a href="/blog/{{ $blog->id }}/edit">Edit this Post</a>
  <hr>
@endforeach

Video Tutorial Update Database Recored in laravel 5.3

See you next lessons...

ASP.NET MVC 5 Tutorial - Build First ASP.NET Web Application

C# Asp.Net Mvc 5 Tutorial - Getting started to build web application example using Asp.Net Mvc 5. Microsoft .NET and Visual Studio was first introduced in 2002, ASP.NET Web Forms as a framework that makes it easy for web developers to build web applications. ASP.NET was created to replace previous Microsoft web technology that is Active Server Pages (ASP).

MVC ASP.NET is a framework to make it easier for developers to build web applications. Because both of them are above .NET Framework then the class library is also can be used on the ASP.NET Web Forms and MVC ASP.NET. In addition this framework allows developers to make use of the component or the helper has been provided with a way to use directly or make modifications to fit the needs of web applications that will be built. In both the framework also has rules that must be followed to avoid error (error) and generates the correct web application.

How to Build First ASP.NET Web Application

First, open your Visual studio (i using visual studio 2015), then create new project > Visual C# > Web > ASP.NET web Application and insert project name "BuildWebAppASPMvc" > OK

Next, we will create MVC 5 project for this lessons, Click on MVC and OK

we have allready make an simple web application using MVC 5 in C# Asp.Net

Try to debugging with your browser

Video tutorial Build First ASP.NET Web Application

See you next Lessons ......

#Part6 laravel 5 Blog Tutorial : Create Single Page and 404 Page in laravel 5.3

Create blog using laravel 5.3 part6 - this lessons about how to create single page, create error 404 page, if an item/article not found that display the 404 page and make a link into title of our article in index page.

At the previews lessons, we have learned about displaying data from database, make a new form to create new data and save it into datase, validation, just read previews lessons :

1. Insert Data, Validation, Redirect Page and Flash Message
2. Model Eloquent & Displaying Data from Database

Create Single Page & 404 Page in laravel 5.3

on the our controller (BlogController.php) add one functions to show data into single page, and show the 404 page if data has not in the database.

BlogController.php

public function show($id)
    {
        $blog = Blog::find($id);
        
        // return to 404 page
        if(!$blog){
          abort(404);
        }
        
        // display the article to single page
        return view('blog.detail')->with('blog',$blog);
    }

Next, create new file (detail.blade.php) in the our views, that file will be stored on /resources/views/blog/detail.blade.php

detail.blade.php

<h1>Detail Page</h1>
<h2>{{ $blog->title }}</h2>
<p>
  {{ $blog->description }}
</p>
<br>
<a href="/blog">Back to Home</a>

Next, to get your title shown as a link at home page, edit your index (index.blade.php) like this

index.blade.php

{{ Session::get('message') }}

<h1>My First Blog</h1>
@foreach ($blogs as $blog)
  <h2><a href="/blog/{{ $blog->id }}">{{ $blog->title }}</a></h2>
  <p>{{ $blog->description }}</p>
  <hr>
@endforeach

Video tutorial Create Single Page and 404 Page in laravel 5.3

See you next Lessons................

#Part5 laravel 5 Blog Tutorial : Insert Data, Validation, Redirect Page and Flash Message

Create Blog using Laravel 5.3 - Next Lessons about How to create blog apps using Laravel 5 Insert Data, Validation, Redirect Page and Flash Message, to continue the previews lessons, we will make new function to create/insert new data into database and create the form validation, after all data hasbeen saved, we will create redirect page to home page and displaying the message.

At the previews lessons, we has create database and connect it form laravel project, than we have configuration Restful Controllers and Routing System in our project, and make an Model Eloquent & Displaying Data from Databaseif you still confused, just read Model Eloquent & Displaying Data from Database.

Insert Data, Validation, Redirect Page and Flash Message

Add two function in our controller (BlogController.php) to show form insert data and will be proccess data into database

BlogController.php

public function create()
    {
        // we will return to our new views
        return view('blog.create');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  IlluminateHttpRequest  $request
     * @return IlluminateHttpResponse
     */
    public function store(Request $request)
    {
        // we will create validation function here
        $this->validate($request,[
            'title'=> 'required',
            'description' => 'required',
        ]);

        $blog = new Blog;
        $blog->title = $request->title;
        $blog->description = $request->description;
        // save all data
        $blog->save();
        //redirect page after save data
        return redirect('blog')->with('message','data hasbeen updated!');
    }

Next, create new page for our Form insert data page (create.blade.php) will stored on resources\views\blog\create.blade.php

create.blade.php

<!-- @if (count($errors) > 0)
  <ul>
    @foreach ($errors->all() as $error )
      <li>{{ $error }}</li>
    @endforeach
  </ul>
@endif -->

<h2>Add new post</h2>
<form class="" action="/blog" method="post">
  <input type="text" name="title" value="" placeholder="this is title"><br>
  {{ ($errors->has('title')) ? $errors->first('title') : '' }} <br>

  <textarea name="description" rows="8" cols="40" placeholder="this is description"></textarea><br>
  {{ ($errors->has('description')) ? $errors->first('description') : '' }} <br>

  <input type="hidden" name="_token" value="{{ csrf_token() }}">
  <input type="submit" name="name" value="post">
</form>

next, in the index page (index.blade.php) add new session to get the message session after form create hasbeen redirect to index page.

index.blade.php

{{ Session::get('message') }}

<h1>My First Blog</h1>
@foreach ($blogs as $blog)
  <h2>{{ $blog->title }}</h2>
  <p>{{ $blog->description }}</p>
  <hr>
@endforeach

Video tutorial Insert Data, Validation, Redirect Page and Flash Message

See you next Lessons .....

#Part4 laravel 5 Blog Tutorial : Model Eloquent & Displaying Data from Database

Create Blog Apps in Laravel 5.3 part 4 - To continue previews lessons about CRUD / create blog apps in laravel 5.3 project, this lesson will discuss about how to create and working with Model Eloquent  and how to Displaying Data from Database.

At the previews lessons, we has create database and connect it form laravel project, than we have configuration Restful Controllers and Routing System in our project, if you still confused, just read #Part2 laravel 5 Blog Tutorial : Database & Migration and part3 Restful Controllers and Routing System.

Model Eloquent & Displaying Data from Database

First, we need to create a Model in our project, Model will make a communication with database, create model using 'Artisan command' >>

php artisan make:model Blog

your model will be stored on App\Blog.php

Blog.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Blog extends Model
{
    protected $table ='blog_post';
}

"blog_post" is our table in database.

Next, in you Controller (BlogController) add Blog name spaces to declare our model. if you don't have BlogController.php, following the Part3 tutorial.

use App\Blog;

Next, add index function in our controller, we will fetch all data from database

BlogController.php

public function index()
    {
        // we will create index function
        // we need to show all data from "blog" table
        $blogs = Blog::all();
        // show data to our view
        return view('blog.index',['blogs' => $blogs]);        
    }

Next, create new folder (i create a 'blog' folder) and index file in our view. that index file will stored on resources\views\blog\index.blade.php

index.blade.php

<h1>My First Blog</h1>
@foreach ($blogs as $blog)
  <h2>{{ $blog->title }}</h2>
  <p>{{ $blog->description }}</p>
  <hr>
@endforeach

Now, try to access your project stored on : http://localhost:8080/blog , manual insert any data into your database before.

Video tutorial Part4 laravel 5 Blog

See you Next Lessons......

#Part3 laravel 5 Blog Tutorial : Restful Controllers & Routing System

Create Blog Apps in Laravel 5.3 - To continue or CRUD / create blog apps in laravel, this lesson will discuss about Restful Controllers & Routing System in Blog project.

at the previews lessons, we has create database and connect it form laravel project, if you still confused, just read #Part2 laravel 5 Blog Tutorial : Database & Migration.

Restful Controllers & Routing System
To create new Controllers in our Laravel Project, we use 'Artisan Command' :

php artisan make:controller BlogController --resource

--resource syntax mean, we will create a controller (BlogController.php) with fully configuration/function like the Index functions, Store function, Create function, Show function, Edit function, and more.

This is default our Controller

BlogController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;

class BlogController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return IlluminateHttpResponse
     */
    public function index()
    {
        // 
    }

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

    /**
     * Store a newly created resource in storage.
     *
     * @param  IlluminateHttpRequest  $request
     * @return IlluminateHttpResponse
     */
    public function store(Request $request)
    {
        //
    }

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

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return IlluminateHttpResponse
     */
    public function edit($id)
    {
        //
    }

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

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

Next, create new routes, we has discuss about routes, please read for more detail Routing Basics in Laravel.

Web.php

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| This file is where you may define all of the routes that are handled
| by your application. Just tell Laravel the URIs it should respond
| to using a Closure or controller method. Build something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

// we will ad new route into middleware group

Route::group(['middleware' => ['web']], function() {
  Route::resource('blog','BlogController');  
});

Video Tutorial Restful Controllers & Routing System

See you next Lessons...

#Part2 laravel 5 Blog Tutorial : Database & Migration

Create Blog Apps in Laravel 5 - make simple blog using laravel 5.3 at this lessons will teach us about working with database and crate a migration in Laravel project.

that tutorial was published on previews lessons, pleas read :

1. How to Connect Database in laravel 5.3
2. Database Migration & Schema in Laravel 5.3

In this lessons, i assume you must see of the part1 before follow this tutorial, read Introductions to CRUD Operations in laravel 5.3 Part 1

Create Blog using laravel 5.3

Create Database

First, we will need to create a Database (i use MySQL database) in your server. So just create your own database. you can see this tutorial how to make an MySQL database?

Create Laravel Project

with your Terminal (CMD in windows), following this "Artisan CLI" command to create new project in laravel 5.3 :

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

Intructions :

1. we will create Laravel project using Composer
2. web is your project name

Connect with Database

Next, we will create connection with our database, hasbeen posted on How to Connect Database in laravel 5.3

in your .ENV file, modife your connection variable, and configure it with yours.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_blog
DB_USERNAME=root
DB_PASSWORD=

Database Migration

Next, we need to create tables and columns in our database, using Migration in Laravel we will create a table or a columns with very easy, read Database Migration & Schema in Laravel 5.3

Create migration following by this command :

php artisan make:migration create_blog_table

After success, your migration file will be strored on database\migrations\2016_09_13_113838_crate_blog_table.php

Add some function following by this source code

<?php

use Illuminate\Support\Facades\Schema;
use Illuminat\eDatabase\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CrateBlogTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('blog_post', function (Blueprint $table) {
        $table->increments('id');
        $table->string('title');
        $table->string('description');
        $table->timestamps();
      });
    }

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

Next, execute our migration scheme following by this command :

php artisan migrate

Now, you have a database "laravel_blog", with table name "blog_post" and some column name like, id, title,description, and time stamp in your database.

Video tutorial #Part2 laravel 5 Blog Tutorial : Database & Migration

Next lesson, we will try to show data from database and create a model in laravel 5.3

see you next lessons ...

Laravel 5 Tutorial : CRUD Operations in laravel 5.3 Part 1

Laravel 5.3 Crud Example - How to make simple CRUD operations in Laravel 5.3 Apps? This Lessons will teach you about basics to make a blog apps using Laravel 5.3 and using simple basic of the CRUD (Create,Read,Update,Delete) Operations. This lessons, will be devided for 13 of the part, and updated everyday.

Previews Lessons, we have learn about How to Send mail using SMTP Gmail in Laravel and How to upload a file in Laravel 5.3

Create Simple Blog using Laravel 5.3

 What we have learned in this chapter? (updated)

1. Intro to the basic of CRUD in Laravel 5.3
2. Database Configuration and Migration
3. Restful Controllers & Routing System
4. Create Eloquent Model and Display the Data
5. Insert data Operations query and Validation
6. Create single Pages
7. Update Data Into Databases
8. Delete Data From Databases
9. Pagination Eloquent
10. Adding Bootstrap Theme

 That all is our Part to make a simple blog using Laravel 5.3, just follow or subscribe us to get updated new post everyday for free.

UPDATED :
New laravel 5.3 CRUD tutorial available here : Laravel 5 Crud Tutorial using Ajax & Bootstrap Template in Laravel 5.3

Video Tutorial Laravel 5 Ajax Crud

Video Tutorial Laravel 5 Crud with Vue.Js

Video Tutorial Laravel 5 HOW TO BUILD BLOG

See you Next Lessons..

C# & VB.NET Context Menu Right Click Copy, Cut, Paste Functions

C# .NET for beginners : How to add Context Menu Right Click with Copy, Cut, and Paste Functions in a TextBox or RichTextBox using C# and VB.NET?

Create Context Menu Right in C#

Add Copy, Cut, Paste Function

        void CutAction(object sender, EventArgs e) {
            richTextBox1.Cut();
        }

        void CopyAction(object sender, EventArgs e) {
            Clipboard.SetData(DataFormats.Rtf, richTextBox1.SelectedRtf);
        }

        void PasteAction(object sender, EventArgs e) {
            if (Clipboard.ContainsText(TextDataFormat.Rtf)) {
                richTextBox1.SelectedRtf = Clipboard.GetData(DataFormats.Rtf).ToString();
            }
            richTextBox1.Text = Clipboard.GetText();
        }

Next Add this source code on Event of a TextBox or RichTextBox

        private void richTextBox2_MouseDown(object sender, MouseEventArgs e) {
            if (e.Button == MouseButtons.Right) {
                ContextMenu contextMenu = new System.Windows.Forms.ContextMenu();
                MenuItem menuItem = new MenuItem("Cut");
                menuItem.Click += new EventHandler(CutAction);
                contextMenu.MenuItems.Add(menuItem);
                menuItem = new MenuItem("Copy");
                menuItem.Click += new EventHandler(CopyAction);
                contextMenu.MenuItems.Add(menuItem);
                menuItem = new MenuItem("Paste");
                menuItem.Click += new EventHandler(PasteAction);
                contextMenu.MenuItems.Add(menuItem);
                richTextBox1.ContextMenu = contextMenu;
            }
        }

Create context Menu Right in VB.NET

Add ContextMenuStrip component to your form, then add some items to this ContextMenuStrip like "Copy","CUT" and "Paste".

next add this source code :

Private Sub CutToolStripMenuItem_Click(sender As Object, e As EventArgs) _
Handles CutToolStripMenuItem.Click
   RichTextBox1.Cut()
End Sub

Private Sub CopyToolStripMenuItem_Click(sender As Object, e As EventArgs) _
Handles CopyToolStripMenuItem.Click
   RichTextBox1.Copy()
End Sub

Private Sub PasteToolStripMenuItem_Click(sender As Object, e As EventArgs) _
Handles PasteToolStripMenuItem.Click
   RichTextBox1.Paste()
End Sub

See you next lessons ....

Laravel 5 Tutorial : How to Send Email using Gmail SMTP in laravel 5.3

Laravel 5.3 tutorial step by step - Laravel 5.3 can handle email functions, that we can send email using costum SMTP like smtp.gmail.com, Laravel uses free feature-rich library "SwiftMailer" to send emails.

At the previews lessons about Laravel 5.3 we has learned How to Create File Upload in laravel 5.3 and How to use Validation in Laravel 5.3, just learn it before try this one.

Send Email using Gmail SMTP in laravel 5.3

now, this lessons we will create simple apps that we can send email using smtp gmail.com, by following this syntax:

Mail::send(['text'=>'text.view'], $data, $callback);

First, we need to configurate our gmail account to Laravel project, that is on ".ENV" file, costum and configure with your gmail account :

.env file

MAIL_DRIVER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=youremail@gmail.com
MAIL_PASSWORD=yourpassword
MAIL_ENCRYPTION=tls

Next, we need to clear our cache and restar Laravel Server by following this command :

Clear cache

php artisan config:cache

Next, we will create new controller to send email with Laravel by following this command :

Create new Controller

php artisan make:controller MailController

next, we will create three function in MailController.php
MailController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;

// we will use Mail namespace
use Mail;

class MailController extends Controller
{
    // first, we create function for send Basics email
    public function basic_email(){
        $data=['name'=>'Harison matondang'];
        Mail::send(['text'=>'mail'], $data, function($message){
            $message->to('harisonmatondang@gmail.com','Harison Matondang')->subject('Send Mail from Laravel with Basics Email');
            $message->from('nabilaauliaputri29@gmail.com','Nabila');
        });
        echo 'Basics Email was sent!';
    }

    //create new function to send HTML email
    public function html_email(){
      $data=['name'=>'Harison matondang'];
      Mail::send(['text'=>'mail'], $data, function($message){
          $message->to('harisonmatondang@gmail.com','Harison Matondang')->subject('Send Mail from Laravel with HTML Email');
          $message->from('nabilaauliaputri29@gmail.com','Nabila');
      });
      echo 'HTML Email was sent!';
    }

    //create new function to send mail with attachment Mail
      public function attachment_email(){
        $data=['name'=>'Harison matondang'];
        Mail::send(['text'=>'mail'], $data, function($message){
            $message->to('harisonmatondang@gmail.com','Harison Matondang')->subject('Send Mail from Laravel with HTML Email');
            // add attach here
            // i have a image file on Laravel project
            $message->attach('C:serverhtdocshckrcompublicuploadsharison.jpg');
            $message->attach('C:serverhtdocshckrcompublicuploadssector-code.jpg');
            $message->from('nabilaauliaputri29@gmail.com','Nabila');
        });
        echo 'HTML Email was sent!';
      }
}

Next, create new view, that folder stored on resources/views and rename it with "mail.blade.php"

mail.blade.php

Hallo, {{ $name }}
i send a mail

Next create new routes

web.php

Route::get('/basicemail', 'MailController@basic_email');
Route::get('/htmlemail', 'MailController@html_email');
Route::get('/attachemail', 'MailController@attachment_email');

After finished, try to access your project with browser by following this URL :

http://localhost:8080/basicemail
http://localhost:8080/htmlemail
http://localhost:8080/attachemail

If you got some error like about Security by your gmail account, just setting and Allow less secure applications, by follwing this URL https://myaccount.google.com/security#activity and you will solved your problem.

Video tutorial Send Email with laravel

See you Next Lessons ...

Laravel 5 Tutorial : How to Create File Upload in laravel 5.3

Laravel 5.3 File Uploading - To upload a file (image) in laravel 5.3 is so easy, we just need to create a controller, FileUpload Controller. at the previews Lessons, we have learn about Validation please read How to use Validation in Laravel 5.3 and about Sessions How to use Method HTTP Session in laravel 5.3.

Create File Upload in laravel 5.3

First, we need to create new Controller, please create FileuploadingController using Artisan CLI following by this command

php artisan make:controller FileuploadingController

Your controller will stored on app\Http\Controllers\FileuploadingController.php, Now Create function in the FileuploadingController.php

FileuploadingController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;

class FileuploadingController extends Controller
{
    // create function for our upload page
    public function index(){
      return view('uploadfile');
    }
    // create new function for show uploaded page
    public function showfileupload(Request $request){
      $file = $request -> file('image');
      // show the file name
      echo 'File Name : '.$file->getClientOriginalName();
      echo '<br>';

      // show file extensions
      echo 'File Extensions : '.$file->getClientOriginalExtension();
      echo '<br>';

      // show file path
      echo 'File Path : '.$file->getRealPath();
      echo '<br>';

      // show file size
      echo 'File Size : '.$file->getSize();
      echo '<br>';

      // show file mime type
      echo 'File Mime Type : '.$file->getMimeType();
      echo '<br>';

      // move uploaded File
      $destinationPath = 'uploads';
      $file->move($destinationPath,$file->getClientOriginalName());
    }
}

Next, we need to create new Views and rename it with uploadfile.blade.php that save on resources\views\uploadfile.blade.php

uploadfile.blade.php

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Upload File</title>
  </head>
  <body>

    <?php
      echo Form::open(['url'=>'/uploadfile','files'=>'true']);
      echo 'Please Select a File to Upload ';
      echo '<br>';
      echo Form::file('image');
      echo '<br>';
      echo Form::submit('Upload File');
      echo '<br>';
      echo Form::close();
     ?>

  </body>
</html>

Next, add new routes, that Routes file stored on routes\web.php

web.php

Route::get('/uploadfile', 'FileuploadingController@index');
Route::post('/uploadfile', 'FileuploadingController@showfileupload');

After all finished, try to access our upload file project using your browser by following this command

http://localhost:8080/uploadfile

Video tutorial Create File Upload in laravel 5.3

See you next Lessons