Showing posts with label Programming. Show all posts
Showing posts with label Programming. Show all posts

The Difference Between Front-End, Back-End, And Full-Stack Developer


The Difference Between Front-End, Back-End, And Full-Stack Developer

Developer outline can be regarded as a trained programmer. Not only understand about coding, but he also designs in accordance with a provision or requirement. Then he also performs optimized performance, security and others. In the world of Web Developer we often hear Front End Developer, Back End Developer and Full Stack Developer, here is the meaning of each.

1. Front End Developer.

Front-End Developer is a programmer job that only take care of its appearance, such as web designing, arranging layout and layout at Front End part of a website is part which directly seen by user. Users can also directly interact with the User Interface on a website. This section is built using HTML, CSS and JavaScript. HTML (HyperText Markup Languange) is the backbone of the web. All websites you visit are created using HTML. HTML determines the structure and content of the website. The last version of HTML is HTML5. CSS (Cascading Style Sheets) is a programming language that controls the appearance of HTML on web pages. CSS determines the colors, fonts, background images, and even how the overall look of a website. The last version of CSS is CSS3, which adds features like interactivity and basic animation. We can create a website using only HTML and CSS, but what really will make your website look good is JavaScript. With JavaScript, you can do many things, such as interactivity, more complex animations, and even you can also create Fully Featured Web Application. Skill required to become a Front-End Developer that is HTML, CSS, Javascript, Git, jQuery and other Java Script Library. A Fron-End Developer does not need to understand the workflow and algorithm of a web, just have to understand design and put layout is as attractive as possible.

2.  BackEnd Developer.

Back-End Devloper is a programmer job that takes care of the back of the screen from a website or works on the Behind The Scenes website and has an edge over front-end technology for more specific projects like workflow, logic and web algorithms. Back-End Developer task is only the processor, then receive data from the input and process the data received from the input, then send it and displayed to the user through the browser. Skills that must be needed to become a Back-End Developer is to master the language such as PHP, ASP and JSP. PHP is a Server Side language that is popular and widely used among developers. Most content management systems are built through Back-End Programming, for example in complex web applications. Learning coding will teach you to find the best solution for various problems, and sometimes Back End Programming is part of the solution. To build a website that runs well, Back-End Developer usually works with Front-End Developer.



Full-Stack Developer is a programmer who takes care of the tasks of Front End and Back End Developer. Full-Stack Developer is able to design the look and layout of a website (like a Front-End Developer) and able to understand the path of workflow and algorithm of a website. To be a Full-Stack Developer does not seem easy, the article you should be able to master the skills of a Front End and Back End Developer. The current technological developments make the difference between Front End and Back End Development becoming less. Many things that previously could only be done in the Back End, can be done also through the Front End. This makes the more developers who master the Front End and Back End Programming at once. At this time, being a Full Stack Developer also adds your special value in the eyes of the company. However, being a Full Stack Developer does not mean having to work on the whole code either Front End or Back End of a website. Most Full Stack Developers still spend time on one part of Programming course. However, the advantage of Full Stack Developer is that they can analyze problems in both parts of Programming. There are also some Full Stack Developers who do everything themselves, usually this happens if they are Freelance or the only Developer working on a Project. The most interesting part of Web Development is its evolving nature. What is meant as Front End or Back End at the moment, could change drastically in the next few years. Learning both will make you more value, adaptable, and forward-looking.

Full-Stack Developer


About the Full-stack Developer

One of the specialties of the software engineer profession is a full-stack developer. There are so many definitions of full-stack, which I want to discuss is a full-stack developer in the world of web.

The work cycle in web application development can be simplified like the following sequence:
1. Interface design
2. Design slicing process to HTML, CSS, and JS
3. Development of backend / Content management system
4. Integration interface with back end
5. Deploy the application to the server

Point # 1 is done by the designer.
Point # 2 by front-end engineer.
Point # 3 and Point # 4 by back-end engineer.
Point # 5 by deployment officer, system admin, or sometimes back-end engineer as well.

Full-stack developers are the ones who work on # 2 to # 5 or even work on # 1 points, that is design.

So, the formal definition is someone who understands how a pile of systems works and is able to implement them. If the English term, "Jack of all trades".

Advantages of Full-Stack Developer:

Saves Resources.
Of course, with a full-stack developer, we can save resources. We do not need front-end developers or even designers. Of course, this developer fits perfectly with a very limited resource environment, such as startup. To get a technical co-founder who is a full-stack developer is a blessing.

Flexibility.
A broad and wide understanding of a system is certainly useful when other places are resource-poor. Suppose there is a project that is in need of more back-end developers. He can directly help him. No wonder a full-stack developer is very easy to get a job because many companies want full-stack developers on their team.

Disadvantages of Being FullStack Developer:

In fact, finding a good full-stack developer is very difficult. indeed the difficulty level to become a good full-stack developer is much more difficult than good specialization.

HOW TO BE A "GOOD" WEB DESIGNER


What is Web Design?

Web design is the art and process of creating single and entire web pages, and can involve the aesthetics and mechanical ins and outs of a website operation, although the main thing is to focus the look and feel (what the site sees and feels).

Some aspects covered in web design include:
• Creating animations and graphics
• Color selection
• Selection of fonts
• Navigation design
• Creating html or xml animation, java script, programming, and ecommerce development
• Creating content

What should be mastered by a web designer? 

Things that must be mastered by a web designer is as follows.

>ART OUR ARTIFICIAL OBJECTIVES such as:
• explore the imagination and explore the taste of art that is poured in the web page
• able to choose a good color and combine it with other colors to create a matching color blend
• able to make good sketches of web page form
• able to combine imagination or original ideas with the idea of ​​the client who ordered web design
• able to place multimedia components on certain parts so that web pages become interesting

>SUPPORT TOOLS SUPPORT PLANNING PLANS such as:
• Web layout apps, such as Macromedia Dreamweaver, Microsoft Fontpage, Edit Plus, PHP Edit, etc.
• Animation Maker apps like Macromedia Flash, Swish, etc.
• Graphic design applications like Corel Draw, Photoshop, Gimp, etc.

>ENGINEERING TECHNIQUES MAKE INTERFACES WEB

>LANGUAGES OF PROGRAMMING LANGUAGES

>WEBSITE FUNCTIONS
Before designing a web, web designers should know and understand in advance some of the functions of a website so that the design is made in accordance with the functions made. In general, the function of a web is as follows:
• Communication Functions
Sites that have this function in general are dynamic web. Because made using web programming (server side) then equipped with facilities that provide communication functions such as web mail, contex form, chat, forums, etc. Facebook is one website that serves as a medium of communication.
• Information Function
This web is more emphasis on quality of content because the purpose of this site is to convey its contents. We recommend this type of web contains text and graphics that can be downloaded quickly. Limit use of motion animation on this type of web. Facilities that provide information function are news, profile, company, library, reference, etc.
• Entertaiment function
This type of web is a means of entertainment, so animated images and motion elements can improve the quality of design presentations, although it should still consider the download speed. Some facilities from the web that have entertaiment function such as online games, online movies, online music, etc. Youtube is one of the web with entertaiment function.
• Transaction Function
This website can be used as a means of business transactions, both goods and services. This site connects consumer companies and specific communities through electronic transactions. Payments can use ATM, transfer, or direct. An example is tokobagus.com.
After understanding the above description, which should be studied next is to know the basic science of HTML or Hyper Text Markup Language.

Hope this helpful

ANOTHER VIEW OF NODE.JS


What is Node.js?

Node.js is not a programming language and not a framework, Node.js is a JavaScript runtime built in JavaScript engine v8, the same engine used by Google Chrome, which makes Google Chrome powerful and very fast.

What is runtime?

Node makes JavaScript runs single process in your machine, v8 engine written with c ++ makes JavaScript and compile it into machine language that fast and understandable by computer.

Node makes JavaScript into server side technology, like PHP, Rails, Java, Python etc.

Node is Cross Platform Technology, which runs on all Operating System, like Windows, Mac and Linux.

Nodes build large-scale applications very quickly and support real-time applications.

If you have enough experience with Node.js will make you on the Top Skill ranks that much needed by today's technology in the world.

What can we do with Node?

• Manipulation of files on the filesystem.
• Build web servers.
• Query the database (MongoDB, MySQL, Postgres, Redis etc)
• Powerful APIs & Backend interfaces.
• Powerful server side apps with render view.
• Real-time service.

May be useful

Google reCaptcha Application In Php Codeigniter


reCAPTCHA is a free CAPTCHA service that helps digitize books, newspapers and radio broadcasts in the past. CAPTCHAs are usually used to avoid bots and spam attacks on a website.

Google inc. The largest internet company has made CAPTCHA services to facilitate the developers to secure / avoid spam attacks on websites built.

On this article we will applicate CAPTCHA into a PHP framework that is CodeIgniter. We only need 2 php files, create a new file named recaptcha.php in folder Application/config and write the following code:

<?php
defined('BASEPATH') OR exit('No direct script access allowed'); 
/*
* Recaptcha configuration settings
*
* recaptcha_sitekey: Recaptcha site key to use in the widget
* ‎
* recaptcha_secretkey: Recaptcha secret key which is used for communicating between your server to Google's
* ‎
* lang: Language code, if blank "en" will be used
* ‎
* recaptcha_sitekey and recaptcha_secretkey can be obtained from https://www.google.com/recaptcha/admin/
* ‎
* ‎ Language code can be obtained from https://developers.google.com/recaptcha/docs/language
* ‎
*/
$config['recaptcha_sitekey'] = "6Le89gYUAAAAAIENtNE52gZXRZbtLAOA7caL2vQY";
$config['recaptcha_secretkey'] = "6Le89gYUAAAAACwspqCQaB17kqgaUd1juP7eURwP"";
$config['lang'] = "id";

At the code on the top have 3 config is :
$config['recaptcha_sitekey'] $config['recaptcha_secretkey'] $config['lang']

To get sitekey and secretkey you can register at following link: https://www.google.com/recaptcha/admin select reCAPTCHA V2, then input your website domain. After that create a new file named Recaptcha.php in folder Application/libraries, write this following code:

<?php 
/*
* CodeIgniter NO Captcha ReCAPTCHA a.k.a reCAPTCHA Version 2.0 library
* ‎
* This library is based on official reCAPTCHA library for PHP
* ‎
* https://github.com/google/ReCAPTCHA *
*/
defined('BASEPATH') OR exit('No direct script access allowed');
class ReCaptcha {
     private $signup_url = "https://www.google.com/recaptcha/admin";
     ‎private $_siteVerifyUrl = "https://www.google.com/recaptcha/api/siteverify?";
     ‎private $_secret, $_sitekey, $_lang;
     ‎private $_version = "php_1.0";
     ‎function __construct() {
     ‎     $this->ci = & get_instance();
     ‎     $this->ci->load->config('recaptcha', TRUE);
          ‎if ($this->ci->config->item('recaptcha_secretkey', 'recaptcha') == NULL || $this->ci->config->item('recaptcha_secretkey', 'recaptcha') == "") {
          ‎die("To use reCAPTCHA you must get an API key from <a href='" . $this->signup_url . "'>" . $this->signup_url . "</a>");
          ‎}
          ‎if ($this->ci->config->item('recaptcha_sitekey', 'recaptcha') == NULL || $this->ci->config->item('recaptcha_sitekey', 'recaptcha') == "") {
          ‎die("To use reCAPTCHA you must get an API key from <a href='" . $this->signup_url . "'>" . $this->signup_url . "</a>");
          ‎}
          ‎$this->_secret = $this->ci->config->item('recaptcha_secretkey', 'recaptcha');
          ‎$this->_sitekey = $this->ci->config->item('recaptcha_sitekey', 'recaptcha');
          ‎if ($this->ci->config->item('lang', 'recaptcha') == NULL || $this->ci->config->item('lang', 'recaptcha') == "") {
          ‎$this->_lang = 'en';
          ‎} else {
          ‎$this->_lang = $this->ci->config->item('lang', 'recaptcha');
          ‎}
}

/*
* Function to convert an array into query string
* ‎
* @param array $data Array of params
* ‎
* @return String query string of parameters
*/
private function _encodeQS($data) {
     $req = "";
     ‎foreach ($data as $key => $value) {
     ‎     $req .= $key . '=' . urlencode(stripslashes($value)) . '&';
     ‎}
     ‎return substr($req, 0, strlen($req) - 1);
}

/**
* HTTP GET to communicate with reCAPTCHA server
* ‎
* @param string $path URL to GET
* ‎
* @param array $data Array of params
*
* ‎ @return string JSON response from reCAPTCHA server
*/
private function _submitHTTPGet($path, $data) {
     $req = $this->_encodeQS($data);
     ‎$response = file_get_contents($path . $req);
     ‎return $response;
‎}

‎ /**
*
* ‎Function for rendering reCAPTCHA widget into views
* ‎
* Call this function in your view * @return string embedded HTML
*/
‎public function render() {
     $return = '<div class="g-recaptcha" data-sitekey="' . $this->_sitekey . '"></div>
     ‎<script src="https://www.google.com/recaptcha/api.js?hl=' . $this->_lang . '" async defer>
     ‎</script>';
     ‎return $return;
}

/**
* Function for verifying user's input
* ‎
* @param string $response User's input
* ‎
* @param string $remoteIp Remote IP you wish to send to reCAPTCHA, if NULL $this->input->ip_address() will be called
* @return array Array of response
*/
public function verifyResponse($response, $remoteIp = NULL) {
     if ($response == null || strlen($response) == 0) {
     ‎// Empty user's input
     ‎$return = array( 'success' => FALSE, 'error_codes' => 'missing-input' );
     ‎}
     ‎$getResponse = $this->_submitHttpGet( $this->_siteVerifyUrl, array( 'secret' => $this->_secret, 'remoteip' => (!is_null($remoteIp)) ? $remoteIp : $this->ci->input->ip_address(), 'v' => $this->_version, 'response' => $response ) );
     ‎$answers = json_decode($getResponse, TRUE);
     ‎if (trim($answers ['success']) == true) {
     ‎// Right captcha!
     ‎$return = array( 'success' => TRUE, 'error_codes' => '' );
     ‎ } else {
     ‎// Wrong captcha!
     ‎$return = array( 'success' => FALSE, 'error_codes' => $answers['error-codes'] );
     ‎‎} return $return;
‎  }
‎}

Then we will running and testing our reCAPTCHA, create a new controller named Contact.php in folder Application/controllers and the following code is below:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Contact extends CI_Controller {
    public function __construct() {
    ‎parent::__construct();
    ‎//load library
    ‎$this->load->library(array('recaptcha','form_validation'));
    ‎}
    ‎public function index() {
    ‎     $data = array( 'recaptcha_html' => $this->recaptcha->render() );
    ‎//set form validation
    ‎$this->form_validation->set_rules('username', 'Username', 'required');
    ‎$this->form_validation->set_rules('password', 'Password', 'required');
    ‎$this->form_validation->set_rules('g-recaptcha-response', '<strong>Captcha</strong>', 'callback_getResponseCaptcha');
    ‎//set message form validation
    ‎$this->form_validation->set_message('required', '{field} is required.');
    ‎$this->form_validation->set_message('callback_getResponseCaptcha', {field} {g-recaptcha-response} must filled. ');
    ‎if($this->form_validation->run() == TRUE) {
    ‎//if valid condition
    ‎}else{
    ‎$this->load->view('recaptcha');
    ‎ }
    ‎} public function getResponseCaptcha($str) {
    ‎$this->load->library('recaptcha');
    ‎$response = $this->recaptcha->verifyResponse($str);
    ‎if ($response['success']) { return true; } else {
    ‎$this->form_validation->set_message('getResponseCaptcha', '%s is required.' );
    ‎return false;
    ‎}
}
}

Create a new file named recaptcha.php in folder Application/views and write the following code:

<div class="container">
<form class="form-signin" accept="utf-8" action="<?php echo base_url() ?>contact">
<h2 class="form-signin-heading">Please sign in</h2>
‎<div class="form-group">
‎<label for="inputEmail" class="sr-only">Username</label>
‎<input type="text" name="nama" class="form-control" id="nama" placeholder="Masukkan Username Anda" value="<?php echo set_value('username') ?>" autocomplete="off">
‎<?php echo form_error('username'); ?>
‎</div>
‎<div class="form-group">
‎<label for="inputPassword" class="sr-only">Password</label>
‎<input type="password" name="nama" class="form-control" id="nama" placeholder="Masukkan Username Anda" value="<?php echo set_value('password') ?>" autocomplete="off">
‎<?php echo form_error('password'); ?>
‎</div>
‎<div class="form-group">
‎<label>Recaptcha</label>
‎<?php echo $recaptcha_html;?>
‎<?php echo form_error('g-recaptcha-response'); ?>
‎</div>
‎<div class="checkbox">
‎<label>
‎<input type="checkbox" value="remember-me"> Remember me
‎</label>
‎</div>
‎<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
‎</form>
‎</div>


Now run and test your project in localhost
close