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` (
  `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">

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:

	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.";


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

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.
// #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
// #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);";


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() {

  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.

Setup LAMP in Ubuntu / Linux Mint using Tasksel with PHPMyAdmin installed and mod_rewrite loaded

As a new Linux user, sometimes it is difficult to setup stuffs in a Linux box. Back in the days where internet connection is scarce in my area, using Ubuntu that time is kinda useless without it. Some software will require or lead you to another dependencies and may require another one and it sucks to do it in a Terminal. The most common installation is building your LAMP stack for development purposes.

So the easiest way to install LAMP is to install Tasksel first, it will still be on Terminal but a single line of command need:

sudo apt-get install tasksel

What it does is you use the command apt-get to install tasksel. After entering that command the Terminal will ask for your root password since we run the command as root. Tasksel will be downloaded and after that it will prompt what build are you going to install. This time select Lamp Server, then proceed. Wait for it until will ask for your MySQL root password and you are done!

To test if our web server is working, open your web browser and enter this URL:


Then you will see a page saying you installed Apache properly!

Now, we need to install PHPMyAdmin for us to easily manage our MySQL database. To do that you need to run Terminal again and enter this command:

sudo apt-get install phpmyadmin

Again, it will ask for your root password.

OK. It looks like we are great to go, we can do some magic stuffs there. So let’s try to create a PHP file to see if it is working. To do that run this command:

sudo gedit

It will open a text editor and take note we used it as root. I’ll explain that later, for now add this code and save it as phpinfo.php in /var/www.

<?php phpinfo(); ?>

If you’ve already messed with some PHP codes or created some PHP websites then this is no brainer to you but for those aren’t then this code will display your PHP’s information such as version, OS, modules, etc.

Additionally, to load the module rewrite run this command:

sudo a2enmod rewrite

Then open the file 000-default in /etc/apache2/sites-enabled with this command:

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

Change all AllowOverride None to AllowOverride All and you must restart Apache to apply the changes using this command:

sudo /etc/init.d/apache2 restart

Lastly, to create new files in our www folder what we did is we need to use the account. It’s a little time consuming right? Why not just create in the folder directly? Well, that’s because the www folder is only set for root account, and other accounts doesn’t have a privileges to open it. To allow any user (if you want to) then we need to set the permission of our www folder. To do that open your terminal and run this command:

sudo chmod 777 /var/www -R

Chmod is a command that will change permission of a folder, 777 is parameter that will allow everyone to access it and -R to recursive all the permission settings to its sub directories.