CMS vs Framework? Which is better to choose?

CMS vs Framework. A clear and detailed comparison. Before comparing them you have to be clear about what you need, how much your budget is, how much you know about web technologies, etc. This comparison mostly depends on these parameters.

Content:

CMS and Framework

What is the framework? A framework is a combination of libraries which provides the specific features and functionalities of the libraries. Just have look this video:

Nowadays the most popular web frameworks are Laravel, Django, Ruby on Rails, etc. With these frameworks, you can build high-quality web applications.

CMS means a Content Management System just like a web application which helps to develop a website easily & manage the content from the back-end. The most popular CMSes are WordPress, Drupal, Joomla, Magento, etc. If you want to know more about CMS see this article.

The Comparison of CMS vs Framework :

Type of websites can be built:

Nowadays you can build any type of website with a CMS. Though these CMS starts with specific features their flexibility has made them so versatile. For example, WordPress starts for blogging purpose. But now you can build any type of website with it.

With a framework, you also can build any type of website but you will need more preparation for it. On a framework there may only the basic features. You will need to configure and make advanced features by yourself.

Admin panel or Dashboard:

Admin panel or dashboard

On a CMS you will have a built-in dashboard from where you can control your website and also the content. An admin panel gives the most helpful and pleasuring flexibility.

And also from a framework, you may get an admin panel or dashboard if the developers develop a custom admin panel for you. And of course, you may be charged for it.

Security:

This an important issue. On a CMS you may use third-party plugins which may make a security issue. But there are also many advanced free plugins which can make your server & also the content more secure. Just you have to use the plugins carefully.

On a framework, the security totally depends on your development skills or your developer’s service. They can make it more secure or vulnerable.

Cost

A CMS makes your development work more easy & less time consuming than the websites with frameworks. As less time & less labour is needed so the cost also is less. But if you want to make a custom website with custom UI & functionality it may take much budget. But in this case, you will get a quality full website.

In the case of a framework, there is less scope to minimize time & labour. As a result, the cost will be higher than CMS.

Developers Availability:

You can build a website fully without having any developer. But this requires time and labour. If you have enough time you can build your website by yourself. But if you need a custom and a quality full website you should take the help of experts. And the interesting thing is that there are thousands of expert developers/designers to help you.

In the case of a framework, you can’t build your website by yourself if you aren’t a techy person & also a programmer. And you may need to hire a team or company rather than a single developer which makes the work more costly. And the availability of the expert team is less. But an expert team or company can give you a better experience.

Free Components:

There are thousands of free themes and plugins for your website. You can change the visual design & also can add functionality without anyone’s help.

There are less free components for the framework. If you want to change anything or add anything you will need the help of a developer.

Conclusion:

Everything has its own value. Everything about the CMS and framework is now clear to you. Choose the best one for your own use-case.

What is CMS – Content Management System?

Content Management System

Content

What CMS stands for?

Here the full form of CMS is Content Mangement System. CMS is a web-based software application. It can be used to create websites and also to manage the creation and modification of digital content.

Structure of Content Management System

A CMS typically has major tow parts. One is a content management application ( CMA ) or dashboard or admin panel. This part is for the website owner or admin or for the users who have access. From here anyone can manage the website and content without having so much technical knowledge. And the other part is content delivery application ( CDA ) which compiles the content and updates the website.

Common Features of Content Management System – CMS

The common features of any CMS are:

  • Admin Panel or Dashboard
  • Theme changing feature
  • Adding plugins for specific functionality
  • Adding a new page template
  • Uploading any type of media content
  • Managing subscriptions
  • User settings
  • Adding widgets
  • Permalinks settings
  • Discussion or commenting settings
  • Menu settings
  • And many more…

Actually a content management system provides so many features. So a normal public without having much technical knowledge can manage his/her website. And there are so many plugins for these CMS that almost any functionality can be provided to the visitors.

Content Management Systems - CMS

There are so many content management systems. Among them the most popular cms are:

  • WordPress
  • Joomla
  • Drupal
  • Magento (for eCommerce stores)
  • Squarespace
  • Wix
  • TYPO3

Among these CMS WordPress is the most used and popular CMS because of it’s flexibility. WordPress maintains over a 60.8% market share on websites with a known content management system.

What Kinds of Websites Can be Built with these Content Management Systems

Nowadays these content management systems are so flexible. Any type of websites can be built with it. Though they may start with specific functionality for a specific purpose. For example, WordPress mainly starts its journey for blogging purpose. But nowadays it can do anything. It can be used to power:

  • Blogging website
  • E-commerce store
  • Membership website
  • Forums
  • Social network
  • Online courses
  • Gallery
  • Portfolio
  • Non-profit
  • Static website
  • Etc.

How to Build a Website with a Content Management System – CMS

It’s the easiest way to build a website with CMS and the steps are as below:

  • Buy a hosting service with a domain name from any hosting service provider. Most of the hosting providers provide cPanel from where you can install your desired CMS. For example, Godaddy, Bluehost, HostGator, SiteGround, etc.
  • Then install any theme. There many free and premium themes.
  • Install the necessary plugins
  • And start to upload your content.
  • It’s done.

References

JSON & AJAX tutorial for beginners – Make a Clear Concept

What is JSON & AJAX?

JSON & AJAX are the terms of javascript. JSON is a data format used for handling data with the server. We can store & receive data from the server easily. And AJAX is used for receiving data from the server on the browser without reloading or refreshing the browser.  Before starting to learn JSON & AJAX let learn a bit about object and array.

What is an Object?

First, see this code.

var myPet = {
    "name": "Meow",
    "species": "cat",
    "favFood": "milk"
}

Here myPet is an object. Now how to get the values of this object?

myPet.name

myPet.favFood

Here myPet.name will return the pet’s name “Meow” & myPet.fevFood will return “milk”.

What is an array?

Again see this code at first.

var myFavColors = ["blue", "green", "purple"];

Here myFavColors is an array. It’s writing pattern is with comma-separated value inside square brackets. Then how to access the value of this array?

myFavColors[1]

myFavColors[0]

myFavColors will return the second value “green”. Because array starts from 0. So when we need to get the first value we have to write myFavColors[0].

How to write an array of object?

On our example array paste our first object two or three times & separate them with comma. See below…

var myFavColors = [
 {
    "name": "Meow",
    "species": "cat",
    "favFood": "milk"
 },
 {
    "name": "Gheu",
    "species": "dog",
    "favFood": "milk"
  }
];

Here myFavColors is an array of object. You will be surprised that you have already learned JSON. JSON stores data as object notation. Its full name is JSON ‘= Javascript Object Notation. How to access this value? First, access your comma-separated array like this myFavColors[1] and then reach to the object like this myFavColors[1].favFood. This will return “milk”. Okay? ( Note: Starts from 0 ).

myFavColors[1].favFood

Before learning AJAX know a little about XMLHttpRequest.

What is XMLHttpRequest?

All modern browsers have a built-in tool( object ) to request data from the server. With this tool, we can send or receive data from the server without page reloading. Let’s see an example. Paste this snippet to your .js file. And view the console. I will explain it.

var yourReqst = new XMLHttpRequest();
yourReqst.open('GET', 'https://learnwebcode.github.io/json-example/animals-1.json');
yourReqst.onload = function(){
    console.log(yourReqst.responseText);
};
yourReqst.send();

On the first line, we have created a variable with a new instance of XMLHttpRequest. Then we have called JSON data with the open() method. The open() method accepts two parameters. The first for send or receive data. GET for receiving & POST for sending data. And the second is the URL from where you want to receive data. Here we have used GitHub data. You can see this from here.

The same data you will see on your console. On the third line, we have called a function with on loading the page. And on the last line, we have used the send() method the send the request.

Let’s see how to call specific data. To do this save ours to a variable. Then call the array on console.log().

var yourReqst = new XMLHttpRequest();
yourReqst.open('GET', 'https://learnwebcode.github.io/json-example/animals-1.json');
yourReqst.onload = function(){
    var yourData = yourReqst.responseText;
    console.log(yourData[0]);
};
yourReqst.send();

What do you see? Just a square bracket? Yes, you are right. Our “yourData” variable stores the data as an array. But inside the array, it stores the data just a plain text string. The first value of yourData is ‘ [ ‘ . So it’s showing this. But we don’t want this. We want the name. To get we need to tell the browser that we are calling a JSON data. How will we tell the browser it’s a JSON data? Just wrap the yourReqst.responseText with JSON.parse. See below…

var yourReqst = new XMLHttpRequest();
yourReqst.open('GET', 'https://learnwebcode.github.io/json-example/animals-1.json');
yourReqst.onload = function(){
    var yourData = JSON.parse(yourReqst.responseText);
    console.log(yourData[0]);
};
yourReqst.send();

View your console. See the name? Congratulations!!! You have learned the first bit of AJAX.

What AJAX stands for?

AJAX stands for Asynchronous JavaScript And XML. Here asynchronous means without reloading or refreshing. And XML is a data format something like JSON. But here we are not using XML. We are using JSON. That means AJAJS :). JSON is becoming a more popular data format than XML.

So you can say, then what about XMLHttpRequest? Yes, we will still use it. Because the browsers still use also for JSON data as a built-in tool.

Let’s see how to show the content on the front-end not on the console. Add a button with an id btn & add div with an animal-info. This div will contain the animal’s info.

<button id="btn">Fetch Info for 3 New Animals</button>

<div id="animal-info"></div>

And at last, add this snippet to your js file.

var containerDiv = document.getElementById("animal-info");
var btn = document.getElementById("btn");

btn.addEventListener("click", function(){
    var yourReqst = new XMLHttpRequest();
    yourReqst.open('GET', 'https://learnwebcode.github.io/json-example/animals-1.json');
    yourReqst.onload = function(){
        var yourData = JSON.parse(yourReqst.responseText);
        renderHTHL(yourData);
    };
    yourReqst.send();
})

function renderHTHL(any_name){
    var htmlString = "";
    for (i = 0; i < any_name.length; i++){
        htmlString += "<p>" + any_name[i].name + " is a " + any_name[i].species + ".</p>"   
    }
    containerDiv.insertAdjacentHTML('beforeend', htmlString);
}

Explanation: Here we added an event listener. When the button will be clicked the renderHTML function will be fired. This function holds a loop. The insertAdjacentHTML method will insert the values before the end of containerDiv.

Now click on the button. You will see the names and their respective species.

json & ajax tutorial

Thank you.

.

Speed Up Your Website Easily in 2019 – WordPress

Why should Speed Up Your Website?

There are so many important reasons to speed up your site. One is that Google cares about it. If your site is speedy enough your rank will high on search results. So if your site is not speedy enough I will not get new visitors. And another main reason is that when your existing visitors visit your site if they get it as loading….. loading….. you will lose them soon. These two reasons are enough for taking care of your site’s speed up. How to check the website speed? Use the sites to check speed. They are reliable but don’t over trust them. Use the actual devices.

  1. Gtmetirx.com
  2. tools.pingdom.com/
  3. Google

So how to Speed Up Your Website?

I said easily. So it will be easier. I will suggest some manual works to ensure the result & also use some plugin. Just follow these steps.

Minify All CSS & JS files

Check your .css & .js files on your theme. If they are minified then okay, otherwise minify them. There are many websites that help to minify the files. Just search for them.

And use asynchronous files.

Reduce the HTTP Requests Number

Combine your all .css files to one & all .js files to one. But now you have to be a little careful about that everything on your site is working fine. I will suggest you do it one by one. Create a new file & put one file & check the site. If any file creates any problem just skip it & call it as a single file. Here you should care about the priority of the files.

Optimize the Images

Optimize the images manually. You can use online tools. Tinypng.com is a nice one.

Here one thing, when you test on google page speed insight, they will suggest the optimized images. Be careful to take these images. Google gives the images only for the single page which you are testing. If the images are used on other pages with different sizes it will create the problem. And also sometimes it decreases the quality to too low and sometimes doesn’t count the images that could be optimized.

Don’t use a large-sized image that you don’t need. Change the image size as you need on webpages & then optimize.

Gzip Compression

We will use the w3 Total Cache plugin. It cares about Gzip compression. But sometimes it may not work. Use the code below the compress the text. Add the snippet to your .htaccess file on the Apache server.

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Or if you are on NGINX add this snippet to Nginx.conf :

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;

Browser Caching :

Use any good caching plugin. If you are not using the w3 Total Cache plugin I will suggest it. It has many features that work fine active installation 1+ million & 26k+ 5 star review. There is an option for Gzip compression.

Lazy Load :

Use a lazy loader plugin. It will decrease the page loading size extremely. How does it work? When you will load the page, it will not load the full page. It will load only the visible part of the screen. When the visitor will scroll down, it will load the relevant part. You can you BJ Lazy Load plugin.

Use CDN Service :

CDN - Speed up your website

Content Delivery Network( CDN ) will do a lot of work for you. If you need a high-speed website from all over the world, don’t forget to use the CDN service. The site testing tools may show you the high speed of your website, but the actual user experiences can not reflect all over the world.

The CDN service will serve your content from their different networks across the world. There is a free feature on Cloudflare. But as far I know the recent experience is not so good. So you should choose a premium one. There is many CDN service provider. Just make search & choose the best one which matches your budget.

More Thoughts for Speeding Up Your Website :

If your main server is too poor, you may need to change it to a better one to speed up your website.

If you think you need help to speed up your website feel free to contact me. I will assist you with my experiences & skills. First I will find the problem with your website and then will solve the problem.

Service Fee: Only $60

Create a Custom Widget in WordPress Theme or Plugin

What is a widget in WordPress?

WordPress widgets are the combination of some code which is made for a specific purpose but use dynamically. You can create a custom widget in WordPress & display in different places of your theme. WordPress provides many default widgets. To view them go to admin dashboard Appearance >> Widgets. You will see here Archives, Calendar, Categories, Meta, and many more. These are the WordPress default widget. You can use them on your sidebar. If your theme doesn’t have sidebar you have to create it. It’s very easy. I will show later.

How to Create a Custom Widget?

Sometimes we may need to create our own widget & display them with our own styles. For this purpose, WordPress provides Widgets API to create custom widget. To follow the official documentation follow this link. Here let’s see how to create a custom widget.

class em_custome_Widget extends WP_Widget {

    public function __construct() {
        // Here the actual widget processes
    }

    public function form( $instance ) {
        // Here codes for taking the inputs from admin widget area
    }

    public function update( $new_instance, $old_instance ) {
        // Here codes for saving the data to database which was taken from the upper section
    }

    public function widget( $args, $instance ) {
        // Here codes for displaying the outputs on your theme
    }

}

This code creates the widget but it is still not registered. So it needs to be registered. Here we need to use ‘widgets_init’ action hook.

function em_custom_widgets_register() {
  register_widget( 'em_custome_Widget' );
}
add_action( 'widgets_init', 'em_custom_widgets_register' );
If want to create your own sidebar for displaying the widget to a specific location you will need to create your own sidebar. Paste this snippet to your functions.php.

  function em_custom_sidebar($id){
    register_sidebar(array(
      'name' => 'Your Sidebar',
      'id' => 'sidebar',
      'before_widget' => '<div class="block side-widget">',
      'after_widget' => '</div>',
      'before_title' => '<h3>',
      'after_title' => '</h3>'
    ));    
  }
  add_action('widgets_init', 'em_custom_sidebar');

Custom Recent Posts Widget :

Let’s think we need to create our own recent posts widget and style it as we want.

class em_Widget_Recent_Posts extends WP_Widget {

  /**
   * Sets up a new Recent Posts widget instance.
   */
  public function __construct() {
    $widget_ops = array(
      'classname' => 'em_widget_recent_entries',
      'description' => __( 'Your site&#8217;s most recent Posts.' ),
      'customize_selective_refresh' => true,
    );
    parent::__construct(
      'em_recent_post_id', // Base ID
      __( 'EM Recent Posts', 'em_recent_post_widget' ), // Name
      array( 'description' => __( ' &  visitors will calculate the total cost.', 'em_cost_calculator_widget' ), ) // Args
    );
  }

  /**
   * Outputs the settings form for the Recent Posts widget.
   */
  public function form( $instance ) {
    $title     = isset( $instance['title'] ) ? esc_attr( $instance['title'] ) : '';
    $number    = isset( $instance['number'] ) ? absint( $instance['number'] ) : 5;
    $show_date = isset( $instance['show_date'] ) ? (bool) $instance['show_date'] : false;
?>
    <p><label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
    <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $title; ?>" /></p>

    <p><label for="<?php echo $this->get_field_id( 'number' ); ?>"><?php _e( 'Number of posts to show:' ); ?></label>
    <input class="tiny-text" id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="number" step="1" min="1" value="<?php echo $number; ?>" size="3" /></p>

    <p><input class="checkbox" type="checkbox"<?php checked( $show_date ); ?> id="<?php echo $this->get_field_id( 'show_date' ); ?>" name="<?php echo $this->get_field_name( 'show_date' ); ?>" />
    <label for="<?php echo $this->get_field_id( 'show_date' ); ?>"><?php _e( 'Display post date?' ); ?></label></p>
<?php
  }

  /**
   * Handles updating the settings for the current Recent Posts widget instance.
   */
  public function update( $new_instance, $old_instance ) {
    $instance = $old_instance;
    $instance['title'] = sanitize_text_field( $new_instance['title'] );
    $instance['number'] = (int) $new_instance['number'];
    $instance['show_date'] = isset( $new_instance['show_date'] ) ? (bool) $new_instance['show_date'] : false;
    return $instance;
  }

  /**
   * Outputs the content for the current Recent Posts widget instance.
        */
  public function widget( $args, $instance ) {
    if ( ! isset( $args['widget_id'] ) ) {
      $args['widget_id'] = $this->id;
    }

    $title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : __( '' );

    /** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */
    $title = apply_filters( 'widget_title', $title, $instance, $this->id_base );

    $number = ( ! empty( $instance['number'] ) ) ? absint( $instance['number'] ) : 3;
    if ( ! $number ) {
      $number = 3;
    }
    $show_date = isset( $instance['show_date'] ) ? $instance['show_date'] : false;

    /**
     * Filters the arguments for the Recent Posts widget.
                */
    $r = new WP_Query( apply_filters( 'widget_posts_args', array(
      'posts_per_page'      => $number,
      'no_found_rows'       => true,
      'post_status'         => 'publish',
      'ignore_sticky_posts' => true,
    ), $instance ) );

    if ( ! $r->have_posts() ) {
      return;
    }
    ?>

      <div class="lpost">
        <div class="side-tit">
          <h6 class="ctit">
            <?php
              if ( $title ) {
                echo  $title;
              }
            ?>
          </h6>
        </div>
        <?php foreach ( $r->posts as $recent_post ) : ?>
          <?php
          $post_title = get_the_title( $recent_post->ID );
          $title      = ( ! empty( $post_title ) ) ? $post_title : __( '(no title)' );

          $em_post_thumb = get_the_post_thumbnail( $recent_post->ID );
          $em_thumbnail      = ( ! empty( $em_post_thumb ) ) ? $em_post_thumb : __( '(no title)' );
          ?>
        <div class="item">
          <a href="<?php the_permalink( $recent_post->ID ); ?>">
            <div class="sm-img">
              <?php echo $em_thumbnail ; ?>
            </div>
            <div class="info">
              <h5><?php echo $title ; ?></h5>
              <?php if ( $show_date ) : ?>
                <span><?php echo get_the_date( '', $recent_post->ID ); ?></span>
              <?php endif; ?>

            </div>
          </a>
        </div>    
        <?php endforeach; ?>                
      </div>

    <?php
    echo $args['after_widget'];
  }

}
function emotahar_recent_post_widgets() {
  register_widget( 'em_Widget_Recent_Posts' );
}
add_action( 'widgets_init', 'emotahar_recent_post_widgets' );

This will show on your widget like this :

custom widget

Add your CSS for your own styling.

I added my styling.

custom widget

That’s it. You have created a custom widget in WordPress Thank you.