Changing an image in jQuery is pretty straight forward. First of all, you need an image to change. This is just a usual html image in your page with an id on it:
|
1 2 3 |
<img id="my-image" src="images/image-name.jpg"> |
We know that the image being displayed comes from the “src” attribute of the image tag, so this is what we […]
In your scripts file, you should always start with the following:
|
1 2 3 4 5 |
$(document).ready(function(){ //Everything else should go in here... }); |
This makes sure your page is fully loaded before any further interaction takes place. Selectors Selectors are how you select what element on your page that you want to “interact” with (element referring to the part of you HTML, an image for example). […]
Installing CRUD plugin
|
1 2 3 |
cd /var/www/html/APP_NAME |
|
1 2 3 |
composer require friendsofcake/crud:^4.3 |
|
1 2 3 |
composer update |
|
1 2 3 |
bin/cake plugin load Crud |
Setup some database tables. Update the config/app.php file with your database details. Generate the database files with the bake command
|
1 2 3 |
bin/cake bake all users |
|
1 2 3 |
bin/cake bake all posts |
Hash User Passwords
|
1 2 3 |
use Cake\Auth\DefaultPasswordHasher; |
|
1 2 3 4 5 6 |
protected function _setPassword($password) { return (new DefaultPasswordHasher)->hash($password); } |
Update App Controller
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<?php namespace App\Controller; use Cake\Controller\Controller; use Cake\Event\Event; use Cake\Routing\Router; class AppController extends Controller { use \Crud\Controller\ControllerTrait; public $components = [ 'RequestHandler', 'Flash', 'Crud.Crud' => [ 'actions' => [ 'Crud.Index', 'Crud.View', 'Crud.Add', 'Crud.Edit', 'Crud.Delete' ], 'listeners' => [ 'Crud.Api', 'Crud.ApiPagination' ] ] ]; public function initialize() { $this->loadComponent('Auth', [ 'authenticate' => [ 'Form' => [ 'fields' => ['username' => 'email'], ], ], 'loginRedirect' => [ 'controller' => 'Posts', 'action' => 'index' ], 'logoutRedirect' => [ 'controller' => 'Users', 'action' => 'login' ] ]); } public function beforeFilter(Event $event) { $this->Auth->allow(['display']); } } |
Update Users Controller
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<?php namespace App\Controller; use App\Controller\AppController; use Cake\Event\Event; /** * Users Controller * * @property \App\Model\Table\UsersTable $Users */ class UsersController extends AppController { public function beforeFilter(Event $event) { parent::beforeFilter($event); $this->Auth->allow(['add', 'logout']); } public function login() { if ($this->request->is('post')) { $user = $this->Auth->identify(); if ($user) { $this->Auth->setUser($user); return $this->redirect($this->Auth->redirectUrl()); } $this->Flash->error(__('Invalid username or password, try again')); } } public function logout() { return $this->redirect($this->Auth->logout()); } } |
Add Login Template File
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="users form"> <?= $this->Flash->render('auth') ?> <?= $this->Form->create() ?> <fieldset> <legend><?= __('Please enter your email and password') ?></legend> <?= $this->Form->input('email') ?> <?= $this->Form->input('password') ?> </fieldset> <?= $this->Form->button(__('Login')); ?> <?= $this->Form->end() ?> </div> |
Update Routes
|
1 2 3 4 5 6 7 |
Router::prefix('api', function ($routes) { $routes->extensions(['json']); $routes->resources('Posts'); $routes->resources('Users'); }); |
Create Api Controller
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?php namespace App\Controller\Api; use Cake\Controller\Controller; use Cake\Event\Event; class AppController extends Controller { use \Crud\Controller\ControllerTrait; public $components = [ 'RequestHandler', 'Crud.Crud' => [ 'actions' => [ 'Crud.Index', 'Crud.View', 'Crud.Add', 'Crud.Edit', 'Crud.Delete' ], 'listeners' => [ 'Crud.Api', 'Crud.ApiPagination', ] ] ]; } |
Create […]
Update: Guide to install CakePHP on Ubuntu 16.04 Digital Ocean Summary How to install ย a CakePHP 3 app on a new droplet running Ubuntu 14.04. This guide assumes you’ve set up a Ubuntu 14.04 server and have MYSQL up and running. This guide uses the “PHPMyAdmin” from the “One Click Apps” available on Digital Ocean. […]
Summary How to install composer on a new droplet running Ubuntu 14.04. Installing composer on a Digital Ocean droplet is a pretty straight forward process and only needs a few commands. Log in to your droplet. First, update you package manager:
|
1 2 3 |
sudo apt-get update |
Install cURL:
|
1 2 3 |
sudo apt-get install curl php5-cli git |
You’ll be asked if you want to use the extra […]
Summary How to log in and change the default password of a new droplet running Ubuntu 14.04. Finding the default MYSQL password. You will have been emailed your droplet details, most importantly a password (which you will need to change in a moment), so have this email open. Open a new terminal window and log […]
Summary How to fix permalink issues on aย Ubuntuย 14.04 Digital Ocean server Setting up custom permalink on a Digital Ocean server is something that I’ve had to do time and time again. And each time I come to do it, I’ve forgotten how. So I’ve decided to document it, mostly for my own benefit to stop […]
This is a general guide on how you can improve the code you write. Its main aim is to help you structure your code in a way that makes it easier for me to help you. 1.ย Use Correct Formatting If there is one rule you follow, please let it be this. Correctly indent your code! […]