CRUD using AngularJS with Slim framework

In the previous article about AngularJS with Slim framework, we did example of how to use AngularJS as frontend framework while Slim framework for backend, but the example was limited to insert into and retrieve data from database. Lets complete CRUD in this article but adding Delete and Edit functionality on the page which is showing the records of database. It will all be done on show_users.html page without any reload. Follow the previous article (AngularJS with Slim framework) to understand the previous code as we are going to modify those files.

Replace the previous code of show_users.html with the following one

Output

show_users2

Delete User

Delete user button have ng-click=”deleteUser(r.id, $index)”, where r.id is the is of user which we want to delete and $index is the row number of table. We are passing $index to this function so that after delete operation we want to hide this row of table displaying the deleted record. Now we have to create deleteUser function in showUserCtrl.

Upon successful process, we set true the hideRow[index] so that the row on page disappears. We need to make a procedure on index.php file which will be responsible to delete record from database table.

Edit User Form

The Edit button has ng-click=”getUser(r.id)” because we want retrieve the data of this specific user from database to be edited. Below the table on show_users.html file is the form which is hidden initially, but after hitting the edit button it becomes visible with populated fields. getUser function in the showUserCtrl is

showEditForm is set to true so that edit form on the show_user.html page becomes visible and data is populated into it.

getuser procedure in index.php is as follows

When the form is submitted, controller comes to editUser function of showUserCtrl

The procedure edituser is responsible for updating data of that specific user.

After update process the form is hidden again and success message is displayed. This article now wraps up CRUD using AngularJS with Slim framework as a single page application.

Full Source Code

Full source code CRUD using AngularJS with Slim framework is available at GitHub as well.

CRUD using AngularJS with Slim framework at GitHub

 

 

 

 

 

Read More

Import MySQL database using phpMyAdmin

If you have a database’ .sql file or even if it is in compressed format, it is very simple and easy to import MySQL database using phpMyAdmin. Follow the following steps.

  1. Create a new database in phpMyAdmin.create_new_database
  2. List of databases is on the left side. Open created database and find Import in the top menu, click on Import.
  3. Under File to Import section, click on ‘browse’ / ‘choose file’ button and browse the sql file that you want to import.import_mysql_database_using_phpmyadmin
  4. At the bottom of page, click on Go button.

By following these above 4 simple steps , you can easily import MySQL database using phpMyAdmin.

Read More

AngularJS with Slim Framework

We are going to use AngularJS with Slim framework now, along with Illuminate database. In the previous two articles(AngularJS Routing Example, AngularJS Form Submit with ngSubmit ) we used AngularJS only and ended up with submitting data from from to controller. In this article we will proceed to next step of inserting that data into database. Lets install Slim PHP framework for creating API. Furthermore, we are going to use illuminate database which is used by Laravel PHP framework as well.

Install Slim Framework

Create a composer.json file in the root folder of your application. composer.json should be as follows:

Open command line, change the current directory to root directory of your app and run following command

composer install

After installation of Slim and Illuminate, create index.php file in root folder and test if it is working fine. Copy following code into index.php

 

We can now access this by localhost/your_root_folder_name/index.php/testing

This will call test() function and what ever is written in that single echo statement should be displayed.

$app->get(‘/testing’, ‘test’); means that by visiting this URL, test function will be called, therefore we defined function test.

We are now ready to move forward and create database connectivity. Create a new file db.php and copy this code.

Change settings according to yours database and connection is ready.

Creating Model

We are now going to create a User model.

Create a models directory and then within models directory, create a new file user.php

After creating a model, we need to update our composer.json file, because we are not able to use instance of user model yet.

Update composer.json

Now run the command (composer update) from root folder where composer.json is located. After this we are able to create and use instance of user model.

Inserting form data into database table

Lets continue from the previous article which ended up at receiving data at AngularJS controller from HTML form. We are now using API call for posting this data from where it will be saved into database table.

Update the controller (addUserCtrl) as follows:

  1. We added $http as the 2nd argument of function.
  2. Then we used $http.post for posting our userdata that we received from form. Data is submitted to index.php/adduser.
  3. After successful execution, we are going to empty the form fields and setting $scope.msg_submitted with a message which will be displayed below the form.  Just add {{msg_submitted}} in add_user.html template where you want to display this message.

We have to create this /adduser in our index.php file which we created after installing slim framework. We are adding $app->post(‘/adduser’, ‘addUser’); which means we are also going to create addUser function. Updated index.php file should be as follows:

Note: Before working on index.php, add this statement in user model 

protected $fillable = array(‘username’,’fullname’); . username and fullname are the fields of database table. If we don’t add this statement, we will not be able to insert data by using create.

  1. /adduser is receiving data in the form of json, we have to decode it and 2nd argument (true) in json_decode function is used for converting received data into array.
  2. This data or array is to be inserted in database. $user->save() will save data in user table.

Get data from database table

The template show_users.html that we created in previous articles, has to show the list of users.

Lets create a new procedure /getusers in index.php, which will receive data from database table.

 

The procedure is now ready and fetching required data.

json_getusers

 

Lets bring this data in show_users.html. But before this we will have to get this data in AngularJS controller (showUserCtrl), from here we will be sending this to our html file. So lets update showUserCtrl

getUsers function is using API procedure for getting data and is then saved in $scope.received_data. Function is then called at the end.

Now we have to update our template show_user.html

 

show_users

So this was the basic example of how to use AngularJS with Slim framework. I hope you found this useful.

 

Read More

AngularJS Form Submit with ngSubmit

In the previous article we did setup simple AngularJS Routing example. It had 2 template pages

  1. show users page
  2. add user page

In this article we will create a simple form and will submit the data which will be received in controller. Controller will then send a confirmation message to page that data has been received.

Consider the add_user.html page which we did in previous article.

Lets add a simple form in it.

  1. Within the form tab we have ng-submit=”addUser(data)”. It means that when ever user is going to click the submit button, data will be passed to addUser function of addUserCtrl.
  2. Within the form elements(username, category) we are using ng-model. It is important for binding these form fields. As the data is going to be passed in addUser function of addUserCtrl, we will be refering to ng-model value of each field there in controller.
  3. Note that data is being passed so values of model should be data.attribute_name. attribute_name can be any name that you wish according to your form field, just like we have data.username and data.fullname.

 

Now lets create a function within addUserCtrl.

Submitted data from the form using ngSubmit to addUser funtion with an argument is received here in userdata. In order to confirm this use console.log and then clear the fields of form.

Lets send confirmation message from controller to the page. Add one more line at the end of function.

Now we need to add a line of code in template file add_user.html so that this message can be displayed there after form submission. We need to use message in the expression because we have set the value of $scope.message.

We are adding this under the form

So this was a simple example of AngularJS form submit. In future article we will insert is data into database using Slim framwork.

 

 

Read More

AngularJS Routing Example

In this article we will be developing a simple app using AngularJS. We will use AngularJS Routing for a single page app. Actually, app will be composed of two different templates/pages and a home/index page but single page app means that we will be loading these two pages without page refresh.

Index.html

This is the index page of our app with navigation and ng-view directive. This is the section of page where content of other pages will be inserted without page reloading with the help of AngularJS Routing.

Angular App

Now after HTML of index page, lets create our application. The code of app.js file(mentioned in index.html page) is as under.

As you can see that both controllers (addUserCtrl and showUserCtrl) are empty yet. We will use them later(in upcoming article) for sending data to their respective template. Above controllers, we have configured routes( /showusers and /addnewuser). We have set both, templateUrl and controller for each route. Right now we are missing template files so lets create both of them(show_users.html and add_user.html).

Template files

show_users.html

add_user.html

I opened the main page of app using localhost/angularpractice. Use the correct URL according to your root folder name. It will show showusers page because of configuration that we did for routing. Click on the nav buttons and it should work like single page app but changing the content according to template pages.

According to route configuration, both add_user.html and show_users.html should be placed within templates folder. Make sure that you have template folder within root folder.

Note

Don’t forget to include required files. You can get the files from URLs mentioned next to files.

  1. angular.min.js Download from here
  2. angular-route.js Download from here

In upcoming article we will be creating a simple form in add_user.html and sending data to addUserCtrl.

 

Read More

Access denied for user ‘homestead’@’localhost’ issue

After successfully installing laravel 5 and updating database.php file for configuration you may encounter Access denied for user ‘homestead’@’localhost’ issue.

The problem can be solved by correcting / updating .env.php file. This file can be found in root directory of application. In this file you will have to correct the following lines depending upon your database configuration.

Correctly change / update host, database name, user name, and password. Refresh the page and you are done.

 

Note:

If issues still exists, restart your server and also run the following command to clear the configuration cache file.

 

 

Read More

Upgrade PHP version in WAMP

One can easily upgrade PHP version in WAMP manually. WAMP allows you to have multiple versions of php and you can choose any one of them to be used.

Following are the steps to be followed for upgrading php version in WAMP.

  1. Download version of PHP for Windows.
  2. Extract and place the folder in wamp/bin/php/
  3. Give the folder name according to downloaded version
  4. Copy 3 important files from existing version of php and paste them into new PHP version folder.
  5. Open php.ini file and correct the version of PHP where required

 

1. Download version of PHP for windows

Zip file of PHP version can be downloaded from PHP version for Windows. Download thread safe version.

 

2. Extract and place the folder in wamp/bin/php/

Extract the downloaded zip file of php version and place that into wamp/bin/php/ folder.

 

3. Give the folder name according to downloaded version

Now rename the folder and give it the name according to the downloaded version of PHP. For example, If you have downloaded PHP version 5.6.13 so give it a name php5.6.13

 

4. Copy 3 important files from existing version of PHP and paste them into new PHP version folder

The 3 important files to be copied from existing PHP version to new folder are:

  1. php.ini
  2. phpForApache
  3. wampserver.conf

 

5. Open php.ini file and correct the version of PHP where required

You need to change the php version in php.ini file. For example, extension_dir needs to be changed. If php.ini was copied from php5.4.3 so you will have to change extension_dir path from c:/wamp/bin/php/php5.4.3/ext/ to c:/wamp/bin/php/php5.6.13/ext/. Also find this sort of change if required within php.ini file and update them.

 

Now new version is ready to be used. Exit the WAMP and open it again. Stop all services and select the PHP version from PHP version menu as show below. Now Restart All Services.

upgrade-php-version-wamp

 

To verify the version of PHP running on your local server, open localhost in web browser and then click on phpinfo.

phpinfo

 

 

Read More

Point godaddy domain to bluehost

It is common that you may register a domain with GoDaddy while the hosting service is purchased from other than GoDaddy. In this article I am going to show how one can point GoDaddy domain to Bluehost. The process consists of two major steps.

  1. Change NameServers at GoDaddy
  2. Adding a Domain in BlueHost

Following are the steps to be followed.

1. Change NameServers at GoDaddy

Login to GoDaddy account and then click on Domains > Manage My Domains as shown in the following figure.

 

GoDaddy

 

After clicking on Manage My Domains, all the domains that you registered with GoDaddy will appear. Click on the domain which you want point.

GoDaddy

 

After you click on the domain name, another window will appear. You will have to change NameServers from here.

GoDaddy Domain Settings

 

Click on Manage link which will open a popup as shown below.

GoDaddy NameServers

By default Standard is selected, but you need to select Custom to insert required NameServers of BlueHost. Default BlueHost NameServers are NS1.BLUEHOST.COM & NS2.BLUEHOST.COM

Custom NameServer BlueHost

 

 

Once the settings on GoDaddy are completed for NameServers, you need to make some “Domain Assign” settings on BlueHost.

 

2. Adding a domain in BlueHost

Now, after changing the NameServers at GoDaddy, we will have to add that domain here in BlueHost.Login into your BlueHost account. First click on domains and then click on assign, as shown below.

BlueHost Domain Assign

 

A page will open in which you will see the following form. Here you will have to enter your domain which is to be pointed from GoDaddy to BlueHost.

BlueHost Add Domain

 

Read More

Day number of week from date or day in php

In one of the previous posts I described how to get day from date in PHP. The same function can be used to find the day number of the week. In this post I have given examples of how to find “day number of week” from both date and day name.

For example:

20/8/2015 is Thursday, which is 4th day of the week.

 

Find current day number of week

 

Find day number of week from date

 

Find day number of week from day

Other than date, day number of week can also be found by the “date name”.

 

 

Useful Links:

day of the week to day number

Finding the number of the day in a week in PHP from a date

Read More

Gzip compression wordpress

Gzip compression can be enabled in WordPress. There are several ways to enable gzip compression in WordPress. Gzip compression reduces 60-70% of the page size.

Enable gzip compress using WordPress plugins

 

1. WP Super Cache

WP Super Cache can be used for gzip compression wordpress. It has a feature in “Advanced” tab from where compression can be enabled.

gzip compression wordpress wp-super-cache

 

2. W3 Total Cache

W3 Total Cache is another wordpress plugin which can work for gzip compression. gzip compression via W3 Total Cache in the following way. Open performance > Browser Cache, and then check 

gzip compression wordpress wp-total-cache

 

 

Enable gzip compression through htaccess

There is another way other than plugins to enable gzip compression. gzip compression can be enabled using htaccess file by adding the following code into htaccess file.

 

Read More