Change AWS EC2 Instance Key Pair

  1. Create a new Key Pair in Network & Security > Key Pairs, let’s name it “new_key_pair”: https://prnt.sc/YF3IKFzFZYtD
  2. Use PuTTYgen to convert the PEM file to PPK file. The PPK file will be used in PuTTY to connect in your instance. Click “Load” and open the new PEM file created from AWS. Then click “Save private key” button. It will ask for a paraphrase so click “No” if you don’t want to add extra complexity in your key: https://prnt.sc/hwXJ1aHsg02H
  3. Open PuTTY and connect to your instance using the PPK file.
  4. Once connected, type the command: cd ~/.ssh and press enter, Then type ls and press enter. You’ll see a file authorized_keys, this is the file where we are going to our new key pair.
  5. Let’s create a new file “new_key_pair.pem” by typing the command vi new_key_pair.pem. This will create an open the new file. Once in there, copy and paste the content of the new key pair we just created from EC2.
  6. Change the permission of the file by typing the command chmod 600 new_key_pair.pem.
  7. Next, type the command ssh-keygen -f new_key_pair.pem -y
  8. Copy the generated key and open the file authorized_keys by typing the command: vi authorized_keys
  9. Remove all the content and replace it with the generated code by ssh-keygen, make sure by the end of the content add the name “new_key_pair”
  10. Close session and connect using the new key pair, make sure to generate a new PPK for the new key pair PEM file.

Changing Alt Attribute of images

I tumbled an issue recently that the elements don’t have an alt attribute, so I added a code that will set all empty alt with a random value.

function set_empty_img_alt_attribute( $filtered_image, $context, $attachment_id ) {

	$string = $filtered_image;
	$dom = new DOMDocument();
	@$dom->loadHTML($string);	
	$image = $dom->getElementsByTagName('img')->item(0);
	if($image->hasAttribute('alt')) {		
		if( $image->getAttribute('alt') == "" ) {
			$image->setAttribute('alt', 'dummy alt attribute');
			return($dom->saveXML($image));
		}
	} 
	return $filtered_image;
}
add_filter( 'wp_content_img_tag', 'set_empty_img_alt_attribute', 10, 3 );

Adding user authentication for Lorem-Framework

Users Table

For this tutorial, we need to setup our Users table first. Create the table by running this SQL query in your PHPMyAdmin page:

CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(25) NOT NULL,
  `password` char(32) NOT NULL,
  PRIMARY KEY (`id`)
);

We have our Users table ready, let’s add a dummy record there. Insert a new record by following the instructions here.

Login Page

What we need now is our login page. Create a new page called login and save it in your pages folder as login.php and add the following codes:

<form method="post">
	<input type="hidden" name="action" value="login_user">
	<input type="text" name="username" placeholder="Username"><br>
	<input type="password" name="password"><br>
	<input type="submit" value="Login Now">
</form>

In the code snippet above, you’ll notice that we have a hidden field with a name action and the value is login_user. This means that when we click “Login Now”, the action “login_user.php” in the actions folder gets executed.

Login Action

After the user submits the form, we need to make sure that we catch all the information they sent. Since we used the post method in our form, we will use $_POST to handle the login details and check if the user exists. Add the following codes in your login_user.php:

<?php 
	if( isset( $_POST[ 'username' ] ) && isset( $_POST[ 'password' ] ) ) {
		$username = $_POST[ 'username' ];
		$password = md5( $_POST[ 'password' ] );
		$result = $DB->query( "SELECT * FROM users WHERE username='$username' AND password='$password' LIMIT 1" );
		if( $result && $result->num_rows > 0 ) {
			$user = $result->fetch_object();
			$_SESSION[ 'userid' ] = $user->id;
			$_SESSION[ 'username' ] = $user->username;
			echo "Welcome back " . $_SESSION[ 'username' ] . "!";
		}
	} else {
		echo "Please fill all the fields.";
	}
?>

Explanation:

Line #2: Checks if the username and password field have been filled-in.

Line #4: We encrypt the password to match our encrypted password in the database.

Line #5: We check in the database if the username and password exists in our Users table.

Line #6: We check if the query returns a record.

Line #8 and #9: We use $_SESSION to remember the user details. You can read more about sessions here. Please take note that sessions are automatically started in Lorem-Framework.

Now we have a basic Login feature in our site, you can further improve it and make more experiment to fully understand.

Rebinding event after an ajax call and you thought you’re doing it right

So I got stuck on this for hours, I had no idea what I did wrong. Before this was working well until this case. What I usually do when rebinding events to an element after an ajax call is:

$( ".element" ).on( 'click', functon() {
  alert( "Hello!" );
} );

Basically I make an ajax call to add new elements in my DOM, I thought it was smooth sailing but for some reason this technique stopped working. I had no clue on this warning from Chrome:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check http://xhr.spec.whatwg.org/.

After hours and hours of research I found out that you need to not directly rebind the event to the element, instead you will have to call the document object and rebind the event like:

$(document).on('click', '.element', function () {
  // it works!
});

Hope this helps!

CS10 PHP Quiz March 10

  1. Create a variable named ‘items’ with a value of 100.9
  2. Create an associative array with indexs “name”, “age”, “height” and values of “jose”, 28, “128cm” respectively, then assign it to a variable named ‘person’.
  3. Using the variable in #2, print the value of index ‘name’.
  4. Write an If statement that checks if the variable in #1 is greater than 50 then print “You have enough balance.”
  5. Using Foreach, loop each items in #2 and print their values.
  6. Create a class Ball with public property color and owner with public function named bounce.
  7. Create a new variable ‘spalding’ that reference to the class of #6.
  8. Use the variable in #7 and assign a value of “red” to property color
  9. Call the function bounce in variable #7
  10. Use the variable in #7 and assign a value of “John” to property owner.
<?php   
// #1
	$items = 100.9
// #2
	$person = array( "name" => "jose", "age" => 28, "height" => "128cm" );
// #3
	echo $person[ "name" ];
// #4
	if( $items > 50 ) {
		echo "You have enough balance.";
	}
// #5
	foreach( $person as $p ) {
		echo $p[ "name" ];
		echo $p[ "age" ];
		echo $p[ "height" ];
	}
// #6
	class Ball {
		public color;
		public owner;
		public function bounce() {		
		}
	}
// #7
	$spalding = new Ball();
// #8
	$spalding->color = "red";
// #9
	$spalding->bounce();
// #10
	$spalding->owner = "John";
?>

 

Using MySQL multi query and creating a counter variable in PHP

cntI had this problem where I need to change the order of the products we have and  update them from the most popular to least popular. So what I did, I declared a variable that will act as a counter and set the column order_num to the current value of the counter. Here’s what I did:

$db = new mysqli("server", "user", "pass", "db_name");

$query = "set @cnt := 0;";

$query .= "update tbl set order_num = (@cnt := @cnt + 1);";

$db->multi_query($query);

You can also order specific record by adding an IN clause like:

$query .= "update tbl set order_num = (@cnt := @cnt + 1) where id IN (23, 76, 9, 45) order by field(id, 23, 76, 9, 45);";

Adding PHP Mobile Detect in CakePHP1.3 as a component

cake-logoIt seems that the library is not available for old version of CakePHP specifically in 1.3 only in 2.x. So what I did I converted the library as a component, there’s is nothing special about the conversion actually only if you are new to the Framework. Just download the file and unzip it, put it in your /app/controller/components directory.

Download >> Mobile Detect

How to use it:

In one of your controllers, append it in your $components variable like:

Class MyPageController extends AppController
{
  public $components = array('MobileDetect'); // adding the libraby in to your components

  public function beforeFilter() {
    parent::beforeFilter();
  }

  public function beforeRender() {
    // check the user's device and render the proper layout
    if($this->MobileDetect->isTablet()) {
      $this->layout = 'tablets';
    } elseif($this->MobileDetect->isMobile()) {
      $this->layout = 'mobiles';
    } else {
      $this->layout = 'default';
    }
  }
}

To download the original file go here.