Laravel TokenMismatchException VerifyCsrfToken.php

While learning Laravel I came across the error:

laravel TokenMismatchException in VerifyCsrfToken.php line 67

This seems to be a breaking change between when the latest laracast tutorials were recorded and the version I am using.

This was due to a hidden field not being on a form which is required when using POST.

The fix was to add:


{!! csrf_field() !!}

For example:


<form method="POST" action="/cards/{{$card->id}}/notes">
<div class="form-group">
<textarea name="body" class="form-control"></textarea>
</div>

<div class="form-group">
<button type="submit" class="btn btn-primary">Add Note</button>
</div>

{!! csrf_field() !!}

</form>


 

Decent and cheap hosting & domains based in the UK

I’ve always had good experiences with TSO Host so I thought I’d suggest them as a good place to get started on your own web development.

They’re UK based (great for me) and all their tech support staff are as well, which is great. I’ve added a referral link above for anyone that wants to use them and possibly help me out too.

Hope that made someone’s hosting search a little easier ūüôā

Laravel routes not working

If your main Laravel page is working but no other routes are then this may be of use to you.

My doc root is here:

/var/www/html/quickstart/public

Firstly enable mod rewrite:

sudo a2enmod rewrite

Then check your routes that weren’t loading, if it works great! If not, then read on.

Edit your default apache site conf file:

sudo gedit /etc/apache2/sites-enabled/000-default.conf

Mine is below:

<VirtualHost *:80>
    ServerName localhost
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html/quickstart/public
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
    <Directory "/var/www/html/quickstart/public">
        Allowoverride All
    </Directory>
</VirtualHost>
# vim: syntax=apache ts=4 sw=4 sts=4 sr noet

That worked for me on Ubuntu, hope it helps someone.

I have been trying out laravel and intend to use it for some projects in the future but I’ve been finding it very frustrating to get it installed and running. The homstead vagrant setup they have just simply doesn’t work and this is the second time I’ve tried it over the past 3 months, so it wasn’t a passing bug. I’ve only ever got laravel up and running on Linux by¬†setting it up manually and never got it working on windows. Hopefully after a few fresh installs I’ll have it down to a few nice steps and I’ll write those up =)

How to link to a section of same webpage

If you need to click an item on your page and then have it automatically scroll you to the correct location on the page then this is how you could do it:

There are two things you need:

1. A link pointing to another section of the page. (where you click)

<A HREF="#mysection">Click me to jump to blah!</A>

2. The point where the reference points to. (the part of the page you get scrolled to)

<A NAME="mysection">

… and that’s it, nice and simple!

Get previous or next HTML element with a certain class

If you want to get the previous or next element with a certain class you can use JQuery and a CSS selector. This may be useful in certain circumstances, I found myself in that position today and thought I’d share it here.

HTML

An example markup.

<div class="AnElementYouWant">Some beginning text</div>
<div id="ElementAfter">More text</div>
<div class="AnElementYouWant">Some ending text</div>

Javascript

Given the above markup we can use this Javascript to select the divs around the centre div.

var first = $(this).prevAll("AnElementYouWant:first");
var last = $(this).nextAll("AnElementYouWant:first");

So console.log(first.text()) would output “Some beginning text” and¬†console.log(last.text()) would output “Some ending text”.

Hope someone finds that useful.

Creating a WordPress All Posts Page

I wanted a page that would list all my posts, a site index basically. I tried a simple method and it was close but not what I wanted, it did not dynamically put the list of posts inside the content area of a page, so it looked very odd.

So here is a way to get your “All Posts” looking how it should on your WordPress site.

Example: http://tripsintech.com/all-posts/

Step 1 Child Theme

Make sure you are using a child theme on your WordPress site.
( You don’t have to do this but if you don’t use a child theme then when you update your theme then anything you do next will just be overwritten )

Step 2 Page Template

Create a page template. To do this create a php file in your active theme directory, mine is here:
“…/wp-content/themes/twentyfifteen-child/AllPostTemplate.php”

Now paste in the below code into  your AllPostTemplate.php file and save it.

<?php
/*
Template Name: All posts
*/
get_header(); ?>
 <div id="primary" class="content-area">
 <main id="main" class="site-main" role="main">

 <?php
 // Include the page content template.
 get_template_part( 'content', 'page' );
 
 $first = 0; //The first article to be displayed
 while(have_posts()) : the_post(); 
 ?>
<script>
 var x = document.getElementsByClassName("entry-content");
 if (x[0] != null) {
 x[0].innerHTML = "<ul> <?php $myposts = get_posts('numberposts=-1&offset=$first'); foreach($myposts as $post) : ?><li><?php the_time('d/m/Y') ?>: <a href='<?php the_permalink(); ?>'><?php the_title(); ?></a> </li><?php endforeach; ?></ul> <?php endwhile; ?>";
 }
</script>

 </main><!-- .site-main -->
 </div><!-- .content-area -->

<?php get_footer(); ?>

Step 3 Create Page

Now we need to actually create the all posts page, this is very simple and is done through the WordPress dashboard.

Go to pages, then create a new page and change the Page Template from default (or whatever else it is) to be “All posts”.

All done!

 

 

NB: This template has only been tested with the TwentyFifteen Theme, it should work for most though.

Move WordPress Site (same hosting different domain)

As I’ve recently done this myself and it wasn’t as straight forward as wordpress say it is here are a few things which may be of use to someone.

I’m assuming that:

  • You want to move your wordpress site ‘olddomain.com’ to ‘newdomain.com’
  • Both¬† ‘olddomain.com’ and ‘newdomain.com’ are hosted together.
  • That the ‘newdomain.com’ can access the database that ‘olddomain.com’ was using.

Step 1

Backup your site (Database and files)

Step 2

Copy all your files from your ‘olddomain.com’ directory to your ‘newdomain.com’ directory

Step 3

Go to your settings->general section of your new wordpress site e.g ‘newdomain.com/wp-admin/options-general.php’

Update both the fields for ‘WordPress Address’ and ‘Site Address’ to be ‘http://newdomain.com’

Step 4

By now your site will almost be working but some images and other media will not be working.

We need to change values in the database to stop them pointing to ‘olddomain.com’ for images as once you delete your old site files they will obvisouly not be accessible. You can do this manually or use this plugin I found that works well.

Go to your Plugins section and install the plugin: ‘Search & Replace’ the summary is:¬†“A simple search to find strings in your database and replace those strings.”

Now go to tools and select ‘Search & Replace’ and select ‘Search and replace’ and enter your old domain in the ‘search for’ and your new domain in the ‘replace with’:searchAndReplacePlugin

Click go and you should be done.

Hope that  helped someone out there!