Angular js contact form example

 Angular js contact form example

Before copy this code download angular js file and mention the path within the script. with bootstrap css. (require basic knowledge of angular js and php to understand)

//Script

Insert script in the header section

<script>
  // define angular module/app
var formApp = angular.module('formApp', []);
// create angular controller and pass in $scope and $http
function formController($scope, $http) {
// create a blank object to hold our form information
// $scope will allow this to pass between controller and view
$scope.formData = {};
// process the form
$scope.processForm = function() {
$http({
       method  : 'POST',
           data    : $.param($scope.formData),  // pass in data as strings
       headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
   })
       .success(function(data) {
           console.log(data);
           if (!data.success) {
            // if not successful, bind errors to error variables
               $scope.errorName = data.errors.name;
               $scope.errorEmail = data.errors.email;
               $scope.errorPhone = data.errors.phone;
               $scope.errorSubject = data.errors.sub;
               $scope.errorMessage = data.errors.msg;
           } else {
            // if successful, bind success message to message
               $scope.message = data.message;
           }
       });
};
}
</script>
           url     : 'process.php',  // process.php handles validation and send mail to  the user

//code segment

Insert this code after body section

 <h2>Contact Us</h2>

            <div id="messages" class="well" ng-show="message">{{ message }}</div>
            <form ng-submit="processForm()">
                <div class="input-prepend" ng-class="{ 'has-error' : errorName }">
                    <span class="add-on"><i class="icon-user"></i></span>
                    <input name="name" class="span4" id="name" size="16" type="text" placeholder="Name" ng-model="formData.name">            
                </div>
                  <span class="help-block" ng-show="errorName">{{ errorName }}</span>
                <div class="input-prepend" ng-class="{ 'has-error' : errorEmail }">
                    <span class="add-on"><i class="icon-envelope"></i></span>
                    <input name="email" class="span4" id="email" size="16" type="email" placeholder="Email Address" ng-model="formData.email">
                </div>
                     <span class="help-block" ng-show="errorEmail">{{ errorEmail }}</span>
               <div class="input-prepend" ng-class="{ 'has-error' : errorPhone }">
                    <span class="add-on"><i class="icon-envelope"></i></span>
                    <input name="phone" class="span4" id="phone" size="16" type="text" placeholder="Mobile Number" ng-model="formData.phone" onkeypress='validate(event)'>
                </div>
                     <span class="help-block" ng-show="errorPhone">{{ errorPhone }}</span>
                <div class="input-prepend" ng-class="{ 'has-error' : errorSubject }">
                    <span class="add-on"><i class="icon-globe"></i></span>
                    <input name="sub" class="span4" id="prependedInput" size="16" type="text" placeholder="Subject" ng-model="formData.sub">
                </div>
                     <span class="help-block" ng-show="errorSubject">{{ errorSubject }}</span>
                <textarea class="span6" name="message" id="message" ng-model="formData.msg"></textarea>
                <span class="help-block" ng-show="errorMessage">{{ errorMessage }}</span>
                <div class="row">
                    <div class="span2">
                        <input id="submit_btn" type="submit" class="btn btn-inverse" value="Send Message" >
                    </div>
                </div>
            </form>
        </div> <!--End page content column-->

//Process.php

<?php

$errors         = array();   // array to hold validation errors
$data    = array();   // array to pass back data
// validate the variables ====================================================== if (empty($_POST['name']))  $errors['name'] = 'Name is required.';
 if (empty($_POST['email']))  $errors['email'] = 'Email address is required.';
 if (empty($_POST['phone']))  $errors['phone'] = 'Phone is required.';
 if (empty($_POST['sub']))  $errors['sub'] = 'Subject is required.';
 if (empty($_POST['msg']))  $errors['msg'] = 'Message is required.';
// return a response ===========================================================
 // response if there are errors if ( ! empty($errors)) {
  // if there are items in our errors array, return those errors  $data['success'] = false;  $data['errors']  = $errors; } else {
  // if there are no errors, return a message  $data['success'] = true;
$to = "infophpuptodate@gmail.com";// use your email address which need to be receive
   $subject = htmlspecialchars(trim($_POST['sub']));   $message = '';   $message .= htmlspecialchars(trim($_POST['msg']));   $message .= "\r\n";   $message .= htmlspecialchars(trim($_POST['name']));   $message .= "\r\n";   $message .= htmlspecialchars(trim($_POST['phone']));   $message .= "\r\n";   $message .= htmlspecialchars($_POST['email']);   $header = "From:info@youremail.com \r\n";   $retval = mail ($to,$subject,$message,$header); if($retval){  $data['message'] = 'Your Mail has been sent successfully...We will contact you soon!';}else{  $data['message'] = 'Mail sent failed!';} }
 // return all our data to an AJAX call echo json_encode($data);
?>

Read More»

Remove category from url

Remove category from url wordpress 

Method 1

.htaccess
 RewriteRule ^category/(.+)$ http://www.yourblog.com/$1 [R=301,L]

Method 2

Using permalink Select post type custom    /%category%/%postname%/category base put dot(.)

Method 3

 Use plugin to solve this.

  FV Top Level Categories

Read More»

Blog Template with post thumbnail

Blog Template with post thumbnail

<?php 
/*
Template Name: Blog
*/
?>
<?php get_header(); ?>

<div id="container">
<div id="content" role="main">

<article>

<?php // Display blog posts on any page @ http://m0n.co/l
$temp = $wp_query; $wp_query= null;
$wp_query = new WP_Query(); $wp_query->query('showposts=5' . '&paged='.$paged);
while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

<h2><a href="<?php the_permalink(); ?>" title="Read more"><?php the_title(); ?></a></h2>
              <?php if ( has_post_thumbnail() )
                 {
           the_post_thumbnail('medium');
                 } ?>
<?php the_excerpt(); ?>

<?php endwhile; ?>

<?php if ($paged > 1) { ?>

<nav id="nav-posts">
<div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
<div class="next"><?php previous_posts_link('Newer Posts &raquo;'); ?></div>
</nav>

<?php } else { ?>

<nav id="nav-posts">
<div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
</nav>

<?php } ?>

<?php wp_reset_postdata(); ?>

</article>
      </div>
    </div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

This template is common for all themes you just rename based on the theme. 
Below is the code for different types of thumbnail display options which very helpful when you create a blog with images.


// thumbnail different size

// without parameter -> Post Thumbnail (as set by theme using set_post_thumbnail_size())
the_post_thumbnail();

the_post_thumbnail('thumbnail');       // Thumbnail (default 150px x 150px max)
the_post_thumbnail('medium');          // Medium resolution (default 300px x 300px max)
the_post_thumbnail('large');           // Large resolution (default 640px x 640px max)
the_post_thumbnail('full');            // Original image resolution (unmodified)

the_post_thumbnail( array(100,100) );  // Other resolutions

Read More»

What is Angular Js? And Why we use it?

What is Angular Js? And Why we use it?

Angular js is Javascript Framework ( the self-proclaimed “superheroic JavaScript framework” ).
1. Unit Testing is ready
2. Write less code
3. Flexibility with filters
4. Behaviour with directives
5. Data models
6. Mvc Architecture

Next post we see the more details with programming 

Read More»